@volverjs/ui-vue 0.0.9-beta.1 → 0.0.9-beta.11

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

@@ -50,7 +50,7 @@
 		hasHintLabelOrSlot,
 		hasInvalidLabelOrSlot,
 		hintSlotScope,
-	} = HintSlotFactory(props, slots)
+	} = HintSlotFactory(propsDefaults, slots)
 
 	// template ref
 	const inputEl: Ref<HTMLElement | null> = ref(null)
@@ -105,7 +105,7 @@
 		expanded.value = false
 	}
 	const onAfterExpand = () => {
-		if (searchable.value) {
+		if (propsDefaults.value.searchable) {
 			if (inputSearchEl.value) {
 				inputSearchEl.value.focus({
 					preventScroll: true,
@@ -114,7 +114,7 @@
 		}
 	}
 	const onAfterCollapse = () => {
-		if (searchable.value) {
+		if (propsDefaults.value.searchable) {
 			searchText.value = ''
 		}
 	}
@@ -131,7 +131,6 @@
 		valid,
 		invalid,
 		floating,
-		searchable,
 	} = toRefs(props)
 	const hasId = useUniqueId(id)
 	const hasHintId = computed(() => `${hasId.value}-hint`)
@@ -139,6 +138,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 +165,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 +186,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()
@@ -304,7 +318,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 +347,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 +383,7 @@
 		<label
 			v-if="label"
 			:id="hasLabelId"
-			:for="searchable ? hasSearchId : undefined"
+			:for="propsDefaults.searchable ? hasSearchId : undefined"
 		>
 			{{ label }}
 		</label>
@@ -383,14 +397,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"
 						:id="hasSearchId"
 						ref="inputSearchEl"
 						v-model="searchText"
@@ -484,7 +499,7 @@
 					</div>
 				</template>
 				<template #items>
-					<template v-if="filteredOptions.length">
+					<template v-if="filteredOptions?.length">
 						<template
 							v-for="(option, index) in filteredOptions"
 							:key="index"
@@ -579,7 +594,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
 		},
 	})
 
@@ -81,36 +81,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

@@ -161,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,
@@ -266,7 +270,7 @@
 	onClickOutside(
 		floatingEl,
 		() => {
-			if (!props.keepOpen) {
+			if (!props.keepOpen && expanded.value) {
 				expanded.value = false
 			}
 		},
@@ -314,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) =>

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(

package/src/components/common/HintSlot.ts

@@ -1,4 +1,5 @@
 import type { ExtractPropTypes, Slots } from 'vue'
+import type { Ref } from 'vue'
 
 /**
  * Merge array of string
@@ -19,7 +20,7 @@ export type HintSlotProps = Readonly<
 			default: ''
 			required: true
 		}
-		modelValue: null
+		modelValue: unknown
 		valid: BooleanConstructor
 		validLabel: (StringConstructor | ArrayConstructor)[]
 		invalid: BooleanConstructor
@@ -35,27 +36,39 @@ export type HintSlotProps = Readonly<
  * @param {Slots} parentSlots vue slots
  * @returns {Component} vue component
  */
-export function HintSlotFactory(props: HintSlotProps, slots: Slots) {
+export function HintSlotFactory(
+	propsOrRef: HintSlotProps | Ref<HintSlotProps>,
+	slots: Slots,
+) {
+	const props = computed(() => {
+		if (isRef(propsOrRef)) {
+			return propsOrRef.value
+		}
+		return propsOrRef
+	})
+
 	// label
-	const invalidLabel = computed(() => joinLines(props.invalidLabel))
-	const validLabel = computed(() => joinLines(props.validLabel))
-	const loadingLabel = computed(() => props.loadingLabel)
-	const hintLabel = computed(() => props.hintLabel)
+	const invalidLabel = computed(() => joinLines(props.value.invalidLabel))
+	const validLabel = computed(() => joinLines(props.value.validLabel))
+	const loadingLabel = computed(() => props.value.loadingLabel)
+	const hintLabel = computed(() => props.value.hintLabel)
 
 	// type
 	const hasLoadingLabelOrSlot = computed(() =>
-		Boolean(props.loading && (slots.loading || loadingLabel.value)),
+		Boolean(props.value.loading && (slots.loading || loadingLabel.value)),
 	)
 	const hasInvalidLabelOrSlot = computed(
 		() =>
 			!hasLoadingLabelOrSlot.value &&
-			Boolean(props.invalid && (slots.invalid || invalidLabel.value)),
+			Boolean(
+				props.value.invalid && (slots.invalid || invalidLabel.value),
+			),
 	)
 	const hasValidLabelOrSlot = computed(
 		() =>
 			!hasLoadingLabelOrSlot.value &&
 			!hasInvalidLabelOrSlot.value &&
-			Boolean(props.valid && (slots.valid || validLabel.value)),
+			Boolean(props.value.valid && (slots.valid || validLabel.value)),
 	)
 	const hasHintLabelOrSlot = computed(
 		() =>
@@ -72,10 +85,10 @@ export function HintSlotFactory(props: HintSlotProps, slots: Slots) {
 			hasHintLabelOrSlot.value,
 	)
 	const hintSlotScope = computed(() => ({
-		modelValue: props.modelValue,
-		valid: props.valid,
-		invalid: props.invalid,
-		loading: props.loading,
+		modelValue: props.value.modelValue,
+		valid: props.value.valid,
+		invalid: props.value.invalid,
+		loading: props.value.loading,
 	}))
 	// component
 	const HintSlot = defineComponent({

package/src/components/index.ts

@@ -1,5 +1,7 @@
 export { default as VvAccordion } from './VvAccordion/VvAccordion.vue'
 export { default as VvAccordionGroup } from './VvAccordionGroup/VvAccordionGroup.vue'
+export { default as VvAction } from './VvAction/VvAction.vue'
+export { default as VvAlert } from './VvAlert/VvAlert.vue'
 export { default as VvBadge } from './VvBadge/VvBadge.vue'
 export { default as VvBreadcrumb } from './VvBreadcrumb/VvBreadcrumb.vue'
 export { default as VvButton } from './VvButton/VvButton.vue'
@@ -12,8 +14,11 @@ export { default as VvDialog } from './VvDialog/VvDialog.vue'
 export { default as VvDropdown } from './VvDropdown/VvDropdown.vue'
 export { default as VvIcon } from './VvIcon/VvIcon.vue'
 export { default as VvInputText } from './VvInputText/VvInputText.vue'
+export { default as VvNav } from './VvNav/VvNav.vue'
 export { default as VvProgress } from './VvProgress/VvProgress.vue'
 export { default as VvRadio } from './VvRadio/VvRadio.vue'
 export { default as VvRadioGroup } from './VvRadioGroup/VvRadioGroup.vue'
 export { default as VvSelect } from './VvSelect/VvSelect.vue'
+export { default as VvTab } from './VvTab/VvTab.vue'
 export { default as VvTextarea } from './VvTextarea/VvTextarea.vue'
+export { default as VvTooltip } from './VvTooltip/VvTooltip.vue'