@volverjs/ui-vue 0.0.3-beta.3 → 0.0.3

package/src/components/VvAccordion/VvAccordion.vue

@@ -18,7 +18,9 @@
 	const emit = defineEmits(VvAccordionEvents)
 
 	// data
-	const accordionName = props.name || (attrs?.id as string) || nanoid()
+	const accordionName = computed(
+		() => props.name || (attrs?.id as string) || nanoid(),
+	)
 	const {
 		modifiers,
 		title,
@@ -33,9 +35,9 @@
 		get: () => {
 			if (isInGroup.value) {
 				if (collapse.value && Array.isArray(modelValue.value)) {
-					return modelValue.value.includes(accordionName)
+					return modelValue.value.includes(accordionName.value)
 				}
-				return modelValue.value === accordionName
+				return modelValue.value === accordionName.value
 			}
 			// localModelValue is used when the accordion is not in a group
 			if (modelValue.value === undefined) {
@@ -47,15 +49,15 @@
 			if (isInGroup.value) {
 				if (collapse.value && Array.isArray(modelValue.value)) {
 					if (newValue) {
-						modelValue.value.push(accordionName)
+						modelValue.value.push(accordionName.value)
 						return
 					}
 					modelValue.value = modelValue.value.filter(
-						(name: string) => name !== accordionName,
+						(name: string) => name !== accordionName.value,
 					)
 					return
 				}
-				modelValue.value = newValue ? accordionName : null
+				modelValue.value = newValue ? accordionName.value : null
 				return
 			}
 			// localModelValue is used when the accordion is not in a group
@@ -71,10 +73,13 @@
 	})
 
 	// styles
-	const { bemCssClasses } = useBemModifiers('vv-accordion', {
+	const bemCssClasses = useBemModifiers(
+		'vv-accordion',
 		modifiers,
-		disabled,
-	})
+		computed(() => ({
+			disabled: disabled.value,
+		})),
+	)
 
 	// methods
 	const onClick = useToggle(isOpen)
@@ -92,11 +97,13 @@
 			:aria-expanded="isOpen"
 			class="vv-collapse__summary"
 		>
+			<!-- @slot Slot for title -->
 			<slot name="summary" v-bind="{ open: isOpen }">
 				{{ title }}
 			</slot>
 		</summary>
 		<div :aria-hidden="!isOpen" class="vv-collapse__content">
+			<!-- @slot Slot for content  -->
 			<slot name="details" v-bind="{ open: isOpen }">
 				{{ content }}
 			</slot>

package/src/components/VvAccordion/index.ts

@@ -1,6 +1,6 @@
 import type { ExtractPropTypes, Ref } from 'vue'
-import type IAccordionGroupState from '@/composables/group/types/IAccordionGroupState'
-import { VV_ACCORDION_GROUP } from '@/constants'
+import type { AccordionGroupState } from '@/types/group'
+import { INJECTION_KEY_ACCORDION_GROUP } from '@/constants'
 
 export const VvAccordionProps = {
 	/**
@@ -43,7 +43,9 @@ export function useGroupProps(
 	emit: (event: string, value: unknown) => void,
 ) {
 	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<IAccordionGroupState>(VV_ACCORDION_GROUP)
+		useInjectedGroupState<AccordionGroupState>(
+			INJECTION_KEY_ACCORDION_GROUP,
+		)
 
 	// local props
 	const { title, content } = toRefs(props)

package/src/components/VvAccordionGroup/VvAccordionGroup.vue

@@ -6,8 +6,8 @@
 
 <script setup lang="ts">
 	import type { Ref } from 'vue'
-	import type IAccordionGroupState from '@/composables/group/types/IAccordionGroupState'
-	import { VV_ACCORDION_GROUP } from '@/constants'
+	import type { AccordionGroupState } from '@/types/group'
+	import { INJECTION_KEY_ACCORDION_GROUP } from '@/constants'
 	import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
 	import {
 		VvAccordionGroupProps,
@@ -61,26 +61,29 @@
 	})
 
 	// provide
-	const accordionGroupState: IAccordionGroupState = {
-		key: VV_ACCORDION_GROUP,
+	useProvideGroupState<AccordionGroupState>({
+		key: INJECTION_KEY_ACCORDION_GROUP,
 		modelValue,
 		disabled,
 		collapse,
 		modifiers: itemModifiers,
-	}
-	useProvideGroupState(accordionGroupState)
+	})
 
 	// styles
-	const { bemCssClasses } = useBemModifiers('vv-accordion-group', {
+	const bemCssClasses = useBemModifiers(
+		'vv-accordion-group',
 		modifiers,
-		disabled,
-	})
+		computed(() => ({
+			disabled: disabled.value,
+		})),
+	)
 </script>
 
 <template>
 	<div :class="bemCssClasses">
+		<!-- @slot Default slot -->
 		<slot>
-			<vv-accordion
+			<VvAccordion
 				v-for="item in items"
 				:key="item.title"
 				v-bind="{
@@ -90,12 +93,14 @@
 				}"
 			>
 				<template #header="data">
+					<!-- @slot Slot for accordion header -->
 					<slot v-bind="data" :name="`header::${item.name}`" />
 				</template>
 				<template #details="data">
+					<!-- @slot Slot for accordion details -->
 					<slot v-bind="data" :name="`details::${item.name}`" />
 				</template>
-			</vv-accordion>
+			</VvAccordion>
 		</slot>
 	</div>
 </template>

package/src/components/VvBadge/VvBadge.vue

@@ -8,13 +8,13 @@
 	import { VvBadgeProps } from '@/components/VvBadge'
 
 	const props = defineProps(VvBadgeProps)
-	const { bemCssClasses } = useBemModifiers('vv-badge', {
-		modifiers: props.modifiers,
-	})
+	const { modifiers } = toRefs(props)
+	const bemCssClasses = useBemModifiers('vv-badge', modifiers)
 </script>
 
 <template>
 	<span :class="bemCssClasses" role="status">
+		<!-- @slot Default slot -->
 		<slot>{{ value }}</slot>
 	</span>
 </template>

package/src/components/VvBreadcrumb/VvBreadcrumb.vue

@@ -9,9 +9,8 @@
 	import { VvBreadcrumbProps } from '@/components/VvBreadcrumb'
 
 	const props = defineProps(VvBreadcrumbProps)
-	const { bemCssClasses } = useBemModifiers('vv-breadcrumb', {
-		modifiers: props.modifiers,
-	})
+	const { modifiers } = toRefs(props)
+	const bemCssClasses = useBemModifiers('vv-breadcrumb', modifiers)
 </script>
 
 <template>
@@ -29,7 +28,7 @@
 				itemtype="https://schema.org/ListItem"
 				itemscope
 			>
-				<component
+				<Component
 					:is="route.to ? 'router-link' : route.href ? 'a' : 'span'"
 					v-bind="route"
 					:class="{
@@ -43,10 +42,11 @@
 					"
 					itemprop="item"
 				>
+					<!-- @slot Slot for label -->
 					<slot name="label" v-bind="{ route, index }">
 						{{ route.label }}
 					</slot>
-				</component>
+				</Component>
 				<meta itemprop="position" :content="`${index + 1}`" />
 			</li>
 		</ol>

package/src/components/VvButton/VvButton.vue

@@ -5,16 +5,14 @@
 </script>
 
 <script setup lang="ts">
-	import { nanoid } from 'nanoid'
-	import { type IVolver, VOLVER_PREFIX } from '@/Volver'
 	import VvIcon from '@/components/VvIcon/VvIcon.vue'
 	import {
-		ButtonIconPosition,
 		VvButtonEvents,
 		ButtonTag,
 		VvButtonProps,
 		useGroupProps,
 	} from '@/components/VvButton'
+	import { Side } from '@/constants'
 
 	// props, attrs, slots and emit
 	const props = defineProps(VvButtonProps)
@@ -23,8 +21,8 @@
 	const emit = defineEmits(VvButtonEvents)
 
 	// data
-	const name = (attrs?.name as string) || nanoid()
 	const {
+		id,
 		modifiers,
 		iconPosition,
 		icon,
@@ -34,9 +32,33 @@
 		toggle,
 		unselectable,
 	} = useGroupProps(props, emit)
+	const hasId = useUniqueId(id)
+	const name = computed(() => (attrs?.name as string) || hasId.value)
 
-	// inject Volver
-	const ds = inject<IVolver>(VOLVER_PREFIX)
+	// inject plugin
+	const volver = useVolver()
+
+	// expose el
+	const $el = ref<HTMLElement | null>(null)
+	defineExpose({ $el })
+
+	// drowpdown trigger
+	const {
+		reference: dropdownTriggerReference,
+		bus: dropdownEventBus,
+		aria: dropdownAria,
+	} = useInjectedDropdownTrigger()
+	watch(
+		() => $el.value,
+		(newValue) => {
+			if (dropdownTriggerReference) {
+				dropdownTriggerReference.value = newValue
+			}
+		},
+	)
+
+	// dropdown parent
+	const { role } = useInjectedDropdownAction()
 
 	/**
 	 * @description The tag defined by props.
@@ -47,7 +69,7 @@
 			case disabled.value:
 				return ButtonTag.button
 			case props.to !== undefined:
-				return ds?.nuxt ? ButtonTag.nuxtLink : ButtonTag.routerLink
+				return volver?.nuxt ? ButtonTag.nuxtLink : ButtonTag.routerLink
 			case props.href !== undefined:
 				return ButtonTag.a
 			default:
@@ -63,33 +85,26 @@
 		if (!toggle.value) return props.pressed
 
 		return Array.isArray(modelValue.value)
-			? contains(name, modelValue.value)
-			: equals(name, modelValue.value)
+			? contains(name.value, modelValue.value)
+			: equals(name.value, modelValue.value)
 	})
 
 	/**
 	 * @description Define component classes with BEM style.
 	 * @returns {Array} The component classes.
 	 */
-	const { bemCssClasses } = useBemModifiers('vv-button', {
+	const bemCssClasses = useBemModifiers(
+		'vv-button',
 		modifiers,
-		active: props.active,
-		pressed: isPressed,
-		disabled,
-		reverse: computed(() =>
-			[ButtonIconPosition.right, ButtonIconPosition.bottom].includes(
-				iconPosition.value,
-			),
-		),
-		column: computed(() =>
-			[ButtonIconPosition.top, ButtonIconPosition.bottom].includes(
-				iconPosition.value,
-			),
-		),
-		iconOnly: computed(
-			() => icon?.value && !label?.value && !slots['default'],
-		),
-	})
+		computed(() => ({
+			active: props.active,
+			pressed: isPressed.value,
+			disabled: disabled.value,
+			reverse: [Side.right, Side.bottom].includes(iconPosition.value),
+			column: [Side.top, Side.bottom].includes(iconPosition.value),
+			iconOnly: Boolean(icon?.value && !label?.value && !slots.default),
+		})),
+	)
 
 	/**
 	 * @description Define icon attributes.
@@ -105,14 +120,16 @@
 	 */
 	const hasProps = computed(() => {
 		const toReturn = {
-			class: bemCssClasses.value,
+			...dropdownAria?.value,
 			'aria-pressed': isPressed.value ? true : undefined,
+			class: bemCssClasses.value,
+			role,
 		}
 		switch (hasTag.value) {
 			case ButtonTag.a:
 				return {
 					...toReturn,
-					role: 'button',
+					role: toReturn.role ?? 'button',
 					href: props.href,
 					target: props.target,
 					rel: props.rel,
@@ -121,7 +138,7 @@
 			case ButtonTag.nuxtLink:
 				return {
 					...toReturn,
-					role: 'button',
+					role: toReturn.role ?? 'button',
 					to: props.to,
 					target: props.target,
 				}
@@ -135,39 +152,62 @@
 	})
 
 	/**
-	 * @description Catch click event in a group.
+	 * @description Catch click event
 	 */
-	const onClick = () => {
+	const onClick = (e: Event) => {
+		dropdownEventBus?.emit('click', e)
 		if (toggle.value) {
 			if (Array.isArray(modelValue.value)) {
-				if (contains(name, modelValue.value)) {
+				if (contains(name.value, modelValue.value)) {
 					if (unselectable.value) {
 						modelValue.value = modelValue.value.filter(
-							(n) => n !== name,
+							(n) => n !== name.value,
 						)
 					}
 					return
 				}
-				modelValue.value.push(name)
+				modelValue.value.push(name.value)
 				return
 			}
 			if (equals(name, modelValue.value) && unselectable.value) {
 				modelValue.value = undefined
 				return
 			}
-			modelValue.value = name
+			modelValue.value = name.value
 		}
 	}
+
+	/**
+	 * @description Catch mouseover event
+	 */
+	const onMouseover = (e: Event) => {
+		dropdownEventBus?.emit('mouseover', e)
+	}
+
+	/**
+	 * @description Catch mouseleave event
+	 */
+	const onMouseleave = (e: Event) => {
+		dropdownEventBus?.emit('mouseleave', e)
+	}
 </script>
 
 <template>
 	<!-- #region component: "button" | "a" | "router-link" | "nuxt-link" -->
-	<component v-bind="hasProps" :is="hasTag" @click.passive="onClick">
-		<!-- @slot Replace all button content -->
+	<component
+		v-bind="hasProps"
+		:is="hasTag"
+		:id="hasId"
+		ref="$el"
+		@click.passive="onClick"
+		@mouseover.passive="onMouseover"
+		@mouseleave.passive="onMouseleave"
+	>
+		<!-- @slot Default slot -->
 		<slot>
 			<!-- #region loading -->
 			<template v-if="loading">
-				<!-- @slot Replace all button content on loading -->
+				<!-- @slot Slot for loading content -->
 				<slot name="loading">
 					<VvIcon
 						v-if="loadingIcon"
@@ -179,29 +219,25 @@
 					</span>
 				</slot>
 			</template>
-			<!-- #endregion loading -->
+			<!-- #endregion -->
 			<!-- #region button -->
 			<template v-else>
 				<!-- @slot Before label and icon -->
 				<slot name="before" />
-				<!-- #region icon -->
 				<template v-if="icon">
 					<VvIcon class="vv-button__icon" v-bind="hasIconProps" />
 				</template>
-				<!-- #endregion icon -->
-				<!-- #region label  -->
 				<span v-if="label" class="vv-button__label">
 					<!-- @slot Use this slot for button label -->
 					<slot name="label">
 						{{ label }}
 					</slot>
 				</span>
-				<!-- #endregion label  -->
 				<!-- @slot After label and icon -->
 				<slot name="after" />
 			</template>
-			<!-- #endregion button -->
+			<!-- #endregion -->
 		</slot>
 	</component>
-	<!-- #endregion component: button | a | router-link | nuxt-link -->
+	<!-- #endregion -->
 </template>

package/src/components/VvButton/index.ts

@@ -1,14 +1,12 @@
 import type { Ref, PropType, ExtractPropTypes } from 'vue'
-import type IButtonGroupState from '@/composables/group/types/IButtonGroupState'
-import { DisabledProps, ModifiersProps, UnselectableProps } from '@/props'
-import { VV_BUTTON_GROUP } from '@/constants'
-
-export enum ButtonIconPosition {
-	left = 'left',
-	right = 'right',
-	top = 'top',
-	bottom = 'bottom',
-}
+import type { ButtonGroupState } from '@/types/group'
+import {
+	DisabledProps,
+	IdProps,
+	ModifiersProps,
+	UnselectableProps,
+} from '@/props'
+import { INJECTION_KEY_BUTTON_GROUP, Side } from '@/constants'
 
 export enum ButtonType {
 	button = 'button',
@@ -33,23 +31,21 @@ export enum ButtonTarget {
 export const VvButtonEvents = ['update:modelValue']
 
 export const VvButtonProps = {
+	...IdProps,
 	...ModifiersProps,
 	...DisabledProps,
 	...UnselectableProps,
 	/**
 	 * Button icon
 	 */
-	icon: {
-		type: [String, Object],
-		default: '',
-	},
+	icon: [String, Object],
 	/**
 	 * Button icon position
 	 */
 	iconPosition: {
-		type: String as PropType<ButtonIconPosition>,
-		default: ButtonIconPosition.left,
-		validator: (value: string) => value in ButtonIconPosition,
+		type: String as PropType<Side>,
+		default: Side.left,
+		validator: (value: Side) => Object.values(Side).includes(value),
 	},
 	/**
 	 * Button label
@@ -86,7 +82,8 @@ export const VvButtonProps = {
 	 */
 	target: {
 		type: String as PropType<ButtonTarget>,
-		validator: (value: string) => value in ButtonTarget,
+		validator: (value: ButtonTarget) =>
+			Object.values(ButtonTarget).includes(value),
 	},
 	active: Boolean,
 	/**
@@ -106,7 +103,8 @@ export const VvButtonProps = {
 	type: {
 		type: String,
 		default: ButtonType.button,
-		validator: (value: string) => value in ButtonType,
+		validator: (value: ButtonType) =>
+			Object.values(ButtonType).includes(value),
 	},
 	toggle: {
 		type: Boolean,
@@ -125,10 +123,11 @@ export function useGroupProps(
 	emit: (event: (typeof VvButtonEvents)[number], value: unknown) => void,
 ) {
 	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<IButtonGroupState>(VV_BUTTON_GROUP)
+		useInjectedGroupState<ButtonGroupState>(INJECTION_KEY_BUTTON_GROUP)
 
 	// local props
 	const {
+		id,
 		iconPosition,
 		icon,
 		label,
@@ -172,6 +171,7 @@ export function useGroupProps(
 		unselectable,
 		multiple,
 		// local props
+		id,
 		modifiers,
 		pressed,
 		iconPosition,

package/src/components/VvButtonGroup/VvButtonGroup.vue

@@ -5,8 +5,8 @@
 </script>
 
 <script setup lang="ts">
-	import type IButtonGroupState from '@/composables/group/types/IButtonGroupState'
-	import { VV_BUTTON_GROUP } from '@/constants'
+	import type { ButtonGroupState } from '@/types/group'
+	import { INJECTION_KEY_BUTTON_GROUP } from '@/constants'
 	import {
 		VvButtonGroupProps,
 		VvButtonGroupEvents,
@@ -55,26 +55,23 @@
 	})
 
 	// provide
-	const groupState: IButtonGroupState = {
-		key: VV_BUTTON_GROUP,
+	useProvideGroupState<ButtonGroupState>({
+		key: INJECTION_KEY_BUTTON_GROUP,
 		modelValue,
 		disabled,
 		toggle,
 		multiple,
 		unselectable,
 		itemModifiers,
-	}
-	useProvideGroupState(groupState)
+	})
 
 	// style
-	const { bemCssClasses } = useBemModifiers('vv-button-group', {
-		modifiers,
-	})
+	const bemCssClasses = useBemModifiers('vv-button-group', modifiers)
 </script>
 
 <template>
 	<div :class="bemCssClasses" role="group">
-		<!-- @slot Buttons slot -->
+		<!-- @slot Default slot -->
 		<slot />
 	</div>
 </template>

package/src/components/VvCard/VvCard.vue

@@ -11,23 +11,26 @@
 	const props = defineProps(VvCardProps)
 
 	// styles
-	const { bemCssClasses } = useBemModifiers('vv-card', {
-		modifiers: props.modifiers,
-	})
+	const { modifiers } = toRefs(props)
+	const bemCssClasses = useBemModifiers('vv-card', modifiers)
 </script>
 
 <template>
 	<article :class="bemCssClasses">
 		<header v-if="$slots.header || title" class="vv-card__header">
+			<!-- @slot Title slot -->
 			<slot name="header">
 				{{ title }}
 			</slot>
 		</header>
+		<!-- @slot Default slot -->
 		<slot />
 		<div v-if="$slots.content" class="vv-card__content">
+			<!-- @slot Content slot -->
 			<slot name="content" />
 		</div>
 		<footer v-if="$slots.footer" class="vv-card__footer">
+			<!-- @slot Footer slot -->
 			<slot name="footer" />
 		</footer>
 	</article>

package/src/components/VvCheckbox/VvCheckbox.vue

@@ -5,7 +5,6 @@
 </script>
 
 <script setup lang="ts">
-	import { nanoid } from 'nanoid'
 	import {
 		VvCheckboxProps,
 		VvCheckboxEvents,
@@ -20,6 +19,7 @@
 
 	// data
 	const {
+		id,
 		disabled,
 		readonly,
 		valid,
@@ -29,7 +29,7 @@
 		indeterminate,
 		isInGroup,
 	} = useGroupProps(props, emit)
-	const id = computed(() => String(props.id || nanoid()))
+	const hasId = useUniqueId(id)
 	const tabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
 
 	// template ref
@@ -107,14 +107,19 @@
 	})
 
 	// styles
-	const { bemCssClasses } = useBemModifiers('vv-checkbox', {
-		switch: propsSwitch,
-		valid,
-		invalid,
-		disabled,
-		readonly,
-		indeterminate,
-	})
+	const { modifiers } = toRefs(props)
+	const bemCssClasses = useBemModifiers(
+		'vv-checkbox',
+		modifiers,
+		computed(() => ({
+			switch: propsSwitch.value,
+			valid: valid.value,
+			invalid: invalid.value,
+			disabled: disabled.value,
+			readonly: readonly.value,
+			indeterminate: indeterminate.value,
+		})),
+	)
 
 	watchEffect(() => {
 		if (isBinary.value && Array.isArray(modelValue.value)) {
@@ -147,9 +152,9 @@
 </script>
 
 <template>
-	<label :class="bemCssClasses" :for="id">
+	<label :class="bemCssClasses" :for="hasId">
 		<input
-			:id="id"
+			:id="hasId"
 			ref="input"
 			v-model="localModelValue"
 			type="checkbox"