@volverjs/ui-vue 0.0.1 → 0.0.3-beta.2

package/dist/components/VvInputText/VvInputText.umd.js

@@ -1 +1 @@
-(function(e,D){typeof exports=="object"&&typeof module<"u"?module.exports=D(require("vue"),require("nanoid"),require("@vueuse/core"),require("@iconify/vue")):typeof define=="function"&&define.amd?define(["vue","nanoid","@vueuse/core","@iconify/vue"],D):(e=typeof globalThis<"u"?globalThis:e||self,e.VvInputText=D(e.vue,e.nanoid,e.core,e.vue$1))})(this,function(e,D,$,T){"use strict";function U(r,n){if(r&&Object.keys(r).length&&n){if(n.indexOf(".")===-1)return r[n];{const t=n.split(".");let i=r;for(let a=0,u=t.length;a<u;++a){if(r==null)return null;i=i[t[a]]}return i}}else return null}function _(r){return(n=>n==null||n===""||Array.isArray(n)&&n.length===0||!(n instanceof Date)&&typeof n=="object"&&Object.keys(n).length===0)(e.unref(r))}function ee(r){return typeof r=="string"||r instanceof String}function W(r){var n,t;if(r)return(t=(n=r.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g))==null?void 0:n.join("-"))==null?void 0:t.toLowerCase()}function R(r){return Array.isArray(r)?r.filter(n=>ee(n)).join(" "):r}function te(r,n){const{invalid:t,valid:i,hint:a,loading:u}=n,{hintLabel:s,modelValue:y,valid:S,validLabel:m,invalid:l,invalidLabel:c,...g}=e.toRefs(r),p=U(g,"loading"),h=U(g,"loadingLabel"),I=e.computed(()=>l.value?!!(l.value&&t||c!=null&&c.value&&Array.isArray(c.value)&&c.value.length>0||c!=null&&c.value&&!_(c)):!1),b=e.computed(()=>!!(s&&s.value||a)),C=e.computed(()=>!!(m&&m.value||i)),A=e.computed(()=>!!(p!=null&&p.value&&u||p!=null&&p.value&&(h!=null&&h.value))),k=e.computed(()=>b.value||C.value||I.value||A.value);return{hasInvalid:I,hasHint:b,hasValid:C,hasLoading:A,HintSlot:{name:"HintSlot",props:{params:{type:Object,default:()=>({})}},setup(O){const H=e.computed(()=>{const P=$.toReactive({hintLabel:s,modelValue:y,valid:S,validLabel:m,invalid:l,invalidLabel:c,loading:p,loadingLabel:h,...O.params});return l!=null&&l.value?(t==null?void 0:t(P))||R(c==null?void 0:c.value)||(s==null?void 0:s.value):S!=null&&S.value?(i==null?void 0:i(P))||R(m==null?void 0:m.value)||(s==null?void 0:s.value):p!=null&&p.value?(u==null?void 0:u(P))||R(h==null?void 0:h.value)||(s==null?void 0:s.value):(a==null?void 0:a(P))||R(s==null?void 0:s.value)||(s==null?void 0:s.value)});return{isVisible:k,hasInvalid:I,hasValid:C,hintContent:H}},render(){if(this.isVisible)return e.h("small",{role:this.hasInvalid||this.hasValid?"alert":void 0},this.hintContent)}}}}function ne(r,n,t){const i=e.computed(()=>!!(r!=null&&r.value&&n.value==="left"||t!=null&&t.iconLeft)),a=e.computed(()=>!!(r!=null&&r.value&&n.value==="right"||t!=null&&t.iconRight)),u=e.computed(()=>!!(r!=null&&r.value&&n.value==="top"||t!=null&&t.iconTop)),s=e.computed(()=>!!(r!=null&&r.value&&n.value==="bottom"||t!=null&&t.iconBottom));return{hasIcon:e.computed(()=>typeof(r==null?void 0:r.value)=="string"?{name:r==null?void 0:r.value}:r==null?void 0:r.value),hasIconLeft:i,hasIconRight:a,hasIconTop:u,hasIconBottom:s}}function re(r,n){const{focused:t}=$.useFocus(r);return e.watch(t,i=>{n(i?"focus":"blur",e.unref(r))}),{focused:t}}function oe(r,n,t=0){let i;return typeof t=="string"&&(t=parseInt(t)),e.computed({get:()=>r==null?void 0:r.value,set:a=>{i&&clearTimeout(i),i=setTimeout(()=>{n("update:modelValue",a)},t)}})}function ae(r,n){const t=e.computed(()=>(e.unref(r)??"").length),i=e.computed(()=>(n==null?void 0:n.lowerLimit)!==void 0&&t.value<(n==null?void 0:n.lowerLimit)?t.value-n.lowerLimit:(n==null?void 0:n.upperLimit)!==void 0&&t.value<(n==null?void 0:n.upperLimit)?n.upperLimit-t.value:0),a=e.computed(()=>(n==null?void 0:n.mode)===!1?"":(n==null?void 0:n.mode)==="limit"?`${t.value} / ${n.lowerLimit?`${n.lowerLimit}-`:""}${n.upperLimit}`:(n==null?void 0:n.mode)==="countdown"?i.value===0?void 0:i:t.value);return{length:t,gap:i,formatted:a}}function F(r,n){const t={[`${r}`]:!0};return{bemCssClasses:e.computed(()=>Object.keys(n).reduce((a,u)=>{const s=e.unref(n[u])||!1;if(!s)return a;if(u==="modifiers"){const y=Array.isArray(s)?s:s.split(" ");return{...a,...y.reduce((S,m)=>({...S,[`${r}--${W(m)}`]:!0}),{})}}else return{...a,[`${r}--${W(u)}`]:s}},t)||{})}}const ie="ds",le={color:String,width:{type:[String,Number]},height:{type:[String,Number]},name:{type:String,required:!0},provider:{type:String},prefix:{type:String,default:"normal"},src:String,horizontalFlip:Boolean,verticalFlip:Boolean,flip:String,mode:String,inline:Boolean,rotate:[Number,String],onLoad:Function,svg:String,modifiers:{type:[String,Array]}},se={name:"VvIcon"},w=e.defineComponent({...se,props:le,setup(r){const n=r,t=e.ref(!0),{modifiers:i}=e.toRefs(n),a=e.inject(ie),{bemCssClasses:u}=F("vv-icon",{modifiers:i}),s=e.computed(()=>n.provider||(a==null?void 0:a.provider)),y=e.computed(()=>{const l=n.name??"",c=`@${s.value}:${n.prefix}:${n.name}`;return T.iconExists(l)?l:T.iconExists(c)?c:(a==null?void 0:a.iconsCollections.find(g=>{const p=`@${s.value}:${g.prefix}:${l}`;if(T.iconExists(p))return p}))||l});function S(l){let c=null;if(typeof window>"u"){const{JSDOM:I}=require("jsdom");c=new I().window}return(c?new c.DOMParser:new window.DOMParser).parseFromString(l,"text/html").querySelector("svg")}function m(l){const c=S(l),g=(c==null?void 0:c.innerHTML.trim())||"";c&&g&&T.addIcon(`@${s.value}:${n.prefix}:${n.name}`,{body:g,height:c.viewBox.baseVal.height,width:c.viewBox.baseVal.width})}return a&&(n.src&&!T.iconExists(`@${s.value}:${n.prefix}:${n.name}`)?(t.value=!1,a.fetchIcon(n.src).then(l=>{l&&(m(l),t.value=!0)}).catch(l=>{throw new Error(`During fetch icon: ${l==null?void 0:l.message}`)})):n.svg&&m(n.svg)),(l,c)=>t.value?(e.openBlock(),e.createBlock(e.unref(T.Icon),e.mergeProps({key:0,class:e.unref(u)},{inline:l.inline,width:l.width,height:l.height,horizontalFlip:l.horizontalFlip,verticalFlip:l.verticalFlip,flip:l.flip,rotate:l.rotate,color:l.color,onLoad:l.onLoad,icon:e.unref(y)}),null,16,["class"])):e.createCommentVNode("",!0)}}),ce={valid:Boolean,validLabel:[String,Array]},de={invalid:Boolean,invalidLabel:[String,Array]},ue={loading:Boolean,loadingLabel:String},pe={disabled:Boolean},fe={readonly:Boolean},me={modifiers:[String,Array]},he={hintLabel:{type:String,default:""}},Se={count:{type:[Boolean,String],default:!1,validator:r=>[!0,!1,"limit","countdown"].includes(r)}},ge={debounce:[Number,String]},j={LEFT:"left",RIGHT:"right"},be={icon:{type:[String,Object]},iconPosition:{type:String,validation:r=>Object.values(j).includes(r),default:j.RIGHT}},ye={...{id:[String,Number],name:{type:String,required:!0}},...{tabindex:{type:[String,Number],default:0}},...pe,...fe,...ce,...de,...he,...ue,...me,...Se,...ge,...be,autofocus:Boolean,autocomplete:{type:String,default:"off"},minlength:Number,maxlength:Number,placeholder:String,required:Boolean,label:String,floating:Boolean},o={TEXT:"text",PASSWORD:"password",NUMBER:"number",EMAIL:"email",TEL:"tel",URL:"url",COLOR:"color",SEARCH:"search",DATE:"date",TIME:"time",DATETIME_LOCAL:"datetime-local",MONTH:"month",WEEK:"week"},E={PASSWORD_SHOW:"eye-on",PASSWORD_HIDE:"eye-off",DATE:"calendar",TIME:"time",COLOR:"color",SEARCH:"close"},we=["update:modelValue","focus","blur","keyup"],Ee={...ye,modelValue:[String,Number],type:{type:String,default:o.TEXT,validator:r=>Object.values(o).includes(r)},min:[Number,Date,String],max:[Number,Date,String],step:{type:[String,Number],default:1},pattern:String,multiple:Boolean,iconShowPassword:{type:String,default:E.PASSWORD_SHOW},iconHidePassword:{type:String,default:E.PASSWORD_HIDE},iconClear:{type:String,default:E.SEARCH},labelStepUp:{type:String,default:"Increase value"},labelStepDown:{type:String,default:"Decrease value"},labelShowPassword:{type:String,default:"Show password"},labelHidePassword:{type:String,default:"Hide password"},labelClear:{type:String,default:"Clear"}},q=e.defineComponent({components:{VvIcon:w},props:{disabled:{type:Boolean,default:!1},labelShow:{type:String,default:"Show password"},labelHide:{type:String,default:"Hide password"},iconShow:{type:String,default:E.PASSWORD_SHOW},iconHide:{type:String,default:E.PASSWORD_HIDE}},emits:["toggle-password"],setup(r,{emit:n}){const t=e.ref(!1),i=e.computed(()=>t.value?r.iconHide:r.iconShow);function a(u){u==null||u.stopPropagation(),r.disabled||(t.value=!t.value,n("toggle-password",t.value))}return{active:t,activeIcon:i,onClick:a}},render(){const r=e.h(w,{name:this.activeIcon,class:"vv-input-text__action-icon"});return e.h("button",{disabled:this.disabled,class:"vv-input-text__action",ariaLabel:this.active?this.labelHide:this.labelShow,type:"button",onClick:this.onClick},r)}}),B=e.defineComponent({components:{VvIcon:w},props:{disabled:{type:Boolean,default:!1},label:{type:String},mode:{type:String,validator:r=>["up","down"].includes(r),default:"up"}},emits:["step-up","step-down"],setup(r,{emit:n}){const t=e.computed(()=>r.mode==="up");return{isUp:t,onClick:a=>{a==null||a.stopPropagation(),r.disabled||n(t.value?"step-up":"step-down")}}},render(){return e.h("button",{class:["vv-input-text__action-chevron",this.isUp&&"vv-input-text__action-chevron-up"],disabled:this.disabled,ariaLabel:this.label,onClick:this.onClick})}}),z=e.defineComponent({components:{VvIcon:w},props:{disabled:{type:Boolean,default:!1},label:{type:String,default:"Clear"},icon:{type:String,default:"close"}},emits:["clear"],setup(r,{emit:n}){function t(i){i==null||i.stopPropagation(),r.disabled||n("clear")}return{onClick:t}},render(){const r=e.h(w,{name:this.icon,class:"vv-input-text__action-icon"});return e.h("button",{disabled:this.disabled,class:"vv-input-text__action",ariaLabel:this.label,type:"button",onClick:this.onClick},r)}});function v(r,n){return{name:"VvInputTextActions",components:{VvIcon:w,VvInputPasswordAction:q,VvInputStepAction:B,VvInputClearAction:z},setup(){return{isDisabled:e.computed(()=>n.disabled||n.readonly),labelStepUp:n.labelStepUp,labelStepDown:n.labelStepDown,labelShowPassword:n.labelShowPassword,labelHidePassword:n.labelHidePassword,labelClear:n.labelClear,iconShowPassword:n.iconShowPassword,iconHidePassword:n.iconHidePassword}},render(){let t=null;switch(r){case o.SEARCH:{const{onClear:i}=this.$attrs;t=[e.h(z,{disabled:this.isDisabled,label:this.labelShowPassword,onClear:i})];break}case o.PASSWORD:{const{onTogglePassword:i}=this.$attrs;t=[e.h(q,{disabled:this.isDisabled,onTogglePassword:i,labelShow:this.labelShowPassword,labelHide:this.labelHidePassword,iconShow:this.iconShowPassword,iconHide:this.iconHidePassword})];break}case o.NUMBER:{const{onStepUp:i,onStepDown:a}=this.$attrs;t=[e.h(B,{mode:"up",disabled:this.isDisabled||n.max!==void 0&&n.modelValue===n.max,label:this.labelStepUp,onStepUp:i,onStepDown:a}),e.h(B,{mode:"down",disabled:this.isDisabled||n.min!==void 0&&n.modelValue===n.min,label:this.labelStepDown,onStepUp:i,onStepDown:a})];break}}return Array.isArray(t)?e.h("div",{class:"vv-input-text__actions-group"},t):t}}}const Ie=["for"],Ce={class:"vv-input-text__wrapper"},Te=["id"],Ae={key:0,class:"vv-input-text__limit"},Pe={name:"VvInputText"};return e.defineComponent({...Pe,props:Ee,emits:we,setup(r,{emit:n}){const t=r,i=e.useSlots(),a=e.ref(),{icon:u,iconPosition:s,label:y,modelValue:S,count:m,valid:l,invalid:c,loading:g}=e.toRefs(t),p=e.computed(()=>String(t.id||D.nanoid())),h=e.computed(()=>`${p.value}-hint`),I=e.computed(()=>t.floating&&_(t.placeholder)?" ":t.placeholder),b=oe(S,n,t.debounce),{focused:C}=re(a,n),A=e.ref(!1),k=e.computed(()=>t.type===o.PASSWORD),O=()=>{A.value=!A.value},H=e.computed(()=>t.type===o.TIME||t.type===o.DATETIME_LOCAL||t.type===o.DATE||t.type===o.WEEK||t.type===o.MONTH),P=e.computed(()=>t.type===o.NUMBER),X=()=>{V.value&&(a.value.stepUp(),b.value=e.unref(a).value)},K=()=>{V.value&&(a.value.stepDown(),b.value=e.unref(a).value)},De=e.computed(()=>t.type===o.SEARCH),Z=()=>{b.value=void 0},{hasIconLeft:G,hasIconRight:x,hasIcon:Y}=ne(u,s),N=e.computed(()=>{switch(t.type){case o.COLOR:return{name:E.COLOR};case o.DATE:case o.DATETIME_LOCAL:case o.WEEK:case o.MONTH:return{name:E.DATE};case o.TIME:return{name:E.TIME};default:return""}}),{formatted:_e}=ae(b,{mode:t.count,upperLimit:t.maxlength,lowerLimit:t.minlength}),V=e.computed(()=>!t.disabled&&!t.readonly),Re=e.computed(()=>V.value?t.tabindex:-1),J=e.computed(()=>!_(S)),ke=e.computed(()=>{if(c.value===!0)return!0;if(l.value===!0)return!1}),{bemCssClasses:Oe}=F("vv-input-text",{modifiers:t.modifiers,valid:l,invalid:c,loading:g,disabled:t.disabled,readonly:t.readonly,iconLeft:G,iconRight:x.value||!_(N),floating:t.floating&&!_(t.label),dirty:J,focus:C}),Be=e.computed(()=>{const d=(()=>k.value&&A.value||H.value&&!J.value&&!C.value?o.TEXT:t.type)(),f={type:d,name:t.name,tabindex:Re.value,disabled:t.disabled,readonly:t.readonly,required:t.required,autocomplete:t.autocomplete,"aria-invalid":ke.value,"aria-describedby":!Q.value&&He.value?h.value:void 0,"aria-errormessage":Q.value?h.value:void 0};return(d===o.DATE||d===o.MONTH||d===o.WEEK||d===o.TIME||d===o.DATETIME_LOCAL||d===o.NUMBER)&&(f.step=t.step,f.max=String(t.max),f.min=String(t.min)),(d===o.TEXT||d===o.SEARCH||d===o.URL||d===o.TEL||d===o.EMAIL||d===o.PASSWORD||d===o.NUMBER)&&(f.placeholder=I.value),(d===o.TEXT||d===o.SEARCH||d===o.URL||d===o.TEL||d===o.EMAIL||d===o.PASSWORD)&&(f.minlength=t.minlength,f.maxlength=t.maxlength,f.pattern=t.pattern),d===o.EMAIL&&(f.multiple=t.multiple),f}),L=e.computed(()=>({valid:t.valid,invalid:t.invalid,modelValue:t.modelValue,togglePassword:O,stepUp:X,stepDown:K,clear:Z})),{HintSlot:ve,hasHint:He,hasInvalid:Q}=te(t,i),xe=v(o.PASSWORD,t),Ne=v(o.NUMBER,t),Ve=v(o.SEARCH,t);return e.onMounted(()=>{t.autofocus&&(C.value=!0)}),(d,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(Oe))},[e.unref(y)?(e.openBlock(),e.createElementBlock("label",{key:0,for:e.unref(p),class:"vv-input-text__label"},e.toDisplayString(e.unref(y)),9,Ie)):e.createCommentVNode("",!0),e.createElementVNode("div",Ce,[e.renderSlot(d.$slots,"before",e.normalizeProps(e.guardReactiveProps(e.unref(L))),()=>[e.unref(G)?(e.openBlock(),e.createBlock(w,e.mergeProps({key:0,class:"vv-input-text__icon-left"},e.unref(Y)),null,16)):e.createCommentVNode("",!0)]),e.withDirectives(e.createElementVNode("input",e.mergeProps({id:e.unref(p),ref_key:"input",ref:a,"onUpdate:modelValue":f[0]||(f[0]=M=>e.isRef(b)?b.value=M:null)},e.unref(Be),{onKeyup:f[1]||(f[1]=M=>n("keyup",M))}),null,16,Te),[[e.vModelDynamic,e.unref(b)]]),e.renderSlot(d.$slots,"after",e.normalizeProps(e.guardReactiveProps(e.unref(L))),()=>[e.unref(x)||e.unref(N)?(e.openBlock(),e.createBlock(w,e.normalizeProps(e.mergeProps({key:0},e.unref(x)?e.unref(Y):e.unref(N))),null,16)):e.unref(k)?(e.openBlock(),e.createBlock(e.unref(xe),{key:1,onTogglePassword:O})):e.unref(P)?(e.openBlock(),e.createBlock(e.unref(Ne),{key:2,onStepUp:X,onStepDown:K})):e.unref(De)?(e.openBlock(),e.createBlock(e.unref(Ve),{key:3,onClear:Z})):e.createCommentVNode("",!0)]),e.unref(m)?(e.openBlock(),e.createElementBlock("span",Ae,[e.renderSlot(d.$slots,"count",e.normalizeProps(e.guardReactiveProps(e.unref(L))),()=>[e.createTextVNode(e.toDisplayString(e.unref(_e)),1)])])):e.createCommentVNode("",!0)]),e.createVNode(e.unref(ve),{id:e.unref(h),class:"vv-input-text__hint"},null,8,["id"])],2))}})});
+(function(e,I){typeof exports=="object"&&typeof module<"u"?module.exports=I(require("vue"),require("@vueuse/core"),require("nanoid"),require("@iconify/vue")):typeof define=="function"&&define.amd?define(["vue","@vueuse/core","nanoid","@iconify/vue"],I):(e=typeof globalThis<"u"?globalThis:e||self,e.VvInputText=I(e.vue,e.core,e.nanoid,e.vue$1))})(this,function(e,I,Q,C){"use strict";function $(r,n){if(r&&Object.keys(r).length&&n){if(n.indexOf(".")===-1)return r[n];{const t=n.split(".");let i=r;for(let a=0,u=t.length;a<u;++a){if(r==null)return null;i=i[t[a]]}return i}}else return null}function D(r){return(n=>n==null||n===""||Array.isArray(n)&&n.length===0||!(n instanceof Date)&&typeof n=="object"&&Object.keys(n).length===0)(e.unref(r))}function ee(r){return typeof r=="string"||r instanceof String}function U(r){var n,t;if(r)return(t=(n=r.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g))==null?void 0:n.join("-"))==null?void 0:t.toLowerCase()}function R(r){return Array.isArray(r)?r.filter(n=>ee(n)).join(" "):r}function te(r,n){const{invalid:t,valid:i,hint:a,loading:u}=n,{hintLabel:s,modelValue:y,valid:S,validLabel:m,invalid:l,invalidLabel:c,...g}=e.toRefs(r),p=$(g,"loading"),h=$(g,"loadingLabel"),P=e.computed(()=>l.value?!!(l.value&&t||c!=null&&c.value&&Array.isArray(c.value)&&c.value.length>0||c!=null&&c.value&&!D(c)):!1),b=e.computed(()=>!!(s&&s.value||a)),A=e.computed(()=>!!(m&&m.value||i)),k=e.computed(()=>!!(p!=null&&p.value&&u||p!=null&&p.value&&(h!=null&&h.value))),_=e.computed(()=>b.value||A.value||P.value||k.value);return{hasInvalid:P,hasHint:b,hasValid:A,hasLoading:k,HintSlot:{name:"HintSlot",props:{params:{type:Object,default:()=>({})}},setup(O){const B=e.computed(()=>{const T=I.toReactive({hintLabel:s,modelValue:y,valid:S,validLabel:m,invalid:l,invalidLabel:c,loading:p,loadingLabel:h,...O.params});return l!=null&&l.value?(t==null?void 0:t(T))||R(c==null?void 0:c.value)||(s==null?void 0:s.value):S!=null&&S.value?(i==null?void 0:i(T))||R(m==null?void 0:m.value)||(s==null?void 0:s.value):p!=null&&p.value?(u==null?void 0:u(T))||R(h==null?void 0:h.value)||(s==null?void 0:s.value):(a==null?void 0:a(T))||R(s==null?void 0:s.value)||(s==null?void 0:s.value)});return{isVisible:_,hasInvalid:P,hasValid:A,hintContent:B}},render(){if(this.isVisible)return e.h("small",{role:this.hasInvalid||this.hasValid?"alert":void 0},this.hintContent)}}}}function ne(r,n,t){const i=e.computed(()=>!!(r!=null&&r.value&&n.value==="left"||t!=null&&t.iconLeft)),a=e.computed(()=>!!(r!=null&&r.value&&n.value==="right"||t!=null&&t.iconRight)),u=e.computed(()=>!!(r!=null&&r.value&&n.value==="top"||t!=null&&t.iconTop)),s=e.computed(()=>!!(r!=null&&r.value&&n.value==="bottom"||t!=null&&t.iconBottom));return{hasIcon:e.computed(()=>typeof(r==null?void 0:r.value)=="string"?{name:r==null?void 0:r.value}:r==null?void 0:r.value),hasIconLeft:i,hasIconRight:a,hasIconTop:u,hasIconBottom:s}}function re(r,n){const{focused:t}=I.useFocus(r);return e.watch(t,i=>{n(i?"focus":"blur",e.unref(r))}),{focused:t}}function oe(r,n,t=0){let i;return typeof t=="string"&&(t=parseInt(t)),e.computed({get:()=>r==null?void 0:r.value,set:a=>{i&&clearTimeout(i),i=setTimeout(()=>{n("update:modelValue",a)},t)}})}function ae(r,n){const t=e.computed(()=>(e.unref(r)??"").length),i=e.computed(()=>(n==null?void 0:n.lowerLimit)!==void 0&&t.value<(n==null?void 0:n.lowerLimit)?t.value-n.lowerLimit:(n==null?void 0:n.upperLimit)!==void 0&&t.value<(n==null?void 0:n.upperLimit)?n.upperLimit-t.value:0),a=e.computed(()=>(n==null?void 0:n.mode)===!1?"":(n==null?void 0:n.mode)==="limit"&&(n!=null&&n.upperLimit)?`${t.value} / ${n.lowerLimit?`${n.lowerLimit}-`:""}${n.upperLimit}`:(n==null?void 0:n.mode)==="countdown"?i.value===0?void 0:i:t.value);return{length:t,gap:i,formatted:a}}function F(r,n){const t={[`${r}`]:!0};return{bemCssClasses:e.computed(()=>Object.keys(n).reduce((a,u)=>{const s=e.unref(n[u])||!1;if(!s)return a;if(u==="modifiers"){const y=Array.isArray(s)?s:s.split(" ");return{...a,...y.reduce((S,m)=>({...S,[`${r}--${U(m)}`]:!0}),{})}}else return{...a,[`${r}--${U(u)}`]:s}},t)||{})}}const ie="ds",le={color:String,width:{type:[String,Number]},height:{type:[String,Number]},name:{type:String,required:!0},provider:{type:String},prefix:{type:String,default:"normal"},src:String,horizontalFlip:Boolean,verticalFlip:Boolean,flip:String,mode:String,inline:Boolean,rotate:[Number,String],onLoad:Function,svg:String,modifiers:{type:[String,Array]}},se={name:"VvIcon"},w=e.defineComponent({...se,props:le,setup(r){const n=r,t=e.ref(!0),{modifiers:i}=e.toRefs(n),a=e.inject(ie),{bemCssClasses:u}=F("vv-icon",{modifiers:i}),s=e.computed(()=>n.provider||(a==null?void 0:a.provider)),y=e.computed(()=>{const l=n.name??"",c=`@${s.value}:${n.prefix}:${n.name}`;return C.iconExists(l)?l:C.iconExists(c)?c:(a==null?void 0:a.iconsCollections.find(g=>{const p=`@${s.value}:${g.prefix}:${l}`;if(C.iconExists(p))return p}))||l});function S(l){let c=null;if(typeof window>"u"){const{JSDOM:P}=require("jsdom");c=new P().window}return(c?new c.DOMParser:new window.DOMParser).parseFromString(l,"text/html").querySelector("svg")}function m(l){const c=S(l),g=(c==null?void 0:c.innerHTML.trim())||"";c&&g&&C.addIcon(`@${s.value}:${n.prefix}:${n.name}`,{body:g,height:c.viewBox.baseVal.height,width:c.viewBox.baseVal.width})}return a&&(n.src&&!C.iconExists(`@${s.value}:${n.prefix}:${n.name}`)?(t.value=!1,a.fetchIcon(n.src).then(l=>{l&&(m(l),t.value=!0)}).catch(l=>{throw new Error(`During fetch icon: ${l==null?void 0:l.message}`)})):n.svg&&m(n.svg)),(l,c)=>t.value?(e.openBlock(),e.createBlock(e.unref(C.Icon),e.mergeProps({key:0,class:e.unref(u)},{inline:l.inline,width:l.width,height:l.height,horizontalFlip:l.horizontalFlip,verticalFlip:l.verticalFlip,flip:l.flip,rotate:l.rotate,color:l.color,onLoad:l.onLoad,icon:e.unref(y)}),null,16,["class"])):e.createCommentVNode("",!0)}}),ce={valid:Boolean,validLabel:[String,Array]},de={invalid:Boolean,invalidLabel:[String,Array]},ue={loading:Boolean,loadingLabel:String},pe={disabled:Boolean},fe={readonly:Boolean},me={modifiers:[String,Array]},he={hintLabel:{type:String,default:""}},Se={count:{type:[Boolean,String],default:!1,validator:r=>[!0,!1,"limit","countdown"].includes(r)}},ge={debounce:[Number,String]},W={LEFT:"left",RIGHT:"right"},be={icon:{type:[String,Object]},iconPosition:{type:String,validation:r=>Object.values(W).includes(r),default:W.RIGHT}},ye={...{id:[String,Number],name:{type:String,required:!0}},...{autofocus:Boolean},...{autocomplete:{type:String,default:"off"}},...{tabindex:{type:[String,Number],default:0}},...pe,...fe,...ce,...de,...he,...ue,...me,...Se,...ge,...be,...{floating:Boolean},minlength:Number,maxlength:Number,placeholder:String,required:Boolean,label:String},o={TEXT:"text",PASSWORD:"password",NUMBER:"number",EMAIL:"email",TEL:"tel",URL:"url",COLOR:"color",SEARCH:"search",DATE:"date",TIME:"time",DATETIME_LOCAL:"datetime-local",MONTH:"month",WEEK:"week"},E={PASSWORD_SHOW:"eye-on",PASSWORD_HIDE:"eye-off",DATE:"calendar",TIME:"time",COLOR:"color",SEARCH:"close"},we=["update:modelValue","focus","blur","keyup"],Ee={...ye,modelValue:[String,Number],type:{type:String,default:o.TEXT,validator:r=>Object.values(o).includes(r)},min:[Number,Date,String],max:[Number,Date,String],step:{type:[String,Number],default:1},pattern:String,multiple:Boolean,iconShowPassword:{type:String,default:E.PASSWORD_SHOW},iconHidePassword:{type:String,default:E.PASSWORD_HIDE},iconClear:{type:String,default:E.SEARCH},labelStepUp:{type:String,default:"Increase value"},labelStepDown:{type:String,default:"Decrease value"},labelShowPassword:{type:String,default:"Show password"},labelHidePassword:{type:String,default:"Hide password"},labelClear:{type:String,default:"Clear"}},j=e.defineComponent({components:{VvIcon:w},props:{disabled:{type:Boolean,default:!1},labelShow:{type:String,default:"Show password"},labelHide:{type:String,default:"Hide password"},iconShow:{type:String,default:E.PASSWORD_SHOW},iconHide:{type:String,default:E.PASSWORD_HIDE}},emits:["toggle-password"],setup(r,{emit:n}){const t=e.ref(!1),i=e.computed(()=>t.value?r.iconHide:r.iconShow);function a(u){u==null||u.stopPropagation(),r.disabled||(t.value=!t.value,n("toggle-password",t.value))}return{active:t,activeIcon:i,onClick:a}},render(){const r=e.h(w,{name:this.activeIcon,class:"vv-input-text__action-icon"});return e.h("button",{disabled:this.disabled,class:"vv-input-text__action",ariaLabel:this.active?this.labelHide:this.labelShow,type:"button",onClick:this.onClick},r)}}),v=e.defineComponent({components:{VvIcon:w},props:{disabled:{type:Boolean,default:!1},label:{type:String},mode:{type:String,validator:r=>["up","down"].includes(r),default:"up"}},emits:["step-up","step-down"],setup(r,{emit:n}){const t=e.computed(()=>r.mode==="up");return{isUp:t,onClick:a=>{a==null||a.stopPropagation(),r.disabled||n(t.value?"step-up":"step-down")}}},render(){return e.h("button",{class:["vv-input-text__action-chevron",this.isUp&&"vv-input-text__action-chevron-up"],disabled:this.disabled,ariaLabel:this.label,onClick:this.onClick})}}),q=e.defineComponent({components:{VvIcon:w},props:{disabled:{type:Boolean,default:!1},label:{type:String,default:"Clear"},icon:{type:String,default:"close"}},emits:["clear"],setup(r,{emit:n}){function t(i){i==null||i.stopPropagation(),r.disabled||n("clear")}return{onClick:t}},render(){const r=e.h(w,{name:this.icon,class:"vv-input-text__action-icon"});return e.h("button",{disabled:this.disabled,class:"vv-input-text__action",ariaLabel:this.label,type:"button",onClick:this.onClick},r)}});function H(r,n){return{name:"VvInputTextActions",components:{VvIcon:w,VvInputPasswordAction:j,VvInputStepAction:v,VvInputClearAction:q},setup(){return{isDisabled:e.computed(()=>n.disabled||n.readonly),labelStepUp:n.labelStepUp,labelStepDown:n.labelStepDown,labelShowPassword:n.labelShowPassword,labelHidePassword:n.labelHidePassword,labelClear:n.labelClear,iconShowPassword:n.iconShowPassword,iconHidePassword:n.iconHidePassword}},render(){let t=null;switch(r){case o.SEARCH:{const{onClear:i}=this.$attrs;t=[e.h(q,{disabled:this.isDisabled,label:this.labelShowPassword,onClear:i})];break}case o.PASSWORD:{const{onTogglePassword:i}=this.$attrs;t=[e.h(j,{disabled:this.isDisabled,onTogglePassword:i,labelShow:this.labelShowPassword,labelHide:this.labelHidePassword,iconShow:this.iconShowPassword,iconHide:this.iconHidePassword})];break}case o.NUMBER:{const{onStepUp:i,onStepDown:a}=this.$attrs;t=[e.h(v,{mode:"up",disabled:this.isDisabled||n.max!==void 0&&n.modelValue===n.max,label:this.labelStepUp,onStepUp:i,onStepDown:a}),e.h(v,{mode:"down",disabled:this.isDisabled||n.min!==void 0&&n.modelValue===n.min,label:this.labelStepDown,onStepUp:i,onStepDown:a})];break}}return Array.isArray(t)?e.h("div",{class:"vv-input-text__actions-group"},t):t}}}const Ie=["for"],Pe={class:"vv-input-text__wrapper"},Ae=["id"],Ce={key:0,class:"vv-input-text__limit"},Te={name:"VvInputText"};return e.defineComponent({...Te,props:Ee,emits:we,setup(r,{emit:n}){const t=r,i=e.useSlots(),a=e.ref(),{icon:u,iconPosition:s,label:y,modelValue:S,count:m,valid:l,invalid:c,loading:g}=e.toRefs(t),p=e.computed(()=>String(t.id||Q.nanoid())),h=e.computed(()=>`${p.value}-hint`),P=e.computed(()=>t.floating&&D(t.placeholder)?" ":t.placeholder),b=oe(S,n,t.debounce),{focused:A}=re(a,n),k=I.useElementVisibility(a);e.watch(k,d=>{d&&t.autofocus&&(A.value=!0)});const _=e.ref(!1),O=e.computed(()=>t.type===o.PASSWORD),B=()=>{_.value=!_.value},T=e.computed(()=>t.type===o.TIME||t.type===o.DATETIME_LOCAL||t.type===o.DATE||t.type===o.WEEK||t.type===o.MONTH),De=e.computed(()=>t.type===o.NUMBER),z=()=>{N.value&&(a.value.stepUp(),b.value=e.unref(a).value)},X=()=>{N.value&&(a.value.stepDown(),b.value=e.unref(a).value)},_e=e.computed(()=>t.type===o.SEARCH),K=()=>{b.value=void 0},{hasIconLeft:Z,hasIconRight:x,hasIcon:G}=ne(u,s),V=e.computed(()=>{switch(t.type){case o.COLOR:return{name:E.COLOR};case o.DATE:case o.DATETIME_LOCAL:case o.WEEK:case o.MONTH:return{name:E.DATE};case o.TIME:return{name:E.TIME};default:return""}}),{formatted:Re}=ae(b,{mode:t.count,upperLimit:t.maxlength,lowerLimit:t.minlength}),N=e.computed(()=>!t.disabled&&!t.readonly),ke=e.computed(()=>N.value?t.tabindex:-1),Y=e.computed(()=>!D(S)),Oe=e.computed(()=>{if(c.value===!0)return!0;if(l.value===!0)return!1}),{bemCssClasses:Be}=F("vv-input-text",{modifiers:t.modifiers,valid:l,invalid:c,loading:g,disabled:t.disabled,readonly:t.readonly,iconLeft:Z,iconRight:x.value||!D(V),floating:t.floating&&!D(t.label),dirty:Y,focus:A}),ve=e.computed(()=>{const d=(()=>O.value&&_.value||T.value&&!Y.value&&!A.value?o.TEXT:t.type)(),f={type:d,name:t.name,tabindex:ke.value,disabled:t.disabled,readonly:t.readonly,required:t.required,autocomplete:t.autocomplete,"aria-invalid":Oe.value,"aria-describedby":!J.value&&xe.value?h.value:void 0,"aria-errormessage":J.value?h.value:void 0};return(d===o.DATE||d===o.MONTH||d===o.WEEK||d===o.TIME||d===o.DATETIME_LOCAL||d===o.NUMBER)&&(f.step=t.step,f.max=String(t.max),f.min=String(t.min)),(d===o.TEXT||d===o.SEARCH||d===o.URL||d===o.TEL||d===o.EMAIL||d===o.PASSWORD||d===o.NUMBER)&&(f.placeholder=P.value),(d===o.TEXT||d===o.SEARCH||d===o.URL||d===o.TEL||d===o.EMAIL||d===o.PASSWORD)&&(f.minlength=t.minlength,f.maxlength=t.maxlength,f.pattern=t.pattern),d===o.EMAIL&&(f.multiple=t.multiple),f}),L=e.computed(()=>({valid:t.valid,invalid:t.invalid,modelValue:t.modelValue,togglePassword:B,stepUp:z,stepDown:X,clear:K})),{HintSlot:He,hasHint:xe,hasInvalid:J}=te(t,i),Ve=H(o.PASSWORD,t),Ne=H(o.NUMBER,t),Le=H(o.SEARCH,t);return(d,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(Be))},[e.unref(y)?(e.openBlock(),e.createElementBlock("label",{key:0,for:e.unref(p),class:"vv-input-text__label"},e.toDisplayString(e.unref(y)),9,Ie)):e.createCommentVNode("",!0),e.createElementVNode("div",Pe,[e.renderSlot(d.$slots,"before",e.normalizeProps(e.guardReactiveProps(e.unref(L))),()=>[e.unref(Z)?(e.openBlock(),e.createBlock(w,e.mergeProps({key:0,class:"vv-input-text__icon-left"},e.unref(G)),null,16)):e.createCommentVNode("",!0)]),e.withDirectives(e.createElementVNode("input",e.mergeProps({id:e.unref(p),ref_key:"input",ref:a,"onUpdate:modelValue":f[0]||(f[0]=M=>e.isRef(b)?b.value=M:null)},e.unref(ve),{onKeyup:f[1]||(f[1]=M=>n("keyup",M))}),null,16,Ae),[[e.vModelDynamic,e.unref(b)]]),e.renderSlot(d.$slots,"after",e.normalizeProps(e.guardReactiveProps(e.unref(L))),()=>[e.unref(x)||e.unref(V)?(e.openBlock(),e.createBlock(w,e.normalizeProps(e.mergeProps({key:0},e.unref(x)?e.unref(G):e.unref(V))),null,16)):e.unref(O)?(e.openBlock(),e.createBlock(e.unref(Ve),{key:1,onTogglePassword:B})):e.unref(De)?(e.openBlock(),e.createBlock(e.unref(Ne),{key:2,onStepUp:z,onStepDown:X})):e.unref(_e)?(e.openBlock(),e.createBlock(e.unref(Le),{key:3,onClear:K})):e.createCommentVNode("",!0)]),e.unref(m)?(e.openBlock(),e.createElementBlock("span",Ce,[e.renderSlot(d.$slots,"count",e.normalizeProps(e.guardReactiveProps(e.unref(L))),()=>[e.createTextVNode(e.toDisplayString(e.unref(Re)),1)])])):e.createCommentVNode("",!0)]),e.createVNode(e.unref(He),{id:e.unref(h),class:"vv-input-text__hint"},null,8,["id"])],2))}})});

