@volverjs/ui-vue 0.0.9-beta.1 → 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,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)
@@ -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
 		},
 	})
 
@@ -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'

package/src/composables/alert/useAlert.ts

@@ -0,0 +1,103 @@
+import {
+	DEFAULT_ALERT_AUTO_CLOSE,
+	DEFAULT_ALERT_DISMISSABLE,
+	DEFAULT_ALERT_GROUP,
+	DEFAULT_ALERT_MODIFIERS,
+	DEFAULT_ALERT_INFO_ICON,
+	DefaultAlertIconMap,
+} from '@/constants'
+import type { Alert, AlertModifiers } from '@/types/alert'
+
+const groups = reactive(
+	new Map<string, Map<string, Alert>>([
+		[DEFAULT_ALERT_GROUP, new Map<string, Alert>()],
+	]),
+)
+
+/**
+ * @description Composable to access alert groups, alerts and functions to add, remove and get alerts by group.
+ * @example
+ *  const { groups, alerts, addAlert, removeAlert, getAlerts } = useAlert()
+ *  addAlert({
+ *      title: 'Success!',
+ *      modifiers: 'success',
+ *  })
+ *
+ *  `<vv-alert-group :items="alerts" :onClose="removeAlert" />`
+ *
+ *  @returns  {
+ *      alerts: ComputedRef<Alert[]> reactive list of alerts default group,
+ *      groups: ReactiveRef<Map<string, Map<string, Alert>>>,
+ *      addAlert: Function to add alert,
+ *      removeAlert: Function to remove alert,
+ *      getAlerts: Function to get alerts by group
+ *  }
+ */
+export const useAlert = () => {
+	const addAlert = (
+		{
+			id = crypto.randomUUID(),
+			group = DEFAULT_ALERT_GROUP,
+			title,
+			icon = DEFAULT_ALERT_INFO_ICON,
+			content,
+			footer,
+			modifiers = DEFAULT_ALERT_MODIFIERS,
+			dismissable = DEFAULT_ALERT_DISMISSABLE,
+			autoClose = DEFAULT_ALERT_AUTO_CLOSE,
+		} = {} as Partial<Alert>,
+	) => {
+		if (!groups.has(group)) {
+			groups.set(group, new Map<string, Alert>())
+		}
+		const groupMap = groups.get(group)
+		const normalizedModifiers =
+			typeof modifiers === 'string' ? modifiers.split(' ') : modifiers
+
+		if (!icon) {
+			const alertModifier = normalizedModifiers.find((modifier) =>
+				DefaultAlertIconMap.has(modifier as AlertModifiers),
+			) as AlertModifiers | undefined
+
+			if (alertModifier) {
+				icon = DefaultAlertIconMap.get(alertModifier) as string
+			}
+		}
+		groupMap?.set(id.toString(), {
+			id,
+			group,
+			title,
+			icon,
+			content,
+			footer,
+			modifiers,
+			dismissable,
+			autoClose,
+			timestamp: Date.now(),
+		})
+	}
+
+	const removeAlert = (id: string | number, group = DEFAULT_ALERT_GROUP) => {
+		const groupMap = groups.get(group)
+		groupMap?.delete(id.toString())
+	}
+
+	const getAlerts = (group = DEFAULT_ALERT_GROUP) => {
+		return computed(() => {
+			const groupMap = groups.get(group)
+			return groupMap && groupMap instanceof Map
+				? Array.from(groupMap?.values()).sort(
+						(a, b) => a.timestamp - b.timestamp,
+				  )
+				: []
+		})
+	}
+
+	return {
+		groups,
+		alerts: getAlerts(),
+		addAlert,
+		removeAlert,
+		getAlerts,
+	}
+}

package/src/composables/index.ts

@@ -0,0 +1 @@
+export { useAlert } from './alert/useAlert'