hys-ui 0.1.1 → 0.3.0

package/dist/components/HysTransfer/HysTransferPanel2.vue.js

@@ -0,0 +1,503 @@
+import { defineComponent as xe, ref as I, computed as d, watch as F, onDeactivated as Ke, onBeforeUnmount as Te, onMounted as De, onActivated as Me, nextTick as W, openBlock as r, createElementBlock as c, mergeProps as He, unref as k, createElementVNode as m, renderSlot as S, createBlock as x, withCtx as O, toDisplayString as h, createVNode as $, createCommentVNode as w, normalizeStyle as j, normalizeClass as ie, Fragment as G, renderList as Be, createTextVNode as p, withModifiers as Ae } from "vue";
+import { Search as qe, X as Pe, GripVertical as Ie, LoaderCircle as Oe } from "lucide-vue-next";
+import ne from "../HysCheckbox/HysCheckbox.vue.js";
+import se from "../HysButton/HysButton.vue.js";
+import $e from "../HysInput/HysInput.vue.js";
+import Fe from "../HysPagination/HysPagination.vue.js";
+import { useHysRootAttrs as pe } from "../../config.js";
+import { transferLabel as re, transferToken as T } from "../../composables/transfer.js";
+const Le = ["data-side", "aria-label", "aria-busy"], Ne = { class: "hys-ui-pf-transfer-header" }, Ee = ["id"], Re = ["id"], Ve = { class: "hys-ui-transfer-count" }, Ue = { class: "hys-ui-transfer-body" }, We = ["aria-label"], je = ["data-transfer-key", "draggable", "title", "onClickCapture", "onDblclick", "onMousedown", "onDragstart"], Ge = { class: "hys-ui-transfer-label" }, Xe = {
+  key: 1,
+  class: "hys-ui-transfer-label"
+}, Je = {
+  key: 0,
+  class: "hys-ui-pf-transfer-empty"
+}, Qe = ["aria-label"], Ye = {
+  key: 1,
+  class: "hys-ui-transfer-extra"
+}, Ze = {
+  key: 0,
+  class: "hys-ui-transfer-filter-count"
+}, _e = {
+  key: 2,
+  class: "hys-ui-transfer-pagination"
+}, et = {
+  key: 3,
+  class: "hys-ui-transfer-footer"
+}, ut = /* @__PURE__ */ xe({
+  __name: "HysTransferPanel",
+  props: {
+    side: {},
+    title: {},
+    id: {},
+    items: {},
+    total: {},
+    filtered: {},
+    checkedKeys: {},
+    busy: { type: Boolean },
+    loading: { type: Boolean },
+    filterable: { type: Boolean },
+    query: {},
+    placeholder: {},
+    showSelectAll: { type: Boolean },
+    showInvert: { type: Boolean },
+    oneWay: { type: Boolean },
+    size: {},
+    listHeight: {},
+    itemHeight: {},
+    overscan: {},
+    virtual: { type: Boolean },
+    draggable: { type: Boolean },
+    moveOnDoubleClick: { type: Boolean },
+    draggedKeys: {},
+    dropTarget: { type: Boolean },
+    words: {},
+    page: {},
+    pageSize: {},
+    pagination: { type: [Object, Boolean] },
+    listStyle: {},
+    format: { type: Function },
+    renderContent: { type: Function }
+  },
+  emits: ["check", "rangeCheck", "moveItem", "checkAll", "invert", "search", "remove", "page", "pageSize", "dragStart", "dragEnd", "dragOver", "dragLeave", "drop", "scroll"],
+  setup(e, { expose: oe, emit: ue }) {
+    const l = e, u = ue, de = pe(), s = I(), X = I(), J = I(), v = I(0), D = I(0);
+    let K = 0, g = !0, M = 0, L = 0, y;
+    function N() {
+      y == null || y.disconnect(), y = void 0, !(!g || !l.virtual || !s.value) && (D.value = s.value.clientHeight, typeof ResizeObserver < "u" && (y = new ResizeObserver(() => {
+        g && s.value && (D.value = s.value.clientHeight);
+      }), y.observe(s.value)));
+    }
+    const H = d(() => new Set(l.checkedKeys)), ce = d(() => new Set(l.draggedKeys)), B = d(() => l.items.filter((t) => !t.disabled)), A = d(() => !l.oneWay || l.side === "left"), Q = d(
+      () => B.value.filter((t) => H.value.has(t.key)).length
+    ), E = d(
+      () => !!B.value.length && Q.value === B.value.length
+    ), Y = d(() => Q.value > 0 && !E.value), R = d(() => ({
+      side: l.side,
+      total: l.total,
+      filtered: l.filtered,
+      checked: l.checkedKeys.length
+    })), q = d(
+      () => Number.isFinite(l.listHeight) ? Math.max(80, Math.min(2e3, l.listHeight)) : 240
+    ), f = d(
+      () => Number.isFinite(l.itemHeight) ? Math.max(24, Math.min(200, l.itemHeight)) : 36
+    ), Z = d(
+      () => Number.isFinite(l.overscan) ? Math.max(0, Math.min(30, Math.floor(l.overscan))) : 4
+    ), _ = d(
+      () => l.virtual ? Math.max(
+        0,
+        Math.min(
+          Math.max(0, l.items.length - 1),
+          Math.floor(v.value / f.value) - Z.value
+        )
+      ) : 0
+    ), fe = d(
+      () => l.virtual ? Math.min(
+        l.items.length,
+        Math.ceil(
+          (v.value + (D.value || q.value)) / f.value
+        ) + Z.value
+      ) : l.items.length
+    ), ye = d(() => l.items.slice(_.value, fe.value)), ee = (t) => {
+      var i;
+      return ((i = l.renderContent) == null ? void 0 : i.call(l, t.item, l.side)) ?? "";
+    };
+    function he(t) {
+      var i;
+      !g || !((i = s.value) != null && i.isConnected) || (M = s.value.scrollTop, u("scroll", t), !(!l.virtual || K) && (K = requestAnimationFrame(() => {
+        K = 0, g && s.value && (v.value = s.value.scrollTop);
+      })));
+    }
+    function ve() {
+      M = 0, v.value = 0, s.value && (s.value.scrollTop = 0);
+    }
+    F(() => [l.query, l.page, l.pageSize, l.virtual], ve), F(
+      () => l.items.length,
+      () => {
+        s.value && v.value > l.items.length * f.value && (s.value.scrollTop = Math.max(
+          0,
+          l.items.length * f.value - q.value
+        ), v.value = s.value.scrollTop);
+      }
+    );
+    async function ge(t) {
+      var n, o;
+      const i = l.items[t];
+      if (!i) return;
+      if (l.virtual && s.value) {
+        const b = t * f.value;
+        b < s.value.scrollTop ? s.value.scrollTop = b : b + f.value > s.value.scrollTop + (D.value || q.value) && (s.value.scrollTop = b + f.value - (D.value || q.value)), v.value = s.value.scrollTop, M = s.value.scrollTop;
+      }
+      if (await W(), !g) return;
+      const a = [
+        ...((n = s.value) == null ? void 0 : n.querySelectorAll("[data-transfer-key]")) ?? []
+      ].find((b) => b.dataset.transferKey === T(i.key));
+      (o = a == null ? void 0 : a.querySelector("input:not(:disabled),button:not(:disabled)")) == null || o.focus({ preventScroll: l.virtual });
+    }
+    let C, P;
+    function V(t) {
+      const i = l.items.findIndex((o) => o.key === t);
+      if (i < 0) return;
+      const a = l.items.findIndex((o) => o.key === C), n = a < 0 ? i : a;
+      a < 0 && (C = t), u(
+        "rangeCheck",
+        l.items.slice(Math.min(n, i), Math.max(n, i) + 1).filter((o) => !o.disabled).map((o) => o.key)
+      );
+    }
+    function te(t, i) {
+      const a = P === t;
+      if (P = void 0, a) {
+        V(t);
+        return;
+      }
+      C = t, u("check", t, i);
+    }
+    function be(t, i) {
+      if (t.shiftKey || t.ctrlKey || t.metaKey) {
+        t.preventDefault();
+        return;
+      }
+      l.moveOnDoubleClick && !l.busy && !i.disabled && t.button === 0 && t.detail > 1 && !t.target.closest(
+        'button,a,input,textarea,select,[contenteditable="true"]'
+      ) && t.preventDefault();
+    }
+    function ke(t, i) {
+      var n, o;
+      if (l.busy || i.disabled || !A.value) return;
+      const a = t.target;
+      if (!a.closest(
+        'button,a,textarea,select,input:not([type="checkbox"]),[contenteditable="true"]'
+      )) {
+        if (a.matches('input[type="checkbox"]')) {
+          t.shiftKey && (P = i.key);
+          return;
+        }
+        if (l.moveOnDoubleClick && !t.shiftKey && !t.ctrlKey && !t.metaKey) {
+          t.preventDefault(), t.stopPropagation(), (n = t.currentTarget.querySelector("input:not(:disabled)")) == null || n.focus({ preventScroll: !0 });
+          return;
+        }
+        (t.shiftKey || t.ctrlKey || t.metaKey || !a.closest(".hys-ui-transfer-check")) && (t.preventDefault(), t.stopPropagation(), t.shiftKey ? V(i.key) : te(i.key, !H.value.has(i.key)), (o = t.currentTarget.querySelector("input:not(:disabled)")) == null || o.focus({ preventScroll: !0 }));
+      }
+    }
+    function me(t, i) {
+      !l.moveOnDoubleClick || t.shiftKey || t.ctrlKey || t.metaKey || l.busy || i.disabled || t.target.closest(
+        'button,a,input,textarea,select,[contenteditable="true"]'
+      ) || (t.preventDefault(), t.stopPropagation(), u("moveItem", i.key));
+    }
+    F(
+      () => [l.query, l.page, l.pageSize],
+      () => {
+        C = void 0, P = void 0;
+      }
+    );
+    function we(t) {
+      var le;
+      const i = t.target;
+      if (!i.matches('input[type="checkbox"]') && !i.closest(".hys-ui-transfer-remove") || l.busy || !["ArrowUp", "ArrowDown", "Home", "End"].includes(t.key))
+        return;
+      const a = t.target.closest(
+        "[data-transfer-key]"
+      );
+      if (!a) return;
+      const n = l.items.map((z, U) => ({ item: z, index: U })).filter((z) => !z.item.disabled);
+      if (!n.length) return;
+      t.preventDefault();
+      const o = n.findIndex(
+        (z) => T(z.item.key) === a.dataset.transferKey
+      ), b = t.key === "Home" ? 0 : t.key === "End" ? n.length - 1 : Math.max(
+        0,
+        Math.min(
+          n.length - 1,
+          o + (t.key === "ArrowDown" ? 1 : -1)
+        )
+      );
+      if (t.shiftKey && A.value) {
+        const z = (le = l.items.find(
+          (U) => T(U.key) === a.dataset.transferKey
+        )) == null ? void 0 : le.key;
+        C === void 0 && (C = z), V(n[b].item.key);
+      }
+      ge(n[b].index);
+    }
+    function ae() {
+      g = !1, C = void 0, P = void 0, L++, y == null || y.disconnect(), y = void 0, K && cancelAnimationFrame(K), K = 0;
+    }
+    Ke(ae), Te(ae), De(N), F(() => l.virtual, N, { flush: "post" }), Me(() => {
+      g = !0;
+      const t = ++L;
+      W(() => {
+        !g || t !== L || !s.value || (s.value.scrollTop = M, v.value = s.value.scrollTop, N());
+      });
+    });
+    async function Ce(t) {
+      if (!g || !s.value) return;
+      let i = t.top;
+      if (t.key !== void 0) {
+        const a = l.items.findIndex((n) => n.key === t.key);
+        if (a < 0) return;
+        if (l.virtual) i = a * f.value;
+        else {
+          await W();
+          const n = [
+            ...s.value.querySelectorAll("[data-transfer-key]")
+          ].find((o) => o.dataset.transferKey === T(t.key));
+          n && (i = n.offsetTop);
+        }
+      }
+      i !== void 0 && Number.isFinite(i) && (s.value.scrollTo({ top: i, behavior: t.behavior ?? "auto" }), M = s.value.scrollTop, l.virtual && (v.value = s.value.scrollTop));
+    }
+    function ze() {
+      var t, i, a;
+      l.busy || (l.filterable ? (t = X.value) == null || t.focus() : (a = (i = J.value) == null ? void 0 : i.querySelector("input:not(:disabled),button:not(:disabled)")) == null || a.focus());
+    }
+    function Se(t) {
+      t.key === "Enter" && !t.isComposing && t.keyCode !== 229 && t.preventDefault();
+    }
+    return oe({ scrollTo: Ce, focus: ze }), (t, i) => (r(), c("section", He({
+      ref_key: "element",
+      ref: J
+    }, k(de), {
+      class: ["hys-ui-v4-pane hys-ui-transfer-pane", { "hys-ui-is-drop-target": e.dropTarget }],
+      "data-side": e.side,
+      "aria-label": e.title,
+      "aria-busy": e.loading || void 0,
+      onDragover: i[6] || (i[6] = (a) => u("dragOver", a)),
+      onDragleave: i[7] || (i[7] = (a) => u("dragLeave", a)),
+      onDrop: i[8] || (i[8] = (a) => u("drop", a))
+    }), [
+      m("header", Ne, [
+        S(t.$slots, "header", {
+          info: R.value,
+          allChecked: E.value,
+          indeterminate: Y.value
+        }, () => [
+          e.showSelectAll && A.value ? (r(), x(ne, {
+            key: 0,
+            "model-value": E.value,
+            indeterminate: Y.value,
+            size: e.size,
+            disabled: e.busy || !B.value.length,
+            "aria-label": k(re)(e.words.selectAll, { title: e.title }),
+            onChange: i[0] || (i[0] = (a) => u("checkAll", a))
+          }, {
+            default: O(() => [
+              m("strong", {
+                id: e.id + "-title"
+              }, h(e.title), 9, Ee)
+            ]),
+            _: 1
+          }, 8, ["model-value", "indeterminate", "size", "disabled", "aria-label"])) : (r(), c("strong", {
+            key: 1,
+            id: e.id + "-title"
+          }, h(e.title), 9, Re)),
+          m("span", Ve, h(e.format ? e.format(R.value) : e.checkedKeys.length ? e.checkedKeys.length + " / " + e.total : e.total), 1)
+        ], !0)
+      ]),
+      e.filterable ? (r(), x($e, {
+        key: 0,
+        ref_key: "searchInput",
+        ref: X,
+        class: "hys-ui-pf-transfer-search",
+        "model-value": e.query,
+        size: e.size,
+        placeholder: e.placeholder,
+        "aria-label": e.placeholder + " · " + e.title,
+        disabled: e.busy,
+        clearable: "",
+        "onUpdate:modelValue": i[1] || (i[1] = (a) => u("search", String(a))),
+        onKeydown: Se
+      }, {
+        prefix: O(() => [
+          $(k(qe), {
+            size: 14,
+            "aria-hidden": "true"
+          })
+        ]),
+        _: 1
+      }, 8, ["model-value", "size", "placeholder", "aria-label", "disabled"])) : w("", !0),
+      m("div", Ue, [
+        m("div", {
+          ref_key: "viewport",
+          ref: s,
+          class: ie(["hys-ui-pf-transfer-list", { "hys-ui-transfer-virtual": e.virtual }]),
+          style: j({
+            height: q.value + "px",
+            "--hys-ui-transfer-item-height": f.value + "px",
+            ...e.listStyle
+          }),
+          role: "group",
+          "aria-label": e.title,
+          onScrollPassive: he,
+          onKeydown: we
+        }, [
+          S(t.$slots, "panel", {}, () => [
+            m("div", {
+              class: "hys-ui-transfer-content",
+              style: j(
+                e.virtual ? {
+                  height: e.items.length * f.value + "px",
+                  position: "relative"
+                } : void 0
+              )
+            }, [
+              m("div", {
+                class: "hys-ui-transfer-rows",
+                style: j(
+                  e.virtual ? {
+                    position: "absolute",
+                    top: _.value * f.value + "px",
+                    left: 0,
+                    right: 0
+                  } : void 0
+                )
+              }, [
+                (r(!0), c(G, null, Be(ye.value, (a) => (r(), c("div", {
+                  key: k(T)(a.key),
+                  class: ie(["hys-ui-v4-option hys-ui-transfer-row", {
+                    "hys-ui-is-checked": H.value.has(a.key),
+                    "hys-ui-is-disabled": a.disabled,
+                    "hys-ui-is-dragging": ce.value.has(a.key)
+                  }]),
+                  "data-transfer-key": k(T)(a.key),
+                  draggable: e.draggable && !e.busy && !a.disabled && !(e.oneWay && e.side === "right"),
+                  title: a.disabled ? void 0 : e.moveOnDoubleClick ? e.side === "left" ? e.words.doubleClickRight : e.words.doubleClickLeft : e.side === "left" ? e.words.dragRight : e.words.dragLeft,
+                  onClickCapture: (n) => ke(n, a),
+                  onDblclick: (n) => me(n, a),
+                  onMousedown: (n) => be(n, a),
+                  onDragstart: (n) => u("dragStart", n, a.key),
+                  onDragend: i[2] || (i[2] = (n) => u("dragEnd"))
+                }, [
+                  A.value ? (r(), x(ne, {
+                    key: 0,
+                    class: "hys-ui-transfer-check",
+                    size: e.size,
+                    "model-value": H.value.has(a.key),
+                    disabled: e.busy || a.disabled,
+                    "aria-label": a.label,
+                    onChange: (n) => te(a.key, n)
+                  }, {
+                    default: O(() => [
+                      m("span", Ge, [
+                        S(t.$slots, "option", {
+                          option: a.option,
+                          label: a.label,
+                          checked: H.value.has(a.key),
+                          disabled: e.busy || a.disabled
+                        }, () => [
+                          e.renderContent ? (r(), x(ee, {
+                            key: 0,
+                            item: a.option
+                          }, null, 8, ["item"])) : (r(), c(G, { key: 1 }, [
+                            p(h(a.label), 1)
+                          ], 64))
+                        ], !0)
+                      ])
+                    ]),
+                    _: 2
+                  }, 1032, ["size", "model-value", "disabled", "aria-label", "onChange"])) : (r(), c("span", Xe, [
+                    S(t.$slots, "option", {
+                      option: a.option,
+                      label: a.label,
+                      checked: !1,
+                      disabled: e.busy || a.disabled
+                    }, () => [
+                      e.renderContent ? (r(), x(ee, {
+                        key: 0,
+                        item: a.option
+                      }, null, 8, ["item"])) : (r(), c(G, { key: 1 }, [
+                        p(h(a.label), 1)
+                      ], 64))
+                    ], !0)
+                  ])),
+                  e.oneWay && e.side === "right" ? (r(), x(se, {
+                    key: 2,
+                    variant: "ghost",
+                    size: "sm",
+                    class: "hys-ui-transfer-remove",
+                    disabled: e.busy || a.disabled,
+                    "aria-label": k(re)(e.words.remove, { label: a.label }),
+                    onClick: Ae((n) => u("remove", a.key), ["stop"])
+                  }, {
+                    default: O(() => [
+                      $(k(Pe), {
+                        size: 14,
+                        "aria-hidden": "true"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["disabled", "aria-label", "onClick"])) : e.draggable && !a.disabled ? (r(), x(k(Ie), {
+                    key: 3,
+                    class: "hys-ui-pf-transfer-grip",
+                    size: 12,
+                    "aria-hidden": "true"
+                  })) : w("", !0)
+                ], 42, je))), 128))
+              ], 4)
+            ], 4),
+            !e.items.length && !e.loading ? (r(), c("div", Je, [
+              S(t.$slots, "empty", { query: e.query }, () => [
+                p(h(e.query ? e.words.noMatch : e.side === "left" ? e.words.emptyLeft : e.words.emptyRight), 1)
+              ], !0)
+            ])) : w("", !0)
+          ], !0)
+        ], 46, We),
+        e.loading ? (r(), c("div", {
+          key: 0,
+          class: "hys-ui-transfer-loading",
+          role: "status",
+          "aria-label": e.words.loading
+        }, [
+          S(t.$slots, "loading", {}, () => [
+            $(k(Oe), {
+              size: 18,
+              class: "hys-ui-icon-spin",
+              "aria-hidden": "true"
+            }),
+            m("span", null, h(e.words.loading), 1)
+          ], !0)
+        ], 8, Qe)) : w("", !0)
+      ]),
+      e.showInvert && A.value ? (r(), c("div", Ye, [
+        $(se, {
+          variant: "ghost",
+          size: "sm",
+          disabled: e.busy || !B.value.length,
+          onClick: i[3] || (i[3] = (a) => u("invert"))
+        }, {
+          default: O(() => [
+            p(h(e.words.invert), 1)
+          ]),
+          _: 1
+        }, 8, ["disabled"]),
+        e.filtered !== e.total ? (r(), c("span", Ze, h(e.filtered) + " / " + h(e.total), 1)) : w("", !0)
+      ])) : w("", !0),
+      e.pagination ? (r(), c("div", _e, [
+        $(Fe, {
+          page: e.page,
+          "page-size": e.pageSize,
+          total: e.filtered,
+          disabled: e.busy,
+          compact: e.pagination.compact ?? !0,
+          "show-total": !1,
+          "show-size-changer": e.pagination.showSizeChanger,
+          "page-size-options": e.pagination.pageSizeOptions,
+          labels: {
+            first: e.words.firstPage,
+            previous: e.words.previousPage,
+            next: e.words.nextPage,
+            last: e.words.lastPage,
+            perPage: e.words.perPage
+          },
+          "onUpdate:page": i[4] || (i[4] = (a) => u("page", a)),
+          "onUpdate:pageSize": i[5] || (i[5] = (a) => u("pageSize", a))
+        }, null, 8, ["page", "page-size", "total", "disabled", "compact", "show-size-changer", "page-size-options", "labels"])
+      ])) : w("", !0),
+      t.$slots.footer ? (r(), c("footer", et, [
+        S(t.$slots, "footer", { info: R.value }, void 0, !0)
+      ])) : w("", !0)
+    ], 16, Le));
+  }
+});
+export {
+  ut as default
+};

package/dist/components/HysTree/HysTree.vue.js

@@ -1,8 +1,7 @@
 import o from "./HysTree2.vue.js";
 /* empty css             */
-/* empty css             */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-f89ec88e"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-781f99f3"]]);
 export {
-  f as default
+  m as default
 };