@dcodegroup/vue-mention/dist/vue-mention.umd.js

Mention popper for input and textarea

(function(p,S){typeof exports=="object"&&typeof module!="undefined"?S(exports,require("floating-vue"),require("vue")):typeof define=="function"&&define.amd?define(["exports","floating-vue","vue"],S):(p=typeof globalThis!="undefined"?globalThis:p||self,S(p.VueMention={},p.FloatingVue,p.Vue))})(this,function(p,S,n){"use strict";var M={exports:{}};(function(t){(function(){var u=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"],l=typeof window!="undefined",g=l&&window.mozInnerScreenX!=null;function m(f,h,y){if(!l)throw new Error("textarea-caret-position#getCaretCoordinates should only be called in a browser");var s=y&&y.debug||!1;if(s){var d=document.querySelector("#input-textarea-caret-position-mirror-div");d&&d.parentNode.removeChild(d)}var o=document.createElement("div");o.id="input-textarea-caret-position-mirror-div",document.body.appendChild(o);var c=o.style,v=window.getComputedStyle?window.getComputedStyle(f):f.currentStyle,C=f.nodeName==="INPUT";c.whiteSpace="pre-wrap",C||(c.wordWrap="break-word"),c.position="absolute",s||(c.visibility="hidden"),u.forEach(function(k){C&&k==="lineHeight"?c.lineHeight=v.height:c[k]=v[k]}),g?f.scrollHeight>parseInt(v.height)&&(c.overflowY="scroll"):c.overflow="hidden",o.textContent=f.value.substring(0,h),C&&(o.textContent=o.textContent.replace(/\s/g,"\xA0"));var w=document.createElement("span");w.textContent=f.value.substring(h)||".",o.appendChild(w);var x={top:w.offsetTop+parseInt(v.borderTopWidth),left:w.offsetLeft+parseInt(v.borderLeftWidth),height:parseInt(v.lineHeight)};return s?w.style.backgroundColor="#aaa":document.body.removeChild(o),x}t.exports=m})()})(M);var A=M.exports,H=(t,u)=>{const l=t.__vccOpts||t;for(const[g,m]of u)l[g]=m;return l};S.options.themes.mentionable={$extend:"dropdown",placement:"top-start",arrowPadding:6,arrowOverflow:!1};const W=n.defineComponent({components:{VDropdown:S.Dropdown},inheritAttrs:!1,props:{keys:{type:Array,required:!0},items:{type:Array,default:()=>[]},omitKey:{type:Boolean,default:!1},filteringDisabled:{type:Boolean,default:!1},insertSpace:{type:Boolean,default:!1},allowSpace:{type:Boolean,default:!1},mapInsert:{type:Function,default:null},limit:{type:Number,default:8},theme:{type:String,default:"mentionable"},caretHeight:{type:Number,default:0}},emits:["search","open","close","apply"],setup(t,{emit:u}){const l=n.ref(null);let g;const m=n.ref(null),f=n.ref(!1),h=n.ref(null);n.watch(h,(e,i)=>{e&&u("search",e,i)});const y=n.computed(()=>{if(!h.value||t.filteringDisabled)return t.items;const e=h.value.toLowerCase();return t.items.filter(i=>{let r;if(i.searchText)r=i.searchText;else if(i.label)r=i.label;else{r="";for(const a in i)r+=i[a]}return r.toLowerCase().includes(e)})}),s=n.computed(()=>y.value.slice(0,t.limit)),d=n.ref(0);n.watch(s,()=>{d.value=0},{deep:!0});let o;const c=n.ref(null);function v(){var e,i;return(i=(e=c.value.querySelector("input"))!=null?e:c.value.querySelector("textarea"))!=null?i:c.value.querySelector('[contenteditable="true"]')}n.onMounted(()=>{o=v(),C()}),n.onUpdated(()=>{const e=v();e!==o&&(w(),o=e,C())}),n.onUnmounted(()=>{w()});function C(){o&&(o.addEventListener("input",x),o.addEventListener("keydown",N),o.addEventListener("keyup",K),o.addEventListener("scroll",D),o.addEventListener("blur",k))}function w(){o&&(o.removeEventListener("input",x),o.removeEventListener("keydown",N),o.removeEventListener("keyup",K),o.removeEventListener("scroll",D),o.removeEventListener("blur",k))}function x(){J()}function k(){B()}function N(e){l.value&&(e.key==="ArrowDown"&&(d.value++,d.value>=s.value.length&&(d.value=0),E(e)),e.key==="ArrowUp"&&(d.value--,d.value<0&&(d.value=s.value.length-1),E(e)),(e.key==="Enter"||e.key==="Tab")&&s.value.length>0&&(O(d.value),E(e)),e.key==="Escape"&&(B(),E(e)))}let T=null;function K(e){T&&e.key===T&&E(e),T=null}function E(e){e.preventDefault(),e.stopPropagation(),T=e.key}function D(){z()}function X(){return o.isContentEditable?window.getSelection().anchorOffset:o.selectionStart}function Y(e){n.nextTick(()=>{o.selectionEnd=e})}function I(){return o.isContentEditable?window.getSelection().anchorNode.textContent:o.value}function G(e){o.value=e,V("input")}function V(e){o.dispatchEvent(new Event(e))}let $=null;function J(){const e=X();if(e>=0){const{key:i,keyIndex:r}=Q(e),a=$=Z(e,r);if(!(r<1||/\s/.test(I()[r-1])))return!1;const te=I()[e-1]===i,ne=t.allowSpace?f.value||te:!0;if(a!=null&&ne)return _(i,r),h.value=a,!0}return B(),!1}function Q(e){const[i]=t.keys.map(r=>({key:r,keyIndex:I().lastIndexOf(r,e-1)})).sort((r,a)=>a.keyIndex-r.keyIndex);return i}function Z(e,i){if(i!==-1){const r=I().substring(i+1,e);if(t.allowSpace)return r.trim();if(!/\s/.test(r))return r}return null}const b=n.ref(null);function z(){if(l.value){if(o.isContentEditable){const e=window.getSelection().getRangeAt(0).getBoundingClientRect(),i=o.getBoundingClientRect();b.value={left:e.left-i.left,top:e.top-i.top,height:e.height}}else b.value=A(o,g);b.value.top-=o.scrollTop,t.caretHeight?b.value.height=t.caretHeight:isNaN(b.value.height)&&(b.value.height=16)}}function _(e,i){l.value!==e&&(l.value=e,g=i,z(),d.value=0,u("open",l.value),f.value=!0)}function B(){l.value!=null&&(m.value=l.value,l.value=null,f.value=!1,u("close",m.value))}function O(e){const i=s.value[e],r=(t.omitKey?"":l.value)+String(t.mapInsert?t.mapInsert(i,l.value):i.value)+(t.insertSpace?" ":"");if(o.isContentEditable){const a=window.getSelection().getRangeAt(0);a.setStart(a.startContainer,a.startOffset-l.value.length-($?$.length:0)),a.deleteContents(),a.insertNode(document.createTextNode(r)),a.setStart(a.endContainer,a.endOffset),V("input")}else G(ee(I(),h.value,r,g)),Y(g+r.length);u("apply",i,l.value,r),B()}function ee(e,i,r,a){return e.slice(0,a)+r+e.slice(a+i.length+1,e.length)}return{el:c,currentKey:l,oldKey:m,caretPosition:b,displayedItems:s,selectedIndex:d,applyMention:O,isMentioning:f}}}),q={key:0},R=["onMouseover","onMousedown"];function U(t,u,l,g,m,f){const h=n.resolveComponent("VDropdown");return n.openBlock(),n.createElementBlock("div",{ref:"el",class:n.normalizeClass(["mentionable",t.$attrs.class]),style:{position:"relative"}},[n.renderSlot(t.$slots,"default"),n.createVNode(h,n.mergeProps({ref:"popper"},{...t.$attrs,class:void 0},{shown:!!t.currentKey,triggers:[],"auto-hide":!1,theme:t.theme,class:"popper",style:[{position:"absolute"},t.caretPosition?{top:`${t.caretPosition.top}px`,left:`${t.caretPosition.left}px`}:{}]}),{popper:n.withCtx(()=>[t.displayedItems.length?(n.openBlock(!0),n.createElementBlock(n.Fragment,{key:1},n.renderList(t.displayedItems,(y,s)=>(n.openBlock(),n.createElementBlock("div",{key:s,class:n.normalizeClass(["mention-item",{"mention-selected":t.selectedIndex===s}]),onMouseover:d=>t.selectedIndex=s,onMousedown:d=>t.applyMention(s)},[n.renderSlot(t.$slots,`item-${t.currentKey||t.oldKey}`,{item:y,index:s},()=>[n.renderSlot(t.$slots,"item",{item:y,index:s},()=>[n.createTextVNode(n.toDisplayString(y.label||y.value),1)])])],42,R))),128)):(n.openBlock(),n.createElementBlock("div",q,[n.renderSlot(t.$slots,"no-result",{},()=>[u[0]||(u[0]=n.createTextVNode(" No result "))])]))]),default:n.withCtx(()=>[n.createElementVNode("div",{style:n.normalizeStyle(t.caretPosition?{height:`${t.caretPosition.height}px`}:{})},null,4)]),_:3},16,["shown","theme","style"])],2)}var L=H(W,[["render",U]]);function F(t,u){t.component(`${u}mentionable`,L),t.component(`${u}Mentionable`,L)}function P(t,u){const l=Object.assign({},{installComponents:!0,componentsPrefix:""},u);l.installComponents&&F(t,l.componentsPrefix)}const j={version:"3.0.0",install:P};p.Mentionable=L,p.default=j,p.install=P,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});