import{defineComponent as b,toRefs as T,reactive as z,watch as N,ref as $,onMounted as R,createVNode as l}from"vue";import w from"@ant-design/icons-vue/EnterOutlined";import u from"../_util/KeyCode.mjs";import F from"../_util/classNames.mjs";import B from"../input/TextArea.mjs";import D from"./style/index.mjs";const I=()=>({prefixCls:String,value:String,maxlength:Number,autoSize:{type:[Boolean,Object]},onSave:Function,onCancel:Function,onEnd:Function,onChange:Function,originContent:String,direction:String,component:String}),V=b({compatConfig:{MODE:3},name:"Editable",inheritAttrs:!1,props:I(),setup(n,{emit:a,slots:s,attrs:f}){const{prefixCls:i}=T(n),t=z({current:n.value||"",lastKeyCode:void 0,inComposition:!1,cancelFlag:!1});N(()=>n.value,e=>{t.current=e});const c=$();R(()=>{if(c.value){const o=c.value?.resizableTextArea?.textArea;o.focus();const{length:r}=o.value;o.setSelectionRange(r,r)}});function d(e){c.value=e}function C({target:{value:e}}){t.current=e.replace(/[\r\n]/g,""),a("change",t.current)}function g(){t.inComposition=!0}function v(){t.inComposition=!1}function x(e){const{keyCode:o}=e;o===u.ENTER&&e.preventDefault(),!t.inComposition&&(t.lastKeyCode=o)}function y(e){const{keyCode:o,ctrlKey:r,altKey:K,metaKey:E,shiftKey:A}=e;t.lastKeyCode===o&&!t.inComposition&&!r&&!K&&!E&&!A&&(o===u.ENTER?(m(),a("end")):o===u.ESC&&(t.current=n.originContent,a("cancel")))}function S(){m()}function m(){a("save",t.current.trim())}const[h,p]=D(i);return()=>{const e=F({[`${i.value}`]:!0,[`${i.value}-edit-content`]:!0,[`${i.value}-rtl`]:n.direction==="rtl",[n.component?`${i.value}-${n.component}`:""]:!0},f.class,p.value);return h(l("div",{...f,class:e},[l(B,{ref:d,maxlength:n.maxlength,value:t.current,onChange:C,onKeydown:x,onKeyup:y,onCompositionstart:g,onCompositionend:v,onBlur:S,rows:1,autoSize:n.autoSize===void 0||n.autoSize},null),s.enterIcon?s.enterIcon({className:`${n.prefixCls}-edit-content-confirm`}):l(w,{class:`${n.prefixCls}-edit-content-confirm`},null)]))}}});export{V as default};
