@shenjipo/mention-vue2 1.0.0 → 2.1.0

package/dist/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const M=require("@shenjipo/mention-editor"),o=require("vue-demi"),g=require("@floating-ui/dom");function p(n,e,t,l,u,s,r,f){var a=typeof n=="function"?n.options:n;e&&(a.render=e,a.staticRenderFns=t,a._compiled=!0),l&&(a.functional=!0),s&&(a._scopeId="data-v-"+s);var c;if(r?(c=function(i){i=i||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!i&&typeof __VUE_SSR_CONTEXT__<"u"&&(i=__VUE_SSR_CONTEXT__),u&&u.call(this,i),i&&i._registeredComponents&&i._registeredComponents.add(r)},a._ssrRegister=c):u&&(c=f?function(){u.call(this,(a.functional?this.parent:this).$root.$options.shadowRoot)}:u),c)if(a.functional){a._injectStyles=c;var d=a.render;a.render=function(v,m){return c.call(m),d(v,m)}}else{var _=a.beforeCreate;a.beforeCreate=_?[].concat(_,c):[c]}return{exports:n,options:a}}const C={name:"MEditorVue2",props:{modelValue:{type:String,default:""},options:{type:Object,default:()=>({placeholder:"请输入内容，可粘贴图片到此处，按下/唤起快捷指令，"})}},emits:["update:modelValue","fileReject","imageInput"],setup(n,{emit:e,expose:t}){const l=o.ref(null),u=o.ref(null);o.provide("editor",l),o.onMounted(()=>{u.value&&(l.value=new M({element:u.value,placeholder:n.options.placeholder,onChange:r=>{e("update:modelValue",r)},onFileReject:r=>{e("fileReject",r)},onImageInput:r=>{e("imageInput",r)}}))});const s=()=>{l.value.clear(),e("update:modelValue","")};return t({editor:l,clear:s}),{editor:l,editorRef:u,clear:s}}};var S=function(){var e=this,t=e._self._c;return t("div",{staticClass:"mention-editor-wrapper"},[e._t("header"),t("div",{ref:"editorRef",staticClass:"mention-editor"},[e.editor?e._t("default"):e._e()],2),e._t("footer")],2)},I=[],$=p(C,S,I,!1,null,"8f854357",null,null);const y=$.exports;const q={name:"SuggestionMenu",props:{items:{type:Array,required:!0},loadingState:{type:String,default:"idle"},selectedIndex:{type:Number,default:0}},methods:{handleItemClick(n){this.$emit("itemClick",n)}}};var b=function(){var e=this,t=e._self._c;return t("div",{staticClass:"bn-suggestion-menu"},[e.items.length?e._l(e.items,function(l,u){return t("div",{key:l.id,staticClass:"suggestion-menu-item",class:{active:u===e.selectedIndex},on:{mousedown:function(s){return s.preventDefault(),e.handleItemClick(l)}}},[e._v(" "+e._s(l.label)+" ")])}):t("div",{staticClass:"suggestion-menu-item disabled"},[e._v("无数据")])],2)},R=[],k=p(q,b,R,!1,null,"af9205e7",null,null);const w=k.exports;function E(n,e,t,l){const u=o.ref(0),s=r=>r.key==="ArrowUp"?(r.preventDefault(),t.value&&t.value.length&&(u.value=(u.value-1+t.value.length)%t.value.length),!0):r.key==="ArrowDown"?(r.preventDefault(),t.value&&t.value.length&&(u.value=(u.value+1)%t.value.length),!0):r.key==="Enter"&&!r.isComposing?(r.preventDefault(),t.value&&t.value.length&&l&&l(t.value[u.value]),!0):!1;return o.onMounted(()=>{n&&n.domElement&&n.domElement.addEventListener("keydown",s,!0)}),o.onBeforeUnmount(()=>{n&&n.domElement&&n.domElement.removeEventListener("keydown",s,!0)}),o.watch(()=>e,()=>{u.value=0}),u}function x(n,e,t,l=8){const u=o.ref(0);return o.watch([n,e],([s,r])=>{r!=null&&(s&&s.length>0?u.value=r.length:r.length-u.value>l&&t())}),{lastUsefulQueryLength:u}}const F={name:"SuggestionMenuWrapper",components:{SuggestionMenu:w},props:{query:{type:String,required:!0},getItems:{type:Function,required:!0},onItemClick:{type:Function},closeMenu:{type:Function,required:!0},clearQuery:{type:Function,required:!0},insertMention:{type:Function,required:!0}},setup(n){const e=o.ref([]),t=o.ref("idle"),l=o.ref(""),u=o.inject("editor"),s=a=>{n.closeMenu(),n.clearQuery(),n.insertMention(a)},r=E(u.value,n.query,e,s);x(e,l,n.closeMenu);const f=()=>{const a=n.query;l.value=n.query,t.value="loading",n.getItems(n.query).then(c=>{l.value===a&&(e.value=c,t.value="loaded")})};return o.onMounted(f),o.watch(()=>n.query,()=>{f()}),{items:e,loadingState:t,selectedIndex:r,onItemClickInternal:s}}};var Q=function(){var e=this,t=e._self._c;return t("SuggestionMenu",{attrs:{items:e.items,"loading-state":e.loadingState,"selected-index":e.selectedIndex},on:{itemClick:e.onItemClickInternal}})},U=[],V=p(F,Q,U,!1,null,"e4189e8f",null,null);const D=V.exports;function A(n,e,t,l={}){const u=o.ref(null),s=o.ref(null),r=o.ref({});let f=null;o.watch(e,i=>{i&&(u.value={getBoundingClientRect:()=>i},a())},{immediate:!0}),o.watch(n,async i=>{if(!i){d();return}await o.nextTick(),!(!u.value||!s.value)&&(a(),c())});const a=()=>{const i=u.value,v=s.value;!i||!v||g.computePosition(i,v,{placement:l.placement||"bottom-start",middleware:[g.offset(l.offset||8),g.flip(),g.shift({padding:8})]}).then(({x:m,y:h})=>{r.value={position:"absolute",left:`${m}px`,top:`${h}px`}})};function c(){!u.value||!s.value||(f=g.autoUpdate(u.value,s.value,a))}function d(){f&&(f(),f=null)}const _=o.computed(()=>({display:"flex",zIndex:t,...r.value}));return{floatingRef:s,style:_}}const L={name:"SuggestionMenuController",components:{SuggestionMenuWrapper:D},props:{triggerCharacter:{type:String,required:!0},minQueryLength:{type:Number},getItems:{type:Function,required:!0},onItemClick:{type:Function}},setup(n){const e=o.inject("editor"),t=o.ref(null),l=o.computed(()=>{var _;return(((_=t.value)==null?void 0:_.show)&&(!n.minQueryLength||t.value.ignoreQueryLength||!t.value.query.startsWith(" ")&&t.value.query.length>=n.minQueryLength))??!1}),{floatingRef:u,style:s}=A(()=>l.value,()=>{var d;return((d=t.value)==null?void 0:d.referencePos)||null},2e3,{placement:"bottom-start",middleware:[g.offset(10),g.flip({mainAxis:!0,crossAxis:!1}),g.shift(),g.size({apply({availableHeight:d,elements:_}){Object.assign(_.floating.style,{maxHeight:`${d-10}px`})}})],onDismiss(){}});let r=null;return o.onMounted(()=>{r=e.value.suggestionMenus.onUpdate(n.triggerCharacter,d=>{t.value=d})}),o.onBeforeUnmount(()=>{r&&r()}),{state:t,floatingRef:u,style:s,showDom:l,closeMenu:()=>{e.value.suggestionMenus.closeMenu()},clearQuery:()=>{e.value.suggestionMenus.clearQuery()},insertMention:d=>{e.value.suggestionMenus.insertMention(d)}}}};var N=function(){var e=this,t=e._self._c;return e.showDom?t("div",{ref:"floatingRef",style:e.style},[t("SuggestionMenuWrapper",{attrs:{query:e.state.query,getItems:e.getItems,onItemClick:e.onItemClick,closeMenu:e.closeMenu,clearQuery:e.clearQuery,insertMention:e.insertMention}})],1):e._e()},j=[],T=p(L,N,j,!1,null,"f5b73a66",null,null);const W=T.exports;exports.MEditorVue2=y;exports.SuggestionMenuController=W;exports.default=y;

