@mojsica/vue-mention-input 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,35 @@
-# Temporary Holding Version
+# @mojsica/vue-mention-input
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Contenteditable `@` mention input for Vue 3 with chips and structured `MentionContentSection[]` value.
+
+Shares behavior with the Angular/React packages via private `@mojsica/mention-core`.
+
+## Install
+
+```bash
+npm i @mojsica/vue-mention-input
+```
+
+```ts
+import { MentionInput } from '@mojsica/vue-mention-input';
+import '@mojsica/vue-mention-input/styles.css';
+```
+
+```vue
+<MentionInput
+  v-model="sections"
+  :users="users"
+  :loading="loading"
+  @mention-query-change="onQuery"
+/>
+```
+
+## Local demo
+
+```bash
+pnpm --filter demo-vue dev
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),x="mi-mention",k="mi-mention-draft";function F(o){const a=window.getSelection();if(!(a!=null&&a.rangeCount))return;const t=a.getRangeAt(0);t.collapsed||t.deleteContents();let l=null;o.forEach(f=>{t.insertNode(f),l=f,t.setStartAfter(f)}),l&&(t.collapse(!0),a.removeAllRanges(),a.addRange(t))}function b(o){const a=[];return o.forEach(t=>{if(t.type==="text"){const l=t.message.split(`
+`);l.forEach((f,r)=>{f&&a.push(document.createTextNode(f)),r<l.length-1&&a.push(document.createElement("br"))})}if(t.type==="mention"){const l=document.createElement("span");l.classList.add(x),l.setAttribute("contenteditable","false"),l.setAttribute("userId",t.userId||""),l.textContent=` @${t.userName} `,a.push(l)}}),a}function D(o){var l;const a=z(o),t=[];return a.childNodes.length===1&&((l=o.childNodes[0])==null?void 0:l.tagName)==="BR"||a.childNodes.forEach(f=>{var r,u;if(f.nodeType===Node.TEXT_NODE){const s=(r=f.textContent)==null?void 0:r.replace(/\u00A0/g," ");s!=null&&s.trim()&&t.push({type:"text",message:s})}if(f.nodeType===Node.ELEMENT_NODE){const s=f;if(s.classList.contains(x)||s.classList.contains("tag-wrap")){const c=s.getAttribute("userId")||"",m=((u=s.textContent)==null?void 0:u.replace(/^\s*@/,"").trim())||"";t.push({type:"mention",userId:c,userName:m})}else s.tagName==="BR"&&t.push({type:"text",message:`
+`})}}),t}function z(o){const a=o.cloneNode(!0),t=l=>{const f=Array.from(l.childNodes);for(const r of f){if(r.nodeType!==Node.ELEMENT_NODE)continue;const u=r,s=u.parentElement;if(!s)continue;const c=u.tagName.toUpperCase();if(c==="DIV"){const m=Array.from(u.childNodes);if(m.length===1&&m[0].nodeType===Node.ELEMENT_NODE&&m[0].tagName==="BR")s.insertBefore(m[0],r),s.removeChild(r),t(s);else{const N=document.createElement("br");for(s.insertBefore(N,r);r.firstChild;)s.insertBefore(r.firstChild,r);s.removeChild(r),t(s)}}else if(c==="SPAN"&&!u.hasAttribute("userId")||c==="FONT"){for(;r.firstChild;)s.insertBefore(r.firstChild,r);s.removeChild(r),t(s)}else if(c==="BR"||c==="SPAN"&&u.hasAttribute("userId")||c==="LIB-MENTION-PICKER")t(r);else{for(;r.firstChild;)s.insertBefore(r.firstChild,r);s.removeChild(r),t(s)}}};return t(a),a}function U(o){const a=window.getSelection();if(!(a!=null&&a.rangeCount))return;const t=a.getRangeAt(0);let l=t.startContainer.childNodes[t.startOffset-1];(l==null?void 0:l.nodeName)==="BR"&&(l=t.startContainer.childNodes[t.startOffset-2]),(l==null?void 0:l.contentEditable)==="false"&&(o.preventDefault(),l.remove())}function q(o){const a=window.getSelection();if(!(!o||!a))try{const t=document.createRange();t.selectNodeContents(o),t.collapse(!1),a.removeAllRanges(),a.addRange(t)}catch{}}function H(o){const a=window.getSelection();if(!(a!=null&&a.rangeCount))return;const t=a.getRangeAt(0);t.collapse(!0),t.insertNode(o),t.setStartAfter(o),t.collapse(!0),a.removeAllRanges(),a.addRange(t)}function K(o){if(!o)return;const a=window.getSelection();a&&requestAnimationFrame(()=>{const t=document.createRange();t.setStartAfter(o),t.collapse(!0),a.removeAllRanges(),a.addRange(t)})}function L(o){var f,r;const a=o.parentNode;if(!a)return;const t=((r=(f=o.childNodes[0])==null?void 0:f.textContent)==null?void 0:r.trim())||"",l=document.createTextNode(t);a.insertBefore(l,o),a.removeChild(o)}function A(o){const a=window.getSelection(),t=(a==null?void 0:a.anchorNode)??null;return t?o===t||o.contains(t):!1}const Q={class:"mi-picker"},W={key:0,class:"mi-picker__status"},j={key:1,class:"mi-picker__status"},J=["aria-selected","onMousedown"],X={class:"mi-user-avatar","aria-hidden":"true"},G=["src"],Y={class:"mi-user-meta"},Z={class:"mi-user-name"},ee={key:0,class:"mi-user-email"},M=e.defineComponent({__name:"MentionPicker",props:{users:{},search:{},loading:{type:Boolean,default:!1},clientFilter:{type:Boolean,default:!0},emptyText:{default:"No users found"},left:{},top:{}},emits:["select","close"],setup(o,{emit:a}){const t=o,l=a;function f(c){return c.split(/\s+/).filter(Boolean).slice(0,2).map(m=>{var p;return((p=m[0])==null?void 0:p.toUpperCase())??""}).join("")}const r=e.computed(()=>{if(!t.clientFilter)return t.users;const c=t.search.trim().toLowerCase();return c?t.users.filter(m=>{var p;return m.name.toLowerCase().includes(c)||(((p=m.email)==null?void 0:p.toLowerCase().includes(c))??!1)}):t.users}),u=e.ref(0);e.watch(()=>[t.search,r.value.length],()=>{u.value=0});function s(c){if(c.key==="Escape"){c.preventDefault(),l("close");return}r.value.length&&(c.key==="ArrowDown"?(c.preventDefault(),u.value=(u.value+1)%r.value.length):c.key==="ArrowUp"?(c.preventDefault(),u.value=(u.value-1+r.value.length)%r.value.length):c.key==="Enter"&&(c.preventDefault(),l("select",r.value[u.value])))}return e.onMounted(()=>document.addEventListener("keydown",s)),e.onUnmounted(()=>document.removeEventListener("keydown",s)),(c,m)=>(e.openBlock(),e.createElementBlock("div",{class:"mi-picker-host",style:e.normalizeStyle({left:`${o.left}px`,top:`${o.top}px`}),role:"listbox"},[e.createElementVNode("div",Q,[o.loading?(e.openBlock(),e.createElementBlock("div",W,"Loading…")):r.value.length===0?(e.openBlock(),e.createElementBlock("div",j,e.toDisplayString(o.emptyText),1)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:2},e.renderList(r.value,(p,N)=>(e.openBlock(),e.createElementBlock("button",{key:p.id,type:"button",class:e.normalizeClass(["mi-user",{"mi-user--active":N===u.value}]),role:"option","aria-selected":N===u.value,onMousedown:e.withModifiers(C=>l("select",p),["prevent"])},[e.createElementVNode("span",X,[p.avatarUrl?(e.openBlock(),e.createElementBlock("img",{key:0,src:p.avatarUrl,alt:""},null,8,G)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(f(p.name)),1)],64))]),e.createElementVNode("span",Y,[e.createElementVNode("span",Z,e.toDisplayString(p.name),1),p.email?(e.openBlock(),e.createElementBlock("span",ee,e.toDisplayString(p.email),1)):e.createCommentVNode("",!0)])],42,J))),128))])],4))}}),te={key:0,class:"mi-placeholder"},ne=["contenteditable"],oe={key:1,class:"mi-message mi-message--error"},ae={key:2,class:"mi-message"},se=e.defineComponent({__name:"MentionInput",props:{modelValue:{default:()=>[]},users:{default:()=>[]},loading:{type:Boolean,default:!1},clientFilter:{type:Boolean,default:!0},emptyText:{default:"No users found"},placeholder:{default:"Write something… use @ to mention"},disabled:{type:Boolean,default:!1},hasError:{type:Boolean,default:!1},errorMessage:{default:""},helperText:{default:""},className:{},style:{}},emits:["update:modelValue","mentionQueryChange","mentionSelected","mentionOpenChange"],setup(o,{emit:a}){const t=o,l=a;function f(i,n){return JSON.stringify(i)===JSON.stringify(n)}const r=e.ref(null),u=e.ref(!1),s=e.ref(null),c=e.ref(!0),m=e.ref([]),p=e.computed(()=>`mi-editor-wrap${t.disabled?" mi-editor-wrap--disabled":""}${t.className?` ${t.className}`:""}`);function N(i,n){var y;const d=!!n.querySelector(`span.${k}`),g=!!((y=n.textContent)!=null&&y.replace(/\u00A0/g," ").trim());c.value=i.length===0&&!d&&!g}function C(){const i=r.value;if(!i)return;const n=D(i);N(n,i),!f(n,m.value)&&(m.value=n,l("update:modelValue",n))}function R(i){const n=r.value;if(!n)return;const d=b(i);n.innerHTML="",d.forEach(g=>n.appendChild(g)),m.value=i,N(i,n)}e.watch(()=>t.modelValue,i=>{f(i??[],m.value)||R(i??[])},{deep:!0,immediate:!0});function B(i){const n=i.getBoundingClientRect(),d=Math.min(Math.max(8,n.left),window.innerWidth-260),g=Math.min(n.bottom+4,window.innerHeight-16);return{left:d,top:Math.max(8,g)}}function w(i){var d;if(!u.value)return;u.value=!1;const n=(d=s.value)==null?void 0:d.span;s.value=null,l("mentionOpenChange",!1),(i==null?void 0:i.unwrap)!==!1&&(n!=null&&n.isConnected)&&n.classList.contains(k)&&L(n),C(),E()}function I(){if(!r.value||t.disabled)return;const n=document.createElement("span");n.className=k,n.contentEditable="true",n.style.position="relative",n.style.display="inline-block",n.appendChild(document.createTextNode("@")),H(n),q(n),u.value=!0;const d=B(n);s.value={span:n,search:"",...d},c.value=!1,l("mentionOpenChange",!0),l("mentionQueryChange",""),e.nextTick(()=>$())}function O(i){var d;const n=(d=s.value)==null?void 0:d.span;n&&(u.value=!1,n.innerHTML="",n.classList.remove(k),n.classList.add(x),n.contentEditable="false",n.setAttribute("userId",i.id),n.style.position="",n.style.display="",n.appendChild(document.createTextNode(`@${i.name}`)),K(n),s.value=null,l("mentionSelected",i),l("mentionOpenChange",!1),C(),E())}let E=()=>{};function $(){if(E(),!s.value)return;const n=()=>{if(!u.value||!s.value)return;if(!A(s.value.span)){w();return}const h=r.value,v=h==null?void 0:h.querySelector(`span.${k}[contenteditable="true"]`);if(!v){w({unwrap:!1});return}const S=v.innerText??"";if(!S.startsWith("@")){w();return}const T=S.slice(1),P=B(v);s.value={span:v,search:T,...P},l("mentionQueryChange",T)},d=()=>{var v;if(!u.value||!((v=s.value)!=null&&v.span.isConnected))return;const h=window.getSelection();!(h!=null&&h.rangeCount)||!h.anchorNode||A(s.value.span)||w()},g=()=>{var v;if(!((v=s.value)!=null&&v.span.isConnected))return;const h=B(s.value.span);s.value={...s.value,...h}},y=r.value;y==null||y.addEventListener("input",n),document.addEventListener("selectionchange",d),window.addEventListener("resize",g),window.addEventListener("scroll",g,!0),E=()=>{y==null||y.removeEventListener("input",n),document.removeEventListener("selectionchange",d),window.removeEventListener("resize",g),window.removeEventListener("scroll",g,!0),E=()=>{}}}function V(i){var n;if(i.key==="@"){i.preventDefault(),I();return}if(i.key==="Backspace"){const d=(n=r.value)==null?void 0:n.querySelector(`span.${k}[contenteditable="true"]`);if(d&&d.innerText==="@"){i.preventDefault(),u.value=!1,s.value=null,l("mentionOpenChange",!1),L(d),C(),E();return}U(i)}}function _(i){var h,v;i.preventDefault();const n=((h=i.clipboardData)==null?void 0:h.getData("text/html"))||((v=i.clipboardData)==null?void 0:v.getData("text/plain"));if(!n)return;const d=document.createElement("div");d.innerHTML=n;const g=D(d),y=b(g);F(y),C()}return e.onBeforeUnmount(()=>{E()}),(i,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(p.value),style:e.normalizeStyle(o.style)},[o.placeholder&&c.value?(e.openBlock(),e.createElementBlock("span",te,e.toDisplayString(o.placeholder),1)):e.createCommentVNode("",!0),e.createElementVNode("p",{ref_key:"editorRef",ref:r,class:e.normalizeClass(["mi-editor",{"mi-editor--error":o.hasError}]),contenteditable:!o.disabled,onInput:C,onKeydown:V,onPaste:_},null,42,ne),o.hasError&&o.errorMessage?(e.openBlock(),e.createElementBlock("span",oe,e.toDisplayString(o.errorMessage),1)):o.helperText?(e.openBlock(),e.createElementBlock("span",ae,e.toDisplayString(o.helperText),1)):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[s.value?(e.openBlock(),e.createBlock(M,{key:0,users:o.users,search:s.value.search,loading:o.loading,"client-filter":o.clientFilter,"empty-text":o.emptyText,left:s.value.left,top:s.value.top,onSelect:O,onClose:n[0]||(n[0]=d=>w())},null,8,["users","search","loading","client-filter","empty-text","left","top"])):e.createCommentVNode("",!0)]))],6))}});exports.MentionInput=se;exports.MentionPicker=M;

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+import type { DefineComponent } from 'vue';
+import type {
+  MentionContentSection,
+  MentionSection,
+  MentionSectionType,
+  MentionUser,
+  TextSection,
+} from './models';
+
+export type {
+  MentionContentSection,
+  MentionSection,
+  MentionSectionType,
+  MentionUser,
+  TextSection,
+};
+
+export declare const MentionInput: DefineComponent<
+  {
+    modelValue?: MentionContentSection[];
+    users?: MentionUser[];
+    loading?: boolean;
+    clientFilter?: boolean;
+    emptyText?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+    errorMessage?: string | null;
+    helperText?: string;
+    className?: string;
+    style?: Record<string, string>;
+  },
+  {},
+  unknown
+>;
+
+export declare const MentionPicker: DefineComponent<object, object, unknown>;

package/dist/index.js

@@ -0,0 +1,410 @@
+import { defineComponent as U, computed as V, ref as b, watch as q, onMounted as G, onUnmounted as Y, openBlock as p, createElementBlock as y, normalizeStyle as z, createElementVNode as L, toDisplayString as E, Fragment as I, renderList as Z, withModifiers as ee, normalizeClass as D, createTextVNode as te, createCommentVNode as A, onBeforeUnmount as ne, createBlock as O, Teleport as se, nextTick as ae } from "vue";
+const R = "mi-mention", T = "mi-mention-draft";
+function oe(n) {
+  const s = window.getSelection();
+  if (!(s != null && s.rangeCount))
+    return;
+  const e = s.getRangeAt(0);
+  e.collapsed || e.deleteContents();
+  let r = null;
+  n.forEach((d) => {
+    e.insertNode(d), r = d, e.setStartAfter(d);
+  }), r && (e.collapse(!0), s.removeAllRanges(), s.addRange(e));
+}
+function $(n) {
+  const s = [];
+  return n.forEach((e) => {
+    if (e.type === "text") {
+      const r = e.message.split(`
+`);
+      r.forEach((d, o) => {
+        d && s.push(document.createTextNode(d)), o < r.length - 1 && s.push(document.createElement("br"));
+      });
+    }
+    if (e.type === "mention") {
+      const r = document.createElement("span");
+      r.classList.add(R), r.setAttribute("contenteditable", "false"), r.setAttribute("userId", e.userId || ""), r.textContent = ` @${e.userName} `, s.push(r);
+    }
+  }), s;
+}
+function _(n) {
+  var r;
+  const s = re(n), e = [];
+  return s.childNodes.length === 1 && ((r = n.childNodes[0]) == null ? void 0 : r.tagName) === "BR" || s.childNodes.forEach((d) => {
+    var o, c;
+    if (d.nodeType === Node.TEXT_NODE) {
+      const a = (o = d.textContent) == null ? void 0 : o.replace(/\u00A0/g, " ");
+      a != null && a.trim() && e.push({ type: "text", message: a });
+    }
+    if (d.nodeType === Node.ELEMENT_NODE) {
+      const a = d;
+      if (a.classList.contains(R) || a.classList.contains("tag-wrap")) {
+        const l = a.getAttribute("userId") || "", f = ((c = a.textContent) == null ? void 0 : c.replace(/^\s*@/, "").trim()) || "";
+        e.push({ type: "mention", userId: l, userName: f });
+      } else a.tagName === "BR" && e.push({ type: "text", message: `
+` });
+    }
+  }), e;
+}
+function re(n) {
+  const s = n.cloneNode(!0), e = (r) => {
+    const d = Array.from(r.childNodes);
+    for (const o of d) {
+      if (o.nodeType !== Node.ELEMENT_NODE)
+        continue;
+      const c = o, a = c.parentElement;
+      if (!a)
+        continue;
+      const l = c.tagName.toUpperCase();
+      if (l === "DIV") {
+        const f = Array.from(c.childNodes);
+        if (f.length === 1 && f[0].nodeType === Node.ELEMENT_NODE && f[0].tagName === "BR")
+          a.insertBefore(f[0], o), a.removeChild(o), e(a);
+        else {
+          const C = document.createElement("br");
+          for (a.insertBefore(C, o); o.firstChild; )
+            a.insertBefore(o.firstChild, o);
+          a.removeChild(o), e(a);
+        }
+      } else if (l === "SPAN" && !c.hasAttribute("userId") || l === "FONT") {
+        for (; o.firstChild; )
+          a.insertBefore(o.firstChild, o);
+        a.removeChild(o), e(a);
+      } else if (l === "BR" || l === "SPAN" && c.hasAttribute("userId") || l === "LIB-MENTION-PICKER")
+        e(o);
+      else {
+        for (; o.firstChild; )
+          a.insertBefore(o.firstChild, o);
+        a.removeChild(o), e(a);
+      }
+    }
+  };
+  return e(s), s;
+}
+function ie(n) {
+  const s = window.getSelection();
+  if (!(s != null && s.rangeCount))
+    return;
+  const e = s.getRangeAt(0);
+  let r = e.startContainer.childNodes[e.startOffset - 1];
+  (r == null ? void 0 : r.nodeName) === "BR" && (r = e.startContainer.childNodes[e.startOffset - 2]), (r == null ? void 0 : r.contentEditable) === "false" && (n.preventDefault(), r.remove());
+}
+function le(n) {
+  const s = window.getSelection();
+  if (!(!n || !s))
+    try {
+      const e = document.createRange();
+      e.selectNodeContents(n), e.collapse(!1), s.removeAllRanges(), s.addRange(e);
+    } catch {
+    }
+}
+function ce(n) {
+  const s = window.getSelection();
+  if (!(s != null && s.rangeCount))
+    return;
+  const e = s.getRangeAt(0);
+  e.collapse(!0), e.insertNode(n), e.setStartAfter(n), e.collapse(!0), s.removeAllRanges(), s.addRange(e);
+}
+function ue(n) {
+  if (!n)
+    return;
+  const s = window.getSelection();
+  s && requestAnimationFrame(() => {
+    const e = document.createRange();
+    e.setStartAfter(n), e.collapse(!0), s.removeAllRanges(), s.addRange(e);
+  });
+}
+function P(n) {
+  var d, o;
+  const s = n.parentNode;
+  if (!s)
+    return;
+  const e = ((o = (d = n.childNodes[0]) == null ? void 0 : d.textContent) == null ? void 0 : o.trim()) || "", r = document.createTextNode(e);
+  s.insertBefore(r, n), s.removeChild(n);
+}
+function F(n) {
+  const s = window.getSelection(), e = (s == null ? void 0 : s.anchorNode) ?? null;
+  return e ? n === e || n.contains(e) : !1;
+}
+const de = { class: "mi-picker" }, fe = {
+  key: 0,
+  class: "mi-picker__status"
+}, me = {
+  key: 1,
+  class: "mi-picker__status"
+}, pe = ["aria-selected", "onMousedown"], he = {
+  class: "mi-user-avatar",
+  "aria-hidden": "true"
+}, ve = ["src"], ge = { class: "mi-user-meta" }, ye = { class: "mi-user-name" }, Ne = {
+  key: 0,
+  class: "mi-user-email"
+}, Ce = /* @__PURE__ */ U({
+  __name: "MentionPicker",
+  props: {
+    users: {},
+    search: {},
+    loading: { type: Boolean, default: !1 },
+    clientFilter: { type: Boolean, default: !0 },
+    emptyText: { default: "No users found" },
+    left: {},
+    top: {}
+  },
+  emits: ["select", "close"],
+  setup(n, { emit: s }) {
+    const e = n, r = s;
+    function d(l) {
+      return l.split(/\s+/).filter(Boolean).slice(0, 2).map((f) => {
+        var m;
+        return ((m = f[0]) == null ? void 0 : m.toUpperCase()) ?? "";
+      }).join("");
+    }
+    const o = V(() => {
+      if (!e.clientFilter)
+        return e.users;
+      const l = e.search.trim().toLowerCase();
+      return l ? e.users.filter(
+        (f) => {
+          var m;
+          return f.name.toLowerCase().includes(l) || (((m = f.email) == null ? void 0 : m.toLowerCase().includes(l)) ?? !1);
+        }
+      ) : e.users;
+    }), c = b(0);
+    q(
+      () => [e.search, o.value.length],
+      () => {
+        c.value = 0;
+      }
+    );
+    function a(l) {
+      if (l.key === "Escape") {
+        l.preventDefault(), r("close");
+        return;
+      }
+      o.value.length && (l.key === "ArrowDown" ? (l.preventDefault(), c.value = (c.value + 1) % o.value.length) : l.key === "ArrowUp" ? (l.preventDefault(), c.value = (c.value - 1 + o.value.length) % o.value.length) : l.key === "Enter" && (l.preventDefault(), r("select", o.value[c.value])));
+    }
+    return G(() => document.addEventListener("keydown", a)), Y(() => document.removeEventListener("keydown", a)), (l, f) => (p(), y("div", {
+      class: "mi-picker-host",
+      style: z({ left: `${n.left}px`, top: `${n.top}px` }),
+      role: "listbox"
+    }, [
+      L("div", de, [
+        n.loading ? (p(), y("div", fe, "Loading…")) : o.value.length === 0 ? (p(), y("div", me, E(n.emptyText), 1)) : (p(!0), y(I, { key: 2 }, Z(o.value, (m, C) => (p(), y("button", {
+          key: m.id,
+          type: "button",
+          class: D(["mi-user", { "mi-user--active": C === c.value }]),
+          role: "option",
+          "aria-selected": C === c.value,
+          onMousedown: ee((x) => r("select", m), ["prevent"])
+        }, [
+          L("span", he, [
+            m.avatarUrl ? (p(), y("img", {
+              key: 0,
+              src: m.avatarUrl,
+              alt: ""
+            }, null, 8, ve)) : (p(), y(I, { key: 1 }, [
+              te(E(d(m.name)), 1)
+            ], 64))
+          ]),
+          L("span", ge, [
+            L("span", ye, E(m.name), 1),
+            m.email ? (p(), y("span", Ne, E(m.email), 1)) : A("", !0)
+          ])
+        ], 42, pe))), 128))
+      ])
+    ], 4));
+  }
+}), we = {
+  key: 0,
+  class: "mi-placeholder"
+}, Ee = ["contenteditable"], xe = {
+  key: 1,
+  class: "mi-message mi-message--error"
+}, Te = {
+  key: 2,
+  class: "mi-message"
+}, ke = /* @__PURE__ */ U({
+  __name: "MentionInput",
+  props: {
+    modelValue: { default: () => [] },
+    users: { default: () => [] },
+    loading: { type: Boolean, default: !1 },
+    clientFilter: { type: Boolean, default: !0 },
+    emptyText: { default: "No users found" },
+    placeholder: { default: "Write something… use @ to mention" },
+    disabled: { type: Boolean, default: !1 },
+    hasError: { type: Boolean, default: !1 },
+    errorMessage: { default: "" },
+    helperText: { default: "" },
+    className: {},
+    style: {}
+  },
+  emits: ["update:modelValue", "mentionQueryChange", "mentionSelected", "mentionOpenChange"],
+  setup(n, { emit: s }) {
+    const e = n, r = s;
+    function d(i, t) {
+      return JSON.stringify(i) === JSON.stringify(t);
+    }
+    const o = b(null), c = b(!1), a = b(null), l = b(!0), f = b([]), m = V(
+      () => `mi-editor-wrap${e.disabled ? " mi-editor-wrap--disabled" : ""}${e.className ? ` ${e.className}` : ""}`
+    );
+    function C(i, t) {
+      var N;
+      const u = !!t.querySelector(`span.${T}`), g = !!((N = t.textContent) != null && N.replace(/\u00A0/g, " ").trim());
+      l.value = i.length === 0 && !u && !g;
+    }
+    function x() {
+      const i = o.value;
+      if (!i)
+        return;
+      const t = _(i);
+      C(t, i), !d(t, f.value) && (f.value = t, r("update:modelValue", t));
+    }
+    function H(i) {
+      const t = o.value;
+      if (!t)
+        return;
+      const u = $(i);
+      t.innerHTML = "", u.forEach((g) => t.appendChild(g)), f.value = i, C(i, t);
+    }
+    q(
+      () => e.modelValue,
+      (i) => {
+        d(i ?? [], f.value) || H(i ?? []);
+      },
+      { deep: !0, immediate: !0 }
+    );
+    function S(i) {
+      const t = i.getBoundingClientRect(), u = Math.min(Math.max(8, t.left), window.innerWidth - 260), g = Math.min(t.bottom + 4, window.innerHeight - 16);
+      return { left: u, top: Math.max(8, g) };
+    }
+    function k(i) {
+      var u;
+      if (!c.value)
+        return;
+      c.value = !1;
+      const t = (u = a.value) == null ? void 0 : u.span;
+      a.value = null, r("mentionOpenChange", !1), (i == null ? void 0 : i.unwrap) !== !1 && (t != null && t.isConnected) && t.classList.contains(T) && P(t), x(), w();
+    }
+    function K() {
+      if (!o.value || e.disabled)
+        return;
+      const t = document.createElement("span");
+      t.className = T, t.contentEditable = "true", t.style.position = "relative", t.style.display = "inline-block", t.appendChild(document.createTextNode("@")), ce(t), le(t), c.value = !0;
+      const u = S(t);
+      a.value = { span: t, search: "", ...u }, l.value = !1, r("mentionOpenChange", !0), r("mentionQueryChange", ""), ae(() => W());
+    }
+    function Q(i) {
+      var u;
+      const t = (u = a.value) == null ? void 0 : u.span;
+      t && (c.value = !1, t.innerHTML = "", t.classList.remove(T), t.classList.add(R), t.contentEditable = "false", t.setAttribute("userId", i.id), t.style.position = "", t.style.display = "", t.appendChild(document.createTextNode(`@${i.name}`)), ue(t), a.value = null, r("mentionSelected", i), r("mentionOpenChange", !1), x(), w());
+    }
+    let w = () => {
+    };
+    function W() {
+      if (w(), !a.value)
+        return;
+      const t = () => {
+        if (!c.value || !a.value)
+          return;
+        if (!F(a.value.span)) {
+          k();
+          return;
+        }
+        const h = o.value, v = h == null ? void 0 : h.querySelector(
+          `span.${T}[contenteditable="true"]`
+        );
+        if (!v) {
+          k({ unwrap: !1 });
+          return;
+        }
+        const B = v.innerText ?? "";
+        if (!B.startsWith("@")) {
+          k();
+          return;
+        }
+        const M = B.slice(1), X = S(v);
+        a.value = { span: v, search: M, ...X }, r("mentionQueryChange", M);
+      }, u = () => {
+        var v;
+        if (!c.value || !((v = a.value) != null && v.span.isConnected))
+          return;
+        const h = window.getSelection();
+        !(h != null && h.rangeCount) || !h.anchorNode || F(a.value.span) || k();
+      }, g = () => {
+        var v;
+        if (!((v = a.value) != null && v.span.isConnected))
+          return;
+        const h = S(a.value.span);
+        a.value = { ...a.value, ...h };
+      }, N = o.value;
+      N == null || N.addEventListener("input", t), document.addEventListener("selectionchange", u), window.addEventListener("resize", g), window.addEventListener("scroll", g, !0), w = () => {
+        N == null || N.removeEventListener("input", t), document.removeEventListener("selectionchange", u), window.removeEventListener("resize", g), window.removeEventListener("scroll", g, !0), w = () => {
+        };
+      };
+    }
+    function J(i) {
+      var t;
+      if (i.key === "@") {
+        i.preventDefault(), K();
+        return;
+      }
+      if (i.key === "Backspace") {
+        const u = (t = o.value) == null ? void 0 : t.querySelector(
+          `span.${T}[contenteditable="true"]`
+        );
+        if (u && u.innerText === "@") {
+          i.preventDefault(), c.value = !1, a.value = null, r("mentionOpenChange", !1), P(u), x(), w();
+          return;
+        }
+        ie(i);
+      }
+    }
+    function j(i) {
+      var h, v;
+      i.preventDefault();
+      const t = ((h = i.clipboardData) == null ? void 0 : h.getData("text/html")) || ((v = i.clipboardData) == null ? void 0 : v.getData("text/plain"));
+      if (!t)
+        return;
+      const u = document.createElement("div");
+      u.innerHTML = t;
+      const g = _(u), N = $(g);
+      oe(N), x();
+    }
+    return ne(() => {
+      w();
+    }), (i, t) => (p(), y("div", {
+      class: D(m.value),
+      style: z(n.style)
+    }, [
+      n.placeholder && l.value ? (p(), y("span", we, E(n.placeholder), 1)) : A("", !0),
+      L("p", {
+        ref_key: "editorRef",
+        ref: o,
+        class: D(["mi-editor", { "mi-editor--error": n.hasError }]),
+        contenteditable: !n.disabled,
+        onInput: x,
+        onKeydown: J,
+        onPaste: j
+      }, null, 42, Ee),
+      n.hasError && n.errorMessage ? (p(), y("span", xe, E(n.errorMessage), 1)) : n.helperText ? (p(), y("span", Te, E(n.helperText), 1)) : A("", !0),
+      (p(), O(se, { to: "body" }, [
+        a.value ? (p(), O(Ce, {
+          key: 0,
+          users: n.users,
+          search: a.value.search,
+          loading: n.loading,
+          "client-filter": n.clientFilter,
+          "empty-text": n.emptyText,
+          left: a.value.left,
+          top: a.value.top,
+          onSelect: Q,
+          onClose: t[0] || (t[0] = (u) => k())
+        }, null, 8, ["users", "search", "loading", "client-filter", "empty-text", "left", "top"])) : A("", !0)
+      ]))
+    ], 6));
+  }
+});
+export {
+  ke as MentionInput,
+  Ce as MentionPicker
+};

package/dist/models.d.ts

@@ -0,0 +1,22 @@
+export type MentionSectionType = 'text' | 'mention';
+
+export interface TextSection {
+  type: 'text';
+  message: string;
+}
+
+export interface MentionSection {
+  type: 'mention';
+  userId: string;
+  userName: string;
+  email?: string;
+}
+
+export type MentionContentSection = TextSection | MentionSection;
+
+export interface MentionUser {
+  id: string;
+  name: string;
+  email?: string;
+  avatarUrl?: string;
+}

package/dist/styles.css

@@ -0,0 +1 @@
+.mi-editor-wrap{position:relative;display:block}.mi-editor-wrap--disabled{opacity:.65;pointer-events:none}.mi-placeholder{position:absolute;top:12px;left:14px;color:var(--mi-placeholder-color, #9ca3af);pointer-events:none;-webkit-user-select:none;user-select:none;z-index:1}.mi-editor{min-height:var(--mi-editor-min-height, 88px);max-height:180px;overflow:auto;margin:0;padding:12px 14px;border:1px solid var(--mi-editor-border, #d1d5db);border-radius:var(--mi-editor-radius, 8px);background:var(--mi-editor-bg, #fff);outline:none;line-height:1.5;white-space:pre-wrap;word-break:break-word}.mi-editor:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}.mi-editor--error{border-color:#ef4444}.mi-editor>*{pointer-events:none}.mi-editor .mi-mention{pointer-events:none;background:var(--mi-mention-bg, #e0e7ff);color:var(--mi-mention-color, #3730a3);border-radius:4px;padding:0 2px;font-weight:500}.mi-editor .mi-mention-draft{pointer-events:auto;color:var(--mi-mention-draft-color, #4f46e5);font-weight:500}.mi-message{display:block;margin-top:4px;font-size:12px;color:#6b7280}.mi-message--error{color:#ef4444}.mi-picker-host{position:fixed;z-index:10000;min-width:240px;max-width:320px}.mi-picker{max-height:240px;overflow:auto;border:1px solid var(--mi-editor-border, #d1d5db);border-radius:var(--mi-editor-radius, 8px);background:var(--mi-picker-bg, #fff);box-shadow:var(--mi-picker-shadow, 0 8px 24px rgba(0, 0, 0, .12));padding:4px}.mi-picker__status{padding:10px 12px;color:#6b7280;font-size:13px}.mi-user{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer}.mi-user:hover,.mi-user--active{background:var(--mi-user-active-bg, #eef2ff)}.mi-user-avatar{width:var(--mi-avatar-size, 28px);height:var(--mi-avatar-size, 28px);border-radius:50%;background:#e5e7eb;color:#374151;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;overflow:hidden;flex-shrink:0}.mi-user-avatar img{width:100%;height:100%;object-fit:cover}.mi-user-meta{display:flex;flex-direction:column;min-width:0}.mi-user-name{font-size:13px;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mi-user-email{font-size:12px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

package/package.json

@@ -1,6 +1,53 @@
 {
   "name": "@mojsica/vue-mention-input",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Contenteditable @mention input for Vue with chips and structured sections.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mojsica/mention-input.git",
+    "directory": "packages/vue-mention-input"
+  },
+  "keywords": [
+    "vue",
+    "mention",
+    "contenteditable",
+    "chips"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "vite build && cp src/index.d.ts dist/index.d.ts && cp src/models.ts dist/models.d.ts",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@mojsica/mention-core": "workspace:*",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "typescript": "~5.9.2",
+    "vite": "^6.0.0",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.1.10"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}