@opentiny/tiny-robot 0.2.0-alpha.1 → 0.2.0-alpha.3

package/dist/suggestion/index.js

@@ -0,0 +1,497 @@
+import { defineComponent as Q, 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 U, createElementVNode as u, withDirectives as oe, Fragment as M, renderList as N, createVNode as E, unref as w, toDisplayString as T, vShow as le, nextTick as ie, renderSlot as x, createCommentVNode as z, createBlock as L, normalizeStyle as ae, resolveComponent as ce, withCtx as O } from "vue";
+import { Y as G, Q as j, T as re, D as ue, x 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 Y = /* @__PURE__ */ new Map();
+function J(l, c = "") {
+  const s = `${l}::${c}`;
+  if (Y.has(s))
+    return Y.get(s);
+  const o = de(l, c);
+  return Y.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" }, xe = { class: "tr-common-suggestions_item_text" }, $e = /* @__PURE__ */ Q({
+  __name: "SuggestionCapsule",
+  props: {
+    suggestions: {
+      type: Array,
+      required: !0
+    },
+    isExpanded: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["suggestion-click", "show-expand-button"],
+  setup(l, { emit: c }) {
+    const s = l, o = c, n = p(null), f = p(!1), t = p(!1), m = p([]), a = p([]), h = p(0), S = p(null), R = P(() => {
+      if (h.value <= 0 || a.value.length === 0) return [];
+      const i = [], d = [...a.value];
+      for (; d.length > 0; )
+        i.push(d.splice(0, h.value));
+      return i.reverse();
+    }), b = async () => {
+      if (await ie(), !n.value || s.suggestions.length === 0) {
+        f.value = !1, o("show-expand-button", !1);
+        return;
+      }
+      const d = n.value.clientWidth;
+      m.value = [], a.value = [];
+      let r = 0;
+      const _ = 8;
+      let k = 0;
+      const B = Math.min(3, s.suggestions.length);
+      for (let C = 0; C < B; C++) {
+        const I = J(s.suggestions[C].text, "tr-common-suggestions_item") + _;
+        k += I;
+      }
+      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 = J(I.text, "tr-common-suggestions_item") + _;
+        r + V <= d ? (r += V, 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(
+      () => s.isExpanded,
+      (i) => {
+        t.value = i;
+      }
+    ), ne(() => {
+      n.value && s.suggestions.length && b();
+    }), X(() => {
+      n.value && (S.value = new ResizeObserver(() => {
+        b();
+      }), S.value.observe(n.value));
+    }), Z(() => {
+      S.value && S.value.disconnect();
+    }), (i, d) => (g(), v("div", {
+      class: U(["tr-common-suggestions", { expanded: t.value }]),
+      ref_key: "capsuleRef",
+      ref: n
+    }, [
+      u("div", ve, [
+        u("div", me, [
+          oe(u("div", pe, [
+            (g(!0), v(M, null, N(R.value, (r, _) => (g(), v("div", {
+              key: `row-${_}`,
+              class: "tr-common-suggestions_row"
+            }, [
+              (g(!0), v(M, null, N(r, (k, B) => (g(), v("div", {
+                key: `hidden-${k.id}-${B}`,
+                class: "tr-common-suggestions_item",
+                onClick: (q) => y(k)
+              }, [
+                u("div", fe, [
+                  E(w(G))
+                ]),
+                u("div", ye, T(k.text), 1)
+              ], 8, he))), 128))
+            ]))), 128))
+          ], 512), [
+            [le, t.value && a.value.length > 0]
+          ])
+        ]),
+        u("div", _e, [
+          (g(!0), v(M, null, N(m.value, (r, _) => (g(), v("div", {
+            key: `visible-${r.id}-${_}`,
+            class: "tr-common-suggestions_item",
+            onClick: (k) => y(r)
+          }, [
+            u("div", Ce, [
+              E(w(G))
+            ]),
+            u("div", xe, T(r.text), 1)
+          ], 8, ke))), 128))
+        ])
+      ])
+    ], 2));
+  }
+}), be = { class: "tr-suggestion-categories" }, we = ["onClick"], Se = {
+  key: 0,
+  class: "category-icon"
+}, Ie = /* @__PURE__ */ Q({
+  __name: "CategoryNav",
+  props: {
+    categories: {
+      type: Array,
+      required: !0
+    },
+    activeCategory: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["category-select"],
+  setup(l, { emit: c }) {
+    const s = c, o = (n) => {
+      s("category-select", n);
+    };
+    return (n, f) => (g(), v("div", be, [
+      (g(!0), v(M, null, N(l.categories, (t) => (g(), v("div", {
+        key: t.id,
+        class: U(["tr-suggestion-categories-item", { active: l.activeCategory === t.id }]),
+        onClick: (m) => o(t.id)
+      }, [
+        x(n.$slots, "category-label", { category: t }, () => [
+          t.icon ? (g(), v("div", Se, T(t.icon), 1)) : z("", !0),
+          u("span", null, T(t.label), 1)
+        ])
+      ], 10, we))), 128))
+    ]));
+  }
+});
+function Ee(l, c = {}) {
+  const s = p(c.initialIndex || -1);
+  K(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) => {
+    var m, a;
+    if (l.value.length !== 0)
+      switch (t.key) {
+        case "ArrowUp":
+          t.preventDefault(), s.value = (s.value - 1 + l.value.length) % l.value.length, n();
+          break;
+        case "ArrowDown":
+          t.preventDefault(), s.value = (s.value + 1) % l.value.length, n();
+          break;
+        case "Enter":
+        case "Tab":
+          t.preventDefault(), s.value >= 0 && s.value < l.value.length && ((m = c.onSelect) == null || m.call(c, l.value[s.value]));
+          break;
+        case "Escape":
+          t.preventDefault(), (a = c.onClose) == null || a.call(c);
+          break;
+      }
+  }, n = () => {
+    setTimeout(() => {
+      const t = document.querySelector(`.tr-suggestion-list-item:nth-child(${s.value + 1})`), m = t == null ? void 0 : t.closest(".tr-suggestion-content");
+      if (t && m) {
+        const a = m.getBoundingClientRect(), h = t.getBoundingClientRect();
+        h.bottom > a.bottom ? m.scrollTop += h.bottom - a.bottom : h.top < a.top && (m.scrollTop -= a.top - h.top);
+      }
+    }, 0);
+  };
+  return {
+    activeIndex: s,
+    handleKeyDown: o,
+    scrollToActive: n,
+    setActiveIndex: (t) => {
+      t >= -1 && t < l.value.length && (s.value = t);
+    }
+  };
+}
+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 = {
+  key: 0,
+  class: "tr-suggestion-loading"
+}, Ae = { key: 1 }, Ke = ["onClick", "onMouseenter"], Me = { class: "item-content" }, Ne = { class: "item-label" }, ze = {
+  key: 0,
+  class: "item-description"
+}, qe = {
+  key: 2,
+  class: "tr-suggestion-empty"
+}, Le = /* @__PURE__ */ Q({
+  __name: "SuggestionPanel",
+  props: {
+    items: {
+      type: Array,
+      required: !0
+    },
+    categories: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    title: {
+      type: String,
+      default: "指令"
+    },
+    maxVisibleItems: {
+      type: Number,
+      default: 5
+    }
+  },
+  emits: ["close", "select", "category-select", "item-hover"],
+  setup(l, { expose: c, emit: s }) {
+    const o = l, n = s, f = p(o.items), { handleKeyDown: t, activeIndex: m } = Ee(f, {
+      initialIndex: 0,
+      onClose: () => n("close"),
+      onSelect: (i) => n("select", i)
+    }), a = p(o.categories.length > 0 ? o.categories[0].id : ""), h = P(() => {
+      if (o.categories.length === 0 || !a.value)
+        return o.items;
+      const i = o.categories.find((d) => d.id === a.value);
+      return i ? i.items : [];
+    }), S = (i) => {
+      a.value = i;
+      const d = o.categories.find((r) => r.id === i);
+      d && n("category-select", d);
+    }, R = (i) => {
+      n("select", i);
+    }, b = () => {
+      n("close");
+    }, y = (i) => {
+      n("item-hover", i);
+    };
+    return c({
+      handleKeyDown: t
+    }), (i, d) => (g(), v("div", Te, [
+      u("div", Be, [
+        u("div", De, [
+          u("div", Oe, [
+            x(i.$slots, "title-icon", {}, () => [
+              E(w(j))
+            ])
+          ]),
+          u("div", Re, T(l.title), 1)
+        ]),
+        u("span", {
+          class: "tr-suggestion-close-btn",
+          onClick: b
+        }, [
+          u("span", Ve, [
+            E(w(re))
+          ])
+        ])
+      ]),
+      l.categories.length > 0 ? (g(), L(Ie, {
+        key: 0,
+        categories: l.categories,
+        "active-category": a.value,
+        onCategorySelect: S
+      }, null, 8, ["categories", "active-category"])) : z("", !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, [
+          x(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(M, null, N(h.value, (r, _) => (g(), v("li", {
+            key: r.id,
+            class: U(["tr-suggestion-list-item", { "tr-suggestion-item-active": _ === w(m) }]),
+            onClick: (k) => R(r),
+            onMouseenter: (k) => y(_)
+          }, [
+            x(i.$slots, "item", {
+              item: r,
+              active: _ === w(m)
+            }, () => [
+              u("div", Me, [
+                u("div", Ne, T(r.text), 1),
+                r.description ? (g(), v("div", ze, T(r.description), 1)) : z("", !0)
+              ])
+            ])
+          ], 42, Ke))), 128))
+        ])) : (g(), v("div", qe, [
+          x(i.$slots, "empty", {}, () => [
+            d[1] || (d[1] = u("p", null, "无匹配结果", -1))
+          ])
+        ]))
+      ], 4)
+    ]));
+  }
+}), Pe = (l) => {
+  const c = (o) => l.triggerKeys.includes(o);
+  return {
+    isTriggerKey: c,
+    detectTrigger: (o, n) => {
+      const t = o.target.selectionStart || 0;
+      return t > 0 && c(n[t - 1]) && (t === 1 || n[t - 2] === " " || n[t - 2] === `
+`) ? {
+        text: n[t - 1],
+        position: t - 1
+      } : null;
+    }
+  };
+}, He = { class: "tr-suggestion__header" }, H = /* @__PURE__ */ Q({
+  __name: "index",
+  props: {
+    triggerKeys: { default: () => ["/"] },
+    items: { default: () => [] },
+    categories: { default: () => [] },
+    open: { type: Boolean, default: void 0 },
+    className: {},
+    theme: { default: "light" },
+    loading: { type: Boolean, default: !1 },
+    closeOnOutsideClick: { type: Boolean, default: !0 },
+    title: { default: "快捷指令" },
+    maxVisibleItems: { default: 5 },
+    defaultExpanded: { type: Boolean, default: !1 }
+  },
+  emits: ["update:open", "select", "close", "trigger", "category-select", "suggestion-select", "update:expanded", "fill-template"],
+  setup(l, { expose: c, emit: s }) {
+    const o = l, n = s, f = p(!1), t = p([]), m = p({
+      text: "",
+      position: 0
+    }), a = p(o.defaultExpanded), h = p(!1), S = () => {
+      a.value = !a.value, n("update:expanded", a.value);
+    }, R = (e) => {
+      h.value = e;
+    }, b = p(""), y = p(-1), i = p(null), d = p(null), r = P(() => o.open !== void 0 ? o.open : f.value), _ = P(() => {
+      if (o.categories.length === 0 || !b.value)
+        return t.value;
+      const e = o.categories.find(($) => $.id === b.value);
+      return e ? e.items : [];
+    });
+    K(r, (e) => {
+      e ? y.value = _.value.length > 0 ? 0 : -1 : y.value = -1;
+    }), K(_, (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(
+      () => o.categories,
+      (e) => {
+        e.length > 0 && !b.value && (b.value = e[0].id);
+      },
+      { immediate: !0 }
+    );
+    const k = () => {
+      t.value = [...o.items];
+    }, { 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 = {
+        text: e.text || "",
+        position: e.position || 0
+      }), k(), f.value = !0, n("update:open", !0));
+    }, I = (e, $) => {
+      const A = B(e, $);
+      return A ? (m.value = A, C(A), !0) : r.value && $ === "" ? (C(!1), !0) : !1;
+    }, V = (e) => {
+      if (r.value && d.value) {
+        d.value.handleKeyDown(e);
+        return;
+      }
+    }, W = () => {
+      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, $) => {
+      n("select", e.text, $), e.template && n("fill-template", e.template), W();
+    }, F = (e) => {
+      o.closeOnOutsideClick && r.value && i.value && !i.value.contains(e.target) && W();
+    }, se = () => {
+      r.value ? W() : (k(), f.value = !0, n("update:open", !0));
+    };
+    return X(() => {
+      o.closeOnOutsideClick && document.addEventListener("click", F);
+    }), Z(() => {
+      o.closeOnOutsideClick && document.removeEventListener("click", F);
+    }), c({
+      trigger: C,
+      keyDown: V,
+      input: I,
+      toggleExpand: S
+    }), (e, $) => {
+      const A = ce("IconEdit");
+      return g(), v("div", {
+        ref_key: "rootRef",
+        ref: i,
+        class: U(["tr-suggestion", e.className, { "tr-suggestion--dark": e.theme === "dark" }])
+      }, [
+        u("div", He, [
+          u("div", {
+            class: "tr-suggestion__trigger",
+            onClick: se
+          }, [
+            E(w(j))
+          ]),
+          E($e, {
+            suggestions: e.items,
+            isExpanded: a.value,
+            onSuggestionClick: q,
+            onShowExpandButton: R
+          }, {
+            "suggestion-icon": O((D) => [
+              x(e.$slots, "capsule-icon", {
+                suggestion: D.suggestion
+              }, () => [
+                E(A)
+              ])
+            ]),
+            _: 3
+          }, 8, ["suggestions", "isExpanded"]),
+          h.value ? (g(), v("div", {
+            key: 0,
+            class: "tr-suggestion__expand-button",
+            onClick: S
+          }, [
+            a.value ? (g(), L(w(ge), { key: 1 })) : (g(), L(w(ue), { key: 0 }))
+          ])) : z("", !0)
+        ]),
+        x(e.$slots, "trigger", {
+          onTrigger: C,
+          onKeyDown: V,
+          onInput: I
+        }),
+        r.value ? (g(), L(Le, {
+          key: 0,
+          ref_key: "panelRef",
+          ref: d,
+          class: "tr-suggestion-panel placement-top",
+          items: t.value,
+          categories: e.categories,
+          loading: e.loading,
+          title: e.title,
+          maxVisibleItems: e.maxVisibleItems,
+          triggerContext: m.value,
+          onClose: W,
+          onSelect: te,
+          onCategorySelect: ee
+        }, {
+          "title-icon": O(() => [
+            x(e.$slots, "title-icon", {}, () => [
+              E(w(j), { style: { "font-size": "36px" } })
+            ])
+          ]),
+          "category-label": O((D) => [
+            x(e.$slots, "category-label", {
+              category: D.category
+            })
+          ]),
+          item: O((D) => [
+            x(e.$slots, "item", {
+              item: D.item,
+              active: D.active
+            })
+          ]),
+          "loading-indicator": O(() => [
+            x(e.$slots, "loading-indicator", {}, () => [
+              $[0] || ($[0] = u("div", { class: "tr-suggestion__loading-spinner" }, null, -1))
+            ])
+          ]),
+          empty: O(() => [
+            x(e.$slots, "empty", {}, () => [
+              $[1] || ($[1] = u("p", null, "无匹配结果", -1))
+            ])
+          ]),
+          _: 3
+        }, 8, ["items", "categories", "loading", "title", "maxVisibleItems", "triggerContext"])) : z("", !0)
+      ], 2);
+    };
+  }
+});
+H.name = "TrSuggestion";
+const Qe = function(l) {
+  l.component(H.name, H);
+};
+H.install = Qe;
+export {
+  H as default
+};