@volverjs/ui-vue 0.0.1-beta.8 → 0.0.2

package/dist/components/VvCombobox/VvCombobox.umd.js

@@ -0,0 +1 @@
+(function(e,$){typeof exports=="object"&&typeof module<"u"?module.exports=$(require("vue"),require("nanoid"),require("@vueuse/core"),require("@iconify/vue")):typeof define=="function"&&define.amd?define(["vue","nanoid","@vueuse/core","@iconify/vue"],$):(e=typeof globalThis<"u"?globalThis:e||self,e.VvCombobox=$(e.vue,e.nanoid,e.core,e.vue$1))})(this,function(e,$,O,w){"use strict";function R(o,n,t){return t?L(o,t)===L(n,t):U(o,n)}function U(o,n){if(o===n)return!0;if(o&&n&&typeof o=="object"&&typeof n=="object"){const t=Array.isArray(o),i=Array.isArray(n);let l,c,r;if(t&&i){if(c=o.length,c!=n.length)return!1;for(l=c;l--!==0;)if(!U(o[l],n[l]))return!1;return!0}if(t!=i)return!1;const y=o instanceof Date,m=n instanceof Date;if(y!=m)return!1;if(y&&m)return o.getTime()==n.getTime();const f=o instanceof RegExp,a=n instanceof RegExp;if(f!=a)return!1;if(f&&a)return o.toString()==n.toString();const s=Object.keys(o);if(c=s.length,c!==Object.keys(n).length)return!1;for(l=c;l--!==0;)if(!Object.prototype.hasOwnProperty.call(n,s[l]))return!1;for(l=c;l--!==0;)if(r=s[l],!U(o[r],n[r]))return!1;return!0}return o!==o&&n!==n}function L(o,n){if(o&&Object.keys(o).length&&n){if(n.indexOf(".")===-1)return o[n];{const t=n.split(".");let i=o;for(let l=0,c=t.length;l<c;++l){if(o==null)return null;i=i[t[l]]}return i}}else return null}function he(o,n){let t=-1;if(n){for(let i=0;i<n.length;i++)if(R(n[i],o)){t=i;break}}return t}function j(o,n){if(o!=null&&n&&n.length){for(const t of n)if(R(o,t))return!0}return!1}function Z(o){return(n=>n==null||n===""||Array.isArray(n)&&n.length===0||!(n instanceof Date)&&typeof n=="object"&&Object.keys(n).length===0)(e.unref(o))}function be(o,n){const t=he(o,n);return t>-1?n.filter((i,l)=>l!==t):n}function Ve(o){return typeof o=="string"||o instanceof String}function oe(o){var n,t;if(o)return(t=(n=o.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g))==null?void 0:n.join("-"))==null?void 0:t.toLowerCase()}function F(o,n){const t={[`${o}`]:!0};return{bemCssClasses:e.computed(()=>Object.keys(n).reduce((l,c)=>{const r=e.unref(n[c])||!1;if(!r)return l;if(c==="modifiers"){const y=Array.isArray(r)?r:r.split(" ");return{...l,...y.reduce((m,f)=>({...m,[`${o}--${oe(f)}`]:!0}),{})}}else return{...l,[`${o}--${oe(c)}`]:r}},t)||{})}}function re(o,n,t){const i=e.computed(()=>!!(o!=null&&o.value&&n.value==="left"||t!=null&&t.iconLeft)),l=e.computed(()=>!!(o!=null&&o.value&&n.value==="right"||t!=null&&t.iconRight)),c=e.computed(()=>!!(o!=null&&o.value&&n.value==="top"||t!=null&&t.iconTop)),r=e.computed(()=>!!(o!=null&&o.value&&n.value==="bottom"||t!=null&&t.iconBottom));return{hasIcon:e.computed(()=>typeof(o==null?void 0:o.value)=="string"?{name:o==null?void 0:o.value}:o==null?void 0:o.value),hasIconLeft:i,hasIconRight:l,hasIconTop:c,hasIconBottom:r}}function G(o){const{options:n,labelKey:t,valueKey:i}=e.toRefs(o);return{options:n,getOptionLabel:r=>typeof r!="object"&&r!==null?r:typeof t.value=="function"?t.value(r):r[t.value],getOptionValue:r=>typeof r!="object"&&r!==null?r:typeof i.value=="function"?i.value(r):r[i.value]}}function le(o,n){const{focused:t}=O.useFocus(o);return e.watch(t,i=>{n(i?"focus":"blur",e.unref(o))}),{focused:t}}const ae={valid:Boolean,validLabel:[String,Array]},se={invalid:Boolean,invalidLabel:[String,Array]},ie={loading:Boolean,loadingLabel:String},J={disabled:Boolean},ce={readonly:Boolean},X={modifiers:[String,Array]},de={hintLabel:{type:String,default:""}},Q={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"}},ue={LEFT:"left",RIGHT:"right"},fe={icon:{type:[String,Object]},iconPosition:{type:String,validation:o=>Object.values(ue).includes(o),default:ue.RIGHT}},pe={tabindex:{type:[String,Number],default:0}},me={floating:Boolean},ge={unselectable:{type:Boolean,default:!0}},W={id:[String,Number],name:{type:String,required:!0}},Se={autofocus:Boolean},ke={autocomplete:{type:String,default:"off"}},Be={...W,...Q,...J,...X,modelValue:{type:[String,Number,Boolean,Object,Array]},labelNoResults:{type:String,default:"No results"},multiple:Boolean,maxValues:[Number,String],unselectable:{type:Boolean,default:!0}},Ce=["id"],Ne={key:0,role:"option"},Pe=["aria-selected"],$e=["for","onClick"],we=["id","type","value","checked","disabled","name"],Ie={name:"VvDropdown"},_e=e.defineComponent({...Ie,props:Be,emits:["update:modelValue"],setup(o,{emit:n}){const t=o,i=e.computed(()=>String(t.id||$.nanoid())),{modifiers:l,disabled:c}=e.toRefs(t),{getOptionLabel:r,getOptionValue:y}=G(t),{bemCssClasses:m}=F("vv-dropdown",{modifiers:l,disabled:c});function f(d){return Array.isArray(t.modelValue)?j(d,t.modelValue)||j(y(d),t.modelValue):R(d,t.modelValue)||R(y(d),t.modelValue)}function a(d){return typeof d=="string"||d.disabled===void 0?c.value:d.disabled}function s(d){var b;if(t.disabled)return;let p=d;if(t.multiple)if(Array.isArray(t.modelValue)){if(t.maxValues!==void 0&&t.maxValues>=0&&((b=t.modelValue)==null?void 0:b.length)>=t.maxValues&&!j(d,t.modelValue))return;p=j(d,t.modelValue)?be(d,t.modelValue):[...t.modelValue,d]}else p=[d];else t.unselectable&&d===t.modelValue&&(p=void 0);n("update:modelValue",p)}return(d,p)=>{var b;return e.openBlock(),e.createElementBlock("ul",{id:e.unref(i),class:e.normalizeClass(e.unref(m)),role:"listbox"},[(b=d.options)!=null&&b.length?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("li",Ne,[e.createElementVNode("label",null,e.toDisplayString(d.labelNoResults),1)])),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.options,(h,S)=>(e.openBlock(),e.createElementBlock("li",{key:S,role:"option","aria-selected":f(h)},[e.createElementVNode("label",{for:`dropdown-${S}-${e.unref(i)}`,onClick:e.withModifiers(B=>s(e.unref(y)(h)),["prevent"])},[e.createElementVNode("input",{id:`dropdown-${S}-${e.unref(i)}`,type:d.multiple?"checkbox":"radio",value:e.unref(y)(h),checked:f(h),disabled:a(h),name:d.name,tabindex:"-1","aria-hidden":"true"},null,8,we),e.createTextVNode(" "+e.toDisplayString(e.unref(r)(h)),1)],8,$e)],8,Pe))),128))],10,Ce)}}}),Ae="ds",Oe={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]}},Ee={name:"VvIcon"},T=e.defineComponent({...Ee,props:Oe,setup(o){const n=o,t=e.ref(!0),{modifiers:i}=e.toRefs(n),l=e.inject(Ae),{bemCssClasses:c}=F("vv-icon",{modifiers:i}),r=e.computed(()=>n.provider||(l==null?void 0:l.provider)),y=e.computed(()=>{const a=n.name??"",s=`@${r.value}:${n.prefix}:${n.name}`;return w.iconExists(a)?a:w.iconExists(s)?s:(l==null?void 0:l.iconsCollections.find(d=>{const p=`@${r.value}:${d.prefix}:${a}`;if(w.iconExists(p))return p}))||a});function m(a){let s=null;if(typeof window>"u"){const{JSDOM:h}=require("jsdom");s=new h().window}return(s?new s.DOMParser:new window.DOMParser).parseFromString(a,"text/html").querySelector("svg")}function f(a){const s=m(a),d=(s==null?void 0:s.innerHTML.trim())||"";s&&d&&w.addIcon(`@${r.value}:${n.prefix}:${n.name}`,{body:d,height:s.viewBox.baseVal.height,width:s.viewBox.baseVal.width})}return l&&(n.src&&!w.iconExists(`@${r.value}:${n.prefix}:${n.name}`)?(t.value=!1,l.fetchIcon(n.src).then(a=>{a&&(f(a),t.value=!0)}).catch(a=>{throw new Error(`During fetch icon: ${a==null?void 0:a.message}`)})):n.svg&&f(n.svg)),(a,s)=>t.value?(e.openBlock(),e.createBlock(e.unref(w.Icon),e.mergeProps({key:0,class:e.unref(c)},{inline:a.inline,width:a.width,height:a.height,horizontalFlip:a.horizontalFlip,verticalFlip:a.verticalFlip,flip:a.flip,rotate:a.rotate,color:a.color,onLoad:a.onLoad,icon:e.unref(y)}),null,16,["class"])):e.createCommentVNode("",!0)}});function x(o){return Array.isArray(o)?o.filter(n=>Ve(n)).join(" "):o}function ye(o,n){const{invalid:t,valid:i,hint:l,loading:c}=n,{hintLabel:r,modelValue:y,valid:m,validLabel:f,invalid:a,invalidLabel:s,...d}=e.toRefs(o),p=L(d,"loading"),b=L(d,"loadingLabel"),h=e.computed(()=>a.value?!!(a.value&&t||s!=null&&s.value&&Array.isArray(s.value)&&s.value.length>0||s!=null&&s.value&&!Z(s)):!1),S=e.computed(()=>!!(r&&r.value||l)),B=e.computed(()=>!!(f&&f.value||i)),C=e.computed(()=>!!(p!=null&&p.value&&c||p!=null&&p.value&&(b!=null&&b.value))),N=e.computed(()=>S.value||B.value||h.value||C.value);return{hasInvalid:h,hasHint:S,hasValid:B,hasLoading:C,HintSlot:{name:"HintSlot",props:{params:{type:Object,default:()=>({})}},setup(I){const _=e.computed(()=>{const k=O.toReactive({hintLabel:r,modelValue:y,valid:m,validLabel:f,invalid:a,invalidLabel:s,loading:p,loadingLabel:b,...I.params});return a!=null&&a.value?(t==null?void 0:t(k))||x(s==null?void 0:s.value)||(r==null?void 0:r.value):m!=null&&m.value?(i==null?void 0:i(k))||x(f==null?void 0:f.value)||(r==null?void 0:r.value):p!=null&&p.value?(c==null?void 0:c(k))||x(b==null?void 0:b.value)||(r==null?void 0:r.value):(l==null?void 0:l(k))||x(r==null?void 0:r.value)||(r==null?void 0:r.value)});return{isVisible:N,hasInvalid:h,hasValid:B,hintContent:_}},render(){if(this.isVisible)return e.h("small",{role:this.hasInvalid||this.hasValid?"alert":void 0},this.hintContent)}}}}const De={...W,...Se,...ke,...pe,...ae,...se,...de,...ie,...J,...ce,...X,...Q,...fe,...me,...ge,multiple:Boolean,required:Boolean,size:[String,Number],modelValue:{type:[String,Number,Boolean,Object,Array],default:void 0},label:String,placeholder:String},Re=["update:modelValue","focus","blur"],Le=["for"],je={class:"vv-select__wrapper"},Fe=["id"],Te=["disabled","hidden"],xe=["disabled","value"],Ke={name:"VvSelect"},qe=e.defineComponent({...Ke,props:De,emits:Re,setup(o,{emit:n}){const t=o,i=e.useSlots(),l=e.ref(),{HintSlot:c,hasHint:r,hasInvalid:y}=ye(t,i),{modifiers:m,disabled:f,readonly:a,loading:s,icon:d,iconPosition:p,invalid:b,valid:h,floating:S,multiple:B}=e.toRefs(t),C=e.computed(()=>String(t.id||$.nanoid())),N=e.computed(()=>`${C.value}-hint`),{focused:I}=le(l,n),_=O.useElementVisibility(l);e.watch(_,g=>{g&&t.autofocus&&(I.value=!0)});const{hasIcon:k,hasIconLeft:E,hasIconRight:K}=re(d,p),q=e.computed(()=>!Z(t.modelValue)),z=e.computed(()=>t.disabled||t.readonly),H=e.computed(()=>z.value?-1:t.tabindex),M=e.computed(()=>{if(t.invalid===!0)return!0;if(t.valid===!0)return!1}),{bemCssClasses:Y}=F("vv-select",{modifiers:m,valid:h,invalid:b,loading:s,disabled:f,readonly:a,iconLeft:E,iconRight:K,dirty:q,focus:I,floating:S,multiple:B}),v=e.computed(()=>({name:t.name,tabindex:H.value,disabled:z.value,required:t.required,size:t.size,autocomplete:t.autocomplete,multiple:t.multiple,"aria-invalid":M.value,"aria-describedby":!y.value&&r.value?N.value:void 0,"aria-errormessage":y.value?N.value:void 0})),{getOptionLabel:ee,getOptionValue:te}=G(t);function ne(g){return typeof g=="string"||g.disabled===void 0?f.value:g.disabled}const D=e.computed({get:()=>t.modelValue,set:g=>{Array.isArray(g)&&(g=g.filter(A=>A!==void 0)),n("update:modelValue",g)}});return(g,A)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(Y))},[g.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:e.unref(C)},e.toDisplayString(g.label),9,Le)):e.createCommentVNode("",!0),e.createElementVNode("div",je,[e.renderSlot(g.$slots,"before",{},()=>[e.unref(E)?(e.openBlock(),e.createBlock(T,e.normalizeProps(e.mergeProps({key:0},e.unref(k))),null,16)):e.createCommentVNode("",!0)]),e.withDirectives(e.createElementVNode("select",e.mergeProps({id:e.unref(C),ref_key:"select",ref:l,"onUpdate:modelValue":A[0]||(A[0]=u=>e.isRef(D)?D.value=u:null)},e.unref(v)),[g.placeholder?(e.openBlock(),e.createElementBlock("option",{key:0,value:void 0,disabled:!g.unselectable,hidden:!g.unselectable},e.toDisplayString(g.placeholder),9,Te)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(g.options,(u,V)=>(e.openBlock(),e.createElementBlock("option",{key:V,disabled:ne(u),value:e.unref(te)(u)},e.toDisplayString(e.unref(ee)(u)),9,xe))),128))],16,Fe),[[e.vModelSelect,e.unref(D)]]),e.renderSlot(g.$slots,"after",{},()=>[e.unref(K)?(e.openBlock(),e.createBlock(T,e.normalizeProps(e.mergeProps({key:0},e.unref(k))),null,16)):e.createCommentVNode("",!0)])]),e.createVNode(e.unref(c),{id:e.unref(N),class:"vv-select__hint"},null,8,["id"])],2))}}),ze=["update:modelValue","change:search","focus","blur"],He={...W,...pe,...ae,...se,...de,...ie,...J,...ce,...X,...Q,...fe,...me,...ge,modelValue:{type:[String,Number,Boolean,Object,Array],default:void 0},label:String,labelNoResults:{type:String,default:"No results"},placeholder:String,searchable:Boolean,searchPlaceholder:String,debounceSearch:{type:[Number,String],default:0},multiple:Boolean,maxValues:[Number,String],separator:{type:String,default:", "},native:Boolean},Me=["id"],Ue=["id","for"],Ze=["tabindex"],Ge=["id","placeholder"],Je={name:"VvCombobox"};return e.defineComponent({...Je,props:He,emits:ze,setup(o,{emit:n}){const t=o,i=e.useSlots(),{HintSlot:l}=ye(t,i),c=e.ref(),r=e.ref(),{focused:y}=le(c,n),m=e.computed(()=>String(t.id||$.nanoid())),f=e.ref(""),a=O.refDebounced(f,Number(t.debounceSearch)),s=e.ref(!1),{icon:d,iconPosition:p,modifiers:b,disabled:h,readonly:S,loading:B,valid:C,invalid:N,floating:I}=e.toRefs(t);e.watch(a,()=>n("change:search",a.value));const{hasIcon:_,hasIconLeft:k,hasIconRight:E}=re(d,p),K=e.computed(()=>!Z(t.modelValue)),q=e.computed(()=>h.value||S.value?-1:t.tabindex),{bemCssClasses:z}=F("vv-select",{modifiers:b,disabled:h,loading:B,readonly:S,iconLeft:k,iconRight:E,valid:C,invalid:N,dirty:K,focus:y,floating:I}),H=e.computed(()=>t.searchable?v.value:t.options),{getOptionLabel:M,getOptionValue:Y}=G(t),v=e.computed(()=>{var u;return(u=t.options)==null?void 0:u.filter(V=>M(V).toLowerCase().includes(a.value.toLowerCase().trim()))}),ee=e.computed(()=>{let u=[];return Array.isArray(t.modelValue)?u=t.modelValue:t.modelValue&&(u=[t.modelValue]),t.options.filter(V=>u.includes(Y(V)))}),te=e.computed(()=>ee.value.map(u=>M(u)).join(t.separator));O.onClickOutside(c,()=>{c.value.open=!1});function ne(u){const V=u.target;s.value=V.open}function D(u){c.value&&!t.multiple&&(c.value.open=!1),n("update:modelValue",u)}const g=e.computed(()=>({name:t.name,options:H.value,labelKey:t.labelKey,valueKey:t.valueKey,disabled:t.disabled,labelNoResults:t.labelNoResults,multiple:t.multiple,maxValues:t.maxValues,modelValue:t.modelValue,unselectable:t.unselectable})),A=e.computed(()=>({id:m.value,name:t.name,tabindex:q.value,valid:C.value,validLabel:t.validLabel,invalid:N.value,invalidLabel:t.invalidLabel,hintLabel:t.hintLabel,loading:B.value,loadingLabel:t.loadingLabel,disabled:h.value,readonly:S.value,modifiers:t.modifiers,options:H.value,labelKey:t.labelKey,valueKey:t.valueKey,icon:t.icon,iconPosition:t.iconPosition,floating:t.floating,unselectable:t.unselectable,multiple:t.multiple,label:t.label,placeholder:t.placeholder,modelValue:t.modelValue}));return(u,V)=>u.native?(e.openBlock(),e.createBlock(qe,e.mergeProps({key:1},e.unref(A),{"onUpdate:modelValue":V[4]||(V[4]=P=>n("update:modelValue",P))}),null,16)):(e.openBlock(),e.createElementBlock("div",{key:0,id:e.unref(m),class:e.normalizeClass(e.unref(z))},[u.label?(e.openBlock(),e.createElementBlock("label",{key:0,id:`${e.unref(m)}-label`,for:u.searchable&&s.value?`${e.unref(m)}-input`:void 0},e.toDisplayString(u.label),9,Ue)):e.createCommentVNode("",!0),e.createElementVNode("details",{ref_key:"dropdown",ref:c,class:"vv-select__wrapper",onClick:V[2]||(V[2]=P=>e.unref(h)||e.unref(S)?P.preventDefault():null),onKeyup:V[3]||(V[3]=e.withKeys(P=>c.value.open=!1,["esc"])),onToggle:ne},[e.createElementVNode("summary",{class:"vv-select__input",tabindex:e.unref(q),onKeyup:V[1]||(V[1]=e.withKeys(P=>u.searchable?P.preventDefault():null,["space"]))},[e.renderSlot(u.$slots,"before",{},()=>[e.unref(k)?(e.openBlock(),e.createBlock(T,e.mergeProps({key:0,class:"vv-select__icon-left"},e.unref(_)),null,16)):e.createCommentVNode("",!0)]),u.searchable&&s.value?e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:0,id:`${e.unref(m)}-input`,ref_key:"inputSearch",ref:r,"onUpdate:modelValue":V[0]||(V[0]=P=>f.value=P),role:"combobox",type:"search",placeholder:u.searchPlaceholder},null,8,Ge)),[[e.vModelText,f.value]]):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(e.unref(te)||u.placeholder),1)],64)),e.renderSlot(u.$slots,"after",{},()=>[e.unref(E)?(e.openBlock(),e.createBlock(T,e.mergeProps({key:0,class:"vv-select__icon-right"},e.unref(_)),null,16)):e.createCommentVNode("",!0)])],40,Ze),e.createVNode(_e,e.mergeProps({id:`${e.unref(m)}-dropdown`},e.unref(g),{"onUpdate:modelValue":D}),null,16,["id"])],544),e.createVNode(e.unref(l),{class:"vv-select__hint"})],10,Me))}})});

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

@@ -0,0 +1,175 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    modelValue: {
+        type: (ArrayConstructor | ObjectConstructor | StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    label: StringConstructor;
+    labelNoResults: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: StringConstructor;
+    searchable: BooleanConstructor;
+    searchPlaceholder: StringConstructor;
+    debounceSearch: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    multiple: BooleanConstructor;
+    maxValues: (StringConstructor | NumberConstructor)[];
+    separator: {
+        type: StringConstructor;
+        default: string;
+    };
+    native: BooleanConstructor;
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    floating: BooleanConstructor;
+    icon: {
+        type: (ObjectConstructor | StringConstructor)[];
+    };
+    iconPosition: {
+        type: import("vue").PropType<import("../../props/index.js").IconPosition>;
+        validation: (value: import("../../props/index.js").IconPosition) => boolean;
+        default: "right";
+    };
+    options: {
+        type: import("vue").PropType<(string | import("../../types/generic.js").Option)[]>;
+        default: () => never[];
+    };
+    labelKey: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    valueKey: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    modifiers: import("vue").PropType<string | string[]>;
+    readonly: BooleanConstructor;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    hintLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    invalid: BooleanConstructor;
+    invalidLabel: (ArrayConstructor | StringConstructor)[];
+    valid: BooleanConstructor;
+    validLabel: (ArrayConstructor | StringConstructor)[];
+    tabindex: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    id: (StringConstructor | NumberConstructor)[];
+    name: {
+        type: StringConstructor;
+        required: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (ArrayConstructor | ObjectConstructor | StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    label: StringConstructor;
+    labelNoResults: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: StringConstructor;
+    searchable: BooleanConstructor;
+    searchPlaceholder: StringConstructor;
+    debounceSearch: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    multiple: BooleanConstructor;
+    maxValues: (StringConstructor | NumberConstructor)[];
+    separator: {
+        type: StringConstructor;
+        default: string;
+    };
+    native: BooleanConstructor;
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    floating: BooleanConstructor;
+    icon: {
+        type: (ObjectConstructor | StringConstructor)[];
+    };
+    iconPosition: {
+        type: import("vue").PropType<import("../../props/index.js").IconPosition>;
+        validation: (value: import("../../props/index.js").IconPosition) => boolean;
+        default: "right";
+    };
+    options: {
+        type: import("vue").PropType<(string | import("../../types/generic.js").Option)[]>;
+        default: () => never[];
+    };
+    labelKey: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    valueKey: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    modifiers: import("vue").PropType<string | string[]>;
+    readonly: BooleanConstructor;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    hintLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    invalid: BooleanConstructor;
+    invalidLabel: (ArrayConstructor | StringConstructor)[];
+    valid: BooleanConstructor;
+    validLabel: (ArrayConstructor | StringConstructor)[];
+    tabindex: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    id: (StringConstructor | NumberConstructor)[];
+    name: {
+        type: StringConstructor;
+        required: boolean;
+    };
+}>> & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: string | number | boolean | unknown[] | Record<string, any>;
+    disabled: boolean;
+    multiple: boolean;
+    unselectable: boolean;
+    iconPosition: import("../../props/index.js").IconPosition;
+    loading: boolean;
+    readonly: boolean;
+    hintLabel: string;
+    invalid: boolean;
+    valid: boolean;
+    tabindex: string | number;
+    options: (string | import("../../types/generic.js").Option)[];
+    labelKey: string | Function;
+    valueKey: string | Function;
+    labelNoResults: string;
+    floating: boolean;
+    searchable: boolean;
+    debounceSearch: string | number;
+    separator: string;
+    native: boolean;
+}>, {
+    before: (_: {}) => any;
+    after: (_: {}) => any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,108 @@
+export declare const VvComboboxEvents: string[];
+export declare const VvComboboxProps: {
+    /**
+     * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+     */
+    modelValue: {
+        type: (ArrayConstructor | ObjectConstructor | StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    /**
+     * Select input label
+     */
+    label: StringConstructor;
+    /**
+     * Label of "no results" options
+     */
+    labelNoResults: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Select input placeholder
+     */
+    placeholder: StringConstructor;
+    /**
+     * Use input text to search on options
+     */
+    searchable: BooleanConstructor;
+    /**
+     * On searchable select is the input search placeholder
+     */
+    searchPlaceholder: StringConstructor;
+    /**
+     * The input search debounce time in ms
+     */
+    debounceSearch: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /**
+     * Manage modelValue as string[] or object[]
+     */
+    multiple: BooleanConstructor;
+    /**
+     * The max number of selected values
+     */
+    maxValues: (StringConstructor | NumberConstructor)[];
+    /**
+     * The select label separator visible to the user
+     */
+    separator: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Show native select
+     */
+    native: BooleanConstructor;
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    floating: BooleanConstructor;
+    icon: {
+        type: (ObjectConstructor | StringConstructor)[];
+    };
+    iconPosition: {
+        type: import("vue").PropType<import("@/props").IconPosition>;
+        validation: (value: import("@/props").IconPosition) => boolean;
+        default: "right";
+    };
+    options: {
+        type: import("vue").PropType<(string | import("../../types/generic").Option)[]>;
+        default: () => never[];
+    };
+    labelKey: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    valueKey: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    }; /**
+     * The input search debounce time in ms
+     */
+    modifiers: import("vue").PropType<string | string[]>;
+    readonly: BooleanConstructor;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    hintLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    invalid: BooleanConstructor;
+    invalidLabel: (ArrayConstructor | StringConstructor)[];
+    valid: BooleanConstructor;
+    validLabel: (ArrayConstructor | StringConstructor)[];
+    tabindex: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    id: (StringConstructor | NumberConstructor)[];
+    name: {
+        type: StringConstructor;
+        required: boolean;
+    };
+};

package/dist/components/VvDialog/VvDialog.es.js

@@ -0,0 +1,200 @@
+import { computed as f, unref as l, defineComponent as V, ref as S, toRefs as B, inject as F, openBlock as h, createBlock as k, mergeProps as _, createCommentVNode as y, Transition as A, toHandlers as N, withCtx as z, withDirectives as E, createElementVNode as g, createElementBlock as C, renderSlot as w, createTextVNode as I, toDisplayString as M, withModifiers as P, createVNode as O, vShow as L } from "vue";
+import { useVModel as q, onClickOutside as T } from "@vueuse/core";
+import { iconExists as m, Icon as Z, addIcon as j } from "@iconify/vue";
+const H = "ds", R = {
+  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]
+  }
+};
+function b(i) {
+  var t, n;
+  if (i)
+    return (n = (t = i.match(
+      /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
+    )) == null ? void 0 : t.join("-")) == null ? void 0 : n.toLowerCase();
+}
+function W(i, t) {
+  const n = { [`${i}`]: !0 };
+  return {
+    bemCssClasses: f(() => Object.keys(t).reduce((r, a) => {
+      const s = l(t[a]) || !1;
+      if (!s)
+        return r;
+      if (a === "modifiers") {
+        const p = Array.isArray(s) ? s : s.split(" ");
+        return {
+          ...r,
+          ...p.reduce(
+            (v, u) => ({
+              ...v,
+              [`${i}--${b(u)}`]: !0
+            }),
+            {}
+          )
+        };
+      } else
+        return {
+          ...r,
+          [`${i}--${b(a)}`]: s
+        };
+    }, n) || {})
+  };
+}
+const J = {
+  name: "VvIcon"
+}, X = /* @__PURE__ */ V({
+  ...J,
+  props: R,
+  setup(i) {
+    const t = i, n = S(!0), { modifiers: c } = B(t), r = F(H), { bemCssClasses: a } = W("vv-icon", {
+      modifiers: c
+    }), s = f(() => t.provider || (r == null ? void 0 : r.provider)), p = f(() => {
+      const e = t.name ?? "", o = `@${s.value}:${t.prefix}:${t.name}`;
+      return m(e) ? e : m(o) ? o : (r == null ? void 0 : r.iconsCollections.find((d) => {
+        const $ = `@${s.value}:${d.prefix}:${e}`;
+        if (m($))
+          return $;
+      })) || e;
+    });
+    function v(e) {
+      let o = null;
+      if (typeof window > "u") {
+        const { JSDOM: D } = require("jsdom");
+        o = new D().window;
+      }
+      return (o ? new o.DOMParser() : new window.DOMParser()).parseFromString(e, "text/html").querySelector("svg");
+    }
+    function u(e) {
+      const o = v(e), d = (o == null ? void 0 : o.innerHTML.trim()) || "";
+      o && d && j(`@${s.value}:${t.prefix}:${t.name}`, {
+        body: d,
+        height: o.viewBox.baseVal.height,
+        width: o.viewBox.baseVal.width
+      });
+    }
+    return r && (t.src && !m(`@${s.value}:${t.prefix}:${t.name}`) ? (n.value = !1, r.fetchIcon(t.src).then((e) => {
+      e && (u(e), n.value = !0);
+    }).catch((e) => {
+      throw new Error(`During fetch icon: ${e == null ? void 0 : e.message}`);
+    })) : t.svg && u(t.svg)), (e, o) => n.value ? (h(), k(l(Z), _({
+      key: 0,
+      class: l(a)
+    }, {
+      inline: e.inline,
+      width: e.width,
+      height: e.height,
+      horizontalFlip: e.horizontalFlip,
+      verticalFlip: e.verticalFlip,
+      flip: e.flip,
+      rotate: e.rotate,
+      color: e.color,
+      onLoad: e.onLoad,
+      icon: l(p)
+    }), null, 16, ["class"])) : y("", !0);
+  }
+}), G = ["open", "close", "update:modelValue"], K = {
+  id: { type: String, required: !0 },
+  title: String,
+  modelValue: Boolean,
+  transition: { type: String, default: "fade-block" },
+  size: String,
+  autoClose: { type: Boolean, default: !0 }
+}, Q = {
+  key: 0,
+  class: "vv-dialog__header"
+}, U = ["onClick"], Y = { class: "vv-dialog__content" }, x = {
+  key: 1,
+  class: "vv-dialog__footer"
+}, ee = {
+  name: "VvDialog"
+}, se = /* @__PURE__ */ V({
+  ...ee,
+  props: K,
+  emits: G,
+  setup(i, { emit: t }) {
+    const n = i, c = q(n, "modelValue", t), r = S(!0), a = S(null), s = f(() => {
+      const { id: o } = n;
+      return {
+        id: o,
+        open: r.value
+      };
+    }), p = f(() => n.size ? ["vv-dialog", `vv-dialog--${n.size}`] : "vv-dialog"), v = f(() => `vv-dialog--${n.transition}`), u = {
+      "before-enter": () => {
+        r.value = !0, t("open");
+      },
+      "after-leave": () => {
+        r.value = !1, t("close");
+      }
+    };
+    T(a, () => {
+      n.autoClose && (c.value = !1);
+    });
+    function e() {
+      c.value = !1;
+    }
+    return (o, d) => (h(), k(A, _({ name: l(v) }, N(u)), {
+      default: z(() => [
+        E(g("dialog", _(l(s), { class: l(p) }), [
+          g("article", {
+            ref_key: "modalWrapper",
+            ref: a,
+            class: "vv-dialog__wrapper"
+          }, [
+            o.$slots.header || o.title ? (h(), C("header", Q, [
+              w(o.$slots, "header", {}, () => [
+                I(M(o.title) + " ", 1),
+                g("button", {
+                  type: "button",
+                  "aria-label": "Close",
+                  class: "vv-dialog__close",
+                  onClick: P(e, ["prevent"])
+                }, [
+                  O(X, { name: "close" })
+                ], 8, U)
+              ])
+            ])) : y("", !0),
+            g("div", Y, [
+              w(o.$slots, "default")
+            ]),
+            o.$slots.footer ? (h(), C("footer", x, [
+              w(o.$slots, "footer")
+            ])) : y("", !0)
+          ], 512)
+        ], 16), [
+          [L, l(c)]
+        ])
+      ]),
+      _: 3
+    }, 16, ["name"]));
+  }
+});
+export {
+  se as default
+};

package/dist/components/VvDialog/VvDialog.umd.js

@@ -0,0 +1 @@
+(function(e,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("vue"),require("@vueuse/core"),require("@iconify/vue")):typeof define=="function"&&define.amd?define(["vue","@vueuse/core","@iconify/vue"],c):(e=typeof globalThis<"u"?globalThis:e||self,e.VvDialog=c(e.vue,e.core,e.vue$1))})(this,function(e,c,d){"use strict";const w="ds",y={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]}};function S(l){var n,i;if(l)return(i=(n=l.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g))==null?void 0:n.join("-"))==null?void 0:i.toLowerCase()}function _(l,n){const i={[`${l}`]:!0};return{bemCssClasses:e.computed(()=>Object.keys(n).reduce((r,a)=>{const s=e.unref(n[a])||!1;if(!s)return r;if(a==="modifiers"){const u=Array.isArray(s)?s:s.split(" ");return{...r,...u.reduce((g,p)=>({...g,[`${l}--${S(p)}`]:!0}),{})}}else return{...r,[`${l}--${S(a)}`]:s}},i)||{})}}const C={name:"VvIcon"},V=e.defineComponent({...C,props:y,setup(l){const n=l,i=e.ref(!0),{modifiers:f}=e.toRefs(n),r=e.inject(w),{bemCssClasses:a}=_("vv-icon",{modifiers:f}),s=e.computed(()=>n.provider||(r==null?void 0:r.provider)),u=e.computed(()=>{const o=n.name??"",t=`@${s.value}:${n.prefix}:${n.name}`;return d.iconExists(o)?o:d.iconExists(t)?t:(r==null?void 0:r.iconsCollections.find(m=>{const h=`@${s.value}:${m.prefix}:${o}`;if(d.iconExists(h))return h}))||o});function g(o){let t=null;if(typeof window>"u"){const{JSDOM:D}=require("jsdom");t=new D().window}return(t?new t.DOMParser:new window.DOMParser).parseFromString(o,"text/html").querySelector("svg")}function p(o){const t=g(o),m=(t==null?void 0:t.innerHTML.trim())||"";t&&m&&d.addIcon(`@${s.value}:${n.prefix}:${n.name}`,{body:m,height:t.viewBox.baseVal.height,width:t.viewBox.baseVal.width})}return r&&(n.src&&!d.iconExists(`@${s.value}:${n.prefix}:${n.name}`)?(i.value=!1,r.fetchIcon(n.src).then(o=>{o&&(p(o),i.value=!0)}).catch(o=>{throw new Error(`During fetch icon: ${o==null?void 0:o.message}`)})):n.svg&&p(n.svg)),(o,t)=>i.value?(e.openBlock(),e.createBlock(e.unref(d.Icon),e.mergeProps({key:0,class:e.unref(a)},{inline:o.inline,width:o.width,height:o.height,horizontalFlip:o.horizontalFlip,verticalFlip:o.verticalFlip,flip:o.flip,rotate:o.rotate,color:o.color,onLoad:o.onLoad,icon:e.unref(u)}),null,16,["class"])):e.createCommentVNode("",!0)}}),$=["open","close","update:modelValue"],k={id:{type:String,required:!0},title:String,modelValue:Boolean,transition:{type:String,default:"fade-block"},size:String,autoClose:{type:Boolean,default:!0}},b={key:0,class:"vv-dialog__header"},B=["onClick"],E={class:"vv-dialog__content"},v={key:1,class:"vv-dialog__footer"},N={name:"VvDialog"};return e.defineComponent({...N,props:k,emits:$,setup(l,{emit:n}){const i=l,f=c.useVModel(i,"modelValue",n),r=e.ref(!0),a=e.ref(null),s=e.computed(()=>{const{id:t}=i;return{id:t,open:r.value}}),u=e.computed(()=>i.size?["vv-dialog",`vv-dialog--${i.size}`]:"vv-dialog"),g=e.computed(()=>`vv-dialog--${i.transition}`),p={"before-enter":()=>{r.value=!0,n("open")},"after-leave":()=>{r.value=!1,n("close")}};c.onClickOutside(a,()=>{i.autoClose&&(f.value=!1)});function o(){f.value=!1}return(t,m)=>(e.openBlock(),e.createBlock(e.Transition,e.mergeProps({name:e.unref(g)},e.toHandlers(p)),{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("dialog",e.mergeProps(e.unref(s),{class:e.unref(u)}),[e.createElementVNode("article",{ref_key:"modalWrapper",ref:a,class:"vv-dialog__wrapper"},[t.$slots.header||t.title?(e.openBlock(),e.createElementBlock("header",b,[e.renderSlot(t.$slots,"header",{},()=>[e.createTextVNode(e.toDisplayString(t.title)+" ",1),e.createElementVNode("button",{type:"button","aria-label":"Close",class:"vv-dialog__close",onClick:e.withModifiers(o,["prevent"])},[e.createVNode(V,{name:"close"})],8,B)])])):e.createCommentVNode("",!0),e.createElementVNode("div",E,[e.renderSlot(t.$slots,"default")]),t.$slots.footer?(e.openBlock(),e.createElementBlock("footer",v,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)],512)],16),[[e.vShow,e.unref(f)]])]),_:3},16,["name"]))}})});