@volverjs/ui-vue 0.0.3-beta.4 → 0.0.4

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/VvAction/VvAction.vue

@@ -0,0 +1,144 @@
+<script lang="ts">
+	export default {
+		name: 'VvAction',
+	}
+</script>
+
+<script setup lang="ts">
+	import { VvActionProps, VvActionEvents } from '@/components/VvAction'
+	import { ActionTag } from '@/constants'
+
+	// props and emits
+	const props = defineProps(VvActionProps)
+	const emits = defineEmits(VvActionEvents)
+
+	// inject plugin
+	const volver = useVolver()
+
+	const element = ref<HTMLElement | null>(null)
+	defineExpose({ $el: element })
+
+	// drowpdown trigger
+	const {
+		reference: dropdownTriggerReference,
+		bus: dropdownEventBus,
+		aria: dropdownAria,
+		expanded: dropdownExpanded,
+	} = useInjectedDropdownTrigger()
+	watch(
+		() => element.value,
+		(newValue) => {
+			if (dropdownTriggerReference) {
+				dropdownTriggerReference.value = newValue
+			}
+		},
+	)
+
+	// pressed
+	const pressed = computed(() => {
+		return props.pressed || dropdownExpanded?.value
+	})
+
+	// dropdown parent
+	const { role } = useInjectedDropdownAction()
+
+	/**
+	 * @description The tag defined by props.
+	 * @returns {string} The tag.
+	 */
+	const hasTag = computed(() => {
+		switch (true) {
+			case props.disabled:
+				return ActionTag.button
+			case props.to !== undefined:
+				return volver?.nuxt ? ActionTag.nuxtLink : ActionTag.routerLink
+			case props.href !== undefined:
+				return ActionTag.a
+			default:
+				return ActionTag.button
+		}
+	})
+
+	/**
+	 * @description Define component attributes.
+	 * @returns {Object} The component attributes.
+	 */
+	const hasProps = computed(() => {
+		const toReturn = {
+			...dropdownAria?.value,
+			'aria-pressed': pressed.value ? true : undefined,
+			role,
+		}
+		switch (hasTag.value) {
+			case ActionTag.a:
+				return {
+					...toReturn,
+					href: props.href,
+					target: props.target,
+					rel: props.rel,
+				}
+			case ActionTag.routerLink:
+			case ActionTag.nuxtLink:
+				return {
+					...toReturn,
+					to: props.to,
+					target: props.target,
+				}
+			default:
+				return {
+					...toReturn,
+					type: props.type,
+					disabled: props.disabled,
+				}
+		}
+	})
+
+	/**
+	 * @description Catch click event
+	 */
+	const onClick = (e: Event) => {
+		if (props.disabled) {
+			e.preventDefault()
+			return
+		}
+		dropdownEventBus?.emit('click', e)
+		emits('click', e)
+	}
+
+	/**
+	 * @description Catch mouseover event
+	 */
+	const onMouseover = (e: Event) => {
+		dropdownEventBus?.emit('mouseover', e)
+		emits('mouseover', e)
+	}
+
+	/**
+	 * @description Catch mouseleave event
+	 */
+	const onMouseleave = (e: Event) => {
+		dropdownEventBus?.emit('mouseleave', e)
+		emits('mouseleave', e)
+	}
+</script>
+
+<template>
+	<component
+		v-bind="hasProps"
+		:is="hasTag"
+		ref="element"
+		:class="{
+			active,
+			pressed,
+			disabled,
+		}"
+		@click.passive="onClick"
+		@mouseover.passive="onMouseover"
+		@mouseleave.passive="onMouseleave"
+	>
+		<!-- @slot Default slot -->
+		<slot>
+			{{ label }}
+		</slot>
+	</component>
+</template>

package/src/components/VvAction/index.ts

