@opentiny/tiny-robot 0.3.0-alpha.4 → 0.3.0-alpha.5

package/dist/suggestion-pills/index.js

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