@volverjs/ui-vue 0.0.8 → 0.0.9-beta.2

package/src/components/VvAlertGroup/VvAlertGroup.vue

@@ -11,6 +11,33 @@
 	const props = defineProps(VvAlertGroupProps)
 	const emit = defineEmits(VvAlertGroupEvents)
 	const { hasProps, hasTransition } = useVvAlertGroup(props, emit)
+
+	const alertGroupTransitionHandlers = {
+		'before-enter': () => {
+			emit('before-enter')
+		},
+		'after-leave': () => {
+			emit('after-leave')
+		},
+		enter: () => {
+			emit('enter')
+		},
+		'after-enter': () => {
+			emit('after-enter')
+		},
+		'enter-cancelled': () => {
+			emit('enter-cancelled')
+		},
+		'before-leave': () => {
+			emit('before-leave')
+		},
+		leave: () => {
+			emit('leave')
+		},
+		'leave-cancelled': () => {
+			emit('leave-cancelled')
+		},
+	}
 </script>
 
 <template>
@@ -22,6 +49,7 @@
 			role="group"
 			:name="hasTransition"
 			class="vv-alert-group__list"
+			v-on="alertGroupTransitionHandlers"
 		>
 			<!-- @slot The slot for alert list  -->
 			<slot>

package/src/components/VvAlertGroup/index.ts

@@ -50,7 +50,17 @@ export const VvAlertGroupProps = {
 	},
 }
 
-export const VvAlertGroupEvents = ['close']
+export const VvAlertGroupEvents = [
+	'close',
+	'before-enter',
+	'after-leave',
+	'enter',
+	'after-enter',
+	'enter-cancelled',
+	'before-leave',
+	'leave',
+	'leave-cancelled',
+]
 
 export const useVvAlertGroup = (
 	props: Readonly<ExtractPropTypes<typeof VvAlertGroupProps>>,

package/src/components/VvDialog/VvDialog.vue

@@ -51,10 +51,30 @@
 		'before-enter': () => {
 			dialogEl.value?.showModal()
 			emit('open')
+			emit('before-enter')
 		},
 		'after-leave': () => {
 			dialogEl.value?.close()
 			emit('close')
+			emit('after-leave')
+		},
+		enter: () => {
+			emit('enter')
+		},
+		'after-enter': () => {
+			emit('after-enter')
+		},
+		'enter-cancelled': () => {
+			emit('enter-cancelled')
+		},
+		'before-leave': () => {
+			emit('before-leave')
+		},
+		leave: () => {
+			emit('leave')
+		},
+		'leave-cancelled': () => {
+			emit('leave-cancelled')
 		},
 	}
 

package/src/components/VvDialog/index.ts

@@ -1,6 +1,18 @@
 import { IdProps } from '../../props'
 
-export const VvDialogEvents = ['open', 'close', 'update:modelValue']
+export const VvDialogEvents = [
+	'open',
+	'close',
+	'update:modelValue',
+	'before-enter',
+	'after-leave',
+	'enter',
+	'after-enter',
+	'enter-cancelled',
+	'before-leave',
+	'leave',
+	'leave-cancelled',
+]
 
 export const VvDialogProps = {
 	...IdProps,

package/src/components/VvDropdown/VvDropdown.vue

@@ -34,6 +34,14 @@
 		'beforeCollapse',
 		'afterExpand',
 		'afterCollapse',
+		'before-enter',
+		'after-leave',
+		'enter',
+		'after-enter',
+		'enter-cancelled',
+		'before-leave',
+		'leave',
+		'leave-cancelled',
 	])
 	const { id } = toRefs(props)
 	const hasId = useUniqueId(id)
@@ -388,11 +396,34 @@
 			htmlEl?.click()
 		}
 	})
-	const onTransitionBeforeEnter = () => {
-		emit(expanded.value ? 'beforeExpand' : 'beforeCollapse')
-	}
-	const onTransitionAfterLeave = () => {
-		emit(expanded.value ? 'afterExpand' : 'afterCollapse')
+
+	const dropdownTransitionHandlers = {
+		'before-enter': () => {
+			emit(expanded.value ? 'beforeExpand' : 'beforeCollapse')
+			emit('before-enter')
+		},
+		'after-leave': () => {
+			emit(expanded.value ? 'afterExpand' : 'afterCollapse')
+			emit('after-leave')
+		},
+		enter: () => {
+			emit('enter')
+		},
+		'after-enter': () => {
+			emit('after-enter')
+		},
+		'enter-cancelled': () => {
+			emit('enter-cancelled')
+		},
+		'before-leave': () => {
+			emit('before-leave')
+		},
+		leave: () => {
+			emit('leave')
+		},
+		'leave-cancelled': () => {
+			emit('leave-cancelled')
+		},
 	}
 </script>
 
@@ -402,13 +433,7 @@
 			v-bind="{ init, show, hide, toggle, expanded, aria: referenceAria }"
 		/>
 	</VvDropdownTriggerProvider>
-	<Transition
-		:name="transitionName"
-		v-on="{
-			beforeEnter: onTransitionBeforeEnter,
-			onAfterLeave: onTransitionAfterLeave,
-		}"
-	>
+	<Transition :name="transitionName" v-on="dropdownTransitionHandlers">
 		<div
 			v-show="expanded"
 			ref="floatingEl"

package/src/components/VvDropdown/index.ts

@@ -1,17 +1,11 @@
 import type { PropType } from 'vue'
-import { DropdownProps, IdProps } from '../../props'
+import { DropdownProps, IdProps, ModifiersProps } from '../../props'
 import { DropdownRole } from '../../constants'
 
 export const VvDropdownProps = {
 	...IdProps,
 	...DropdownProps,
-	/**
-	 * Component BEM modifiers
-	 */
-	modifiers: {
-		type: [String, Array] as PropType<string | string[]>,
-		default: 'mobile',
-	},
+	...ModifiersProps,
 	/**
 	 * Show / hide dropdown programmatically
 	 */