@dazhicheng/ui 1.5.199 → 1.5.202

package/dist/components/tt-panel-select/src/index.vue.js

@@ -0,0 +1,386 @@
+import { defineComponent as Te, mergeModels as I, useModel as We, computed as u, watch as V, ref as h, useTemplateRef as S, onMounted as De, unref as n, createElementBlock as K, openBlock as w, normalizeClass as U, createVNode as z, mergeProps as Ie, withCtx as Ke, withDirectives as Ue, normalizeStyle as ze, createBlock as j, createCommentVNode as q, nextTick as $ } from "vue";
+import { useDesign as je } from "@dazhicheng/hooks";
+import { useResizeObserver as qe } from "@vueuse/core";
+import { ElSelect as He, vLoading as Je } from "element-plus";
+import { cloneDeep as H, isEqual as Qe } from "lodash-es";
+import { useSelectCollapseOptions as Xe } from "../../tt-form/src/hooks/useSelectCollapse.js";
+import { ALL as Ye } from "./common.js";
+import Ze from "./components/PanelLeft.vue.js";
+import el from "./components/PanelMiddle.vue.js";
+import ll from "./components/PanelRight.vue.js";
+import { usePanelSelectData as tl } from "./hooks/usePanelData.js";
+import { usePanelSelectSelection as al } from "./hooks/usePanelSelection.js";
+/* empty css           */
+const p = 4, wl = /* @__PURE__ */ Te({
+  name: "TtPanelSelect",
+  __name: "index",
+  props: /* @__PURE__ */ I({
+    disabled: { type: Boolean, default: !1 },
+    showNav: { type: Boolean, default: !0 },
+    multiple: { type: Boolean, default: !0 },
+    api: {},
+    params: { default: () => ({}) },
+    resultField: { default: "" },
+    options: { default: () => [] },
+    treeConfig: { default: () => ({
+      transform: !1,
+      labelField: "label",
+      valueField: "value",
+      disabledField: "disabled",
+      childrenField: "children",
+      parentField: "pid",
+      rootParentValue: null
+    }) },
+    immediate: { type: Boolean, default: !0 },
+    beforeFetch: { type: Function, default: void 0 },
+    afterFetch: { type: Function, default: void 0 },
+    separator: { default: "," },
+    pasteSearch: { type: Boolean, default: !1 },
+    alwaysLoad: { type: Boolean, default: !1 },
+    showAll: { type: Boolean, default: !0 },
+    showAllField: { default: Ye },
+    showPinyinMode: { type: Boolean, default: !1 },
+    showOriginMode: { type: Boolean, default: !0 },
+    leftPlaceholder: { default: "支持模糊搜索" },
+    middlePlaceholder: { default: "支持模糊搜索" },
+    placeholder: { default: "请选择" }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ I(["visible-change", "change"], ["update:modelValue"]),
+  setup(F, { expose: J, emit: Q }) {
+    const X = Je, Y = He, t = F, R = Q, { prefixCls: c } = je("panel-select"), {
+      loading: Z,
+      fetchApi: f,
+      treeOptions: ee,
+      navTreeOptions: N,
+      navNodes: le,
+      leafNodes: m,
+      isFirstLoaded: te,
+      buildOptionGroups: ae
+    } = tl(t), a = We(F, "modelValue"), B = u(() => t.disabled);
+    function k(e) {
+      if (e === t.showAllField) return { label: "全部", value: t.showAllField };
+      const l = m.value.find((o) => o.value === e);
+      return l ? { label: l.label, value: l.value } : { label: String(e), value: e };
+    }
+    function E(e) {
+      if (e != null)
+        return typeof e == "object" && "value" in e ? e.value : e;
+    }
+    const P = u({
+      get() {
+        if (t.multiple)
+          return (Array.isArray(a.value) ? a.value : a.value === void 0 ? [] : [a.value]).map((l) => k(l));
+        if (Array.isArray(a.value)) {
+          const e = a.value.at(-1);
+          return e === void 0 ? void 0 : k(e);
+        }
+        return a.value === void 0 ? void 0 : k(a.value);
+      },
+      set(e) {
+        if (t.multiple) {
+          const o = Array.isArray(e) ? e : [];
+          a.value = o.map((i) => E(i)).filter((i) => i !== void 0);
+          return;
+        }
+        const l = E(e);
+        a.value = l;
+      }
+    }), g = u({
+      get() {
+        return Array.isArray(a.value) ? t.multiple ? a.value : a.value.slice(-1) : a.value === void 0 ? [] : [a.value];
+      },
+      set(e) {
+        a.value = t.multiple ? [...e] : e.at(-1);
+      }
+    });
+    V(
+      [() => t.multiple, () => a.value],
+      ([e, l]) => {
+        if (e) {
+          Array.isArray(l) || (a.value = l === void 0 ? [] : [l]);
+          return;
+        }
+        Array.isArray(l) && (a.value = l.at(-1));
+      },
+      { immediate: !0 }
+    );
+    const C = h(), A = h(""), x = h(""), b = h(), G = S("middleRef"), v = S("selectWrapRef"), M = S("selectRef"), O = h(0);
+    function L() {
+      const e = v.value;
+      e && (O.value = e.offsetWidth);
+    }
+    qe(v, () => L());
+    const oe = u(() => ({
+      componentProps: {
+        multiple: t.multiple,
+        component: {
+          name: "ElSelect"
+        }
+      },
+      component: "ElSelect",
+      selectWrapRef: v,
+      selectRef: M
+    })), { selectComponentProps: ne } = Xe(oe), _ = u(() => {
+      const e = A.value.trim().toLowerCase();
+      if (!e) return N.value;
+      const l = (o) => {
+        const i = [];
+        return o.forEach((r) => {
+          var D;
+          const s = (D = r.children) != null && D.length ? l(r.children) : void 0;
+          (String(r.label).toLowerCase().includes(e) || s && s.length) && i.push({ ...r, children: s != null && s.length ? s : void 0 });
+        }), i;
+      };
+      return l(N.value);
+    }), ie = u(() => {
+      const e = [], l = (o) => {
+        o.forEach((i) => {
+          var r;
+          e.push(i.value), (r = i.children) != null && r.length && l(i.children);
+        });
+      };
+      return l(_.value), e;
+    }), y = u(() => ae(m.value, x.value)), re = u(() => {
+      const e = "minmax(var(--tt-panel-select-middle-width, 450px), 1fr)";
+      return t.showNav && !t.multiple ? `200px ${e}` : !t.showNav && t.multiple ? `${e} 180px` : !t.showNav && !t.multiple ? e : `200px ${e} 180px`;
+    }), ue = u(() => {
+      const e = "var(--tt-panel-select-middle-width, 450px)";
+      return t.showNav && !t.multiple ? `max(calc(200px + ${e}), 800px)` : !t.showNav && t.multiple ? `max(calc(${e} + 180px), 800px)` : !t.showNav && !t.multiple ? `max(${e}, 800px)` : `max(calc(200px + ${e} + 180px), 800px)`;
+    }), se = u(() => {
+      const e = [];
+      return y.value.forEach((l) => {
+        !(t.showOriginMode && l.value === "__origin__") && e.push({ key: `group-${String(l.value)}`, type: "group", group: l });
+        const i = Math.ceil(l.options.length / p);
+        for (let r = 0; r < l.options.length; r += p) {
+          const s = r / p;
+          e.push({
+            key: `options-${String(l.value)}-${r / p}`,
+            type: "options",
+            group: l,
+            options: l.options.slice(r, r + p),
+            isLast: s === i - 1
+          });
+        }
+      }), e;
+    }), {
+      selectedOptions: de,
+      isAllChecked: ce,
+      isIndeterminate: pe,
+      isGroupChecked: fe,
+      isGroupIndeterminate: me,
+      handleGroupCheck: he,
+      handleAllOptionCheck: ve,
+      handleOptionCheck: ye,
+      handleOptionsCheck: we,
+      handleCheckAll: T,
+      removeSelected: ke
+    } = al({
+      multiple: u(() => t.multiple),
+      modelValue: a,
+      selectedValues: g,
+      leafNodes: m,
+      allValue: u(() => t.showAllField)
+    }), ge = u(() => y.value.reduce(
+      (e, l) => (e[String(l.value)] = fe(l), e),
+      {}
+    )), Ce = u(() => y.value.reduce(
+      (e, l) => (e[String(l.value)] = me(l), e),
+      {}
+    )), Ae = u(() => g.value.includes(t.showAllField)), W = u(() => [...t.showAll ? [{ label: "全部", value: t.showAllField }] : [], ...m.value.map((l) => ({ ...l }))]);
+    function xe(e) {
+      const l = n(W);
+      if (Array.isArray(e))
+        return l.filter((o) => e.some((i) => i === o.value));
+      if (e !== void 0)
+        return l.find((o) => o.value === e);
+    }
+    function be(e) {
+      var o, i;
+      if (t.showPinyinMode || (o = e.children) != null && o.some((r) => {
+        var s;
+        return !((s = r.children) != null && s.length);
+      })) return e.value;
+      const l = m.value.find((r) => r.path.some((s) => s.value === e.value));
+      return (i = l == null ? void 0 : l.path.at(-2)) == null ? void 0 : i.value;
+    }
+    function Oe(e) {
+      C.value = e.value;
+      const l = be(e);
+      b.value = void 0, $(() => {
+        var o;
+        b.value = l, l !== void 0 && ((o = G.value) == null || o.scrollToGroup(l));
+      });
+    }
+    function Ve(e) {
+      A.value = e;
+    }
+    function Se(e) {
+      x.value = e;
+    }
+    function $e(e, l) {
+      const o = y.value.find((i) => i.value === e);
+      o && he(o, l);
+    }
+    async function Fe(e) {
+      R("visible-change", e), e && (await $(), L(), t.alwaysLoad ? await f() : !t.immediate && !n(te) && await f());
+    }
+    function Re(e) {
+      R("change", e, H(n(W)), xe(e));
+    }
+    function Ne(e) {
+      $(() => {
+        const l = n(a);
+        Qe(l, e) || Re(l);
+      });
+    }
+    function d(e) {
+      const l = H(n(a));
+      e(), Ne(l);
+    }
+    function Be(e) {
+      d(() => {
+        ve(e);
+      });
+    }
+    function Ee(e) {
+      d(() => {
+        T(e);
+      });
+    }
+    function Pe(e, l) {
+      d(() => {
+        $e(e, l);
+      });
+    }
+    function Ge(e, l) {
+      d(() => {
+        ye(e, l);
+      });
+    }
+    function Me(e, l) {
+      d(() => {
+        we(e, l);
+      });
+    }
+    function Le(e) {
+      d(() => {
+        ke(e);
+      });
+    }
+    function _e() {
+      d(() => {
+        T(!1);
+      });
+    }
+    return V(
+      () => t.params,
+      () => {
+        f();
+      },
+      { deep: !0 }
+    ), V(
+      le,
+      (e) => {
+        var l;
+        C.value !== void 0 || !e.length || (C.value = (l = e[0]) == null ? void 0 : l.value);
+      },
+      { immediate: !0 }
+    ), De(() => {
+      t.immediate && f();
+    }), J({
+      /** 重新加载数据源*/
+      reload: f,
+      /** 获取当前归一化后的树形选项数据 */
+      getOptions: () => n(ee),
+      /** 获取当前v-model值 */
+      getValue: () => n(a)
+    }), (e, l) => (w(), K("div", {
+      ref_key: "selectWrapRef",
+      ref: v,
+      class: U(n(c))
+    }, [
+      z(n(Y), Ie({
+        ref_key: "selectRef",
+        ref: M,
+        modelValue: P.value,
+        "onUpdate:modelValue": l[0] || (l[0] = (o) => P.value = o)
+      }, n(ne), {
+        multiple: e.multiple,
+        filterable: !1,
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        "popper-class": `${n(c)}__popper`,
+        onVisibleChange: Fe
+      }), {
+        empty: Ke(() => [
+          Ue((w(), K("div", {
+            "element-loading-text": "加载中",
+            class: U(`${n(c)}__panel`),
+            style: ze({
+              "--columns": re.value,
+              "--panel-min-width": ue.value,
+              "--panel-width": O.value ? `${O.value}px` : "100%"
+            })
+          }, [
+            t.showNav ? (w(), j(Ze, {
+              key: 0,
+              "prefix-cls": n(c),
+              keyword: A.value,
+              "tree-data": _.value,
+              "expanded-keys": ie.value,
+              "left-placeholder": e.leftPlaceholder,
+              "onUpdate:keyword": Ve,
+              onSelect: Oe
+            }, null, 8, ["prefix-cls", "keyword", "tree-data", "expanded-keys", "left-placeholder"])) : q("", !0),
+            z(el, {
+              ref_key: "middleRef",
+              ref: G,
+              "prefix-cls": n(c),
+              multiple: e.multiple,
+              keyword: x.value,
+              rows: se.value,
+              disabled: B.value,
+              "show-all": t.showAll,
+              "option-per-row": p,
+              "row-height": 40,
+              "selected-values": g.value,
+              "is-all-checked": n(ce),
+              "is-indeterminate": n(pe),
+              "all-checked": Ae.value,
+              "scroll-to-group-value": b.value,
+              "group-checked-map": ge.value,
+              "group-indeterminate-map": Ce.value,
+              "paste-search": e.pasteSearch,
+              separator: e.separator,
+              "middle-placeholder": e.middlePlaceholder,
+              "onUpdate:keyword": Se,
+              onAllCheck: Be,
+              onCheckAll: Ee,
+              onGroupCheck: Pe,
+              onOptionCheck: Ge,
+              onOptionsCheck: Me
+            }, null, 8, ["prefix-cls", "multiple", "keyword", "rows", "disabled", "show-all", "selected-values", "is-all-checked", "is-indeterminate", "all-checked", "scroll-to-group-value", "group-checked-map", "group-indeterminate-map", "paste-search", "separator", "middle-placeholder"]),
+            t.multiple ? (w(), j(ll, {
+              key: 1,
+              "prefix-cls": n(c),
+              multiple: e.multiple,
+              disabled: B.value,
+              "selected-options": n(de),
+              onClearAll: _e,
+              onRemove: Le
+            }, null, 8, ["prefix-cls", "multiple", "disabled", "selected-options"])) : q("", !0)
+          ], 6)), [
+            [n(X), n(Z)]
+          ])
+        ]),
+        _: 1
+      }, 16, ["modelValue", "multiple", "placeholder", "disabled", "popper-class"])
+    ], 2));
+  }
+});
+export {
+  wl as default
+};

package/dist/components/tt-panel-select/src/index.vue2.js

@@ -0,0 +1,4 @@
+import f from "./index.vue.js";
+export {
+  f as default
+};

package/dist/components/tt-select/index.js

@@ -0,0 +1,8 @@
+import { withInstall as t } from "@dazhicheng/utils";
+import o from "./src/Select.vue.js";
+/* empty css                */
+const a = t(o);
+export {
+  a as TtSelect,
+  a as default
+};