@soybeanjs/ui 0.0.3-beta.1 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +86 -6
- package/README.zh-CN.md +251 -0
- package/dist/components/accordion/accordion.vue.d.ts +3 -3
- package/dist/components/alert/alert.vue.d.ts +4 -4
- package/dist/components/alert-dialog/alert-dialog-action.vue.d.ts +3 -3
- package/dist/components/alert-dialog/alert-dialog-cancel.vue.d.ts +3 -3
- package/dist/components/alert-dialog/alert-dialog.vue.d.ts +5 -5
- package/dist/components/avatar/avatar.vue.d.ts +7 -7
- package/dist/components/badge/badge.vue.d.ts +4 -4
- package/dist/components/breadcrumb/breadcrumb.vue.d.ts +3 -3
- package/dist/components/button/button-group.vue.d.ts +6 -6
- package/dist/components/button/button-icon.vue.d.ts +3 -3
- package/dist/components/button/button-link.vue.d.ts +4 -4
- package/dist/components/button/button-loading.vue.d.ts +3 -3
- package/dist/components/button/button.vue.d.ts +4 -4
- package/dist/components/card/card.vue.d.ts +3 -3
- package/dist/components/checkbox/checkbox-card-group.vue.d.ts +3 -3
- package/dist/components/checkbox/checkbox-card.vue.d.ts +8 -8
- package/dist/components/checkbox/checkbox-group.vue.d.ts +3 -3
- package/dist/components/checkbox/checkbox.vue.d.ts +12 -12
- package/dist/components/collapsible/collapsible.vue.d.ts +5 -5
- package/dist/components/command/command.vue.d.ts +7 -7
- package/dist/components/config-provider/config-provider.vue.d.ts +5 -5
- package/dist/components/context-menu/context-menu-checkbox.vue.d.ts +10 -10
- package/dist/components/context-menu/context-menu-radio.vue.d.ts +10 -10
- package/dist/components/context-menu/context-menu-wrapper.vue.d.ts +15 -15
- package/dist/components/context-menu/context-menu.vue.d.ts +10 -10
- package/dist/components/dialog/dialog-close.vue.d.ts +2 -2
- package/dist/components/dialog/dialog-pure.vue.d.ts +15 -15
- package/dist/components/dialog/dialog.vue.d.ts +15 -15
- package/dist/components/drawer/drawer-close.vue.d.ts +2 -2
- package/dist/components/drawer/drawer.vue.d.ts +15 -15
- package/dist/components/dropdown-menu/dropdown-menu-checkbox.vue.d.ts +10 -10
- package/dist/components/dropdown-menu/dropdown-menu-radio.vue.d.ts +10 -10
- package/dist/components/dropdown-menu/dropdown-menu-wrapper.vue.d.ts +15 -15
- package/dist/components/dropdown-menu/dropdown-menu.vue.d.ts +10 -10
- package/dist/components/form/form-field-array.vue.d.ts +2 -2
- package/dist/components/form/form-field.vue.d.ts +2 -2
- package/dist/components/form/form.vue.d.ts +2 -2
- package/dist/components/icon/icon.vue.d.ts +3 -3
- package/dist/components/input/input.vue.d.ts +4 -4
- package/dist/components/kbd/kbd.vue.d.ts +3 -3
- package/dist/components/label/label.vue.d.ts +2 -2
- package/dist/components/layout/layout-trigger.vue.d.ts +2 -2
- package/dist/components/layout/layout.vue.d.ts +4 -4
- package/dist/components/link/link.vue.d.ts +4 -4
- package/dist/components/list/list-item.vue.d.ts +2 -2
- package/dist/components/list/list.vue.d.ts +2 -2
- package/dist/components/menu/menu-checkbox-options.vue.d.ts +3 -3
- package/dist/components/menu/menu-option.vue.d.ts +10 -10
- package/dist/components/menu/menu-options.vue.d.ts +10 -10
- package/dist/components/menu/menu-radio-options.vue.d.ts +3 -3
- package/dist/components/navigation-menu/navigation-menu.vue.d.ts +13 -13
- package/dist/components/number-input/number-input.vue.d.ts +4 -4
- package/dist/components/pagination/pagination.vue.d.ts +4 -4
- package/dist/components/password/password.vue.d.ts +4 -4
- package/dist/components/popover/popover.vue.d.ts +15 -15
- package/dist/components/radio-group/radio-card-group.vue.d.ts +3 -3
- package/dist/components/radio-group/radio-card.vue.d.ts +2 -2
- package/dist/components/radio-group/radio-group.vue.d.ts +3 -3
- package/dist/components/radio-group/radio.vue.d.ts +2 -2
- package/dist/components/segment/segment.vue.d.ts +3 -3
- package/dist/components/select/select.vue.d.ts +8 -8
- package/dist/components/separator/separator.vue.d.ts +5 -5
- package/dist/components/switch/switch.vue.d.ts +19 -19
- package/dist/components/tabs/tabs.vue.d.ts +3 -3
- package/dist/components/tag/tag.vue.d.ts +4 -4
- package/dist/components/textarea/textarea.vue.d.ts +4 -4
- package/dist/components/tooltip/tooltip.vue.d.ts +11 -11
- package/dist/components/tree/tree-virtualizer.vue.d.ts +5 -5
- package/dist/components/tree/tree.vue.d.ts +5 -5
- package/dist/components/tree-menu/tree-menu-item-wrapper.vue.d.ts +2 -2
- package/dist/components/tree-menu/tree-menu.vue.d.ts +3 -3
- package/dist/components/virtualizer/virtualizer.vue.d.ts +3 -3
- package/dist/variants/alert.d.ts +3 -3
- package/dist/variants/button.d.ts +3 -3
- package/dist/variants/checkbox.d.ts +3 -3
- package/dist/variants/kbd.d.ts +3 -3
- package/dist/variants/pagination.d.ts +3 -3
- package/dist/variants/radio-group.d.ts +3 -3
- package/dist/variants/separator.d.ts +3 -3
- package/dist/variants/switch.d.ts +3 -3
- package/dist/variants/tabs.d.ts +3 -3
- package/dist/variants/tag.d.ts +3 -3
- package/dist/variants/textarea.d.ts +3 -3
- package/dist/variants/toast.d.ts +3 -3
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,24 +1,59 @@
|
|
|
1
1
|
# SoybeanUI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
English | [中文](./README.zh-CN.md)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](./LICENSE)
|
|
6
|
+
[](https://github.com/soybeanjs/soybean-ui)
|
|
7
|
+
|
|
8
|
+
SoybeanUI is an elegant, modern, accessible and high-quality UI component library with shadcn-like design for Vue 3, built on top of a robust headless foundation. It provides a comprehensive set of accessible, customizable, and performant components.
|
|
9
|
+
|
|
10
|
+
## 📚 Architecture
|
|
11
|
+
|
|
12
|
+
SoybeanUI consists of two main packages:
|
|
13
|
+
|
|
14
|
+
- **@soybeanjs/headless**: The logic layer. It handles state management, accessibility (A11y), keyboard interactions, and focus management. It is completely unstyled, giving you maximum control if you want to build your own design system.
|
|
15
|
+
- **@soybeanjs/ui**: The presentation layer. It wraps the headless components with beautiful, customizable styles using UnoCSS (via `tailwind-variants`). It is ready to use out of the box.
|
|
16
|
+
|
|
17
|
+
## 📦 Installation
|
|
18
|
+
|
|
19
|
+
### Using the Styled UI Library (Recommended)
|
|
20
|
+
|
|
21
|
+
If you want ready-to-use components with a modern design:
|
|
6
22
|
|
|
7
23
|
```bash
|
|
8
24
|
pnpm add @soybeanjs/ui
|
|
9
25
|
```
|
|
10
26
|
|
|
11
|
-
|
|
27
|
+
### Using the Headless Library
|
|
28
|
+
|
|
29
|
+
If you want to build your own design system from scratch:
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
pnpm add @soybeanjs/headless
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## 🚀 Usage
|
|
12
36
|
|
|
13
|
-
|
|
37
|
+
### @soybeanjs/ui
|
|
38
|
+
|
|
39
|
+
1. **Import Styles**
|
|
40
|
+
|
|
41
|
+
Import the CSS file in your main entry file (e.g., `main.ts`):
|
|
14
42
|
|
|
15
43
|
```ts
|
|
16
44
|
import '@soybeanjs/ui/styles.css';
|
|
17
45
|
```
|
|
18
46
|
|
|
19
|
-
|
|
47
|
+
2. **Global Registration (Optional)**
|
|
48
|
+
|
|
49
|
+
You can register components globally or import them on demand.
|
|
50
|
+
|
|
51
|
+
3. **On-demand Import (Recommended)**
|
|
52
|
+
|
|
53
|
+
We recommend using `unplugin-vue-components` for auto-importing components.
|
|
20
54
|
|
|
21
55
|
```ts
|
|
56
|
+
// vite.config.ts
|
|
22
57
|
import Components from 'unplugin-vue-components/vite';
|
|
23
58
|
import UiResolver from '@soybeanjs/ui/resolver';
|
|
24
59
|
|
|
@@ -31,7 +66,52 @@ export default defineConfig({
|
|
|
31
66
|
});
|
|
32
67
|
```
|
|
33
68
|
|
|
34
|
-
|
|
69
|
+
4. **Nuxt Module**
|
|
70
|
+
|
|
71
|
+
```ts
|
|
72
|
+
// nuxt.config.ts
|
|
73
|
+
export default defineNuxtConfig({
|
|
74
|
+
modules: ['@soybeanjs/ui/nuxt']
|
|
75
|
+
});
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### @soybeanjs/headless
|
|
79
|
+
|
|
80
|
+
The headless components provide the functionality without the styles.
|
|
81
|
+
|
|
82
|
+
```vue
|
|
83
|
+
<script setup>
|
|
84
|
+
import { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from '@soybeanjs/headless';
|
|
85
|
+
</script>
|
|
86
|
+
|
|
87
|
+
<template>
|
|
88
|
+
<AccordionRoot>
|
|
89
|
+
<AccordionItem value="item-1">
|
|
90
|
+
<AccordionTrigger>Is it accessible?</AccordionTrigger>
|
|
91
|
+
<AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
|
|
92
|
+
</AccordionItem>
|
|
93
|
+
</AccordionRoot>
|
|
94
|
+
</template>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## ✨ Features
|
|
98
|
+
|
|
99
|
+
- **Accessible**: Follows WAI-ARIA patterns for accessibility.
|
|
100
|
+
- **Headless**: Logic and styles are separated.
|
|
101
|
+
- **Type Safe**: Written in TypeScript with full type support.
|
|
102
|
+
- **Customizable**: Built with UnoCSS and `tailwind-variants` for easy theming.
|
|
103
|
+
- **Lightweight**: Tree-shakable components.
|
|
104
|
+
|
|
105
|
+
## 💝 Credits
|
|
106
|
+
|
|
107
|
+
- [reka-ui](https://github.com/unovue/reka-ui)
|
|
108
|
+
- [oku-ui](https://github.com/oku-ui/primitives)
|
|
109
|
+
- [shadcn-vue](https://github.com/unovue/shadcn-vue)
|
|
110
|
+
- [shadcn/ui](https://github.com/shadcn/ui)
|
|
111
|
+
- [nuxt-ui](https://github.com/nuxt/ui)
|
|
112
|
+
- [unocss](https://github.com/unocss/unocss)
|
|
113
|
+
|
|
114
|
+
## 🗺️ Roadmap
|
|
35
115
|
|
|
36
116
|
### Components
|
|
37
117
|
|
package/README.zh-CN.md
ADDED
|
@@ -0,0 +1,251 @@
|
|
|
1
|
+
# SoybeanUI
|
|
2
|
+
|
|
3
|
+
[English](./README.md) | 中文
|
|
4
|
+
|
|
5
|
+
[](./LICENSE)
|
|
6
|
+
[](https://github.com/soybeanjs/soybean-ui)
|
|
7
|
+
|
|
8
|
+
SoybeanUI 是一个优雅、现代、可访问且高质量的 UI 组件库,具有 shadcn-like 设计,适用于 Vue 3,构建在强大的 Headless 基础之上。它提供了一套全面、可访问、可定制且高性能的组件。
|
|
9
|
+
|
|
10
|
+
## 📚 架构
|
|
11
|
+
|
|
12
|
+
SoybeanUI 由两个主要包组成:
|
|
13
|
+
|
|
14
|
+
- **@soybeanjs/headless**: 逻辑层。它处理状态管理、可访问性 (A11y)、键盘交互和焦点管理。它完全不包含样式,如果您想构建自己的设计系统,它能为您提供最大的控制权。
|
|
15
|
+
- **@soybeanjs/ui**: 表现层。它使用 UnoCSS (通过 `tailwind-variants`) 为 Headless 组件包装了美观、可定制的样式。它开箱即用。
|
|
16
|
+
|
|
17
|
+
## 📦 安装
|
|
18
|
+
|
|
19
|
+
### 使用带样式的 UI 库 (推荐)
|
|
20
|
+
|
|
21
|
+
如果您想要具有现代设计的现成组件:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
pnpm add @soybeanjs/ui
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### 使用 Headless 库
|
|
28
|
+
|
|
29
|
+
如果您想从头开始构建自己的设计系统:
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
pnpm add @soybeanjs/headless
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## 🚀 使用方法
|
|
36
|
+
|
|
37
|
+
### @soybeanjs/ui
|
|
38
|
+
|
|
39
|
+
1. **引入样式**
|
|
40
|
+
|
|
41
|
+
在您的主入口文件 (例如 `main.ts`) 中引入 CSS 文件:
|
|
42
|
+
|
|
43
|
+
```ts
|
|
44
|
+
import '@soybeanjs/ui/styles.css';
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
2. **全局注册 (可选)**
|
|
48
|
+
|
|
49
|
+
您可以全局注册组件,也可以按需引入。
|
|
50
|
+
|
|
51
|
+
3. **按需引入 (推荐)**
|
|
52
|
+
|
|
53
|
+
我们推荐使用 `unplugin-vue-components` 来自动引入组件。
|
|
54
|
+
|
|
55
|
+
```ts
|
|
56
|
+
// vite.config.ts
|
|
57
|
+
import Components from 'unplugin-vue-components/vite';
|
|
58
|
+
import UiResolver from '@soybeanjs/ui/resolver';
|
|
59
|
+
|
|
60
|
+
export default defineConfig({
|
|
61
|
+
plugins: [
|
|
62
|
+
Components({
|
|
63
|
+
resolvers: [UiResolver()]
|
|
64
|
+
})
|
|
65
|
+
]
|
|
66
|
+
});
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
4. **Nuxt 模块**
|
|
70
|
+
|
|
71
|
+
```ts
|
|
72
|
+
// nuxt.config.ts
|
|
73
|
+
export default defineNuxtConfig({
|
|
74
|
+
modules: ['@soybeanjs/ui/nuxt']
|
|
75
|
+
});
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### @soybeanjs/headless
|
|
79
|
+
|
|
80
|
+
Headless 组件提供功能但不包含样式。
|
|
81
|
+
|
|
82
|
+
```vue
|
|
83
|
+
<script setup>
|
|
84
|
+
import { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from '@soybeanjs/headless';
|
|
85
|
+
</script>
|
|
86
|
+
|
|
87
|
+
<template>
|
|
88
|
+
<AccordionRoot>
|
|
89
|
+
<AccordionItem value="item-1">
|
|
90
|
+
<AccordionTrigger>Is it accessible?</AccordionTrigger>
|
|
91
|
+
<AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
|
|
92
|
+
</AccordionItem>
|
|
93
|
+
</AccordionRoot>
|
|
94
|
+
</template>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## ✨ 特性
|
|
98
|
+
|
|
99
|
+
- **可访问性**: 遵循 WAI-ARIA 模式以实现可访问性。
|
|
100
|
+
- **Headless**: 逻辑与样式分离。
|
|
101
|
+
- **类型安全**: 使用 TypeScript 编写,提供完整的类型支持。
|
|
102
|
+
- **可定制**: 基于 UnoCSS 和 `tailwind-variants` 构建,易于主题化。
|
|
103
|
+
- **轻量级**: 支持 Tree-shaking 的组件。
|
|
104
|
+
|
|
105
|
+
## 💝 致谢
|
|
106
|
+
|
|
107
|
+
- [reka-ui](https://github.com/unovue/reka-ui)
|
|
108
|
+
- [oku-ui](https://github.com/oku-ui/primitives)
|
|
109
|
+
- [shadcn-vue](https://github.com/unovue/shadcn-vue)
|
|
110
|
+
- [shadcn/ui](https://github.com/shadcn/ui)
|
|
111
|
+
- [nuxt-ui](https://github.com/nuxt/ui)
|
|
112
|
+
- [unocss](https://github.com/unocss/unocss)
|
|
113
|
+
|
|
114
|
+
## 🗺️ 路线图
|
|
115
|
+
|
|
116
|
+
### 组件
|
|
117
|
+
|
|
118
|
+
✅: 已完成 ✨: 已实现
|
|
119
|
+
|
|
120
|
+
✅ 46 / 总计: 107
|
|
121
|
+
|
|
122
|
+
| 序号 | 优先级 | 名称 | 状态 | 别名 | 📝 备注 |
|
|
123
|
+
| ---- | ------ | --------------- | ------------ | -------------------- | ------------------------ |
|
|
124
|
+
| 1 | 1 | Accordion | ✅ Completed | | |
|
|
125
|
+
| 2 | 1 | Alert | ✅ Completed | | |
|
|
126
|
+
| 3 | 1 | AlertDialog | ✅ Completed | | |
|
|
127
|
+
| 4 | 1 | Arrow | ✅ Completed | | |
|
|
128
|
+
| 5 | 1 | AspectRatio | ✅ Completed | | |
|
|
129
|
+
| 6 | 1 | Avatar | ✅ Completed | | |
|
|
130
|
+
| 7 | 1 | Badge | ✅ Completed | Chip | |
|
|
131
|
+
| 8 | 1 | Breadcrumb | ✅ Completed | | |
|
|
132
|
+
| 9 | 1 | Button | ✅ Completed | | ✨ support loading |
|
|
133
|
+
| 10 | 1 | Card | ✅ Completed | | |
|
|
134
|
+
| 11 | 1 | Checkbox | ✅ Completed | | ✨ support checkbox card |
|
|
135
|
+
| 12 | 1 | Collapsible | ✅ Completed | | |
|
|
136
|
+
| 13 | 1 | Command | ✅ Completed | | |
|
|
137
|
+
| 14 | 1 | ConfigProvider | ✅ Completed | | |
|
|
138
|
+
| 15 | 1 | ContextMenu | ✅ Completed | | |
|
|
139
|
+
| 16 | 1 | Dialog | ✅ Completed | | |
|
|
140
|
+
| 17 | 1 | Drawer | ✅ Completed | Sheet | |
|
|
141
|
+
| 18 | 1 | DropdownMenu | ✅ Completed | | ✨ support hover trigger |
|
|
142
|
+
| 19 | 1 | Form | ✅ Completed | | |
|
|
143
|
+
| 20 | 1 | Icon | ✅ Completed | | ✨ based on iconify |
|
|
144
|
+
| 21 | 1 | Input | ✅ Completed | | |
|
|
145
|
+
| 22 | 1 | Kbd | ✅ Completed | | |
|
|
146
|
+
| 23 | 1 | Label | ✅ Completed | | |
|
|
147
|
+
| 24 | 1 | Layout | ✅ Completed | | |
|
|
148
|
+
| 25 | 1 | Link | ✅ Completed | | |
|
|
149
|
+
| 26 | 1 | List | ✅ Completed | | |
|
|
150
|
+
| 27 | 1 | Listbox | ✅ Completed | | |
|
|
151
|
+
| 28 | 1 | Menu | ✅ Completed | | |
|
|
152
|
+
| 29 | 1 | NavigationMenu | ✅ Completed | | |
|
|
153
|
+
| 30 | 1 | NumberInput | ✅ Completed | NumberField | |
|
|
154
|
+
| 31 | 1 | Pagination | ✅ Completed | | |
|
|
155
|
+
| 32 | 1 | Password | ✅ Completed | | |
|
|
156
|
+
| 33 | 1 | Popover | ✅ Completed | | |
|
|
157
|
+
| 34 | 1 | RadioGroup | ✅ Completed | | ✨ support radio card |
|
|
158
|
+
| 35 | 1 | Segment | ✅ Completed | | |
|
|
159
|
+
| 36 | 1 | Select | ✅ Completed | | |
|
|
160
|
+
| 37 | 1 | Separator | ✅ Completed | Divider | |
|
|
161
|
+
| 38 | 1 | Switch | ✅ Completed | | ✨ support switch card |
|
|
162
|
+
| 39 | 1 | Tabs | ✅ Completed | | |
|
|
163
|
+
| 40 | 1 | Tag | ✅ Completed | Badge(shadcn-ui) | |
|
|
164
|
+
| 41 | 1 | Textarea | ✅ Completed | | ✨ support auto size |
|
|
165
|
+
| 42 | 1 | Toast | ✅ Completed | Sonner | migrate from vue-sonner |
|
|
166
|
+
| 43 | 1 | Tooltip | ✅ Completed | | |
|
|
167
|
+
| 44 | 1 | Tree | ✅ Completed | | ✨ support virtualized |
|
|
168
|
+
| 45 | 1 | TreeMenu | ✅ Completed | | |
|
|
169
|
+
| 46 | 1 | Virtualizer | ✅ Completed | | |
|
|
170
|
+
| 47 | 1 | VisuallyHidden | ✅ Completed | | |
|
|
171
|
+
| 48 | 2 | ColorPicker | | | |
|
|
172
|
+
| 49 | 2 | Combobox | | | support virtualized |
|
|
173
|
+
| 50 | 2 | DataTable | | | support virtualized |
|
|
174
|
+
| 51 | 2 | Menubar | | | |
|
|
175
|
+
| 52 | 2 | PinInput | | InputOPT, OPTInput | |
|
|
176
|
+
| 53 | 2 | Popconfirm | | | |
|
|
177
|
+
| 54 | 2 | Progress | | | include circle |
|
|
178
|
+
| 55 | 2 | ScrollArea | | | |
|
|
179
|
+
| 56 | 2 | Skeleton | | | |
|
|
180
|
+
| 57 | 2 | Slider | | | |
|
|
181
|
+
| 58 | 2 | Table | | | |
|
|
182
|
+
| 59 | 2 | Toggle | | | |
|
|
183
|
+
| 60 | 2 | ToggleGroup | | | |
|
|
184
|
+
| 61 | 3 | BottomSheet | | Drawer(shadcn-ui) | |
|
|
185
|
+
| 62 | 3 | Calendar | | | v-calendar |
|
|
186
|
+
| 63 | 3 | Carousel | | | |
|
|
187
|
+
| 64 | 3 | DateField | | | |
|
|
188
|
+
| 65 | 3 | DatePicker | | | |
|
|
189
|
+
| 66 | 3 | DateRangeField | | | |
|
|
190
|
+
| 67 | 3 | DateRangePicker | | | |
|
|
191
|
+
| 68 | 3 | Editable | | | |
|
|
192
|
+
| 69 | 3 | HoverCard | | | |
|
|
193
|
+
| 70 | 3 | RangeCalendar | | | v-calendar |
|
|
194
|
+
| 71 | 3 | Resizable | | | |
|
|
195
|
+
| 72 | 3 | Splitter | | | |
|
|
196
|
+
| 73 | 3 | Stepper | | | |
|
|
197
|
+
| 74 | 3 | TagsInput | | | |
|
|
198
|
+
| 75 | 3 | TimeField | | | |
|
|
199
|
+
| 76 | 3 | Timeline | | | ui things |
|
|
200
|
+
| 77 | 3 | TimePicker | | | element-plus |
|
|
201
|
+
| 78 | 3 | Toolbar | | | |
|
|
202
|
+
| 79 | 4 | Affix | | | |
|
|
203
|
+
| 80 | 4 | Anchor | | | |
|
|
204
|
+
| 81 | 4 | AutoComplete | | | support virtualized |
|
|
205
|
+
| 82 | 4 | Backtop | | | |
|
|
206
|
+
| 83 | 4 | Cascader | | | support virtualized |
|
|
207
|
+
| 84 | 4 | Clipboard | | | |
|
|
208
|
+
| 85 | 4 | Code | | | |
|
|
209
|
+
| 86 | 4 | Comment | | | |
|
|
210
|
+
| 87 | 4 | Countdown | | | |
|
|
211
|
+
| 88 | 4 | CurrencyInput | | | |
|
|
212
|
+
| 89 | 4 | Descriptions | | | |
|
|
213
|
+
| 90 | 4 | Ellipsis | | | |
|
|
214
|
+
| 91 | 4 | Empty | | | |
|
|
215
|
+
| 92 | 4 | Equation | | | based on katex |
|
|
216
|
+
| 93 | 4 | InfiniteScroll | | | |
|
|
217
|
+
| 94 | 4 | Mention | | | element-plus |
|
|
218
|
+
| 95 | 4 | Navbar | | | |
|
|
219
|
+
| 96 | 4 | NumberAnimation | | | naive-ui |
|
|
220
|
+
| 97 | 4 | PageTab | | | |
|
|
221
|
+
| 98 | 4 | QRCode | | | |
|
|
222
|
+
| 99 | 4 | Rating | | Rate | element-plus |
|
|
223
|
+
| 100 | 4 | Result | | | |
|
|
224
|
+
| 101 | 4 | Spinner | | Loader, Spin | github ldrs |
|
|
225
|
+
| 102 | 4 | Statistic | | | |
|
|
226
|
+
| 103 | 4 | Tour | | | |
|
|
227
|
+
| 104 | 4 | Transfer | | | |
|
|
228
|
+
| 105 | 4 | TreeSelect | | | |
|
|
229
|
+
| 106 | 4 | Typography | | | shadcn-ui |
|
|
230
|
+
| 107 | 4 | Upload | | FileUpload, Dropfile | |
|
|
231
|
+
| 108 | 4 | Watermark | | | |
|
|
232
|
+
|
|
233
|
+
### 工具函数
|
|
234
|
+
|
|
235
|
+
✅ 12 / 总计: 13
|
|
236
|
+
|
|
237
|
+
| 序号 | 优先级 | 名称 | 状态 | 📝 备注 |
|
|
238
|
+
| ---- | ------ | ------------------- | ------------ | -------------- |
|
|
239
|
+
| 1 | 1 | Popper | ✅ Completed | |
|
|
240
|
+
| 2 | 1 | Portal | ✅ Completed | alias Teleport |
|
|
241
|
+
| 3 | 1 | Primitive | ✅ Completed | |
|
|
242
|
+
| 4 | 1 | RovingFocus | ✅ Completed | |
|
|
243
|
+
| 5 | 1 | Slot | ✅ Completed | |
|
|
244
|
+
| 6 | 1 | useCollection | ✅ Completed | |
|
|
245
|
+
| 7 | 1 | useDismissableLayer | ✅ Completed | |
|
|
246
|
+
| 8 | 1 | useFocusGuards | ✅ Completed | |
|
|
247
|
+
| 9 | 1 | useFocusScope | ✅ Completed | |
|
|
248
|
+
| 10 | 1 | usePresence | ✅ Completed | |
|
|
249
|
+
| 11 | 1 | useDialog | ✅ Completed | |
|
|
250
|
+
| 12 | 1 | useToast | ✅ Completed | |
|
|
251
|
+
| 13 | 2 | useLoadingBar | | |
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { AccordionOptionData, AccordionProps } from "./types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as vue102 from "vue";
|
|
3
3
|
|
|
4
4
|
//#region src/components/accordion/accordion.vue.d.ts
|
|
5
5
|
declare const __VLS_export: <T extends AccordionOptionData = AccordionOptionData, M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
6
6
|
props: __VLS_PrettifyLocal<AccordionProps<T, M> & {
|
|
7
7
|
"onUpdate:modelValue"?: ((value: M extends true ? string[] : string) => any) | undefined;
|
|
8
|
-
}> &
|
|
8
|
+
}> & vue102.PublicProps;
|
|
9
9
|
expose: (exposed: {}) => void;
|
|
10
10
|
attrs: any;
|
|
11
11
|
slots: {
|
|
@@ -39,7 +39,7 @@ declare const __VLS_export: <T extends AccordionOptionData = AccordionOptionData
|
|
|
39
39
|
}) => any;
|
|
40
40
|
};
|
|
41
41
|
emit: (evt: "update:modelValue", value: M extends true ? string[] : string) => void;
|
|
42
|
-
}>) =>
|
|
42
|
+
}>) => vue102.VNode & {
|
|
43
43
|
__ctx?: Awaited<typeof __VLS_setup>;
|
|
44
44
|
};
|
|
45
45
|
declare const _default: typeof __VLS_export;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { AlertProps } from "./types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as vue104 from "vue";
|
|
3
3
|
|
|
4
4
|
//#region src/components/alert/alert.vue.d.ts
|
|
5
5
|
declare var __VLS_10: {}, __VLS_26: {}, __VLS_33: {}, __VLS_35: {}, __VLS_37: {}, __VLS_44: {};
|
|
@@ -16,13 +16,13 @@ type __VLS_Slots = {} & {
|
|
|
16
16
|
} & {
|
|
17
17
|
close?: (props: typeof __VLS_44) => any;
|
|
18
18
|
};
|
|
19
|
-
declare const __VLS_base:
|
|
19
|
+
declare const __VLS_base: vue104.DefineComponent<AlertProps, {}, {}, {}, {}, vue104.ComponentOptionsMixin, vue104.ComponentOptionsMixin, {
|
|
20
20
|
"update:open": (open: boolean) => any;
|
|
21
|
-
}, string,
|
|
21
|
+
}, string, vue104.PublicProps, Readonly<AlertProps> & Readonly<{
|
|
22
22
|
"onUpdate:open"?: ((open: boolean) => any) | undefined;
|
|
23
23
|
}>, {
|
|
24
24
|
open: boolean;
|
|
25
|
-
}, {}, {}, {}, string,
|
|
25
|
+
}, {}, {}, {}, string, vue104.ComponentProvideOptions, false, {}, any>;
|
|
26
26
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
27
27
|
declare const _default: typeof __VLS_export;
|
|
28
28
|
type __VLS_WithSlots<T, S> = T & {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { AlertDialogActionProps } from "./types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as vue119 from "vue";
|
|
3
3
|
|
|
4
4
|
//#region src/components/alert-dialog/alert-dialog-action.vue.d.ts
|
|
5
5
|
declare var __VLS_7: {}, __VLS_13: {};
|
|
@@ -8,9 +8,9 @@ type __VLS_Slots = {} & {
|
|
|
8
8
|
} & {
|
|
9
9
|
default?: (props: typeof __VLS_13) => any;
|
|
10
10
|
};
|
|
11
|
-
declare const __VLS_base:
|
|
11
|
+
declare const __VLS_base: vue119.DefineComponent<AlertDialogActionProps, {}, {}, {}, {}, vue119.ComponentOptionsMixin, vue119.ComponentOptionsMixin, {}, string, vue119.PublicProps, Readonly<AlertDialogActionProps> & Readonly<{}>, {
|
|
12
12
|
text: string;
|
|
13
|
-
}, {}, {}, {}, string,
|
|
13
|
+
}, {}, {}, {}, string, vue119.ComponentProvideOptions, false, {}, any>;
|
|
14
14
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
15
15
|
declare const _default: typeof __VLS_export;
|
|
16
16
|
type __VLS_WithSlots<T, S> = T & {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ButtonVariant } from "../../variants/button.js";
|
|
2
2
|
import { AlertDialogCancelProps } from "./types.js";
|
|
3
3
|
import "../button/index.js";
|
|
4
|
-
import * as
|
|
4
|
+
import * as vue114 from "vue";
|
|
5
5
|
|
|
6
6
|
//#region src/components/alert-dialog/alert-dialog-cancel.vue.d.ts
|
|
7
7
|
declare var __VLS_7: {}, __VLS_13: {};
|
|
@@ -10,10 +10,10 @@ type __VLS_Slots = {} & {
|
|
|
10
10
|
} & {
|
|
11
11
|
default?: (props: typeof __VLS_13) => any;
|
|
12
12
|
};
|
|
13
|
-
declare const __VLS_base:
|
|
13
|
+
declare const __VLS_base: vue114.DefineComponent<AlertDialogCancelProps, {}, {}, {}, {}, vue114.ComponentOptionsMixin, vue114.ComponentOptionsMixin, {}, string, vue114.PublicProps, Readonly<AlertDialogCancelProps> & Readonly<{}>, {
|
|
14
14
|
variant: ButtonVariant;
|
|
15
15
|
text: string;
|
|
16
|
-
}, {}, {}, {}, string,
|
|
16
|
+
}, {}, {}, {}, string, vue114.ComponentProvideOptions, false, {}, any>;
|
|
17
17
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
18
18
|
declare const _default: typeof __VLS_export;
|
|
19
19
|
type __VLS_WithSlots<T, S> = T & {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { AlertDialogProps } from "./types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as vue109 from "vue";
|
|
3
3
|
|
|
4
4
|
//#region src/components/alert-dialog/alert-dialog.vue.d.ts
|
|
5
5
|
declare var __VLS_15: {}, __VLS_46: {
|
|
@@ -26,15 +26,15 @@ type __VLS_Slots = {} & {
|
|
|
26
26
|
} & {
|
|
27
27
|
footer?: (props: typeof __VLS_62) => any;
|
|
28
28
|
};
|
|
29
|
-
declare const __VLS_base:
|
|
29
|
+
declare const __VLS_base: vue109.DefineComponent<AlertDialogProps, {}, {}, {}, {}, vue109.ComponentOptionsMixin, vue109.ComponentOptionsMixin, {
|
|
30
30
|
"update:open": (value: boolean) => any;
|
|
31
|
-
}, string,
|
|
31
|
+
}, string, vue109.PublicProps, Readonly<AlertDialogProps> & Readonly<{
|
|
32
32
|
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
33
33
|
}>, {
|
|
34
|
-
defaultOpen: boolean;
|
|
35
34
|
open: boolean;
|
|
35
|
+
defaultOpen: boolean;
|
|
36
36
|
showIcon: boolean;
|
|
37
|
-
}, {}, {}, {}, string,
|
|
37
|
+
}, {}, {}, {}, string, vue109.ComponentProvideOptions, false, {}, any>;
|
|
38
38
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
39
39
|
declare const _default: typeof __VLS_export;
|
|
40
40
|
type __VLS_WithSlots<T, S> = T & {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { AvatarProps } from "./types.js";
|
|
2
|
-
import * as
|
|
3
|
-
import * as
|
|
2
|
+
import * as vue8 from "vue";
|
|
3
|
+
import * as _soybeanjs_headless1 from "@soybeanjs/headless";
|
|
4
4
|
|
|
5
5
|
//#region src/components/avatar/avatar.vue.d.ts
|
|
6
6
|
declare var __VLS_7: {}, __VLS_9: {}, __VLS_24: {};
|
|
@@ -11,11 +11,11 @@ type __VLS_Slots = {} & {
|
|
|
11
11
|
} & {
|
|
12
12
|
fallback?: (props: typeof __VLS_24) => any;
|
|
13
13
|
};
|
|
14
|
-
declare const __VLS_base:
|
|
15
|
-
loadingStatusChange: (status:
|
|
16
|
-
}, string,
|
|
17
|
-
onLoadingStatusChange?: ((status:
|
|
18
|
-
}>, {}, {}, {}, {}, string,
|
|
14
|
+
declare const __VLS_base: vue8.DefineComponent<AvatarProps, {}, {}, {}, {}, vue8.ComponentOptionsMixin, vue8.ComponentOptionsMixin, {
|
|
15
|
+
loadingStatusChange: (status: _soybeanjs_headless1.ImageLoadingStatus) => any;
|
|
16
|
+
}, string, vue8.PublicProps, Readonly<AvatarProps> & Readonly<{
|
|
17
|
+
onLoadingStatusChange?: ((status: _soybeanjs_headless1.ImageLoadingStatus) => any) | undefined;
|
|
18
|
+
}>, {}, {}, {}, {}, string, vue8.ComponentProvideOptions, false, {}, any>;
|
|
19
19
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
20
20
|
declare const _default: typeof __VLS_export;
|
|
21
21
|
type __VLS_WithSlots<T, S> = T & {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { BadgeProps } from "./types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as vue13 from "vue";
|
|
3
3
|
|
|
4
4
|
//#region src/components/badge/badge.vue.d.ts
|
|
5
5
|
declare var __VLS_10: {}, __VLS_17: {};
|
|
@@ -8,13 +8,13 @@ type __VLS_Slots = {} & {
|
|
|
8
8
|
} & {
|
|
9
9
|
content?: (props: typeof __VLS_17) => any;
|
|
10
10
|
};
|
|
11
|
-
declare const __VLS_base:
|
|
11
|
+
declare const __VLS_base: vue13.DefineComponent<BadgeProps, {}, {}, {}, {}, vue13.ComponentOptionsMixin, vue13.ComponentOptionsMixin, {
|
|
12
12
|
"update:open": (open: boolean) => any;
|
|
13
|
-
}, string,
|
|
13
|
+
}, string, vue13.PublicProps, Readonly<BadgeProps> & Readonly<{
|
|
14
14
|
"onUpdate:open"?: ((open: boolean) => any) | undefined;
|
|
15
15
|
}>, {
|
|
16
16
|
open: boolean;
|
|
17
|
-
}, {}, {}, {}, string,
|
|
17
|
+
}, {}, {}, {}, string, vue13.ComponentProvideOptions, false, {}, any>;
|
|
18
18
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
19
19
|
declare const _default: typeof __VLS_export;
|
|
20
20
|
type __VLS_WithSlots<T, S> = T & {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { BreadcrumbEmits, BreadcrumbOptionData, BreadcrumbProps } from "./types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as vue129 from "vue";
|
|
3
3
|
|
|
4
4
|
//#region src/components/breadcrumb/breadcrumb.vue.d.ts
|
|
5
5
|
declare const __VLS_export: <T extends BreadcrumbOptionData = BreadcrumbOptionData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
6
6
|
props: __VLS_PrettifyLocal<BreadcrumbProps<T> & {
|
|
7
7
|
onClick?: ((item: T) => any) | undefined;
|
|
8
|
-
}> &
|
|
8
|
+
}> & vue129.PublicProps;
|
|
9
9
|
expose: (exposed: {}) => void;
|
|
10
10
|
attrs: any;
|
|
11
11
|
slots: {
|
|
@@ -40,7 +40,7 @@ declare const __VLS_export: <T extends BreadcrumbOptionData = BreadcrumbOptionDa
|
|
|
40
40
|
separator?: (props: {}) => any;
|
|
41
41
|
};
|
|
42
42
|
emit: BreadcrumbEmits<T>;
|
|
43
|
-
}>) =>
|
|
43
|
+
}>) => vue129.VNode & {
|
|
44
44
|
__ctx?: Awaited<typeof __VLS_setup>;
|
|
45
45
|
};
|
|
46
46
|
declare const _default: typeof __VLS_export;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { ButtonGroupProps } from "./types.js";
|
|
2
|
-
import * as
|
|
3
|
-
import * as
|
|
2
|
+
import * as vue236 from "vue";
|
|
3
|
+
import * as _soybeanjs_headless101 from "@soybeanjs/headless";
|
|
4
4
|
|
|
5
5
|
//#region src/components/button/button-group.vue.d.ts
|
|
6
6
|
declare var __VLS_7: {};
|
|
7
7
|
type __VLS_Slots = {} & {
|
|
8
8
|
default?: (props: typeof __VLS_7) => any;
|
|
9
9
|
};
|
|
10
|
-
declare const __VLS_base:
|
|
11
|
-
dir:
|
|
12
|
-
orientation:
|
|
13
|
-
}, {}, {}, {}, string,
|
|
10
|
+
declare const __VLS_base: vue236.DefineComponent<ButtonGroupProps, {}, {}, {}, {}, vue236.ComponentOptionsMixin, vue236.ComponentOptionsMixin, {}, string, vue236.PublicProps, Readonly<ButtonGroupProps> & Readonly<{}>, {
|
|
11
|
+
dir: _soybeanjs_headless101.Direction;
|
|
12
|
+
orientation: _soybeanjs_headless101.DataOrientation;
|
|
13
|
+
}, {}, {}, {}, string, vue236.ComponentProvideOptions, false, {}, any>;
|
|
14
14
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
15
15
|
declare const _default: typeof __VLS_export;
|
|
16
16
|
type __VLS_WithSlots<T, S> = T & {
|
|
@@ -2,15 +2,15 @@ import { ThemeColor } from "../../theme/types.js";
|
|
|
2
2
|
import { ButtonShape, ButtonVariant } from "../../variants/button.js";
|
|
3
3
|
import { ButtonIconProps } from "./types.js";
|
|
4
4
|
import "../../index.js";
|
|
5
|
-
import * as
|
|
5
|
+
import * as vue226 from "vue";
|
|
6
6
|
|
|
7
7
|
//#region src/components/button/button-icon.vue.d.ts
|
|
8
|
-
declare const __VLS_export:
|
|
8
|
+
declare const __VLS_export: vue226.DefineComponent<ButtonIconProps, {}, {}, {}, {}, vue226.ComponentOptionsMixin, vue226.ComponentOptionsMixin, {}, string, vue226.PublicProps, Readonly<ButtonIconProps> & Readonly<{}>, {
|
|
9
9
|
color: ThemeColor;
|
|
10
10
|
variant: ButtonVariant;
|
|
11
11
|
shape: ButtonShape;
|
|
12
12
|
fitContent: boolean;
|
|
13
|
-
}, {}, {}, {}, string,
|
|
13
|
+
}, {}, {}, {}, string, vue226.ComponentProvideOptions, false, {}, any>;
|
|
14
14
|
declare const _default: typeof __VLS_export;
|
|
15
15
|
//#endregion
|
|
16
16
|
export { _default };
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { ButtonVariant } from "../../variants/button.js";
|
|
2
2
|
import { ButtonLinkProps } from "./types.js";
|
|
3
|
-
import * as
|
|
3
|
+
import * as vue231 from "vue";
|
|
4
4
|
|
|
5
5
|
//#region src/components/button/button-link.vue.d.ts
|
|
6
6
|
declare var __VLS_10: {};
|
|
7
7
|
type __VLS_Slots = {} & {
|
|
8
8
|
default?: (props: typeof __VLS_10) => any;
|
|
9
9
|
};
|
|
10
|
-
declare const __VLS_base:
|
|
11
|
-
disabled: boolean;
|
|
10
|
+
declare const __VLS_base: vue231.DefineComponent<ButtonLinkProps, {}, {}, {}, {}, vue231.ComponentOptionsMixin, vue231.ComponentOptionsMixin, {}, string, vue231.PublicProps, Readonly<ButtonLinkProps> & Readonly<{}>, {
|
|
12
11
|
variant: ButtonVariant;
|
|
13
12
|
replace: boolean;
|
|
13
|
+
disabled: boolean;
|
|
14
14
|
viewTransition: boolean;
|
|
15
15
|
external: boolean;
|
|
16
16
|
noRel: boolean;
|
|
17
17
|
prefetch: boolean;
|
|
18
18
|
noPrefetch: boolean;
|
|
19
|
-
}, {}, {}, {}, string,
|
|
19
|
+
}, {}, {}, {}, string, vue231.ComponentProvideOptions, false, {}, any>;
|
|
20
20
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
21
21
|
declare const _default: typeof __VLS_export;
|
|
22
22
|
type __VLS_WithSlots<T, S> = T & {
|