@opentiny/tiny-robot 0.5.2-alpha.8 → 1.0.0-beta.0

package/dist/index7.js

@@ -1,53 +1,53 @@
-import { onMounted as ne, onBeforeUnmount as oe, ref as y, defineComponent as P, openBlock as l, createElementBlock as u, createElementVNode as w, createVNode as T, unref as n, toDisplayString as B, useModel as W, computed as I, normalizeStyle as ie, Fragment as S, renderList as V, createBlock as H, resolveDynamicComponent as Y, mergeModels as j, nextTick as se, normalizeClass as U, createCommentVNode as G, renderSlot as q, withDirectives as A, withKeys as F, isRef as re, withModifiers as J, vModelText as le, vShow as ue } from "vue";
-import { IconEmptySearch as ae, IconEditPen as ce, IconDelete as de, IconCheck as me, IconClose as fe, IconMore as pe } from "@opentiny/tiny-robot-svgs";
-import { _ as z } from "./_plugin-vue_export-helper.js";
-import { o as Z, d as ve, c as ge, b as _e } from "./index4.js";
-import { t as O } from "./utils.js";
-const D = y(!1);
-let b = 0, $;
-function ye() {
-  const s = window.matchMedia("(hover: none) and (pointer: coarse)"), m = () => {
-    D.value = s.matches;
+import { onMounted as me, onBeforeUnmount as pe, ref as R, defineComponent as Y, openBlock as a, createElementBlock as v, createElementVNode as T, createVNode as B, unref as i, toDisplayString as z, useModel as ee, computed as E, normalizeStyle as ve, Fragment as N, renderList as J, createBlock as Q, resolveDynamicComponent as re, mergeModels as te, nextTick as F, shallowRef as ue, watch as ae, normalizeClass as j, createCommentVNode as P, renderSlot as ne, withDirectives as oe, withKeys as O, isRef as ye, withModifiers as se, vModelText as ge, vShow as he } from "vue";
+import { IconEmptySearch as _e, IconEditPen as ke, IconDelete as Ce, IconCheck as we, IconClose as Ie, IconMore as Le } from "@opentiny/tiny-robot-svgs";
+import { _ as Z } from "./_plugin-vue_export-helper.js";
+import { o as ce, d as Ee, c as xe, b as Re } from "./index4.js";
+import { t as V } from "./utils.js";
+const q = R(!1);
+let U = 0, A;
+function Te() {
+  const u = window.matchMedia("(hover: none) and (pointer: coarse)"), h = () => {
+    q.value = u.matches;
   };
-  m(), s.addEventListener("change", m);
-  const t = (c) => {
-    D.value = c.pointerType !== "mouse";
+  h(), u.addEventListener("change", h);
+  const c = (r) => {
+    q.value = r.pointerType !== "mouse";
   };
-  return window.addEventListener("pointerdown", t, !0), () => {
-    s.removeEventListener("change", m), window.removeEventListener("pointerdown", t, !0);
+  return window.addEventListener("pointerdown", c, !0), () => {
+    u.removeEventListener("change", h), window.removeEventListener("pointerdown", c, !0);
   };
 }
-function he() {
-  $ == null || $(), $ = void 0;
+function be() {
+  A == null || A(), A = void 0;
 }
-function Ce() {
+function Me() {
   return typeof window > "u" ? {
-    isTouchDevice: D
-  } : (ne(() => {
-    b++, b === 1 && ($ = ye());
-  }), oe(() => {
-    b = Math.max(0, b - 1), b === 0 && he();
+    isTouchDevice: q
+  } : (me(() => {
+    U++, U === 1 && (A = Te());
+  }), pe(() => {
+    U = Math.max(0, U - 1), U === 0 && be();
   }), {
-    isTouchDevice: D
+    isTouchDevice: q
   });
 }
-const ke = { class: "tr-history__empty" }, Le = { class: "tr-history__empty-icon" }, Ee = { class: "tr-history__empty-text" }, we = /* @__PURE__ */ P({
+const De = { class: "tr-history__empty" }, $e = { class: "tr-history__empty-icon" }, Oe = { class: "tr-history__empty-text" }, Ge = /* @__PURE__ */ Y({
   __name: "Empty",
   props: {
     text: { default: "暂无内容" }
   },
-  setup(s) {
-    const m = s;
-    return (t, c) => (l(), u("div", ke, [
-      w("span", Le, [
-        T(n(ae))
+  setup(u) {
+    const h = u;
+    return (c, r) => (a(), v("div", De, [
+      T("span", $e, [
+        B(i(_e))
       ]),
-      w("span", Ee, B(m.text), 1)
+      T("span", Oe, z(h.text), 1)
     ]));
   }
-}), Re = /* @__PURE__ */ z(we, [["__scopeId", "data-v-d0340c39"]]), Ie = ["onClick"], Q = 4, xe = /* @__PURE__ */ P({
+}), He = /* @__PURE__ */ Z(Ge, [["__scopeId", "data-v-d0340c39"]]), Se = ["onClick"], le = 4, Ue = /* @__PURE__ */ Y({
   __name: "MenuList",
-  props: /* @__PURE__ */ j({
+  props: /* @__PURE__ */ te({
     items: {},
     menuListGap: { default: 8 }
   }, {
@@ -56,85 +56,132 @@ const ke = { class: "tr-history__empty" }, Le = { class: "tr-history__empty-icon
     data: { default: null },
     dataModifiers: {}
   }),
-  emits: /* @__PURE__ */ j(["item-click"], ["update:trigger", "update:data"]),
-  setup(s, { emit: m }) {
-    const t = W(s, "trigger"), c = W(s, "data"), h = s, C = m, E = y(null);
-    Z(
-      E,
+  emits: /* @__PURE__ */ te(["item-click"], ["update:trigger", "update:data"]),
+  setup(u, { expose: h, emit: c }) {
+    const r = ee(u, "trigger"), k = ee(u, "data"), _ = u, b = c, C = R(null);
+    ce(
+      C,
       () => {
-        t.value = null, c.value = null;
+        r.value = null, k.value = null;
       },
       {
-        ignore: [t]
+        ignore: [r]
       }
     );
-    const { top: p, bottom: x, left: _ } = ve(t), { width: M, height: k } = ge(E, void 0, { box: "border-box" }), { height: R } = _e(), o = I(() => {
-      const L = {
-        left: `min(${O(_.value)}, calc(100% - ${O(M.value + Q)}))`
-      }, g = x.value + h.menuListGap;
-      return g + k.value + Q > R.value ? L.bottom = `calc(100% - ${O(p.value - h.menuListGap)})` : L.top = O(g), L;
-    }), v = (L) => {
-      C("item-click", L), t.value = null, c.value = null;
+    const { top: M, bottom: w, left: G } = Ee(r), { width: x, height: H } = xe(C, void 0, { box: "border-box" }), { height: I } = Re(), D = E(() => {
+      const n = {
+        left: `min(${V(G.value)}, calc(100% - ${V(x.value + le)}))`
+      }, p = w.value + _.menuListGap;
+      return p + H.value + le > I.value ? n.bottom = `calc(100% - ${V(M.value - _.menuListGap)})` : n.top = V(p), n;
+    }), o = (n) => {
+      b("item-click", n), r.value = null, k.value = null;
+    }, f = () => {
+      var n;
+      return Array.from(((n = C.value) == null ? void 0 : n.querySelectorAll('[role="menuitem"]')) || []);
+    }, W = () => {
+      var n;
+      return (n = f()[0]) == null ? void 0 : n.focus();
+    }, g = () => {
+      var n;
+      return (n = f().at(-1)) == null ? void 0 : n.focus();
+    }, S = () => {
+      const n = r.value;
+      r.value = null, k.value = null, F(() => n == null ? void 0 : n.focus());
+    }, m = (n) => {
+      var $, K;
+      if (n.key === "Tab") {
+        r.value = null, k.value = null;
+        return;
+      }
+      const p = f(), y = p.indexOf(document.activeElement);
+      if (n.key === "Escape") {
+        n.preventDefault(), S();
+        return;
+      }
+      if (n.key === "Enter" || n.key === " ") {
+        n.preventDefault(), ($ = p[y]) == null || $.click();
+        return;
+      }
+      if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(n.key) || p.length === 0) return;
+      n.preventDefault();
+      let L = y;
+      n.key === "Home" && (L = 0), n.key === "End" && (L = p.length - 1), n.key === "ArrowDown" && (L = y < p.length - 1 ? y + 1 : 0), n.key === "ArrowUp" && (L = y > 0 ? y - 1 : p.length - 1), (K = p[L]) == null || K.focus();
     };
-    return (L, g) => (l(), u("ul", {
+    return h({ focusFirstItem: W, focusLastItem: g }), (n, p) => (a(), v("ul", {
       class: "tr-history__menu-list",
       ref_key: "menuRef",
-      ref: E,
-      style: ie(o.value)
+      ref: C,
+      style: ve(D.value),
+      role: "menu",
+      onKeydown: m
     }, [
-      (l(!0), u(S, null, V(h.items, (a) => (l(), u("li", {
+      (a(!0), v(N, null, J(_.items, (y) => (a(), v("li", {
         class: "tr-history__menu-list__item",
-        key: a.id,
-        onClick: (K) => v(a)
+        key: y.id,
+        role: "menuitem",
+        tabindex: "-1",
+        onClick: (L) => o(y)
       }, [
-        (l(), H(Y(a.icon))),
-        w("span", null, B(a.text), 1)
-      ], 8, Ie))), 128))
-    ], 4));
+        (a(), Q(re(y.icon))),
+        T("span", null, z(y.text), 1)
+      ], 8, Se))), 128))
+    ], 36));
   }
-}), Me = /* @__PURE__ */ z(xe, [["__scopeId", "data-v-89fdb41c"]]), be = ({
-  renameControlOnClickOutside: s,
-  onItemTitleChange: m
+}), Be = /* @__PURE__ */ Z(Ue, [["__scopeId", "data-v-e4a482e7"]]), Ae = ({
+  renameControlOnClickOutside: u,
+  onItemTitleChange: h,
+  resolveItem: c
 }) => {
-  const t = y(void 0), c = y(null), h = I(() => {
+  const r = ue(void 0), k = E(() => {
+    const o = r.value;
+    if (o)
+      return c ? c(o) : o;
+  }), _ = R(null), b = E(() => {
     var o;
-    return (o = c.value) == null ? void 0 : o.at(0);
-  }), C = y(null), E = I(() => {
+    return (o = _.value) == null ? void 0 : o.at(0);
+  }), C = R(null), M = E(() => {
     var o;
     return (o = C.value) == null ? void 0 : o.at(0);
-  }), p = y(null), x = I(() => {
+  }), w = R(null), G = E(() => {
     var o;
-    return (o = p.value) == null ? void 0 : o.at(0);
-  }), _ = y(""), M = (o) => {
-    t.value = o, _.value = o.title, se(() => {
-      const v = h.value;
-      v && (v.focus(), v.select());
+    return (o = w.value) == null ? void 0 : o.at(0);
+  }), x = R(""), H = (o) => {
+    r.value = o, x.value = o.title, F(() => {
+      const f = b.value;
+      f && (f.focus(), f.select());
     });
-  }, k = () => {
-    t.value = void 0, _.value = "";
-  }, R = () => {
-    t.value && m(_.value, t.value), t.value = void 0, _.value = "";
+  }, I = () => {
+    r.value = void 0, x.value = "";
+  }, D = () => {
+    const o = k.value;
+    o && h(x.value, o), I();
   };
-  return (s === "confirm" || s === "cancel") && Z(
-    h,
+  return ae(
+    k,
+    (o, f) => {
+      f && !o && I();
+    },
+    { flush: "sync" }
+  ), (u === "confirm" || u === "cancel") && ce(
+    b,
     () => {
-      s === "confirm" ? R() : k();
+      u === "confirm" ? D() : I();
     },
-    { ignore: [E, x] }
+    { ignore: [M, G] }
   ), {
-    editingItem: t,
-    editorRefList: c,
+    editingItem: k,
+    editorRefList: _,
     editorConfirmRefList: C,
-    editorCancelRefList: p,
-    editorValue: _,
-    handleEdit: M,
-    handleEditCancel: k,
-    handleEditConfirm: R
+    editorCancelRefList: w,
+    editorValue: x,
+    handleEdit: H,
+    handleEditCancel: I,
+    handleEditConfirm: D
   };
-}, X = Symbol("NO_GROUP"), Te = {
+}, ie = Symbol("NO_GROUP"), Ke = {
   key: 0,
   class: "tr-history__group-title"
-}, $e = { class: "tr-history__group-items" }, Ge = ["onClick"], Oe = ["title"], Se = ["onClick"], Be = /* @__PURE__ */ P({
+}, Pe = { class: "tr-history__group-items" }, Ve = ["onClick"], Ne = ["title"], ze = ["aria-label", "aria-expanded", "onClick", "onKeydown"], Fe = /* @__PURE__ */ Y({
   __name: "index",
   props: {
     data: {},
@@ -142,157 +189,201 @@ const ke = { class: "tr-history__empty" }, Le = { class: "tr-history__empty-icon
     showRenameControls: { type: Boolean, default: !1 },
     renameControlOnClickOutside: { default: "confirm" },
     menuItems: { default: () => [
-      { id: "rename", text: "重命名", icon: ce },
-      { id: "delete", text: "删除", icon: de }
+      { id: "rename", text: "重命名", icon: ke },
+      { id: "delete", text: "删除", icon: Ce }
     ] },
     menuListGap: { default: 8 }
   },
   emits: ["item-click", "item-title-change", "item-action"],
-  setup(s, { emit: m }) {
-    const t = s, c = m, h = (i) => {
-      var f;
-      const e = typeof ((f = i[0]) == null ? void 0 : f.group);
-      return e === "string" || e === "symbol";
-    }, C = I(() => {
-      const i = t.data;
-      return h(i) ? i : [{ group: X, items: i }];
-    }), E = I(() => C.value.length === 0 || C.value.every((i) => i.items.length === 0)), {
-      editingItem: p,
-      editorRefList: x,
-      editorConfirmRefList: _,
-      editorCancelRefList: M,
-      editorValue: k,
-      handleEdit: R,
+  setup(u, { emit: h }) {
+    const c = u, r = h, k = (e) => {
+      var l;
+      const t = typeof ((l = e[0]) == null ? void 0 : l.group);
+      return t === "string" || t === "symbol";
+    }, _ = E(() => {
+      const e = c.data;
+      return k(e) ? e : [{ group: ie, items: e }];
+    }), b = E(() => _.value.length === 0 || _.value.every((e) => e.items.length === 0)), C = E(() => _.value.flatMap((e) => e.items)), M = (e) => e.id ? C.value.find((t) => t.id === e.id) : C.value.find((t) => t === e), {
+      editingItem: w,
+      editorRefList: G,
+      editorConfirmRefList: x,
+      editorCancelRefList: H,
+      editorValue: I,
+      handleEdit: D,
       handleEditCancel: o,
-      handleEditConfirm: v
-    } = be({
-      renameControlOnClickOutside: t.renameControlOnClickOutside,
-      onItemTitleChange: (i, e) => {
-        c("item-title-change", i, e);
+      handleEditConfirm: f
+    } = Ae({
+      renameControlOnClickOutside: c.renameControlOnClickOutside,
+      onItemTitleChange: (e, t) => {
+        r("item-title-change", e, t);
+      },
+      resolveItem: M
+    }), { isTouchDevice: W } = Me(), g = R(null), S = ue(null), m = E({
+      get: () => {
+        const e = S.value;
+        return e ? M(e) ?? null : null;
+      },
+      set: (e) => {
+        S.value = e;
       }
-    }), { isTouchDevice: L } = Ce(), g = y(null), a = y(null), K = (i, e) => {
-      if (i.currentTarget instanceof HTMLButtonElement) {
-        if (a.value === e) {
-          g.value = null, a.value = null;
+    }), n = R(null), p = (e) => {
+      F(() => {
+        var t, l;
+        e === "first" ? (t = n.value) == null || t.focusFirstItem() : (l = n.value) == null || l.focusLastItem();
+      });
+    }, y = (e, t) => {
+      if (e.currentTarget instanceof HTMLButtonElement) {
+        if (m.value === t) {
+          g.value = null, m.value = null;
           return;
         }
-        g.value = i.currentTarget, a.value = e;
+        g.value = e.currentTarget, m.value = t, e.detail === 0 && p("first");
       } else
-        g.value = null, a.value = null;
-    }, ee = (i) => {
-      const e = a.value;
-      e && (i.id === "rename" && R(e), c("item-action", i, e));
+        g.value = null, m.value = null;
+    }, L = (e, t, l) => {
+      e.preventDefault(), e.stopPropagation(), e.currentTarget instanceof HTMLButtonElement && (g.value = e.currentTarget, m.value = t, p(l));
+    }, $ = () => {
+      g.value = null, m.value = null;
+    };
+    ae(
+      m,
+      (e) => {
+        !e && S.value && $();
+      },
+      { flush: "sync" }
+    );
+    const K = (e) => {
+      g.value && (e.preventDefault(), e.stopPropagation(), $());
+    }, de = (e) => {
+      const t = m.value, l = g.value;
+      t && (e.id === "rename" ? D(t) : F(() => l == null ? void 0 : l.focus()), r("item-action", e, t));
     };
-    return (i, e) => (l(), u("div", {
-      class: U(["tr-history", { "touch-device": n(L) }])
+    return (e, t) => (a(), v("div", {
+      class: j(["tr-history", { "touch-device": i(W) }])
     }, [
-      E.value ? (l(), H(Re, { key: 1 })) : (l(), u(S, { key: 0 }, [
-        (l(!0), u(S, null, V(C.value, (f) => (l(), u("div", {
+      b.value ? (a(), Q(He, { key: 1 })) : (a(), v(N, { key: 0 }, [
+        (a(!0), v(N, null, J(_.value, (l) => (a(), v("div", {
           class: "tr-history__group",
-          key: f.group
+          key: l.group
         }, [
-          f.group !== n(X) ? (l(), u("div", Te, B(f.group), 1)) : G("", !0),
-          w("div", $e, [
-            (l(!0), u(S, null, V(f.items, (r, te) => (l(), u("div", {
-              class: U(["tr-history__item", {
-                selected: r.id && r.id === t.selected,
-                editing: n(p) === r,
-                active: a.value === r
+          l.group !== i(ie) ? (a(), v("div", Ke, z(l.group), 1)) : P("", !0),
+          T("div", Pe, [
+            (a(!0), v(N, null, J(l.items, (s, fe) => (a(), v("div", {
+              class: j(["tr-history__item", {
+                selected: s.id && s.id === c.selected,
+                editing: i(w) === s,
+                active: m.value === s
               }]),
-              key: r.id || te,
-              onClick: (d) => c("item-click", r)
+              key: s.id || fe,
+              onClick: (d) => r("item-click", s)
             }, [
-              q(i.$slots, "item-prefix", { item: r }, void 0, !0),
-              r.icon ? (l(), H(Y(r.icon), { key: 0 })) : G("", !0),
-              n(p) === r ? A((l(), u("input", {
+              ne(e.$slots, "item-prefix", { item: s }, void 0, !0),
+              s.icon ? (a(), Q(re(s.icon), { key: 0 })) : P("", !0),
+              i(w) === s ? oe((a(), v("input", {
                 key: 1,
                 class: "tr-history__item-editor",
                 type: "text",
-                onClick: e[0] || (e[0] = J(() => {
+                onClick: t[0] || (t[0] = se(() => {
                 }, ["stop"])),
                 ref_for: !0,
                 ref_key: "editorRefList",
-                ref: x,
-                "onUpdate:modelValue": e[1] || (e[1] = (d) => re(k) ? k.value = d : null),
+                ref: G,
+                "onUpdate:modelValue": t[1] || (t[1] = (d) => ye(I) ? I.value = d : null),
                 onKeydown: [
-                  e[2] || (e[2] = F(
+                  t[2] || (t[2] = O(
                     //@ts-ignore
-                    (...d) => n(v) && n(v)(...d),
+                    (...d) => i(f) && i(f)(...d),
                     ["enter"]
                   )),
-                  e[3] || (e[3] = F(
+                  t[3] || (t[3] = O(
                     //@ts-ignore
-                    (...d) => n(o) && n(o)(...d),
+                    (...d) => i(o) && i(o)(...d),
                     ["escape"]
                   ))
                 ]
               }, null, 544)), [
-                [le, n(k)]
-              ]) : q(i.$slots, "item-title", { item: r }, () => [
-                w("span", {
+                [ge, i(I)]
+              ]) : ne(e.$slots, "item-title", { item: s }, () => [
+                T("span", {
                   class: "text",
-                  title: r.title
-                }, B(r.title), 9, Oe)
+                  title: s.title
+                }, z(s.title), 9, Ne)
               ], !0, 2),
-              w("span", {
+              T("span", {
                 class: "tr-history__item-actions",
-                onClick: e[6] || (e[6] = J(() => {
+                onClick: t[6] || (t[6] = se(() => {
                 }, ["stop"]))
               }, [
-                t.showRenameControls && n(p) === r ? (l(), u("button", {
+                c.showRenameControls && i(w) === s ? (a(), v("button", {
                   key: 0,
                   class: "editor-confirm",
                   ref_for: !0,
                   ref_key: "editorConfirmRefList",
-                  ref: _,
-                  onClick: e[4] || (e[4] = //@ts-ignore
-                  (...d) => n(v) && n(v)(...d))
+                  ref: x,
+                  type: "button",
+                  "aria-label": "确认重命名",
+                  onClick: t[4] || (t[4] = //@ts-ignore
+                  (...d) => i(f) && i(f)(...d))
                 }, [
-                  T(n(me))
-                ], 512)) : G("", !0),
-                t.showRenameControls && n(p) === r ? (l(), u("button", {
+                  B(i(we))
+                ], 512)) : P("", !0),
+                c.showRenameControls && i(w) === s ? (a(), v("button", {
                   key: 1,
                   class: "editor-cancel",
                   ref_for: !0,
                   ref_key: "editorCancelRefList",
-                  ref: M,
-                  onClick: e[5] || (e[5] = //@ts-ignore
-                  (...d) => n(o) && n(o)(...d))
+                  ref: H,
+                  type: "button",
+                  "aria-label": "取消重命名",
+                  onClick: t[5] || (t[5] = //@ts-ignore
+                  (...d) => i(o) && i(o)(...d))
                 }, [
-                  T(n(fe))
-                ], 512)) : G("", !0),
-                w("button", {
-                  class: U(["menu", { hidden: n(p) === r }]),
-                  onClick: (d) => K(d, r)
+                  B(i(Ie))
+                ], 512)) : P("", !0),
+                T("button", {
+                  class: j(["menu", { hidden: i(w) === s }]),
+                  type: "button",
+                  "aria-label": `${s.title} 更多操作`,
+                  "aria-haspopup": "menu",
+                  "aria-expanded": m.value === s,
+                  onClick: (d) => y(d, s),
+                  onKeydown: [
+                    O((d) => L(d, s, "first"), ["down"]),
+                    O((d) => L(d, s, "last"), ["up"]),
+                    O(K, ["escape"]),
+                    O($, ["tab"])
+                  ]
                 }, [
-                  T(n(pe))
-                ], 10, Se)
+                  B(i(Le))
+                ], 42, ze)
               ])
-            ], 10, Ge))), 128))
+            ], 10, Ve))), 128))
           ])
         ]))), 128)),
-        A(T(Me, {
+        oe(B(Be, {
+          ref_key: "menuListRef",
+          ref: n,
           trigger: g.value,
-          "onUpdate:trigger": e[7] || (e[7] = (f) => g.value = f),
-          data: a.value,
-          "onUpdate:data": e[8] || (e[8] = (f) => a.value = f),
-          items: t.menuItems,
-          "menu-list-gap": t.menuListGap,
-          onItemClick: ee
+          "onUpdate:trigger": t[7] || (t[7] = (l) => g.value = l),
+          data: m.value,
+          "onUpdate:data": t[8] || (t[8] = (l) => m.value = l),
+          items: c.menuItems,
+          "menu-list-gap": c.menuListGap,
+          onItemClick: de
         }, null, 8, ["trigger", "data", "items", "menu-list-gap"]), [
-          [ue, g.value]
+          [he, g.value]
         ])
       ], 64))
     ], 2));
   }
-}), N = /* @__PURE__ */ z(Be, [["__scopeId", "data-v-125148d2"]]), De = function(s) {
-  s.component(N.name, N);
+}), X = /* @__PURE__ */ Z(Fe, [["__scopeId", "data-v-85a4fc3d"]]), qe = function(u) {
+  u.component(X.name, X);
 };
-Object.assign(N, {
+Object.assign(X, {
   name: "TrHistory",
-  install: De
+  install: qe
 });
 export {
-  N as H,
-  Ce as u
+  X as H,
+  Me as u
 };