ant-design-x-vue-next
Version:
Ant Design X for Vue — community continuation aligned with @ant-design/x
4 lines (3 loc) • 11.1 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("vue"),Y=require("ant-design-vue"),$=require("../../chunks/module-chunk.js"),_e=require("./Skill.js"),De=s.defineComponent({name:"AXSenderSlotTextArea",__name:"SlotTextArea",props:{prefixCls:null,slotConfig:null,skill:null,disabled:{type:Boolean},readOnly:{type:Boolean},placeholder:null,style:null,class:null,submitType:{type:[String,Boolean]},onChange:{type:Function},onKeyPress:null,onKeyDown:null},setup(ce,{expose:ue}){const re=new Set(["input","select","custom","content"]),c=ce,k=s.ref(null),T=s.ref([]),x=s.ref([]),g=s.ref(null),R=s.ref(new Set),u=s.ref({}),f=s.ref({}),b=s.ref(c.skill),q=s.ref(!1),m=new Map;let S=null,_=null,E=0;const V=s.computed(()=>`${c.prefixCls}-slot`),de=s.computed(()=>`${c.prefixCls}-slot-input`),F=s.computed(()=>`${c.prefixCls}-slot-select`),ie=s.computed(()=>`${c.prefixCls}-slot-tag`),fe=s.computed(()=>`${c.prefixCls}-slot-content`),G=s.computed(()=>`${c.prefixCls}-input`),H=s.computed(()=>!c.disabled&&!c.readOnly),N=e=>e.key||"",B=(e,t)=>e.map((o,n)=>o.type==="text"&&!o.key?{...o,key:`${t}_${n}`}:o),L=e=>e.reduce((t,o)=>{const n=o.key;if(!n)return t;const l=o.props||{},a=re.has(o.type)?l.defaultValue:l.value??l.label;return t[n]=a??"",t},{}),D=e=>e.reduce((t,o)=>{if(o.type==="text"){const n=N(o);n&&(t[n]=o.value??"")}return t},{}),w=s.computed(()=>g.value??[...T.value,...x.value]),j=()=>{const e=k.value,t=window.getSelection();if(e&&t&&t.rangeCount>0&&t.anchorNode&&e.contains(t.anchorNode))try{_=t.getRangeAt(0).cloneRange()}catch{}},ye=()=>{const e=k.value,t=window.getSelection();if(e&&t&&t.rangeCount>0&&t.anchorNode&&e.contains(t.anchorNode))try{return t.getRangeAt(0).cloneRange()}catch{}if(_&&e)try{return _.startContainer,_.cloneRange()}catch{return null}return null},P=()=>{m.forEach((e,t)=>{if(document.activeElement===e)return;const[o,n]=t.split("::"),l=o==="text"?f.value[n]??"":String(u.value[n]??"");e.textContent!==l&&(e.textContent=l)})},J=(e,t)=>{if(!t){m.delete(e);return}m.set(e,t);const[o,n]=e.split("::"),l=o==="text"?f.value[n]??"":String(u.value[n]??"");document.activeElement!==t&&t.textContent!==l&&(t.textContent=l)},O=()=>{let e=!1;return m.forEach((t,o)=>{const[n,l]=o.split("::"),a=t.textContent??"";if(n==="text"){f.value[l]!==a&&(f.value={...f.value,[l]:a},e=!0);return}u.value[l]!==a&&(u.value={...u.value,[l]:a},e=!0)}),e};s.watch(()=>c.slotConfig,e=>{g.value=null,T.value=B(e??[],"cfg");const t=L(T.value);R.value.forEach(l=>{l in u.value&&(t[l]=u.value[l])}),u.value=t;const o=D(T.value),n=D(x.value);f.value={...o,...n,...Object.fromEntries(Object.entries(f.value).filter(([l])=>R.value.has(l)))},s.nextTick(P)},{immediate:!0,deep:!0}),s.watch(()=>c.skill,e=>{b.value=e},{immediate:!0}),s.watch([u,f],()=>{s.nextTick(P)}),s.onBeforeUpdate(()=>{const e=k.value,t=window.getSelection();if(e&&t&&t.rangeCount>0&&t.anchorNode&&e.contains(t.anchorNode))try{S=t.getRangeAt(0).cloneRange()}catch{S=null}else S=null}),s.onUpdated(()=>{if(P(),!S)return;const e=window.getSelection(),t=k.value;if(!e||!t){S=null;return}try{e.removeAllRanges(),e.addRange(S)}catch{}S=null});const Q=e=>{var t,o;if(e.type==="text"){const n=N(e),l=n?m.get(`text::${n}`):void 0,a=n?f.value[n]:void 0;return l&&!(l.textContent===""&&a)?l.textContent??"":a??e.value??""}if(e.type==="tag")return((t=e.props)==null?void 0:t.value)??((o=e.props)==null?void 0:o.label)??"";if(e.type==="content"&&e.key){const n=m.get(`content::${e.key}`),l=u.value[e.key];if(n&&!(n.textContent===""&&l))return n.textContent??""}return e.key?u.value[e.key]??"":""},Z=(e,t)=>{var n;const o=(n=e.formatResult)==null?void 0:n.call(e,t);return o!==void 0?o:t==null?"":String(t)},ee=()=>w.value.map(e=>Z(e,Q(e))).join(""),te=()=>w.value.map(e=>({...e,value:Z(e,Q(e))})),C=e=>{var o;const t=ee();(o=c.onChange)==null||o.call(c,t,e,te(),b.value)},W=(e,t)=>{u.value={...u.value,[e]:t},C()},ve=()=>({value:ee(),slotConfig:te(),skill:b.value}),A=(e,t,o)=>{const n=B(e,`rt_${++E}`);n.forEach(l=>{l.key&&R.value.add(l.key)}),g.value=n,x.value=[],u.value={...u.value,...L(n),...t},f.value={...D(n),...o}},pe=e=>{var i;const t=k.value;if(!t)return null;const o=e.startContainer,n=(i=o.nodeType===Node.ELEMENT_NODE?o:o.parentElement)==null?void 0:i.closest("[data-slot-key]");if(!n||!t.contains(n))return null;const l=n.getAttribute("data-slot-key")||"",a=n.getAttribute("data-slot-type")||"",d=w.value.findIndex(h=>h.key===l||N(h)===l);if(d<0)return null;let r=0;return o.nodeType===Node.TEXT_NODE?r=e.startOffset:(a==="text"||a==="content")&&(r=(n.textContent??"").length),{index:d,key:l,slotType:a,textOffset:r,el:n}},ne=(e,t="end",o,n)=>{const l=B(e,`ins_${++E}`),a=L(l),d=D(l);if(l.forEach(r=>{r.key&&R.value.add(r.key)}),O(),t==="start")g.value?A([...l,...g.value],a,d):(x.value=[...l,...x.value],u.value={...u.value,...a},f.value={...f.value,...d});else if(t==="cursor"){const r=ye(),i=r?pe(r):null;if(!i)g.value?A([...g.value,...l],a,d):(x.value=[...x.value,...l],u.value={...u.value,...a},f.value={...f.value,...d});else{const h=[...w.value],y=h[i.index];let U=i.textOffset;if(y.type==="text"||y.type==="content"){const I=y.type==="text"?f.value[N(y)]??y.value??"":String(u.value[y.key]??"");let se=0;o&&o.length>0&&U>=o.length&&I.slice(0,U).endsWith(o)&&(se=o.length);const K=I.slice(0,U-se),M=I.slice(U),we=h.slice(0,i.index),$e=h.slice(i.index+1),v=K.length>0?y.type==="text"?{type:"text",key:`${N(y)}_b_${E}`,value:K}:{...y,key:`${y.key}_b_${E}`,props:{...y.props,defaultValue:K}}:null,p=M.length>0?y.type==="text"?{type:"text",key:`${N(y)}_a_${E}`,value:M}:{...y,key:`${y.key}_a_${E}`,props:{...y.props,defaultValue:M}}:null,Re=[...we,...v?[v]:[],...l,...p?[p]:[],...$e],X={...d},z={...a};(v==null?void 0:v.type)==="text"&&v.key&&(X[v.key]=K),(p==null?void 0:p.type)==="text"&&p.key&&(X[p.key]=M),(v==null?void 0:v.type)==="content"&&v.key&&(z[v.key]=K),(p==null?void 0:p.type)==="content"&&p.key&&(z[p.key]=M),A(Re,z,X)}else{const I=[...h.slice(0,i.index+1),...l,...h.slice(i.index+1)];A(I,a,d)}}}else g.value?A([...g.value,...l],a,d):(x.value=[...x.value,...l],u.value={...u.value,...a},f.value={...f.value,...d});s.nextTick(()=>{var r,i;P(),C(),n||(i=(r=k.value)==null?void 0:r.scrollIntoView)==null||i.call(r,{block:"nearest"})})},le=(e,t,o,n)=>{if(typeof e=="string"){ne([{type:"text",value:e}],t??"end",o,n);return}ne(e,t??"end",o,n)},ke=()=>{g.value=null,x.value=[],R.value.clear(),_=null,u.value=L(T.value),f.value=D(T.value),b.value=c.skill,s.nextTick(()=>{P(),C()})},xe=e=>{const t=k.value;if(!t)return;const o=(e==null?void 0:e.preventScroll)??!1,n=(e==null?void 0:e.cursor)??"end";t.focus({preventScroll:o});const l=window.getSelection();if(!l)return;const a=document.createRange();if(n==="slot"){const d=e&&"key"in e?e.key:void 0,r=d?t.querySelector(`[data-slot-key="${d}"]`):null;if(r){a.selectNodeContents(r),a.collapse(!1),l.removeAllRanges(),l.addRange(a);return}}n==="start"?(a.selectNodeContents(t),a.collapse(!0)):n==="all"?a.selectNodeContents(t):(a.selectNodeContents(t),a.collapse(!1)),l.removeAllRanges(),l.addRange(a)},ge=()=>{var e;(e=k.value)==null||e.blur()},be=()=>{b.value=void 0,C()},oe=()=>{q.value=!0},ae=()=>{q.value=!1,O(),C()},Ce=e=>{var n;const t=e.key==="Enter"&&!q.value;switch(c.submitType??"enter"){case"enter":t&&!e.shiftKey&&e.preventDefault();break;case"shiftEnter":t&&e.shiftKey&&e.preventDefault();break}(n=c.onKeyDown)==null||n.call(c,e)},he=e=>{var t;(t=c.onKeyPress)==null||t.call(c,e)},Se=()=>{q.value||(O(),C())},Ne=e=>e.replace(/\r\n/g,`
`).replace(/\r/g,`
`),Te=e=>{var r;const t=window.getSelection(),o=k.value;if(!t||t.rangeCount===0||!o)return!1;const n=t.anchorNode;if(!n||!o.contains(n))return!1;const l=((r=n.nodeType===Node.ELEMENT_NODE?n:n.parentElement)==null?void 0:r.closest('[data-slot-type="text"], [data-slot-type="content"]'))||null;if(!l||!o.contains(l))return!1;const a=t.getRangeAt(0);a.deleteContents();const d=document.createTextNode(e);return a.insertNode(d),a.setStartAfter(d),a.collapse(!0),t.removeAllRanges(),t.addRange(a),O(),C(),!0},me=e=>{var l;if(!H.value)return;e.preventDefault();const t=(l=e.clipboardData)==null?void 0:l.getData("text/plain");if(!t)return;const o=Ne(t);let n=!1;if(typeof document.execCommand=="function")try{n=document.execCommand("insertText",!1,o)}catch{n=!1}if(n){O(),C();return}Te(o)||le([{type:"text",value:o}],"end")},Ee=e=>{var d,r;const t=e.key,o=((d=e.props)==null?void 0:d.options)??[],n=u.value[t]??((r=e.props)==null?void 0:r.defaultValue)??"",l=!n,a=s.createVNode(Y.Menu,{onClick:({key:i})=>{!c.disabled&&!c.readOnly&&W(t,i)},items:o.map(i=>({key:i,label:i}))},null);return s.createVNode(Y.Dropdown,{trigger:["click"],disabled:c.disabled||c.readOnly},{overlay:()=>a,default:()=>{var i;return s.createVNode("span",{class:$.classnames(F.value,V.value,{placeholder:l}),"data-slot-key":t,contenteditable:"false"},[s.createVNode("span",{class:`${F.value}-value`,"data-placeholder":(i=e.props)==null?void 0:i.placeholder},[n||""]),s.createVNode("span",{class:`${F.value}-arrow`},[s.createVNode($.CaretDownOutlined,null,null)])])}})},Ve=e=>{var t,o,n,l;switch(e.type){case"text":{const a=N(e);return s.createVNode("span",{key:a,ref:d=>J(`text::${a}`,d),class:V.value,"data-slot-key":a,"data-slot-type":"text"},null)}case"input":return s.createVNode("span",{key:e.key,contenteditable:"false","data-slot-key":e.key},[s.createVNode(Y.Input,{bordered:!1,disabled:c.disabled,readonly:c.readOnly,class:$.classnames(de.value,V.value),placeholder:(t=e.props)==null?void 0:t.placeholder,value:u.value[e.key]??"","onUpdate:value":a=>W(e.key,a),onCompositionstart:oe,onCompositionend:ae},null)]);case"content":return s.createVNode("span",{key:e.key,ref:a=>J(`content::${e.key}`,a),class:$.classnames(fe.value,V.value),"data-slot-key":e.key,"data-slot-type":"content","data-placeholder":(o=e.props)==null?void 0:o.placeholder},null);case"select":return s.createVNode("span",{key:e.key,contenteditable:"false"},[Ee(e)]);case"tag":return s.createVNode("span",{key:e.key,class:$.classnames(ie.value,V.value),"data-slot-key":e.key,contenteditable:"false"},[(n=e.props)==null?void 0:n.label]);case"custom":return s.createVNode("span",{key:e.key,class:V.value,"data-slot-key":e.key,contenteditable:"false"},[(l=e.customRender)==null?void 0:l.call(e,u.value[e.key],a=>W(e.key,a),{disabled:c.disabled,readOnly:c.readOnly},e)]);default:return null}};return ue({getValue:ve,insert:le,clear:ke,focus:xe,blur:ge,nativeElement:k}),()=>{const e=!w.value.length&&!b.value&&c.placeholder;return s.createVNode("div",{ref:k,role:"textbox",class:$.classnames(G.value,`${G.value}-slot`,c.class),style:c.style,tabindex:0,"data-placeholder":e?c.placeholder:void 0,contenteditable:H.value?"true":"false",spellcheck:!1,onKeydown:Ce,onKeypress:he,onKeyup:j,onMouseup:j,onSelect:j,onBlur:j,onCompositionstart:oe,onCompositionend:ae,onInput:Se,onPaste:me},[b.value&&s.createVNode("span",{contenteditable:"false"},[s.createVNode(_e.default,s.mergeProps(b.value,{prefixCls:c.prefixCls,removeSkill:be}),null)]),w.value.map(t=>Ve(t))])}}});exports.default=De;