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

package/dist/action-group/index.js

@@ -1,10 +1,10 @@
-import { defineComponent as L, useSlots as H, computed as i, useTemplateRef as T, ref as R, watch as N, nextTick as W, 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 j, withDirectives as J, normalizeClass as K, withModifiers as Q, toDisplayString as U, vShow as Y } from "vue";
-import { q as Z } from "../tiny-robot-svgs.js";
+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, a as te } from "../index2.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" }, ae = ["onClick"], le = ["onClick"], ce = { class: "tr-action-group__dropdown-item-text" }, se = /* @__PURE__ */ L({
+const re = { class: "tr-action-group" }, le = ["onClick"], ae = ["onClick"], ce = { class: "tr-action-group__dropdown-item-text" }, se = /* @__PURE__ */ L({
   __name: "ActionGroup",
   props: {
     maxNum: {},
@@ -12,15 +12,15 @@ const re = { class: "tr-action-group" }, ae = ["onClick"], le = ["onClick"], ce
     dropDownShowLabelOnly: { type: Boolean }
   },
   emits: ["item-click"],
-  setup(a, { emit: h }) {
-    const l = a, O = H(), V = h, p = i(() => {
+  setup(l, { emit: h }) {
+    const a = l, O = W(), V = h, p = i(() => {
       var o, t;
       const e = O.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(() => {
-      const e = l.maxNum ?? Number.MAX_SAFE_INTEGER;
+      const e = a.maxNum ?? Number.MAX_SAFE_INTEGER;
       return e > 0 ? e : Number.MAX_SAFE_INTEGER;
-    }), g = i(() => p.value.length > w.value), q = i(() => g.value ? p.value.slice(0, w.value) : p.value), z = i(() => g.value ? p.value.slice(w.value) : []), b = T("moreBtnRef"), k = T("dropDownRef"), r = R(!1), P = () => {
+    }), 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 = () => {
       r.value = !r.value;
     };
     ee(k, (e) => {
@@ -36,13 +36,13 @@ const re = { class: "tr-action-group" }, ae = ["onClick"], le = ["onClick"], ce
       A.value = o.bottom + e.height + 16 > B.value ? "placement-top" : "placement-bottom";
     };
     return N(r, (e) => {
-      e && W(() => {
+      e && j(() => {
         D();
       });
     }), N(B, () => {
       r.value && D();
     }), (e, o) => (n(), m("div", re, [
-      (n(!0), m(I, null, x(q.value, (t, y) => {
+      (n(!0), m(I, null, x(z.value, (t, y) => {
         var c;
         return n(), d(f($), {
           key: y,
@@ -50,18 +50,18 @@ const re = { class: "tr-action-group" }, ae = ["onClick"], le = ["onClick"], ce
           effect: "dark",
           placement: "top",
           "open-delay": 500,
-          disabled: !l.showTooltip
+          disabled: !a.showTooltip
         }, {
           default: C(() => [
             _("span", {
               class: "tr-action-group__btn-wrapper",
-              onClick: (X) => {
+              onClick: (H) => {
                 var s;
                 return S((s = t.props) == null ? void 0 : s.name);
               }
             }, [
               (n(), d(E(t)))
-            ], 8, ae)
+            ], 8, le)
           ]),
           _: 2
         }, 1032, ["content", "disabled"]);
@@ -72,36 +72,36 @@ const re = { class: "tr-action-group" }, ae = ["onClick"], le = ["onClick"], ce
         effect: "dark",
         placement: "top",
         "open-delay": 500,
-        disabled: !l.showTooltip
+        disabled: !a.showTooltip
       }, {
         default: C(() => [
           _("span", {
             ref: "moreBtnRef",
             class: "tr-action-group__btn-wrapper",
-            onClick: P
+            onClick: X
           }, [
             F(e.$slots, "moreBtn", {}, () => [
               M(f(oe), { icon: f(Z) }, null, 8, ["icon"])
             ], !0),
-            M(j, { name: "tr-action-group-dropdown" }, {
+            M(q, { name: "tr-action-group-dropdown" }, {
               default: C(() => [
                 J(_("ul", {
                   ref: "dropDownRef",
                   class: K(["tr-action-group__dropdown", A.value])
                 }, [
-                  (n(!0), m(I, null, x(z.value, (t, y) => {
+                  (n(!0), m(I, null, x(P.value, (t, y) => {
                     var c;
                     return n(), m("li", {
                       class: "tr-action-group__dropdown-item",
                       key: y,
-                      onClick: Q((X) => {
+                      onClick: Q((H) => {
                         var s;
                         return S((s = t.props) == null ? void 0 : s.name);
                       }, ["stop"])
                     }, [
-                      l.dropDownShowLabelOnly ? G("", !0) : (n(), d(E(t), { key: 0 })),
+                      a.dropDownShowLabelOnly ? G("", !0) : (n(), d(E(t), { key: 0 })),
                       _("span", ce, U((c = t.props) == null ? void 0 : c.label), 1)
-                    ], 8, le);
+                    ], 8, ae);
                   }), 128))
                 ], 2), [
                   [Y, r.value]
@@ -121,18 +121,18 @@ const re = { class: "tr-action-group" }, ae = ["onClick"], le = ["onClick"], ce
     name: {},
     label: {}
   },
-  setup(a) {
-    return (h, l) => F(h.$slots, "default");
+  setup(l) {
+    return (h, a) => F(h.$slots, "default");
   }
 });
 v.name = "TrActionGroup";
-const ie = function(a) {
-  a.component(v.name, v);
+const ie = function(l) {
+  l.component(v.name, v);
 };
 v.install = ie;
 u.name = "TrActionGroupItem";
-const ue = function(a) {
-  a.component(u.name, u);
+const ue = function(l) {
+  l.component(u.name, u);
 };
 u.install = ue;
 const he = u;

package/dist/bubble/index.js

@@ -1,6 +1,6 @@
 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 { _ as a0 } from "../_plugin-vue_export-helper.js";
-import { u as H0 } from "../index2.js";
+import { d as H0 } from "../index3.js";
 const $u = {};
 function V0(u) {
   let e = $u[u];

package/dist/close.js

@@ -1,4 +1,4 @@
-import { l as o } from "./index6.js";
+import { s as o } from "./index2.js";
 import { createElementBlock as n, openBlock as r, createElementVNode as t } from "vue";
 var c = {
   viewBox: "0 0 16 16",

package/dist/container/index.js

@@ -1,8 +1,8 @@
-import { defineComponent as m, useCssVars as v, useModel as c, computed as _, createElementBlock as w, openBlock as g, createElementVNode as n, renderSlot as r, createVNode as u, unref as a } from "vue";
-import { N as h, F as $, T as C } from "../tiny-robot-svgs.js";
+import { defineComponent as m, useCssVars as v, useModel as c, computed as _, createElementBlock as $, openBlock as w, createElementVNode as n, renderSlot as r, createVNode as u, unref as a } from "vue";
+import { $ as g, i as h, t as C } from "../tiny-robot-svgs.js";
 import d from "../icon-button/index.js";
 import { _ as b } from "../_plugin-vue_export-helper.js";
-const B = { class: "tr-container" }, N = { class: "tr-container__header" }, T = { class: "tr-container__header-operations" }, k = { class: "tr-container__footer" }, z = /* @__PURE__ */ m({
+const B = { class: "tr-container" }, k = { class: "tr-container__header" }, z = { class: "tr-container__header-operations" }, y = { class: "tr-container__footer" }, E = /* @__PURE__ */ m({
   __name: "index",
   props: {
     show: { type: Boolean, required: !0 },
@@ -18,16 +18,16 @@ const B = { class: "tr-container" }, N = { class: "tr-container__header" }, T =
       "224ae4c1": l.value ? "100" : "-1",
       cb10cae2: l.value ? "1" : "0"
     }));
-    const l = c(o, "show"), s = c(o, "fullscreen"), f = _(() => s.value ? h : $);
-    return (t, e) => (g(), w("div", B, [
+    const l = c(o, "show"), s = c(o, "fullscreen"), f = _(() => s.value ? g : h);
+    return (t, e) => (w(), $("div", B, [
       e[3] || (e[3] = n("div", { class: "tr-container__dragging-bar-wrapper" }, [
         n("div", { class: "tr-container__dragging-bar" })
       ], -1)),
-      n("div", N, [
+      n("div", k, [
         r(t.$slots, "title", {}, () => [
           e[2] || (e[2] = n("h3", { class: "tr-container__title" }, "OpenTiny NEXT", -1))
         ]),
-        n("div", T, [
+        n("div", z, [
           r(t.$slots, "operations"),
           u(a(d), {
             size: "28",
@@ -44,17 +44,17 @@ const B = { class: "tr-container" }, N = { class: "tr-container__header" }, T =
         ])
       ]),
       r(t.$slots, "default"),
-      n("div", k, [
+      n("div", y, [
         r(t.$slots, "footer")
       ])
     ]));
   }
-}), i = /* @__PURE__ */ b(z, [["__scopeId", "data-v-81c9f59e"]]);
+}), i = /* @__PURE__ */ b(E, [["__scopeId", "data-v-81c9f59e"]]);
 i.name = "TrContainer";
-const y = function(o) {
+const I = function(o) {
   o.component(i.name, i);
 };
-i.install = y;
+i.install = I;
 export {
   i as default
 };

package/dist/dropdown-menu/index.js

@@ -0,0 +1,70 @@
+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 { 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__ */ $({
+  __name: "index",
+  props: {
+    items: {},
+    minWidth: { default: 160 },
+    topOffset: { default: 0 }
+  },
+  emits: ["item-click"],
+  setup(s, { emit: p }) {
+    T((e) => ({
+      72795133: S(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)`
+    }));
+    L(a, (e) => {
+      e.stopPropagation(), t.value = !1;
+    }), V(t, (e) => {
+      e && v();
+    });
+    const C = () => {
+      t.value = !t.value;
+    }, y = (e) => {
+      t.value = !1, f("item-click", e);
+    };
+    return (e, G) => (n(), i("div", {
+      class: "tr-dropdown-menu__wrapper",
+      ref: "dropdown-menu-trigger",
+      onClick: C
+    }, [
+      b(e.$slots, "default", {}, void 0, !0),
+      E(M, { name: "tr-dropdown-menu" }, {
+        default: N(() => [
+          t.value ? (n(), O(W, {
+            key: 0,
+            to: "body"
+          }, [
+            c("div", {
+              class: "tr-dropdown-menu",
+              style: I(x.value),
+              ref: "dropdown-menu"
+            }, [
+              c("ul", U, [
+                (n(!0), i(z, null, F(l.items, (d) => (n(), i("li", {
+                  class: "tr-dropdown-menu__list-item",
+                  key: d.id,
+                  onClick: (J) => y(d)
+                }, H(d.text), 9, j))), 128))
+              ])
+            ], 4)
+          ])) : R("", !0)
+        ]),
+        _: 1
+      })
+    ], 512));
+  }
+}), r = /* @__PURE__ */ P(q, [["__scopeId", "data-v-dbe4bc04"]]);
+r.name = "TrDropdownMenu";
+const A = function(s) {
+  s.component(r.name, r);
+};
+r.install = A;
+export {
+  r as default
+};

package/dist/feedback/index.js

@@ -1,10 +1,10 @@
-import { defineComponent as D, ref as E, computed as P, onMounted as z, watch as O, createElementBlock as a, openBlock as t, createCommentVNode as k, Fragment as x, renderList as S, toDisplayString as y, createVNode as b, unref as l, nextTick as Z, createElementVNode as p, createBlock as d, withCtx as f, createTextVNode as q, resolveDynamicComponent as C } from "vue";
-import { D as T, x as N, Z as j, E as H, V as J, h as K } from "../tiny-robot-svgs.js";
-import { B as R } from "../index3.js";
-import V, { ActionGroupItem as $ } from "../action-group/index.js";
+import { defineComponent as X, ref as E, computed as z, onMounted as D, watch as K, createElementBlock as a, openBlock as t, createCommentVNode as k, Fragment as I, renderList as S, toDisplayString as y, createVNode as b, unref as l, nextTick as O, createElementVNode as p, createBlock as d, withCtx as f, createTextVNode as U, resolveDynamicComponent as C } from "vue";
+import { K as T, U as N, d as q, s as j, p as H, e as J } from "../tiny-robot-svgs.js";
+import { B as R } from "../index5.js";
+import $, { ActionGroupItem as V } from "../action-group/index.js";
 import Q from "../icon-button/index.js";
-import { _ as X } from "../_plugin-vue_export-helper.js";
-const U = { class: "tr-feedback__source-list" }, W = ["href"], Y = /* @__PURE__ */ D({
+import { _ as P } from "../_plugin-vue_export-helper.js";
+const W = { class: "tr-feedback__source-list" }, Y = ["href"], Z = /* @__PURE__ */ X({
   __name: "SourceList",
   props: {
     sources: {},
@@ -12,7 +12,7 @@ const U = { class: "tr-feedback__source-list" }, W = ["href"], Y = /* @__PURE__
   },
   setup(h) {
     const _ = h, e = E(!1), L = E([]), c = E(null), g = () => {
-      Z(() => {
+      O(() => {
         const u = L.value.map((o) => (o == null ? void 0 : o.offsetTop) || 0), n = Array.from(new Set(u));
         if (n.length > _.linesLimit) {
           const o = n[_.linesLimit - 1], s = u.lastIndexOf(o);
@@ -20,13 +20,13 @@ const U = { class: "tr-feedback__source-list" }, W = ["href"], Y = /* @__PURE__
         } else
           c.value = null;
       });
-    }, A = P(() => _.sources.length - (c.value || 0));
-    z(g), O(() => _.sources, g);
+    }, A = z(() => _.sources.length - (c.value || 0));
+    D(g), K(() => _.sources, g);
     const m = (u, n) => {
       u && (L.value[n] = u);
     };
-    return (u, n) => (t(), a("div", U, [
-      (t(!0), a(x, null, S(_.sources, (o, s) => (t(), a(x, { key: s }, [
+    return (u, n) => (t(), a("div", W, [
+      (t(!0), a(I, null, S(_.sources, (o, s) => (t(), a(I, { key: s }, [
         !c.value || e.value || s < c.value ? (t(), a("a", {
           key: 0,
           class: "pill",
@@ -34,7 +34,7 @@ const U = { class: "tr-feedback__source-list" }, W = ["href"], Y = /* @__PURE__
           target: "_blank",
           ref_for: !0,
           ref: (r) => m(r, s)
-        }, y(o.label), 9, W)) : k("", !0),
+        }, y(o.label), 9, Y)) : k("", !0),
         c.value && !e.value && s === c.value ? (t(), a("span", {
           key: 1,
           class: "pill",
@@ -50,10 +50,10 @@ const U = { class: "tr-feedback__source-list" }, W = ["href"], Y = /* @__PURE__
       ])) : k("", !0)
     ]));
   }
-}), ee = /* @__PURE__ */ X(Y, [["__scopeId", "data-v-5817f518"]]), te = { class: "tr-feedback" }, se = { class: "tr-feedback__operations" }, oe = { class: "tr-feedback__operations-left" }, ne = { key: 1 }, le = { class: "tr-feedback__operations-right" }, ae = {
+}), ee = /* @__PURE__ */ P(Z, [["__scopeId", "data-v-5817f518"]]), te = { class: "tr-feedback" }, se = { class: "tr-feedback__operations" }, oe = { class: "tr-feedback__operations-left" }, ne = { key: 1 }, le = { class: "tr-feedback__operations-right" }, ae = {
   key: 0,
   class: "tr-feedback__footer"
-}, re = { key: 0 }, ie = /* @__PURE__ */ D({
+}, re = { key: 0 }, ie = /* @__PURE__ */ X({
   __name: "index",
   props: {
     operations: {},
@@ -66,10 +66,10 @@ const U = { class: "tr-feedback__source-list" }, W = ["href"], Y = /* @__PURE__
   emits: ["operation", "action"],
   setup(h, { emit: _ }) {
     const e = h, L = {
-      copy: K,
-      refresh: J,
-      like: H,
-      dislike: j
+      copy: J,
+      refresh: H,
+      like: j,
+      dislike: q
     }, c = _, g = (n) => {
       var o, s, r;
       (r = (s = (o = e.operations) == null ? void 0 : o.find((v) => v.name === n)) == null ? void 0 : s.onClick) == null || r.call(s), c("operation", n);
@@ -84,7 +84,7 @@ const U = { class: "tr-feedback__source-list" }, W = ["href"], Y = /* @__PURE__
       return t(), a("div", te, [
         p("div", se, [
           p("div", oe, [
-            (s = e.operations) != null && s.length ? (t(), d(l(V), {
+            (s = e.operations) != null && s.length ? (t(), d(l($), {
               key: 0,
               "max-num": e.operationsLimit,
               "drop-down-show-label-only": !0,
@@ -106,7 +106,7 @@ const U = { class: "tr-feedback__source-list" }, W = ["href"], Y = /* @__PURE__
                 })
               ]),
               default: f(() => [
-                (t(!0), a(x, null, S(e.operations, (i) => (t(), d(l($), {
+                (t(!0), a(I, null, S(e.operations, (i) => (t(), d(l(V), {
                   key: i.name,
                   name: i.name,
                   label: i.label
@@ -118,7 +118,7 @@ const U = { class: "tr-feedback__source-list" }, W = ["href"], Y = /* @__PURE__
                       size: "mini"
                     }, {
                       default: f(() => [
-                        q(y(i.label), 1)
+                        U(y(i.label), 1)
                       ]),
                       _: 2
                     }, 1024)
@@ -138,13 +138,13 @@ const U = { class: "tr-feedback__source-list" }, W = ["href"], Y = /* @__PURE__
             ])) : k("", !0)
           ]),
           p("div", le, [
-            b(l(V), {
+            b(l($), {
               "max-num": e.actionsLimit,
               "show-tooltip": !0,
               onItemClick: A
             }, {
               default: f(() => [
-                (t(!0), a(x, null, S(e.actions, (i) => (t(), d(l($), {
+                (t(!0), a(I, null, S(e.actions, (i) => (t(), d(l(V), {
                   key: i.name,
                   name: i.name,
                   label: i.label
@@ -181,12 +181,12 @@ const U = { class: "tr-feedback__source-list" }, W = ["href"], Y = /* @__PURE__
       ]);
     };
   }
-}), I = /* @__PURE__ */ X(ie, [["__scopeId", "data-v-cc6ef316"]]);
-I.name = "TrFeedback";
+}), x = /* @__PURE__ */ P(ie, [["__scopeId", "data-v-cc6ef316"]]);
+x.name = "TrFeedback";
 const ce = function(h) {
-  h.component(I.name, I);
+  h.component(x.name, x);
 };
-I.install = ce;
+x.install = ce;
 export {
-  I as default
+  x as default
 };

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

@@ -0,0 +1,120 @@
+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 = {
+  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({
+  __name: "index",
+  props: /* @__PURE__ */ $({
+    items: {},
+    selected: {},
+    linesLimit: { default: Number.MAX_SAFE_INTEGER },
+    moreIcon: { default: X },
+    showMoreTrigger: { default: "click" }
+  }, {
+    selected: {},
+    selectedModifiers: {}
+  }),
+  emits: /* @__PURE__ */ $(["item-click"], ["update:selected"]),
+  setup(d, { emit: N }) {
+    const n = d, i = G(d, "selected");
+    k(
+      () => n.items,
+      (t) => {
+        !t.find((o) => o.id === i.value) && t.length && (i.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;
+        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;
+        } else
+          s.value = null, f.value = !0;
+      });
+    };
+    k(() => n.items, T);
+    const { width: z } = j(x);
+    k(z, (t) => {
+      t > 0 && T();
+    });
+    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);
+    };
+    return J(L, (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, {
+        key: e.id
+      }, [
+        s.value === null || c < s.value ? (l(), a("button", {
+          key: 0,
+          class: b(["tr-flow-layout__item", { "icon-only": !e.label }, { selected: e.id === i.value }]),
+          ref_for: !0,
+          ref: (r) => W(r, c),
+          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)
+      ], 64))), 128)),
+      M("div", Z, [
+        f.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))
+        }, [
+          (l(), C(I(n.moreIcon), { class: "tr-flow-layout__item-icon" }))
+        ], 34)),
+        M("div", {
+          class: "tr-flow-layout__dropdown-container",
+          onMouseenter: o[2] || (o[2] = (e) => m(!0)),
+          onMouseleave: o[3] || (o[3] = (e) => m(!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 }]),
+              key: e.id,
+              onClick: (c) => R(e.id)
+            }, [
+              (l(), C(I(e.icon), { class: "tr-flow-layout__item-icon" })),
+              M("span", oe, F(e.label), 1)
+            ], 10, te))), 128))
+          ], 512)) : _("", !0)
+        ], 32)
+      ])
+    ], 512));
+  }
+}), p = /* @__PURE__ */ K(le, [["__scopeId", "data-v-2718a5f2"]]);
+p.name = "TrFlowLayout";
+const ne = function(d) {
+  d.component(p.name, p);
+};
+p.install = ne;
+export {
+  p as default
+};