@zl-ui-kit/components 0.17.1 → 0.18.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +156 -41
- package/dist/components/ZlDialog/index.css +1 -1
- package/dist/components/ZlDialog/index.vue.d.ts +3 -0
- package/dist/components/ZlDialog/index.vue.mjs +27 -24
- package/dist/components/ZlDrawer/index.css +1 -1
- package/dist/components/ZlDrawer/index.vue.d.ts +3 -0
- package/dist/components/ZlDrawer/index.vue.mjs +28 -25
- package/dist/components/ZlPageContainer/index.css +1 -1
- package/dist/components/ZlPageContainer/index.vue.mjs +1 -1
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -875,6 +875,36 @@ const { data } = useDataRequest(getChartDataApi, { dataKey: 'data' })
|
|
|
875
875
|
|
|
876
876
|
内部用 `usePageableRequest` 驱动分页与查询；`columns` 为 `TableColumn[]`，`queryItems` 为 `SearchItem[]`。
|
|
877
877
|
|
|
878
|
+
`queryItems` 与 `ZlForm` 的 `items` 是同一套 schema：基础查询项直接 `component` + `props` 配置（不用写模板），
|
|
879
|
+
选项类控件用 EP 的 `options`，字段不是 `label`/`value` 时用 `props` 别名重映射，联动项用 `slot:true` + `#<model>` 接管：
|
|
880
|
+
|
|
881
|
+
```ts
|
|
882
|
+
const queryItems: SearchItem[] = [
|
|
883
|
+
{
|
|
884
|
+
model: 'keyword',
|
|
885
|
+
label: '名称',
|
|
886
|
+
component: 'el-input',
|
|
887
|
+
props: { placeholder: '请输入名称', clearable: true },
|
|
888
|
+
},
|
|
889
|
+
{
|
|
890
|
+
model: 'type',
|
|
891
|
+
label: '类型',
|
|
892
|
+
component: 'el-select',
|
|
893
|
+
props: {
|
|
894
|
+
options: [
|
|
895
|
+
{ id: 'db', name: '数据库' },
|
|
896
|
+
{ id: 'api', name: 'API' },
|
|
897
|
+
],
|
|
898
|
+
props: { value: 'id', label: 'name' },
|
|
899
|
+
clearable: true,
|
|
900
|
+
style: 'width: 100%',
|
|
901
|
+
},
|
|
902
|
+
// 条件标签文案 / 查询入参可用 SearchItem 的 toLabel / toParams 转换
|
|
903
|
+
toLabel: (v) => (v === 'db' ? '数据库' : 'API'),
|
|
904
|
+
},
|
|
905
|
+
]
|
|
906
|
+
```
|
|
907
|
+
|
|
878
908
|
#### ② `ZlCardPage` —— 直接传 service
|
|
879
909
|
|
|
880
910
|
```vue
|
|
@@ -886,6 +916,7 @@ const { data } = useDataRequest(getChartDataApi, { dataKey: 'data' })
|
|
|
886
916
|
```
|
|
887
917
|
|
|
888
918
|
内部组合 `usePageableRequest + ZlSearch + ZlPagination + ZlEmpty`。
|
|
919
|
+
搜索栏直接由 `queryItems: SearchItem[]` 驱动，写法与上面的 `ZlSearchTable` 完全一致（`component` + `props` 配置，选项类用 EP 的 `options`）。
|
|
889
920
|
|
|
890
921
|
**条件查询 / 页签切换怎么重查**：把变化源放进 `request.options.refreshDeps`（ref / getter 数组），
|
|
891
922
|
依赖变化会自动重查**并回到第 1 页**——卡片页的请求是 `manual` 的（首屏由 `ZlSearch` 触发），
|
|
@@ -1341,7 +1372,7 @@ async function onSubmit() {
|
|
|
1341
1372
|
|
|
1342
1373
|
> `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`。
|
|
1343
1374
|
|
|
1344
|
-
> 需要**对话框形态**（居中弹出、模态确认类）而非侧滑抽屉时，把 `ZlDrawer` 换成 `ZlDialog`——两者 API 完全一致（`v-model:visible` / `onOk` / `onCancel` / `readonly` / `loading` / `#footer` 插槽），仅容器从 `el-drawer` 换成 `el-dialog`、尺寸走 `el-dialog` 的 `width`。§15 替换规范里**弹窗默认仍用 `ZlDrawer`**，只有明确要对话框时才用 `ZlDialog`。
|
|
1375
|
+
> 需要**对话框形态**（居中弹出、模态确认类）而非侧滑抽屉时，把 `ZlDrawer` 换成 `ZlDialog`——两者 API 完全一致（`v-model:visible` / `onOk` / `onCancel` / `readonly` / `loading` / `footerVisible` / `#footer` 插槽），仅容器从 `el-drawer` 换成 `el-dialog`、尺寸走 `el-dialog` 的 `width`。§15 替换规范里**弹窗默认仍用 `ZlDrawer`**，只有明确要对话框时才用 `ZlDialog`。
|
|
1345
1376
|
|
|
1346
1377
|
#### 6.5.3 卡片列表范式：ZlCardPage + ZlCard + ZlAction
|
|
1347
1378
|
|
|
@@ -1395,23 +1426,99 @@ function cardActions(data: any) {
|
|
|
1395
1426
|
|
|
1396
1427
|
### ZlForm —— schema 驱动
|
|
1397
1428
|
|
|
1429
|
+
基础表单项**不用写模板**：`component` 直接写 EP 组件名（`el-input` / `el-select` / `el-radio-group` …）或组件对象，
|
|
1430
|
+
`props` 原样透传给该控件，并自动包装 `update:modelValue` 回写 `model`（不必自己接 `v-model`）。
|
|
1431
|
+
|
|
1398
1432
|
```ts
|
|
1433
|
+
const form = reactive<Record<string, any>>({})
|
|
1434
|
+
const contractOptions = ref([{ id: 'c1', name: '合约 A' }])
|
|
1435
|
+
const envOptions = ref([
|
|
1436
|
+
{ label: '生产', value: 'prod' },
|
|
1437
|
+
{ label: '测试', value: 'test' },
|
|
1438
|
+
])
|
|
1439
|
+
|
|
1399
1440
|
const items: FormItem[] = [
|
|
1400
|
-
|
|
1401
|
-
{
|
|
1441
|
+
// 选项类：用 EP 的 options；数据字段不是 label/value 时用 props 别名重映射（props 里嵌 props）
|
|
1442
|
+
{
|
|
1443
|
+
model: 'contractId',
|
|
1444
|
+
label: '合约名称',
|
|
1445
|
+
component: 'el-select',
|
|
1446
|
+
props: {
|
|
1447
|
+
options: contractOptions.value,
|
|
1448
|
+
props: { value: 'id', label: 'name' },
|
|
1449
|
+
clearable: true,
|
|
1450
|
+
filterable: true,
|
|
1451
|
+
style: 'width: 100%',
|
|
1452
|
+
},
|
|
1453
|
+
// rules 属于 el-form-item → 放 formItemProps，不要平铺在 item 上
|
|
1454
|
+
formItemProps: { rules: [{ required: true, message: '请选择合约名称', trigger: 'change' }] },
|
|
1455
|
+
},
|
|
1456
|
+
// 动态禁用：在生成 schema 时算进 options（computed 随依赖变化重算整表）
|
|
1457
|
+
{
|
|
1458
|
+
model: 'env',
|
|
1459
|
+
label: '计算环境',
|
|
1460
|
+
component: 'el-radio-group',
|
|
1461
|
+
props: { options: envOptions.value.map((i) => ({ ...i, disabled: i.disabled })) },
|
|
1462
|
+
},
|
|
1463
|
+
// 输入类：placeholder / maxlength / 多行（type/rows/showWordLimit）全走 props
|
|
1464
|
+
{
|
|
1465
|
+
model: 'name',
|
|
1466
|
+
label: '任务名称',
|
|
1467
|
+
component: 'el-input',
|
|
1468
|
+
props: { placeholder: '请输入', maxlength: 30 },
|
|
1469
|
+
},
|
|
1402
1470
|
{ model: 'enable', label: '启用', component: 'ZlSwitch' },
|
|
1471
|
+
// 联动 / 复合控件（多选表格、树选择）不硬塞 props，用 slot:true + #<model> 插槽整块接管
|
|
1472
|
+
{ model: 'productIds', label: '数据产品', slot: true },
|
|
1403
1473
|
]
|
|
1404
1474
|
```
|
|
1405
1475
|
|
|
1406
1476
|
```vue
|
|
1407
|
-
<ZlForm :model="form" :items="items" label-width="auto"
|
|
1477
|
+
<ZlForm :model="form" :items="items" label-width="auto">
|
|
1478
|
+
<template #productIds="{ model }">…</template>
|
|
1479
|
+
</ZlForm>
|
|
1408
1480
|
```
|
|
1409
1481
|
|
|
1410
|
-
`FormItem` 关键字段：`model`(必填) / `label` / `component`(组件名或组件) / `props`(
|
|
1482
|
+
`FormItem` 关键字段：`model`(必填) / `label` / `component`(组件名或组件) / `props`(控件入参，自动包装 `update:modelValue` 回写) /
|
|
1483
|
+
`slots`(控件插槽) / `formItemProps`(`el-form-item` 属性，如 `rules`) / `defaultValue` / `visible`(布尔或函数) / `tooltip`(label 后帮助图标) / `slot`(启用 `#<model>` 插槽)。
|
|
1484
|
+
|
|
1485
|
+
> `rules` 必须写在 `formItemProps` 里：item 上除上述字段外的键会被当作**控件 props** 透传给控件，写错不会报错、但校验不生效。
|
|
1411
1486
|
|
|
1412
1487
|
### ZlSearch —— 查询条
|
|
1413
1488
|
|
|
1414
|
-
|
|
1489
|
+
`items: SearchItem[]`，与 `ZlForm` 的 `items` **同一套 schema**：基础查询项直接 `component` + `props` 配置（不用写模板），
|
|
1490
|
+
选项类用 EP 的 `options`（字段不是 `label`/`value` 时用 `props` 别名重映射），联动 / 复合项用 `slot:true` + `#<model>` 插槽接管。
|
|
1491
|
+
`SearchItem` 在 `FormItem` 之上扩展了 `toLabel`(值→条件标签文案) 与 `toParams`(值→查询参数合并)。
|
|
1492
|
+
|
|
1493
|
+
```ts
|
|
1494
|
+
const items: SearchItem[] = [
|
|
1495
|
+
{
|
|
1496
|
+
model: 'keyword',
|
|
1497
|
+
label: '名称',
|
|
1498
|
+
component: 'el-input',
|
|
1499
|
+
props: { placeholder: '请输入名称', clearable: true },
|
|
1500
|
+
},
|
|
1501
|
+
{
|
|
1502
|
+
model: 'type',
|
|
1503
|
+
label: '类型',
|
|
1504
|
+
component: 'el-select',
|
|
1505
|
+
props: {
|
|
1506
|
+
options: [
|
|
1507
|
+
{ id: 'db', name: '数据库' },
|
|
1508
|
+
{ id: 'api', name: 'API' },
|
|
1509
|
+
],
|
|
1510
|
+
props: { value: 'id', label: 'name' },
|
|
1511
|
+
clearable: true,
|
|
1512
|
+
style: 'width: 100%',
|
|
1513
|
+
},
|
|
1514
|
+
toLabel: (v) => (v === 'db' ? '数据库' : 'API'),
|
|
1515
|
+
},
|
|
1516
|
+
]
|
|
1517
|
+
```
|
|
1518
|
+
|
|
1519
|
+
```vue
|
|
1520
|
+
<ZlSearch :items="items" @search="onSearch" />
|
|
1521
|
+
```
|
|
1415
1522
|
|
|
1416
1523
|
**自适应溢出**（`useSearchFormOverflow`，移植自源组件逻辑，非按项数猜）：
|
|
1417
1524
|
|
|
@@ -1439,8 +1546,8 @@ const items: FormItem[] = [
|
|
|
1439
1546
|
|
|
1440
1547
|
### ZlDrawer / ZlDialog / ZlPopconfirm / ZlSwitch
|
|
1441
1548
|
|
|
1442
|
-
- `ZlDrawer`：自绘 footer（okLoading/hideCancel/readonly 语义保持），`loading`→`v-loading
|
|
1443
|
-
- `ZlDialog`：与 `ZlDrawer` API
|
|
1549
|
+
- `ZlDrawer`：自绘 footer（okLoading/hideCancel/readonly 语义保持），`loading`→`v-loading`；`footerVisible`（默认 `true`）置 `false` 时整体收起底部按钮区，正文占满全高。
|
|
1550
|
+
- `ZlDialog`：与 `ZlDrawer` API 一致的对话框容器（含 `footerVisible`），底层走 EP `el-dialog`（居中模态），尺寸走 `width`；弹窗默认用 `ZlDrawer`，明确要对话框时才用 `ZlDialog`。
|
|
1444
1551
|
- `ZlPopconfirm`：基于 `el-popover` 自绘面板，保留 title/content 双插槽与确认/取消事件。
|
|
1445
1552
|
- `ZlSwitch`：`active-value`/`inactive-value` 包装，文本在侧（`checked-text`）。
|
|
1446
1553
|
|
|
@@ -3688,9 +3795,9 @@ const { i18n } = useLocale({ messages })
|
|
|
3688
3795
|
| [`ZlCheckboxTag`](#zlcheckboxtag) | 主入口 | 7 | 1 | 1 | 0 |
|
|
3689
3796
|
| [`ZlCopy`](#zlcopy) | 主入口 | 2 | 0 | 2 | 0 |
|
|
3690
3797
|
| [`ZlDescription`](#zldescription) | 主入口 | 5 | 0 | 1 | 0 |
|
|
3691
|
-
| [`ZlDialog`](#zldialog) | 主入口 |
|
|
3798
|
+
| [`ZlDialog`](#zldialog) | 主入口 | 7 | 1 | 2 | 0 |
|
|
3692
3799
|
| [`ZlDictTag`](#zldicttag) | 主入口 | 8 | 0 | 0 | 0 |
|
|
3693
|
-
| [`ZlDrawer`](#zldrawer) | 主入口 |
|
|
3800
|
+
| [`ZlDrawer`](#zldrawer) | 主入口 | 7 | 1 | 2 | 0 |
|
|
3694
3801
|
| [`ZlDynamicComponent`](#zldynamiccomponent) | 主入口 | 3 | 2 | 0 | 0 |
|
|
3695
3802
|
| [`ZlPdfViewer`](#zlpdfviewer) | 主入口 | 2 | 0 | 0 | 0 |
|
|
3696
3803
|
| [`ZlLogin`](#zllogin) | 主入口 | 2 | 0 | 2 | 0 |
|
|
@@ -4142,11 +4249,11 @@ import { ZlCardPage } from '@zl-ui-kit/components'
|
|
|
4142
4249
|
</script>
|
|
4143
4250
|
|
|
4144
4251
|
<template>
|
|
4145
|
-
<ZlCardPage :request="mockPageRequest" card-min-width="200px" />
|
|
4252
|
+
<ZlCardPage :request="mockPageRequest" card-min-width="200px" :query-items="queryItems" />
|
|
4146
4253
|
</template>
|
|
4147
4254
|
```
|
|
4148
4255
|
|
|
4149
|
-
> 示例中的 `request` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
4256
|
+
> 示例中的 `request`、`queryItems` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
4150
4257
|
|
|
4151
4258
|
**插槽用法**
|
|
4152
4259
|
|
|
@@ -4373,7 +4480,7 @@ import { ZlDescription } from '@zl-ui-kit/components'
|
|
|
4373
4480
|
|
|
4374
4481
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlDialog/index.vue`</sub>
|
|
4375
4482
|
|
|
4376
|
-
**接口概览**：
|
|
4483
|
+
**接口概览**：7 props · 1 事件 · 2 插槽
|
|
4377
4484
|
|
|
4378
4485
|
**用法示例**
|
|
4379
4486
|
|
|
@@ -4383,11 +4490,17 @@ import { ZlDialog } from '@zl-ui-kit/components'
|
|
|
4383
4490
|
</script>
|
|
4384
4491
|
|
|
4385
4492
|
<template>
|
|
4386
|
-
<ZlDialog
|
|
4493
|
+
<ZlDialog
|
|
4494
|
+
v-model:visible="value"
|
|
4495
|
+
title="新增"
|
|
4496
|
+
width="480px"
|
|
4497
|
+
:footer-visible="footerVisible.value"
|
|
4498
|
+
:on-ok="onOk"
|
|
4499
|
+
/>
|
|
4387
4500
|
</template>
|
|
4388
4501
|
```
|
|
4389
4502
|
|
|
4390
|
-
> 示例中的 `onOk` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
4503
|
+
> 示例中的 `footerVisible`、`onOk` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
4391
4504
|
|
|
4392
4505
|
**插槽用法**
|
|
4393
4506
|
|
|
@@ -4402,14 +4515,15 @@ import { ZlDialog } from '@zl-ui-kit/components'
|
|
|
4402
4515
|
|
|
4403
4516
|
**props**
|
|
4404
4517
|
|
|
4405
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
4406
|
-
| ----------------------- | --------------------------------------------------- | ------- | ---- | ----------------------------------- |
|
|
4407
|
-
| `visible` | `boolean` | `false` | 否 | `v-model:visible="value"` | `v-model` 绑定的值（`defineModel` 隐式声明）
|
|
4408
|
-
| `onCancel` | `() => boolean \| void \| Promise<boolean \| void>` | — | 否 | `:on-cancel="async () => {}"` | 关闭前触发，返回 true 才会真正关闭
|
|
4409
|
-
| `onOk` | `() => void \| Promise<void>` | — | 否 | `:on-ok="async () => {}"` | 点击确定的回调，异步期间按钮保持 loading
|
|
4410
|
-
| `autoCloseAfterConfirm` | `boolean` | `true` | 否 | `:auto-close-after-confirm="false"` | 确定回调结束后是否自动关闭对话框，默认 true
|
|
4411
|
-
| `readonly` | `boolean` | — | 否 | `readonly` | 只读模式：隐藏取消按钮，只留「关闭」
|
|
4412
|
-
| `loading` | `boolean` | — | 否 | `loading` | 内容区加载态，为 true 时显示遮罩 loading
|
|
4518
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4519
|
+
| ----------------------- | --------------------------------------------------- | ------- | ---- | ----------------------------------- | ------------------------------------------------------------------------------------------------- |
|
|
4520
|
+
| `visible` | `boolean` | `false` | 否 | `v-model:visible="value"` | `v-model` 绑定的值（`defineModel` 隐式声明） |
|
|
4521
|
+
| `onCancel` | `() => boolean \| void \| Promise<boolean \| void>` | — | 否 | `:on-cancel="async () => {}"` | 关闭前触发，返回 true 才会真正关闭 |
|
|
4522
|
+
| `onOk` | `() => void \| Promise<void>` | — | 否 | `:on-ok="async () => {}"` | 点击确定的回调，异步期间按钮保持 loading |
|
|
4523
|
+
| `autoCloseAfterConfirm` | `boolean` | `true` | 否 | `:auto-close-after-confirm="false"` | 确定回调结束后是否自动关闭对话框，默认 true |
|
|
4524
|
+
| `readonly` | `boolean` | — | 否 | `readonly` | 只读模式：隐藏取消按钮，只留「关闭」 |
|
|
4525
|
+
| `loading` | `boolean` | — | 否 | `loading` | 内容区加载态，为 true 时显示遮罩 loading |
|
|
4526
|
+
| `footerVisible` | `boolean` | `true` | 否 | `:footer-visible="false"` | 底部按钮区是否可见；为 false 时隐藏整个页脚（默认取消/确定按钮与 footer 插槽一并隐藏），默认 true |
|
|
4413
4527
|
|
|
4414
4528
|
> 把未声明的入参与事件（`useAttrs()`）透传给 `el-dialog`，未列出的属性会继续下传
|
|
4415
4529
|
|
|
@@ -4465,7 +4579,7 @@ import { ZlDictTag } from '@zl-ui-kit/components'
|
|
|
4465
4579
|
|
|
4466
4580
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlDrawer/index.vue`</sub>
|
|
4467
4581
|
|
|
4468
|
-
**接口概览**：
|
|
4582
|
+
**接口概览**：7 props · 1 事件 · 2 插槽
|
|
4469
4583
|
|
|
4470
4584
|
**用法示例**
|
|
4471
4585
|
|
|
@@ -4475,11 +4589,11 @@ import { ZlDrawer } from '@zl-ui-kit/components'
|
|
|
4475
4589
|
</script>
|
|
4476
4590
|
|
|
4477
4591
|
<template>
|
|
4478
|
-
<ZlDrawer v-model:visible="value" title="新增" :on-ok="onOk" />
|
|
4592
|
+
<ZlDrawer v-model:visible="value" title="新增" :footer-visible="footerVisible.value" :on-ok="onOk" />
|
|
4479
4593
|
</template>
|
|
4480
4594
|
```
|
|
4481
4595
|
|
|
4482
|
-
> 示例中的 `onOk` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
4596
|
+
> 示例中的 `footerVisible`、`onOk` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
4483
4597
|
|
|
4484
4598
|
**插槽用法**
|
|
4485
4599
|
|
|
@@ -4494,14 +4608,15 @@ import { ZlDrawer } from '@zl-ui-kit/components'
|
|
|
4494
4608
|
|
|
4495
4609
|
**props**
|
|
4496
4610
|
|
|
4497
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
4498
|
-
| ----------------------- | --------------------------------------------------- | ------- | ---- | ----------------------------------- |
|
|
4499
|
-
| `visible` | `boolean` | `false` | 否 | `v-model:visible="value"` | `v-model` 绑定的值（`defineModel` 隐式声明）
|
|
4500
|
-
| `onCancel` | `() => boolean \| void \| Promise<boolean \| void>` | — | 否 | `:on-cancel="async () => {}"` | 关闭前触发，返回 true 才会真正关闭
|
|
4501
|
-
| `onOk` | `() => void \| Promise<void>` | — | 否 | `:on-ok="async () => {}"` | 点击确定的回调，异步期间按钮保持 loading
|
|
4502
|
-
| `autoCloseAfterConfirm` | `boolean` | `true` | 否 | `:auto-close-after-confirm="false"` | 确定回调结束后是否自动关闭抽屉，默认 true
|
|
4503
|
-
| `readonly` | `boolean` | — | 否 | `readonly` | 只读模式：隐藏取消按钮，只留「关闭」
|
|
4504
|
-
| `loading` | `boolean` | — | 否 | `loading` | 内容区加载态，为 true 时显示遮罩 loading
|
|
4611
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4612
|
+
| ----------------------- | --------------------------------------------------- | ------- | ---- | ----------------------------------- | ------------------------------------------------------------------------------------------------- |
|
|
4613
|
+
| `visible` | `boolean` | `false` | 否 | `v-model:visible="value"` | `v-model` 绑定的值（`defineModel` 隐式声明） |
|
|
4614
|
+
| `onCancel` | `() => boolean \| void \| Promise<boolean \| void>` | — | 否 | `:on-cancel="async () => {}"` | 关闭前触发，返回 true 才会真正关闭 |
|
|
4615
|
+
| `onOk` | `() => void \| Promise<void>` | — | 否 | `:on-ok="async () => {}"` | 点击确定的回调，异步期间按钮保持 loading |
|
|
4616
|
+
| `autoCloseAfterConfirm` | `boolean` | `true` | 否 | `:auto-close-after-confirm="false"` | 确定回调结束后是否自动关闭抽屉，默认 true |
|
|
4617
|
+
| `readonly` | `boolean` | — | 否 | `readonly` | 只读模式：隐藏取消按钮，只留「关闭」 |
|
|
4618
|
+
| `loading` | `boolean` | — | 否 | `loading` | 内容区加载态，为 true 时显示遮罩 loading |
|
|
4619
|
+
| `footerVisible` | `boolean` | `true` | 否 | `:footer-visible="false"` | 底部按钮区是否可见；为 false 时隐藏整个页脚（默认取消/确定按钮与 footer 插槽一并隐藏），默认 true |
|
|
4505
4620
|
|
|
4506
4621
|
> 把未声明的入参与事件（`useAttrs()`）透传给 `el-drawer`，未列出的属性会继续下传
|
|
4507
4622
|
|
|
@@ -5209,12 +5324,12 @@ import { ZlPageContainer } from '@zl-ui-kit/components'
|
|
|
5209
5324
|
|
|
5210
5325
|
**插槽（slots）**
|
|
5211
5326
|
|
|
5212
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
5213
|
-
| ------------- | ---------- | ------------------------------------- |
|
|
5214
|
-
| `title` | — | `<template #title>…</template>` | 自定义标题内容，覆盖 title
|
|
5215
|
-
| `description` | — | `<template #description>…</template>` | 自定义描述内容，覆盖 description
|
|
5216
|
-
| `extra` | — | `<template #extra>…</template>` | 页头右侧自定义内容区（如新建、导出等操作按钮）
|
|
5217
|
-
| `content` | — | `<template #content>…</template>` |
|
|
5327
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
5328
|
+
| ------------- | ---------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
|
|
5329
|
+
| `title` | — | `<template #title>…</template>` | 自定义标题内容，覆盖 title |
|
|
5330
|
+
| `description` | — | `<template #description>…</template>` | 自定义描述内容，覆盖 description |
|
|
5331
|
+
| `extra` | — | `<template #extra>…</template>` | 页头右侧自定义内容区（如新建、导出等操作按钮） |
|
|
5332
|
+
| `content` | — | `<template #content>…</template>` | 页面主体内容区，占满页头以下的剩余高度；内容根节点自动铺满，无需再写 height:100%（如左列表 + 右详情的整块布局） |
|
|
5218
5333
|
|
|
5219
5334
|
#### `ZlPagination`
|
|
5220
5335
|
|
|
@@ -6755,7 +6870,7 @@ ZlGrid 子项 schema
|
|
|
6755
6870
|
|
|
6756
6871
|
| 组件 | 差异 | 迁移注意 |
|
|
6757
6872
|
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
6758
|
-
| `ZlDrawer` | `width` 映射到内部 `size`（默认 `600`）；`destroy-on-close` **默认 `true`**（EP 默认 `false`）；自带底部取消 /
|
|
6873
|
+
| `ZlDrawer` | `width` 映射到内部 `size`（默认 `600`）；`destroy-on-close` **默认 `true`**（EP 默认 `false`）；自带底部取消 / 确定按钮区（`footerVisible=false` 可整体收起，`ZlDialog` 同） | 抽屉内容**关闭即销毁**，内部状态不保留；需保留状态时显式传 `:destroy-on-close="false"` |
|
|
6759
6874
|
| `ZlForm` | `validate()` / `validateField()` 与 `el-form` **完全同语义**（成功 `resolve(true)`、失败 `reject(invalidFields)`、支持 callback）；暴露 `el-form` 的 8 项能力 + `elForm` | **仅 ≥ 0.10.0**：0.9.0 及更早成功时返回 `undefined`（签名为 `Promise<void>`），`const ok = await formRef.validate()` 判为 falsy；需 `el-form` 未暴露的方法时用 `formRef.elForm` |
|
|
6760
6875
|
| `ZlTable` | 列插槽按 `prop` 名命名，作用域含 `{ row, column, $index }`；暴露 `el-table` 的 15 个公开方法 + `elTable` getter | `tableRef.toggleRowSelection(row)` 等均有类型提示；其余方法走 `tableRef.elTable` |
|
|
6761
6876
|
| `ZlSwitch` | 主名 `checked-value` / `unchecked-value`，同时**兼容 EP 的 `active-value` / `inactive-value` 别名**（同传时主名优先）；`@change` 参数是**业务值**而非内部布尔 | 直搬 `:active-value="'1'"` 可用；从 `el-switch` 迁移时注意 `@change` 入参含义已变 |
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-dialog__body{width:100%}
|
|
1
|
+
.zl-dialog__body{width:100%}.zl-dialog--no-footer .el-dialog__footer{display:none}
|
|
@@ -9,6 +9,8 @@ type __VLS_Props = {
|
|
|
9
9
|
readonly?: boolean;
|
|
10
10
|
/** 内容区加载态，为 true 时显示遮罩 loading */
|
|
11
11
|
loading?: boolean;
|
|
12
|
+
/** 底部按钮区是否可见；为 false 时隐藏整个页脚（默认取消/确定按钮与 footer 插槽一并隐藏），默认 true */
|
|
13
|
+
footerVisible?: boolean;
|
|
12
14
|
};
|
|
13
15
|
type __VLS_PublicProps = {
|
|
14
16
|
'visible'?: boolean;
|
|
@@ -29,6 +31,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
|
|
|
29
31
|
"onUpdate:visible"?: ((value: boolean) => any) | undefined;
|
|
30
32
|
}>, {
|
|
31
33
|
autoCloseAfterConfirm: boolean;
|
|
34
|
+
footerVisible: boolean;
|
|
32
35
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
33
36
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
34
37
|
export default _default;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as h, useModel as
|
|
1
|
+
import { defineComponent as h, useModel as z, ref as w, computed as f, useAttrs as x, resolveComponent as m, resolveDirective as A, openBlock as d, createBlock as g, mergeProps as D, withCtx as a, withDirectives as _, createElementBlock as M, renderSlot as v, createTextVNode as y, toDisplayString as p, unref as N, createCommentVNode as O, createVNode as T, mergeModels as Z } from "vue";
|
|
2
2
|
import { useZlT as $ } from "@zl-ui-kit/composables";
|
|
3
3
|
const S = { class: "zl-dialog__body" }, P = /* @__PURE__ */ h({
|
|
4
4
|
name: "ZlDialog",
|
|
@@ -9,68 +9,71 @@ const S = { class: "zl-dialog__body" }, P = /* @__PURE__ */ h({
|
|
|
9
9
|
onOk: {},
|
|
10
10
|
autoCloseAfterConfirm: { type: Boolean, default: !0 },
|
|
11
11
|
readonly: { type: Boolean },
|
|
12
|
-
loading: { type: Boolean }
|
|
12
|
+
loading: { type: Boolean },
|
|
13
|
+
footerVisible: { type: Boolean, default: !0 }
|
|
13
14
|
}, {
|
|
14
15
|
visible: { type: Boolean, default: !1 },
|
|
15
16
|
visibleModifiers: {}
|
|
16
17
|
}),
|
|
17
18
|
emits: ["update:visible"],
|
|
18
|
-
setup(
|
|
19
|
-
const { t:
|
|
20
|
-
async function
|
|
21
|
-
|
|
19
|
+
setup(e) {
|
|
20
|
+
const { t: i } = $(), o = e, t = z(e, "visible");
|
|
21
|
+
async function r() {
|
|
22
|
+
o.onCancel && !await o.onCancel() || (t.value = !1);
|
|
22
23
|
}
|
|
23
24
|
const s = w(!1);
|
|
24
25
|
async function C() {
|
|
25
26
|
s.value = !0;
|
|
26
27
|
try {
|
|
27
|
-
|
|
28
|
-
} catch (
|
|
29
|
-
console.error("[ZlDialog] handleConfirm: ",
|
|
28
|
+
o.onOk && (await o.onOk(), o.autoCloseAfterConfirm && (t.value = !1));
|
|
29
|
+
} catch (l) {
|
|
30
|
+
console.error("[ZlDialog] handleConfirm: ", l);
|
|
30
31
|
} finally {
|
|
31
32
|
s.value = !1;
|
|
32
33
|
}
|
|
33
34
|
}
|
|
34
|
-
const
|
|
35
|
-
return (
|
|
36
|
-
const u = m("el-button"), B = m("el-dialog"),
|
|
37
|
-
return d(),
|
|
35
|
+
const b = f(() => o.readonly ? i("zl.dialog.close", "关闭") : i("zl.dialog.confirm", "确定")), k = f(() => ({ width: "600px", "destroy-on-close": !0, ...x() }));
|
|
36
|
+
return (l, n) => {
|
|
37
|
+
const u = m("el-button"), B = m("el-dialog"), V = A("loading");
|
|
38
|
+
return d(), g(B, D({
|
|
39
|
+
class: ["zl-dialog", { "zl-dialog--no-footer": !e.footerVisible }]
|
|
40
|
+
}, k.value, {
|
|
38
41
|
modelValue: t.value,
|
|
39
42
|
"onUpdate:modelValue": n[1] || (n[1] = (c) => t.value = c),
|
|
40
|
-
"before-close":
|
|
43
|
+
"before-close": r
|
|
41
44
|
}), {
|
|
42
45
|
footer: a(() => [
|
|
43
|
-
|
|
44
|
-
|
|
46
|
+
v(l.$slots, "footer", {}, () => [
|
|
47
|
+
e.readonly ? O("", !0) : (d(), g(u, {
|
|
45
48
|
key: 0,
|
|
46
|
-
onClick:
|
|
49
|
+
onClick: r
|
|
47
50
|
}, {
|
|
48
51
|
default: a(() => [
|
|
49
|
-
y(p(N(
|
|
52
|
+
y(p(N(i)("zl.dialog.cancel", "取消")), 1)
|
|
50
53
|
]),
|
|
51
54
|
_: 1
|
|
52
55
|
})),
|
|
53
56
|
T(u, {
|
|
54
57
|
type: "primary",
|
|
55
58
|
loading: s.value,
|
|
56
|
-
onClick: n[0] || (n[0] = (c) =>
|
|
59
|
+
onClick: n[0] || (n[0] = (c) => e.readonly ? r() : C())
|
|
57
60
|
}, {
|
|
58
61
|
default: a(() => [
|
|
59
|
-
y(p(
|
|
62
|
+
y(p(b.value), 1)
|
|
60
63
|
]),
|
|
61
64
|
_: 1
|
|
62
65
|
}, 8, ["loading"])
|
|
63
66
|
])
|
|
64
67
|
]),
|
|
65
68
|
default: a(() => [
|
|
66
|
-
|
|
67
|
-
|
|
69
|
+
_((d(), M("div", S, [
|
|
70
|
+
v(l.$slots, "default")
|
|
68
71
|
])), [
|
|
69
|
-
[
|
|
72
|
+
[V, e.loading]
|
|
70
73
|
])
|
|
71
74
|
]),
|
|
72
75
|
_: 3
|
|
73
|
-
}, 16, ["modelValue"]);
|
|
76
|
+
}, 16, ["class", "modelValue"]);
|
|
74
77
|
};
|
|
75
78
|
}
|
|
76
79
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-drawer__body{width:100%;min-height:100%}
|
|
1
|
+
.zl-drawer__body{width:100%;min-height:100%}.zl-drawer--no-footer .el-drawer__footer{display:none}
|
|
@@ -9,6 +9,8 @@ type __VLS_Props = {
|
|
|
9
9
|
readonly?: boolean;
|
|
10
10
|
/** 内容区加载态，为 true 时显示遮罩 loading */
|
|
11
11
|
loading?: boolean;
|
|
12
|
+
/** 底部按钮区是否可见；为 false 时隐藏整个页脚（默认取消/确定按钮与 footer 插槽一并隐藏），默认 true */
|
|
13
|
+
footerVisible?: boolean;
|
|
12
14
|
};
|
|
13
15
|
type __VLS_PublicProps = {
|
|
14
16
|
'visible'?: boolean;
|
|
@@ -29,6 +31,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
|
|
|
29
31
|
"onUpdate:visible"?: ((value: boolean) => any) | undefined;
|
|
30
32
|
}>, {
|
|
31
33
|
autoCloseAfterConfirm: boolean;
|
|
34
|
+
footerVisible: boolean;
|
|
32
35
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
33
36
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
34
37
|
export default _default;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as B, useModel as
|
|
1
|
+
import { defineComponent as B, useModel as V, ref as h, computed as f, useAttrs as A, resolveComponent as m, resolveDirective as D, openBlock as d, createBlock as v, mergeProps as _, withCtx as n, withDirectives as x, createElementBlock as O, renderSlot as y, createTextVNode as C, toDisplayString as w, unref as M, createCommentVNode as N, createVNode as T, mergeModels as Z } from "vue";
|
|
2
2
|
import { useZlT as $ } from "@zl-ui-kit/composables";
|
|
3
3
|
const S = { class: "zl-drawer__body" }, P = /* @__PURE__ */ B({
|
|
4
4
|
name: "ZlDrawer",
|
|
@@ -9,71 +9,74 @@ const S = { class: "zl-drawer__body" }, P = /* @__PURE__ */ B({
|
|
|
9
9
|
onOk: {},
|
|
10
10
|
autoCloseAfterConfirm: { type: Boolean, default: !0 },
|
|
11
11
|
readonly: { type: Boolean },
|
|
12
|
-
loading: { type: Boolean }
|
|
12
|
+
loading: { type: Boolean },
|
|
13
|
+
footerVisible: { type: Boolean, default: !0 }
|
|
13
14
|
}, {
|
|
14
15
|
visible: { type: Boolean, default: !1 },
|
|
15
16
|
visibleModifiers: {}
|
|
16
17
|
}),
|
|
17
18
|
emits: ["update:visible"],
|
|
18
|
-
setup(
|
|
19
|
-
const { t: a } = $(),
|
|
19
|
+
setup(o) {
|
|
20
|
+
const { t: a } = $(), t = o, r = V(o, "visible");
|
|
20
21
|
async function s() {
|
|
21
|
-
|
|
22
|
+
t.onCancel && !await t.onCancel() || (r.value = !1);
|
|
22
23
|
}
|
|
23
24
|
const i = h(!1);
|
|
24
|
-
async function
|
|
25
|
+
async function p() {
|
|
25
26
|
i.value = !0;
|
|
26
27
|
try {
|
|
27
|
-
|
|
28
|
+
t.onOk && (await t.onOk(), t.autoCloseAfterConfirm && (r.value = !1));
|
|
28
29
|
} catch (e) {
|
|
29
30
|
console.error("[ZlDrawer] handleConfirm: ", e);
|
|
30
31
|
} finally {
|
|
31
32
|
i.value = !1;
|
|
32
33
|
}
|
|
33
34
|
}
|
|
34
|
-
const
|
|
35
|
-
const { width: e, ...
|
|
36
|
-
return { size: 600, ...e !== void 0 ? { size: e } : {}, destroyOnClose: !0, ...
|
|
35
|
+
const b = f(() => t.readonly ? a("zl.drawer.close", "关闭") : a("zl.drawer.confirm", "确定")), k = f(() => {
|
|
36
|
+
const { width: e, ...l } = A();
|
|
37
|
+
return { size: 600, ...e !== void 0 ? { size: e } : {}, destroyOnClose: !0, ...l };
|
|
37
38
|
});
|
|
38
|
-
return (e,
|
|
39
|
-
const u = m("el-button"),
|
|
40
|
-
return d(), v(
|
|
41
|
-
|
|
42
|
-
|
|
39
|
+
return (e, l) => {
|
|
40
|
+
const u = m("el-button"), g = m("el-drawer"), z = D("loading");
|
|
41
|
+
return d(), v(g, _({
|
|
42
|
+
class: ["zl-drawer", { "zl-drawer--no-footer": !o.footerVisible }]
|
|
43
|
+
}, k.value, {
|
|
44
|
+
modelValue: r.value,
|
|
45
|
+
"onUpdate:modelValue": l[1] || (l[1] = (c) => r.value = c),
|
|
43
46
|
"before-close": s
|
|
44
47
|
}), {
|
|
45
|
-
footer:
|
|
48
|
+
footer: n(() => [
|
|
46
49
|
y(e.$slots, "footer", {}, () => [
|
|
47
|
-
|
|
50
|
+
o.readonly ? N("", !0) : (d(), v(u, {
|
|
48
51
|
key: 0,
|
|
49
52
|
onClick: s
|
|
50
53
|
}, {
|
|
51
|
-
default:
|
|
52
|
-
C(
|
|
54
|
+
default: n(() => [
|
|
55
|
+
C(w(M(a)("zl.drawer.cancel", "取消")), 1)
|
|
53
56
|
]),
|
|
54
57
|
_: 1
|
|
55
58
|
})),
|
|
56
59
|
T(u, {
|
|
57
60
|
type: "primary",
|
|
58
61
|
loading: i.value,
|
|
59
|
-
onClick:
|
|
62
|
+
onClick: l[0] || (l[0] = (c) => o.readonly ? s() : p())
|
|
60
63
|
}, {
|
|
61
|
-
default:
|
|
62
|
-
C(
|
|
64
|
+
default: n(() => [
|
|
65
|
+
C(w(b.value), 1)
|
|
63
66
|
]),
|
|
64
67
|
_: 1
|
|
65
68
|
}, 8, ["loading"])
|
|
66
69
|
])
|
|
67
70
|
]),
|
|
68
|
-
default:
|
|
71
|
+
default: n(() => [
|
|
69
72
|
x((d(), O("div", S, [
|
|
70
73
|
y(e.$slots, "default")
|
|
71
74
|
])), [
|
|
72
|
-
[z,
|
|
75
|
+
[z, o.loading]
|
|
73
76
|
])
|
|
74
77
|
]),
|
|
75
78
|
_: 3
|
|
76
|
-
}, 16, ["modelValue"]);
|
|
79
|
+
}, 16, ["class", "modelValue"]);
|
|
77
80
|
};
|
|
78
81
|
}
|
|
79
82
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-page-container[data-v-
|
|
1
|
+
.zl-page-container[data-v-1c8d17a8]{display:flex;flex-direction:column;box-sizing:border-box;height:100%;background-color:var(--zl-fill-2, #f0f2f7)}.zl-page-container__header[data-v-1c8d17a8]{display:flex;flex-shrink:0;gap:16px;align-items:center;margin-bottom:16px}.zl-page-container__main[data-v-1c8d17a8]{flex:1;min-width:0}.zl-page-container__title[data-v-1c8d17a8]{font-size:16px;font-weight:600;line-height:24px;color:var(--zl-text-1, #242e43)}.zl-page-container__description[data-v-1c8d17a8]{margin-top:2px;font-size:13px;line-height:20px;color:var(--zl-text-3, #79879c)}.zl-page-container__extra[data-v-1c8d17a8]{display:flex;flex-shrink:0;align-items:center;gap:8px}.zl-page-container__content[data-v-1c8d17a8]{display:flex;flex:1;flex-direction:column;min-height:0;overflow:auto}.zl-page-container__content[data-v-1c8d17a8]>*{flex:1 0 auto}
|
|
@@ -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 m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-
|
|
4
|
+
const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-1c8d17a8"]]);
|
|
5
5
|
export {
|
|
6
6
|
m as default
|
|
7
7
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zl-ui-kit/components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.18.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "ZL UI 业务组件库（Element Plus 体系，Zl 前缀）——首批：Icon/AutoTooltip/Tag/CornerTag/Text/Title/Copy/Empty/Pagination/DictTag",
|
|
6
6
|
"license": "MIT",
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
"file-type": "^20.4.1",
|
|
40
40
|
"dt-sql-parser": "^4.3.1",
|
|
41
41
|
"sql-formatter": "^15.4.2",
|
|
42
|
-
"@zl-ui-kit/composables": "0.
|
|
43
|
-
"@zl-ui-kit/
|
|
44
|
-
"@zl-ui-kit/
|
|
42
|
+
"@zl-ui-kit/composables": "0.18.1",
|
|
43
|
+
"@zl-ui-kit/icons": "0.18.1",
|
|
44
|
+
"@zl-ui-kit/utils": "0.18.1"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@vueuse/core": "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
|
|
@@ -100,8 +100,8 @@
|
|
|
100
100
|
"echarts": "^5.6.0",
|
|
101
101
|
"@jichuang/tsconfig": "1.0.0",
|
|
102
102
|
"@jichuang/eslint-config": "1.0.0",
|
|
103
|
-
"@
|
|
104
|
-
"@
|
|
103
|
+
"@jichuang/vite-config": "1.0.0",
|
|
104
|
+
"@zl-ui-kit/theme": "0.18.1"
|
|
105
105
|
},
|
|
106
106
|
"repository": {
|
|
107
107
|
"type": "git",
|