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

vue3 component library, css framework

import{toRefs as V,shallowReactive as K,computed as x,watchEffect as W,nextTick as w,pushScopeId as M,popScopeId as Y,openBlock as p,createElementBlock as u,normalizeClass as z,Fragment as S,createCommentVNode as d,renderSlot as I,createElementVNode as m,mergeProps as P,createVNode as C,Transition as E,withCtx as O,toDisplayString as g}from"vue";let c;const X=`
  height:0 !important;
  visibility:hidden !important;
  overflow:hidden !important;
  position:absolute !important;
  z-index:-1000 !important;
  top:0 !important;
  right:0 !important;
`,q=["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 G(n){const e=window.getComputedStyle(n),t=e.getPropertyValue("box-sizing"),a=parseFloat(e.getPropertyValue("padding-bottom"))+parseFloat(e.getPropertyValue("padding-top")),i=parseFloat(e.getPropertyValue("border-bottom-width"))+parseFloat(e.getPropertyValue("border-top-width"));return{contextStyle:q.map(o=>`${o}:${e.getPropertyValue(o)}`).join(";"),paddingSize:a,borderSize:i,boxSizing:t}}function F(n,e=1,t=null){var a;c||(c=document.createElement("textarea"),document.body.appendChild(c));const{paddingSize:i,borderSize:f,boxSizing:o,contextStyle:y}=G(n);c.setAttribute("style",`${y};${X}`),c.value=n.value||n.placeholder||"";let l=c.scrollHeight;const v={};o==="border-box"?l=l+f:o==="content-box"&&(l=l-i),c.value="";const _=c.scrollHeight-i;if(e!==null){let b=_*e;o==="border-box"&&(b=b+i+f),l=Math.max(b,l),v.minHeight=`${b}px`}if(t!==null){let b=_*t;o==="border-box"&&(b=b+i+f),l=Math.min(b,l)}return v.height=`${l}px`,(a=c.parentNode)==null||a.removeChild(c),c=null,v}var J=Object.defineProperty,Q=Object.defineProperties,U=Object.getOwnPropertyDescriptors,T=Object.getOwnPropertySymbols,Z=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable,B=(n,e,t)=>e in n?J(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,ee=(n,e)=>{for(var t in e||(e={}))Z.call(e,t)&&B(n,t,e[t]);if(T)for(var t of T(e))$.call(e,t)&&B(n,t,e[t]);return n},ne=(n,e)=>Q(n,U(e)),h={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(n,e){const{modelValue:t,type:a}=V(n),i=K({input:null,textarea:null,inputValue:"",passwordVisible:!1,focused:!1,maxlength:e.attrs.maxlength||0,rows:0,cols:0,textareaCalcStyle:{}});i.rows=e.attrs.rows?e.attrs.rows:6,i.cols=e.attrs.cols?e.attrs.cols:30;const f=x(()=>a.value==="password"),o=x(()=>n.wordVisible&&e.attrs.maxlength&&(n.type==="text"||n.type==="textarea")&&!e.attrs.disabled&&!n.readonly&&!n.showPassword),y=x(()=>o.value&&v.value>i.maxlength),l=x(()=>i.input||i.textarea),v=x(()=>typeof t.value=="number"?String(t.value).length:(t.value||"").length),_=()=>{w(()=>{var r;const s=l.value;(r=s==null?void 0:s.focus)==null||r.call(s)})},b=()=>{i.passwordVisible=!i.passwordVisible,_()},N=r=>{const{value:s}=r?r.target:"";e.emit("update:modelValue",s),e.emit("input",s)},H=r=>{i.focused=!0,e.emit("focus",r)},D=r=>{const{value:s}=r?r.target:"";e.emit("change",s)},k=()=>{const{type:r,autosize:s}=n;if(r==="textarea")if(s){const L=s?s.minRows:void 0,R=s?s.maxRows:void 0;i.textareaCalcStyle=F(l.value,L,R)}else i.textareaCalcStyle={minHeight:F(l.value).minHeight}},j=r=>{i.focused=!1,e.emit("blur",r)},A=r=>{};return W(()=>{w(k),i.inputValue=t&&t.value||""}),w(()=>{var r;const s=l.value;(r=s==null?void 0:s.focus)==null||r.call(s)}),ne(ee({},V(i)),{showPwdVisible:f,showWordVisible:o,inputExceed:y,textLength:v,handerInput:N,handleFocus:H,handleChange:D,handlePasswordVisible:b,focus:_,resizeTextarea:k,handleBlur:j,handleKeydown:A})}};M("data-v-1877d3b2");const te={key:0,class:"el-input-group__prepend"},ae=["value","type"],ie={class:"es-input__prefix"},oe={class:"es-input__suffix"},re={key:1,class:"es-input--maxlength"},se={key:1,class:"el-input-group__append"},le=["rows","cols","value"],de={key:0,class:"es-textarea--maxlength"};Y();function pe(n,e,t,a,i,f){return p(),u("div",{class:z([t.type==="textarea"?"es-textarea":"es-input",t.size?"es-input--"+t.size:"",{"es-input--prefix":t.prefixIcon&&t.prefixIcon!=="","es-input--suffix":t.suffixIcon&&t.suffixIcon!==""||t.clearable||a.showPwdVisible,"es-input-block":t.block,"is-exceed":a.inputExceed}])},[t.type!=="textarea"?(p(),u(S,{key:0},[d(" \u524D\u7F6E\u5143\u7D20 "),n.$slots.prepend?(p(),u("div",te,[I(n.$slots,"prepend")])):d("v-if",!0),m("input",P({ref:"input",class:"es-input__inner",value:n.inputValue},n.$attrs,{type:t.type==="password"?n.passwordVisible?"text":"password":t.type,onInput:e[0]||(e[0]=(...o)=>a.handerInput&&a.handerInput(...o)),onFocus:e[1]||(e[1]=(...o)=>a.handleFocus&&a.handleFocus(...o)),onBlur:e[2]||(e[2]=(...o)=>a.handleBlur&&a.handleBlur(...o)),onChange:e[3]||(e[3]=(...o)=>a.handleChange&&a.handleChange(...o)),onKeydown:e[4]||(e[4]=(...o)=>a.handleKeydown&&a.handleKeydown(...o))}),null,16,ae),d(" \u524D\u7F6E\u56FE\u6807 "),m("span",ie,[t.prefixIcon&&t.prefixIcon!==""?(p(),u("i",{key:0,class:z(["es-input__icon",t.prefixIcon])},null,2)):d("v-if",!0)]),d(" \u540E\u7F6E\u56FE\u6807 "),m("span",oe,[t.suffixIcon&&t.suffixIcon!==""?(p(),u("i",{key:0,class:z(["es-input__icon",t.suffixIcon])},null,2)):d("v-if",!0),C(E,{"enter-active-class":"es-animated fadeIn","leave-active-class":"es-animated fadeOut",duration:200},{default:O(()=>[t.clearable&&a.textLength>0?(p(),u("i",{key:0,class:"es-input__icon es-cursor--pointer es-icon-close-circle-fill",onClick:e[5]||(e[5]=(...o)=>a.handerInput&&a.handerInput(...o))})):d("v-if",!0)]),_:1}),C(E,{"enter-active-class":"es-animated fadeIn","leave-active-class":"es-animated fadeOut",duration:200},{default:O(()=>[a.showPwdVisible?(p(),u("i",{key:0,class:"es-input__icon es-cursor--pointer el-icon-view",onClick:e[6]||(e[6]=(...o)=>a.handlePasswordVisible&&a.handlePasswordVisible(...o))})):d("v-if",!0)]),_:1}),a.showWordVisible?(p(),u("span",re,g(a.textLength)+"/"+g(n.maxlength),1)):d("v-if",!0)]),d(" \u540E\u7F6E\u5143\u7D20 "),n.$slots.append?(p(),u("div",se,[I(n.$slots,"append")])):d("v-if",!0)],64)):(p(),u(S,{key:1},[m("textarea",P({ref:"textarea",class:"es-textarea__inner"},n.$attrs,{style:n.textareaCalcStyle,rows:n.rows,cols:n.cols,value:n.inputValue,onInput:e[7]||(e[7]=(...o)=>a.handerInput&&a.handerInput(...o))}),null,16,le),a.showWordVisible?(p(),u("span",de,g(a.textLength)+"/"+g(n.maxlength),1)):d("v-if",!0)],64))],2)}function ue(n,e){e===void 0&&(e={});var t=e.insertAt;if(!(!n||typeof document=="undefined")){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css",t==="top"&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=n:i.appendChild(document.createTextNode(n))}}var ce=`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;
}`;ue(ce),h.render=pe,h.__scopeId="data-v-1877d3b2",h.__file="components/input-base/index.vue",h.install=n=>{n.component("es-input-base",h)};export{h as default};