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

package/dist/suggestion-pills/index.js

@@ -1,201 +1,168 @@
-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({
+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({
   __name: "PillButton",
   props: {
     item: {}
   },
-  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 }])
+  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 }])
     }, [
-      $(o.$slots, "icon", {}, () => {
-        var i;
+      H(t.$slots, "icon", {}, () => {
+        var c;
         return [
-          (n(), v(N((i = o.item) == null ? void 0 : i.icon), { class: "tr-suggestion-pills__item_icon" }))
+          (r(), x(R((c = t.item) == null ? void 0 : c.icon), { class: "tr-suggestion-pills__item_icon" }))
         ];
       }, !0),
-      $(o.$slots, "default", {}, () => {
-        var i;
+      H(t.$slots, "default", {}, () => {
+        var c;
         return [
-          (i = o.item) != null && i.text ? (n(), f("span", oe, j(o.item.text), 1)) : b("", !0)
+          (c = t.item) != null && c.text ? (r(), m("span", me, oe(t.item.text), 1)) : S("", !0)
         ];
       }, !0)
     ], 2));
   }
-}), 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({
+}), g = /* @__PURE__ */ Q(pe, [["__scopeId", "data-v-5c433c31"]]), ve = { class: "tr-suggestion-pills__more-wrapper" }, ge = /* @__PURE__ */ q({
   __name: "index",
-  props: /* @__PURE__ */ E({
-    items: {},
+  props: /* @__PURE__ */ O({
     showAll: { type: Boolean },
-    showAllButtonOn: { default: "hover" }
+    showAllButtonOn: { default: "hover" },
+    overflowMode: { default: "expand" },
+    autoScrollOnHover: { type: Boolean }
   }, {
     showAll: { type: Boolean, default: !1 },
     showAllModifiers: {}
   }),
-  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)
+  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;
+        if (!e)
           return;
-        const _ = Array.from(t.children);
-        c.value = _.findIndex((s) => s.offsetLeft + s.offsetWidth > t.clientWidth);
+        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;
+            break;
+          }
       });
     };
-    K(() => {
-      var t;
-      return [l.items, (t = l.items) == null ? void 0 : t.length];
-    }, C), Z(
-      o,
-      (t) => {
-        t > 0 && C();
+    F(
+      t,
+      () => {
+        N(() => {
+          if (!f.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);
+        });
       },
-      { debounce: 100 }
-    );
-    const G = (t, _, s) => {
-      if (i.value && s >= c.value) {
-        t.stopPropagation(), W();
+      { immediate: !0 }
+    ), F(t, V), ce(M, V, { debounce: 100 });
+    const Y = () => {
+      u.value = !u.value;
+    };
+    ue(c, (e) => {
+      u.value && I("click-outside", e);
+    });
+    const Z = (e) => {
+      const o = f.value;
+      if (!o)
         return;
-      }
-      e("item-click", _);
-    }, W = () => {
-      p.value = !p.value;
+      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,
+        behavior: "smooth"
+      }) : te && o.scrollTo({
+        left: l - L,
+        behavior: "smooth"
+      });
     };
-    return x(r, (t) => {
-      e("click-outside", t);
-    }), (t, _) => (n(), f("div", {
+    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", {
       class: "tr-suggestion-pills__wrapper",
       ref_key: "containerWrapperRef",
-      ref: r
+      ref: c
     }, [
-      R("div", {
-        class: "tr-suggestion-pills__container",
+      $("div", {
+        class: y(["tr-suggestion-pills__container", { "overflow-scroll": p.overflowMode === "scroll" }]),
         ref_key: "containerRef",
-        ref: m
+        ref: f
       }, [
-        $(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)
+        (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))
+      ], 2),
+      $("div", ve, [
+        K(le, { name: "tr-suggestion-pills__more" }, {
+          default: se(() => [
+            W.value.length ? (r(), m("div", {
+              key: 0,
+              class: "tr-suggestion-pills__more",
+              ref_key: "floatingItemsRef",
+              ref: b
+            }, [
+              (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)
           ]),
           _: 1
         })
       ]),
-      i.value ? (n(), f("button", {
+      B.value ? (r(), m("button", {
         key: 0,
-        class: A(["tr-suggestion-pills__expand", { "show-on-hover": l.showAllButtonOn === "hover" }]),
-        onClick: W
+        class: y(["tr-suggestion-pills__expand", { "show-on-hover": p.showAllButtonOn === "hover" }]),
+        onClick: Y
       }, [
-        I(h(X), {
-          class: A(["tr-suggestion-pills__expand-icon", { rotate: p.value }])
+        K(re(ae), {
+          class: y(["tr-suggestion-pills__expand-icon", { rotate: u.value }])
         }, null, 8, ["class"])
-      ], 2)) : b("", !0)
+      ], 2)) : S("", !0)
     ], 512));
   }
-}), S = /* @__PURE__ */ V(se, [["__scopeId", "data-v-43d06a90"]]);
-S.name = "TrSuggestionPills";
-const re = function(u) {
-  u.component(S.name, S);
+}), w = /* @__PURE__ */ Q(ge, [["__scopeId", "data-v-ffbab62d"]]);
+w.name = "TrSuggestionPills";
+const he = function(i) {
+  i.component(w.name, w);
 };
-S.install = re;
-d.name = "TrSuggestionPillButton";
-const ae = function(u) {
-  u.component(d.name, d);
+w.install = he;
+g.name = "TrSuggestionPillButton";
+const _e = function(i) {
+  i.component(g.name, g);
 };
-d.install = ae;
-const ve = d;
+g.install = _e;
+const xe = g;
 export {
-  ve as SuggestionPillButton,
-  S as default
+  xe as SuggestionPillButton,
+  w as default
 };