@volverjs/ui-vue 0.0.6-beta.5 → 0.0.6-beta.7

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 {
@@ -368,6 +372,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 +389,6 @@
 						v-model="searchText"
 						aria-autocomplete="list"
 						:aria-controls="hasDropdownId"
-						:aria-labelledby="hasLabelId"
-						:aria-describedby="hasHintId"
 						autocomplete="off"
 						spellcheck="false"
 						type="search"
@@ -406,9 +410,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 +569,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/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()
@@ -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"

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,

package/src/components/VvIcon/index.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue'
-import type { IconifyRenderMode } from '@iconify/vue'
+import type { IconifyIconOnLoad, IconifyRenderMode } from '@iconify/vue'
 
 export enum IconPrefix {
 	simple = 'simple',
@@ -88,7 +88,7 @@ export const VvIconProps = {
 	/**
 	 * A callback that is called when icon data has been loaded
 	 */
-	onLoad: Function,
+	onLoad: Function as PropType<IconifyIconOnLoad>,
 	/**
 	 * SVG icon string
 	 */

package/src/components/VvInputText/VvInputText.vue

@@ -41,7 +41,7 @@
 		loading,
 	} = toRefs(props)
 	const hasId = useUniqueId(id)
-	const hasDescribedBy = computed(() => `${hasId.value}-hint`)
+	const hasHintId = computed(() => `${hasId.value}-hint`)
 	// BUG: https://www.samanthaming.com/tidbits/88-css-placeholder-shown/
 	const inputTextPlaceholder = computed(() =>
 		props.floating && isEmpty(props.placeholder) ? ' ' : props.placeholder,
@@ -211,12 +211,11 @@
 			required: props.required,
 			autocomplete: props.autocomplete,
 			'aria-invalid': isInvalid.value,
-			'aria-describedby':
-				!hasInvalid.value && hasHint.value
-					? hasDescribedBy.value
-					: undefined,
-			'aria-errormessage': hasInvalid.value
-				? hasDescribedBy.value
+			'aria-describedby': hasHintLabelOrSlot.value
+				? hasHintId.value
+				: undefined,
+			'aria-errormessage': hasInvalidLabelOrSlot.value
+				? hasHintId.value
 				: undefined,
 		}
 		if (
@@ -274,7 +273,12 @@
 	}))
 
 	// components
-	const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots)
+	const {
+		HintSlot,
+		hasHintLabelOrSlot,
+		hasInvalidLabelOrSlot,
+		hintSlotScope,
+	} = HintSlotFactory(props, slots)
 	const PasswordInputActions = VvInputTextActionsFactory(
 		INPUT_TYPES.PASSWORD,
 		props,
@@ -403,6 +407,19 @@
 				</slot>
 			</span>
 		</div>
-		<HintSlot :id="hasDescribedBy" class="vv-input-text__hint" />
+		<HintSlot :id="hasHintId" class="vv-input-text__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>
 </template>

package/src/components/VvRadio/VvRadio.vue

@@ -17,6 +17,7 @@
 	const { id, disabled, readonly, modelValue, valid, invalid } =
 		useGroupProps(props, emit)
 	const hasId = useUniqueId(id)
+	const hasHintId = computed(() => `${hasId.value}-hint`)
 	const tabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
 
 	// template refs
@@ -71,7 +72,12 @@
 	)
 
 	// hint
-	const { HintSlot } = HintSlotFactory(props, slots)
+	const {
+		HintSlot,
+		hasHintLabelOrSlot,
+		hasInvalidLabelOrSlot,
+		hintSlotScope,
+	} = HintSlotFactory(props, slots)
 </script>
 
 <template>
@@ -87,10 +93,25 @@
 			:value="hasValue"
 			:tabindex="tabindex"
 			:aria-invalid="isInvalid"
+			:aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
+			:aria-errormessage="hasInvalidLabelOrSlot ? hasHintId : undefined"
 		/>
 		<slot :value="modelValue">
 			{{ label }}
 		</slot>
