vxe-pc-ui/lib/password-input/src/password-input.min.js

A vue based PC component library

Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxePasswordInput",props:{modelValue:String,immediate:{type:Boolean,default:!0},name:String,clearable:{type:Boolean,default:()=>(0,_ui.getConfig)().passwordInput.clearable},readonly:Boolean,disabled:Boolean,maxLength:[String,Number],placeholder:String,autoComplete:{type:String,default:"off"},className:String,size:{type:String,default:()=>(0,_ui.getConfig)().passwordInput.size||(0,_ui.getConfig)().size},prefixIcon:String,suffixIcon:String,controls:{type:Boolean,default:()=>(0,_ui.getConfig)().passwordInput.controls},autocomplete:String},emits:["update:modelValue","input","change","click","focus","blur","clear","lazy-change","toggle-visible","prefix-click","suffix-click"],setup(m,e){let{emit:i,slots:g}=e,u=(0,_vue.inject)("$xeForm",null),a=(0,_vue.inject)("xeFormItemInfo",null);var t=_xeUtils.default.uniqueId();let x=(0,_ui.useSize)(m).computeSize,h=(0,_vue.reactive)({showPwd:!1,isActivated:!1,inputValue:m.modelValue}),w=(0,_vue.ref)(),E=(0,_vue.ref)(),l={refElem:w,refInput:E},I={xID:t,props:m,context:e,reactData:h,getRefMaps:()=>l},n={},V=(0,_vue.computed)(()=>m.clearable),b=(0,_vue.computed)(()=>{var e=m.readonly;return e}),y=(0,_vue.computed)(()=>{var e=m.placeholder;return(e=e||(0,_ui.getConfig)().passwordInput.placeholder)?(0,_utils.getFuncText)(e):(0,_ui.getI18n)("vxe.base.pleaseInput")}),S=(0,_vue.computed)(()=>{var e=h.showPwd;return e?"text":"password"}),r=(0,_vue.computed)(()=>{var e=m.immediate;return e}),s=e=>{var t=h.inputValue;n.dispatchEvent(e.type,{value:t},e)},o=(e,t)=>{var u=r.value;h.inputValue=e,u?p(e,t):n.dispatchEvent("input",{value:e},t)},C=e=>{var t=e.target.value;o(t,e)},p=(e,t)=>{h.inputValue=e,i("update:modelValue",e),n.dispatchEvent("input",{value:e},t),_xeUtils.default.toValueString(m.modelValue)!==e&&(n.dispatchEvent("change",{value:e},t),u)&&a&&u.triggerItemEvent(t,a.itemConfig.field,e)},P=e=>{s(e),I.dispatchEvent("lazy-change",{value:h.inputValue},e),u&&a&&u.triggerItemEvent(e,a.itemConfig.field,h.inputValue)},k=e=>{h.isActivated=!0,s(e)},N=e=>{var t=h.inputValue;I.dispatchEvent("blur",{value:t},e),u&&a&&u.triggerItemEvent(e,a.itemConfig.field,t)},d=e=>{var{readonly:t,disabled:u}=m,i=h.showPwd;u||t||(h.showPwd=!i),I.dispatchEvent("toggle-visible",{visible:h.showPwd},e)},q=e=>{s(e)},z=(e,t)=>{focus(),p("",e),I.dispatchEvent("clear",{value:t},e),I.dispatchEvent("lazy-change",{value:h.inputValue},e)},A=e=>{var t=m.disabled;t||(t=h.inputValue,I.dispatchEvent("suffix-click",{value:t},e))},D=e=>{var t=m.disabled;t||(t=h.inputValue,I.dispatchEvent("prefix-click",{value:t},e))},U=()=>{var e=h.showPwd;return(0,_vue.h)("div",{class:"vxe-password-input--control-icon",onClick:d},[(0,_vue.h)("i",{class:["vxe-password-input--password-icon",e?(0,_ui.getIcon)().PASSWORD_INPUT_SHOW_PWD:(0,_ui.getIcon)().PASSWORD_INPUT_HIDE_PWD]})])};n={dispatchEvent(e,t,u){i(e,(0,_ui.createEvent)(u,{$passwordInput:I},t))},focus(){var e=E.value;return h.isActivated=!0,e.focus(),(0,_vue.nextTick)()},blur(){return E.value.blur(),(h.isActivated=!1,_vue.nextTick)()},select(){return E.value.select(),(h.isActivated=!1,_vue.nextTick)()}},Object.assign(I,n),(0,_vue.watch)(()=>m.modelValue,e=>{h.inputValue=e});return I.renderVN=()=>{var{className:e,name:t,disabled:u,readonly:i,autocomplete:a,autoComplete:l,maxLength:n}=m,{inputValue:r,isActivated:s}=h,o=x.value,p=b.value,d=S.value,v=y.value,c=V.value,_=(f=m.prefixIcon,(_=g.prefix)||f?(0,_vue.h)("div",{class:"vxe-password-input--prefix",onClick:D},[(0,_vue.h)("div",{class:"vxe-password-input--prefix-icon"},_?(0,_vn.getSlotVNs)(_({})):[(0,_vue.h)("i",{class:f})])]):null),f=(()=>{var{disabled:e,suffixIcon:t,controls:u}=m,i=h.inputValue,a=g.suffix,l=V.value;return l||u||a||t?(0,_vue.h)("div",{class:["vxe-password-input--suffix",{"is--clear":l&&!e&&!(""===i||_xeUtils.default.eqNull(i))}]},[l?(0,_vue.h)("div",{class:"vxe-password-input--clear-icon",onClick:z},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().INPUT_CLEAR})]):(0,_ui.renderEmptyElement)(I),u?U():(0,_ui.renderEmptyElement)(I),a||t?(0,_vue.h)("div",{class:"vxe-password-input--suffix-icon",onClick:A},a?(0,_vn.getSlotVNs)(a({})):[(0,_vue.h)("i",{class:t})]):(0,_ui.renderEmptyElement)(I)]):null})();return(0,_vue.h)("div",{ref:w,class:["vxe-password-input",e,{["size--"+o]:o,"is--prefix":!!_,"is--suffix":!!f,"is--readonly":i,"is--disabled":u,"is--active":s,"show--clear":c&&!u&&!(""===r||_xeUtils.default.eqNull(r))}],spellcheck:!1},[_||(0,_ui.renderEmptyElement)(I),(0,_vue.h)("div",{class:"vxe-password-input--wrapper"},[(0,_vue.h)("input",{ref:E,class:"vxe-password-input--inner",value:r,name:t,type:d,placeholder:v,readonly:p,disabled:u,autocomplete:a||l,maxlength:n,onClick:q,onInput:C,onChange:P,onFocus:k,onBlur:N})]),f||(0,_ui.renderEmptyElement)(I)])},I},render(){return this.renderVN()}});