hys-ui 0.2.0 → 0.3.0

package/dist/components/HysMention/HysMention.vue.js

@@ -1,7 +1,7 @@
 import o from "./HysMention2.vue.js";
 /* empty css                */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-68c4bc79"]]);
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-5a985c13"]]);
 export {
   p as default
 };

package/dist/components/HysMention/HysMention2.vue.js

@@ -1,13 +1,16 @@
-import { defineComponent as te, useModel as ae, ref as g, useId as le, computed as k, watch as D, onBeforeUnmount as oe, onDeactivated as ne, openBlock as C, createElementBlock as F, mergeProps as O, unref as o, withDirectives as ie, createElementVNode as z, vModelText as re, createBlock as de, Teleport as se, Fragment as ue, renderList as ce, withModifiers as ve, normalizeClass as fe, renderSlot as pe, toDisplayString as U, createCommentVNode as he, mergeModels as K, nextTick as j } from "vue";
-import { useHysControlState as me } from "../../composables/formContext.js";
-import { useHysRootAttrs as ge } from "../../config.js";
-import { useFloating as be } from "../../composables/useFloating.js";
-const ye = ["placeholder", "disabled", "readonly", "maxlength", "aria-label", "aria-controls", "aria-expanded", "aria-activedescendant"], xe = ["id"], we = ["id", "disabled", "aria-selected", "data-active", "onPointerenter", "onClick"], ke = {
+import { defineComponent as ae, useModel as oe, ref as b, useId as le, computed as C, watch as D, onBeforeUnmount as ne, onDeactivated as ie, openBlock as M, createElementBlock as S, mergeProps as O, unref as l, withDirectives as re, createElementVNode as A, vModelText as se, createBlock as de, Teleport as ue, createVNode as pe, withCtx as ce, Fragment as ve, renderList as fe, withModifiers as he, normalizeClass as me, renderSlot as ge, toDisplayString as U, createCommentVNode as be, mergeModels as K, nextTick as j } from "vue";
+import ye from "../../motion/PopupMotion.js";
+import { useHysControlState as xe } from "../../composables/formContext.js";
+import { useHysRootAttrs as we } from "../../config.js";
+import { useFloating as ke } from "../../composables/useFloating.js";
+const Ce = ["placeholder", "disabled", "readonly", "maxlength", "aria-label", "aria-controls", "aria-expanded", "aria-activedescendant"], Me = ["id"], Le = ["id", "disabled", "aria-selected", "data-active", "onPointerenter", "onClick"], Te = {
   class: "hys-ui-mention-avatar",
   "aria-hidden": "true"
-}, Se = /* @__PURE__ */ te({
+}, Re = /* @__PURE__ */ ae({
   __name: "HysMention",
   props: /* @__PURE__ */ K({
+    popupTransition: {},
+    popupTransitionDuration: {},
     users: {},
     placeholder: {},
     disabled: { type: Boolean },
@@ -20,147 +23,156 @@ const ye = ["placeholder", "disabled", "readonly", "maxlength", "aria-label", "a
   }),
   emits: /* @__PURE__ */ K(["select", "change"], ["update:modelValue"]),
   setup(h, { expose: q, emit: J }) {
-    const M = h, { disabled: R, label: G } = me(M), r = ae(h, "modelValue"), T = J, H = ge(), n = g(0), c = g(!1), V = g(!1), d = g(), $ = g(), L = g(r.value.length), B = le(), Q = k(() => d.value ? { getBoundingClientRect: Z, contains: (e) => {
+    const m = h, { disabled: F, label: G } = xe(m), r = oe(h, "modelValue"), V = J, z = we(), n = b(0), p = b(!1), R = b(!1), s = b(), $ = b(), L = b(r.value.length), T = le(), Q = C(() => s.value ? { getBoundingClientRect: _, contains: (e) => {
       var t;
-      return !!((t = d.value) != null && t.contains(e));
+      return !!((t = s.value) != null && t.contains(e));
     }, focus: () => {
       var e;
-      return (e = d.value) == null ? void 0 : e.focus();
+      return (e = s.value) == null ? void 0 : e.focus();
     }, get isConnected() {
       var e;
-      return !!((e = d.value) != null && e.isConnected);
-    } } : void 0), { open: v, style: X, show: I, close: b, update: Y } = be(Q, $, { gap: 6 }), E = k(() => r.value.slice(0, L.value)), W = k(() => {
+      return !!((e = s.value) != null && e.isConnected);
+    } } : void 0), { placement: X, open: c, style: Y, show: H, close: y, update: Z } = ke(Q, $, { gap: 6 }), E = C(() => r.value.slice(0, L.value)), P = C(() => {
       var e;
       return ((e = E.value.match(/@([^\s@]*)$/)) == null ? void 0 : e[1]) ?? null;
     });
     let i;
-    function A() {
+    function W() {
       i == null || i.remove(), i = void 0;
     }
-    function Z() {
-      const e = d.value, t = e.getBoundingClientRect();
+    function _() {
+      const e = s.value, t = e.getBoundingClientRect();
       if (!t.width && !t.height) return t;
-      const l = getComputedStyle(e);
+      const o = getComputedStyle(e);
       i || (i = document.createElement("div"), i.setAttribute("aria-hidden", "true"), document.body.append(i));
-      for (const N of ["direction", "font", "font-family", "font-size", "font-weight", "font-style", "font-variant", "letter-spacing", "word-spacing", "text-transform", "text-indent", "text-align", "line-height", "padding-top", "padding-right", "padding-bottom", "padding-left", "border-top-width", "border-right-width", "border-bottom-width", "border-left-width", "border-style", "box-sizing", "tab-size"]) i.style.setProperty(N, l.getPropertyValue(N));
-      Object.assign(i.style, { position: "fixed", top: "0px", left: "-10000px", visibility: "hidden", pointerEvents: "none", height: "auto", overflow: "hidden", whiteSpace: e.wrap === "off" ? "pre" : "pre-wrap", overflowWrap: "break-word", wordBreak: l.wordBreak });
-      const a = parseFloat(l.borderLeftWidth) || 0, f = parseFloat(l.borderTopWidth) || 0;
-      i.style.width = (e.clientWidth || t.width - a - (parseFloat(l.borderRightWidth) || 0)) + a + (parseFloat(l.borderRightWidth) || 0) + "px";
+      for (const N of ["direction", "font", "font-family", "font-size", "font-weight", "font-style", "font-variant", "letter-spacing", "word-spacing", "text-transform", "text-indent", "text-align", "line-height", "padding-top", "padding-right", "padding-bottom", "padding-left", "border-top-width", "border-right-width", "border-bottom-width", "border-left-width", "border-style", "box-sizing", "tab-size"]) i.style.setProperty(N, o.getPropertyValue(N));
+      Object.assign(i.style, { position: "fixed", top: "0px", left: "-10000px", visibility: "hidden", pointerEvents: "none", height: "auto", overflow: "hidden", whiteSpace: e.wrap === "off" ? "pre" : "pre-wrap", overflowWrap: "break-word", wordBreak: o.wordBreak });
+      const a = parseFloat(o.borderLeftWidth) || 0, v = parseFloat(o.borderTopWidth) || 0;
+      i.style.width = (e.clientWidth || t.width - a - (parseFloat(o.borderRightWidth) || 0)) + a + (parseFloat(o.borderRightWidth) || 0) + "px";
       const u = Math.max(0, E.value.lastIndexOf("@"));
       i.textContent = r.value.slice(0, u);
-      const p = document.createElement("span");
-      p.textContent = r.value.slice(u) || "@", i.append(p);
-      const w = parseFloat(l.lineHeight) || (parseFloat(l.fontSize) || 14) * 1.6, m = t.left + p.offsetLeft + a - e.scrollLeft, S = t.top + p.offsetTop + f - e.scrollTop;
-      return { x: m, y: S, left: m, top: S, right: m + 1, bottom: S + w, width: 1, height: w, toJSON: () => ({ left: m, top: S, width: 1, height: w }) };
+      const f = document.createElement("span");
+      f.textContent = r.value.slice(u) || "@", i.append(f);
+      const k = parseFloat(o.lineHeight) || (parseFloat(o.fontSize) || 14) * 1.6, g = t.left + f.offsetLeft + a - e.scrollLeft, B = t.top + f.offsetTop + v - e.scrollTop;
+      return { x: g, y: B, left: g, top: B, right: g + 1, bottom: B + k, width: 1, height: k, toJSON: () => ({ left: g, top: B, width: 1, height: k }) };
     }
-    D(v, (e) => {
-      e || A();
-    }), oe(A), ne(A);
-    const y = k(() => W.value === null || R.value || M.readonly || c.value || !V.value ? [] : M.users.filter((e) => e.name.toLocaleLowerCase().includes(W.value.toLocaleLowerCase())).slice(0, 8)), s = k(() => y.value.filter((e) => !e.disabled));
-    D(W, () => {
-      n.value = 0, c.value = !1;
-    }), D(y, (e) => {
-      n.value = Math.min(n.value, Math.max(0, s.value.length - 1)), e.length ? I() : b();
+    D(c, (e) => {
+      e || W();
+    }), ne(W), ie(W);
+    const x = C(() => P.value === null || F.value || m.readonly || p.value || !R.value ? [] : m.users.filter((e) => e.name.toLocaleLowerCase().includes(P.value.toLocaleLowerCase())).slice(0, 8)), d = C(() => x.value.filter((e) => !e.disabled));
+    D(P, () => {
+      n.value = 0, p.value = !1;
+    }), D(x, (e) => {
+      n.value = Math.min(n.value, Math.max(0, d.value.length - 1)), e.length ? H() : y();
     }, { flush: "post" });
-    async function x() {
+    async function w() {
       var e;
-      await j(), L.value = ((e = d.value) == null ? void 0 : e.selectionStart) ?? r.value.length, v.value && Y();
+      await j(), L.value = ((e = s.value) == null ? void 0 : e.selectionStart) ?? r.value.length, c.value && Z();
     }
-    D(r, () => void x(), { flush: "post" });
-    async function P(e) {
-      var f, u;
-      if (!e || e.disabled || R.value || M.readonly) return;
-      const t = E.value.replace(/@[^\s@]*$/, "@" + e.name + " "), l = r.value.slice(L.value), a = l.startsWith(" ") ? l.slice(1) : l;
-      r.value = t + a, c.value = !0, n.value = 0, b(), T("select", e), T("change", r.value), await j(), (f = d.value) == null || f.focus(), (u = d.value) == null || u.setSelectionRange(t.length, t.length), L.value = t.length;
+    D(r, () => void w(), { flush: "post" });
+    async function I(e) {
+      var v, u;
+      if (!e || e.disabled || F.value || m.readonly) return;
+      const t = E.value.replace(/@[^\s@]*$/, "@" + e.name + " "), o = r.value.slice(L.value), a = o.startsWith(" ") ? o.slice(1) : o;
+      r.value = t + a, p.value = !0, n.value = 0, y(), V("select", e), V("change", r.value), await j(), (v = s.value) == null || v.focus(), (u = s.value) == null || u.setSelectionRange(t.length, t.length), L.value = t.length;
     }
-    function _(e) {
-      var t, l;
+    function ee(e) {
+      var t, o;
       if (e.key === "Tab") {
-        c.value = !0, b();
+        p.value = !0, y();
         return;
       }
-      y.value.length && (e.key === "Escape" ? (e.preventDefault(), c.value = !0, b()) : e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), v.value ? n.value = (n.value + (e.key === "ArrowDown" ? 1 : -1) + Math.max(1, s.value.length)) % Math.max(1, s.value.length) : I(), (l = (t = $.value) == null ? void 0 : t.querySelector('[data-active="true"]')) == null || l.scrollIntoView({ block: "nearest" })) : e.key === "Enter" && !e.isComposing && s.value[n.value] && (e.preventDefault(), P(s.value[n.value])));
+      x.value.length && (e.key === "Escape" ? (e.preventDefault(), p.value = !0, y()) : e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), c.value ? n.value = (n.value + (e.key === "ArrowDown" ? 1 : -1) + Math.max(1, d.value.length)) % Math.max(1, d.value.length) : H(), (o = (t = $.value) == null ? void 0 : t.querySelector('[data-active="true"]')) == null || o.scrollIntoView({ block: "nearest" })) : e.key === "Enter" && !e.isComposing && d.value[n.value] && (e.preventDefault(), I(d.value[n.value])));
     }
-    function ee() {
-      c.value = !1, x(), T("change", r.value);
+    function te() {
+      p.value = !1, w(), V("change", r.value);
     }
     return q({ focus: () => {
       var e;
-      return (e = d.value) == null ? void 0 : e.focus();
+      return (e = s.value) == null ? void 0 : e.focus();
     }, blur: () => {
       var e;
-      return (e = d.value) == null ? void 0 : e.blur();
+      return (e = s.value) == null ? void 0 : e.blur();
     } }), (e, t) => {
-      var l;
-      return C(), F("div", O(o(H), { class: "hys-ui-ent-mention" }), [
-        ie(z("textarea", {
+      var o;
+      return M(), S("div", O(l(z), { class: "hys-ui-ent-mention" }), [
+        re(A("textarea", {
           ref_key: "input",
-          ref: d,
+          ref: s,
           "onUpdate:modelValue": t[0] || (t[0] = (a) => r.value = a),
           placeholder: h.placeholder || "输入 @ 提及成员",
-          disabled: o(R),
+          disabled: l(F),
           readonly: h.readonly,
           maxlength: h.maxlength,
-          "aria-label": h.ariaLabel || o(G) || "提及输入",
-          "aria-controls": o(v) ? o(B) : void 0,
-          "aria-expanded": o(v),
-          "aria-activedescendant": o(v) ? o(B) + "-" + ((l = s.value[n.value]) == null ? void 0 : l.id) : void 0,
+          "aria-label": h.ariaLabel || l(G) || "提及输入",
+          "aria-controls": l(c) ? l(T) : void 0,
+          "aria-expanded": l(c),
+          "aria-activedescendant": l(c) ? l(T) + "-" + ((o = d.value[n.value]) == null ? void 0 : o.id) : void 0,
           role: "combobox",
-          onKeydown: _,
-          onKeyup: x,
+          onKeydown: ee,
+          onKeyup: w,
           onClick: t[1] || (t[1] = (a) => {
-            c.value = !1, x();
+            p.value = !1, w();
           }),
           onFocus: t[2] || (t[2] = (a) => {
-            V.value = !0, x();
+            R.value = !0, w();
           }),
           onBlur: t[3] || (t[3] = (a) => {
-            V.value = !1, o(b)();
+            R.value = !1, l(y)();
           }),
-          onInput: ee
-        }, null, 40, ye), [
-          [re, r.value]
+          onInput: te
+        }, null, 40, Ce), [
+          [se, r.value]
         ]),
-        (C(), de(se, { to: "body" }, [
-          o(v) && y.value.length ? (C(), F("div", O({
-            key: 0,
-            id: o(B),
-            ref_key: "panel",
-            ref: $
-          }, o(H), {
-            class: "hys-ui-mention-list hys-ui-floating-surface",
-            style: { ...o(X), maxHeight: "min(240px,calc(100vh - 20px))" },
-            role: "listbox",
-            "aria-label": "提及候选成员"
-          }), [
-            (C(!0), F(ue, null, ce(y.value, (a) => {
-              var f, u, p;
-              return C(), F("button", {
-                id: o(B) + "-" + a.id,
-                key: a.id,
-                type: "button",
-                role: "option",
-                disabled: a.disabled,
-                "aria-selected": ((f = s.value[n.value]) == null ? void 0 : f.id) === a.id,
-                "data-active": ((u = s.value[n.value]) == null ? void 0 : u.id) === a.id,
-                class: fe({ "hys-ui-mention-active": ((p = s.value[n.value]) == null ? void 0 : p.id) === a.id }),
-                onMousedown: t[4] || (t[4] = ve(() => {
-                }, ["prevent"])),
-                onPointerenter: (w) => !a.disabled && (n.value = s.value.findIndex((m) => m.id === a.id)),
-                onClick: (w) => P(a)
-              }, [
-                pe(e.$slots, "option", { user: a }, () => [
-                  z("span", ke, U(a.name.slice(0, 1)), 1),
-                  z("span", null, U(a.name), 1)
-                ], !0)
-              ], 42, we);
-            }), 128))
-          ], 16, xe)) : he("", !0)
+        (M(), de(ue, { to: "body" }, [
+          pe(l(ye), {
+            "popup-transition": m.popupTransition,
+            "popup-transition-duration": m.popupTransitionDuration,
+            placement: l(X)
+          }, {
+            default: ce(() => [
+              l(c) && x.value.length ? (M(), S("div", O({
+                key: 0,
+                id: l(T),
+                ref_key: "panel",
+                ref: $
+              }, l(z), {
+                class: "hys-ui-mention-list hys-ui-floating-surface",
+                style: { ...l(Y), maxHeight: "min(240px,calc(100vh - 20px))" },
+                role: "listbox",
+                "aria-label": "提及候选成员"
+              }), [
+                (M(!0), S(ve, null, fe(x.value, (a) => {
+                  var v, u, f;
+                  return M(), S("button", {
+                    id: l(T) + "-" + a.id,
+                    key: a.id,
+                    type: "button",
+                    role: "option",
+                    disabled: a.disabled,
+                    "aria-selected": ((v = d.value[n.value]) == null ? void 0 : v.id) === a.id,
+                    "data-active": ((u = d.value[n.value]) == null ? void 0 : u.id) === a.id,
+                    class: me({ "hys-ui-mention-active": ((f = d.value[n.value]) == null ? void 0 : f.id) === a.id }),
+                    onMousedown: t[4] || (t[4] = he(() => {
+                    }, ["prevent"])),
+                    onPointerenter: (k) => !a.disabled && (n.value = d.value.findIndex((g) => g.id === a.id)),
+                    onClick: (k) => I(a)
+                  }, [
+                    ge(e.$slots, "option", { user: a }, () => [
+                      A("span", Te, U(a.name.slice(0, 1)), 1),
+                      A("span", null, U(a.name), 1)
+                    ], !0)
+                  ], 42, Le);
+                }), 128))
+              ], 16, Me)) : be("", !0)
+            ]),
+            _: 3
+          }, 8, ["popup-transition", "popup-transition-duration", "placement"])
         ]))
       ], 16);
     };
   }
 });
 export {
-  Se as default
+  Re as default
 };

package/dist/components/HysModal/HysModal.vue.js

@@ -1,7 +1,7 @@
 import o from "./HysModal2.vue.js";
 /* empty css              */
-import t from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-518b4887"]]);
+import a from "../../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ a(o, [["__scopeId", "data-v-401a39a8"]]);
 export {
   p as default
 };