@volverjs/ui-vue 0.0.5 → 0.0.6-beta.15

package/src/components/VvButton/index.ts

@@ -33,11 +33,34 @@ export const VvButtonProps = {
 	 * Loading icon
 	 */
 	loadingIcon: { type: String, default: 'eos-icons:bubble-loading' },
+	/**
+	 * Enable button toggle
+	 */
 	toggle: {
 		type: Boolean,
 		default: false,
 	},
-	modelValue: String,
+	/**
+	 * Button toggle value
+	 */
+	value: {
+		type: [String, Number, Boolean],
+		default: undefined,
+	},
+	/**
+	 * Value associated with the unchecked state
+	 */
+	uncheckedValue: {
+		type: [String, Number, Boolean],
+		default: undefined,
+	},
+	/**
+	 * Button toggle model value
+	 */
+	modelValue: {
+		type: [String, Number, Boolean],
+		default: undefined,
+	},
 }
 
 export type VvButtonPropsTypes = ExtractPropTypes<typeof VvButtonProps>
@@ -53,18 +76,11 @@ export function useGroupProps(
 		useInjectedGroupState<ButtonGroupState>(INJECTION_KEY_BUTTON_GROUP)
 
 	// local props
-	const {
-		id,
-		iconPosition,
-		icon,
-		label,
-		pressed,
-		modifiers: localModifiers,
-	} = toRefs(props)
+	const { id, iconPosition, icon, label, pressed } = toRefs(props)
 
 	// group props
 	const modelValue = getGroupOrLocalRef('modelValue', props, emit) as Ref<
-		string | Array<string> | undefined
+		string | number | boolean | (string | number | boolean)[] | undefined
 	>
 	const toggle = getGroupOrLocalRef('toggle', props) as Ref<boolean>
 	const unselectable = getGroupOrLocalRef(
@@ -72,18 +88,25 @@ export function useGroupProps(
 		props,
 	) as Ref<boolean>
 	const multiple = computed(() => group?.value.multiple.value ?? false)
+	// merge local and group modifiers
 	const modifiers = computed(() => {
-		const localValue = localModifiers?.value
-			? Array.isArray(localModifiers.value)
-				? localModifiers.value
-				: localModifiers.value.split(' ')
-			: []
-		const groupValue = group?.value.itemModifiers?.value
-			? Array.isArray(group.value.itemModifiers.value)
-				? group.value.itemModifiers.value
-				: group.value.itemModifiers.value.split(' ')
-			: []
-		return [...localValue, ...groupValue]
+		let localModifiers = props.modifiers
+		let groupModifiers = group?.value.modifiers.value
+
+		const toReturn = new Set<string>()
+		if (localModifiers) {
+			if (!Array.isArray(localModifiers)) {
+				localModifiers = localModifiers.split(' ')
+			}
+			localModifiers.forEach((modifier) => toReturn.add(modifier))
+		}
+		if (groupModifiers) {
+			if (!Array.isArray(groupModifiers)) {
+				groupModifiers = groupModifiers.split(' ')
+			}
+			groupModifiers.forEach((modifier) => toReturn.add(modifier))
+		}
+		return Array.from(toReturn)
 	})
 	const disabled = computed(() =>
 		Boolean(props.disabled || group?.value?.disabled.value),

package/src/components/VvButtonGroup/VvButtonGroup.vue

@@ -45,7 +45,7 @@
 				(Array.isArray(props.modelValue) || multiple.value) &&
 				!Array.isArray(newValue)
 			) {
-				newValue = [newValue]
+				return emit('update:modelValue', [newValue])
 			}
 			return emit('update:modelValue', newValue)
 		},
@@ -59,7 +59,7 @@
 		toggle,
 		multiple,
 		unselectable,
-		itemModifiers,
+		modifiers: itemModifiers,
 	})
 
 	// style

package/src/components/VvButtonGroup/index.ts

