@volverjs/ui-vue 0.0.1 → 0.0.2

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

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

@@ -22,6 +22,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     native: BooleanConstructor;
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    floating: BooleanConstructor;
     icon: {
         type: (ObjectConstructor | StringConstructor)[];
     };
@@ -59,6 +64,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         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)[];
@@ -83,6 +93,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     native: BooleanConstructor;
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    floating: BooleanConstructor;
     icon: {
         type: (ObjectConstructor | StringConstructor)[];
     };
@@ -120,12 +135,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         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;
@@ -137,6 +158,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     labelKey: string | Function;
     valueKey: string | Function;
     labelNoResults: string;
+    floating: boolean;
     searchable: boolean;
     debounceSearch: string | number;
     separator: string;

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

@@ -56,6 +56,11 @@ export declare const VvComboboxProps: {
      * Show native select
      */
     native: BooleanConstructor;
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    floating: BooleanConstructor;
     icon: {
         type: (ObjectConstructor | StringConstructor)[];
     };
@@ -75,7 +80,9 @@ export declare const VvComboboxProps: {
     valueKey: {
         type: (StringConstructor | FunctionConstructor)[];
         default: string;
-    };
+    }; /**
+     * The input search debounce time in ms
+     */
     modifiers: import("vue").PropType<string | string[]>;
     readonly: BooleanConstructor;
     disabled: BooleanConstructor;
@@ -93,4 +100,9 @@ export declare const VvComboboxProps: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
+    id: (StringConstructor | NumberConstructor)[];
+    name: {
+        type: StringConstructor;
+        required: boolean;
+    };
 };

package/dist/components/VvDropdown/VvDropdown.es.js

@@ -1,99 +1,99 @@
-import { computed as j, unref as f, toRefs as $, defineComponent as w, openBlock as b, createElementBlock as V, normalizeClass as B, createElementVNode as v, toDisplayString as O, createCommentVNode as S, Fragment as D, renderList as N, withModifiers as L, createTextVNode as R } from "vue";
+import { computed as B, unref as a, toRefs as N, defineComponent as $, openBlock as b, createElementBlock as V, normalizeClass as j, createElementVNode as v, toDisplayString as O, createCommentVNode as w, Fragment as x, renderList as D, withModifiers as L, createTextVNode as R } from "vue";
 import { nanoid as E } from "nanoid";
