@volverjs/ui-vue 0.0.5-beta.1 → 0.0.5-beta.3

package/dist/components/VvAction/VvAction.es.js

@@ -122,6 +122,16 @@ const LabelProps = {
       return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
     }
   },
+  /**
+   * Dropdown strategy
+   */
+  strategy: {
+    type: String,
+    default: "absolute",
+    validator: (value) => {
+      return ["fixed", "absolute"].includes(value);
+    }
+  },
   /**
    * Dropdown show / hide transition name
    */

package/dist/components/VvBadge/VvBadge.es.js

@@ -118,6 +118,16 @@ const ModifiersProps = {
       return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
     }
   },
+  /**
+   * Dropdown strategy
+   */
+  strategy: {
+    type: String,
+    default: "absolute",
+    validator: (value) => {
+      return ["fixed", "absolute"].includes(value);
+    }
+  },
   /**
    * Dropdown show / hide transition name
    */

package/dist/components/VvBreadcrumb/VvBreadcrumb.es.js

@@ -141,6 +141,16 @@ const ModifiersProps = {
       return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
     }
   },
+  /**
+   * Dropdown strategy
+   */
+  strategy: {
+    type: String,
+    default: "absolute",
+    validator: (value) => {
+      return ["fixed", "absolute"].includes(value);
+    }
+  },
   /**
    * Dropdown show / hide transition name
    */

package/dist/components/VvButton/VvButton.es.js

@@ -367,6 +367,16 @@ const IdProps = {
       return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
     }
   },
+  /**
+   * Dropdown strategy
+   */
+  strategy: {
+    type: String,
+    default: "absolute",
+    validator: (value) => {
+      return ["fixed", "absolute"].includes(value);
+    }
+  },
   /**
    * Dropdown show / hide transition name
    */

package/dist/components/VvButtonGroup/VvButtonGroup.es.js

@@ -125,6 +125,16 @@ const UnselectableProps = {
       return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
     }
   },
+  /**
+   * Dropdown strategy
+   */
+  strategy: {
+    type: String,
+    default: "absolute",
+    validator: (value) => {
+      return ["fixed", "absolute"].includes(value);
+    }
+  },
   /**
    * Dropdown show / hide transition name
    */

package/dist/components/VvCheckbox/VvCheckbox.es.js

@@ -164,6 +164,16 @@ const IdProps = {
       return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
     }
   },
+  /**
+   * Dropdown strategy
+   */
+  strategy: {
+    type: String,
+    default: "absolute",
+    validator: (value) => {
+      return ["fixed", "absolute"].includes(value);
+    }
+  },
   /**
    * Dropdown show / hide transition name
    */

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

@@ -377,6 +377,16 @@ const IdProps = {
       return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
     }
   },
+  /**
+   * Dropdown strategy
+   */
+  strategy: {
+    type: String,
+    default: "absolute",
+    validator: (value) => {
+      return ["fixed", "absolute"].includes(value);
+    }
+  },
   /**
    * Dropdown show / hide transition name
    */
@@ -803,11 +813,17 @@ function useOptions(props) {
       return false;
     return typeof disabledKey.value === "function" ? disabledKey.value(option) : option[disabledKey.value];
   };
+  const getOptionGrouped = (option) => {
+    if (typeof option !== "object" && option !== null)
+      return [];
+    return option.options;
+  };
   return {
     options,
     getOptionLabel,
     getOptionValue,
-    getOptionDisabled
+    getOptionDisabled,
+    getOptionGrouped
   };
 }
 const _hoisted_1 = ["textContent"];

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

