@volverjs/ui-vue 0.0.13 → 0.0.15

package/dist/components/VvSelect/VvSelect.umd.js

@@ -1 +1 @@
-(function(e,b){typeof exports=="object"&&typeof module<"u"?module.exports=b(require("vue"),require("@iconify/vue"),require("@vueuse/core"),require("dot-prop")):typeof define=="function"&&define.amd?define(["vue","@iconify/vue","@vueuse/core","dot-prop"],b):(e=typeof globalThis<"u"?globalThis:e||self,e.VvSelect=b(e.Vue,e.IconifyVue,e.VueuseCore,e.dotProp))})(this,function(e,b,U,A){var de={showPassword:"eye-on",hidePassword:"eye-off",showDatePicker:"calendar",showTimePicker:"time",showColorPicker:"color",clear:"close",add:"add",remove:"trash",edit:"edit",download:"download"},ue={prefix:"normal"},J=(function(t){return t.local="local",t.session="session",t})({}),ce=(function(t){return t.absolute="absolute",t.fixed="fixed",t})({}),S=(function(t){return t.left="left",t.right="right",t.top="top",t.bottom="bottom",t})({}),fe=(function(t){return 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})({}),L=(function(t){return t.before="before",t.after="after",t})({}),W=(function(t){return t.button="button",t.submit="submit",t.reset="reset",t})({}),pe=(function(t){return t.nuxtLink="nuxt-link",t.routerLink="router-link",t.a="a",t.button="button",t})({}),ve=Symbol.for("volver"),me={to:{type:[String,Object]},href:String,target:String,rel:{type:String,default:"noopener noreferrer"}},V={valid:{type:Boolean,default:!1},validLabel:{type:[String,Array],default:void 0}},C={invalid:{type:Boolean,default:!1},invalidLabel:{type:[String,Array],default:void 0}},O={loading:{type:Boolean,default:!1},loadingLabel:{type:String,default:"Loading..."}},B={disabled:{type:Boolean,default:!1}},Y={required:{type:Boolean,default:!1}},be={active:{type:Boolean,default:!1}},ge={current:{type:Boolean,default:!1}},he={showClearAction:{type:Boolean,default:!1},iconClear:{type:[String,Object],default:de.clear},labelClear:{type:String,default:"Clear"}},ye={pressed:{type:Boolean,default:!1}},P={label:{type:[String,Number],default:void 0}},k={readonly:{type:Boolean,default:!1}},$={modifiers:{type:[String,Array],default:void 0}},I={hintLabel:{type:String,default:""}},Q={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"},disabledKey:{type:[String,Function],default:"disabled"}},Se={count:{type:[Boolean,String],default:!1,validator:t=>[!0,!1,"limit","countdown"].includes(t)}},Be={debounce:{type:[Number,String],default:void 0}},X={icon:{type:[String,Object],default:void 0},iconPosition:{type:String,default:L.before,validation:t=>Object.values(L).includes(t)}},E={tabindex:{type:[String,Number],default:0}},Z={floating:{type:Boolean,default:!1}},Pe={unselectable:{type:Boolean,default:!0}},Le={id:[String,Number]},st={placement:{type:String,default:S.bottom,validator:t=>Object.values(S).includes(t)||Object.values(fe).includes(t)},strategy:{type:String,default:void 0,validator:t=>Object.values(ce).includes(t)},transitionName:{type:String,default:void 0},offset:{type:[Number,String,Object],default:0},shift:{type:[Boolean,Object],default:!1},flip:{type:[Boolean,Object],default:!0},size:{type:[Boolean,Object],default:()=>({padding:10})},autoPlacement:{type:[Boolean,Object],default:!1},arrow:{type:Boolean,default:!1},keepOpen:{type:Boolean,default:!1},autofocusFirst:{type:Boolean,default:!0},triggerWidth:{type:Boolean,default:!1}},_={...Le,name:{type:String,required:!0}},ee={autofocus:{type:Boolean,default:!1}},te={autocomplete:{type:String,default:"off"}},dt={..._,...ee,...te,...E,...B,...k,...V,...C,...I,...O,...$,...Se,...Be,...X,...Z,...P,minlength:{type:[String,Number],default:void 0},maxlength:{type:[String,Number],default:void 0},placeholder:{type:String,default:void 0},...Y},ut={..._,...E,...V,...C,...I,...B,...k,...$,...P,...O,value:{type:[String,Number,Boolean],default:void 0},modelValue:{type:[Object,Number,Boolean,String],default:void 0}},ct={...V,...C,...Q,...I,...B,...k,...$,...P,...O,...Y,modelValue:{type:[String,Array,Boolean,Number,Symbol],default:void 0},name:{type:String,required:!0},vertical:{type:Boolean,default:!1}},ft={...B,...P,...ye,...be,...ge,...me,type:{type:String,default:W.button,validator:t=>Object.values(W).includes(t)},ariaLabel:{type:String,default:void 0},defaultTag:{type:String,default:pe.button}},pt={storageType:{type:String,default:J.local,validator:t=>Object.values(J).includes(t)},storageKey:String},oe={..._,...ee,...te,...E,...V,...C,...I,...O,...B,...k,...$,...Q,...X,...Z,...Pe,...P,...he,multiple:Boolean,required:Boolean,size:[String,Number],modelValue:{type:[String,Number,Boolean,Object,Array],default:void 0},autoselectFirst:{type:Boolean,default:!1},placeholder:String};function ae(){return{...oe,options:{...oe.options,type:Array,default:()=>[]}}}function Ve(t){return typeof t=="string"}function le(t){return Array.isArray(t)?t.filter(l=>Ve(l)).join(" "):t}function Ce(t,l){const o=(0,e.computed)(()=>(0,e.isRef)(t)?t.value:t),i=(0,e.computed)(()=>le(o.value.invalidLabel)),s=(0,e.computed)(()=>le(o.value.validLabel)),d=(0,e.computed)(()=>o.value.loadingLabel),c=(0,e.computed)(()=>o.value.hintLabel),f=(0,e.computed)(()=>!!(o.value.loading&&(l.loading||d.value))),p=(0,e.computed)(()=>!f.value&&!!(o.value.invalid&&(l.invalid||i.value))),a=(0,e.computed)(()=>!f.value&&!p.value&&!!(o.value.valid&&(l.valid||s.value))),v=(0,e.computed)(()=>!f.value&&!p.value&&!a.value&&!!(l.hint||c.value)),n=(0,e.computed)(()=>p.value||a.value||f.value||v.value);return{hasInvalidLabelOrSlot:p,hasHintLabelOrSlot:v,hasValidLabelOrSlot:a,hasLoadingLabelOrSlot:f,hintSlotScope:(0,e.computed)(()=>({modelValue:o.value.modelValue,valid:o.value.valid,invalid:o.value.invalid,loading:o.value.loading})),HintSlot:(0,e.defineComponent)({name:"HintSlot",props:{tag:{type:String,default:"small"}},setup(){return{isVisible:n,invalidLabel:i,validLabel:s,loadingLabel:d,hintLabel:c,hasInvalidLabelOrSlot:p,hasValidLabelOrSlot:a,hasLoadingLabelOrSlot:f,hasHintLabelOrSlot:v}},render(){if(this.isVisible){let u;return this.hasInvalidLabelOrSlot&&(u="alert"),this.hasValidLabelOrSlot&&(u="status"),this.hasLoadingLabelOrSlot?(0,e.h)(this.tag,{role:u},this.$slots.loading?.()??this.loadingLabel):this.hasInvalidLabelOrSlot?(0,e.h)(this.tag,{role:u},this.$slots.invalid?.()??this.$slots.invalid??this.invalidLabel):this.hasValidLabelOrSlot?(0,e.h)(this.tag,{role:u},this.$slots.valid?.()??this.validLabel):(0,e.h)(this.tag,{role:u},this.$slots.hint?.()??this.$slots.hint??this.hintLabel)}return null}})}}function re(){return(0,e.inject)(ve,void 0)}function ne(t,l,o){return(0,e.computed)(()=>{const i={[t]:!0},s=typeof l?.value=="string"?l.value.split(" "):l?.value;return s&&Array.isArray(s)&&s.forEach(d=>{d&&(i[`${t}--${d}`]=!0)}),o&&Object.keys(o.value).forEach(d=>{i[`${t}--${d}`]=(0,e.unref)(o.value[d])}),i})}var Oe={name:"VvIcon"},ke=(0,e.defineComponent)({...Oe,props:(0,e.mergeDefaults)({name:{},color:{},width:{},height:{},provider:{},prefix:{},src:{},horizontalFlip:{type:Boolean},verticalFlip:{type:Boolean},flip:{},mode:{},inline:{type:Boolean},rotate:{},onLoad:{type:Function},svg:{},modifiers:{}},ue),setup(t){const l=t,o=(0,e.computed)(()=>typeof l.rotate=="string"?Number.parseFloat(l.rotate):l.rotate),i=(0,e.ref)(!0),s=re(),{modifiers:d}=(0,e.toRefs)(l),c=ne("vv-icon",d),f=(0,e.computed)(()=>l.provider||s?.iconsProvider),p=(0,e.computed)(()=>{const n=l.name??"",u=`@${f.value}:${l.prefix}:${n}`;if((0,b.iconLoaded)(u))return u;const h=s?.iconsCollections.find(j=>(0,b.iconLoaded)(`@${f.value}:${j.prefix}:${n}`));return h?`@${f.value}:${h.prefix}:${n}`:n});function a(n){const u=typeof window<"u"?new window.DOMParser:null;return u?u.parseFromString(n,"text/html").querySelector("svg"):null}function v(n){const u=a(n),h=u?.innerHTML.trim()||"";u&&h&&(0,b.addIcon)(`@${f.value}:${l.prefix}:${l.name}`,{body:h,height:u.viewBox.baseVal.height,width:u.viewBox.baseVal.width})}return s&&l.src&&!(0,b.iconLoaded)(`@${f.value}:${l.prefix}:${l.name}`)&&(i.value=!1,s.fetchIcon(l.src).then(n=>{n&&v(n),i.value=!0}).catch(n=>{throw i.value=!0,new Error(`Error during fetch icon: ${n?.message}`)})),l.svg&&v(l.svg),(n,u)=>(0,e.unref)(i)?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(b.Icon),(0,e.mergeProps)({key:0,class:(0,e.unref)(c)},{inline:t.inline,width:t.width,height:t.height,horizontalFlip:t.horizontalFlip,verticalFlip:t.verticalFlip,flip:t.flip,rotate:(0,e.unref)(o),color:t.color,icon:(0,e.unref)(p)},{onLoad:t.onLoad}),null,16,["class","onLoad"])):(0,e.createCommentVNode)("v-if",!0)}}),N=ke;function ie(t,l){const o=(0,e.computed)(()=>typeof t?.value=="string"?{name:t?.value}:t?.value),i=(0,e.computed)(()=>l?.value===L.before?o.value:void 0),s=(0,e.computed)(()=>l?.value===L.after?o.value:void 0);return{hasIcon:o,hasIconLeft:(0,e.computed)(()=>l?.value===S.left?o.value:void 0),hasIconRight:(0,e.computed)(()=>l?.value===S.right?o.value:void 0),hasIconTop:(0,e.computed)(()=>l?.value===S.top?o.value:void 0),hasIconBottom:(0,e.computed)(()=>l?.value===S.bottom?o.value:void 0),hasIconBefore:i,hasIconAfter:s}}var $e=(0,e.defineComponent)({components:{VvIcon:N},props:{inputType:{type:String,default:"input-text"},disabled:{type:Boolean,default:!1},label:{type:String,default:"Clear"},icon:{type:[String,Object],default:"close"}},emits:["clear"],setup(t,{emit:l}){const{hasIcon:o}=ie((0,e.computed)(()=>t.icon));function i(s){s?.stopPropagation(),t.disabled||l("clear")}return{hasIcon:o,onClick:i}},render(){const t=this.hasIcon?(0,e.h)(N,{...this.hasIcon,class:`vv-${this.inputType}__icon`}):void 0;return(0,e.h)("button",{disabled:this.disabled,class:`vv-${this.inputType}__action`,ariaLabel:this.label,type:"button",onClick:this.onClick},t)}});function Ie(t,l,o){const i=re(),s=(0,e.computed)(()=>{if(!(!i||!i.defaults.value?.[t]))return i.defaults.value[t]});return(0,e.computed)(()=>{if(s.value===void 0)return o;const d=s.value,c=l,f=o;return Object.keys(c).reduce((p,a)=>{const v=f[a];if(p[a]=v,a in d){if(Array.isArray(c[a])){const n=c[a];n.length&&n[0]===v&&(p[a]=d[a])}if(typeof c[a]=="function"){const n=c[a];n()===v&&(p[a]=d[a])}if(typeof c[a]=="object"){let n=c[a].default;typeof n=="function"&&(n=n()),typeof n=="object"?JSON.stringify(n)===JSON.stringify(v)&&(p[a]=d[a]):n===v&&(p[a]=d[a])}}return p},{})})}function Ne(t,l){const{focused:o}=(0,U.useFocus)(t);return(0,e.watch)(o,i=>{l(i?"focus":"blur",(0,e.unref)(t))}),{focused:o}}function we(t){return(0,e.computed)(()=>String(t?.value||(0,e.useId)()))}function Ae(t){const{options:l,labelKey:o,valueKey:i,disabledKey:s}=(0,e.toRefs)(t);return{options:l,getOptionLabel:a=>typeof a=="string"?a:typeof o.value=="function"?o.value(a):String(o.value?(0,A.getProperty)(a,o.value):a),getOptionValue:a=>typeof a=="string"?a:typeof i.value=="function"?i.value(a):i.value?(0,A.getProperty)(a,i.value):a,isOptionDisabled:a=>typeof a=="string"?!1:typeof s.value=="function"?s.value(a):s.value?!!(0,A.getProperty)(a,s.value):!1,getOptionGrouped:a=>typeof a=="string"?[]:typeof a=="object"&&a&&"options"in a?a.options:[]}}var Ee=["for"],_e={class:"vv-select__wrapper"},je={key:0,class:"vv-select__input-before"},Fe={class:"vv-select__inner"},De=["id"],Re=["disabled","hidden"],ze=["disabled","value"],qe=["disabled","label"],xe=["disabled","value"],He={key:2,class:"vv-select__input-after"},Ke={name:"VvSelect"},Te=(0,e.defineComponent)({...Ke,props:ae(),emits:["update:modelValue","focus","blur","clear"],setup(t,{emit:l}){const o=t,i=l,s=(0,e.useSlots)(),d=Ie("VvSelect",ae(),o),c=(0,e.ref)(),{HintSlot:f,hasHintLabelOrSlot:p,hasInvalidLabelOrSlot:a,hintSlotScope:v}=Ce(d,s),{focused:n}=Ne(c,i);function u(r){return typeof r=="string"?!1:r.options?.length}const{id:h,modifiers:j,disabled:Ge,readonly:Ue,loading:Je,icon:We,iconPosition:Ye,invalid:Qe,valid:Xe,floating:Ze,multiple:et}=(0,e.toRefs)(o),F=we(h),D=(0,e.computed)(()=>`${F.value}-hint`),w=(0,e.computed)(()=>o.disabled||o.readonly),tt=(0,e.computed)(()=>w.value?-1:o.tabindex),m=(0,e.computed)({get:()=>o.modelValue,set:r=>{if(Array.isArray(r)&&(r=r.filter(y=>y!==void 0),r.length===0&&!o.unselectable&&c.value)){c.value.value=String(o.modelValue);return}i("update:modelValue",r)}}),R=(0,e.computed)(()=>Array.isArray(m.value)?m.value.length>0:m.value!==void 0&&m.value!==null),z=(0,e.computed)(()=>w.value?!1:o.unselectable);(0,e.watch)((0,U.useElementVisibility)(c),r=>{r&&o.autofocus&&(n.value=!0)});const{hasIconBefore:q,hasIconAfter:x}=ie(We,Ye),ot=(0,e.computed)(()=>{if(o.invalid===!0)return!0;if(o.valid===!0)return!1}),at=ne("vv-select",j,(0,e.computed)(()=>({valid:Xe.value,invalid:Qe.value,loading:Je.value,disabled:Ge.value,readonly:Ue.value,"icon-before":q.value!==void 0,"icon-after":x.value!==void 0,dirty:R.value,focus:n.value&&!w.value,floating:Ze.value,multiple:et.value}))),{getOptionLabel:H,getOptionValue:K,isOptionDisabled:T,getOptionGrouped:lt}=Ae(o);(0,e.watch)(()=>o.options,r=>{if(r?.length&&o.autoselectFirst&&!R.value){const y=K(r[0]);m.value=o.multiple?[y]:y}},{immediate:!0});function rt(){Array.isArray(m.value)?m.value=[]:m.value=void 0,i("clear")}const nt=(0,e.computed)(()=>({name:o.name,tabindex:tt.value,disabled:w.value,required:o.required,size:o.size,autocomplete:o.autocomplete,multiple:o.multiple,"aria-invalid":ot.value,"aria-describedby":p.value?D.value:void 0,"aria-errormessage":a.value?D.value:void 0})),se=(0,e.computed)(()=>({valid:o.valid,invalid:o.invalid,modelValue:o.modelValue}));return(r,y)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:(0,e.normalizeClass)((0,e.unref)(at))},[r.label?((0,e.openBlock)(),(0,e.createElementBlock)("label",{key:0,for:(0,e.unref)(F)},(0,e.toDisplayString)(r.label),9,Ee)):(0,e.createCommentVNode)("v-if",!0),(0,e.createElementVNode)("div",_e,[r.$slots.before?((0,e.openBlock)(),(0,e.createElementBlock)("div",je,[(0,e.renderSlot)(r.$slots,"before",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(se))))])):(0,e.createCommentVNode)("v-if",!0),(0,e.createElementVNode)("div",Fe,[(0,e.unref)(q)?((0,e.openBlock)(),(0,e.createBlock)(N,(0,e.mergeProps)({key:0},(0,e.unref)(q),{class:"vv-select__icon"}),null,16)):(0,e.createCommentVNode)("v-if",!0),(0,e.withDirectives)((0,e.createElementVNode)("select",(0,e.mergeProps)({id:(0,e.unref)(F),ref_key:"selectEl",ref:c},(0,e.unref)(nt),{"onUpdate:modelValue":y[0]||(y[0]=g=>(0,e.isRef)(m)?m.value=g:null)}),[r.placeholder?((0,e.openBlock)(),(0,e.createElementBlock)("option",{key:0,value:void 0,disabled:!(0,e.unref)(z),hidden:!(0,e.unref)(z)},(0,e.toDisplayString)(r.placeholder),9,Re)):(0,e.createCommentVNode)("v-if",!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(r.options,(g,M)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[u(g)?((0,e.openBlock)(),(0,e.createElementBlock)("optgroup",{key:`group-${M}`,disabled:(0,e.unref)(T)(g),label:(0,e.unref)(H)(g)},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)((0,e.unref)(lt)(g),(G,it)=>((0,e.openBlock)(),(0,e.createElementBlock)("option",{key:`group-${M}-item-${it}`,disabled:(0,e.unref)(T)(G),value:(0,e.unref)(K)(G)},(0,e.toDisplayString)((0,e.unref)(H)(G)),9,xe))),128))],8,qe)):((0,e.openBlock)(),(0,e.createElementBlock)("option",{key:M,disabled:(0,e.unref)(T)(g),value:(0,e.unref)(K)(g)},(0,e.toDisplayString)((0,e.unref)(H)(g)),9,ze))],64))),256))],16,De),[[e.vModelSelect,(0,e.unref)(m)]]),(0,e.unref)(x)?((0,e.openBlock)(),(0,e.createBlock)(N,(0,e.mergeProps)({key:1},(0,e.unref)(x),{class:"vv-select__icon vv-select__icon-after"}),null,16)):(0,e.createCommentVNode)("v-if",!0)]),(0,e.unref)(z)&&(0,e.unref)(d).showClearAction?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)($e),{key:1,"input-type":"select",label:r.labelClear,icon:r.iconClear,disabled:!(0,e.unref)(R),onClear:rt},null,8,["label","icon","disabled"])):(0,e.createCommentVNode)("v-if",!0),r.$slots.after?((0,e.openBlock)(),(0,e.createElementBlock)("div",He,[(0,e.renderSlot)(r.$slots,"after",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(se))))])):(0,e.createCommentVNode)("v-if",!0)]),(0,e.createVNode)((0,e.unref)(f),{id:(0,e.unref)(D),class:"vv-select__hint"},(0,e.createSlots)({_:2},[r.$slots.hint?{name:"hint",fn:(0,e.withCtx)(()=>[(0,e.renderSlot)(r.$slots,"hint",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(v))))]),key:"0"}:void 0,r.$slots.loading?{name:"loading",fn:(0,e.withCtx)(()=>[(0,e.renderSlot)(r.$slots,"loading",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(v))))]),key:"1"}:void 0,r.$slots.valid?{name:"valid",fn:(0,e.withCtx)(()=>[(0,e.renderSlot)(r.$slots,"valid",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(v))))]),key:"2"}:void 0,r.$slots.invalid?{name:"invalid",fn:(0,e.withCtx)(()=>[(0,e.renderSlot)(r.$slots,"invalid",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(v))))]),key:"3"}:void 0]),1032,["id"])],2))}}),Me=Te;return Me});
+(function(e,b){typeof exports=="object"&&typeof module<"u"?module.exports=b(require("vue"),require("@iconify/vue"),require("@vueuse/core"),require("dot-prop")):typeof define=="function"&&define.amd?define(["vue","@iconify/vue","@vueuse/core","dot-prop"],b):(e=typeof globalThis<"u"?globalThis:e||self,e.VvSelect=b(e.Vue,e.IconifyVue,e.VueuseCore,e.dotProp))})(this,function(e,b,U,E){var de={showPassword:"eye-on",hidePassword:"eye-off",showDatePicker:"calendar",showTimePicker:"time",showColorPicker:"color",clear:"close",add:"add",remove:"trash",edit:"edit",download:"download"},ue={prefix:"normal"},J=(function(t){return t.local="local",t.session="session",t})({}),ce=(function(t){return t.absolute="absolute",t.fixed="fixed",t})({}),S=(function(t){return t.left="left",t.right="right",t.top="top",t.bottom="bottom",t})({}),fe=(function(t){return 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})({}),P=(function(t){return t.before="before",t.after="after",t})({}),W=(function(t){return t.button="button",t.submit="submit",t.reset="reset",t})({}),pe=(function(t){return t.nuxtLink="nuxt-link",t.routerLink="router-link",t.a="a",t.button="button",t})({}),ve=Symbol.for("volver"),me={to:{type:[String,Object]},href:String,target:String,rel:{type:String,default:"noopener noreferrer"}},L={valid:{type:Boolean,default:!1},validLabel:{type:[String,Array],default:void 0}},C={invalid:{type:Boolean,default:!1},invalidLabel:{type:[String,Array],default:void 0}},O={loading:{type:Boolean,default:!1},loadingLabel:{type:String,default:"Loading..."}},B={disabled:{type:Boolean,default:!1}},Y={required:{type:Boolean,default:!1}},be={active:{type:Boolean,default:!1}},ye={current:{type:Boolean,default:!1}},ge={showClearAction:{type:Boolean,default:!1},iconClear:{type:[String,Object],default:de.clear},labelClear:{type:String,default:"Clear"}},he={pressed:{type:Boolean,default:!1}},k={label:{type:[String,Number],default:void 0}},V={readonly:{type:Boolean,default:!1}},$={modifiers:{type:[String,Array],default:void 0}},I={hintLabel:{type:String,default:""}},Q={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"},disabledKey:{type:[String,Function],default:"disabled"}},Se={count:{type:[Boolean,String],default:!1,validator:t=>[!0,!1,"limit","countdown"].includes(t)}},Be={debounce:{type:[Number,String],default:void 0}},X={icon:{type:[String,Object],default:void 0},iconPosition:{type:String,default:P.before,validation:t=>Object.values(P).includes(t)}},A={tabindex:{type:[String,Number],default:0}},Z={floating:{type:Boolean,default:!1}},ke={unselectable:{type:Boolean,default:!0}},Pe={id:[String,Number]},dt={placement:{type:String,default:S.bottom,validator:t=>Object.values(S).includes(t)||Object.values(fe).includes(t)},strategy:{type:String,default:void 0,validator:t=>Object.values(ce).includes(t)},transitionName:{type:String,default:void 0},offset:{type:[Number,String,Object],default:0},shift:{type:[Boolean,Object],default:!1},flip:{type:[Boolean,Object],default:!0},size:{type:[Boolean,Object],default:()=>({padding:10})},autoPlacement:{type:[Boolean,Object],default:!1},arrow:{type:Boolean,default:!1},keepOpen:{type:Boolean,default:!1},autofocusFirst:{type:Boolean,default:!0},triggerWidth:{type:Boolean,default:!1}},_={...Pe,name:{type:String,required:!0}},ee={autofocus:{type:Boolean,default:!1}},te={autocomplete:{type:String,default:"off"}},ut={..._,...ee,...te,...A,...B,...V,...L,...C,...I,...O,...$,...Se,...Be,...X,...Z,...k,minlength:{type:[String,Number],default:void 0},maxlength:{type:[String,Number],default:void 0},placeholder:{type:String,default:void 0},...Y},ct={..._,...A,...L,...C,...I,...B,...V,...$,...k,...O,value:{type:[String,Number,Boolean],default:void 0},modelValue:{type:[Object,Number,Boolean,String],default:void 0}},ft={...L,...C,...Q,...I,...B,...V,...$,...k,...O,...Y,modelValue:{type:[String,Array,Boolean,Number,Symbol],default:void 0},name:{type:String,required:!0},vertical:{type:Boolean,default:!1}},pt={...B,...k,...he,...be,...ye,...me,type:{type:String,default:W.button,validator:t=>Object.values(W).includes(t)},ariaLabel:{type:String,default:void 0},defaultTag:{type:String,default:pe.button}},vt={storageType:{type:String,default:J.local,validator:t=>Object.values(J).includes(t)},storageKey:String},ae={..._,...ee,...te,...A,...L,...C,...I,...O,...B,...V,...$,...Q,...X,...Z,...ke,...k,...ge,multiple:Boolean,required:Boolean,size:[String,Number],modelValue:{type:[String,Number,Boolean,Object,Array],default:void 0},autoselectFirst:{type:Boolean,default:!1},placeholder:String};function le(){return{...ae,options:{...ae.options,type:Array,default:()=>[]}}}function Le(t){return typeof t=="string"}function oe(t){return Array.isArray(t)?t.filter(l=>Le(l)).join(" "):t}function Ce(t,l){const a=(0,e.computed)(()=>(0,e.isRef)(t)?t.value:t),r=(0,e.computed)(()=>oe(a.value.invalidLabel)),n=(0,e.computed)(()=>oe(a.value.validLabel)),d=(0,e.computed)(()=>a.value.loadingLabel),f=(0,e.computed)(()=>a.value.hintLabel),u=(0,e.computed)(()=>!!(a.value.loading&&(l.loading||d.value))),v=(0,e.computed)(()=>!u.value&&!!(a.value.invalid&&(l.invalid||r.value))),o=(0,e.computed)(()=>!u.value&&!v.value&&!!(a.value.valid&&(l.valid||n.value))),p=(0,e.computed)(()=>!u.value&&!v.value&&!o.value&&!!(l.hint||f.value)),s=(0,e.computed)(()=>v.value||o.value||u.value||p.value);return{hasInvalidLabelOrSlot:v,hasHintLabelOrSlot:p,hasValidLabelOrSlot:o,hasLoadingLabelOrSlot:u,hintSlotScope:(0,e.computed)(()=>({modelValue:a.value.modelValue,valid:a.value.valid,invalid:a.value.invalid,loading:a.value.loading})),HintSlot:(0,e.defineComponent)({name:"HintSlot",props:{tag:{type:String,default:"small"}},setup(){return{isVisible:s,invalidLabel:r,validLabel:n,loadingLabel:d,hintLabel:f,hasInvalidLabelOrSlot:v,hasValidLabelOrSlot:o,hasLoadingLabelOrSlot:u,hasHintLabelOrSlot:p}},render(){if(this.isVisible){let c;return this.hasInvalidLabelOrSlot&&(c="alert"),this.hasValidLabelOrSlot&&(c="status"),this.hasLoadingLabelOrSlot?(0,e.h)(this.tag,{role:c},this.$slots.loading?.()??this.loadingLabel):this.hasInvalidLabelOrSlot?(0,e.h)(this.tag,{role:c},this.$slots.invalid?.()??this.$slots.invalid??this.invalidLabel):this.hasValidLabelOrSlot?(0,e.h)(this.tag,{role:c},this.$slots.valid?.()??this.validLabel):(0,e.h)(this.tag,{role:c},this.$slots.hint?.()??this.$slots.hint??this.hintLabel)}return null}})}}function re(){return(0,e.inject)(ve,void 0)}function ne(t,l,a){return(0,e.computed)(()=>{const r={[t]:!0},n=typeof l?.value=="string"?l.value.split(" "):l?.value;return n&&Array.isArray(n)&&n.forEach(d=>{d&&(r[`${t}--${d}`]=!0)}),a&&Object.keys(a.value).forEach(d=>{r[`${t}--${d}`]=(0,e.unref)(a.value[d])}),r})}var Oe={name:"VvIcon"},Ve=(0,e.defineComponent)({...Oe,props:(0,e.mergeDefaults)({name:{},color:{},width:{},height:{},provider:{},prefix:{},src:{},horizontalFlip:{type:Boolean},verticalFlip:{type:Boolean},flip:{},mode:{},inline:{type:Boolean},rotate:{},onLoad:{type:Function},svg:{},modifiers:{}},ue),setup(t){const l=t,a=(0,e.computed)(()=>typeof l.rotate=="string"?Number.parseFloat(l.rotate):l.rotate),r=(0,e.ref)(!0),n=re(),{modifiers:d}=(0,e.toRefs)(l),f=ne("vv-icon",d),u=(0,e.computed)(()=>l.provider||n?.iconsProvider),v=(0,e.computed)(()=>{const s=l.name??"",c=`@${u.value}:${l.prefix}:${s}`;if((0,b.iconLoaded)(c))return c;const g=n?.iconsCollections.find(j=>(0,b.iconLoaded)(`@${u.value}:${j.prefix}:${s}`));return g?`@${u.value}:${g.prefix}:${s}`:s});function o(s){return globalThis.window===void 0?null:new globalThis.DOMParser().parseFromString(s,"text/html").querySelector("svg")}function p(s){const c=o(s),g=c?.innerHTML.trim()||"";c&&g&&(0,b.addIcon)(`@${u.value}:${l.prefix}:${l.name}`,{body:g,height:c.viewBox.baseVal.height,width:c.viewBox.baseVal.width})}return n&&l.src&&!(0,b.iconLoaded)(`@${u.value}:${l.prefix}:${l.name}`)&&(r.value=!1,n.fetchIcon(l.src).then(s=>{s&&p(s),r.value=!0}).catch(s=>{throw r.value=!0,new Error(`Error during fetch icon: ${s?.message}`)})),l.svg&&p(l.svg),(s,c)=>(0,e.unref)(r)?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(b.Icon),(0,e.mergeProps)({key:0,class:(0,e.unref)(f)},{inline:t.inline,width:t.width,height:t.height,horizontalFlip:t.horizontalFlip,verticalFlip:t.verticalFlip,flip:t.flip,rotate:(0,e.unref)(a),color:t.color,icon:(0,e.unref)(v)},{onLoad:t.onLoad}),null,16,["class","onLoad"])):(0,e.createCommentVNode)("v-if",!0)}}),N=Ve;function ie(t,l){const a=(0,e.computed)(()=>typeof t?.value=="string"?{name:t?.value}:t?.value),r=(0,e.computed)(()=>l?.value===P.before?a.value:void 0),n=(0,e.computed)(()=>l?.value===P.after?a.value:void 0);return{hasIcon:a,hasIconLeft:(0,e.computed)(()=>l?.value===S.left?a.value:void 0),hasIconRight:(0,e.computed)(()=>l?.value===S.right?a.value:void 0),hasIconTop:(0,e.computed)(()=>l?.value===S.top?a.value:void 0),hasIconBottom:(0,e.computed)(()=>l?.value===S.bottom?a.value:void 0),hasIconBefore:r,hasIconAfter:n}}var $e=(0,e.defineComponent)({components:{VvIcon:N},props:{inputType:{type:String,default:"input-text"},disabled:{type:Boolean,default:!1},label:{type:String,default:"Clear"},icon:{type:[String,Object],default:"close"}},emits:["clear"],setup(t,{emit:l}){const{hasIcon:a}=ie((0,e.computed)(()=>t.icon));function r(n){n?.stopPropagation(),t.disabled||l("clear")}return{hasIcon:a,onClick:r}},render(){const t=this.hasIcon?(0,e.h)(N,{...this.hasIcon,class:`vv-${this.inputType}__icon`}):void 0;return(0,e.h)("button",{disabled:this.disabled,class:`vv-${this.inputType}__action`,ariaLabel:this.label,type:"button",onClick:this.onClick},t)}});function Ie(t,l,a){let r=l;if(Array.isArray(t)&&t.length){const n=t[0];n()===l&&(r=a)}if(typeof t=="function"&&t()===l&&(r=a),typeof t=="object"){let n=t.default;typeof n=="function"&&(n=n()),(typeof n=="object"?JSON.stringify(n)===JSON.stringify(l):n===l)&&(r=a)}return r}function Ne(t,l,a){const r=re(),n=(0,e.computed)(()=>{if(r?.defaults.value?.[t])return r.defaults.value[t]});return(0,e.computed)(()=>{if(n.value===void 0)return a;const d=n.value,f=l,u=a;return Object.keys(f).reduce((v,o)=>{const p=u[o];return v[o]=o in d?Ie(f[o],p,d[o]):p,v},{})})}function we(t,l){const{focused:a}=(0,U.useFocus)(t);return(0,e.watch)(a,r=>{l(r?"focus":"blur",(0,e.unref)(t))}),{focused:a}}function Ee(t){return(0,e.computed)(()=>String(t?.value||(0,e.useId)()))}function Ae(t){const{options:l,labelKey:a,valueKey:r,disabledKey:n}=(0,e.toRefs)(t);return{options:l,getOptionLabel:o=>typeof o=="string"?o:typeof a.value=="function"?a.value(o):String(a.value?(0,E.getProperty)(o,a.value):o),getOptionValue:o=>typeof o=="string"?o:typeof r.value=="function"?r.value(o):r.value?(0,E.getProperty)(o,r.value):o,isOptionDisabled:o=>typeof o=="string"?!1:typeof n.value=="function"?n.value(o):n.value?!!(0,E.getProperty)(o,n.value):!1,getOptionGrouped:o=>typeof o=="string"?[]:typeof o=="object"&&o&&"options"in o?o.options:[]}}var _e=["for"],je={class:"vv-select__wrapper"},Fe={key:0,class:"vv-select__input-before"},De={class:"vv-select__inner"},Re=["id"],ze=["disabled","hidden"],qe=["disabled","value"],Te=["disabled","label"],xe=["disabled","value"],He={key:2,class:"vv-select__input-after"},Ke={name:"VvSelect"},Me=(0,e.defineComponent)({...Ke,props:le(),emits:["update:modelValue","focus","blur","clear"],setup(t,{emit:l}){const a=t,r=l,n=(0,e.useSlots)(),d=Ne("VvSelect",le(),a),f=(0,e.ref)(),{HintSlot:u,hasHintLabelOrSlot:v,hasInvalidLabelOrSlot:o,hintSlotScope:p}=Ce(d,n),{focused:s}=we(f,r);function c(i){return typeof i=="string"?!1:i.options?.length}const{id:g,modifiers:j,disabled:Ue,readonly:Je,loading:We,icon:Ye,iconPosition:Qe,invalid:Xe,valid:Ze,floating:et,multiple:tt}=(0,e.toRefs)(a),F=Ee(g),D=(0,e.computed)(()=>`${F.value}-hint`),w=(0,e.computed)(()=>a.disabled||a.readonly),at=(0,e.computed)(()=>w.value?-1:a.tabindex),m=(0,e.computed)({get:()=>a.modelValue,set:i=>{if(Array.isArray(i)&&(i=i.filter(h=>h!==void 0),i.length===0&&!a.unselectable&&f.value)){f.value.value=String(a.modelValue);return}r("update:modelValue",i)}}),R=(0,e.computed)(()=>Array.isArray(m.value)?m.value.length>0:m.value!==void 0&&m.value!==null),z=(0,e.computed)(()=>w.value?!1:a.unselectable);(0,e.watch)((0,U.useElementVisibility)(f),i=>{i&&a.autofocus&&(s.value=!0)});const{hasIconBefore:q,hasIconAfter:T}=ie(Ye,Qe),lt=(0,e.computed)(()=>{if(a.invalid===!0)return!0;if(a.valid===!0)return!1}),ot=ne("vv-select",j,(0,e.computed)(()=>({valid:Ze.value,invalid:Xe.value,loading:We.value,disabled:Ue.value,readonly:Je.value,"icon-before":q.value!==void 0,"icon-after":T.value!==void 0,dirty:R.value,focus:s.value&&!w.value,floating:et.value,multiple:tt.value}))),{getOptionLabel:x,getOptionValue:H,isOptionDisabled:K,getOptionGrouped:rt}=Ae(a);(0,e.watch)(()=>a.options,i=>{if(i?.length&&a.autoselectFirst&&!R.value){const h=H(i[0]);m.value=a.multiple?[h]:h}},{immediate:!0});function nt(){Array.isArray(m.value)?m.value=[]:m.value=void 0,r("clear")}const it=(0,e.computed)(()=>({name:a.name,tabindex:at.value,disabled:w.value,required:a.required,size:a.size,autocomplete:a.autocomplete,multiple:a.multiple,"aria-invalid":lt.value,"aria-describedby":v.value?D.value:void 0,"aria-errormessage":o.value?D.value:void 0})),se=(0,e.computed)(()=>({valid:a.valid,invalid:a.invalid,modelValue:a.modelValue}));return(i,h)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:(0,e.normalizeClass)((0,e.unref)(ot))},[i.label?((0,e.openBlock)(),(0,e.createElementBlock)("label",{key:0,for:(0,e.unref)(F)},(0,e.toDisplayString)(i.label),9,_e)):(0,e.createCommentVNode)("v-if",!0),(0,e.createElementVNode)("div",je,[i.$slots.before?((0,e.openBlock)(),(0,e.createElementBlock)("div",Fe,[(0,e.renderSlot)(i.$slots,"before",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(se))))])):(0,e.createCommentVNode)("v-if",!0),(0,e.createElementVNode)("div",De,[(0,e.unref)(q)?((0,e.openBlock)(),(0,e.createBlock)(N,(0,e.mergeProps)({key:0},(0,e.unref)(q),{class:"vv-select__icon"}),null,16)):(0,e.createCommentVNode)("v-if",!0),(0,e.withDirectives)((0,e.createElementVNode)("select",(0,e.mergeProps)({id:(0,e.unref)(F),ref_key:"selectEl",ref:f},(0,e.unref)(it),{"onUpdate:modelValue":h[0]||(h[0]=y=>(0,e.isRef)(m)?m.value=y:null)}),[i.placeholder?((0,e.openBlock)(),(0,e.createElementBlock)("option",{key:0,value:void 0,disabled:!(0,e.unref)(z),hidden:!(0,e.unref)(z)},(0,e.toDisplayString)(i.placeholder),9,ze)):(0,e.createCommentVNode)("v-if",!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(i.options,(y,M)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[c(y)?((0,e.openBlock)(),(0,e.createElementBlock)("optgroup",{key:`group-${M}`,disabled:(0,e.unref)(K)(y),label:(0,e.unref)(x)(y)},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)((0,e.unref)(rt)(y),(G,st)=>((0,e.openBlock)(),(0,e.createElementBlock)("option",{key:`group-${M}-item-${st}`,disabled:(0,e.unref)(K)(G),value:(0,e.unref)(H)(G)},(0,e.toDisplayString)((0,e.unref)(x)(G)),9,xe))),128))],8,Te)):((0,e.openBlock)(),(0,e.createElementBlock)("option",{key:M,disabled:(0,e.unref)(K)(y),value:(0,e.unref)(H)(y)},(0,e.toDisplayString)((0,e.unref)(x)(y)),9,qe))],64))),256))],16,Re),[[e.vModelSelect,(0,e.unref)(m)]]),(0,e.unref)(T)?((0,e.openBlock)(),(0,e.createBlock)(N,(0,e.mergeProps)({key:1},(0,e.unref)(T),{class:"vv-select__icon vv-select__icon-after"}),null,16)):(0,e.createCommentVNode)("v-if",!0)]),(0,e.unref)(z)&&(0,e.unref)(d).showClearAction?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)($e),{key:1,"input-type":"select",label:i.labelClear,icon:i.iconClear,disabled:!(0,e.unref)(R),onClear:nt},null,8,["label","icon","disabled"])):(0,e.createCommentVNode)("v-if",!0),i.$slots.after?((0,e.openBlock)(),(0,e.createElementBlock)("div",He,[(0,e.renderSlot)(i.$slots,"after",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(se))))])):(0,e.createCommentVNode)("v-if",!0)]),(0,e.createVNode)((0,e.unref)(u),{id:(0,e.unref)(D),class:"vv-select__hint"},(0,e.createSlots)({_:2},[i.$slots.hint?{name:"hint",fn:(0,e.withCtx)(()=>[(0,e.renderSlot)(i.$slots,"hint",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(p))))]),key:"0"}:void 0,i.$slots.loading?{name:"loading",fn:(0,e.withCtx)(()=>[(0,e.renderSlot)(i.$slots,"loading",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(p))))]),key:"1"}:void 0,i.$slots.valid?{name:"valid",fn:(0,e.withCtx)(()=>[(0,e.renderSlot)(i.$slots,"valid",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(p))))]),key:"2"}:void 0,i.$slots.invalid?{name:"invalid",fn:(0,e.withCtx)(()=>[(0,e.renderSlot)(i.$slots,"invalid",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(p))))]),key:"3"}:void 0]),1032,["id"])],2))}}),Ge=Me;return Ge});

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

@@ -0,0 +1,183 @@
+import type { Option } from '../../types/generic';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends string | Option>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<import("vue").ExtractPublicPropTypes<{
+        options: {
+            type: globalThis.PropType<T[]>;
+            default: () => never[];
+        };
+        multiple: BooleanConstructor;
+        required: BooleanConstructor;
+        size: (NumberConstructor | StringConstructor)[];
+        modelValue: {
+            type: (NumberConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | StringConstructor)[];
+            default: undefined;
+        };
+        autoselectFirst: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        placeholder: StringConstructor;
+        showClearAction: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        iconClear: {
+            type: PropType<string | import("../VvIcon").VvIconProps>;
+            default: "close";
+        };
+        labelClear: {
+            type: StringConstructor;
+            default: string;
+        };
+        label: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: undefined;
+        };
+        unselectable: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        floating: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        icon: {
+            type: PropType<string | import("../VvIcon").VvIconProps>;
+            default: undefined;
+        };
+        iconPosition: {
+            type: PropType<`${import("../../constants").Position}`>;
+            default: import("../../constants").Position;
+            validation: (value: import("../../constants").Position) => boolean;
+        };
+        labelKey: {
+            type: (StringConstructor | FunctionConstructor)[];
+            default: string;
+        };
+        valueKey: {
+            type: (StringConstructor | FunctionConstructor)[];
+            default: string;
+        };
+        disabledKey: {
+            type: (StringConstructor | FunctionConstructor)[];
+            default: string;
+        };
+        modifiers: {
+            type: PropType<string | string[]>;
+            default: undefined;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        loading: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        loadingLabel: {
+            type: StringConstructor;
+            default: string;
+        };
+        hintLabel: {
+            type: StringConstructor;
+            default: string;
+        };
+        invalid: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        invalidLabel: {
+            type: (ArrayConstructor | StringConstructor)[];
+            default: undefined;
+        };
+        valid: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        validLabel: {
+            type: (ArrayConstructor | StringConstructor)[];
+            default: undefined;
+        };
+        tabindex: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: number;
+        };
+        autocomplete: {
+            type: StringConstructor;
+            default: string;
+        };
+        autofocus: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        name: {
+            type: StringConstructor;
+            required: boolean;
+        };
+        id: (NumberConstructor | StringConstructor)[];
+    }> & {
+        onClear?: (() => any) | undefined;
+        "onUpdate:modelValue"?: ((args_0: any) => any) | undefined;
+        onBlur?: ((args_0: import("@vueuse/core").MaybeElement) => any) | undefined;
+        onFocus?: ((args_0: import("@vueuse/core").MaybeElement) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        before?: (props: {
+            valid: boolean;
+            invalid: boolean;
+            modelValue: string | number | boolean | unknown[] | Record<string, any> | undefined;
+        }) => any;
+    } & {
+        after?: (props: {
+            valid: boolean;
+            invalid: boolean;
+            modelValue: string | number | boolean | unknown[] | Record<string, any> | undefined;
+        }) => any;
+    } & {
+        hint?: (props: {
+            modelValue: unknown;
+            valid: boolean;
+            invalid: boolean;
+            loading: boolean;
+        }) => any;
+    } & {
+        loading?: (props: {
+            modelValue: unknown;
+            valid: boolean;
+            invalid: boolean;
+            loading: boolean;
+        }) => any;
+    } & {
+        valid?: (props: {
+            modelValue: unknown;
+            valid: boolean;
+            invalid: boolean;
+            loading: boolean;
+        }) => any;
+    } & {
+        invalid?: (props: {
+            modelValue: unknown;
+            valid: boolean;
+            invalid: boolean;
+            loading: boolean;
+        }) => any;
+    };
+    emit: ((evt: "clear") => void) & ((evt: "update:modelValue", args_0: any) => void) & ((evt: "blur", args_0: import("@vueuse/core").MaybeElement) => void) & ((evt: "focus", args_0: import("@vueuse/core").MaybeElement) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,298 @@
+import type { MaybeElement } from '@vueuse/core';
+import type { Option } from '../../types/generic';
+export type VvSelectEmits = {
+    'update:modelValue': [any];
+    'focus': [MaybeElement];
+    'blur': [MaybeElement];
+    'clear': [];
+};
+export declare const VvSelectProps: {
+    /**
+     * This Boolean attribute indicates that multiple options can be selected in the list.
+     * If it is not specified, then only one option can be selected at a time.
+     * When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple
+     */
+    multiple: BooleanConstructor;
+    /**
+     * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required
+     */
+    required: BooleanConstructor;
+    /**
+     * If the control is presented as a scrolling list box (e.g. when multiple is specified),
+     * this attribute represents the number of rows in the list that should be visible at one time.
+     * Browsers are not required to present a select element as a scrolled list box. The default value is 0.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size
+     */
+    size: (NumberConstructor | StringConstructor)[];
+    /**
+     * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+     */
+    modelValue: {
+        type: (NumberConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    /**
+     * Select first option automatically
+     */
+    autoselectFirst: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Select placeholder
+     */
+    placeholder: StringConstructor;
+    showClearAction: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconClear: {
+        type: PropType<string | import("../VvIcon").VvIconProps>;
+        default: "close";
+    };
+    labelClear: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    floating: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: PropType<string | import("../VvIcon").VvIconProps>;
+        default: undefined;
+    };
+    iconPosition: {
+        type: PropType<`${import("../../constants").Position}`>;
+        default: import("../../constants").Position;
+        validation: (value: import("../../constants").Position) => boolean;
+    };
+    options: {
+        type: PropType<(Option | string)[]>;
+        default: () => never[];
+    };
+    labelKey: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    valueKey: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    disabledKey: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    modifiers: {
+        type: PropType<string | string[]>;
+        default: undefined;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loadingLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    hintLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    invalidLabel: {
+        type: (ArrayConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    valid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    validLabel: {
+        type: (ArrayConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    tabindex: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    name: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    id: (NumberConstructor | StringConstructor)[];
+};
+export declare function useVvSelectProps<T extends Option | string>(): {
+    options: {
+        type: PropType<T[]>;
+        default: () => never[];
+    };
+    /**
+     * This Boolean attribute indicates that multiple options can be selected in the list.
+     * If it is not specified, then only one option can be selected at a time.
+     * When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple
+     */
+    multiple: BooleanConstructor;
+    /**
+     * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required
+     */
+    required: BooleanConstructor;
+    /**
+     * If the control is presented as a scrolling list box (e.g. when multiple is specified),
+     * this attribute represents the number of rows in the list that should be visible at one time.
+     * Browsers are not required to present a select element as a scrolled list box. The default value is 0.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size
+     */
+    size: (NumberConstructor | StringConstructor)[];
+    /**
+     * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+     */
+    modelValue: {
+        type: (NumberConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    /**
+     * Select first option automatically
+     */
+    autoselectFirst: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Select placeholder
+     */
+    placeholder: StringConstructor;
+    showClearAction: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconClear: {
+        type: PropType<string | import("../VvIcon").VvIconProps>;
+        default: "close";
+    };
+    labelClear: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    floating: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: PropType<string | import("../VvIcon").VvIconProps>;
+        default: undefined;
+    };
+    iconPosition: {
+        type: PropType<`${import("../../constants").Position}`>;
+        default: import("../../constants").Position;
+        validation: (value: import("../../constants").Position) => boolean;
+    };
+    labelKey: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    valueKey: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    disabledKey: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    modifiers: {
+        type: PropType<string | string[]>;
+        default: undefined;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loadingLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    hintLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    invalidLabel: {
+        type: (ArrayConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    valid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    validLabel: {
+        type: (ArrayConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    tabindex: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    name: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    id: (NumberConstructor | StringConstructor)[];
+};