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