@@ -1 +1 @@
-!function(e,l){"object"==typeof exports&&"undefined"!=typeof module?module.exports=l(require("vue"),require("@vueuse/core"),require("nanoid")):"function"==typeof define&&define.amd?define(["vue","@vueuse/core","nanoid"],l):(e="undefined"!=typeof globalThis?globalThis:e||self).VvCheckboxGroup=l(e.vue,e.core,e.nanoid)}(this,(function(e,l,n){"use strict";var t=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(t||{}),a=(e=>(e.before="before",e.after="after",e))(a||{}),o=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(o||{});const u=Symbol.for("checkGroup");function i(e,l,n){return n?d(e,n)===d(l,n):r(e,l)}function r(e,l){if(e===l)return!0;if(e&&l&&"object"==typeof e&&"object"==typeof l){const n=Array.isArray(e),t=Array.isArray(l);let a,o,u;if(n&&t){if(o=e.length,o!=l.length)return!1;for(a=o;0!=a--;)if(!r(e[a],l[a]))return!1;return!0}if(n!=t)return!1;const i=e instanceof Date,d=l instanceof Date;if(i!=d)return!1;if(i&&d)return e.getTime()==l.getTime();const v=e instanceof RegExp,s=l instanceof RegExp;if(v!=s)return!1;if(v&&s)return e.toString()==l.toString();const c=Object.keys(e);if(o=c.length,o!==Object.keys(l).length)return!1;for(a=o;0!=a--;)if(!Object.prototype.hasOwnProperty.call(l,c[a]))return!1;for(a=o;0!=a--;)if(u=c[a],!r(e[u],l[u]))return!1;return!0}return e!=e&&l!=l}function d(e,l){if(e&&Object.keys(e).length&&l){if(-1===l.indexOf("."))return e[l];{const n=l.split(".");let t=e;for(let l=0,a=n.length;l<a;++l){if(null==e)return null;t=t[n[l]]}return t}}return null}function v(l){return null==(n=e.unref(l))||""===n||Array.isArray(n)&&0===n.length||!(n instanceof Date)&&"object"==typeof n&&0===Object.keys(n).length;var n}function s(e){return Array.isArray(e)?e.filter((e=>{return"string"==typeof(l=e)||l instanceof String;var l})).join(" "):e}function c(n,t){const{invalid:a,valid:o,hint:u,loading:i}=t,{hintLabel:r,modelValue:c,valid:f,validLabel:p,invalid:m,invalidLabel:b,...y}=e.toRefs(n),g=d(y,"loading"),h=d(y,"loadingLabel"),k=e.computed((()=>!!m.value&&(!(!m.value||!a)||(!!((null==b?void 0:b.value)&&Array.isArray(b.value)&&b.value.length>0)||!(!(null==b?void 0:b.value)||v(b)))))),S=e.computed((()=>!!(r&&r.value||u))),V=e.computed((()=>!!(p&&p.value||o))),B=e.computed((()=>!!((null==g?void 0:g.value)&&i||(null==g?void 0:g.value)&&(null==h?void 0:h.value)))),A=e.computed((()=>S.value||V.value||k.value||B.value));return{hasInvalid:k,hasHint:S,hasValid:V,hasLoading:B,HintSlot:{name:"HintSlot",props:{params:{type:Object,default:()=>({})}},setup(n){const t=e.computed((()=>{const e=l.toReactive({hintLabel:r,modelValue:c,valid:f,validLabel:p,invalid:m,invalidLabel:b,loading:g,loadingLabel:h,...n.params});return(null==m?void 0:m.value)?(null==a?void 0:a(e))||s(null==b?void 0:b.value)||(null==r?void 0:r.value):(null==f?void 0:f.value)?(null==o?void 0:o(e))||s(null==p?void 0:p.value)||(null==r?void 0:r.value):(null==g?void 0:g.value)?(null==i?void 0:i(e))||s(null==h?void 0:h.value)||(null==r?void 0:r.value):(null==u?void 0:u(e))||s(null==r?void 0:r.value)||(null==r?void 0:r.value)}));return{isVisible:A,hasInvalid:k,hasValid:V,hintContent:t}},render(){if(this.isVisible)return e.h("small",{role:this.hasInvalid?"alert":this.hasValid?"status":void 0},this.hintContent)}}}}const f={valid:Boolean,validLabel:[String,Array]},p={invalid:Boolean,invalidLabel:[String,Array]},m={disabled:Boolean},b=(Boolean,Boolean,{label:[String,Number]}),y={readonly:Boolean},g={modifiers:[String,Array]},h={hintLabel:{type:String,default:""}},k={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"},disabledKey:{type:[String,Function],default:"disabled"}};a.before;const S={tabindex:{type:[String,Number],default:0}},V={id:[String,Number]};t.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const B={...{...V,name:{type:String,required:!0}},...S,...f,...p,...h,...m,...y,...g,...b,value:[String,Number,Boolean],modelValue:[Object,Number,Boolean,String]},A={...f,...p,...k,...h,...m,...y,...g,...b,modelValue:[String,Array,Boolean,Number,Symbol],name:{type:String,required:!0},vertical:Boolean};o.button;const x={...B,...g,indeterminate:Boolean,uncheckedValue:[String,Number,Boolean],switch:Boolean};function O(l,n){const{group:t,isInGroup:a,getGroupOrLocalRef:o}=function(l){const n=e.inject(l,void 0),t=e.computed((()=>!v(n)));return{group:n,isInGroup:t,getGroupOrLocalRef:function(l,t,a){if(null==n?void 0:n.value){const t=e.unref(n.value)[l];return e.computed({get:()=>null==t?void 0:t.value,set(e){t.value=e}})}const o=e.toRef(t,l);return e.computed({get:()=>o.value,set(e){a&&a(`update:${l}`,e)}})}}}(u),{id:i,switch:r,indeterminate:d}=e.toRefs(l),s=o("modelValue",l,n),c=o("valid",l),f=o("invalid",l),p=e.computed((()=>{var e;return Boolean(l.readonly||(null==(e=null==t?void 0:t.value)?void 0:e.disabled.value))})),m=e.computed((()=>{var e;return Boolean(l.disabled||(null==(e=null==t?void 0:t.value)?void 0:e.disabled.value))}));return{id:i,propsSwitch:r,indeterminate:d,group:t,isInGroup:a,modelValue:s,valid:c,invalid:f,readonly:p,disabled:m}}function j(l,n,t){return e.computed((()=>{const a={[l]:!0},o="string"==typeof(null==n?void 0:n.value)?n.value.split(" "):null==n?void 0:n.value;return o&&Array.isArray(o)&&o.forEach((e=>{e&&(a[`${l}--${e}`]=!0)})),t&&Object.keys(t.value).forEach((n=>{a[`${l}--${n}`]=e.unref(t.value[n])})),a}))}const L=["for"],C=["id","name","disabled","value","tabindex","aria-invalid"],w=e.defineComponent({name:"VvCheckbox",props:x,emits:["click","update:modelValue","change","blur"],setup(l,{emit:t}){const a=l,o=e.useSlots(),{id:u,disabled:r,readonly:d,valid:v,invalid:s,propsSwitch:f,modelValue:p,indeterminate:m,isInGroup:b}=O(a,t),y=(l=>e.computed((()=>String((null==l?void 0:l.value)||n.nanoid()))))(u),g=e.computed((()=>S.value?-1:a.tabindex)),h=e.ref(),k=e.computed((()=>void 0!==a.uncheckedValue&&!b.value)),S=e.computed((()=>r.value||d.value)),V=e.computed((()=>!0===s.value||!0!==v.value&&void 0)),B=e.computed((()=>k.value?p.value===a.value:Array.isArray(p.value)?function(e,l){if(null!=e&&l&&l.length)for(const n of l)if(i(e,n))return!0;return!1}(a.value,p.value):i(a.value,p.value))),A=e.computed((()=>!!m.value||!(B.value||!k.value||a.uncheckedValue===p.value))),x=e.computed((()=>{if(!k.value)return!["string","number","boolean"].includes(typeof a.value)||a.value})),w=e.computed({get:()=>B.value,set(e){if(k.value)p.value=e?a.value:a.uncheckedValue;else if(Array.isArray(p.value)||b.value){const l=new Set(Array.isArray(p.value)?p.value:void 0!==p.value?[p.value]:[]);e?l.add(a.value):l.delete(a.value),p.value=[...l]}else p.value=e?a.value:void 0;t("change",e)}}),{modifiers:N}=e.toRefs(a),R=j("vv-checkbox",N,e.computed((()=>({switch:f.value,valid:v.value,invalid:s.value,disabled:r.value,readonly:d.value,indeterminate:m.value}))));e.watchEffect((()=>{k.value&&Array.isArray(p.value)&&console.warn("[VvCheckbox] The model value is an array but the component is in binary mode.")})),e.watch((()=>A.value),(e=>{h.value.indeterminate=!!e})),e.onMounted((()=>{A.value&&(h.value.indeterminate=!0)}));const{HintSlot:E}=c(a,o);return(l,n)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(e.unref(R)),for:e.unref(y)},[e.withDirectives(e.createElementVNode("input",{id:e.unref(y),ref_key:"input",ref:h,"onUpdate:modelValue":n[0]||(n[0]=l=>e.isRef(w)?w.value=l:null),type:"checkbox",class:"vv-checkbox__input",name:l.name,disabled:e.unref(S),value:e.unref(x),tabindex:e.unref(g),"aria-invalid":e.unref(V)},null,8,C),[[e.vModelCheckbox,e.unref(w)]]),e.renderSlot(l.$slots,"default",{value:e.unref(p)},(()=>[e.createTextVNode(e.toDisplayString(l.label),1)])),e.createVNode(e.unref(E),{class:"vv-checkbox__hint",params:{value:e.unref(p)}},null,8,["params"])],10,L))}}),N=A;const R=["textContent"],E={class:"vv-checkbox-group__wrapper"};return e.defineComponent({name:"VvCheckboxGroup",props:N,emits:["update:modelValue","change"],setup(n,{emit:t}){const a=n,o=e.useSlots(),i=l.useVModel(a,"modelValue",t),{disabled:r,readonly:d,vertical:v,valid:s,invalid:f,modifiers:p}=e.toRefs(a);!function(l){if(Object.keys(l).some((n=>"key"!==n&&!e.isRef(l[n]))))throw Error("One or more groupState props aren't ref.");e.provide(l.key,e.computed((()=>l)))}({key:u,modelValue:i,disabled:r,readonly:d,valid:s,invalid:f});const{getOptionLabel:m,getOptionValue:b}=function(l){const{options:n,labelKey:t,valueKey:a,disabledKey:o}=e.toRefs(l);return{options:n,getOptionLabel:e=>"object"!=typeof e&&null!==e?e:"function"==typeof t.value?t.value(e):e[t.value],getOptionValue:e=>"object"!=typeof e&&null!==e?e:"function"==typeof a.value?a.value(e):e[a.value],getOptionDisabled:e=>("object"==typeof e||null===e)&&("function"==typeof o.value?o.value(e):e[o.value])}}(a),y=j("vv-checkbox-group",p,e.computed((()=>({disabled:r.value,readonly:d.value,horizontal:!v.value,valid:s.value,invalid:f.value})))),{HintSlot:g}=c(a,o);return(l,n)=>(e.openBlock(),e.createElementBlock("fieldset",{class:e.normalizeClass(e.unref(y))},[l.label?(e.openBlock(),e.createElementBlock("legend",{key:0,textContent:e.toDisplayString(l.label)},null,8,R)):e.createCommentVNode("",!0),e.createElementVNode("div",E,[l.options.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(l.options,((l,n)=>(e.openBlock(),e.createBlock(w,e.mergeProps({key:n},((e,l)=>({id:`${a.name}_opt${l}`,name:a.name,label:m(e),value:b(e)}))(l,n)),null,16)))),128)):e.renderSlot(l.$slots,"default",{key:1})]),e.createVNode(e.unref(g),{class:"vv-checkbox-group__hint"})],2))}})}));
+!function(e,l){"object"==typeof exports&&"undefined"!=typeof module?module.exports=l(require("vue"),require("@vueuse/core"),require("nanoid")):"function"==typeof define&&define.amd?define(["vue","@vueuse/core","nanoid"],l):(e="undefined"!=typeof globalThis?globalThis:e||self).VvCheckboxGroup=l(e.vue,e.core,e.nanoid)}(this,(function(e,l,n){"use strict";var t=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(t||{}),a=(e=>(e.before="before",e.after="after",e))(a||{}),o=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(o||{});const u=Symbol.for("checkGroup");function i(e,l,n){return n?d(e,n)===d(l,n):r(e,l)}function r(e,l){if(e===l)return!0;if(e&&l&&"object"==typeof e&&"object"==typeof l){const n=Array.isArray(e),t=Array.isArray(l);let a,o,u;if(n&&t){if(o=e.length,o!=l.length)return!1;for(a=o;0!=a--;)if(!r(e[a],l[a]))return!1;return!0}if(n!=t)return!1;const i=e instanceof Date,d=l instanceof Date;if(i!=d)return!1;if(i&&d)return e.getTime()==l.getTime();const v=e instanceof RegExp,s=l instanceof RegExp;if(v!=s)return!1;if(v&&s)return e.toString()==l.toString();const c=Object.keys(e);if(o=c.length,o!==Object.keys(l).length)return!1;for(a=o;0!=a--;)if(!Object.prototype.hasOwnProperty.call(l,c[a]))return!1;for(a=o;0!=a--;)if(u=c[a],!r(e[u],l[u]))return!1;return!0}return e!=e&&l!=l}function d(e,l){if(e&&Object.keys(e).length&&l){if(-1===l.indexOf("."))return e[l];{const n=l.split(".");let t=e;for(let l=0,a=n.length;l<a;++l){if(null==e)return null;t=t[n[l]]}return t}}return null}function v(l){return null==(n=e.unref(l))||""===n||Array.isArray(n)&&0===n.length||!(n instanceof Date)&&"object"==typeof n&&0===Object.keys(n).length;var n}function s(e){return Array.isArray(e)?e.filter((e=>{return"string"==typeof(l=e)||l instanceof String;var l})).join(" "):e}function c(n,t){const{invalid:a,valid:o,hint:u,loading:i}=t,{hintLabel:r,modelValue:c,valid:f,validLabel:p,invalid:m,invalidLabel:b,...y}=e.toRefs(n),g=d(y,"loading"),h=d(y,"loadingLabel"),k=e.computed((()=>!!m.value&&(!(!m.value||!a)||(!!((null==b?void 0:b.value)&&Array.isArray(b.value)&&b.value.length>0)||!(!(null==b?void 0:b.value)||v(b)))))),S=e.computed((()=>!!(r&&r.value||u))),V=e.computed((()=>!!(p&&p.value||o))),B=e.computed((()=>!!((null==g?void 0:g.value)&&i||(null==g?void 0:g.value)&&(null==h?void 0:h.value)))),A=e.computed((()=>S.value||V.value||k.value||B.value));return{hasInvalid:k,hasHint:S,hasValid:V,hasLoading:B,HintSlot:{name:"HintSlot",props:{params:{type:Object,default:()=>({})}},setup(n){const t=e.computed((()=>{const e=l.toReactive({hintLabel:r,modelValue:c,valid:f,validLabel:p,invalid:m,invalidLabel:b,loading:g,loadingLabel:h,...n.params});return(null==m?void 0:m.value)?(null==a?void 0:a(e))||s(null==b?void 0:b.value)||(null==r?void 0:r.value):(null==f?void 0:f.value)?(null==o?void 0:o(e))||s(null==p?void 0:p.value)||(null==r?void 0:r.value):(null==g?void 0:g.value)?(null==i?void 0:i(e))||s(null==h?void 0:h.value)||(null==r?void 0:r.value):(null==u?void 0:u(e))||s(null==r?void 0:r.value)||(null==r?void 0:r.value)}));return{isVisible:A,hasInvalid:k,hasValid:V,hintContent:t}},render(){if(this.isVisible)return e.h("small",{role:this.hasInvalid?"alert":this.hasValid?"status":void 0},this.hintContent)}}}}const f={valid:Boolean,validLabel:[String,Array]},p={invalid:Boolean,invalidLabel:[String,Array]},m={disabled:Boolean},b=(Boolean,Boolean,{label:[String,Number]}),y={readonly:Boolean},g={modifiers:[String,Array]},h={hintLabel:{type:String,default:""}},k={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"},disabledKey:{type:[String,Function],default:"disabled"}};a.before;const S={tabindex:{type:[String,Number],default:0}},V={id:[String,Number]};t.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const B={...{...V,name:{type:String,required:!0}},...S,...f,...p,...h,...m,...y,...g,...b,value:[String,Number,Boolean],modelValue:[Object,Number,Boolean,String]},A={...f,...p,...k,...h,...m,...y,...g,...b,modelValue:[String,Array,Boolean,Number,Symbol],name:{type:String,required:!0},vertical:Boolean};o.button;const x={...B,...g,indeterminate:Boolean,uncheckedValue:[String,Number,Boolean],switch:Boolean};function O(l,n){const{group:t,isInGroup:a,getGroupOrLocalRef:o}=function(l){const n=e.inject(l,void 0),t=e.computed((()=>!v(n)));return{group:n,isInGroup:t,getGroupOrLocalRef:function(l,t,a){if(null==n?void 0:n.value){const t=e.unref(n.value)[l];return e.computed({get:()=>null==t?void 0:t.value,set(e){t.value=e}})}const o=e.toRef(t,l);return e.computed({get:()=>o.value,set(e){a&&a(`update:${l}`,e)}})}}}(u),{id:i,switch:r,indeterminate:d}=e.toRefs(l),s=o("modelValue",l,n),c=o("valid",l),f=o("invalid",l),p=e.computed((()=>{var e;return Boolean(l.readonly||(null==(e=null==t?void 0:t.value)?void 0:e.disabled.value))})),m=e.computed((()=>{var e;return Boolean(l.disabled||(null==(e=null==t?void 0:t.value)?void 0:e.disabled.value))}));return{id:i,propsSwitch:r,indeterminate:d,group:t,isInGroup:a,modelValue:s,valid:c,invalid:f,readonly:p,disabled:m}}function j(l,n,t){return e.computed((()=>{const a={[l]:!0},o="string"==typeof(null==n?void 0:n.value)?n.value.split(" "):null==n?void 0:n.value;return o&&Array.isArray(o)&&o.forEach((e=>{e&&(a[`${l}--${e}`]=!0)})),t&&Object.keys(t.value).forEach((n=>{a[`${l}--${n}`]=e.unref(t.value[n])})),a}))}const L=["for"],C=["id","name","disabled","value","tabindex","aria-invalid"],w=e.defineComponent({name:"VvCheckbox",props:x,emits:["click","update:modelValue","change","blur"],setup(l,{emit:t}){const a=l,o=e.useSlots(),{id:u,disabled:r,readonly:d,valid:v,invalid:s,propsSwitch:f,modelValue:p,indeterminate:m,isInGroup:b}=O(a,t),y=(l=>e.computed((()=>String((null==l?void 0:l.value)||n.nanoid()))))(u),g=e.computed((()=>S.value?-1:a.tabindex)),h=e.ref(),k=e.computed((()=>void 0!==a.uncheckedValue&&!b.value)),S=e.computed((()=>r.value||d.value)),V=e.computed((()=>!0===s.value||!0!==v.value&&void 0)),B=e.computed((()=>k.value?p.value===a.value:Array.isArray(p.value)?function(e,l){if(null!=e&&l&&l.length)for(const n of l)if(i(e,n))return!0;return!1}(a.value,p.value):i(a.value,p.value))),A=e.computed((()=>!!m.value||!(B.value||!k.value||a.uncheckedValue===p.value))),x=e.computed((()=>{if(!k.value)return!["string","number","boolean"].includes(typeof a.value)||a.value})),w=e.computed({get:()=>B.value,set(e){if(k.value)p.value=e?a.value:a.uncheckedValue;else if(Array.isArray(p.value)||b.value){const l=new Set(Array.isArray(p.value)?p.value:void 0!==p.value?[p.value]:[]);e?l.add(a.value):l.delete(a.value),p.value=[...l]}else p.value=e?a.value:void 0;t("change",e)}}),{modifiers:N}=e.toRefs(a),R=j("vv-checkbox",N,e.computed((()=>({switch:f.value,valid:v.value,invalid:s.value,disabled:r.value,readonly:d.value,indeterminate:m.value}))));e.watchEffect((()=>{k.value&&Array.isArray(p.value)&&console.warn("[VvCheckbox] The model value is an array but the component is in binary mode.")})),e.watch((()=>A.value),(e=>{h.value.indeterminate=!!e})),e.onMounted((()=>{A.value&&(h.value.indeterminate=!0)}));const{HintSlot:E}=c(a,o);return(l,n)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(e.unref(R)),for:e.unref(y)},[e.withDirectives(e.createElementVNode("input",{id:e.unref(y),ref_key:"input",ref:h,"onUpdate:modelValue":n[0]||(n[0]=l=>e.isRef(w)?w.value=l:null),type:"checkbox",class:"vv-checkbox__input",name:l.name,disabled:e.unref(S),value:e.unref(x),tabindex:e.unref(g),"aria-invalid":e.unref(V)},null,8,C),[[e.vModelCheckbox,e.unref(w)]]),e.renderSlot(l.$slots,"default",{value:e.unref(p)},(()=>[e.createTextVNode(e.toDisplayString(l.label),1)])),e.createVNode(e.unref(E),{class:"vv-checkbox__hint",params:{value:e.unref(p)}},null,8,["params"])],10,L))}}),N=A;const R=["textContent"],E={class:"vv-checkbox-group__wrapper"};return e.defineComponent({name:"VvCheckboxGroup",props:N,emits:["update:modelValue","change"],setup(n,{emit:t}){const a=n,o=e.useSlots(),i=l.useVModel(a,"modelValue",t),{disabled:r,readonly:d,vertical:v,valid:s,invalid:f,modifiers:p}=e.toRefs(a);!function(l){if(Object.keys(l).some((n=>"key"!==n&&!e.isRef(l[n]))))throw Error("One or more groupState props aren't ref.");e.provide(l.key,e.computed((()=>l)))}({key:u,modelValue:i,disabled:r,readonly:d,valid:s,invalid:f});const{getOptionLabel:m,getOptionValue:b}=function(l){const{options:n,labelKey:t,valueKey:a,disabledKey:o}=e.toRefs(l);return{options:n,getOptionLabel:e=>"object"!=typeof e&&null!==e?e:"function"==typeof t.value?t.value(e):e[t.value],getOptionValue:e=>"object"!=typeof e&&null!==e?e:"function"==typeof a.value?a.value(e):e[a.value],getOptionDisabled:e=>("object"==typeof e||null===e)&&("function"==typeof o.value?o.value(e):e[o.value]),getOptionGrouped:e=>"object"!=typeof e&&null!==e?[]:e.options}}(a),y=j("vv-checkbox-group",p,e.computed((()=>({disabled:r.value,readonly:d.value,horizontal:!v.value,valid:s.value,invalid:f.value})))),{HintSlot:g}=c(a,o);return(l,n)=>(e.openBlock(),e.createElementBlock("fieldset",{class:e.normalizeClass(e.unref(y))},[l.label?(e.openBlock(),e.createElementBlock("legend",{key:0,textContent:e.toDisplayString(l.label)},null,8,R)):e.createCommentVNode("",!0),e.createElementVNode("div",E,[l.options.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(l.options,((l,n)=>(e.openBlock(),e.createBlock(w,e.mergeProps({key:n},((e,l)=>({id:`${a.name}_opt${l}`,name:a.name,label:m(e),value:b(e)}))(l,n)),null,16)))),128)):e.renderSlot(l.$slots,"default",{key:1})]),e.createVNode(e.unref(g),{class:"vv-checkbox-group__hint"})],2))}})}));

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

@@ -238,6 +238,16 @@ const DropdownProps = {
       return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
     }
   },
+  /**
+   * Dropdown strategy
+   */
+  strategy: {
+    type: String,
+    default: "absolute",
+    validator: (value) => {
+      return ["fixed", "absolute"].includes(value);
+    }
+  },
   /**
    * Dropdown show / hide transition name
    */
@@ -595,11 +605,11 @@ function useModifiers(prefix, modifiers, others) {
     return toReturn;
   });
 }
-const __default__$6 = {
+const __default__$7 = {
   name: "VvIcon"
 };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-  ...__default__$6,
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...__default__$7,
   props: VvIconProps,
   setup(__props) {
     const props = __props;
@@ -767,16 +777,16 @@ function useProvideDropdownAction({
     expanded
   });
 }
-const _hoisted_1$3 = ["id", "tabindex", "role", "aria-labelledby"];
-const __default__$5 = {
+const _hoisted_1$4 = ["id", "tabindex", "role", "aria-labelledby"];
+const __default__$6 = {
   name: "VvDropdown",
   inheritAttrs: false
 };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  ...__default__$5,
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  ...__default__$6,
   props: VvDropdownProps,
   emits: ["update:modelValue"],
-  setup(__props, { emit }) {
+  setup(__props, { expose, emit }) {
     const props = __props;
     const { id } = toRefs(props);
     const hasId = useUniqueId(id);
@@ -862,7 +872,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       floatingEl,
       {
         whileElementsMounted: autoUpdate,
-        placement: props.placement,
+        placement: computed(() => props.placement),
+        strategy: computed(() => props.strategy),
         middleware
       }
     );
@@ -920,6 +931,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const init = (el) => {
       referenceEl.value = el;
     };
+    expose({ toggle, show, hide, init });
     watch(expanded, (newValue) => {
       if (newValue && props.autofocusFirst) {
         nextTick(() => {
@@ -1080,7 +1092,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "items", normalizeProps(guardReactiveProps({
                   role: unref(itemRole)
                 })))
-              ], 16, _hoisted_1$3),
+              ], 16, _hoisted_1$4),
               renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
             ], 6), [
               [vShow, unref(expanded)]
@@ -1095,11 +1107,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 function useInjectedDropdownItem() {
   return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
 }
-const __default__$4 = {
+const __default__$5 = {
   name: "VvDropdownItem"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  ...__default__$4,
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...__default__$5,
   setup(__props) {
     const { role, expanded } = useInjectedDropdownItem();
     const element = ref(null);
@@ -1123,12 +1135,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$2 = ["title"];
-const __default__$3 = {
+const _hoisted_1$3 = ["title"];
+const __default__$4 = {
   name: "VvDropdownOption"
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  ...__default__$3,
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...__default__$4,
   props: {
     ...DisabledProps,
     ...SelectedProps,
@@ -1165,7 +1177,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$4, {
+      return openBlock(), createBlock(_sfc_main$5, {
         class: normalizeClass(unref(bemCssClasses)),
         tabindex: _ctx.disabled ? -1 : 0,
         "aria-selected": _ctx.selected,
@@ -1180,13 +1192,33 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, selected: _ctx.selected, unselectable: _ctx.unselectable })), () => [
               createTextVNode(toDisplayString(unref(hintLabel)), 1)
             ])
-          ], 8, _hoisted_1$2)
+          ], 8, _hoisted_1$3)
         ]),
         _: 3
       }, 8, ["class", "tabindex", "aria-selected", "aria-disabled"]);
     };
   }
 });
