hys-ui 0.2.0 → 0.3.0

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

@@ -1,30 +1,30 @@
-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 { 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 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 = {
+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 = {
+}, Je = {
   key: 0,
   class: "hys-ui-pf-transfer-empty"
-}, Xe = ["aria-label"], Je = {
+}, Qe = ["aria-label"], Ye = {
   key: 1,
   class: "hys-ui-transfer-extra"
-}, Qe = {
+}, Ze = {
   key: 0,
   class: "hys-ui-transfer-filter-count"
-}, Ye = {
+}, _e = {
   key: 2,
   class: "hys-ui-transfer-pagination"
-}, Ze = {
+}, et = {
   key: 3,
   class: "hys-ui-transfer-footer"
-}, st = /* @__PURE__ */ ke({
+}, ut = /* @__PURE__ */ xe({
   __name: "HysTransferPanel",
   props: {
     side: {},
@@ -47,8 +47,8 @@ const Fe = ["data-side", "aria-label", "aria-busy"], Le = { class: "hys-ui-pf-tr
     itemHeight: {},
     overscan: {},
     virtual: { type: Boolean },
-    animated: { type: Boolean },
     draggable: { type: Boolean },
+    moveOnDoubleClick: { type: Boolean },
     draggedKeys: {},
     dropTarget: { type: Boolean },
     words: {},
@@ -59,191 +59,244 @@ const Fe = ["data-side", "aria-label", "aria-busy"], Le = { class: "hys-ui-pf-tr
     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)));
+  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 $ = 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(
+    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, a.items.length - 1),
-          Math.floor(h.value / c.value) - Y.value
+          Math.max(0, l.items.length - 1),
+          Math.floor(v.value / f.value) - Z.value
         )
       ) : 0
-    ), re = o(
-      () => a.virtual ? Math.min(
-        a.items.length,
+    ), fe = d(
+      () => l.virtual ? Math.min(
+        l.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) => {
+          (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 = a.renderContent) == null ? void 0 : i.call(a, l.item, a.side)) ?? "";
+      return ((i = l.renderContent) == null ? void 0 : i.call(l, t.item, l.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) {
+    function he(t) {
       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);
+      !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, h.value = 0, n.value && (n.value.scrollTop = 0);
+      M = 0, v.value = 0, s.value && (s.value.scrollTop = 0);
     }
-    V(() => [a.query, a.page, a.pageSize, a.virtual], ve), V(
-      () => a.items.length,
+    F(() => [l.query, l.page, l.pageSize, l.virtual], ve), F(
+      () => l.items.length,
       () => {
-        n.value && h.value > a.items.length * c.value && (n.value.scrollTop = Math.max(
+        s.value && v.value > l.items.length * f.value && (s.value.scrollTop = Math.max(
           0,
-          a.items.length * c.value - H.value
-        ), h.value = n.value.scrollTop);
+          l.items.length * f.value - q.value
+        ), v.value = s.value.scrollTop);
       }
     );
-    async function fe(l) {
-      var r, T;
-      const i = a.items[l];
+    async function ge(t) {
+      var n, o;
+      const i = l.items[t];
       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 (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 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 });
+      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 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))
+    function te(t, i) {
+      const a = P === t;
+      if (P = void 0, a) {
+        V(t);
         return;
-      const t = l.target.closest(
+      }
+      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 (!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(
+      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(
-          r.length - 1,
-          T + (l.key === "ArrowDown" ? 1 : -1)
+          n.length - 1,
+          o + (t.key === "ArrowDown" ? 1 : -1)
         )
       );
-      fe(r[b].index);
+      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 _() {
-      y = !1, E++, v == null || v.disconnect(), v = void 0, S && cancelAnimationFrame(S), S = 0;
+    function ae() {
+      g = !1, C = void 0, P = void 0, L++, y == null || y.disconnect(), y = void 0, K && cancelAnimationFrame(K), K = 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());
+    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 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;
+    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 R();
-          const r = [
-            ...n.value.querySelectorAll("[data-transfer-key]")
-          ].find((T) => T.dataset.transferKey === q(l.key));
-          r && (i = r.offsetTop);
+          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) && (n.value.scrollTo({ top: i, behavior: l.behavior ?? "auto" }), M = n.value.scrollTop, a.virtual && (h.value = n.value.scrollTop));
+      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 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 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 be(l) {
-      l.key === "Enter" && !l.isComposing && l.keyCode !== 229 && l.preventDefault();
+    function Se(t) {
+      t.key === "Enter" && !t.isComposing && t.keyCode !== 229 && t.preventDefault();
     }
-    return ie({ scrollTo: ye, focus: ge }), (l, i) => (s(), u("section", Ce({
+    return oe({ scrollTo: Ce, focus: ze }), (t, i) => (r(), c("section", He({
       ref_key: "element",
-      ref: X
-    }, g(G), {
+      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] = (t) => d("dragOver", t)),
-      onDragleave: i[7] || (i[7] = (t) => d("dragLeave", t)),
-      onDrop: i[8] || (i[8] = (t) => d("drop", t))
+      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", Le, [
-        z(l.$slots, "header", {
-          info: N.value,
-          allChecked: I.value,
-          indeterminate: Q.value
+      m("header", Ne, [
+        S(t.$slots, "header", {
+          info: R.value,
+          allChecked: E.value,
+          indeterminate: Y.value
         }, () => [
-          e.showSelectAll && L.value ? (s(), k(te, {
+          e.showSelectAll && A.value ? (r(), x(ne, {
             key: 0,
-            "model-value": I.value,
-            indeterminate: Q.value,
+            "model-value": E.value,
+            indeterminate: Y.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))
+            "aria-label": k(re)(e.words.selectAll, { title: e.title }),
+            onChange: i[0] || (i[0] = (a) => u("checkAll", a))
           }, {
-            default: C(() => [
+            default: O(() => [
               m("strong", {
                 id: e.id + "-title"
-              }, f(e.title), 9, Ie)
+              }, h(e.title), 9, Ee)
             ]),
             _: 1
-          }, 8, ["model-value", "indeterminate", "size", "disabled", "aria-label"])) : (s(), u("strong", {
+          }, 8, ["model-value", "indeterminate", "size", "disabled", "aria-label"])) : (r(), c("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)
+          }, 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 ? (s(), k($e, {
+      e.filterable ? (r(), x($e, {
         key: 0,
         ref_key: "searchInput",
-        ref: j,
+        ref: X,
         class: "hys-ui-pf-transfer-search",
         "model-value": e.query,
         size: e.size,
@@ -251,179 +304,175 @@ const Fe = ["data-side", "aria-label", "aria-busy"], Le = { class: "hys-ui-pf-tr
         "aria-label": e.placeholder + " · " + e.title,
         disabled: e.busy,
         clearable: "",
-        "onUpdate:modelValue": i[1] || (i[1] = (t) => d("search", String(t))),
-        onKeydown: be
+        "onUpdate:modelValue": i[1] || (i[1] = (a) => u("search", String(a))),
+        onKeydown: Se
       }, {
-        prefix: C(() => [
-          K(g(Ae), {
+        prefix: O(() => [
+          $(k(qe), {
             size: 14,
             "aria-hidden": "true"
           })
         ]),
         _: 1
       }, 8, ["model-value", "size", "placeholder", "aria-label", "disabled"])) : w("", !0),
-      m("div", Ve, [
+      m("div", Ue, [
         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",
+          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: ce,
-          onKeydown: he
+          onScrollPassive: he,
+          onKeydown: we
         }, [
-          z(l.$slots, "panel", {}, () => [
+          S(t.$slots, "panel", {}, () => [
             m("div", {
               class: "hys-ui-transfer-content",
-              style: U(
+              style: j(
                 e.virtual ? {
-                  height: e.items.length * c.value + "px",
+                  height: e.items.length * f.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,
+              m("div", {
                 class: "hys-ui-transfer-rows",
-                style: U(
+                style: j(
                   e.virtual ? {
                     position: "absolute",
-                    top: Z.value * c.value + "px",
+                    top: _.value * f.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"]))
+                )
+              }, [
+                (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 ? (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)
+            !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, Re),
-        e.loading ? (s(), u("div", {
+        ], 46, We),
+        e.loading ? (r(), c("div", {
           key: 0,
           class: "hys-ui-transfer-loading",
           role: "status",
           "aria-label": e.words.loading
         }, [
-          z(l.$slots, "loading", {}, () => [
-            K(g(qe), {
+          S(t.$slots, "loading", {}, () => [
+            $(k(Oe), {
               size: 18,
               class: "hys-ui-icon-spin",
               "aria-hidden": "true"
             }),
-            m("span", null, f(e.words.loading), 1)
+            m("span", null, h(e.words.loading), 1)
           ], !0)
-        ], 8, Xe)) : w("", !0)
+        ], 8, Qe)) : w("", !0)
       ]),
-      e.showInvert && L.value ? (s(), u("div", Je, [
-        K(ae, {
+      e.showInvert && A.value ? (r(), c("div", Ye, [
+        $(se, {
           variant: "ghost",
           size: "sm",
           disabled: e.busy || !B.value.length,
-          onClick: i[3] || (i[3] = (t) => d("invert"))
+          onClick: i[3] || (i[3] = (a) => u("invert"))
         }, {
-          default: C(() => [
-            P(f(e.words.invert), 1)
+          default: O(() => [
+            p(h(e.words.invert), 1)
           ]),
           _: 1
         }, 8, ["disabled"]),
-        e.filtered !== e.total ? (s(), u("span", Qe, f(e.filtered) + " / " + f(e.total), 1)) : w("", !0)
+        e.filtered !== e.total ? (r(), c("span", Ze, h(e.filtered) + " / " + h(e.total), 1)) : w("", !0)
       ])) : w("", !0),
-      e.pagination ? (s(), u("div", Ye, [
-        K(Pe, {
+      e.pagination ? (r(), c("div", _e, [
+        $(Fe, {
           page: e.page,
           "page-size": e.pageSize,
           total: e.filtered,
@@ -439,16 +488,16 @@ const Fe = ["data-side", "aria-label", "aria-busy"], Le = { class: "hys-ui-pf-tr
             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))
+          "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),
-      l.$slots.footer ? (s(), u("footer", Ze, [
-        z(l.$slots, "footer", { info: N.value }, void 0, !0)
+      t.$slots.footer ? (r(), c("footer", et, [
+        S(t.$slots, "footer", { info: R.value }, void 0, !0)
       ])) : w("", !0)
-    ], 16, Fe));
+    ], 16, Le));
   }
 });
 export {
-  st as default
+  ut as default
 };