@volverjs/ui-vue 0.0.6-beta.7 → 0.0.7-beta.1

package/README.md

@@ -164,11 +164,9 @@ The following features are planned for the next releases:
 - [x] (v0.0.3) Redesign of `VvCombobox` for better accessibility and more features;
 - [x] (v0.0.3) Rewrite of `VvDropdown` to get it applicable to any element;
 - [x] (v0.0.5) Input masks for `VvInputText` component;
-- [x] `VvAvatar` component;
-- [x] `VvAvatarGroup` component;
-- [x] Menus, navigation and tabs with `VvNav`;
-- [x] `VvTab` component;
-- [ ] Alerts, notifications and toasts with `VvAlert` and `VvToast` component;
+- [x] (v0.0.6) `VvAvatar` and `VvAvatarGroup` component;
+- [x] (v0.0.6) Menus, navigation and tabs with `VvNav` and `VvTab`;
+- [x] (v0.0.6) Alerts, notifications and toasts with `VvAlert` and `VvAlertGroup` component;
 - [ ] Loaders with `VvLoader` and `VvSkeleton`;
 - [ ] `VvTable` component with sort, filters, pagination and cell editing;
 - [ ] Multiple uploads, image crop and file previews with `VvInputFile`;

package/auto-imports.d.ts

@@ -186,6 +186,7 @@ declare global {
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
+  const useInjectedAlertGroup: typeof import('./src/composables/alert/useInjectAlert')['useInjectedAlertGroup']
   const useInjectedDropdownAction: typeof import('./src/composables/dropdown/useInjectDropdown')['useInjectedDropdownAction']
   const useInjectedDropdownItem: typeof import('./src/composables/dropdown/useInjectDropdown')['useInjectedDropdownItem']
   const useInjectedDropdownTrigger: typeof import('./src/composables/dropdown/useInjectDropdown')['useInjectedDropdownTrigger']
@@ -229,6 +230,7 @@ declare global {
   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
   const usePrevious: typeof import('@vueuse/core')['usePrevious']
+  const useProvideAlertGroup: typeof import('./src/composables/alert/useProvideAlert')['useProvideAlertGroup']
   const useProvideDropdownAction: typeof import('./src/composables/dropdown/useProvideDropdown')['useProvideDropdownAction']
   const useProvideDropdownItem: typeof import('./src/composables/dropdown/useProvideDropdown')['useProvideDropdownItem']
   const useProvideDropdownTrigger: typeof import('./src/composables/dropdown/useProvideDropdown')['useProvideDropdownTrigger']

package/dist/components/VvAccordion/VvAccordion.es.js

@@ -1,7 +1,226 @@
 import { unref, inject, computed, toRef, toRefs, defineComponent, useAttrs, ref, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from "vue";
 import { nanoid } from "nanoid";
 import { useToggle } from "@vueuse/core";
+var Side = /* @__PURE__ */ ((Side2) => {
+  Side2["left"] = "left";
+  Side2["right"] = "right";
+  Side2["top"] = "top";
+  Side2["bottom"] = "bottom";
+  return Side2;
+})(Side || {});
+var Placement = /* @__PURE__ */ ((Placement2) => {
+  Placement2["topStart"] = "top-start";
+  Placement2["topEnd"] = "top-end";
+  Placement2["bottomStart"] = "bottom-start";
+  Placement2["bottomEnd"] = "bottom-end";
+  Placement2["leftStart"] = "left-start";
+  Placement2["leftEnd"] = "left-end";
+  Placement2["rightStart"] = "right-start";
+  Placement2["rightEnd"] = "right-end";
+  return Placement2;
+})(Placement || {});
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["before"] = "before";
+  Position2["after"] = "after";
+  return Position2;
+})(Position || {});
+var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  ButtonType2["reset"] = "reset";
+  return ButtonType2;
+})(ButtonType || {});
+var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
+  AnchorTarget2["_blank"] = "_blank";
+  AnchorTarget2["_self"] = "_self";
+  AnchorTarget2["_parent"] = "_parent";
+  AnchorTarget2["_top"] = "_top";
+  return AnchorTarget2;
+})(AnchorTarget || {});
 const INJECTION_KEY_ACCORDION_GROUP = Symbol.for("accordionGroup");