+const _hoisted_1$2 = {
+  class: "vv-dropdown-optgroup",
+  role: "presentation",
+  tabindex: "-1"
+};
+const __default__$3 = {
+  name: "VvDropdownOptgroup"
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...__default__$3,
+  props: {
+    ...LabelProps
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("li", _hoisted_1$2, toDisplayString(props.label), 1);
+    };
+  }
+});
 function equals(obj1, obj2, field) {
   if (field)
     return resolveFieldData(obj1, field) === resolveFieldData(obj2, field);
@@ -1509,11 +1541,17 @@ function useOptions(props) {
       return false;
     return typeof disabledKey.value === "function" ? disabledKey.value(option) : option[disabledKey.value];
   };
+  const getOptionGrouped = (option) => {
+    if (typeof option !== "object" && option !== null)
+      return [];
+    return option.options;
+  };
   return {
     options,
     getOptionLabel,
     getOptionValue,
-    getOptionDisabled
+    getOptionDisabled,
+    getOptionGrouped
   };
 }
 const _hoisted_1$1 = ["for"];
@@ -1526,7 +1564,9 @@ const _hoisted_4$1 = { class: "vv-select__inner" };
 const _hoisted_5$1 = ["id"];
 const _hoisted_6$1 = ["disabled", "hidden"];
 const _hoisted_7$1 = ["disabled", "value"];
