@cldemo/ui-kit 1.1.1 → 1.1.3

package/buildLibs/utils/Shared/Index.vue_vue_type_script_setup_true_lang-DTDwWFD3.js

@@ -0,0 +1,293 @@
+import { defineComponent as U, ref as M, computed as g, watch as T, openBlock as p, createElementBlock as h, normalizeClass as W, unref as X, createElementVNode as f, toDisplayString as b, renderSlot as S, createTextVNode as E, Fragment as A, normalizeStyle as R, renderList as Y, createBlock as Z, createVNode as ee } from "vue";
+import { _ as te } from "./Column.vue_vue_type_script_setup_true_lang-DuuTIHiC.js";
+import r from "@cldemo/ui-kit/common/base";
+import le from "@cldemo/ui-kit/common/Element";
+import { _ as ne } from "./Index.vue_vue_type_script_setup_true_lang-DROYOL5-.js";
+const oe = ["id"], ae = {
+  key: 0,
+  class: "picker-toolbar"
+}, se = { class: "picker-toolbar-title" }, ie = {
+  key: 0,
+  class: "picker-loading-mask"
+}, re = {
+  key: 2,
+  class: "picker-toolbar picker-toolbar--bottom"
+}, ue = { class: "picker-toolbar-title" }, ke = /* @__PURE__ */ U({
+  name: "ClPicker",
+  __name: "Index",
+  props: {
+    id: String,
+    // desc: 组件实例唯一标识，用于多实例场景下 DOM 查询限定
+    value: {
+      type: Array,
+      default: () => []
+    },
+    // desc: 选中值数组（每列一个值），支持 v-model:value
+    className: String,
+    // desc: 自定义CSS类名
+    columnsList: {
+      type: Array,
+      default: () => []
+    },
+    // desc: 列配置：显式多列 [{ values, defaultIndex }] 或树形级联（选项 children）
+    columnsFieldNameItem: {
+      type: Object,
+      default: () => ({})
+    },
+    // desc: 选项字段映射 | enum: { text, value, children }
+    title: String,
+    // desc: 顶部栏标题
+    submitLabel: {
+      type: String,
+      default: "确认"
+      // desc: 确认按钮文字
+    },
+    closeLabel: {
+      type: String,
+      default: "取消"
+      // desc: 取消按钮文字
+    },
+    toolbarPosition: {
+      type: String,
+      default: "top",
+      // desc: 顶部栏位置 | enum: top, bottom
+      validator: (i) => ["top", "bottom"].indexOf(i) !== -1
+    },
+    isShowToolbar: {
+      type: Boolean,
+      default: !0
+      // desc: 是否显示顶部栏（确认/取消按钮）
+    },
+    isLoading: Boolean,
+    // desc: 是否显示加载状态
+    isReadonly: Boolean,
+    // desc: 是否只读（禁止滑动切换选项）
+    isAllowHtml: Boolean,
+    // desc: 是否允许选项内容渲染 HTML（默认关闭，防注入）
+    itemHeight: {
+      type: Number,
+      default: 44
+      // desc: 选项高度(px)
+    },
+    showNum: {
+      type: Number,
+      default: 6
+      // desc: 可见选项个数（建议奇数，居中效果更好）
+    },
+    inertiaDuration: {
+      type: Number,
+      default: 1e3
+      // desc: 快速滑动时惯性滚动的动画时长(ms)
+    }
+  },
+  emits: ["update:value", "update:modelValue", "onConfirm", "onCancel", "onChange"],
+  setup(i, { expose: P, emit: _ }) {
+    const o = i, k = _, j = `picker-${r.getRandom(5)}`, z = o.id, v = M([]), u = M([]), C = g(() => ({
+      text: o.columnsFieldNameItem?.text || "text",
+      value: o.columnsFieldNameItem?.value || "value",
+      children: o.columnsFieldNameItem?.children || "children"
+    })), I = g(
+      () => r.isFinite(o.itemHeight) && o.itemHeight > 0 ? o.itemHeight : 44
+    ), F = g(
+      () => r.isFinite(o.showNum) ? Math.max(1, o.showNum) : 6
+    ), J = g(
+      () => r.isFinite(o.inertiaDuration) ? Math.max(0, o.inertiaDuration) : 1e3
+    ), q = g(() => ({
+      height: `${F.value * I.value}px`
+    })), G = g(() => ({
+      height: `${I.value}px`
+    })), K = g(() => {
+      let e = {
+        "panel-picker": !0,
+        "picker-readonly": o.isReadonly
+      };
+      return e = r.getJsonMerge(e, le.getClassNameJson(o.className)), e;
+    }), x = (e) => {
+      if (r.isString(e) || r.isNumber(e))
+        return { text: String(e), value: e };
+      if (r.getTypeof(e) === "object" && e !== null) {
+        const t = e, n = t[C.value.text], l = t[C.value.value], a = t[C.value.children], s = r.isString(n) ? n : r.isNumber(n) ? String(n) : "", d = r.isString(l) || r.isNumber(l) ? l : "", c = Array.isArray(a) ? a : void 0;
+        return {
+          text: s,
+          value: d,
+          disabled: !!t.disabled,
+          children: c ? c.map(x).filter((m) => m !== null) : void 0
+        };
+      }
+      return null;
+    }, H = () => {
+      const e = o.columnsList;
+      if (!Array.isArray(e) || e.length === 0) return !1;
+      const t = e[0];
+      return r.getTypeof(t) === "object" && t !== null && Array.isArray(t.values);
+    }, O = () => {
+      const e = o.columnsList;
+      if (!Array.isArray(e) || e.length === 0) return [];
+      if (H())
+        return e.map((a) => {
+          const s = Array.isArray(a.values) ? a.values.map(x).filter((c) => c !== null) : [], d = r.isFinite(a.defaultIndex) ? a.defaultIndex : 0;
+          return {
+            options: s,
+            defaultIndex: s.length > 0 ? Math.min(Math.max(0, Math.floor(d)), s.length - 1) : 0,
+            className: r.isString(a.className) ? a.className : void 0
+          };
+        });
+      const t = [];
+      let n = e.map(x).filter((a) => a !== null), l = 0;
+      for (; n.length > 0 && l < 20; ) {
+        l++, t.push({ options: n, defaultIndex: 0 });
+        const s = n[u.value[t.length - 1] || 0]?.children;
+        if (s && s.length > 0)
+          n = s;
+        else
+          break;
+      }
+      return t;
+    }, y = () => u.value.map((e, t) => v.value[t]?.options[e]?.value).filter((e) => e !== void 0), N = () => u.value.map((e, t) => v.value[t]?.options[e]).filter((e) => !!e), w = () => [...u.value], $ = (e, t) => e.length === t.length && e.every((n, l) => n === t[l]), B = () => {
+      const e = y(), t = Array.isArray(o.value) ? o.value : [];
+      $(e, t) || (k("update:value", e), k("update:modelValue", e));
+    }, V = (e) => {
+      const t = o.columnsList;
+      if (!Array.isArray(t) || t.length === 0) {
+        v.value = [], u.value = [];
+        return;
+      }
+      const n = [];
+      if (H())
+        t.forEach((l, a) => {
+          const s = Array.isArray(l.values) ? l.values.map(x).filter((m) => m !== null) : [], d = e?.[a];
+          let c = s.findIndex((m) => m.value === d);
+          if (c < 0) {
+            const m = r.isFinite(l.defaultIndex) ? l.defaultIndex : 0;
+            c = s.length > 0 ? Math.min(Math.max(0, Math.floor(m)), s.length - 1) : 0;
+          }
+          n.push(c);
+        });
+      else {
+        let l = t.map(x).filter((s) => s !== null), a = 0;
+        for (; l.length > 0 && a < 20; ) {
+          a++;
+          const s = e?.[n.length];
+          let d = l.findIndex((m) => m.value === s);
+          d < 0 && (d = 0), n.push(d);
+          const c = l[d]?.children;
+          if (c && c.length > 0)
+            l = c;
+          else
+            break;
+        }
+      }
+      u.value = n, v.value = O();
+    };
+    T(
+      () => o.columnsList,
+      () => {
+        V(Array.isArray(o.value) ? o.value : void 0);
+      },
+      { deep: !0, immediate: !0 }
+    ), T(
+      () => o.value,
+      (e) => {
+        if (!Array.isArray(e)) return;
+        const t = y();
+        $(t, e) || V(e);
+      },
+      { deep: !0 }
+    );
+    const Q = (e, t) => {
+      if (u.value[e] === t) return;
+      u.value[e] = t, u.value = u.value.slice(0, e + 1), v.value = O();
+      const n = u.value.slice(0, e + 1);
+      for (let l = n.length; l < v.value.length; l++)
+        n.push(v.value[l].defaultIndex);
+      u.value = n, k("onChange", {
+        selectedValues: y(),
+        selectedOptions: N(),
+        selectedIndexes: w(),
+        columnIndex: e
+      }), B();
+    }, L = () => {
+      k("onConfirm", {
+        selectedValues: y(),
+        selectedOptions: N(),
+        selectedIndexes: w()
+      });
+    }, D = () => {
+      k("onCancel", {
+        selectedValues: y(),
+        selectedOptions: N(),
+        selectedIndexes: w()
+      });
+    };
+    return P({ getValue: () => y(), setValue: (e) => {
+      V(e), B();
+    }, getValueData: () => N(), getSelectedOptions: () => N(), confirm: () => L() }), (e, t) => (p(), h("div", {
+      id: X(z),
+      class: W(K.value)
+    }, [
+      i.isShowToolbar && i.toolbarPosition === "top" ? (p(), h("div", ae, [
+        f("button", {
+          type: "button",
+          class: "picker-toolbar-btn picker-toolbar-btn--cancel",
+          onClick: D
+        }, b(i.closeLabel), 1),
+        f("div", se, [
+          S(e.$slots, "title", {}, () => [
+            E(b(i.title), 1)
+          ])
+        ]),
+        f("button", {
+          type: "button",
+          class: "picker-toolbar-btn picker-toolbar-btn--confirm",
+          onClick: L
+        }, b(i.submitLabel), 1)
+      ])) : (p(), h(A, { key: 1 }, [], 64)),
+      S(e.$slots, "columnsTop"),
+      f("div", {
+        class: "picker-columns",
+        style: R(q.value)
+      }, [
+        f("div", {
+          class: "picker-frame",
+          style: R(G.value)
+        }, null, 4),
+        (p(!0), h(A, null, Y(v.value, (n, l) => (p(), Z(te, {
+          key: `${j}-col-${l}`,
+          className: n.className,
+          optionsList: n.options,
+          valueIndex: u.value[l] || 0,
+          itemHeight: I.value,
+          showNum: F.value,
+          inertiaDuration: J.value,
+          isAllowHtml: i.isAllowHtml,
+          isReadonly: i.isReadonly,
+          onOnSelect: (a) => Q(l, a)
+        }, null, 8, ["className", "optionsList", "valueIndex", "itemHeight", "showNum", "inertiaDuration", "isAllowHtml", "isReadonly", "onOnSelect"]))), 128)),
+        i.isLoading ? (p(), h("div", ie, [
+          ee(ne, { size: "26" })
+        ])) : (p(), h(A, { key: 1 }, [], 64))
+      ], 4),
+      S(e.$slots, "columnsBottom"),
+      i.isShowToolbar && i.toolbarPosition === "bottom" ? (p(), h("div", re, [
+        f("button", {
+          type: "button",
+          class: "picker-toolbar-btn picker-toolbar-btn--cancel",
+          onClick: D
+        }, b(i.closeLabel), 1),
+        f("div", ue, [
+          S(e.$slots, "title", {}, () => [
+            E(b(i.title), 1)
+          ])
+        ]),
+        f("button", {
+          type: "button",
+          class: "picker-toolbar-btn picker-toolbar-btn--confirm",
+          onClick: L
+        }, b(i.submitLabel), 1)
+      ])) : (p(), h(A, { key: 3 }, [], 64))
+    ], 10, oe));
+  }
+});
+export {
+  ke as _
+};