+const LinkProps = {
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
+  to: {
+    type: [String, Object]
+  },
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: {
+    type: String,
+    validator: (value) => Object.values(AnchorTarget).includes(value)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+};
+const DisabledProps = {
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: Boolean
+};
+const ActiveProps = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+};
+const PressedProps = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+};
+const LabelProps = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+};
+const ModifiersProps = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: [String, Array]
+};
+({
+  /**
+   * VvIcon name or props
+   * @see VVIcon
+   */
+  icon: { type: [String, Object] },
+  /**
+   * VvIcon position
+   */
+  iconPosition: {
+    type: String,
+    default: Position.before,
+    validation: (value) => Object.values(Position).includes(value)
+  }
+});
+({
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: Side.bottom,
+    validator: (value) => {
+      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
+   */
+  transitionName: {
+    type: String
+  },
+  /**
+   * Offset of the dropdown from the trigger
+   * @see https://floating-ui.com/docs/offset
+   */
+  offset: {
+    type: [Number, String, Object],
+    default: 0
+  },
+  /**
+   * Move dropdown to the side if there is no space in the default position
+   * @see https://floating-ui.com/docs/shift
+   */
+  shift: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Flip dropdown position if there is no space in the default position
+   * @see https://floating-ui.com/docs/flip
+   */
+  flip: {
+    type: [Boolean, Object],
+    default: true
+  },
+  /**
+   * Size of the dropdown
+   * @see https://floating-ui.com/docs/size
+   */
+  size: {
+    type: [Boolean, Object],
+    default: () => ({ padding: 10 })
+  },
+  /**
+   * Automatically change the position of the dropdown
+   * @see https://floating-ui.com/docs/autoPlacement
+   */
+  autoPlacement: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Add arrow to the dropdown
+   * @see https://floating-ui.com/docs/arrow
+   */
+  arrow: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Keep open dropdown on click outside
+   */
+  keepOpen: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  autofocusFirst: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean
+  }
+});
+({
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
+  /**
+   * Button type
+   */
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
+});
 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));
 }
