iking-template-inset/dist/ikingtemplateinset.umd.js

金合前端组件

(function(p,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(p=typeof globalThis<"u"?globalThis:p||self,t(p.IkingTemplateInset={},p.Vue))})(this,function(p,t){"use strict";const $={class:"left"},S=["onClick"],T=["innerHTML"],b=t.defineComponent({__name:"iking-template-inset",props:{template:{type:String,default:""},list:{type:Array,default:()=>[]},paramProps:{type:Object,default:()=>({key:"key",name:"name"})},height:{type:String,default:300},tagStyle:{type:String,default:"color: var(--ik-pagin-text-color, #464646);background:var(--ik-border-color, #029EF7);border-radius:5px;padding:8px 0;margin:0 4px;user-select: none;"},validError:{type:Boolean,default:!1}},emits:["change"],setup(l,{expose:g,emit:d}){const r=l,i=t.ref(""),m=t.ref(""),o=t.ref(0),E=/\$\{(.*?)\}/g,y=/<span.*?>【.+?\((.*?)\)】<\/span>/g,v=r.tagStyle;(a=>{const e=a?a.replace(E,(n,u,k)=>{const s=r.list.find(c=>c[r.paramProps.key]==u);return s?`<span contenteditable="false" style="${v}">\u3010${s[r.paramProps.name]}(${u})\u3011</span>`:n}):"";i.value=e})(r.template);const P=a=>{if(o.value===-1)return;const e=`<span contenteditable="false" style="${v}">\u3010${a[r.paramProps.name]}(${a[r.paramProps.key]})\u3011</span>`;i.value=m.value.slice(0,o.value)+e+m.value.slice(o.value),d("change",i.value.replace(y,"$${$1}"))},M=a=>a.split(/(<span.*?>.*?<\/span>)/).filter(e=>e!==""),_=async a=>{setTimeout(()=>{var u,k;m.value=a.target.innerHTML,d("change",m.value.replace(y,"$${$1}"));const e=window.getSelection();if(a.target.tagName==="SPAN"){o.value=-1;return}const n=e==null?void 0:e.baseNode;if(n!=null&&n.data){if(n!=null&&n.previousSibling){const s=n.previousSibling.outerHTML,c=`${s}${(u=e==null?void 0:e.baseNode)==null?void 0:u.nodeValue}`,f=a.target.innerHTML.indexOf(c);if(f!==-1){o.value=f+(e==null?void 0:e.baseOffset)+s.length;return}}else if(n!=null&&n.nextSibling){const s=n.nextSibling.outerHTML,c=`${(k=e==null?void 0:e.baseNode)==null?void 0:k.nodeValue}${s}`,f=a.target.innerHTML.indexOf(c);if(f!==-1){o.value=(e==null?void 0:e.baseOffset)+f;return}}}else{o.value=0;const s=M(a.target.innerHTML);let c=0;for(;c<e.baseOffset;)o.value+=s[c].length,c++;return a.keyCode===8,void 0}o.value=e==null?void 0:e.baseOffset},100)};return g({clearValue:()=>{i.value=""},template:i.value,value:i.value.replace(y,"$${$1}")}),(a,e)=>(t.openBlock(),t.createElementBlock("div",{class:"ik-template-inset container",style:t.normalizeStyle({height:`${l.height}px`})},[t.createElementVNode("div",$,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(l.list,n=>(t.openBlock(),t.createElementBlock("span",{onClick:u=>P(n),key:n[l.paramProps.key]},t.toDisplayString(n[l.paramProps.name])+"("+t.toDisplayString(n[l.paramProps.key])+")",9,S))),128))]),t.createElementVNode("div",{class:t.normalizeClass(["right",{"is-error":l.validError}]),id:"iking-edit-msg-template",innerHTML:i.value,contenteditable:"",onKeydown:_,onClick:_},null,42,T)],4))}}),L="",h=((l,g)=>{const d=l.__vccOpts||l;for(const[r,i]of g)d[r]=i;return d})(b,[["__scopeId","data-v-d26591eb"]]),x=l=>{l.component("IkingTemplateInset",h)};p.default=h,p.install=x,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});