How iview/iview works
iView is a Vue-based UI component toolkit. A host application installs the package through its public entry point, then uses components to turn user interactions into UI state changes, events, and rendered controls. Its capabilities span navigation/layout, data entry and selection, date/time and color picking, data display, feedback, and overlays. The graph emphasizes the evidenced entry point and representative component collaborations; other documented and tree-visible component families remain represented. Unsampled subsystem links are omitted rather than inferred.
Main entry points: index.js Public component API · input.vue Form controls · picker.vue Date and time · color-picker.vue Color picker
Components 29
Package entry
- Public component API
src/index.js
Inputs and selection
- Form controls
src/components/input/input.vue - Numeric input
src/components/input-number/input-number.vue - Select and options
src/components/select/select.vue - Select dropdown
src/components/select/dropdown.vue - Cascader selection
src/components/cascader/cascader.vue - Date and time
src/components/date-picker/picker.vue - Color picker
src/components/color-picker/color-picker.vue - Button
src/components/button/button.vue
Data presentation
- Data table
src/components/table/table.vue - Table header
src/components/table/table-head.vue - Tree view
src/components/tree/tree.vue - Transfer list
src/components/transfer/transfer.vue - File upload
src/components/upload/upload.vue
Navigation and layout
- Navigation components
src/components/menu/menu.vue - Anchor navigation
src/components/anchor/anchor.vue - Page layout
src/components/layout/layout.vue - Form coordination
src/components/form/form.vue
Feedback and overlays
- Modal dialog
src/components/modal/modal.vue - Message and notice
src/components/base/notification/index.js - Progress indicators
src/components/progress/progress.vue
Shared runtime
- Icon
src/components/icon/icon.vue - DOM transfer directive
src/directives/transfer-dom.js - Component event mixin
src/mixins/emitter.js - Locale mixin
src/mixins/locale.js - UI utilities
src/utils/assist.js - DOM helpers
src/utils/dom.js - Overlay ordering
src/utils/transfer-queue.js
Other components
- Vue application
Connections 40
- Vue application → Public component API: installs
src/index.js - Public component API → Form controls: registers
src/index.js - Public component API → Numeric input: registers
src/index.js - Public component API → Select and options: registers
src/index.js - Public component API → Date and time: registers
src/index.js - Public component API → Data table: registers
src/index.js - Public component API → Navigation components: registers
src/index.js - Public component API → Modal dialog: registers
src/index.js - Public component API → Message and notice: registers
src/index.js - Public component API → Color picker: registers
src/index.js - Select and options → Select dropdown: renders
src/components/select/select.vue - Select and options → DOM transfer directive: uses
src/components/select/select.vue - Select dropdown → Overlay ordering: increments order
src/components/select/dropdown.vue - Cascader selection → Form controls: renders
src/components/cascader/cascader.vue - Cascader selection → Select dropdown: renders
src/components/cascader/cascader.vue - Cascader selection → DOM transfer directive: uses
src/components/cascader/cascader.vue - Date and time → Form controls: renders
src/components/date-picker/picker.vue - Date and time → Select dropdown: renders
src/components/date-picker/picker.vue - Date and time → Icon: renders
src/components/date-picker/picker.vue - Date and time → DOM transfer directive: uses
src/components/date-picker/picker.vue - Color picker → Form controls: renders
src/components/color-picker/color-picker.vue - Color picker → Button: renders
src/components/color-picker/color-picker.vue - Color picker → Icon: renders
src/components/color-picker/color-picker.vue - Color picker → DOM transfer directive: uses
src/components/color-picker/color-picker.vue - Data table → Table header: renders
src/components/table/table.vue - Data table → DOM helpers: reads styles
src/components/table/table.vue - Data table → UI utilities: uses
src/components/table/table.vue - Numeric input → UI utilities: uses
src/components/input-number/input-number.vue - Form controls → UI utilities: uses
src/components/input/input.vue - Form controls → Component event mixin: dispatches events
src/components/input/input.vue - Modal dialog → DOM transfer directive: uses
src/components/modal/modal.vue - Modal dialog → Overlay ordering: uses
src/components/modal/modal.vue - Modal dialog → DOM helpers: uses
src/components/modal/modal.vue - Modal dialog → Button: renders
src/components/modal/modal.vue - Message and notice → Public component API: registered by
- Navigation components → Anchor navigation: coordinates
- Form coordination → Form controls: coordinates
- Data table → Tree view: complements
- Transfer list → Form controls: uses
- File upload → Progress indicators: reports progress