@zl-ui-kit/components 0.18.3 → 0.18.4
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 +71 -40
- package/dist/components/ZlDescription/index.css +1 -1
- package/dist/components/ZlDescription/index.vue.mjs +28 -24
- package/dist/components/ZlLayoutSwitch/index.css +1 -1
- package/dist/components/ZlLayoutSwitch/index.vue.d.ts +10 -0
- package/dist/components/ZlLayoutSwitch/index.vue.mjs +1 -1
- package/dist/components/ZlLayoutSwitch/index2.vue.mjs +27 -19
- package/dist/locales/en.mjs +2 -2
- package/dist/locales/zh-cn.mjs +2 -2
- package/package.json +6 -6
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`
|
|
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">
|
|
@@ -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) | 主入口 |
|
|
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 |
|
|
@@ -4456,7 +4483,7 @@ import { ZlDescription } from '@zl-ui-kit/components'
|
|
|
4456
4483
|
</script>
|
|
4457
4484
|
|
|
4458
4485
|
<template>
|
|
4459
|
-
<ZlDescription :items="items" :data="
|
|
4486
|
+
<ZlDescription :items="items" :data="data" secondary />
|
|
4460
4487
|
</template>
|
|
4461
4488
|
```
|
|
4462
4489
|
|
|
@@ -5261,7 +5288,7 @@ import { ZlCornerTag } from '@zl-ui-kit/components'
|
|
|
5261
5288
|
|
|
5262
5289
|
**简介**：布局切换：在网格视图（grid）与表格视图（table）之间切换
|
|
5263
5290
|
|
|
5264
|
-
**接口概览**：
|
|
5291
|
+
**接口概览**：6 props · 1 事件
|
|
5265
5292
|
|
|
5266
5293
|
**用法示例**
|
|
5267
5294
|
|
|
@@ -5277,10 +5304,14 @@ import { ZlLayoutSwitch } from '@zl-ui-kit/components'
|
|
|
5277
5304
|
|
|
5278
5305
|
**props**
|
|
5279
5306
|
|
|
5280
|
-
| 属性 | 类型 | 默认值
|
|
5281
|
-
| ------------ | ------------------- |
|
|
5282
|
-
| `modelValue` | `'grid' \| 'table'` | —
|
|
5283
|
-
| `value` | `'grid' \| 'table'` | `'grid'`
|
|
5307
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5308
|
+
| ------------ | ------------------- | -------------- | ---- | ------------------------- | --------------------------------------------------------- |
|
|
5309
|
+
| `modelValue` | `'grid' \| 'table'` | — | 否 | `v-model="value"` | 当前布局，`v-model` 绑定；未绑定时回落 `value` |
|
|
5310
|
+
| `value` | `'grid' \| 'table'` | `'grid'` | 否 | `value="grid"` | 已废弃，请用 `modelValue`；仅在未双向绑定时作为当前布局 |
|
|
5311
|
+
| `gridText` | `string` | — | 否 | `grid-text="grid-text"` | 网格按钮文案：缺省走 i18n（卡片），传空字符串则只显示图标 |
|
|
5312
|
+
| `tableText` | `string` | — | 否 | `table-text="table-text"` | 表格按钮文案：缺省走 i18n（列表），传空字符串则只显示图标 |
|
|
5313
|
+
| `gridIcon` | `string` | `'table'` | 否 | `grid-icon="grid-icon"` | 网格按钮图标（`zl:` 图标名，不带前缀）：缺省 `table` |
|
|
5314
|
+
| `tableIcon` | `string` | `'list-color'` | 否 | `table-icon="table-icon"` | 列表按钮图标（`zl:` 图标名，不带前缀）：缺省 `list-color` |
|
|
5284
5315
|
|
|
5285
5316
|
**事件（emits）**
|
|
5286
5317
|
|
|
@@ -6764,8 +6795,8 @@ ZlGrid 子项 schema
|
|
|
6764
6795
|
### 15.1 核心替换规则
|
|
6765
6796
|
|
|
6766
6797
|
1. **接口请求统一封装**：所有接口调用使用 `useRequest`（普通接口）与 `usePageableRequest`（列表 / 分页接口）替换裸 `axios` / `fetch`。详见 §6。
|
|
6767
|
-
2. **普通（分页）列表页**：用 `ZlSearchTable` 替换 `el-table
|
|
6768
|
-
3. **卡片（分页）列表页**：用 `ZlCardPage` 替换 `el-table
|
|
6798
|
+
2. **普通（分页）列表页**：用 `ZlSearchTable` 替换 `el-table`。**组件内部已内置 `usePageableRequest` 驱动**（loading / 分页 / 查询参数合并 / 刷新），`request` 直接传纯分页 service 即可，**不要在外层再包一层分页请求**；增删改成功后用 `ref.refresh()` 原地重查。
|
|
6799
|
+
3. **卡片（分页）列表页**：用 `ZlCardPage` 替换 `el-table`。同样内置 `usePageableRequest`，用法与 `ZlSearchTable` 完全一致——直传 service + `ref.refresh()`，不要重复包装。
|
|
6769
6800
|
4. **弹窗**：所有弹窗（`el-dialog` 等）**默认统一用 `ZlDrawer` 替换**——仅当明确需要居中 / 模态对话框形态时才用 `ZlDialog`；**未明确指定用 `ZlDialog` 的场景，一律默认替换成 `ZlDrawer`**。按弹窗内展示内容的多少合理排版（表单用 `ZlForm`、详情用描述列表等）。
|
|
6770
6801
|
5. **表单**：所有新增、编辑、详情弹窗里的表单项（`el-form`）都用 `ZlForm` 替换。
|
|
6771
6802
|
6. **卡片**：卡片列表的卡片组件用 `ZlCard` 替换。
|
|
@@ -6781,36 +6812,36 @@ ZlGrid 子项 schema
|
|
|
6781
6812
|
|
|
6782
6813
|
### 15.2 常用 el-* → Zl-* 对照表（持续补充）
|
|
6783
6814
|
|
|
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`），二次确认 + 异步操作统一在这里
|
|
6815
|
+
| Element Plus 组件 | 替换为 | 说明 |
|
|
6816
|
+
| ------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- |
|
|
6817
|
+
| `el-table`（普通 / 分页列表） | `ZlSearchTable` | 自带查询条、分页、loading（内部 `usePageableRequest` 驱动，直传 service + `ref.refresh()`） |
|
|
6818
|
+
| `el-table`（卡片分页列表） | `ZlCardPage` | 卡片式分页列表（同上，内置分页驱动） |
|
|
6819
|
+
| `el-table`（纯表格，无查询） | `ZlTable` | 普通表格展示 |
|
|
6820
|
+
| `el-dialog` / `el-drawer` | `ZlDrawer` | 所有弹窗统一为抽屉 |
|
|
6821
|
+
| `el-form` | `ZlForm` | 弹窗内新增 / 编辑 / 详情表单（schema 驱动） |
|
|
6822
|
+
| `el-card` | `ZlCard` | 卡片容器 |
|
|
6823
|
+
| `el-button`（操作栏 / 卡片内） | `ZlAction` | 操作列与卡片按钮；页面级独立按钮仍可用 `el-button` |
|
|
6824
|
+
| `el-tooltip`（超长省略） | `ZlAutoTooltip` | 文字溢出时自动提示 |
|
|
6825
|
+
| `el-icon` | `ZlIcon` | 需先注册图标集（§4.1） |
|
|
6826
|
+
| `el-tree` | `ZlTree` | 勾选多选 / 字段映射 / 暴露方法见 §7 › ZlTree |
|
|
6827
|
+
| `el-upload` | `ZlUpload` | |
|
|
6828
|
+
| `el-tag` | `ZlTag` | |
|
|
6829
|
+
| `el-tabs` | `ZlTabs` | 页签内容默认懒挂载，差异见 §15.5 |
|
|
6830
|
+
| `el-radio`（标签式） | `ZlRadioTag` | 仅此形态封装 |
|
|
6831
|
+
| `el-checkbox`（标签式） | `ZlCheckboxTag` | 仅此形态封装 |
|
|
6832
|
+
| `el-checkbox`（全选 / 半选） | `ZlCheckAll` | 自带半选态，可替代表头全选勾选框 |
|
|
6833
|
+
| `el-radio` / `el-checkbox`（普通单选框 / 复选框） | —（**有意不封装**） | 继续用 `el-*`，库内无对应物（见 §15.5） |
|
|
6834
|
+
| `el-radio-group` / `el-checkbox-group` | —（**有意不封装**） | 继续用 `el-*`，组内选项自行渲染 |
|
|
6835
|
+
| `el-switch` | `ZlSwitch` | |
|
|
6836
|
+
| `el-popconfirm` | `ZlPopconfirm` | |
|
|
6837
|
+
| `el-empty` | `ZlEmpty` | |
|
|
6838
|
+
| `el-avatar` | `ZlAvatar` | |
|
|
6839
|
+
| `el-descriptions` | `ZlDescription` | |
|
|
6840
|
+
| `el-text` | `ZlText` | |
|
|
6841
|
+
| `el-pagination` | `ZlPagination` | |
|
|
6842
|
+
| `el-select`（树形） | `ZlTreeSelect` | |
|
|
6843
|
+
| `ElMessage` / `ElNotification`（提示消息） | `useGlobalMessage()` | 非组件，用 hook 取 `Message` / `Notification` 实例（§12.1.4） |
|
|
6844
|
+
| `ElMessageBox`（确认框） | `useGlobalMessage()` | 取 `Modal`（扩展 `confirmPromise`），二次确认 + 异步操作统一在这里 |
|
|
6814
6845
|
|
|
6815
6846
|
> 未在上表中的 `el-*` 组件，请对照 §3 组件总览的命名与用途选择对应 Zl 组件；若暂无对应实现，暂保留 `el-*`，并在本规范登记为待补充项。
|
|
6816
6847
|
> 替换前请先读 **[§15.5 迁移行为差异与透传契约](#155-迁移行为差异与透传契约必读)**：哪些属性默认直接透传、哪些行为与 EP 不等价。
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
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}
|
|
@@ -1,52 +1,56 @@
|
|
|
1
|
-
import { defineComponent as
|
|
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
|
|
4
|
-
|
|
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 && !
|
|
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:
|
|
16
|
-
const c = [],
|
|
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:
|
|
19
|
-
if (e === !1 || typeof e == "function" && !e(i,
|
|
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
|
|
22
|
-
c.push({ ...
|
|
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
|
-
}),
|
|
26
|
-
return (c,
|
|
27
|
-
const o =
|
|
28
|
-
return n(),
|
|
29
|
-
class:
|
|
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),
|
|
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(),
|
|
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
|
-
|
|
41
|
-
|
|
42
|
-
e.dict ? (n(),
|
|
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(),
|
|
48
|
-
|
|
49
|
-
|
|
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
|
-
|
|
61
|
+
H as default
|
|
58
62
|
};
|
|
59
63
|
//# sourceMappingURL=index.vue.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-layout-switch .el-radio-
|
|
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}
|
|
@@ -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
|
|
@@ -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-
|
|
4
|
+
const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-5a70314a"]]);
|
|
5
5
|
export {
|
|
6
6
|
p as default
|
|
7
7
|
};
|
|
@@ -1,38 +1,46 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { useZlT as
|
|
3
|
-
import
|
|
4
|
-
const
|
|
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 } =
|
|
16
|
-
{ label:
|
|
17
|
-
{ label:
|
|
18
|
-
]),
|
|
19
|
-
return (
|
|
20
|
-
const m =
|
|
21
|
-
return
|
|
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":
|
|
24
|
-
"onUpdate:modelValue":
|
|
30
|
+
"model-value": u.value ?? o.value,
|
|
31
|
+
"onUpdate:modelValue": n[0] || (n[0] = (e) => u.value = e)
|
|
25
32
|
}, {
|
|
26
|
-
default:
|
|
27
|
-
(
|
|
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:
|
|
33
|
-
|
|
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": "
|
|
12
|
-
"zl.layoutSwitch.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
|
+
"version": "0.18.4",
|
|
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.
|
|
43
|
-
"@zl-ui-kit/
|
|
44
|
-
"@zl-ui-kit/
|
|
42
|
+
"@zl-ui-kit/composables": "0.18.4",
|
|
43
|
+
"@zl-ui-kit/icons": "0.18.4",
|
|
44
|
+
"@zl-ui-kit/utils": "0.18.4"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@vueuse/core": "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
|
|
@@ -99,9 +99,9 @@
|
|
|
99
99
|
"@vue-office/pptx": "1.0.1",
|
|
100
100
|
"echarts": "^5.6.0",
|
|
101
101
|
"@jichuang/eslint-config": "1.0.0",
|
|
102
|
-
"@
|
|
102
|
+
"@jichuang/tsconfig": "1.0.0",
|
|
103
103
|
"@jichuang/vite-config": "1.0.0",
|
|
104
|
-
"@
|
|
104
|
+
"@zl-ui-kit/theme": "0.18.4"
|
|
105
105
|
},
|
|
106
106
|
"repository": {
|
|
107
107
|
"type": "git",
|