@@ -7,10 +7,22 @@ export const VvButtonGroupProps = {
 	/**
 	 * String or String[] of css classes (modifiers) that will be provided to each button'
 	 */
-	itemModifiers: { type: [String, Array<string>], default: undefined },
+	itemModifiers: {
+		type: [String, Array] as PropType<string | string[]>,
+		default: '',
+	},
 	toggle: { type: Boolean, default: false },
 	multiple: { type: Boolean, default: false },
-	modelValue: { type: [String, Array<string>], default: undefined },
+	modelValue: {
+		type: [String, Number, Boolean, Array] as PropType<
+			| string
+			| number
+			| boolean
+			| (string | number | boolean)[]
+			| undefined
+		>,
+		default: undefined,
+	},
 }
 
 export const VvButtonGroupEvents = ['update:modelValue']

package/src/components/VvCard/index.ts

@@ -1,4 +1,6 @@
+import { ModifiersProps } from '@/props'
+
 export const VvCardProps = {
+	...ModifiersProps,
 	title: String,
-	modifiers: [String, Array],
 }

package/src/components/VvCheckbox/VvCheckbox.vue

@@ -26,6 +26,7 @@
 		isInGroup,
 	} = useGroupProps(props, emit)
 	const hasId = useUniqueId(id)
+	const hasHintId = computed(() => `${hasId.value}-hint`)
 	const tabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
 
 	// template ref
@@ -144,7 +145,12 @@
 	})
 
 	// hint
-	const { HintSlot } = HintSlotFactory(props, slots)
+	const {
+		HintSlot,
+		hasHintLabelOrSlot,
+		hasInvalidLabelOrSlot,
+		hintSlotScope,
+	} = HintSlotFactory(props, slots)
 </script>
 
 <template>
@@ -160,11 +166,26 @@
 			:value="hasValue"
 			:tabindex="tabindex"
 			:aria-invalid="isInvalid"
+			:aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
+			:aria-errormessage="hasInvalidLabelOrSlot ? hasHintId : undefined"
 		/>
 		<!-- @slot Use this slot for check label -->
 		<slot :value="modelValue">
 			{{ label }}
 		</slot>
-		<HintSlot class="vv-checkbox__hint" :params="{ value: modelValue }" />
+		<HintSlot :id="hasHintId" class="vv-checkbox__hint">
+			<template v-if="$slots.hint" #hint>
+				<slot name="hint" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.loading" #loading>
+				<slot name="loading" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.valid" #valid>
+				<slot name="valid" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.invalid" #invalid>
+				<slot name="invalid" v-bind="hintSlotScope" />
+			</template>
+		</HintSlot>
 	</label>
 </template>

package/src/components/VvCheckboxGroup/VvCheckboxGroup.vue

@@ -56,7 +56,7 @@
 			value: getOptionValue(option),
 		}
 	}
-	const { HintSlot } = HintSlotFactory(props, slots)
+	const { HintSlot, hintSlotScope } = HintSlotFactory(props, slots)
 </script>
 
 <template>
@@ -74,6 +74,19 @@
 			<!-- #endregion -->
 			<slot v-else />
 		</div>
-		<HintSlot class="vv-checkbox-group__hint" />
+		<HintSlot class="vv-checkbox-group__hint">
+			<template v-if="$slots.hint" #hint>
+				<slot name="hint" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.loading" #loading>
+				<slot name="loading" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.valid" #valid>
+				<slot name="valid" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.invalid" #invalid>
+				<slot name="invalid" v-bind="hintSlotScope" />
+			</template>
+		</HintSlot>
 	</fieldset>
 </template>

package/src/components/VvCombobox/VvCombobox.vue

@@ -39,7 +39,12 @@
 	}
 
 	// hint slot
-	const { HintSlot } = HintSlotFactory(props, slots)
+	const {
+		HintSlot,
+		hasHintLabelOrSlot,
+		hasInvalidLabelOrSlot,
+		hintSlotScope,
+	} = HintSlotFactory(props, slots)
 
 	// template ref
 	const inputEl: Ref<HTMLElement | null> = ref(null)
@@ -93,19 +98,18 @@
 		if (props.disabled || props.readonly || !expanded.value) return
 		expanded.value = false
 	}
-	watch(expanded, (newValue) => {
+	const onAfterExpand = () => {
 		if (searchable.value) {
-			nextTick(() => {
-				if (newValue) {
-					if (inputSearchEl.value) {
-						inputSearchEl.value.focus()
-					}
-					return
-				}
-				searchText.value = ''
-			})
+			if (inputSearchEl.value) {
+				inputSearchEl.value.focus()
+			}
 		}
-	})
+	}
+	const onAfterCollapse = () => {
+		if (searchable.value) {
+			searchText.value = ''
+		}
+	}
 
 	// data
 	const {
@@ -233,12 +237,6 @@
 			.join(props.separator)
 	})
 
