# xfjpeter/uni-plugins architecture

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

- Interactive diagram: https://gitdiagram.com/xfjpeter/uni-plugins
- Repository: https://github.com/xfjpeter/uni-plugins

## Overview

This is a uni-app/Vue component showcase and plugin collection. A user opens the index and navigates to examples of tab navigation, order-list paging, a side-tab layout, a navbar, or a custom keyboard. The repository also includes reusable popup and transition components. The order example coordinates tab selection with a swiper and locally initialized order data. Some modules are represented from the tree and README rather than sampled source, so uncertain integrations are omitted.

Main entry points: [`pages/index/index.vue`](https://github.com/xfjpeter/uni-plugins/blob/master/pages/index/index.vue) (Example index), [`components/v-tabs2/v-tabs2.vue`](https://github.com/xfjpeter/uni-plugins/blob/master/components/v-tabs2/v-tabs2.vue) (Tabs component), [`pages/tabs/order.vue`](https://github.com/xfjpeter/uni-plugins/blob/master/pages/tabs/order.vue) (Order tabs), [`pages/tabs`](https://github.com/xfjpeter/uni-plugins/tree/master/pages/tabs) (Tab examples)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_showcase["Showcase pages"]
  node_home["Example index<br/>[index.vue]"]
  node_order["Order tabs<br/>[order.vue]"]
  node_tab_examples["Tab examples"]
  node_column_example["Side-tab example<br/>[column.vue]"]
  node_navbar_example["Navbar example<br/>[navbar.vue]"]
  node_keyboard_example["Keyboard example<br/>[keyboard.vue]"]
  node_test_example["Tab test example<br/>[test-v-tab.vue]"]
end

subgraph group_navigation["Tab components"]
  node_tabs_v2["Tabs component<br/>[v-tabs2.vue]"]
  node_tabs_props["Tabs props<br/>[props.js]"]
  node_tabs_utils["Tabs utilities<br/>[utils.js]"]
  node_tabs_v1["Tabs v1<br/>[v-tabs.vue]"]
  node_column_tabs["Column tabs<br/>[v-tabs-column.vue]"]
end

subgraph group_inputs["Input and chrome"]
  node_navbar["Navbar component<br/>[v-navbar.vue]"]
  node_keyboard["Keyboard component<br/>[v-keyboard.vue]"]
end

subgraph group_overlays["Popup components"]
  node_popup["Popup component<br/>[uni-popup.vue]"]
  node_transition["Transition component<br/>[uni-transition.vue]"]
  node_popup_dialog["Popup dialog"]
  node_popup_message["Popup message"]
  node_popup_share["Popup share"]
end

node_user(("User"))

node_user -->|"opens"| node_home
node_home -->|"navigates"| node_tab_examples
node_home -->|"navigates"| node_order
node_home -->|"navigates"| node_column_example
node_home -->|"navigates"| node_navbar_example
node_home -->|"navigates"| node_keyboard_example
node_home -->|"navigates"| node_test_example
node_order -->|"renders"| node_tabs_v2
node_tab_examples -->|"renders"| node_tabs_v1
node_column_example -->|"renders"| node_column_tabs
node_navbar_example -->|"renders"| node_navbar
node_keyboard_example -->|"renders"| node_keyboard
node_test_example -->|"renders"| node_tabs_v2
node_tabs_v2 -->|"uses"| node_tabs_props
node_tabs_v2 -->|"calls"| node_tabs_utils
node_popup -->|"renders"| node_transition
node_user -.->|"uses"| node_popup
node_user -.->|"uses"| node_popup_dialog
node_user -.->|"uses"| node_popup_message
node_user -.->|"uses"| node_popup_share

click node_home "https://github.com/xfjpeter/uni-plugins/blob/master/pages/index/index.vue"
click node_order "https://github.com/xfjpeter/uni-plugins/blob/master/pages/tabs/order.vue"
click node_tab_examples "https://github.com/xfjpeter/uni-plugins/tree/master/pages/tabs"
click node_column_example "https://github.com/xfjpeter/uni-plugins/blob/master/pages/tabs/column.vue"
click node_navbar_example "https://github.com/xfjpeter/uni-plugins/blob/master/pages/navbar/navbar.vue"
click node_keyboard_example "https://github.com/xfjpeter/uni-plugins/blob/master/pages/keyboard/keyboard.vue"
click node_test_example "https://github.com/xfjpeter/uni-plugins/blob/master/pages/test-v-tab/test-v-tab.vue"
click node_tabs_v2 "https://github.com/xfjpeter/uni-plugins/blob/master/components/v-tabs2/v-tabs2.vue"
click node_tabs_props "https://github.com/xfjpeter/uni-plugins/blob/master/components/v-tabs2/props.js"
click node_tabs_utils "https://github.com/xfjpeter/uni-plugins/blob/master/components/v-tabs2/utils.js"
click node_tabs_v1 "https://github.com/xfjpeter/uni-plugins/blob/master/components/v-tabs1/v-tabs.vue"
click node_column_tabs "https://github.com/xfjpeter/uni-plugins/blob/master/components/v-tabs-column/v-tabs-column.vue"
click node_navbar "https://github.com/xfjpeter/uni-plugins/blob/master/components/v-navbar/v-navbar.vue"
click node_keyboard "https://github.com/xfjpeter/uni-plugins/blob/master/uni_modules/v-keyboard/components/v-keyboard/v-keyboard.vue"
click node_popup "https://github.com/xfjpeter/uni-plugins/blob/master/uni_modules/uni-popup/components/uni-popup/uni-popup.vue"
click node_transition "https://github.com/xfjpeter/uni-plugins/blob/master/uni_modules/uni-transition/components/uni-transition/uni-transition.vue"
click node_popup_dialog "https://github.com/xfjpeter/uni-plugins/blob/master/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue"
click node_popup_message "https://github.com/xfjpeter/uni-plugins/blob/master/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue"
click node_popup_share "https://github.com/xfjpeter/uni-plugins/blob/master/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.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_home,node_order,node_tab_examples,node_column_example,node_navbar_example,node_keyboard_example,node_test_example,node_user toneBlue
class node_tabs_v2,node_tabs_props,node_tabs_utils,node_tabs_v1,node_column_tabs toneAmber
class node_navbar,node_keyboard toneMint
class node_popup,node_transition,node_popup_dialog,node_popup_message,node_popup_share toneRose
```

## Components

### Showcase pages

- [Example index](https://github.com/xfjpeter/uni-plugins/blob/master/pages/index/index.vue): `pages/index/index.vue`
- [Order tabs](https://github.com/xfjpeter/uni-plugins/blob/master/pages/tabs/order.vue): `pages/tabs/order.vue`
- [Tab examples](https://github.com/xfjpeter/uni-plugins/tree/master/pages/tabs): `pages/tabs`
- [Side-tab example](https://github.com/xfjpeter/uni-plugins/blob/master/pages/tabs/column.vue): `pages/tabs/column.vue`
- [Navbar example](https://github.com/xfjpeter/uni-plugins/blob/master/pages/navbar/navbar.vue): `pages/navbar/navbar.vue`
- [Keyboard example](https://github.com/xfjpeter/uni-plugins/blob/master/pages/keyboard/keyboard.vue): `pages/keyboard/keyboard.vue`
- [Tab test example](https://github.com/xfjpeter/uni-plugins/blob/master/pages/test-v-tab/test-v-tab.vue): `pages/test-v-tab/test-v-tab.vue`

### Tab components

- [Tabs component](https://github.com/xfjpeter/uni-plugins/blob/master/components/v-tabs2/v-tabs2.vue): `components/v-tabs2/v-tabs2.vue`
- [Tabs props](https://github.com/xfjpeter/uni-plugins/blob/master/components/v-tabs2/props.js): `components/v-tabs2/props.js`
- [Tabs utilities](https://github.com/xfjpeter/uni-plugins/blob/master/components/v-tabs2/utils.js): `components/v-tabs2/utils.js`
- [Tabs v1](https://github.com/xfjpeter/uni-plugins/blob/master/components/v-tabs1/v-tabs.vue): `components/v-tabs1/v-tabs.vue`
- [Column tabs](https://github.com/xfjpeter/uni-plugins/blob/master/components/v-tabs-column/v-tabs-column.vue): `components/v-tabs-column/v-tabs-column.vue`

### Input and chrome

- [Navbar component](https://github.com/xfjpeter/uni-plugins/blob/master/components/v-navbar/v-navbar.vue): `components/v-navbar/v-navbar.vue`
- [Keyboard component](https://github.com/xfjpeter/uni-plugins/blob/master/uni_modules/v-keyboard/components/v-keyboard/v-keyboard.vue): `uni_modules/v-keyboard/components/v-keyboard/v-keyboard.vue`

### Popup components

- [Popup component](https://github.com/xfjpeter/uni-plugins/blob/master/uni_modules/uni-popup/components/uni-popup/uni-popup.vue): `uni_modules/uni-popup/components/uni-popup/uni-popup.vue`
- [Transition component](https://github.com/xfjpeter/uni-plugins/blob/master/uni_modules/uni-transition/components/uni-transition/uni-transition.vue): `uni_modules/uni-transition/components/uni-transition/uni-transition.vue`
- [Popup dialog](https://github.com/xfjpeter/uni-plugins/blob/master/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue): `uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue`
- [Popup message](https://github.com/xfjpeter/uni-plugins/blob/master/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue): `uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue`
- [Popup share](https://github.com/xfjpeter/uni-plugins/blob/master/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue): `uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue`

### Other components

- **User**

## Connections

- User → Example index: opens
- Example index → Tab examples: navigates
- Example index → Order tabs: navigates
- Example index → Side-tab example: navigates
- Example index → Navbar example: navigates
- Example index → Keyboard example: navigates
- Example index → Tab test example: navigates
- Order tabs → Tabs component: renders
- Tab examples → Tabs v1: renders
- Side-tab example → Column tabs: renders
- Navbar example → Navbar component: renders
- Keyboard example → Keyboard component: renders
- Tab test example → Tabs component: renders
- Tabs component → Tabs props: uses
- Tabs component → Tabs utilities: calls
- Popup component → Transition component: renders
- User → Popup component: uses
- User → Popup dialog: uses
- User → Popup message: uses
- User → Popup share: uses