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

package/dist/suggestion/index.js

@@ -1,20 +1,20 @@
-import { defineComponent as U, ref as p, computed as P, watch as K, watchEffect as ne, onMounted as X, onBeforeUnmount as Z, createElementBlock as v, openBlock as g, normalizeClass as Y, createElementVNode as u, withDirectives as oe, Fragment as N, renderList as M, createVNode as E, unref as w, toDisplayString as T, vShow as le, nextTick as ie, renderSlot as $, createCommentVNode as q, createBlock as L, normalizeStyle as ae, resolveComponent as ce, withCtx as O } from "vue";
-import { Y as J, q as F, y as re, T as ue, N as ge } from "../tiny-robot-svgs.js";
+import { defineComponent as H, ref as p, computed as P, watch as W, watchEffect as ne, onMounted as Y, onBeforeUnmount as Z, createElementBlock as v, openBlock as g, normalizeClass as j, createElementVNode as u, withDirectives as oe, Fragment as z, renderList as M, createVNode as E, unref as w, toDisplayString as T, vShow as le, nextTick as ie, renderSlot as $, createCommentVNode as N, createBlock as L, normalizeStyle as ae, resolveComponent as ce, withCtx as O } from "vue";
+import { A as Q, a as G, t as re, K as ue, U as ge } from "../tiny-robot-svgs.js";
 function de(l, c = "") {
   const s = document.createElement("div");
   c && (s.className = c), s.style.visibility = "hidden", s.style.position = "absolute", s.style.whiteSpace = "nowrap", s.textContent = l, document.body.appendChild(s);
   const o = s.offsetWidth;
   return document.body.removeChild(s), o;
 }
