@opentiny/tiny-robot 0.5.2-alpha.10 → 0.5.2-alpha.15

package/dist/dropdown-menu/index.js

@@ -1,5 +1,5 @@
 import { ref as k, onUnmounted as T, watch as C, defineComponent as E, useModel as H, computed as p, openBlock as w, createBlock as I, unref as X, withCtx as y, createElementVNode as j, createElementBlock as _, Fragment as D, renderList as L, toDisplayString as Y, renderSlot as O, mergeModels as M } from "vue";
-import { w as S, a as b, o as $ } from "../index4.js";
+import { w as S, u as b, o as $ } from "../index4.js";
 import { B as A } from "../index8.js";
 import { u as F } from "../utils.js";
 import { _ as G } from "../_plugin-vue_export-helper.js";

package/dist/extension-manager/index.js

@@ -0,0 +1,473 @@
+import * as G from "vue";
+import { cloneVNode as U, Comment as q, Text as J, Fragment as $, isVNode as Q, Teleport as X, Suspense as Y, ref as E, watch as Z, nextTick as ee, defineComponent as S, onMounted as te, toRef as ne, computed as _, useSlots as V, openBlock as i, createElementBlock as p, createBlock as k, resolveDynamicComponent as P, renderSlot as A, withDirectives as oe, createElementVNode as h, normalizeStyle as W, vShow as ae, createVNode as H, withCtx as R, renderList as z, normalizeClass as x, createCommentVNode as g, toDisplayString as C, unref as j, withModifiers as D, createSlots as se, normalizeProps as ie, guardReactiveProps as re, createTextVNode as le, mergeProps as ce } from "vue";
+import { IconMore as de } from "@opentiny/tiny-robot-svgs";
+import { g as L } from "../index4.js";
+import { _ as T } from "../_plugin-vue_export-helper.js";
+const K = /* @__PURE__ */ new WeakMap();
+function ue() {
+  const t = G.useId;
+  if (t)
+    return t();
+  const u = G.getCurrentInstance();
+  if (!u)
+    return "";
+  const o = u.appContext, m = K.get(o) ?? 0;
+  return K.set(o, m + 1), `tr-${m}`;
+}
+const F = (t) => t.flatMap((u) => u.type === q ? [] : u.type === J && typeof u.children == "string" && u.children.trim() === "" ? [] : u.type !== $ || !Array.isArray(u.children) ? [u] : F(u.children.filter(Q))), pe = (t) => t.type === X || t.type === Y ? !1 : typeof t.type == "string" || typeof t.type == "object" || typeof t.type == "function";
+function me({ getSlot: t, componentName: u }) {
+  return {
+    renderAsChild: (m, d = {}) => {
+      var a;
+      const l = F(((a = t()) == null ? void 0 : a(m)) ?? []);
+      return l.length !== 1 || !pe(l[0]) ? null : U(l[0], d, !0);
+    }
+  };
+}
+const ve = ({
+  triggerRef: t,
+  popoverRef: u,
+  open: o,
+  placement: m
+}) => {
+  const d = E(), l = () => {
+    if (!o.value || !t.value || !u.value) return;
+    const a = t.value.getBoundingClientRect(), s = u.value.getBoundingClientRect(), n = 8, e = 8, c = Math.max(
+      n,
+      document.documentElement.clientWidth - s.width - n
+    ), b = Math.max(
+      n,
+      document.documentElement.clientHeight - s.height - n
+    ), y = Math.min(c, Math.max(n, a.right - s.width)), w = a.bottom + e, M = a.top - s.height - e, f = w + s.height <= document.documentElement.clientHeight - n, r = M >= n;
+    let v = m.value;
+    v === "bottom-end" && !f && r ? v = "top-end" : v === "top-end" && !r && f && (v = "bottom-end");
+    const O = Math.min(b, Math.max(n, v === "bottom-end" ? w : M));
+    d.value = {
+      x: y,
+      y: O,
+      placement: v
+    };
+  };
+  return Z(
+    [o, m],
+    async ([a]) => {
+      a && (await ee(), l());
+    },
+    { flush: "post" }
+  ), L("resize", l, { passive: !0 }), L("scroll", l, {
+    capture: !0,
+    passive: !0
+  }), {
+    position: d
+  };
+}, fe = ["aria-expanded"], he = ["popover"], ye = /* @__PURE__ */ S({
+  inheritAttrs: !1,
+  __name: "ExtensionCardPopover",
+  props: {
+    asChild: { type: Boolean, default: !1 },
+    placement: { default: "bottom-end" }
+  },
+  setup(t) {
+    const u = t, o = `tr-extension-card-popover-${ue()}`, m = E(null), d = E(null), l = E(!1), a = E(!1);
+    te(() => {
+      a.value = typeof HTMLElement.prototype.showPopover == "function" && typeof HTMLElement.prototype.hidePopover == "function";
+    });
+    const { position: s } = ve({
+      triggerRef: m,
+      popoverRef: d,
+      open: l,
+      placement: ne(u, "placement")
+    }), n = _(() => {
+      if (s.value)
+        return {
+          left: `${s.value.x}px`,
+          top: `${s.value.y}px`
+        };
+    }), e = V(), c = (r) => {
+      const v = r instanceof Element ? r : r == null ? void 0 : r.$el;
+      m.value = v instanceof HTMLElement ? v : null;
+    }, b = () => {
+      var r;
+      if (!a.value) {
+        l.value = !1;
+        return;
+      }
+      (r = d.value) != null && r.matches(":popover-open") && d.value.hidePopover();
+    }, y = () => {
+      if (!a.value) {
+        l.value = !l.value;
+        return;
+      }
+      d.value && (d.value.matches(":popover-open") ? d.value.hidePopover() : d.value.showPopover());
+    };
+    L("click", (r) => {
+      var v, N;
+      a.value || !l.value || !(r.target instanceof Node) || (v = m.value) != null && v.contains(r.target) || (N = d.value) != null && N.contains(r.target) || b();
+    }), L("keydown", (r) => {
+      var v;
+      a.value || !l.value || r.key !== "Escape" || (b(), (v = m.value) == null || v.focus());
+    });
+    const { renderAsChild: w } = me({
+      getSlot: () => e.trigger,
+      componentName: "ExtensionCardPopover"
+    }), M = () => w(
+      {
+        popoverId: o,
+        open: l.value
+      },
+      {
+        ref: c,
+        ...a.value ? {
+          popovertarget: o,
+          popovertargetaction: "toggle"
+        } : { onClick: y }
+      }
+    ), f = (r) => {
+      l.value = r.newState === "open";
+    };
+    return (r, v) => (i(), p($, null, [
+      t.asChild ? (i(), k(P(M()), { key: 0 })) : (i(), p("button", {
+        key: 1,
+        ref_key: "triggerRef",
+        ref: m,
+        type: "button",
+        class: "tr-extension-card-popover__trigger",
+        "aria-controls": o,
+        "aria-expanded": l.value,
+        onClick: y
+      }, [
+        A(r.$slots, "trigger", {
+          popoverId: o,
+          open: l.value
+        }, void 0, !0)
+      ], 8, fe)),
+      oe(h("div", {
+        id: o,
+        ref_key: "popoverRef",
+        ref: d,
+        popover: a.value ? "auto" : void 0,
+        class: "tr-extension-card-popover__content",
+        style: W(n.value),
+        onToggle: f
+      }, [
+        A(r.$slots, "content", { close: b }, void 0, !0)
+      ], 44, he), [
+        [ae, a.value || l.value]
+      ])
+    ], 64));
+  }
+}), be = /* @__PURE__ */ T(ye, [["__scopeId", "data-v-6dbac593"]]), _e = {
+  key: 0,
+  class: "tr-extension-card__more-action"
+}, ge = ["title", "aria-label", "aria-expanded"], ke = { class: "tr-extension-card__more-menu" }, xe = ["disabled", "aria-pressed", "onClick"], Ce = {
+  key: 0,
+  class: "tr-extension-card__more-menu-item-icon-slot"
+}, we = {
+  key: 1,
+  class: "tr-extension-card__more-menu-item-icon-placeholder",
+  "aria-hidden": "true"
+}, Me = /* @__PURE__ */ S({
+  __name: "ExtensionCardMoreMenu",
+  props: {
+    actions: { default: () => [] },
+    label: { default: "更多操作" },
+    placement: { default: "bottom-end" },
+    showIcons: { type: Boolean, default: !0 }
+  },
+  emits: ["action"],
+  setup(t, { emit: u }) {
+    const o = t, m = u, d = _(() => o.showIcons && o.actions.some((a) => !!a.icon)), l = (a, s) => {
+      a.disabled || (s(), m("action", {
+        id: a.id,
+        type: a.type,
+        ...a.type === "switch" ? { checked: !a.checked } : {}
+      }));
+    };
+    return (a, s) => o.actions.length ? (i(), p("div", _e, [
+      H(be, {
+        "as-child": "",
+        placement: o.placement
+      }, {
+        trigger: R(({ open: n }) => [
+          h("button", {
+            class: "tr-extension-card__icon-button",
+            type: "button",
+            title: o.label,
+            "aria-label": o.label,
+            "aria-expanded": n
+          }, [
+            H(j(de), { class: "tr-extension-card__action-icon" })
+          ], 8, ge)
+        ]),
+        content: R(({ close: n }) => [
+          h("ul", ke, [
+            (i(!0), p($, null, z(o.actions, (e) => (i(), p("li", {
+              key: e.id
+            }, [
+              h("button", {
+                class: x(["tr-extension-card__more-menu-item", { "is-danger": e.danger }]),
+                type: "button",
+                disabled: e.disabled,
+                "aria-pressed": e.type === "switch" ? e.checked : void 0,
+                onClick: (c) => l(e, n)
+              }, [
+                d.value ? (i(), p("span", Ce, [
+                  e.icon ? (i(), k(P(e.icon), {
+                    key: 0,
+                    class: "tr-extension-card__more-menu-item-icon"
+                  })) : (i(), p("span", we))
+                ])) : g("", !0),
+                h("span", null, C(e.label), 1)
+              ], 10, xe)
+            ]))), 128))
+          ])
+        ]),
+        _: 1
+      }, 8, ["placement"])
+    ])) : g("", !0);
+  }
+}), $e = /* @__PURE__ */ T(Me, [["__scopeId", "data-v-8d00263e"]]), Ae = { class: "tr-extension-card-primary-actions" }, Ee = ["checked", "disabled", "aria-label", "onChange"], Pe = ["aria-label", "disabled", "onClick"], Ie = ["aria-label", "disabled", "onClick"], Se = /* @__PURE__ */ S({
+  __name: "ExtensionCardActions",
+  props: {
+    actions: { default: () => [] }
+  },
+  emits: ["action"],
+  setup(t, { emit: u }) {
+    const o = t, m = u, d = (s, n) => {
+      if (s.disabled) return;
+      const e = n.currentTarget, c = e.checked;
+      e.checked = !!s.checked, m("action", {
+        id: s.id,
+        type: s.type,
+        checked: c
+      });
+    }, l = (s) => {
+      s.disabled || m("action", { id: s.id, type: s.type });
+    }, a = (s, n) => {
+      if (s.disabled) return;
+      const e = { id: s.id, type: s.type };
+      n !== void 0 && (e.payload = n), m("action", e);
+    };
+    return (s, n) => (i(), p("div", Ae, [
+      (i(!0), p($, null, z(o.actions, (e) => (i(), p($, {
+        key: e.id
+      }, [
+        e.type === "switch" ? (i(), p("label", {
+          key: 0,
+          class: x(["tr-extension-card-primary-actions__switch", { "is-disabled": e.disabled, "is-danger": e.danger }])
+        }, [
+          h("input", {
+            type: "checkbox",
+            role: "switch",
+            checked: e.checked,
+            disabled: e.disabled,
+            "aria-label": e.label,
+            onChange: (c) => d(e, c)
+          }, null, 40, Ee),
+          n[0] || (n[0] = h("span", { class: "tr-extension-card-primary-actions__switch-track" }, null, -1))
+        ], 2)) : e.type === "button" ? (i(), p("button", {
+          key: 1,
+          class: x(["tr-extension-card-primary-actions__button", { "is-danger": e.danger }]),
+          type: "button",
+          "aria-label": e.label,
+          disabled: e.disabled,
+          onClick: (c) => l(e)
+        }, [
+          e.icon ? (i(), k(P(e.icon), {
+            key: 0,
+            class: "tr-extension-card-primary-actions__button-icon"
+          })) : g("", !0),
+          h("span", null, C(e.label), 1)
+        ], 10, Pe)) : s.$slots["primary-action"] ? (i(), p("span", {
+          key: 2,
+          class: x(["tr-extension-card-primary-actions__custom-action", { "is-disabled": e.disabled, "is-danger": e.danger }])
+        }, [
+          A(s.$slots, "primary-action", {
+            action: e,
+            trigger: (c) => a(e, c)
+          }, void 0, !0)
+        ], 2)) : (i(), p("button", {
+          key: 3,
+          class: x(["tr-extension-card-primary-actions__button", { "is-danger": e.danger }]),
+          type: "button",
+          "aria-label": e.label,
+          disabled: e.disabled,
+          onClick: (c) => a(e)
+        }, [
+          e.icon ? (i(), k(P(e.icon), {
+            key: 0,
+            class: "tr-extension-card-primary-actions__button-icon"
+          })) : g("", !0),
+          h("span", null, C(e.label), 1)
+        ], 10, Ie))
+      ], 64))), 128))
+    ]));
+  }
+}), Te = /* @__PURE__ */ T(Se, [["__scopeId", "data-v-7f997e75"]]), Le = { class: "tr-extension-card" }, Be = { class: "tr-extension-card__icon-region" }, Ne = ["src", "alt"], Re = {
+  key: 2,
+  class: "tr-extension-card__icon tr-extension-card__icon--placeholder"
+}, Ve = { class: "tr-extension-card__content" }, ze = ["role", "tabindex", "title"], Ge = ["title"], He = ["aria-label", "aria-valuenow"], De = /* @__PURE__ */ S({
+  __name: "ExtensionCard",
+  props: {
+    name: {},
+    description: {},
+    icon: {},
+    actions: { default: () => [] },
+    primaryActionsLimit: { default: 1 },
+    progress: {},
+    nameClickable: { type: Boolean, default: !0 },
+    overflowMenuLabel: { default: "更多操作" },
+    overflowMenuPlacement: { default: "bottom-end" },
+    overflowMenuShowIcons: { type: Boolean, default: !0 }
+  },
+  emits: ["name-click", "action"],
+  setup(t, { emit: u }) {
+    const o = t, m = V(), d = u, l = _(() => o.actions.filter((f) => !f.hidden)), a = _(() => Math.max(0, Math.floor(o.primaryActionsLimit))), s = _(() => l.value.slice(0, a.value)), n = _(() => l.value.slice(a.value)), e = _(() => s.value.length > 0 || n.value.length > 0), c = _(() => o.progress === "indeterminate" || o.progress === void 0 ? o.progress : Math.min(100, Math.max(0, o.progress))), b = _(() => !!m["primary-action"]), y = (f) => {
+      d("action", f);
+    }, w = (f) => {
+      o.nameClickable && d("name-click", f);
+    }, M = (f) => {
+      !o.nameClickable || f.key !== "Enter" && f.key !== " " || (f.preventDefault(), d("name-click", f));
+    };
+    return (f, r) => (i(), p("div", Le, [
+      h("div", Be, [
+        typeof t.icon == "string" && t.icon ? (i(), p("img", {
+          key: 0,
+          src: t.icon,
+          alt: t.name,
+          class: "tr-extension-card__icon"
+        }, null, 8, Ne)) : t.icon ? (i(), k(P(t.icon), {
+          key: 1,
+          class: "tr-extension-card__icon"
+        })) : (i(), p("div", Re, C(t.name.slice(0, 1)), 1))
+      ]),
+      h("div", Ve, [
+        h("div", {
+          class: x(["tr-extension-card__name", { "is-clickable": t.nameClickable }]),
+          role: t.nameClickable ? "button" : void 0,
+          tabindex: t.nameClickable ? 0 : void 0,
+          title: t.name,
+          onClick: w,
+          onKeydown: M
+        }, C(t.name), 43, ze),
+        t.description ? (i(), p("div", {
+          key: 0,
+          class: "tr-extension-card__description",
+          title: t.description
+        }, C(t.description), 9, Ge)) : g("", !0)
+      ]),
+      e.value ? (i(), p("div", {
+        key: 0,
+        class: "tr-extension-card__actions",
+        onClick: r[1] || (r[1] = D(() => {
+        }, ["stop"])),
+        onKeydown: r[2] || (r[2] = D(() => {
+        }, ["stop"]))
+      }, [
+        s.value.length ? (i(), k(Te, {
+          key: 0,
+          actions: s.value,
+          onAction: r[0] || (r[0] = (v) => d("action", v))
+        }, se({ _: 2 }, [
+          b.value ? {
+            name: "primary-action",
+            fn: R((v) => [
+              A(f.$slots, "primary-action", ie(re(v)), void 0, !0)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["actions"])) : g("", !0),
+        n.value.length ? (i(), k($e, {
+          key: 1,
+          actions: n.value,
+          label: t.overflowMenuLabel,
+          placement: t.overflowMenuPlacement,
+          "show-icons": t.overflowMenuShowIcons,
+          onAction: y
+        }, null, 8, ["actions", "label", "placement", "show-icons"])) : g("", !0)
+      ], 32)) : g("", !0),
+      c.value !== void 0 ? (i(), p("div", {
+        key: 1,
+        class: "tr-extension-card__progress",
+        role: "progressbar",
+        "aria-label": t.name,
+        "aria-valuemin": "0",
+        "aria-valuemax": "100",
+        "aria-valuenow": c.value === "indeterminate" ? void 0 : c.value
+      }, [
+        h("span", {
+          class: x(["tr-extension-card__progress-bar", { "is-indeterminate": c.value === "indeterminate" }]),
+          style: W(c.value === "indeterminate" ? void 0 : { width: `${c.value}%` })
+        }, null, 6)
+      ], 8, He)) : g("", !0)
+    ]));
+  }
+}), I = /* @__PURE__ */ T(De, [["__scopeId", "data-v-adf5e9c0"]]), Ke = { class: "tr-extension-card-grid" }, We = {
+  key: 0,
+  class: "tr-extension-card-grid__empty"
+}, je = ["data-card-id"], Fe = /* @__PURE__ */ S({
+  __name: "ExtensionCardGrid",
+  props: {
+    items: {},
+    emptyText: { default: "暂无内容" },
+    primaryActionsLimit: {},
+    nameClickable: { type: Boolean, default: void 0 },
+    overflowMenuLabel: {},
+    overflowMenuPlacement: {},
+    overflowMenuShowIcons: { type: Boolean, default: void 0 }
+  },
+  emits: ["action", "name-click"],
+  setup(t, { emit: u }) {
+    const o = t, m = V(), d = u, l = (n) => {
+      const { id: e, ...c } = n;
+      return {
+        ...c,
+        primaryActionsLimit: n.primaryActionsLimit ?? o.primaryActionsLimit,
+        nameClickable: n.nameClickable ?? o.nameClickable,
+        overflowMenuLabel: n.overflowMenuLabel ?? o.overflowMenuLabel,
+        overflowMenuPlacement: n.overflowMenuPlacement ?? o.overflowMenuPlacement,
+        overflowMenuShowIcons: n.overflowMenuShowIcons ?? o.overflowMenuShowIcons
+      };
+    }, a = (n, e) => {
+      d("action", { itemId: n, action: e });
+    }, s = (n, e) => {
+      d("name-click", { itemId: n, event: e });
+    };
+    return (n, e) => (i(), p("ul", Ke, [
+      t.items.length === 0 ? (i(), p("li", We, [
+        A(n.$slots, "empty", {}, () => [
+          le(C(t.emptyText), 1)
+        ], !0)
+      ])) : (i(!0), p($, { key: 1 }, z(t.items, (c, b) => (i(), p("li", {
+        key: c.id,
+        class: "tr-extension-card-grid__item",
+        "data-card-id": c.id
+      }, [
+        j(m).item ? A(n.$slots, "item", {
+          item: c,
+          index: b
+        }, void 0, !0, 0) : (i(), k(I, ce({
+          key: 1,
+          ref_for: !0
+        }, l(c), {
+          onAction: (y) => a(c.id, y),
+          onNameClick: (y) => s(c.id, y)
+        }), null, 16, ["onAction", "onNameClick"]))
+      ], 8, je))), 128))
+    ]));
+  }
+}), B = /* @__PURE__ */ T(Fe, [["__scopeId", "data-v-b736eba6"]]);
+I.name = "TrExtensionCard";
+const Oe = function(t) {
+  t.component(I.name, I);
+}, Ue = I;
+Ue.install = Oe;
+B.name = "TrExtensionCardGrid";
+const qe = function(t) {
+  t.component(B.name, B);
+}, Je = B;
+Je.install = qe;
+export {
+  Ue as ExtensionCard,
+  Je as ExtensionCardGrid
+};