hys-ui 0.1.1 → 0.3.0

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

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