@zl-ui-kit/components 0.10.4 → 0.11.1

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 CHANGED
@@ -1,8 +1,8 @@
1
1
  # @zl-ui-kit/components
2
2
 
3
- ZL UI 业务组件库 —— Element Plus 体系,`Zl` 前缀,55 个业务组件(含国际化根容器共 56 个对外组件);配 `@zl-ui-kit/composables`(`useRequest` / `useDict`)、`@zl-ui-kit/theme`、`@zl-ui-kit/utils`、`@zl-ui-kit/icons` 使用。
3
+ ZL UI 业务组件库 —— Element Plus 体系,`Zl` 前缀,56 个业务组件(含国际化根容器共 57 个对外组件);配 `@zl-ui-kit/composables`(`useRequest` / `useDict`)、`@zl-ui-kit/theme`、`@zl-ui-kit/utils`、`@zl-ui-kit/icons` 使用。
4
4
 
5
- **本页即完整使用文档**:安装与四个导入入口、55 个组件用法、`useRequest` 请求体系与 Mock 联调、主题定制(L1/L2)、国际化接入、公共 Hooks 与 Utils —— 全部都在这一页。
5
+ **本页即完整使用文档**:安装与四个导入入口、56 个组件用法、`useRequest` 请求体系与 Mock 联调、主题定制(L1/L2)、国际化接入、公共 Hooks 与 Utils —— 全部都在这一页。
6
6
 
7
7
  > 本文档即 UI 组件的**权威文档**,直接在本文件维护;npm 官网包页面渲染的就是它,改完随下一次发版对外生效。
8
8
 