-	watch(selectedOptions, () => {
-		if (!props.multiple && props.autoClose) {
-			collapse()
-		}
-	})
-
 	/**
 	 * Function triggered on click on input
 	 */
@@ -280,7 +278,7 @@
 				toReturn = [value as Option]
 			}
 		} else {
-			if (props.autoClose) {
+			if (!props.keepOpen) {
 				collapse()
 			}
 			if (props.unselectable && value === props.modelValue) {
@@ -328,7 +326,6 @@
 		flip: props.flip,
 		autoPlacement: props.autoPlacement,
 		arrow: props.arrow,
-		autoClose: props.autoClose,
 		autofocusFirst: searchable.value ? false : props.autofocusFirst,
 		triggerWidth: props.triggerWidth,
 		modifiers: props.dropdownModifiers,
@@ -368,6 +365,8 @@
 				v-model="expanded"
 				v-bind="dropdownProps"
 				:role="DropdownRole.listbox"
+				@after-expand="onAfterExpand"
+				@after-collapse="onAfterCollapse"
 			>
 				<template
 					v-if="searchable || $slots['dropdown::before']"
@@ -383,8 +382,6 @@
 						v-model="searchText"
 						aria-autocomplete="list"
 						:aria-controls="hasDropdownId"
-						:aria-labelledby="hasLabelId"
-						:aria-describedby="hasHintId"
 						autocomplete="off"
 						spellcheck="false"
 						type="search"
@@ -406,9 +403,16 @@
 						<div
 							ref="inputEl"
 							v-bind="aria"
-							:aria-labelledby="hasLabelId"
 							class="vv-select__input"
 							role="combobox"
+							:aria-expanded="expanded"
+							:aria-labelledby="hasLabelId"
+							:aria-describedby="
+								hasHintLabelOrSlot ? hasHintId : undefined
+							"
+							:aria-errormessage="
+								hasInvalidLabelOrSlot ? hasHintId : undefined
+							"
 							:tabindex="hasTabindex"
 							@click.passive="onClickInput"
 						>
@@ -558,7 +562,20 @@
 				</template>
 			</VvDropdown>
 		</div>
-		<HintSlot :id="hasHintId" class="vv-select__hint" />
+		<HintSlot :id="hasHintId" class="vv-select__hint">
+			<template v-if="$slots.hint" #hint>
+				<slot name="hint" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.loading" #loading>
+				<slot name="loading" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.valid" #valid>
+				<slot name="valid" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.invalid" #invalid>
+				<slot name="invalid" v-bind="hintSlotScope" />
+			</template>
+		</HintSlot>
 	</div>
 	<VvSelect
 		v-else

package/src/components/VvCombobox/index.ts

@@ -117,7 +117,7 @@ export const VvComboboxProps = {
 	 * Badge modifiers
 	 */
 	badgeModifiers: {
-		type: [String, Array] as PropType<string | Array<string>>,
+		type: [String, Array] as PropType<string | string[]>,
 		default: 'action sm',
 	},
 	/**
@@ -131,14 +131,20 @@ export const VvComboboxProps = {
 	 * Dropdown modifiers
 	 */
 	dropdownModifiers: {
-		type: [String, Array] as PropType<string | Array<string>>,
+		type: [String, Array] as PropType<string | string[]>,
 	},
 	/**
 	 * Open dropdown on focus
 	 */
-	autoOpen: Boolean,
+	autoOpen: {
+		type: Boolean,
+		default: false,
+	},
 	/**
-	 * Close dropdown on select (not multiple)
+	 * Keep open dropdown on single select
 	 */
-	autoClose: Boolean,
+	keepOpen: {
+		type: Boolean,
+		default: false,
+	},
 }

package/src/components/VvDialog/VvDialog.vue

@@ -9,9 +9,10 @@
 	import VvIcon from '../VvIcon/VvIcon.vue'
 	import { VvDialogEvents, VvDialogProps } from '.'
 
-	// props and emit
+	// props, emit and template refs
 	const props = defineProps(VvDialogProps)
 	const emit = defineEmits(VvDialogEvents)
+	const dialogEl: Ref<HTMLDialogElement | undefined> = ref()
 
 	// data
 	const localModelValue = ref(false)
@@ -26,7 +27,6 @@
 			emit('update:modelValue', value)
 		},
 	})