-const _hoisted_8$1 = {
+const _hoisted_8$1 = ["disabled", "label"];
+const _hoisted_9 = ["disabled", "value"];
+const _hoisted_10 = {
   key: 1,
   class: "vv-select__input-after"
 };
@@ -1618,7 +1658,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       invalid: props.invalid,
       modelValue: props.modelValue
     }));
-    const { getOptionLabel, getOptionValue, getOptionDisabled } = useOptions(props);
+    const {
+      getOptionLabel,
+      getOptionValue,
+      getOptionDisabled,
+      getOptionGrouped
+    } = useOptions(props);
     const localModelValue = computed({
       get: () => {
         return props.modelValue;
@@ -1630,6 +1675,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         emit("update:modelValue", newValue);
       }
     });
+    const isGroup = (option) => {
+      if (typeof option === "string")
+        return false;
+      return option && option.options && option.options.length > 0;
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(unref(bemCssClasses))
@@ -1643,7 +1693,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
           ])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_4$1, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$6, mergeProps({
+            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$7, mergeProps({
               key: 0,
               class: "vv-select__icon"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -1660,21 +1710,35 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 hidden: !_ctx.unselectable
               }, toDisplayString(_ctx.placeholder), 9, _hoisted_6$1)) : createCommentVNode("", true),
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index) => {
-                return openBlock(), createElementBlock("option", {
-                  key: index,
-                  disabled: unref(getOptionDisabled)(option),
-                  value: unref(getOptionValue)(option)
-                }, toDisplayString(unref(getOptionLabel)(option)), 9, _hoisted_7$1);
-              }), 128))
+                return openBlock(), createElementBlock(Fragment, null, [
+                  !isGroup(option) ? (openBlock(), createElementBlock("option", {
+                    key: index,
+                    disabled: unref(getOptionDisabled)(option),
+                    value: unref(getOptionValue)(option)
+                  }, toDisplayString(unref(getOptionLabel)(option)), 9, _hoisted_7$1)) : (openBlock(), createElementBlock("optgroup", {
+                    key: `group-${index}`,
+                    disabled: unref(getOptionDisabled)(option),
+                    label: unref(getOptionLabel)(option)
+                  }, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getOptionGrouped)(option), (item, i) => {
+                      return openBlock(), createElementBlock("option", {
+                        key: `group-${index}-item-${i}`,
+                        disabled: unref(getOptionDisabled)(item),
+                        value: unref(getOptionValue)(item)
+                      }, toDisplayString(unref(getOptionLabel)(item)), 9, _hoisted_9);
+                    }), 128))
+                  ], 8, _hoisted_8$1))
+                ], 64);
+              }), 256))
             ], 16, _hoisted_5$1), [
               [vModelSelect, unref(localModelValue)]
             ]),
