# iview/iview architecture

> Architecture diagram of the GitHub repository iview/iview, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-09). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/iview/iview
- Repository: https://github.com/iview/iview

## Overview

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: [`src/index.js`](https://github.com/iview/iview/blob/2.0/src/index.js) (Public component API), [`src/components/input/input.vue`](https://github.com/iview/iview/blob/2.0/src/components/input/input.vue) (Form controls), [`src/components/date-picker/picker.vue`](https://github.com/iview/iview/blob/2.0/src/components/date-picker/picker.vue) (Date and time), [`src/components/color-picker/color-picker.vue`](https://github.com/iview/iview/blob/2.0/src/components/color-picker/color-picker.vue) (Color picker)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Package entry"]
  node_api["Public component API<br/>[index.js]"]
end

subgraph group_controls["Inputs and selection"]
  node_inputs["Form controls<br/>[input.vue]"]
  node_numeric["Numeric input<br/>[input-number.vue]"]
  node_select["Select and options<br/>[select.vue]"]
  node_dropdown["Select dropdown<br/>[dropdown.vue]"]
  node_cascader["Cascader selection<br/>[cascader.vue]"]
  node_calendar["Date and time<br/>[picker.vue]"]
  node_colors["Color picker<br/>[color-picker.vue]"]
  node_button["Button<br/>[button.vue]"]
end

subgraph group_data["Data presentation"]
  node_table["Data table<br/>[table.vue]"]
  node_tablehead["Table header<br/>[table-head.vue]"]
  node_tree["Tree view<br/>[tree.vue]"]
  node_transfer["Transfer list<br/>[transfer.vue]"]
  node_upload["File upload<br/>[upload.vue]"]
end

subgraph group_shell["Navigation and layout"]
  node_navigation["Navigation components<br/>[menu.vue]"]
  node_anchor["Anchor navigation<br/>[anchor.vue]"]
  node_layout["Page layout<br/>[layout.vue]"]
  node_forms["Form coordination<br/>[form.vue]"]
end

subgraph group_feedback["Feedback and overlays"]
  node_modal["Modal dialog<br/>[modal.vue]"]
  node_notice["Message and notice<br/>[index.js]"]
  node_progress["Progress indicators<br/>[progress.vue]"]
end

subgraph group_shared["Shared runtime"]
  node_icon["Icon<br/>[icon.vue]"]
  node_transferdom["DOM transfer directive<br/>[transfer-dom.js]"]
  node_events["Component event mixin<br/>[emitter.js]"]
  node_locale["Locale mixin<br/>[locale.js]"]
  node_assist["UI utilities<br/>[assist.js]"]
  node_dom["DOM helpers<br/>[dom.js]"]
  node_queue["Overlay ordering<br/>[transfer-queue.js]"]
end

node_app(("Vue application"))

node_app -->|"installs"| node_api
node_api -->|"registers"| node_inputs
node_api -->|"registers"| node_numeric
node_api -->|"registers"| node_select
node_api -->|"registers"| node_calendar
node_api -->|"registers"| node_table
node_api -->|"registers"| node_navigation
node_api -->|"registers"| node_modal
node_api -->|"registers"| node_notice
node_api -->|"registers"| node_colors
node_select -->|"renders"| node_dropdown
node_select -->|"uses"| node_transferdom
node_dropdown -->|"increments order"| node_queue
node_cascader -->|"renders"| node_inputs
node_cascader -->|"renders"| node_dropdown
node_cascader -->|"uses"| node_transferdom
node_calendar -->|"renders"| node_inputs
node_calendar -->|"renders"| node_dropdown
node_calendar -->|"renders"| node_icon
node_calendar -->|"uses"| node_transferdom
node_colors -->|"renders"| node_inputs
node_colors -->|"renders"| node_button
node_colors -->|"renders"| node_icon
node_colors -->|"uses"| node_transferdom
node_table -->|"renders"| node_tablehead
node_table -->|"reads styles"| node_dom
node_table -->|"uses"| node_assist
node_numeric -->|"uses"| node_assist
node_inputs -->|"uses"| node_assist
node_inputs -->|"dispatches events"| node_events
node_modal -->|"uses"| node_transferdom
node_modal -->|"uses"| node_queue
node_modal -->|"uses"| node_dom
node_modal -->|"renders"| node_button
node_notice -.->|"registered by"| node_api
node_navigation -.->|"coordinates"| node_anchor
node_forms -.->|"coordinates"| node_inputs
node_table -.->|"complements"| node_tree
node_transfer -.->|"uses"| node_inputs
node_upload -.->|"reports progress"| node_progress

click node_api "https://github.com/iview/iview/blob/2.0/src/index.js"
click node_inputs "https://github.com/iview/iview/blob/2.0/src/components/input/input.vue"
click node_numeric "https://github.com/iview/iview/blob/2.0/src/components/input-number/input-number.vue"
click node_select "https://github.com/iview/iview/blob/2.0/src/components/select/select.vue"
click node_dropdown "https://github.com/iview/iview/blob/2.0/src/components/select/dropdown.vue"
click node_cascader "https://github.com/iview/iview/blob/2.0/src/components/cascader/cascader.vue"
click node_calendar "https://github.com/iview/iview/blob/2.0/src/components/date-picker/picker.vue"
click node_colors "https://github.com/iview/iview/blob/2.0/src/components/color-picker/color-picker.vue"
click node_table "https://github.com/iview/iview/blob/2.0/src/components/table/table.vue"
click node_tablehead "https://github.com/iview/iview/blob/2.0/src/components/table/table-head.vue"
click node_tree "https://github.com/iview/iview/blob/2.0/src/components/tree/tree.vue"
click node_transfer "https://github.com/iview/iview/blob/2.0/src/components/transfer/transfer.vue"
click node_upload "https://github.com/iview/iview/blob/2.0/src/components/upload/upload.vue"
click node_navigation "https://github.com/iview/iview/blob/2.0/src/components/menu/menu.vue"
click node_anchor "https://github.com/iview/iview/blob/2.0/src/components/anchor/anchor.vue"
click node_layout "https://github.com/iview/iview/blob/2.0/src/components/layout/layout.vue"
click node_forms "https://github.com/iview/iview/blob/2.0/src/components/form/form.vue"
click node_modal "https://github.com/iview/iview/blob/2.0/src/components/modal/modal.vue"
click node_notice "https://github.com/iview/iview/blob/2.0/src/components/base/notification/index.js"
click node_progress "https://github.com/iview/iview/blob/2.0/src/components/progress/progress.vue"
click node_icon "https://github.com/iview/iview/blob/2.0/src/components/icon/icon.vue"
click node_transferdom "https://github.com/iview/iview/blob/2.0/src/directives/transfer-dom.js"
click node_events "https://github.com/iview/iview/blob/2.0/src/mixins/emitter.js"
click node_locale "https://github.com/iview/iview/blob/2.0/src/mixins/locale.js"
click node_assist "https://github.com/iview/iview/blob/2.0/src/utils/assist.js"
click node_dom "https://github.com/iview/iview/blob/2.0/src/utils/dom.js"
click node_queue "https://github.com/iview/iview/blob/2.0/src/utils/transfer-queue.js"
click node_button "https://github.com/iview/iview/blob/2.0/src/components/button/button.vue"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_api toneBlue
class node_inputs,node_numeric,node_select,node_dropdown,node_cascader,node_calendar,node_colors,node_button toneAmber
class node_table,node_tablehead,node_tree,node_transfer,node_upload toneMint
class node_navigation,node_anchor,node_layout,node_forms toneRose
class node_modal,node_notice,node_progress,node_app toneIndigo
class node_icon,node_transferdom,node_events,node_locale,node_assist,node_dom,node_queue toneTeal
```

## Components

### Package entry

- [Public component API](https://github.com/iview/iview/blob/2.0/src/index.js): `src/index.js`

### Inputs and selection

- [Form controls](https://github.com/iview/iview/blob/2.0/src/components/input/input.vue): `src/components/input/input.vue`
- [Numeric input](https://github.com/iview/iview/blob/2.0/src/components/input-number/input-number.vue): `src/components/input-number/input-number.vue`
- [Select and options](https://github.com/iview/iview/blob/2.0/src/components/select/select.vue): `src/components/select/select.vue`
- [Select dropdown](https://github.com/iview/iview/blob/2.0/src/components/select/dropdown.vue): `src/components/select/dropdown.vue`
- [Cascader selection](https://github.com/iview/iview/blob/2.0/src/components/cascader/cascader.vue): `src/components/cascader/cascader.vue`
- [Date and time](https://github.com/iview/iview/blob/2.0/src/components/date-picker/picker.vue): `src/components/date-picker/picker.vue`
- [Color picker](https://github.com/iview/iview/blob/2.0/src/components/color-picker/color-picker.vue): `src/components/color-picker/color-picker.vue`
- [Button](https://github.com/iview/iview/blob/2.0/src/components/button/button.vue): `src/components/button/button.vue`

### Data presentation

- [Data table](https://github.com/iview/iview/blob/2.0/src/components/table/table.vue): `src/components/table/table.vue`
- [Table header](https://github.com/iview/iview/blob/2.0/src/components/table/table-head.vue): `src/components/table/table-head.vue`
- [Tree view](https://github.com/iview/iview/blob/2.0/src/components/tree/tree.vue): `src/components/tree/tree.vue`
- [Transfer list](https://github.com/iview/iview/blob/2.0/src/components/transfer/transfer.vue): `src/components/transfer/transfer.vue`
- [File upload](https://github.com/iview/iview/blob/2.0/src/components/upload/upload.vue): `src/components/upload/upload.vue`

### Navigation and layout

- [Navigation components](https://github.com/iview/iview/blob/2.0/src/components/menu/menu.vue): `src/components/menu/menu.vue`
- [Anchor navigation](https://github.com/iview/iview/blob/2.0/src/components/anchor/anchor.vue): `src/components/anchor/anchor.vue`
- [Page layout](https://github.com/iview/iview/blob/2.0/src/components/layout/layout.vue): `src/components/layout/layout.vue`
- [Form coordination](https://github.com/iview/iview/blob/2.0/src/components/form/form.vue): `src/components/form/form.vue`

### Feedback and overlays

- [Modal dialog](https://github.com/iview/iview/blob/2.0/src/components/modal/modal.vue): `src/components/modal/modal.vue`
- [Message and notice](https://github.com/iview/iview/blob/2.0/src/components/base/notification/index.js): `src/components/base/notification/index.js`
- [Progress indicators](https://github.com/iview/iview/blob/2.0/src/components/progress/progress.vue): `src/components/progress/progress.vue`

### Shared runtime

- [Icon](https://github.com/iview/iview/blob/2.0/src/components/icon/icon.vue): `src/components/icon/icon.vue`
- [DOM transfer directive](https://github.com/iview/iview/blob/2.0/src/directives/transfer-dom.js): `src/directives/transfer-dom.js`
- [Component event mixin](https://github.com/iview/iview/blob/2.0/src/mixins/emitter.js): `src/mixins/emitter.js`
- [Locale mixin](https://github.com/iview/iview/blob/2.0/src/mixins/locale.js): `src/mixins/locale.js`
- [UI utilities](https://github.com/iview/iview/blob/2.0/src/utils/assist.js): `src/utils/assist.js`
- [DOM helpers](https://github.com/iview/iview/blob/2.0/src/utils/dom.js): `src/utils/dom.js`
- [Overlay ordering](https://github.com/iview/iview/blob/2.0/src/utils/transfer-queue.js): `src/utils/transfer-queue.js`

### Other components

- **Vue application**

## Connections

- Vue application → Public component API: installs (evidence: `src/index.js`)
- Public component API → Form controls: registers (evidence: `src/index.js`)
- Public component API → Numeric input: registers (evidence: `src/index.js`)
- Public component API → Select and options: registers (evidence: `src/index.js`)
- Public component API → Date and time: registers (evidence: `src/index.js`)
- Public component API → Data table: registers (evidence: `src/index.js`)
- Public component API → Navigation components: registers (evidence: `src/index.js`)
- Public component API → Modal dialog: registers (evidence: `src/index.js`)
- Public component API → Message and notice: registers (evidence: `src/index.js`)
- Public component API → Color picker: registers (evidence: `src/index.js`)
- Select and options → Select dropdown: renders (evidence: `src/components/select/select.vue`)
- Select and options → DOM transfer directive: uses (evidence: `src/components/select/select.vue`)
- Select dropdown → Overlay ordering: increments order (evidence: `src/components/select/dropdown.vue`)
- Cascader selection → Form controls: renders (evidence: `src/components/cascader/cascader.vue`)
- Cascader selection → Select dropdown: renders (evidence: `src/components/cascader/cascader.vue`)
- Cascader selection → DOM transfer directive: uses (evidence: `src/components/cascader/cascader.vue`)
- Date and time → Form controls: renders (evidence: `src/components/date-picker/picker.vue`)
- Date and time → Select dropdown: renders (evidence: `src/components/date-picker/picker.vue`)
- Date and time → Icon: renders (evidence: `src/components/date-picker/picker.vue`)
- Date and time → DOM transfer directive: uses (evidence: `src/components/date-picker/picker.vue`)
- Color picker → Form controls: renders (evidence: `src/components/color-picker/color-picker.vue`)
- Color picker → Button: renders (evidence: `src/components/color-picker/color-picker.vue`)
- Color picker → Icon: renders (evidence: `src/components/color-picker/color-picker.vue`)
- Color picker → DOM transfer directive: uses (evidence: `src/components/color-picker/color-picker.vue`)
- Data table → Table header: renders (evidence: `src/components/table/table.vue`)
- Data table → DOM helpers: reads styles (evidence: `src/components/table/table.vue`)
- Data table → UI utilities: uses (evidence: `src/components/table/table.vue`)
- Numeric input → UI utilities: uses (evidence: `src/components/input-number/input-number.vue`)
- Form controls → UI utilities: uses (evidence: `src/components/input/input.vue`)
- Form controls → Component event mixin: dispatches events (evidence: `src/components/input/input.vue`)
- Modal dialog → DOM transfer directive: uses (evidence: `src/components/modal/modal.vue`)
- Modal dialog → Overlay ordering: uses (evidence: `src/components/modal/modal.vue`)
- Modal dialog → DOM helpers: uses (evidence: `src/components/modal/modal.vue`)
- Modal dialog → Button: renders (evidence: `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