fine-true/lib/input/index.js

A small and beautiful Vue3 version of the UI Library

!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("vue"),require("./../types/form"),require("./../utils/withInstall"));else if("function"==typeof define&&define.amd)define(["vue","./../types/form","./../utils/withInstall"],t);else{var o="object"==typeof exports?t(require("vue"),require("./../types/form"),require("./../utils/withInstall")):t(e.vue,e["./../types/form"],e["./../utils/withInstall"]);for(var n in o)("object"==typeof exports?exports:e)[n]=o[n]}}(self,((e,t,o)=>(()=>{"use strict";var n={9934:e=>{e.exports=t},1677:e=>{e.exports=o},748:t=>{t.exports=e}},r={};function a(e){var t=r[e];if(void 0!==t)return t.exports;var o=r[e]={exports:{}};return n[e](o,o.exports,a),o.exports}a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},a.d=(e,t)=>{for(var o in t)a.o(t,o)&&!a.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var l={};return(()=>{a.r(l),a.d(l,{default:()=>r});var e=a(748),t=a(9934);const o=(0,e.defineComponent)({name:"fine-input",emits:["update:modelValue","change","focus","blur"],props:{type:{type:String,default:"text"},modelValue:String,leftIcon:String,rightIcon:String,showPassword:Boolean,clearable:Boolean,placeholder:String,disabled:Boolean,readonly:Boolean,size:{type:String,default:"default"},name:String,maxLength:Number},setup(o,n){var{emit:r,expose:a,slots:l}=n,i=(0,e.inject)(t.FormItemContextKey,void 0),u=(0,e.ref)(),s=(0,e.computed)((()=>null===o.modelValue||void 0===o.modelValue?"":String(o.modelValue))),c=()=>{u.value.value=s.value};(0,e.watch)(s,(()=>{c()}));var d=(0,e.ref)(o.type);(0,e.watch)((()=>o.type),(e=>{d.value=e}));var p=e=>{r("update:modelValue",e),r("change",e),i&&i("change")},f=!1,v=()=>{f=!0},h=e=>{var t=e.target.value;f&&(p(t),f=!1)},m=e=>{var t=e.target.value;f||p(t)},g=()=>{"password"===d.value?d.value="text":d.value="password"},y=()=>{p(""),w()},b=e=>{r("blur",e),i&&i("blur")},I=e=>{r("focus",e)},w=()=>{var e;null===(e=u.value)||void 0===e||e.focus()};a({focus:w,blur:()=>{var e;null===(e=u.value)||void 0===e||e.blur()}}),(0,e.onMounted)((()=>{c()}));var x=(0,e.computed)((()=>({"fine-input-current":!0,["fine-input-size-".concat(o.size)]:!0,"fine-input-disabled":o.disabled,"fine-input-has-lefticon":o.leftIcon||l.leftIcon,"fine-input-has-righticon":"password"===o.type&&o.showPassword||o.rightIcon||l.rightIcon,"fine-input-has-clearable":o.clearable&&s.value.length}))),V=(0,e.computed)((()=>{var e=o.clearable&&s.value.length,t="password"===o.type&&o.showPassword||o.rightIcon||l.rightIcon;return{"fine-input-icon fine-input-right-icon":!0,"fine-input-has-clear-icon":e&&t}}));return()=>{var{leftIcon:t,disabled:n,placeholder:r,readonly:a,name:i,maxLength:c,clearable:p,rightIcon:f,showPassword:w,type:S}=o;return(0,e.createVNode)("div",{class:"fine-input"},[(t||l.leftIcon)&&(0,e.createVNode)("span",{class:"fine-input-icon fine-input-left-icon"},[l.leftIcon&&l.leftIcon()||(0,e.createVNode)("i",{class:"fine-icon icon-".concat(t)},null)]),(0,e.createVNode)("input",{ref:e=>u.value=e,class:x.value,disabled:n,type:d.value,placeholder:r,readonly:a,name:i,maxlength:c,onCompositionstart:v,onCompositionend:h,onInput:m,onFocus:I,onBlur:b},null),(p&&s.value||"password"===S&&w||f||l.rightIcon)&&(0,e.createVNode)("span",{class:V.value},[p&&s.value&&(0,e.createVNode)("i",{class:"fine-icon icon-error",onClick:y},null),"password"===S&&w&&(0,e.createVNode)("i",{class:"fine-icon icon-hide",onClick:g},null),!w&&(l.rightIcon&&l.rightIcon()||f&&(0,e.createVNode)("i",{class:"fine-icon icon-".concat(f)},null))])])}}});var n=a(1677);a.n(n)()(o);const r=o})(),l})()));