@zl-ui-kit/components 0.17.1 → 0.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -34
- 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
|
@@ -1341,7 +1341,7 @@ async function onSubmit() {
|
|
|
1341
1341
|
|
|
1342
1342
|
> `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
1343
|
|
|
1344
|
-
> 需要**对话框形态**（居中弹出、模态确认类）而非侧滑抽屉时，把 `ZlDrawer` 换成 `ZlDialog`——两者 API 完全一致（`v-model:visible` / `onOk` / `onCancel` / `readonly` / `loading` / `#footer` 插槽），仅容器从 `el-drawer` 换成 `el-dialog`、尺寸走 `el-dialog` 的 `width`。§15 替换规范里**弹窗默认仍用 `ZlDrawer`**，只有明确要对话框时才用 `ZlDialog`。
|
|
1344
|
+
> 需要**对话框形态**（居中弹出、模态确认类）而非侧滑抽屉时，把 `ZlDrawer` 换成 `ZlDialog`——两者 API 完全一致（`v-model:visible` / `onOk` / `onCancel` / `readonly` / `loading` / `footerVisible` / `#footer` 插槽），仅容器从 `el-drawer` 换成 `el-dialog`、尺寸走 `el-dialog` 的 `width`。§15 替换规范里**弹窗默认仍用 `ZlDrawer`**，只有明确要对话框时才用 `ZlDialog`。
|
|
1345
1345
|
|
|
1346
1346
|
#### 6.5.3 卡片列表范式：ZlCardPage + ZlCard + ZlAction
|
|
1347
1347
|
|
|
@@ -1439,8 +1439,8 @@ const items: FormItem[] = [
|
|
|
1439
1439
|
|
|
1440
1440
|
### ZlDrawer / ZlDialog / ZlPopconfirm / ZlSwitch
|
|
1441
1441
|
|
|
1442
|
-
- `ZlDrawer`：自绘 footer（okLoading/hideCancel/readonly 语义保持），`loading`→`v-loading
|
|
1443
|
-
- `ZlDialog`：与 `ZlDrawer` API
|
|
1442
|
+
- `ZlDrawer`：自绘 footer（okLoading/hideCancel/readonly 语义保持），`loading`→`v-loading`；`footerVisible`（默认 `true`）置 `false` 时整体收起底部按钮区，正文占满全高。
|
|
1443
|
+
- `ZlDialog`：与 `ZlDrawer` API 一致的对话框容器（含 `footerVisible`），底层走 EP `el-dialog`（居中模态），尺寸走 `width`；弹窗默认用 `ZlDrawer`，明确要对话框时才用 `ZlDialog`。
|
|
1444
1444
|
- `ZlPopconfirm`：基于 `el-popover` 自绘面板，保留 title/content 双插槽与确认/取消事件。
|
|
1445
1445
|
- `ZlSwitch`：`active-value`/`inactive-value` 包装，文本在侧（`checked-text`）。
|
|
1446
1446
|
|
|
@@ -3688,9 +3688,9 @@ const { i18n } = useLocale({ messages })
|
|
|
3688
3688
|
| [`ZlCheckboxTag`](#zlcheckboxtag) | 主入口 | 7 | 1 | 1 | 0 |
|
|
3689
3689
|
| [`ZlCopy`](#zlcopy) | 主入口 | 2 | 0 | 2 | 0 |
|
|
3690
3690
|
| [`ZlDescription`](#zldescription) | 主入口 | 5 | 0 | 1 | 0 |
|
|
3691
|
-
| [`ZlDialog`](#zldialog) | 主入口 |
|
|
3691
|
+
| [`ZlDialog`](#zldialog) | 主入口 | 7 | 1 | 2 | 0 |
|
|
3692
3692
|
| [`ZlDictTag`](#zldicttag) | 主入口 | 8 | 0 | 0 | 0 |
|
|
3693
|
-
| [`ZlDrawer`](#zldrawer) | 主入口 |
|
|
3693
|
+
| [`ZlDrawer`](#zldrawer) | 主入口 | 7 | 1 | 2 | 0 |
|
|
3694
3694
|
| [`ZlDynamicComponent`](#zldynamiccomponent) | 主入口 | 3 | 2 | 0 | 0 |
|
|
3695
3695
|
| [`ZlPdfViewer`](#zlpdfviewer) | 主入口 | 2 | 0 | 0 | 0 |
|
|
3696
3696
|
| [`ZlLogin`](#zllogin) | 主入口 | 2 | 0 | 2 | 0 |
|
|
@@ -4373,7 +4373,7 @@ import { ZlDescription } from '@zl-ui-kit/components'
|
|
|
4373
4373
|
|
|
4374
4374
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlDialog/index.vue`</sub>
|
|
4375
4375
|
|
|
4376
|
-
**接口概览**：
|
|
4376
|
+
**接口概览**：7 props · 1 事件 · 2 插槽
|
|
4377
4377
|
|
|
4378
4378
|
**用法示例**
|
|
4379
4379
|
|
|
@@ -4383,11 +4383,17 @@ import { ZlDialog } from '@zl-ui-kit/components'
|
|
|
4383
4383
|
</script>
|
|
4384
4384
|
|
|
4385
4385
|
<template>
|
|
4386
|
-
<ZlDialog
|
|
4386
|
+
<ZlDialog
|
|
4387
|
+
v-model:visible="value"
|
|
4388
|
+
title="新增"
|
|
4389
|
+
width="480px"
|
|
4390
|
+
:footer-visible="footerVisible.value"
|
|
4391
|
+
:on-ok="onOk"
|
|
4392
|
+
/>
|
|
4387
4393
|
</template>
|
|
4388
4394
|
```
|
|
4389
4395
|
|
|
4390
|
-
> 示例中的 `onOk` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
4396
|
+
> 示例中的 `footerVisible`、`onOk` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
4391
4397
|
|
|
4392
4398
|
**插槽用法**
|
|
4393
4399
|
|
|
@@ -4402,14 +4408,15 @@ import { ZlDialog } from '@zl-ui-kit/components'
|
|
|
4402
4408
|
|
|
4403
4409
|
**props**
|
|
4404
4410
|
|
|
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
|
|
4411
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4412
|
+
| ----------------------- | --------------------------------------------------- | ------- | ---- | ----------------------------------- | ------------------------------------------------------------------------------------------------- |
|
|
4413
|
+
| `visible` | `boolean` | `false` | 否 | `v-model:visible="value"` | `v-model` 绑定的值（`defineModel` 隐式声明） |
|
|
4414
|
+
| `onCancel` | `() => boolean \| void \| Promise<boolean \| void>` | — | 否 | `:on-cancel="async () => {}"` | 关闭前触发，返回 true 才会真正关闭 |
|
|
4415
|
+
| `onOk` | `() => void \| Promise<void>` | — | 否 | `:on-ok="async () => {}"` | 点击确定的回调，异步期间按钮保持 loading |
|
|
4416
|
+
| `autoCloseAfterConfirm` | `boolean` | `true` | 否 | `:auto-close-after-confirm="false"` | 确定回调结束后是否自动关闭对话框，默认 true |
|
|
4417
|
+
| `readonly` | `boolean` | — | 否 | `readonly` | 只读模式：隐藏取消按钮，只留「关闭」 |
|
|
4418
|
+
| `loading` | `boolean` | — | 否 | `loading` | 内容区加载态，为 true 时显示遮罩 loading |
|
|
4419
|
+
| `footerVisible` | `boolean` | `true` | 否 | `:footer-visible="false"` | 底部按钮区是否可见；为 false 时隐藏整个页脚（默认取消/确定按钮与 footer 插槽一并隐藏），默认 true |
|
|
4413
4420
|
|
|
4414
4421
|
> 把未声明的入参与事件（`useAttrs()`）透传给 `el-dialog`，未列出的属性会继续下传
|
|
4415
4422
|
|
|
@@ -4465,7 +4472,7 @@ import { ZlDictTag } from '@zl-ui-kit/components'
|
|
|
4465
4472
|
|
|
4466
4473
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlDrawer/index.vue`</sub>
|
|
4467
4474
|
|
|
4468
|
-
**接口概览**：
|
|
4475
|
+
**接口概览**：7 props · 1 事件 · 2 插槽
|
|
4469
4476
|
|
|
4470
4477
|
**用法示例**
|
|
4471
4478
|
|
|
@@ -4475,11 +4482,11 @@ import { ZlDrawer } from '@zl-ui-kit/components'
|
|
|
4475
4482
|
</script>
|
|
4476
4483
|
|
|
4477
4484
|
<template>
|
|
4478
|
-
<ZlDrawer v-model:visible="value" title="新增" :on-ok="onOk" />
|
|
4485
|
+
<ZlDrawer v-model:visible="value" title="新增" :footer-visible="footerVisible.value" :on-ok="onOk" />
|
|
4479
4486
|
</template>
|
|
4480
4487
|
```
|
|
4481
4488
|
|
|
4482
|
-
> 示例中的 `onOk` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
4489
|
+
> 示例中的 `footerVisible`、`onOk` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
4483
4490
|
|
|
4484
4491
|
**插槽用法**
|
|
4485
4492
|
|
|
@@ -4494,14 +4501,15 @@ import { ZlDrawer } from '@zl-ui-kit/components'
|
|
|
4494
4501
|
|
|
4495
4502
|
**props**
|
|
4496
4503
|
|
|
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
|
|
4504
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4505
|
+
| ----------------------- | --------------------------------------------------- | ------- | ---- | ----------------------------------- | ------------------------------------------------------------------------------------------------- |
|
|
4506
|
+
| `visible` | `boolean` | `false` | 否 | `v-model:visible="value"` | `v-model` 绑定的值（`defineModel` 隐式声明） |
|
|
4507
|
+
| `onCancel` | `() => boolean \| void \| Promise<boolean \| void>` | — | 否 | `:on-cancel="async () => {}"` | 关闭前触发，返回 true 才会真正关闭 |
|
|
4508
|
+
| `onOk` | `() => void \| Promise<void>` | — | 否 | `:on-ok="async () => {}"` | 点击确定的回调，异步期间按钮保持 loading |
|
|
4509
|
+
| `autoCloseAfterConfirm` | `boolean` | `true` | 否 | `:auto-close-after-confirm="false"` | 确定回调结束后是否自动关闭抽屉，默认 true |
|
|
4510
|
+
| `readonly` | `boolean` | — | 否 | `readonly` | 只读模式：隐藏取消按钮，只留「关闭」 |
|
|
4511
|
+
| `loading` | `boolean` | — | 否 | `loading` | 内容区加载态，为 true 时显示遮罩 loading |
|
|
4512
|
+
| `footerVisible` | `boolean` | `true` | 否 | `:footer-visible="false"` | 底部按钮区是否可见；为 false 时隐藏整个页脚（默认取消/确定按钮与 footer 插槽一并隐藏），默认 true |
|
|
4505
4513
|
|
|
4506
4514
|
> 把未声明的入参与事件（`useAttrs()`）透传给 `el-drawer`，未列出的属性会继续下传
|
|
4507
4515
|
|
|
@@ -5209,12 +5217,12 @@ import { ZlPageContainer } from '@zl-ui-kit/components'
|
|
|
5209
5217
|
|
|
5210
5218
|
**插槽（slots）**
|
|
5211
5219
|
|
|
5212
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
5213
|
-
| ------------- | ---------- | ------------------------------------- |
|
|
5214
|
-
| `title` | — | `<template #title>…</template>` | 自定义标题内容，覆盖 title
|
|
5215
|
-
| `description` | — | `<template #description>…</template>` | 自定义描述内容，覆盖 description
|
|
5216
|
-
| `extra` | — | `<template #extra>…</template>` | 页头右侧自定义内容区（如新建、导出等操作按钮）
|
|
5217
|
-
| `content` | — | `<template #content>…</template>` |
|
|
5220
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
5221
|
+
| ------------- | ---------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
|
|
5222
|
+
| `title` | — | `<template #title>…</template>` | 自定义标题内容，覆盖 title |
|
|
5223
|
+
| `description` | — | `<template #description>…</template>` | 自定义描述内容，覆盖 description |
|
|
5224
|
+
| `extra` | — | `<template #extra>…</template>` | 页头右侧自定义内容区（如新建、导出等操作按钮） |
|
|
5225
|
+
| `content` | — | `<template #content>…</template>` | 页面主体内容区，占满页头以下的剩余高度；内容根节点自动铺满，无需再写 height:100%（如左列表 + 右详情的整块布局） |
|
|
5218
5226
|
|
|
5219
5227
|
#### `ZlPagination`
|
|
5220
5228
|
|
|
@@ -6755,7 +6763,7 @@ ZlGrid 子项 schema
|
|
|
6755
6763
|
|
|
6756
6764
|
| 组件 | 差异 | 迁移注意 |
|
|
6757
6765
|
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
6758
|
-
| `ZlDrawer` | `width` 映射到内部 `size`（默认 `600`）；`destroy-on-close` **默认 `true`**（EP 默认 `false`）；自带底部取消 /
|
|
6766
|
+
| `ZlDrawer` | `width` 映射到内部 `size`（默认 `600`）；`destroy-on-close` **默认 `true`**（EP 默认 `false`）；自带底部取消 / 确定按钮区（`footerVisible=false` 可整体收起，`ZlDialog` 同） | 抽屉内容**关闭即销毁**，内部状态不保留；需保留状态时显式传 `:destroy-on-close="false"` |
|
|
6759
6767
|
| `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
6768
|
| `ZlTable` | 列插槽按 `prop` 名命名，作用域含 `{ row, column, $index }`；暴露 `el-table` 的 15 个公开方法 + `elTable` getter | `tableRef.toggleRowSelection(row)` 等均有类型提示；其余方法走 `tableRef.elTable` |
|
|
6761
6769
|
| `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.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "ZL UI 业务组件库（Element Plus 体系，Zl 前缀）——首批：Icon/AutoTooltip/Tag/CornerTag/Text/Title/Copy/Empty/Pagination/DictTag",
|
|
6
6
|
"license": "MIT",
|
|
@@ -39,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/utils": "0.
|
|
44
|
-
"@zl-ui-kit/icons": "0.
|
|
42
|
+
"@zl-ui-kit/composables": "0.18.0",
|
|
43
|
+
"@zl-ui-kit/utils": "0.18.0",
|
|
44
|
+
"@zl-ui-kit/icons": "0.18.0"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@vueuse/core": "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
|
|
@@ -98,9 +98,9 @@
|
|
|
98
98
|
"@vue-office/pdf": "^2.0.10",
|
|
99
99
|
"@vue-office/pptx": "1.0.1",
|
|
100
100
|
"echarts": "^5.6.0",
|
|
101
|
-
"@
|
|
101
|
+
"@zl-ui-kit/theme": "0.18.0",
|
|
102
102
|
"@jichuang/eslint-config": "1.0.0",
|
|
103
|
-
"@
|
|
103
|
+
"@jichuang/tsconfig": "1.0.0",
|
|
104
104
|
"@jichuang/vite-config": "1.0.0"
|
|
105
105
|
},
|
|
106
106
|
"repository": {
|