-	const htmlAttrIsOpen = ref(true)
 
 	// template ref
 	const modalWrapper = ref(null)
@@ -36,7 +36,6 @@
 		const { id } = props
 		return {
 			id,
-			open: htmlAttrIsOpen.value,
 		} as DialogHTMLAttributes
 	})
 	const dialogClass = computed(() => {
@@ -50,18 +49,18 @@
 	const transitioName = computed(() => `vv-dialog--${props.transition}`)
 	const dialogTransitionHandlers = {
 		'before-enter': () => {
-			htmlAttrIsOpen.value = true
+			dialogEl.value?.showModal()
 			emit('open')
 		},
 		'after-leave': () => {
-			htmlAttrIsOpen.value = false
+			dialogEl.value?.close()
 			emit('close')
 		},
 	}
 
 	// methods
 	onClickOutside(modalWrapper, () => {
-		if (props.autoClose) {
+		if (!props.keepOpen) {
 			modelValue.value = false
 		}
 	})
@@ -87,7 +86,12 @@
 
 <template>
 	<Transition :name="transitioName" v-on="dialogTransitionHandlers">
-		<dialog v-show="modelValue" v-bind="dialogAttrs" :class="dialogClass">
+		<dialog
+			v-show="modelValue"
+			v-bind="dialogAttrs"
+			ref="dialogEl"
+			:class="dialogClass"
+		>
 			<article ref="modalWrapper" class="vv-dialog__wrapper">
 				<header v-if="$slots.header || title" class="vv-dialog__header">
 					<!-- @slot Header slot -->

package/src/components/VvDialog/index.ts

@@ -24,7 +24,7 @@ export const VvDialogProps = {
 	 */
 	size: String,
 	/**
-	 * Close dialog on click outside
+	 * Keep open dialog on click outside
 	 */
-	autoClose: { type: Boolean, default: true },
+	keepOpen: { type: Boolean, default: false },
 }

package/src/components/VvDropdown/VvDropdown.vue

@@ -28,7 +28,13 @@
 
 	// props, emit and attrs
 	const props = defineProps(VvDropdownProps)
-	const emit = defineEmits(['update:modelValue'])
+	const emit = defineEmits([
+		'update:modelValue',
+		'beforeExpand',
+		'beforeCollapse',
+		'afterExpand',
+		'afterCollapse',
+	])
 	const { id } = toRefs(props)
 	const hasId = useUniqueId(id)
 	const attrs = useAttrs()
@@ -212,7 +218,7 @@
 	onClickOutside(
 		floatingEl,
 		() => {
-			if (props.autoClose) {
+			if (!props.keepOpen) {
 				expanded.value = false
 			}
 		},
@@ -334,6 +340,12 @@
 			activeElement.click()
 		}
 	})
+	const onTransitionBeforeEnter = () => {
+		emit(expanded.value ? 'beforeExpand' : 'beforeCollapse')
+	}
+	const onTransitionAfterLeave = () => {
+		emit(expanded.value ? 'afterExpand' : 'afterCollapse')
+	}
 </script>
 
 <template>
@@ -342,7 +354,13 @@
 			v-bind="{ init, show, hide, toggle, expanded, aria: referenceAria }"
 		/>
 	</VvDropdownTriggerProvider>
-	<Transition :name="transitionName">
+	<Transition
+		:name="transitionName"
+		v-on="{
+			beforeEnter: onTransitionBeforeEnter,
+			onAfterLeave: onTransitionAfterLeave,
+		}"
+	>
 		<div
 			v-show="expanded"
 			ref="floatingEl"
@@ -356,7 +374,7 @@
 				class="vv-dropdown__arrow"
 			></div>
 			<slot name="before" v-bind="{ expanded }" />
-			<ul
+			<div
 				v-bind="attrs"
 				:id="hasId"
 				ref="listEl"
@@ -371,7 +389,7 @@
 						role: itemRole,
 					}"
 				/>
-			</ul>
+			</div>
 			<slot name="after" v-bind="{ expanded }" />
 		</div>
 	</Transition>

