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

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,8 +8,10 @@
 	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 = {

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

@@ -12,6 +12,7 @@
 
 <script setup lang="ts">
 	import type { Ref } from 'vue'
+	import { toRefs } from 'vue'
 	import { VvComboboxProps, VvComboboxEvents } from '.'
 	import VvIcon from '../VvIcon/VvIcon.vue'
 	import VvDropdown from '../VvDropdown/VvDropdown.vue'
@@ -50,7 +51,7 @@
 		hasHintLabelOrSlot,
 		hasInvalidLabelOrSlot,
 		hintSlotScope,
-	} = HintSlotFactory(props, slots)
+	} = HintSlotFactory(propsDefaults, slots)
 
 	// template ref
 	const inputEl: Ref<HTMLElement | null> = ref(null)
@@ -84,7 +85,7 @@
 	const searchText = ref('')
 	const debouncedSearchText = refDebounced(
 		searchText,
-		Number(props.debounceSearch),
+		computed(() => Number(props.debounceSearch)),
 	)
 	watch(debouncedSearchText, () =>
 		emit('change:search', debouncedSearchText.value),
@@ -105,7 +106,7 @@
 		expanded.value = false
 	}
 	const onAfterExpand = () => {
-		if (searchable.value) {
+		if (propsDefaults.value.searchable) {
 			if (inputSearchEl.value) {
 				inputSearchEl.value.focus({
 					preventScroll: true,
@@ -114,7 +115,7 @@
 		}
 	}
 	const onAfterCollapse = () => {
-		if (searchable.value) {
+		if (propsDefaults.value.searchable) {
 			searchText.value = ''
 		}
 	}
@@ -131,7 +132,6 @@
 		valid,
 		invalid,
 		floating,
-		searchable,
 	} = toRefs(props)
 	const hasId = useUniqueId(id)
 	const hasHintId = computed(() => `${hasId.value}-hint`)
@@ -139,6 +139,10 @@
 	const hasSearchId = computed(() => `${hasId.value}-search`)
 	const hasLabelId = computed(() => `${hasId.value}-label`)
 
+	// loading
+	const localLoading = ref(false)
+	const isLoading = computed(() => localLoading.value || loading.value)
+
 	// ref
 	const dropdownEl = ref()
 
@@ -162,7 +166,7 @@
 		modifiers,
 		computed(() => ({
 			disabled: disabled.value,
-			loading: loading.value,
+			loading: isLoading.value,
 			readonly: readonly.value,
 			'icon-before': Boolean(hasIconBefore.value),
 			'icon-after': Boolean(hasIconAfter.value),
@@ -183,7 +187,18 @@
 	} = useOptions(props)
 
 	// options filtered by search text
-	const filteredOptions = computed(() => {
+	const filteredOptions = computedAsync(async () => {
+		if (propsDefaults.value.searchFunction) {
+			localLoading.value = true
+			const toReturn = await Promise.resolve(
+				propsDefaults.value.searchFunction(
+					debouncedSearchText.value,
+					props.options,
+				),
+			)
+			localLoading.value = false
+			return toReturn
+		}
 		return props.options?.filter((option) => {
 			return getOptionLabel(option)
 				.toLowerCase()
@@ -221,12 +236,15 @@
 		} else if (props.modelValue) {
 			selectedValues = [props.modelValue]
 		}
-		const options = props.options.reduce((acc, value) => {
-			if (isGroup(value)) {
-				return [...acc, ...getOptionGrouped(value)]
-			}
-			return [...acc, value]
-		}, [] as Array<Option | string>)
+		const options = props.options.reduce(
+			(acc, value) => {
+				if (isGroup(value)) {
+					return [...acc, ...getOptionGrouped(value)]
+				}
+				return [...acc, value]
+			},
+			[] as Array<Option | string>,
+		)
 
 		return options.filter((option) => {
 			if (isGroup(option)) {
@@ -304,7 +322,7 @@
 		invalid: invalid.value,
 		invalidLabel: propsDefaults.value.invalidLabel,
 		hintLabel: propsDefaults.value.hintLabel,
-		loading: loading.value,
+		loading: isLoading.value,
 		loadingLabel: propsDefaults.value.loadingLabel,
 		disabled: disabled.value,
 		readonly: readonly.value,
@@ -333,8 +351,8 @@
 		flip: propsDefaults.value.flip,
 		autoPlacement: propsDefaults.value.autoPlacement,
 		arrow: propsDefaults.value.arrow,
-		autofocusFirst: searchable.value
-			? false
+		autofocusFirst: propsDefaults.value.searchable
+			? true
 			: propsDefaults.value.autofocusFirst,
 		triggerWidth: propsDefaults.value.triggerWidth,
 		modifiers: propsDefaults.value.dropdownModifiers,
@@ -369,7 +387,7 @@
 		<label
 			v-if="label"
 			:id="hasLabelId"
-			:for="searchable ? hasSearchId : undefined"
+			:for="propsDefaults.searchable ? hasSearchId : undefined"
 		>
 			{{ label }}
 		</label>
@@ -383,14 +401,15 @@
 				@after-collapse="onAfterCollapse"
 			>
 				<template
-					v-if="searchable || $slots['dropdown::before']"
+					v-if="
+						propsDefaults.searchable || $slots['dropdown::before']
+					"
 					#before
 				>
 					<!-- @slot Slot before dropdown items -->
 					<slot name="dropdown::before" />
 					<input
-						v-if="searchable"
-						v-show="expanded"
+						v-if="propsDefaults.searchable && !disabled"
 						:id="hasSearchId"
 						ref="inputSearchEl"
 						v-model="searchText"
@@ -461,6 +480,7 @@
 											:aria-label="
 												propsDefaults.deselectActionLabel
 											"
+											type="button"
 											@click.stop="onInput(option)"
 										>
 											<VvIcon name="close" />
@@ -484,7 +504,7 @@
 					</div>
 				</template>
 				<template #items>
-					<template v-if="filteredOptions.length">
+					<template v-if="!disabled && filteredOptions?.length">
 						<template
 							v-for="(option, index) in filteredOptions"
 							:key="index"
@@ -566,7 +586,7 @@
 							{{ propsDefaults.noOptionsLabel }}
 						</slot>
 					</VvDropdownOption>
-					<VvDropdownOption v-else modifiers="inert">
+					<VvDropdownOption v-else-if="!disabled" modifiers="inert">
 						<!-- @slot Slot for no results available -->
 						<slot name="no-results">
 							{{ propsDefaults.noResultsLabel }}
@@ -579,7 +599,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)[] | Promise<(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
 		},
 	})
 
@@ -49,12 +49,16 @@
 	const transitioName = computed(() => `vv-dialog--${props.transition}`)
 	const dialogTransitionHandlers = {
 		'before-enter': () => {
-			dialogEl.value?.showModal()
+			if (!dialogEl.value?.open) {
+				dialogEl.value?.showModal()
+			}
 			emit('open')
 			emit('before-enter')
 		},
 		'after-leave': () => {
-			dialogEl.value?.close()
+			if (dialogEl.value?.open) {
+				dialogEl.value?.close()
+			}
 			emit('close')
 			emit('after-leave')
 		},
@@ -81,36 +85,35 @@
 	// 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/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)
@@ -96,7 +97,7 @@
 			}
 		} else if (props.flip) {
 			if (typeof props.flip === 'boolean') {
-				toReturn.push(flip())
+				toReturn.push(flip({ fallbackStrategy: 'initialPlacement' }))
 			} else {
 				toReturn.push(flip(props.flip as FlipOptions))
 			}
@@ -157,11 +158,15 @@
 
 		return toReturn
 	})
-	const { x, y, strategy, middlewareData, placement } = useFloating(
+	const { x, y, middlewareData, placement, strategy } = useFloating(
 		referenceEl,
 		floatingEl,
 		{
-			whileElementsMounted: autoUpdate,
+			whileElementsMounted: (...args) => {
+				return autoUpdate(...args, {
+					animationFrame: props.strategy === Strategy.fixed,
+				})
+			},
 			placement: computed(() => props.placement),
 			strategy: computed(() => props.strategy),
 			middleware,
@@ -171,16 +176,17 @@
 		if (hasCustomPosition.value) {
 			return undefined
 		}
+		const width =
+			props.triggerWidth && referenceEl.value
+				? `${referenceEl.value?.offsetWidth}px`
+				: undefined
 		return {
 			position: strategy.value,
 			top: `${y.value ?? 0}px`,
 			left: `${x.value ?? 0}px`,
-			maxWidth: maxWidth.value,
+			maxWidth: width ? undefined : maxWidth.value,
 			maxHeight: maxHeight.value,
-			width:
-				props.triggerWidth && referenceEl.value
-					? `${referenceEl.value.offsetWidth}px`
-					: undefined,
+			width,
 		}
 	})
 
@@ -188,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:
@@ -266,7 +272,7 @@
 	onClickOutside(
 		floatingEl,
 		() => {
-			if (!props.keepOpen) {
+			if (!props.keepOpen && expanded.value) {
 				expanded.value = false
 			}
 		},
@@ -314,7 +320,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) =>