hys-ui 0.1.1 → 0.2.0

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

@@ -1,4 +1,418 @@
-import f from "./HysTransfer.vue.js";
+import { defineComponent as we, ref as L, useId as Te, provide as pe, computed as R, watch as ze, onDeactivated as $e, onBeforeUnmount as De, openBlock as y, createElementBlock as S, mergeProps as v, unref as r, Fragment as _, renderList as Be, normalizeStyle as Ee, renderSlot as u, createVNode as H, withCtx as m, toDisplayString as $, createCommentVNode as D, createBlock as Ke, createSlots as Pe, createTextVNode as Le, createElementVNode as He, nextTick as Ve } from "vue";
+import { ChevronRight as Ae, ChevronLeft as Ie } from "lucide-vue-next";
+import ee from "../HysButton/HysButton.vue.js";
+import Ne from "./HysTransferPanel.vue.js";
+import { useHysRootAttrs as Re } from "../../config.js";
+import { useHysFormItemContext as We, useHysControlState as Fe, fieldKey as Oe } from "../../composables/formContext.js";
+import { useTransfer as qe } from "../../composables/useTransfer.js";
+import { transferLabel as Me } from "../../composables/transfer.js";
+const je = ["id", "data-size", "aria-label", "aria-invalid", "aria-describedby", "aria-busy"], Ue = { key: 0 }, Ge = { key: 0 }, Je = {
+  key: 0,
+  class: "hys-ui-transfer-drag-count",
+  "aria-hidden": "true"
+}, Qe = {
+  class: "hys-ui-pf-transfer-status",
+  role: "status",
+  "aria-live": "polite"
+}, rt = /* @__PURE__ */ we({
+  __name: "HysTransfer",
+  props: {
+    options: {},
+    modelValue: {},
+    defaultValue: {},
+    fieldNames: {},
+    rowKey: {},
+    disabled: { type: Boolean },
+    loading: { type: Boolean },
+    filterable: { type: Boolean, default: !0 },
+    filterMethod: {},
+    filterPlaceholder: {},
+    searchValues: {},
+    titles: {},
+    buttonTexts: {},
+    showSelectAll: { type: Boolean, default: !0 },
+    showInvert: { type: Boolean },
+    checkedKeys: {},
+    defaultCheckedKeys: {},
+    leftDefaultChecked: {},
+    rightDefaultChecked: {},
+    targetOrder: { default: "original" },
+    oneWay: { type: Boolean },
+    draggable: { type: Boolean, default: !0 },
+    dragChecked: { type: Boolean, default: !0 },
+    animated: { type: Boolean, default: !0 },
+    size: {},
+    listHeight: { default: 240 },
+    listStyle: {},
+    operationStyle: {},
+    status: {},
+    pagination: { type: [Boolean, Object] },
+    pages: {},
+    pageSizes: {},
+    virtual: { type: Boolean },
+    itemHeight: { default: 36 },
+    overscan: { default: 4 },
+    locale: {},
+    format: {},
+    renderContent: {},
+    ariaLabel: {},
+    validateEvent: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue", "change", "update:checkedKeys", "checkChange", "selectChange", "update:searchValues", "search", "update:pages", "pageChange", "update:pageSizes", "pageSizeChange", "scroll", "dragStart", "dragEnd", "focus", "blur"],
+  setup(o, { expose: te, emit: ae }) {
+    const i = o, W = (e) => e === "left" ? "left-empty" : "right-empty", F = (e) => e === "left" ? "left-footer" : "right-footer", C = ae, re = Re(), B = L(), O = Te(), k = We(), w = Fe(i);
+    pe(Oe, void 0);
+    const s = qe(
+      i,
+      w.disabled,
+      (e, ...t) => C(e, ...t),
+      () => {
+        k.validate("change");
+      }
+    ), {
+      live: q,
+      busy: d,
+      keys: le,
+      checked: oe,
+      words: b,
+      all: M,
+      filtered: V,
+      visible: j,
+      pages: U,
+      pageSizes: G,
+      pagination: ie,
+      searchValues: J,
+      announcement: se,
+      getCheckedKeys: f,
+      check: Q,
+      checkAll: E,
+      invertSelection: X,
+      move: h,
+      setSearch: Y,
+      setPage: A,
+      setPageSize: Z
+    } = s, ne = ["left", "right"], de = R(() => {
+      var e, t;
+      return {
+        left: ((e = i.titles) == null ? void 0 : e[0]) ?? b.value.leftTitle,
+        right: ((t = i.titles) == null ? void 0 : t[1]) ?? b.value.rightTitle
+      };
+    }), ue = R(
+      () => ne.map((e) => ({ side: e, title: de.value[e] }))
+    ), n = L([]), T = L(), K = L();
+    let I = !1;
+    const P = /* @__PURE__ */ new Map();
+    function fe(e, t) {
+      t ? P.set(
+        e,
+        t
+      ) : P.delete(e);
+    }
+    function ge(e) {
+      var t;
+      return typeof i.filterPlaceholder == "string" ? i.filterPlaceholder : ((t = i.filterPlaceholder) == null ? void 0 : t[e === "left" ? 0 : 1]) ?? b.value.search;
+    }
+    function p(e) {
+      return {
+        side: e,
+        items: j.value[e].map((t) => t.option),
+        filteredItems: V.value[e].map((t) => t.option),
+        checkedKeys: f(e),
+        disabled: d.value,
+        query: J.value[e],
+        check: (t, a) => s.targetSet.value.has(t) === (e === "right") ? Q(t, a) : Promise.resolve(!1),
+        setCheckedKeys: (t) => s.setCheckedKeys([
+          ...f(e === "left" ? "right" : "left"),
+          ...t.filter(
+            (a) => s.targetSet.value.has(a) === (e === "right")
+          )
+        ]),
+        checkAll: (t = !0) => E(e, t),
+        remove: (t) => h("left", t)
+      };
+    }
+    function g() {
+      const e = I;
+      n.value = [], T.value = void 0, K.value = void 0, I = !1, window.removeEventListener("keydown", x), window.removeEventListener("blur", g), e && q.value && C("dragEnd");
+    }
+    function x(e) {
+      e.key === "Escape" && g();
+    }
+    function ce(e, t, a) {
+      const c = s.data.value.map.get(a);
+      if (d.value || !i.draggable || c != null && c.disabled || !c || i.oneWay && t === "right" || !e.dataTransfer) {
+        e.preventDefault();
+        return;
+      }
+      g(), n.value = i.dragChecked && s.checkedSet.value.has(a) ? f(t) : [a], T.value = t, I = !0, e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData(
+        "text/plain",
+        n.value.map(String).join(", ")
+      ), e.dataTransfer.setData("application/x-hys-ui-transfer", O), window.addEventListener("keydown", x), window.addEventListener("blur", g), C("dragStart", t, [...n.value], e);
+    }
+    const ve = R(
+      () => !d.value && !!i.draggable && n.value.length > 0 && !(i.oneWay && T.value === "right") && n.value.every((e) => {
+        const t = s.data.value.map.get(e);
+        return t && !t.disabled && s.targetSet.value.has(e) === (T.value === "right");
+      })
+    );
+    function N(e) {
+      return ve.value && T.value !== e;
+    }
+    function he(e, t) {
+      N(t) && (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move"), K.value = t);
+    }
+    function ye(e) {
+      e.relatedTarget instanceof Node && e.currentTarget.contains(e.relatedTarget) || (K.value = void 0);
+    }
+    function me(e, t) {
+      N(t) && (e.preventDefault(), h(t, [...n.value])), g();
+    }
+    ze(
+      () => [
+        d.value,
+        i.draggable,
+        i.oneWay,
+        s.data.value,
+        s.keys.value
+      ],
+      () => {
+        n.value.length && (d.value || !i.draggable || !N(T.value === "left" ? "right" : "left")) && g();
+      },
+      { flush: "sync" }
+    ), $e(g), De(g);
+    function ke(e = "left") {
+      var t;
+      d.value || (t = P.get(e)) == null || t.focus();
+    }
+    async function be(e, t) {
+      var a;
+      if (q.value) {
+        if (t.key !== void 0 && i.pagination) {
+          const c = V.value[e].findIndex(
+            (z) => z.key === t.key
+          );
+          if (c < 0) return;
+          const l = Math.floor(c / G.value[e]) + 1;
+          if (A(e, l), await Ve(), U.value[e] !== l) return;
+        }
+        await ((a = P.get(e)) == null ? void 0 : a.scrollTo(t));
+      }
+    }
+    function Se(e) {
+      var t;
+      e.relatedTarget instanceof Node && ((t = B.value) != null && t.contains(e.relatedTarget)) || (C("blur", e), i.validateEvent && !w.disabled.value && k.validate("blur"));
+    }
+    function Ce(e) {
+      var t;
+      e.relatedTarget instanceof Node && ((t = B.value) != null && t.contains(e.relatedTarget)) || C("focus", e);
+    }
+    return te({
+      element: B,
+      targetKeys: le,
+      checkedKeys: oe,
+      getCheckedKeys: f,
+      getTargetItems: () => M.value.right.map((e) => e.option),
+      move: h,
+      remove: (e) => h("left", e),
+      setCheckedKeys: s.setCheckedKeys,
+      clearChecked: s.clearChecked,
+      checkAll: E,
+      invertSelection: X,
+      setSearch: Y,
+      clearSearch: s.clearSearch,
+      setPage: A,
+      setPageSize: Z,
+      scrollTo: be,
+      focus: ke
+    }), (e, t) => (y(), S("div", v({
+      id: r(k).id.value,
+      ref_key: "element",
+      ref: B
+    }, r(re), {
+      class: ["hys-ui-v4-transfer hys-ui-pf-transfer hys-ui-transfer", {
+        "hys-ui-transfer-error": o.status === "error" || r(k).invalid.value,
+        "hys-ui-transfer-warning": o.status === "warning"
+      }],
+      "data-size": r(w).size.value,
+      role: "group",
+      "aria-label": o.ariaLabel || r(k).label.value || "穿梭选择",
+      "aria-invalid": o.status === "error" || r(k).invalid.value || void 0,
+      "aria-describedby": r(k).describedBy.value,
+      "aria-busy": o.loading || void 0,
+      onFocusin: Ce,
+      onFocusout: Se
+    }), [
+      (y(!0), S(_, null, Be(ue.value, (a, c) => (y(), S(_, {
+        key: a.side
+      }, [
+        c === 1 ? (y(), S("div", {
+          key: 0,
+          class: "hys-ui-v4-move",
+          style: Ee(o.operationStyle)
+        }, [
+          u(e.$slots, "operations", {
+            move: r(h),
+            disabled: r(d),
+            leftChecked: r(f)("left"),
+            rightChecked: r(f)("right")
+          }, () => [
+            H(ee, {
+              variant: "secondary",
+              size: r(w).size.value === "lg" ? "md" : "sm",
+              class: "hys-ui-transfer-move",
+              disabled: r(d) || !r(f)("left").length,
+              "aria-label": r(b).moveRight,
+              onClick: t[0] || (t[0] = (l) => r(h)("right"))
+            }, {
+              default: m(() => {
+                var l;
+                return [
+                  H(r(Ae), {
+                    size: 16,
+                    "aria-hidden": "true"
+                  }),
+                  (l = o.buttonTexts) != null && l[0] ? (y(), S("span", Ue, $(o.buttonTexts[0]), 1)) : D("", !0)
+                ];
+              }),
+              _: 1
+            }, 8, ["size", "disabled", "aria-label"]),
+            o.oneWay ? D("", !0) : (y(), Ke(ee, {
+              key: 0,
+              variant: "secondary",
+              size: r(w).size.value === "lg" ? "md" : "sm",
+              class: "hys-ui-transfer-move",
+              disabled: r(d) || !r(f)("right").length,
+              "aria-label": r(b).moveLeft,
+              onClick: t[1] || (t[1] = (l) => r(h)("left"))
+            }, {
+              default: m(() => {
+                var l;
+                return [
+                  H(r(Ie), {
+                    size: 16,
+                    "aria-hidden": "true"
+                  }),
+                  (l = o.buttonTexts) != null && l[1] ? (y(), S("span", Ge, $(o.buttonTexts[1]), 1)) : D("", !0)
+                ];
+              }),
+              _: 1
+            }, 8, ["size", "disabled", "aria-label"]))
+          ], !0),
+          n.value.length > 1 ? (y(), S("span", Je, $(n.value.length), 1)) : D("", !0)
+        ], 4)) : D("", !0),
+        H(Ne, {
+          ref_for: !0,
+          ref: (l) => fe(a.side, l),
+          id: r(O) + "-" + a.side,
+          side: a.side,
+          title: a.title,
+          items: r(j)[a.side],
+          total: r(M)[a.side].length,
+          filtered: r(V)[a.side].length,
+          "checked-keys": r(f)(a.side),
+          busy: r(d),
+          loading: o.loading,
+          filterable: o.filterable,
+          query: r(J)[a.side],
+          placeholder: ge(a.side),
+          "show-select-all": o.showSelectAll,
+          "show-invert": !!o.showInvert,
+          "one-way": !!o.oneWay,
+          size: r(w).size.value,
+          "list-height": o.listHeight,
+          "item-height": o.itemHeight,
+          overscan: o.overscan,
+          virtual: !!o.virtual,
+          animated: o.animated,
+          draggable: o.draggable,
+          "dragged-keys": n.value,
+          "drop-target": K.value === a.side,
+          words: r(b),
+          page: r(U)[a.side],
+          "page-size": r(G)[a.side],
+          pagination: i.pagination ? r(ie) : !1,
+          "list-style": o.listStyle,
+          format: o.format,
+          "render-content": o.renderContent,
+          onCheck: r(Q),
+          onCheckAll: (l) => r(E)(a.side, l),
+          onInvert: (l) => r(X)(a.side),
+          onSearch: (l) => r(Y)(a.side, l),
+          onRemove: t[2] || (t[2] = (l) => r(h)("left", [l])),
+          onPage: (l) => r(A)(a.side, l),
+          onPageSize: (l) => r(Z)(a.side, l),
+          onDragStart: (l, z) => ce(l, a.side, z),
+          onDragEnd: g,
+          onDragOver: (l) => he(l, a.side),
+          onDragLeave: ye,
+          onDrop: (l) => me(l, a.side),
+          onScroll: (l) => C("scroll", a.side, l)
+        }, Pe({ _: 2 }, [
+          e.$slots.option || e.$slots.default ? {
+            name: "option",
+            fn: m((l) => [
+              u(e.$slots, "option", v({ ref_for: !0 }, l, {
+                side: a.side
+              }), () => [
+                u(e.$slots, "default", v({ ref_for: !0 }, l, {
+                  side: a.side
+                }), () => [
+                  Le($(l.label), 1)
+                ], !0)
+              ], !0)
+            ]),
+            key: "0"
+          } : void 0,
+          e.$slots.header ? {
+            name: "header",
+            fn: m((l) => [
+              u(e.$slots, "header", v({ ref_for: !0 }, l, {
+                side: a.side,
+                checkAll: (z = !0) => r(E)(a.side, z)
+              }), void 0, !0)
+            ]),
+            key: "1"
+          } : void 0,
+          e.$slots.panel ? {
+            name: "panel",
+            fn: m(() => [
+              u(e.$slots, "panel", v({ ref_for: !0 }, p(a.side)), void 0, !0)
+            ]),
+            key: "2"
+          } : void 0,
+          e.$slots[W(a.side)] || e.$slots.empty ? {
+            name: "empty",
+            fn: m(() => [
+              u(e.$slots, W(a.side), v({ ref_for: !0 }, p(a.side)), () => [
+                u(e.$slots, "empty", v({ ref_for: !0 }, p(a.side)), void 0, !0)
+              ], !0)
+            ]),
+            key: "3"
+          } : void 0,
+          e.$slots[F(a.side)] || e.$slots.footer ? {
+            name: "footer",
+            fn: m(() => [
+              u(e.$slots, F(a.side), v({ ref_for: !0 }, p(a.side)), () => [
+                u(e.$slots, "footer", v({ ref_for: !0 }, p(a.side)), void 0, !0)
+              ], !0)
+            ]),
+            key: "4"
+          } : void 0,
+          e.$slots.loading ? {
+            name: "loading",
+            fn: m(() => [
+              u(e.$slots, "loading", {
+                side: a.side
+              }, void 0, !0)
+            ]),
+            key: "5"
+          } : void 0
+        ]), 1032, ["id", "side", "title", "items", "total", "filtered", "checked-keys", "busy", "loading", "filterable", "query", "placeholder", "show-select-all", "show-invert", "one-way", "size", "list-height", "item-height", "overscan", "virtual", "animated", "draggable", "dragged-keys", "drop-target", "words", "page", "page-size", "pagination", "list-style", "format", "render-content", "onCheck", "onCheckAll", "onInvert", "onSearch", "onPage", "onPageSize", "onDragStart", "onDragOver", "onDrop", "onScroll"])
+      ], 64))), 128)),
+      He("span", Qe, $(n.value.length ? r(Me)(r(b).dragCount, { count: n.value.length }) : r(se)), 1)
+    ], 16, je));
+  }
+});
 export {
-  f as default
+  rt as default
 };

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

@@ -0,0 +1,7 @@
+import o from "./HysTransferPanel2.vue.js";
+/* empty css                      */
+import r from "../../_virtual/_plugin-vue_export-helper.js";
+const s = /* @__PURE__ */ r(o, [["__scopeId", "data-v-2538ae23"]]);
+export {
+  s as default
+};