@zl-ui-kit/components 0.10.3 → 0.11.0
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 +87 -19
- package/dist/components/ZlDialog/index.css +1 -0
- package/dist/components/ZlDialog/index.vue.d.ts +40 -0
- package/dist/components/ZlDialog/index.vue.mjs +80 -0
- package/dist/components/ZlDialog/index3.vue.mjs +6 -0
- package/dist/components/ZlForm/index.vue.mjs +35 -35
- package/dist/index.d.ts +1 -0
- package/dist/index.mjs +136 -132
- package/dist/locales/en.mjs +3 -0
- package/dist/locales/zh-cn.mjs +3 -0
- package/package.json +9 -9
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# @zl-ui-kit/components
|
|
2
2
|
|
|
3
|
-
ZL UI 业务组件库 —— Element Plus 体系，`Zl` 前缀，
|
|
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
|
-
**本页即完整使用文档**：安装与四个导入入口、
|
|
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. 组件总览（
|
|
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 国际化基础设施（独立于
|
|
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` 前缀，
|
|
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)` | 业务项目首选，主入口
|
|
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` | 组件陈列 |
|
|
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. 组件总览（
|
|
433
|
+
## 3. 组件总览（56 个业务组件）
|
|
428
434
|
|
|
429
|
-
> 口径：主入口 `@zl-ui-kit/components` 导出 **
|
|
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 国际化基础设施（独立于
|
|
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`
|
|
6266
|
+
4. **弹窗**：所有弹窗（`el-dialog` 等）**默认统一用 `ZlDrawer` 替换**——仅当明确需要居中 / 模态对话框形态时才用 `ZlDialog`；**未明确指定用 `ZlDialog` 的场景，一律默认替换成 `ZlDrawer`**。按弹窗内展示内容的多少合理排版（表单用 `ZlForm`、详情用描述列表等）。
|
|
6199
6267
|
5. **表单**：所有新增、编辑、详情弹窗里的表单项（`el-form`）都用 `ZlForm` 替换。
|
|
6200
6268
|
6. **卡片**：卡片列表的卡片组件用 `ZlCard` 替换。
|
|
6201
6269
|
7. **操作按钮**：列表页操作栏、以及卡片组件（替换后的 `ZlCard`）里的按钮都用 `ZlAction` 替换。
|
|
@@ -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
|
|
@@ -1,68 +1,68 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
const G = { class: "zl-form-item-label" },
|
|
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(
|
|
12
|
-
const i =
|
|
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 (!
|
|
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:
|
|
26
|
-
label:
|
|
27
|
-
model:
|
|
25
|
+
component: $,
|
|
26
|
+
label: z,
|
|
27
|
+
model: C,
|
|
28
28
|
defaultValue: H,
|
|
29
|
-
slot:
|
|
30
|
-
slots:
|
|
31
|
-
...
|
|
29
|
+
slot: T,
|
|
30
|
+
slots: B,
|
|
31
|
+
...R
|
|
32
32
|
} = l, _ = { ...o };
|
|
33
33
|
delete _.tooltip;
|
|
34
|
-
const
|
|
34
|
+
const Z = { ...R, ...a ?? {} };
|
|
35
35
|
e.push({
|
|
36
36
|
formItemProps: _,
|
|
37
37
|
tooltip: f,
|
|
38
|
-
component:
|
|
39
|
-
label:
|
|
40
|
-
model:
|
|
41
|
-
slot:
|
|
42
|
-
slots:
|
|
43
|
-
props:
|
|
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
|
|
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
|
|
52
|
-
const s = e[
|
|
53
|
-
return e[
|
|
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
|
|
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
|
|
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
|
|
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
|
-
|
|
103
|
-
F("span", null,
|
|
104
|
-
]
|
|
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:
|
|
106
|
+
key: 0,
|
|
107
107
|
content: o.tooltip,
|
|
108
108
|
placement: "top"
|
|
109
109
|
}, {
|
|
110
110
|
default: d(() => [
|
|
111
|
-
|
|
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"])) :
|
|
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(
|
|
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
|
|
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
|
|
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
|
|
20
|
+
import g from "./components/ZlTag/ZlCornerTag.vue.mjs";
|
|
21
21
|
/* empty css */
|
|
22
|
-
import
|
|
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/
|
|
26
|
-
import P from "./components/ZlDrawer/index.vue.mjs";
|
|
25
|
+
import u from "./components/ZlDialog/index.vue.mjs";
|
|
27
26
|
/* empty css */
|
|
28
|
-
import
|
|
29
|
-
import
|
|
30
|
-
|
|
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
|
|
33
|
-
import
|
|
34
|
-
import
|
|
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
|
|
37
|
-
import
|
|
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
|
|
43
|
-
import
|
|
44
|
+
import F from "./components/ZlLayoutSwitch/index.vue.mjs";
|
|
45
|
+
import G from "./components/ZlLogin/index.vue.mjs";
|
|
44
46
|
/* empty css */
|
|
45
|
-
import
|
|
46
|
-
import
|
|
47
|
-
import
|
|
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
|
|
50
|
-
import
|
|
51
|
+
import E from "./components/ZlPermission/index.vue.mjs";
|
|
52
|
+
import H from "./components/ZlPopconfirm/index.vue.mjs";
|
|
51
53
|
/* empty css */
|
|
52
|
-
import
|
|
54
|
+
import j from "./components/ZlRadioTag/index.vue.mjs";
|
|
53
55
|
/* empty css */
|
|
54
|
-
import
|
|
56
|
+
import R from "./components/ZlSearch/index.vue.mjs";
|
|
55
57
|
/* empty css */
|
|
56
|
-
import
|
|
58
|
+
import V from "./components/ZlSearchTable/index.vue.mjs";
|
|
57
59
|
/* empty css */
|
|
58
|
-
import
|
|
60
|
+
import q from "./components/ZlSection/index.vue.mjs";
|
|
59
61
|
/* empty css */
|
|
60
|
-
import
|
|
61
|
-
import
|
|
62
|
-
import
|
|
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
|
|
66
|
+
import J from "./components/ZlTable/index.vue.mjs";
|
|
65
67
|
/* empty css */
|
|
66
|
-
import
|
|
68
|
+
import K from "./components/ZlTabs/index.vue.mjs";
|
|
67
69
|
/* empty css */
|
|
68
|
-
import
|
|
70
|
+
import N from "./components/ZlTag/index.vue.mjs";
|
|
69
71
|
/* empty css */
|
|
70
|
-
import
|
|
71
|
-
import
|
|
72
|
-
import
|
|
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
|
|
75
|
-
import
|
|
76
|
-
import { presetIconifyIcon as
|
|
77
|
-
import { usePagination as
|
|
78
|
-
import { useTablePagination as
|
|
79
|
-
import { usePermission as
|
|
80
|
-
import { createZlI18n as
|
|
81
|
-
import { default as
|
|
82
|
-
import { zlMessages as
|
|
83
|
-
import { default as
|
|
84
|
-
const
|
|
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:
|
|
87
|
-
ZlAddSub:
|
|
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:
|
|
100
|
+
ZlCopy: d,
|
|
99
101
|
ZlDescription: T,
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
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:
|
|
114
|
-
ZlLayoutSwitch:
|
|
115
|
-
ZlLogin:
|
|
116
|
-
ZlLoginForm:
|
|
117
|
-
ZlPagination:
|
|
118
|
-
ZlPdfViewer:
|
|
119
|
-
ZlPermission:
|
|
120
|
-
ZlPopconfirm:
|
|
121
|
-
ZlRadioTag:
|
|
122
|
-
ZlSearch:
|
|
123
|
-
ZlSearchTable:
|
|
124
|
-
ZlSection:
|
|
125
|
-
ZlSorter:
|
|
126
|
-
ZlSorterList:
|
|
127
|
-
ZlSwitch:
|
|
128
|
-
ZlTable:
|
|
129
|
-
ZlTabs:
|
|
130
|
-
ZlTag:
|
|
131
|
-
ZlText:
|
|
132
|
-
ZlTitle:
|
|
133
|
-
ZlUpload:
|
|
134
|
-
ZlTree:
|
|
135
|
-
ZlTreeSelect:
|
|
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
|
|
138
|
-
Object.entries(
|
|
140
|
+
function mo(o) {
|
|
141
|
+
Object.entries(ro).forEach(([r, m]) => {
|
|
139
142
|
o.component(r, m);
|
|
140
143
|
});
|
|
141
144
|
}
|
|
142
|
-
const
|
|
145
|
+
const Ir = { install: mo };
|
|
143
146
|
export {
|
|
144
147
|
i as ZlAction,
|
|
145
|
-
|
|
146
|
-
|
|
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
|
-
|
|
158
|
-
|
|
160
|
+
d as ZlCopy,
|
|
161
|
+
g as ZlCornerTag,
|
|
159
162
|
T as ZlDescription,
|
|
160
|
-
u as
|
|
161
|
-
P as
|
|
162
|
-
b as
|
|
163
|
-
h as
|
|
164
|
-
A as
|
|
165
|
-
C as
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
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
|
-
|
|
174
|
+
D as ZlIcon,
|
|
171
175
|
w as ZlIconHover,
|
|
172
176
|
y as ZlIconLabel,
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
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
|
package/dist/locales/en.mjs
CHANGED
|
@@ -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",
|
package/dist/locales/zh-cn.mjs
CHANGED
|
@@ -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.
|
|
3
|
+
"version": "0.11.0",
|
|
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,12 +39,12 @@
|
|
|
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.
|
|
43
|
-
"@zl-ui-kit/
|
|
44
|
-
"@zl-ui-kit/
|
|
42
|
+
"@zl-ui-kit/composables": "0.11.0",
|
|
43
|
+
"@zl-ui-kit/icons": "0.11.0",
|
|
44
|
+
"@zl-ui-kit/utils": "0.11.0"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
|
-
"@vueuse/core": "^12.3.0",
|
|
47
|
+
"@vueuse/core": "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
|
|
48
48
|
"element-plus": "^2.9.2",
|
|
49
49
|
"vue": "^3.5.13",
|
|
50
50
|
"monaco-editor": "^0.41.0",
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"@typescript-eslint/eslint-plugin": "^8.19.1",
|
|
80
80
|
"@typescript-eslint/parser": "^8.19.1",
|
|
81
81
|
"@vitejs/plugin-vue": "^5.2.1",
|
|
82
|
-
"@vueuse/core": "^12.3.0",
|
|
82
|
+
"@vueuse/core": "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
|
|
83
83
|
"cross-env": "^7.0.3",
|
|
84
84
|
"element-plus": "^2.9.2",
|
|
85
85
|
"eslint-plugin-vue": "^9.32.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",
|
|
102
|
-
"@jichuang/tsconfig": "1.0.0",
|
|
103
101
|
"@jichuang/eslint-config": "1.0.0",
|
|
104
|
-
"@
|
|
102
|
+
"@jichuang/tsconfig": "1.0.0",
|
|
103
|
+
"@jichuang/vite-config": "1.0.0",
|
|
104
|
+
"@zl-ui-kit/theme": "0.11.0"
|
|
105
105
|
},
|
|
106
106
|
"repository": {
|
|
107
107
|
"type": "git",
|