@zl-ui-kit/components 0.7.1 → 0.7.2

package/README.md

@@ -852,6 +852,18 @@ const items: FormItem[] = [
 展开全量表单浮层（`position: absolute` + 上滑 `--28px` 淡入，不改变页面高度），再点收起；查询/重置后自动收起。
 `showLabels` 不显式传时，仅在发生溢出时展示「筛选条件」标签行。
 
+**图标按钮的移入提示**：重置、展开、收起都是纯图标按钮，鼠标移入给出文字提示（原生 `title`，
+同时带 `aria-label` 供读屏）。文案走 i18n，随 `setLocale` 切换、也可被消费方覆盖：
+
+| 按钮 | key                  | 中文 | English  |
+| ---- | -------------------- | ---- | -------- |
+| 重置 | `zl.search.reset`    | 重置 | Reset    |
+| 展开 | `zl.search.expand`   | 展开 | Expand   |
+| 收起 | `zl.search.collapse` | 收起 | Collapse |
+
+> 浮层里的重置按钮与单行内的按钮共用 `zl-search-form-actions__reset` class，展开/收起为
+> `zl-search-form-actions__toggle`，需要自定义样式或做 e2e 断言时可直接用这两个 class 定位。
+
 ### ZlDrawer / ZlPopconfirm / ZlSwitch
 
 - `ZlDrawer`：自绘 footer（okLoading/hideCancel/readonly 语义保持），`loading`→`v-loading`。

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

@@ -1,6 +1,6 @@
-import { defineComponent as le, computed as u, useSlots as ae, ref as k, watch as te, nextTick as w, resolveComponent as oe, openBlock as n, createElementBlock as f, createElementVNode as g, createVNode as t, withModifiers as M, createSlots as R, withCtx as o, createTextVNode as p, toDisplayString as h, renderList as V, renderSlot as $, normalizeProps as N, guardReactiveProps as O, unref as i, createBlock as E, createCommentVNode as b, Fragment as se, Transition as re } from "vue";
-import { useZlT as ne } from "@zl-ui-kit/composables";
-import { isArray as ie, isPlainObject as ce } from "@zl-ui-kit/utils";
+import { defineComponent as le, computed as u, useSlots as ae, ref as k, watch as te, nextTick as w, resolveComponent as oe, openBlock as c, createElementBlock as f, createElementVNode as g, createVNode as t, withModifiers as M, createSlots as R, withCtx as o, createTextVNode as p, toDisplayString as h, renderList as V, renderSlot as $, normalizeProps as N, guardReactiveProps as O, unref as s, createBlock as E, createCommentVNode as b, Fragment as se, Transition as re } from "vue";
+import { useZlT as ie } from "@zl-ui-kit/composables";
+import { isArray as ne, isPlainObject as ce } from "@zl-ui-kit/utils";
 import I from "../ZlAutoTooltip/index.vue.mjs";
 import A from "../ZlForm/index.vue.mjs";
 import '../ZlTag/index.css';import '../ZlForm/index.css';/* empty css                    */
@@ -8,7 +8,7 @@ import C from "../ZlIcon/index.vue.mjs";
 import q from "../ZlTag/index.vue.mjs";
 /* empty css                   */
 import { useSearchFormOverflow as ue } from "./useSearchFormOverflow.mjs";
-const de = { class: "zl-search" }, me = {
+const me = { class: "zl-search" }, de = {
   key: 0,
   class: "zl-search-search"
 }, fe = { class: "zl-search-search-single" }, he = { class: "zl-search-form-actions" }, ve = {
@@ -17,7 +17,7 @@ const de = { class: "zl-search" }, me = {
 }, pe = { class: "zl-search-label__summary" }, be = {
   key: 0,
   class: "zl-search-search-multiple"
-}, _e = { class: "zl-search-form-actions" }, ye = {
+}, _e = { class: "zl-search-form-actions" }, ze = {
   key: 1,
   class: "zl-search__actions"
 }, $e = /* @__PURE__ */ le({
@@ -32,56 +32,56 @@ const de = { class: "zl-search" }, me = {
   },
   emits: ["search", "reset"],
   setup(S, { expose: D, emit: G }) {
-    const { t: c } = ne(), d = S, B = G, T = u(
+    const { t: r } = ie(), m = S, B = G, T = u(
       () => Object.keys(ae()).filter((e) => e !== "label" && e !== "actions")
-    ), z = k(null), L = k(null), r = k(!1), { lastVisibleIndex: Z, measure: H } = ue(z), J = u(() => {
+    ), y = k(null), L = k(null), n = k(!1), { lastVisibleIndex: Z, measure: H } = ue(y), J = u(() => {
       const e = {};
-      for (const l of d.items)
+      for (const l of m.items)
         e[l.model] = typeof l.toLabel == "function" ? l.toLabel : X;
       return e;
     }), K = u(() => {
       const e = {};
-      for (const l of d.items)
+      for (const l of m.items)
         typeof l.toParams == "function" && (e[l.model] = l.toParams);
       return e;
     }), v = u(() => {
       const e = [];
-      for (const l of d.items) {
+      for (const l of m.items) {
         if (!l.model)
           throw new Error("[ZlSearch]: form item's model is required!");
         if (!W(l))
           continue;
-        const { toLabel: s, toParams: a, visible: y, ...ee } = l;
+        const { toLabel: i, toParams: a, visible: z, ...ee } = l;
         e.push(ee);
       }
       return e;
-    }), Q = k(d.model ?? {}), m = u(() => d.model ?? Q.value), j = u(() => v.value.reduce((e, l) => {
-      const s = K.value[l.model];
-      return s ? Object.assign(e, s(m.value[l.model], e)) : { ...e, [l.model]: m.value[l.model] };
+    }), Q = k(m.model ?? {}), d = u(() => m.model ?? Q.value), j = u(() => v.value.reduce((e, l) => {
+      const i = K.value[l.model];
+      return i ? Object.assign(e, i(d.value[l.model], e)) : { ...e, [l.model]: d.value[l.model] };
     }, {})), F = u(() => v.value.map((e) => ({
-      labelValue: J.value[e.model](m.value[e.model]),
+      labelValue: J.value[e.model](d.value[e.model]),
       model: e.model,
       label: e.label
-    })).filter((e) => e.labelValue)), U = u(() => d.showLabels ?? Z.value !== null);
+    })).filter((e) => e.labelValue)), U = u(() => m.showLabels ?? Z.value !== null);
     function W(e) {
       const l = e.visible;
-      return l === void 0 ? !0 : l === !1 || typeof l == "function" && !l(m.value, e) ? !1 : !!l;
+      return l === void 0 ? !0 : l === !1 || typeof l == "function" && !l(d.value, e) ? !1 : !!l;
     }
     function X(e) {
-      return ie(e) ? e.join(", ") : ce(e) ? e.label : e;
+      return ne(e) ? e.join(", ") : ce(e) ? e.label : e;
     }
     async function x() {
-      r.value && (r.value = !1), B("search", j.value);
+      n.value && (n.value = !1), B("search", j.value);
     }
     async function _() {
       try {
-        await (r.value ? L.value : z.value)?.validate(), x();
+        await (n.value ? L.value : y.value)?.validate(), x();
       } catch {
       }
     }
     async function P() {
       try {
-        const e = r.value ? L.value : z.value;
+        const e = n.value ? L.value : y.value;
         e?.resetFields(), await w(), await e?.validate().catch(() => {
         }), B("reset"), await w(), x();
       } catch (e) {
@@ -89,23 +89,23 @@ const de = { class: "zl-search" }, me = {
       }
     }
     function Y(e) {
-      delete m.value[e.model];
+      delete d.value[e.model];
     }
     return te(
       () => v.value.map((e) => e.model).join(","),
       async () => {
         await w(), H();
       }
-    ), d.immediate && (async () => (await w(), _()))(), D({ params: j, search: x, reset: P }), (e, l) => {
-      const s = oe("el-button");
-      return n(), f("div", de, [
-        v.value.length ? (n(), f("div", me, [
+    ), m.immediate && (async () => (await w(), _()))(), D({ params: j, search: x, reset: P }), (e, l) => {
+      const i = oe("el-button");
+      return c(), f("div", me, [
+        v.value.length ? (c(), f("div", de, [
           g("div", fe, [
             t(A, {
               ref_key: "formRef",
-              ref: z,
+              ref: y,
               class: "zl-search-form",
-              model: m.value,
+              model: d.value,
               items: v.value,
               disabled: S.disabled,
               onSubmit: M(_, ["prevent"])
@@ -122,51 +122,56 @@ const de = { class: "zl-search" }, me = {
             }, [
               V(T.value, (a) => ({
                 name: a,
-                fn: o((y) => [
-                  $(e.$slots, a, N(O(y)))
+                fn: o((z) => [
+                  $(e.$slots, a, N(O(z)))
                 ])
               }))
             ]), 1032, ["model", "items", "disabled"]),
             g("div", he, [
-              t(s, { onClick: P }, {
+              t(i, {
+                class: "zl-search-form-actions__reset",
+                title: s(r)("zl.search.reset", "重置"),
+                "aria-label": s(r)("zl.search.reset", "重置"),
+                onClick: P
+              }, {
                 icon: o(() => [
                   t(C, { icon: "zl:brush-color" })
                 ]),
                 _: 1
-              }),
-              i(Z) !== null ? (n(), E(s, {
+              }, 8, ["title", "aria-label"]),
+              s(Z) !== null ? (c(), E(i, {
                 key: 0,
                 class: "zl-search-form-actions__toggle",
-                title: i(c)("zl.search.expand", "展开"),
-                "aria-label": i(c)("zl.search.expand", "展开"),
-                "aria-expanded": r.value,
-                onClick: l[0] || (l[0] = (a) => r.value = !0)
+                title: s(r)("zl.search.expand", "展开"),
+                "aria-label": s(r)("zl.search.expand", "展开"),
+                "aria-expanded": n.value,
+                onClick: l[0] || (l[0] = (a) => n.value = !0)
               }, {
                 icon: o(() => [
                   t(C, { icon: "zl:filter-color" })
                 ]),
                 _: 1
               }, 8, ["title", "aria-label", "aria-expanded"])) : b("", !0),
-              t(s, {
+              t(i, {
                 type: "primary",
                 onClick: _
               }, {
                 default: o(() => [
-                  p(h(i(c)("zl.search.search", "查询")), 1)
+                  p(h(s(r)("zl.search.search", "查询")), 1)
                 ]),
                 _: 1
               })
             ])
           ]),
-          U.value ? (n(), f("div", ve, [
-            g("div", pe, h(i(c)("zl.search.filterConditions", "筛选条件")), 1),
-            F.value.length === 0 ? (n(), E(q, { key: 0 }, {
+          U.value ? (c(), f("div", ve, [
+            g("div", pe, h(s(r)("zl.search.filterConditions", "筛选条件")), 1),
+            F.value.length === 0 ? (c(), E(q, { key: 0 }, {
               default: o(() => [
-                p(h(i(c)("zl.search.all", "全部")), 1)
+                p(h(s(r)("zl.search.all", "全部")), 1)
               ]),
               _: 1
             })) : b("", !0),
-            (n(!0), f(se, null, V(F.value, (a) => (n(), f("div", {
+            (c(!0), f(se, null, V(F.value, (a) => (c(), f("div", {
               key: a.model,
               class: "zl-search-label-item"
             }, [
@@ -174,7 +179,7 @@ const de = { class: "zl-search" }, me = {
                 closable: "",
                 fill: "",
                 color: "primary",
-                onClose: (y) => Y(a)
+                onClose: (z) => Y(a)
               }, {
                 default: o(() => [
                   p(h(a.labelValue), 1)
@@ -185,12 +190,12 @@ const de = { class: "zl-search" }, me = {
           ])) : b("", !0),
           t(re, { name: "zl-search-fade-slide" }, {
             default: o(() => [
-              r.value ? (n(), f("div", be, [
+              n.value ? (c(), f("div", be, [
                 t(A, {
                   ref_key: "multipleFormRef",
                   ref: L,
                   class: "zl-search-form",
-                  model: m.value,
+                  model: d.value,
                   items: v.value,
                   disabled: S.disabled,
                   onSubmit: M(_, ["prevent"])
@@ -207,36 +212,41 @@ const de = { class: "zl-search" }, me = {
                 }, [
                   V(T.value, (a) => ({
                     name: a,
-                    fn: o((y) => [
-                      $(e.$slots, a, N(O(y)))
+                    fn: o((z) => [
+                      $(e.$slots, a, N(O(z)))
                     ])
                   }))
                 ]), 1032, ["model", "items", "disabled"]),
                 g("div", _e, [
-                  t(s, { onClick: P }, {
+                  t(i, {
+                    class: "zl-search-form-actions__reset",
+                    title: s(r)("zl.search.reset", "重置"),
+                    "aria-label": s(r)("zl.search.reset", "重置"),
+                    onClick: P
+                  }, {
                     icon: o(() => [
                       t(C, { icon: "zl:brush-color" })
                     ]),
                     _: 1
-                  }),
-                  t(s, {
+                  }, 8, ["title", "aria-label"]),
+                  t(i, {
                     class: "zl-search-form-actions__toggle",
-                    title: i(c)("zl.search.collapse", "收起"),
-                    "aria-label": i(c)("zl.search.collapse", "收起"),
-                    "aria-expanded": r.value,
-                    onClick: l[1] || (l[1] = (a) => r.value = !1)
+                    title: s(r)("zl.search.collapse", "收起"),
+                    "aria-label": s(r)("zl.search.collapse", "收起"),
+                    "aria-expanded": n.value,
+                    onClick: l[1] || (l[1] = (a) => n.value = !1)
                   }, {
                     icon: o(() => [
                       t(C, { icon: "zl:filter-color" })
                     ]),
                     _: 1
                   }, 8, ["title", "aria-label", "aria-expanded"]),
-                  t(s, {
+                  t(i, {
                     type: "primary",
                     onClick: _
                   }, {
                     default: o(() => [
-                      p(h(i(c)("zl.search.search", "查询")), 1)
+                      p(h(s(r)("zl.search.search", "查询")), 1)
                     ]),
                     _: 1
                   })
@@ -246,7 +256,7 @@ const de = { class: "zl-search" }, me = {
             _: 3
           })
         ])) : b("", !0),
-        e.$slots.actions ? (n(), f("div", ye, [
+        e.$slots.actions ? (c(), f("div", ze, [
           $(e.$slots, "actions")
         ])) : b("", !0)
       ]);

package/dist/locales/en.mjs

@@ -12,6 +12,7 @@ const e = {
   "zl.upload.maxSize": "File size must not exceed {maxSize}MB",
   "zl.upload.nameSpace": "File name must not contain spaces",
   "zl.search.search": "Search",
+  "zl.search.reset": "Reset",
   "zl.search.filterConditions": "Filters",
   "zl.search.all": "All",
   "zl.search.expand": "Expand",

package/dist/locales/zh-cn.mjs

@@ -12,6 +12,7 @@ const l = {
   "zl.upload.maxSize": "大小不超过{maxSize}MB",
   "zl.upload.nameSpace": "文件名中不得包含空格",
   "zl.search.search": "查询",
+  "zl.search.reset": "重置",
   "zl.search.filterConditions": "筛选条件",
   "zl.search.all": "全部",
   "zl.search.expand": "展开",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zl-ui-kit/components",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "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/utils": "0.7.1",
-    "@zl-ui-kit/icons": "0.7.1",
-    "@zl-ui-kit/composables": "0.7.1"
+    "@zl-ui-kit/utils": "0.7.2",
+    "@zl-ui-kit/icons": "0.7.2",
+    "@zl-ui-kit/composables": "0.7.2"
   },
   "peerDependencies": {
     "@vueuse/core": "^12.3.0",
@@ -99,9 +99,9 @@
     "@vue-office/pptx": "1.0.1",
     "echarts": "^5.6.0",
     "@jichuang/eslint-config": "1.0.0",
-    "@jichuang/vite-config": "1.0.0",
     "@jichuang/tsconfig": "1.0.0",
-    "@zl-ui-kit/theme": "0.7.1"
+    "@zl-ui-kit/theme": "0.7.2",
+    "@jichuang/vite-config": "1.0.0"
   },
   "repository": {
     "type": "git",