@opentiny/tiny-robot 0.2.1 → 0.3.0-alpha.0

package/dist/suggestion/index.js

@@ -1,20 +1,20 @@
-import { defineComponent as H, ref as p, computed as P, watch as W, watchEffect as ne, onMounted as Y, onBeforeUnmount as Z, createElementBlock as v, openBlock as g, normalizeClass as j, createElementVNode as u, withDirectives as oe, Fragment as z, renderList as M, createVNode as E, unref as w, toDisplayString as T, vShow as le, nextTick as ie, renderSlot as $, createCommentVNode as N, createBlock as L, normalizeStyle as ae, resolveComponent as ce, withCtx as O } from "vue";
-import { A as Q, a as G, t as re, K as ue, U as ge } from "../tiny-robot-svgs.js";
+import { defineComponent as Q, ref as p, computed as L, watch as K, watchEffect as ne, onMounted as Y, onBeforeUnmount as Z, createElementBlock as v, openBlock as g, normalizeClass as U, createElementVNode as u, withDirectives as oe, Fragment as z, renderList as M, createVNode as E, unref as w, toDisplayString as T, vShow as le, nextTick as ie, renderSlot as $, createCommentVNode as N, createBlock as H, normalizeStyle as ae, resolveComponent as ce, withCtx as O } from "vue";
+import { Q as J, o as F, T as re, H as ue, B as ge } from "../tiny-robot-svgs.js";
 function de(l, c = "") {
   const s = document.createElement("div");
   c && (s.className = c), s.style.visibility = "hidden", s.style.position = "absolute", s.style.whiteSpace = "nowrap", s.textContent = l, document.body.appendChild(s);
   const o = s.offsetWidth;
   return document.body.removeChild(s), o;
 }
-const F = /* @__PURE__ */ new Map();
+const j = /* @__PURE__ */ new Map();
 function X(l, c = "") {
   const s = `${l}::${c}`;
-  if (F.has(s))
-    return F.get(s);
+  if (j.has(s))
+    return j.get(s);
   const o = de(l, c);
-  return F.set(s, o), o;
+  return j.set(s, o), o;
 }
