@zl-ui-kit/components 0.18.3 → 0.18.5

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.
Files changed (16) hide show
  1. package/README.md +96 -57
  2. package/dist/components/ZlAction/List.vue.mjs +47 -44
  3. package/dist/components/ZlAction/index.vue.d.ts +7 -1
  4. package/dist/components/ZlAction/index.vue.mjs +12 -8
  5. package/dist/components/ZlAction/types.d.ts +5 -2
  6. package/dist/components/ZlDescription/index.css +1 -1
  7. package/dist/components/ZlDescription/index.vue.mjs +28 -24
  8. package/dist/components/ZlDictTag/index.vue.d.ts +6 -0
  9. package/dist/components/ZlDictTag/index.vue.mjs +31 -26
  10. package/dist/components/ZlLayoutSwitch/index.css +1 -1
  11. package/dist/components/ZlLayoutSwitch/index.vue.d.ts +10 -0
  12. package/dist/components/ZlLayoutSwitch/index.vue.mjs +1 -1
  13. package/dist/components/ZlLayoutSwitch/index2.vue.mjs +27 -19
  14. package/dist/locales/en.mjs +2 -2
  15. package/dist/locales/zh-cn.mjs +2 -2
  16. package/package.json +7 -7
package/README.md CHANGED
@@ -863,6 +863,11 @@ const { data } = useDataRequest(getChartDataApi, { dataKey: 'data' })
863
863
 
864
864
  #### ① `ZlSearchTable` —— 直接传 service
865
865
 
