@opentiny/tiny-robot 0.2.1 → 0.2.3

package/dist/suggestion-pills/index.js

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