hys-ui 0.1.1 → 0.2.0

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

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