@opentiny/tiny-robot 0.2.0-alpha.7 → 0.2.0-alpha.9

package/dist/suggestion-pills/index.js

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