package/buildLibs/utils/Shared/Index.vue_vue_type_script_setup_true_lang-DWkYiuK9.js

@@ -0,0 +1,120 @@
+import { defineComponent as k, reactive as g, computed as w, onMounted as x, nextTick as E, openBlock as l, createElementBlock as u, withKeys as p, withModifiers as m, unref as N, normalizeClass as H, createElementVNode as M, renderSlot as B, createVNode as d, Fragment as I } from "vue";
+import f from "@cldemo/ui-kit/common/base";
+import K from "@cldemo/ui-kit/common/Element";
+import { _ as C } from "./Index.vue_vue_type_script_setup_true_lang-C2LGy18j.js";
+import L from "../Element/__provide__/Clipboard.js";
+const F = ["id", "onKeydown"], J = { class: "clipboard-btn" }, P = {
+  key: 0,
+  class: "clipboard-operate-result"
+}, O = /* @__PURE__ */ k({
+  name: "ClClipboard",
+  __name: "Index",
+  props: {
+    id: String,
+    // desc: 组件实例唯一标识，用于多实例场景下 DOM 查询限定
+    className: String,
+    // desc: 自定义CSS类名
+    iconColorClass: String,
+    // desc: 图标附加CSS类名，用于修改复制图标的颜色
+    isUseSuccess: {
+      type: Boolean,
+      default: !0
+      // desc: 是否在hover状态下显示复制成功的绿色勾选反馈
+    },
+    textLabel: {
+      type: [String, Function],
+      required: !0
+      // desc: 要复制的文本内容，支持静态字符串或返回字符串的函数
+    }
+  },
+  emits: {
+    onCopySuccess: () => !0,
+    // desc: 复制成功时触发
+    onCopyError: (n) => !0
+    // desc: 复制失败时触发
+  },
+  setup(n, { emit: S }) {
+    const t = n, c = S, b = t.id, o = g({
+      isHover: !1,
+      isShowSuccess: !1
+    });
+    let a = null, r = !1;
+    const y = w(() => {
+      let e = {
+        "panel-clipboard": !0
+      };
+      return e = f.getJsonMerge(e, K.getClassNameJson(t.className)), e;
+    }), _ = () => {
+      a = L();
+    };
+    x(() => {
+      E(() => {
+        _();
+      });
+    });
+    const i = () => {
+      if (r)
+        return;
+      let e = "";
+      const { textLabel: s } = t;
+      if (s)
+        switch (typeof s) {
+          case "function":
+            try {
+              e = s();
+            } catch {
+              e = "", c("onCopyError", "复制失败 textLabel()");
+            }
+            break;
+          case "string":
+            e = s;
+            break;
+          default:
+            e = "";
+            break;
+        }
+      f.isEmpty(e) || !a || (r = !0, a.copy({
+        text: e,
+        successCallback: () => {
+          o.isShowSuccess = !0, c("onCopySuccess"), r = !1;
+        },
+        errorCallback: () => {
+          o.isShowSuccess = !1, c("onCopyError", e), r = !1;
+        }
+      }));
+    }, h = () => {
+      o.isHover = !0;
+    }, v = () => {
+      o.isShowSuccess = !1, o.isHover = !1;
+    };
+    return (e, s) => (l(), u("div", {
+      class: H(y.value),
+      id: N(b),
+      tabindex: "0",
+      role: "button",
+      "aria-label": "复制",
+      onMouseenter: h,
+      onMouseleave: v,
+      onClick: m(i, ["stop"]),
+      onKeydown: [
+        p(m(i, ["prevent"]), ["enter"]),
+        p(m(i, ["prevent"]), ["space"])
+      ]
+    }, [
+      M("div", J, [
+        B(e.$slots, "default", {}, () => [
+          d(C, {
+            name: "copy",
+            className: t.iconColorClass
+          }, null, 8, ["className"])
+        ])
+      ]),
+      n.isUseSuccess && o.isHover && o.isShowSuccess ? (l(), u("div", P, [
+        d(C, { name: "check1" })
+      ])) : (l(), u(I, { key: 1 }, [], 64))
+    ], 42, F));
+  }
+});
+export {
+  O as _
+};