-const ve = { class: "tr-common-suggestions_content" }, me = { class: "tr-common-suggestions_expanded-wrapper" }, pe = { class: "tr-common-suggestions_expanded-area" }, he = ["onClick"], fe = { class: "tr-common-suggestions_item_icon" }, ye = { class: "tr-common-suggestions_item_text" }, _e = { class: "tr-common-suggestions_container" }, ke = ["onClick"], Ce = { class: "tr-common-suggestions_item_icon" }, $e = { class: "tr-common-suggestions_item_text" }, xe = /* @__PURE__ */ H({
+const ve = { class: "tr-common-suggestions_content" }, me = { class: "tr-common-suggestions_expanded-wrapper" }, pe = { class: "tr-common-suggestions_expanded-area" }, he = ["onClick"], fe = { class: "tr-common-suggestions_item_icon" }, ye = { class: "tr-common-suggestions_item_text" }, _e = { class: "tr-common-suggestions_container" }, ke = ["onClick"], Ce = { class: "tr-common-suggestions_item_icon" }, $e = { class: "tr-common-suggestions_item_text" }, xe = /* @__PURE__ */ Q({
   __name: "SuggestionCapsule",
   props: {
     suggestions: {
@@ -28,7 +28,7 @@ const ve = { class: "tr-common-suggestions_content" }, me = { class: "tr-common-
   },
   emits: ["suggestion-click", "show-expand-button"],
   setup(l, { emit: c }) {
-    const s = l, o = c, n = p(null), f = p(!1), t = p(!1), m = p([]), a = p([]), h = p(0), S = p(null), R = P(() => {
+    const s = l, o = c, n = p(null), f = p(!1), t = p(!1), m = p([]), a = p([]), h = p(0), S = p(null), R = L(() => {
       if (h.value <= 0 || a.value.length === 0) return [];
       const i = [], d = [...a.value];
       for (; d.length > 0; )
@@ -52,14 +52,14 @@ const ve = { class: "tr-common-suggestions_content" }, me = { class: "tr-common-
       const q = k / B;
       h.value = Math.max(1, Math.floor(d / q));
       for (let C = 0; C < s.suggestions.length; C++) {
-        const I = s.suggestions[C], A = X(I.text, "tr-common-suggestions_item") + _;
-        r + A <= d ? (r += A, m.value.push(I)) : a.value.push(I);
+        const I = s.suggestions[C], V = X(I.text, "tr-common-suggestions_item") + _;
+        r + V <= d ? (r += V, m.value.push(I)) : a.value.push(I);
       }
       f.value = a.value.length > 0, o("show-expand-button", f.value);
     }, y = (i) => {
       o("suggestion-click", i);
     };
-    return W(
+    return K(
       () => s.isExpanded,
       (i) => {
         t.value = i;
@@ -73,7 +73,7 @@ const ve = { class: "tr-common-suggestions_content" }, me = { class: "tr-common-
     }), Z(() => {
       S.value && S.value.disconnect();
     }), (i, d) => (g(), v("div", {
-      class: j(["tr-common-suggestions", { expanded: t.value }]),
+      class: U(["tr-common-suggestions", { expanded: t.value }]),
       ref_key: "capsuleRef",
       ref: n
     }, [
@@ -90,7 +90,7 @@ const ve = { class: "tr-common-suggestions_content" }, me = { class: "tr-common-
                 onClick: (q) => y(k)
               }, [
                 u("div", fe, [
-                  E(w(Q))
+                  E(w(J))
                 ]),
                 u("div", ye, T(k.text), 1)
               ], 8, he))), 128))
@@ -106,7 +106,7 @@ const ve = { class: "tr-common-suggestions_content" }, me = { class: "tr-common-
             onClick: (k) => y(r)
           }, [
             u("div", Ce, [
-              E(w(Q))
+              E(w(J))
             ]),
             u("div", $e, T(r.text), 1)
           ], 8, ke))), 128))
@@ -117,7 +117,7 @@ const ve = { class: "tr-common-suggestions_content" }, me = { class: "tr-common-
 }), be = { class: "tr-suggestion-categories" }, we = ["onClick"], Se = {
   key: 0,
   class: "category-icon"
-}, Ie = /* @__PURE__ */ H({
+}, Ie = /* @__PURE__ */ Q({
   __name: "CategoryNav",
   props: {
     categories: {
@@ -137,7 +137,7 @@ const ve = { class: "tr-common-suggestions_content" }, me = { class: "tr-common-
     return (n, f) => (g(), v("div", be, [
       (g(!0), v(z, null, M(l.categories, (t) => (g(), v("div", {
         key: t.id,
-        class: j(["tr-suggestion-categories-item", { active: l.activeCategory === t.id }]),
+        class: U(["tr-suggestion-categories-item", { active: l.activeCategory === t.id }]),
         onClick: (m) => o(t.id)
       }, [
         $(n.$slots, "category-label", { category: t }, () => [
@@ -150,7 +150,7 @@ const ve = { class: "tr-common-suggestions_content" }, me = { class: "tr-common-
 });
 function Ee(l, c = {}) {
   const s = p(c.initialIndex || -1);
-  W(l, (t) => {
+  K(l, (t) => {
     t.length > 0 && s.value === -1 ? s.value = 0 : t.length === 0 ? s.value = -1 : s.value >= t.length && (s.value = t.length - 1);
   });
   const o = (t) => {
@@ -189,16 +189,16 @@ function Ee(l, c = {}) {
     }
   };
 }
-const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header" }, De = { class: "tr-suggestion-header-left" }, Oe = { class: "tr-suggestion-header-icon" }, Re = { class: "tr-suggestion-header-title" }, Ae = { class: "close-icon" }, Ke = {
+const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header" }, De = { class: "tr-suggestion-header-left" }, Oe = { class: "tr-suggestion-header-icon" }, Re = { class: "tr-suggestion-header-title" }, Ve = { class: "close-icon" }, We = {
   key: 0,
   class: "tr-suggestion-loading"
-}, Ve = { key: 1 }, We = ["onClick", "onMouseenter"], ze = { class: "item-content" }, Me = { class: "item-label" }, Ne = {
+}, Ae = { key: 1 }, Ke = ["onClick", "onMouseenter"], ze = { class: "item-content" }, Me = { class: "item-label" }, Ne = {
   key: 0,
   class: "item-description"
 }, qe = {
   key: 2,
   class: "tr-suggestion-empty"
-}, Le = /* @__PURE__ */ H({
+}, He = /* @__PURE__ */ Q({
   __name: "SuggestionPanel",
   props: {
     items: {
@@ -228,7 +228,7 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
       initialIndex: 0,
       onClose: () => n("close"),
       onSelect: (i) => n("select", i)
-    }), a = p(o.categories.length > 0 ? o.categories[0].id : ""), h = P(() => {
+    }), a = p(o.categories.length > 0 ? o.categories[0].id : ""), h = L(() => {
       if (o.categories.length === 0 || !a.value)
         return o.items;
       const i = o.categories.find((d) => d.id === a.value);
@@ -251,7 +251,7 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
         u("div", De, [
           u("div", Oe, [
             $(i.$slots, "title-icon", {}, () => [
-              E(w(G), { style: { color: "#1476ff", "font-size": "24px" } })
+              E(w(F), { style: { color: "#1476ff", "font-size": "24px" } })
             ])
           ]),
           u("div", Re, T(l.title), 1)
@@ -260,12 +260,12 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
           class: "tr-suggestion-close-btn",
           onClick: b
         }, [
-          u("span", Ae, [
+          u("span", Ve, [
             E(w(re))
           ])
         ])
       ]),
-      l.categories.length > 0 ? (g(), L(Ie, {
+      l.categories.length > 0 ? (g(), H(Ie, {
         key: 0,
         categories: l.categories,
         "active-category": a.value,
@@ -275,14 +275,14 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
         class: "tr-suggestion-content",
         style: ae({ "max-height": h.value.length > l.maxVisibleItems ? `${l.maxVisibleItems * 56}px` : "auto" })
       }, [
-        l.loading ? (g(), v("div", Ke, [
+        l.loading ? (g(), v("div", We, [
           $(i.$slots, "loading-indicator", {}, () => [
             d[0] || (d[0] = u("div", { class: "tr-suggestion-loading-spinner" }, null, -1))
           ])
-        ])) : h.value.length > 0 ? (g(), v("ul", Ve, [
+        ])) : h.value.length > 0 ? (g(), v("ul", Ae, [
           (g(!0), v(z, null, M(h.value, (r, _) => (g(), v("li", {
             key: r.id,
-            class: j(["tr-suggestion-list-item", { "tr-suggestion-item-active": _ === w(m) }]),
+            class: U(["tr-suggestion-list-item", { "tr-suggestion-item-active": _ === w(m) }]),
             onClick: (k) => R(r),
             onMouseenter: (k) => y(_)
           }, [
@@ -295,7 +295,7 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
                 r.description ? (g(), v("div", Ne, T(r.description), 1)) : N("", !0)
               ])
             ])
-          ], 42, We))), 128))
+          ], 42, Ke))), 128))
         ])) : (g(), v("div", qe, [
           $(i.$slots, "empty", {}, () => [
             d[1] || (d[1] = u("p", null, "无匹配结果", -1))
@@ -304,7 +304,7 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
       ], 4)
     ]));
   }
-}), Pe = (l) => {
+}), Le = (l) => {
   const c = (o) => l.triggerKeys.includes(o);
   return {
     isTriggerKey: c,
@@ -317,7 +317,7 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
       } : null;
     }
   };
-}, Ue = { class: "tr-suggestion__header" }, U = /* @__PURE__ */ H({
+}, Pe = { class: "tr-suggestion__header" }, P = /* @__PURE__ */ Q({
   __name: "index",
   props: {
     triggerKeys: { default: () => ["/"] },
@@ -341,17 +341,17 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
       a.value = !a.value, n("update:expanded", a.value);
     }, R = (e) => {
       h.value = e;
-    }, b = p(""), y = p(-1), i = p(null), d = p(null), r = P(() => o.open !== void 0 ? o.open : f.value), _ = P(() => {
+    }, b = p(""), y = p(-1), i = p(null), d = p(null), r = L(() => o.open !== void 0 ? o.open : f.value), _ = L(() => {
       if (o.categories.length === 0 || !b.value)
         return t.value;
       const e = o.categories.find((x) => x.id === b.value);
       return e ? e.items : [];
     });
-    W(r, (e) => {
+    K(r, (e) => {
       e ? y.value = _.value.length > 0 ? 0 : -1 : y.value = -1;
-    }), W(_, (e) => {
+    }), K(_, (e) => {
       e.length > 0 && y.value === -1 ? y.value = 0 : e.length === 0 ? y.value = -1 : y.value >= e.length && (y.value = e.length - 1);
-    }), W(
+    }), K(
       () => o.categories,
       (e) => {
         e.length > 0 && !b.value && (b.value = e[0].id);
@@ -360,57 +360,57 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
     );
     const k = () => {
       t.value = [...o.items];
-    }, { detectTrigger: B } = Pe(o), q = (e) => {
+    }, { detectTrigger: B } = Le(o), q = (e) => {
       n("suggestion-select", e), n("select", e.value, {
         text: "",
         position: 0
       }), e.template && n("fill-template", e.template);
     }, C = (e) => {
-      e === !1 ? K() : (typeof e == "object" && e !== null && (m.value = {
+      e === !1 ? W() : (typeof e == "object" && e !== null && (m.value = {
         text: e.text || "",
         position: e.position || 0
       }), k(), f.value = !0, n("update:open", !0));
     }, I = (e, x) => {
-      const V = B(e, x);
-      return V ? (m.value = V, C(V), !0) : r.value && x === "" ? (C(!1), !0) : !1;
-    }, A = (e) => {
+      const A = B(e, x);
+      return A ? (m.value = A, C(A), !0) : r.value && x === "" ? (C(!1), !0) : !1;
+    }, V = (e) => {
       if (r.value && d.value) {
         d.value.handleKeyDown(e);
         return;
       }
-    }, K = () => {
+    }, W = () => {
       o.open === void 0 && (f.value = !1), n("update:open", !1), n("close");
     }, ee = (e) => {
       b.value = e.id, y.value = 0, n("category-select", e);
     }, te = (e, x) => {
-      n("select", e.text, x), e.template && n("fill-template", e.template), K();
-    }, J = (e) => {
-      o.closeOnOutsideClick && r.value && i.value && !i.value.contains(e.target) && K();
+      n("select", e.text, x), e.template && n("fill-template", e.template), W();
+    }, G = (e) => {
+      o.closeOnOutsideClick && r.value && i.value && !i.value.contains(e.target) && W();
     }, se = () => {
-      r.value ? K() : (k(), f.value = !0, n("update:open", !0));
+      r.value ? W() : (k(), f.value = !0, n("update:open", !0));
     };
     return Y(() => {
-      o.closeOnOutsideClick && document.addEventListener("click", J);
+      o.closeOnOutsideClick && document.addEventListener("click", G);
     }), Z(() => {
-      o.closeOnOutsideClick && document.removeEventListener("click", J);
+      o.closeOnOutsideClick && document.removeEventListener("click", G);
     }), c({
       trigger: C,
-      keyDown: A,
+      keyDown: V,
       input: I,
       toggleExpand: S
     }), (e, x) => {
-      const V = ce("IconEdit");
+      const A = ce("IconEdit");
       return g(), v("div", {
         ref_key: "rootRef",
         ref: i,
-        class: j(["tr-suggestion", e.className, { "tr-suggestion--dark": e.theme === "dark" }])
+        class: U(["tr-suggestion", e.className, { "tr-suggestion--dark": e.theme === "dark" }])
       }, [
-        u("div", Ue, [
+        u("div", Pe, [
           u("div", {
             class: "tr-suggestion__trigger",
             onClick: se
           }, [
-            E(w(G), { style: { color: "#1476ff" } })
+            E(w(F), { style: { color: "#1476ff" } })
           ]),
           E(xe, {
             suggestions: e.items,
@@ -422,7 +422,7 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
               $(e.$slots, "capsule-icon", {
                 suggestion: D.suggestion
               }, () => [
-                E(V)
+                E(A)
               ])
             ]),
             _: 3
@@ -432,15 +432,15 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
             class: "tr-suggestion__expand-button",
             onClick: S
           }, [
-            a.value ? (g(), L(w(ge), { key: 1 })) : (g(), L(w(ue), { key: 0 }))
+            a.value ? (g(), H(w(ge), { key: 1 })) : (g(), H(w(ue), { key: 0 }))
           ])) : N("", !0)
         ]),
         $(e.$slots, "trigger", {
           onTrigger: C,
-          onKeyDown: A,
+          onKeyDown: V,
           onInput: I
         }),
-        r.value ? (g(), L(Le, {
+        r.value ? (g(), H(He, {
           key: 0,
           ref_key: "panelRef",
           ref: d,
@@ -451,13 +451,13 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
           title: e.title,
           maxVisibleItems: e.maxVisibleItems,
           triggerContext: m.value,
-          onClose: K,
+          onClose: W,
           onSelect: te,
           onCategorySelect: ee
         }, {
           "title-icon": O(() => [
             $(e.$slots, "title-icon", {}, () => [
-              E(w(G), { style: { "font-size": "24px", color: "#1476ff" } })
+              E(w(F), { style: { "font-size": "24px", color: "#1476ff" } })
             ])
           ]),
           "category-label": O((D) => [
@@ -487,11 +487,11 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
     };
   }
 });
-U.name = "TrSuggestion";
-const He = function(l) {
-  l.component(U.name, U);
+P.name = "TrSuggestion";
+const Qe = function(l) {
+  l.component(P.name, P);
 };
-U.install = He;
+P.install = Qe;
 export {
-  U as default
+  P as default
 };

package/dist/suggestion-pills/index.js

@@ -1,89 +1,89 @@
-import { defineComponent as A, useSlots as K, computed as g, createElementBlock as d, openBlock as n, normalizeClass as L, renderSlot as I, createBlock as c, resolveDynamicComponent as z, createCommentVNode as S, toDisplayString as R, unref as v, mergeProps as T, createSlots as U, withCtx as y, createVNode as $, renderList as P, mergeModels as D, ref as E, useModel as F, watch as H, createElementVNode as N, Fragment as V, Transition as j, nextTick as q } from "vue";
-import { K as J, U as O } from "../tiny-robot-svgs.js";
-import { b as Q, w as X } from "../index2.js";
-import Y from "../dropdown-menu/index.js";
-import Z from "../suggestion-popover/index.js";
-import { _ as G } from "../_plugin-vue_export-helper.js";
-const x = { key: 0 }, ee = /* @__PURE__ */ A({
+import { defineComponent as A, useSlots as L, computed as f, createElementBlock as d, openBlock as n, normalizeClass as R, renderSlot as I, createBlock as c, resolveDynamicComponent as N, createCommentVNode as S, toDisplayString as F, unref as g, mergeProps as T, createSlots as j, withCtx as w, createVNode as $, renderList as P, mergeModels as D, useCssVars as q, ref as V, useModel as J, watch as K, createElementVNode as W, Fragment as E, Transition as O, nextTick as Q } from "vue";
+import { H as U, B as X } from "../tiny-robot-svgs.js";
+import { c as Y, w as Z } from "../index2.js";
+import x from "../dropdown-menu/index.js";
+import ee from "../suggestion-popover/index.js";
+import { _ as z } from "../_plugin-vue_export-helper.js";
+const te = { key: 0 }, ne = /* @__PURE__ */ A({
   __name: "PillButton",
   props: {
     item: {}
   },
   setup(a) {
-    const f = a, i = K(), e = g(() => {
+    const k = a, s = L(), e = f(() => {
       var t;
-      return !!(i.icon || (t = f.item) != null && t.icon);
-    }), l = g(() => {
+      return !!(s.icon || (t = k.item) != null && t.icon);
+    }), i = f(() => {
       var t;
-      return !!(i.default || (t = f.item) != null && t.text);
-    }), k = g(() => e.value && !l.value);
+      return !!(s.default || (t = k.item) != null && t.text);
+    }), p = f(() => e.value && !i.value);
     return (t, u) => (n(), d("button", {
-      class: L(["tr-suggestion-pills__item", { "only-icon": k.value }])
+      class: R(["tr-suggestion-pills__item", { "only-icon": p.value }])
     }, [
       I(t.$slots, "icon", {}, () => {
         var o;
         return [
-          (n(), c(z((o = t.item) == null ? void 0 : o.icon), { class: "tr-suggestion-pills__item_icon" }))
+          (n(), c(N((o = t.item) == null ? void 0 : o.icon), { class: "tr-suggestion-pills__item_icon" }))
         ];
       }, !0),
       I(t.$slots, "default", {}, () => {
         var o;
         return [
-          (o = t.item) != null && o.text ? (n(), d("span", x, R(t.item.text), 1)) : S("", !0)
+          (o = t.item) != null && o.text ? (n(), d("span", te, F(t.item.text), 1)) : S("", !0)
         ];
       }, !0)
     ], 2));
   }
-}), m = /* @__PURE__ */ G(ee, [["__scopeId", "data-v-5c113fe1"]]), W = /* @__PURE__ */ A({
+}), m = /* @__PURE__ */ z(ne, [["__scopeId", "data-v-5c113fe1"]]), H = /* @__PURE__ */ A({
   __name: "PillButtonWrapper",
   props: {
     item: {}
   },
   emits: ["click"],
-  setup(a, { emit: f }) {
-    const i = f;
-    return (e, l) => {
-      var k, t, u, o, C, _;
-      return ((k = e.item.action) == null ? void 0 : k.type) === "popover" ? (n(), c(v(Z), T({ key: 0 }, e.item.action.props, {
+  setup(a, { emit: k }) {
+    const s = k;
+    return (e, i) => {
+      var p, t, u, o, h, _;
+      return ((p = e.item.action) == null ? void 0 : p.type) === "popover" ? (n(), c(g(ee), T({ key: 0 }, e.item.action.props, {
         onItemClick: (t = e.item.action.events) == null ? void 0 : t.itemClick,
         onGroupClick: (u = e.item.action.events) == null ? void 0 : u.groupClick,
         onClose: (o = e.item.action.events) == null ? void 0 : o.close
-      }), U({
-        default: y(() => [
+      }), j({
+        default: w(() => [
           $(m, {
             item: e.item,
-            onClick: l[0] || (l[0] = (p) => i("click", e.item))
+            onClick: i[0] || (i[0] = (v) => s("click", e.item))
           }, null, 8, ["item"])
         ]),
         _: 2
       }, [
-        P(e.item.action.slots, (p, B) => ({
-          name: B,
-          fn: y(() => [
-            (n(), c(z(p)))
+        P(e.item.action.slots, (v, C) => ({
+          name: C,
+          fn: w(() => [
+            (n(), c(N(v)))
           ])
         }))
-      ]), 1040, ["onItemClick", "onGroupClick", "onClose"])) : ((C = e.item.action) == null ? void 0 : C.type) === "menu" ? (n(), c(v(Y), T({ key: 1 }, e.item.action.props, {
+      ]), 1040, ["onItemClick", "onGroupClick", "onClose"])) : ((h = e.item.action) == null ? void 0 : h.type) === "menu" ? (n(), c(g(x), T({ key: 1 }, e.item.action.props, {
         onItemClick: (_ = e.item.action.events) == null ? void 0 : _.itemClick
       }), {
-        default: y(() => [
+        default: w(() => [
           $(m, {
             item: e.item,
-            onClick: l[1] || (l[1] = (p) => i("click", e.item))
+            onClick: i[1] || (i[1] = (v) => s("click", e.item))
           }, null, 8, ["item"])
         ]),
         _: 1
       }, 16, ["onItemClick"])) : (n(), c(m, {
         key: 2,
         item: e.item,
-        onClick: l[2] || (l[2] = (p) => i("click", e.item))
+        onClick: i[2] || (i[2] = (v) => s("click", e.item))
       }, null, 8, ["item"]));
     };
   }
-}), te = { class: "tr-suggestion-pills__wrapper" }, ne = { class: "tr-suggestion-pills__more-wrapper" }, oe = {
+}), oe = { class: "tr-suggestion-pills__wrapper" }, ie = { class: "tr-suggestion-pills__more-wrapper" }, le = {
   key: 0,
   class: "tr-suggestion-pills__more"
-}, ie = /* @__PURE__ */ A({
+}, se = /* @__PURE__ */ A({
   __name: "index",
   props: /* @__PURE__ */ D({
     items: {},
@@ -93,57 +93,60 @@ const x = { key: 0 }, ee = /* @__PURE__ */ A({
     showAllModifiers: {}
   }),
   emits: /* @__PURE__ */ D(["item-click"], ["update:showAll"]),
-  setup(a, { emit: f }) {
-    const i = a, e = f, l = E(null), { width: k } = Q(l), t = E(-1), u = g(() => t.value !== -1), o = F(a, "showAll"), C = g(() => !u.value || !o.value ? i.items || [] : (i.items || []).slice(0, t.value)), _ = g(() => !u.value || !o.value ? [] : (i.items || []).slice(t.value)), p = () => {
-      q(() => {
-        const s = l.value;
-        if (!s)
+  setup(a, { emit: k }) {
+    q((l) => ({
+      "8cd74b6e": v.value
+    }));
+    const s = a, e = k, i = V(null), { width: p } = Y(i), t = V(-1), u = f(() => t.value !== -1), o = J(a, "showAll"), h = f(() => !u.value || !o.value ? s.items || [] : (s.items || []).slice(0, t.value)), _ = f(() => !u.value || !o.value ? [] : (s.items || []).slice(t.value)), v = f(() => p.value < i.value.scrollWidth ? "linear-gradient(to right, black 90%, transparent)" : "unset"), C = () => {
+      Q(() => {
+        const l = i.value;
+        if (!l)
           return;
-        const h = Array.from(s.children);
-        t.value = h.findIndex((r) => r.offsetLeft + r.offsetWidth > s.clientWidth);
+        const y = Array.from(l.children);
+        t.value = y.findIndex((r) => r.offsetLeft + r.offsetWidth > l.clientWidth);
       });
     };
-    H(() => {
-      var s;
-      return [i.items, (s = i.items) == null ? void 0 : s.length];
-    }, p), X(
-      k,
-      (s) => {
-        s > 0 && p();
+    K(() => {
+      var l;
+      return [s.items, (l = s.items) == null ? void 0 : l.length];
+    }, C), Z(
+      p,
+      (l) => {
+        l > 0 && C();
       },
       { debounce: 100 }
     );
-    const B = (s, h) => {
-      if (u.value && h >= t.value) {
-        M();
+    const G = (l, y) => {
+      if (u.value && y >= t.value) {
+        b();
         return;
       }
-      e("item-click", s);
-    }, M = () => {
+      e("item-click", l);
+    }, b = () => {
       o.value = !o.value;
     };
-    return (s, h) => (n(), d("div", te, [
-      N("div", {
+    return (l, y) => (n(), d("div", oe, [
+      W("div", {
         class: "tr-suggestion-pills__container",
         ref_key: "containerRef",
-        ref: l
+        ref: i
       }, [
-        I(s.$slots, "default", {}, () => [
-          (n(!0), d(V, null, P(C.value, (r, b) => (n(), c(v(W), {
+        I(l.$slots, "default", {}, () => [
+          (n(!0), d(E, null, P(h.value, (r, M) => (n(), c(g(H), {
             key: r.id,
             item: r,
-            onClick: (re) => B(r, b)
+            onClick: (ce) => G(r, M)
           }, null, 8, ["item", "onClick"]))), 128))
         ], !0)
       ], 512),
-      N("div", ne, [
-        $(j, { name: "tr-suggestion-pills__more" }, {
-          default: y(() => [
-            _.value.length ? (n(), d("div", oe, [
-              (n(!0), d(V, null, P(_.value, (r) => (n(), c(v(W), {
+      W("div", ie, [
+        $(O, { name: "tr-suggestion-pills__more" }, {
+          default: w(() => [
+            _.value.length ? (n(), d("div", le, [
+              (n(!0), d(E, null, P(_.value, (r) => (n(), c(g(H), {
                 key: r.id,
                 item: r,
-                onClick: (b) => e("item-click", r)
+                onClick: (M) => e("item-click", r)
               }, null, 8, ["item", "onClick"]))), 128))
             ])) : S("", !0)
           ]),
@@ -153,25 +156,25 @@ const x = { key: 0 }, ee = /* @__PURE__ */ A({
       u.value ? (n(), d("button", {
         key: 0,
         class: "tr-suggestion-pills__expand",
-        onClick: M
+        onClick: b
       }, [
-        o.value ? (n(), c(v(O), { key: 1 })) : (n(), c(v(J), { key: 0 }))
+        o.value ? (n(), c(g(X), { key: 1 })) : (n(), c(g(U), { key: 0 }))
       ])) : S("", !0)
     ]));
   }
-}), w = /* @__PURE__ */ G(ie, [["__scopeId", "data-v-d1fe030d"]]);
-w.name = "TrSuggestionPills";
-const le = function(a) {
-  a.component(w.name, w);
+}), B = /* @__PURE__ */ z(se, [["__scopeId", "data-v-e03676ad"]]);
+B.name = "TrSuggestionPills";
+const re = function(a) {
+  a.component(B.name, B);
 };
-w.install = le;
+B.install = re;
 m.name = "TrSuggestionPillButton";
-const se = function(a) {
+const ae = function(a) {
   a.component(m.name, m);
 };
-m.install = se;
-const fe = m;
+m.install = ae;
+const ve = m;
 export {
-  fe as SuggestionPillButton,
-  w as default
+  ve as SuggestionPillButton,
+  B as default
 };

package/dist/suggestion-popover/index.js

@@ -1,6 +1,6 @@
 import { defineComponent as m, mergeModels as a, useCssVars as b, unref as B, ref as E, computed as C, useModel as z, watch as V, createElementBlock as w, openBlock as D, Fragment as c, createElementVNode as o, createCommentVNode as k, createVNode as I, renderSlot as s, Transition as W, withCtx as x, normalizeStyle as M, createBlock as J, resolveDynamicComponent as S, toDisplayString as d, renderList as L, createTextVNode as Z } from "vue";
-import { a as K, t as N } from "../tiny-robot-svgs.js";
-import { d as _, c as $, o as AA } from "../index2.js";
+import { o as K, T as N } from "../tiny-robot-svgs.js";
+import { e as _, d as $, o as AA } from "../index2.js";
 import gA from "../flow-layout-buttons/index.js";
 import fA from "../icon-button/index.js";
 import { t } from "../utils.js";