package/dist/components/VvInputText/VvInputText.vue.d.ts

@@ -45,11 +45,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    autofocus: BooleanConstructor;
-    autocomplete: {
-        type: StringConstructor;
-        default: string;
-    };
     minlength: NumberConstructor;
     maxlength: NumberConstructor;
     placeholder: StringConstructor;
@@ -87,6 +82,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    autofocus: BooleanConstructor;
     id: (StringConstructor | NumberConstructor)[];
     name: {
         type: StringConstructor;
@@ -139,11 +139,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    autofocus: BooleanConstructor;
-    autocomplete: {
-        type: StringConstructor;
-        default: string;
-    };
     minlength: NumberConstructor;
     maxlength: NumberConstructor;
     placeholder: StringConstructor;
@@ -181,6 +176,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    autofocus: BooleanConstructor;
     id: (StringConstructor | NumberConstructor)[];
     name: {
         type: StringConstructor;
@@ -200,6 +200,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     invalid: boolean;
     valid: boolean;
     tabindex: string | number;
+    floating: boolean;
+    autocomplete: string;
+    autofocus: boolean;
     step: string | number;
     iconShowPassword: string;
     iconHidePassword: string;
@@ -209,9 +212,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     labelShowPassword: string;
     labelHidePassword: string;
     labelClear: string;
-    autofocus: boolean;
-    autocomplete: string;
-    floating: boolean;
     count: string | boolean;
 }>, {
     before: (_: {

package/dist/components/VvInputText/index.d.ts

@@ -131,11 +131,6 @@ export declare const VvInputTextProps: {
         type: StringConstructor;
         default: string;
     };
-    autofocus: BooleanConstructor;
-    autocomplete: {
-        type: StringConstructor;
-        default: string;
-    };
     minlength: NumberConstructor;
     maxlength: NumberConstructor;
     placeholder: StringConstructor;
@@ -173,6 +168,11 @@ export declare const VvInputTextProps: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    autofocus: BooleanConstructor;
     id: (StringConstructor | NumberConstructor)[];
     name: {
         type: StringConstructor;