@zl-ui-kit/components 0.18.4 → 0.18.6
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 +39 -28
- package/dist/components/ZlAction/List.vue.mjs +47 -44
- package/dist/components/ZlAction/index.vue.d.ts +7 -1
- package/dist/components/ZlAction/index.vue.mjs +12 -8
- package/dist/components/ZlAction/types.d.ts +5 -2
- package/dist/components/ZlCheckboxTag/index.css +1 -1
- package/dist/components/ZlCheckboxTag/index.vue.d.ts +4 -4
- package/dist/components/ZlCheckboxTag/index.vue.mjs +34 -30
- package/dist/components/ZlDictTag/index.vue.d.ts +6 -0
- package/dist/components/ZlDictTag/index.vue.mjs +31 -26
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1643,7 +1643,10 @@ const statusActions = (item: Item): ActionItem[] => [
|
|
|
1643
1643
|
插槽内容接入父组件的渲染上下文，数据变化会正常更新；`v-model` 双向绑定当前页签 key。常用场景
|
|
1644
1644
|
（分页卡片的分类筛选）见 §6.3 ②。
|
|
1645
1645
|
- `ZlDynamicComponent`：schema→VNode 渲染引擎，默认 `el-input`。
|
|
1646
|
-
- `ZlGrid`(+`ZlGridItem`)：自绘栅格，label
|
|
1646
|
+
- `ZlGrid`(+`ZlGridItem`)：自绘栅格，label 自适应/省略提示/字典。
|
|
1647
|
+
**每项可独立跨列**：`IGridItem.size` 设该项跨列数（默认 1，`'auto'` 占满所在行剩余列），容器 `cols` 是总列数。
|
|
1648
|
+
配合使用可排不规则栅格——如 `cols=4` 时前四项 `size: 2`、后两项 `size: 1`，
|
|
1649
|
+
渲染为 `[A|A|B|B] / [C|C|D|D] / [E|F|·|·]`（前四项两两占一整行，后两项各占半行）。
|
|
1647
1650
|
|
|
1648
1651
|
### ZlTree —— 树形控件（多选 / 暴露方法）
|
|
1649
1652
|
|
|
@@ -3818,7 +3821,7 @@ const { i18n } = useLocale({ messages })
|
|
|
3818
3821
|
|
|
3819
3822
|
| 组件 | 入口 | props | 事件 | 插槽 | 暴露 |
|
|
3820
3823
|
| ------------------------------------------- | ------------------- | ----- | ---- | ---- | ---- |
|
|
3821
|
-
| [`ZlAction`](#zlaction) | 主入口 |
|
|
3824
|
+
| [`ZlAction`](#zlaction) | 主入口 | 1 | 0 | 0 | 0 |
|
|
3822
3825
|
| [`ZlActionList`](#zlactionlist) | 主入口 | 6 | 1 | 1 | 0 |
|
|
3823
3826
|
| [`ZlAddSub`](#zladdsub) | 主入口 | 2 | 1 | 1 | 0 |
|
|
3824
3827
|
| [`ZlAppLayout`](#zlapplayout) | 主入口 | 1 | 0 | 8 | 0 |
|
|
@@ -3834,7 +3837,7 @@ const { i18n } = useLocale({ messages })
|
|
|
3834
3837
|
| [`ZlCopy`](#zlcopy) | 主入口 | 2 | 0 | 2 | 0 |
|
|
3835
3838
|
| [`ZlDescription`](#zldescription) | 主入口 | 5 | 0 | 1 | 0 |
|
|
3836
3839
|
| [`ZlDialog`](#zldialog) | 主入口 | 7 | 1 | 2 | 0 |
|
|
3837
|
-
| [`ZlDictTag`](#zldicttag) | 主入口 |
|
|
3840
|
+
| [`ZlDictTag`](#zldicttag) | 主入口 | 10 | 0 | 0 | 0 |
|
|
3838
3841
|
| [`ZlDrawer`](#zldrawer) | 主入口 | 7 | 1 | 2 | 0 |
|
|
3839
3842
|
| [`ZlDynamicComponent`](#zldynamiccomponent) | 主入口 | 3 | 2 | 0 | 0 |
|
|
3840
3843
|
| [`ZlPdfViewer`](#zlpdfviewer) | 主入口 | 2 | 0 | 0 | 0 |
|
|
@@ -3884,6 +3887,8 @@ const { i18n } = useLocale({ messages })
|
|
|
3884
3887
|
|
|
3885
3888
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlAction/index.vue`</sub>
|
|
3886
3889
|
|
|
3890
|
+
**接口概览**：1 props
|
|
3891
|
+
|
|
3887
3892
|
**用法示例**
|
|
3888
3893
|
|
|
3889
3894
|
```vue
|
|
@@ -3898,9 +3903,13 @@ import { ZlAction } from '@zl-ui-kit/components'
|
|
|
3898
3903
|
|
|
3899
3904
|
> 示例中的 `actions` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
3900
3905
|
|
|
3901
|
-
|
|
3906
|
+
**props**
|
|
3902
3907
|
|
|
3903
|
-
|
|
3908
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3909
|
+
| ----------- | -------- | ------ | ---- | ----------------- | ----------------------------------------------------------------- |
|
|
3910
|
+
| `listCount` | `number` | `2` | 否 | `:list-count="1"` | 直接展示的操作数，超出收入"更多"下拉，默认 2；透传给 ZlActionList |
|
|
3911
|
+
|
|
3912
|
+
> 把 `$attrs` 透传给 `ZlActionList`，未列出的属性会继续下传
|
|
3904
3913
|
|
|
3905
3914
|
#### `ZlActionList`
|
|
3906
3915
|
|
|
@@ -4404,15 +4413,15 @@ import { ZlCheckboxTag } from '@zl-ui-kit/components'
|
|
|
4404
4413
|
|
|
4405
4414
|
**props**
|
|
4406
4415
|
|
|
4407
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
4408
|
-
| ------------ | ------------------------------- | ---------- | ---- | -------------------- |
|
|
4409
|
-
| `modelValue` | `any` | — | 否 | `v-model="value"` | `v-model` 绑定的值（`defineModel` 隐式声明）
|
|
4410
|
-
| `options` | `CheckboxTagOption[]` | `() => []` | 否 | `:options="options"` | 标签候选列表，每项可配图标与互斥组
|
|
4411
|
-
| `single` | `boolean` | — | 否 | `single` | 单选模式（值为单值）
|
|
4412
|
-
| `rounded` | `boolean`
|
|
4413
|
-
| `bordered` | `boolean` | `true` | 否 | `:bordered="false"` |
|
|
4414
|
-
| `fill` | `boolean` | `true` | 否 | `:fill="false"` | 是否填充背景色，默认开启
|
|
4415
|
-
| `size` | `'mini' \| 'small' \| 'medium'` | `'small'` | 否 | `size="mini"` | 标签尺寸档位，默认 small
|
|
4416
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4417
|
+
| ------------ | ------------------------------- | ---------- | ---- | -------------------- | ----------------------------------------------------------------------------------------- |
|
|
4418
|
+
| `modelValue` | `any` | — | 否 | `v-model="value"` | `v-model` 绑定的值（`defineModel` 隐式声明） |
|
|
4419
|
+
| `options` | `CheckboxTagOption[]` | `() => []` | 否 | `:options="options"` | 标签候选列表，每项可配图标与互斥组 |
|
|
4420
|
+
| `single` | `boolean` | — | 否 | `single` | 单选模式（值为单值） |
|
|
4421
|
+
| `rounded` | `boolean \| number \| string` | `true` | 否 | `:rounded="rounded"` | 是否圆角显示，默认开启；也可为具体圆角值（数字 px 或 CSS 长度），false 关闭（直角/small） |
|
|
4422
|
+
| `bordered` | `boolean` | `true` | 否 | `:bordered="false"` | 是否显示边框，默认开启 |
|
|
4423
|
+
| `fill` | `boolean` | `true` | 否 | `:fill="false"` | 是否填充背景色，默认开启 |
|
|
4424
|
+
| `size` | `'mini' \| 'small' \| 'medium'` | `'small'` | 否 | `size="mini"` | 标签尺寸档位，默认 small |
|
|
4416
4425
|
|
|
4417
4426
|
**事件（emits）**
|
|
4418
4427
|
|
|
@@ -4583,7 +4592,7 @@ import { ZlDialog } from '@zl-ui-kit/components'
|
|
|
4583
4592
|
|
|
4584
4593
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlDictTag/index.vue`</sub>
|
|
4585
4594
|
|
|
4586
|
-
**接口概览**：
|
|
4595
|
+
**接口概览**：10 props
|
|
4587
4596
|
|
|
4588
4597
|
**用法示例**
|
|
4589
4598
|
|
|
@@ -4611,6 +4620,8 @@ import { ZlDictTag } from '@zl-ui-kit/components'
|
|
|
4611
4620
|
| `simple` | `boolean` | — | 否 | `simple` | 忽略字典项自带的颜色，改用标签默认配色 |
|
|
4612
4621
|
| `iconVisible` | `boolean` | `undefined` | 否 | `icon-visible` | 是否展示字典项图标（默认 true） |
|
|
4613
4622
|
| `hideIcon` | `boolean` | `undefined` | 否 | `hide-icon` | 已废弃，请用 `iconVisible` 控制图标显隐 |
|
|
4623
|
+
| `fill` | `boolean` | `false` | 否 | `fill` | 是否使用填充背景（配合字典项 `color`/`type` 显示浅色底色，如 `--zl-<色>-1`），透传给内部 ZlTag |
|
|
4624
|
+
| `rounded` | `boolean` | `false` | 否 | `rounded` | 是否使用全圆角样式，透传给内部 ZlTag |
|
|
4614
4625
|
|
|
4615
4626
|
> 把 `$attrs` 透传给 `zl-corner-tag`，未列出的属性会继续下传
|
|
4616
4627
|
|
|
@@ -5003,7 +5014,7 @@ import { ZlGrid } from '@zl-ui-kit/components'
|
|
|
5003
5014
|
</script>
|
|
5004
5015
|
|
|
5005
5016
|
<template>
|
|
5006
|
-
<ZlGrid :data="data" :cols="
|
|
5017
|
+
<ZlGrid :data="data" :cols="4" border :grid="grid" />
|
|
5007
5018
|
</template>
|
|
5008
5019
|
```
|
|
5009
5020
|
|
|
@@ -6657,18 +6668,18 @@ import { ZlFileViewer } from '@zl-ui-kit/components/file-preview'
|
|
|
6657
6668
|
|
|
6658
6669
|
操作项模型（ZlActionList / ZlTable actions 列共用）
|
|
6659
6670
|
|
|
6660
|
-
| 字段 | 类型 | 必填 | 说明
|
|
6661
|
-
| ------------ | ------------------------------------------ | ---- |
|
|
6662
|
-
| `label` | `string` | 是 | 操作文案
|
|
6663
|
-
| `icon` | `string` | 否 | 图标（`zl:` 前缀走 ZlIcon，其余按 iconify/EP 规则）
|
|
6664
|
-
| `iconProps` | `Record<string, any>` | 否 | 传给图标组件的 props
|
|
6665
|
-
| `iconClass` | `string` | 否 | 图标自定义类名
|
|
6666
|
-
| `tooltip` | `boolean`
|
|
6667
|
-
| `disabled` | `boolean` | 否 | 禁用（点击无响应）
|
|
6668
|
-
| `divided` | `boolean` | 否 | 与下一项之间显示分割线
|
|
6669
|
-
| `permission` | `string \| string[]` | 否 | 权限键（三段式，经 usePermission 校验）
|
|
6670
|
-
| `visible` | `boolean \| ((...args: any[]) => boolean)` | 否 | 显隐控制：布尔值直接判定；函数接收 `visibleArgs`（末尾追加 action 自身）后判定。 与权限取交集：两者都通过才展示。
|
|
6671
|
-
| `handler` | `(...args: any[]) => void` | 否 | 点击处理（接收 actionArgs）
|
|
6671
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
6672
|
+
| ------------ | ------------------------------------------ | ---- | ------------------------------------------------------------------------------------------------------------------------------ |
|
|
6673
|
+
| `label` | `string` | 是 | 操作文案 |
|
|
6674
|
+
| `icon` | `string` | 否 | 图标（`zl:` 前缀走 ZlIcon，其余按 iconify/EP 规则） |
|
|
6675
|
+
| `iconProps` | `Record<string, any>` | 否 | 传给图标组件的 props |
|
|
6676
|
+
| `iconClass` | `string` | 否 | 图标自定义类名 |
|
|
6677
|
+
| `tooltip` | `boolean \| string` | 否 | 提示词：`true` 用 `label` 作为提示；传字符串则直接作为提示词（无需同时配置 `label`）。 仅对纯图标操作项生效（配置了 `icon`）。 |
|
|
6678
|
+
| `disabled` | `boolean` | 否 | 禁用（点击无响应） |
|
|
6679
|
+
| `divided` | `boolean` | 否 | 与下一项之间显示分割线 |
|
|
6680
|
+
| `permission` | `string \| string[]` | 否 | 权限键（三段式，经 usePermission 校验） |
|
|
6681
|
+
| `visible` | `boolean \| ((...args: any[]) => boolean)` | 否 | 显隐控制：布尔值直接判定；函数接收 `visibleArgs`（末尾追加 action 自身）后判定。 与权限取交集：两者都通过才展示。 |
|
|
6682
|
+
| `handler` | `(...args: any[]) => void` | 否 | 点击处理（接收 actionArgs） |
|
|
6672
6683
|
|
|
6673
6684
|
#### `IComponent`
|
|
6674
6685
|
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { useZlT as
|
|
3
|
-
import { isPlainObject as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import { usePermission as
|
|
7
|
-
const
|
|
1
|
+
import { defineComponent as j, computed as g, resolveComponent as s, openBlock as n, createElementBlock as c, Fragment as m, renderList as w, createBlock as r, withCtx as i, createVNode as h, mergeProps as f, withModifiers as _, createCommentVNode as u, createElementVNode as E, toDisplayString as v, renderSlot as O, normalizeProps as S, createTextVNode as z, unref as T, normalizeClass as D } from "vue";
|
|
2
|
+
import { useZlT as F } from "@zl-ui-kit/composables";
|
|
3
|
+
import { isPlainObject as I } from "@zl-ui-kit/utils";
|
|
4
|
+
import A from "../ZlIcon/index.vue.mjs";
|
|
5
|
+
import P from "../ZlIconHover/index.vue.mjs";
|
|
6
|
+
import { usePermission as q } from "../ZlPermission/usePermission.mjs";
|
|
7
|
+
const G = { class: "zl-action-list" }, H = {
|
|
8
8
|
key: 2,
|
|
9
9
|
class: "zl-action-list__separator"
|
|
10
|
-
},
|
|
10
|
+
}, X = /* @__PURE__ */ j({
|
|
11
11
|
name: "ZlActionList",
|
|
12
12
|
__name: "List",
|
|
13
13
|
props: {
|
|
@@ -19,19 +19,19 @@ const q = { class: "zl-action-list" }, G = {
|
|
|
19
19
|
separator: { type: Boolean }
|
|
20
20
|
},
|
|
21
21
|
emits: ["action"],
|
|
22
|
-
setup(b, { emit:
|
|
23
|
-
const { t:
|
|
22
|
+
setup(b, { emit: M }) {
|
|
23
|
+
const { t: B } = F(), t = b, N = M, k = g(() => {
|
|
24
24
|
if (t.iconMore === !0)
|
|
25
|
-
return { icon: "zl:
|
|
26
|
-
if (
|
|
27
|
-
return { icon: "zl:
|
|
25
|
+
return { icon: "zl:password-color" };
|
|
26
|
+
if (I(t.iconMore))
|
|
27
|
+
return { icon: "zl:password-color", ...t.iconMore };
|
|
28
28
|
});
|
|
29
|
-
function
|
|
30
|
-
return o.permission ?
|
|
29
|
+
function V(o) {
|
|
30
|
+
return o.permission ? q(o.permission).value : !0;
|
|
31
31
|
}
|
|
32
|
-
const
|
|
32
|
+
const a = g(() => {
|
|
33
33
|
const o = t.actions.filter((l) => {
|
|
34
|
-
const d =
|
|
34
|
+
const d = V(l);
|
|
35
35
|
return typeof l.visible == "function" ? l.visible(...t.visibleArgs, l) && d : (l.visible === void 0 || !!l.visible) && d;
|
|
36
36
|
});
|
|
37
37
|
return o.length <= t.listCount ? { list: o, more: [] } : {
|
|
@@ -39,69 +39,72 @@ const q = { class: "zl-action-list" }, G = {
|
|
|
39
39
|
more: o.slice(t.listCount - 1)
|
|
40
40
|
};
|
|
41
41
|
});
|
|
42
|
-
function
|
|
43
|
-
o.disabled || (
|
|
42
|
+
function p(o) {
|
|
43
|
+
o.disabled || (N("action", o, ...t.actionArgs), typeof o.handler == "function" && o.handler(...t.actionArgs, o));
|
|
44
|
+
}
|
|
45
|
+
function y(o) {
|
|
46
|
+
return typeof o.tooltip == "string" ? o.tooltip : o.label;
|
|
44
47
|
}
|
|
45
48
|
return (o, l) => {
|
|
46
|
-
const d = s("el-tooltip"),
|
|
47
|
-
return n(), c("div",
|
|
48
|
-
(n(!0), c(
|
|
49
|
+
const d = s("el-tooltip"), C = s("el-link"), $ = s("el-dropdown-item"), x = s("el-dropdown-menu"), L = s("el-dropdown");
|
|
50
|
+
return n(), c("div", G, [
|
|
51
|
+
(n(!0), c(m, null, w(a.value.list, (e) => (n(), c(m, {
|
|
49
52
|
key: e.label
|
|
50
53
|
}, [
|
|
51
|
-
e.tooltip && e.icon ? (n(), r(d, {
|
|
54
|
+
e.tooltip && e.icon && y(e) ? (n(), r(d, {
|
|
52
55
|
key: 0,
|
|
53
|
-
content: e
|
|
56
|
+
content: y(e),
|
|
54
57
|
placement: "top"
|
|
55
58
|
}, {
|
|
56
59
|
default: i(() => [
|
|
57
|
-
h(
|
|
60
|
+
h(P, f({
|
|
58
61
|
icon: e.icon
|
|
59
62
|
}, { ref_for: !0 }, e.iconProps, {
|
|
60
|
-
onClick: _((
|
|
63
|
+
onClick: _((Z) => p(e), ["stop"])
|
|
61
64
|
}), null, 16, ["icon", "onClick"])
|
|
62
65
|
]),
|
|
63
66
|
_: 2
|
|
64
|
-
}, 1032, ["content"])) : (n(), r(
|
|
67
|
+
}, 1032, ["content"])) : (n(), r(C, {
|
|
65
68
|
key: 1,
|
|
66
69
|
class: "zl-action-list__action",
|
|
67
70
|
type: "primary",
|
|
68
71
|
underline: !1,
|
|
69
72
|
disabled: e.disabled,
|
|
70
|
-
onClick: _((
|
|
73
|
+
onClick: _((Z) => p(e), ["stop"])
|
|
71
74
|
}, {
|
|
72
75
|
default: i(() => [
|
|
73
|
-
e.icon ? (n(), r(
|
|
76
|
+
e.icon ? (n(), r(A, f({
|
|
74
77
|
key: 0,
|
|
75
78
|
icon: e.icon
|
|
76
|
-
}, { ref_for: !0 }, e.iconProps), null, 16, ["icon"])) :
|
|
77
|
-
|
|
79
|
+
}, { ref_for: !0 }, e.iconProps), null, 16, ["icon"])) : u("", !0),
|
|
80
|
+
E("span", null, v(e.label), 1)
|
|
78
81
|
]),
|
|
79
82
|
_: 2
|
|
80
83
|
}, 1032, ["disabled", "onClick"])),
|
|
81
|
-
b.separator ? (n(), c("div",
|
|
84
|
+
b.separator ? (n(), c("div", H)) : u("", !0)
|
|
82
85
|
], 64))), 128)),
|
|
83
|
-
|
|
86
|
+
a.value.more.length ? (n(), r(L, {
|
|
84
87
|
key: 0,
|
|
85
88
|
trigger: "hover",
|
|
86
89
|
placement: "bottom-end",
|
|
87
90
|
class: "zl-action-list__more",
|
|
88
|
-
onCommand:
|
|
91
|
+
onCommand: p
|
|
89
92
|
}, {
|
|
90
93
|
dropdown: i(() => [
|
|
91
|
-
h(
|
|
94
|
+
h(x, null, {
|
|
92
95
|
default: i(() => [
|
|
93
|
-
(n(!0), c(
|
|
96
|
+
(n(!0), c(m, null, w(a.value.more, (e) => (n(), r($, {
|
|
94
97
|
key: e.label,
|
|
95
98
|
command: e,
|
|
96
99
|
disabled: e.disabled,
|
|
97
100
|
divided: e.divided
|
|
98
101
|
}, {
|
|
99
102
|
default: i(() => [
|
|
100
|
-
e.icon ? (n(), r(
|
|
103
|
+
e.icon ? (n(), r(A, {
|
|
101
104
|
key: 0,
|
|
102
105
|
icon: e.icon,
|
|
103
|
-
class:
|
|
104
|
-
}, null, 8, ["icon", "class"])) :
|
|
106
|
+
class: D(e.iconClass)
|
|
107
|
+
}, null, 8, ["icon", "class"])) : u("", !0),
|
|
105
108
|
z(" " + v(e.label), 1)
|
|
106
109
|
]),
|
|
107
110
|
_: 2
|
|
@@ -111,8 +114,8 @@ const q = { class: "zl-action-list" }, G = {
|
|
|
111
114
|
})
|
|
112
115
|
]),
|
|
113
116
|
default: i(() => [
|
|
114
|
-
|
|
115
|
-
k.value ? (n(), r(
|
|
117
|
+
O(o.$slots, "more", {}, () => [
|
|
118
|
+
k.value ? (n(), r(P, S(f({ key: 0 }, k.value)), null, 16)) : (n(), r(C, {
|
|
116
119
|
key: 1,
|
|
117
120
|
class: "zl-action-list__more-icon",
|
|
118
121
|
type: "primary",
|
|
@@ -121,19 +124,19 @@ const q = { class: "zl-action-list" }, G = {
|
|
|
121
124
|
}, ["stop"]))
|
|
122
125
|
}, {
|
|
123
126
|
default: i(() => [
|
|
124
|
-
z(v(
|
|
127
|
+
z(v(T(B)("zl.action.more", "更多")), 1)
|
|
125
128
|
]),
|
|
126
129
|
_: 1
|
|
127
130
|
}))
|
|
128
131
|
])
|
|
129
132
|
]),
|
|
130
133
|
_: 3
|
|
131
|
-
})) :
|
|
134
|
+
})) : u("", !0)
|
|
132
135
|
]);
|
|
133
136
|
};
|
|
134
137
|
}
|
|
135
138
|
});
|
|
136
139
|
export {
|
|
137
|
-
|
|
140
|
+
X as default
|
|
138
141
|
};
|
|
139
142
|
//# sourceMappingURL=List.vue.mjs.map
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
/** 直接展示的操作数，超出收入"更多"下拉，默认 2；透传给 ZlActionList */
|
|
3
|
+
listCount?: number;
|
|
4
|
+
};
|
|
5
|
+
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
6
|
+
listCount: number;
|
|
7
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
2
8
|
export default _default;
|
|
3
9
|
//# sourceMappingURL=index.vue.d.ts.map
|
|
@@ -1,15 +1,19 @@
|
|
|
1
|
-
import { defineComponent as r, resolveComponent as
|
|
2
|
-
import
|
|
1
|
+
import { defineComponent as r, resolveComponent as c, openBlock as s, createBlock as i, normalizeProps as p, guardReactiveProps as a, withCtx as l, createVNode as m } from "vue";
|
|
2
|
+
import _ from "./List.vue.mjs";
|
|
3
3
|
import './List.css';/* empty css */
|
|
4
4
|
const h = /* @__PURE__ */ r({
|
|
5
5
|
name: "ZlAction",
|
|
6
6
|
__name: "index",
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
props: {
|
|
8
|
+
listCount: { default: 2 }
|
|
9
|
+
},
|
|
10
|
+
setup(o) {
|
|
11
|
+
const e = o;
|
|
12
|
+
return (t, u) => {
|
|
13
|
+
const n = c("zl-icon-hover");
|
|
14
|
+
return s(), i(_, p(a({ ...t.$attrs, listCount: e.listCount })), {
|
|
15
|
+
more: l(() => [
|
|
16
|
+
m(n, { icon: "zl:password-color" })
|
|
13
17
|
]),
|
|
14
18
|
_: 1
|
|
15
19
|
}, 16);
|
|
@@ -10,8 +10,11 @@ export interface ActionItem {
|
|
|
10
10
|
iconProps?: Record<string, any>;
|
|
11
11
|
/** 图标自定义类名 */
|
|
12
12
|
iconClass?: string;
|
|
13
|
-
/**
|
|
14
|
-
|
|
13
|
+
/**
|
|
14
|
+
* 提示词：`true` 用 `label` 作为提示；传字符串则直接作为提示词（无需同时配置 `label`）。
|
|
15
|
+
* 仅对纯图标操作项生效（配置了 `icon`）。
|
|
16
|
+
*/
|
|
17
|
+
tooltip?: boolean | string;
|
|
15
18
|
/** 禁用（点击无响应） */
|
|
16
19
|
disabled?: boolean;
|
|
17
20
|
/** 与下一项之间显示分割线 */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-checkbox-tag{display:inline-flex;flex-wrap:wrap;gap:8px}.zl-checkbox-tag .zl-
|
|
1
|
+
.zl-checkbox-tag{display:inline-flex;flex-wrap:wrap;gap:8px}.zl-checkbox-tag .zl-checkbox-tag__plain:not(.zl-tag-selected){background-color:var(--zl-fill-2)}.zl-checkbox-tag .zl-checkbox-tag__plain:not(.zl-tag-selected):hover:not(.zl-tag-disabled){background-color:var(--zl-fill-3)}.zl-checkbox-tag .zl-tag.zl-tag-selected:not(.zl-tag-disabled):hover{background-color:var(--tag-color-fill)}.zl-checkbox-tag .zl-tag-disabled{color:var(--zl-text-4)}.zl-checkbox-tag .zl-tag-disabled.zl-tag-selected{background-color:var(--zl-primary-1);color:var(--zl-primary-3);border-color:var(--zl-primary-3)}
|
|
@@ -12,9 +12,9 @@ type __VLS_Props = {
|
|
|
12
12
|
options?: CheckboxTagOption[];
|
|
13
13
|
/** 单选模式（值为单值） */
|
|
14
14
|
single?: boolean;
|
|
15
|
-
/**
|
|
16
|
-
rounded?: boolean;
|
|
17
|
-
/**
|
|
15
|
+
/** 是否圆角显示，默认开启；也可为具体圆角值（数字 px 或 CSS 长度），false 关闭（直角/small） */
|
|
16
|
+
rounded?: boolean | number | string;
|
|
17
|
+
/** 是否显示边框，默认开启 */
|
|
18
18
|
bordered?: boolean;
|
|
19
19
|
/** 是否填充背景色，默认开启 */
|
|
20
20
|
fill?: boolean;
|
|
@@ -44,7 +44,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
|
|
|
44
44
|
fill: boolean;
|
|
45
45
|
size: "mini" | "small" | "medium";
|
|
46
46
|
bordered: boolean;
|
|
47
|
-
rounded: boolean;
|
|
47
|
+
rounded: boolean | number | string;
|
|
48
48
|
options: CheckboxTagOption[];
|
|
49
49
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
50
50
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { defineComponent as x, useModel as
|
|
2
|
-
import
|
|
1
|
+
import { defineComponent as x, useModel as b, computed as t, ref as h, openBlock as c, createElementBlock as v, Fragment as k, renderList as m, createBlock as y, normalizeStyle as z, normalizeClass as B, withCtx as C, renderSlot as S, mergeProps as V, createTextVNode as $, toDisplayString as E, mergeModels as M } from "vue";
|
|
2
|
+
import w from "../ZlTag/index.vue.mjs";
|
|
3
3
|
import '../ZlTag/index.css';/* empty css */
|
|
4
|
-
const
|
|
4
|
+
const N = { class: "zl-checkbox-tag" }, F = /* @__PURE__ */ x({
|
|
5
5
|
name: "ZlCheckboxTag",
|
|
6
6
|
__name: "index",
|
|
7
|
-
props: /* @__PURE__ */
|
|
7
|
+
props: /* @__PURE__ */ M({
|
|
8
8
|
options: { default: () => [] },
|
|
9
9
|
single: { type: Boolean },
|
|
10
|
-
rounded: { type: Boolean, default: !0 },
|
|
10
|
+
rounded: { type: [Boolean, Number, String], default: !0 },
|
|
11
11
|
bordered: { type: Boolean, default: !0 },
|
|
12
12
|
fill: { type: Boolean, default: !0 },
|
|
13
13
|
size: { default: "small" }
|
|
@@ -17,51 +17,55 @@ const M = { class: "zl-checkbox-tag" }, T = /* @__PURE__ */ x({
|
|
|
17
17
|
}),
|
|
18
18
|
emits: ["update:modelValue"],
|
|
19
19
|
setup(o) {
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
const a = o, u = b(o, "modelValue"), f = t(() => {
|
|
21
|
+
if (typeof a.rounded == "number") return { "--zl-radius-round": `${a.rounded}px` };
|
|
22
|
+
if (typeof a.rounded == "string") return { "--zl-radius-round": a.rounded };
|
|
23
|
+
}), i = t(() => a.options.some((e) => e.exclusive)), d = h();
|
|
24
|
+
if (i.value && u.value) {
|
|
25
|
+
const e = a.options.find((n) => n.value === u.value[0]);
|
|
23
26
|
d.value = e?.exclusive;
|
|
24
27
|
}
|
|
25
|
-
const
|
|
26
|
-
function
|
|
28
|
+
const r = t(() => new Set(a.single ? [u.value] : u.value ?? []));
|
|
29
|
+
function p(e) {
|
|
27
30
|
if (e.disabled) return;
|
|
28
|
-
const
|
|
29
|
-
if (
|
|
30
|
-
const
|
|
31
|
-
|
|
31
|
+
const n = a.single ? [u.value] : [...u.value ?? []], l = n.includes(e.value);
|
|
32
|
+
if (i.value && !l) {
|
|
33
|
+
const s = e;
|
|
34
|
+
s.exclusive === !0 || s.exclusive !== d.value ? (u.value = [e.value], d.value = s.exclusive) : u.value = [...n, e.value];
|
|
32
35
|
return;
|
|
33
36
|
}
|
|
34
37
|
if (l) {
|
|
35
|
-
const
|
|
36
|
-
|
|
38
|
+
const s = n.filter((g) => g !== e.value);
|
|
39
|
+
u.value = a.single ? s[0] : s;
|
|
37
40
|
} else
|
|
38
|
-
|
|
41
|
+
a.single ? u.value = e.value : u.value = [...n, e.value];
|
|
39
42
|
}
|
|
40
|
-
return (e,
|
|
41
|
-
(
|
|
43
|
+
return (e, n) => (c(), v("div", N, [
|
|
44
|
+
(c(!0), v(k, null, m(o.options, (l) => (c(), y(w, {
|
|
42
45
|
key: l.value,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
46
|
+
class: B({ "zl-checkbox-tag__plain": !r.value.has(l.value) && o.fill }),
|
|
47
|
+
style: z(f.value),
|
|
48
|
+
rounded: o.rounded !== !1,
|
|
49
|
+
color: r.value.has(l.value) ? "primary" : void 0,
|
|
50
|
+
bordered: o.bordered,
|
|
47
51
|
selectable: "",
|
|
48
|
-
selected:
|
|
52
|
+
selected: r.value.has(l.value),
|
|
49
53
|
disabled: l.disabled,
|
|
50
54
|
icon: l.icon,
|
|
51
55
|
size: o.size,
|
|
52
|
-
onClick: (
|
|
56
|
+
onClick: (s) => p(l)
|
|
53
57
|
}, {
|
|
54
|
-
default:
|
|
55
|
-
|
|
56
|
-
|
|
58
|
+
default: C(() => [
|
|
59
|
+
S(e.$slots, "default", V({ ref_for: !0 }, { item: l, checked: r.value.has(l.value) }), () => [
|
|
60
|
+
$(E(l.label), 1)
|
|
57
61
|
])
|
|
58
62
|
]),
|
|
59
63
|
_: 2
|
|
60
|
-
}, 1032, ["
|
|
64
|
+
}, 1032, ["class", "style", "rounded", "color", "bordered", "selected", "disabled", "icon", "size", "onClick"]))), 128))
|
|
61
65
|
]));
|
|
62
66
|
}
|
|
63
67
|
});
|
|
64
68
|
export {
|
|
65
|
-
|
|
69
|
+
F as default
|
|
66
70
|
};
|
|
67
71
|
//# sourceMappingURL=index.vue.mjs.map
|
|
@@ -35,8 +35,14 @@ type __VLS_Props = {
|
|
|
35
35
|
* @deprecated 用 `iconVisible`：全库显隐统一用 visible 语义，且不要用反向命名
|
|
36
36
|
*/
|
|
37
37
|
hideIcon?: boolean;
|
|
38
|
+
/** 是否使用填充背景（配合字典项 `color`/`type` 显示浅色底色，如 `--zl-<色>-1`），透传给内部 ZlTag */
|
|
39
|
+
fill?: boolean;
|
|
40
|
+
/** 是否使用全圆角样式，透传给内部 ZlTag */
|
|
41
|
+
rounded?: boolean;
|
|
38
42
|
};
|
|
39
43
|
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
44
|
+
fill: boolean;
|
|
45
|
+
rounded: boolean;
|
|
40
46
|
variant: "badge" | "ribbon";
|
|
41
47
|
corner: boolean | "top-left" | "top-right" | "bottom-left" | "bottom-right";
|
|
42
48
|
iconVisible: boolean;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { defineComponent as g, watch as
|
|
2
|
-
import { useDict as
|
|
3
|
-
import
|
|
1
|
+
import { defineComponent as g, watch as B, computed as n, openBlock as c, createBlock as d, mergeProps as u, withCtx as s, createTextVNode as f, toDisplayString as v } from "vue";
|
|
2
|
+
import { useDict as h, useDictStore as b } from "@zl-ui-kit/composables";
|
|
3
|
+
import S from "../ZlTag/ZlCornerTag.vue.mjs";
|
|
4
4
|
import '../ZlTag/index.css';import '../ZlTag/ZlCornerTag.css';/* empty css */
|
|
5
|
-
import
|
|
5
|
+
import k from "../ZlTag/index.vue.mjs";
|
|
6
6
|
/* empty css */
|
|
7
|
-
const
|
|
7
|
+
const K = /* @__PURE__ */ g({
|
|
8
8
|
name: "ZlDictTag",
|
|
9
9
|
__name: "index",
|
|
10
10
|
props: {
|
|
@@ -15,56 +15,61 @@ const I = /* @__PURE__ */ g({
|
|
|
15
15
|
value: {},
|
|
16
16
|
simple: { type: Boolean },
|
|
17
17
|
iconVisible: { type: Boolean, default: void 0 },
|
|
18
|
-
hideIcon: { type: Boolean, default: void 0 }
|
|
18
|
+
hideIcon: { type: Boolean, default: void 0 },
|
|
19
|
+
fill: { type: Boolean, default: !1 },
|
|
20
|
+
rounded: { type: Boolean, default: !1 }
|
|
19
21
|
},
|
|
20
|
-
setup(
|
|
21
|
-
const t =
|
|
22
|
-
|
|
22
|
+
setup(a) {
|
|
23
|
+
const t = a, p = h(t.dictKey, { data: t.dict });
|
|
24
|
+
B(
|
|
23
25
|
() => t.dict,
|
|
24
26
|
(e) => {
|
|
25
27
|
if (e?.length) {
|
|
26
|
-
const { dictStore: o } =
|
|
28
|
+
const { dictStore: o } = b();
|
|
27
29
|
o.value = { ...o.value, [t.dictKey]: e };
|
|
28
30
|
}
|
|
29
31
|
},
|
|
30
32
|
{ deep: !1 }
|
|
31
33
|
);
|
|
32
|
-
const
|
|
34
|
+
const i = n(() => p.value.find((e) => e.value === t.value)), m = { info: "gray" };
|
|
33
35
|
function y(e) {
|
|
34
36
|
const o = e.color ?? e.type;
|
|
35
37
|
if (o)
|
|
36
38
|
return m[o] ?? o;
|
|
37
39
|
}
|
|
38
|
-
const
|
|
39
|
-
const e =
|
|
40
|
+
const l = n(() => {
|
|
41
|
+
const e = i.value;
|
|
40
42
|
return e ? {
|
|
41
43
|
color: t.simple ? void 0 : y(e),
|
|
42
44
|
icon: t.iconVisible ?? !t.hideIcon ? e.icon : void 0
|
|
43
45
|
} : {};
|
|
44
|
-
}),
|
|
45
|
-
return (e, o) =>
|
|
46
|
+
}), r = n(() => t.corner === !0 ? "top-right" : t.corner);
|
|
47
|
+
return (e, o) => r.value ? (c(), d(S, u({
|
|
46
48
|
key: 0,
|
|
47
49
|
class: "zl-dict-corner-tag"
|
|
48
|
-
}, { ...
|
|
49
|
-
position:
|
|
50
|
-
variant:
|
|
50
|
+
}, { ...l.value, ...e.$attrs }, {
|
|
51
|
+
position: r.value,
|
|
52
|
+
variant: a.variant
|
|
51
53
|
}), {
|
|
52
|
-
default:
|
|
53
|
-
v(
|
|
54
|
+
default: s(() => [
|
|
55
|
+
f(v(i.value?.label || a.value), 1)
|
|
54
56
|
]),
|
|
55
57
|
_: 1
|
|
56
|
-
}, 16, ["position", "variant"])) : (
|
|
58
|
+
}, 16, ["position", "variant"])) : (c(), d(k, u({
|
|
57
59
|
key: 1,
|
|
58
60
|
class: "zl-dict-tag"
|
|
59
|
-
}, { ...
|
|
60
|
-
|
|
61
|
-
|
|
61
|
+
}, { ...l.value, ...e.$attrs }, {
|
|
62
|
+
fill: a.fill,
|
|
63
|
+
rounded: a.rounded
|
|
64
|
+
}), {
|
|
65
|
+
default: s(() => [
|
|
66
|
+
f(v(i.value?.label || a.value), 1)
|
|
62
67
|
]),
|
|
63
68
|
_: 1
|
|
64
|
-
}, 16));
|
|
69
|
+
}, 16, ["fill", "rounded"]));
|
|
65
70
|
}
|
|
66
71
|
});
|
|
67
72
|
export {
|
|
68
|
-
|
|
73
|
+
K as default
|
|
69
74
|
};
|
|
70
75
|
//# sourceMappingURL=index.vue.mjs.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zl-ui-kit/components",
|
|
3
|
-
"version": "0.18.
|
|
3
|
+
"version": "0.18.6",
|
|
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/icons": "0.18.
|
|
44
|
-
"@zl-ui-kit/
|
|
42
|
+
"@zl-ui-kit/utils": "0.18.6",
|
|
43
|
+
"@zl-ui-kit/icons": "0.18.6",
|
|
44
|
+
"@zl-ui-kit/composables": "0.18.6"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@vueuse/core": "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
"@jichuang/eslint-config": "1.0.0",
|
|
102
102
|
"@jichuang/tsconfig": "1.0.0",
|
|
103
103
|
"@jichuang/vite-config": "1.0.0",
|
|
104
|
-
"@zl-ui-kit/theme": "0.18.
|
|
104
|
+
"@zl-ui-kit/theme": "0.18.6"
|
|
105
105
|
},
|
|
106
106
|
"repository": {
|
|
107
107
|
"type": "git",
|