@volverjs/ui-vue 0.0.8-beta.9 → 0.0.9-beta.1

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/VvCombobox/VvCombobox.vue

@@ -578,7 +578,7 @@
 					<slot name="dropdown::after">
 						<!-- Close button if dropdown custom position is enabled and floating-ui disabled -->
 						<VvButton
-							v-if="dropdownEl?.dropdownCustomPosition === 'true'"
+							v-if="dropdownEl?.customPosition"
 							label="Close"
 							modifiers="secondary"
 							@click="dropdownEl.hide()"

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)
@@ -54,22 +62,24 @@
 	})
 
 	// ref to store the value of css-var "--dropdown-custom-position"
-	const dropdownCustomPosition = ref()
-
-	// set dropdownCustomPosition value from css-var "--dropdown-custom-position"
-	const onChangeDropdownCustomPosition = () => {
-		dropdownCustomPosition.value = window
-			.getComputedStyle(floatingEl.value)
-			.getPropertyValue('--dropdown-custom-position')
-			?.trim()
-	}
+	const hasCustomPosition = ref(false)
 
 	// observe dropdown style for "--dropdown-custom-position" css var to disable floating-ui
 	onMounted(() => {
-		useMutationObserver(floatingEl.value, onChangeDropdownCustomPosition, {
-			attributeFilter: ['style'],
-			window,
-		})
+		useMutationObserver(
+			floatingEl.value,
+			() => {
+				hasCustomPosition.value =
+					window
+						.getComputedStyle(floatingEl.value)
+						.getPropertyValue('--dropdown-custom-position')
+						?.trim() === 'true'
+			},
+			{
+				attributeFilter: ['style'],
+				window,
+			},
+		)
 	})
 
 	// floating ui
@@ -158,8 +168,8 @@
 		},
 	)
 	const dropdownPlacement = computed(() => {
-		if (dropdownCustomPosition?.value === 'true') {
-			return {}
+		if (hasCustomPosition.value) {
+			return undefined
 		}
 		return {
 			position: strategy.value,
@@ -175,31 +185,34 @@
 	})
 
 	// placement
-	const side = computed(() => placement.value.split('-')[0])
-	const staticSide = computed(
+	const side = computed(
 		() =>
-			({
-				top: 'bottom',
-				right: 'left',
-				bottom: 'top',
-				left: 'right',
-			}[side.value] ?? 'bottom'),
+			placement.value.split('-')[0] as
+				| 'top'
+				| 'right'
+				| 'bottom'
+				| 'left',
 	)
 	const arrowPlacement = computed(() => {
-		if (dropdownCustomPosition?.value === 'true') {
-			return {}
-		}
-		if (['bottom', 'top'].includes(staticSide.value)) {
-			return {
-				right: `${middlewareData.value.arrow?.x ?? 0}px`,
-				[staticSide.value]: `${
-					-(arrowEl.value?.offsetWidth ?? 0) / 2
-				}px`,
-			}
+		if (hasCustomPosition.value) {
+			return undefined
 		}
+		const staticSide = {
+			top: 'bottom',
+			right: 'left',
+			bottom: 'top',
+			left: 'right',
+		}[side.value]
 		return {
-			top: `${middlewareData.value.arrow?.y ?? 0}px`,
-			[staticSide.value]: `${-(arrowEl.value?.offsetWidth ?? 0) / 2}px`,
+			left:
+				middlewareData.value.arrow?.x !== undefined
+					? `${middlewareData.value.arrow?.x}px`
+					: undefined,
+			top:
+				middlewareData.value.arrow?.y !== undefined
+					? `${middlewareData.value.arrow?.y}px`
+					: undefined,
+			[staticSide]: `${-(arrowEl.value?.offsetWidth ?? 0) / 2}px`,
 		}
 	})
 
@@ -228,7 +241,13 @@
 	const init = (el: HTMLElement) => {
 		referenceEl.value = el
 	}
-	defineExpose({ toggle, show, hide, init, dropdownCustomPosition })
+	defineExpose({
+		toggle,
+		show,
+		hide,
+		init,
+		customPosition: hasCustomPosition,
+	})
 	watch(expanded, (newValue) => {
 		if (newValue && props.autofocusFirst) {
 			nextTick(() => {
@@ -377,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>
 
@@ -391,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"