@volverjs/ui-vue 0.0.3-beta.4 → 0.0.3

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

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

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

@@ -55,9 +55,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: (StringConstructor | ObjectConstructor)[];
     };
     iconPosition: {
-        type: import("vue").PropType<import("../../props/index.js").IconPosition>;
-        validation: (value: import("../../props/index.js").IconPosition) => boolean;
-        default: "right";
+        type: import("vue").PropType<import("../../constants.js").Position>;
+        default: import("../../constants.js").Position;
+        validation: (value: import("../../constants.js").Position) => boolean;
     };
     debounce: (StringConstructor | NumberConstructor)[];
     count: {
@@ -87,11 +87,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     autofocus: BooleanConstructor;
-    id: (StringConstructor | NumberConstructor)[];
     name: {
         type: StringConstructor;
         required: boolean;
     };
+    id: (StringConstructor | NumberConstructor)[];
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: (StringConstructor | NumberConstructor)[];
     type: {
@@ -149,9 +149,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: (StringConstructor | ObjectConstructor)[];
     };
     iconPosition: {
-        type: import("vue").PropType<import("../../props/index.js").IconPosition>;
-        validation: (value: import("../../props/index.js").IconPosition) => boolean;
-        default: "right";
+        type: import("vue").PropType<import("../../constants.js").Position>;
+        default: import("../../constants.js").Position;
+        validation: (value: import("../../constants.js").Position) => boolean;
     };
     debounce: (StringConstructor | NumberConstructor)[];
     count: {
@@ -181,20 +181,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     autofocus: BooleanConstructor;
-    id: (StringConstructor | NumberConstructor)[];
     name: {
         type: StringConstructor;
         required: boolean;
     };
+    id: (StringConstructor | NumberConstructor)[];
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
     type: import("@/components/VvInputText").InputType;
     required: boolean;
-    multiple: boolean;
-    iconPosition: import("../../props/index.js").IconPosition;
+    iconPosition: import("../../constants.js").Position;
     loading: boolean;
+    multiple: boolean;
     readonly: boolean;
     hintLabel: string;
     invalid: boolean;

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

@@ -141,9 +141,9 @@ export declare const VvInputTextProps: {
         type: (StringConstructor | ObjectConstructor)[];
     };
     iconPosition: {
-        type: PropType<import("@/props").IconPosition>;
-        validation: (value: import("@/props").IconPosition) => boolean;
-        default: "right";
+        type: PropType<import("../../constants").Position>;
+        default: import("../../constants").Position;
+        validation: (value: import("../../constants").Position) => boolean;
     };
     debounce: (StringConstructor | NumberConstructor)[];
     count: {
@@ -173,10 +173,10 @@ export declare const VvInputTextProps: {
         default: string;
     };
     autofocus: BooleanConstructor;
-    id: (StringConstructor | NumberConstructor)[];
     name: {
         type: StringConstructor;
         required: boolean;
     };
+    id: (StringConstructor | NumberConstructor)[];
 };
 export type VvInputTextPropsTypes = ExtractPropTypes<typeof VvInputTextProps>;

package/dist/components/VvProgress/VvProgress.es.js

@@ -1,37 +1,61 @@
-import { defineComponent as l, openBlock as m, createElementBlock as p, mergeProps as u, unref as e } from "vue";
-const c = {
+import { defineComponent as d, openBlock as c, createElementBlock as b, mergeProps as g, unref as e } from "vue";
+var o = /* @__PURE__ */ ((t) => (t.left = "left", t.right = "right", t.top = "top", t.bottom = "bottom", t))(o || {}), s = /* @__PURE__ */ ((t) => (t.topStart = "top-start", t.topEnd = "top-end", t.bottomStart = "bottom-start", t.bottomEnd = "bottom-end", t.leftStart = "left-start", t.leftEnd = "left-end", t.rightStart = "right-start", t.rightEnd = "right-end", t))(s || {}), a = /* @__PURE__ */ ((t) => (t.before = "before", t.after = "after", t))(a || {});
+const m = {
+  /**
+   * Component BEM modifiers
+   */
   modifiers: [String, Array]
-}, d = {
-  ...c,
+};
+a.before;
+o.bottom;
+const v = {
+  ...m,
+  /**
+   * Progress value
+   * This attribute specifies how much of the task that has been completed.
+   * It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted.
+   * If there is no value attribute, the progress bar is indeterminate.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-max
+   */
   value: {
     type: [Number, String],
     default: void 0
   },
+  /**
+   * Progress max
+   * This attribute describes how much work the task indicated by the progress element requires.
+   * The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-max
+   */
   max: {
     type: [Number, String]
   },
+  /**
+   * Progress aria-label
+   */
   label: {
     type: String,
     required: !0
   }
-}, f = {
+}, y = {
   name: "VvProgress"
-}, _ = /* @__PURE__ */ l({
-  ...f,
-  props: d,
-  setup(s) {
-    const r = s, { value: o, max: t, label: a } = toRefs(r), n = computed(() => r.value === void 0), { bemCssClasses: i } = useBemModifiers("vv-progress", {
-      modifiers: r.modifiers,
-      indeterminate: n
-    });
-    return (g, v) => (m(), p("progress", u({ role: "progressbar" }, {
-      class: e(i),
-      ariaLabel: e(a),
-      max: e(t),
-      value: e(o)
+}, j = /* @__PURE__ */ d({
+  ...y,
+  props: v,
+  setup(t) {
+    const r = t, { value: n, max: l, label: i } = toRefs(r), u = computed(() => r.value === void 0), { modifiers: f } = toRefs(r), p = useBemModifiers(
+      "vv-progress",
+      f,
+      computed(() => ({ indeterminate: u.value }))
+    );
+    return (B, S) => (c(), b("progress", g({ role: "progressbar" }, {
+      class: e(p),
+      ariaLabel: e(i),
+      max: e(l),
+      value: e(n)
     }), null, 16));
   }
 });
 export {
-  _ as default
+  j as default
 };

package/dist/components/VvProgress/VvProgress.umd.js

@@ -1 +1 @@
-(function(e,r){typeof exports=="object"&&typeof module<"u"?module.exports=r(require("vue")):typeof define=="function"&&define.amd?define(["vue"],r):(e=typeof globalThis<"u"?globalThis:e||self,e.VvProgress=r(e.vue))})(this,function(e){"use strict";const o={...{modifiers:[String,Array]},value:{type:[Number,String],default:void 0},max:{type:[Number,String]},label:{type:String,required:!0}},n={name:"VvProgress"};return e.defineComponent({...n,props:o,setup(t){const s=t,{value:i,max:a,label:f}=toRefs(s),u=computed(()=>s.value===void 0),{bemCssClasses:d}=useBemModifiers("vv-progress",{modifiers:s.modifiers,indeterminate:u});return(l,c)=>(e.openBlock(),e.createElementBlock("progress",e.mergeProps({role:"progressbar"},{class:e.unref(d),ariaLabel:e.unref(f),max:e.unref(a),value:e.unref(i)}),null,16))}})});
+(function(t,r){typeof exports=="object"&&typeof module<"u"?module.exports=r(require("vue")):typeof define=="function"&&define.amd?define(["vue"],r):(t=typeof globalThis<"u"?globalThis:t||self,t.VvProgress=r(t.vue))})(this,function(t){"use strict";var r=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(r||{}),s=(e=>(e.topStart="top-start",e.topEnd="top-end",e.bottomStart="bottom-start",e.bottomEnd="bottom-end",e.leftStart="left-start",e.leftEnd="left-end",e.rightStart="right-start",e.rightEnd="right-end",e))(s||{}),o=(e=>(e.before="before",e.after="after",e))(o||{});const a={modifiers:[String,Array]};o.before,r.bottom;const i={...a,value:{type:[Number,String],default:void 0},max:{type:[Number,String]},label:{type:String,required:!0}},f={name:"VvProgress"};return t.defineComponent({...f,props:i,setup(e){const n=e,{value:u,max:l,label:d}=toRefs(n),p=computed(()=>n.value===void 0),{modifiers:c}=toRefs(n),b=useBemModifiers("vv-progress",c,computed(()=>({indeterminate:p.value})));return(g,y)=>(t.openBlock(),t.createElementBlock("progress",t.mergeProps({role:"progressbar"},{class:t.unref(b),ariaLabel:t.unref(d),max:t.unref(l),value:t.unref(u)}),null,16))}})});

package/dist/components/VvRadio/VvRadio.es.js

@@ -1,77 +1,121 @@
-import { defineComponent as B, openBlock as I, createElementBlock as C, normalizeClass as D, unref as s, withDirectives as N, createElementVNode as x, isRef as O, vModelRadio as k, renderSlot as G, createTextVNode as H, toDisplayString as j, createVNode as E } from "vue";
-import { nanoid as F } from "nanoid";
-const M = {
+import { defineComponent as C, openBlock as E, createElementBlock as P, normalizeClass as x, unref as i, withDirectives as D, createElementVNode as k, isRef as G, vModelRadio as H, renderSlot as F, createTextVNode as M, toDisplayString as q, createVNode as T } from "vue";
+var R = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(R || {}), A = /* @__PURE__ */ ((e) => (e.topStart = "top-start", e.topEnd = "top-end", e.bottomStart = "bottom-start", e.bottomEnd = "bottom-end", e.leftStart = "left-start", e.leftEnd = "left-end", e.rightStart = "right-start", e.rightEnd = "right-end", e))(A || {}), I = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))(I || {});
+const U = Symbol.for("radioGroup"), w = {
   valid: Boolean,
   validLabel: [String, Array]
-}, U = {
+}, z = {
   invalid: Boolean,
   invalidLabel: [String, Array]
-}, q = {
+}, J = {
+  /**
+   * Whether the form control is disabled
+   */
   disabled: Boolean
-}, T = {
+}, K = {
+  /**
+   * The value is not editable
+   */
   readonly: Boolean
-}, w = {
+}, W = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: [String, Array]
+}, Y = {
   hintLabel: { type: String, default: "" }
-}, z = {
+};
+I.before;
+const $ = {
+  /**
+   * Global attribute tabindex
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+   */
   tabindex: { type: [String, Number], default: 0 }
-}, $ = {
-  id: [String, Number],
+}, Q = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+};
+R.bottom;
+const X = {
+  ...Q,
+  /**
+   * Input / Textarea name
+   * Name of the form control. Submitted with the form as part of a name/value pair
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
+   */
   name: { type: String, required: !0 }
-}, J = {
+}, Z = {
+  ...X,
   ...$,
-  ...z,
-  ...M,
-  ...U,
   ...w,
-  ...q,
-  ...T,
+  ...z,
+  ...Y,
+  ...J,
+  ...K,
+  ...W,
+  /**
+   * Input value
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+   */
   value: [String, Number, Boolean],
+  /**
+   * Input value
+   */
   modelValue: [Object, Number, Boolean, String],
+  /**
+   * <label> for input
+   */
   label: String
-}, K = "VV_RADIO_GROUP", Q = J, W = ["click", "update:modelValue", "change", "blur"];
-function X(o, c) {
-  const { group: t, isInGroup: v, getGroupOrLocalRef: n } = useInjectedGroupState(K), l = n("modelValue", o, c), e = n("readonly", o), f = n("disabled", o), i = n("valid", o), u = n("invalid", o);
+}, L = Z, ee = ["click", "update:modelValue", "change", "blur"];
+function te(e, v) {
+  const { id: a } = toRefs(e), { group: p, isInGroup: f, getGroupOrLocalRef: r } = useInjectedGroupState(U), t = r("modelValue", e, v), l = r("readonly", e), d = r("disabled", e), u = r("valid", e), s = r("invalid", e);
   return {
-    group: t,
-    isInGroup: v,
-    modelValue: l,
-    readonly: e,
-    disabled: f,
-    valid: i,
-    invalid: u
+    // local props
+    id: a,
+    // global props
+    group: p,
+    isInGroup: f,
+    modelValue: t,
+    readonly: l,
+    disabled: d,
+    valid: u,
+    invalid: s
   };
 }
-function R(o) {
-  return Array.isArray(o) ? o.filter((c) => isString(c)).join(" ") : o;
+function O(e) {
+  return Array.isArray(e) ? e.filter((v) => isString(v)).join(" ") : e;
 }
-function Y(o, c) {
+function ae(e, v) {
   const {
-    invalid: t,
-    valid: v,
-    hint: n,
-    loading: l
-  } = c, {
-    hintLabel: e,
-    modelValue: f,
-    valid: i,
+    invalid: a,
+    valid: p,
+    hint: f,
+    loading: r
+  } = v, {
+    hintLabel: t,
+    modelValue: l,
+    valid: d,
     validLabel: u,
-    invalid: p,
-    invalidLabel: a,
-    ...b
-  } = toRefs(o), r = resolveFieldData(b, "loading"), d = resolveFieldData(b, "loadingLabel"), y = computed(() => p.value ? !!(p.value && t || a != null && a.value && Array.isArray(a.value) && a.value.length > 0 || a != null && a.value && !isEmpty(a)) : !1), V = computed(
-    () => !!(e && e.value || n)
-  ), _ = computed(
-    () => !!(u && u.value || v)
-  ), S = computed(
-    () => !!(r != null && r.value && l || r != null && r.value && (d != null && d.value))
+    invalid: s,
+    invalidLabel: o,
+    ...V
+  } = toRefs(e), n = resolveFieldData(V, "loading"), c = resolveFieldData(V, "loadingLabel"), g = computed(() => s.value ? !!(s.value && a || o != null && o.value && Array.isArray(o.value) && o.value.length > 0 || o != null && o.value && !isEmpty(o)) : !1), S = computed(
+    () => !!(t && t.value || f)
   ), m = computed(
-    () => V.value || _.value || y.value || S.value
+    () => !!(u && u.value || p)
+  ), B = computed(
+    () => !!(n != null && n.value && r || n != null && n.value && (c != null && c.value))
+  ), _ = computed(
+    () => S.value || m.value || g.value || B.value
   );
   return {
-    hasInvalid: y,
-    hasHint: V,
-    hasValid: _,
-    hasLoading: S,
+    hasInvalid: g,
+    hasHint: S,
+    hasValid: m,
+    hasLoading: B,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -80,26 +124,26 @@ function Y(o, c) {
           default: () => ({})
         }
       },
-      setup(g) {
-        const A = computed(() => {
-          const P = toReactive({
-            hintLabel: e,
-            modelValue: f,
-            valid: i,
+      setup(j) {
+        const y = computed(() => {
+          const b = toReactive({
+            hintLabel: t,
+            modelValue: l,
+            valid: d,
             validLabel: u,
-            invalid: p,
-            invalidLabel: a,
-            loading: r,
-            loadingLabel: d,
-            ...g.params
+            invalid: s,
+            invalidLabel: o,
+            loading: n,
+            loadingLabel: c,
+            ...j.params
           });
-          return p != null && p.value ? (t == null ? void 0 : t(P)) || R(a == null ? void 0 : a.value) || (e == null ? void 0 : e.value) : i != null && i.value ? (v == null ? void 0 : v(P)) || R(u == null ? void 0 : u.value) || (e == null ? void 0 : e.value) : r != null && r.value ? (l == null ? void 0 : l(P)) || R(d == null ? void 0 : d.value) || (e == null ? void 0 : e.value) : (n == null ? void 0 : n(P)) || R(e == null ? void 0 : e.value) || (e == null ? void 0 : e.value);
+          return s != null && s.value ? (a == null ? void 0 : a(b)) || O(o == null ? void 0 : o.value) || (t == null ? void 0 : t.value) : d != null && d.value ? (p == null ? void 0 : p(b)) || O(u == null ? void 0 : u.value) || (t == null ? void 0 : t.value) : n != null && n.value ? (r == null ? void 0 : r(b)) || O(c == null ? void 0 : c.value) || (t == null ? void 0 : t.value) : (f == null ? void 0 : f(b)) || O(t == null ? void 0 : t.value) || (t == null ? void 0 : t.value);
         });
         return {
-          isVisible: m,
-          hasInvalid: y,
-          hasValid: _,
-          hintContent: A
+          isVisible: _,
+          hasInvalid: g,
+          hasValid: m,
+          hintContent: y
         };
       },
       render() {
@@ -107,7 +151,7 @@ function Y(o, c) {
           return h(
             "small",
             {
-              role: this.hasInvalid || this.hasValid ? "alert" : void 0
+              role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
             },
             this.hintContent
           );
@@ -115,67 +159,68 @@ function Y(o, c) {
     }
   };
 }
-const Z = ["for"], L = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], ee = {
+const oe = ["for"], re = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], ne = {
   name: "VvRadio"
-}, oe = /* @__PURE__ */ B({
-  ...ee,
-  props: Q,
-  emits: W,
-  setup(o, { emit: c }) {
-    const t = o, v = useSlots(), { disabled: n, readonly: l, modelValue: e, valid: f, invalid: i } = X(
-      t,
-      c
-    ), u = computed(() => String(t.id || F())), p = computed(() => b.value ? -1 : t.tabindex), a = ref(), b = computed(() => n.value || l.value), r = computed(() => {
-      if (i.value === !0)
+}, ue = /* @__PURE__ */ C({
+  ...ne,
+  props: L,
+  emits: ee,
+  setup(e, { emit: v }) {
+    const a = e, p = useSlots(), { id: f, disabled: r, readonly: t, modelValue: l, valid: d, invalid: u } = te(a, v), s = useUniqueId(f), o = computed(() => n.value ? -1 : a.tabindex), V = ref(), n = computed(() => r.value || t.value), c = computed(() => {
+      if (u.value === !0)
         return !0;
-      if (f.value === !0)
+      if (d.value === !0)
         return !1;
-    }), d = computed(
-      () => Array.isArray(e.value) ? contains(t.value, e.value) : equals(t.value, e.value)
-    ), y = computed(
-      () => ["string", "number", "boolean"].includes(typeof t.value) ? t.value : !0
-    ), V = computed({
+    }), g = computed(
+      () => Array.isArray(l.value) ? contains(a.value, l.value) : equals(a.value, l.value)
+    ), S = computed(
+      () => ["string", "number", "boolean"].includes(typeof a.value) ? a.value : !0
+    ), m = computed({
       get() {
-        return d.value ? y.value : null;
+        return g.value ? S.value : null;
       },
-      set(m) {
-        Array.isArray(e.value) ? e.value = [t.value] : e.value = t.value, c("change", m);
+      set(y) {
+        Array.isArray(l.value) ? l.value = [a.value] : l.value = a.value, v("change", y);
       }
-    }), { bemCssClasses: _ } = useBemModifiers("vv-radio", {
-      valid: f,
-      invalid: i,
-      disabled: n,
-      readonly: l
-    }), { HintSlot: S } = Y(t, v);
-    return (m, g) => (I(), C("label", {
-      class: D(s(_)),
-      for: s(u)
+    }), { modifiers: B } = toRefs(a), _ = useBemModifiers(
+      "vv-radio",
+      B,
+      computed(() => ({
+        valid: d.value,
+        invalid: u.value,
+        disabled: r.value,
+        readonly: t.value
+      }))
+    ), { HintSlot: j } = ae(a, p);
+    return (y, b) => (E(), P("label", {
+      class: x(i(_)),
+      for: i(s)
     }, [
-      N(x("input", {
-        id: s(u),
+      D(k("input", {
+        id: i(s),
         ref_key: "input",
-        ref: a,
-        "onUpdate:modelValue": g[0] || (g[0] = (A) => O(V) ? V.value = A : null),
+        ref: V,
+        "onUpdate:modelValue": b[0] || (b[0] = (N) => G(m) ? m.value = N : null),
         type: "radio",
         class: "vv-radio__input",
-        name: m.name,
-        disabled: s(b),
-        value: s(y),
-        tabindex: s(p),
-        "aria-invalid": s(r)
-      }, null, 8, L), [
-        [k, s(V)]
+        name: y.name,
+        disabled: i(n),
+        value: i(S),
+        tabindex: i(o),
+        "aria-invalid": i(c)
+      }, null, 8, re), [
+        [H, i(m)]
       ]),
-      G(m.$slots, "default", { value: s(e) }, () => [
-        H(j(m.label), 1)
+      F(y.$slots, "default", { value: i(l) }, () => [
+        M(q(y.label), 1)
       ]),
-      E(s(S), {
+      T(i(j), {
         class: "vv-radio__hint",
-        params: { value: s(e) }
+        params: { value: i(l) }
       }, null, 8, ["params"])
-    ], 10, Z));
+    ], 10, oe));
   }
 });
 export {
-  oe as default
+  ue as default
 };

package/dist/components/VvRadio/VvRadio.umd.js

@@ -1 +1 @@
-(function(e,P){typeof exports=="object"&&typeof module<"u"?module.exports=P(require("vue"),require("nanoid")):typeof define=="function"&&define.amd?define(["vue","nanoid"],P):(e=typeof globalThis<"u"?globalThis:e||self,e.VvRadio=P(e.vue,e.nanoid))})(this,function(e,P){"use strict";const x={...{id:[String,Number],name:{type:String,required:!0}},...{tabindex:{type:[String,Number],default:0}},...{valid:Boolean,validLabel:[String,Array]},...{invalid:Boolean,invalidLabel:[String,Array]},...{hintLabel:{type:String,default:""}},...{disabled:Boolean},...{readonly:Boolean},value:[String,Number,Boolean],modelValue:[Object,Number,Boolean,String],label:String},B="VV_RADIO_GROUP",D=x,N=["click","update:modelValue","change","blur"];function C(o,c){const{group:n,isInGroup:p,getGroupOrLocalRef:r}=useInjectedGroupState(B),l=r("modelValue",o,c),t=r("readonly",o),m=r("disabled",o),i=r("valid",o),u=r("invalid",o);return{group:n,isInGroup:p,modelValue:l,readonly:t,disabled:m,valid:i,invalid:u}}function R(o){return Array.isArray(o)?o.filter(c=>isString(c)).join(" "):o}function H(o,c){const{invalid:n,valid:p,hint:r,loading:l}=c,{hintLabel:t,modelValue:m,valid:i,validLabel:u,invalid:f,invalidLabel:a,..._}=toRefs(o),s=resolveFieldData(_,"loading"),d=resolveFieldData(_,"loadingLabel"),y=computed(()=>f.value?!!(f.value&&n||a!=null&&a.value&&Array.isArray(a.value)&&a.value.length>0||a!=null&&a.value&&!isEmpty(a)):!1),V=computed(()=>!!(t&&t.value||r)),b=computed(()=>!!(u&&u.value||p)),S=computed(()=>!!(s!=null&&s.value&&l||s!=null&&s.value&&(d!=null&&d.value))),v=computed(()=>V.value||b.value||y.value||S.value);return{hasInvalid:y,hasHint:V,hasValid:b,hasLoading:S,HintSlot:{name:"HintSlot",props:{params:{type:Object,default:()=>({})}},setup(g){const I=computed(()=>{const A=toReactive({hintLabel:t,modelValue:m,valid:i,validLabel:u,invalid:f,invalidLabel:a,loading:s,loadingLabel:d,...g.params});return f!=null&&f.value?(n==null?void 0:n(A))||R(a==null?void 0:a.value)||(t==null?void 0:t.value):i!=null&&i.value?(p==null?void 0:p(A))||R(u==null?void 0:u.value)||(t==null?void 0:t.value):s!=null&&s.value?(l==null?void 0:l(A))||R(d==null?void 0:d.value)||(t==null?void 0:t.value):(r==null?void 0:r(A))||R(t==null?void 0:t.value)||(t==null?void 0:t.value)});return{isVisible:v,hasInvalid:y,hasValid:b,hintContent:I}},render(){if(this.isVisible)return h("small",{role:this.hasInvalid||this.hasValid?"alert":void 0},this.hintContent)}}}}const O=["for"],j=["id","name","disabled","value","tabindex","aria-invalid"],k={name:"VvRadio"};return e.defineComponent({...k,props:D,emits:N,setup(o,{emit:c}){const n=o,p=useSlots(),{disabled:r,readonly:l,modelValue:t,valid:m,invalid:i}=C(n,c),u=computed(()=>String(n.id||P.nanoid())),f=computed(()=>_.value?-1:n.tabindex),a=ref(),_=computed(()=>r.value||l.value),s=computed(()=>{if(i.value===!0)return!0;if(m.value===!0)return!1}),d=computed(()=>Array.isArray(t.value)?contains(n.value,t.value):equals(n.value,t.value)),y=computed(()=>["string","number","boolean"].includes(typeof n.value)?n.value:!0),V=computed({get(){return d.value?y.value:null},set(v){Array.isArray(t.value)?t.value=[n.value]:t.value=n.value,c("change",v)}}),{bemCssClasses:b}=useBemModifiers("vv-radio",{valid:m,invalid:i,disabled:r,readonly:l}),{HintSlot:S}=H(n,p);return(v,g)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(e.unref(b)),for:e.unref(u)},[e.withDirectives(e.createElementVNode("input",{id:e.unref(u),ref_key:"input",ref:a,"onUpdate:modelValue":g[0]||(g[0]=I=>e.isRef(V)?V.value=I:null),type:"radio",class:"vv-radio__input",name:v.name,disabled:e.unref(_),value:e.unref(y),tabindex:e.unref(f),"aria-invalid":e.unref(s)},null,8,j),[[e.vModelRadio,e.unref(V)]]),e.renderSlot(v.$slots,"default",{value:e.unref(t)},()=>[e.createTextVNode(e.toDisplayString(v.label),1)]),e.createVNode(e.unref(S),{class:"vv-radio__hint",params:{value:e.unref(t)}},null,8,["params"])],10,O))}})});
+(function(t,m){typeof exports=="object"&&typeof module<"u"?module.exports=m(require("vue")):typeof define=="function"&&define.amd?define(["vue"],m):(t=typeof globalThis<"u"?globalThis:t||self,t.VvRadio=m(t.vue))})(this,function(t){"use strict";var m=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(m||{}),N=(e=>(e.topStart="top-start",e.topEnd="top-end",e.bottomStart="bottom-start",e.bottomEnd="bottom-end",e.leftStart="left-start",e.leftEnd="left-end",e.rightStart="right-start",e.rightEnd="right-end",e))(N||{}),j=(e=>(e.before="before",e.after="after",e))(j||{});const A=Symbol.for("radioGroup"),C={valid:Boolean,validLabel:[String,Array]},P={invalid:Boolean,invalidLabel:[String,Array]},E={disabled:Boolean},x={readonly:Boolean},k={modifiers:[String,Array]},D={hintLabel:{type:String,default:""}};j.before;const G={tabindex:{type:[String,Number],default:0}},H={id:[String,Number]};m.bottom;const T={...{...H,name:{type:String,required:!0}},...G,...C,...P,...D,...E,...x,...k,value:[String,Number,Boolean],modelValue:[Object,Number,Boolean,String],label:String},q=["click","update:modelValue","change","blur"];function F(e,f){const{id:a}=toRefs(e),{group:p,isInGroup:v,getGroupOrLocalRef:n}=useInjectedGroupState(A),o=n("modelValue",e,f),l=n("readonly",e),d=n("disabled",e),u=n("valid",e),i=n("invalid",e);return{id:a,group:p,isInGroup:v,modelValue:o,readonly:l,disabled:d,valid:u,invalid:i}}function B(e){return Array.isArray(e)?e.filter(f=>isString(f)).join(" "):e}function M(e,f){const{invalid:a,valid:p,hint:v,loading:n}=f,{hintLabel:o,modelValue:l,valid:d,validLabel:u,invalid:i,invalidLabel:r,..._}=toRefs(e),s=resolveFieldData(_,"loading"),c=resolveFieldData(_,"loadingLabel"),S=computed(()=>i.value?!!(i.value&&a||r!=null&&r.value&&Array.isArray(r.value)&&r.value.length>0||r!=null&&r.value&&!isEmpty(r)):!1),V=computed(()=>!!(o&&o.value||v)),y=computed(()=>!!(u&&u.value||p)),R=computed(()=>!!(s!=null&&s.value&&n||s!=null&&s.value&&(c!=null&&c.value))),O=computed(()=>V.value||y.value||S.value||R.value);return{hasInvalid:S,hasHint:V,hasValid:y,hasLoading:R,HintSlot:{name:"HintSlot",props:{params:{type:Object,default:()=>({})}},setup(I){const b=computed(()=>{const g=toReactive({hintLabel:o,modelValue:l,valid:d,validLabel:u,invalid:i,invalidLabel:r,loading:s,loadingLabel:c,...I.params});return i!=null&&i.value?(a==null?void 0:a(g))||B(r==null?void 0:r.value)||(o==null?void 0:o.value):d!=null&&d.value?(p==null?void 0:p(g))||B(u==null?void 0:u.value)||(o==null?void 0:o.value):s!=null&&s.value?(n==null?void 0:n(g))||B(c==null?void 0:c.value)||(o==null?void 0:o.value):(v==null?void 0:v(g))||B(o==null?void 0:o.value)||(o==null?void 0:o.value)});return{isVisible:O,hasInvalid:S,hasValid:y,hintContent:b}},render(){if(this.isVisible)return h("small",{role:this.hasInvalid?"alert":this.hasValid?"status":void 0},this.hintContent)}}}}const U=["for"],w=["id","name","disabled","value","tabindex","aria-invalid"],z={name:"VvRadio"};return t.defineComponent({...z,props:T,emits:q,setup(e,{emit:f}){const a=e,p=useSlots(),{id:v,disabled:n,readonly:o,modelValue:l,valid:d,invalid:u}=F(a,f),i=useUniqueId(v),r=computed(()=>s.value?-1:a.tabindex),_=ref(),s=computed(()=>n.value||o.value),c=computed(()=>{if(u.value===!0)return!0;if(d.value===!0)return!1}),S=computed(()=>Array.isArray(l.value)?contains(a.value,l.value):equals(a.value,l.value)),V=computed(()=>["string","number","boolean"].includes(typeof a.value)?a.value:!0),y=computed({get(){return S.value?V.value:null},set(b){Array.isArray(l.value)?l.value=[a.value]:l.value=a.value,f("change",b)}}),{modifiers:R}=toRefs(a),O=useBemModifiers("vv-radio",R,computed(()=>({valid:d.value,invalid:u.value,disabled:n.value,readonly:o.value}))),{HintSlot:I}=M(a,p);return(b,g)=>(t.openBlock(),t.createElementBlock("label",{class:t.normalizeClass(t.unref(O)),for:t.unref(i)},[t.withDirectives(t.createElementVNode("input",{id:t.unref(i),ref_key:"input",ref:_,"onUpdate:modelValue":g[0]||(g[0]=J=>t.isRef(y)?y.value=J:null),type:"radio",class:"vv-radio__input",name:b.name,disabled:t.unref(s),value:t.unref(V),tabindex:t.unref(r),"aria-invalid":t.unref(c)},null,8,w),[[t.vModelRadio,t.unref(y)]]),t.renderSlot(b.$slots,"default",{value:t.unref(l)},()=>[t.createTextVNode(t.toDisplayString(b.label),1)]),t.createVNode(t.unref(I),{class:"vv-radio__hint",params:{value:t.unref(l)}},null,8,["params"])],10,U))}})});