package/dist/index.css

@@ -1 +1 @@
-.mention-editor-wrapper{border:1px solid #d9d9d9;padding:8px 12px;transition:border-color .2s,box-shadow .2s;border-radius:6px}.mention-editor-wrapper:focus-within{border-color:#409eff;box-shadow:0 0 0 2px #409eff33}.mention-editor-wrapper .mention-editor{min-height:80px}.mention-editor-wrapper .mention-editor .tiptap{outline:none;max-height:200px;overflow:auto}.mention-editor-wrapper .mention-editor .tiptap p{margin:0}.mention-editor-wrapper .mention-editor .tiptap p.is-editor-empty:before{content:attr(data-placeholder);color:#aaa;float:left;height:0;pointer-events:none}.mention-editor-wrapper .mention-editor .tiptap .mention{padding:2px 6px;border-radius:8px;color:#4971f5;background-color:#ecf5ff;display:inline-block;margin-right:4px}
+.mention-editor-wrapper{border:1px solid #d9d9d9;padding:8px 12px;transition:border-color .2s,box-shadow .2s;border-radius:6px}.mention-editor-wrapper:focus-within{border-color:#409eff;box-shadow:0 0 0 2px #409eff33}.mention-editor-wrapper .mention-editor{min-height:80px}.mention-editor-wrapper .mention-editor .tiptap{outline:none;max-height:200px;overflow:auto}.mention-editor-wrapper .mention-editor .tiptap p{margin:0}.mention-editor-wrapper .mention-editor .tiptap p.is-editor-empty:before{content:attr(data-placeholder);color:#aaa;float:left;height:0;pointer-events:none}.mention-editor-wrapper .mention-editor .tiptap .mention{padding:2px 6px;border-radius:8px;color:#4971f5;background-color:#ecf5ff;display:inline-block;margin-right:4px}.mention-editor-wrapper .mention-editor .bn-suggestion-menu{width:180px;background-color:#fff;border-radius:8px;box-shadow:0 2px 12px #00000026;overflow:hidden;font-size:14px;padding:4px}.mention-editor-wrapper .mention-editor .bn-suggestion-menu .suggestion-menu-item{display:flex;align-items:center;padding:8px 12px;cursor:pointer;transition:background-color .2s}.mention-editor-wrapper .mention-editor .bn-suggestion-menu .suggestion-menu-item:hover{background-color:#f1f5f9}.mention-editor-wrapper .mention-editor .bn-suggestion-menu .suggestion-menu-item span{flex:1}.mention-editor-wrapper .mention-editor .bn-suggestion-menu .suggestion-menu-item.active{background-color:#f1f5f9}.mention-editor-wrapper .mention-editor .bn-suggestion-menu .suggestion-menu-item.disabled{background-color:unset;cursor:not-allowed}

package/dist/index.d.ts

@@ -1,70 +1,5 @@
-import Vue from 'vue'
-
-/** mention-editor 中透出的 item */
-export interface MentionItem {
-    id: string | number
-    label: string
-    disabled?: boolean
-    [key: string]: any
-}
-
-/** MentionInputVue2 组件类型 */
-declare const MentionInputVue2: Vue & {
-    new(): {
-        /* ---------------- props ---------------- */
-
-        /** v-model 绑定值 */
-        value: string
-
-        /** 占位文本 */
-        placeholder: string
-
-        /** suggestion 渲染容器（可选） */
-        suggestionDom: HTMLElement | null
-
-        /** suggestion Vue 组件构造器 */
-        suggestionComponent: Vue
-
-        /* ---------------- data ---------------- */
-
-        /** 内部 editor 实例（不建议外部直接使用） */
-        editor: any
-
-        /** mention bridge */
-        mentionBridge: any
-
-        /* ---------------- methods ---------------- */
-
-        /** 手动刷新（当前为空实现，预留） */
-        refresh(): void
-
-        /* ---------------- events ---------------- */
-
-        /** v-model */
-        $emit(event: 'input', value: string): this
-
-        /** 内容变化 */
-        $emit(event: 'change', value: string): this
-
-        /** mention 命令触发 */
-        $emit(event: 'command', item: MentionItem): this
-
-        /** 图片输入（拖拽 / 粘贴） */
-        $emit(
-            event: 'onFileChange',
-            file: File,
-            base64: string,
-            width: number,
-            height: number
-        ): this
-
-        /** 非法文件 */
-        $emit(event: 'onFileReject', file: File): this
-
-        /** Enter 键 */
-        $emit(event: 'enter'): this
-    }
-}
-
-export default MentionInputVue2
-export { MentionInputVue2 }
+import { default as MEditorVue2 } from './components/MEditorVue2.vue';
+import { default as SuggestionMenuController } from './components/SuggestionMenu/SuggestionMenuController.vue';
+export { MEditorVue2, SuggestionMenuController, };
+export default MEditorVue2;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,mCAAmC,CAAC;AACjE,OAAO,oBAAoB,CAAC;AAE5B,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,wBAAwB,MAAM,0DAA0D,CAAA;AAG/F,OAAO,EACH,WAAW,EACX,wBAAwB,GAC3B,CAAA;AACD,eAAe,WAAW,CAAA;AAE1B,OAAO,qBAAqB,CAAA"}

package/dist/index.esm.js

@@ -1,135 +1,336 @@
-import { createMentionEditor as _ } from "@shenjipo/mention-editor";
-import g, { ref as l } from "vue";
-function v(t, e = {}) {
-  const o = typeof t == "function" ? t : g.extend(t), u = new o({
-    propsData: e
-  });
-  return u.$mount(), u.$el;
-}
-const C = () => {
-  const t = l([]), e = l(""), o = l(0);
-  return {
-    query: e,
-    setQuery: (s) => {
-      e.value = s;
-    },
-    items: t,
-    selectedIndex: o,
-    confirm: (s) => {
-      o.value = s;
-    },
-    setOptions: (s) => {
-      t.value = [...s];
-    }
-  };
-};
-function $(t, e, o, u, r, d, s, c) {
-  var n = typeof t == "function" ? t.options : t;
-  e && (n.render = e, n.staticRenderFns = o, n._compiled = !0), u && (n.functional = !0), d && (n._scopeId = "data-v-" + d);
-  var a;
-  if (s ? (a = function(i) {
-    i = i || // cached call
+import q from "@shenjipo/mention-editor";
+import { ref as d, provide as b, onMounted as p, onBeforeUnmount as h, watch as g, inject as M, nextTick as k, computed as C } from "vue-demi";
+import { computePosition as x, offset as I, flip as S, shift as $, autoUpdate as E, size as w } from "@floating-ui/dom";
+function y(n, e, t, l, u, o, r, f) {
+  var s = typeof n == "function" ? n.options : n;
+  e && (s.render = e, s.staticRenderFns = t, s._compiled = !0), l && (s.functional = !0), o && (s._scopeId = "data-v-" + o);
+  var i;
+  if (r ? (i = function(a) {
+    a = a || // cached call
     this.$vnode && this.$vnode.ssrContext || // stateful
-    this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !i && typeof __VUE_SSR_CONTEXT__ < "u" && (i = __VUE_SSR_CONTEXT__), r && r.call(this, i), i && i._registeredComponents && i._registeredComponents.add(s);
-  }, n._ssrRegister = a) : r && (a = c ? function() {
-    r.call(
+    this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !a && typeof __VUE_SSR_CONTEXT__ < "u" && (a = __VUE_SSR_CONTEXT__), u && u.call(this, a), a && a._registeredComponents && a._registeredComponents.add(r);
+  }, s._ssrRegister = i) : u && (i = f ? function() {
+    u.call(
       this,
-      (n.functional ? this.parent : this).$root.$options.shadowRoot
+      (s.functional ? this.parent : this).$root.$options.shadowRoot
     );
-  } : r), a)
-    if (n.functional) {
-      n._injectStyles = a;
-      var h = n.render;
-      n.render = function(p, m) {
-        return a.call(m), h(p, m);
+  } : u), i)
+    if (s.functional) {
+      s._injectStyles = i;
+      var c = s.render;
+      s.render = function(v, m) {
+        return i.call(m), c(v, m);
       };
     } else {
-      var f = n.beforeCreate;
-      n.beforeCreate = f ? [].concat(f, a) : [a];
+      var _ = s.beforeCreate;
+      s.beforeCreate = _ ? [].concat(_, i) : [i];
     }
   return {
-    exports: t,
-    options: n
+    exports: n,
+    options: s
   };
 }
-const R = {
-  name: "MentionInputVue2",
-  data() {
-    return {
-      flag: !0
+const F = {
+  name: "MEditorVue2",
+  props: {
+    modelValue: { type: String, default: "" },
+    options: {
+      type: Object,
+      default: () => ({
+        placeholder: "请输入内容，可粘贴图片到此处，按下/唤起快捷指令，"
+      })
+    }
+  },
+  emits: ["update:modelValue", "fileReject", "imageInput"],
+  setup(n, { emit: e, expose: t }) {
+    const l = d(null), u = d(null);
+    b("editor", l), p(() => {
+      u.value && (l.value = new q({
+        element: u.value,
+        placeholder: n.options.placeholder,
+        onChange: (r) => {
+          e("update:modelValue", r);
+        },
+        onFileReject: (r) => {
+          e("fileReject", r);
+        },
+        onImageInput: (r) => {
+          e("imageInput", r);
+        }
+      }));
+    });
+    const o = () => {
+      l.value.clear(), e("update:modelValue", "");
+    };
+    return t({ editor: l, clear: o }), {
+      editor: l,
+      editorRef: u,
+      clear: o
     };
+  }
+};
+var Q = function() {
+  var e = this, t = e._self._c;
+  return t("div", { staticClass: "mention-editor-wrapper" }, [e._t("header"), t("div", { ref: "editorRef", staticClass: "mention-editor" }, [e.editor ? e._t("default") : e._e()], 2), e._t("footer")], 2);
+}, U = [], V = /* @__PURE__ */ y(
+  F,
+  Q,
+  U,
+  !1,
+  null,
+  "8f854357",
+  null,
+  null
+);
+const ne = V.exports;
+const A = {
+  name: "SuggestionMenu",
+  props: {
+    items: { type: Array, required: !0 },
+    loadingState: { type: String, default: "idle" },
+    selectedIndex: { type: Number, default: 0 }
+  },
+  methods: {
+    handleItemClick(n) {
+      this.$emit("itemClick", n);
+    }
+  }
+};
+var D = function() {
+  var e = this, t = e._self._c;
+  return t("div", { staticClass: "bn-suggestion-menu" }, [e.items.length ? e._l(e.items, function(l, u) {
+    return t("div", { key: l.id, staticClass: "suggestion-menu-item", class: { active: u === e.selectedIndex }, on: { mousedown: function(o) {
+      return o.preventDefault(), e.handleItemClick(l);
+    } } }, [e._v(" " + e._s(l.label) + " ")]);
+  }) : t("div", { staticClass: "suggestion-menu-item disabled" }, [e._v("无数据")])], 2);
+}, L = [], N = /* @__PURE__ */ y(
+  A,
+  D,
+  L,
+  !1,
+  null,
+  "af9205e7",
+  null,
+  null
+);
+const W = N.exports;
+function T(n, e, t, l) {
+  const u = d(0), o = (r) => r.key === "ArrowUp" ? (r.preventDefault(), t.value && t.value.length && (u.value = (u.value - 1 + t.value.length) % t.value.length), !0) : r.key === "ArrowDown" ? (r.preventDefault(), t.value && t.value.length && (u.value = (u.value + 1) % t.value.length), !0) : r.key === "Enter" && !r.isComposing ? (r.preventDefault(), t.value && t.value.length && l && l(t.value[u.value]), !0) : !1;
+  return p(() => {
+    n && n.domElement && n.domElement.addEventListener("keydown", o, !0);
+  }), h(() => {
+    n && n.domElement && n.domElement.removeEventListener("keydown", o, !0);
+  }), g(
+    () => e,
+    () => {
+      u.value = 0;
+    }
+  ), u;
+}
+function j(n, e, t, l = 8) {
+  const u = d(0);
+  return g(
+    [n, e],
+    ([o, r]) => {
+      r != null && (o && o.length > 0 ? u.value = r.length : r.length - u.value > l && t());
+    }
+  ), {
+    lastUsefulQueryLength: u
+  };
+}
+const O = {
+  name: "SuggestionMenuWrapper",
+  components: {
+    SuggestionMenu: W
   },
   props: {
-    value: {
-      type: String,
-      default: ""
-    },
-    placeholder: {
-      type: String,
-      default: "请输入..."
-    },
-    suggestionDom: {
-      type: HTMLElement,
-      default: null
+    query: { type: String, required: !0 },
+    getItems: { type: Function, required: !0 },
+    onItemClick: { type: Function },
+    closeMenu: { type: Function, required: !0 },
+    clearQuery: { type: Function, required: !0 },
+    insertMention: { type: Function, required: !0 }
+  },
+  setup(n) {
+    const e = d([]), t = d("idle"), l = d(""), u = M("editor"), o = (s) => {
+      n.closeMenu(), n.clearQuery(), n.insertMention(s);
+    }, r = T(
+      u.value,
+      n.query,
+      e,
+      o
+    );
+    j(e, l, n.closeMenu);
+    const f = () => {
+      const s = n.query;
+      l.value = n.query, t.value = "loading", n.getItems(n.query).then((i) => {
+        l.value === s && (e.value = i, t.value = "loaded");
+      });
+    };
+    return p(f), g(
+      () => n.query,
+      () => {
+        f();
+      }
+    ), {
+      items: e,
+      loadingState: t,
+      selectedIndex: r,
+      onItemClickInternal: o
+    };
+  }
+};
+var P = function() {
+  var e = this, t = e._self._c;
+  return t("SuggestionMenu", { attrs: { items: e.items, "loading-state": e.loadingState, "selected-index": e.selectedIndex }, on: { itemClick: e.onItemClickInternal } });
+}, z = [], B = /* @__PURE__ */ y(
+  O,
+  P,
+  z,
+  !1,
+  null,
+  "e4189e8f",
+  null,
+  null
+);
+const K = B.exports;
+function X(n, e, t, l = {}) {
+  const u = d(null), o = d(null), r = d({});
+  let f = null;
+  g(
+    e,
+    (a) => {
+      a && (u.value = {
+        getBoundingClientRect: () => a
+      }, s());
     },
-    suggestionComponent: {
-      type: Function,
-      // Vue component constructor
-      required: !0
+    { immediate: !0 }
+  ), g(
+    n,
+    async (a) => {
+      if (!a) {
+        c();
+        return;
+      }
+      await k(), !(!u.value || !o.value) && (s(), i());
     }
+  );
+  const s = () => {
+    const a = u.value, v = o.value;
+    !a || !v || x(a, v, {
+      placement: l.placement || "bottom-start",
+      middleware: [
+        I(l.offset || 8),
+        S(),
+        $({ padding: 8 })
+      ]
+    }).then(({ x: m, y: R }) => {
+      r.value = {
+        position: "absolute",
+        left: `${m}px`,
+        top: `${R}px`
+      };
+    });
+  };
+  function i() {
+    !u.value || !o.value || (f = E(u.value, o.value, s));
+  }
+  function c() {
+    f && (f(), f = null);
+  }
+  const _ = C(() => ({
+    display: "flex",
+    zIndex: t,
+    ...r.value
+  }));
+  return {
+    floatingRef: o,
+    style: _
+  };
+}
+const H = {
+  name: "SuggestionMenuController",
+  components: {
+    SuggestionMenuWrapper: K
   },
-  data() {
-    return {
-      editor: null,
-      mentionBridge: C()
-    };
+  props: {
+    triggerCharacter: { type: String, required: !0 },
+    minQueryLength: { type: Number },
+    getItems: { type: Function, required: !0 },
+    onItemClick: { type: Function }
   },
-  mounted() {
-    const t = v(
-      this.suggestionComponent,
-      { mentionBridge: this.mentionBridge }
-    );
-    this.editor = _({
-      element: this.$refs.editorRef,
-      content: this.value,
-      onCommand: (e) => {
-        this.$emit("command", e);
+  setup(n) {
+    const e = M("editor"), t = d(null), l = C(() => {
+      var _;
+      return (((_ = t.value) == null ? void 0 : _.show) && (!n.minQueryLength || t.value.ignoreQueryLength || !t.value.query.startsWith(" ") && t.value.query.length >= n.minQueryLength)) ?? !1;
+    }), { floatingRef: u, style: o } = X(
+      () => l.value,
+      () => {
+        var c;
+        return ((c = t.value) == null ? void 0 : c.referencePos) || null;
       },
-      suggestionDom: t,
-      bridge: this.mentionBridge,
-      placeholder: this.placeholder,
-      onUpdate: (e) => {
-        this.$emit("input", e), this.$emit("change", e);
+      2e3,
+      {
+        placement: "bottom-start",
+        middleware: [
+          I(10),
+          S({ mainAxis: !0, crossAxis: !1 }),
+          $(),
+          w({
+            apply({ availableHeight: c, elements: _ }) {
+              Object.assign(_.floating.style, {
+                maxHeight: `${c - 10}px`
+              });
+            }
+          })
+        ],
+        onDismiss() {
+        }
+      }
+    );
+    let r = null;
+    return p(() => {
+      r = e.value.suggestionMenus.onUpdate(
+        n.triggerCharacter,
+        (c) => {
+          t.value = c;
+        }
+      );
+    }), h(() => {
+      r && r();
+    }), {
+      state: t,
+      floatingRef: u,
+      style: o,
+      showDom: l,
+      closeMenu: () => {
+        e.value.suggestionMenus.closeMenu();
       },
-      onImageInput: (e, o, u, r) => {
-        this.$emit("onFileChange", e, o, u, r);
+      clearQuery: () => {
+        e.value.suggestionMenus.clearQuery();
       },
-      onFileReject: (e) => {
-        this.$emit("onFileReject", e);
+      insertMention: (c) => {
+        e.value.suggestionMenus.insertMention(c);
       }
-    }), this.editor.editor.on("enter", () => {
-      this.$emit("enter");
-    });
-  },
-  methods: {
-    refresh() {
-    }
+    };
   }
 };
-var y = function() {
-  var e = this, o = e._self._c;
-  return o("div", { staticClass: "mention-editor-wrapper" }, [e._t("header"), o("div", { ref: "editorRef", staticClass: "mention-editor" }), e._t("footer")], 2);
-}, F = [], I = /* @__PURE__ */ $(
-  R,
-  y,
-  F,
+var G = function() {
+  var e = this, t = e._self._c;
+  return e.showDom ? t("div", { ref: "floatingRef", style: e.style }, [t("SuggestionMenuWrapper", { attrs: { query: e.state.query, getItems: e.getItems, onItemClick: e.onItemClick, closeMenu: e.closeMenu, clearQuery: e.clearQuery, insertMention: e.insertMention } })], 1) : e._e();
+}, J = [], Y = /* @__PURE__ */ y(
+  H,
+  G,
+  J,
   !1,
   null,
-  null,
+  "f5b73a66",
   null,
   null
 );
-const B = I.exports;
+const ue = Y.exports;
 export {
-  B as default
+  ne as MEditorVue2,
+  ue as SuggestionMenuController,
+  ne as default
 };

package/package.json

@@ -1,39 +1,38 @@
 {
-  "name": "@shenjipo/mention-vue2",
-  "version": "1.0.0",
-  "type": "module",
-  "main": "dist/index.esm.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
-  "style": "dist/index.css",
-  "files": [
-    "dist"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "vue": "^2.7.7",
-    "vue-class-component": "^6.0.0",
-    "vue-property-decorator": "^7.0.0",
-    "@shenjipo/mention-editor": "1.0.0"
-  },
-  "devDependencies": {
-    "@types/node": "^16.11.45",
-    "@vitejs/plugin-vue2": "^1.1.2",
-    "@vue/tsconfig": "^0.1.3",
-    "cpx": "^1.5.0",
-    "npm-run-all": "^4.1.5",
-    "sass": "^1.97.0",
-    "terser": "^5.14.2",
-    "typescript": "^5.0.0",
-    "vite": "^4.0.2",
-    "vite-plugin-dts": "^4.5.4",
-    "vue-tsc": "^0.38.8"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build && cpx src/index.d.ts dist",
-    "build:watch": "vite build --watch"
-  }
+    "name": "@shenjipo/mention-vue2",
+    "version": "2.1.0",
+    "main": "dist/index.cjs.js",
+    "module": "dist/index.esm.js",
+    "types": "dist/index.d.ts",
+    "style": "dist/index.css",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "build:watch": "vite build --watch"
+    },
+    "files": [
+        "dist"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@floating-ui/dom": "^1.1.9",
+        "@shenjipo/mention-editor": "workspace:*",
+        "vue": "^2.7.7",
+        "vue-demi": "^0.14.10"
+    },
+    "devDependencies": {
+        "@types/node": "^16.11.45",
+        "@vitejs/plugin-vue2": "^1.1.2",
+        "@vue/tsconfig": "^0.1.3",
+        "cpx": "^1.5.0",
+        "npm-run-all": "^4.1.5",
+        "sass": "^1.97.0",
+        "terser": "^5.14.2",
+        "typescript": "^5.0.0",
+        "vite": "^4.0.2",
+        "vite-plugin-dts": "^4.5.4",
+        "vue-tsc": "^0.38.8"
+    }
 }

package/dist/utils.d.ts

@@ -1,5 +0,0 @@
-import { default as Vue, ComponentOptions, VueConstructor } from 'vue';
-type Vue2Component = ComponentOptions<Vue> | VueConstructor<Vue>;
-export declare function renderVueComponentToDom(component: Vue2Component, propsData?: Record<string, any>): Element;
-export {};
-//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AACA,OAAO,GAAG,MAAM,KAAK,CAAC;AACtB,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAE3D,KAAK,aAAa,GACZ,gBAAgB,CAAC,GAAG,CAAC,GACrB,cAAc,CAAC,GAAG,CAAC,CAAA;AAEzB,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,aAAa,EAAE,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,WAOpG"}