@volverjs/ui-vue 0.0.6-beta.6 → 0.0.6

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,

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>