@volverjs/ui-vue 0.0.10-beta.40 → 0.0.10-beta.41

package/dist/components/VvCheckboxGroup/VvCheckboxGroup.es.js

@@ -1006,21 +1006,30 @@ function useOptions(props) {
     if (typeof option === "string") {
       return option;
     }
+    if (typeof labelKey.value === "function") {
+      return labelKey.value(option);
+    }
     return String(
-      typeof labelKey.value === "function" ? labelKey.value(option) : get(option, labelKey.value)
+      labelKey.value ? get(option, labelKey.value) : option
     );
   };
   const getOptionValue = (option) => {
     if (typeof option === "string") {
       return option;
     }
-    return typeof valueKey.value === "function" ? valueKey.value(option) : get(option, valueKey.value);
+    if (typeof valueKey.value === "function") {
+      return valueKey.value(option);
+    }
+    return valueKey.value ? get(option, valueKey.value) : option;
   };
   const isOptionDisabled = (option) => {
     if (typeof option === "string") {
       return false;
     }
-    return typeof disabledKey.value === "function" ? disabledKey.value(option) : get(option, disabledKey.value);
+    if (typeof disabledKey.value === "function") {
+      return disabledKey.value(option);
+    }
+    return disabledKey.value ? get(option, disabledKey.value) : false;
   };
   const getOptionGrouped = (option) => {
     if (typeof option == "string") {

package/dist/components/VvCheckboxGroup/VvCheckboxGroup.umd.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("uid"),require("@vueuse/core"),require("ts-dot-prop")):"function"==typeof define&&define.amd?define(["vue","uid","@vueuse/core","ts-dot-prop"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvCheckboxGroup=t(e.vue,e.uid,e.core,e.tsDotProp)}(this,(function(e,t,l,o){"use strict";var a=(e=>(e.local="local",e.session="session",e))(a||{}),n=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(n||{}),i=(e=>(e.before="before",e.after="after",e))(i||{}),r=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(r||{}),u=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(u||{});const d=Symbol.for("volver"),s=Symbol.for("checkGroup");function v(e,t,l){return l?f(e,l)===f(t,l):c(e,t)}function c(e,t){if(e===t)return!0;if(e&&t&&"object"==typeof e&&"object"==typeof t){const l=Array.isArray(e),o=Array.isArray(t);let a,n,i;if(l&&o){if(n=e.length,n!==t.length)return!1;for(a=n;0!=a--;)if(!c(e[a],t[a]))return!1;return!0}if(l!==o)return!1;const r=e instanceof Date,u=t instanceof Date;if(r!==u)return!1;if(r&&u)return e.getTime()===t.getTime();const d=e instanceof RegExp,s=t instanceof RegExp;if(d!==s)return!1;if(d&&s)return e.toString()===t.toString();const v=Object.keys(e);if(n=v.length,n!==Object.keys(t).length)return!1;for(a=n;0!=a--;)if(!Object.prototype.hasOwnProperty.call(t,v[a]))return!1;for(a=n;0!=a--;)if(i=v[a],!c(e[i],t[i]))return!1;return!0}return Number.isNaN(e)&&Number.isNaN(t)}function f(e,t){if(e&&Object.keys(e).length&&t){if(t.includes(".")){const l=t.split(".");let o=e;for(let t=0,a=l.length;t<a;++t){if(null==e)return null;o=o[l[t]]}return o}return e[t]}return null}function p(e){return Array.isArray(e)?e.filter((e=>{return"string"==typeof(t=e)||t instanceof String;var t})).join(" "):e}function m(t,l){const o=e.computed((()=>e.isRef(t)?t.value:t)),a=e.computed((()=>p(o.value.invalidLabel))),n=e.computed((()=>p(o.value.validLabel))),i=e.computed((()=>o.value.loadingLabel)),r=e.computed((()=>o.value.hintLabel)),u=e.computed((()=>Boolean(o.value.loading&&(l.loading||i.value)))),d=e.computed((()=>!u.value&&Boolean(o.value.invalid&&(l.invalid||a.value)))),s=e.computed((()=>!u.value&&!d.value&&Boolean(o.value.valid&&(l.valid||n.value)))),v=e.computed((()=>!u.value&&!d.value&&!s.value&&Boolean(l.hint||r.value))),c=e.computed((()=>d.value||s.value||u.value||v.value)),f=e.computed((()=>({modelValue:o.value.modelValue,valid:o.value.valid,invalid:o.value.invalid,loading:o.value.loading}))),m=e.defineComponent({name:"HintSlot",props:{tag:{type:String,default:"small"}},setup:()=>({isVisible:c,invalidLabel:a,validLabel:n,loadingLabel:i,hintLabel:r,hasInvalidLabelOrSlot:d,hasValidLabelOrSlot:s,hasLoadingLabelOrSlot:u,hasHintLabelOrSlot:v}),render(){var t,l,o,a,n,i,r,u;if(this.isVisible){let d;return this.hasInvalidLabelOrSlot&&(d="alert"),this.hasValidLabelOrSlot&&(d="status"),this.hasLoadingLabelOrSlot?e.h(this.tag,{role:d},(null==(l=(t=this.$slots).loading)?void 0:l.call(t))??this.loadingLabel):this.hasInvalidLabelOrSlot?e.h(this.tag,{role:d},(null==(a=(o=this.$slots).invalid)?void 0:a.call(o))??this.$slots.invalid??this.invalidLabel):this.hasValidLabelOrSlot?e.h(this.tag,{role:d},(null==(i=(n=this.$slots).valid)?void 0:i.call(n))??this.validLabel):e.h(this.tag,{role:d},(null==(u=(r=this.$slots).hint)?void 0:u.call(r))??this.$slots.hint??this.hintLabel)}return null}});return{hasInvalidLabelOrSlot:d,hasHintLabelOrSlot:v,hasValidLabelOrSlot:s,hasLoadingLabelOrSlot:u,hintSlotScope:f,HintSlot:m}}const b={valid:{type:Boolean,default:!1},validLabel:{type:[String,Array],default:void 0}},h={invalid:{type:Boolean,default:!1},invalidLabel:{type:[String,Array],default:void 0}},y={loading:{type:Boolean,default:!1},loadingLabel:{type:String,default:"Loading..."}},g={disabled:{type:Boolean,default:!1}},S=(Boolean,Boolean,Boolean,{label:{type:[String,Number],default:void 0}}),k={readonly:{type:Boolean,default:!1}},L={modifiers:{type:[String,Array],default:void 0}},B={hintLabel:{type:String,default:""}},V={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"},disabledKey:{type:[String,Function],default:"disabled"}};i.before;const x={tabindex:{type:[String,Number],default:0}},O={id:[String,Number]};n.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const $={...{...O,name:{type:String,required:!0}},...x,...b,...h,...B,...g,...k,...L,...S,...y,value:{type:[String,Number,Boolean],default:void 0},modelValue:{type:[Object,Number,Boolean,String],default:void 0}},A={...b,...h,...V,...B,...g,...k,...L,...S,...y,modelValue:{type:[String,Array,Boolean,Number,Symbol],default:void 0},name:{type:String,required:!0},vertical:{type:Boolean,default:!1}};r.button,u.button,a.local;const C={...$,...L,indeterminate:Boolean,uncheckedValue:[String,Number,Boolean],switch:Boolean};function N(t,l){const{group:o,isInGroup:a,getGroupOrLocalRef:n}=function(t){const l=e.inject(t,void 0),o=e.computed((()=>void 0!==l));return{group:l,isInGroup:o,getGroupOrLocalRef:function(t,o,a){const n=null==l?void 0:l[t];if(n)return e.computed({get:()=>n.value,set(e){n.value=e}});const i=e.toRef(o,t);return e.computed({get:()=>i.value,set(e){a&&a(`update:${t}`,e)}})}}}(s),{id:i,switch:r,indeterminate:u}=e.toRefs(t),d=n("modelValue",t,l),v=n("valid",t),c=n("invalid",t),f=e.computed((()=>Boolean(t.readonly||(null==o?void 0:o.readonly.value)))),p=e.computed((()=>Boolean(t.disabled||(null==o?void 0:o.disabled.value))));return{id:i,propsSwitch:r,indeterminate:u,group:o,isInGroup:a,modelValue:d,valid:v,invalid:c,readonly:f,disabled:p}}function w(t,l,o){const a=e.inject(d),n=e.computed((()=>{var e;if(a&&(null==(e=a.defaults.value)?void 0:e[t]))return a.defaults.value[t]}));return e.computed((()=>{if(void 0===n.value)return o;const e=n.value,t=l,a=o;return Object.keys(t).reduce(((l,o)=>{const n=a[o];if(l[o]=n,o in e){if(Array.isArray(t[o])){const a=t[o];if(a.length){a[0]===n&&(l[o]=e[o])}}if("function"==typeof t[o]){(0,t[o])()===n&&(l[o]=e[o])}if("object"==typeof t[o]){let a=t[o].default;"function"==typeof a&&(a=a()),"object"==typeof a?JSON.stringify(a)===JSON.stringify(n)&&(l[o]=e[o]):a===n&&(l[o]=e[o])}}return l}),{})}))}function P(t,l,o){return e.computed((()=>{const a={[t]:!0},n="string"==typeof(null==l?void 0:l.value)?l.value.split(" "):null==l?void 0:l.value;return n&&Array.isArray(n)&&n.forEach((e=>{e&&(a[`${t}--${e}`]=!0)})),o&&Object.keys(o.value).forEach((l=>{a[`${t}--${l}`]=e.unref(o.value[l])})),a}))}const R=["for"],j=["id","name","disabled","value","tabindex","aria-invalid","aria-describedby","aria-errormessage"],_=e.defineComponent({name:"VvCheckbox",props:C,emits:["click","update:modelValue","change","blur"],setup(l,{emit:o}){const a=l,n=o,i=e.useSlots(),r=w("VvCheckbox",C,a),{id:u,disabled:d,readonly:s,valid:c,invalid:f,propsSwitch:p,modelValue:b,indeterminate:h,isInGroup:y}=N(a,n),g=function(l){return e.computed((()=>String((null==l?void 0:l.value)||t.uid())))}(u),S=e.computed((()=>`${g.value}-hint`)),k=e.computed((()=>V.value?-1:a.tabindex)),L=e.ref(),B=e.computed((()=>void 0!==a.uncheckedValue&&!y.value)),V=e.computed((()=>d.value||s.value)),x=e.computed((()=>!0===f.value||!0!==c.value&&void 0)),O=e.computed((()=>B.value?b.value===a.value:Array.isArray(b.value)?function(e,t){if(null!=e&&t&&t.length)for(const l of t)if(v(e,l))return!0;return!1}(a.value,b.value):v(a.value,b.value))),$=e.computed((()=>!!h.value||!(O.value||!B.value||a.uncheckedValue===b.value))),A=e.computed((()=>{if(!B.value)return!["string","number","boolean"].includes(typeof a.value)||a.value})),_=e.computed({get:()=>O.value,set(e){if(B.value)b.value=e?a.value:a.uncheckedValue;else if(Array.isArray(b.value)||y.value){const t=b.value??[],l=new Set(Array.isArray(t)?t:[t]);e?l.add(a.value):l.delete(a.value),b.value=[...l]}else b.value=e?a.value:void 0;n("change",e)}}),{modifiers:z}=e.toRefs(a),E=P("vv-checkbox",z,e.computed((()=>({switch:p.value,valid:c.value,invalid:f.value,disabled:d.value,readonly:s.value,indeterminate:h.value}))));e.watchEffect((()=>{B.value&&Array.isArray(b.value)&&console.warn("[VvCheckbox] The model value is an array but the component is in binary mode.")})),e.watch((()=>$.value),(e=>{L.value.indeterminate=!!e})),e.onMounted((()=>{$.value&&(L.value.indeterminate=!0)}));const{HintSlot:G,hasHintLabelOrSlot:I,hasInvalidLabelOrSlot:D,hintSlotScope:H}=m(r,i);return(t,l)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(e.unref(E)),for:e.unref(g)},[e.withDirectives(e.createElementVNode("input",{id:e.unref(g),ref_key:"input",ref:L,"onUpdate:modelValue":l[0]||(l[0]=t=>e.isRef(_)?_.value=t:null),type:"checkbox",class:"vv-checkbox__input",name:t.name,disabled:e.unref(V),value:e.unref(A),tabindex:e.unref(k),"aria-invalid":e.unref(x),"aria-describedby":e.unref(I)?e.unref(S):void 0,"aria-errormessage":e.unref(D)?e.unref(S):void 0},null,8,j),[[e.vModelCheckbox,e.unref(_)]]),e.renderSlot(t.$slots,"default",{value:e.unref(b)},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)])),e.createVNode(e.unref(G),{id:e.unref(S),class:"vv-checkbox__hint"},e.createSlots({_:2},[t.$slots.hint?{name:"hint",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"hint",e.normalizeProps(e.guardReactiveProps(e.unref(H))))])),key:"0"}:void 0,t.$slots.loading?{name:"loading",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"loading",e.normalizeProps(e.guardReactiveProps(e.unref(H))))])),key:"1"}:void 0,t.$slots.valid?{name:"valid",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"valid",e.normalizeProps(e.guardReactiveProps(e.unref(H))))])),key:"2"}:void 0,t.$slots.invalid?{name:"invalid",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"invalid",e.normalizeProps(e.guardReactiveProps(e.unref(H))))])),key:"3"}:void 0]),1032,["id"])],10,R))}}),z=A;const E=["textContent"],G={class:"vv-checkbox-group__wrapper"};return e.defineComponent({name:"VvCheckboxGroup",props:z,emits:["update:modelValue","change"],setup(t,{emit:a}){const n=t,i=a,r=e.useSlots(),u=w("VvCheckboxGroup",z,n),d=l.useVModel(n,"modelValue",i),{disabled:v,readonly:c,vertical:f,valid:p,invalid:b,modifiers:h}=e.toRefs(n);var y,g;y=s,g={modelValue:d,disabled:v,readonly:c,valid:p,invalid:b},e.provide(y,g);const{getOptionLabel:S,getOptionValue:k}=function(t){const{options:l,labelKey:a,valueKey:n,disabledKey:i}=e.toRefs(t);return{options:l,getOptionLabel:e=>"string"==typeof e?e:String("function"==typeof a.value?a.value(e):o.get(e,a.value)),getOptionValue:e=>"string"==typeof e?e:"function"==typeof n.value?n.value(e):o.get(e,n.value),isOptionDisabled:e=>"string"!=typeof e&&("function"==typeof i.value?i.value(e):o.get(e,i.value)),getOptionGrouped:e=>"string"==typeof e?[]:"object"==typeof e&&e&&"options"in e?e.options:[]}}(n),L=P("vv-checkbox-group",h,e.computed((()=>({disabled:v.value,readonly:c.value,horizontal:!f.value,valid:p.value,invalid:b.value}))));const{HintSlot:B,hintSlotScope:V}=m(u,r);return(t,l)=>(e.openBlock(),e.createElementBlock("fieldset",{class:e.normalizeClass(e.unref(L))},[t.label?(e.openBlock(),e.createElementBlock("legend",{key:0,textContent:e.toDisplayString(t.label)},null,8,E)):e.createCommentVNode("v-if",!0),e.createElementVNode("div",G,[t.options.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(t.options,((t,l)=>(e.openBlock(),e.createBlock(_,e.mergeProps({key:l,ref_for:!0},function(e,t){return{id:`${n.name}_opt${t}`,name:n.name,label:S(e),value:k(e)}}(t,l)),null,16)))),128)):e.renderSlot(t.$slots,"default",{key:1})]),e.createVNode(e.unref(B),{class:"vv-checkbox-group__hint"},e.createSlots({_:2},[t.$slots.hint?{name:"hint",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"hint",e.normalizeProps(e.guardReactiveProps(e.unref(V))))])),key:"0"}:void 0,t.$slots.loading?{name:"loading",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"loading",e.normalizeProps(e.guardReactiveProps(e.unref(V))))])),key:"1"}:void 0,t.$slots.valid?{name:"valid",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"valid",e.normalizeProps(e.guardReactiveProps(e.unref(V))))])),key:"2"}:void 0,t.$slots.invalid?{name:"invalid",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"invalid",e.normalizeProps(e.guardReactiveProps(e.unref(V))))])),key:"3"}:void 0]),1024)],2))}})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("uid"),require("@vueuse/core"),require("ts-dot-prop")):"function"==typeof define&&define.amd?define(["vue","uid","@vueuse/core","ts-dot-prop"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvCheckboxGroup=t(e.vue,e.uid,e.core,e.tsDotProp)}(this,(function(e,t,l,a){"use strict";var o=(e=>(e.local="local",e.session="session",e))(o||{}),n=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(n||{}),i=(e=>(e.before="before",e.after="after",e))(i||{}),r=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(r||{}),u=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(u||{});const d=Symbol.for("volver"),s=Symbol.for("checkGroup");function v(e,t,l){return l?f(e,l)===f(t,l):c(e,t)}function c(e,t){if(e===t)return!0;if(e&&t&&"object"==typeof e&&"object"==typeof t){const l=Array.isArray(e),a=Array.isArray(t);let o,n,i;if(l&&a){if(n=e.length,n!==t.length)return!1;for(o=n;0!=o--;)if(!c(e[o],t[o]))return!1;return!0}if(l!==a)return!1;const r=e instanceof Date,u=t instanceof Date;if(r!==u)return!1;if(r&&u)return e.getTime()===t.getTime();const d=e instanceof RegExp,s=t instanceof RegExp;if(d!==s)return!1;if(d&&s)return e.toString()===t.toString();const v=Object.keys(e);if(n=v.length,n!==Object.keys(t).length)return!1;for(o=n;0!=o--;)if(!Object.prototype.hasOwnProperty.call(t,v[o]))return!1;for(o=n;0!=o--;)if(i=v[o],!c(e[i],t[i]))return!1;return!0}return Number.isNaN(e)&&Number.isNaN(t)}function f(e,t){if(e&&Object.keys(e).length&&t){if(t.includes(".")){const l=t.split(".");let a=e;for(let t=0,o=l.length;t<o;++t){if(null==e)return null;a=a[l[t]]}return a}return e[t]}return null}function p(e){return Array.isArray(e)?e.filter((e=>{return"string"==typeof(t=e)||t instanceof String;var t})).join(" "):e}function m(t,l){const a=e.computed((()=>e.isRef(t)?t.value:t)),o=e.computed((()=>p(a.value.invalidLabel))),n=e.computed((()=>p(a.value.validLabel))),i=e.computed((()=>a.value.loadingLabel)),r=e.computed((()=>a.value.hintLabel)),u=e.computed((()=>Boolean(a.value.loading&&(l.loading||i.value)))),d=e.computed((()=>!u.value&&Boolean(a.value.invalid&&(l.invalid||o.value)))),s=e.computed((()=>!u.value&&!d.value&&Boolean(a.value.valid&&(l.valid||n.value)))),v=e.computed((()=>!u.value&&!d.value&&!s.value&&Boolean(l.hint||r.value))),c=e.computed((()=>d.value||s.value||u.value||v.value)),f=e.computed((()=>({modelValue:a.value.modelValue,valid:a.value.valid,invalid:a.value.invalid,loading:a.value.loading}))),m=e.defineComponent({name:"HintSlot",props:{tag:{type:String,default:"small"}},setup:()=>({isVisible:c,invalidLabel:o,validLabel:n,loadingLabel:i,hintLabel:r,hasInvalidLabelOrSlot:d,hasValidLabelOrSlot:s,hasLoadingLabelOrSlot:u,hasHintLabelOrSlot:v}),render(){var t,l,a,o,n,i,r,u;if(this.isVisible){let d;return this.hasInvalidLabelOrSlot&&(d="alert"),this.hasValidLabelOrSlot&&(d="status"),this.hasLoadingLabelOrSlot?e.h(this.tag,{role:d},(null==(l=(t=this.$slots).loading)?void 0:l.call(t))??this.loadingLabel):this.hasInvalidLabelOrSlot?e.h(this.tag,{role:d},(null==(o=(a=this.$slots).invalid)?void 0:o.call(a))??this.$slots.invalid??this.invalidLabel):this.hasValidLabelOrSlot?e.h(this.tag,{role:d},(null==(i=(n=this.$slots).valid)?void 0:i.call(n))??this.validLabel):e.h(this.tag,{role:d},(null==(u=(r=this.$slots).hint)?void 0:u.call(r))??this.$slots.hint??this.hintLabel)}return null}});return{hasInvalidLabelOrSlot:d,hasHintLabelOrSlot:v,hasValidLabelOrSlot:s,hasLoadingLabelOrSlot:u,hintSlotScope:f,HintSlot:m}}const b={valid:{type:Boolean,default:!1},validLabel:{type:[String,Array],default:void 0}},h={invalid:{type:Boolean,default:!1},invalidLabel:{type:[String,Array],default:void 0}},y={loading:{type:Boolean,default:!1},loadingLabel:{type:String,default:"Loading..."}},g={disabled:{type:Boolean,default:!1}},S=(Boolean,Boolean,Boolean,{label:{type:[String,Number],default:void 0}}),k={readonly:{type:Boolean,default:!1}},L={modifiers:{type:[String,Array],default:void 0}},B={hintLabel:{type:String,default:""}},V={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"},disabledKey:{type:[String,Function],default:"disabled"}};i.before;const x={tabindex:{type:[String,Number],default:0}},O={id:[String,Number]};n.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const $={...{...O,name:{type:String,required:!0}},...x,...b,...h,...B,...g,...k,...L,...S,...y,value:{type:[String,Number,Boolean],default:void 0},modelValue:{type:[Object,Number,Boolean,String],default:void 0}},A={...b,...h,...V,...B,...g,...k,...L,...S,...y,modelValue:{type:[String,Array,Boolean,Number,Symbol],default:void 0},name:{type:String,required:!0},vertical:{type:Boolean,default:!1}};r.button,u.button,o.local;const C={...$,...L,indeterminate:Boolean,uncheckedValue:[String,Number,Boolean],switch:Boolean};function N(t,l){const{group:a,isInGroup:o,getGroupOrLocalRef:n}=function(t){const l=e.inject(t,void 0),a=e.computed((()=>void 0!==l));return{group:l,isInGroup:a,getGroupOrLocalRef:function(t,a,o){const n=null==l?void 0:l[t];if(n)return e.computed({get:()=>n.value,set(e){n.value=e}});const i=e.toRef(a,t);return e.computed({get:()=>i.value,set(e){o&&o(`update:${t}`,e)}})}}}(s),{id:i,switch:r,indeterminate:u}=e.toRefs(t),d=n("modelValue",t,l),v=n("valid",t),c=n("invalid",t),f=e.computed((()=>Boolean(t.readonly||(null==a?void 0:a.readonly.value)))),p=e.computed((()=>Boolean(t.disabled||(null==a?void 0:a.disabled.value))));return{id:i,propsSwitch:r,indeterminate:u,group:a,isInGroup:o,modelValue:d,valid:v,invalid:c,readonly:f,disabled:p}}function w(t,l,a){const o=e.inject(d),n=e.computed((()=>{var e;if(o&&(null==(e=o.defaults.value)?void 0:e[t]))return o.defaults.value[t]}));return e.computed((()=>{if(void 0===n.value)return a;const e=n.value,t=l,o=a;return Object.keys(t).reduce(((l,a)=>{const n=o[a];if(l[a]=n,a in e){if(Array.isArray(t[a])){const o=t[a];if(o.length){o[0]===n&&(l[a]=e[a])}}if("function"==typeof t[a]){(0,t[a])()===n&&(l[a]=e[a])}if("object"==typeof t[a]){let o=t[a].default;"function"==typeof o&&(o=o()),"object"==typeof o?JSON.stringify(o)===JSON.stringify(n)&&(l[a]=e[a]):o===n&&(l[a]=e[a])}}return l}),{})}))}function P(t,l,a){return e.computed((()=>{const o={[t]:!0},n="string"==typeof(null==l?void 0:l.value)?l.value.split(" "):null==l?void 0:l.value;return n&&Array.isArray(n)&&n.forEach((e=>{e&&(o[`${t}--${e}`]=!0)})),a&&Object.keys(a.value).forEach((l=>{o[`${t}--${l}`]=e.unref(a.value[l])})),o}))}const R=["for"],j=["id","name","disabled","value","tabindex","aria-invalid","aria-describedby","aria-errormessage"],_=e.defineComponent({name:"VvCheckbox",props:C,emits:["click","update:modelValue","change","blur"],setup(l,{emit:a}){const o=l,n=a,i=e.useSlots(),r=w("VvCheckbox",C,o),{id:u,disabled:d,readonly:s,valid:c,invalid:f,propsSwitch:p,modelValue:b,indeterminate:h,isInGroup:y}=N(o,n),g=function(l){return e.computed((()=>String((null==l?void 0:l.value)||t.uid())))}(u),S=e.computed((()=>`${g.value}-hint`)),k=e.computed((()=>V.value?-1:o.tabindex)),L=e.ref(),B=e.computed((()=>void 0!==o.uncheckedValue&&!y.value)),V=e.computed((()=>d.value||s.value)),x=e.computed((()=>!0===f.value||!0!==c.value&&void 0)),O=e.computed((()=>B.value?b.value===o.value:Array.isArray(b.value)?function(e,t){if(null!=e&&t&&t.length)for(const l of t)if(v(e,l))return!0;return!1}(o.value,b.value):v(o.value,b.value))),$=e.computed((()=>!!h.value||!(O.value||!B.value||o.uncheckedValue===b.value))),A=e.computed((()=>{if(!B.value)return!["string","number","boolean"].includes(typeof o.value)||o.value})),_=e.computed({get:()=>O.value,set(e){if(B.value)b.value=e?o.value:o.uncheckedValue;else if(Array.isArray(b.value)||y.value){const t=b.value??[],l=new Set(Array.isArray(t)?t:[t]);e?l.add(o.value):l.delete(o.value),b.value=[...l]}else b.value=e?o.value:void 0;n("change",e)}}),{modifiers:z}=e.toRefs(o),E=P("vv-checkbox",z,e.computed((()=>({switch:p.value,valid:c.value,invalid:f.value,disabled:d.value,readonly:s.value,indeterminate:h.value}))));e.watchEffect((()=>{B.value&&Array.isArray(b.value)&&console.warn("[VvCheckbox] The model value is an array but the component is in binary mode.")})),e.watch((()=>$.value),(e=>{L.value.indeterminate=!!e})),e.onMounted((()=>{$.value&&(L.value.indeterminate=!0)}));const{HintSlot:G,hasHintLabelOrSlot:I,hasInvalidLabelOrSlot:D,hintSlotScope:H}=m(r,i);return(t,l)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(e.unref(E)),for:e.unref(g)},[e.withDirectives(e.createElementVNode("input",{id:e.unref(g),ref_key:"input",ref:L,"onUpdate:modelValue":l[0]||(l[0]=t=>e.isRef(_)?_.value=t:null),type:"checkbox",class:"vv-checkbox__input",name:t.name,disabled:e.unref(V),value:e.unref(A),tabindex:e.unref(k),"aria-invalid":e.unref(x),"aria-describedby":e.unref(I)?e.unref(S):void 0,"aria-errormessage":e.unref(D)?e.unref(S):void 0},null,8,j),[[e.vModelCheckbox,e.unref(_)]]),e.renderSlot(t.$slots,"default",{value:e.unref(b)},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)])),e.createVNode(e.unref(G),{id:e.unref(S),class:"vv-checkbox__hint"},e.createSlots({_:2},[t.$slots.hint?{name:"hint",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"hint",e.normalizeProps(e.guardReactiveProps(e.unref(H))))])),key:"0"}:void 0,t.$slots.loading?{name:"loading",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"loading",e.normalizeProps(e.guardReactiveProps(e.unref(H))))])),key:"1"}:void 0,t.$slots.valid?{name:"valid",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"valid",e.normalizeProps(e.guardReactiveProps(e.unref(H))))])),key:"2"}:void 0,t.$slots.invalid?{name:"invalid",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"invalid",e.normalizeProps(e.guardReactiveProps(e.unref(H))))])),key:"3"}:void 0]),1032,["id"])],10,R))}}),z=A;const E=["textContent"],G={class:"vv-checkbox-group__wrapper"};return e.defineComponent({name:"VvCheckboxGroup",props:z,emits:["update:modelValue","change"],setup(t,{emit:o}){const n=t,i=o,r=e.useSlots(),u=w("VvCheckboxGroup",z,n),d=l.useVModel(n,"modelValue",i),{disabled:v,readonly:c,vertical:f,valid:p,invalid:b,modifiers:h}=e.toRefs(n);var y,g;y=s,g={modelValue:d,disabled:v,readonly:c,valid:p,invalid:b},e.provide(y,g);const{getOptionLabel:S,getOptionValue:k}=function(t){const{options:l,labelKey:o,valueKey:n,disabledKey:i}=e.toRefs(t);return{options:l,getOptionLabel:e=>"string"==typeof e?e:"function"==typeof o.value?o.value(e):String(o.value?a.get(e,o.value):e),getOptionValue:e=>"string"==typeof e?e:"function"==typeof n.value?n.value(e):n.value?a.get(e,n.value):e,isOptionDisabled:e=>"string"!=typeof e&&("function"==typeof i.value?i.value(e):!!i.value&&a.get(e,i.value)),getOptionGrouped:e=>"string"==typeof e?[]:"object"==typeof e&&e&&"options"in e?e.options:[]}}(n),L=P("vv-checkbox-group",h,e.computed((()=>({disabled:v.value,readonly:c.value,horizontal:!f.value,valid:p.value,invalid:b.value}))));const{HintSlot:B,hintSlotScope:V}=m(u,r);return(t,l)=>(e.openBlock(),e.createElementBlock("fieldset",{class:e.normalizeClass(e.unref(L))},[t.label?(e.openBlock(),e.createElementBlock("legend",{key:0,textContent:e.toDisplayString(t.label)},null,8,E)):e.createCommentVNode("v-if",!0),e.createElementVNode("div",G,[t.options.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(t.options,((t,l)=>(e.openBlock(),e.createBlock(_,e.mergeProps({key:l,ref_for:!0},function(e,t){return{id:`${n.name}_opt${t}`,name:n.name,label:S(e),value:k(e)}}(t,l)),null,16)))),128)):e.renderSlot(t.$slots,"default",{key:1})]),e.createVNode(e.unref(B),{class:"vv-checkbox-group__hint"},e.createSlots({_:2},[t.$slots.hint?{name:"hint",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"hint",e.normalizeProps(e.guardReactiveProps(e.unref(V))))])),key:"0"}:void 0,t.$slots.loading?{name:"loading",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"loading",e.normalizeProps(e.guardReactiveProps(e.unref(V))))])),key:"1"}:void 0,t.$slots.valid?{name:"valid",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"valid",e.normalizeProps(e.guardReactiveProps(e.unref(V))))])),key:"2"}:void 0,t.$slots.invalid?{name:"invalid",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"invalid",e.normalizeProps(e.guardReactiveProps(e.unref(V))))])),key:"3"}:void 0]),1024)],2))}})}));

