@opentiny/tiny-robot 0.2.0-alpha.6 → 0.2.0-alpha.8

package/dist/suggestion-pills/index.js

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