-		<HintSlot class="vv-radio__hint" :params="{ value: modelValue }" />
+		<HintSlot :id="hasHintId" class="vv-radio__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/VvRadioGroup/VvRadioGroup.vue

@@ -58,7 +58,7 @@
 	}
 
 	// hint
-	const { HintSlot } = HintSlotFactory(props, slots)
+	const { HintSlot, hintSlotScope } = HintSlotFactory(props, slots)
 </script>
 
 <template>
@@ -78,6 +78,19 @@
 			<slot v-else />
 			<!-- #endregion -->
 		</div>
-		<HintSlot class="vv-radio-group__hint" />
+		<HintSlot class="vv-radio-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/VvSelect/VvSelect.vue

@@ -20,7 +20,12 @@
 	const select = ref()
 
 	// hint
-	const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots)
+	const {
+		HintSlot,
+		hasHintLabelOrSlot,
+		hasInvalidLabelOrSlot,
+		hintSlotScope,
+	} = HintSlotFactory(props, slots)
 
 	// data
 	const {
@@ -39,7 +44,7 @@
 
 	// computed
 	const hasId = useUniqueId(id)
-	const hasDescribedBy = computed(() => `${hasId.value}-hint`)
+	const hasHintId = computed(() => `${hasId.value}-hint`)
 
 	// focus
 	const { focused } = useComponentFocus(select, emit)
@@ -108,12 +113,11 @@
 			autocomplete: props.autocomplete,
 			multiple: props.multiple,
 			'aria-invalid': isInvalid.value,
-			'aria-describedby':
-				!hasInvalid.value && hasHint.value
-					? hasDescribedBy.value
-					: undefined,
-			'aria-errormessage': hasInvalid.value
-				? hasDescribedBy.value
+			'aria-describedby': hasHintLabelOrSlot.value
+				? hasHintId.value
+				: undefined,
+			'aria-errormessage': hasInvalidLabelOrSlot.value
+				? hasHintId.value
 				: undefined,
 		}
 	})
@@ -218,6 +222,19 @@
 			</div>
 		</div>
 		<!-- #endregion native select -->
-		<HintSlot :id="hasDescribedBy" 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>
 </template>

package/src/components/VvTextarea/VvTextarea.vue

@@ -32,7 +32,7 @@
 		modifiers,
 	} = toRefs(props)
 	const hasId = useUniqueId(id)
-	const hasDescribedBy = computed(() => `${hasId.value}-hint`)
+	const hasHintId = computed(() => `${hasId.value}-hint`)
 	// BUG - https://www.samanthaming.com/tidbits/88-css-placeholder-shown/
 	const hasPlaceholder = computed(() =>
 		props.floating && isEmpty(props.placeholder) ? ' ' : props.placeholder,
@@ -86,7 +86,12 @@
 	})
 
 	// hint
-	const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots)
+	const {
+		HintSlot,
+		hasHintLabelOrSlot,
+		hasInvalidLabelOrSlot,
+		hintSlotScope,
+	} = HintSlotFactory(props, slots)
 
 	// styles
 	const bemCssClasses = useModifiers(
@@ -125,12 +130,11 @@
 				wrap: props.wrap,
 				spellcheck: props.spellcheck,
 				'aria-invalid': isInvalid.value,
-				'aria-describedby':
-					!hasInvalid.value && hasHint.value
-						? hasDescribedBy.value
-						: undefined,
-				'aria-errormessage': hasInvalid.value
-					? hasDescribedBy.value
+				'aria-describedby': hasHintLabelOrSlot.value
+					? hasHintId.value
+					: undefined,
+				'aria-errormessage': hasInvalidLabelOrSlot.value
+					? hasHintId.value
 					: undefined,
 			} as TextareaHTMLAttributes),
 	)
@@ -193,6 +197,19 @@
 				</slot>
 			</span>
 		</div>
-		<HintSlot :id="hasDescribedBy" class="vv-textarea__hint" />
+		<HintSlot :id="hasHintId" class="vv-textarea__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>
 </template>