package/dist/components/VvCombobox/VvCombobox.es.js

@@ -1328,18 +1328,6 @@ function resolveFieldData(data, field) {
     return null;
   }
 }
-function findIndexInList(value, list) {
-  let index = -1;
-  if (list) {
-    for (let i = 0; i < list.length; i++) {
-      if (equals(list[i], value)) {
-        index = i;
-        break;
-      }
-    }
-  }
-  return index;
-}
 function contains(value, list) {
   if (value != null && list && list.length) {
     for (const val of list) {
@@ -1350,17 +1338,6 @@ function contains(value, list) {
   }
   return false;
 }
-function isEmpty(value) {
-  return ((value2) => value2 === null || value2 === void 0 || value2 === "" || Array.isArray(value2) && value2.length === 0 || !(value2 instanceof Date) && typeof value2 === "object" && Object.keys(value2).length === 0)(unref(value));
-}
-function removeFromList(value, list) {
-  const indexElToRemove = findIndexInList(value, list);
-  if (indexElToRemove > -1) {
-    return list.filter((el, elIndex) => elIndex !== indexElToRemove);
-  } else {
-    return list;
-  }
-}
 function isString(value) {
   return typeof value === "string" || value instanceof String;
 }
@@ -1525,6 +1502,13 @@ const VvSelectProps = {
     type: [String, Number, Boolean, Object, Array],
     default: void 0
   },
+  /**
+   * Select first option automatically
+   */
+  autoselectFirst: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Select placeholder
    */
@@ -1643,21 +1627,30 @@ function useOptions(props) {
     if (typeof option === "string") {
       return option;
     }
+    if (typeof labelKey.value === "function") {
+      return labelKey.value(option);
+    }
     return String(
-      typeof labelKey.value === "function" ? labelKey.value(option) : get(option, labelKey.value)
+      labelKey.value ? get(option, labelKey.value) : option
     );
   };
   const getOptionValue = (option) => {
     if (typeof option === "string") {
       return option;
     }
-    return typeof valueKey.value === "function" ? valueKey.value(option) : get(option, valueKey.value);
+    if (typeof valueKey.value === "function") {
+      return valueKey.value(option);
+    }
+    return valueKey.value ? get(option, valueKey.value) : option;
   };
   const isOptionDisabled = (option) => {
     if (typeof option === "string") {
       return false;
     }
-    return typeof disabledKey.value === "function" ? disabledKey.value(option) : get(option, disabledKey.value);
+    if (typeof disabledKey.value === "function") {
+      return disabledKey.value(option);
+    }
+    return disabledKey.value ? get(option, disabledKey.value) : false;
   };
   const getOptionGrouped = (option) => {
     if (typeof option == "string") {
@@ -1709,13 +1702,21 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       VvSelectProps2,
       props
     );
-    const select = ref();
+    const selectEl = ref();
     const {
       HintSlot,
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
     } = HintSlotFactory(propsDefaults, slots);
+    const { focused } = useComponentFocus(selectEl, emit);
+    function isGroup(option) {
+      var _a;
+      if (typeof option === "string") {
+        return false;
+      }
+      return (_a = option.options) == null ? void 0 : _a.length;
+    }
     const {
       id,
       modifiers,
@@ -1731,19 +1732,38 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     } = toRefs(props);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
-    const { focused } = useComponentFocus(select, emit);
-    const isVisible = useElementVisibility(select);
+    const isDisabledOrReadonly = computed(() => props.disabled || props.readonly);
+    const hasTabindex = computed(() => {
+      return isDisabledOrReadonly.value ? -1 : props.tabindex;
+    });
+    const localModelValue = computed({
+      get: () => {
+        return props.modelValue;
+      },
+      set: (newValue) => {
+        if (Array.isArray(newValue)) {
+          newValue = newValue.filter((item) => item !== void 0);
+          if (newValue.length === 0 && !props.unselectable) {
+            selectEl.value.value = props.modelValue;
+            return;
+          }
+        }
+        emit("update:modelValue", newValue);
+      }
+    });
+    const isDirty = computed(() => {
+      if (Array.isArray(localModelValue.value)) {
+        return localModelValue.value.length > 0;
+      }
+      return localModelValue.value !== void 0 && localModelValue.value !== null;
+    });
+    const isVisible = useElementVisibility(selectEl);
     watch(isVisible, (newValue) => {
       if (newValue && props.autofocus) {
         focused.value = true;
       }
     });
     const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
-    const isDirty = computed(() => !isEmpty(props.modelValue));
-    const isDisabled = computed(() => props.disabled || props.readonly);
-    const hasTabindex = computed(() => {
-      return isDisabled.value ? -1 : props.tabindex;
-    });
     const isInvalid = computed(() => {
       if (props.invalid === true) {
         return true;
@@ -1770,11 +1790,27 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         "multiple": multiple.value
       }))
     );
+    const {
+      getOptionLabel,
+      getOptionValue,
+      isOptionDisabled,
+      getOptionGrouped
+    } = useOptions(props);
+    watch(
+      () => props.options,
+      (newValue) => {
+        if ((newValue == null ? void 0 : newValue.length) && props.autoselectFirst && !isDirty.value) {
+          const firstOptionValue = getOptionValue(newValue[0]);
+          localModelValue.value = props.multiple ? [firstOptionValue] : firstOptionValue;
+        }
+      },
+      { immediate: true }
+    );
     const hasAttrs = computed(() => {
       return {
         "name": props.name,
         "tabindex": hasTabindex.value,
-        "disabled": isDisabled.value,
+        "disabled": isDisabledOrReadonly.value,
         "required": props.required,
         "size": props.size,
         "autocomplete": props.autocomplete,
@@ -1789,30 +1825,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       invalid: props.invalid,
       modelValue: props.modelValue
     }));
-    const {
-      getOptionLabel,
-      getOptionValue,
-      isOptionDisabled,
-      getOptionGrouped
-    } = useOptions(props);
-    const localModelValue = computed({
-      get: () => {
-        return props.modelValue;
-      },
-      set: (newValue) => {
-        if (Array.isArray(newValue)) {
-          newValue = newValue.filter((item) => item !== void 0);
-        }
-        emit("update:modelValue", newValue);
-      }
-    });
-    function isGroup(option) {
-      var _a;
-      if (typeof option === "string") {
-        return false;
-      }
-      return (_a = option.options) == null ? void 0 : _a.length;
-    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         "div",
@@ -1838,10 +1850,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               )) : createCommentVNode("v-if", true),
               withDirectives(createElementVNode("select", mergeProps({
                 id: unref(hasId),
-                ref_key: "select",
-                ref: select,
+                ref_key: "selectEl",
+                ref: selectEl
+              }, unref(hasAttrs), {
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
-              }, unref(hasAttrs)), [
+              }), [
                 _ctx.placeholder ? (openBlock(), createElementBlock("option", {
                   key: 0,
                   value: void 0,
@@ -2421,7 +2434,6 @@ const VvComboboxProps = {
   ...OptionsProps,
   ...IconProps,
   ...FloatingLabelProps,
-  ...UnselectableProps,
   ...DropdownProps,
   ...LabelProps,
   /**
@@ -2499,10 +2511,22 @@ const VvComboboxProps = {
    * Manage modelValue as string[] or object[]
    */
   multiple: Boolean,
+  /**
+   * The min number of selected values
+   */
+  minValues: {
+    type: [Number, String],
+    default: 0
+  },
   /**
    * The max number of selected values
    */
   maxValues: [Number, String],
+  /**
+   * If true the input will be unselectable
+   * @deprecated use minValues instead
+   */
+  unselectable: { type: Boolean, default: true },
   /**
    * The select label separator visible to the user
    */
@@ -2543,6 +2567,13 @@ const VvComboboxProps = {
     type: Boolean,
     default: false
   },
+  /**
+   * Select first option automatically
+   */
+  autoselectFirst: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Keep open dropdown on single select
    */
@@ -2605,22 +2636,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       VvComboboxProps2,
       props
     );
-    function isGroup(option) {
-      var _a;
-      if (typeof option === "string") {
-        return false;
-      }
-      return (_a = option.options) == null ? void 0 : _a.length;
-    }
+    const inputEl = ref(null);
+    const inputSearchEl = ref(null);
+    const wrapperEl = ref(null);
+    const dropdownEl = ref(null);
     const {
       HintSlot,
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
     } = HintSlotFactory(propsDefaults, slots);
-    const inputEl = ref(null);
-    const inputSearchEl = ref(null);
-    const wrapperEl = ref(null);
     const { focused } = useComponentFocus(inputEl, emit);
     const { focused: focusedWithin } = useFocusWithin(wrapperEl);
     watch(focused, (newValue) => {
@@ -2651,17 +2676,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const expanded = ref(false);
     function toggleExpanded() {
-      if (props.disabled || props.readonly)
+      if (isDisabledOrReadonly.value)
         return;
       expanded.value = !expanded.value;
     }
     function expand() {
-      if (props.disabled || props.readonly || expanded.value)
+      if (isDisabledOrReadonly.value || expanded.value)
         return;
       expanded.value = true;
     }
     function collapse() {
-      if (props.disabled || props.readonly || !expanded.value)
+      if (isDisabledOrReadonly.value || !expanded.value)
         return;
       expanded.value = false;
     }
@@ -2679,6 +2704,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         searchText.value = "";
       }
     }
+    function isGroup(option) {
+      var _a;
+      if (typeof option === "string") {
+        return false;
+      }
+      return (_a = option.options) == null ? void 0 : _a.length;
+    }
     const {
       id,
       icon,
@@ -2696,14 +2728,53 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const hasDropdownId = computed(() => `${hasId.value}-dropdown`);
     const hasSearchId = computed(() => `${hasId.value}-search`);
     const hasLabelId = computed(() => `${hasId.value}-label`);
+    const isDisabledOrReadonly = computed(() => props.disabled || props.readonly);
+    const hasTabindex = computed(() => {
+      return isDisabledOrReadonly.value ? -1 : props.tabindex;
+    });
+    const localModelValue = computed({
+      get: () => {
+        if (Array.isArray(props.modelValue)) {
+          return new Set(props.modelValue);
+        }
+        return props.modelValue !== void 0 && props.modelValue !== null ? /* @__PURE__ */ new Set([props.modelValue]) : /* @__PURE__ */ new Set();
+      },
+      set: (value) => {
+        emit("update:modelValue", props.multiple ? [...value] : [...value].pop());
+      }
+    });
+    const sizeOfModelValue = computed(() => localModelValue.value.size);
+    const isDirty = computed(() => sizeOfModelValue.value > 0);
+    const hasMaxValues = computed(() => {
+      if (!props.multiple) {
+        return 1;
+      }
+      if (props.maxValues === void 0) {
+        return Infinity;
+      }
+      return Number(props.maxValues);
+    });
+    const isUnselectable = computed(() => {
+      if (isDisabledOrReadonly.value) {
+        return false;
+      }
+      if (!props.unselectable) {
+        return false;
+      }
+      return sizeOfModelValue.value > Number(props.minValues);
+    });
+    const isSelectable = computed(() => {
+      if (isDisabledOrReadonly.value) {
+        return false;
+      }
+      if (!props.multiple) {
+        return true;
+      }
+      return sizeOfModelValue.value < hasMaxValues.value;
+    });
     const localLoading = ref(false);
     const isLoading = computed(() => localLoading.value || loading.value);
-    const dropdownEl = ref();
     const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
-    const isDirty = computed(() => !isEmpty(props.modelValue));
-    const hasTabindex = computed(() => {
-      return disabled.value || readonly.value ? -1 : props.tabindex;
-    });
     const bemCssClasses = useModifiers(
       "vv-select",
       modifiers,
@@ -2727,6 +2798,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       getOptionGrouped,
       isOptionDisabled
     } = useOptions(props);
+    function isOptionDisabledOrNotSelectable(option) {
+      return isOptionDisabled(option) || !isSelectable.value && !isOptionSelected(option);
+    }
     const filteredOptions = computedAsync(async () => {
       var _a;
       if (propsDefaults.value.searchFunction) {
@@ -2745,10 +2819,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     });
     function isOptionSelected(option) {
-      if (Array.isArray(props.modelValue)) {
-        return contains(option, props.modelValue) || contains(getOptionValue(option), props.modelValue);
-      }
-      return equals(option, props.modelValue) || equals(getOptionValue(option), props.modelValue);
+      return localModelValue.value.has(getOptionValue(option));
     }
     const selectedOptions = computed(() => {
       const options = props.options.reduce(
@@ -2771,40 +2842,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       props.autoOpen ? expand() : toggleExpanded();
     }
     function onInput(option) {
-      var _a;
-      if (props.disabled || props.readonly) {
-        return;
-      }
-      const value = getOptionValue(option);
-      let toReturn = value;
-      if (props.multiple) {
-        if (Array.isArray(props.modelValue)) {
-          const maxValues = Number(props.maxValues);
-          if (props.maxValues !== void 0 && maxValues >= 0 && ((_a = props.modelValue) == null ? void 0 : _a.length) >= maxValues) {
-            if (!contains(value, props.modelValue)) {
-              return;
-            }
-          }
-          toReturn = contains(value, props.modelValue) ? removeFromList(value, props.modelValue) : [...props.modelValue, value];
-        } else {
-          toReturn = [value];
-        }
-      } else {
-        if (!props.keepOpen) {
-          collapse();
-        }
-        if (Array.isArray(props.modelValue)) {
-          if (props.unselectable && props.modelValue.includes(value)) {
-            toReturn = [];
-          } else {
-            toReturn = [value];
-          }
-        } else if (props.unselectable && value === props.modelValue) {
-          toReturn = void 0;
-        }
+      const isSelected = isOptionSelected(option);
+      if (isSelected && isUnselectable.value) {
+        localModelValue.value.delete(getOptionValue(option));
+      } else if (!isSelected && isSelectable.value) {
+        localModelValue.value.add(getOptionValue(option));
+      }
+      localModelValue.value = new Set(localModelValue.value);
+      if (!props.multiple && !props.keepOpen) {
+        collapse();
       }
-      emit("update:modelValue", toReturn);
     }
+    watch(
+      () => props.options,
+      (newValue) => {
+        if ((newValue == null ? void 0 : newValue.length) && props.autoselectFirst && !isDirty.value) {
+          onInput(newValue[0]);
+        }
+      },
+      { immediate: true }
+    );
     const selectProps = computed(() => ({
       id: hasId.value,
       name: props.name,
@@ -2825,7 +2882,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       icon: propsDefaults.value.icon,
       iconPosition: propsDefaults.value.iconPosition,
       floating: propsDefaults.value.floating,
-      unselectable: propsDefaults.value.unselectable,
+      unselectable: isUnselectable.value,
+      autoselectFirst: propsDefaults.value.autoselectFirst,
       multiple: propsDefaults.value.multiple,
       label: propsDefaults.value.label,
       placeholder: propsDefaults.value.placeholder,
@@ -2946,7 +3004,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     1
                                     /* TEXT */
                                   ),
-                                  _ctx.unselectable && !unref(readonly) && !unref(disabled) ? (openBlock(), createElementBlock("button", {
+                                  unref(isUnselectable) ? (openBlock(), createElementBlock("button", {
                                     key: 0,
                                     "aria-label": unref(propsDefaults).deselectActionLabel,
                                     type: "button",
@@ -3018,8 +3076,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 ), (item, i) => {
                                   return openBlock(), createBlock(_sfc_main$6, mergeProps({ ref_for: true }, {
                                     selected: isOptionSelected(item),
-                                    disabled: unref(isOptionDisabled)(item),
-                                    unselectable: _ctx.unselectable,
+                                    disabled: isOptionDisabledOrNotSelectable(item),
+                                    unselectable: unref(isUnselectable),
                                     deselectHintLabel: unref(propsDefaults).deselectHintLabel,
                                     selectHintLabel: unref(propsDefaults).selectHintLabel,
                                     selectedHintLabel: unref(propsDefaults).selectedHintLabel
@@ -3034,7 +3092,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                         option,
                                         selectedOptions: unref(selectedOptions),
                                         selected: isOptionSelected(item),
-                                        disabled: unref(isOptionDisabled)(item)
+                                        disabled: isOptionDisabledOrNotSelectable(item)
                                       }), () => [
                                         createTextVNode(
                                           toDisplayString(unref(getOptionLabel)(item)),
@@ -3058,8 +3116,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             ref_for: true
                           }, {
                             selected: isOptionSelected(option),
-                            disabled: unref(isOptionDisabled)(option),
-                            unselectable: _ctx.unselectable,
+                            disabled: isOptionDisabledOrNotSelectable(option),
+                            unselectable: unref(isUnselectable),
                             deselectHintLabel: unref(propsDefaults).deselectHintLabel,
                             selectHintLabel: unref(propsDefaults).selectHintLabel,
                             selectedHintLabel: unref(propsDefaults).selectedHintLabel
@@ -3073,7 +3131,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 option,
                                 selectedOptions: unref(selectedOptions),
                                 selected: isOptionSelected(option),
-                                disabled: unref(isOptionDisabled)(option)
+                                disabled: isOptionDisabledOrNotSelectable(option)
                               }), () => [
                                 createTextVNode(
                                   toDisplayString(unref(getOptionLabel)(option)),