@@ -0,0 +1,5 @@
+import { ActionProps } from '@/props'
+
+export const VvActionEvents = ['click', 'mouseover', 'mouseleave']
+
+export const VvActionProps = ActionProps

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 VvAction from '@/components/VvAction/VvAction.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,62 +32,43 @@
 		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)
-
-	/**
-	 * @description The tag defined by props.
-	 * @returns {string} The tag.
-	 */
-	const hasTag = computed(() => {
-		switch (true) {
-			case disabled.value:
-				return ButtonTag.button
-			case props.to !== undefined:
-				return ds?.nuxt ? ButtonTag.nuxtLink : ButtonTag.routerLink
-			case props.href !== undefined:
-				return ButtonTag.a
-			default:
-				return ButtonTag.button
-		}
-	})
+	// expose el
+	const element = ref<{ $el: HTMLElement } | null>(null)
+	const $el = computed(() => element.value?.$el)
+	defineExpose({ $el })
 
 	/**
 	 * @description The component pressed state by prop or group.
 	 * @returns {string} The component tag.
 	 */
-	const isPressed = computed(() => {
-		if (!toggle.value) return props.pressed
-
-		return Array.isArray(modelValue.value)
-			? contains(name, modelValue.value)
-			: equals(name, modelValue.value)
+	const pressed = computed(() => {
+		if (!toggle.value) {
+			return props.pressed
+		}
+		if (Array.isArray(modelValue.value)) {
+			return contains(name.value, modelValue.value)
+		}
+		return 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,
+		computed(() => ({
+			reverse: [Side.right, Side.bottom].includes(iconPosition.value),
+			column: [Side.top, Side.bottom].includes(iconPosition.value),
+			'icon-only': Boolean(
+				icon?.value && !label?.value && !slots.default,
 			),
-		),
-		column: computed(() =>
-			[ButtonIconPosition.top, ButtonIconPosition.bottom].includes(
-				iconPosition.value,
-			),
-		),
-		iconOnly: computed(
-			() => icon?.value && !label?.value && !slots['default'],
-		),
-	})
+		})),
+	)
 
 	/**
 	 * @description Define icon attributes.
@@ -100,74 +79,53 @@
 	)
 
 	/**
-	 * @description Define component attributes.
-	 * @returns {Object} The component attributes.
-	 */
-	const hasProps = computed(() => {
-		const toReturn = {
-			class: bemCssClasses.value,
-			'aria-pressed': isPressed.value ? true : undefined,
-		}
-		switch (hasTag.value) {
-			case ButtonTag.a:
-				return {
-					...toReturn,
-					role: 'button',
-					href: props.href,
-					target: props.target,
-					rel: props.rel,
-				}
-			case ButtonTag.routerLink:
-			case ButtonTag.nuxtLink:
-				return {
-					...toReturn,
-					role: 'button',
-					to: props.to,
-					target: props.target,
-				}
-			default:
-				return {
-					...toReturn,
-					type: props.type,
-					disabled: disabled.value,
-				}
-		}
-	})
-
-	/**
-	 * @description Catch click event in a group.
+	 * @description Catch click event
 	 */
 	const onClick = () => {
 		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) {
+			if (equals(name.value, modelValue.value) && unselectable.value) {
 				modelValue.value = undefined
 				return
 			}
-			modelValue.value = name
+			modelValue.value = name.value
 		}
 	}
 </script>
 
 <template>
-	<!-- #region component: "button" | "a" | "router-link" | "nuxt-link" -->
-	<component v-bind="hasProps" :is="hasTag" @click.passive="onClick">
-		<!-- @slot Replace all button content -->
+	<VvAction
+		v-bind="{
+			disabled,
+			pressed,
+			active,
+			type,
+			to,
+			href,
+			target,
+			rel,
+		}"
+		:id="hasId"
+		ref="element"
+		:class="bemCssClasses"
+		@click="onClick"
+	>
+		<!-- @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 +137,24 @@
 					</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 -->
+	</VvAction>
 </template>