@volverjs/ui-vue 0.0.9-beta.20 → 0.0.9-beta.21

package/src/components/VvDropdown/VvDropdown.vue

@@ -25,6 +25,7 @@
 		ShiftOptions,
 		SizeOptions,
 	} from '../../types/floating-ui'
+	import { Side, Strategy } from '../../constants'
 
 	// props, emit and attrs
 	const props = defineProps(VvDropdownProps)
@@ -157,13 +158,13 @@
 
 		return toReturn
 	})
-	const { x, y, strategy, middlewareData, placement } = useFloating(
+	const { x, y, middlewareData, placement, strategy } = useFloating(
 		referenceEl,
 		floatingEl,
 		{
 			whileElementsMounted: (...args) => {
 				return autoUpdate(...args, {
-					animationFrame: props.strategy === 'fixed',
+					animationFrame: props.strategy === Strategy.fixed,
 				})
 			},
 			placement: computed(() => props.placement),
@@ -193,20 +194,20 @@
 	const side = computed(
 		() =>
 			placement.value.split('-')[0] as
-				| 'top'
-				| 'right'
-				| 'bottom'
-				| 'left',
+				| Side.top
+				| Side.right
+				| Side.bottom
+				| Side.left,
 	)
 	const arrowPlacement = computed(() => {
 		if (hasCustomPosition.value) {
 			return undefined
 		}
 		const staticSide = {
-			top: 'bottom',
-			right: 'left',
-			bottom: 'top',
-			left: 'right',
+			[Side.top]: Side.bottom,
+			[Side.right]: Side.left,
+			[Side.bottom]: Side.top,
+			[Side.left]: Side.right,
 		}[side.value]
 		return {
 			left:

package/src/constants.ts

@@ -5,6 +5,11 @@ import type { AlertModifiers } from './types/alert'
 
 export const DEFAULT_ICONIFY_PROVIDER = 'vv'
 
+export enum Strategy {
+	absolute = 'absolute',
+	fixed = 'fixed',
+}
+
 export enum Side {
 	left = 'left',
 	right = 'right',

package/src/props/index.ts

@@ -9,6 +9,7 @@ import type {
 } from '../types/floating-ui'
 import {
 	Placement,
+	Strategy,
 	Position,
 	Side,
 	AnchorTarget,
@@ -228,22 +229,17 @@ export const DropdownProps = {
 	placement: {
 		type: String as PropType<`${Side}` | `${Placement}`>,
 		default: Side.bottom,
-		validator: (value: Side & Placement) => {
-			return (
-				Object.values(Side).includes(value) ||
-				Object.values(Placement).includes(value)
-			)
-		},
+		validator: (value: Side & Placement) =>
+			Object.values(Side).includes(value) ||
+			Object.values(Placement).includes(value),
 	},
 	/**
 	 * Dropdown strategy
 	 */
 	strategy: {
-		type: String as PropType<'fixed' | 'absolute'>,
-		default: 'absolute',
-		validator: (value: 'fixed' | 'absolute') => {
-			return ['fixed', 'absolute'].includes(value)
-		},
+		type: String as PropType<`${Strategy}`>,
+		default: undefined,
+		validator: (value: Strategy) => Object.values(Strategy).includes(value),
 	},
 	/**
 	 * Dropdown show / hide transition name