package/src/components/VvDropdown/VvDropdownItem.vue

@@ -21,12 +21,12 @@
 </script>
 
 <template>
-	<li
+	<div
 		v-bind="{ role }"
 		ref="element"
 		class="vv-dropdown__item"
 		:class="{ 'focus-visible': focused || focusedWithin }"
 	>
 		<slot />
-	</li>
+	</div>
 </template>

package/src/components/VvIcon/VvIcon.vue

@@ -5,12 +5,19 @@
 </script>
 
 <script setup lang="ts">
-	import { Icon, addIcon, iconExists, type IconifyJSON } from '@iconify/vue'
+	import { Icon, addIcon, iconExists } from '@iconify/vue'
 	import { VvIconProps } from '.'
 
 	// props
 	const props = defineProps(VvIconProps)
 
+	const hasRotate = computed(() => {
+		if (typeof props.rotate === 'string') {
+			return parseFloat(props.rotate)
+		}
+		return props.rotate
+	})
+
 	// data
 	const show = ref(true)
 
@@ -21,49 +28,43 @@
 	const { modifiers } = toRefs(props)
 	const bemCssClasses = useModifiers('vv-icon', modifiers)
 
-	/**
-	 * Provider name
-	 */
+	// provider name
 	const provider = computed(() => {
 		return props.provider || volver?.iconsProvider
 	})
 
-	/**
-	 * Icon name
-	 */
+	// icon name
 	const icon = computed(() => {
-		const _name = props.name ?? ''
+		const name = props.name ?? ''
 		// compose Iconify icon name format
-		const iconName = `@${provider.value}:${props.prefix}:${props.name}`
+		const iconName = `@${provider.value}:${props.prefix}:${name}`
 
-		// Check first if icon with "name" exist
-		if (iconExists(_name)) {
-			return _name
-		} else if (iconExists(iconName)) {
-			// Check and return composed icon name if exist
+		// Check if icon with prefix and provider exist
+		if (iconExists(iconName)) {
 			return iconName
-		} else {
-			// Check into all collections and set "iconName" data
-			return (
-				volver?.iconsCollections.find(
-					(iconsCollection: IconifyJSON) => {
-						const icon = `@${provider.value}:${iconsCollection.prefix}:${_name}`
-						if (iconExists(icon)) {
-							return icon
-						}
-					},
-				) || _name
-			)
 		}
+
+		// Check if icon exist into any collection
+		const iconsCollection = volver?.iconsCollections.find(
+			(iconsCollection) => {
+				const icon = `@${provider.value}:${iconsCollection.prefix}:${name}`
+				return iconExists(icon)
+			},
+		)
+		if (iconsCollection) {
+			return `@${provider.value}:${iconsCollection.prefix}:${name}`
+		}
+
+		return name
 	})
 
 	/**
 	 * Get SVG content from SVG string
 	 * @param {string} svg
-	 * @return {SVGSVGElement | null} https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement
+	 * @return {SVGSVGElement | undefined} https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement
 	 */
-	function getSvgContent(svg: string): SVGSVGElement | null {
-		let dom = null
+	function getSvgContent(svg: string): SVGSVGElement | undefined {
+		let dom
 		if (typeof window === 'undefined') {
 			// SSR
 			// eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
@@ -81,7 +82,7 @@
 	 * @param {string} svg
 	 */
 	function addIconFromSvg(svg: string) {
-		const svgContentEl: SVGSVGElement | null = getSvgContent(svg)
+		const svgContentEl = getSvgContent(svg)
 		const svgContent = svgContentEl?.innerHTML.trim() || ''
 		if (svgContentEl && svgContent) {
 			addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
@@ -108,12 +109,14 @@
 					}
 				})
 				.catch((e) => {
-					throw new Error(`During fetch icon: ${e?.message}`)
+					throw new Error(`Error during fetch icon: ${e?.message}`)
 				})
-		} else if (props.svg) {
-			addIconFromSvg(props.svg)
 		}
 	}
+
+	if (props.svg) {
+		addIconFromSvg(props.svg)
+	}
 </script>
 
 <template>
@@ -127,7 +130,7 @@
 			horizontalFlip,
 			verticalFlip,
 			flip,
-			rotate,
+			rotate: hasRotate,
 			color,
 			onLoad,
 			icon,