@matechat/core/Mention/index.js

前端智能化场景解决方案UI库，轻松构建你的AI应用。

import "./index.css";
import { ref as T, reactive as F, watch as K, nextTick as U, onMounted as G, onBeforeUnmount as J, defineComponent as Q, createElementBlock as O, openBlock as C, Fragment as X, createVNode as P, createBlock as Y, unref as A, withCtx as $, renderSlot as R, Teleport as Z, Transition as ee, createCommentVNode as te, normalizeStyle as ne, normalizeClass as oe } from "vue";
import { PopperTrigger as re } from "@matechat/core/PopperTrigger";
import { computePosition as ie, offset as le } from "@floating-ui/dom";
import { debounce as se, isObject as ae } from "lodash-es";
const ce = {
  modelValue: {
    type: Boolean,
    default: !1
  },
  prefix: {
    type: Array,
    default: () => []
  },
  fitHostWidth: {
    type: Boolean,
    default: !0
  },
  menuClass: {
    type: String
  }
}, ue = ["update:modelValue", "searchChange", "toggleChange"], M = " ", de = "ArrowLeft", fe = "ArrowRight", me = "Escape";
function pe(r, l) {
  const s = T(), t = T(), a = T(), c = F({ top: "0px", left: "0px", width: "" });
  let o, i, g, w, h = "", y, d;
  const E = async () => {
    if (!t.value || !a.value)
      return;
    const { x: e, y: n } = await ie(t.value, a.value, {
      strategy: "fixed",
      placement: "top-start",
      middleware: [le(4)]
    });
    c.top = `${n}px`, c.left = `${e}px`;
  }, D = () => {
    const { width: e } = t.value.getBoundingClientRect();
    c.width = `${e}px`, E();
  }, W = () => {
    r.fitHostWidth && typeof window < "u" && t.value && (d = new window.ResizeObserver(D), d.observe(t.value));
  }, _ = () => {
    t.value && (d == null || d.unobserve(t.value));
  };
  K(
    () => r.modelValue,
    (e, n) => {
      e ? (U(E), W(), typeof window < "u" && window.addEventListener("scroll", x, !0)) : (_(), typeof window < "u" && window.removeEventListener("scroll", x, !0)), n !== void 0 && l("toggleChange", e);
    },
    { immediate: !0 }
  );
  const L = () => {
    i = null, g = -1, w = -1, h = "";
  }, f = (e) => {
    l("update:modelValue", e);
  }, q = () => {
    if (!o)
      return;
    const e = o.value.replace(/[\r\n]/g, M) || "", n = o.selectionStart;
    if (!e.trim() || !n) {
      L();
      return;
    }
    for (let u = 0; u < r.prefix.length; u++) {
      const m = r.prefix[u];
      let p = "", I = !1;
      if (typeof m == "string")
        p = m;
      else if (ae(m))
        p = m.key, I = !!m.onlyInputStart;
      else
        continue;
      const v = e.lastIndexOf(p, n), N = e.lastIndexOf(M, n), S = e.substring(v, n), j = S.charAt(S.length - 1);
      if (v < 0 || v > 0 && I || v < N || j === M)
        L();
      else {
        i = p, g = v, w = n, h = S.slice(p.length);
        return;
      }
    }
  }, k = () => {
    if (q(), !i) {
      f(!1);
      return;
    }
    l("searchChange", { value: h, trigger: i, triggerIndex: g, cursorIndex: w }), f(!0);
  }, V = se(k, 300), b = (e) => {
    (e.code === de || e.code === fe) && (y = setTimeout(() => {
      k(), y && (y = void 0, clearTimeout(y));
    })), e.code === me && f(!1);
  }, B = (e) => {
    var n, u;
    r.modelValue ? (n = t.value) != null && n.contains(e.target) || f(!1) : (u = t.value) != null && u.contains(e.target) && k();
  };
  function x(e) {
    const n = e.target;
    n != null && n.contains(t.value) && E();
  }
  const H = () => {
    t.value && (o = t.value.querySelector("textarea") || t.value.querySelector("input"), o && (o.addEventListener("input", V), o.addEventListener("keydown", b))), document.addEventListener("click", B);
  };
  return G(() => {
    const e = s.value.triggerEl;
    t.value = e.$el ?? e, H();
  }), J(() => {
    f(!1), o == null || o.removeEventListener("input", V), o == null || o.removeEventListener("keydown", b), document.removeEventListener("click", B), typeof window < "u" && window.removeEventListener("scroll", x, !0), _();
  }), { popperTriggerEl: s, overlayEl: a, overlayStyle: c };
}
const ve = /* @__PURE__ */ Q({
  __name: "Mention",
  props: ce,
  emits: ue,
  setup(r, { emit: l }) {
    const s = r, t = l, { popperTriggerEl: a, overlayEl: c, overlayStyle: o } = pe(s, t);
    return (i, g) => (C(), O(
      X,
      null,
      [
        P(
          A(re),
          {
            ref_key: "popperTriggerEl",
            ref: a
          },
          {
            default: $(() => [
              R(i.$slots, "default", {}, void 0, !0)
            ]),
            _: 3
            /* FORWARDED */
          },
          512
          /* NEED_PATCH */
        ),
        (C(), Y(Z, { to: "body" }, [
          P(ee, { name: "mc-mention-fade" }, {
            default: $(() => [
              i.modelValue ? (C(), O(
                "div",
                {
                  key: 0,
                  ref_key: "overlayEl",
                  ref: c,
                  class: oe(["mc-mention", i.menuClass]),
                  style: ne(A(o))
                },
                [
                  R(i.$slots, "menu", {}, void 0, !0)
                ],
                6
                /* CLASS, STYLE */
              )) : te("v-if", !0)
            ]),
            _: 3
            /* FORWARDED */
          })
        ]))
      ],
      64
      /* STABLE_FRAGMENT */
    ));
  }
}), ge = (r, l) => {
  const s = r.__vccOpts || r;
  for (const [t, a] of l)
    s[t] = a;
  return s;
}, z = /* @__PURE__ */ ge(ve, [["__scopeId", "data-v-3397c63c"]]);
z.install = (r) => {
  r.component("McMention", z);
};
export {
  z as McMention
};