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

package/src/components/VvAction/VvAction.vue

@@ -66,7 +66,8 @@
 	const hasProps = computed(() => {
 		const toReturn = {
 			...dropdownAria?.value,
-			'aria-pressed': pressed.value ? true : undefined,
+			ariaPressed: pressed.value ? true : undefined,
+			ariaLabel: props.ariaLabel,
 			role: role?.value,
 		}
 		switch (hasTag.value) {

package/src/components/VvAlert/VvAlert.vue

@@ -34,7 +34,11 @@
 			<slot name="header">
 				<!-- @slot Before title slot -->
 				<slot name="title::before" />
-				<strong :id="hasTitleId" class="vv-alert__title">
+				<strong
+					v-if="$slots.title || title"
+					:id="hasTitleId"
+					class="vv-alert__title"
+				>
 					<!-- @slot Title slot -->
 					<slot name="title">
 						{{ title }}

package/src/components/VvAlert/index.ts

@@ -40,7 +40,7 @@ export const VvAlertProps = {
 	 */
 	title: {
 		type: String,
-		default: '',
+		default: undefined,
 	},
 	/**
 	 * The alert content
@@ -49,7 +49,7 @@ export const VvAlertProps = {
 	 */
 	content: {
 		type: String,
-		default: '',
+		default: undefined,
 	},
 	/**
 	 * The alert footer
@@ -58,7 +58,7 @@ export const VvAlertProps = {
 	 */
 	footer: {
 		type: String,
-		default: '',
+		default: undefined,
 	},
 	/**
 	 * The alert role

package/src/components/VvAlertGroup/VvAlertGroup.vue

@@ -8,9 +8,38 @@
 	import { useVvAlertGroup, VvAlertGroupEvents, VvAlertGroupProps } from '.'
 	import VvAlert from '../VvAlert/VvAlert.vue'
 
+	// props and emit
 	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 +51,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/VvButton/VvButton.vue

@@ -118,6 +118,7 @@
 			href,
 			target,
 			rel,
+			ariaLabel,
 		}"
 		:id="hasId"
 		ref="element"

package/src/components/VvCheckbox/VvCheckbox.vue

@@ -13,6 +13,13 @@
 	const emit = defineEmits(VvCheckboxEvents)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvCheckboxProps>(
+		'VvCheckbox',
+		VvCheckboxProps,
+		props,
+	)
+
 	// data
 	const {
 		id,
@@ -150,7 +157,7 @@
 		hasHintLabelOrSlot,
 		hasInvalidLabelOrSlot,
 		hintSlotScope,
-	} = HintSlotFactory(props, slots)
+	} = HintSlotFactory(propsDefaults, slots)
 </script>
 
 <template>

package/src/components/VvCheckboxGroup/VvCheckboxGroup.vue

@@ -17,6 +17,13 @@
 	const emit = defineEmits(VvCheckboxGroupEvents)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvCheckboxGroupProps>(
+		'VvCheckboxGroup',
+		VvCheckboxGroupProps,
+		props,
+	)
+
 	// data
 	const modelValue = useVModel(props, 'modelValue', emit)
 	const { disabled, readonly, vertical, valid, invalid, modifiers } =
@@ -56,7 +63,7 @@
 			value: getOptionValue(option),
 		}
 	}
-	const { HintSlot, hintSlotScope } = HintSlotFactory(props, slots)
+	const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots)
 </script>
 
 <template>

package/src/components/VvCombobox/VvCombobox.vue

@@ -50,7 +50,7 @@
 		hasHintLabelOrSlot,
 		hasInvalidLabelOrSlot,
 		hintSlotScope,
-	} = HintSlotFactory(props, slots)
+	} = HintSlotFactory(propsDefaults, slots)
 
 	// template ref
 	const inputEl: Ref<HTMLElement | null> = ref(null)
@@ -184,6 +184,12 @@
 
 	// options filtered by search text
 	const filteredOptions = computed(() => {
+		if (propsDefaults.value.searchFunction) {
+			return propsDefaults.value.searchFunction(
+				debouncedSearchText.value,
+				props.options,
+			)
+		}
 		return props.options?.filter((option) => {
 			return getOptionLabel(option)
 				.toLowerCase()
@@ -334,7 +340,7 @@
 		autoPlacement: propsDefaults.value.autoPlacement,
 		arrow: propsDefaults.value.arrow,
 		autofocusFirst: searchable.value
-			? false
+			? true
 			: propsDefaults.value.autofocusFirst,
 		triggerWidth: propsDefaults.value.triggerWidth,
 		modifiers: propsDefaults.value.dropdownModifiers,
@@ -390,7 +396,6 @@
 					<slot name="dropdown::before" />
 					<input
 						v-if="searchable"
-						v-show="expanded"
 						:id="hasSearchId"
 						ref="inputSearchEl"
 						v-model="searchText"
@@ -579,7 +584,7 @@
 						<!-- Close button if dropdown custom position is enabled and floating-ui disabled -->
 						<VvButton
 							v-if="dropdownEl?.customPosition"
-							label="Close"
+							:label="propsDefaults.closeLabel"
 							modifiers="secondary"
 							@click="dropdownEl.hide()"
 						/>

package/src/components/VvCombobox/index.ts

@@ -16,6 +16,7 @@ import {
 	DropdownProps,
 	LabelProps,
 } from '../../props'
+import type { Option } from '../../types/generic'
 
 export const VvComboboxEvents = [
 	'update:modelValue',
@@ -40,6 +41,13 @@ export const VvComboboxProps = {
 	...UnselectableProps,
 	...DropdownProps,
 	...LabelProps,
+	/**
+	 * Dropdown show / hide transition name
+	 */
+	transitionName: {
+		type: String,
+		default: 'vv-dropdown--mobile-fade-block',
+	},
 	/**
 	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
 	 */
@@ -71,6 +79,10 @@ export const VvComboboxProps = {
 	 * Label for deselected option hint
 	 */
 	deselectHintLabel: { type: String, default: 'Press enter to remove' },
+	/**
+	 * Label close button
+	 */
+	closeLabel: { type: String, default: 'Close' },
 	/**
 	 * Select input placeholder
 	 */
@@ -79,6 +91,18 @@ export const VvComboboxProps = {
 	 * Use input text to search on options
 	 */
 	searchable: Boolean,
+	/**
+	 * Search function to filter options
+	 */
+	searchFunction: {
+		type: Function as PropType<
+			(
+				search: string,
+				options?: (Option | string)[],
+			) => (Option | string)[]
+		>,
+		default: undefined,
+	},
 	/**
 	 * On searchable select is the input search placeholder
 	 */

package/src/components/VvDialog/VvDialog.vue

@@ -15,16 +15,16 @@
 	const dialogEl: Ref<HTMLDialogElement | undefined> = ref()
 
 	// data
+	const modelValue = useVModel(props, 'modelValue', emit)
 	const localModelValue = ref(false)
-	const modelValue = computed({
-		get() {
-			return props.modelValue ?? localModelValue.value
-		},
-		set(value) {
-			if (props.modelValue === undefined) {
-				localModelValue.value = value
+	const isOpened = computed({
+		get: () => modelValue.value ?? localModelValue.value,
+		set: (newValue) => {
+			if (modelValue.value === undefined) {
+				localModelValue.value = newValue
+				return
 			}
-			emit('update:modelValue', value)
+			modelValue.value = newValue
 		},
 	})
 
@@ -51,46 +51,65 @@
 		'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')
 		},
 	}
 
 	// methods
 	onClickOutside(modalWrapper, () => {
 		if (!props.keepOpen) {
-			modelValue.value = false
+			close()
 		}
 	})
 
 	function close() {
-		modelValue.value = false
+		isOpened.value = false
 	}
 
 	function open() {
-		modelValue.value = true
+		isOpened.value = true
 	}
 
 	defineExpose({ close, open })
 
-	// keyboard
-	onKeyStroke('Escape', (e) => {
-		if (modelValue.value) {
-			e.preventDefault()
+	const onCancel = () => {
+		if (!props.keepOpen) {
 			close()
 		}
-	})
+	}
 </script>
 
 <template>
 	<Transition :name="transitioName" v-on="dialogTransitionHandlers">
 		<dialog
-			v-show="modelValue"
+			v-show="isOpened"
 			v-bind="dialogAttrs"
 			ref="dialogEl"
 			:class="dialogClass"
+			@cancel.stop.prevent="onCancel"
 		>
 			<article ref="modalWrapper" class="vv-dialog__wrapper">
 				<header v-if="$slots.header || title" class="vv-dialog__header">

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)
@@ -153,7 +161,11 @@
 		referenceEl,
 		floatingEl,
 		{
-			whileElementsMounted: autoUpdate,
+			whileElementsMounted: (...args) => {
+				return autoUpdate(...args, {
+					animationFrame: props.strategy === 'fixed',
+				})
+			},
 			placement: computed(() => props.placement),
 			strategy: computed(() => props.strategy),
 			middleware,
@@ -258,7 +270,7 @@
 	onClickOutside(
 		floatingEl,
 		() => {
-			if (!props.keepOpen) {
+			if (!props.keepOpen && expanded.value) {
 				expanded.value = false
 			}
 		},
@@ -306,7 +318,7 @@
 		}
 		return [
 			...element.querySelectorAll(
-				'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])',
+				'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])',
 			),
 		].filter(
 			(el) =>
@@ -388,11 +400,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 +437,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
 	 */

package/src/components/VvInputText/VvInputText.vue

@@ -22,6 +22,13 @@
 	const emit = defineEmits(VvInputTextEvents)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvInputTextProps>(
+		'VvInputText',
+		VvInputTextProps,
+		props,
+	)
+
 	// template refs
 	const inputEl = ref()
 	const innerEl = ref()
@@ -278,7 +285,7 @@
 		hasHintLabelOrSlot,
 		hasInvalidLabelOrSlot,
 		hintSlotScope,
-	} = HintSlotFactory(props, slots)
+	} = HintSlotFactory(propsDefaults, slots)
 	const PasswordInputActions = VvInputTextActionsFactory(
 		INPUT_TYPES.PASSWORD,
 		props,

package/src/components/VvNav/VvNav.vue

@@ -55,7 +55,7 @@
 						disabled: navItem.disabled,
 					}"
 					class="vv-nav__item-label"
-					v-on="navItem.on || {}"
+					v-on="navItem.on"
 					@click="onClick(navItem)"
 				>
 					{{ navItem.title }}

package/src/components/VvNav/index.ts

@@ -6,7 +6,7 @@ export type NavItem = {
 	to?: string | { [key: string]: unknown }
 	href?: string
 	disabled?: boolean
-	on: () => void
+	on?: Record<string, () => void>
 }
 
 export const VvNavProps = {

package/src/components/VvRadio/VvRadio.vue

@@ -13,6 +13,13 @@
 	const emit = defineEmits(VvRadioEvents)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvRadioProps>(
+		'VvRadio',
+		VvRadioProps,
+		props,
+	)
+
 	// data
 	const { id, disabled, readonly, modelValue, valid, invalid } =
 		useGroupProps(props, emit)
@@ -77,7 +84,7 @@
 		hasHintLabelOrSlot,
 		hasInvalidLabelOrSlot,
 		hintSlotScope,
-	} = HintSlotFactory(props, slots)
+	} = HintSlotFactory(propsDefaults, slots)
 </script>
 
 <template>

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -17,6 +17,13 @@
 	const emit = defineEmits(VvRadioGroupEvents)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvRadioGroupProps>(
+		'VvRadioGroup',
+		VvRadioGroupProps,
+		props,
+	)
+
 	// data
 	const modelValue = useVModel(props, 'modelValue', emit)
 	const { disabled, readonly, vertical, valid, invalid, modifiers } =
@@ -58,7 +65,7 @@
 	}
 
 	// hint
-	const { HintSlot, hintSlotScope } = HintSlotFactory(props, slots)
+	const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots)
 </script>
 
 <template>

package/src/components/VvSelect/VvSelect.vue

@@ -16,6 +16,13 @@
 	const emit = defineEmits(VvSelectEmits)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvSelectProps>(
+		'VvSelect',
+		VvSelectProps,
+		props,
+	)
+
 	// template refs
 	const select = ref()
 
@@ -25,7 +32,7 @@
 		hasHintLabelOrSlot,
 		hasInvalidLabelOrSlot,
 		hintSlotScope,
-	} = HintSlotFactory(props, slots)
+	} = HintSlotFactory(propsDefaults, slots)
 
 	// data
 	const {

package/src/components/VvTextarea/VvTextarea.vue

@@ -15,6 +15,13 @@
 	const emit = defineEmits(VvTextareaEvents)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvTextareaProps>(
+		'VvTextarea',
+		VvTextareaProps,
+		props,
+	)
+
 	// template refs
 	const textarea = ref()
 
@@ -91,7 +98,7 @@
 		hasHintLabelOrSlot,
 		hasInvalidLabelOrSlot,
 		hintSlotScope,
-	} = HintSlotFactory(props, slots)
+	} = HintSlotFactory(propsDefaults, slots)
 
 	// styles
 	const bemCssClasses = useModifiers(