866
+ > **内置分页驱动，不要过度包装**：组件内部已用 `usePageableRequest` 完成 loading / 分页 / 查询参数合并 / 刷新，
867
+ > `request` **直接传一个纯分页 service**（`(params) => api.page(params)`，返回 `{ rows, total }` 结构）即可，**不需要**在页面里再包一层 `usePageableRequest` / `useRequest` 管理数据。
868
+ > 需要重查时用 `ref.refresh()`（原地重查、保持页码）；查询条件变化、增删改后需回第 1 页时，把变化源放进 `request.options.refreshDeps`（见下）。
869
+ > 完整页面范式见 [`§6.5.1`](#651-列表页范式zlsearchtable--usepageablerequest内置) 与 playground `ZlSearchTable` / `ZlCardPage` 示例。
870
+
866
871
  ```vue
867
872
  <ZlSearchTable
868
873
  :request="getResourcePage"
@@ -905,8 +910,29 @@ const queryItems: SearchItem[] = [
905
910
  ]
906
911
  ```
907
912
 
913
+ **查询项不显示 label（不占位）**：与 `ZlForm` 一致，传 `:hide-empty-label="true"` 并把该项 `label` 置为 `''`，
914
+ 该项不渲染 label 列、查询控件直接顶到最左（其余查询项不受影响），适合「检索项名称与本页标题重复」等场景：
915
+
916
+ ```vue
917
+ <ZlSearchTable :request="getResourcePage" :columns="columns" :query-items="queryItems" hide-empty-label />
918
+ ```
919
+
920
+ ```ts
921
+ const queryItems: SearchItem[] = [
922
+ // 该项无 label：配合 hide-empty-label 不占位
923
+ { model: 'keyword', label: '', component: 'el-input', props: { placeholder: '直接顶到最左' } },
924
+ // 其余项照常带 label
925
+ { model: 'type', label: '类型', component: 'el-select', props: {/* … */} },
926
+ ]
927
+ ```
928
+
929
+ > `ZlSearch` / `ZlSearchTable` / `ZlCardPage` 三个组件都透传 `hideEmptyLabel` prop，behavior 一致。
930
+
908
931
  #### ② `ZlCardPage` —— 直接传 service
909
932
 
933
+ > **与 `ZlSearchTable` 同源：内置 `usePageableRequest` 驱动卡片分页，`request` 直接传纯分页 service 即可**，不要在外层再用 `usePageableRequest` 包装。
934
+ > 增删改成功后用 `cardPageRef.value?.refresh()` 原地重查；需要主表格/卡片之外自行管理 loading 时（罕见）才考虑手动包一层。
935
+
910
936
  ```vue
911
937
  <ZlCardPage :request="getResourcePage" card-min-width="200px">
912
938
  <template #default="{ data }">
@@ -1198,7 +1224,8 @@ req.cancel() // 取消进行中请求
1198
1224
 
1199
1225
  #### 6.5.1 列表页范式：ZlSearchTable + usePageableRequest（内置）
1200
1226
 
1201
- `ZlSearchTable` 内部已用 `usePageableRequest` 驱动分页与查询，页面只需传 `request` / `columns` / `queryItems`；新增、导入、导出等按钮统一放进 `search-actions` 插槽；行内操作交给列的 `actions`；字典列与超长列用同名插槽（`#<prop>`）接管。
1227
+ `ZlSearchTable` 内部已用 `usePageableRequest` 驱动分页与查询，**页面只需把纯分页 service 直接传给 `request`，不要在外层再包 `usePageableRequest` 管理数据**；
1228
+ 新增、导入、导出等按钮统一放进 `search-actions` 插槽；行内操作交给列的 `actions`；字典列与超长列用同名插槽（`#<prop>`）接管；增删改成功后用 `tableRef.value?.refresh()` 原地重查。
1202
1229
 
1203
1230
  ```vue
1204
1231
  <script setup lang="ts">
@@ -3791,7 +3818,7 @@ const { i18n } = useLocale({ messages })
3791
3818
 
3792
3819
  | 组件 | 入口 | props | 事件 | 插槽 | 暴露 |
3793
3820
  | ------------------------------------------- | ------------------- | ----- | ---- | ---- | ---- |
3794
- | [`ZlAction`](#zlaction) | 主入口 | 0 | 0 | 0 | 0 |
3821
+ | [`ZlAction`](#zlaction) | 主入口 | 1 | 0 | 0 | 0 |
3795
3822
  | [`ZlActionList`](#zlactionlist) | 主入口 | 6 | 1 | 1 | 0 |
3796
3823
  | [`ZlAddSub`](#zladdsub) | 主入口 | 2 | 1 | 1 | 0 |
3797
3824
  | [`ZlAppLayout`](#zlapplayout) | 主入口 | 1 | 0 | 8 | 0 |
@@ -3807,7 +3834,7 @@ const { i18n } = useLocale({ messages })
3807
3834
  | [`ZlCopy`](#zlcopy) | 主入口 | 2 | 0 | 2 | 0 |
3808
3835
  | [`ZlDescription`](#zldescription) | 主入口 | 5 | 0 | 1 | 0 |
3809
3836
  | [`ZlDialog`](#zldialog) | 主入口 | 7 | 1 | 2 | 0 |
3810
- | [`ZlDictTag`](#zldicttag) | 主入口 | 8 | 0 | 0 | 0 |
3837
+ | [`ZlDictTag`](#zldicttag) | 主入口 | 10 | 0 | 0 | 0 |
3811
3838
  | [`ZlDrawer`](#zldrawer) | 主入口 | 7 | 1 | 2 | 0 |
3812
3839
  | [`ZlDynamicComponent`](#zldynamiccomponent) | 主入口 | 3 | 2 | 0 | 0 |
3813
3840
  | [`ZlPdfViewer`](#zlpdfviewer) | 主入口 | 2 | 0 | 0 | 0 |
@@ -3824,7 +3851,7 @@ const { i18n } = useLocale({ messages })
3824
3851
  | [`ZlIconHover`](#zliconhover) | 主入口 | 0 | 0 | 0 | 0 |
3825
3852
  | [`ZlIconLabel`](#zliconlabel) | 主入口 | 1 | 1 | 1 | 0 |
3826
3853
  | [`ZlCornerTag`](#zlcornertag) | 主入口 | 5 | 0 | 1 | 0 |
3827
- | [`ZlLayoutSwitch`](#zllayoutswitch) | 主入口 | 2 | 1 | 0 | 0 |
3854
+ | [`ZlLayoutSwitch`](#zllayoutswitch) | 主入口 | 6 | 1 | 0 | 0 |
3828
3855
  | [`ZlPageContainer`](#zlpagecontainer) | 主入口 | 3 | 0 | 4 | 0 |
3829
3856
  | [`ZlPagination`](#zlpagination) | 主入口 | 4 | 3 | 0 | 0 |
3830
3857
  | [`ZlPermission`](#zlpermission) | 主入口 | 1 | 0 | 1 | 0 |
@@ -3857,6 +3884,8 @@ const { i18n } = useLocale({ messages })
3857
3884
 
3858
3885
  <sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlAction/index.vue`</sub>
3859
3886
 
3887
+ **接口概览**：1 props
3888
+
3860
3889
  **用法示例**
3861
3890
 
3862
3891
  ```vue
@@ -3871,9 +3900,13 @@ import { ZlAction } from '@zl-ui-kit/components'
3871
3900
 
3872
3901
  > 示例中的 `actions` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
3873
3902
 
3874
- > 把 `$attrs` 透传给 `ZlActionList`，未列出的属性会继续下传
3903
+ **props**
3875
3904
 
3876
- > 纯容器组件：不接收 props，也无自定义事件/插槽/暴露方法。
3905
+ | 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
3906
+ | ----------- | -------- | ------ | ---- | ----------------- | ----------------------------------------------------------------- |
3907
+ | `listCount` | `number` | `2` | 否 | `:list-count="1"` | 直接展示的操作数，超出收入"更多"下拉，默认 2；透传给 ZlActionList |
3908
+
3909
+ > 把 `$attrs` 透传给 `ZlActionList`，未列出的属性会继续下传
3877
3910
 
3878
3911
  #### `ZlActionList`
3879
3912
 
@@ -4456,7 +4489,7 @@ import { ZlDescription } from '@zl-ui-kit/components'
4456
4489
  </script>
4457
4490
 
4458
4491
  <template>
4459
- <ZlDescription :items="items" :data="{ name: '订单-1024', type: 'API', count: 32 }" secondary />
4492
+ <ZlDescription :items="items" :data="data" secondary />
4460
4493
  </template>
4461
4494
  ```
4462
4495
 
@@ -4556,7 +4589,7 @@ import { ZlDialog } from '@zl-ui-kit/components'
4556
4589
 
4557
4590
  <sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlDictTag/index.vue`</sub>
4558
4591
 
4559
- **接口概览**：8 props
4592
+ **接口概览**：10 props
4560
4593
 
4561
4594
  **用法示例**
4562
4595
 
@@ -4584,6 +4617,8 @@ import { ZlDictTag } from '@zl-ui-kit/components'
4584
4617
  | `simple` | `boolean` | — | 否 | `simple` | 忽略字典项自带的颜色，改用标签默认配色 |
4585
4618
  | `iconVisible` | `boolean` | `undefined` | 否 | `icon-visible` | 是否展示字典项图标（默认 true） |
4586
4619
  | `hideIcon` | `boolean` | `undefined` | 否 | `hide-icon` | 已废弃，请用 `iconVisible` 控制图标显隐 |
4620
+ | `fill` | `boolean` | `false` | 否 | `fill` | 是否使用填充背景（配合字典项 `color`/`type` 显示浅色底色，如 `--zl-<色>-1`），透传给内部 ZlTag |
4621
+ | `rounded` | `boolean` | `false` | 否 | `rounded` | 是否使用全圆角样式，透传给内部 ZlTag |
4587
4622
 
4588
4623
  > 把 `$attrs` 透传给 `zl-corner-tag`，未列出的属性会继续下传
4589
4624
 
@@ -5261,7 +5296,7 @@ import { ZlCornerTag } from '@zl-ui-kit/components'
5261
5296
 
5262
5297
  **简介**：布局切换：在网格视图（grid）与表格视图（table）之间切换
5263
5298
 
5264
- **接口概览**：2 props · 1 事件
5299
+ **接口概览**：6 props · 1 事件
5265
5300
 
5266
5301
  **用法示例**
5267
5302
 
@@ -5277,10 +5312,14 @@ import { ZlLayoutSwitch } from '@zl-ui-kit/components'
5277
5312
 
5278
5313
  **props**
5279
5314
 
5280
- | 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
5281
- | ------------ | ------------------- | -------- | ---- | ----------------- | ------------------------------------------------------- |
5282
- | `modelValue` | `'grid' \| 'table'` | — | 否 | `v-model="value"` | 当前布局，`v-model` 绑定；未绑定时回落 `value` |
5283
- | `value` | `'grid' \| 'table'` | `'grid'` | 否 | `value="grid"` | 已废弃，请用 `modelValue`；仅在未双向绑定时作为当前布局 |
5315
+ | 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
5316
+ | ------------ | ------------------- | -------------- | ---- | ------------------------- | --------------------------------------------------------- |
5317
+ | `modelValue` | `'grid' \| 'table'` | — | 否 | `v-model="value"` | 当前布局，`v-model` 绑定；未绑定时回落 `value` |
5318
+ | `value` | `'grid' \| 'table'` | `'grid'` | 否 | `value="grid"` | 已废弃，请用 `modelValue`；仅在未双向绑定时作为当前布局 |
5319
+ | `gridText` | `string` | — | 否 | `grid-text="grid-text"` | 网格按钮文案：缺省走 i18n（卡片），传空字符串则只显示图标 |
5320
+ | `tableText` | `string` | — | 否 | `table-text="table-text"` | 表格按钮文案：缺省走 i18n（列表），传空字符串则只显示图标 |
5321
+ | `gridIcon` | `string` | `'table'` | 否 | `grid-icon="grid-icon"` | 网格按钮图标（`zl:` 图标名，不带前缀）：缺省 `table` |
5322
+ | `tableIcon` | `string` | `'list-color'` | 否 | `table-icon="table-icon"` | 列表按钮图标（`zl:` 图标名，不带前缀）：缺省 `list-color` |
5284
5323
 
5285
5324
  **事件（emits）**
5286
5325
 
@@ -6626,18 +6665,18 @@ import { ZlFileViewer } from '@zl-ui-kit/components/file-preview'
6626
6665
 
6627
6666
  操作项模型（ZlActionList / ZlTable actions 列共用）
6628
6667
 
6629
- | 字段 | 类型 | 必填 | 说明 |
6630
- | ------------ | ------------------------------------------ | ---- | ----------------------------------------------------------------------------------------------------------------- |
6631
- | `label` | `string` | 是 | 操作文案 |
6632
- | `icon` | `string` | 否 | 图标（`zl:` 前缀走 ZlIcon，其余按 iconify/EP 规则） |
6633
- | `iconProps` | `Record<string, any>` | 否 | 传给图标组件的 props |
6634
- | `iconClass` | `string` | 否 | 图标自定义类名 |
6635
- | `tooltip` | `boolean` | 否 | 是否用 tooltip 包住文案（文字过长时） |
6636
- | `disabled` | `boolean` | 否 | 禁用（点击无响应） |
6637
- | `divided` | `boolean` | 否 | 与下一项之间显示分割线 |
6638
- | `permission` | `string \| string[]` | 否 | 权限键（三段式，经 usePermission 校验） |
6639
- | `visible` | `boolean \| ((...args: any[]) => boolean)` | 否 | 显隐控制：布尔值直接判定；函数接收 `visibleArgs`（末尾追加 action 自身）后判定。 与权限取交集：两者都通过才展示。 |
6640
- | `handler` | `(...args: any[]) => void` | 否 | 点击处理（接收 actionArgs） |
6668
+ | 字段 | 类型 | 必填 | 说明 |
6669
+ | ------------ | ------------------------------------------ | ---- | ------------------------------------------------------------------------------------------------------------------------------ |
6670
+ | `label` | `string` | 是 | 操作文案 |
6671
+ | `icon` | `string` | 否 | 图标（`zl:` 前缀走 ZlIcon，其余按 iconify/EP 规则） |
6672
+ | `iconProps` | `Record<string, any>` | 否 | 传给图标组件的 props |
6673
+ | `iconClass` | `string` | 否 | 图标自定义类名 |
6674
+ | `tooltip` | `boolean \| string` | 否 | 提示词：`true` 用 `label` 作为提示；传字符串则直接作为提示词（无需同时配置 `label`）。 仅对纯图标操作项生效（配置了 `icon`）。 |
6675
+ | `disabled` | `boolean` | 否 | 禁用（点击无响应） |
6676
+ | `divided` | `boolean` | 否 | 与下一项之间显示分割线 |
6677
+ | `permission` | `string \| string[]` | 否 | 权限键（三段式，经 usePermission 校验） |
6678
+ | `visible` | `boolean \| ((...args: any[]) => boolean)` | 否 | 显隐控制：布尔值直接判定；函数接收 `visibleArgs`（末尾追加 action 自身）后判定。 与权限取交集：两者都通过才展示。 |
6679
+ | `handler` | `(...args: any[]) => void` | 否 | 点击处理（接收 actionArgs） |
6641
6680
 
6642
6681
  #### `IComponent`
6643
6682
 
@@ -6764,8 +6803,8 @@ ZlGrid 子项 schema
6764
6803
  ### 15.1 核心替换规则
6765
6804
 
6766
6805
  1. **接口请求统一封装**：所有接口调用使用 `useRequest`（普通接口）与 `usePageableRequest`（列表 / 分页接口）替换裸 `axios` / `fetch`。详见 §6。
6767
- 2. **普通（分页）列表页**：用 `ZlSearchTable` 替换 `el-table`。
6768
- 3. **卡片（分页）列表页**：用 `ZlCardPage` 替换 `el-table`。
6806
+ 2. **普通（分页）列表页**：用 `ZlSearchTable` 替换 `el-table`。**组件内部已内置 `usePageableRequest` 驱动**（loading / 分页 / 查询参数合并 / 刷新），`request` 直接传纯分页 service 即可，**不要在外层再包一层分页请求**；增删改成功后用 `ref.refresh()` 原地重查。
6807
+ 3. **卡片（分页）列表页**：用 `ZlCardPage` 替换 `el-table`。同样内置 `usePageableRequest`，用法与 `ZlSearchTable` 完全一致——直传 service + `ref.refresh()`，不要重复包装。
6769
6808
  4. **弹窗**：所有弹窗（`el-dialog` 等）**默认统一用 `ZlDrawer` 替换**——仅当明确需要居中 / 模态对话框形态时才用 `ZlDialog`；**未明确指定用 `ZlDialog` 的场景，一律默认替换成 `ZlDrawer`**。按弹窗内展示内容的多少合理排版（表单用 `ZlForm`、详情用描述列表等）。
6770
6809
  5. **表单**：所有新增、编辑、详情弹窗里的表单项（`el-form`）都用 `ZlForm` 替换。
6771
6810
  6. **卡片**：卡片列表的卡片组件用 `ZlCard` 替换。
@@ -6781,36 +6820,36 @@ ZlGrid 子项 schema
6781
6820
 
6782
6821
  ### 15.2 常用 el-* → Zl-* 对照表（持续补充）
6783
6822
 
6784
- | Element Plus 组件 | 替换为 | 说明 |
6785
- | ------------------------------------------------- | -------------------- | ------------------------------------------------------------------ |
6786
- | `el-table`（普通 / 分页列表） | `ZlSearchTable` | 自带查询条、分页、loading |
6787
- | `el-table`（卡片分页列表） | `ZlCardPage` | 卡片式分页列表 |
6788
- | `el-table`（纯表格，无查询） | `ZlTable` | 普通表格展示 |
6789
- | `el-dialog` / `el-drawer` | `ZlDrawer` | 所有弹窗统一为抽屉 |
6790
- | `el-form` | `ZlForm` | 弹窗内新增 / 编辑 / 详情表单（schema 驱动） |
6791
- | `el-card` | `ZlCard` | 卡片容器 |
6792
- | `el-button`（操作栏 / 卡片内） | `ZlAction` | 操作列与卡片按钮；页面级独立按钮仍可用 `el-button` |
6793
- | `el-tooltip`（超长省略） | `ZlAutoTooltip` | 文字溢出时自动提示 |
6794
- | `el-icon` | `ZlIcon` | 需先注册图标集（§4.1） |
6795
- | `el-tree` | `ZlTree` | 勾选多选 / 字段映射 / 暴露方法见 §7 › ZlTree |
6796
- | `el-upload` | `ZlUpload` | |
6797
- | `el-tag` | `ZlTag` | |
6798
- | `el-tabs` | `ZlTabs` | 页签内容默认懒挂载，差异见 §15.5 |
6799
- | `el-radio`（标签式） | `ZlRadioTag` | 仅此形态封装 |
6800
- | `el-checkbox`（标签式） | `ZlCheckboxTag` | 仅此形态封装 |
6801
- | `el-checkbox`（全选 / 半选） | `ZlCheckAll` | 自带半选态，可替代表头全选勾选框 |
6802
- | `el-radio` / `el-checkbox`（普通单选框 / 复选框） | —（**有意不封装**） | 继续用 `el-*`，库内无对应物（见 §15.5） |
6803
- | `el-radio-group` / `el-checkbox-group` | —（**有意不封装**） | 继续用 `el-*`，组内选项自行渲染 |
6804
- | `el-switch` | `ZlSwitch` | |
6805
- | `el-popconfirm` | `ZlPopconfirm` | |
6806
- | `el-empty` | `ZlEmpty` | |
6807
- | `el-avatar` | `ZlAvatar` | |
6808
- | `el-descriptions` | `ZlDescription` | |
6809
- | `el-text` | `ZlText` | |
6810
- | `el-pagination` | `ZlPagination` | |
6811
- | `el-select`（树形） | `ZlTreeSelect` | |
6812
- | `ElMessage` / `ElNotification`（提示消息） | `useGlobalMessage()` | 非组件，用 hook 取 `Message` / `Notification` 实例（§12.1.4） |
6813
- | `ElMessageBox`（确认框） | `useGlobalMessage()` | 取 `Modal`（扩展 `confirmPromise`），二次确认 + 异步操作统一在这里 |
6823
+ | Element Plus 组件 | 替换为 | 说明 |
6824
+ | ------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- |
6825
+ | `el-table`（普通 / 分页列表） | `ZlSearchTable` | 自带查询条、分页、loading（内部 `usePageableRequest` 驱动，直传 service + `ref.refresh()`） |
6826
+ | `el-table`（卡片分页列表） | `ZlCardPage` | 卡片式分页列表（同上，内置分页驱动） |
6827
+ | `el-table`（纯表格，无查询） | `ZlTable` | 普通表格展示 |
6828
+ | `el-dialog` / `el-drawer` | `ZlDrawer` | 所有弹窗统一为抽屉 |
6829
+ | `el-form` | `ZlForm` | 弹窗内新增 / 编辑 / 详情表单（schema 驱动） |
6830
+ | `el-card` | `ZlCard` | 卡片容器 |
6831
+ | `el-button`（操作栏 / 卡片内） | `ZlAction` | 操作列与卡片按钮；页面级独立按钮仍可用 `el-button` |
6832
+ | `el-tooltip`（超长省略） | `ZlAutoTooltip` | 文字溢出时自动提示 |
6833
+ | `el-icon` | `ZlIcon` | 需先注册图标集（§4.1） |
6834
+ | `el-tree` | `ZlTree` | 勾选多选 / 字段映射 / 暴露方法见 §7 › ZlTree |
6835
+ | `el-upload` | `ZlUpload` | |
6836
+ | `el-tag` | `ZlTag` | |
6837
+ | `el-tabs` | `ZlTabs` | 页签内容默认懒挂载，差异见 §15.5 |
6838
+ | `el-radio`（标签式） | `ZlRadioTag` | 仅此形态封装 |
6839
+ | `el-checkbox`（标签式） | `ZlCheckboxTag` | 仅此形态封装 |
6840
+ | `el-checkbox`（全选 / 半选） | `ZlCheckAll` | 自带半选态，可替代表头全选勾选框 |
6841
+ | `el-radio` / `el-checkbox`（普通单选框 / 复选框） | —（**有意不封装**） | 继续用 `el-*`，库内无对应物（见 §15.5） |
6842
+ | `el-radio-group` / `el-checkbox-group` | —（**有意不封装**） | 继续用 `el-*`，组内选项自行渲染 |
6843
+ | `el-switch` | `ZlSwitch` | |
6844
+ | `el-popconfirm` | `ZlPopconfirm` | |
6845
+ | `el-empty` | `ZlEmpty` | |
6846
+ | `el-avatar` | `ZlAvatar` | |
6847
+ | `el-descriptions` | `ZlDescription` | |
6848
+ | `el-text` | `ZlText` | |
6849
+ | `el-pagination` | `ZlPagination` | |
6850
+ | `el-select`（树形） | `ZlTreeSelect` | |
6851
+ | `ElMessage` / `ElNotification`（提示消息） | `useGlobalMessage()` | 非组件，用 hook 取 `Message` / `Notification` 实例（§12.1.4） |
6852
+ | `ElMessageBox`（确认框） | `useGlobalMessage()` | 取 `Modal`（扩展 `confirmPromise`），二次确认 + 异步操作统一在这里 |
6814
6853
 
6815
6854
  > 未在上表中的 `el-*` 组件，请对照 §3 组件总览的命名与用途选择对应 Zl 组件；若暂无对应实现，暂保留 `el-*`，并在本规范登记为待补充项。
6816
6855
  > 替换前请先读 **[§15.5 迁移行为差异与透传契约](#155-迁移行为差异与透传契约必读)**：哪些属性默认直接透传、哪些行为与 EP 不等价。
package/dist/components/ZlAction/List.vue.mjs CHANGED
@@ -1,13 +1,13 @@
1
- import { defineComponent as Z, computed as C, resolveComponent as s, openBlock as n, createElementBlock as c, Fragment as p, renderList as g, createBlock as r, withCtx as i, createVNode as h, mergeProps as f, withModifiers as _, createCommentVNode as a, createElementVNode as j, toDisplayString as v, renderSlot as E, normalizeProps as O, createTextVNode as z, unref as S, normalizeClass as T } from "vue";
2
- import { useZlT as D } from "@zl-ui-kit/composables";
3
- import { isPlainObject as F } from "@zl-ui-kit/utils";
4
- import w from "../ZlIcon/index.vue.mjs";
5
- import A from "../ZlIconHover/index.vue.mjs";
6
- import { usePermission as I } from "../ZlPermission/usePermission.mjs";
7
- const q = { class: "zl-action-list" }, G = {
1
+ import { defineComponent as j, computed as g, resolveComponent as s, openBlock as n, createElementBlock as c, Fragment as m, renderList as w, createBlock as r, withCtx as i, createVNode as h, mergeProps as f, withModifiers as _, createCommentVNode as u, createElementVNode as E, toDisplayString as v, renderSlot as O, normalizeProps as S, createTextVNode as z, unref as T, normalizeClass as D } from "vue";
2
+ import { useZlT as F } from "@zl-ui-kit/composables";
3
+ import { isPlainObject as I } from "@zl-ui-kit/utils";
4
+ import A from "../ZlIcon/index.vue.mjs";
5
+ import P from "../ZlIconHover/index.vue.mjs";
6
+ import { usePermission as q } from "../ZlPermission/usePermission.mjs";
7
+ const G = { class: "zl-action-list" }, H = {
8
8
  key: 2,
9
9
  class: "zl-action-list__separator"
10
- }, W = /* @__PURE__ */ Z({
10
+ }, X = /* @__PURE__ */ j({
11
11
  name: "ZlActionList",
12
12
  __name: "List",
13
13
  props: {
@@ -19,19 +19,19 @@ const q = { class: "zl-action-list" }, G = {
19
19
  separator: { type: Boolean }
20
20
  },
21
21
  emits: ["action"],
22
- setup(b, { emit: P }) {
23
- const { t: M } = D(), t = b, B = P, k = C(() => {
22
+ setup(b, { emit: M }) {
23
+ const { t: B } = F(), t = b, N = M, k = g(() => {
24
24
  if (t.iconMore === !0)
25
- return { icon: "zl:operate-color" };
26
- if (F(t.iconMore))
27
- return { icon: "zl:operate-color", ...t.iconMore };
25
+ return { icon: "zl:password-color" };
26
+ if (I(t.iconMore))
27
+ return { icon: "zl:password-color", ...t.iconMore };
28
28
  });
29
- function N(o) {
30
- return o.permission ? I(o.permission).value : !0;
29
+ function V(o) {
30
+ return o.permission ? q(o.permission).value : !0;
31
31
  }
32
- const u = C(() => {
32
+ const a = g(() => {
33
33
  const o = t.actions.filter((l) => {
34
- const d = N(l);
34
+ const d = V(l);
35
35
  return typeof l.visible == "function" ? l.visible(...t.visibleArgs, l) && d : (l.visible === void 0 || !!l.visible) && d;
36
36
  });
37
37
  return o.length <= t.listCount ? { list: o, more: [] } : {
@@ -39,69 +39,72 @@ const q = { class: "zl-action-list" }, G = {
39
39
  more: o.slice(t.listCount - 1)
40
40
  };
41
41
  });
42
- function m(o) {
43
- o.disabled || (B("action", o, ...t.actionArgs), typeof o.handler == "function" && o.handler(...t.actionArgs, o));
42
+ function p(o) {
43
+ o.disabled || (N("action", o, ...t.actionArgs), typeof o.handler == "function" && o.handler(...t.actionArgs, o));
44
+ }
45
+ function y(o) {
46
+ return typeof o.tooltip == "string" ? o.tooltip : o.label;
44
47
  }
45
48
  return (o, l) => {
46
- const d = s("el-tooltip"), y = s("el-link"), V = s("el-dropdown-item"), $ = s("el-dropdown-menu"), x = s("el-dropdown");
47
- return n(), c("div", q, [
48
- (n(!0), c(p, null, g(u.value.list, (e) => (n(), c(p, {
49
+ const d = s("el-tooltip"), C = s("el-link"), $ = s("el-dropdown-item"), x = s("el-dropdown-menu"), L = s("el-dropdown");
50
+ return n(), c("div", G, [
51
+ (n(!0), c(m, null, w(a.value.list, (e) => (n(), c(m, {
49
52
  key: e.label
50
53
  }, [
51
- e.tooltip && e.icon ? (n(), r(d, {
54
+ e.tooltip && e.icon && y(e) ? (n(), r(d, {
52
55
  key: 0,
53
- content: e.label,
56
+ content: y(e),
54
57
  placement: "top"
55
58
  }, {
56
59
  default: i(() => [
57
- h(A, f({
60
+ h(P, f({
58
61
  icon: e.icon
59
62
  }, { ref_for: !0 }, e.iconProps, {
60
- onClick: _((L) => m(e), ["stop"])
63
+ onClick: _((Z) => p(e), ["stop"])
61
64
  }), null, 16, ["icon", "onClick"])
62
65
  ]),
63
66
  _: 2
64
- }, 1032, ["content"])) : (n(), r(y, {
67
+ }, 1032, ["content"])) : (n(), r(C, {
65
68
  key: 1,
66
69
  class: "zl-action-list__action",
67
70
  type: "primary",
68
71
  underline: !1,
69
72
  disabled: e.disabled,
70
- onClick: _((L) => m(e), ["stop"])
73
+ onClick: _((Z) => p(e), ["stop"])
71
74
  }, {
72
75
  default: i(() => [
73
- e.icon ? (n(), r(w, f({
76
+ e.icon ? (n(), r(A, f({
74
77
  key: 0,
75
78
  icon: e.icon
76
- }, { ref_for: !0 }, e.iconProps), null, 16, ["icon"])) : a("", !0),
77
- j("span", null, v(e.label), 1)
79
+ }, { ref_for: !0 }, e.iconProps), null, 16, ["icon"])) : u("", !0),
80
+ E("span", null, v(e.label), 1)
78
81
  ]),
79
82
  _: 2
80
83
  }, 1032, ["disabled", "onClick"])),
81
- b.separator ? (n(), c("div", G)) : a("", !0)
84
+ b.separator ? (n(), c("div", H)) : u("", !0)
82
85
  ], 64))), 128)),
83
- u.value.more.length ? (n(), r(x, {
86
+ a.value.more.length ? (n(), r(L, {
84
87
  key: 0,
85
88
  trigger: "hover",
86
89
  placement: "bottom-end",
87
90
  class: "zl-action-list__more",
88
- onCommand: m
91
+ onCommand: p
89
92
  }, {
90
93
  dropdown: i(() => [
91
- h($, null, {
94
+ h(x, null, {
92
95
  default: i(() => [
93
- (n(!0), c(p, null, g(u.value.more, (e) => (n(), r(V, {
96
+ (n(!0), c(m, null, w(a.value.more, (e) => (n(), r($, {
94
97
  key: e.label,
95
98
  command: e,
96
99
  disabled: e.disabled,
97
100
  divided: e.divided
98
101
  }, {
99
102
  default: i(() => [
100
- e.icon ? (n(), r(w, {
103
+ e.icon ? (n(), r(A, {
101
104
  key: 0,
102
105
  icon: e.icon,
103
- class: T(e.iconClass)
104
- }, null, 8, ["icon", "class"])) : a("", !0),
106
+ class: D(e.iconClass)
107
+ }, null, 8, ["icon", "class"])) : u("", !0),
105
108
  z(" " + v(e.label), 1)
106
109
  ]),
107
110
  _: 2
@@ -111,8 +114,8 @@ const q = { class: "zl-action-list" }, G = {
111
114
  })
112
115
  ]),
113
116
  default: i(() => [
114
- E(o.$slots, "more", {}, () => [
115
- k.value ? (n(), r(A, O(f({ key: 0 }, k.value)), null, 16)) : (n(), r(y, {
117
+ O(o.$slots, "more", {}, () => [
118
+ k.value ? (n(), r(P, S(f({ key: 0 }, k.value)), null, 16)) : (n(), r(C, {
116
119
  key: 1,
117
120
  class: "zl-action-list__more-icon",
118
121
  type: "primary",
@@ -121,19 +124,19 @@ const q = { class: "zl-action-list" }, G = {
121
124
  }, ["stop"]))
122
125
  }, {
123
126
  default: i(() => [
124
- z(v(S(M)("zl.action.more", "更多")), 1)
127
+ z(v(T(B)("zl.action.more", "更多")), 1)
125
128
  ]),
126
129
  _: 1
127
130
  }))
128
131
  ])
129
132
  ]),
130
133
  _: 3
131
- })) : a("", !0)
134
+ })) : u("", !0)
132
135
  ]);
133
136
  };
134
137
  }
135
138
  });
136
139
  export {
137
- W as default
140
+ X as default
138
141
  };
139
142
  //# sourceMappingURL=List.vue.mjs.map
package/dist/components/ZlAction/index.vue.d.ts CHANGED
@@ -1,3 +1,9 @@
1
- declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
1
+ type __VLS_Props = {
2
+ /** 直接展示的操作数，超出收入"更多"下拉，默认 2；透传给 ZlActionList */
3
+ listCount?: number;
4
+ };
5
+ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
6
+ listCount: number;
7
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
2
8
  export default _default;
3
9
  //# sourceMappingURL=index.vue.d.ts.map
package/dist/components/ZlAction/index.vue.mjs CHANGED
@@ -1,15 +1,19 @@
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";
1
+ import { defineComponent as r, resolveComponent as c, openBlock as s, createBlock as i, normalizeProps as p, guardReactiveProps as a, withCtx as l, createVNode as m } from "vue";
2
+ import _ from "./List.vue.mjs";
3
3
  import './List.css';/* empty css */
4
4
  const h = /* @__PURE__ */ r({
5
5
  name: "ZlAction",
6
6
  __name: "index",
7
- setup(_) {
8
- return (o, l) => {
9
- const e = n("zl-icon-hover");
10
- return t(), c(s, i(a({ ...o.$attrs, listCount: 2 })), {
11
- more: m(() => [
12
- p(e, { icon: "zl:password-color" })
7
+ props: {
8
+ listCount: { default: 2 }
9
+ },
10
+ setup(o) {
11
+ const e = o;
12
+ return (t, u) => {
13
+ const n = c("zl-icon-hover");
14
+ return s(), i(_, p(a({ ...t.$attrs, listCount: e.listCount })), {
15
+ more: l(() => [
16
+ m(n, { icon: "zl:password-color" })
13
17
  ]),
14
18
  _: 1
15
19
  }, 16);
package/dist/components/ZlAction/types.d.ts CHANGED
@@ -10,8 +10,11 @@ export interface ActionItem {
10
10
  iconProps?: Record<string, any>;
11
11
  /** 图标自定义类名 */
12
12
  iconClass?: string;
13
- /** 是否用 tooltip 包住文案（文字过长时） */
14
- tooltip?: boolean;
13
+ /**
14
+ * 提示词：`true` 用 `label` 作为提示；传字符串则直接作为提示词（无需同时配置 `label`）。
15
+ * 仅对纯图标操作项生效（配置了 `icon`）。
16
+ */
17
+ tooltip?: boolean | string;
15
18
  /** 禁用（点击无响应） */
16
19
  disabled?: boolean;
17
20
  /** 与下一项之间显示分割线 */
package/dist/components/ZlDescription/index.css CHANGED
@@ -1 +1 @@
1
- .zl-description{display:inline-flex;gap:0 16px;font-size:12px;line-height:20px;white-space:nowrap;flex-wrap:wrap}.zl-description-type-secondary{padding:0 8px;background-color:var(--zl-fill-2, #eff4f9);border-radius:var(--zl-radius-small, 2px)}.zl-description-type-secondary .zl-description-item:not(:last-child):after{content:"";display:inline-block;height:12px;width:1px;background-color:var(--zl-border-2, #e3e9ef);position:absolute;top:4px;right:-8px}.zl-description-item{position:relative;display:inline-flex;align-items:center;gap:2px}.zl-description-item-icon{color:var(--zl-text-2, #4d5e7d)}.zl-description-item-label{color:var(--zl-text-3, #79879c);margin-right:10px}.zl-description-item-value{color:var(--zl-text-1, #242e43)}.zl-description .zl-tag:not(.zl-tag-fill){padding:0}
1
+ @charset "UTF-8";.zl-description{display:inline-flex;gap:0 16px;font-size:12px;line-height:20px;white-space:nowrap;flex-wrap:wrap;max-width:100%}.zl-description-type-secondary{padding:0 8px;background-color:var(--zl-fill-2, #eff4f9);border-radius:var(--zl-radius-small, 2px)}.zl-description-type-secondary .zl-description-item:not(:last-child):after{content:"";display:inline-block;height:12px;width:1px;background-color:var(--zl-border-2, #e3e9ef);position:absolute;top:4px;right:-8px}.zl-description-item{position:relative;display:inline-flex;align-items:center;gap:2px;min-width:0;max-width:100%}.zl-description-item-icon{color:var(--zl-text-2, #4d5e7d)}.zl-description-item-label{color:var(--zl-text-3, #79879c);margin-right:10px;flex-shrink:0}.zl-description-item-value{color:var(--zl-text-1, #242e43);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zl-description .zl-tag:not(.zl-tag-fill){padding:0}
package/dist/components/ZlDescription/index.vue.mjs CHANGED
@@ -1,52 +1,56 @@
1
- import { defineComponent as g, computed as h, defineAsyncComponent as T, resolveComponent as b, openBlock as n, createElementBlock as r, normalizeClass as B, Fragment as m, renderList as D, createBlock as u, createCommentVNode as E, createElementVNode as y, toDisplayString as f, unref as N, mergeProps as V, renderSlot as Z, createTextVNode as F } from "vue";
1
+ import { defineComponent as C, computed as h, defineAsyncComponent as T, resolveComponent as g, openBlock as n, createElementBlock as a, normalizeClass as b, Fragment as B, renderList as D, createBlock as d, createCommentVNode as E, createElementVNode as u, toDisplayString as y, unref as N, mergeProps as V, renderSlot as Z, withCtx as A, createTextVNode as F } from "vue";
2
2
  import { useZlT as S } from "@zl-ui-kit/composables";
3
- import { isNumber as A } from "@zl-ui-kit/utils";
4
- const I = { class: "zl-description-item-label" }, K = { class: "zl-description-item-value" }, q = /* @__PURE__ */ g({
3
+ import { isNumber as w } from "@zl-ui-kit/utils";
4
+ import I from "../ZlAutoTooltip/index.vue.mjs";
5
+ const K = { class: "zl-description-item-label" }, L = { class: "zl-description-item-value" }, H = /* @__PURE__ */ C({
5
6
  name: "ZlDescription",
6
7
  __name: "index",
7
8
  props: {
8
9
  items: {},
9
10
  data: { default: () => ({}) },
10
- emptyChecker: { type: Function, default: (s) => !s && !A(s) },
11
+ emptyChecker: { type: Function, default: (s) => !s && !w(s) },
11
12
  emptyText: {},
12
13
  secondary: { type: Boolean }
13
14
  },
14
15
  setup(s) {
15
- const { t: k } = S(), t = s, v = h(() => {
16
- const c = [], d = t.emptyText ?? k("zl.description.empty", "暂无");
16
+ const { t: f } = S(), t = s, k = h(() => {
17
+ const c = [], p = t.emptyText ?? f("zl.description.empty", "暂无");
17
18
  for (const o of t.items) {
18
- const { visible: e, key: l, getValue: p, dict: a, ...z } = o, i = typeof p == "function" ? p(t.data, o.key, o) : t.data[o.key], x = t.emptyChecker(i, l, t.data) ? d : i;
19
- if (e === !1 || typeof e == "function" && !e(i, l, t.data))
19
+ const { visible: e, key: r, getValue: m, dict: l, ..._ } = o, i = typeof m == "function" ? m(t.data, o.key, o) : t.data[o.key], x = t.emptyChecker(i, r, t.data) ? p : i;
20
+ if (e === !1 || typeof e == "function" && !e(i, r, t.data))
20
21
  continue;
21
- const C = typeof a == "string" ? { dictKey: a } : a;
22
- c.push({ ...z, key: l, value: i, text: x, dict: C });
22
+ const z = typeof l == "string" ? { dictKey: l } : l;
23
+ c.push({ ..._, key: r, value: i, text: x, dict: z });
23
24
  }
24
25
  return c;
25
- }), _ = T(() => import("../ZlDictTag/index2.vue.mjs"));
26
- return (c, d) => {
27
- const o = b("zl-icon");
28
- return n(), r("div", {
29
- class: B(["zl-description", { "zl-description-type-secondary": s.secondary }])
26
+ }), v = T(() => import("../ZlDictTag/index2.vue.mjs"));
27
+ return (c, p) => {
28
+ const o = g("zl-icon");
29
+ return n(), a("div", {
30
+ class: b(["zl-description", { "zl-description-type-secondary": s.secondary }])
30
31
  }, [
31
- (n(!0), r(m, null, D(v.value, (e) => (n(), r("div", {
32
+ (n(!0), a(B, null, D(k.value, (e) => (n(), a("div", {
32
33
  key: e.key,
33
34
  class: "zl-description-item"
34
35
  }, [
35
- e.icon ? (n(), u(o, {
36
+ e.icon ? (n(), d(o, {
36
37
  key: 0,
37
38
  class: "zl-description-item-icon",
38
39
  icon: e.icon
39
40
  }, null, 8, ["icon"])) : E("", !0),
40
- y("div", I, f(e.label), 1),
41
- y("div", K, [
42
- e.dict ? (n(), u(N(_), V({
41
+ u("div", K, y(e.label), 1),
42
+ u("div", L, [
43
+ e.dict ? (n(), d(N(v), V({
43
44
  key: 0,
44
45
  ref_for: !0
45
46
  }, e.dict, {
46
47
  value: e.text
47
- }), null, 16, ["value"])) : e.slot ? Z(c.$slots, e.key, {}, void 0, void 0, 1) : (n(), r(m, { key: 2 }, [
48
- F(f(e.text), 1)
49
- ], 64))
48
+ }), null, 16, ["value"])) : e.slot ? Z(c.$slots, e.key, {}, void 0, void 0, 1) : (n(), d(I, { key: 2 }, {
49
+ default: A(() => [
50
+ F(y(e.text), 1)
51
+ ]),
52
+ _: 2
53
+ }, 1024))
50
54
  ])
51
55
  ]))), 128))
52
56
  ], 2);
@@ -54,6 +58,6 @@ const I = { class: "zl-description-item-label" }, K = { class: "zl-description-i
54
58
  }
55
59
  });
56
60
  export {
57
- q as default
61
+ H as default
58
62
  };
59
63
  //# sourceMappingURL=index.vue.mjs.map
package/dist/components/ZlDictTag/index.vue.d.ts CHANGED
@@ -35,8 +35,14 @@ type __VLS_Props = {
35
35
  * @deprecated 用 `iconVisible`：全库显隐统一用 visible 语义，且不要用反向命名
36
36
  */
37
37
  hideIcon?: boolean;
38
+ /** 是否使用填充背景（配合字典项 `color`/`type` 显示浅色底色，如 `--zl-<色>-1`），透传给内部 ZlTag */
39
+ fill?: boolean;
40
+ /** 是否使用全圆角样式，透传给内部 ZlTag */
41
+ rounded?: boolean;
38
42
  };
39
43
  declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
44
+ fill: boolean;
45
+ rounded: boolean;
40
46
  variant: "badge" | "ribbon";
41
47
  corner: boolean | "top-left" | "top-right" | "bottom-left" | "bottom-right";
42
48
  iconVisible: boolean;
package/dist/components/ZlDictTag/index.vue.mjs CHANGED
@@ -1,10 +1,10 @@
1
- import { defineComponent as g, watch as h, computed as n, openBlock as l, createBlock as s, mergeProps as u, withCtx as d, createTextVNode as v, toDisplayString as f } from "vue";
2
- import { useDict as B, useDictStore as _ } from "@zl-ui-kit/composables";
3
- import b from "../ZlTag/ZlCornerTag.vue.mjs";
1
+ import { defineComponent as g, watch as B, computed as n, openBlock as c, createBlock as d, mergeProps as u, withCtx as s, createTextVNode as f, toDisplayString as v } from "vue";
2
+ import { useDict as h, useDictStore as b } from "@zl-ui-kit/composables";
3
+ import S from "../ZlTag/ZlCornerTag.vue.mjs";
4
4
  import '../ZlTag/index.css';import '../ZlTag/ZlCornerTag.css';/* empty css */
5
- import S from "../ZlTag/index.vue.mjs";
5
+ import k from "../ZlTag/index.vue.mjs";
6
6
  /* empty css */
7
- const I = /* @__PURE__ */ g({
7
+ const K = /* @__PURE__ */ g({
8
8
  name: "ZlDictTag",
9
9
  __name: "index",
10
10
  props: {
@@ -15,56 +15,61 @@ const I = /* @__PURE__ */ g({
15
15
  value: {},
16
16
  simple: { type: Boolean },
17
17
  iconVisible: { type: Boolean, default: void 0 },
18
- hideIcon: { type: Boolean, default: void 0 }
18
+ hideIcon: { type: Boolean, default: void 0 },
19
+ fill: { type: Boolean, default: !1 },
20
+ rounded: { type: Boolean, default: !1 }
19
21
  },
20
- setup(i) {
21
- const t = i, p = B(t.dictKey, { data: t.dict });
22
- h(
22
+ setup(a) {
23
+ const t = a, p = h(t.dictKey, { data: t.dict });
24
+ B(
23
25
  () => t.dict,
24
26
  (e) => {
25
27
  if (e?.length) {
26
- const { dictStore: o } = _();
28
+ const { dictStore: o } = b();
27
29
  o.value = { ...o.value, [t.dictKey]: e };
28
30
  }
29
31
  },
30
32
  { deep: !1 }
31
33
  );
32
- const a = n(() => p.value.find((e) => e.value === t.value)), m = { info: "gray" };
34
+ const i = n(() => p.value.find((e) => e.value === t.value)), m = { info: "gray" };
33
35
  function y(e) {
34
36
  const o = e.color ?? e.type;
35
37
  if (o)
36
38
  return m[o] ?? o;
37
39
  }
38
- const r = n(() => {
39
- const e = a.value;
40
+ const l = n(() => {
41
+ const e = i.value;
40
42
  return e ? {
41
43
  color: t.simple ? void 0 : y(e),
42
44
  icon: t.iconVisible ?? !t.hideIcon ? e.icon : void 0
43
45
  } : {};
44
- }), c = n(() => t.corner === !0 ? "top-right" : t.corner);
45
- return (e, o) => c.value ? (l(), s(b, u({
46
+ }), r = n(() => t.corner === !0 ? "top-right" : t.corner);
47
+ return (e, o) => r.value ? (c(), d(S, u({
46
48
  key: 0,
47
49
  class: "zl-dict-corner-tag"
48
- }, { ...r.value, ...e.$attrs }, {
49
- position: c.value,
50
- variant: i.variant
50
+ }, { ...l.value, ...e.$attrs }, {
51
+ position: r.value,
52
+ variant: a.variant
51
53
  }), {
52
- default: d(() => [
53
- v(f(a.value?.label || i.value), 1)
54
+ default: s(() => [
55
+ f(v(i.value?.label || a.value), 1)
54
56
  ]),
55
57
  _: 1
56
- }, 16, ["position", "variant"])) : (l(), s(S, u({
58
+ }, 16, ["position", "variant"])) : (c(), d(k, u({
57
59
  key: 1,
58
60
  class: "zl-dict-tag"
59
- }, { ...r.value, ...e.$attrs }), {
60
- default: d(() => [
61
- v(f(a.value?.label || i.value), 1)
61
+ }, { ...l.value, ...e.$attrs }, {
62
+ fill: a.fill,
63
+ rounded: a.rounded
64
+ }), {
65
+ default: s(() => [
66
+ f(v(i.value?.label || a.value), 1)
62
67
  ]),
63
68
  _: 1
64
- }, 16));
69
+ }, 16, ["fill", "rounded"]));
65
70
  }
66
71
  });
67
72
  export {
68
- I as default
73
+ K as default
69
74
  };
70
75
  //# sourceMappingURL=index.vue.mjs.map
package/dist/components/ZlLayoutSwitch/index.css CHANGED
@@ -1 +1 @@
1
- .zl-layout-switch .el-radio-button[data-v-13a0ea85]{line-height:1;font-size:14px;padding:9px}
1
+ .zl-layout-switch[data-v-5a70314a] .el-radio-button__inner{display:inline-flex;align-items:center;gap:4px;line-height:1;padding:8px 12px;font-size:14px}.zl-layout-switch__text[data-v-5a70314a]{font-size:12px;line-height:1}
package/dist/components/ZlLayoutSwitch/index.vue.d.ts CHANGED
@@ -1,6 +1,14 @@
1
1
  type __VLS_Props = {
2
2
  /** 已废弃，请用 `modelValue`；仅在未双向绑定时作为当前布局 */
3
3
  value?: 'grid' | 'table';
4
+ /** 网格按钮文案：缺省走 i18n（卡片），传空字符串则只显示图标 */
5
+ gridText?: string;
6
+ /** 表格按钮文案：缺省走 i18n（列表），传空字符串则只显示图标 */
7
+ tableText?: string;
8
+ /** 网格按钮图标（`zl:` 图标名，不带前缀）：缺省 `table` */
9
+ gridIcon?: string;
10
+ /** 列表按钮图标（`zl:` 图标名，不带前缀）：缺省 `list-color` */
11
+ tableIcon?: string;
4
12
  };
5
13
  type __VLS_PublicProps = {
6
14
  'modelValue'?: 'grid' | 'table';
@@ -11,6 +19,8 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
11
19
  "onUpdate:modelValue"?: ((value: "table" | "grid") => any) | undefined;
12
20
  }>, {
13
21
  value: "grid" | "table";
22
+ gridIcon: string;
23
+ tableIcon: string;
14
24
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
15
25
  export default _default;
16
26
  //# sourceMappingURL=index.vue.d.ts.map
package/dist/components/ZlLayoutSwitch/index.vue.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import o from "./index2.vue.mjs";
2
2
  import './index.css';/* empty css */
3
3
  import t from "../../_virtual/_plugin-vue_export-helper.mjs";
4
- const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-13a0ea85"]]);
4
+ const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-5a70314a"]]);
5
5
  export {
6
6
  p as default
7
7
  };
package/dist/components/ZlLayoutSwitch/index2.vue.mjs CHANGED
@@ -1,38 +1,46 @@
1
- import { defineComponent as s, computed as v, useModel as p, resolveComponent as n, openBlock as l, createBlock as r, withCtx as d, createElementBlock as _, Fragment as f, renderList as b, createVNode as g, mergeModels as w } from "vue";
2
- import { useZlT as y } from "@zl-ui-kit/composables";
3
- import V from "../ZlIcon/index.vue.mjs";
4
- const B = /* @__PURE__ */ s({
1
+ import { defineComponent as v, computed as _, useModel as p, resolveComponent as r, openBlock as t, createBlock as d, withCtx as c, createElementBlock as i, Fragment as f, renderList as g, createVNode as x, toDisplayString as y, createCommentVNode as h, mergeModels as w } from "vue";
2
+ import { useZlT as V } from "@zl-ui-kit/composables";
3
+ import k from "../ZlIcon/index.vue.mjs";
4
+ const z = {
5
+ key: 0,
6
+ class: "zl-layout-switch__text"
7
+ }, B = /* @__PURE__ */ v({
5
8
  name: "ZlLayoutSwitch",
6
9
  __name: "index",
7
10
  props: /* @__PURE__ */ w({
8
- value: { default: "grid" }
11
+ value: { default: "grid" },
12
+ gridText: {},
13
+ tableText: {},
14
+ gridIcon: { default: "table" },
15
+ tableIcon: { default: "list-color" }
9
16
  }, {
10
17
  modelValue: {},
11
18
  modelModifiers: {}
12
19
  }),
13
20
  emits: ["update:modelValue"],
14
21
  setup(o) {
15
- const { t } = y(), i = v(() => [
16
- { label: t("zl.layoutSwitch.grid", "网格"), value: "grid", icon: "menu-card" },
17
- { label: t("zl.layoutSwitch.table", "表格"), value: "table", icon: "menu-list" }
18
- ]), a = p(o, "modelValue");
19
- return (h, u) => {
20
- const m = n("el-radio-button"), c = n("el-radio-group");
21
- return l(), r(c, {
22
+ const l = o, { t: a } = V(), s = _(() => [
23
+ { label: l.gridText ?? a("zl.layoutSwitch.grid", "卡片"), value: "grid", icon: l.gridIcon },
24
+ { label: l.tableText ?? a("zl.layoutSwitch.table", "列表"), value: "table", icon: l.tableIcon }
25
+ ]), u = p(o, "modelValue");
26
+ return (I, n) => {
27
+ const m = r("el-radio-button"), b = r("el-radio-group");
28
+ return t(), d(b, {
22
29
  class: "zl-layout-switch",
23
- "model-value": a.value ?? o.value,
24
- "onUpdate:modelValue": u[0] || (u[0] = (e) => a.value = e)
30
+ "model-value": u.value ?? o.value,
31
+ "onUpdate:modelValue": n[0] || (n[0] = (e) => u.value = e)
25
32
  }, {
26
- default: d(() => [
27
- (l(!0), _(f, null, b(i.value, (e) => (l(), r(m, {
33
+ default: c(() => [
34
+ (t(!0), i(f, null, g(s.value, (e) => (t(), d(m, {
28
35
  key: e.value,
29
36
  value: e.value,
30
37
  title: e.label
31
38
  }, {
32
- default: d(() => [
33
- g(V, {
39
+ default: c(() => [
40
+ x(k, {
34
41
  icon: `zl:${e.icon}`
35
- }, null, 8, ["icon"])
42
+ }, null, 8, ["icon"]),
43
+ e.label ? (t(), i("span", z, y(e.label), 1)) : h("", !0)
36
44
  ]),
37
45
  _: 2
38
46
  }, 1032, ["value", "title"]))), 128))
package/dist/locales/en.mjs CHANGED
@@ -8,8 +8,8 @@ const e = {
8
8
  "zl.dialog.close": "Close",
9
9
  "zl.popconfirm.confirm": "Confirm",
10
10
  "zl.popconfirm.cancel": "Cancel",
11
- "zl.layoutSwitch.grid": "Grid",
12
- "zl.layoutSwitch.table": "Table",
11
+ "zl.layoutSwitch.grid": "Card",
12
+ "zl.layoutSwitch.table": "List",
13
13
  "zl.upload.accept": "Only {accept} files are supported",
14
14
  "zl.upload.limit": "Up to {limit} files",
15
15
  "zl.upload.maxSize": "File size must not exceed {maxSize}MB",
package/dist/locales/zh-cn.mjs CHANGED
@@ -8,8 +8,8 @@ const l = {
8
8
  "zl.dialog.close": "关闭",
9
9
  "zl.popconfirm.confirm": "确定",
10
10
  "zl.popconfirm.cancel": "取消",
11
- "zl.layoutSwitch.grid": "网格",
12
- "zl.layoutSwitch.table": "表格",
11
+ "zl.layoutSwitch.grid": "卡片",
12
+ "zl.layoutSwitch.table": "列表",
13
13
  "zl.upload.accept": "仅支持{accept}格式的文件",
14
14
  "zl.upload.limit": "最多可上传{limit}个",
15
15
  "zl.upload.maxSize": "大小不超过{maxSize}MB",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zl-ui-kit/components",
3
- "version": "0.18.3",
3
+ "version": "0.18.5",
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.18.3",
43
- "@zl-ui-kit/utils": "0.18.3",
44
- "@zl-ui-kit/icons": "0.18.3"
42
+ "@zl-ui-kit/composables": "0.18.5",
43
+ "@zl-ui-kit/icons": "0.18.5",
44
+ "@zl-ui-kit/utils": "0.18.5"
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/eslint-config": "1.0.0",
102
- "@zl-ui-kit/theme": "0.18.3",
101
+ "@jichuang/tsconfig": "1.0.0",
103
102
  "@jichuang/vite-config": "1.0.0",
104
- "@jichuang/tsconfig": "1.0.0"
103
+ "@zl-ui-kit/theme": "0.18.5",
104
+ "@jichuang/eslint-config": "1.0.0"
105
105
  },
106
106
  "repository": {
107
107
  "type": "git",