-function A(r, e, t) {
-  return t ? _(r, t) === _(e, t) : C(r, e);
+function A(r, t, e) {
+  return e ? _(r, e) === _(t, e) : C(r, t);
 }
-function C(r, e) {
-  if (r === e)
+function C(r, t) {
+  if (r === t)
     return !0;
-  if (r && e && typeof r == "object" && typeof e == "object") {
-    const t = Array.isArray(r), o = Array.isArray(e);
+  if (r && t && typeof r == "object" && typeof t == "object") {
+    const e = Array.isArray(r), s = Array.isArray(t);
     let n, u, l;
-    if (t && o) {
-      if (u = r.length, u != e.length)
+    if (e && s) {
+      if (u = r.length, u != t.length)
         return !1;
       for (n = u; n-- !== 0; )
-        if (!C(r[n], e[n]))
+        if (!C(r[n], t[n]))
           return !1;
       return !0;
     }
-    if (t != o)
+    if (e != s)
       return !1;
-    const i = r instanceof Date, d = e instanceof Date;
+    const i = r instanceof Date, d = t instanceof Date;
     if (i != d)
       return !1;
     if (i && d)
-      return r.getTime() == e.getTime();
-    const a = r instanceof RegExp, y = e instanceof RegExp;
-    if (a != y)
+      return r.getTime() == t.getTime();
+    const f = r instanceof RegExp, g = t instanceof RegExp;
+    if (f != g)
       return !1;
-    if (a && y)
-      return r.toString() == e.toString();
+    if (f && g)
+      return r.toString() == t.toString();
     const m = Object.keys(r);
-    if (u = m.length, u !== Object.keys(e).length)
+    if (u = m.length, u !== Object.keys(t).length)
       return !1;
     for (n = u; n-- !== 0; )
-      if (!Object.prototype.hasOwnProperty.call(e, m[n]))
+      if (!Object.prototype.hasOwnProperty.call(t, m[n]))
         return !1;
     for (n = u; n-- !== 0; )
-      if (l = m[n], !C(r[l], e[l]))
+      if (l = m[n], !C(r[l], t[l]))
         return !1;
     return !0;
   }
-  return r !== r && e !== e;
+  return r !== r && t !== t;
 }
-function _(r, e) {
-  if (r && Object.keys(r).length && e) {
-    if (e.indexOf(".") === -1)
-      return r[e];
+function _(r, t) {
+  if (r && Object.keys(r).length && t) {
+    if (t.indexOf(".") === -1)
+      return r[t];
     {
-      const t = e.split(".");
-      let o = r;
-      for (let n = 0, u = t.length; n < u; ++n) {
+      const e = t.split(".");
+      let s = r;
+      for (let n = 0, u = e.length; n < u; ++n) {
         if (r == null)
           return null;
-        o = o[t[n]];
+        s = s[e[n]];
       }
-      return o;
+      return s;
     }
   } else
     return null;
 }
-function F(r, e) {
-  let t = -1;
-  if (e) {
-    for (let o = 0; o < e.length; o++)
-      if (A(e[o], r)) {
-        t = o;
+function P(r, t) {
+  let e = -1;
+  if (t) {
+    for (let s = 0; s < t.length; s++)
+      if (A(t[s], r)) {
+        e = s;
         break;
       }
   }
-  return t;
+  return e;
 }
-function h(r, e) {
-  if (r != null && e && e.length) {
-    for (const t of e)
-      if (A(r, t))
+function h(r, t) {
+  if (r != null && t && t.length) {
+    for (const e of t)
+      if (A(r, e))
         return !0;
   }
   return !1;
 }
-function P(r, e) {
-  const t = F(r, e);
-  return t > -1 ? e.filter((o, n) => n !== t) : e;
+function F(r, t) {
+  const e = P(r, t);
+  return e > -1 ? t.filter((s, n) => n !== e) : t;
 }
-function x(r) {
-  var e, t;
+function S(r) {
+  var t, e;
   if (r)
-    return (t = (e = r.match(
+    return (e = (t = r.match(
       /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
-    )) == null ? void 0 : e.join("-")) == null ? void 0 : t.toLowerCase();
+    )) == null ? void 0 : t.join("-")) == null ? void 0 : e.toLowerCase();
 }
-function K(r, e) {
-  const t = { [`${r}`]: !0 };
+function I(r, t) {
+  const e = { [`${r}`]: !0 };
   return {
-    bemCssClasses: j(() => Object.keys(e).reduce((n, u) => {
-      const l = f(e[u]) || !1;
+    bemCssClasses: B(() => Object.keys(t).reduce((n, u) => {
+      const l = a(t[u]) || !1;
       if (!l)
         return n;
       if (u === "modifiers") {
@@ -101,9 +101,9 @@ function K(r, e) {
         return {
           ...n,
           ...i.reduce(
-            (d, a) => ({
+            (d, f) => ({
               ...d,
-              [`${r}--${x(a)}`]: !0
+              [`${r}--${S(f)}`]: !0
             }),
             {}
           )
@@ -111,108 +111,117 @@ function K(r, e) {
       } else
         return {
           ...n,
-          [`${r}--${x(u)}`]: l
+          [`${r}--${S(u)}`]: l
         };
-    }, t) || {})
+    }, e) || {})
   };
 }
-function M(r) {
-  const { options: e, labelKey: t, valueKey: o } = $(r);
+function K(r) {
+  const { options: t, labelKey: e, valueKey: s } = N(r);
   return {
-    options: e,
-    getOptionLabel: (l) => typeof l != "object" && l !== null ? l : typeof t.value == "function" ? t.value(l) : l[t.value],
-    getOptionValue: (l) => typeof l != "object" && l !== null ? l : typeof o.value == "function" ? o.value(l) : l[o.value]
+    options: t,
+    getOptionLabel: (l) => typeof l != "object" && l !== null ? l : typeof e.value == "function" ? e.value(l) : l[e.value],
+    getOptionValue: (l) => typeof l != "object" && l !== null ? l : typeof s.value == "function" ? s.value(l) : l[s.value]
   };
 }
-const T = {
+const M = {
   disabled: Boolean
-}, Z = {
+}, T = {
   modifiers: [String, Array]
-}, z = {
+}, Z = {
   options: {
     type: Array,
     default: () => []
   },
   labelKey: { type: [String, Function], default: "label" },
   valueKey: { type: [String, Function], default: "value" }
-}, I = {
-  ...z,
-  ...T,
+}, q = {
+  id: [String, Number],
+  name: { type: String, required: !0 }
+}, z = {
+  ...q,
   ...Z,
+  ...M,
+  ...T,
   modelValue: {
     type: [String, Number, Boolean, Object, Array]
   },
   labelNoResults: { type: String, default: "No results" },
   multiple: Boolean,
-  maxValues: [Number, String]
-}, q = {
+  maxValues: [Number, String],
+  unselectable: { type: Boolean, default: !0 }
+}, G = ["id"], H = {
   key: 0,
   role: "option"
-}, G = ["aria-selected"], H = ["for", "onClick"], J = ["id", "type", "value", "checked", "disabled"], Q = {
+}, J = ["aria-selected"], Q = ["for", "onClick"], U = ["id", "type", "value", "checked", "disabled", "name"], W = {
   name: "VvDropdown"
-}, Y = /* @__PURE__ */ w({
-  ...Q,
-  props: I,
+}, te = /* @__PURE__ */ $({
+  ...W,
+  props: z,
   emits: ["update:modelValue"],
-  setup(r, { emit: e }) {
-    const t = r, o = E(), { modifiers: n, disabled: u } = $(t), { getOptionLabel: l, getOptionValue: i } = M(t), { bemCssClasses: d } = K("vv-dropdown", {
+  setup(r, { emit: t }) {
+    const e = r, s = B(() => String(e.id || E())), { modifiers: n, disabled: u } = N(e), { getOptionLabel: l, getOptionValue: i } = K(e), { bemCssClasses: d } = I("vv-dropdown", {
       modifiers: n,
       disabled: u
     });
-    function a(s) {
-      return Array.isArray(t.modelValue) ? h(s, t.modelValue) || h(i(s), t.modelValue) : A(s, t.modelValue) || A(i(s), t.modelValue);
+    function f(o) {
+      return Array.isArray(e.modelValue) ? h(o, e.modelValue) || h(i(o), e.modelValue) : A(o, e.modelValue) || A(i(o), e.modelValue);
     }
-    function y(s) {
-      return typeof s == "string" || s.disabled === void 0 ? u.value : s.disabled;
+    function g(o) {
+      return typeof o == "string" || o.disabled === void 0 ? u.value : o.disabled;
     }
-    function m(s) {
-      var p;
-      if (t.disabled)
+    function m(o) {
+      var y;
+      if (e.disabled)
         return;
-      let g = s;
-      if (t.multiple)
-        if (Array.isArray(t.modelValue)) {
-          if (t.maxValues !== void 0 && t.maxValues >= 0 && ((p = t.modelValue) == null ? void 0 : p.length) >= t.maxValues && !h(s, t.modelValue))
+      let p = o;
+      if (e.multiple)
+        if (Array.isArray(e.modelValue)) {
+          if (e.maxValues !== void 0 && e.maxValues >= 0 && ((y = e.modelValue) == null ? void 0 : y.length) >= e.maxValues && !h(o, e.modelValue))
             return;
-          g = h(s, t.modelValue) ? P(s, t.modelValue) : [...t.modelValue, s];
+          p = h(o, e.modelValue) ? F(o, e.modelValue) : [...e.modelValue, o];
         } else
-          g = [s];
-      e("update:modelValue", g);
+          p = [o];
+      else
+        e.unselectable && o === e.modelValue && (p = void 0);
+      t("update:modelValue", p);
     }
-    return (s, g) => {
-      var p;
+    return (o, p) => {
+      var y;
       return b(), V("ul", {
-        class: B(f(d)),
+        id: a(s),
+        class: j(a(d)),
         role: "listbox"
       }, [
-        (p = s.options) != null && p.length ? S("", !0) : (b(), V("li", q, [
-          v("label", null, O(s.labelNoResults), 1)
+        (y = o.options) != null && y.length ? w("", !0) : (b(), V("li", H, [
+          v("label", null, O(o.labelNoResults), 1)
         ])),
-        (b(!0), V(D, null, N(s.options, (c, k) => (b(), V("li", {
+        (b(!0), V(x, null, D(o.options, (c, k) => (b(), V("li", {
           key: k,
           role: "option",
-          "aria-selected": a(c)
+          "aria-selected": f(c)
         }, [
           v("label", {
-            for: `dropdown-${k}-${f(o)}`,
-            onClick: L((U) => m(f(i)(c)), ["prevent"])
+            for: `dropdown-${k}-${a(s)}`,
+            onClick: L((X) => m(a(i)(c)), ["prevent"])
           }, [
             v("input", {
-              id: `dropdown-${k}-${f(o)}`,
-              type: s.multiple ? "checkbox" : "radio",
-              value: f(i)(c),
-              checked: a(c),
-              disabled: y(c),
+              id: `dropdown-${k}-${a(s)}`,
+              type: o.multiple ? "checkbox" : "radio",
+              value: a(i)(c),
+              checked: f(c),
+              disabled: g(c),
+              name: o.name,
               tabindex: "-1",
               "aria-hidden": "true"
-            }, null, 8, J),
-            R(" " + O(f(l)(c)), 1)
-          ], 8, H)
-        ], 8, G))), 128))
-      ], 2);
+            }, null, 8, U),
+            R(" " + O(a(l)(c)), 1)
+          ], 8, Q)
+        ], 8, J))), 128))
+      ], 10, G);
     };
   }
 });
 export {
-  Y as default
+  te as default
 };

package/dist/components/VvDropdown/VvDropdown.umd.js

@@ -1 +1 @@
-(function(n,p){typeof exports=="object"&&typeof module<"u"?module.exports=p(require("vue"),require("nanoid")):typeof define=="function"&&define.amd?define(["vue","nanoid"],p):(n=typeof globalThis<"u"?globalThis:n||self,n.VvDropdown=p(n.vue,n.nanoid))})(this,function(n,p){"use strict";function g(r,e,t){return t?C(r,t)===C(e,t):k(r,e)}function k(r,e){if(r===e)return!0;if(r&&e&&typeof r=="object"&&typeof e=="object"){const t=Array.isArray(r),s=Array.isArray(e);let o,u,l;if(t&&s){if(u=r.length,u!=e.length)return!1;for(o=u;o--!==0;)if(!k(r[o],e[o]))return!1;return!0}if(t!=s)return!1;const a=r instanceof Date,d=e instanceof Date;if(a!=d)return!1;if(a&&d)return r.getTime()==e.getTime();const f=r instanceof RegExp,h=e instanceof RegExp;if(f!=h)return!1;if(f&&h)return r.toString()==e.toString();const m=Object.keys(r);if(u=m.length,u!==Object.keys(e).length)return!1;for(o=u;o--!==0;)if(!Object.prototype.hasOwnProperty.call(e,m[o]))return!1;for(o=u;o--!==0;)if(l=m[o],!k(r[l],e[l]))return!1;return!0}return r!==r&&e!==e}function C(r,e){if(r&&Object.keys(r).length&&e){if(e.indexOf(".")===-1)return r[e];{const t=e.split(".");let s=r;for(let o=0,u=t.length;o<u;++o){if(r==null)return null;s=s[t[o]]}return s}}else return null}function _(r,e){let t=-1;if(e){for(let s=0;s<e.length;s++)if(g(e[s],r)){t=s;break}}return t}function V(r,e){if(r!=null&&e&&e.length){for(const t of e)if(g(r,t))return!0}return!1}function B(r,e){const t=_(r,e);return t>-1?e.filter((s,o)=>o!==t):e}function O(r){var e,t;if(r)return(t=(e=r.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g))==null?void 0:e.join("-"))==null?void 0:t.toLowerCase()}function x(r,e){const t={[`${r}`]:!0};return{bemCssClasses:n.computed(()=>Object.keys(e).reduce((o,u)=>{const l=n.unref(e[u])||!1;if(!l)return o;if(u==="modifiers"){const a=Array.isArray(l)?l:l.split(" ");return{...o,...a.reduce((d,f)=>({...d,[`${r}--${O(f)}`]:!0}),{})}}else return{...o,[`${r}--${O(u)}`]:l}},t)||{})}}function D(r){const{options:e,labelKey:t,valueKey:s}=n.toRefs(r);return{options:e,getOptionLabel:l=>typeof l!="object"&&l!==null?l:typeof t.value=="function"?t.value(l):l[t.value],getOptionValue:l=>typeof l!="object"&&l!==null?l:typeof s.value=="function"?s.value(l):l[s.value]}}const E={...{options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"}},...{disabled:Boolean},...{modifiers:[String,Array]},modelValue:{type:[String,Number,Boolean,Object,Array]},labelNoResults:{type:String,default:"No results"},multiple:Boolean,maxValues:[Number,String]},j={key:0,role:"option"},w=["aria-selected"],N=["for","onClick"],S=["id","type","value","checked","disabled"],$={name:"VvDropdown"};return n.defineComponent({...$,props:E,emits:["update:modelValue"],setup(r,{emit:e}){const t=r,s=p.nanoid(),{modifiers:o,disabled:u}=n.toRefs(t),{getOptionLabel:l,getOptionValue:a}=D(t),{bemCssClasses:d}=x("vv-dropdown",{modifiers:o,disabled:u});function f(i){return Array.isArray(t.modelValue)?V(i,t.modelValue)||V(a(i),t.modelValue):g(i,t.modelValue)||g(a(i),t.modelValue)}function h(i){return typeof i=="string"||i.disabled===void 0?u.value:i.disabled}function m(i){var y;if(t.disabled)return;let b=i;if(t.multiple)if(Array.isArray(t.modelValue)){if(t.maxValues!==void 0&&t.maxValues>=0&&((y=t.modelValue)==null?void 0:y.length)>=t.maxValues&&!V(i,t.modelValue))return;b=V(i,t.modelValue)?B(i,t.modelValue):[...t.modelValue,i]}else b=[i];e("update:modelValue",b)}return(i,b)=>{var y;return n.openBlock(),n.createElementBlock("ul",{class:n.normalizeClass(n.unref(d)),role:"listbox"},[(y=i.options)!=null&&y.length?n.createCommentVNode("",!0):(n.openBlock(),n.createElementBlock("li",j,[n.createElementVNode("label",null,n.toDisplayString(i.labelNoResults),1)])),(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(i.options,(c,A)=>(n.openBlock(),n.createElementBlock("li",{key:A,role:"option","aria-selected":f(c)},[n.createElementVNode("label",{for:`dropdown-${A}-${n.unref(s)}`,onClick:n.withModifiers(F=>m(n.unref(a)(c)),["prevent"])},[n.createElementVNode("input",{id:`dropdown-${A}-${n.unref(s)}`,type:i.multiple?"checkbox":"radio",value:n.unref(a)(c),checked:f(c),disabled:h(c),tabindex:"-1","aria-hidden":"true"},null,8,S),n.createTextVNode(" "+n.toDisplayString(n.unref(l)(c)),1)],8,N)],8,w))),128))],2)}}})});
+(function(r,p){typeof exports=="object"&&typeof module<"u"?module.exports=p(require("vue"),require("nanoid")):typeof define=="function"&&define.amd?define(["vue","nanoid"],p):(r=typeof globalThis<"u"?globalThis:r||self,r.VvDropdown=p(r.vue,r.nanoid))})(this,function(r,p){"use strict";function V(n,t,e){return e?C(n,e)===C(t,e):k(n,t)}function k(n,t){if(n===t)return!0;if(n&&t&&typeof n=="object"&&typeof t=="object"){const e=Array.isArray(n),i=Array.isArray(t);let o,u,l;if(e&&i){if(u=n.length,u!=t.length)return!1;for(o=u;o--!==0;)if(!k(n[o],t[o]))return!1;return!0}if(e!=i)return!1;const a=n instanceof Date,d=t instanceof Date;if(a!=d)return!1;if(a&&d)return n.getTime()==t.getTime();const f=n instanceof RegExp,h=t instanceof RegExp;if(f!=h)return!1;if(f&&h)return n.toString()==t.toString();const m=Object.keys(n);if(u=m.length,u!==Object.keys(t).length)return!1;for(o=u;o--!==0;)if(!Object.prototype.hasOwnProperty.call(t,m[o]))return!1;for(o=u;o--!==0;)if(l=m[o],!k(n[l],t[l]))return!1;return!0}return n!==n&&t!==t}function C(n,t){if(n&&Object.keys(n).length&&t){if(t.indexOf(".")===-1)return n[t];{const e=t.split(".");let i=n;for(let o=0,u=e.length;o<u;++o){if(n==null)return null;i=i[e[o]]}return i}}else return null}function _(n,t){let e=-1;if(t){for(let i=0;i<t.length;i++)if(V(t[i],n)){e=i;break}}return e}function b(n,t){if(n!=null&&t&&t.length){for(const e of t)if(V(n,e))return!0}return!1}function B(n,t){const e=_(n,t);return e>-1?t.filter((i,o)=>o!==e):t}function O(n){var t,e;if(n)return(e=(t=n.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:e.toLowerCase()}function N(n,t){const e={[`${n}`]:!0};return{bemCssClasses:r.computed(()=>Object.keys(t).reduce((o,u)=>{const l=r.unref(t[u])||!1;if(!l)return o;if(u==="modifiers"){const a=Array.isArray(l)?l:l.split(" ");return{...o,...a.reduce((d,f)=>({...d,[`${n}--${O(f)}`]:!0}),{})}}else return{...o,[`${n}--${O(u)}`]:l}},e)||{})}}function S(n){const{options:t,labelKey:e,valueKey:i}=r.toRefs(n);return{options:t,getOptionLabel:l=>typeof l!="object"&&l!==null?l:typeof e.value=="function"?e.value(l):l[e.value],getOptionValue:l=>typeof l!="object"&&l!==null?l:typeof i.value=="function"?i.value(l):l[i.value]}}const D={...{id:[String,Number],name:{type:String,required:!0}},...{options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"}},...{disabled:Boolean},...{modifiers:[String,Array]},modelValue:{type:[String,Number,Boolean,Object,Array]},labelNoResults:{type:String,default:"No results"},multiple:Boolean,maxValues:[Number,String],unselectable:{type:Boolean,default:!0}},E=["id"],j={key:0,role:"option"},w=["aria-selected"],x=["for","onClick"],P=["id","type","value","checked","disabled","name"],$={name:"VvDropdown"};return r.defineComponent({...$,props:D,emits:["update:modelValue"],setup(n,{emit:t}){const e=n,i=r.computed(()=>String(e.id||p.nanoid())),{modifiers:o,disabled:u}=r.toRefs(e),{getOptionLabel:l,getOptionValue:a}=S(e),{bemCssClasses:d}=N("vv-dropdown",{modifiers:o,disabled:u});function f(s){return Array.isArray(e.modelValue)?b(s,e.modelValue)||b(a(s),e.modelValue):V(s,e.modelValue)||V(a(s),e.modelValue)}function h(s){return typeof s=="string"||s.disabled===void 0?u.value:s.disabled}function m(s){var g;if(e.disabled)return;let y=s;if(e.multiple)if(Array.isArray(e.modelValue)){if(e.maxValues!==void 0&&e.maxValues>=0&&((g=e.modelValue)==null?void 0:g.length)>=e.maxValues&&!b(s,e.modelValue))return;y=b(s,e.modelValue)?B(s,e.modelValue):[...e.modelValue,s]}else y=[s];else e.unselectable&&s===e.modelValue&&(y=void 0);t("update:modelValue",y)}return(s,y)=>{var g;return r.openBlock(),r.createElementBlock("ul",{id:r.unref(i),class:r.normalizeClass(r.unref(d)),role:"listbox"},[(g=s.options)!=null&&g.length?r.createCommentVNode("",!0):(r.openBlock(),r.createElementBlock("li",j,[r.createElementVNode("label",null,r.toDisplayString(s.labelNoResults),1)])),(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(s.options,(c,A)=>(r.openBlock(),r.createElementBlock("li",{key:A,role:"option","aria-selected":f(c)},[r.createElementVNode("label",{for:`dropdown-${A}-${r.unref(i)}`,onClick:r.withModifiers(F=>m(r.unref(a)(c)),["prevent"])},[r.createElementVNode("input",{id:`dropdown-${A}-${r.unref(i)}`,type:s.multiple?"checkbox":"radio",value:r.unref(a)(c),checked:f(c),disabled:h(c),name:s.name,tabindex:"-1","aria-hidden":"true"},null,8,P),r.createTextVNode(" "+r.toDisplayString(r.unref(l)(c)),1)],8,x)],8,w))),128))],10,E)}}})});

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

@@ -9,6 +9,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     multiple: BooleanConstructor;
     maxValues: (StringConstructor | NumberConstructor)[];
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     modifiers: import("vue").PropType<string | string[]>;
     disabled: BooleanConstructor;
     options: {
@@ -23,6 +27,11 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | FunctionConstructor)[];
         default: string;
     };
+    id: (StringConstructor | NumberConstructor)[];
+    name: {
+        type: StringConstructor;
+        required: boolean;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: (ArrayConstructor | ObjectConstructor | StringConstructor | BooleanConstructor | NumberConstructor)[];
@@ -33,6 +42,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     multiple: BooleanConstructor;
     maxValues: (StringConstructor | NumberConstructor)[];
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     modifiers: import("vue").PropType<string | string[]>;
     disabled: BooleanConstructor;
     options: {
@@ -47,11 +60,17 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | FunctionConstructor)[];
         default: string;
     };
+    id: (StringConstructor | NumberConstructor)[];
+    name: {
+        type: StringConstructor;
+        required: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
     multiple: boolean;
+    unselectable: boolean;
     options: (string | Option)[];
     labelKey: string | Function;
     valueKey: string | Function;

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

@@ -20,6 +20,13 @@ export declare const VvDropdownProps: {
      * The max number of selected values
      */
     maxValues: (StringConstructor | NumberConstructor)[];
+    /**
+     * If true the input will be unselectable
+     */
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     modifiers: import("vue").PropType<string | string[]>;
     disabled: BooleanConstructor;
     options: {
@@ -34,4 +41,9 @@ export declare const VvDropdownProps: {
         type: (StringConstructor | FunctionConstructor)[];
         default: string;
     };
+    id: (StringConstructor | NumberConstructor)[];
+    name: {
+        type: StringConstructor;
+        required: boolean;
+    };
 };