@opentiny/tiny-robot 0.3.0-alpha.15 → 0.3.0-alpha.16

package/dist/suggestion-pills/index.js

@@ -1,177 +1,201 @@
-import { defineComponent as K, useSlots as Q, computed as a, createElementBlock as m, openBlock as r, normalizeClass as w, renderSlot as H, createBlock as S, resolveDynamicComponent as b, createCommentVNode as M, toDisplayString as ne, mergeModels as N, useModel as le, ref as d, watch as R, nextTick as $, createElementVNode as D, Fragment as z, renderList as G, isVNode as j, createVNode as q, Transition as se, withCtx as re, unref as ae } from "vue";
-import { g as ie } from "../tiny-robot-svgs.js";
-import { e as ce, b as J, f as ue, o as fe, g as de } from "../index3.js";
-import { u as me } from "../useSlotRefs.js";
-import { _ as U } from "../_plugin-vue_export-helper.js";
-const pe = { key: 0 }, ge = /* @__PURE__ */ K({
+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 { l 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(i) {
-    const v = i, _ = Q(), p = a(() => {
+  setup(u) {
+    const g = u, l = H(), e = k(() => {
       var o;
-      return !!(_.icon || (o = v.item) != null && o.icon);
-    }), I = a(() => {
+      return !!(l.icon || (o = g.item) != null && o.icon);
+    }), r = k(() => {
       var o;
-      return !!(_.default || (o = v.item) != null && o.text);
-    }), x = a(() => p.value && !I.value);
-    return (o, u) => (r(), m("button", {
-      class: w(["tr-suggestion-pills__item", { "only-icon": x.value }])
+      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 }])
     }, [
-      H(o.$slots, "icon", {}, () => {
-        var c;
+      $(o.$slots, "icon", {}, () => {
+        var i;
         return [
-          (r(), S(b((c = o.item) == null ? void 0 : c.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),
-      H(o.$slots, "default", {}, () => {
-        var c;
+      $(o.$slots, "default", {}, () => {
+        var i;
         return [
-          (c = o.item) != null && c.text ? (r(), m("span", pe, ne(o.item.text), 1)) : M("", !0)
+          (i = o.item) != null && i.text ? (n(), f("span", oe, j(o.item.text), 1)) : b("", !0)
         ];
       }, !0)
     ], 2));
   }
-}), h = /* @__PURE__ */ U(ge, [["__scopeId", "data-v-5c433c31"]]), he = { class: "tr-suggestion-pills__more-wrapper" }, ve = /* @__PURE__ */ K({
+}), d = /* @__PURE__ */ V(ne, [["__scopeId", "data-v-5c113fe1"]]), L = /* @__PURE__ */ T({
+  __name: "PillButtonWrapper",
+  props: {
+    item: {},
+    style: {}
+  },
+  emits: ["click"],
+  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: r[0] || (r[0] = (a) => l("click", a, e.item))
+          }, null, 8, ["item"])
+        ]),
+        _: 2
+      }, [
+        M(e.item.action.slots, (a, C) => ({
+          name: C,
+          fn: B(() => [
+            (n(), v(N(a)))
+          ])
+        }))
+      ]), 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: B(() => [
+          I(d, {
+            item: e.item,
+            onClick: r[1] || (r[1] = (a) => l("click", a, e.item))
+          }, null, 8, ["item"])
+        ]),
+        _: 1
+      }, 16, ["style", "onItemClick"])) : (n(), v(d, {
+        key: 2,
+        item: e.item,
+        style: O(e.style),
+        onClick: r[2] || (r[2] = (a) => l("click", a, e.item))
+      }, null, 8, ["item", "style"]));
+    };
+  }
+}), le = { class: "tr-suggestion-pills__more-wrapper" }, ie = {
+  key: 0,
+  class: "tr-suggestion-pills__more"
+}, se = /* @__PURE__ */ T({
   __name: "index",
-  props: /* @__PURE__ */ N({
+  props: /* @__PURE__ */ E({
+    items: {},
     showAll: { type: Boolean },
-    showAllButtonOn: { default: "hover" },
-    overflowMode: { default: "expand" },
-    autoScrollOn: {}
+    showAllButtonOn: { default: "hover" }
   }, {
     showAll: { type: Boolean, default: !1 },
     showAllModifiers: {}
   }),
-  emits: /* @__PURE__ */ N(["click-outside"], ["update:showAll"]),
-  setup(i, { expose: v, emit: _ }) {
-    const p = i, I = Q(), x = _, { vnodes: o } = me(I.default, !0), u = le(i, "showAll"), c = d(null), f = d(null), A = d(null), { width: W } = ce(f), C = d(0), B = a(() => p.overflowMode === "expand" && W.value < C.value), g = d(-1), X = a(() => B.value && u.value ? o.value.slice(0, g.value) : o.value), T = a(() => B.value && u.value ? o.value.slice(g.value).map((e, t) => ({
-      vnode: e,
-      index: t + g.value
-    })) : []), E = d([]), P = d([]), V = a(() => E.value.map((e) => J(e)).filter((e) => e instanceof Element)), Y = a(() => P.value.map((e) => J(e)).filter((e) => e instanceof Element)), L = () => {
-      const e = f.value, t = A.value;
-      return Array.from((e == null ? void 0 : e.children) || []).concat(Array.from((t == null ? void 0 : t.children) || []));
-    }, O = () => {
-      $(() => {
-        const e = f.value;
-        if (!e)
+  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 t = L(), n = parseFloat(getComputedStyle(e).rowGap) || 0;
-        g.value = -1;
-        let l = 0;
-        for (let s = 0; s < t.length; s++)
-          if (l += t[s].offsetWidth, s > 0 && (l += n), l > e.clientWidth) {
-            g.value = s;
-            break;
-          }
+        const _ = Array.from(t.children);
+        c.value = _.findIndex((s) => s.offsetLeft + s.offsetWidth > t.clientWidth);
       });
     };
-    R(
+    K(() => {
+      var t;
+      return [l.items, (t = l.items) == null ? void 0 : t.length];
+    }, C), Z(
       o,
-      () => {
-        $(() => {
-          if (!f.value)
-            return;
-          const e = L(), t = parseFloat(getComputedStyle(f.value).rowGap) || 0;
-          C.value = e.reduce((n, l, s) => n + l.offsetWidth + (s > 0 ? t : 0), 0);
-        });
+      (t) => {
+        t > 0 && C();
       },
-      { immediate: !0 }
-    ), R(o, O), ue(W, O, { debounce: 100 });
-    const Z = () => {
-      u.value = !u.value;
-    };
-    fe(c, (e) => {
-      u.value && x("click-outside", e);
-    });
-    const ee = (e) => {
-      const t = f.value;
-      if (!t)
+      { debounce: 100 }
+    );
+    const G = (t, _, s) => {
+      if (i.value && s >= c.value) {
+        t.stopPropagation(), W();
         return;
-      const n = e.offsetLeft, l = n + e.offsetWidth, s = t.scrollLeft, F = t.clientWidth, te = n < s, oe = l > s + F;
-      te ? t.scrollTo({
-        left: n,
-        behavior: "smooth"
-      }) : oe && t.scrollTo({
-        left: l - F,
-        behavior: "smooth"
-      });
-    };
-    let y = null;
-    return R(
-      () => p.autoScrollOn,
-      (e) => {
-        y && (y(), y = null), e && (y = de(V, e, (t) => {
-          t.currentTarget && ee(t.currentTarget);
-        }));
-      },
-      {
-        immediate: !0
       }
-    ), v({
-      children: a(() => V.value.concat(Y.value))
-    }), (e, t) => (r(), m("div", {
+      e("item-click", _);
+    }, W = () => {
+      p.value = !p.value;
+    };
+    return x(r, (t) => {
+      e("click-outside", t);
+    }), (t, _) => (n(), f("div", {
       class: "tr-suggestion-pills__wrapper",
       ref_key: "containerWrapperRef",
-      ref: c
+      ref: r
     }, [
-      D("div", {
-        class: w(["tr-suggestion-pills__container", { "overflow-scroll": p.overflowMode === "scroll" }]),
+      R("div", {
+        class: "tr-suggestion-pills__container",
         ref_key: "containerRef",
-        ref: f
+        ref: m
       }, [
-        (r(!0), m(z, null, G(X.value, (n, l) => (r(), S(b(n), {
-          key: j(n) ? n.key : l,
-          ref_for: !0,
-          ref_key: "staticMaybeItemRefs",
-          ref: E
-        }))), 128))
-      ], 2),
-      D("div", he, [
-        q(se, { name: "tr-suggestion-pills__more" }, {
-          default: re(() => [
-            T.value.length ? (r(), m("div", {
-              key: 0,
-              class: "tr-suggestion-pills__more",
-              ref_key: "floatingItemsRef",
-              ref: A
-            }, [
-              (r(!0), m(z, null, G(T.value, ({ vnode: n, index: l }) => (r(), S(b(n), {
-                key: j(n) ? n.key : l,
-                ref_for: !0,
-                ref_key: "floatingMaybeItemRefs",
-                ref: P
-              }))), 128))
-            ], 512)) : M("", !0)
+        $(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),
+      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))
+            ])) : b("", !0)
           ]),
           _: 1
         })
       ]),
-      B.value ? (r(), m("button", {
+      i.value ? (n(), f("button", {
         key: 0,
-        class: w(["tr-suggestion-pills__expand", { "show-on-hover": p.showAllButtonOn === "hover" }]),
-        onClick: Z
+        class: A(["tr-suggestion-pills__expand", { "show-on-hover": l.showAllButtonOn === "hover" }]),
+        onClick: W
       }, [
-        q(ae(ie), {
-          class: w(["tr-suggestion-pills__expand-icon", { rotate: u.value }])
+        I(h(X), {
+          class: A(["tr-suggestion-pills__expand-icon", { rotate: p.value }])
         }, null, 8, ["class"])
-      ], 2)) : M("", !0)
+      ], 2)) : b("", !0)
     ], 512));
   }
-}), k = /* @__PURE__ */ U(ve, [["__scopeId", "data-v-ebbd7a00"]]);
-k.name = "TrSuggestionPills";
-const _e = function(i) {
-  i.component(k.name, k);
+}), S = /* @__PURE__ */ V(se, [["__scopeId", "data-v-43d06a90"]]);
+S.name = "TrSuggestionPills";
+const re = function(u) {
+  u.component(S.name, S);
 };
-k.install = _e;
-h.name = "TrSuggestionPillButton";
-const ye = function(i) {
-  i.component(h.name, h);
+S.install = re;
+d.name = "TrSuggestionPillButton";
+const ae = function(u) {
+  u.component(d.name, d);
 };
-h.install = ye;
-const Re = h;
+d.install = ae;
+const ve = d;
 export {
-  Re as SuggestionPillButton,
-  k as default
+  ve as SuggestionPillButton,
+  S as default
 };