@@ -38,6 +257,7 @@ function useInjectedGroupState(groupKey) {
   };
 }
 const VvAccordionProps = {
+  ...ModifiersProps,
   /**
    * Accordion name
    */
@@ -57,10 +277,6 @@ const VvAccordionProps = {
     type: Boolean,
     default: void 0
   },
-  /**
-   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
-   */
-  modifiers: [String, Array],
   /**
    * If true, the accordion will be disabled
    */

package/dist/components/VvAccordion/VvAccordion.umd.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("nanoid"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","nanoid","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvAccordion=o(e.vue,e.nanoid,e.core)}(this,(function(e,o,r){"use strict";const n=Symbol.for("accordionGroup");function t(o){const r=e.inject(o,void 0),n=e.computed((()=>{return o=r,!(null==(n=e.unref(o))||""===n||Array.isArray(n)&&0===n.length||!(n instanceof Date)&&"object"==typeof n&&0===Object.keys(n).length);var o,n}));return{group:r,isInGroup:n,getGroupOrLocalRef:function(o,n,t){if(null==r?void 0:r.value){const n=e.unref(r.value)[o];return e.computed({get:()=>null==n?void 0:n.value,set(e){n.value=e}})}const a=e.toRef(n,o);return e.computed({get:()=>a.value,set(e){t&&t(`update:${o}`,e)}})}}}const a={name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},modifiers:[String,Array],disabled:Boolean,not:Boolean};const u=["id","open"],l=["aria-controls","aria-expanded"],i=["aria-hidden"];return e.defineComponent({name:"VvAccordion",props:a,emits:["update:modelValue"],setup(a,{emit:d}){const s=a,c=e.useAttrs(),v=e.computed((()=>s.name||(null==c?void 0:c.id)||o.nanoid())),{modifiers:f,title:p,content:m,disabled:y,collapse:g,modelValue:A,isInGroup:b,not:h}=function(o,r){const{group:a,isInGroup:u,getGroupOrLocalRef:l}=t(n),{title:i,content:d}=e.toRefs(o),s=l("modelValue",o,r),c=l("not",o),v=l("collapse",o),f=e.computed((()=>{var e;return Boolean(o.disabled||(null==(e=null==a?void 0:a.value)?void 0:e.disabled.value))})),p=e.computed((()=>{let e=o.modifiers,r=null==a?void 0:a.value.modifiers.value;const n=new Set;return e&&(Array.isArray(e)||(e=e.split(" ")),e.forEach((e=>n.add(e)))),r&&(Array.isArray(r)||(r=r.split(" ")),r.forEach((e=>n.add(e)))),Array.from(n)}));return{modelValue:s,not:c,isInGroup:u,group:a,collapse:v,modifiers:p,disabled:f,title:i,content:d}}(s,d),V=e.ref(!1),S=e.computed({get:()=>{let e=A.value;return b.value?e=g.value&&Array.isArray(A.value)?A.value.includes(v.value):A.value===v.value:void 0===A.value&&(e=V.value),h.value?!e:e},set:e=>{if(h.value&&(e=!e),b.value)return g.value&&Array.isArray(A.value)?e?void A.value.push(v.value):void(A.value=A.value.filter((e=>e!==v.value))):void(A.value=e?v.value:null);void 0!==A.value||"boolean"!=typeof e?A.value=e:V.value=e}}),E=function(o,r,n){return e.computed((()=>{const t={[o]:!0},a="string"==typeof(null==r?void 0:r.value)?r.value.split(" "):null==r?void 0:r.value;return a&&Array.isArray(a)&&a.forEach((e=>{e&&(t[`${o}--${e}`]=!0)})),n&&Object.keys(n.value).forEach((r=>{t[`${o}--${r}`]=e.unref(n.value[r])})),t}))}("vv-accordion",f,e.computed((()=>({disabled:y.value})))),G=r.useToggle(S);return(o,r)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(v),class:e.normalizeClass(e.unref(E)),open:e.unref(S)},[e.createElementVNode("summary",{"aria-controls":e.unref(v),"aria-expanded":e.unref(S),class:"vv-accordion__summary",onClick:r[0]||(r[0]=e.withModifiers((o=>e.unref(G)()),["prevent"]))},[e.renderSlot(o.$slots,"summary",e.normalizeProps(e.guardReactiveProps({open:e.unref(S)})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(p)),1)]))],8,l),e.createElementVNode("div",{"aria-hidden":!e.unref(S),class:"vv-accordion__content"},[e.renderSlot(o.$slots,"default",e.normalizeProps(e.guardReactiveProps({open:e.unref(S)})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(m)),1)]))],8,i)],10,u))}})}));
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("nanoid"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","nanoid","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvAccordion=o(e.vue,e.nanoid,e.core)}(this,(function(e,o,t){"use strict";var r=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(r||{}),n=(e=>(e.before="before",e.after="after",e))(n||{}),a=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(a||{});const l=Symbol.for("accordionGroup"),u=(Boolean,Boolean,Boolean,{modifiers:[String,Array]});function i(o){const t=e.inject(o,void 0),r=e.computed((()=>{return o=t,!(null==(r=e.unref(o))||""===r||Array.isArray(r)&&0===r.length||!(r instanceof Date)&&"object"==typeof r&&0===Object.keys(r).length);var o,r}));return{group:t,isInGroup:r,getGroupOrLocalRef:function(o,r,n){if(null==t?void 0:t.value){const r=e.unref(t.value)[o];return e.computed({get:()=>null==r?void 0:r.value,set(e){r.value=e}})}const a=e.toRef(r,o);return e.computed({get:()=>a.value,set(e){n&&n(`update:${o}`,e)}})}}}n.before,r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,a.button;const d={...u,name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},disabled:Boolean,not:Boolean};const s=["id","open"],c=["aria-controls","aria-expanded"],v=["aria-hidden"];return e.defineComponent({name:"VvAccordion",props:d,emits:["update:modelValue"],setup(r,{emit:n}){const a=r,u=e.useAttrs(),d=e.computed((()=>a.name||(null==u?void 0:u.id)||o.nanoid())),{modifiers:f,title:p,content:m,disabled:y,collapse:b,modelValue:g,isInGroup:A,not:B}=function(o,t){const{group:r,isInGroup:n,getGroupOrLocalRef:a}=i(l),{title:u,content:d}=e.toRefs(o),s=a("modelValue",o,t),c=a("not",o),v=a("collapse",o),f=e.computed((()=>{var e;return Boolean(o.disabled||(null==(e=null==r?void 0:r.value)?void 0:e.disabled.value))})),p=e.computed((()=>{let e=o.modifiers,t=null==r?void 0:r.value.modifiers.value;const n=new Set;return e&&(Array.isArray(e)||(e=e.split(" ")),e.forEach((e=>n.add(e)))),t&&(Array.isArray(t)||(t=t.split(" ")),t.forEach((e=>n.add(e)))),Array.from(n)}));return{modelValue:s,not:c,isInGroup:n,group:r,collapse:v,modifiers:p,disabled:f,title:u,content:d}}(a,n),h=e.ref(!1),V=e.computed({get:()=>{let e=g.value;return A.value?e=b.value&&Array.isArray(g.value)?g.value.includes(d.value):g.value===d.value:void 0===g.value&&(e=h.value),B.value?!e:e},set:e=>{if(B.value&&(e=!e),A.value)return b.value&&Array.isArray(g.value)?e?void g.value.push(d.value):void(g.value=g.value.filter((e=>e!==d.value))):void(g.value=e?d.value:null);void 0!==g.value||"boolean"!=typeof e?g.value=e:h.value=e}}),S=function(o,t,r){return e.computed((()=>{const n={[o]:!0},a="string"==typeof(null==t?void 0:t.value)?t.value.split(" "):null==t?void 0:t.value;return a&&Array.isArray(a)&&a.forEach((e=>{e&&(n[`${o}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((t=>{n[`${o}--${t}`]=e.unref(r.value[t])})),n}))}("vv-accordion",f,e.computed((()=>({disabled:y.value})))),E=t.useToggle(V);return(o,t)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(d),class:e.normalizeClass(e.unref(S)),open:e.unref(V)},[e.createElementVNode("summary",{"aria-controls":e.unref(d),"aria-expanded":e.unref(V),class:"vv-accordion__summary",onClick:t[0]||(t[0]=e.withModifiers((o=>e.unref(E)()),["prevent"]))},[e.renderSlot(o.$slots,"summary",e.normalizeProps(e.guardReactiveProps({open:e.unref(V)})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(p)),1)]))],8,c),e.createElementVNode("div",{"aria-hidden":!e.unref(V),class:"vv-accordion__content"},[e.renderSlot(o.$slots,"default",e.normalizeProps(e.guardReactiveProps({open:e.unref(V)})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(m)),1)]))],8,v)],10,s))}})}));

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

@@ -6,9 +6,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    modifiers: globalThis.PropType<string | string[]>;
     disabled: BooleanConstructor;
     not: BooleanConstructor;
+    modifiers: globalThis.PropType<string | string[]>;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     name: StringConstructor;
     title: StringConstructor;
@@ -17,22 +17,22 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    modifiers: globalThis.PropType<string | string[]>;
     disabled: BooleanConstructor;
     not: BooleanConstructor;
+    modifiers: globalThis.PropType<string | string[]>;
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: boolean;
     disabled: boolean;
+    modelValue: boolean;
     not: boolean;
-}>, {
-    summary: (_: {
+}, {}>, {
+    summary?(_: {
         open: boolean;
-    }) => any;
-    default: (_: {
+    }): any;
+    default?(_: {
         open: boolean;
-    }) => any;
+    }): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -20,10 +20,6 @@ export declare const VvAccordionProps: {
         type: BooleanConstructor;
         default: undefined;
     };
-    /**
-     * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
-     */
-    modifiers: globalThis.PropType<string | string[]>;
     /**
      * If true, the accordion will be disabled
      */
@@ -32,6 +28,7 @@ export declare const VvAccordionProps: {
      * If true, the accordion will be opened by default
      */
     not: BooleanConstructor;
+    modifiers: globalThis.PropType<string | string[]>;
 };
 export declare const VvAccordionEvents: string[];
 export type VvAccordionPropsTypes = ExtractPropTypes<typeof VvAccordionProps>;

package/dist/components/VvAccordionGroup/VvAccordionGroup.es.js

@@ -1,7 +1,226 @@
 import { unref, inject, computed, toRef, toRefs, defineComponent, useAttrs, ref, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, isRef, provide, watchEffect, watch, Fragment, renderList, createBlock, mergeProps, withCtx } from "vue";
 import { nanoid } from "nanoid";
 import { useToggle, useStorage } from "@vueuse/core";
+var Side = /* @__PURE__ */ ((Side2) => {
+  Side2["left"] = "left";
+  Side2["right"] = "right";
+  Side2["top"] = "top";
+  Side2["bottom"] = "bottom";
+  return Side2;
+})(Side || {});
+var Placement = /* @__PURE__ */ ((Placement2) => {
+  Placement2["topStart"] = "top-start";
+  Placement2["topEnd"] = "top-end";
+  Placement2["bottomStart"] = "bottom-start";
+  Placement2["bottomEnd"] = "bottom-end";
+  Placement2["leftStart"] = "left-start";
+  Placement2["leftEnd"] = "left-end";
+  Placement2["rightStart"] = "right-start";
+  Placement2["rightEnd"] = "right-end";
+  return Placement2;
+})(Placement || {});
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["before"] = "before";
+  Position2["after"] = "after";
+  return Position2;
+})(Position || {});
+var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  ButtonType2["reset"] = "reset";
+  return ButtonType2;
+})(ButtonType || {});
+var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
+  AnchorTarget2["_blank"] = "_blank";
+  AnchorTarget2["_self"] = "_self";
+  AnchorTarget2["_parent"] = "_parent";
+  AnchorTarget2["_top"] = "_top";
+  return AnchorTarget2;
+})(AnchorTarget || {});
 const INJECTION_KEY_ACCORDION_GROUP = Symbol.for("accordionGroup");
+const LinkProps = {
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
+  to: {
+    type: [String, Object]
+  },
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: {
+    type: String,
+    validator: (value) => Object.values(AnchorTarget).includes(value)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+};
+const DisabledProps = {
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: Boolean
+};
+const ActiveProps = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+};
+const PressedProps = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+};
+const LabelProps = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+};
+const ModifiersProps = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: [String, Array]
+};
+({
+  /**
+   * VvIcon name or props
+   * @see VVIcon
+   */
+  icon: { type: [String, Object] },
+  /**
+   * VvIcon position
+   */
+  iconPosition: {
+    type: String,
+    default: Position.before,
+    validation: (value) => Object.values(Position).includes(value)
+  }
+});
+({
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: Side.bottom,
+    validator: (value) => {
+      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
+   */
+  transitionName: {
+    type: String
+  },
+  /**
+   * Offset of the dropdown from the trigger
+   * @see https://floating-ui.com/docs/offset
+   */
+  offset: {
+    type: [Number, String, Object],
+    default: 0
+  },
+  /**
+   * Move dropdown to the side if there is no space in the default position
+   * @see https://floating-ui.com/docs/shift
+   */
+  shift: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Flip dropdown position if there is no space in the default position
+   * @see https://floating-ui.com/docs/flip
+   */
+  flip: {
+    type: [Boolean, Object],
+    default: true
+  },
+  /**
+   * Size of the dropdown
+   * @see https://floating-ui.com/docs/size
+   */
+  size: {
+    type: [Boolean, Object],
+    default: () => ({ padding: 10 })
+  },
+  /**
+   * Automatically change the position of the dropdown
+   * @see https://floating-ui.com/docs/autoPlacement
+   */
+  autoPlacement: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Add arrow to the dropdown
+   * @see https://floating-ui.com/docs/arrow
+   */
+  arrow: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Keep open dropdown on click outside
+   */
+  keepOpen: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  autofocusFirst: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean
+  }
+});
+({
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
+  /**
+   * Button type
+   */
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
+});
 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));
 }
@@ -38,6 +257,7 @@ function useInjectedGroupState(groupKey) {
   };
 }
 const VvAccordionProps = {
+  ...ModifiersProps,
   /**
    * Accordion name
    */
@@ -57,10 +277,6 @@ const VvAccordionProps = {
     type: Boolean,
     default: void 0
   },
-  /**
-   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
-   */
-  modifiers: [String, Array],
   /**
    * If true, the accordion will be disabled
    */
@@ -243,6 +459,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 const VvAccordionGroupProps = {
+  ...ModifiersProps,
   /**
    * VModel
    */
@@ -259,10 +476,6 @@ const VvAccordionGroupProps = {
    * If true, accordion items stay open when another item is opened
    */
   collapse: Boolean,
-  /**
-   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion-group--'
-   */
-  modifiers: [String, Array],
   /**
    * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
    */

package/dist/components/VvAccordionGroup/VvAccordionGroup.umd.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("nanoid"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","nanoid","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvAccordionGroup=o(e.vue,e.nanoid,e.core)}(this,(function(e,o,r){"use strict";const t=Symbol.for("accordionGroup");function a(o){const r=e.inject(o,void 0),t=e.computed((()=>{return o=r,!(null==(t=e.unref(o))||""===t||Array.isArray(t)&&0===t.length||!(t instanceof Date)&&"object"==typeof t&&0===Object.keys(t).length);var o,t}));return{group:r,isInGroup:t,getGroupOrLocalRef:function(o,t,a){if(null==r?void 0:r.value){const t=e.unref(r.value)[o];return e.computed({get:()=>null==t?void 0:t.value,set(e){t.value=e}})}const l=e.toRef(t,o);return e.computed({get:()=>l.value,set(e){a&&a(`update:${o}`,e)}})}}}const l={name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},modifiers:[String,Array],disabled:Boolean,not:Boolean};function n(o,r,t){return e.computed((()=>{const a={[o]:!0},l="string"==typeof(null==r?void 0:r.value)?r.value.split(" "):null==r?void 0:r.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(a[`${o}--${e}`]=!0)})),t&&Object.keys(t.value).forEach((r=>{a[`${o}--${r}`]=e.unref(t.value[r])})),a}))}const u=["id","open"],i=["aria-controls","aria-expanded"],d=["aria-hidden"],s=e.defineComponent({name:"VvAccordion",props:l,emits:["update:modelValue"],setup(l,{emit:s}){const c=l,v=e.useAttrs(),p=e.computed((()=>c.name||(null==v?void 0:v.id)||o.nanoid())),{modifiers:m,title:f,content:y,disabled:g,collapse:A,modelValue:V,isInGroup:b,not:h}=function(o,r){const{group:l,isInGroup:n,getGroupOrLocalRef:u}=a(t),{title:i,content:d}=e.toRefs(o),s=u("modelValue",o,r),c=u("not",o),v=u("collapse",o),p=e.computed((()=>{var e;return Boolean(o.disabled||(null==(e=null==l?void 0:l.value)?void 0:e.disabled.value))})),m=e.computed((()=>{let e=o.modifiers,r=null==l?void 0:l.value.modifiers.value;const t=new Set;return e&&(Array.isArray(e)||(e=e.split(" ")),e.forEach((e=>t.add(e)))),r&&(Array.isArray(r)||(r=r.split(" ")),r.forEach((e=>t.add(e)))),Array.from(t)}));return{modelValue:s,not:c,isInGroup:n,group:l,collapse:v,modifiers:m,disabled:p,title:i,content:d}}(c,s),S=e.ref(!1),k=e.computed({get:()=>{let e=V.value;return b.value?e=A.value&&Array.isArray(V.value)?V.value.includes(p.value):V.value===p.value:void 0===V.value&&(e=S.value),h.value?!e:e},set:e=>{if(h.value&&(e=!e),b.value)return A.value&&Array.isArray(V.value)?e?void V.value.push(p.value):void(V.value=V.value.filter((e=>e!==p.value))):void(V.value=e?p.value:null);void 0!==V.value||"boolean"!=typeof e?V.value=e:S.value=e}}),B=n("vv-accordion",m,e.computed((()=>({disabled:g.value})))),$=r.useToggle(k);return(o,r)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(p),class:e.normalizeClass(e.unref(B)),open:e.unref(k)},[e.createElementVNode("summary",{"aria-controls":e.unref(p),"aria-expanded":e.unref(k),class:"vv-accordion__summary",onClick:r[0]||(r[0]=e.withModifiers((o=>e.unref($)()),["prevent"]))},[e.renderSlot(o.$slots,"summary",e.normalizeProps(e.guardReactiveProps({open:e.unref(k)})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(f)),1)]))],8,i),e.createElementVNode("div",{"aria-hidden":!e.unref(k),class:"vv-accordion__content"},[e.renderSlot(o.$slots,"default",e.normalizeProps(e.guardReactiveProps({open:e.unref(k)})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(y)),1)]))],8,d)],10,u))}}),c={modelValue:[String,Array],items:{type:Array,default:()=>[]},collapse:Boolean,modifiers:[String,Array],itemModifiers:{type:[String,Array],default:""},disabled:Boolean,not:Boolean,storeKey:String};return e.defineComponent({name:"VvAccordionGroup",props:c,emits:["update:modelValue"],setup(o,{emit:a}){const l=o,{disabled:u,collapse:i,modifiers:d,itemModifiers:c,items:v,not:p}=e.toRefs(l);e.watchEffect((()=>{"string"==typeof l.modelValue&&i.value&&console.warn("[VvAccordionGroup]: modelValue is a string but collapse is true.")}));let m=e.ref([]);e.watch((()=>l.storeKey),(o=>{m=o?r.useStorage(o,m.value):e.ref([])}),{immediate:!0});const f=e.computed({get:()=>{var e;return void 0!==l.modelValue?i.value?l.modelValue:Array.isArray(l.modelValue)?l.modelValue[0]:l.modelValue:i.value?m.value:null==(e=m.value)?void 0:e[0]},set:e=>{if(void 0!==l.modelValue)return!Array.isArray(l.modelValue)&&!i.value||Array.isArray(e)||(e=[e]),a("update:modelValue",e);m.value=Array.isArray(e)?e:[e]}});!function(o){if(Object.keys(o).some((r=>"key"!==r&&!e.isRef(o[r]))))throw Error("One or more groupState props aren't ref.");e.provide(o.key,e.computed((()=>o)))}({key:t,modelValue:f,disabled:u,collapse:i,modifiers:c,not:p});const y=n("vv-accordion-group",d,e.computed((()=>({disabled:u.value}))));return(o,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(y))},[e.renderSlot(o.$slots,"default",{},(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(v),(r=>(e.openBlock(),e.createBlock(s,e.mergeProps({key:r.title},{name:r.name,title:r.title,content:r.content}),{header:e.withCtx((t=>[e.renderSlot(o.$slots,`header::${r.name}`,e.normalizeProps(e.guardReactiveProps(t)))])),details:e.withCtx((t=>[e.renderSlot(o.$slots,`details::${r.name}`,e.normalizeProps(e.guardReactiveProps(t)))])),_:2},1040)))),128))]))],2))}})}));
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("nanoid"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","nanoid","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvAccordionGroup=o(e.vue,e.nanoid,e.core)}(this,(function(e,o,r){"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||{}),l=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(l||{});const n=Symbol.for("accordionGroup"),u=(Boolean,Boolean,Boolean,{modifiers:[String,Array]});function i(o){const r=e.inject(o,void 0),t=e.computed((()=>{return o=r,!(null==(t=e.unref(o))||""===t||Array.isArray(t)&&0===t.length||!(t instanceof Date)&&"object"==typeof t&&0===Object.keys(t).length);var o,t}));return{group:r,isInGroup:t,getGroupOrLocalRef:function(o,t,a){if(null==r?void 0:r.value){const t=e.unref(r.value)[o];return e.computed({get:()=>null==t?void 0:t.value,set(e){t.value=e}})}const l=e.toRef(t,o);return e.computed({get:()=>l.value,set(e){a&&a(`update:${o}`,e)}})}}}a.before,t.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,l.button;const d={...u,name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},disabled:Boolean,not:Boolean};function s(o,r,t){return e.computed((()=>{const a={[o]:!0},l="string"==typeof(null==r?void 0:r.value)?r.value.split(" "):null==r?void 0:r.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(a[`${o}--${e}`]=!0)})),t&&Object.keys(t.value).forEach((r=>{a[`${o}--${r}`]=e.unref(t.value[r])})),a}))}const c=["id","open"],v=["aria-controls","aria-expanded"],p=["aria-hidden"],m=e.defineComponent({name:"VvAccordion",props:d,emits:["update:modelValue"],setup(t,{emit:a}){const l=t,u=e.useAttrs(),d=e.computed((()=>l.name||(null==u?void 0:u.id)||o.nanoid())),{modifiers:m,title:f,content:y,disabled:g,collapse:b,modelValue:A,isInGroup:B,not:V}=function(o,r){const{group:t,isInGroup:a,getGroupOrLocalRef:l}=i(n),{title:u,content:d}=e.toRefs(o),s=l("modelValue",o,r),c=l("not",o),v=l("collapse",o),p=e.computed((()=>{var e;return Boolean(o.disabled||(null==(e=null==t?void 0:t.value)?void 0:e.disabled.value))})),m=e.computed((()=>{let e=o.modifiers,r=null==t?void 0:t.value.modifiers.value;const a=new Set;return e&&(Array.isArray(e)||(e=e.split(" ")),e.forEach((e=>a.add(e)))),r&&(Array.isArray(r)||(r=r.split(" ")),r.forEach((e=>a.add(e)))),Array.from(a)}));return{modelValue:s,not:c,isInGroup:a,group:t,collapse:v,modifiers:m,disabled:p,title:u,content:d}}(l,a),h=e.ref(!1),S=e.computed({get:()=>{let e=A.value;return B.value?e=b.value&&Array.isArray(A.value)?A.value.includes(d.value):A.value===d.value:void 0===A.value&&(e=h.value),V.value?!e:e},set:e=>{if(V.value&&(e=!e),B.value)return b.value&&Array.isArray(A.value)?e?void A.value.push(d.value):void(A.value=A.value.filter((e=>e!==d.value))):void(A.value=e?d.value:null);void 0!==A.value||"boolean"!=typeof e?A.value=e:h.value=e}}),k=s("vv-accordion",m,e.computed((()=>({disabled:g.value})))),$=r.useToggle(S);return(o,r)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(d),class:e.normalizeClass(e.unref(k)),open:e.unref(S)},[e.createElementVNode("summary",{"aria-controls":e.unref(d),"aria-expanded":e.unref(S),class:"vv-accordion__summary",onClick:r[0]||(r[0]=e.withModifiers((o=>e.unref($)()),["prevent"]))},[e.renderSlot(o.$slots,"summary",e.normalizeProps(e.guardReactiveProps({open:e.unref(S)})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(f)),1)]))],8,v),e.createElementVNode("div",{"aria-hidden":!e.unref(S),class:"vv-accordion__content"},[e.renderSlot(o.$slots,"default",e.normalizeProps(e.guardReactiveProps({open:e.unref(S)})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(y)),1)]))],8,p)],10,c))}}),f={...u,modelValue:[String,Array],items:{type:Array,default:()=>[]},collapse:Boolean,itemModifiers:{type:[String,Array],default:""},disabled:Boolean,not:Boolean,storeKey:String};return e.defineComponent({name:"VvAccordionGroup",props:f,emits:["update:modelValue"],setup(o,{emit:t}){const a=o,{disabled:l,collapse:u,modifiers:i,itemModifiers:d,items:c,not:v}=e.toRefs(a);e.watchEffect((()=>{"string"==typeof a.modelValue&&u.value&&console.warn("[VvAccordionGroup]: modelValue is a string but collapse is true.")}));let p=e.ref([]);e.watch((()=>a.storeKey),(o=>{p=o?r.useStorage(o,p.value):e.ref([])}),{immediate:!0});const f=e.computed({get:()=>{var e;return void 0!==a.modelValue?u.value?a.modelValue:Array.isArray(a.modelValue)?a.modelValue[0]:a.modelValue:u.value?p.value:null==(e=p.value)?void 0:e[0]},set:e=>{if(void 0!==a.modelValue)return!Array.isArray(a.modelValue)&&!u.value||Array.isArray(e)||(e=[e]),t("update:modelValue",e);p.value=Array.isArray(e)?e:[e]}});!function(o){if(Object.keys(o).some((r=>"key"!==r&&!e.isRef(o[r]))))throw Error("One or more groupState props aren't ref.");e.provide(o.key,e.computed((()=>o)))}({key:n,modelValue:f,disabled:l,collapse:u,modifiers:d,not:v});const y=s("vv-accordion-group",i,e.computed((()=>({disabled:l.value}))));return(o,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(y))},[e.renderSlot(o.$slots,"default",{},(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(c),(r=>(e.openBlock(),e.createBlock(m,e.mergeProps({key:r.title},{name:r.name,title:r.title,content:r.content}),{header:e.withCtx((t=>[e.renderSlot(o.$slots,`header::${r.name}`,e.normalizeProps(e.guardReactiveProps(t)))])),details:e.withCtx((t=>[e.renderSlot(o.$slots,`details::${r.name}`,e.normalizeProps(e.guardReactiveProps(t)))])),_:2},1040)))),128))]))],2))}})}));