@zl-ui-kit/components 0.18.5 → 0.18.6

package/README.md

@@ -1643,7 +1643,10 @@ const statusActions = (item: Item): ActionItem[] => [
   插槽内容接入父组件的渲染上下文，数据变化会正常更新；`v-model` 双向绑定当前页签 key。常用场景
   （分页卡片的分类筛选）见 §6.3 ②。
 - `ZlDynamicComponent`：schema→VNode 渲染引擎，默认 `el-input`。
-- `ZlGrid`(+`ZlGridItem`)：自绘栅格，label 自适应/跨列/省略提示/字典。
+- `ZlGrid`(+`ZlGridItem`)：自绘栅格，label 自适应/省略提示/字典。
+  **每项可独立跨列**：`IGridItem.size` 设该项跨列数（默认 1，`'auto'` 占满所在行剩余列），容器 `cols` 是总列数。
+  配合使用可排不规则栅格——如 `cols=4` 时前四项 `size: 2`、后两项 `size: 1`，
+  渲染为 `[A|A|B|B] / [C|C|D|D] / [E|F|·|·]`（前四项两两占一整行，后两项各占半行）。
 
 ### ZlTree —— 树形控件（多选 / 暴露方法）
 
@@ -4410,15 +4413,15 @@ import { ZlCheckboxTag } from '@zl-ui-kit/components'
 
 **props**
 
-| 属性         | 类型                            | 默认值     | 必填 | 示例                 | 说明                                         |
-| ------------ | ------------------------------- | ---------- | ---- | -------------------- | -------------------------------------------- |
-| `modelValue` | `any`                           | —          | 否   | `v-model="value"`    | `v-model` 绑定的值（`defineModel` 隐式声明） |
-| `options`    | `CheckboxTagOption[]`           | `() => []` | 否   | `:options="options"` | 标签候选列表，每项可配图标与互斥组           |
-| `single`     | `boolean`                       | —          | 否   | `single`             | 单选模式（值为单值）                         |
-| `rounded`    | `boolean`                       | `true`     | 否   | `:rounded="false"`   | 是否圆角显示，默认开启                       |
-| `bordered`   | `boolean`                       | `true`     | 否   | `:bordered="false"`  | 选中时是否显示边框，默认开启                 |
-| `fill`       | `boolean`                       | `true`     | 否   | `:fill="false"`      | 是否填充背景色，默认开启                     |
-| `size`       | `'mini' \| 'small' \| 'medium'` | `'small'`  | 否   | `size="mini"`        | 标签尺寸档位，默认 small                     |
+| 属性         | 类型                            | 默认值     | 必填 | 示例                 | 说明                                                                                      |
+| ------------ | ------------------------------- | ---------- | ---- | -------------------- | ----------------------------------------------------------------------------------------- |
+| `modelValue` | `any`                           | —          | 否   | `v-model="value"`    | `v-model` 绑定的值（`defineModel` 隐式声明）                                              |
+| `options`    | `CheckboxTagOption[]`           | `() => []` | 否   | `:options="options"` | 标签候选列表，每项可配图标与互斥组                                                        |
+| `single`     | `boolean`                       | —          | 否   | `single`             | 单选模式（值为单值）                                                                      |
+| `rounded`    | `boolean \| number \| string`   | `true`     | 否   | `:rounded="rounded"` | 是否圆角显示，默认开启；也可为具体圆角值（数字 px 或 CSS 长度），false 关闭（直角/small） |
+| `bordered`   | `boolean`                       | `true`     | 否   | `:bordered="false"`  | 是否显示边框，默认开启                                                                    |
+| `fill`       | `boolean`                       | `true`     | 否   | `:fill="false"`      | 是否填充背景色，默认开启                                                                  |
+| `size`       | `'mini' \| 'small' \| 'medium'` | `'small'`  | 否   | `size="mini"`        | 标签尺寸档位，默认 small                                                                  |
 
 **事件（emits）**
 
@@ -5011,7 +5014,7 @@ import { ZlGrid } from '@zl-ui-kit/components'
 </script>
 
 <template>
-  <ZlGrid :data="data" :cols="2" border :grid="grid" />
+  <ZlGrid :data="data" :cols="4" border :grid="grid" />
 </template>
 ```
 

package/dist/components/ZlCheckboxTag/index.css

@@ -1 +1 @@
-.zl-checkbox-tag{display:inline-flex;flex-wrap:wrap;gap:8px}.zl-checkbox-tag .zl-tag-fill:not(.zl-tag-selected){border-color:transparent;background-color:var(--zl-fill-2)}.zl-checkbox-tag .zl-tag-fill: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)}
+.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)}

package/dist/components/ZlCheckboxTag/index.vue.d.ts

@@ -12,9 +12,9 @@ type __VLS_Props = {
     options?: CheckboxTagOption[];
     /** 单选模式（值为单值） */
     single?: boolean;
-    /** 是否圆角显示，默认开启 */
-    rounded?: boolean;
-    /** 选中时是否显示边框，默认开启 */
+    /** 是否圆角显示，默认开启；也可为具体圆角值（数字 px 或 CSS 长度），false 关闭（直角/small） */
+    rounded?: boolean | number | string;
+    /** 是否显示边框，默认开启 */
     bordered?: boolean;
     /** 是否填充背景色，默认开启 */
     fill?: boolean;
@@ -44,7 +44,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     fill: boolean;
     size: "mini" | "small" | "medium";
     bordered: boolean;
-    rounded: boolean;
+    rounded: boolean | number | string;
     options: CheckboxTagOption[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/components/ZlCheckboxTag/index.vue.mjs

@@ -1,13 +1,13 @@
-import { defineComponent as x, useModel as g, computed as i, ref as h, openBlock as r, createElementBlock as v, Fragment as b, renderList as k, createBlock as m, withCtx as y, renderSlot as B, mergeProps as C, createTextVNode as z, toDisplayString as S, mergeModels as V } from "vue";
-import E from "../ZlTag/index.vue.mjs";
+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";
+import w from "../ZlTag/index.vue.mjs";
 import '../ZlTag/index.css';/* empty css                   */
-const M = { class: "zl-checkbox-tag" }, T = /* @__PURE__ */ x({
+const N = { class: "zl-checkbox-tag" }, F = /* @__PURE__ */ x({
   name: "ZlCheckboxTag",
   __name: "index",
-  props: /* @__PURE__ */ V({
+  props: /* @__PURE__ */ M({
     options: { default: () => [] },
     single: { type: Boolean },
-    rounded: { type: Boolean, default: !0 },
+    rounded: { type: [Boolean, Number, String], default: !0 },
     bordered: { type: Boolean, default: !0 },
     fill: { type: Boolean, default: !0 },
     size: { default: "small" }
@@ -17,51 +17,55 @@ const M = { class: "zl-checkbox-tag" }, T = /* @__PURE__ */ x({
   }),
   emits: ["update:modelValue"],
   setup(o) {
-    const s = o, a = g(o, "modelValue"), c = i(() => s.options.some((e) => e.exclusive)), d = h();
-    if (c.value && a.value) {
-      const e = s.options.find((u) => u.value === a.value[0]);
+    const a = o, u = b(o, "modelValue"), f = t(() => {
+      if (typeof a.rounded == "number") return { "--zl-radius-round": `${a.rounded}px` };
+      if (typeof a.rounded == "string") return { "--zl-radius-round": a.rounded };
+    }), i = t(() => a.options.some((e) => e.exclusive)), d = h();
+    if (i.value && u.value) {
+      const e = a.options.find((n) => n.value === u.value[0]);
       d.value = e?.exclusive;
     }
-    const t = i(() => new Set(s.single ? [a.value] : a.value ?? []));
-    function f(e) {
+    const r = t(() => new Set(a.single ? [u.value] : u.value ?? []));
+    function p(e) {
       if (e.disabled) return;
-      const u = s.single ? [a.value] : [...a.value ?? []], l = u.includes(e.value);
-      if (c.value && !l) {
-        const n = e;
-        n.exclusive === !0 || n.exclusive !== d.value ? (a.value = [e.value], d.value = n.exclusive) : a.value = [...u, e.value];
+      const n = a.single ? [u.value] : [...u.value ?? []], l = n.includes(e.value);
+      if (i.value && !l) {
+        const s = e;
+        s.exclusive === !0 || s.exclusive !== d.value ? (u.value = [e.value], d.value = s.exclusive) : u.value = [...n, e.value];
         return;
       }
       if (l) {
-        const n = u.filter((p) => p !== e.value);
-        a.value = s.single ? n[0] : n;
+        const s = n.filter((g) => g !== e.value);
+        u.value = a.single ? s[0] : s;
       } else
-        s.single ? a.value = e.value : a.value = [...u, e.value];
+        a.single ? u.value = e.value : u.value = [...n, e.value];
     }
-    return (e, u) => (r(), v("div", M, [
-      (r(!0), v(b, null, k(o.options, (l) => (r(), m(E, {
+    return (e, n) => (c(), v("div", N, [
+      (c(!0), v(k, null, m(o.options, (l) => (c(), y(w, {
         key: l.value,
-        fill: o.fill,
-        rounded: o.rounded,
-        color: t.value.has(l.value) ? "primary" : void 0,
-        bordered: t.value.has(l.value) && o.bordered,
+        class: B({ "zl-checkbox-tag__plain": !r.value.has(l.value) && o.fill }),
+        style: z(f.value),
+        rounded: o.rounded !== !1,
+        color: r.value.has(l.value) ? "primary" : void 0,
+        bordered: o.bordered,
         selectable: "",
-        selected: t.value.has(l.value),
+        selected: r.value.has(l.value),
         disabled: l.disabled,
         icon: l.icon,
         size: o.size,
-        onClick: (n) => f(l)
+        onClick: (s) => p(l)
       }, {
-        default: y(() => [
-          B(e.$slots, "default", C({ ref_for: !0 }, { item: l, checked: t.value.has(l.value) }), () => [
-            z(S(l.label), 1)
+        default: C(() => [
+          S(e.$slots, "default", V({ ref_for: !0 }, { item: l, checked: r.value.has(l.value) }), () => [
+            $(E(l.label), 1)
           ])
         ]),
         _: 2
-      }, 1032, ["fill", "rounded", "color", "bordered", "selected", "disabled", "icon", "size", "onClick"]))), 128))
+      }, 1032, ["class", "style", "rounded", "color", "bordered", "selected", "disabled", "icon", "size", "onClick"]))), 128))
     ]));
   }
 });
 export {
-  T as default
+  F as default
 };
 //# sourceMappingURL=index.vue.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zl-ui-kit/components",
-  "version": "0.18.5",
+  "version": "0.18.6",
   "type": "module",
   "description": "ZL UI 业务组件库（Element Plus 体系，Zl 前缀）——首批：Icon/AutoTooltip/Tag/CornerTag/Text/Title/Copy/Empty/Pagination/DictTag",
   "license": "MIT",
@@ -39,9 +39,9 @@
     "file-type": "^20.4.1",
     "dt-sql-parser": "^4.3.1",
     "sql-formatter": "^15.4.2",
-    "@zl-ui-kit/composables": "0.18.5",
-    "@zl-ui-kit/icons": "0.18.5",
-    "@zl-ui-kit/utils": "0.18.5"
+    "@zl-ui-kit/utils": "0.18.6",
+    "@zl-ui-kit/icons": "0.18.6",
+    "@zl-ui-kit/composables": "0.18.6"
   },
   "peerDependencies": {
     "@vueuse/core": "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
@@ -98,10 +98,10 @@
     "@vue-office/pdf": "^2.0.10",
     "@vue-office/pptx": "1.0.1",
     "echarts": "^5.6.0",
+    "@jichuang/eslint-config": "1.0.0",
     "@jichuang/tsconfig": "1.0.0",
     "@jichuang/vite-config": "1.0.0",
-    "@zl-ui-kit/theme": "0.18.5",
-    "@jichuang/eslint-config": "1.0.0"
+    "@zl-ui-kit/theme": "0.18.6"
   },
   "repository": {
     "type": "git",