iking-template-inset
Version:
金合前端组件
2 lines (1 loc) • 3.73 kB
JavaScript
(function(u,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(u=typeof globalThis<"u"?globalThis:u||self,t(u.IkingTemplateInset={},u.Vue))})(this,function(u,t){"use strict";const P={class:"left"},$=["onClick"],H=["innerHTML"],M=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,Number],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(r,{expose:S,emit:k}){const f=e=>{const n={"&":"&","<":"<",">":">",'"':""","'":"'"};return e.replace(/[&<>"']/g,o=>n[o])},T=(e,n)=>{let o=null;return(...c)=>{o&&clearTimeout(o),o=setTimeout(()=>e(...c),n)}},s=r,p=t.ref(""),g=t.ref(""),i=t.ref(0),y=t.ref(null),I=/\$\{(.*?)\}/g,O=/<span[^>]*>【[^】]*?\(([^)]*)\)】<\/span>/g,_=k,b=e=>{if(!e){p.value="";return}const n=e.replace(I,(o,a)=>{const c=s.list.find(l=>String(l[s.paramProps.key])===String(a));if(c){const l=f(String(c[s.paramProps.name])),m=f(a);return`<span contenteditable="false" style="${s.tagStyle}">\u3010${l}(${m})\u3011</span>`}return o});p.value=n};b(s.template),t.watch(()=>s.template,e=>{b(e)});const x=e=>e.replace(O,"$${$1}"),L=e=>{if(i.value===-1)return;const n=f(String(e[s.paramProps.name])),o=f(String(e[s.paramProps.key])),a=`<span contenteditable="false" style="${s.tagStyle}">\u3010${n}(${o})\u3011</span>`;p.value=g.value.slice(0,i.value)+a+g.value.slice(i.value),_("change",x(p.value))},B=e=>e.split(/(<span[^>]*>.*?<\/span>)/).filter(n=>n!==""),E=e=>e&&e.nodeType===Node.ELEMENT_NODE?e.outerHTML:"",D=e=>{const n=window.getSelection();if(!n||n.rangeCount===0){i.value=0;return}if(e.tagName==="SPAN"){i.value=-1;return}const o=n.getRangeAt(0),a=o.startContainer,c=o.startOffset;if(a.nodeType!==Node.TEXT_NODE||!a.textContent){i.value=0;const l=B(e.innerHTML);let m=0;for(let d=0;d<c&&d<l.length;d++)m+=l[d].length;i.value=m;return}if(a.previousSibling){const l=E(a.previousSibling),m=a.textContent,d=l+m,v=e.innerHTML.indexOf(d);if(v!==-1){i.value=v+c+l.length;return}}if(a.nextSibling){const l=E(a.nextSibling),d=a.textContent+l,v=e.innerHTML.indexOf(d);if(v!==-1){i.value=c+v;return}}i.value=c},R=T(e=>{_("change",e)},300),C=e=>{const n=e.target;y.value&&clearTimeout(y.value),y.value=setTimeout(()=>{g.value=n.innerHTML,R(x(g.value)),D(n)},50)},V=()=>{p.value="",g.value=""};return t.onUnmounted(()=>{y.value&&clearTimeout(y.value)}),S({clearValue:V,get template(){return p.value},get value(){return x(p.value)}}),(e,n)=>(t.openBlock(),t.createElementBlock("div",{class:"ik-template-inset container",style:t.normalizeStyle({height:`${r.height}px`})},[t.createElementVNode("div",P,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(r.list,o=>(t.openBlock(),t.createElementBlock("span",{key:String(o[r.paramProps.key]),onClick:a=>L(o)},t.toDisplayString(o[r.paramProps.name])+"("+t.toDisplayString(o[r.paramProps.key])+") ",9,$))),128))]),t.createElementVNode("div",{ref:"editRef",class:t.normalizeClass(["right",{"is-error":r.validError}]),id:"iking-edit-msg-template",innerHTML:p.value,contenteditable:"",onKeydown:C,onClick:C},null,42,H)],4))}}),w="",h=((r,S)=>{const k=r.__vccOpts||r;for(const[f,T]of S)k[f]=T;return k})(M,[["__scopeId","data-v-b45586d1"]]),N=r=>{r.component("IkingTemplateInset",h)};u.default=h,u.install=N,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});