@opentiny/tiny-robot 0.2.0-alpha.5 → 0.2.0-alpha.6

package/dist/action-group/index.js

@@ -1,10 +1,10 @@
-import { defineComponent as L, useSlots as W, computed as i, useTemplateRef as T, ref as R, watch as N, nextTick as j, createElementBlock as m, openBlock as n, createBlock as d, createCommentVNode as G, Fragment as I, renderList as x, unref as f, withCtx as C, createElementVNode as _, resolveDynamicComponent as E, renderSlot as F, createVNode as M, Transition as q, withDirectives as J, normalizeClass as K, withModifiers as Q, toDisplayString as U, vShow as Y } from "vue";
-import { o as Z } from "../tiny-robot-svgs.js";
-import { T as $ } from "../index4.js";
-import { o as ee, b as te } from "../index3.js";
-import oe from "../icon-button/index.js";
-import { _ as ne } from "../_plugin-vue_export-helper.js";
-const re = { class: "tr-action-group" }, le = ["onClick"], ae = ["onClick"], ce = { class: "tr-action-group__dropdown-item-text" }, se = /* @__PURE__ */ L({
+import { defineComponent as $, useSlots as H, computed as i, ref as f, watch as N, nextTick as W, createElementBlock as _, openBlock as n, createBlock as v, createCommentVNode as R, Fragment as G, renderList as I, unref as h, withCtx as S, createElementVNode as w, resolveDynamicComponent as x, renderSlot as L, createVNode as E, Transition as j, withDirectives as q, normalizeClass as J, withModifiers as K, toDisplayString as Q, vShow as U } from "vue";
+import { o as Y } from "../tiny-robot-svgs.js";
+import { T as M } from "../index4.js";
+import { o as Z, b as ee } from "../index3.js";
+import te from "../icon-button/index.js";
+import { _ as oe } from "../_plugin-vue_export-helper.js";
+const ne = { class: "tr-action-group" }, re = ["onClick"], le = ["onClick"], ae = { class: "tr-action-group__dropdown-item-text" }, ce = /* @__PURE__ */ $({
   __name: "ActionGroup",
   props: {
     maxNum: {},
@@ -12,61 +12,61 @@ const re = { class: "tr-action-group" }, le = ["onClick"], ae = ["onClick"], ce
     dropDownShowLabelOnly: { type: Boolean }
   },
   emits: ["item-click"],
-  setup(l, { emit: h }) {
-    const a = l, O = W(), V = h, p = i(() => {
+  setup(l, { emit: k }) {
+    const a = l, F = H(), O = k, p = i(() => {
       var o, t;
-      const e = O.default();
+      const e = F.default();
       return Array.isArray(e) ? e.length === 1 && ((o = e[0].type) == null ? void 0 : o.toString()) === "Symbol(v-fgt)" ? e[0].children : e : ((t = e.type) == null ? void 0 : t.toString()) === "Symbol(v-fgt)" ? e.children : [e];
-    }), w = i(() => {
+    }), b = i(() => {
       const e = a.maxNum ?? Number.MAX_SAFE_INTEGER;
       return e > 0 ? e : Number.MAX_SAFE_INTEGER;
-    }), g = i(() => p.value.length > w.value), z = i(() => g.value ? p.value.slice(0, w.value) : p.value), P = i(() => g.value ? p.value.slice(w.value) : []), b = T("moreBtnRef"), k = T("dropDownRef"), r = R(!1), X = () => {
+    }), y = i(() => p.value.length > b.value), V = i(() => y.value ? p.value.slice(0, b.value) : p.value), z = i(() => y.value ? p.value.slice(b.value) : []), m = f(null), d = f(null), r = f(!1), P = () => {
       r.value = !r.value;
     };
-    ee(k, (e) => {
+    Z(d, (e) => {
       var o;
-      (o = b.value) != null && o.contains(e.target) || (r.value = !1);
+      (o = m.value) != null && o.contains(e.target) || (r.value = !1);
     });
-    const S = (e) => {
-      V("item-click", e), r.value = !1;
-    }, A = R("placement-bottom"), { height: B } = te(), D = () => {
-      if (!k.value || !b.value)
+    const A = (e) => {
+      O("item-click", e), r.value = !1;
+    }, B = f("placement-bottom"), { height: D } = ee(), T = () => {
+      if (!d.value || !m.value)
         return "placement-bottom";
-      const e = k.value.getBoundingClientRect(), o = b.value.getBoundingClientRect();
-      A.value = o.bottom + e.height + 16 > B.value ? "placement-top" : "placement-bottom";
+      const e = d.value.getBoundingClientRect(), o = m.value.getBoundingClientRect();
+      B.value = o.bottom + e.height + 16 > D.value ? "placement-top" : "placement-bottom";
     };
     return N(r, (e) => {
-      e && j(() => {
-        D();
+      e && W(() => {
+        T();
       });
-    }), N(B, () => {
-      r.value && D();
-    }), (e, o) => (n(), m("div", re, [
-      (n(!0), m(I, null, x(z.value, (t, y) => {
+    }), N(D, () => {
+      r.value && T();
+    }), (e, o) => (n(), _("div", ne, [
+      (n(!0), _(G, null, I(V.value, (t, C) => {
         var c;
-        return n(), d(f($), {
-          key: y,
+        return n(), v(h(M), {
+          key: C,
           content: (c = t.props) == null ? void 0 : c.label,
           effect: "dark",
           placement: "top",
           "open-delay": 500,
           disabled: !a.showTooltip
         }, {
-          default: C(() => [
-            _("span", {
+          default: S(() => [
+            w("span", {
               class: "tr-action-group__btn-wrapper",
-              onClick: (H) => {
+              onClick: (X) => {
                 var s;
-                return S((s = t.props) == null ? void 0 : s.name);
+                return A((s = t.props) == null ? void 0 : s.name);
               }
             }, [
-              (n(), d(E(t)))
-            ], 8, le)
+              (n(), v(x(t)))
+            ], 8, re)
           ]),
           _: 2
         }, 1032, ["content", "disabled"]);
       }), 128)),
-      g.value ? (n(), d(f($), {
+      y.value ? (n(), v(h(M), {
         key: 0,
         content: "更多",
         effect: "dark",
@@ -74,37 +74,39 @@ const re = { class: "tr-action-group" }, le = ["onClick"], ae = ["onClick"], ce
         "open-delay": 500,
         disabled: !a.showTooltip
       }, {
-        default: C(() => [
-          _("span", {
-            ref: "moreBtnRef",
+        default: S(() => [
+          w("span", {
+            ref_key: "moreBtnRef",
+            ref: m,
             class: "tr-action-group__btn-wrapper",
-            onClick: X
+            onClick: P
           }, [
-            F(e.$slots, "moreBtn", {}, () => [
-              M(f(oe), { icon: f(Z) }, null, 8, ["icon"])
+            L(e.$slots, "moreBtn", {}, () => [
+              E(h(te), { icon: h(Y) }, null, 8, ["icon"])
             ], !0),
-            M(q, { name: "tr-action-group-dropdown" }, {
-              default: C(() => [
-                J(_("ul", {
-                  ref: "dropDownRef",
-                  class: K(["tr-action-group__dropdown", A.value])
+            E(j, { name: "tr-action-group-dropdown" }, {
+              default: S(() => [
+                q(w("ul", {
+                  ref_key: "dropDownRef",
+                  ref: d,
+                  class: J(["tr-action-group__dropdown", B.value])
                 }, [
-                  (n(!0), m(I, null, x(P.value, (t, y) => {
+                  (n(!0), _(G, null, I(z.value, (t, C) => {
                     var c;
-                    return n(), m("li", {
+                    return n(), _("li", {
                       class: "tr-action-group__dropdown-item",
-                      key: y,
-                      onClick: Q((H) => {
+                      key: C,
+                      onClick: K((X) => {
                         var s;
-                        return S((s = t.props) == null ? void 0 : s.name);
+                        return A((s = t.props) == null ? void 0 : s.name);
                       }, ["stop"])
                     }, [
-                      a.dropDownShowLabelOnly ? G("", !0) : (n(), d(E(t), { key: 0 })),
-                      _("span", ce, U((c = t.props) == null ? void 0 : c.label), 1)
-                    ], 8, ae);
+                      a.dropDownShowLabelOnly ? R("", !0) : (n(), v(x(t), { key: 0 })),
+                      w("span", ae, Q((c = t.props) == null ? void 0 : c.label), 1)
+                    ], 8, le);
                   }), 128))
                 ], 2), [
-                  [Y, r.value]
+                  [U, r.value]
                 ])
               ]),
               _: 1
@@ -112,31 +114,31 @@ const re = { class: "tr-action-group" }, le = ["onClick"], ae = ["onClick"], ce
           ], 512)
         ]),
         _: 3
-      }, 8, ["disabled"])) : G("", !0)
+      }, 8, ["disabled"])) : R("", !0)
     ]));
   }
-}), v = /* @__PURE__ */ ne(se, [["__scopeId", "data-v-43d0f1ba"]]), u = /* @__PURE__ */ L({
+}), g = /* @__PURE__ */ oe(ce, [["__scopeId", "data-v-afd2130f"]]), u = /* @__PURE__ */ $({
   __name: "ActionGroupItem",
   props: {
     name: {},
     label: {}
   },
   setup(l) {
-    return (h, a) => F(h.$slots, "default");
+    return (k, a) => L(k.$slots, "default");
   }
 });
-v.name = "TrActionGroup";
-const ie = function(l) {
-  l.component(v.name, v);
+g.name = "TrActionGroup";
+const se = function(l) {
+  l.component(g.name, g);
 };
-v.install = ie;
+g.install = se;
 u.name = "TrActionGroupItem";
-const ue = function(l) {
+const ie = function(l) {
   l.component(u.name, u);
 };
-u.install = ue;
-const he = u;
+u.install = ie;
+const ve = u;
 export {
-  he as ActionGroupItem,
-  v as default
+  ve as ActionGroupItem,
+  g as default
 };

package/dist/bubble/index.js

@@ -1,4 +1,4 @@
-import { defineComponent as c0, useCssVars as L0, useSlots as P0, computed as au, createElementBlock as L, openBlock as S, normalizeClass as i0, createCommentVNode as _u, createElementVNode as Z, createBlock as yu, resolveDynamicComponent as o0, renderSlot as mu, toDisplayString as O0, useTemplateRef as N0, watch as $0, Fragment as j0, renderList as Ou, mergeProps as Nu, createSlots as U0, withCtx as Z0 } from "vue";
+import { defineComponent as c0, useCssVars as L0, useSlots as P0, computed as au, createElementBlock as L, openBlock as S, normalizeClass as i0, createCommentVNode as _u, createElementVNode as Z, createBlock as yu, resolveDynamicComponent as o0, renderSlot as mu, toDisplayString as O0, ref as N0, watch as $0, Fragment as j0, renderList as Ou, mergeProps as Nu, createSlots as U0, withCtx as Z0 } from "vue";
 import { _ as a0 } from "../_plugin-vue_export-helper.js";
 import { d as H0 } from "../index3.js";
 const $u = {};
@@ -3149,10 +3149,7 @@ const Tr = {
       ])
     ], 2));
   }
-}), J = /* @__PURE__ */ a0(Or, [["__scopeId", "data-v-56d84731"]]), Nr = {
-  class: "tr-bubble-list",
-  ref: "scrollContainer"
-}, $r = /* @__PURE__ */ c0({
+}), J = /* @__PURE__ */ a0(Or, [["__scopeId", "data-v-56d84731"]]), Nr = /* @__PURE__ */ c0({
   __name: "BubbleList",
   props: {
     items: {},
@@ -3160,7 +3157,7 @@ const Tr = {
     autoScroll: { type: Boolean }
   },
   setup(u) {
-    const e = u, t = N0("scrollContainer"), { y: n } = H0(t, {
+    const e = u, t = N0(null), { y: n } = H0(t, {
       behavior: "smooth",
       throttle: 100
     }), r = au(() => e.items.at(-1));
@@ -3178,7 +3175,11 @@ const Tr = {
       var s;
       return { ...(i.role ? ((s = e.roles) == null ? void 0 : s[i.role]) || {} : {}).slots, ...i.slots };
     };
-    return (i, a) => (S(), L("div", Nr, [
+    return (i, a) => (S(), L("div", {
+      class: "tr-bubble-list",
+      ref_key: "scrollContainerRef",
+      ref: t
+    }, [
       (S(!0), L(j0, null, Ou(e.items, (s, f) => (S(), yu(J, Nu({
         key: s.id || f,
         ref_for: !0
@@ -3192,20 +3193,20 @@ const Tr = {
       ]), 1040))), 128))
     ], 512));
   }
-}), tu = /* @__PURE__ */ a0($r, [["__scopeId", "data-v-bd672305"]]);
+}), tu = /* @__PURE__ */ a0(Nr, [["__scopeId", "data-v-307d7ab0"]]);
 J.name = "TrBubble";
-const jr = function(u) {
+const $r = function(u) {
   u.component(J.name, J);
 };
-J.install = jr;
-const Gr = J;
+J.install = $r;
+const Vr = J;
 tu.name = "TrBubbleList";
-const Ur = function(u) {
+const jr = function(u) {
   u.component(tu.name, tu);
 };
-tu.install = Ur;
-const Wr = tu;
+tu.install = jr;
+const Gr = tu;
 export {
-  Gr as Bubble,
-  Wr as BubbleList
+  Vr as Bubble,
+  Gr as BubbleList
 };

package/dist/dropdown-menu/index.js

@@ -1,8 +1,8 @@
-import { defineComponent as $, useCssVars as T, unref as S, ref as B, useTemplateRef as u, computed as D, watch as V, createElementBlock as i, openBlock as n, renderSlot as b, createVNode as E, Transition as M, withCtx as N, createBlock as O, createCommentVNode as R, Teleport as W, createElementVNode as c, normalizeStyle as I, Fragment as z, renderList as F, toDisplayString as H } from "vue";
-import { u as m, o as L } from "../index3.js";
+import { defineComponent as $, useCssVars as T, unref as D, ref as d, computed as S, watch as B, createElementBlock as u, openBlock as n, renderSlot as M, createVNode as R, Transition as V, withCtx as E, createBlock as N, createCommentVNode as O, Teleport as W, createElementVNode as m, normalizeStyle as I, Fragment as b, renderList as z, toDisplayString as F } from "vue";
+import { u as p, o as H } from "../index3.js";
 import { toCssUnit as o } from "../shared/index.js";
-import { _ as P } from "../_plugin-vue_export-helper.js";
-const U = { class: "tr-dropdown-menu__list" }, j = ["onClick"], q = /* @__PURE__ */ $({
+import { _ as L } from "../_plugin-vue_export-helper.js";
+const P = { class: "tr-dropdown-menu__list" }, U = ["onClick"], j = /* @__PURE__ */ $({
   __name: "index",
   props: {
     items: {},
@@ -10,61 +10,63 @@ const U = { class: "tr-dropdown-menu__list" }, j = ["onClick"], q = /* @__PURE__
     topOffset: { default: 0 }
   },
   emits: ["item-click"],
-  setup(s, { emit: p }) {
+  setup(s, { emit: f }) {
     T((e) => ({
-      72795133: S(o)(l.minWidth)
+      f8e23632: D(o)(l.minWidth)
     }));
-    const l = s, t = B(!1), f = p, _ = u("dropdown-menu-trigger"), a = u("dropdown-menu"), { x: w, y: h, update: v } = m(_), { width: g, height: k } = m(a), x = D(() => ({
-      left: `min(${o(w.value)}, 100% - ${o(g.value)})`,
-      top: `max(${o(h.value)} - ${o(k.value)} + ${o(l.topOffset)} - 8px, 0px)`
+    const l = s, t = d(!1), _ = f, c = d(null), a = d(null), { x: w, y: h, update: v } = p(c), { width: k, height: g } = p(a), x = S(() => ({
+      left: `min(${o(w.value)}, 100% - ${o(k.value)})`,
+      top: `max(${o(h.value)} - ${o(g.value)} + ${o(l.topOffset)} - 8px, 0px)`
     }));
-    L(a, (e) => {
+    H(a, (e) => {
       e.stopPropagation(), t.value = !1;
-    }), V(t, (e) => {
+    }), B(t, (e) => {
       e && v();
     });
-    const C = () => {
+    const y = () => {
       t.value = !t.value;
-    }, y = (e) => {
-      t.value = !1, f("item-click", e);
+    }, C = (e) => {
+      t.value = !1, _("item-click", e);
     };
-    return (e, G) => (n(), i("div", {
+    return (e, A) => (n(), u("div", {
       class: "tr-dropdown-menu__wrapper",
-      ref: "dropdown-menu-trigger",
-      onClick: C
+      ref_key: "dropDownTriggerRef",
+      ref: c,
+      onClick: y
     }, [
-      b(e.$slots, "default", {}, void 0, !0),
-      E(M, { name: "tr-dropdown-menu" }, {
-        default: N(() => [
-          t.value ? (n(), O(W, {
+      M(e.$slots, "default", {}, void 0, !0),
+      R(V, { name: "tr-dropdown-menu" }, {
+        default: E(() => [
+          t.value ? (n(), N(W, {
             key: 0,
             to: "body"
           }, [
-            c("div", {
+            m("div", {
               class: "tr-dropdown-menu",
               style: I(x.value),
-              ref: "dropdown-menu"
+              ref_key: "dropdownMenuRef",
+              ref: a
             }, [
-              c("ul", U, [
-                (n(!0), i(z, null, F(l.items, (d) => (n(), i("li", {
+              m("ul", P, [
+                (n(!0), u(b, null, z(l.items, (i) => (n(), u("li", {
                   class: "tr-dropdown-menu__list-item",
-                  key: d.id,
-                  onClick: (J) => y(d)
-                }, H(d.text), 9, j))), 128))
+                  key: i.id,
+                  onClick: (G) => C(i)
+                }, F(i.text), 9, U))), 128))
               ])
             ], 4)
-          ])) : R("", !0)
+          ])) : O("", !0)
         ]),
         _: 1
       })
     ], 512));
   }
-}), r = /* @__PURE__ */ P(q, [["__scopeId", "data-v-dbe4bc04"]]);
+}), r = /* @__PURE__ */ L(j, [["__scopeId", "data-v-e4886a37"]]);
 r.name = "TrDropdownMenu";
-const A = function(s) {
+const q = function(s) {
   s.component(r.name, r);
 };
-r.install = A;
+r.install = q;
 export {
   r as default
 };

package/dist/flow-layout-buttons/index.js

@@ -1,120 +1,123 @@
-import { defineComponent as q, mergeModels as $, useModel as G, watch as k, useTemplateRef as h, ref as v, computed as D, createElementBlock as a, openBlock as l, createElementVNode as M, Fragment as g, renderList as S, createCommentVNode as _, normalizeClass as b, createBlock as C, resolveDynamicComponent as I, toDisplayString as F, nextTick as H } from "vue";
-import { U as X } from "../tiny-robot-svgs.js";
-import { a as j, o as J } from "../index3.js";
-import { _ as K } from "../_plugin-vue_export-helper.js";
-const P = {
-  class: "tr-flow-layout",
-  ref: "container"
-}, Q = ["onClick"], Y = {
+import { defineComponent as V, mergeModels as E, useModel as q, watch as g, ref as i, computed as $, createElementBlock as a, openBlock as l, createElementVNode as C, Fragment as I, renderList as S, createCommentVNode as _, normalizeClass as x, createBlock as B, resolveDynamicComponent as b, toDisplayString as D, nextTick as G } from "vue";
+import { U as H } from "../tiny-robot-svgs.js";
+import { a as X, o as j } from "../index3.js";
+import { _ as J } from "../_plugin-vue_export-helper.js";
+const K = ["onClick"], P = {
   key: 0,
   class: "tr-flow-layout__item-label"
-}, Z = { class: "tr-flow-layout__dropdown-wrapper" }, ee = {
-  key: 0,
-  class: "tr-flow-layout__dropdown",
-  ref: "dropDown"
-}, te = ["onClick"], oe = { class: "tr-flow-layout__item-label" }, le = /* @__PURE__ */ q({
+}, Q = { class: "tr-flow-layout__dropdown-wrapper" }, Y = ["onClick"], Z = { class: "tr-flow-layout__item-label" }, ee = /* @__PURE__ */ V({
   __name: "index",
-  props: /* @__PURE__ */ $({
+  props: /* @__PURE__ */ E({
     items: {},
     selected: {},
     linesLimit: { default: Number.MAX_SAFE_INTEGER },
-    moreIcon: { default: X },
+    moreIcon: { default: H },
     showMoreTrigger: { default: "click" }
   }, {
     selected: {},
     selectedModifiers: {}
   }),
-  emits: /* @__PURE__ */ $(["item-click"], ["update:selected"]),
-  setup(d, { emit: N }) {
-    const n = d, i = G(d, "selected");
-    k(
+  emits: /* @__PURE__ */ E(["item-click"], ["update:selected"]),
+  setup(d, { emit: F }) {
+    const n = d, u = q(d, "selected");
+    g(
       () => n.items,
       (t) => {
-        !t.find((o) => o.id === i.value) && t.length && (i.value = t[0].id);
+        !t.find((o) => o.id === u.value) && t.length && (u.value = t[0].id);
       },
       { immediate: !0 }
     );
-    const A = N, x = h("container"), B = h("more-button"), L = h("dropDown"), w = v([]), s = v(null), f = v(!1), u = v(!1), W = (t, o) => {
-      t && (w.value[o] = t);
-    }, T = () => {
-      s.value = null, f.value = !1, H(() => {
-        const t = x.value, o = B.value;
+    const N = F, y = i(null), w = i(null), k = i(null), M = i([]), s = i(null), m = i(!1), c = i(!1), A = (t, o) => {
+      t && (M.value[o] = t);
+    }, L = () => {
+      s.value = null, m.value = !1, G(() => {
+        const t = y.value, o = w.value;
         if (!t || !o)
           return;
-        const e = w.value.slice(0, n.items.length).filter((r) => !!r).map((r) => r.offsetTop), c = Array.from(new Set(e));
-        if (c.length > n.linesLimit) {
-          const r = c[n.linesLimit - 1], y = e.lastIndexOf(r), E = w.value[y];
-          t.clientWidth - E.offsetLeft - E.offsetWidth - 8 < o.offsetWidth ? s.value = y : s.value = y + 1, f.value = !1;
+        const e = M.value.slice(0, n.items.length).filter((r) => !!r).map((r) => r.offsetTop), f = Array.from(new Set(e));
+        if (f.length > n.linesLimit) {
+          const r = f[n.linesLimit - 1], h = e.lastIndexOf(r), T = M.value[h];
+          t.clientWidth - T.offsetLeft - T.offsetWidth - 8 < o.offsetWidth ? s.value = h : s.value = h + 1, m.value = !1;
         } else
-          s.value = null, f.value = !0;
+          s.value = null, m.value = !0;
       });
     };
-    k(() => n.items, T);
-    const { width: z } = j(x);
-    k(z, (t) => {
-      t > 0 && T();
+    g(() => n.items, L);
+    const { width: W } = X(y);
+    g(W, (t) => {
+      t > 0 && L();
     });
-    const O = D(() => s.value !== null ? n.items.slice(s.value) : []), U = D(() => s.value === null ? !1 : n.items.findIndex((o) => o.id === i.value) >= s.value), R = (t) => {
-      i.value = t, u.value = !1, A("item-click", t);
-    }, V = () => {
-      n.showMoreTrigger === "click" && (u.value = !u.value);
-    }, m = (t) => {
-      n.showMoreTrigger === "hover" && (u.value = t);
+    const z = $(() => s.value !== null ? n.items.slice(s.value) : []), O = $(() => s.value === null ? !1 : n.items.findIndex((o) => o.id === u.value) >= s.value), R = (t) => {
+      u.value = t, c.value = !1, N("item-click", t);
+    }, U = () => {
+      n.showMoreTrigger === "click" && (c.value = !c.value);
+    }, v = (t) => {
+      n.showMoreTrigger === "hover" && (c.value = t);
     };
-    return J(L, (t) => {
+    return j(k, (t) => {
       var o, e;
-      (o = L.value) != null && o.contains(t.target) || (e = B.value) != null && e.contains(t.target) || (u.value = !1);
-    }), (t, o) => (l(), a("div", P, [
-      (l(!0), a(g, null, S(n.items, (e, c) => (l(), a(g, {
+      (o = k.value) != null && o.contains(t.target) || (e = w.value) != null && e.contains(t.target) || (c.value = !1);
+    }), (t, o) => (l(), a("div", {
+      class: "tr-flow-layout",
+      ref_key: "containerRef",
+      ref: y
+    }, [
+      (l(!0), a(I, null, S(n.items, (e, f) => (l(), a(I, {
         key: e.id
       }, [
-        s.value === null || c < s.value ? (l(), a("button", {
+        s.value === null || f < s.value ? (l(), a("button", {
           key: 0,
-          class: b(["tr-flow-layout__item", { "icon-only": !e.label }, { selected: e.id === i.value }]),
+          class: x(["tr-flow-layout__item", { "icon-only": !e.label }, { selected: e.id === u.value }]),
           ref_for: !0,
-          ref: (r) => W(r, c),
+          ref: (r) => A(r, f),
           onClick: (r) => R(e.id)
         }, [
-          (l(), C(I(e.icon), { class: "tr-flow-layout__item-icon" })),
-          e.label ? (l(), a("span", Y, F(e.label), 1)) : _("", !0)
-        ], 10, Q)) : _("", !0)
+          (l(), B(b(e.icon), { class: "tr-flow-layout__item-icon" })),
+          e.label ? (l(), a("span", P, D(e.label), 1)) : _("", !0)
+        ], 10, K)) : _("", !0)
       ], 64))), 128)),
-      M("div", Z, [
-        f.value ? _("", !0) : (l(), a("button", {
+      C("div", Q, [
+        m.value ? _("", !0) : (l(), a("button", {
           key: 0,
-          class: b(["tr-flow-layout__item", "icon-only", { selected: U.value }]),
-          ref: "more-button",
-          onClick: V,
-          onMouseenter: o[0] || (o[0] = (e) => m(!0)),
-          onMouseleave: o[1] || (o[1] = (e) => m(!1))
+          class: x(["tr-flow-layout__item", "icon-only", { selected: O.value }]),
+          ref_key: "moreButtonRef",
+          ref: w,
+          onClick: U,
+          onMouseenter: o[0] || (o[0] = (e) => v(!0)),
+          onMouseleave: o[1] || (o[1] = (e) => v(!1))
         }, [
-          (l(), C(I(n.moreIcon), { class: "tr-flow-layout__item-icon" }))
+          (l(), B(b(n.moreIcon), { class: "tr-flow-layout__item-icon" }))
         ], 34)),
-        M("div", {
+        C("div", {
           class: "tr-flow-layout__dropdown-container",
-          onMouseenter: o[2] || (o[2] = (e) => m(!0)),
-          onMouseleave: o[3] || (o[3] = (e) => m(!1))
+          onMouseenter: o[2] || (o[2] = (e) => v(!0)),
+          onMouseleave: o[3] || (o[3] = (e) => v(!1))
         }, [
-          u.value ? (l(), a("div", ee, [
-            (l(!0), a(g, null, S(O.value, (e) => (l(), a("button", {
-              class: b(["tr-flow-layout__dropdown_item", { selected: e.id === i.value }]),
+          c.value ? (l(), a("div", {
+            key: 0,
+            class: "tr-flow-layout__dropdown",
+            ref_key: "dropDownRef",
+            ref: k
+          }, [
+            (l(!0), a(I, null, S(z.value, (e) => (l(), a("button", {
+              class: x(["tr-flow-layout__dropdown_item", { selected: e.id === u.value }]),
               key: e.id,
-              onClick: (c) => R(e.id)
+              onClick: (f) => R(e.id)
             }, [
-              (l(), C(I(e.icon), { class: "tr-flow-layout__item-icon" })),
-              M("span", oe, F(e.label), 1)
-            ], 10, te))), 128))
+              (l(), B(b(e.icon), { class: "tr-flow-layout__item-icon" })),
+              C("span", Z, D(e.label), 1)
+            ], 10, Y))), 128))
           ], 512)) : _("", !0)
         ], 32)
       ])
     ], 512));
   }
-}), p = /* @__PURE__ */ K(le, [["__scopeId", "data-v-2718a5f2"]]);
+}), p = /* @__PURE__ */ J(ee, [["__scopeId", "data-v-5a28ac75"]]);
 p.name = "TrFlowLayout";
-const ne = function(d) {
+const te = function(d) {
   d.component(p.name, p);
 };
-p.install = ne;
+p.install = te;
 export {
   p as default
 };