@zl-ui-kit/components 0.17.0 → 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 +57 -47
- 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/ZlDictTag/index.vue.d.ts +1 -1
- 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/dist/components/ZlTag/ZlCornerTag.css +1 -1
- package/dist/components/ZlTag/ZlCornerTag.vue.d.ts +2 -1
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -642,7 +642,9 @@ presetIconifyIcon(icons)
|
|
|
642
642
|
> `#f00` 或 `rgb(255 0 0)` —— 单写 `red` 会被当成色板名（本库色板里确实有 `red`）。
|
|
643
643
|
|
|
644
644
|
**绶带尺寸**：梯形高度（斜带宽度）用 `ribbon-height` 控，数字按 `px`、字符串原样当 CSS 长度，默认 `28px`；
|
|
645
|
-
|
|
645
|
+
加大后斜带不会被裁掉（贴角的正方形底图会自动长开）。带内**文字字号跟着 `ribbon-height` 等比自适应**
|
|
646
|
+
（取高度的 `0.4` 倍，兜底在 `10px ~ 16px`：默认 `28px` ≈ `11px` 字，`ribbon-height="20"` 收到 `10px`、`="40"` 放到 `16px`），
|
|
647
|
+
不需要为窄带单独调字号；想固定字号就覆盖 `--zl-corner-tag-ribbon-font-size`。另外两支几何变量继续可覆盖：
|
|
646
648
|
`--zl-corner-tag-ribbon-size`（正方形边长，默认 `76px`）/ `--zl-corner-tag-ribbon-gap`（与角点留白，默认 `12px`）。
|
|
647
649
|
|
|
648
650
|
```vue
|
|
@@ -726,7 +728,7 @@ presetIconifyIcon(icons)
|
|
|
726
728
|
> 角标贴的是**父容器的角**：父级需 `position: relative`（卡片本身不是定位元素时要自己补一个），
|
|
727
729
|
> 圆角容器再加 `overflow: hidden`，避免角标压到圆角外的直角区域。`variant` 只在 `corner` 生效时起作用，四个角都支持；
|
|
728
730
|
> `ribbon` 的带两端与容器边缘齐平，但与角点留了一段距离（`--zl-corner-tag-ribbon-gap`，默认 `12px`），
|
|
729
|
-
> 梯形高度（斜带宽度）走 `ribbon-height`（默认 `28px`，`ZlDictTag`
|
|
731
|
+
> 梯形高度（斜带宽度）走 `ribbon-height`（默认 `28px`，`ZlDictTag` 上同名透传，带内字号自适应），正方形边长走
|
|
730
732
|
> `--zl-corner-tag-ribbon-size`（默认 `76px`）。
|
|
731
733
|
> 角标本体由 `ZlCornerTag` 提供，需要脱离字典单独用时直接写 `<ZlCornerTag variant="ribbon">委托任务</ZlCornerTag>`。
|
|
732
734
|
|
|
@@ -1339,7 +1341,7 @@ async function onSubmit() {
|
|
|
1339
1341
|
|
|
1340
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`。
|
|
1341
1343
|
|
|
1342
|
-
> 需要**对话框形态**（居中弹出、模态确认类）而非侧滑抽屉时，把 `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`。
|
|
1343
1345
|
|
|
1344
1346
|
#### 6.5.3 卡片列表范式：ZlCardPage + ZlCard + ZlAction
|
|
1345
1347
|
|
|
@@ -1437,8 +1439,8 @@ const items: FormItem[] = [
|
|
|
1437
1439
|
|
|
1438
1440
|
### ZlDrawer / ZlDialog / ZlPopconfirm / ZlSwitch
|
|
1439
1441
|
|
|
1440
|
-
- `ZlDrawer`：自绘 footer（okLoading/hideCancel/readonly 语义保持），`loading`→`v-loading
|
|
1441
|
-
- `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`。
|
|
1442
1444
|
- `ZlPopconfirm`：基于 `el-popover` 自绘面板，保留 title/content 双插槽与确认/取消事件。
|
|
1443
1445
|
- `ZlSwitch`：`active-value`/`inactive-value` 包装，文本在侧（`checked-text`）。
|
|
1444
1446
|
|
|
@@ -3686,9 +3688,9 @@ const { i18n } = useLocale({ messages })
|
|
|
3686
3688
|
| [`ZlCheckboxTag`](#zlcheckboxtag) | 主入口 | 7 | 1 | 1 | 0 |
|
|
3687
3689
|
| [`ZlCopy`](#zlcopy) | 主入口 | 2 | 0 | 2 | 0 |
|
|
3688
3690
|
| [`ZlDescription`](#zldescription) | 主入口 | 5 | 0 | 1 | 0 |
|
|
3689
|
-
| [`ZlDialog`](#zldialog) | 主入口 |
|
|
3691
|
+
| [`ZlDialog`](#zldialog) | 主入口 | 7 | 1 | 2 | 0 |
|
|
3690
3692
|
| [`ZlDictTag`](#zldicttag) | 主入口 | 8 | 0 | 0 | 0 |
|
|
3691
|
-
| [`ZlDrawer`](#zldrawer) | 主入口 |
|
|
3693
|
+
| [`ZlDrawer`](#zldrawer) | 主入口 | 7 | 1 | 2 | 0 |
|
|
3692
3694
|
| [`ZlDynamicComponent`](#zldynamiccomponent) | 主入口 | 3 | 2 | 0 | 0 |
|
|
3693
3695
|
| [`ZlPdfViewer`](#zlpdfviewer) | 主入口 | 2 | 0 | 0 | 0 |
|
|
3694
3696
|
| [`ZlLogin`](#zllogin) | 主入口 | 2 | 0 | 2 | 0 |
|
|
@@ -4371,7 +4373,7 @@ import { ZlDescription } from '@zl-ui-kit/components'
|
|
|
4371
4373
|
|
|
4372
4374
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlDialog/index.vue`</sub>
|
|
4373
4375
|
|
|
4374
|
-
**接口概览**：
|
|
4376
|
+
**接口概览**：7 props · 1 事件 · 2 插槽
|
|
4375
4377
|
|
|
4376
4378
|
**用法示例**
|
|
4377
4379
|
|
|
@@ -4381,11 +4383,17 @@ import { ZlDialog } from '@zl-ui-kit/components'
|
|
|
4381
4383
|
</script>
|
|
4382
4384
|
|
|
4383
4385
|
<template>
|
|
4384
|
-
<ZlDialog
|
|
4386
|
+
<ZlDialog
|
|
4387
|
+
v-model:visible="value"
|
|
4388
|
+
title="新增"
|
|
4389
|
+
width="480px"
|
|
4390
|
+
:footer-visible="footerVisible.value"
|
|
4391
|
+
:on-ok="onOk"
|
|
4392
|
+
/>
|
|
4385
4393
|
</template>
|
|
4386
4394
|
```
|
|
4387
4395
|
|
|
4388
|
-
> 示例中的 `onOk` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
4396
|
+
> 示例中的 `footerVisible`、`onOk` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
4389
4397
|
|
|
4390
4398
|
**插槽用法**
|
|
4391
4399
|
|
|
@@ -4400,14 +4408,15 @@ import { ZlDialog } from '@zl-ui-kit/components'
|
|
|
4400
4408
|
|
|
4401
4409
|
**props**
|
|
4402
4410
|
|
|
4403
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
4404
|
-
| ----------------------- | --------------------------------------------------- | ------- | ---- | ----------------------------------- |
|
|
4405
|
-
| `visible` | `boolean` | `false` | 否 | `v-model:visible="value"` | `v-model` 绑定的值（`defineModel` 隐式声明）
|
|
4406
|
-
| `onCancel` | `() => boolean \| void \| Promise<boolean \| void>` | — | 否 | `:on-cancel="async () => {}"` | 关闭前触发，返回 true 才会真正关闭
|
|
4407
|
-
| `onOk` | `() => void \| Promise<void>` | — | 否 | `:on-ok="async () => {}"` | 点击确定的回调，异步期间按钮保持 loading
|
|
4408
|
-
| `autoCloseAfterConfirm` | `boolean` | `true` | 否 | `:auto-close-after-confirm="false"` | 确定回调结束后是否自动关闭对话框，默认 true
|
|
4409
|
-
| `readonly` | `boolean` | — | 否 | `readonly` | 只读模式：隐藏取消按钮，只留「关闭」
|
|
4410
|
-
| `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 |
|
|
4411
4420
|
|
|
4412
4421
|
> 把未声明的入参与事件（`useAttrs()`）透传给 `el-dialog`，未列出的属性会继续下传
|
|
4413
4422
|
|
|
@@ -4446,16 +4455,16 @@ import { ZlDictTag } from '@zl-ui-kit/components'
|
|
|
4446
4455
|
|
|
4447
4456
|
**props**
|
|
4448
4457
|
|
|
4449
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
4450
|
-
| ------------- | ------------------------------------------------------------------------- | ----------- | ---- | ------------------- |
|
|
4451
|
-
| `dictKey` | `string` | — | 是 | `dict-key="gender"` | 字典键（对应全局字典缓存的键；外部直传数据也以该键写入共享缓存）。 ⚠️ 直传 `dict` 会**覆盖全局同名 key**，不要在列表里逐行传不同的 `dict`（最后一行会污染全站）， 行级字典请用独立 key（如 `` `resourceType.${row.id}` ``）。
|
|
4452
|
-
| `dict` | `DictItem[]` | — | 否 | `:dict="dict"` | 外部直传字典数据：无需依赖全局数据源即可翻译。格式同 `DictItem[]`（`{ label, value, icon?, color?, type? }`）。 `color` 可以是主题色名，也可以是 `#ff7d45` 这类原生 CSS 颜色值（角标上按纯色渲染，不自动渐变）
|
|
4453
|
-
| `corner` | `boolean \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `false` | 否 | `corner="top-left"` | 是否渲染成角标并指定方位，true 时为右上角
|
|
4454
|
-
| `variant` | `'badge' \| 'ribbon'` | `'badge'` | 否 | `variant="badge"` | 角标形态（`corner` 生效时才起作用）： `badge` 贴边小标签（默认）；`ribbon` 斜跨在角上的绶带（45° 文字，如卡片右上角的「委托任务」）。 绶带与角点留有间距、文案建议 ≤4 个字；梯形高度用 `ribbon-height`
|
|
4455
|
-
| `value` | `string` | — | 否 | `value="1"` | 待翻译的字典值，匹配不到时原样展示。 与字典项的 `value` 做**严格相等**比较，后端返回数字状态码时要先转成字符串 （`:value="String(row.status)"`，或在字典数据源里归一）。
|
|
4456
|
-
| `simple` | `boolean` | — | 否 | `simple` | 忽略字典项自带的颜色，改用标签默认配色
|
|
4457
|
-
| `iconVisible` | `boolean` | `undefined` | 否 | `icon-visible` | 是否展示字典项图标（默认 true）
|
|
4458
|
-
| `hideIcon` | `boolean` | `undefined` | 否 | `hide-icon` | 已废弃，请用 `iconVisible` 控制图标显隐
|
|
4458
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4459
|
+
| ------------- | ------------------------------------------------------------------------- | ----------- | ---- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
4460
|
+
| `dictKey` | `string` | — | 是 | `dict-key="gender"` | 字典键（对应全局字典缓存的键；外部直传数据也以该键写入共享缓存）。 ⚠️ 直传 `dict` 会**覆盖全局同名 key**，不要在列表里逐行传不同的 `dict`（最后一行会污染全站）， 行级字典请用独立 key（如 `` `resourceType.${row.id}` ``）。 |
|
|
4461
|
+
| `dict` | `DictItem[]` | — | 否 | `:dict="dict"` | 外部直传字典数据：无需依赖全局数据源即可翻译。格式同 `DictItem[]`（`{ label, value, icon?, color?, type? }`）。 `color` 可以是主题色名，也可以是 `#ff7d45` 这类原生 CSS 颜色值（角标上按纯色渲染，不自动渐变） |
|
|
4462
|
+
| `corner` | `boolean \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `false` | 否 | `corner="top-left"` | 是否渲染成角标并指定方位，true 时为右上角 |
|
|
4463
|
+
| `variant` | `'badge' \| 'ribbon'` | `'badge'` | 否 | `variant="badge"` | 角标形态（`corner` 生效时才起作用）： `badge` 贴边小标签（默认）；`ribbon` 斜跨在角上的绶带（45° 文字，如卡片右上角的「委托任务」）。 绶带与角点留有间距、文案建议 ≤4 个字；梯形高度用 `ribbon-height` 透传（带内字号跟着高度等比缩放）， 尺寸/留白仍走 CSS 变量 `--zl-corner-tag-ribbon-size` / `--zl-corner-tag-ribbon-gap`。 |
|
|
4464
|
+
| `value` | `string` | — | 否 | `value="1"` | 待翻译的字典值，匹配不到时原样展示。 与字典项的 `value` 做**严格相等**比较，后端返回数字状态码时要先转成字符串 （`:value="String(row.status)"`，或在字典数据源里归一）。 |
|
|
4465
|
+
| `simple` | `boolean` | — | 否 | `simple` | 忽略字典项自带的颜色，改用标签默认配色 |
|
|
4466
|
+
| `iconVisible` | `boolean` | `undefined` | 否 | `icon-visible` | 是否展示字典项图标（默认 true） |
|
|
4467
|
+
| `hideIcon` | `boolean` | `undefined` | 否 | `hide-icon` | 已废弃，请用 `iconVisible` 控制图标显隐 |
|
|
4459
4468
|
|
|
4460
4469
|
> 把 `$attrs` 透传给 `zl-corner-tag`，未列出的属性会继续下传
|
|
4461
4470
|
|
|
@@ -4463,7 +4472,7 @@ import { ZlDictTag } from '@zl-ui-kit/components'
|
|
|
4463
4472
|
|
|
4464
4473
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlDrawer/index.vue`</sub>
|
|
4465
4474
|
|
|
4466
|
-
**接口概览**：
|
|
4475
|
+
**接口概览**：7 props · 1 事件 · 2 插槽
|
|
4467
4476
|
|
|
4468
4477
|
**用法示例**
|
|
4469
4478
|
|
|
@@ -4473,11 +4482,11 @@ import { ZlDrawer } from '@zl-ui-kit/components'
|
|
|
4473
4482
|
</script>
|
|
4474
4483
|
|
|
4475
4484
|
<template>
|
|
4476
|
-
<ZlDrawer v-model:visible="value" title="新增" :on-ok="onOk" />
|
|
4485
|
+
<ZlDrawer v-model:visible="value" title="新增" :footer-visible="footerVisible.value" :on-ok="onOk" />
|
|
4477
4486
|
</template>
|
|
4478
4487
|
```
|
|
4479
4488
|
|
|
4480
|
-
> 示例中的 `onOk` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
4489
|
+
> 示例中的 `footerVisible`、`onOk` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
4481
4490
|
|
|
4482
4491
|
**插槽用法**
|
|
4483
4492
|
|
|
@@ -4492,14 +4501,15 @@ import { ZlDrawer } from '@zl-ui-kit/components'
|
|
|
4492
4501
|
|
|
4493
4502
|
**props**
|
|
4494
4503
|
|
|
4495
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
4496
|
-
| ----------------------- | --------------------------------------------------- | ------- | ---- | ----------------------------------- |
|
|
4497
|
-
| `visible` | `boolean` | `false` | 否 | `v-model:visible="value"` | `v-model` 绑定的值（`defineModel` 隐式声明）
|
|
4498
|
-
| `onCancel` | `() => boolean \| void \| Promise<boolean \| void>` | — | 否 | `:on-cancel="async () => {}"` | 关闭前触发，返回 true 才会真正关闭
|
|
4499
|
-
| `onOk` | `() => void \| Promise<void>` | — | 否 | `:on-ok="async () => {}"` | 点击确定的回调，异步期间按钮保持 loading
|
|
4500
|
-
| `autoCloseAfterConfirm` | `boolean` | `true` | 否 | `:auto-close-after-confirm="false"` | 确定回调结束后是否自动关闭抽屉，默认 true
|
|
4501
|
-
| `readonly` | `boolean` | — | 否 | `readonly` | 只读模式：隐藏取消按钮，只留「关闭」
|
|
4502
|
-
| `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 |
|
|
4503
4513
|
|
|
4504
4514
|
> 把未声明的入参与事件（`useAttrs()`）透传给 `el-drawer`，未列出的属性会继续下传
|
|
4505
4515
|
|
|
@@ -5117,7 +5127,7 @@ import { ZlCornerTag } from '@zl-ui-kit/components'
|
|
|
5117
5127
|
| `color` | `string` | — | 否 | `color="#409eff"` | 背景色。两种写法： ① 内置主题色名（`primary` / `success` / `green` …），走色板 6→3 渐变； ② 原生 CSS 颜色值（`#ff7d45` / `rgb(255 125 69)` / `var(--zl-primary-6)`），**原样纯色填充、不自动渐变**， 需要渐变时自己传 `linear-gradient(...)`。 含 `#` / `(` / 逗号 / 空格的值一律按 ② 处理（想写 `red` 这类关键字请写成 `#f00`，否则会被当成色名）。 |
|
|
5118
5128
|
| `position` | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `'top-right'` | 否 | `position="top-left"` | 贴在容器的哪个角，默认右上角 |
|
|
5119
5129
|
| `variant` | `'badge' \| 'ribbon'` | `'badge'` | 否 | `variant="badge"` | 形态：`badge` 贴边小标签（默认）/ `ribbon` 斜跨角上的绶带 |
|
|
5120
|
-
| `ribbonHeight` | `number \| string` | — | 否 | `:ribbon-height="ribbonHeight"` | 绶带的梯形高度（斜带宽度的垂直值），只在 `variant="ribbon"` 下生效。 数字按 px 处理，字符串原样当 CSS 长度（`36px` / `2rem`）；默认 `28px`。
|
|
5130
|
+
| `ribbonHeight` | `number \| string` | — | 否 | `:ribbon-height="ribbonHeight"` | 绶带的梯形高度（斜带宽度的垂直值），只在 `variant="ribbon"` 下生效。 数字按 px 处理，字符串原样当 CSS 长度（`36px` / `2rem`）；默认 `28px`。 加大后正方形底图会自动跟着长开，不会把斜带裁掉；带内文字字号也按该高度等比缩放， 窄带不会把字撑出带外、宽带也不会显得字过小（可用 CSS 变量 `--zl-corner-tag-ribbon-font-size` 固定字号）。 |
|
|
5121
5131
|
|
|
5122
5132
|
**插槽（slots）**
|
|
5123
5133
|
|
|
@@ -5207,12 +5217,12 @@ import { ZlPageContainer } from '@zl-ui-kit/components'
|
|
|
5207
5217
|
|
|
5208
5218
|
**插槽（slots）**
|
|
5209
5219
|
|
|
5210
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
5211
|
-
| ------------- | ---------- | ------------------------------------- |
|
|
5212
|
-
| `title` | — | `<template #title>…</template>` | 自定义标题内容，覆盖 title
|
|
5213
|
-
| `description` | — | `<template #description>…</template>` | 自定义描述内容，覆盖 description
|
|
5214
|
-
| `extra` | — | `<template #extra>…</template>` | 页头右侧自定义内容区（如新建、导出等操作按钮）
|
|
5215
|
-
| `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%（如左列表 + 右详情的整块布局） |
|
|
5216
5226
|
|
|
5217
5227
|
#### `ZlPagination`
|
|
5218
5228
|
|
|
@@ -6753,7 +6763,7 @@ ZlGrid 子项 schema
|
|
|
6753
6763
|
|
|
6754
6764
|
| 组件 | 差异 | 迁移注意 |
|
|
6755
6765
|
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
6756
|
-
| `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"` |
|
|
6757
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` |
|
|
6758
6768
|
| `ZlTable` | 列插槽按 `prop` 名命名，作用域含 `{ row, column, $index }`；暴露 `el-table` 的 15 个公开方法 + `elTable` getter | `tableRef.toggleRowSelection(row)` 等均有类型提示；其余方法走 `tableRef.elTable` |
|
|
6759
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
|
});
|
|
@@ -16,7 +16,7 @@ type __VLS_Props = {
|
|
|
16
16
|
/**
|
|
17
17
|
* 角标形态（`corner` 生效时才起作用）：
|
|
18
18
|
* `badge` 贴边小标签（默认）；`ribbon` 斜跨在角上的绶带（45° 文字，如卡片右上角的「委托任务」）。
|
|
19
|
-
* 绶带与角点留有间距、文案建议 ≤4 个字；梯形高度用 `ribbon-height`
|
|
19
|
+
* 绶带与角点留有间距、文案建议 ≤4 个字；梯形高度用 `ribbon-height` 透传（带内字号跟着高度等比缩放），
|
|
20
20
|
* 尺寸/留白仍走 CSS 变量 `--zl-corner-tag-ribbon-size` / `--zl-corner-tag-ribbon-gap`。
|
|
21
21
|
*/
|
|
22
22
|
variant?: 'badge' | 'ribbon';
|
|
@@ -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
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.zl-corner-tag{position:absolute;z-index:1;display:inline-flex;align-items:center;font-size:12px;line-height:20px;font-weight:600;padding:2px 8px;color:#fff;cursor:default}.zl-corner-tag-color-bg{background-image:linear-gradient(to right,var(--zl-bg-6),var(--zl-bg-3))}.zl-corner-tag-color-blue{background-image:linear-gradient(to right,var(--zl-blue-6),var(--zl-blue-3))}.zl-corner-tag-color-border{background-image:linear-gradient(to right,var(--zl-border-6),var(--zl-border-3))}.zl-corner-tag-color-cyan{background-image:linear-gradient(to right,var(--zl-cyan-6),var(--zl-cyan-3))}.zl-corner-tag-color-danger{background-image:linear-gradient(to right,var(--zl-danger-6),var(--zl-danger-3))}.zl-corner-tag-color-fill{background-image:linear-gradient(to right,var(--zl-fill-6),var(--zl-fill-3))}.zl-corner-tag-color-gold{background-image:linear-gradient(to right,var(--zl-gold-6),var(--zl-gold-3))}.zl-corner-tag-color-gray{background-image:linear-gradient(to right,var(--zl-gray-6),var(--zl-gray-3))}.zl-corner-tag-color-green{background-image:linear-gradient(to right,var(--zl-green-6),var(--zl-green-3))}.zl-corner-tag-color-lime{background-image:linear-gradient(to right,var(--zl-lime-6),var(--zl-lime-3))}.zl-corner-tag-color-link{background-image:linear-gradient(to right,var(--zl-link-6),var(--zl-link-3))}.zl-corner-tag-color-magenta{background-image:linear-gradient(to right,var(--zl-magenta-6),var(--zl-magenta-3))}.zl-corner-tag-color-modo{background-image:linear-gradient(to right,var(--zl-modo-6),var(--zl-modo-3))}.zl-corner-tag-color-neutral{background-image:linear-gradient(to right,var(--zl-neutral-6),var(--zl-neutral-3))}.zl-corner-tag-color-orange{background-image:linear-gradient(to right,var(--zl-orange-6),var(--zl-orange-3))}.zl-corner-tag-color-orangered{background-image:linear-gradient(to right,var(--zl-orangered-6),var(--zl-orangered-3))}.zl-corner-tag-color-pinkpurple{background-image:linear-gradient(to right,var(--zl-pinkpurple-6),var(--zl-pinkpurple-3))}.zl-corner-tag-color-primary{background-image:linear-gradient(to right,var(--zl-primary-6),var(--zl-primary-3))}.zl-corner-tag-color-purple{background-image:linear-gradient(to right,var(--zl-purple-6),var(--zl-purple-3))}.zl-corner-tag-color-red{background-image:linear-gradient(to right,var(--zl-red-6),var(--zl-red-3))}.zl-corner-tag-color-success{background-image:linear-gradient(to right,var(--zl-success-6),var(--zl-success-3))}.zl-corner-tag-color-text{background-image:linear-gradient(to right,var(--zl-text-6),var(--zl-text-3))}.zl-corner-tag-color-warning{background-image:linear-gradient(to right,var(--zl-warning-6),var(--zl-warning-3))}.zl-corner-tag-color-yellow{background-image:linear-gradient(to right,var(--zl-yellow-6),var(--zl-yellow-3))}.zl-corner-tag-position-top-left{top:0;left:0;border-bottom-right-radius:var(--zl-radius-xl, 12px)}.zl-corner-tag-position-top-right{top:0;right:0;border-bottom-left-radius:var(--zl-radius-xl, 12px)}.zl-corner-tag-position-bottom-left{bottom:0;left:0;border-top-right-radius:var(--zl-radius-xl, 12px)}.zl-corner-tag-position-bottom-right{bottom:0;right:0;border-top-left-radius:var(--zl-radius-xl, 12px)}.zl-corner-tag-variant-ribbon{--zl-ribbon-size: var(--zl-corner-tag-ribbon-size, 76px);--zl-ribbon-gap: var(--zl-corner-tag-ribbon-gap, 12px);--zl-ribbon-width: var(--zl-corner-tag-ribbon-width, 28px);--zl-ribbon-k: 1.4142;--zl-ribbon-center: calc((var(--zl-ribbon-gap) * 2 + var(--zl-ribbon-width)) * .35355);--zl-ribbon-box: max( var(--zl-ribbon-size), calc((var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)) );display:block;width:var(--zl-ribbon-box);height:var(--zl-ribbon-box);padding:0;overflow:hidden}.zl-corner-tag-variant-ribbon .zl-corner-tag__icon{display:none}.zl-corner-tag-variant-ribbon .zl-corner-tag__text{position:absolute;white-space:nowrap;font-size:
|
|
1
|
+
@charset "UTF-8";.zl-corner-tag{position:absolute;z-index:1;display:inline-flex;align-items:center;font-size:12px;line-height:20px;font-weight:600;padding:2px 8px;color:#fff;cursor:default}.zl-corner-tag-color-bg{background-image:linear-gradient(to right,var(--zl-bg-6),var(--zl-bg-3))}.zl-corner-tag-color-blue{background-image:linear-gradient(to right,var(--zl-blue-6),var(--zl-blue-3))}.zl-corner-tag-color-border{background-image:linear-gradient(to right,var(--zl-border-6),var(--zl-border-3))}.zl-corner-tag-color-cyan{background-image:linear-gradient(to right,var(--zl-cyan-6),var(--zl-cyan-3))}.zl-corner-tag-color-danger{background-image:linear-gradient(to right,var(--zl-danger-6),var(--zl-danger-3))}.zl-corner-tag-color-fill{background-image:linear-gradient(to right,var(--zl-fill-6),var(--zl-fill-3))}.zl-corner-tag-color-gold{background-image:linear-gradient(to right,var(--zl-gold-6),var(--zl-gold-3))}.zl-corner-tag-color-gray{background-image:linear-gradient(to right,var(--zl-gray-6),var(--zl-gray-3))}.zl-corner-tag-color-green{background-image:linear-gradient(to right,var(--zl-green-6),var(--zl-green-3))}.zl-corner-tag-color-lime{background-image:linear-gradient(to right,var(--zl-lime-6),var(--zl-lime-3))}.zl-corner-tag-color-link{background-image:linear-gradient(to right,var(--zl-link-6),var(--zl-link-3))}.zl-corner-tag-color-magenta{background-image:linear-gradient(to right,var(--zl-magenta-6),var(--zl-magenta-3))}.zl-corner-tag-color-modo{background-image:linear-gradient(to right,var(--zl-modo-6),var(--zl-modo-3))}.zl-corner-tag-color-neutral{background-image:linear-gradient(to right,var(--zl-neutral-6),var(--zl-neutral-3))}.zl-corner-tag-color-orange{background-image:linear-gradient(to right,var(--zl-orange-6),var(--zl-orange-3))}.zl-corner-tag-color-orangered{background-image:linear-gradient(to right,var(--zl-orangered-6),var(--zl-orangered-3))}.zl-corner-tag-color-pinkpurple{background-image:linear-gradient(to right,var(--zl-pinkpurple-6),var(--zl-pinkpurple-3))}.zl-corner-tag-color-primary{background-image:linear-gradient(to right,var(--zl-primary-6),var(--zl-primary-3))}.zl-corner-tag-color-purple{background-image:linear-gradient(to right,var(--zl-purple-6),var(--zl-purple-3))}.zl-corner-tag-color-red{background-image:linear-gradient(to right,var(--zl-red-6),var(--zl-red-3))}.zl-corner-tag-color-success{background-image:linear-gradient(to right,var(--zl-success-6),var(--zl-success-3))}.zl-corner-tag-color-text{background-image:linear-gradient(to right,var(--zl-text-6),var(--zl-text-3))}.zl-corner-tag-color-warning{background-image:linear-gradient(to right,var(--zl-warning-6),var(--zl-warning-3))}.zl-corner-tag-color-yellow{background-image:linear-gradient(to right,var(--zl-yellow-6),var(--zl-yellow-3))}.zl-corner-tag-position-top-left{top:0;left:0;border-bottom-right-radius:var(--zl-radius-xl, 12px)}.zl-corner-tag-position-top-right{top:0;right:0;border-bottom-left-radius:var(--zl-radius-xl, 12px)}.zl-corner-tag-position-bottom-left{bottom:0;left:0;border-top-right-radius:var(--zl-radius-xl, 12px)}.zl-corner-tag-position-bottom-right{bottom:0;right:0;border-top-left-radius:var(--zl-radius-xl, 12px)}.zl-corner-tag-variant-ribbon{--zl-ribbon-size: var(--zl-corner-tag-ribbon-size, 76px);--zl-ribbon-gap: var(--zl-corner-tag-ribbon-gap, 12px);--zl-ribbon-width: var(--zl-corner-tag-ribbon-width, 28px);--zl-ribbon-k: 1.4142;--zl-ribbon-font-size: var( --zl-corner-tag-ribbon-font-size, clamp(10px, calc(var(--zl-ribbon-width) * .4), 16px) );--zl-ribbon-center: calc((var(--zl-ribbon-gap) * 2 + var(--zl-ribbon-width)) * .35355);--zl-ribbon-box: max( var(--zl-ribbon-size), calc((var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)) );display:block;width:var(--zl-ribbon-box);height:var(--zl-ribbon-box);padding:0;overflow:hidden}.zl-corner-tag-variant-ribbon .zl-corner-tag__icon{display:none}.zl-corner-tag-variant-ribbon .zl-corner-tag__text{position:absolute;white-space:nowrap;font-size:var(--zl-ribbon-font-size);line-height:1}.zl-corner-tag-variant-ribbon.zl-corner-tag-position-top-right{clip-path:polygon(calc(100% - (var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)) 0,calc(100% - var(--zl-ribbon-gap) * var(--zl-ribbon-k)) 0,100% calc(var(--zl-ribbon-gap) * var(--zl-ribbon-k)),100% calc((var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)))}.zl-corner-tag-variant-ribbon.zl-corner-tag-position-top-right .zl-corner-tag__text{top:var(--zl-ribbon-center);left:calc(100% - var(--zl-ribbon-center));transform:translate(-50%,-50%) rotate(45deg)}.zl-corner-tag-variant-ribbon.zl-corner-tag-position-top-left{clip-path:polygon(calc((var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)) 0,calc(var(--zl-ribbon-gap) * var(--zl-ribbon-k)) 0,0 calc(var(--zl-ribbon-gap) * var(--zl-ribbon-k)),0 calc((var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)))}.zl-corner-tag-variant-ribbon.zl-corner-tag-position-top-left .zl-corner-tag__text{top:var(--zl-ribbon-center);left:var(--zl-ribbon-center);transform:translate(-50%,-50%) rotate(-45deg)}.zl-corner-tag-variant-ribbon.zl-corner-tag-position-bottom-right{clip-path:polygon(calc(100% - (var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)) 100%,calc(100% - var(--zl-ribbon-gap) * var(--zl-ribbon-k)) 100%,100% calc(100% - var(--zl-ribbon-gap) * var(--zl-ribbon-k)),100% calc(100% - (var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)))}.zl-corner-tag-variant-ribbon.zl-corner-tag-position-bottom-right .zl-corner-tag__text{top:calc(100% - var(--zl-ribbon-center));left:calc(100% - var(--zl-ribbon-center));transform:translate(-50%,-50%) rotate(-45deg)}.zl-corner-tag-variant-ribbon.zl-corner-tag-position-bottom-left{clip-path:polygon(calc((var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)) 100%,calc(var(--zl-ribbon-gap) * var(--zl-ribbon-k)) 100%,0 calc(100% - var(--zl-ribbon-gap) * var(--zl-ribbon-k)),0 calc(100% - (var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)))}.zl-corner-tag-variant-ribbon.zl-corner-tag-position-bottom-left .zl-corner-tag__text{top:calc(100% - var(--zl-ribbon-center));left:var(--zl-ribbon-center);transform:translate(-50%,-50%) rotate(45deg)}
|
|
@@ -16,7 +16,8 @@ type __VLS_Props = {
|
|
|
16
16
|
/**
|
|
17
17
|
* 绶带的梯形高度（斜带宽度的垂直值），只在 `variant="ribbon"` 下生效。
|
|
18
18
|
* 数字按 px 处理，字符串原样当 CSS 长度（`36px` / `2rem`）；默认 `28px`。
|
|
19
|
-
*
|
|
19
|
+
* 加大后正方形底图会自动跟着长开，不会把斜带裁掉；带内文字字号也按该高度等比缩放，
|
|
20
|
+
* 窄带不会把字撑出带外、宽带也不会显得字过小（可用 CSS 变量 `--zl-corner-tag-ribbon-font-size` 固定字号）。
|
|
20
21
|
*/
|
|
21
22
|
ribbonHeight?: number | string;
|
|
22
23
|
};
|
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/
|
|
43
|
-
"@zl-ui-kit/
|
|
44
|
-
"@zl-ui-kit/
|
|
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,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
|
-
"@
|
|
102
|
-
"@jichuang/tsconfig": "1.0.0",
|
|
101
|
+
"@zl-ui-kit/theme": "0.18.0",
|
|
103
102
|
"@jichuang/eslint-config": "1.0.0",
|
|
104
|
-
"@
|
|
103
|
+
"@jichuang/tsconfig": "1.0.0",
|
|
104
|
+
"@jichuang/vite-config": "1.0.0"
|
|
105
105
|
},
|
|
106
106
|
"repository": {
|
|
107
107
|
"type": "git",
|