@yh-ui/components 1.0.5 → 1.0.8
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/LICENSE +1 -1
- package/README.md +50 -184
- package/dist/ai-sender/src/ai-sender.vue +2 -0
- package/dist/ai-thought-chain/src/ai-thought-chain.css +35 -0
- package/dist/ai-thought-chain/src/ai-thought-chain.vue +35 -0
- package/dist/input/src/input.vue +2 -2
- package/dist/message/src/message.d.ts +30 -31
- package/dist/notification/src/notification.d.ts +30 -31
- package/dist/select/src/select.vue +1 -0
- package/package.json +5 -5
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1,217 +1,83 @@
|
|
|
1
1
|
# @yh-ui/components
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
<img src="https://raw.githubusercontent.com/1079161148/yh-ui/main/docs/public/logo.svg" width="120" height="120" alt="YH-UI Logo">
|
|
5
|
-
</p>
|
|
3
|
+
YH-UI 的 Vue 3 组件包。它不仅包含按钮、表单、弹层、导航这类基础组件,也覆盖 AI 交互、复杂表格、业务展示和电商场景,适合直接搭建中后台、运营工具、AI 产品和复杂业务页面。
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
[Documentation](https://1079161148.github.io/yh-ui/) | [Components](https://1079161148.github.io/yh-ui/components/button) | [Releases](https://github.com/1079161148/yh-ui/releases)
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
基于 Vue 3.5+ 的企业级 UI 组件集合 · 77+ 组件(含 16 个 AI 组件)· 完整 TypeScript · 原生 Tree-shaking
|
|
11
|
-
</p>
|
|
7
|
+
## Highlights
|
|
12
8
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
</a>
|
|
20
|
-
<a href="https://github.com/1079161148/yh-ui/blob/main/LICENSE">
|
|
21
|
-
<img src="https://img.shields.io/npm/l/@yh-ui/components.svg?style=flat-square" alt="license">
|
|
22
|
-
</a>
|
|
23
|
-
</p>
|
|
9
|
+
- 覆盖面完整:Layout、Form、Data Display、Feedback、Navigation、ConfigProvider、Typography、Table、AI Components 和业务组件统一导出。
|
|
10
|
+
- AI 组件是内建能力:`YhAiChat`、`YhAiBubble`、`YhAiSender`、`YhAiThoughtChain`、`YhAiArtifacts`、`YhAiAttachments`、`YhAiMermaid`、`YhAiSources` 等组件可以直接组合成 AI 工作台。
|
|
11
|
+
- Table 面向高密度业务:列配置、选择、排序、工具栏、导出、打印、虚拟滚动等能力和 YH-UI 主题体系统一。
|
|
12
|
+
- 自有业务组件:`YhSmartAddress`、`YhSkuSelector`、`YhProductCard`、`YhCouponCard`、`YhLuckyDraw`、`YhCategoryNav`、`YhGanttChart` 等用于减少重复业务封装。
|
|
13
|
+
- 主题响应:组件消费 `@yh-ui/theme` 的 CSS 变量,支持暗色、密度、预设主题和运行时切换。
|
|
14
|
+
- TypeScript 和 SSR 友好:组件导出类型声明,核心 DOM 访问经过客户端保护,适合 Vite 和 Nuxt 场景。
|
|
24
15
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
## ✨ 特性
|
|
28
|
-
|
|
29
|
-
- 🧩 **77+ 企业级组件** — 覆盖基础 UI、数据展示、表单交互、反馈提示、布局、高级业务等全场景
|
|
30
|
-
- 🤖 **16 个 AI 组件** — 业内首创完整 AI UI 套件(聊天气泡、发送器、思维链、文件卡片等)
|
|
31
|
-
- 📊 **工业级 Table** — 虚拟滚动、列拖拽、多选、排序过滤、打印/导出 CSV/XLSX/PDF,媲美 vxe-table
|
|
32
|
-
- 🔒 **完整 TypeScript** — 全量类型定义,精确的 props/emits/slots 类型推导
|
|
33
|
-
- ⚡ **极致轻量** — 原生 ES Module,按需导入,完美 Tree-shaking
|
|
34
|
-
- 🌐 **SSR 完全兼容** — Nuxt 3 生产级验证,所有组件 SSR/Hydration 安全
|
|
35
|
-
- 🎨 **主题响应** — 自动响应 `@yh-ui/theme` 的主题变量,支持运行时切换
|
|
36
|
-
- ♿ **无障碍访问** — 关键组件通过 WCAG 2.1 AA 验证
|
|
37
|
-
|
|
38
|
-
---
|
|
39
|
-
|
|
40
|
-
## 📦 安装
|
|
16
|
+
## Install
|
|
41
17
|
|
|
42
18
|
```bash
|
|
43
|
-
# 推荐:安装主包(含样式)
|
|
44
|
-
pnpm add @yh-ui/yh-ui
|
|
45
|
-
|
|
46
|
-
# 或单独安装组件包(需自行引入依赖)
|
|
47
19
|
pnpm add @yh-ui/components
|
|
48
20
|
```
|
|
49
21
|
|
|
50
|
-
|
|
22
|
+
For the complete package with styles, hooks, theme and locale included, use:
|
|
51
23
|
|
|
52
|
-
|
|
24
|
+
```bash
|
|
25
|
+
pnpm add @yh-ui/yh-ui
|
|
26
|
+
```
|
|
53
27
|
|
|
54
|
-
|
|
28
|
+
## Usage
|
|
55
29
|
|
|
56
30
|
```ts
|
|
57
31
|
import { createApp } from 'vue'
|
|
58
|
-
import
|
|
59
|
-
import '@yh-ui/
|
|
60
|
-
import App from './App.vue'
|
|
32
|
+
import { YhButton, YhTable } from '@yh-ui/components'
|
|
33
|
+
import '@yh-ui/components/style.css'
|
|
61
34
|
|
|
62
35
|
const app = createApp(App)
|
|
63
|
-
app.
|
|
36
|
+
app.component('YhButton', YhButton)
|
|
37
|
+
app.component('YhTable', YhTable)
|
|
64
38
|
app.mount('#app')
|
|
65
39
|
```
|
|
66
40
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
```vue
|
|
70
|
-
<script setup lang="ts">
|
|
71
|
-
import { YhButton, YhInput, YhTable, YhForm, YhFormItem } from '@yh-ui/components'
|
|
72
|
-
</script>
|
|
73
|
-
|
|
74
|
-
<template>
|
|
75
|
-
<YhButton type="primary" size="large" :loading="submitting" @click="submit"> 提交 </YhButton>
|
|
76
|
-
</template>
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
### 方式三:自动导入(零配置,极致 DX)
|
|
41
|
+
## Auto Import
|
|
80
42
|
|
|
81
43
|
```ts
|
|
82
|
-
// vite.config.ts
|
|
83
|
-
import { defineConfig } from 'vite'
|
|
84
44
|
import Components from 'unplugin-vue-components/vite'
|
|
85
45
|
import { YhUIResolver } from '@yh-ui/components/resolver'
|
|
86
46
|
|
|
87
|
-
export default
|
|
47
|
+
export default {
|
|
88
48
|
plugins: [
|
|
89
49
|
Components({
|
|
90
50
|
resolvers: [YhUIResolver()]
|
|
91
51
|
})
|
|
92
52
|
]
|
|
93
|
-
}
|
|
53
|
+
}
|
|
94
54
|
```
|
|
95
55
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
|
105
|
-
|
|
|
106
|
-
| `
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
| `YhRadio` / `YhRadioGroup` / `YhRadioButton` | 单选框 |
|
|
125
|
-
| `YhSwitch` | 开关 |
|
|
126
|
-
| `YhSlider` | 滑块 |
|
|
127
|
-
| `YhRate` | 评分 |
|
|
128
|
-
| `YhDatePicker` | 日期选择器 |
|
|
129
|
-
| `YhTimePicker` | 时间选择器 |
|
|
130
|
-
| `YhColorPicker` | 颜色选择器 |
|
|
131
|
-
| `YhUpload` | 文件上传 |
|
|
132
|
-
| `YhTransfer` | 穿梭框 |
|
|
133
|
-
| `YhTreeSelect` | 树形选择器 |
|
|
134
|
-
|
|
135
|
-
### 📊 数据展示
|
|
136
|
-
|
|
137
|
-
| 组件 | 说明 |
|
|
138
|
-
| ---------------- | ------------------------------------ |
|
|
139
|
-
| `YhTable` | 工业级表格(虚拟滚动 / 拖拽 / 导出) |
|
|
140
|
-
| `YhTree` | 树形控件(虚拟滚动、拖拽排序) |
|
|
141
|
-
| `YhList` | 列表 |
|
|
142
|
-
| `YhCard` | 卡片 |
|
|
143
|
-
| `YhBadge` | 徽标 |
|
|
144
|
-
| `YhTag` | 标签 |
|
|
145
|
-
| `YhAvatar` | 头像 |
|
|
146
|
-
| `YhImage` | 图片(懒加载、预览) |
|
|
147
|
-
| `YhCalendar` | 日历 |
|
|
148
|
-
| `YhStatistic` | 数据统计展示 |
|
|
149
|
-
| `YhTimeline` | 时间轴 |
|
|
150
|
-
| `YhDescriptions` | 描述列表 |
|
|
151
|
-
| `YhChart` | 图表(封装 ECharts) |
|
|
152
|
-
| `YhGantt` | 甘特图(工业级项目管理) |
|
|
153
|
-
|
|
154
|
-
### 💬 反馈组件
|
|
155
|
-
|
|
156
|
-
| 组件 | 说明 |
|
|
157
|
-
| ---------------- | ---------- |
|
|
158
|
-
| `YhMessage` | 全局提示 |
|
|
159
|
-
| `YhNotification` | 通知消息 |
|
|
160
|
-
| `YhAlert` | 警告提示 |
|
|
161
|
-
| `YhDialog` | 对话框 |
|
|
162
|
-
| `YhDrawer` | 抽屉 |
|
|
163
|
-
| `YhPopover` | 气泡卡片 |
|
|
164
|
-
| `YhTooltip` | 文字提示 |
|
|
165
|
-
| `YhPopconfirm` | 气泡确认框 |
|
|
166
|
-
| `YhLoading` | 加载中 |
|
|
167
|
-
| `YhProgress` | 进度条 |
|
|
168
|
-
| `YhSkeleton` | 骨架屏 |
|
|
169
|
-
|
|
170
|
-
### 📐 布局组件
|
|
171
|
-
|
|
172
|
-
| 组件 | 说明 |
|
|
173
|
-
| ---------------------------------------------- | ---------- |
|
|
174
|
-
| `YhRow` / `YhCol` | 栅格布局 |
|
|
175
|
-
| `YhDivider` | 分割线 |
|
|
176
|
-
| `YhSpace` | 间距 |
|
|
177
|
-
| `YhContainer` | 布局容器 |
|
|
178
|
-
| `YhAside` / `YhHeader` / `YhMain` / `YhFooter` | 布局子组件 |
|
|
179
|
-
|
|
180
|
-
### 🧭 导航组件
|
|
181
|
-
|
|
182
|
-
| 组件 | 说明 |
|
|
183
|
-
| -------------- | -------- |
|
|
184
|
-
| `YhMenu` | 导航菜单 |
|
|
185
|
-
| `YhTabs` | 标签页 |
|
|
186
|
-
| `YhBreadcrumb` | 面包屑 |
|
|
187
|
-
| `YhPagination` | 分页 |
|
|
188
|
-
| `YhSteps` | 步骤条 |
|
|
189
|
-
| `YhDropdown` | 下拉菜单 |
|
|
190
|
-
|
|
191
|
-
### 🤖 AI 组件(独家特性)
|
|
192
|
-
|
|
193
|
-
| 组件 | 说明 |
|
|
194
|
-
| ------------------ | --------------------------------------- |
|
|
195
|
-
| `YhAiBubble` | AI 对话气泡(Markdown 渲染 + 流式打字) |
|
|
196
|
-
| `YhAiSender` | 智能输入发送器(支持附件、快捷指令) |
|
|
197
|
-
| `YhAiWelcome` | AI 欢迎界面 |
|
|
198
|
-
| `YhAiThoughtChain` | 思维链展示 |
|
|
199
|
-
| `YhAiSuggestion` | 智能推荐提示 |
|
|
200
|
-
| `YhAiFileCard` | 文件消息卡片 |
|
|
201
|
-
| `YhAiImageCard` | 图片消息卡片 |
|
|
202
|
-
| `YhAiProvider` | AI 上下文提供者 |
|
|
203
|
-
| `YhAiChatWindow` | 完整聊天窗口(开箱即用) |
|
|
204
|
-
| ... | 共 16 个 AI 组件 |
|
|
205
|
-
|
|
206
|
-
---
|
|
207
|
-
|
|
208
|
-
## 🔗 相关资源
|
|
209
|
-
|
|
210
|
-
- [📖 官方文档](https://1079161148.github.io/yh-ui/)
|
|
211
|
-
- [🚀 快速开始](https://1079161148.github.io/yh-ui/guide/quickstart)
|
|
212
|
-
- [📦 GitHub 仓库](https://github.com/1079161148/yh-ui)
|
|
213
|
-
- [📝 更新日志](https://github.com/1079161148/yh-ui/blob/main/CHANGELOG.md)
|
|
214
|
-
|
|
215
|
-
## 📄 开源协议
|
|
216
|
-
|
|
217
|
-
MIT License © 2024-present YH-UI Team
|
|
56
|
+
## Component Families
|
|
57
|
+
|
|
58
|
+
| Area | Examples |
|
|
59
|
+
| ---------- | --------------------------------------------------------------------------------- |
|
|
60
|
+
| Basic | `YhButton`, `YhIcon`, `YhTypographyTitle`, `YhSpace`, `YhDivider` |
|
|
61
|
+
| Form | `YhForm`, `YhInput`, `YhSelect`, `YhDatePicker`, `YhUpload`, `YhTransfer` |
|
|
62
|
+
| Data | `YhTable`, `YhTree`, `YhCalendar`, `YhWaterfall`, `YhCountdown`, `YhGanttChart` |
|
|
63
|
+
| Feedback | `YhMessage`, `YhNotification`, `YhDialog`, `YhDrawer`, `YhLoading`, `YhResult` |
|
|
64
|
+
| Navigation | `YhMenu`, `YhTabs`, `YhSteps`, `YhBreadcrumb`, `YhDropdown`, `YhPagination` |
|
|
65
|
+
| AI | `YhAiChat`, `YhAiBubble`, `YhAiSender`, `YhAiThoughtChain`, `YhAiProvider` |
|
|
66
|
+
| Business | `YhSmartAddress`, `YhSkuSelector`, `YhProductCard`, `YhCouponCard`, `YhLuckyDraw` |
|
|
67
|
+
|
|
68
|
+
## AI Example
|
|
69
|
+
|
|
70
|
+
```vue
|
|
71
|
+
<script setup lang="ts">
|
|
72
|
+
import { YhAiBubble, YhAiSender } from '@yh-ui/components'
|
|
73
|
+
</script>
|
|
74
|
+
|
|
75
|
+
<template>
|
|
76
|
+
<YhAiBubble role="assistant" content="Hello from YH-UI" />
|
|
77
|
+
<YhAiSender placeholder="Ask anything" />
|
|
78
|
+
</template>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## License
|
|
82
|
+
|
|
83
|
+
MIT
|
|
@@ -295,6 +295,7 @@ const handleFocus = (e) => {
|
|
|
295
295
|
v-if="clearable && innerValue.length > 0"
|
|
296
296
|
:class="ns.e('clear-btn')"
|
|
297
297
|
circle
|
|
298
|
+
:aria-label="t('common.clear') || 'Clear input'"
|
|
298
299
|
@click="handleClear"
|
|
299
300
|
:disabled="loading"
|
|
300
301
|
>
|
|
@@ -314,6 +315,7 @@ const handleFocus = (e) => {
|
|
|
314
315
|
:class="ns.e('send-btn')"
|
|
315
316
|
:disabled="!innerValue?.trim() || disabled"
|
|
316
317
|
:loading="loading"
|
|
318
|
+
:aria-label="t('ai.sender.placeholder') || 'Send message'"
|
|
317
319
|
@click="handleSend"
|
|
318
320
|
circle
|
|
319
321
|
>
|
|
@@ -474,6 +474,14 @@ html.dark {
|
|
|
474
474
|
.yh-ai-thought-chain.is-thinking {
|
|
475
475
|
border-left-color: var(--yh-color-primary);
|
|
476
476
|
}
|
|
477
|
+
.yh-ai-thought-chain.is-thinking .yh-ai-thought-chain__title {
|
|
478
|
+
color: var(--yh-color-primary);
|
|
479
|
+
background: linear-gradient(90deg, var(--yh-color-primary) 0%, var(--yh-color-primary-light-3) 35%, var(--yh-color-primary) 70%);
|
|
480
|
+
background-size: 200% 100%;
|
|
481
|
+
background-clip: text;
|
|
482
|
+
-webkit-text-fill-color: transparent;
|
|
483
|
+
animation: yh-ai-thought-title-wave 1.6s ease-in-out infinite;
|
|
484
|
+
}
|
|
477
485
|
|
|
478
486
|
.yh-ai-thought-chain.is-draggable .yh-ai-thought-chain__item {
|
|
479
487
|
cursor: move;
|
|
@@ -717,6 +725,19 @@ html.dark {
|
|
|
717
725
|
color: var(--yh-color-primary);
|
|
718
726
|
}
|
|
719
727
|
|
|
728
|
+
.yh-ai-thought-chain.is-timeline .yh-ai-thought-chain__item .yh-ai-thought-chain__item-title {
|
|
729
|
+
transition: color 0.2s ease;
|
|
730
|
+
}
|
|
731
|
+
|
|
732
|
+
.yh-ai-thought-chain.is-timeline .yh-ai-thought-chain__item.is-active .yh-ai-thought-chain__item-title {
|
|
733
|
+
color: var(--yh-color-primary);
|
|
734
|
+
background: linear-gradient(90deg, var(--yh-color-primary) 0%, var(--yh-color-primary-light-3) 35%, var(--yh-color-primary) 70%);
|
|
735
|
+
background-size: 200% 100%;
|
|
736
|
+
background-clip: text;
|
|
737
|
+
-webkit-text-fill-color: transparent;
|
|
738
|
+
animation: yh-ai-thought-title-wave 1.6s ease-in-out infinite;
|
|
739
|
+
}
|
|
740
|
+
|
|
720
741
|
.yh-ai-thought-chain.is-timeline .yh-ai-thought-chain__item .yh-ai-thought-chain__item-arrow {
|
|
721
742
|
margin-left: 6px;
|
|
722
743
|
font-size: 12px;
|
|
@@ -756,6 +777,20 @@ html.dark {
|
|
|
756
777
|
transform: translateY(0);
|
|
757
778
|
}
|
|
758
779
|
}
|
|
780
|
+
@keyframes yh-ai-thought-title-wave {
|
|
781
|
+
0% {
|
|
782
|
+
background-position: 200% 0;
|
|
783
|
+
}
|
|
784
|
+
100% {
|
|
785
|
+
background-position: -200% 0;
|
|
786
|
+
}
|
|
787
|
+
}
|
|
788
|
+
@media (prefers-reduced-motion: reduce) {
|
|
789
|
+
.yh-ai-thought-chain.is-thinking .yh-ai-thought-chain__title,
|
|
790
|
+
.yh-ai-thought-chain__item.is-active .yh-ai-thought-chain__item-title {
|
|
791
|
+
animation: none;
|
|
792
|
+
}
|
|
793
|
+
}
|
|
759
794
|
.yh-ai-thought-collapse-enter-active,
|
|
760
795
|
.yh-ai-thought-collapse-leave-active {
|
|
761
796
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -777,6 +777,14 @@ html.dark {
|
|
|
777
777
|
.yh-ai-thought-chain.is-thinking {
|
|
778
778
|
border-left-color: var(--yh-color-primary);
|
|
779
779
|
}
|
|
780
|
+
.yh-ai-thought-chain.is-thinking .yh-ai-thought-chain__title {
|
|
781
|
+
color: var(--yh-color-primary);
|
|
782
|
+
background: linear-gradient(90deg, var(--yh-color-primary) 0%, var(--yh-color-primary-light-3) 35%, var(--yh-color-primary) 70%);
|
|
783
|
+
background-size: 200% 100%;
|
|
784
|
+
background-clip: text;
|
|
785
|
+
-webkit-text-fill-color: transparent;
|
|
786
|
+
animation: yh-ai-thought-title-wave 1.6s ease-in-out infinite;
|
|
787
|
+
}
|
|
780
788
|
|
|
781
789
|
.yh-ai-thought-chain.is-draggable .yh-ai-thought-chain__item {
|
|
782
790
|
cursor: move;
|
|
@@ -1020,6 +1028,19 @@ html.dark {
|
|
|
1020
1028
|
color: var(--yh-color-primary);
|
|
1021
1029
|
}
|
|
1022
1030
|
|
|
1031
|
+
.yh-ai-thought-chain.is-timeline .yh-ai-thought-chain__item .yh-ai-thought-chain__item-title {
|
|
1032
|
+
transition: color 0.2s ease;
|
|
1033
|
+
}
|
|
1034
|
+
|
|
1035
|
+
.yh-ai-thought-chain.is-timeline .yh-ai-thought-chain__item.is-active .yh-ai-thought-chain__item-title {
|
|
1036
|
+
color: var(--yh-color-primary);
|
|
1037
|
+
background: linear-gradient(90deg, var(--yh-color-primary) 0%, var(--yh-color-primary-light-3) 35%, var(--yh-color-primary) 70%);
|
|
1038
|
+
background-size: 200% 100%;
|
|
1039
|
+
background-clip: text;
|
|
1040
|
+
-webkit-text-fill-color: transparent;
|
|
1041
|
+
animation: yh-ai-thought-title-wave 1.6s ease-in-out infinite;
|
|
1042
|
+
}
|
|
1043
|
+
|
|
1023
1044
|
.yh-ai-thought-chain.is-timeline .yh-ai-thought-chain__item .yh-ai-thought-chain__item-arrow {
|
|
1024
1045
|
margin-left: 6px;
|
|
1025
1046
|
font-size: 12px;
|
|
@@ -1059,6 +1080,20 @@ html.dark {
|
|
|
1059
1080
|
transform: translateY(0);
|
|
1060
1081
|
}
|
|
1061
1082
|
}
|
|
1083
|
+
@keyframes yh-ai-thought-title-wave {
|
|
1084
|
+
0% {
|
|
1085
|
+
background-position: 200% 0;
|
|
1086
|
+
}
|
|
1087
|
+
100% {
|
|
1088
|
+
background-position: -200% 0;
|
|
1089
|
+
}
|
|
1090
|
+
}
|
|
1091
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1092
|
+
.yh-ai-thought-chain.is-thinking .yh-ai-thought-chain__title,
|
|
1093
|
+
.yh-ai-thought-chain__item.is-active .yh-ai-thought-chain__item-title {
|
|
1094
|
+
animation: none;
|
|
1095
|
+
}
|
|
1096
|
+
}
|
|
1062
1097
|
.yh-ai-thought-collapse-enter-active,
|
|
1063
1098
|
.yh-ai-thought-collapse-leave-active {
|
|
1064
1099
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
package/dist/input/src/input.vue
CHANGED
|
@@ -339,7 +339,7 @@ defineExpose({
|
|
|
339
339
|
:tabindex="tabindex"
|
|
340
340
|
:autocomplete="autocomplete"
|
|
341
341
|
:autofocus="autofocus"
|
|
342
|
-
:aria-label="ariaLabel || label"
|
|
342
|
+
:aria-label="ariaLabel || label || placeholder || t('input.placeholder')"
|
|
343
343
|
:inputmode="inputmode"
|
|
344
344
|
:style="textareaStyle"
|
|
345
345
|
@input="handleInput"
|
|
@@ -372,7 +372,7 @@ defineExpose({
|
|
|
372
372
|
:autocomplete="autocomplete"
|
|
373
373
|
:autofocus="autofocus"
|
|
374
374
|
:style="inputStyle"
|
|
375
|
-
:aria-label="ariaLabel || label"
|
|
375
|
+
:aria-label="ariaLabel || label || placeholder || t('input.placeholder')"
|
|
376
376
|
:inputmode="inputmode"
|
|
377
377
|
:aria-invalid="mergedStatus === 'error'"
|
|
378
378
|
:aria-describedby="mergedStatus === 'error' ? formItem?.errorId : void 0"
|
|
@@ -1,131 +1,130 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Message
|
|
3
|
-
* @description 娑堟伅鎻愮ず缁勪欢绫诲瀷瀹氫箟
|
|
2
|
+
* Message types and public contracts.
|
|
4
3
|
*/
|
|
5
4
|
import type { VNode, ComponentPublicInstance, Ref } from 'vue';
|
|
6
5
|
/**
|
|
7
|
-
*
|
|
6
|
+
* Supported message variants.
|
|
8
7
|
*/
|
|
9
8
|
export declare const messageTypes: readonly ["success", "warning", "info", "error"];
|
|
10
9
|
export type MessageType = (typeof messageTypes)[number];
|
|
11
10
|
/**
|
|
12
|
-
*
|
|
11
|
+
* Supported message placements.
|
|
13
12
|
*/
|
|
14
13
|
export declare const messagePlacements: readonly ["top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right"];
|
|
15
14
|
export type MessagePlacement = (typeof messagePlacements)[number];
|
|
16
15
|
/**
|
|
17
|
-
* Message
|
|
16
|
+
* Message component props.
|
|
18
17
|
*/
|
|
19
18
|
export interface MessageProps {
|
|
20
19
|
/**
|
|
21
|
-
*
|
|
20
|
+
* Message content.
|
|
22
21
|
*/
|
|
23
22
|
message?: string | VNode;
|
|
24
23
|
/**
|
|
25
|
-
*
|
|
24
|
+
* Message variant.
|
|
26
25
|
* @default 'info'
|
|
27
26
|
*/
|
|
28
27
|
type?: MessageType;
|
|
29
28
|
/**
|
|
30
|
-
*
|
|
29
|
+
* Custom icon.
|
|
31
30
|
*/
|
|
32
31
|
icon?: string | VNode;
|
|
33
32
|
/**
|
|
34
|
-
*
|
|
33
|
+
* Whether to show the close button.
|
|
35
34
|
* @default false
|
|
36
35
|
*/
|
|
37
36
|
showClose?: boolean;
|
|
38
37
|
/**
|
|
39
|
-
*
|
|
38
|
+
* Auto-close duration in milliseconds. Set to 0 to disable auto-close.
|
|
40
39
|
* @default 3000
|
|
41
40
|
*/
|
|
42
41
|
duration?: number;
|
|
43
42
|
/**
|
|
44
|
-
*
|
|
43
|
+
* Offset from the viewport edge in pixels.
|
|
45
44
|
* @default 20
|
|
46
45
|
*/
|
|
47
46
|
offset?: number;
|
|
48
47
|
/**
|
|
49
|
-
*
|
|
48
|
+
* Unique message id.
|
|
50
49
|
*/
|
|
51
50
|
id?: string;
|
|
52
51
|
/**
|
|
53
|
-
*
|
|
52
|
+
* Render message content as raw HTML.
|
|
54
53
|
* @default false
|
|
55
54
|
*/
|
|
56
55
|
dangerouslyUseHTMLString?: boolean;
|
|
57
56
|
/**
|
|
58
|
-
*
|
|
57
|
+
* Whether to center the content.
|
|
59
58
|
* @default false
|
|
60
59
|
*/
|
|
61
60
|
center?: boolean;
|
|
62
61
|
/**
|
|
63
|
-
*
|
|
62
|
+
* Callback fired after the message closes.
|
|
64
63
|
*/
|
|
65
64
|
onClose?: () => void;
|
|
66
65
|
/**
|
|
67
|
-
*
|
|
66
|
+
* z-index value.
|
|
68
67
|
*/
|
|
69
68
|
zIndex?: number;
|
|
70
69
|
/**
|
|
71
|
-
*
|
|
70
|
+
* Custom CSS class.
|
|
72
71
|
*/
|
|
73
72
|
customClass?: string;
|
|
74
73
|
/**
|
|
75
|
-
*
|
|
74
|
+
* Whether to merge messages with identical content.
|
|
76
75
|
* @default false
|
|
77
76
|
*/
|
|
78
77
|
grouping?: boolean;
|
|
79
78
|
/**
|
|
80
|
-
*
|
|
79
|
+
* Number of repeated grouped messages.
|
|
81
80
|
*/
|
|
82
81
|
repeatNum?: number;
|
|
83
82
|
/**
|
|
84
|
-
*
|
|
83
|
+
* Message placement.
|
|
85
84
|
* @default 'top'
|
|
86
85
|
*/
|
|
87
86
|
placement?: MessagePlacement;
|
|
88
87
|
/**
|
|
89
|
-
*
|
|
88
|
+
* Component-level theme overrides.
|
|
90
89
|
*/
|
|
91
90
|
themeOverrides?: import('@yh-ui/theme').ComponentThemeVars;
|
|
92
91
|
}
|
|
93
92
|
/**
|
|
94
|
-
* Message
|
|
93
|
+
* Message component emits.
|
|
95
94
|
*/
|
|
96
95
|
export interface MessageEmits {
|
|
97
96
|
(e: 'destroy'): void;
|
|
98
97
|
}
|
|
99
98
|
/**
|
|
100
|
-
* Message
|
|
99
|
+
* Message component slots.
|
|
101
100
|
*/
|
|
102
101
|
export interface MessageSlots {
|
|
103
102
|
/**
|
|
104
|
-
*
|
|
103
|
+
* Message content slot.
|
|
105
104
|
*/
|
|
106
105
|
default?: () => void;
|
|
107
106
|
/**
|
|
108
|
-
*
|
|
107
|
+
* Icon slot.
|
|
109
108
|
*/
|
|
110
109
|
icon?: () => void;
|
|
111
110
|
}
|
|
112
111
|
/**
|
|
113
|
-
*
|
|
112
|
+
* Exposed message instance methods.
|
|
114
113
|
*/
|
|
115
114
|
export interface MessageExpose {
|
|
116
115
|
visible: Ref<boolean>;
|
|
117
116
|
close: () => void;
|
|
118
117
|
}
|
|
119
118
|
/**
|
|
120
|
-
* Message
|
|
119
|
+
* Message component instance.
|
|
121
120
|
*/
|
|
122
121
|
export type MessageInstance = ComponentPublicInstance<MessageExpose>;
|
|
123
122
|
/**
|
|
124
|
-
* Message
|
|
123
|
+
* Message options accepted by the service API.
|
|
125
124
|
*/
|
|
126
125
|
export type MessageOptions = Partial<MessageProps>;
|
|
127
126
|
/**
|
|
128
|
-
* Message
|
|
127
|
+
* Message service handler.
|
|
129
128
|
*/
|
|
130
129
|
export interface MessageHandler {
|
|
131
130
|
close: () => void;
|
|
@@ -133,7 +132,7 @@ export interface MessageHandler {
|
|
|
133
132
|
closed?: boolean;
|
|
134
133
|
}
|
|
135
134
|
/**
|
|
136
|
-
*
|
|
135
|
+
* Internal message instance context.
|
|
137
136
|
*/
|
|
138
137
|
export interface MessageContext {
|
|
139
138
|
id: string;
|
|
@@ -142,7 +141,7 @@ export interface MessageContext {
|
|
|
142
141
|
vnode: import('vue').VNode;
|
|
143
142
|
}
|
|
144
143
|
/**
|
|
145
|
-
* Message
|
|
144
|
+
* Message service API.
|
|
146
145
|
*/
|
|
147
146
|
export type MessageFn = {
|
|
148
147
|
(options: MessageOptions | string): MessageHandler;
|
|
@@ -1,136 +1,135 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Notification
|
|
3
|
-
* @description 閫氱煡缁勪欢绫诲瀷瀹氫箟
|
|
2
|
+
* Notification types and public contracts.
|
|
4
3
|
*/
|
|
5
4
|
import type { VNode, ComponentPublicInstance, Ref } from 'vue';
|
|
6
5
|
/**
|
|
7
|
-
*
|
|
6
|
+
* Supported notification variants.
|
|
8
7
|
*/
|
|
9
8
|
export declare const notificationTypes: readonly ["success", "warning", "info", "error"];
|
|
10
9
|
export type NotificationType = (typeof notificationTypes)[number];
|
|
11
10
|
/**
|
|
12
|
-
*
|
|
11
|
+
* Supported notification positions.
|
|
13
12
|
*/
|
|
14
13
|
export declare const notificationPositions: readonly ["top-right", "top-left", "top-center", "bottom-right", "bottom-left", "bottom-center"];
|
|
15
14
|
export type NotificationPosition = (typeof notificationPositions)[number];
|
|
16
15
|
/**
|
|
17
|
-
* Notification
|
|
16
|
+
* Notification component props.
|
|
18
17
|
*/
|
|
19
18
|
export interface NotificationProps {
|
|
20
19
|
/**
|
|
21
|
-
*
|
|
20
|
+
* Notification title.
|
|
22
21
|
*/
|
|
23
22
|
title?: string;
|
|
24
23
|
/**
|
|
25
|
-
*
|
|
24
|
+
* Notification content.
|
|
26
25
|
*/
|
|
27
26
|
message?: string | VNode | (() => VNode);
|
|
28
27
|
/**
|
|
29
|
-
*
|
|
28
|
+
* Notification variant.
|
|
30
29
|
*/
|
|
31
30
|
type?: NotificationType;
|
|
32
31
|
/**
|
|
33
|
-
*
|
|
32
|
+
* Custom icon.
|
|
34
33
|
*/
|
|
35
34
|
icon?: string | VNode;
|
|
36
35
|
/**
|
|
37
|
-
*
|
|
36
|
+
* Whether to show the close button.
|
|
38
37
|
* @default true
|
|
39
38
|
*/
|
|
40
39
|
showClose?: boolean;
|
|
41
40
|
/**
|
|
42
|
-
*
|
|
41
|
+
* Auto-close duration in milliseconds. Set to 0 to disable auto-close.
|
|
43
42
|
* @default 4500
|
|
44
43
|
*/
|
|
45
44
|
duration?: number;
|
|
46
45
|
/**
|
|
47
|
-
*
|
|
46
|
+
* Offset from the viewport edge in pixels.
|
|
48
47
|
* @default 16
|
|
49
48
|
*/
|
|
50
49
|
offset?: number;
|
|
51
50
|
/**
|
|
52
|
-
*
|
|
51
|
+
* Notification position.
|
|
53
52
|
* @default 'top-right'
|
|
54
53
|
*/
|
|
55
54
|
position?: NotificationPosition;
|
|
56
55
|
/**
|
|
57
|
-
*
|
|
56
|
+
* Unique notification id.
|
|
58
57
|
*/
|
|
59
58
|
id?: string;
|
|
60
59
|
/**
|
|
61
|
-
*
|
|
60
|
+
* Render message content as raw HTML.
|
|
62
61
|
* @default false
|
|
63
62
|
*/
|
|
64
63
|
dangerouslyUseHTMLString?: boolean;
|
|
65
64
|
/**
|
|
66
|
-
*
|
|
65
|
+
* Callback fired after the notification closes.
|
|
67
66
|
*/
|
|
68
67
|
onClose?: () => void;
|
|
69
68
|
/**
|
|
70
|
-
*
|
|
69
|
+
* Callback fired when the notification is clicked.
|
|
71
70
|
*/
|
|
72
71
|
onClick?: () => void;
|
|
73
72
|
/**
|
|
74
|
-
*
|
|
73
|
+
* z-index value.
|
|
75
74
|
*/
|
|
76
75
|
zIndex?: number;
|
|
77
76
|
/**
|
|
78
|
-
*
|
|
77
|
+
* Custom CSS class.
|
|
79
78
|
*/
|
|
80
79
|
customClass?: string;
|
|
81
80
|
/**
|
|
82
|
-
*
|
|
81
|
+
* Maximum visible notifications per position.
|
|
83
82
|
*/
|
|
84
83
|
max?: number;
|
|
85
84
|
/**
|
|
86
|
-
*
|
|
85
|
+
* Component-level theme overrides.
|
|
87
86
|
*/
|
|
88
87
|
themeOverrides?: import('@yh-ui/theme').ComponentThemeVars;
|
|
89
88
|
}
|
|
90
89
|
/**
|
|
91
|
-
* Notification
|
|
90
|
+
* Notification component emits.
|
|
92
91
|
*/
|
|
93
92
|
export interface NotificationEmits {
|
|
94
93
|
(e: 'destroy'): void;
|
|
95
94
|
(e: 'click'): void;
|
|
96
95
|
}
|
|
97
96
|
/**
|
|
98
|
-
* Notification
|
|
97
|
+
* Notification component slots.
|
|
99
98
|
*/
|
|
100
99
|
export interface NotificationSlots {
|
|
101
100
|
/**
|
|
102
|
-
*
|
|
101
|
+
* Notification content slot.
|
|
103
102
|
*/
|
|
104
103
|
default?: () => void;
|
|
105
104
|
/**
|
|
106
|
-
*
|
|
105
|
+
* Icon slot.
|
|
107
106
|
*/
|
|
108
107
|
icon?: () => void;
|
|
109
108
|
}
|
|
110
109
|
/**
|
|
111
|
-
*
|
|
110
|
+
* Exposed notification instance methods.
|
|
112
111
|
*/
|
|
113
112
|
export interface NotificationExpose {
|
|
114
113
|
visible: Ref<boolean>;
|
|
115
114
|
close: () => void;
|
|
116
115
|
}
|
|
117
116
|
/**
|
|
118
|
-
* Notification
|
|
117
|
+
* Notification component instance.
|
|
119
118
|
*/
|
|
120
119
|
export type NotificationInstance = ComponentPublicInstance<NotificationExpose>;
|
|
121
120
|
/**
|
|
122
|
-
* Notification
|
|
121
|
+
* Notification options accepted by the service API.
|
|
123
122
|
*/
|
|
124
123
|
export type NotificationOptions = Partial<NotificationProps>;
|
|
125
124
|
/**
|
|
126
|
-
* Notification
|
|
125
|
+
* Notification service handler.
|
|
127
126
|
*/
|
|
128
127
|
export interface NotificationHandler {
|
|
129
128
|
close: () => void;
|
|
130
129
|
el?: HTMLElement;
|
|
131
130
|
}
|
|
132
131
|
/**
|
|
133
|
-
*
|
|
132
|
+
* Internal notification instance context.
|
|
134
133
|
*/
|
|
135
134
|
export interface NotificationContext {
|
|
136
135
|
id: string;
|
|
@@ -139,7 +138,7 @@ export interface NotificationContext {
|
|
|
139
138
|
vnode: import('vue').VNode;
|
|
140
139
|
}
|
|
141
140
|
/**
|
|
142
|
-
* Notification
|
|
141
|
+
* Notification service API.
|
|
143
142
|
*/
|
|
144
143
|
export type NotificationFn = {
|
|
145
144
|
(options: NotificationOptions | string): NotificationHandler;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yh-ui/components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"description": "YH-UI Vue 3 Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|
|
@@ -37,10 +37,10 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@webcontainer/api": "^1.6.1",
|
|
39
39
|
"@floating-ui/dom": "^1.7.4",
|
|
40
|
-
"@yh-ui/hooks": "^1.0.
|
|
41
|
-
"@yh-ui/locale": "^1.0.
|
|
42
|
-
"@yh-ui/theme": "^1.0.
|
|
43
|
-
"@yh-ui/utils": "^1.0.
|
|
40
|
+
"@yh-ui/hooks": "^1.0.8",
|
|
41
|
+
"@yh-ui/locale": "^1.0.8",
|
|
42
|
+
"@yh-ui/theme": "^1.0.8",
|
|
43
|
+
"@yh-ui/utils": "^1.0.8",
|
|
44
44
|
"async-validator": "^4.2.5",
|
|
45
45
|
"dayjs": "^1.11.19",
|
|
46
46
|
"markdown-it": "^14.1.1",
|