-const j = /* @__PURE__ */ new Map();
-function Q(l, c = "") {
+const F = /* @__PURE__ */ new Map();
+function X(l, c = "") {
   const s = `${l}::${c}`;
-  if (j.has(s))
-    return j.get(s);
+  if (F.has(s))
+    return F.get(s);
   const o = de(l, c);
-  return j.set(s, o), o;
+  return F.set(s, o), o;
 }
-const ve = { class: "tr-common-suggestions_content" }, me = { class: "tr-common-suggestions_expanded-wrapper" }, pe = { class: "tr-common-suggestions_expanded-area" }, he = ["onClick"], fe = { class: "tr-common-suggestions_item_icon" }, ye = { class: "tr-common-suggestions_item_text" }, _e = { class: "tr-common-suggestions_container" }, ke = ["onClick"], Ce = { class: "tr-common-suggestions_item_icon" }, $e = { class: "tr-common-suggestions_item_text" }, xe = /* @__PURE__ */ U({
+const ve = { class: "tr-common-suggestions_content" }, me = { class: "tr-common-suggestions_expanded-wrapper" }, pe = { class: "tr-common-suggestions_expanded-area" }, he = ["onClick"], fe = { class: "tr-common-suggestions_item_icon" }, ye = { class: "tr-common-suggestions_item_text" }, _e = { class: "tr-common-suggestions_container" }, ke = ["onClick"], Ce = { class: "tr-common-suggestions_item_icon" }, $e = { class: "tr-common-suggestions_item_text" }, xe = /* @__PURE__ */ H({
   __name: "SuggestionCapsule",
   props: {
     suggestions: {
@@ -46,51 +46,51 @@ const ve = { class: "tr-common-suggestions_content" }, me = { class: "tr-common-
       let k = 0;
       const B = Math.min(3, s.suggestions.length);
       for (let C = 0; C < B; C++) {
-        const I = Q(s.suggestions[C].text, "tr-common-suggestions_item") + _;
+        const I = X(s.suggestions[C].text, "tr-common-suggestions_item") + _;
         k += I;
       }
-      const z = k / B;
-      h.value = Math.max(1, Math.floor(d / z));
+      const q = k / B;
+      h.value = Math.max(1, Math.floor(d / q));
       for (let C = 0; C < s.suggestions.length; C++) {
-        const I = s.suggestions[C], V = Q(I.text, "tr-common-suggestions_item") + _;
-        r + V <= d ? (r += V, m.value.push(I)) : a.value.push(I);
+        const I = s.suggestions[C], A = X(I.text, "tr-common-suggestions_item") + _;
+        r + A <= d ? (r += A, m.value.push(I)) : a.value.push(I);
       }
       f.value = a.value.length > 0, o("show-expand-button", f.value);
     }, y = (i) => {
       o("suggestion-click", i);
     };
-    return K(
+    return W(
       () => s.isExpanded,
       (i) => {
         t.value = i;
       }
     ), ne(() => {
       n.value && s.suggestions.length && b();
-    }), X(() => {
+    }), Y(() => {
       n.value && (S.value = new ResizeObserver(() => {
         b();
       }), S.value.observe(n.value));
     }), Z(() => {
       S.value && S.value.disconnect();
     }), (i, d) => (g(), v("div", {
-      class: Y(["tr-common-suggestions", { expanded: t.value }]),
+      class: j(["tr-common-suggestions", { expanded: t.value }]),
       ref_key: "capsuleRef",
       ref: n
     }, [
       u("div", ve, [
         u("div", me, [
           oe(u("div", pe, [
-            (g(!0), v(N, null, M(R.value, (r, _) => (g(), v("div", {
+            (g(!0), v(z, null, M(R.value, (r, _) => (g(), v("div", {
               key: `row-${_}`,
               class: "tr-common-suggestions_row"
             }, [
-              (g(!0), v(N, null, M(r, (k, B) => (g(), v("div", {
+              (g(!0), v(z, null, M(r, (k, B) => (g(), v("div", {
                 key: `hidden-${k.id}-${B}`,
                 class: "tr-common-suggestions_item",
-                onClick: (z) => y(k)
+                onClick: (q) => y(k)
               }, [
                 u("div", fe, [
-                  E(w(J))
+                  E(w(Q))
                 ]),
                 u("div", ye, T(k.text), 1)
               ], 8, he))), 128))
@@ -100,13 +100,13 @@ const ve = { class: "tr-common-suggestions_content" }, me = { class: "tr-common-
           ])
         ]),
         u("div", _e, [
-          (g(!0), v(N, null, M(m.value, (r, _) => (g(), v("div", {
+          (g(!0), v(z, null, M(m.value, (r, _) => (g(), v("div", {
             key: `visible-${r.id}-${_}`,
             class: "tr-common-suggestions_item",
             onClick: (k) => y(r)
           }, [
             u("div", Ce, [
-              E(w(J))
+              E(w(Q))
             ]),
             u("div", $e, T(r.text), 1)
           ], 8, ke))), 128))
@@ -117,7 +117,7 @@ const ve = { class: "tr-common-suggestions_content" }, me = { class: "tr-common-
 }), be = { class: "tr-suggestion-categories" }, we = ["onClick"], Se = {
   key: 0,
   class: "category-icon"
-}, Ie = /* @__PURE__ */ U({
+}, Ie = /* @__PURE__ */ H({
   __name: "CategoryNav",
   props: {
     categories: {
@@ -135,13 +135,13 @@ const ve = { class: "tr-common-suggestions_content" }, me = { class: "tr-common-
       s("category-select", n);
     };
     return (n, f) => (g(), v("div", be, [
-      (g(!0), v(N, null, M(l.categories, (t) => (g(), v("div", {
+      (g(!0), v(z, null, M(l.categories, (t) => (g(), v("div", {
         key: t.id,
-        class: Y(["tr-suggestion-categories-item", { active: l.activeCategory === t.id }]),
+        class: j(["tr-suggestion-categories-item", { active: l.activeCategory === t.id }]),
         onClick: (m) => o(t.id)
       }, [
         $(n.$slots, "category-label", { category: t }, () => [
-          t.icon ? (g(), v("div", Se, T(t.icon), 1)) : q("", !0),
+          t.icon ? (g(), v("div", Se, T(t.icon), 1)) : N("", !0),
           u("span", null, T(t.label), 1)
         ])
       ], 10, we))), 128))
@@ -150,7 +150,7 @@ const ve = { class: "tr-common-suggestions_content" }, me = { class: "tr-common-
 });
 function Ee(l, c = {}) {
   const s = p(c.initialIndex || -1);
-  K(l, (t) => {
+  W(l, (t) => {
     t.length > 0 && s.value === -1 ? s.value = 0 : t.length === 0 ? s.value = -1 : s.value >= t.length && (s.value = t.length - 1);
   });
   const o = (t) => {
@@ -189,16 +189,16 @@ function Ee(l, c = {}) {
     }
   };
 }
-const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header" }, De = { class: "tr-suggestion-header-left" }, Oe = { class: "tr-suggestion-header-icon" }, Re = { class: "tr-suggestion-header-title" }, Ve = { class: "close-icon" }, We = {
+const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header" }, De = { class: "tr-suggestion-header-left" }, Oe = { class: "tr-suggestion-header-icon" }, Re = { class: "tr-suggestion-header-title" }, Ae = { class: "close-icon" }, Ke = {
   key: 0,
   class: "tr-suggestion-loading"
-}, Ae = { key: 1 }, Ke = ["onClick", "onMouseenter"], Ne = { class: "item-content" }, Me = { class: "item-label" }, qe = {
+}, Ve = { key: 1 }, We = ["onClick", "onMouseenter"], ze = { class: "item-content" }, Me = { class: "item-label" }, Ne = {
   key: 0,
   class: "item-description"
-}, ze = {
+}, qe = {
   key: 2,
   class: "tr-suggestion-empty"
-}, Le = /* @__PURE__ */ U({
+}, Le = /* @__PURE__ */ H({
   __name: "SuggestionPanel",
   props: {
     items: {
@@ -251,7 +251,7 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
         u("div", De, [
           u("div", Oe, [
             $(i.$slots, "title-icon", {}, () => [
-              E(w(F))
+              E(w(G), { style: { color: "#1476ff", "font-size": "24px" } })
             ])
           ]),
           u("div", Re, T(l.title), 1)
@@ -260,7 +260,7 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
           class: "tr-suggestion-close-btn",
           onClick: b
         }, [
-          u("span", Ve, [
+          u("span", Ae, [
             E(w(re))
           ])
         ])
@@ -270,19 +270,19 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
         categories: l.categories,
         "active-category": a.value,
         onCategorySelect: S
-      }, null, 8, ["categories", "active-category"])) : q("", !0),
+      }, null, 8, ["categories", "active-category"])) : N("", !0),
       u("div", {
         class: "tr-suggestion-content",
         style: ae({ "max-height": h.value.length > l.maxVisibleItems ? `${l.maxVisibleItems * 56}px` : "auto" })
       }, [
-        l.loading ? (g(), v("div", We, [
+        l.loading ? (g(), v("div", Ke, [
           $(i.$slots, "loading-indicator", {}, () => [
             d[0] || (d[0] = u("div", { class: "tr-suggestion-loading-spinner" }, null, -1))
           ])
-        ])) : h.value.length > 0 ? (g(), v("ul", Ae, [
-          (g(!0), v(N, null, M(h.value, (r, _) => (g(), v("li", {
+        ])) : h.value.length > 0 ? (g(), v("ul", Ve, [
+          (g(!0), v(z, null, M(h.value, (r, _) => (g(), v("li", {
             key: r.id,
-            class: Y(["tr-suggestion-list-item", { "tr-suggestion-item-active": _ === w(m) }]),
+            class: j(["tr-suggestion-list-item", { "tr-suggestion-item-active": _ === w(m) }]),
             onClick: (k) => R(r),
             onMouseenter: (k) => y(_)
           }, [
@@ -290,13 +290,13 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
               item: r,
               active: _ === w(m)
             }, () => [
-              u("div", Ne, [
+              u("div", ze, [
                 u("div", Me, T(r.text), 1),
-                r.description ? (g(), v("div", qe, T(r.description), 1)) : q("", !0)
+                r.description ? (g(), v("div", Ne, T(r.description), 1)) : N("", !0)
               ])
             ])
-          ], 42, Ke))), 128))
-        ])) : (g(), v("div", ze, [
+          ], 42, We))), 128))
+        ])) : (g(), v("div", qe, [
           $(i.$slots, "empty", {}, () => [
             d[1] || (d[1] = u("p", null, "无匹配结果", -1))
           ])
@@ -317,7 +317,7 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
       } : null;
     }
   };
-}, He = { class: "tr-suggestion__header" }, H = /* @__PURE__ */ U({
+}, Ue = { class: "tr-suggestion__header" }, U = /* @__PURE__ */ H({
   __name: "index",
   props: {
     triggerKeys: { default: () => ["/"] },
@@ -347,11 +347,11 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
       const e = o.categories.find((x) => x.id === b.value);
       return e ? e.items : [];
     });
-    K(r, (e) => {
+    W(r, (e) => {
       e ? y.value = _.value.length > 0 ? 0 : -1 : y.value = -1;
-    }), K(_, (e) => {
+    }), W(_, (e) => {
       e.length > 0 && y.value === -1 ? y.value = 0 : e.length === 0 ? y.value = -1 : y.value >= e.length && (y.value = e.length - 1);
-    }), K(
+    }), W(
       () => o.categories,
       (e) => {
         e.length > 0 && !b.value && (b.value = e[0].id);
@@ -360,69 +360,69 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
     );
     const k = () => {
       t.value = [...o.items];
-    }, { detectTrigger: B } = Pe(o), z = (e) => {
+    }, { detectTrigger: B } = Pe(o), q = (e) => {
       n("suggestion-select", e), n("select", e.value, {
         text: "",
         position: 0
       }), e.template && n("fill-template", e.template);
     }, C = (e) => {
-      e === !1 ? W() : (typeof e == "object" && e !== null && (m.value = {
+      e === !1 ? K() : (typeof e == "object" && e !== null && (m.value = {
         text: e.text || "",
         position: e.position || 0
       }), k(), f.value = !0, n("update:open", !0));
     }, I = (e, x) => {
-      const A = B(e, x);
-      return A ? (m.value = A, C(A), !0) : r.value && x === "" ? (C(!1), !0) : !1;
-    }, V = (e) => {
+      const V = B(e, x);
+      return V ? (m.value = V, C(V), !0) : r.value && x === "" ? (C(!1), !0) : !1;
+    }, A = (e) => {
       if (r.value && d.value) {
         d.value.handleKeyDown(e);
         return;
       }
-    }, W = () => {
+    }, K = () => {
       o.open === void 0 && (f.value = !1), n("update:open", !1), n("close");
     }, ee = (e) => {
       b.value = e.id, y.value = 0, n("category-select", e);
     }, te = (e, x) => {
-      n("select", e.text, x), e.template && n("fill-template", e.template), W();
-    }, G = (e) => {
-      o.closeOnOutsideClick && r.value && i.value && !i.value.contains(e.target) && W();
+      n("select", e.text, x), e.template && n("fill-template", e.template), K();
+    }, J = (e) => {
+      o.closeOnOutsideClick && r.value && i.value && !i.value.contains(e.target) && K();
     }, se = () => {
-      r.value ? W() : (k(), f.value = !0, n("update:open", !0));
+      r.value ? K() : (k(), f.value = !0, n("update:open", !0));
     };
-    return X(() => {
-      o.closeOnOutsideClick && document.addEventListener("click", G);
+    return Y(() => {
+      o.closeOnOutsideClick && document.addEventListener("click", J);
     }), Z(() => {
-      o.closeOnOutsideClick && document.removeEventListener("click", G);
+      o.closeOnOutsideClick && document.removeEventListener("click", J);
     }), c({
       trigger: C,
-      keyDown: V,
+      keyDown: A,
       input: I,
       toggleExpand: S
     }), (e, x) => {
-      const A = ce("IconEdit");
+      const V = ce("IconEdit");
       return g(), v("div", {
         ref_key: "rootRef",
         ref: i,
-        class: Y(["tr-suggestion", e.className, { "tr-suggestion--dark": e.theme === "dark" }])
+        class: j(["tr-suggestion", e.className, { "tr-suggestion--dark": e.theme === "dark" }])
       }, [
-        u("div", He, [
+        u("div", Ue, [
           u("div", {
             class: "tr-suggestion__trigger",
             onClick: se
           }, [
-            E(w(F))
+            E(w(G), { style: { color: "#1476ff" } })
           ]),
           E(xe, {
             suggestions: e.items,
             isExpanded: a.value,
-            onSuggestionClick: z,
+            onSuggestionClick: q,
             onShowExpandButton: R
           }, {
             "suggestion-icon": O((D) => [
               $(e.$slots, "capsule-icon", {
                 suggestion: D.suggestion
               }, () => [
-                E(A)
+                E(V)
               ])
             ]),
             _: 3
@@ -433,11 +433,11 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
             onClick: S
           }, [
             a.value ? (g(), L(w(ge), { key: 1 })) : (g(), L(w(ue), { key: 0 }))
-          ])) : q("", !0)
+          ])) : N("", !0)
         ]),
         $(e.$slots, "trigger", {
           onTrigger: C,
-          onKeyDown: V,
+          onKeyDown: A,
           onInput: I
         }),
         r.value ? (g(), L(Le, {
@@ -451,13 +451,13 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
           title: e.title,
           maxVisibleItems: e.maxVisibleItems,
           triggerContext: m.value,
-          onClose: W,
+          onClose: K,
           onSelect: te,
           onCategorySelect: ee
         }, {
           "title-icon": O(() => [
             $(e.$slots, "title-icon", {}, () => [
-              E(w(F), { style: { "font-size": "36px" } })
+              E(w(G), { style: { "font-size": "24px", color: "#1476ff" } })
             ])
           ]),
           "category-label": O((D) => [
@@ -482,16 +482,16 @@ const Te = { class: "tr-suggestion-panel" }, Be = { class: "tr-suggestion-header
             ])
           ]),
           _: 3
-        }, 8, ["items", "categories", "loading", "title", "maxVisibleItems", "triggerContext"])) : q("", !0)
+        }, 8, ["items", "categories", "loading", "title", "maxVisibleItems", "triggerContext"])) : N("", !0)
       ], 2);
     };
   }
 });
-H.name = "TrSuggestion";
-const Ue = function(l) {
-  l.component(H.name, H);
+U.name = "TrSuggestion";
+const He = function(l) {
+  l.component(U.name, U);
 };
-H.install = Ue;
+U.install = He;
 export {
-  H as default
+  U as default
 };

package/dist/suggestion-pills/index.js

@@ -0,0 +1,119 @@
+import { defineComponent as D, useSlots as N, computed as f, 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, useTemplateRef as L, Fragment as $, renderList as b, unref as r, mergeProps as x, createSlots as M, withCtx as C, createVNode as T } 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__ */ D({
+  __name: "PillButton",
+  props: {
+    item: {}
+  },
+  setup(s) {
+    const u = s, p = N(), i = f(() => {
+      var e;
+      return !!(p.icon || (e = u.item) != null && e.icon);
+    }), _ = f(() => {
+      var e;
+      return !!(p.default || (e = u.item) != null && e.text);
+    }), m = f(() => i.value && !_.value);
+    return (e, g) => (n(), a("button", {
+      class: R(["tr-suggestion-pills__item", { "only-icon": m.value }])
+    }, [
+      v(e.$slots, "icon", {}, () => {
+        var l;
+        return [
+          (n(), c(V((l = e.item) == null ? void 0 : l.icon), { class: "tr-suggestion-pills__item_icon" }))
+        ];
+      }, !0),
+      v(e.$slots, "default", {}, () => {
+        var l;
+        return [
+          (l = e.item) != null && l.text ? (n(), a("span", H, E(e.item.text), 1)) : z("", !0)
+        ];
+      }, !0)
+    ], 2));
+  }
+}), o = /* @__PURE__ */ w(J, [["__scopeId", "data-v-8df2df8c"]]), K = {
+  class: "tr-suggestion-pills__container",
+  ref: "container"
+}, O = /* @__PURE__ */ D({
+  __name: "index",
+  props: {
+    items: {}
+  },
+  emits: ["item-click"],
+  setup(s, { emit: u }) {
+    F((g) => ({
+      50209574: e.value
+    }));
+    const p = s, i = u, _ = L("container"), { arrivedState: m } = j(_), e = f(() => m.left ? "linear-gradient(to right, black 95%, transparent)" : m.right ? "linear-gradient(to left, black 95%, transparent)" : "linear-gradient(to right, transparent, black 5%, black 95%, transparent)");
+    return (g, l) => (n(), a("div", K, [
+      v(g.$slots, "default", {}, () => [
+        (n(!0), a($, null, b(p.items, (t) => {
+          var h, y, S, B, I, P;
+          return n(), a($, {
+            key: t.id
+          }, [
+            ((h = t.action) == null ? void 0 : h.type) === "popover" ? (n(), c(r(A), x({
+              key: 0,
+              class: "shrink",
+              ref_for: !0
+            }, t.action.props, {
+              onItemClick: (y = t.action.events) == null ? void 0 : y.itemClick,
+              onGroupClick: (S = t.action.events) == null ? void 0 : S.groupClick,
+              onClose: (B = t.action.events) == null ? void 0 : B.close
+            }), M({
+              default: C(() => [
+                T(r(o), {
+                  item: t,
+                  onClick: (k) => i("item-click", t)
+                }, null, 8, ["item", "onClick"])
+              ]),
+              _: 2
+            }, [
+              b(t.action.slots, (k, G) => ({
+                name: G,
+                fn: C(() => [
+                  (n(), c(V(k)))
+                ])
+              }))
+            ]), 1040, ["onItemClick", "onGroupClick", "onClose"])) : ((I = t.action) == null ? void 0 : I.type) === "menu" ? (n(), c(r(q), x({
+              key: 1,
+              class: "shrink",
+              ref_for: !0
+            }, t.action.props, {
+              onItemClick: (P = t.action.events) == null ? void 0 : P.itemClick
+            }), {
+              default: C(() => [
+                T(r(o), {
+                  item: t,
+                  onClick: (k) => i("item-click", t)
+                }, null, 8, ["item", "onClick"])
+              ]),
+              _: 2
+            }, 1040, ["onItemClick"])) : (n(), c(r(o), {
+              key: 2,
+              item: t,
+              onClick: (k) => i("item-click", t)
+            }, null, 8, ["item", "onClick"]))
+          ], 64);
+        }), 128))
+      ], !0)
+    ], 512));
+  }
+}), d = /* @__PURE__ */ w(O, [["__scopeId", "data-v-81c8f508"]]);
+d.name = "TrSuggestionPills";
+const Q = function(s) {
+  s.component(d.name, d);
+};
+d.install = Q;
+o.name = "TrSuggestionPillButton";
+const U = function(s) {
+  s.component(o.name, o);
+};
+o.install = U;
+const et = o;
+export {
+  et as SuggestionPillButton,
+  d as default
+};