hys-ui 0.1.1 → 0.2.0

package/dist/components/HysTreeSelect/HysTreeSelect2.vue.js

@@ -1,4 +1,560 @@
-import f from "./HysTreeSelect.vue.js";
+import { defineComponent as Me, useAttrs as Ae, ref as V, useId as Fe, provide as Oe, computed as B, watch as O, nextTick as I, onMounted as Ie, onUpdated as De, onActivated as We, onDeactivated as qe, onBeforeUnmount as Pe, openBlock as r, createElementBlock as u, mergeProps as Q, unref as a, createElementVNode as S, withModifiers as Z, renderSlot as v, createCommentVNode as f, toDisplayString as z, Fragment as _, renderList as fe, normalizeClass as ye, createTextVNode as D, createBlock as E, resolveDynamicComponent as pe, createVNode as C, withCtx as $, Teleport as Ue, createSlots as je, normalizeProps as W, guardReactiveProps as q } from "vue";
+import { X as me, LoaderCircle as ge, ChevronDown as Re, Search as Xe } from "lucide-vue-next";
+import Ye from "../HysInput/HysInput.vue.js";
+import Ge from "../HysButton/HysButton.vue.js";
+import Je from "../HysTooltip/HysTooltip.vue.js";
+import Qe from "./HysTreeSelectPanel.vue.js";
+import { useFloating as Ze } from "../../composables/useFloating.js";
+import { useHysRootAttrs as _e } from "../../config.js";
+import { useHysControlState as ea, useHysFormItemContext as aa, fieldKey as ta } from "../../composables/formContext.js";
+import { useTreeSelect as la } from "../../composables/useTreeSelect.js";
+const oa = ["disabled"], sa = ["id", "aria-expanded", "aria-controls", "aria-label", "aria-disabled", "aria-readonly", "aria-invalid", "aria-describedby", "aria-required", "aria-busy", "tabindex"], ia = {
+  key: 0,
+  class: "hys-ui-tree-select-prefix"
+}, ra = {
+  key: 1,
+  class: "hys-ui-tree-select-placeholder"
+}, na = {
+  key: 2,
+  class: "hys-ui-tree-select-tags"
+}, da = { class: "hys-ui-tree-select-tag-label" }, ua = ["disabled", "aria-label", "onClick"], ca = ["aria-label"], ha = {
+  key: 3,
+  class: "hys-ui-tree-select-value"
+}, va = { class: "hys-ui-tree-select-indicators" }, fa = ["name", "value", "disabled"], ya = {
+  key: 0,
+  class: "hys-ui-tree-select-header"
+}, pa = {
+  key: 2,
+  class: "hys-ui-tree-select-loading",
+  role: "status"
+}, ma = {
+  key: 3,
+  class: "hys-ui-tree-select-error",
+  role: "alert"
+}, ga = {
+  key: 4,
+  class: "hys-ui-tree-select-footer"
+}, Ka = /* @__PURE__ */ Me({
+  inheritAttrs: !1,
+  __name: "HysTreeSelect",
+  props: {
+    modelValue: {},
+    defaultValue: {},
+    nodes: {},
+    cacheData: {},
+    fieldNames: {},
+    nodeKey: {},
+    simpleMode: { type: [Boolean, Object] },
+    labelInValue: { type: Boolean },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    loading: { type: Boolean },
+    size: {},
+    status: {},
+    placeholder: {},
+    ariaLabel: {},
+    name: {},
+    multiple: { type: Boolean },
+    leafOnly: { type: Boolean },
+    checkable: { type: Boolean },
+    checkStrictly: { type: Boolean },
+    showCheckedStrategy: { default: "child" },
+    clearable: { type: Boolean, default: !1 },
+    clearValue: {},
+    removable: { type: Boolean, default: !0 },
+    multipleLimit: {},
+    maxTagCount: { default: 3 },
+    maxTagTextLength: {},
+    searchable: { type: Boolean, default: !0 },
+    searchValue: {},
+    defaultSearchValue: {},
+    searchPlaceholder: {},
+    filterNode: {},
+    filterMode: {},
+    showMatchedChildren: { type: Boolean },
+    retainSearch: { type: Boolean },
+    clearSearchAfterSelect: { type: Boolean, default: !0 },
+    remote: { type: Boolean },
+    remoteMethod: {},
+    debounce: {},
+    expandedKeys: {},
+    defaultExpandedKeys: {},
+    defaultExpandAll: { type: Boolean, default: !0 },
+    autoExpandParent: { type: Boolean, default: !0 },
+    accordion: { type: Boolean },
+    expandOnClickNode: { type: Boolean },
+    expandSelected: { type: Boolean, default: !0 },
+    loadedKeys: {},
+    loadChildren: {},
+    showLine: { type: Boolean },
+    showIcon: { type: Boolean, default: !0 },
+    indent: { default: 18 },
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean },
+    showOnFocus: { type: Boolean },
+    popupMatchWidth: { type: Boolean, default: !0 },
+    popupWidth: {},
+    popupClass: {},
+    popupStyle: {},
+    appendTo: { type: [String, Boolean], default: "body" },
+    placement: {},
+    listHeight: { default: 256 },
+    virtual: { type: Boolean },
+    itemHeight: {},
+    overscan: { default: 4 },
+    emptyText: {},
+    noMatchText: {},
+    loadingText: {},
+    locale: {},
+    validateEvent: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue", "change", "value-change", "select", "deselect", "check", "clear", "remove-tag", "limit", "update:searchValue", "search", "search-error", "search-complete", "update:open", "visible-change", "update:expandedKeys", "update:loadedKeys", "node-expand", "node-collapse", "load-error", "children-loaded", "load", "scroll", "focus", "blur"],
+  setup(i, { expose: be, emit: ke }) {
+    const o = i, T = ke, we = Ae(), ee = _e(), n = ea(o), g = aa(), y = V(), H = V(), P = V(), b = V(), M = Fe(), ae = V("");
+    Oe(ta, void 0);
+    let k = !0, K = !1, U = !1, N = 0;
+    const j = Ze(y, H, {
+      get placement() {
+        return o.placement;
+      },
+      matchWidth: () => o.popupMatchWidth ? !0 : "min",
+      width: () => {
+        var e;
+        return o.popupWidth ?? (o.virtual && !o.popupMatchWidth ? Math.max(((e = y.value) == null ? void 0 : e.getBoundingClientRect().width) ?? 0, 240) : void 0);
+      },
+      requestOpen: (e, l) => (e || (U = !!l), T("update:open", e), o.open === void 0 ? void 0 : !1)
+    }), { open: c, style: xe, show: Be, close: p } = j, Te = B(() => c.value && k), s = la(
+      o,
+      n.disabled,
+      Te,
+      (e, ...l) => {
+        T(e, ...l), e === "value-change" && o.clearSearchAfterSelect && !o.retainSearch && s.filter("");
+      },
+      () => {
+        g.validate("change");
+      }
+    ), {
+      items: w,
+      multiple: R,
+      busy: ba,
+      blocked: X,
+      query: te,
+      words: L,
+      remoteError: le,
+      remotePending: Y
+    } = s, Se = B(() => ({
+      "--hys-ui-tree-select-control-height": (n.size.value === "sm" ? 30 : n.size.value === "lg" ? 44 : 38) + "px"
+    })), Ce = B(() => ({
+      ...o.popupStyle,
+      ...xe.value,
+      maxHeight: "min(60dvh, calc(100dvh - 20px))",
+      overflowY: "hidden"
+    })), $e = B(
+      () => o.itemHeight ?? (n.size.value === "sm" ? 30 : n.size.value === "lg" ? 42 : 36)
+    ), oe = B(
+      () => Number.isFinite(o.maxTagCount) ? Math.max(0, Math.floor(o.maxTagCount)) : 1 / 0
+    ), ze = B(() => w.value.slice(0, oe.value)), x = B(() => w.value.slice(oe.value)), A = (e) => typeof e.label == "string" || typeof e.label == "number" ? String(e.label) : String(e.value), se = (e) => Number.isFinite(o.maxTagTextLength) && o.maxTagTextLength >= 0 ? A(e).slice(0, o.maxTagTextLength) + (A(e).length > o.maxTagTextLength ? "…" : "") : void 0, Ee = B(
+      () => o.clearable && !X.value && s.values.value.some((e) => !s.item(e).disabled)
+    ), Ke = () => Object.fromEntries(
+      Object.entries(we).filter(([e]) => !["class", "style"].includes(e))
+    );
+    function ie() {
+      var d;
+      const e = (d = y.value) == null ? void 0 : d.closest("label");
+      if (!e) return;
+      const l = e.cloneNode(!0);
+      l.querySelectorAll(".hys-ui-tree-select-wrap").forEach((t) => t.remove()), ae.value = (l.textContent ?? "").replace(/\s+/g, " ").trim();
+    }
+    async function m(e = !0, l = !1) {
+      var ue, ce, he, ve;
+      if (!k || n.disabled.value || o.readonly) return !1;
+      const d = c.value, t = N;
+      if (await Be(l), await I(), !k || !c.value || t !== N) return !1;
+      if (!d && !o.retainSearch && s.filter(""), o.expandSelected && s.values.value.length) {
+        const J = s.values.value.flatMap(
+          (F) => s.tree.ancestors(F)
+        );
+        await s.tree.setExpandedKeys([
+          .../* @__PURE__ */ new Set([...s.tree.rawExpanded.value, ...J])
+        ]);
+      }
+      if (await I(), !k || !c.value || t !== N) return !1;
+      const h = s.values.value.find(
+        (J) => s.tree.visible.value.some((F) => F.key === J && !F.disabled)
+      );
+      return h !== void 0 && ((ue = b.value) == null || ue.setActive(h), await ((ce = b.value) == null ? void 0 : ce.scrollTo({ key: h }))), e && (o.searchable ? (he = P.value) == null || he.focus() : await ((ve = b.value) == null ? void 0 : ve.focus(h))), !0;
+    }
+    async function G() {
+      const e = await s.clear();
+      return e && p(!0), e;
+    }
+    function Ne(e) {
+      (e == null ? void 0 : e.target) instanceof Element && e.target.closest("button") || (c.value ? p() : m());
+    }
+    function Le(e) {
+      !R.value && s.values.value.includes(e) && p(!0);
+    }
+    function Ve(e) {
+      var l, d;
+      if (!(e.isComposing || e.keyCode === 229 || e.target !== y.value)) {
+        if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key))
+          e.preventDefault(), c.value ? o.searchable ? (l = P.value) == null || l.focus() : (d = b.value) == null || d.focus() : m();
+        else if (e.key === "Escape" && c.value)
+          e.preventDefault(), p(!0);
+        else if (e.key === "Backspace" && R.value && !X.value) {
+          const t = [...w.value].reverse().find((h) => !h.disabled);
+          t && (e.preventDefault(), s.removeTag(t.value));
+        }
+      }
+    }
+    function re(e) {
+      K || (K = !0, T("focus", e)), e.target === y.value && o.showOnFocus && !j.restoringFocus.value && m(!1);
+    }
+    async function ne(e) {
+      var d, t;
+      if (await I(), !k) return;
+      const l = e.relatedTarget instanceof Node ? e.relatedTarget : document.activeElement;
+      (d = y.value) != null && d.contains(l) || (t = H.value) != null && t.contains(l) || K && (K = !1, T("blur", e), o.validateEvent && g.validate("blur"));
+    }
+    async function He(e) {
+      var l;
+      await m(!1) && await ((l = b.value) == null ? void 0 : l.scrollTo(e));
+    }
+    O(
+      () => o.open,
+      (e) => {
+        if (k)
+          if (e) m(!1, !0);
+          else {
+            const l = U;
+            U = !1, p(l, !0);
+          }
+      }
+    ), O(c, (e) => {
+      e || N++, T("visible-change", e), !e && !o.retainSearch && s.filter("");
+    }), O(
+      [() => o.readonly, n.disabled],
+      ([e, l]) => {
+        (e || l) && (p(!1, !0), o.open && T("update:open", !1));
+      },
+      { flush: "sync" }
+    ), O(
+      [
+        te,
+        w,
+        () => o.popupWidth,
+        () => o.popupMatchWidth,
+        () => n.size.value
+      ],
+      () => {
+        I().then(() => j.update());
+      }
+    ), Ie(() => {
+      ie(), (o.open ?? o.defaultOpen) && m(!1, !0);
+    }), De(ie), We(() => {
+      k = !0, o.open && m(!1, !0);
+    });
+    function de() {
+      k = !1, K = !1, N++, p(!1, !0);
+    }
+    return qe(de), Pe(de), be({
+      element: y,
+      open: c,
+      focus: () => {
+        var e;
+        n.disabled.value || (e = y.value) == null || e.focus();
+      },
+      blur: () => {
+        var e, l, d;
+        p(), ((e = y.value) != null && e.contains(document.activeElement) || (l = H.value) != null && l.contains(document.activeElement)) && ((d = document.activeElement) == null || d.blur());
+      },
+      show: () => m(),
+      hide: (e = !1) => p(e),
+      clear: G,
+      removeTag: s.removeTag,
+      setValue: s.setValue,
+      filter: s.filter,
+      getSelectedKeys: () => [...s.values.value],
+      getSelectedItems: () => [...w.value],
+      getCheckedKeys: s.tree.getCheckedKeys,
+      getHalfCheckedKeys: s.tree.getHalfCheckedKeys,
+      getNode: (e) => {
+        const l = s.tree.getNode(e);
+        return l ? s.rawNode(l) : void 0;
+      },
+      getExpandedKeys: () => [...s.tree.expanded.value],
+      setExpandedKeys: s.tree.setExpandedKeys,
+      expandNode: s.tree.expandNode,
+      reloadNode: s.tree.reloadNode,
+      scrollTo: He
+    }), (e, l) => {
+      var d;
+      return r(), u("div", Q(a(ee), {
+        class: ["hys-ui-tree-select-wrap", [e.$attrs.class, "hys-ui-tree-select-" + a(n).size.value]],
+        style: [e.$attrs.style, Se.value]
+      }), [
+        S("button", {
+          hidden: "",
+          type: "button",
+          tabindex: "-1",
+          "aria-hidden": "true",
+          disabled: a(n).disabled.value,
+          onClick: l[0] || (l[0] = Z((t) => {
+            var h;
+            (h = y.value) == null || h.focus(), m();
+          }, ["prevent"]))
+        }, null, 8, oa),
+        S("div", Q({
+          ref_key: "trigger",
+          ref: y
+        }, Ke(), {
+          id: e.$attrs.id || a(g).id.value || a(M),
+          "data-hys-ui-field-managed": "",
+          role: "combobox",
+          "aria-haspopup": "tree",
+          "aria-expanded": a(c),
+          "aria-controls": a(c) ? a(M) + "-tree" : void 0,
+          "aria-label": i.ariaLabel || a(g).label.value || ae.value || i.placeholder || "选择节点",
+          "aria-disabled": a(n).disabled.value || void 0,
+          "aria-readonly": i.readonly || void 0,
+          "aria-invalid": i.status === "error" || a(g).invalid.value || void 0,
+          "aria-describedby": a(g).describedBy.value,
+          "aria-required": a(g).required.value || void 0,
+          "aria-busy": i.loading || a(Y) || void 0,
+          tabindex: a(n).disabled.value ? -1 : 0,
+          class: ["hys-ui-tree-select-control", {
+            "hys-ui-tree-select-control-disabled": a(n).disabled.value,
+            "hys-ui-tree-select-control-error": i.status === "error" || a(g).invalid.value,
+            "hys-ui-tree-select-control-warning": i.status === "warning",
+            "hys-ui-tree-select-control-success": i.status === "success"
+          }],
+          onClick: Ne,
+          onKeydown: Ve,
+          onFocusin: re,
+          onFocusout: ne
+        }), [
+          e.$slots.prefix ? (r(), u("span", ia, [
+            v(e.$slots, "prefix", {}, void 0, !0)
+          ])) : f("", !0),
+          a(w).length ? a(R) ? (r(), u("div", na, [
+            (r(!0), u(_, null, fe(ze.value, (t) => v(e.$slots, "tag", {
+              item: t,
+              remove: () => a(s).removeTag(t.value)
+            }, () => [
+              S("span", {
+                class: ye(["hys-ui-tree-select-tag", { "hys-ui-tree-select-tag-disabled": t.disabled }])
+              }, [
+                S("span", da, [
+                  se(t) !== void 0 ? (r(), u(_, { key: 0 }, [
+                    D(z(se(t)), 1)
+                  ], 64)) : (r(), E(pe(() => t.label), { key: 1 }))
+                ]),
+                i.removable ? (r(), u("button", {
+                  key: 0,
+                  type: "button",
+                  class: "hys-ui-tree-select-tag-remove",
+                  disabled: a(X) || t.disabled,
+                  "aria-label": "移除 " + A(t),
+                  onClick: Z((h) => a(s).removeTag(t.value), ["stop"])
+                }, [
+                  C(a(me), {
+                    size: 12,
+                    "aria-hidden": "true"
+                  })
+                ], 8, ua)) : f("", !0)
+              ], 2)
+            ], !0, typeof t.value + ":" + t.value)), 128)),
+            x.value.length ? (r(), E(Je, {
+              key: 0,
+              text: x.value.slice(0, 20).map(A).join("、") + (x.value.length > 20 ? " 等 " + x.value.length + " 项" : "")
+            }, {
+              default: $(() => [
+                S("span", {
+                  class: "hys-ui-tree-select-tag hys-ui-tree-select-more",
+                  "aria-label": "另外 " + x.value.length + " 项"
+                }, [
+                  v(e.$slots, "max-tag-placeholder", {
+                    items: x.value,
+                    count: x.value.length
+                  }, () => [
+                    D("+" + z(x.value.length), 1)
+                  ], !0)
+                ], 8, ca)
+              ]),
+              _: 3
+            }, 8, ["text"])) : f("", !0)
+          ])) : (r(), u("span", ha, [
+            (r(), E(pe(() => a(w)[0].label)))
+          ])) : (r(), u("span", ra, z(i.placeholder || "选择节点"), 1)),
+          S("span", va, [
+            i.loading || a(Y) ? (r(), E(a(ge), {
+              key: 0,
+              size: 15,
+              class: "hys-ui-icon-spin",
+              "aria-hidden": "true"
+            })) : f("", !0),
+            Ee.value ? (r(), u("button", {
+              key: 1,
+              type: "button",
+              class: "hys-ui-tree-select-clear",
+              "aria-label": "清空选择",
+              onClick: Z(G, ["stop"])
+            }, [
+              C(a(me), {
+                size: 14,
+                "aria-hidden": "true"
+              })
+            ])) : f("", !0),
+            v(e.$slots, "suffix", {}, () => [
+              C(a(Re), {
+                size: 16,
+                class: ye(["hys-ui-tree-select-chevron", { "hys-ui-tree-select-chevron-open": a(c) }]),
+                "aria-hidden": "true"
+              }, null, 8, ["class"])
+            ], !0)
+          ])
+        ], 16, sa),
+        i.name ? (r(!0), u(_, { key: 0 }, fe(a(s).values.value, (t) => (r(), u("input", {
+          key: typeof t + ":" + t,
+          type: "hidden",
+          name: i.name,
+          value: t,
+          disabled: a(n).disabled.value
+        }, null, 8, fa))), 128)) : f("", !0),
+        (r(), E(Ue, {
+          to: i.appendTo === !1 ? "body" : i.appendTo,
+          disabled: i.appendTo === !1
+        }, [
+          a(c) ? (r(), u("div", Q({
+            key: 0,
+            ref_key: "panel",
+            ref: H
+          }, a(ee), {
+            class: ["hys-ui-tree-select-menu hys-ui-pf-tree-select-menu", [i.popupClass, "hys-ui-tree-select-" + a(n).size.value]],
+            style: Ce.value,
+            onFocusin: re,
+            onFocusout: ne
+          }), [
+            e.$slots.header ? (r(), u("header", ya, [
+              v(e.$slots, "header", {}, void 0, !0)
+            ])) : f("", !0),
+            i.searchable ? (r(), E(Ye, {
+              key: 1,
+              ref_key: "search",
+              ref: P,
+              class: "hys-ui-tree-select-search",
+              "model-value": a(te),
+              placeholder: a(L).search,
+              "aria-label": a(L).search,
+              "aria-controls": a(M) + "-tree",
+              "aria-activedescendant": (d = b.value) == null ? void 0 : d.activeId,
+              disabled: a(n).disabled.value || i.readonly || i.loading,
+              size: a(n).size.value,
+              clearable: "",
+              "onUpdate:modelValue": a(s).filter,
+              onKeydown: l[1] || (l[1] = (t) => {
+                var h;
+                return (h = b.value) == null ? void 0 : h.searchKeys(t);
+              })
+            }, {
+              prefix: $(() => [
+                C(a(Xe), {
+                  size: 14,
+                  "aria-hidden": "true"
+                })
+              ]),
+              _: 1
+            }, 8, ["model-value", "placeholder", "aria-label", "aria-controls", "aria-activedescendant", "disabled", "size", "onUpdate:modelValue"])) : f("", !0),
+            i.loading || a(Y) ? (r(), u("div", pa, [
+              v(e.$slots, "loading", {}, () => [
+                C(a(ge), {
+                  size: 16,
+                  class: "hys-ui-icon-spin",
+                  "aria-hidden": "true"
+                }),
+                D(z(a(L).loading), 1)
+              ], !0)
+            ])) : f("", !0),
+            a(le) ? (r(), u("div", ma, [
+              v(e.$slots, "error", {
+                error: a(le),
+                retry: a(s).retrySearch
+              }, () => [
+                S("span", null, z(a(L).loadError), 1),
+                C(Ge, {
+                  size: "sm",
+                  variant: "ghost",
+                  onClick: l[2] || (l[2] = (t) => a(s).retrySearch())
+                }, {
+                  default: $(() => [
+                    D(z(a(L).retry), 1)
+                  ]),
+                  _: 1
+                })
+              ], !0)
+            ])) : f("", !0),
+            C(Qe, {
+              ref_key: "view",
+              ref: b,
+              store: a(s),
+              size: a(n).size.value,
+              "tree-id": a(M) + "-tree",
+              checkable: i.checkable,
+              "check-strictly": i.checkStrictly,
+              "leaf-only": i.leafOnly,
+              "expand-on-click-node": i.expandOnClickNode,
+              "show-line": i.showLine,
+              "show-icon": i.showIcon,
+              indent: i.indent,
+              "list-height": i.listHeight,
+              virtual: i.virtual,
+              "item-height": $e.value,
+              overscan: i.overscan,
+              onChoose: Le,
+              onScroll: l[3] || (l[3] = (t) => T("scroll", t))
+            }, je({ _: 2 }, [
+              e.$slots.option ? {
+                name: "option",
+                fn: $((t) => [
+                  v(e.$slots, "option", W(q(t)), void 0, !0)
+                ]),
+                key: "0"
+              } : void 0,
+              e.$slots.icon ? {
+                name: "icon",
+                fn: $((t) => [
+                  v(e.$slots, "icon", W(q(t)), void 0, !0)
+                ]),
+                key: "1"
+              } : void 0,
+              e.$slots.switcher ? {
+                name: "switcher",
+                fn: $((t) => [
+                  v(e.$slots, "switcher", W(q(t)), void 0, !0)
+                ]),
+                key: "2"
+              } : void 0,
+              e.$slots.empty ? {
+                name: "empty",
+                fn: $((t) => [
+                  v(e.$slots, "empty", W(q(t)), void 0, !0)
+                ]),
+                key: "3"
+              } : void 0
+            ]), 1032, ["store", "size", "tree-id", "checkable", "check-strictly", "leaf-only", "expand-on-click-node", "show-line", "show-icon", "indent", "list-height", "virtual", "item-height", "overscan"]),
+            e.$slots.footer ? (r(), u("footer", ga, [
+              v(e.$slots, "footer", {
+                items: a(w),
+                clear: G,
+                close: () => a(p)(!0)
+              }, void 0, !0)
+            ])) : f("", !0)
+          ], 16)) : f("", !0)
+        ], 8, ["to", "disabled"]))
+      ], 16);
+    };
+  }
+});
 export {
-  f as default
+  Ka as default
 };

package/dist/components/HysTreeSelect/HysTreeSelectPanel.vue.js

@@ -0,0 +1,7 @@
+import e from "./HysTreeSelectPanel2.vue.js";
+/* empty css                        */
+import o from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ o(e, [["__scopeId", "data-v-6d8bab07"]]);
+export {
+  m as default
+};