eslink-ui-plus/umd/input-base/index.js

vue3 component library, css framework

(function(e,d){typeof exports=="object"&&typeof module!="undefined"?module.exports=d(require("vue")):typeof define=="function"&&define.amd?define(["vue"],d):(e=typeof globalThis!="undefined"?globalThis:e||self,e["es-input-base"]=d(e.Vue))})(this,function(e){"use strict";let d;const v=`
  height:0 !important;
  visibility:hidden !important;
  overflow:hidden !important;
  position:absolute !important;
  z-index:-1000 !important;
  top:0 !important;
  right:0 !important;
`,w=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","text-rendering","text-transform","width","text-indent","padding-left","padding-right","border-width","box-sizing"];function k(t){const n=window.getComputedStyle(t),a=n.getPropertyValue("box-sizing"),i=parseFloat(n.getPropertyValue("padding-bottom"))+parseFloat(n.getPropertyValue("padding-top")),o=parseFloat(n.getPropertyValue("border-bottom-width"))+parseFloat(n.getPropertyValue("border-top-width"));return{contextStyle:w.map(r=>`${r}:${n.getPropertyValue(r)}`).join(";"),paddingSize:i,borderSize:o,boxSizing:a}}function x(t,n=1,a=null){var i;d||(d=document.createElement("textarea"),document.body.appendChild(d));const{paddingSize:o,borderSize:u,boxSizing:r,contextStyle:h}=k(t);d.setAttribute("style",`${h};${v}`),d.value=t.value||t.placeholder||"";let p=d.scrollHeight;const f={};r==="border-box"?p=p+u:r==="content-box"&&(p=p-o),d.value="";const m=d.scrollHeight-o;if(n!==null){let c=m*n;r==="border-box"&&(c=c+o+u),p=Math.max(c,p),f.minHeight=`${c}px`}if(a!==null){let c=m*a;r==="border-box"&&(c=c+o+u),p=Math.min(c,p)}return f.height=`${p}px`,(i=d.parentNode)==null||i.removeChild(d),d=null,f}var z=Object.defineProperty,V=Object.defineProperties,C=Object.getOwnPropertyDescriptors,_=Object.getOwnPropertySymbols,E=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable,g=(t,n,a)=>n in t?z(t,n,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[n]=a,B=(t,n)=>{for(var a in n||(n={}))E.call(n,a)&&g(t,a,n[a]);if(_)for(var a of _(n))S.call(n,a)&&g(t,a,n[a]);return t},I=(t,n)=>V(t,C(n)),b={name:"es-input-base",inheritAttrs:!1,props:{type:{type:String,default:"text"},size:{type:String,default:""},autosize:{type:[Boolean,Object],default:!1},prefixIcon:{type:String,default:""},suffixIcon:{type:String,default:""},block:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},wordVisible:{type:Boolean,default:!1},modelValue:{type:[String,Number],default:""}},emits:["input","change","focus","blur","clear","mouseleave","mouseenter","keydown"],setup(t,n){const{modelValue:a,type:i}=e.toRefs(t),o=e.shallowReactive({input:null,textarea:null,inputValue:"",passwordVisible:!1,focused:!1,maxlength:n.attrs.maxlength||0,rows:0,cols:0,textareaCalcStyle:{}});o.rows=n.attrs.rows?n.attrs.rows:6,o.cols=n.attrs.cols?n.attrs.cols:30;const u=e.computed(()=>i.value==="password"),r=e.computed(()=>t.wordVisible&&n.attrs.maxlength&&(t.type==="text"||t.type==="textarea")&&!n.attrs.disabled&&!t.readonly&&!t.showPassword),h=e.computed(()=>r.value&&f.value>o.maxlength),p=e.computed(()=>o.input||o.textarea),f=e.computed(()=>typeof a.value=="number"?String(a.value).length:(a.value||"").length),m=()=>{e.nextTick(()=>{var l;const s=p.value;(l=s==null?void 0:s.focus)==null||l.call(s)})},c=()=>{o.passwordVisible=!o.passwordVisible,m()},K=l=>{const{value:s}=l?l.target:"";n.emit("update:modelValue",s),n.emit("input",s)},W=l=>{o.focused=!0,n.emit("focus",l)},M=l=>{const{value:s}=l?l.target:"";n.emit("change",s)},y=()=>{const{type:l,autosize:s}=t;if(l==="textarea")if(s){const X=s?s.minRows:void 0,G=s?s.maxRows:void 0;o.textareaCalcStyle=x(p.value,X,G)}else o.textareaCalcStyle={minHeight:x(p.value).minHeight}},Y=l=>{o.focused=!1,n.emit("blur",l)},q=l=>{};return e.watchEffect(()=>{e.nextTick(y),o.inputValue=a&&a.value||""}),e.nextTick(()=>{var l;const s=p.value;(l=s==null?void 0:s.focus)==null||l.call(s)}),I(B({},e.toRefs(o)),{showPwdVisible:u,showWordVisible:r,inputExceed:h,textLength:f,handerInput:K,handleFocus:W,handleChange:M,handlePasswordVisible:c,focus:m,resizeTextarea:y,handleBlur:Y,handleKeydown:q})}};e.pushScopeId("data-v-1877d3b2");const P={key:0,class:"el-input-group__prepend"},N=["value","type"],T={class:"es-input__prefix"},O={class:"es-input__suffix"},F={key:1,class:"es-input--maxlength"},D={key:1,class:"el-input-group__append"},H=["rows","cols","value"],j={key:0,class:"es-textarea--maxlength"};e.popScopeId();function R(t,n,a,i,o,u){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([a.type==="textarea"?"es-textarea":"es-input",a.size?"es-input--"+a.size:"",{"es-input--prefix":a.prefixIcon&&a.prefixIcon!=="","es-input--suffix":a.suffixIcon&&a.suffixIcon!==""||a.clearable||i.showPwdVisible,"es-input-block":a.block,"is-exceed":i.inputExceed}])},[a.type!=="textarea"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createCommentVNode(" \u524D\u7F6E\u5143\u7D20 "),t.$slots.prepend?(e.openBlock(),e.createElementBlock("div",P,[e.renderSlot(t.$slots,"prepend")])):e.createCommentVNode("v-if",!0),e.createElementVNode("input",e.mergeProps({ref:"input",class:"es-input__inner",value:t.inputValue},t.$attrs,{type:a.type==="password"?t.passwordVisible?"text":"password":a.type,onInput:n[0]||(n[0]=(...r)=>i.handerInput&&i.handerInput(...r)),onFocus:n[1]||(n[1]=(...r)=>i.handleFocus&&i.handleFocus(...r)),onBlur:n[2]||(n[2]=(...r)=>i.handleBlur&&i.handleBlur(...r)),onChange:n[3]||(n[3]=(...r)=>i.handleChange&&i.handleChange(...r)),onKeydown:n[4]||(n[4]=(...r)=>i.handleKeydown&&i.handleKeydown(...r))}),null,16,N),e.createCommentVNode(" \u524D\u7F6E\u56FE\u6807 "),e.createElementVNode("span",T,[a.prefixIcon&&a.prefixIcon!==""?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(["es-input__icon",a.prefixIcon])},null,2)):e.createCommentVNode("v-if",!0)]),e.createCommentVNode(" \u540E\u7F6E\u56FE\u6807 "),e.createElementVNode("span",O,[a.suffixIcon&&a.suffixIcon!==""?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(["es-input__icon",a.suffixIcon])},null,2)):e.createCommentVNode("v-if",!0),e.createVNode(e.Transition,{"enter-active-class":"es-animated fadeIn","leave-active-class":"es-animated fadeOut",duration:200},{default:e.withCtx(()=>[a.clearable&&i.textLength>0?(e.openBlock(),e.createElementBlock("i",{key:0,class:"es-input__icon es-cursor--pointer es-icon-close-circle-fill",onClick:n[5]||(n[5]=(...r)=>i.handerInput&&i.handerInput(...r))})):e.createCommentVNode("v-if",!0)]),_:1}),e.createVNode(e.Transition,{"enter-active-class":"es-animated fadeIn","leave-active-class":"es-animated fadeOut",duration:200},{default:e.withCtx(()=>[i.showPwdVisible?(e.openBlock(),e.createElementBlock("i",{key:0,class:"es-input__icon es-cursor--pointer el-icon-view",onClick:n[6]||(n[6]=(...r)=>i.handlePasswordVisible&&i.handlePasswordVisible(...r))})):e.createCommentVNode("v-if",!0)]),_:1}),i.showWordVisible?(e.openBlock(),e.createElementBlock("span",F,e.toDisplayString(i.textLength)+"/"+e.toDisplayString(t.maxlength),1)):e.createCommentVNode("v-if",!0)]),e.createCommentVNode(" \u540E\u7F6E\u5143\u7D20 "),t.$slots.append?(e.openBlock(),e.createElementBlock("div",D,[e.renderSlot(t.$slots,"append")])):e.createCommentVNode("v-if",!0)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("textarea",e.mergeProps({ref:"textarea",class:"es-textarea__inner"},t.$attrs,{style:t.textareaCalcStyle,rows:t.rows,cols:t.cols,value:t.inputValue,onInput:n[7]||(n[7]=(...r)=>i.handerInput&&i.handerInput(...r))}),null,16,H),i.showWordVisible?(e.openBlock(),e.createElementBlock("span",j,e.toDisplayString(i.textLength)+"/"+e.toDisplayString(t.maxlength),1)):e.createCommentVNode("v-if",!0)],64))],2)}function A(t,n){n===void 0&&(n={});var a=n.insertAt;if(!(!t||typeof document=="undefined")){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",a==="top"&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}var L=`input[type=password][data-v-1877d3b2]::-ms-reveal {
  display: none;
}
input[data-v-1877d3b2]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
  -moz-appearance: textfield;
}
.es-input[data-v-1877d3b2] {
  position: relative;
  display: inline-block;
}
.es-input__inner[data-v-1877d3b2],
.es-textarea__inner[data-v-1877d3b2] {
  height: 40px;
  padding: 0 16px;
  font-size: 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
  color: #7a7c90;
  background-color: transparent;
  outline: none;
  transition-property: border-color, box-shadow;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
}
.es-input__inner[data-v-1877d3b2]::-webkit-input-placeholder, .es-textarea__inner[data-v-1877d3b2]::-webkit-input-placeholder {
  color: #bbbcc9;
  font-size: 16px;
}
.es-input__inner[data-v-1877d3b2]::-moz-placeholder, .es-textarea__inner[data-v-1877d3b2]::-moz-placeholder {
  color: #bbbcc9;
  font-size: 16px;
}
.es-input__inner[data-v-1877d3b2]:-ms-input-placeholder, .es-textarea__inner[data-v-1877d3b2]:-ms-input-placeholder {
  color: #bbbcc9;
  font-size: 16px;
}
.es-input__inner[data-v-1877d3b2]::placeholder,
.es-textarea__inner[data-v-1877d3b2]::placeholder {
  color: #bbbcc9;
  font-size: 16px;
}
.es-input__inner[data-v-1877d3b2]:disabled,
.es-textarea__inner[data-v-1877d3b2]:disabled {
  cursor: no-drop;
  background-color: var(--disabled);
  color: rgb(var(--text), 0.3);
}
.es-input__inner[data-v-1877d3b2]:disabled:hover,
.es-textarea__inner[data-v-1877d3b2]:disabled:hover {
  border-color: var(--line-color);
}
.es-input__inner[data-v-1877d3b2]:focus, .es-input__inner.is-focus[data-v-1877d3b2],
.es-textarea__inner[data-v-1877d3b2]:focus,
.es-textarea__inner.is-focus[data-v-1877d3b2] {
  border-color: rgb(var(--primary));
  box-shadow: 0 0 0 2px rgb(var(--primary), 0.3);
}
.es-input__inner:focus:focus + i[data-v-1877d3b2], .es-input__inner.is-focus:focus + i[data-v-1877d3b2],
.es-textarea__inner:focus:focus + i[data-v-1877d3b2],
.es-textarea__inner.is-focus:focus + i[data-v-1877d3b2] {
  color: rgb(var(--primary)) !important;
}
.es-input__inner.is-blur[data-v-1877d3b2],
.es-textarea__inner.is-blur[data-v-1877d3b2] {
  border-color: var(--line-color);
  box-shadow: none;
}
.es-input__inner.is-blur[data-v-1877d3b2]::-webkit-input-placeholder, .es-textarea__inner.is-blur[data-v-1877d3b2]::-webkit-input-placeholder {
  color: var(--line-color);
}
.es-input__inner.is-blur[data-v-1877d3b2]::-moz-placeholder, .es-textarea__inner.is-blur[data-v-1877d3b2]::-moz-placeholder {
  color: var(--line-color);
}
.es-input__inner.is-blur[data-v-1877d3b2]:-ms-input-placeholder, .es-textarea__inner.is-blur[data-v-1877d3b2]:-ms-input-placeholder {
  color: var(--line-color);
}
.es-input__inner.is-blur[data-v-1877d3b2]::placeholder,
.es-textarea__inner.is-blur[data-v-1877d3b2]::placeholder {
  color: var(--line-color);
}
.es-input__inner[data-v-1877d3b2]:hover,
.es-textarea__inner[data-v-1877d3b2]:hover {
  border-color: rgb(var(--primary));
}
.es-input__inner.es-input-lg[data-v-1877d3b2],
.es-textarea__inner.es-input-lg[data-v-1877d3b2] {
  padding: 12px 30px 12px 15px;
  font-size: 14px;
}
.es-input__inner.es-input-sm[data-v-1877d3b2],
.es-textarea__inner.es-input-sm[data-v-1877d3b2] {
  padding: 4px 6px;
  font-size: 12px;
}
.es-input__prefix[data-v-1877d3b2] {
  position: absolute;
  height: 100%;
  left: 5px;
  top: 0;
  text-align: center;
  color: #c0c4cc;
  transition: all 0.3s;
  pointer-events: none;
}
.es-input__suffix[data-v-1877d3b2] {
  position: absolute;
  height: 100%;
  right: 5px;
  top: 0;
  text-align: center;
  color: #c0c4cc;
  transition: all 0.3s;
}
.es-input__icon[data-v-1877d3b2] {
  display: inline-block;
  height: 100%;
  line-height: 40px;
  width: 24px;
  text-align: center;
  transition: all 0.3s;
}
.es-input--prefix .es-input__inner[data-v-1877d3b2] {
  padding-left: 28px;
}
.es-input--suffix .es-input__inner[data-v-1877d3b2] {
  padding-right: 28px;
}
.es-input--maxlength[data-v-1877d3b2] {
  height: 100%;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: #bbbcc9;
  line-height: normal;
  padding: 0 5px;
}
.es-input--md .es-input__inner[data-v-1877d3b2] {
  height: 32px;
  font-size: 14px;
}
.es-input--md .es-input__inner[data-v-1877d3b2]::-webkit-input-placeholder {
  font-size: 14px;
}
.es-input--md .es-input__inner[data-v-1877d3b2]::-moz-placeholder {
  font-size: 14px;
}
.es-input--md .es-input__inner[data-v-1877d3b2]:-ms-input-placeholder {
  font-size: 14px;
}
.es-input--md .es-input__inner[data-v-1877d3b2]::placeholder {
  font-size: 14px;
}
.es-input--md .es-input__icon[data-v-1877d3b2] {
  line-height: 32px;
}
.es-input--sm .es-input__inner[data-v-1877d3b2] {
  height: 24px;
  font-size: 12px;
}
.es-input--sm .es-input__inner[data-v-1877d3b2]::-webkit-input-placeholder {
  font-size: 12px;
}
.es-input--sm .es-input__inner[data-v-1877d3b2]::-moz-placeholder {
  font-size: 12px;
}
.es-input--sm .es-input__inner[data-v-1877d3b2]:-ms-input-placeholder {
  font-size: 12px;
}
.es-input--sm .es-input__inner[data-v-1877d3b2]::placeholder {
  font-size: 12px;
}
.es-input--sm .es-input__icon[data-v-1877d3b2] {
  line-height: 24px;
}
.es-input.es-input-block[data-v-1877d3b2] {
  display: block;
  width: inherit;
}
.es-input.es-input-block .es-input[data-v-1877d3b2] {
  display: block;
  width: inherit;
}
.es-input .es-textarea-maxlength[data-v-1877d3b2] {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 12px;
  color: var(--line-color);
}
.es-textarea[data-v-1877d3b2] {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  font-size: 14px;
}
.es-textarea .es-textarea__inner[data-v-1877d3b2] {
  height: auto;
  padding: 0.8rem;
}
.es-textarea--maxlength[data-v-1877d3b2] {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 12px;
  color: #bbbcc9;
}`;return A(L),b.render=R,b.__scopeId="data-v-1877d3b2",b.__file="components/input-base/index.vue",b.install=t=>{t.component("es-input-base",b)},b});