@yh-ui/components 1.0.7 → 1.0.9

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2024-present YH-UI Team
3
+ Copyright (c) 2026 YH-UI Team
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -1,217 +1,83 @@
1
1
  # @yh-ui/components
2
2
 
3
- <p align="center">
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
- <h3 align="center">YH-UI 核心组件库</h3>
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
- <p align="center">
10
- 基于 Vue 3.5+ 的企业级 UI 组件集合 · 77+ 组件(含 16 个 AI 组件)· 完整 TypeScript · 原生 Tree-shaking
11
- </p>
7
+ ## Highlights
12
8
 
13
- <p align="center">
14
- <a href="https://www.npmjs.com/package/@yh-ui/components">
15
- <img src="https://img.shields.io/npm/v/@yh-ui/components.svg?style=flat-square&colorB=409eff" alt="npm version">
16
- </a>
17
- <a href="https://www.npmjs.com/package/@yh-ui/components">
18
- <img src="https://img.shields.io/npm/dm/@yh-ui/components.svg?style=flat-square&colorB=409eff" alt="npm downloads">
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 YhUI from '@yh-ui/yh-ui'
59
- import '@yh-ui/yh-ui/css'
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.use(YhUI)
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 defineConfig({
47
+ export default {
88
48
  plugins: [
89
49
  Components({
90
50
  resolvers: [YhUIResolver()]
91
51
  })
92
52
  ]
93
- })
53
+ }
94
54
  ```
95
55
 
96
- `YhUIResolver()` 默认自动引入组件 CSS,纯 CSS 项目可直接使用,无需额外安装 Sass。
97
-
98
- ---
99
-
100
- ## 📚 组件目录
101
-
102
- ### 🏗 基础组件
103
-
104
- | 组件 | 说明 |
105
- | ------------------ | -------------------------------- |
106
- | `YhButton` | 按钮(支持 loading、图标、组等) |
107
- | `YhIcon` | 图标(整合 Iconify,20w+ 图标) |
108
- | `YhLink` | 链接 |
109
- | `YhScrollbar` | 自定义美化滚动条 |
110
- | `YhConfigProvider` | 全局配置提供者 |
111
-
112
- ### 📝 表单组件
113
-
114
- | 组件 | 说明 |
115
- | -------------------------------------------- | ---------------------------------- |
116
- | `YhForm` / `YhFormItem` | 表单容器(支持 async-validator) |
117
- | `YhFormSchema` | JSON Schema 动态表单生成器 |
118
- | `YhInput` | 输入框(支持插槽、字数统计、密码) |
119
- | `YhInputNumber` | 数字输入框 |
120
- | `YhInputTag` | 标签输入框 |
121
- | `YhSelect` / `YhOption` | 下拉选择(支持虚拟滚动) |
122
- | `YhCascader` | 级联选择 |
123
- | `YhCheckbox` / `YhCheckboxGroup` | 复选框 |
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);
@@ -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 Types & Props
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 Props 瀹氫箟
16
+ * Message component props.
18
17
  */
19
18
  export interface MessageProps {
20
19
  /**
21
- * @description 娑堟伅鍐呭
20
+ * Message content.
22
21
  */
23
22
  message?: string | VNode;
24
23
  /**
25
- * @description 娑堟伅绫诲瀷
24
+ * Message variant.
26
25
  * @default 'info'
27
26
  */
28
27
  type?: MessageType;
29
28
  /**
30
- * @description 鑷畾涔夊浘鏍?
29
+ * Custom icon.
31
30
  */
32
31
  icon?: string | VNode;
33
32
  /**
34
- * @description 鏄惁鏄剧ず鍏抽棴鎸夐挳
33
+ * Whether to show the close button.
35
34
  * @default false
36
35
  */
37
36
  showClose?: boolean;
38
37
  /**
39
- * @description 鏄剧ず鏃堕棿锛堟绉掞級銆傝涓?0 鍒欎笉浼氳嚜鍔ㄥ叧闂?
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
- * @description 璺濈椤堕儴鐨勫亸绉婚噺锛坧x锛?
43
+ * Offset from the viewport edge in pixels.
45
44
  * @default 20
46
45
  */
47
46
  offset?: number;
48
47
  /**
49
- * @description 娑堟伅鐨勫敮涓€鏍囪瘑
48
+ * Unique message id.
50
49
  */
51
50
  id?: string;
52
51
  /**
53
- * @description 鏄惁灏?message 浣滀负 HTML 鐗囨澶勭悊
52
+ * Render message content as raw HTML.
54
53
  * @default false
55
54
  */
56
55
  dangerouslyUseHTMLString?: boolean;
57
56
  /**
58
- * @description 鏄惁灞呬腑鏄剧ず
57
+ * Whether to center the content.
59
58
  * @default false
60
59
  */
61
60
  center?: boolean;
62
61
  /**
63
- * @description 鍏抽棴鏃剁殑鍥炶皟鍑芥暟
62
+ * Callback fired after the message closes.
64
63
  */
65
64
  onClose?: () => void;
66
65
  /**
67
- * @description z-index 灞傜骇
66
+ * z-index value.
68
67
  */
69
68
  zIndex?: number;
70
69
  /**
71
- * @description 鑷畾涔夌被鍚?
70
+ * Custom CSS class.
72
71
  */
73
72
  customClass?: string;
74
73
  /**
75
- * @description 鏄惁鏀寔鍒嗙粍鍚堝苟锛堢浉鍚屽唴瀹圭殑娑堟伅鍙樉绀轰竴娆★級
74
+ * Whether to merge messages with identical content.
76
75
  * @default false
77
76
  */
78
77
  grouping?: boolean;
79
78
  /**
80
- * @description 閲嶅娆℃暟
79
+ * Number of repeated grouped messages.
81
80
  */
82
81
  repeatNum?: number;
83
82
  /**
84
- * @description 娑堟伅灞曠ず浣嶇疆
83
+ * Message placement.
85
84
  * @default 'top'
86
85
  */
87
86
  placement?: MessagePlacement;
88
87
  /**
89
- * @description 涓婚瑕嗙洊鍙橀噺
88
+ * Component-level theme overrides.
90
89
  */
91
90
  themeOverrides?: import('@yh-ui/theme').ComponentThemeVars;
92
91
  }
93
92
  /**
94
- * Message Emits 瀹氫箟
93
+ * Message component emits.
95
94
  */
96
95
  export interface MessageEmits {
97
96
  (e: 'destroy'): void;
98
97
  }
99
98
  /**
100
- * Message Slots 瀹氫箟
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
- * Message 暴露实例
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
- * Message 涓婁笅鏂囷紙鐢ㄤ簬瀹炰緥绠$悊锛?
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 Types & Props
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 Props 瀹氫箟
16
+ * Notification component props.
18
17
  */
19
18
  export interface NotificationProps {
20
19
  /**
21
- * @description 鏍囬
20
+ * Notification title.
22
21
  */
23
22
  title?: string;
24
23
  /**
25
- * @description 閫氱煡鍐呭锛屽彲浠ユ槸瀛楃涓层€乂Node 鎴栬繑鍥?VNode 鐨勫嚱鏁?
24
+ * Notification content.
26
25
  */
27
26
  message?: string | VNode | (() => VNode);
28
27
  /**
29
- * @description 閫氱煡绫诲瀷
28
+ * Notification variant.
30
29
  */
31
30
  type?: NotificationType;
32
31
  /**
33
- * @description 鑷畾涔夊浘鏍?
32
+ * Custom icon.
34
33
  */
35
34
  icon?: string | VNode;
36
35
  /**
37
- * @description 鏄惁鏄剧ず鍏抽棴鎸夐挳
36
+ * Whether to show the close button.
38
37
  * @default true
39
38
  */
40
39
  showClose?: boolean;
41
40
  /**
42
- * @description 鏄剧ず鏃堕棿锛堟绉掞級銆傝涓?0 鍒欎笉浼氳嚜鍔ㄥ叧闂?
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
- * @description 璺濈绐楀彛杈圭紭鐨勫亸绉婚噺锛坧x锛?
46
+ * Offset from the viewport edge in pixels.
48
47
  * @default 16
49
48
  */
50
49
  offset?: number;
51
50
  /**
52
- * @description 寮瑰嚭浣嶇疆
51
+ * Notification position.
53
52
  * @default 'top-right'
54
53
  */
55
54
  position?: NotificationPosition;
56
55
  /**
57
- * @description 閫氱煡鐨勫敮涓€鏍囪瘑
56
+ * Unique notification id.
58
57
  */
59
58
  id?: string;
60
59
  /**
61
- * @description 鏄惁灏?message 浣滀负 HTML 鐗囨澶勭悊
60
+ * Render message content as raw HTML.
62
61
  * @default false
63
62
  */
64
63
  dangerouslyUseHTMLString?: boolean;
65
64
  /**
66
- * @description 鍏抽棴鏃剁殑鍥炶皟鍑芥暟
65
+ * Callback fired after the notification closes.
67
66
  */
68
67
  onClose?: () => void;
69
68
  /**
70
- * @description 鐐瑰嚮閫氱煡鏃剁殑鍥炶皟鍑芥暟
69
+ * Callback fired when the notification is clicked.
71
70
  */
72
71
  onClick?: () => void;
73
72
  /**
74
- * @description z-index 灞傜骇
73
+ * z-index value.
75
74
  */
76
75
  zIndex?: number;
77
76
  /**
78
- * @description 鑷畾涔夌被鍚?
77
+ * Custom CSS class.
79
78
  */
80
79
  customClass?: string;
81
80
  /**
82
- * @description 鍚屼竴浣嶇疆鏈€澶氭樉绀虹殑閫氱煡鏁伴噺
81
+ * Maximum visible notifications per position.
83
82
  */
84
83
  max?: number;
85
84
  /**
86
- * @description 涓婚瑕嗙洊鍙橀噺
85
+ * Component-level theme overrides.
87
86
  */
88
87
  themeOverrides?: import('@yh-ui/theme').ComponentThemeVars;
89
88
  }
90
89
  /**
91
- * Notification Emits 瀹氫箟
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 Slots 瀹氫箟
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
- * Notification 暴露实例
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
- * Notification 涓婁笅鏂囷紙鐢ㄤ簬瀹炰緥绠$悊锛?
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;
@@ -440,6 +440,7 @@ defineExpose({
440
440
  :readonly="!filterable"
441
441
  autocomplete="off"
442
442
  role="combobox"
443
+ :aria-label="placeholder || t('select.placeholder')"
443
444
  :aria-expanded="visible"
444
445
  :aria-controls="`${inputId}-listbox`"
445
446
  @input="handleInput"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yh-ui/components",
3
- "version": "1.0.7",
3
+ "version": "1.0.9",
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.7",
41
- "@yh-ui/locale": "^1.0.7",
42
- "@yh-ui/theme": "^1.0.7",
43
- "@yh-ui/utils": "^1.0.7",
40
+ "@yh-ui/hooks": "^1.0.9",
41
+ "@yh-ui/locale": "^1.0.9",
42
+ "@yh-ui/theme": "^1.0.9",
43
+ "@yh-ui/utils": "^1.0.9",
44
44
  "async-validator": "^4.2.5",
45
45
  "dayjs": "^1.11.19",
46
46
  "markdown-it": "^14.1.1",