hys-ui 0.2.0 → 0.4.0

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

@@ -1,28 +1,31 @@
-import { defineComponent as sa, useId as ua, ref as p, provide as ra, computed as E, onActivated as ca, watch as Z, shallowRef as va, onDeactivated as ya, onBeforeUnmount as fa, openBlock as r, createElementBlock as h, mergeProps as B, unref as l, createBlock as R, withCtx as ue, createVNode as w, createCommentVNode as M, createElementVNode as Y, normalizeStyle as re, normalizeClass as Se, withModifiers as X, renderSlot as H, createTextVNode as P, toDisplayString as S, Fragment as xe, renderList as ha, resolveDynamicComponent as ze, Teleport as ka, nextTick as _ } from "vue";
-import { Search as ga, LoaderCircle as Ae, ChevronDown as pa, ChevronRight as ma, GripVertical as ba } from "lucide-vue-next";
-import Ca from "../HysInput/HysInput.vue.js";
-import xa from "../HysCheckbox/HysCheckbox.vue.js";
-import De from "../HysButton/HysButton.vue.js";
+import { defineComponent as sa, useId as ua, ref as g, provide as ra, computed as B, onActivated as ca, watch as Z, shallowRef as va, onDeactivated as ya, onBeforeUnmount as fa, openBlock as r, createElementBlock as h, mergeProps as M, unref as l, createBlock as R, withCtx as w, createVNode as Y, createCommentVNode as x, createElementVNode as ue, normalizeStyle as re, normalizeClass as He, withModifiers as X, renderSlot as H, createTextVNode as P, toDisplayString as S, Fragment as Se, renderList as ha, resolveDynamicComponent as ze, Teleport as ka, nextTick as _ } from "vue";
+import pa from "../../motion/PopupMotion.js";
+import { Search as ga, LoaderCircle as Ae, ChevronDown as ma, ChevronRight as ba, GripVertical as Ca } from "lucide-vue-next";
+import xa from "../HysInput/HysInput.vue.js";
+import Ta from "../HysCheckbox/HysCheckbox.vue.js";
+import xe from "../HysButton/HysButton.vue.js";
 import { useHysRootAttrs as Da } from "../../config.js";