@@ -18,13 +18,13 @@ ZL UI 业务组件库 —— Element Plus 体系,`Zl` 前缀,55 个业务组
18
18
  - [2.2 启动 playground(组件示例与联调)](#22-启动-playground组件示例与联调)
19
19
  - [2.3 主题快速接入(宿主项目)](#23-主题快速接入宿主项目)
20
20
  - [2.4 示例页面索引](#24-示例页面索引)
21
- - [3. 组件总览(55 个业务组件)](#3-组件总览55-个业务组件)
21
+ - [3. 组件总览(56 个业务组件)](#3-组件总览56-个业务组件)
22
22
  - [3.1 通用展示组件](#31-通用展示组件)
23
23
  - [3.2 数据型组件](#32-数据型组件)
24
24
  - [3.3 表单与交互组件](#33-表单与交互组件)
25
25
  - [3.4 布局与权限](#34-布局与权限)
26
26
  - [3.5 文件与编辑](#35-文件与编辑)
27
- - [3.6 国际化基础设施(独立于 55 个业务组件)](#36-国际化基础设施独立于-55-个业务组件)
27
+ - [3.6 国际化基础设施(独立于 56 个业务组件)](#36-国际化基础设施独立于-56-个业务组件)
28
28
  - [3.7 内部子组件(不对外导出,随父组件使用)](#37-内部子组件不对外导出随父组件使用)
29
29
  - [4. 图标组件 `ZlIcon`](#4-图标组件-zlicon)
30
30
  - [4.1 必须先注册图标集(否则一个图标都不显示)](#41-必须先注册图标集否则一个图标都不显示)
@@ -45,7 +45,7 @@ ZL UI 业务组件库 —— Element Plus 体系,`Zl` 前缀,55 个业务组
45
45
  - [7. 表单与交互组件](#7-表单与交互组件)
46
46
  - [ZlForm —— schema 驱动](#zlform-schema-驱动)
47
47
  - [ZlSearch —— 查询条](#zlsearch-查询条)
48
- - [ZlDrawer / ZlPopconfirm / ZlSwitch](#zldrawer-zlpopconfirm-zlswitch)
48
+ - [ZlDrawer / ZlDialog / ZlPopconfirm / ZlSwitch](#zldrawer-zldialog-zlpopconfirm-zlswitch)
49
49
  - [ZlAction / ZlActionList —— 操作列与操作列表](#zlaction-zlactionlist-操作列与操作列表)
50
50
  - [ZlRadioTag / ZlCheckboxTag / ZlCheckAll / ZlSorter / ZlAddSub / ZlLayoutSwitch](#zlradiotag-zlcheckboxtag-zlcheckall-zlsorter-zladdsub-zllayoutswitch)
51
51
  - [ZlTabs / ZlDynamicComponent / ZlGrid](#zltabs-zldynamiccomponent-zlgrid)
@@ -101,7 +101,7 @@ ZL UI 业务组件库 —— Element Plus 体系,`Zl` 前缀,55 个业务组
101
101
 
102
102
  | 包 | 职责 |
103
103
  | -------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
104
- | [`@zl-ui-kit/components`](https://www.npmjs.com/package/@zl-ui-kit/components) | EP 化业务组件库(`Zl` 前缀,55 个业务组件) |
104
+ | [`@zl-ui-kit/components`](https://www.npmjs.com/package/@zl-ui-kit/components) | EP 化业务组件库(`Zl` 前缀,56 个业务组件) |
105
105
  | [`@zl-ui-kit/composables`](https://www.npmjs.com/package/@zl-ui-kit/composables) | `useRequest` 请求体系、`useDict`、`useGlobalData` 全局数据、国际化 |
106
106
  | [`@zl-ui-kit/icons`](https://www.npmjs.com/package/@zl-ui-kit/icons) | 470 个离线 SVG 图标(prefix `zl`,开源图标库) |
107
107
  | [`@zl-ui-kit/theme`](https://www.npmjs.com/package/@zl-ui-kit/theme) | 5 套主题 + `defineTheme` 运行时定制(内置 OFL 开源中文字体) |
@@ -162,6 +162,12 @@ import { ZlFilePreview, ZlFileViewer } from '@zl-ui-kit/components/file-preview'
162
162
  - 升级到 **echarts 6** 后默认主题变了(配色、legend 默认挪到画布底部、轴标签防溢出默认开启),
163
163
  想保持 v5 观感:`import 'echarts/theme/v5'` + `<ZlChart theme="v5" ... />`(`theme` prop 见 §6 ⑧)。
164
164
 
165
+ **关于 `@vueuse/core` 版本**(`peerDependencies: "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0"`,v12.3+ / v13 / v14 / v15 均支持):
166
+
167
+ - 组件库与 hooks 只用到跨版本稳定的少量 API(`useEventListener` / `useResizeObserver` / `whenever` / `useToggle` / `createGlobalState` / `useStorage` / `createSharedComposable` / `useTimeoutFn` / `promiseTimeout` / `tryOnScopeDispose`),这些在 v12–v15 均未改名、签名兼容。
168
+ - **版本分界 `>=0.10.4`**:peer 上限从 `^12.3.0` 放宽到含 v15。`<=0.10.3` 仍锁 `^12.3.0`,宿主若已用 v13+ 会在 `npm i` 阶段 ERESOLVE(需 `--legacy-peer-deps`);升到 `0.10.4` 起即可直接跟随 latest。
169
+ - `@vueuse/core@15` 自身声明 `engines.node >= 22`:选 v15 时宿主**安装/构建/SSR** 的 Node 需 ≥ 22(纯浏览器产物运行不受此约束,engines 只影响安装期)。
170
+
165
171
  接入:
166
172
 
167
173
  ```ts
@@ -305,7 +311,7 @@ import { ZlI18nProvider } from '@zl-ui-kit/components'
305
311
 
306
312
  | 方式 | 写法 | 适用 |
307
313
  | ----------- | --------------------------------------------------------------------- | ---------------------------------------------- |
308
- | 全量插件 | `app.use(ZlUI)` | 业务项目首选,主入口 51 个组件全注册,一次搞定 |
314
+ | 全量插件 | `app.use(ZlUI)` | 业务项目首选,主入口 52 个组件全注册,一次搞定 |
309
315
  | 按名注册 | `app.component('ZlTable', ZlTable)` | 只要几个组件,控制产物 |
310
316
  | 直接 import | `<script setup>` 里 `import { ZlTable } from '@zl-ui-kit/components'` | 单文件用一次,无需全局 |
311
317
 
@@ -413,7 +419,7 @@ setTheme('dark') // 切换主题(light/dark/red-light/red-dark/blue)
413
419
  | `/manual` | 接口手册 | 全量 API 检索,支持按 props 名 / 事件名反查组件,`?name=ZlTable` 直接定位 |
414
420
  | `/icons` | 图标集 | 全量图标浏览/搜索,`zl:` 前缀渲染 |
415
421
  | `/theme` | 主题工场 | 5 套主题切换 + `defineTheme` 运行时自定义 |
416
- | `/gallery` | 组件陈列 | 55 个组件逐个渲染(用于批量截图与冒烟) |
422
+ | `/gallery` | 组件陈列 | 56 个组件逐个渲染(用于批量截图与冒烟) |
417
423
  | `/use-request` | useRequest 联调 | 用 Mock 模块驱动各数据型组件(见第 6 章) |
418
424
  | `/examples/basic` | 通用展示示例 | ZlTitle/ZlTag/ZlCornerTag/ZlIcon/ZlText/ZlCopy/ZlAutoTooltip/ZlPagination/ZlEmpty |
419
425
  | `/examples/table-form` | 表格/表单示例 | ZlTable/ZlSearchTable/ZlForm/ZlDrawer/ZlPopconfirm/ZlSwitch/ZlDescription/ZlAction/ZlIconLabel/ZlIconHover/ZlSearch |
@@ -424,9 +430,9 @@ setTheme('dark') // 切换主题(light/dark/red-light/red-dark/blue)
424
430
 
425
431
  ---
426
432
 
427
- ## 3. 组件总览(55 个业务组件)
433
+ ## 3. 组件总览(56 个业务组件)
428
434
 
429
- > 口径:主入口 `@zl-ui-kit/components` 导出 **51 个**组件,另有 **5 个**重型组件走子路径入口(`/chart`、`/editor`、`/file-preview`),合计 **56 个对外组件**(§14 逐条覆盖这 56 个);其中 `ZlI18nProvider` 是国际化基础设施,故**业务组件为 55 个**(playground 的 `/gallery` 逐个渲染的就是这 55 个)。组件目录共 48 个(一个目录可产出多个导出符号,如 `ZlTag` 目录同时产出 `ZlTag` / `ZlCornerTag`)。§3.1~§3.5 按功能分组列出业务组件,其中混列了 4 个**不对外导出**的内部子组件(`ZlHorizontalLayout` / `ZlVerticalLayout` / `ZlAppMenuItem` / `ZlFileFetchError`,见 §3.7),去掉这 4 个后正好 55 个。
435
+ > 口径:主入口 `@zl-ui-kit/components` 导出 **52 个**组件,另有 **5 个**重型组件走子路径入口(`/chart`、`/editor`、`/file-preview`),合计 **57 个对外组件**(§14 逐条覆盖这 57 个);其中 `ZlI18nProvider` 是国际化基础设施,故**业务组件为 56 个**(playground 的 `/gallery` 逐个渲染的就是这 56 个)。组件目录共 49 个(一个目录可产出多个导出符号,如 `ZlTag` 目录同时产出 `ZlTag` / `ZlCornerTag`)。§3.1~§3.5 按功能分组列出业务组件,其中混列了 4 个**不对外导出**的内部子组件(`ZlHorizontalLayout` / `ZlVerticalLayout` / `ZlAppMenuItem` / `ZlFileFetchError`,见 §3.7),去掉这 4 个后正好 56 个。
430
436
 
431
437
  > **要查精确的 props / 事件 / 插槽 / 暴露方法 / schema 类型?** 直接看 **[§14 组件 API 参考](#14-组件-api-参考自动生成)**——逐个组件给出 `import`、可直接照抄的 **用法示例**(props 怎么写)与 **插槽用法**(`<template #name>` 怎么写),再用表格列出 TS 类型表达式、默认值、是否必填,**且每个 prop / 每个插槽都带一列「示例」**(能直接粘到标签上的写法),以及 `TableColumn` / `FormItem` / `SearchItem` / `ActionItem` 等 schema 类型的字段表。本章及 §4~§9 讲的是**场景化用法**,§14 是**逐字段的契约 + 可粘贴代码**。
432
438
 
@@ -440,7 +446,7 @@ setTheme('dark') // 切换主题(light/dark/red-light/red-dark/blue)
440
446
 
441
447
  ### 3.3 表单与交互组件
442
448
 
443
- `ZlForm` · `ZlFormChild` · `ZlSearch` · `ZlDrawer` · `ZlPopconfirm` · `ZlSwitch` · `ZlAction` · `ZlActionList` · `ZlRadioTag` · `ZlCheckboxTag` · `ZlCheckAll` · `ZlSorter` · `ZlSorterList` · `ZlAddSub` · `ZlLayoutSwitch` · `ZlTabs` · `ZlDynamicComponent` · `ZlGrid` · `ZlGridItem`
449
+ `ZlForm` · `ZlFormChild` · `ZlSearch` · `ZlDrawer` · `ZlDialog` · `ZlPopconfirm` · `ZlSwitch` · `ZlAction` · `ZlActionList` · `ZlRadioTag` · `ZlCheckboxTag` · `ZlCheckAll` · `ZlSorter` · `ZlSorterList` · `ZlAddSub` · `ZlLayoutSwitch` · `ZlTabs` · `ZlDynamicComponent` · `ZlGrid` · `ZlGridItem`
444
450
 
445
451
  ### 3.4 布局与权限
446
452
 
@@ -452,7 +458,7 @@ setTheme('dark') // 切换主题(light/dark/red-light/red-dark/blue)
452
458
 
453
459
  > 页签/微前端类组件(`ZlMicroPage`/`ZlAppTabs`/`ZlPageTabs`/`ZlDevMenu`)与配套 composables(`usePageTabs` 等)均已移除,`0.5.0` 起组件库不含任何微前端能力。
454
460
 
455
- ### 3.6 国际化基础设施(独立于 55 个业务组件)
461
+ ### 3.6 国际化基础设施(独立于 56 个业务组件)
456
462
 
457
463
  `ZlI18nProvider` —— 国际化根容器,将 Element Plus 语言包经 `<el-config-provider>` 挂载到 Element Plus(详见第 13 章)。
458
464
 
@@ -1173,6 +1179,8 @@ async function onSubmit() {
1173
1179
 
1174
1180
  > `ZlForm` 的 `validate()` 返回 `Promise<boolean>`(`0.9.0` 及更早版本成功时 `resolve(undefined)`,判断成功请用 `await` 捕获异常而非当布尔用)。表单数据用 `:model` 传入,`props` 里的 `update:modelValue` 会写回该对象,无需手写 `v-model`。`ZlDrawer` 的 `onOk` 异步期间确定按钮自动保持 loading,`auto-close-after-confirm` 默认 `true`,需要自行控制关闭时设为 `false`。
1175
1181
 
1182
+ > 需要**对话框形态**(居中弹出、模态确认类)而非侧滑抽屉时,把 `ZlDrawer` 换成 `ZlDialog`——两者 API 完全一致(`v-model:visible` / `onOk` / `onCancel` / `readonly` / `loading` / `#footer` 插槽),仅容器从 `el-drawer` 换成 `el-dialog`、尺寸走 `el-dialog` 的 `width`。§15 替换规范里**弹窗默认仍用 `ZlDrawer`**,只有明确要对话框时才用 `ZlDialog`。
1183
+
1176
1184
  #### 6.5.3 卡片列表范式:ZlCardPage + ZlCard + ZlAction
1177
1185
 
1178
1186
  分页卡片列表用 `ZlCardPage`(内部同样 `usePageableRequest`),默认插槽逐项渲染 `ZlCard`;卡片的图标、标题、副标题、底部操作区用具名插槽;底部操作按钮同样用 `ZlAction`,状态角标用 `ZlDictTag`。
@@ -1267,9 +1275,10 @@ const items: FormItem[] = [
1267
1275
  > 浮层里的重置按钮与单行内的按钮共用 `zl-search-form-actions__reset` class,展开/收起为
1268
1276
  > `zl-search-form-actions__toggle`,需要自定义样式或做 e2e 断言时可直接用这两个 class 定位。
1269
1277
 
1270
- ### ZlDrawer / ZlPopconfirm / ZlSwitch
1278
+ ### ZlDrawer / ZlDialog / ZlPopconfirm / ZlSwitch
1271
1279
 
1272
1280
  - `ZlDrawer`:自绘 footer(okLoading/hideCancel/readonly 语义保持),`loading`→`v-loading`。
1281
+ - `ZlDialog`:与 `ZlDrawer` API 一致的对话框容器,底层走 EP `el-dialog`(居中模态),尺寸走 `width`;弹窗默认用 `ZlDrawer`,明确要对话框时才用 `ZlDialog`。
1273
1282
  - `ZlPopconfirm`:基于 `el-popover` 自绘面板,保留 title/content 双插槽与确认/取消事件。
1274
1283
  - `ZlSwitch`:`active-value`/`inactive-value` 包装,文本在侧(`checked-text`)。
1275
1284
 
@@ -3383,6 +3392,7 @@ const { i18n } = useLocale({ messages })
3383
3392
  | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
3384
3393
  | ZlEmpty | `zl.empty.noData` | 暂无相关数据 |
3385
3394
  | ZlDrawer | `zl.drawer.cancel` / `confirm` / `close` | 取消 / 确定 / 关闭 |
3395
+ | ZlDialog | `zl.dialog.cancel` / `confirm` / `close` | 取消 / 确定 / 关闭 |
3386
3396
  | ZlPopconfirm | `zl.popconfirm.confirm` / `cancel` | 确定 / 取消 |
3387
3397
  | ZlLayoutSwitch | `zl.layoutSwitch.grid` / `table` | 网格 / 表格 |
3388
3398
  | ZlUpload | `zl.upload.accept` / `limit` / `maxSize` / `nameSpace` | 仅支持{accept}格式的文件 / 最多可上传{limit}个 / 大小不超过{maxSize}MB / 文件名中不得包含空格 |
@@ -3435,6 +3445,7 @@ const { i18n } = useLocale({ messages })
3435
3445
  | [`ZlCheckboxTag`](#zlcheckboxtag) | 主入口 | 7 | 1 | 1 | 0 |
3436
3446
  | [`ZlCopy`](#zlcopy) | 主入口 | 2 | 0 | 2 | 0 |
3437
3447
  | [`ZlDescription`](#zldescription) | 主入口 | 5 | 0 | 1 | 0 |
3448
+ | [`ZlDialog`](#zldialog) | 主入口 | 6 | 1 | 2 | 0 |
3438
3449
  | [`ZlDictTag`](#zldicttag) | 主入口 | 7 | 0 | 0 | 0 |
3439
3450
  | [`ZlDrawer`](#zldrawer) | 主入口 | 6 | 1 | 2 | 0 |
3440
3451
  | [`ZlDynamicComponent`](#zldynamiccomponent) | 主入口 | 3 | 2 | 0 | 0 |
@@ -4111,6 +4122,63 @@ import { ZlDescription } from '@zl-ui-kit/components'
4111
4122
  | ------------ | ---------- | ------------------------------------ | -------------------------------------------- |
4112
4123
  | `[item.key]` | — | `<template #[item.key]>…</template>` | 按 item.key 命名,仅在该项开启 slot 时才渲染 |
4113
4124
 
4125
+ #### `ZlDialog`
4126
+
4127
+ <sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlDialog/index.vue`</sub>
4128
+
4129
+ **接口概览**:6 props · 1 事件 · 2 插槽
4130
+
4131
+ **用法示例**
4132
+
4133
+ ```vue
4134
+ <script setup lang="ts">
4135
+ import { ZlDialog } from '@zl-ui-kit/components'
4136
+ </script>
4137
+
4138
+ <template>
4139
+ <ZlDialog v-model:visible="value" title="新增" width="480px" :on-ok="onOk" />
4140
+ </template>
4141
+ ```
4142
+
4143
+ > 示例中的 `onOk` 是数组 / 对象 / 函数等非字面量入参,由调用方提供数据;其余属性写法可直接照搬。
4144
+
4145
+ **插槽用法**
4146
+
4147
+ ```vue
4148
+ <template>
4149
+ <ZlDialog>
4150
+ <template #default>…</template>
4151
+ <template #footer>…</template>
4152
+ </ZlDialog>
4153
+ </template>
4154
+ ```
4155
+
4156
+ **props**
4157
+
4158
+ | 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
4159
+ | ----------------------- | --------------------------------------------------- | ------- | ---- | ----------------------------------- | -------------------------------------------- |
4160
+ | `visible` | `boolean` | `false` | 否 | `v-model:visible="value"` | `v-model` 绑定的值(`defineModel` 隐式声明) |
4161
+ | `onCancel` | `() => boolean \| void \| Promise<boolean \| void>` | — | 否 | `:on-cancel="async () => {}"` | 关闭前触发,返回 true 才会真正关闭 |
4162
+ | `onOk` | `() => void \| Promise<void>` | — | 否 | `:on-ok="async () => {}"` | 点击确定的回调,异步期间按钮保持 loading |
4163
+ | `autoCloseAfterConfirm` | `boolean` | `true` | 否 | `:auto-close-after-confirm="false"` | 确定回调结束后是否自动关闭对话框,默认 true |
4164
+ | `readonly` | `boolean` | — | 否 | `readonly` | 只读模式:隐藏取消按钮,只留「关闭」 |
4165
+ | `loading` | `boolean` | — | 否 | `loading` | 内容区加载态,为 true 时显示遮罩 loading |
4166
+
4167
+ > 把未声明的入参与事件(`useAttrs()`)透传给 `el-dialog`,未列出的属性会继续下传
4168
+
4169
+ **事件(emits)**
4170
+
4171
+ | 事件 | 参数 | 说明 |
4172
+ | ---------------- | --------- | -------------- |
4173
+ | `update:visible` | `boolean` | `v-model` 更新 |
4174
+
4175
+ **插槽(slots)**
4176
+
4177
+ | 插槽 | 作用域参数 | 示例 | 说明 |
4178
+ | --------- | ---------- | --------------------------------- | ----------------------------------- |
4179
+ | `default` | — | `<template #default>…</template>` | 对话框正文内容,位于底部按钮区之上 |
4180
+ | `footer` | — | `<template #footer>…</template>` | 自定义底部按钮区,缺省渲染取消/确定 |
4181
+
4114
4182
  #### `ZlDictTag`
4115
4183
 
4116
4184
  <sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlDictTag/index.vue`</sub>
@@ -4426,11 +4494,11 @@ import { ZlForm } from '@zl-ui-kit/components'
4426
4494
 
4427
4495
  **插槽(slots)**
4428
4496
 
4429
- | 插槽 | 作用域参数 | 示例 | 说明 |
4430
- | -------------- | ------------------------------------------- | --------------------------------------------------------- | -------------------------------------------------- |
4431
- | `label` | `v-bind="{ label: item.label, item }"` 展开 | `<template #label="{ label, item }">…</template>` | 自定义表单项标签的渲染内容 |
4432
- | `[item.model]` | `model` / `field` | `<template #[item.model]="{ model, field }">…</template>` | 按该项 model 命名,传出 model、field;覆盖默认控件 |
4433
- | `default` | — | `<template #default>…</template>` | 追加在末尾的表单内容(如额外区块、按钮) |
4497
+ | 插槽 | 作用域参数 | 示例 | 说明 |
4498
+ | -------------- | ------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------------------- |
4499
+ | `label` | `v-bind="{ label: item.label, item }"` 展开 | `<template #label="{ label, item }">…</template>` | 自定义表单项标签的渲染内容:消费者传 #label 时用其内容,否则回落到默认 label 文本 |
4500
+ | `[item.model]` | `model` / `field` | `<template #[item.model]="{ model, field }">…</template>` | 按该项 model 命名,传出 model、field;覆盖默认控件 |
4501
+ | `default` | — | `<template #default>…</template>` | 追加在末尾的表单内容(如额外区块、按钮) |
4434
4502
 
4435
4503
  **暴露(defineExpose)**
4436
4504
 
@@ -6195,7 +6263,7 @@ ZlGrid 子项 schema
6195
6263
  1. **接口请求统一封装**:所有接口调用使用 `useRequest`(普通接口)与 `usePageableRequest`(列表 / 分页接口)替换裸 `axios` / `fetch`。详见 §6。
6196
6264
  2. **普通(分页)列表页**:用 `ZlSearchTable` 替换 `el-table`。
6197
6265
  3. **卡片(分页)列表页**:用 `ZlCardPage` 替换 `el-table`。
6198
- 4. **弹窗**:所有弹窗(`el-dialog` 等)统一用 `ZlDrawer` 替换;按抽屉内展示内容的多少合理排版(表单用 `ZlForm`、详情用描述列表等)。
6266
+ 4. **弹窗**:所有弹窗(`el-dialog` 等)**默认统一用 `ZlDrawer` 替换**——仅当明确需要居中 / 模态对话框形态时才用 `ZlDialog`;**未明确指定用 `ZlDialog` 的场景,一律默认替换成 `ZlDrawer`**。按弹窗内展示内容的多少合理排版(表单用 `ZlForm`、详情用描述列表等)。
6199
6267
  5. **表单**:所有新增、编辑、详情弹窗里的表单项(`el-form`)都用 `ZlForm` 替换。
6200
6268
  6. **卡片**:卡片列表的卡片组件用 `ZlCard` 替换。
6201
6269
  7. **操作按钮**:列表页操作栏、以及卡片组件(替换后的 `ZlCard`)里的按钮都用 `ZlAction` 替换。
@@ -1,15 +1,15 @@
1
- import { defineComponent as n, resolveComponent as r, openBlock as t, createBlock as c, normalizeProps as i, guardReactiveProps as a, withCtx as m, createVNode as _ } from "vue";
2
- import p from "./List.vue.mjs";
1
+ import { defineComponent as r, resolveComponent as n, openBlock as t, createBlock as c, normalizeProps as i, guardReactiveProps as a, withCtx as m, createVNode as p } from "vue";
2
+ import s from "./List.vue.mjs";
3
3
  import './List.css';/* empty css */
4
- const h = /* @__PURE__ */ n({
4
+ const h = /* @__PURE__ */ r({
5
5
  name: "ZlAction",
6
6
  __name: "index",
7
- setup(s) {
7
+ setup(_) {
8
8
  return (o, l) => {
9
- const e = r("zl-icon-hover");
10
- return t(), c(p, i(a({ ...o.$attrs, listCount: 2 })), {
9
+ const e = n("zl-icon-hover");
10
+ return t(), c(s, i(a({ ...o.$attrs, listCount: 2 })), {
11
11
  more: m(() => [
12
- _(e, { icon: "zl:arrow-down" })
12
+ p(e, { icon: "zl:password-color" })
13
13
  ]),
14
14
  _: 1
15
15
  }, 16);
@@ -0,0 +1 @@
1
+ .zl-dialog__body{width:100%}
@@ -0,0 +1,40 @@
1
+ type __VLS_Props = {
2
+ /** 关闭前触发,返回 true 才会真正关闭 */
3
+ onCancel?: () => boolean | void | Promise<boolean | void>;
4
+ /** 点击确定的回调,异步期间按钮保持 loading */
5
+ onOk?: () => void | Promise<void>;
6
+ /** 确定回调结束后是否自动关闭对话框,默认 true */
7
+ autoCloseAfterConfirm?: boolean;
8
+ /** 只读模式:隐藏取消按钮,只留「关闭」 */
9
+ readonly?: boolean;
10
+ /** 内容区加载态,为 true 时显示遮罩 loading */
11
+ loading?: boolean;
12
+ };
13
+ type __VLS_PublicProps = {
14
+ 'visible'?: boolean;
15
+ } & __VLS_Props;
16
+ declare function __VLS_template(): {
17
+ attrs: Partial<{}>;
18
+ slots: {
19
+ default?(_: {}): any;
20
+ footer?(_: {}): any;
21
+ };
22
+ refs: {};
23
+ rootEl: any;
24
+ };
25
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
26
+ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
27
+ "update:visible": (value: boolean) => any;
28
+ }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
29
+ "onUpdate:visible"?: ((value: boolean) => any) | undefined;
30
+ }>, {
31
+ autoCloseAfterConfirm: boolean;
32
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
33
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
34
+ export default _default;
35
+ type __VLS_WithTemplateSlots<T, S> = T & {
36
+ new (): {
37
+ $slots: S;
38
+ };
39
+ };
40
+ //# sourceMappingURL=index.vue.d.ts.map
@@ -0,0 +1,80 @@
1
+ import { defineComponent as h, useModel as V, ref as w, computed as f, useAttrs as x, resolveComponent as m, resolveDirective as z, openBlock as d, createBlock as v, mergeProps as A, withCtx as a, withDirectives as D, createElementBlock as M, renderSlot as g, createTextVNode as y, toDisplayString as p, unref as N, createCommentVNode as O, createVNode as T, mergeModels as Z } from "vue";
2
+ import { useZlT as $ } from "@zl-ui-kit/composables";
3
+ const S = { class: "zl-dialog__body" }, P = /* @__PURE__ */ h({
4
+ name: "ZlDialog",
5
+ inheritAttrs: !1,
6
+ __name: "index",
7
+ props: /* @__PURE__ */ Z({
8
+ onCancel: {},
9
+ onOk: {},
10
+ autoCloseAfterConfirm: { type: Boolean, default: !0 },
11
+ readonly: { type: Boolean },
12
+ loading: { type: Boolean }
13
+ }, {
14
+ visible: { type: Boolean, default: !1 },
15
+ visibleModifiers: {}
16
+ }),
17
+ emits: ["update:visible"],
18
+ setup(l) {
19
+ const { t: r } = $(), e = l, t = V(l, "visible");
20
+ async function i() {
21
+ e.onCancel && !await e.onCancel() || (t.value = !1);
22
+ }
23
+ const s = w(!1);
24
+ async function C() {
25
+ s.value = !0;
26
+ try {
27
+ e.onOk && (await e.onOk(), e.autoCloseAfterConfirm && (t.value = !1));
28
+ } catch (o) {
29
+ console.error("[ZlDialog] handleConfirm: ", o);
30
+ } finally {
31
+ s.value = !1;
32
+ }
33
+ }
34
+ const k = f(() => e.readonly ? r("zl.dialog.close", "关闭") : r("zl.dialog.confirm", "确定")), b = f(() => ({ width: "600px", "destroy-on-close": !0, ...x() }));
35
+ return (o, n) => {
36
+ const u = m("el-button"), B = m("el-dialog"), _ = z("loading");
37
+ return d(), v(B, A({ class: "zl-dialog" }, b.value, {
38
+ modelValue: t.value,
39
+ "onUpdate:modelValue": n[1] || (n[1] = (c) => t.value = c),
40
+ "before-close": i
41
+ }), {
42
+ footer: a(() => [
43
+ g(o.$slots, "footer", {}, () => [
44
+ l.readonly ? O("", !0) : (d(), v(u, {
45
+ key: 0,
46
+ onClick: i
47
+ }, {
48
+ default: a(() => [
49
+ y(p(N(r)("zl.dialog.cancel", "取消")), 1)
50
+ ]),
51
+ _: 1
52
+ })),
53
+ T(u, {
54
+ type: "primary",
55
+ loading: s.value,
56
+ onClick: n[0] || (n[0] = (c) => l.readonly ? i() : C())
57
+ }, {
58
+ default: a(() => [
59
+ y(p(k.value), 1)
60
+ ]),
61
+ _: 1
62
+ }, 8, ["loading"])
63
+ ])
64
+ ]),
65
+ default: a(() => [
66
+ D((d(), M("div", S, [
67
+ g(o.$slots, "default")
68
+ ])), [
69
+ [_, l.loading]
70
+ ])
71
+ ]),
72
+ _: 3
73
+ }, 16, ["modelValue"]);
74
+ };
75
+ }
76
+ });
77
+ export {
78
+ P as default
79
+ };
80
+ //# sourceMappingURL=index.vue.mjs.map
@@ -0,0 +1,6 @@
1
+ import o from "./index.vue.mjs";
2
+ import './index.css';/* empty css */
3
+ export {
4
+ o as default
5
+ };
6
+ //# sourceMappingURL=index3.vue.mjs.map
@@ -1,68 +1,68 @@
1
- import { defineComponent as D, toRefs as L, ref as b, computed as V, resolveComponent as m, openBlock as n, createBlock as u, mergeProps as c, withCtx as d, createElementBlock as M, Fragment as S, renderList as U, renderSlot as p, createElementVNode as F, toDisplayString as q, createCommentVNode as E, createVNode as W } from "vue";
2
- import j from "./ZlFormChild.vue.mjs";
3
- import x from "../ZlIcon/index.vue.mjs";
4
- const G = { class: "zl-form-item-label" }, g = "onUpdate:modelValue", Q = /* @__PURE__ */ D({
1
+ import { defineComponent as A, toRefs as D, ref as b, computed as V, resolveComponent as m, openBlock as n, createBlock as u, mergeProps as c, withCtx as d, createElementBlock as L, Fragment as M, renderList as S, renderSlot as p, createElementVNode as F, toDisplayString as U, createVNode as q, createCommentVNode as x } from "vue";
2
+ import W from "./ZlFormChild.vue.mjs";
3
+ import j from "../ZlIcon/index.vue.mjs";
4
+ const G = { class: "zl-form-item-label" }, E = "onUpdate:modelValue", Q = /* @__PURE__ */ A({
5
5
  name: "ZlForm",
6
6
  __name: "index",
7
7
  props: {
8
8
  items: { default: () => [] },
9
9
  model: {}
10
10
  },
11
- setup(h, { expose: y }) {
12
- const i = h, { items: v } = L(i), I = b(i.model ?? {}), r = V(() => i.model ?? I.value), P = V(() => {
11
+ setup(g, { expose: h }) {
12
+ const i = g, { items: v } = D(i), y = b(i.model ?? {}), r = V(() => i.model ?? y.value), I = V(() => {
13
13
  const e = [];
14
14
  return v.value.forEach((l) => {
15
15
  if (!l.model)
16
16
  throw new Error("[ZlForm]: form item's model is required!");
17
17
  l.defaultValue !== void 0 && r.value[l.model] === void 0 && (r.value[l.model] = l.defaultValue);
18
18
  }), v.value.forEach((l) => {
19
- if (!k(l)) return;
19
+ if (!P(l)) return;
20
20
  const {
21
21
  visible: s,
22
22
  props: a,
23
23
  tooltip: f,
24
24
  formItemProps: o = {},
25
- component: z,
26
- label: C,
27
- model: T,
25
+ component: $,
26
+ label: z,
27
+ model: C,
28
28
  defaultValue: H,
29
- slot: B,
30
- slots: R,
31
- ...Z
29
+ slot: T,
30
+ slots: B,
31
+ ...R
32
32
  } = l, _ = { ...o };
33
33
  delete _.tooltip;
34
- const A = { ...Z, ...a ?? {} };
34
+ const Z = { ...R, ...a ?? {} };
35
35
  e.push({
36
36
  formItemProps: _,
37
37
  tooltip: f,
38
- component: z,
39
- label: C,
40
- model: T,
41
- slot: B,
42
- slots: R,
43
- props: w(A, l.model)
38
+ component: $,
39
+ label: z,
40
+ model: C,
41
+ slot: T,
42
+ slots: B,
43
+ props: k(Z, l.model)
44
44
  });
45
45
  }), e;
46
46
  }), t = b(null);
47
- function k(e) {
47
+ function P(e) {
48
48
  const l = e.visible;
49
49
  return l === void 0 ? !0 : l === !1 || typeof l == "function" && !l(r.value, e) ? !1 : !!l;
50
50
  }
51
- function w(e = {}, l) {
52
- const s = e[g];
53
- return e[g] = (a) => {
51
+ function k(e = {}, l) {
52
+ const s = e[E];
53
+ return e[E] = (a) => {
54
54
  r.value[l] = a, s?.(a);
55
55
  }, e;
56
56
  }
57
- async function $(e) {
57
+ async function w(e) {
58
58
  return await t.value?.validate(e) ?? !0;
59
59
  }
60
60
  async function N(e, l) {
61
61
  return await t.value?.validateField(e, l) ?? !0;
62
62
  }
63
- return y({
63
+ return h({
64
64
  /** 校验整个表单;同 `el-form.validate()`(无回调时失败会 reject 错误字段集合;0.9.0 及更早成功时返回 `undefined`) */
65
- validate: $,
65
+ validate: w,
66
66
  /** 校验指定字段(字段名或数组),语义同 `validate()` */
67
67
  validateField: N,
68
68
  /** 重置字段并清除校验结果;不传参重置全部 */
@@ -92,36 +92,36 @@ const G = { class: "zl-form-item-label" }, g = "onUpdate:modelValue", Q = /* @__
92
92
  model: r.value
93
93
  }, { labelWidth: "auto", ...e.$attrs }), {
94
94
  default: d(() => [
95
- (n(!0), M(S, null, U(P.value, (o) => (n(), u(a, c({
95
+ (n(!0), L(M, null, S(I.value, (o) => (n(), u(a, c({
96
96
  key: o.model,
97
97
  label: o.label,
98
98
  prop: o.model
99
99
  }, { ref_for: !0 }, o.formItemProps), {
100
100
  label: d(() => [
101
101
  F("span", G, [
102
- e.$slots.label ? p(e.$slots, "label", c({ ref_for: !0 }, { label: o.label, item: o }), () => [
103
- F("span", null, q(o.label), 1)
104
- ], void 0, 0) : E("", !0),
102
+ p(e.$slots, "label", c({ ref_for: !0 }, { label: o.label, item: o }), () => [
103
+ F("span", null, U(o.label), 1)
104
+ ]),
105
105
  o.tooltip ? (n(), u(s, {
106
- key: 1,
106
+ key: 0,
107
107
  content: o.tooltip,
108
108
  placement: "top"
109
109
  }, {
110
110
  default: d(() => [
111
- W(x, {
111
+ q(j, {
112
112
  class: "zl-form-item-label__tooltip",
113
113
  icon: "zl:help-color"
114
114
  })
115
115
  ]),
116
116
  _: 1
117
- }, 8, ["content"])) : E("", !0)
117
+ }, 8, ["content"])) : x("", !0)
118
118
  ])
119
119
  ]),
120
120
  default: d(() => [
121
121
  o.slot ? p(e.$slots, o.model, {
122
122
  model: r.value,
123
123
  field: o
124
- }, void 0, void 0, 0) : (n(), u(j, {
124
+ }, void 0, void 0, 0) : (n(), u(W, {
125
125
  key: 1,
126
126
  item: o,
127
127
  "model-value": r.value[o.model]
package/dist/index.d.ts CHANGED
@@ -14,6 +14,7 @@ export { default as ZlCheckAll } from './components/ZlCheckAll/index.vue';
14
14
  export { default as ZlCheckboxTag } from './components/ZlCheckboxTag/index.vue';
15
15
  export { default as ZlCopy } from './components/ZlCopy/index.vue';
16
16
  export { default as ZlDescription } from './components/ZlDescription/index.vue';
17
+ export { default as ZlDialog } from './components/ZlDialog/index.vue';
17
18
  export { default as ZlDictTag } from './components/ZlDictTag/index.vue';
18
19
  export { default as ZlDrawer } from './components/ZlDrawer/index.vue';
19
20
  export { default as ZlDynamicComponent } from './components/ZlDynamicComponent/index.vue';
package/dist/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import i from "./components/ZlAction/index.vue.mjs";
2
- import t from "./components/ZlAction/List.vue.mjs";
3
- import './components/ZlTree/index.css';import './components/ZlTag/index.css';import './components/ZlTabs/index.css';import './components/ZlTable/index.css';import './components/ZlSwitch/index.css';import './components/ZlSection/index.css';import './components/ZlSearchTable/index.css';import './components/ZlSearch/index.css';import './components/ZlRadioTag/index.css';import './components/ZlPopconfirm/index.css';import './components/ZlPdfViewer/index.css';import './components/ZlLogin/index.css';import './components/ZlIconLabel/index.css';import './components/ZlGrid/index.css';import './components/ZlForm/index.css';import './components/ZlDrawer/index.css';import './components/ZlDescription/index.css';import './components/ZlTag/ZlCornerTag.css';import './components/ZlCheckboxTag/index.css';import './components/ZlCard/index.css';import './components/ZlCardPage/index.css';import './components/ZlAppSlogan/index.css';import './components/ZlAppMenu/AppMenu.css';import './components/ZlAction/List.css';/* empty css */
4
- import a from "./components/ZlAddSub/index.vue.mjs";
2
+ import a from "./components/ZlAction/List.vue.mjs";
3
+ import './components/ZlTree/index.css';import './components/ZlTag/index.css';import './components/ZlTabs/index.css';import './components/ZlTable/index.css';import './components/ZlSwitch/index.css';import './components/ZlSection/index.css';import './components/ZlSearchTable/index.css';import './components/ZlSearch/index.css';import './components/ZlRadioTag/index.css';import './components/ZlPopconfirm/index.css';import './components/ZlPdfViewer/index.css';import './components/ZlLogin/index.css';import './components/ZlIconLabel/index.css';import './components/ZlGrid/index.css';import './components/ZlForm/index.css';import './components/ZlDrawer/index.css';import './components/ZlDialog/index.css';import './components/ZlDescription/index.css';import './components/ZlTag/ZlCornerTag.css';import './components/ZlCheckboxTag/index.css';import './components/ZlCard/index.css';import './components/ZlCardPage/index.css';import './components/ZlAppSlogan/index.css';import './components/ZlAppMenu/AppMenu.css';import './components/ZlAction/List.css';/* empty css */
4
+ import t from "./components/ZlAddSub/index.vue.mjs";
5
5
  import l from "./components/ZlAppLayout/index.vue.mjs";
6
6
  import p from "./components/ZlAppMenu/AppMenu.vue.mjs";
7
7
  /* empty css */
@@ -17,74 +17,76 @@ import c from "./components/ZlCard/index.vue.mjs";
17
17
  import _ from "./components/ZlCheckAll/index.vue.mjs";
18
18
  import $ from "./components/ZlCheckboxTag/index.vue.mjs";
19
19
  /* empty css */
20
- import d from "./components/ZlTag/ZlCornerTag.vue.mjs";
20
+ import g from "./components/ZlTag/ZlCornerTag.vue.mjs";
21
21
  /* empty css */
22
- import g from "./components/ZlCopy/index.vue.mjs";
22
+ import d from "./components/ZlCopy/index.vue.mjs";
23
23
  import T from "./components/ZlDescription/index.vue.mjs";
24
24
  /* empty css */
25
- import u from "./components/ZlDictTag/index.vue.mjs";
26
- import P from "./components/ZlDrawer/index.vue.mjs";
25
+ import u from "./components/ZlDialog/index.vue.mjs";
27
26
  /* empty css */
28
- import b from "./components/ZlDynamicComponent/index.vue.mjs";
29
- import h from "./components/ZlEmpty/index.vue.mjs";
30
- import A from "./components/ZlForm/index.vue.mjs";
27
+ import P from "./components/ZlDictTag/index.vue.mjs";
28
+ import b from "./components/ZlDrawer/index.vue.mjs";
29
+ /* empty css */
30
+ import h from "./components/ZlDynamicComponent/index.vue.mjs";
31
+ import A from "./components/ZlEmpty/index.vue.mjs";
32
+ import C from "./components/ZlForm/index.vue.mjs";
31
33
  /* empty css */
32
- import C from "./components/ZlForm/ZlFormChild.vue.mjs";
33
- import S from "./components/ZlGrid/ZlGridItem.vue.mjs";
34
- import x from "./components/ZlGrid/index.vue.mjs";
34
+ import S from "./components/ZlForm/ZlFormChild.vue.mjs";
35
+ import x from "./components/ZlGrid/ZlGridItem.vue.mjs";
36
+ import I from "./components/ZlGrid/index.vue.mjs";
35
37
  /* empty css */
36
- import I from "./components/ZlHorizontalTable/index.vue.mjs";
37
- import L from "./components/ZlIcon/index.vue.mjs";
38
+ import L from "./components/ZlHorizontalTable/index.vue.mjs";
39
+ import D from "./components/ZlIcon/index.vue.mjs";
38
40
  import v from "./components/ZlI18nProvider/index.vue.mjs";
39
41
  import w from "./components/ZlIconHover/index.vue.mjs";
40
42
  import y from "./components/ZlIconLabel/index.vue.mjs";
41
43
  /* empty css */
42
- import D from "./components/ZlLayoutSwitch/index.vue.mjs";
43
- import F from "./components/ZlLogin/index.vue.mjs";
44
+ import F from "./components/ZlLayoutSwitch/index.vue.mjs";
45
+ import G from "./components/ZlLogin/index.vue.mjs";
44
46
  /* empty css */
45
- import G from "./components/ZlLogin/components/LoginForm.vue.mjs";
46
- import M from "./components/ZlPagination/index.vue.mjs";
47
- import k from "./components/ZlPdfViewer/index.vue.mjs";
47
+ import M from "./components/ZlLogin/components/LoginForm.vue.mjs";
48
+ import k from "./components/ZlPagination/index.vue.mjs";
49
+ import z from "./components/ZlPdfViewer/index.vue.mjs";
48
50
  /* empty css */
49
- import z from "./components/ZlPermission/index.vue.mjs";
50
- import E from "./components/ZlPopconfirm/index.vue.mjs";
51
+ import E from "./components/ZlPermission/index.vue.mjs";
52
+ import H from "./components/ZlPopconfirm/index.vue.mjs";
51
53
  /* empty css */
52
- import H from "./components/ZlRadioTag/index.vue.mjs";
54
+ import j from "./components/ZlRadioTag/index.vue.mjs";
53
55
  /* empty css */
54
- import j from "./components/ZlSearch/index.vue.mjs";
56
+ import R from "./components/ZlSearch/index.vue.mjs";
55
57
  /* empty css */
56
- import R from "./components/ZlSearchTable/index.vue.mjs";
58
+ import V from "./components/ZlSearchTable/index.vue.mjs";
57
59
  /* empty css */
58
- import V from "./components/ZlSection/index.vue.mjs";
60
+ import q from "./components/ZlSection/index.vue.mjs";
59
61
  /* empty css */
60
- import q from "./components/ZlSorter/index.vue.mjs";
61
- import O from "./components/ZlSorter/ZlSorterList.vue.mjs";
62
- import U from "./components/ZlSwitch/index.vue.mjs";
62
+ import O from "./components/ZlSorter/index.vue.mjs";
63
+ import U from "./components/ZlSorter/ZlSorterList.vue.mjs";
64
+ import B from "./components/ZlSwitch/index.vue.mjs";
63
65
  /* empty css */
64
- import B from "./components/ZlTable/index.vue.mjs";
66
+ import J from "./components/ZlTable/index.vue.mjs";
65
67
  /* empty css */
66
- import J from "./components/ZlTabs/index.vue.mjs";
68
+ import K from "./components/ZlTabs/index.vue.mjs";
67
69
  /* empty css */
68
- import K from "./components/ZlTag/index.vue.mjs";
70
+ import N from "./components/ZlTag/index.vue.mjs";
69
71
  /* empty css */
70
- import N from "./components/ZlText/index.vue.mjs";
71
- import Q from "./components/ZlTitle/index.vue.mjs";
72
- import W from "./components/ZlTree/index.vue.mjs";
72
+ import Q from "./components/ZlText/index.vue.mjs";
73
+ import W from "./components/ZlTitle/index.vue.mjs";
74
+ import X from "./components/ZlTree/index.vue.mjs";
73
75
  /* empty css */
74
- import X from "./components/ZlTreeSelect/index.vue.mjs";
75
- import Y from "./components/ZlUpload/index.vue.mjs";
76
- import { presetIconifyIcon as Ir } from "./components/ZlIcon/presetIconifyIcon.mjs";
77
- import { usePagination as vr } from "./components/ZlPagination/usePagination.mjs";
78
- import { useTablePagination as yr } from "./components/ZlTable/useTablePagination.mjs";
79
- import { usePermission as Fr, usePermissionProvider as Gr } from "./components/ZlPermission/usePermission.mjs";
80
- import { createZlI18n as kr } from "./locales/createZlI18n.mjs";
81
- import { default as Er } from "./locales/en.mjs";
82
- import { zlMessages as jr } from "./locales/messages.mjs";
83
- import { default as Vr } from "./locales/zh-cn.mjs";
84
- const oo = {
76
+ import Y from "./components/ZlTreeSelect/index.vue.mjs";
77
+ import oo from "./components/ZlUpload/index.vue.mjs";
78
+ import { presetIconifyIcon as vr } from "./components/ZlIcon/presetIconifyIcon.mjs";
79
+ import { usePagination as yr } from "./components/ZlPagination/usePagination.mjs";
80
+ import { useTablePagination as Gr } from "./components/ZlTable/useTablePagination.mjs";
81
+ import { usePermission as kr, usePermissionProvider as zr } from "./components/ZlPermission/usePermission.mjs";
82
+ import { createZlI18n as Hr } from "./locales/createZlI18n.mjs";
83
+ import { default as Rr } from "./locales/en.mjs";
84
+ import { zlMessages as qr } from "./locales/messages.mjs";
85
+ import { default as Ur } from "./locales/zh-cn.mjs";
86
+ const ro = {
85
87
  ZlAction: i,
86
- ZlActionList: t,
87
- ZlAddSub: a,
88
+ ZlActionList: a,
89
+ ZlAddSub: t,
88
90
  ZlAppLayout: l,
89
91
  ZlAppMenu: p,
90
92
  ZlAppSlogan: s,
@@ -95,55 +97,56 @@ const oo = {
95
97
  ZlCard: c,
96
98
  ZlCheckAll: _,
97
99
  ZlCheckboxTag: $,
98
- ZlCopy: g,
100
+ ZlCopy: d,
99
101
  ZlDescription: T,
100
- ZlDictTag: u,
101
- ZlDrawer: P,
102
- ZlDynamicComponent: b,
103
- ZlEmpty: h,
104
- ZlForm: A,
105
- ZlFormChild: C,
106
- ZlGridItem: S,
107
- ZlGrid: x,
108
- ZlHorizontalTable: I,
109
- ZlIcon: L,
102
+ ZlDialog: u,
103
+ ZlDictTag: P,
104
+ ZlDrawer: b,
105
+ ZlDynamicComponent: h,
106
+ ZlEmpty: A,
107
+ ZlForm: C,
108
+ ZlFormChild: S,
109
+ ZlGridItem: x,
110
+ ZlGrid: I,
111
+ ZlHorizontalTable: L,
112
+ ZlIcon: D,
110
113
  ZlI18nProvider: v,
111
114
  ZlIconHover: w,
112
115
  ZlIconLabel: y,
113
- ZlCornerTag: d,
114
- ZlLayoutSwitch: D,
115
- ZlLogin: F,
116
- ZlLoginForm: G,
117
- ZlPagination: M,
118
- ZlPdfViewer: k,
119
- ZlPermission: z,
120
- ZlPopconfirm: E,
121
- ZlRadioTag: H,
122
- ZlSearch: j,
123
- ZlSearchTable: R,
124
- ZlSection: V,
125
- ZlSorter: q,
126
- ZlSorterList: O,
127
- ZlSwitch: U,
128
- ZlTable: B,
129
- ZlTabs: J,
130
- ZlTag: K,
131
- ZlText: N,
132
- ZlTitle: Q,
133
- ZlUpload: Y,
134
- ZlTree: W,
135
- ZlTreeSelect: X
116
+ ZlCornerTag: g,
117
+ ZlLayoutSwitch: F,
118
+ ZlLogin: G,
119
+ ZlLoginForm: M,
120
+ ZlPagination: k,
121
+ ZlPdfViewer: z,
122
+ ZlPermission: E,
123
+ ZlPopconfirm: H,
124
+ ZlRadioTag: j,
125
+ ZlSearch: R,
126
+ ZlSearchTable: V,
127
+ ZlSection: q,
128
+ ZlSorter: O,
129
+ ZlSorterList: U,
130
+ ZlSwitch: B,
131
+ ZlTable: J,
132
+ ZlTabs: K,
133
+ ZlTag: N,
134
+ ZlText: Q,
135
+ ZlTitle: W,
136
+ ZlUpload: oo,
137
+ ZlTree: X,
138
+ ZlTreeSelect: Y
136
139
  };
137
- function ro(o) {
138
- Object.entries(oo).forEach(([r, m]) => {
140
+ function mo(o) {
141
+ Object.entries(ro).forEach(([r, m]) => {
139
142
  o.component(r, m);
140
143
  });
141
144
  }
142
- const Cr = { install: ro };
145
+ const Ir = { install: mo };
143
146
  export {
144
147
  i as ZlAction,
145
- t as ZlActionList,
146
- a as ZlAddSub,
148
+ a as ZlActionList,
149
+ t as ZlAddSub,
147
150
  l as ZlAppLayout,
148
151
  p as ZlAppMenu,
149
152
  s as ZlAppSlogan,
@@ -154,54 +157,55 @@ export {
154
157
  Z as ZlCardPage,
155
158
  _ as ZlCheckAll,
156
159
  $ as ZlCheckboxTag,
157
- g as ZlCopy,
158
- d as ZlCornerTag,
160
+ d as ZlCopy,
161
+ g as ZlCornerTag,
159
162
  T as ZlDescription,
160
- u as ZlDictTag,
161
- P as ZlDrawer,
162
- b as ZlDynamicComponent,
163
- h as ZlEmpty,
164
- A as ZlForm,
165
- C as ZlFormChild,
166
- x as ZlGrid,
167
- S as ZlGridItem,
168
- I as ZlHorizontalTable,
163
+ u as ZlDialog,
164
+ P as ZlDictTag,
165
+ b as ZlDrawer,
166
+ h as ZlDynamicComponent,
167
+ A as ZlEmpty,
168
+ C as ZlForm,
169
+ S as ZlFormChild,
170
+ I as ZlGrid,
171
+ x as ZlGridItem,
172
+ L as ZlHorizontalTable,
169
173
  v as ZlI18nProvider,
170
- L as ZlIcon,
174
+ D as ZlIcon,
171
175
  w as ZlIconHover,
172
176
  y as ZlIconLabel,
173
- D as ZlLayoutSwitch,
174
- F as ZlLogin,
175
- G as ZlLoginForm,
176
- M as ZlPagination,
177
- k as ZlPdfViewer,
178
- z as ZlPermission,
179
- E as ZlPopconfirm,
180
- H as ZlRadioTag,
181
- j as ZlSearch,
182
- R as ZlSearchTable,
183
- V as ZlSection,
184
- q as ZlSorter,
185
- O as ZlSorterList,
186
- U as ZlSwitch,
187
- B as ZlTable,
188
- J as ZlTabs,
189
- K as ZlTag,
190
- N as ZlText,
191
- Q as ZlTitle,
192
- W as ZlTree,
193
- X as ZlTreeSelect,
194
- Y as ZlUpload,
195
- kr as createZlI18n,
196
- Cr as default,
197
- ro as install,
198
- Ir as presetIconifyIcon,
199
- vr as usePagination,
200
- Fr as usePermission,
201
- Gr as usePermissionProvider,
202
- yr as useTablePagination,
203
- Er as zlEnMessages,
204
- jr as zlMessages,
205
- Vr as zlZhMessages
177
+ F as ZlLayoutSwitch,
178
+ G as ZlLogin,
179
+ M as ZlLoginForm,
180
+ k as ZlPagination,
181
+ z as ZlPdfViewer,
182
+ E as ZlPermission,
183
+ H as ZlPopconfirm,
184
+ j as ZlRadioTag,
185
+ R as ZlSearch,
186
+ V as ZlSearchTable,
187
+ q as ZlSection,
188
+ O as ZlSorter,
189
+ U as ZlSorterList,
190
+ B as ZlSwitch,
191
+ J as ZlTable,
192
+ K as ZlTabs,
193
+ N as ZlTag,
194
+ Q as ZlText,
195
+ W as ZlTitle,
196
+ X as ZlTree,
197
+ Y as ZlTreeSelect,
198
+ oo as ZlUpload,
199
+ Hr as createZlI18n,
200
+ Ir as default,
201
+ mo as install,
202
+ vr as presetIconifyIcon,
203
+ yr as usePagination,
204
+ kr as usePermission,
205
+ zr as usePermissionProvider,
206
+ Gr as useTablePagination,
207
+ Rr as zlEnMessages,
208
+ qr as zlMessages,
209
+ Ur as zlZhMessages
206
210
  };
207
211
  //# sourceMappingURL=index.mjs.map
@@ -3,6 +3,9 @@ const e = {
3
3
  "zl.drawer.cancel": "Cancel",
4
4
  "zl.drawer.confirm": "Confirm",
5
5
  "zl.drawer.close": "Close",
6
+ "zl.dialog.cancel": "Cancel",
7
+ "zl.dialog.confirm": "Confirm",
8
+ "zl.dialog.close": "Close",
6
9
  "zl.popconfirm.confirm": "Confirm",
7
10
  "zl.popconfirm.cancel": "Cancel",
8
11
  "zl.layoutSwitch.grid": "Grid",
@@ -3,6 +3,9 @@ const l = {
3
3
  "zl.drawer.cancel": "取消",
4
4
  "zl.drawer.confirm": "确定",
5
5
  "zl.drawer.close": "关闭",
6
+ "zl.dialog.cancel": "取消",
7
+ "zl.dialog.confirm": "确定",
8
+ "zl.dialog.close": "关闭",
6
9
  "zl.popconfirm.confirm": "确定",
7
10
  "zl.popconfirm.cancel": "取消",
8
11
  "zl.layoutSwitch.grid": "网格",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zl-ui-kit/components",
3
- "version": "0.10.4",
3
+ "version": "0.11.1",
4
4
  "type": "module",
5
5
  "description": "ZL UI 业务组件库(Element Plus 体系,Zl 前缀)——首批:Icon/AutoTooltip/Tag/CornerTag/Text/Title/Copy/Empty/Pagination/DictTag",
6
6
  "license": "MIT",
@@ -39,9 +39,9 @@
39
39
  "file-type": "^20.4.1",
40
40
  "dt-sql-parser": "^4.3.1",
41
41
  "sql-formatter": "^15.4.2",
42
- "@zl-ui-kit/composables": "0.10.4",
43
- "@zl-ui-kit/icons": "0.10.4",
44
- "@zl-ui-kit/utils": "0.10.4"
42
+ "@zl-ui-kit/composables": "0.11.1",
43
+ "@zl-ui-kit/utils": "0.11.1",
44
+ "@zl-ui-kit/icons": "0.11.1"
45
45
  },
46
46
  "peerDependencies": {
47
47
  "@vueuse/core": "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
@@ -98,10 +98,10 @@
98
98
  "@vue-office/pdf": "^2.0.10",
99
99
  "@vue-office/pptx": "1.0.1",
100
100
  "echarts": "^5.6.0",
101
- "@jichuang/vite-config": "1.0.0",
101
+ "@jichuang/eslint-config": "1.0.0",
102
+ "@zl-ui-kit/theme": "0.11.1",
102
103
  "@jichuang/tsconfig": "1.0.0",
103
- "@zl-ui-kit/theme": "0.10.4",
104
- "@jichuang/eslint-config": "1.0.0"
104
+ "@jichuang/vite-config": "1.0.0"
105
105
  },
106
106
  "repository": {
107
107
  "type": "git",