hys-ui 0.2.0 → 0.4.0

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

@@ -1,166 +1,1116 @@
-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 ga, useAttrs as ba, useSlots as xa, useId as ka, computed as y, ref as E, shallowRef as Mt, watch as A, onDeactivated as Ma, onMounted as wt, openBlock as d, createElementBlock as h, mergeProps as Me, unref as r, createElementVNode as X, renderSlot as F, createCommentVNode as T, normalizeClass as we, Fragment as Z, renderList as Ct, toDisplayString as B, createTextVNode as V, toHandlers as Dt, createBlock as Ce, resolveDynamicComponent as wa, withModifiers as De, Teleport as Ca, createVNode as Da, withCtx as Ta, normalizeStyle as re, nextTick as Ie, h as Tt } from "vue";
+import Sa from "../../motion/PopupMotion.js";
+import { useHysControlState as Ba, useHysFormItemContext as za } from "../../composables/formContext.js";
+import { useHysRootAttrs as Ea } from "../../config.js";
+import { useFloating as Aa } from "../../composables/useFloating.js";
+import { useMentionCaret as Fa } from "../../composables/useMentionCaret.js";
+import { useMentionOptions as Ra } from "../../composables/useMentionOptions.js";
+import { useMentionList as Wa } from "../../composables/useMentionList.js";
+import { useMentionModel as La, diffMentionEntities as qa } from "../../composables/useMentionModel.js";
+import { mentionTriggers as Oa, mentionSegments as Ha, rebaseMentionEntities as $e, serializeMentionDocument as St, matchMention as Ia, normalizeMentionEntities as Bt, deserializeMentionDocument as zt } from "../../composables/mentionDocument.js";
+import { readMentionSelection as Et, isNativeMentionInput as At, writeMentionSelection as $a } from "../../composables/mentionEditor.js";
+const Na = ["data-size", "data-status"], Pa = { class: "hys-ui-mention-input-row" }, Ka = {
+  key: 0,
+  class: "hys-ui-mention-affix"
+}, ja = ["data-invalid"], Va = ["textContent", "contenteditable", "tabindex", "data-placeholder"], Ua = ["name", "value", "disabled"], Qa = {
+  key: 1,
+  class: "hys-ui-mention-affix"
+}, Ya = ["aria-label"], Ga = {
+  key: 0,
+  class: "hys-ui-mention-count"
+}, Ja = ["data-placement"], Xa = {
+  key: 1,
+  class: "hys-ui-mention-message",
+  role: "status"
+}, Za = {
+  key: 2,
+  class: "hys-ui-mention-message",
+  role: "status"
+}, _a = ["id", "aria-label", "aria-busy"], en = ["id", "aria-label", "aria-posinset", "aria-setsize", "disabled", "aria-selected", "data-active", "data-create", "onPointerenter", "onClick"], tn = ["src"], an = {
+  key: 1,
   class: "hys-ui-mention-avatar",
   "aria-hidden": "true"
-}, Se = /* @__PURE__ */ te({
+}, nn = { class: "hys-ui-mention-label" }, ln = { key: 2 }, on = {
+  key: 3,
+  class: "hys-ui-mention-message",
+  role: "status"
+}, rn = ["disabled"], Ft = "application/x-hys-mention+json", xn = /* @__PURE__ */ ga({
+  inheritAttrs: !1,
   __name: "HysMention",
-  props: /* @__PURE__ */ K({
+  props: {
+    modelValue: {},
     users: {},
+    options: {},
+    fieldNames: {},
+    loadOptions: {},
+    sources: {},
+    debounce: { default: 180 },
+    throttle: {},
+    pageSize: {},
+    cache: { type: [Boolean, Object] },
+    historyKey: {},
+    recentLimit: {},
+    recommendations: {},
+    recommendOnFocus: { type: Boolean },
+    minQueryLength: { default: 0 },
+    defaultValue: { default: "" },
+    prefix: {},
+    triggers: {},
+    boundary: {},
+    allowSpaces: { type: Boolean },
+    matchTrigger: {},
+    split: { default: " " },
+    filterOption: { type: [Boolean, Function], default: void 0 },
+    searchMode: {},
+    searchFields: {},
+    sortOptions: { type: [Boolean, Function] },
+    groupBy: {},
+    validateSearch: {},
+    whole: { type: Boolean },
+    checkIsWhole: {},
+    validateEntity: {},
+    invalidEntity: { default: "mark" },
+    canSelect: {},
+    beforeRemove: {},
+    parseEntities: {},
+    highlightMentions: { type: Boolean },
+    entityClass: {},
+    allowCreate: { type: Boolean },
+    createOption: {},
+    formatMention: {},
+    replaceRest: { type: Boolean },
+    selectOnTab: { type: Boolean },
+    highlightMatch: { type: Boolean },
+    loading: { type: Boolean },
+    notFoundText: {},
+    errorText: {},
+    maxOptions: { default: 8 },
+    placement: { default: "bottom-start" },
+    showArrow: { type: Boolean },
+    offset: { default: 6 },
+    autoAdjustOverflow: { type: Boolean, default: !0 },
+    popupWidth: {},
+    popupMaxHeight: {},
+    zIndex: {},
+    virtual: { type: Boolean },
+    itemHeight: {},
+    overscan: {},
+    appendTo: { type: [String, Boolean], default: "body" },
+    popupClass: {},
+    popupStyle: { type: [Boolean, null, String, Object, Array] },
+    type: { default: "textarea" },
+    rows: {},
+    name: {},
+    autofocus: { type: Boolean },
     placeholder: {},
     disabled: { type: Boolean },
     readonly: { type: Boolean },
     maxlength: {},
-    ariaLabel: {}
-  }, {
-    modelValue: { default: "" },
-    modelModifiers: {}
-  }),
-  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) => {
+    minlength: {},
+    required: { type: Boolean },
+    clearable: { type: Boolean },
+    showCount: { type: Boolean },
+    autosize: { type: [Boolean, Object] },
+    restoreFocus: { type: Boolean, default: !0 },
+    shortcuts: {},
+    locale: {},
+    defaultEntities: {},
+    entities: {},
+    ariaLabel: {},
+    status: {},
+    size: {},
+    popupTransition: {},
+    popupTransitionDuration: {}
+  },
+  emits: ["update:modelValue", "update:entities", "select", "search", "create", "loadError", "openChange", "change", "documentChange", "entityAdd", "entityRemove", "wholeRemove", "clear", "focus", "blur"],
+  setup(f, { expose: Rt, emit: Wt }) {
+    const n = f, g = Wt, U = ba(), Te = xa(), Ne = Ea(), { disabled: _, size: Lt, label: qt } = Ba(n), se = za(), Se = ka(), R = y(() => ({
+      input: "提及输入",
+      list: "提及候选成员",
+      placeholder: "输入 @ 提及成员",
+      loading: "正在加载候选…",
+      empty: "没有匹配的候选",
+      error: n.errorText ?? "候选加载失败",
+      retry: "重试",
+      more: "加载更多",
+      recent: "最近使用",
+      recommended: "常用推荐",
+      clear: "清空输入",
+      create: "创建 {value}",
+      ...n.locale
+    })), P = La(
+      n,
+      (e, t, a) => {
+        a && g("update:modelValue", e.text), g("update:entities", e.entities), a && g("change", e.text);
+      },
+      (e, t) => {
+        const { added: a, removed: l } = qa(
+          t.entities,
+          e.entities
+        );
+        for (const i of l) g("entityRemove", i);
+        for (const i of a) g("entityAdd", i);
+        g("documentChange", e);
+      }
+    ), { value: s, entities: q } = P, u = E(), ue = E(), Pe = E(), ce = E(), Ke = Mt({}), W = E(s.value.length), H = E(!1), je = E(!1), Ve = E(!1), M = E(!1), de = E(""), w = E(!1), I = E(0), C = Mt(), b = y(() => !_.value && !n.readonly), x = y(() => n.type === "rich"), z = y(
+      () => Number.isFinite(n.maxlength) ? Math.max(0, Math.floor(n.maxlength)) : void 0
+    ), Be = y(
+      () => Number.isFinite(n.minlength) ? Math.max(0, Math.floor(n.minlength)) : void 0
+    ), ze = y(() => n.required || se.required.value), Ue = y(
+      () => n.status === "error" || se.invalid.value || z.value !== void 0 && s.value.length > z.value || je.value && (ze.value && !s.value || !!s.value && Be.value !== void 0 && s.value.length < Be.value)
+    ), $ = y(() => Oa(n)), ve = (e) => $.value.find((t) => t.prefix === e), Q = (e) => {
       var t;
-      return !!((t = d.value) != null && t.contains(e));
-    }, focus: () => {
-      var e;
-      return (e = d.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(() => {
-      var e;
-      return ((e = E.value.match(/@([^\s@]*)$/)) == null ? void 0 : e[1]) ?? null;
+      return ((t = ve(e)) == null ? void 0 : t.split) ?? n.split;
+    }, Ee = (e, t) => Ia(e, t, $.value, n), Ae = y(() => Ee(s.value, W.value)), m = y(() => {
+      var i;
+      if (!H.value || !b.value || M.value) return;
+      const e = n.recommendOnFocus && $.value.length ? {
+        prefix: $.value[0].prefix,
+        query: "",
+        start: W.value,
+        end: W.value,
+        manual: !0
+      } : void 0, t = C.value ?? Ae.value ?? e;
+      if (!t) return;
+      const a = ve(t.prefix), l = (a == null ? void 0 : a.minQueryLength) ?? n.minQueryLength;
+      if (!(!t.manual && Number.isFinite(l) && Array.from(t.query).length < Math.max(0, l) || ((i = n.validateSearch) == null ? void 0 : i.call(n, t.query, t)) === !1))
+        return t;
+    }), Ot = y(
+      () => m.value && ve(m.value.prefix)
+    ), {
+      entries: Ht,
+      choices: ee,
+      busy: Y,
+      loadingMore: fe,
+      hasMore: Fe,
+      loadError: G,
+      retry: te,
+      loadMore: J,
+      cancelLoad: Qe,
+      remember: It
+    } = Ra(
+      n,
+      m,
+      Ot,
+      w,
+      s,
+      (e, t) => g("loadError", e, t)
+    ), {
+      rows: sn,
+      enabled: ae,
+      visibleRows: Ye,
+      topSpacer: Ge,
+      bottomSpacer: Je,
+      rowHeight: Xe,
+      onScroll: Ze,
+      reset: $t,
+      ensureVisible: Nt
+    } = Wa(n, ee, Pe, J), S = y(() => ae.value[I.value]);
+    A(
+      [
+        () => {
+          var e;
+          return (e = m.value) == null ? void 0 : e.query;
+        },
+        () => {
+          var e;
+          return (e = m.value) == null ? void 0 : e.prefix;
+        },
+        () => {
+          var e;
+          return (e = m.value) == null ? void 0 : e.start;
+        }
+      ],
+      () => {
+        I.value = 0, w.value = !1, $t();
+        const e = m.value;
+        e && g("search", e.query, e.prefix, e);
+      }
+    ), A(ae, (e, t) => {
+      var i;
+      const a = (i = t[I.value]) == null ? void 0 : i.key, l = a === void 0 ? -1 : e.findIndex((o) => o.key === a);
+      I.value = l >= 0 ? l : Math.min(I.value, Math.max(0, e.length - 1));
+    });
+    const he = y(
+      () => !!m.value && !w.value && (ee.value.length > 0 || Y.value || !!G.value || !!C.value || !!m.value.manual || n.notFoundText !== void 0 || !!Te.empty)
+    ), { anchor: Pt, removeMirror: Kt } = Fa(
+      u,
+      s,
+      () => {
+        var e, t;
+        return ((e = m.value) == null ? void 0 : e.start) ?? ((t = Ae.value) == null ? void 0 : t.start) ?? W.value;
+      }
+    );
+    function jt(e) {
+      return typeof e == "number" && Number.isFinite(e) ? Math.max(0, e) + "px" : typeof e == "string" ? e : void 0;
+    }
+    const { placement: _e, open: D, style: Vt, show: Re, close: We, update: et, schedule: ne } = Aa(
+      Pt,
+      ue,
+      {
+        placement: () => n.placement,
+        get strategy() {
+          return n.appendTo === "body" ? "fixed" : "absolute";
+        },
+        get gap() {
+          return n.offset;
+        },
+        get autoAdjustOverflow() {
+          return n.autoAdjustOverflow;
+        },
+        width: () => n.popupWidth,
+        zIndex: () => n.zIndex,
+        closeOnEscape: !1,
+        closeOnTab: !1,
+        onPosition({ anchor: e, placement: t, x: a, y: l, width: i, height: o }) {
+          if (!n.showArrow) return;
+          const v = (c, L) => Math.max(8, Math.min(L - 8, c)) + "px";
+          Ke.value = t.startsWith("top") || t.startsWith("bottom") ? { left: v(e.left + e.width / 2 - a, i) } : { top: v(e.top + e.height / 2 - l, o) };
+        }
+      }
+    ), tt = y(() => {
+      const e = jt(n.popupMaxHeight);
+      return e ? "min(" + e + ", calc(100dvh - 20px))" : void 0;
+    });
+    A(
+      [he, ee],
+      ([e]) => {
+        e ? Re() : We();
+      },
+      { flush: "post" }
+    ), A(D, (e) => {
+      e || Kt(), g("openChange", e);
+    }), A(
+      [D, u, ue],
+      ([e, t, a], l, i) => {
+        if (!e || !t || !a || typeof ResizeObserver > "u")
+          return;
+        const o = new ResizeObserver(ne);
+        o.observe(t), o.observe(a), i(() => o.disconnect());
+      },
+      { flush: "post" }
+    ), A(
+      [
+        () => n.placement,
+        () => n.offset,
+        () => n.showArrow,
+        () => n.popupWidth,
+        tt
+      ],
+      ne,
+      { flush: "post" }
+    ), Ma(() => {
+      H.value = !1, M.value = !1, C.value = void 0;
     });
-    let i;
-    function A() {
-      i == null || i.remove(), i = void 0;
-    }
-    function Z() {
-      const e = d.value, t = e.getBoundingClientRect();
-      if (!t.width && !t.height) return t;
-      const l = 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";
-      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 }) };
-    }
-    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();
-    }, { flush: "post" });
-    async function x() {
+    function k() {
+      return u.value ? Et(u.value, W.value) : { start: W.value, end: W.value };
+    }
+    function le() {
+      W.value = k().start, D.value && ne();
+    }
+    function K(e) {
+      u.value && (!x.value || H.value || u.value.ownerDocument.activeElement === u.value) && $a(u.value, e), W.value = e.start, D.value && ne();
+    }
+    function O() {
+      w.value = !0, Qe(), We();
+    }
+    function at(e) {
+      var l;
+      if (!b.value || !u.value || M.value) return !1;
+      if (u.value.focus(), H.value = !0, !(e != null && e.prefix) && !(e != null && e.query) && (e == null ? void 0 : e.position) === void 0 && Ae.value)
+        return w.value = !1, Ie(() => {
+          he.value && Re();
+        }), !0;
+      const t = Math.max(
+        0,
+        Math.min(s.value.length, (e == null ? void 0 : e.position) ?? k().start)
+      ), a = (e == null ? void 0 : e.prefix) ?? ((l = $.value[0]) == null ? void 0 : l.prefix) ?? "@";
+      return K({ start: t, end: t }), C.value = {
+        prefix: a,
+        query: (e == null ? void 0 : e.query) ?? "",
+        start: t,
+        end: t,
+        manual: !0
+      }, w.value = !1, Ie(() => {
+        he.value && Re();
+      }), !0;
+    }
+    function nt(e) {
+      return At(e) ? e.value : e.textContent ?? "";
+    }
+    const ye = y(() => Ha(s.value, q.value));
+    function lt(e) {
+      return typeof n.entityClass == "function" ? n.entityClass(e) : n.entityClass;
+    }
+    function it(e) {
+      var t;
+      return ((t = n.validateEntity) == null ? void 0 : t.call(n, e)) === !1;
+    }
+    function pe(e) {
+      const t = u.value;
+      if (!x.value || !t || M.value) return;
+      const a = t.ownerDocument, l = a.createDocumentFragment();
+      for (const i of ye.value)
+        if (!i.entity) l.append(a.createTextNode(i.text));
+        else {
+          const o = a.createElement("span");
+          o.setAttribute("data-mention-entity", String(i.entity.id)), o.setAttribute("data-mention-start", String(i.entity.start)), o.setAttribute("contenteditable", "false"), it(i.entity) && o.setAttribute("aria-invalid", "true"), o.className = ["hys-ui-mention-entity", lt(i.entity)].filter(Boolean).join(" "), o.textContent = i.text, l.append(o);
+        }
+      t.replaceChildren(l), e && H.value && K(e);
+    }
+    A(
+      [
+        ye,
+        x,
+        () => n.entityClass,
+        () => n.validateEntity,
+        u
+      ],
+      () => {
+        const e = H.value ? k() : void 0;
+        pe(e);
+      },
+      { flush: "post" }
+    ), wt(() => {
       var e;
-      await j(), L.value = ((e = d.value) == null ? void 0 : e.selectionStart) ?? r.value.length, v.value && Y();
-    }
-    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;
-    }
-    function _(e) {
-      var t, l;
-      if (e.key === "Tab") {
-        c.value = !0, b();
+      Ve.value = !0, pe(), n.autofocus && ((e = u.value) == null || e.focus());
+    });
+    function Le() {
+      u.value && ce.value && (ce.value.scrollTop = u.value.scrollTop, ce.value.scrollLeft = u.value.scrollLeft);
+    }
+    function Ut() {
+      Le(), D.value && et();
+    }
+    function qe() {
+      const e = u.value;
+      if (!e || !n.autosize || !(e instanceof HTMLTextAreaElement)) {
+        e instanceof HTMLTextAreaElement && (e.style.removeProperty("height"), e.style.removeProperty("overflow-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])));
+      const t = typeof n.autosize == "object" ? n.autosize : {}, a = getComputedStyle(e), l = parseFloat(a.lineHeight) || (parseFloat(a.fontSize) || 14) * 1.6, i = (parseFloat(a.borderTopWidth) || 0) + (parseFloat(a.borderBottomWidth) || 0), o = (parseFloat(a.paddingTop) || 0) + (parseFloat(a.paddingBottom) || 0), v = Math.max(1, t.minRows ?? n.rows ?? 2) * l + o + i, c = t.maxRows === void 0 ? 1 / 0 : Math.max(v, t.maxRows * l + o + i), L = e.scrollTop;
+      e.style.height = "auto";
+      const j = e.scrollHeight + i;
+      e.style.height = Math.max(v, Math.min(c, j)) + "px", e.style.overflowY = j > c ? "auto" : "hidden", e.scrollTop = L, Le(), D.value && ne();
     }
-    function ee() {
-      c.value = !1, x(), T("change", r.value);
+    A([s, de, () => n.autosize, u], qe, {
+      flush: "post"
+    }), A(
+      [u, () => n.autosize],
+      ([e, t], a, l) => {
+        if (!e || !t || typeof ResizeObserver > "u") return;
+        let i = e.clientWidth;
+        const o = new ResizeObserver(() => {
+          i !== e.clientWidth && (i = e.clientWidth, qe());
+        });
+        o.observe(e), l(() => o.disconnect());
+      },
+      { flush: "post" }
+    ), wt(qe), A(ye, Le, { flush: "post" });
+    const Qt = y(() => {
+      if (!n.autosize) return {};
+      const e = typeof n.autosize == "object" ? n.autosize : {};
+      return {
+        minHeight: "calc(" + (e.minRows ?? n.rows ?? 2) + "lh + 24px)",
+        maxHeight: e.maxRows ? "calc(" + e.maxRows + "lh + 24px)" : void 0
+      };
+    }), ot = y(
+      () => !!n.highlightMentions && !x.value && !M.value && !!q.value.length
+    ), Yt = y(
+      () => x.value ? "div" : n.type === "text" ? "input" : "textarea"
+    );
+    let rt = 0;
+    async function N(e, t, a = k(), l, i = !1) {
+      const o = ++rt, c = b.value && (z.value === void 0 || e.text.length <= z.value || e.text.length < s.value.length) && await P.commit(e, a, l, !0, i);
+      return o !== rt || !u.value || M.value || (x.value ? pe() : At(u.value) && u.value.value !== s.value && (u.value.value = s.value), K(c ? t : a)), c;
     }
-    return q({ focus: () => {
-      var e;
-      return (e = d.value) == null ? void 0 : e.focus();
-    }, blur: () => {
+    function me(e, t, a, l = []) {
+      const i = s.value.slice(0, t) + e + s.value.slice(a), o = [
+        ...$e(P.document.value, i, { start: t, end: a }),
+        ...l
+      ];
+      return { text: i, entities: Bt(i, o) };
+    }
+    let ie;
+    function Gt(e, t, a) {
+      if (!t) return;
+      let { start: l, end: i } = t;
+      if (l === i && e.length < s.value.length) {
+        const o = s.value.length - e.length;
+        a != null && a.endsWith("Backward") && (l = Math.max(0, l - o)), a != null && a.endsWith("Forward") && (i = Math.min(s.value.length, i + o));
+      }
+      if (e.startsWith(s.value.slice(0, l)) && e.endsWith(s.value.slice(i)) && e.length >= l + s.value.length - i)
+        return { start: l, end: i };
+    }
+    function st(e) {
+      const t = e.target, a = nt(t);
+      if (M.value) {
+        de.value = a;
+        return;
+      }
+      const l = Et(t, a.length), i = ie ?? { start: W.value, end: W.value }, o = Gt(a, ie, e.inputType);
+      if (ie = void 0, a === s.value) return;
+      w.value = !1, C.value && l.start >= C.value.start && a.startsWith(s.value.slice(0, C.value.start)) && !Ee(a, l.start) ? C.value = {
+        ...C.value,
+        query: a.slice(C.value.start, l.start),
+        end: l.start
+      } : C.value = void 0;
+      const v = $e(P.document.value, a, o);
+      N({ text: a, entities: v }, l, i);
+    }
+    function Jt() {
+      ie = k(), de.value = u.value ? nt(u.value) : s.value, M.value = !0;
+    }
+    function Xt(e) {
+      M.value && (M.value = !1, st(e));
+    }
+    async function ge(e) {
+      if (!b.value || M.value) return !1;
+      O();
+      const t = await P.history(e, k());
+      return t ? (x.value && pe(), K(t), !0) : !1;
+    }
+    function Zt(e) {
+      if (!(M.value || e.isComposing || !b.value))
+        if (ie = k(), e.inputType === "historyUndo" || e.inputType === "historyRedo") {
+          if (!e.cancelable) return;
+          e.preventDefault(), ge(e.inputType === "historyUndo" ? "undo" : "redo");
+        } else x.value && (e.inputType === "insertParagraph" || e.inputType === "insertLineBreak") && (e.preventDefault(), oe(`
+`));
+    }
+    function oe(e, t = []) {
+      const { start: a, end: l } = k();
+      if (z.value !== void 0) {
+        const c = Math.max(
+          0,
+          z.value - (s.value.length - (l - a))
+        );
+        e = e.slice(0, c).replace(/[\uD800-\uDBFF]$/, "");
+      }
+      const i = Bt(e, t).map((c) => ({
+        ...c,
+        start: a + c.start,
+        end: a + c.end
+      })), o = me(e, a, l, i);
+      w.value = !1, C.value = void 0;
+      const v = a + e.length;
+      N(o, { start: v, end: v }, { start: a, end: l });
+    }
+    function ut(e, t = !1) {
+      if (!e.clipboardData || t && !b.value) return;
+      const { start: a, end: l } = k();
+      if (a === l) return;
+      const i = s.value.slice(a, l), o = q.value.filter(
+        (v) => v.start >= a && v.end <= l
+      );
+      if (!(!x.value && !o.length)) {
+        e.preventDefault(), e.clipboardData.setData("text/plain", i);
+        try {
+          e.clipboardData.setData(
+            Ft,
+            St({
+              text: i,
+              entities: o.map((v) => ({
+                ...v,
+                start: v.start - a,
+                end: v.end - a
+              }))
+            })
+          );
+        } catch {
+        }
+        t && oe("");
+      }
+    }
+    function _t(e) {
+      if (!b.value || !e.clipboardData) return;
+      const t = e.clipboardData.getData(Ft);
+      if (!(!t && !x.value)) {
+        e.preventDefault();
+        try {
+          const a = zt(t);
+          oe(a.text, a.entities);
+        } catch {
+          oe(e.clipboardData.getData("text/plain"));
+        }
+      }
+    }
+    function ea(e) {
+      !x.value || !b.value || (e.preventDefault(), e.dataTransfer && oe(e.dataTransfer.getData("text/plain")));
+    }
+    function ta(e) {
+      const t = q.value.find(
+        (i) => i.start === e.start && i.prefix === e.prefix && e.end <= i.end
+      );
+      if (t) return t.end;
+      if (!n.replaceRest || e.manual) return e.end;
+      let a = e.end;
+      const l = Q(e.prefix);
+      for (; a < s.value.length && !/\s/.test(s.value[a]) && !(l && s.value.startsWith(l, a)) && !$.value.some(({ prefix: i }) => s.value.startsWith(i, a)); )
+        a++;
+      return a;
+    }
+    async function ct(e, t, a, l, i) {
+      var xt, kt;
+      if (!b.value || M.value || e.disabled || ((xt = n.canSelect) == null ? void 0 : xt.call(n, e, t)) === !1)
+        return !1;
+      const o = ve(t.prefix), v = (o == null ? void 0 : o.formatMention) ?? n.formatMention, c = (v == null ? void 0 : v(e, t)) ?? t.prefix + String(e.value);
+      if (!c) return !1;
+      const L = Q(t.prefix), j = s.value.slice(a), be = L && j.startsWith(L) ? L.length : 0, p = {
+        id: e.id ?? e.value,
+        value: e.value,
+        label: typeof e.label == "string" ? e.label : String(e.value),
+        type: e.type ?? (o == null ? void 0 : o.type) ?? t.prefix,
+        prefix: t.prefix,
+        text: c,
+        start: t.start,
+        end: t.start + c.length,
+        payload: e.payload
+      }, xe = me(c + L, t.start, a + be, [p]);
+      if (z.value !== void 0 && xe.text.length > z.value) return !1;
+      O();
+      const ke = p.end + L.length, bt = await N(
+        xe,
+        { start: ke, end: ke },
+        k(),
+        i
+      );
+      return bt && (It(e, t.prefix), l && n.restoreFocus && ((kt = u.value) != null && kt.isConnected) && u.value.ownerDocument.activeElement !== u.value && (u.value.focus(), K({ start: ke, end: ke }))), O(), bt;
+    }
+    function Oe(e, t = !0) {
+      const a = m.value;
+      !e || !a || e.user.disabled || Y.value || w.value || ct(e.option, a, ta(a), t, () => {
+        g("select", e.user, a.prefix, e.option), e.created && g("create", e.option, a);
+      });
+    }
+    function aa(e, t) {
+      var v;
+      const a = k(), l = (t == null ? void 0 : t.prefix) ?? e.prefix ?? ((v = $.value[0]) == null ? void 0 : v.prefix) ?? "@", i = Math.max(
+        0,
+        Math.min(s.value.length, Math.trunc((t == null ? void 0 : t.start) ?? a.start))
+      ), o = Math.max(
+        i,
+        Math.min(s.value.length, Math.trunc((t == null ? void 0 : t.end) ?? a.end))
+      );
+      return ct(
+        e,
+        { prefix: l, query: "", start: i, end: o, manual: !0 },
+        o,
+        (t == null ? void 0 : t.focus) !== !1
+      );
+    }
+    function dt(e, t = !0, a = !1) {
+      const l = Q(e.prefix), i = t && l && s.value.startsWith(l, e.end) ? e.end + l.length : e.end;
+      return O(), N(
+        me("", e.start, i),
+        { start: e.start, end: e.start },
+        k(),
+        a ? () => g("wholeRemove", String(e.value), e.prefix) : void 0
+      );
+    }
+    function na(e) {
+      const t = q.value.find(
+        (a) => typeof e == "object" ? a.id === e.id && a.start === e.start && a.end === e.end : a.id === e
+      );
+      return t ? dt(t) : Promise.resolve(!1);
+    }
+    function la(e) {
+      var j, be;
+      if (!b.value || !n.whole && !n.checkIsWhole && !x.value)
+        return;
+      const { start: t, end: a } = k();
+      if (t !== a) return;
+      const l = e.key === "Backspace", i = q.value.find(
+        (p) => l ? p.end === t || p.end + Q(p.prefix).length === t && s.value.startsWith(Q(p.prefix), p.end) : p.start === t
+      );
+      if (i && (((j = n.checkIsWhole) == null ? void 0 : j.call(n, String(i.value), i.prefix)) ?? (n.whole || x.value))) {
+        e.preventDefault(), dt(i, !0, !0);
+        return;
+      }
+      if (!l) return;
+      const o = s.value.slice(0, t), v = $.value.map(({ prefix: p }) => Q(p)).filter((p) => p && o.endsWith(p)).sort((p, xe) => xe.length - p.length)[0] ?? "", c = Ee(s.value, t - v.length);
+      if (!(c != null && c.query)) return;
+      const L = Ht.value.some(
+        ({ option: p }) => String(p.value) === c.query && (!p.prefix || p.prefix === c.prefix)
+      );
+      (((be = n.checkIsWhole) == null ? void 0 : be.call(n, c.query, c.prefix)) ?? (n.whole && L)) && (e.preventDefault(), O(), N(
+        me("", c.start, t),
+        { start: c.start, end: c.start },
+        k(),
+        () => g("wholeRemove", c.query, c.prefix)
+      ));
+    }
+    const ia = y(
+      () => Ve.value && n.invalidEntity === "remove" && b.value && n.validateEntity ? q.value.filter((e) => !n.validateEntity(e)) : []
+    );
+    A(
+      ia,
+      async (e) => {
+        if (!e.length) return;
+        let t = P.document.value;
+        for (const i of [...e].reverse()) {
+          const o = t.text.slice(0, i.start) + t.text.slice(i.end);
+          t = {
+            text: o,
+            entities: $e(t, o, i)
+          };
+        }
+        const a = k(), l = Math.min(t.text.length, a.start);
+        await N(
+          t,
+          { start: l, end: l },
+          a,
+          void 0,
+          !0
+        );
+      },
+      { immediate: !0, flush: "post" }
+    );
+    function oa(e) {
+      const t = ae.value.length;
+      t && (I.value = e === "first" ? 0 : e === "last" ? t - 1 : (I.value + (e === "next" ? 1 : -1) + t) % t, Ie(() => {
+        S.value && Nt(S.value.key);
+      }));
+    }
+    function vt(e, t) {
+      t === "open" ? (e.preventDefault(), at()) : D.value ? t === "close" ? (e.preventDefault(), e.stopPropagation(), O()) : t === "retry" || t === "select" && G.value && !S.value ? G.value && !Y.value && (e.preventDefault(), te()) : t === "select" ? S.value && (e.preventDefault(), Oe(S.value)) : ae.value.length && (e.preventDefault(), oa(t)) : t === "next" && w.value && m.value && (e.preventDefault(), w.value = !1);
+    }
+    const ft = {
+      ArrowDown: "next",
+      ArrowUp: "previous",
+      Enter: "select",
+      Escape: "close"
+    };
+    function ra(e) {
+      var l;
+      if (e.isComposing || M.value || e.keyCode === 229) return;
+      const t = [
+        e.ctrlKey && "Ctrl",
+        e.metaKey && "Meta",
+        e.altKey && "Alt",
+        e.shiftKey && "Shift",
+        e.key
+      ].filter(Boolean).join("+"), a = (l = n.shortcuts) == null ? void 0 : l[t];
+      a ? vt(e, a) : (e.ctrlKey || e.metaKey) && !e.altKey && ["z", "y"].includes(e.key.toLowerCase()) ? (e.preventDefault(), ge(
+        e.shiftKey || e.key.toLowerCase() === "y" ? "redo" : "undo"
+      )) : e.key === "Backspace" || e.key === "Delete" ? la(e) : e.key === "Tab" ? n.selectOnTab && D.value && S.value ? Oe(S.value, !1) : O() : e.key === "PageDown" && D.value && Fe.value ? (e.preventDefault(), J()) : !e.ctrlKey && !e.altKey && !e.metaKey && ft[e.key] && vt(e, ft[e.key]);
+    }
+    function sa(e) {
+      H.value = !0, w.value = !1, le(), g("focus", e);
+    }
+    function ua(e) {
+      var t;
+      e.relatedTarget instanceof Node && ((t = ue.value) != null && t.contains(e.relatedTarget)) || (H.value = !1, je.value = !0, C.value = void 0, Qe(), We(), g("blur", e));
+    }
+    function He() {
       var e;
-      return (e = d.value) == null ? void 0 : e.blur();
-    } }), (e, t) => {
+      (e = u.value) == null || e.focus();
+    }
+    function ca(e) {
+      if (!x.value || !b.value || !(e.target instanceof Element))
+        return;
+      const t = e.target.closest("[data-mention-start]");
+      if (!t) return;
+      const a = q.value.find(
+        ({ start: l }) => l === Number(t.dataset.mentionStart)
+      );
+      a && (e.preventDefault(), He(), K({ start: a.start, end: a.end }), C.value = {
+        prefix: a.prefix,
+        query: "",
+        start: a.start,
+        end: a.end,
+        manual: !0
+      }, w.value = !1);
+    }
+    async function ht() {
+      if (!b.value) return !1;
+      O();
+      const e = await N(
+        { text: "", entities: [] },
+        { start: 0, end: 0 },
+        k(),
+        () => g("clear")
+      );
+      return e && n.restoreFocus && He(), e;
+    }
+    async function da(e) {
+      let t;
+      try {
+        t = typeof e == "string" ? zt(e) : e;
+      } catch {
+        return !1;
+      }
+      return !t || typeof t.text != "string" || !Array.isArray(t.entities) ? !1 : (O(), N(t, { start: t.text.length, end: t.text.length }));
+    }
+    function yt() {
+      const { class: e, style: t, ...a } = U;
+      return a;
+    }
+    const pt = y(() => ({
+      id: String(U.id ?? se.id.value ?? "") || void 0,
+      role: "combobox",
+      "aria-label": n.ariaLabel ?? U["aria-label"] ?? qt.value ?? R.value.input,
+      "aria-invalid": Ue.value || void 0,
+      "aria-required": ze.value || void 0,
+      "aria-disabled": _.value || void 0,
+      "aria-readonly": n.readonly || void 0,
+      "aria-describedby": se.describedBy.value ?? U["aria-describedby"],
+      "aria-controls": D.value ? Se : void 0,
+      "aria-expanded": D.value,
+      "aria-activedescendant": va.value,
+      "aria-autocomplete": "list"
+    })), mt = (e) => Se + "-option-" + encodeURIComponent(e), va = y(
+      () => D.value && S.value && Ye.value.some((e) => {
+        var t;
+        return e.key === ((t = S.value) == null ? void 0 : t.key);
+      }) ? mt(S.value.key) : void 0
+    );
+    function fa(e) {
+      return e.option.group ? e.option.group + "，" + e.user.name : e.user.name;
+    }
+    function ha(e) {
+      const t = ae.value.findIndex(({ key: a }) => a === e.key);
+      t >= 0 && (I.value = t);
+    }
+    function ya(e) {
+      e.pointerType === "touch" && e.cancelable && e.preventDefault();
+    }
+    const gt = {
+      keydown: ra,
+      keyup: le,
+      click: () => {
+        w.value = !1, le();
+      },
+      focus: sa,
+      blur: ua,
+      input: st,
+      beforeinput: Zt,
+      compositionstart: Jt,
+      compositionend: Xt,
+      scroll: Ut,
+      paste: _t,
+      copy: ut,
+      cut: (e) => ut(e, !0),
+      drop: ea,
+      dblclick: ca
+    };
+    A(s, le, { flush: "post" });
+    const pa = ({ name: e }) => {
       var l;
-      return C(), F("div", O(o(H), { class: "hys-ui-ent-mention" }), [
-        ie(z("textarea", {
-          ref_key: "input",
-          ref: d,
-          "onUpdate:modelValue": t[0] || (t[0] = (a) => r.value = a),
-          placeholder: h.placeholder || "输入 @ 提及成员",
-          disabled: o(R),
-          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,
-          role: "combobox",
-          onKeydown: _,
-          onKeyup: x,
-          onClick: t[1] || (t[1] = (a) => {
-            c.value = !1, x();
-          }),
-          onFocus: t[2] || (t[2] = (a) => {
-            V.value = !0, x();
-          }),
-          onBlur: t[3] || (t[3] = (a) => {
-            V.value = !1, o(b)();
-          }),
-          onInput: ee
-        }, null, 40, ye), [
-          [re, r.value]
-        ]),
-        (C(), de(se, { to: "body" }, [
-          o(v) && y.value.length ? (C(), F("div", O({
+      const t = ((l = m.value) == null ? void 0 : l.query.trim()) ?? "", a = n.highlightMatch && t ? e.toLocaleLowerCase().indexOf(t.toLocaleLowerCase()) : -1;
+      return Tt(
+        "span",
+        a < 0 ? e : [
+          e.slice(0, a),
+          Tt(
+            "mark",
+            { class: "hys-ui-mention-match" },
+            e.slice(a, a + t.length)
+          ),
+          e.slice(a + t.length)
+        ]
+      );
+    }, ma = ({ value: e }) => e;
+    return Rt({
+      input: u,
+      dropdownVisible: D,
+      focus: He,
+      blur: () => {
+        var e;
+        return (e = u.value) == null ? void 0 : e.blur();
+      },
+      open: at,
+      close: O,
+      update: et,
+      retry: te,
+      loadMore: J,
+      insertMention: aa,
+      removeMention: na,
+      getEntities: () => q.value.map((e) => ({ ...e })),
+      getDocument: () => ({
+        text: s.value,
+        entities: q.value.map((e) => ({ ...e }))
+      }),
+      setDocument: da,
+      serialize: () => St(P.document.value),
+      clear: ht,
+      undo: () => ge("undo"),
+      redo: () => ge("redo")
+    }), (e, t) => (d(), h("div", Me(r(Ne), {
+      class: ["hys-ui-ent-mention", r(U).class],
+      style: r(U).style,
+      "data-size": r(Lt),
+      "data-status": Ue.value ? "error" : f.status
+    }), [
+      X("div", Pa, [
+        Te.prefix ? (d(), h("div", Ka, [
+          F(e.$slots, "prefix", {}, void 0, !0)
+        ])) : T("", !0),
+        X("div", {
+          class: we(["hys-ui-mention-editor", {
+            "hys-ui-mention-highlighted": ot.value,
+            "hys-ui-mention-autosize": f.autosize
+          }])
+        }, [
+          ot.value ? (d(), h("div", {
             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)
+            ref_key: "highlightLayer",
+            ref: ce,
+            class: we(["hys-ui-mention-highlight-layer", { "hys-ui-mention-single": f.type === "text" }]),
+            "aria-hidden": "true"
+          }, [
+            (d(!0), h(Z, null, Ct(ye.value, (a) => (d(), h(Z, {
+              key: a.start
+            }, [
+              a.entity ? (d(), h("span", {
+                key: 0,
+                class: we(["hys-ui-mention-entity", lt(a.entity)]),
+                "data-invalid": it(a.entity) || void 0
+              }, B(a.text), 11, ja)) : (d(), h(Z, { key: 1 }, [
+                V(B(a.text), 1)
+              ], 64))
+            ], 64))), 128))
+          ], 2)) : T("", !0),
+          x.value ? (d(), h("div", Me({
+            key: 1,
+            ref_key: "input",
+            ref: u
+          }, { ...yt(), ...pt.value }, Dt(gt, !0), {
+            textContent: B(r(s)),
+            class: "hys-ui-mention-rich",
+            style: Qt.value,
+            contenteditable: b.value ? "true" : "false",
+            tabindex: r(_) ? -1 : 0,
+            "data-placeholder": f.placeholder ?? R.value.placeholder
+          }), null, 16, Va)) : (d(), Ce(wa(Yt.value), Me({
+            key: 2,
+            ref_key: "input",
+            ref: u
+          }, { ...yt(), ...pt.value }, Dt(gt), {
+            value: M.value ? de.value : r(s),
+            type: f.type === "text" ? "text" : void 0,
+            rows: f.type === "textarea" ? f.rows : void 0,
+            name: f.name,
+            autofocus: f.autofocus,
+            placeholder: f.placeholder ?? R.value.placeholder,
+            disabled: r(_),
+            readonly: f.readonly,
+            required: ze.value,
+            maxlength: z.value,
+            minlength: Be.value,
+            onSelect: le
+          }), null, 16, ["value", "type", "rows", "name", "autofocus", "placeholder", "disabled", "readonly", "required", "maxlength", "minlength"])),
+          x.value && f.name ? (d(), h("input", {
+            key: 3,
+            type: "hidden",
+            name: f.name,
+            value: r(s),
+            disabled: r(_)
+          }, null, 8, Ua)) : T("", !0)
+        ], 2),
+        Te.suffix || f.clearable && b.value && r(s) ? (d(), h("div", Qa, [
+          F(e.$slots, "suffix", {}, void 0, !0),
+          f.clearable && b.value && r(s) ? (d(), h("button", {
+            key: 0,
+            class: "hys-ui-mention-clear",
+            type: "button",
+            "aria-label": R.value.clear,
+            onMousedown: t[0] || (t[0] = De(() => {
+            }, ["prevent"])),
+            onClick: ht
+          }, [
+            F(e.$slots, "clear-icon", {}, () => [
+              t[7] || (t[7] = X("span", { "aria-hidden": "true" }, "×", -1))
+            ], !0)
+          ], 40, Ya)) : T("", !0)
+        ])) : T("", !0)
+      ]),
+      f.showCount ? (d(), h("div", Ga, [
+        F(e.$slots, "count", {
+          count: r(s).length,
+          max: z.value
+        }, () => [
+          V(B(r(s).length), 1),
+          z.value !== void 0 ? (d(), h(Z, { key: 0 }, [
+            V(" / " + B(z.value), 1)
+          ], 64)) : T("", !0)
+        ], !0)
+      ])) : T("", !0),
+      (d(), Ce(Ca, {
+        to: f.appendTo || "body",
+        disabled: f.appendTo === !1
+      }, [
+        Da(r(Sa), {
+          "popup-transition": f.popupTransition,
+          "popup-transition-duration": f.popupTransitionDuration,
+          placement: r(_e)
+        }, {
+          default: Ta(() => [
+            r(D) && he.value ? (d(), h("div", Me({
+              key: 0,
+              ref_key: "panel",
+              ref: ue
+            }, r(Ne), {
+              class: ["hys-ui-mention-list hys-ui-floating-surface", [f.popupClass, { "hys-ui-mention-virtual": f.virtual }]],
+              style: [
+                r(Vt),
+                { maxHeight: tt.value, overflowY: "visible" },
+                f.popupStyle
+              ],
+              "data-placement": r(_e)
+            }), [
+              f.showArrow ? (d(), h("span", {
+                key: 0,
+                class: "hys-ui-mention-arrow",
+                style: re(Ke.value),
+                "aria-hidden": "true"
+              }, null, 4)) : T("", !0),
+              F(e.$slots, "header", { context: m.value }, void 0, !0),
+              r(Y) ? (d(), h("div", Xa, [
+                F(e.$slots, "loading", {}, () => [
+                  V(B(R.value.loading), 1)
+                ], !0)
+              ])) : !r(ee).length && !r(G) ? (d(), h("div", Za, [
+                F(e.$slots, "empty", {}, () => [
+                  V(B(f.notFoundText ?? R.value.empty), 1)
+                ], !0)
+              ])) : T("", !0),
+              X("div", {
+                id: r(Se),
+                ref_key: "listbox",
+                ref: Pe,
+                class: "hys-ui-mention-options",
+                role: "listbox",
+                "aria-label": R.value.list,
+                "aria-busy": r(Y) || r(fe) || void 0,
+                onScroll: t[2] || (t[2] = //@ts-ignore
+                (...a) => r(Ze) && r(Ze)(...a))
               }, [
-                pe(e.$slots, "option", { user: a }, () => [
-                  z("span", ke, U(a.name.slice(0, 1)), 1),
-                  z("span", null, U(a.name), 1)
+                r(Ge) ? (d(), h("div", {
+                  key: 0,
+                  style: re({ height: r(Ge) + "px" }),
+                  role: "presentation"
+                }, null, 4)) : T("", !0),
+                (d(!0), h(Z, null, Ct(r(Ye), (a) => {
+                  var l, i, o;
+                  return d(), h(Z, {
+                    key: a.key
+                  }, [
+                    "group" in a ? (d(), h("div", {
+                      key: 0,
+                      class: "hys-ui-mention-group",
+                      role: "presentation",
+                      style: re(f.virtual ? { height: r(Xe) + "px" } : void 0)
+                    }, [
+                      F(e.$slots, "group", {
+                        label: a.group,
+                        context: m.value
+                      }, () => [
+                        V(B(a.group), 1)
+                      ], !0)
+                    ], 4)) : (d(), h("button", {
+                      key: 1,
+                      id: mt(a.key),
+                      type: "button",
+                      role: "option",
+                      tabindex: "-1",
+                      "aria-label": fa(a.entry),
+                      "aria-posinset": a.index + 1,
+                      "aria-setsize": r(ee).length,
+                      disabled: a.entry.user.disabled,
+                      "aria-selected": ((l = S.value) == null ? void 0 : l.key) === a.key,
+                      "data-active": ((i = S.value) == null ? void 0 : i.key) === a.key,
+                      class: we([
+                        a.entry.option.class,
+                        { "hys-ui-mention-active": ((o = S.value) == null ? void 0 : o.key) === a.key }
+                      ]),
+                      style: re([
+                        a.entry.option.style,
+                        f.virtual ? { height: r(Xe) + "px" } : void 0
+                      ]),
+                      "data-create": a.entry.created || void 0,
+                      onMousedown: t[1] || (t[1] = De(() => {
+                      }, ["prevent"])),
+                      onPointerdown: ya,
+                      onPointerenter: (v) => ha(a.entry),
+                      onClick: (v) => Oe(a.entry)
+                    }, [
+                      F(e.$slots, "option", {
+                        user: a.entry.user,
+                        option: a.entry.option,
+                        context: m.value,
+                        created: !!a.entry.created
+                      }, () => [
+                        F(e.$slots, "avatar", {
+                          option: a.entry.option
+                        }, () => [
+                          a.entry.option.avatar ? (d(), h("img", {
+                            key: 0,
+                            class: "hys-ui-mention-avatar",
+                            src: a.entry.option.avatar,
+                            alt: ""
+                          }, null, 8, tn)) : (d(), h("span", an, B(Array.from(a.entry.user.name)[0]), 1))
+                        ], !0),
+                        X("span", nn, [
+                          typeof a.entry.option.label == "function" ? (d(), Ce(ma, {
+                            key: 0,
+                            value: a.entry.option.label(a.entry.option)
+                          }, null, 8, ["value"])) : (d(), Ce(pa, {
+                            key: 1,
+                            name: a.entry.user.name
+                          }, null, 8, ["name"])),
+                          a.entry.option.description ? (d(), h("small", ln, B(a.entry.option.description), 1)) : T("", !0)
+                        ])
+                      ], !0)
+                    ], 46, en))
+                  ], 64);
+                }), 128)),
+                r(Je) ? (d(), h("div", {
+                  key: 1,
+                  style: re({ height: r(Je) + "px" }),
+                  role: "presentation"
+                }, null, 4)) : T("", !0)
+              ], 40, _a),
+              !r(Y) && r(G) ? (d(), h("div", on, [
+                F(e.$slots, "error", {
+                  error: r(G).reason,
+                  retry: r(te),
+                  context: m.value
+                }, () => [
+                  V(B(R.value.error) + " ", 1),
+                  X("button", {
+                    type: "button",
+                    class: "hys-ui-mention-retry",
+                    tabindex: "-1",
+                    onMousedown: t[3] || (t[3] = De(() => {
+                    }, ["prevent"])),
+                    onClick: t[4] || (t[4] = //@ts-ignore
+                    (...a) => r(te) && r(te)(...a))
+                  }, B(R.value.retry), 33)
                 ], !0)
-              ], 42, we);
-            }), 128))
-          ], 16, xe)) : he("", !0)
-        ]))
-      ], 16);
-    };
+              ])) : r(Fe) || r(fe) ? (d(), h("button", {
+                key: 4,
+                class: "hys-ui-mention-more",
+                type: "button",
+                tabindex: "-1",
+                disabled: r(fe),
+                onMousedown: t[5] || (t[5] = De(() => {
+                }, ["prevent"])),
+                onClick: t[6] || (t[6] = //@ts-ignore
+                (...a) => r(J) && r(J)(...a))
+              }, B(r(fe) ? R.value.loading : R.value.more), 41, rn)) : T("", !0),
+              F(e.$slots, "footer", {
+                context: m.value,
+                hasMore: r(Fe),
+                loadMore: r(J)
+              }, void 0, !0)
+            ], 16, Ja)) : T("", !0)
+          ]),
+          _: 3
+        }, 8, ["popup-transition", "popup-transition-duration", "placement"])
+      ], 8, ["to", "disabled"]))
+    ], 16, Na));
   }
 });
 export {
-  Se as default
+  xn as default
 };