-import { useHysControlState as Ta, useHysFormItemContext as Ka, fieldKey as Na } from "../../composables/formContext.js";
-import { useTree as Ea } from "../../composables/useTree.js";
-const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselectable", "aria-disabled", "aria-busy", "aria-invalid", "aria-describedby"], Ha = {
+import { useHysControlState as Ka, useHysFormItemContext as Na, fieldKey as Ea } from "../../composables/formContext.js";
+import { useTree as Ba } from "../../composables/useTree.js";
+const Ma = ["data-size"], Ha = ["id", "tabindex", "aria-label", "aria-multiselectable", "aria-disabled", "aria-busy", "aria-invalid", "aria-describedby"], Sa = {
   key: 0,
   class: "hys-ui-tree-loading",
   role: "status"
-}, Sa = ["aria-level", "aria-posinset", "aria-setsize", "aria-expanded", "aria-selected", "aria-disabled", "aria-checked", "tabindex", "draggable", "data-tree-id", "data-tree-key", "data-drop-position", "onFocus", "onKeydown", "onClick", "onDblclick", "onDragstart", "onDragover", "onDragleave", "onDrop", "onContextmenu"], za = ["aria-label", "disabled", "onClick"], Aa = {
+}, za = ["aria-level", "aria-posinset", "aria-setsize", "aria-expanded", "aria-selected", "aria-disabled", "aria-checked", "tabindex", "draggable", "data-tree-id", "data-tree-key", "data-drop-position", "onFocus", "onKeydown", "onClick", "onDblclick", "onDragstart", "onDragover", "onDragleave", "onDrop", "onContextmenu"], Aa = ["aria-label", "disabled", "onClick"], Ia = {
   key: 1,
   class: "hys-ui-pf-tree-spacer"
 }, $a = {
   key: 3,
   class: "hys-ui-tree-icon",
   "aria-hidden": "true"
-}, Ia = { class: "hys-ui-pf-tree-label" }, Va = ["disabled", "onClick"], Fa = {
+}, Va = { class: "hys-ui-pf-tree-label" }, Fa = ["disabled", "onClick"], La = {
   key: 1,
   class: "hys-ui-pf-tree-empty"
-}, Ga = /* @__PURE__ */ sa({
+}, ja = /* @__PURE__ */ sa({
   __name: "HysTree",
   props: {
+    popupTransition: {},
+    popupTransitionDuration: {},
     nodes: {},
     modelValue: {},
     defaultValue: {},
@@ -82,10 +85,10 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
     validateEvent: { type: Boolean, default: !0 }
   },
   emits: ["update:modelValue", "update:checkedKeys", "update:expandedKeys", "update:loadedKeys", "update:searchValue", "update:nodes", "select", "check", "check-change", "selection-change", "node-click", "node-expand", "node-collapse", "node-drop", "node-drag-start", "node-drag-over", "node-drag-end", "node-contextmenu", "load-error", "children-loaded", "load", "data-change", "search", "scroll", "focus", "blur"],
-  setup(o, { expose: $e, emit: Ie }) {
-    const i = o, m = Ie, ce = Da(), ee = Ta(i), U = Ka(), Ve = ua(), ae = p(), y = p(), Te = p();
-    ra(Na, void 0);
-    const s = Ea(
+  setup(o, { expose: Ie, emit: $e }) {
+    const i = o, m = $e, ce = Da(), ee = Ka(i), U = Na(), Ve = ua(), ae = g(), y = g(), Te = g();
+    ra(Ea, void 0);
+    const s = Ba(
       i,
       ee.disabled,
       (e, ...a) => m(e, ...a),
@@ -94,7 +97,7 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
       }
     ), {
       index: G,
-      visible: k,
+      visible: p,
       words: v,
       busy: u,
       live: ve,
@@ -110,46 +113,46 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
       matches: Re,
       expandNode: z,
       setChecked: ke,
-      selectNode: ge,
-      filter: Ke
-    } = s, A = E(
+      selectNode: pe,
+      filter: De
+    } = s, A = B(
       () => Number.isFinite(i.rowHeight) ? Math.min(240, Math.max(24, i.rowHeight)) : 38
-    ), j = E(
+    ), j = B(
       () => Number.isFinite(i.viewportHeight) ? Math.min(1600, Math.max(80, i.viewportHeight)) : 340
-    ), Ne = E(
+    ), Ke = B(
       () => Number.isFinite(i.overscan) ? Math.min(30, Math.max(0, Math.floor(i.overscan))) : 4
-    ), Pe = E(
+    ), Pe = B(
       () => Number.isFinite(i.indent) ? Math.min(80, Math.max(0, i.indent)) : 20
-    ), V = p(0), te = p(0), $ = p(null), Ee = E(
-      () => i.virtual ? Math.max(0, Math.floor(V.value / A.value) - Ne.value) : 0
-    ), Ue = E(
+    ), V = g(0), te = g(0), I = g(null), Ne = B(
+      () => i.virtual ? Math.max(0, Math.floor(V.value / A.value) - Ke.value) : 0
+    ), Ue = B(
       () => i.virtual ? Math.min(
-        k.value.length,
+        p.value.length,
         Math.ceil(
           (V.value + (te.value || j.value)) / A.value
-        ) + Ne.value
-      ) : k.value.length
-    ), qe = E(() => k.value.slice(Ee.value, Ue.value)), I = E(() => k.value.filter((e) => !e.disabled)), Ye = E(
+        ) + Ke.value
+      ) : p.value.length
+    ), qe = B(() => p.value.slice(Ne.value, Ue.value)), $ = B(() => p.value.filter((e) => !e.disabled)), Ye = B(
       () => {
         var e;
-        return $.value !== null && k.value.some((a) => a.key === $.value && !a.disabled) ? $.value : (e = I.value[0]) == null ? void 0 : e.key;
+        return I.value !== null && p.value.some((a) => a.key === I.value && !a.disabled) ? I.value : (e = $.value[0]) == null ? void 0 : e.key;
       }
     );
-    let J = 0, F = 0, x, pe = 0;
+    let J = 0, F = 0, T, ge = 0;
     function Xe() {
-      x == null || x.disconnect(), i.virtual && y.value && typeof ResizeObserver < "u" && (x = new ResizeObserver((e) => {
+      T == null || T.disconnect(), i.virtual && y.value && typeof ResizeObserver < "u" && (T = new ResizeObserver((e) => {
         var a;
         te.value = ((a = e[0]) == null ? void 0 : a.contentRect.height) || 0;
-      }), x.observe(y.value));
+      }), T.observe(y.value));
     }
     function Ge() {
-      pe++, cancelAnimationFrame(J), J = 0, x == null || x.disconnect(), x = void 0;
+      ge++, cancelAnimationFrame(J), J = 0, T == null || T.disconnect(), T = void 0;
     }
-    async function Be() {
-      const e = ++pe;
-      await _(), !(!ve.value || e !== pe || !y.value) && (y.value.scrollTop = F, V.value = y.value.scrollTop, Xe());
+    async function Ee() {
+      const e = ++ge;
+      await _(), !(!ve.value || e !== ge || !y.value) && (y.value.scrollTop = F, V.value = y.value.scrollTop, Xe());
     }
-    ca(Be), Z([y, () => i.virtual], Be);
+    ca(Ee), Z([y, () => i.virtual], Ee);
     function We(e) {
       var a;
       !ve.value || !((a = y.value) != null && a.isConnected) || (F = y.value.scrollTop, i.virtual && !J && (J = requestAnimationFrame(() => {
@@ -160,12 +163,12 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
       F = 0, V.value = 0, y.value && (y.value.scrollTop = 0);
     }
     Z(q, je), Z(
-      () => k.value.length,
+      () => p.value.length,
       () => {
         if (y.value) {
           const e = Math.max(
             0,
-            k.value.length * A.value - (te.value || j.value)
+            p.value.length * A.value - (te.value || j.value)
           );
           i.virtual && F > e && (F = e, V.value = e, y.value.scrollTop = e);
         }
@@ -175,7 +178,7 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
     function Je(e, a) {
       a instanceof HTMLElement ? le.set(e, a) : le.delete(e);
     }
-    async function Me(e) {
+    async function Be(e) {
       if (u.value) return;
       e.key !== void 0 && (await s.setExpandedKeys([
         .../* @__PURE__ */ new Set([...s.rawExpanded.value, ...s.ancestors(e.key)])
@@ -184,16 +187,16 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
       if (!a) return;
       let t = e.top ?? a.scrollTop;
       if (e.key !== void 0) {
-        const d = k.value.findIndex((n) => n.key === e.key);
+        const d = p.value.findIndex((n) => n.key === e.key);
         if (d < 0) return;
         if (i.virtual) {
-          const n = d * A.value, c = n + A.value, N = te.value || j.value;
-          t = e.align === "top" ? n : e.align === "bottom" ? c - N : n < a.scrollTop ? n : c > a.scrollTop + N ? c - N : a.scrollTop;
+          const n = d * A.value, c = n + A.value, E = te.value || j.value;
+          t = e.align === "top" ? n : e.align === "bottom" ? c - E : n < a.scrollTop ? n : c > a.scrollTop + E ? c - E : a.scrollTop;
         } else {
           const n = le.get(e.key);
           if (n) {
-            const c = n.getBoundingClientRect().top - a.getBoundingClientRect().top + a.scrollTop, N = c + n.offsetHeight;
-            t = e.align === "top" ? c : e.align === "bottom" ? N - a.clientHeight : c < a.scrollTop ? c : N > a.scrollTop + a.clientHeight ? N - a.clientHeight : a.scrollTop;
+            const c = n.getBoundingClientRect().top - a.getBoundingClientRect().top + a.scrollTop, E = c + n.offsetHeight;
+            t = e.align === "top" ? c : e.align === "bottom" ? E - a.clientHeight : c < a.scrollTop ? c : E > a.scrollTop + a.clientHeight ? E - a.clientHeight : a.scrollTop;
           }
         }
       }
@@ -202,13 +205,13 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
     async function L(e) {
       var d, n, c;
       if (u.value) return;
-      const a = e ?? ($.value !== null ? $.value : void 0) ?? ((d = I.value[0]) == null ? void 0 : d.key);
+      const a = e ?? (I.value !== null ? I.value : void 0) ?? ((d = $.value[0]) == null ? void 0 : d.key);
       if (a === void 0) {
         (n = Te.value) == null || n.focus();
         return;
       }
       const t = G.value.map.get(a);
-      !t || t.disabled || (await Me({ key: a }), !(!ve.value || !k.value.some((N) => N.key === a)) && ($.value = a, await _(), (c = le.get(a)) == null || c.focus({ preventScroll: !!i.virtual })));
+      !t || t.disabled || (await Be({ key: a }), !(!ve.value || !p.value.some((E) => E.key === a)) && (I.value = a, await _(), (c = le.get(a)) == null || c.focus({ preventScroll: !!i.virtual })));
     }
     function C(e) {
       return {
@@ -229,7 +232,7 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
       'button,input,textarea,select,a,[contenteditable="true"],[role="button"]'
     ) && e !== a;
     function Qe(e, a) {
-      ne(e.target, e.currentTarget) || u.value || a.disabled || ($.value = a.key, m("node-click", a.node, e), i.selectOnClickNode && ge(a, e), i.checkable && (i.checkOnClickNode || i.checkOnClickLeaf && !a.hasChildren) && ke(
+      ne(e.target, e.currentTarget) || u.value || a.disabled || (I.value = a.key, m("node-click", a.node, e), i.selectOnClickNode && pe(a, e), i.checkable && (i.checkOnClickNode || i.checkOnClickLeaf && !a.hasChildren) && ke(
         a.key,
         !W.value.has(a.key),
         !i.checkStrictly,
@@ -243,30 +246,30 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
       var d, n;
       if (e.isComposing || e.keyCode === 229 || ne(e.target, e.currentTarget) || u.value)
         return;
-      const t = I.value.findIndex((c) => c.key === a.key);
+      const t = $.value.findIndex((c) => c.key === a.key);
       if (["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) {
         e.preventDefault();
-        const c = e.key === "Home" ? 0 : e.key === "End" ? I.value.length - 1 : Math.max(
+        const c = e.key === "Home" ? 0 : e.key === "End" ? $.value.length - 1 : Math.max(
           0,
           Math.min(
-            I.value.length - 1,
+            $.value.length - 1,
             t + (e.key === "ArrowDown" ? 1 : -1)
           )
         );
-        L((d = I.value[c]) == null ? void 0 : d.key);
-      } else e.key === "ArrowRight" ? (e.preventDefault(), a.hasChildren && !b.value.has(a.key) ? z(a.key) : a.hasChildren && L((n = I.value[t + 1]) == null ? void 0 : n.key)) : e.key === "ArrowLeft" ? (e.preventDefault(), a.hasChildren && b.value.has(a.key) ? z(a.key, !1) : a.parent !== void 0 && L(a.parent)) : e.key === "Enter" ? (e.preventDefault(), ge(a, e)) : e.key === " " ? (e.preventDefault(), i.checkable ? ke(
+        L((d = $.value[c]) == null ? void 0 : d.key);
+      } else e.key === "ArrowRight" ? (e.preventDefault(), a.hasChildren && !b.value.has(a.key) ? z(a.key) : a.hasChildren && L((n = $.value[t + 1]) == null ? void 0 : n.key)) : e.key === "ArrowLeft" ? (e.preventDefault(), a.hasChildren && b.value.has(a.key) ? z(a.key, !1) : a.parent !== void 0 && L(a.parent)) : e.key === "Enter" ? (e.preventDefault(), pe(a, e)) : e.key === " " ? (e.preventDefault(), i.checkable ? ke(
         a.key,
         !W.value.has(a.key),
         !i.checkStrictly,
         e
-      ) : ge(a, e)) : e.key === "Escape" && (e.preventDefault(), f.value ? g() : D.value !== null ? O(e) : i.allowDeselect && s.setSelectedKeys([]));
+      ) : pe(a, e)) : e.key === "Escape" && (e.preventDefault(), f.value ? k() : D.value !== null ? O(e) : i.allowDeselect && s.setSelectedKeys([]));
     }
     function _e(e) {
       var a;
-      e.key === "Enter" && !e.isComposing && e.keyCode !== 229 ? e.preventDefault() : e.key === "ArrowDown" && !e.isComposing && (e.preventDefault(), L((a = I.value[0]) == null ? void 0 : a.key));
+      e.key === "Enter" && !e.isComposing && e.keyCode !== 229 ? e.preventDefault() : e.key === "ArrowDown" && !e.isComposing && (e.preventDefault(), L((a = $.value[0]) == null ? void 0 : a.key));
     }
-    const D = p(null), T = p(null), ie = p("inside");
-    let K, de, me = null;
+    const D = g(null), K = g(null), ie = g("inside");
+    let N, de, me = null;
     function Q() {
       clearTimeout(de), de = void 0, me = null;
     }
@@ -274,8 +277,8 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
       (e.type === "blur" || e instanceof KeyboardEvent && e.key === "Escape") && O(e);
     }
     function O(e) {
-      const a = K;
-      D.value = null, T.value = null, K = void 0, Q(), window.removeEventListener("blur", oe), window.removeEventListener("keydown", oe, !0), a && m("node-drag-end", { node: a, event: e });
+      const a = N;
+      D.value = null, K.value = null, N = void 0, Q(), window.removeEventListener("blur", oe), window.removeEventListener("keydown", oe, !0), a && m("node-drag-end", { node: a, event: e });
     }
     function ea(e, a) {
       var t, d;
@@ -283,39 +286,39 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
         e.preventDefault();
         return;
       }
-      O(), D.value = a.key, K = a.node, (d = e.dataTransfer) == null || d.setData("text/plain", String(a.key)), e.dataTransfer && (e.dataTransfer.effectAllowed = "move"), window.addEventListener("blur", oe), window.addEventListener("keydown", oe, !0), m("node-drag-start", { node: a.node, event: e });
+      O(), D.value = a.key, N = a.node, (d = e.dataTransfer) == null || d.setData("text/plain", String(a.key)), e.dataTransfer && (e.dataTransfer.effectAllowed = "move"), window.addEventListener("blur", oe), window.addEventListener("keydown", oe, !0), m("node-drag-start", { node: a.node, event: e });
     }
     function be(e, a) {
       var d, n;
       const t = D.value;
-      return t === null || t === e.key || u.value || !i.draggable || e.disabled || !K || ((d = G.value.map.get(t)) == null ? void 0 : d.node) !== K || s.ancestors(e.key).includes(t) || a === "inside" && e.leaf ? !1 : ((n = i.allowDrop) == null ? void 0 : n.call(i, K, e.node, a)) !== !1;
+      return t === null || t === e.key || u.value || !i.draggable || e.disabled || !N || ((d = G.value.map.get(t)) == null ? void 0 : d.node) !== N || s.ancestors(e.key).includes(t) || a === "inside" && e.leaf ? !1 : ((n = i.allowDrop) == null ? void 0 : n.call(i, N, e.node, a)) !== !1;
     }
     function aa(e, a) {
       const t = e.currentTarget.getBoundingClientRect(), d = (e.clientY - t.top) / (t.height || 1), n = d < 0.25 ? "before" : d > 0.75 ? "after" : "inside";
       if (!be(a, n)) {
-        T.value = null, Q();
+        K.value = null, Q();
         return;
       }
-      e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move"), T.value = a.key, ie.value = n, m("node-drag-over", {
+      e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move"), K.value = a.key, ie.value = n, m("node-drag-over", {
         dragId: D.value,
         targetId: a.key,
-        dragNode: K,
+        dragNode: N,
         targetNode: a.node,
         position: n,
         event: e
       }), n === "inside" && a.hasChildren && !b.value.has(a.key) && me !== a.key ? (Q(), me = a.key, Number.isFinite(i.dragExpandDelay) && i.dragExpandDelay >= 0 && (de = setTimeout(() => {
-        de = void 0, T.value === a.key && be(a, "inside") && z(a.key);
+        de = void 0, K.value === a.key && be(a, "inside") && z(a.key);
       }, i.dragExpandDelay))) : n !== "inside" && Q();
     }
     function ta(e, a) {
-      (!(e.relatedTarget instanceof Node) || !e.currentTarget.contains(e.relatedTarget)) && (T.value === a.key && (T.value = null), Q());
+      (!(e.relatedTarget instanceof Node) || !e.currentTarget.contains(e.relatedTarget)) && (K.value === a.key && (K.value = null), Q());
     }
     function la(e, a) {
-      T.value === a.key && be(a, ie.value) && (e.preventDefault(), m("node-drop", {
+      K.value === a.key && be(a, ie.value) && (e.preventDefault(), m("node-drop", {
         dragId: D.value,
         targetId: a.key,
         position: ie.value,
-        dragNode: K,
+        dragNode: N,
         targetNode: a.node,
         event: e
       })), O(e);
@@ -324,12 +327,12 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
       () => [u.value, i.draggable, i.nodes],
       () => {
         var e;
-        (u.value || !i.draggable || D.value !== null && ((e = G.value.map.get(D.value)) == null ? void 0 : e.node) !== K) && O();
+        (u.value || !i.draggable || D.value !== null && ((e = G.value.map.get(D.value)) == null ? void 0 : e.node) !== N) && O();
       },
       { flush: "sync" }
     );
-    const f = va(), se = p(), Ce = p();
-    function g(e = !0) {
+    const f = va(), se = g(), Ce = g();
+    function k(e = !0) {
       f.value = void 0, e && Ce.value !== void 0 && L(Ce.value);
     }
     async function na(e, a) {
@@ -349,8 +352,8 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
     function ia(e) {
       var a, t;
       if (e.key === "Escape")
-        e.preventDefault(), g();
-      else if (e.key === "Tab") g(!1);
+        e.preventDefault(), k();
+      else if (e.key === "Tab") k(!1);
       else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) {
         e.preventDefault();
         const d = [
@@ -369,12 +372,12 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
       var a, t;
       e.relatedTarget instanceof Node && ((a = ae.value) != null && a.contains(e.relatedTarget) || (t = se.value) != null && t.contains(e.relatedTarget)) || (m("blur", e), i.validateEvent && U.validate("blur"));
     }
-    function He() {
-      O(), g(!1), Ge();
+    function Me() {
+      O(), k(!1), Ge();
     }
     return Z(u, (e) => {
-      e && g(!1);
-    }), ya(He), fa(He), $e({
+      e && k(!1);
+    }), ya(Me), fa(Me), Ie({
       element: ae,
       getNode: s.getNode,
       getNodeInfo: s.getNodeInfo,
@@ -410,16 +413,16 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
         G.value.rows.filter((e) => e.hasChildren).map((e) => e.key)
       ),
       collapseAll: () => s.setExpandedKeys([]),
-      filter: Ke,
+      filter: De,
       reloadNode: s.reloadNode,
       updateKeyChildren: s.updateKeyChildren,
       append: s.append,
       insertBefore: s.insertBefore,
       insertAfter: s.insertAfter,
       remove: s.remove,
-      scrollTo: Me,
+      scrollTo: Be,
       focus: L
-    }), (e, a) => (r(), h("div", B({
+    }), (e, a) => (r(), h("div", M({
       ref_key: "element",
       ref: ae
     }, l(ce), {
@@ -431,7 +434,7 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
       onFocusin: da,
       onFocusout: oa
     }), [
-      o.searchable ? (r(), R(Ca, {
+      o.searchable ? (r(), R(xa, {
         key: 0,
         ref_key: "search",
         ref: Te,
@@ -443,18 +446,18 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
         disabled: l(u),
         size: l(ee).size.value,
         clearable: "",
-        "onUpdate:modelValue": l(Ke),
+        "onUpdate:modelValue": l(De),
         onKeydown: _e
       }, {
-        prefix: ue(() => [
-          w(l(ga), {
+        prefix: w(() => [
+          Y(l(ga), {
             size: 15,
             "aria-hidden": "true"
           })
         ]),
         _: 1
-      }, 8, ["model-value", "placeholder", "aria-label", "disabled", "size", "onUpdate:modelValue"])) : M("", !0),
-      Y("div", {
+      }, 8, ["model-value", "placeholder", "aria-label", "disabled", "size", "onUpdate:modelValue"])) : x("", !0),
+      ue("div", {
         ref_key: "root",
         ref: y,
         id: l(U).id.value || l(Ve),
@@ -468,7 +471,7 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
         "aria-busy": o.loading || l(he).size > 0 || void 0,
         "aria-invalid": l(U).invalid.value || void 0,
         "aria-describedby": l(U).describedBy.value,
-        class: Se(["hys-ui-pf-tree-list", { "hys-ui-tree-virtual": o.virtual }]),
+        class: He(["hys-ui-pf-tree-list", { "hys-ui-tree-virtual": o.virtual }]),
         style: re({
           maxHeight: j.value + "px",
           height: o.virtual ? j.value + "px" : void 0,
@@ -477,44 +480,44 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
         }),
         onScroll: We
       }, [
-        o.loading ? (r(), h("div", Ha, [
+        o.loading ? (r(), h("div", Sa, [
           H(e.$slots, "loading", {}, () => [
-            w(l(Ae), {
+            Y(l(Ae), {
               size: 18,
               class: "hys-ui-icon-spin",
               "aria-hidden": "true"
             }),
             P(S(l(v).loading), 1)
           ], !0)
-        ])) : M("", !0),
-        Y("div", {
+        ])) : x("", !0),
+        ue("div", {
           class: "hys-ui-tree-space",
           style: re(
-            o.virtual ? { height: l(k).length * A.value + "px" } : void 0
+            o.virtual ? { height: l(p).length * A.value + "px" } : void 0
           )
         }, [
-          Y("div", {
+          ue("div", {
             class: "hys-ui-tree-rows",
             style: re(
               o.virtual ? {
                 position: "absolute",
-                top: Ee.value * A.value + "px",
+                top: Ne.value * A.value + "px",
                 insetInline: "0"
               } : void 0
             )
           }, [
-            (r(!0), h(xe, null, ha(qe.value, (t) => {
+            (r(!0), h(Se, null, ha(qe.value, (t) => {
               var d;
               return r(), h("div", {
                 key: typeof t.key + ":" + t.key,
                 ref_for: !0,
                 ref: (n) => Je(t.key, n),
-                class: Se(["hys-ui-pf-tree-row", [
+                class: He(["hys-ui-pf-tree-row", [
                   typeof o.nodeClass == "function" ? o.nodeClass(t.node) : o.nodeClass,
                   {
                     "hys-ui-pf-tree-selected": o.highlightCurrent && l(ye).has(t.key),
                     "hys-ui-pf-tree-line": o.showLine,
-                    "hys-ui-pf-tree-drop": T.value === t.key,
+                    "hys-ui-pf-tree-drop": K.value === t.key,
                     "hys-ui-tree-matched": l(q).trim() && l(Re).has(t.key),
                     "hys-ui-tree-row-disabled": t.disabled,
                     "hys-ui-tree-row-dragging": D.value === t.key
@@ -536,8 +539,8 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
                 draggable: o.draggable && !l(u) && !t.disabled && ((d = o.allowDrag) == null ? void 0 : d.call(o, t.node)) !== !1,
                 "data-tree-id": t.key,
                 "data-tree-key": typeof t.key + ":" + t.key,
-                "data-drop-position": T.value === t.key ? ie.value : void 0,
-                onFocus: (n) => $.value = t.key,
+                "data-drop-position": K.value === t.key ? ie.value : void 0,
+                onFocus: (n) => I.value = t.key,
                 onKeydown: (n) => we(n, t),
                 onClick: (n) => Qe(n, t),
                 onDblclick: (n) => Ze(n, t),
@@ -557,22 +560,22 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
                   tabindex: "-1",
                   onClick: X((n) => l(z)(t.key, !l(b).has(t.key)), ["stop"])
                 }, [
-                  H(e.$slots, "switcher", B({ ref_for: !0 }, C(t)), () => [
+                  H(e.$slots, "switcher", M({ ref_for: !0 }, C(t)), () => [
                     l(he).has(t.key) ? (r(), R(l(Ae), {
                       key: 0,
                       size: 15,
                       class: "hys-ui-icon-spin",
                       "aria-hidden": "true"
-                    })) : (r(), R(ze(C(t).expanded ? l(pa) : l(ma)), {
+                    })) : (r(), R(ze(C(t).expanded ? l(ma) : l(ba)), {
                       key: 1,
                       size: 15,
                       "aria-hidden": "true"
                     }))
                   ], !0)
-                ], 8, za)) : (r(), h("span", Aa, [
-                  H(e.$slots, "switcher", B({ ref_for: !0 }, C(t)), void 0, !0)
+                ], 8, Aa)) : (r(), h("span", Ia, [
+                  H(e.$slots, "switcher", M({ ref_for: !0 }, C(t)), void 0, !0)
                 ])),
-                o.checkable && t.checkable ? (r(), R(xa, {
+                o.checkable && t.checkable ? (r(), R(Ta, {
                   key: 2,
                   tabindex: -1,
                   "model-value": l(W).has(t.key),
@@ -582,16 +585,16 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
                   onClick: a[0] || (a[0] = X(() => {
                   }, ["stop"])),
                   "onUpdate:modelValue": (n) => l(ke)(t.key, n, !o.checkStrictly)
-                }, null, 8, ["model-value", "indeterminate", "disabled", "aria-label", "onUpdate:modelValue"])) : M("", !0),
+                }, null, 8, ["model-value", "indeterminate", "disabled", "aria-label", "onUpdate:modelValue"])) : x("", !0),
                 o.showIcon && (t.icon || e.$slots.icon) ? (r(), h("span", $a, [
-                  H(e.$slots, "icon", B({ ref_for: !0 }, C(t)), () => [
+                  H(e.$slots, "icon", M({ ref_for: !0 }, C(t)), () => [
                     P(S(t.icon), 1)
                   ], !0)
-                ])) : M("", !0),
-                Y("span", Ia, [
-                  H(e.$slots, "node", B({ ref_for: !0 }, C(t)), () => [
-                    H(e.$slots, "default", B({ ref_for: !0 }, C(t)), () => [
-                      o.renderContent ? (r(), R(ze(() => o.renderContent(C(t))), { key: 0 })) : (r(), h(xe, { key: 1 }, [
+                ])) : x("", !0),
+                ue("span", Va, [
+                  H(e.$slots, "node", M({ ref_for: !0 }, C(t)), () => [
+                    H(e.$slots, "default", M({ ref_for: !0 }, C(t)), () => [
+                      o.renderContent ? (r(), R(ze(() => o.renderContent(C(t))), { key: 0 })) : (r(), h(Se, { key: 1 }, [
                         P(S(t.label), 1)
                       ], 64))
                     ], !0)
@@ -603,98 +606,106 @@ const Ba = ["data-size"], Ma = ["id", "tabindex", "aria-label", "aria-multiselec
                   class: "hys-ui-tree-retry",
                   disabled: l(u) || t.disabled,
                   onClick: X((n) => l(s).reloadNode(t.key), ["stop"])
-                }, S(l(v).loadError) + " · " + S(l(v).retry), 9, Va)) : M("", !0),
+                }, S(l(v).loadError) + " · " + S(l(v).retry), 9, Fa)) : x("", !0),
                 e.$slots.actions ? (r(), h("span", {
                   key: 5,
                   class: "hys-ui-tree-actions",
                   onClick: a[1] || (a[1] = X(() => {
                   }, ["stop"]))
                 }, [
-                  H(e.$slots, "actions", B({ ref_for: !0 }, C(t)), void 0, !0)
-                ])) : M("", !0),
-                o.draggable ? (r(), R(l(ba), {
+                  H(e.$slots, "actions", M({ ref_for: !0 }, C(t)), void 0, !0)
+                ])) : x("", !0),
+                o.draggable ? (r(), R(l(Ca), {
                   key: 6,
                   class: "hys-ui-tree-grip",
                   size: 13,
                   "aria-hidden": "true"
-                })) : M("", !0)
-              ], 46, Sa);
+                })) : x("", !0)
+              ], 46, za);
             }), 128))
           ], 4)
         ], 4),
-        !l(k).length && !o.loading ? (r(), h("div", Fa, [
+        !l(p).length && !o.loading ? (r(), h("div", La, [
           H(e.$slots, "empty", { query: l(q) }, () => [
             P(S(l(q).trim() ? l(v).noMatch : o.emptyText || l(v).empty), 1)
           ], !0)
-        ])) : M("", !0)
-      ], 46, Ma),
+        ])) : x("", !0)
+      ], 46, Ha),
       (r(), R(ka, { to: "body" }, [
-        f.value ? (r(), h(xe, { key: 0 }, [
-          Y("div", B(l(ce), {
-            class: "hys-ui-tree-menu-backdrop",
-            onClick: a[3] || (a[3] = (t) => g()),
-            onContextmenu: a[4] || (a[4] = X((t) => g(), ["prevent"]))
-          }), null, 16),
-          Y("div", B({
-            ref_key: "menuPanel",
-            ref: se
-          }, l(ce), {
-            class: "hys-ui-tree-context",
-            style: { left: f.value.x + "px", top: f.value.y + "px" },
-            role: "menu",
-            onKeydown: ia
-          }), [
-            H(e.$slots, "contextmenu", {
-              node: f.value.node,
-              key: f.value.key,
-              close: g
-            }, () => {
-              var t;
-              return [
-                w(De, {
-                  role: "menuitem",
-                  variant: "ghost",
-                  disabled: l(u),
-                  onClick: a[5] || (a[5] = (d) => {
-                    l(s).setCurrentKey(f.value.key), g();
+        f.value ? (r(), h("div", M({ key: 0 }, l(ce), {
+          class: "hys-ui-tree-menu-backdrop",
+          onClick: a[3] || (a[3] = (t) => k()),
+          onContextmenu: a[4] || (a[4] = X((t) => k(), ["prevent"]))
+        }), null, 16)) : x("", !0),
+        Y(l(pa), {
+          "popup-transition": i.popupTransition,
+          "popup-transition-duration": i.popupTransitionDuration,
+          onInactive: k
+        }, {
+          default: w(() => [
+            f.value ? (r(), h("div", M({
+              key: 0,
+              ref_key: "menuPanel",
+              ref: se
+            }, l(ce), {
+              class: "hys-ui-tree-context",
+              style: { left: f.value.x + "px", top: f.value.y + "px" },
+              role: "menu",
+              onKeydown: ia
+            }), [
+              H(e.$slots, "contextmenu", {
+                node: f.value.node,
+                key: f.value.key,
+                close: k
+              }, () => {
+                var t;
+                return [
+                  Y(xe, {
+                    role: "menuitem",
+                    variant: "ghost",
+                    disabled: l(u),
+                    onClick: a[5] || (a[5] = (d) => {
+                      l(s).setCurrentKey(f.value.key), k();
+                    })
+                  }, {
+                    default: w(() => [
+                      P(S(l(v).select), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["disabled"]),
+                  Y(xe, {
+                    role: "menuitem",
+                    variant: "ghost",
+                    disabled: l(u) || !((t = l(G).map.get(f.value.key)) != null && t.hasChildren),
+                    onClick: a[6] || (a[6] = (d) => {
+                      l(z)(f.value.key, !l(b).has(f.value.key)), k();
+                    })
+                  }, {
+                    default: w(() => [
+                      P(S(l(b).has(f.value.key) ? l(v).collapse : l(v).expand), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["disabled"]),
+                  Y(xe, {
+                    role: "menuitem",
+                    variant: "ghost",
+                    onClick: a[7] || (a[7] = (d) => k())
+                  }, {
+                    default: w(() => [
+                      P(S(l(v).close), 1)
+                    ]),
+                    _: 1
                   })
-                }, {
-                  default: ue(() => [
-                    P(S(l(v).select), 1)
-                  ]),
-                  _: 1
-                }, 8, ["disabled"]),
-                w(De, {
-                  role: "menuitem",
-                  variant: "ghost",
-                  disabled: l(u) || !((t = l(G).map.get(f.value.key)) != null && t.hasChildren),
-                  onClick: a[6] || (a[6] = (d) => {
-                    l(z)(f.value.key, !l(b).has(f.value.key)), g();
-                  })
-                }, {
-                  default: ue(() => [
-                    P(S(l(b).has(f.value.key) ? l(v).collapse : l(v).expand), 1)
-                  ]),
-                  _: 1
-                }, 8, ["disabled"]),
-                w(De, {
-                  role: "menuitem",
-                  variant: "ghost",
-                  onClick: a[7] || (a[7] = (d) => g())
-                }, {
-                  default: ue(() => [
-                    P(S(l(v).close), 1)
-                  ]),
-                  _: 1
-                })
-              ];
-            }, !0)
-          ], 16)
-        ], 64)) : M("", !0)
+                ];
+              }, !0)
+            ], 16)) : x("", !0)
+          ]),
+          _: 3
+        }, 8, ["popup-transition", "popup-transition-duration"])
       ]))
-    ], 16, Ba));
+    ], 16, Ma));
   }
 });
 export {
-  Ga as default
+  ja as default
 };