-            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$6, mergeProps({
+            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$7, mergeProps({
               key: 1,
               class: "vv-select__icon vv-select__icon-after"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
           ]),
-          _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_8$1, [
+          _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_10, [
             renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
           ])) : createCommentVNode("", true)
         ]),
@@ -1781,7 +1845,7 @@ const _hoisted_8 = {
 };
 const __default__ = {
   name: "VvCombobox",
-  components: { VvDropdown: _sfc_main$5, VvDropdownOption: _sfc_main$3 }
+  components: { VvDropdown: _sfc_main$6, VvDropdownOption: _sfc_main$4, VvDropdownOptgroup: _sfc_main$3 }
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -1901,7 +1965,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const hasOptions = computed(
       () => props.searchable ? filteredOptions.value : props.options
     );
-    const { getOptionLabel, getOptionValue, getOptionDisabled } = useOptions(props);
+    const {
+      getOptionLabel,
+      getOptionValue,
+      getOptionDisabled,
+      getOptionGrouped
+    } = useOptions(props);
     const filteredOptions = computed(() => {
       var _a;
       return (_a = props.options) == null ? void 0 : _a.filter((option) => {
@@ -1945,7 +2014,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       let toReturn = value;
       if (props.multiple) {
         if (Array.isArray(props.modelValue)) {
-          if (props.maxValues !== void 0 && props.maxValues >= 0 && ((_a = props.modelValue) == null ? void 0 : _a.length) >= props.maxValues) {
+          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;
             }
@@ -1994,6 +2064,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       id: hasDropdownId.value,
       reference: wrapperEl.value,
       placement: props.placement,
+      strategy: props.strategy,
       transitionName: props.transitionName,
       offset: props.offset,
       shift: props.shift,
@@ -2020,6 +2091,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         toggleExpanded();
       }
     });
+    const isGroup = (option) => {
+      if (typeof option === "string") {
+        return false;
+      }
+      return option.options && option.options.length > 0;
+    };
     return (_ctx, _cache) => {
       return !_ctx.native ? (openBlock(), createElementBlock("div", {
         key: 0,
@@ -2036,7 +2113,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ref: wrapperEl,
           class: "vv-select__wrapper"
         }, [
-          createVNode(_sfc_main$5, mergeProps({
+          createVNode(_sfc_main$6, mergeProps({
             modelValue: unref(expanded),
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(expanded) ? expanded.value = $event : null)
           }, unref(dropdownProps), {
@@ -2047,7 +2124,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
               ])) : createCommentVNode("", true),
               createElementVNode("div", _hoisted_5, [
-                unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$6, mergeProps({
+                unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$7, mergeProps({
                   key: 0,
                   class: "vv-select__icon"
                 }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -2078,7 +2155,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               "aria-label": unref(propsDefaults).deselectActionLabel,
                               onClick: withModifiers(($event) => onInput(option), ["stop"])
                             }, [
-                              createVNode(_sfc_main$6, { name: "close" })
+                              createVNode(_sfc_main$7, { name: "close" })
                             ], 8, _hoisted_7)) : createCommentVNode("", true)
                           ]),
                           _: 2
@@ -2089,7 +2166,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ], 64))
                   ])
                 ], 16, _hoisted_6),
-                unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$6, mergeProps({
+                unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$7, mergeProps({
                   key: 1,
                   class: "vv-select__icon vv-select__icon-after"
                 }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
@@ -2100,31 +2177,64 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             items: withCtx(() => [
               unref(filteredOptions).length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(filteredOptions), (option, index) => {
-                return openBlock(), createBlock(_sfc_main$3, mergeProps({
-                  disabled: unref(getOptionDisabled)(option),
-                  selected: getOptionSelected(option),
-                  unselectable: _ctx.unselectable,
-                  deselectHintLabel: unref(propsDefaults).deselectHintLabel,
-                  selectHintLabel: unref(propsDefaults).selectHintLabel,
-                  selectedHintLabel: unref(propsDefaults).selectedHintLabel
-                }, {
-                  key: index,
-                  class: "vv-dropdown-option",
-                  onClickPassive: ($event) => onInput(option)
-                }), {
-                  default: withCtx(() => [
-                    renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
-                      option,
-                      selectedOptions: unref(selectedOptions),
-                      selected: getOptionSelected(option),
-                      disabled: unref(getOptionDisabled)(option)
-                    })), () => [
-                      createTextVNode(toDisplayString(unref(getOptionLabel)(option)), 1)
-                    ])
-                  ]),
-                  _: 2
-                }, 1040, ["onClickPassive"]);
-              }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$3, {
+                return openBlock(), createElementBlock(Fragment, { key: index }, [
+                  isGroup(option) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                    createVNode(_sfc_main$3, {
+                      label: unref(getOptionLabel)(option)
+                    }, null, 8, ["label"]),
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getOptionGrouped)(
+                      option
+                    ), (item, i) => {
+                      return openBlock(), createBlock(_sfc_main$4, mergeProps({
+                        disabled: unref(getOptionDisabled)(item),
+                        selected: getOptionSelected(item),
+                        unselectable: _ctx.unselectable,
+                        deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                        selectHintLabel: unref(propsDefaults).selectHintLabel,
+                        selectedHintLabel: unref(propsDefaults).selectedHintLabel
+                      }, {
+                        key: i,
+                        class: "vv-dropdown-option",
+                        onClickPassive: ($event) => onInput(item)
+                      }), {
+                        default: withCtx(() => [
+                          renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
+                            option,
+                            selectedOptions: unref(selectedOptions),
+                            selected: getOptionSelected(item),
+                            disabled: unref(getOptionDisabled)(item)
+                          })), () => [
+                            createTextVNode(toDisplayString(unref(getOptionLabel)(item)), 1)
+                          ])
+                        ]),
+                        _: 2
+                      }, 1040, ["onClickPassive"]);
+                    }), 128))
+                  ], 64)) : (openBlock(), createBlock(_sfc_main$4, mergeProps({ key: 1 }, {
+                    disabled: unref(getOptionDisabled)(option),
+                    selected: getOptionSelected(option),
+                    unselectable: _ctx.unselectable,
+                    deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                    selectHintLabel: unref(propsDefaults).selectHintLabel,
+                    selectedHintLabel: unref(propsDefaults).selectedHintLabel
+                  }, {
+                    class: "vv-dropdown-option",
+                    onClickPassive: ($event) => onInput(option)
+                  }), {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
+                        option,
+                        selectedOptions: unref(selectedOptions),
+                        selected: getOptionSelected(option),
+                        disabled: unref(getOptionDisabled)(option)
+                      })), () => [
+                        createTextVNode(toDisplayString(unref(getOptionLabel)(option)), 1)
+                      ])
+                    ]),
+                    _: 2
+                  }, 1040, ["onClickPassive"]))
+                ], 64);
+              }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$4, {
                 key: 1,
                 modifiers: "inert"
               }, {
@@ -2134,7 +2244,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ])
                 ]),
                 _: 3
-              })) : (openBlock(), createBlock(_sfc_main$3, {
+              })) : (openBlock(), createBlock(_sfc_main$4, {
                 key: 2,
                 modifiers: "inert"
               }, {