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

package/dist/suggestion-pills/index.js

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