@volverjs/ui-vue 0.0.10-beta.36 → 0.0.10-beta.38

package/src/components/VvAlertGroup/VvAlertGroup.vue

@@ -49,6 +49,7 @@ export default {
         <slot name="before" />
         <TransitionGroup
             tag="div"
+            role="group"
             :name="hasTransition"
             class="vv-alert-group__list"
             v-on="alertGroupTransitionHandlers"

package/src/components/VvAlertGroup/index.ts

@@ -40,14 +40,14 @@ export const VvAlertGroupProps = {
 
 export const VvAlertGroupEvents = [
     'close',
-    'before-enter',
-    'after-leave',
+    'beforeEnter',
+    'afterLeave',
     'enter',
-    'after-enter',
-    'enter-cancelled',
-    'before-leave',
+    'afterEnter',
+    'enterCancelled',
+    'beforeLeave',
     'leave',
-    'leave-cancelled',
+    'leaveCancelled',
 ]
 
 export function useVvAlertGroup(props: Readonly<ExtractPropTypes<typeof VvAlertGroupProps>>,	emit: (event: string, ...args: unknown[]) => void) {

package/src/components/VvDialog/VvDialog.vue

@@ -27,19 +27,28 @@ const isOpened = computed({
 // template ref
 const modalWrapper = ref(null)
 
-// styles
+/**
+ * @description Define component classes with BEM style.
+ * @returns {Array} The component classes.
+ */
+const { modifiers } = toRefs(props)
+const bemCssClasses = useModifiers(
+    'vv-dialog',
+    modifiers,
+    computed(() => {
+        if (props.size) {
+            return { [props.size]: !!props.size }
+        }
+        return {}
+    }),
+)
+
 const dialogAttrs = computed(() => {
     const { id } = props
     return {
         id,
     } as DialogHTMLAttributes
 })
-const dialogClass = computed(() => {
-    if (!props.size) {
-        return 'vv-dialog'
-    }
-    return ['vv-dialog', `vv-dialog--${props.size}`]
-})
 
 // transitions
 const transitioName = computed(() => `vv-dialog--${props.transition}`)
@@ -114,7 +123,7 @@ export default {
             v-show="isOpened"
             v-bind="dialogAttrs"
             ref="dialogEl"
-            :class="dialogClass"
+            :class="bemCssClasses"
             @cancel.stop.prevent="onCancel"
         >
             <article ref="modalWrapper" class="vv-dialog__wrapper">

package/src/components/VvDialog/index.ts

@@ -1,20 +1,21 @@
-import { IdProps } from '../../props'
+import { IdProps, ModifiersProps } from '@/props'
 
 export const VvDialogEvents = [
     'open',
     'close',
     'update:modelValue',
-    'before-enter',
-    'after-leave',
+    'beforeEnter',
+    'afterLeave',
     'enter',
-    'after-enter',
-    'enter-cancelled',
-    'before-leave',
+    'afterEnter',
+    'enterCancelled',
+    'beforeLeave',
     'leave',
-    'leave-cancelled',
+    'leaveCancelled',
 ]
 
 export const VvDialogProps = {
+    ...ModifiersProps,
     ...IdProps,
     /**
      * Dialog title

package/src/stories/Dialog/Dialog.settings.ts

@@ -1,5 +1,5 @@
 import type { ArgTypes } from '@storybook/vue3'
-import { DefaultSlotArgTypes } from '@/stories/argTypes'
+import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
 
 export const defaultArgs = {
     id: 'dialog',
@@ -16,6 +16,14 @@ export const argTypes: ArgTypes = {
         control: 'radio',
         options: ['fade-block', 'fade-inline', 'scale'],
     },
+    modifiers: {
+        ...ModifiersArgTypes.modifiers,
+        options: [
+            'standard',
+            'small',
+            'fullscreen',
+        ],
+    },
     size: {
         control: 'radio',
         options: ['standard', 'small', 'fullscreen'],

package/src/stories/Dialog/DialogModifiers.stories.ts

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { Default } from './Dialog.stories'
+import { argTypes, defaultArgs } from './Dialog.settings'
+import VvDialog from '@/components/VvDialog/VvDialog.vue'
+
+const meta: Meta<typeof VvDialog> = {
+    title: 'Components/Dialog/Modifiers',
+    component: VvDialog,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvDialog>
+
+export const Standard: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        title: 'Standard',
+        modifiers: 'standard',
+    },
+}
+
+export const Small: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        title: 'Small',
+        modifiers: 'small',
+    },
+}
+
+export const Fullscreen: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        title: 'Fullscreen',
+        modifiers: 'fullscreen',
+    },
+}