@volverjs/ui-vue 0.0.3 → 0.0.5-beta.1

package/src/components/VvAccordion/VvAccordion.vue

@@ -6,11 +6,7 @@
 
 <script setup lang="ts">
 	import { nanoid } from 'nanoid'
-	import {
-		VvAccordionEvents,
-		VvAccordionProps,
-		useGroupProps,
-	} from '@/components/VvAccordion'
+	import { VvAccordionEvents, VvAccordionProps, useGroupProps } from '.'
 
 	// props, attrs and emit
 	const props = defineProps(VvAccordionProps)
@@ -29,23 +25,28 @@
 		collapse,
 		modelValue,
 		isInGroup,
+		not,
 	} = useGroupProps(props, emit)
 	const localModelValue = ref(false)
 	const isOpen = computed({
 		get: () => {
+			let toReturn = modelValue.value as boolean
 			if (isInGroup.value) {
 				if (collapse.value && Array.isArray(modelValue.value)) {
-					return modelValue.value.includes(accordionName.value)
+					toReturn = modelValue.value.includes(accordionName.value)
+				} else {
+					toReturn = modelValue.value === accordionName.value
 				}
-				return modelValue.value === accordionName.value
+			} else if (modelValue.value === undefined) {
+				// localModelValue is used when the accordion is not in a group
+				toReturn = localModelValue.value
 			}
-			// localModelValue is used when the accordion is not in a group
-			if (modelValue.value === undefined) {
-				return localModelValue.value
-			}
-			return modelValue.value as boolean
+			return not.value ? !toReturn : toReturn
 		},
 		set: (newValue) => {
+			if (not.value) {
+				newValue = !newValue
+			}
 			if (isInGroup.value) {
 				if (collapse.value && Array.isArray(modelValue.value)) {
 					if (newValue) {
@@ -73,7 +74,7 @@
 	})
 
 	// styles
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-accordion',
 		modifiers,
 		computed(() => ({
@@ -86,25 +87,21 @@
 </script>
 
 <template>
-	<details
-		:id="accordionName"
-		:class="bemCssClasses"
-		:open="isOpen"
-		@click.prevent="onClick()"
-	>
+	<details :id="accordionName" :class="bemCssClasses" :open="isOpen">
 		<summary
 			:aria-controls="accordionName"
 			:aria-expanded="isOpen"
-			class="vv-collapse__summary"
+			class="vv-accordion__summary"
+			@click.prevent="onClick()"
 		>
 			<!-- @slot Slot for title -->
 			<slot name="summary" v-bind="{ open: isOpen }">
 				{{ title }}
 			</slot>
 		</summary>
-		<div :aria-hidden="!isOpen" class="vv-collapse__content">
+		<div :aria-hidden="!isOpen" class="vv-accordion__content">
 			<!-- @slot Slot for content  -->
-			<slot name="details" v-bind="{ open: isOpen }">
+			<slot name="default" v-bind="{ open: isOpen }">
 				{{ content }}
 			</slot>
 		</div>

package/src/components/VvAccordion/index.ts

@@ -1,6 +1,6 @@
 import type { ExtractPropTypes, Ref } from 'vue'
-import type { AccordionGroupState } from '@/types/group'
-import { INJECTION_KEY_ACCORDION_GROUP } from '@/constants'
+import type { AccordionGroupState } from '../../types/group'
+import { INJECTION_KEY_ACCORDION_GROUP } from '../../constants'
 
 export const VvAccordionProps = {
 	/**
@@ -30,6 +30,10 @@ export const VvAccordionProps = {
 	 * If true, the accordion will be disabled
 	 */
 	disabled: Boolean,
+	/**
+	 * If true, the accordion will be opened by default
+	 */
+	not: Boolean,
 }
 
 export const VvAccordionEvents = ['update:modelValue']
@@ -52,20 +56,24 @@ export function useGroupProps(
 
 	// group props
 	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
-	const disabled = getGroupOrLocalRef('disabled', props) as Ref<boolean>
+	const not = getGroupOrLocalRef('not', props) as Ref<boolean>
 	const collapse = getGroupOrLocalRef('collapse', props) as Ref<boolean>
 	const modifiers = getGroupOrLocalRef('modifiers', props) as Ref<
 		Array<string> | string
 	>
+	const disabled = computed(() =>
+		Boolean(props.disabled || group?.value?.disabled.value),
+	)
 
 	return {
 		// group props
 		modelValue,
-		disabled,
+		not,
 		isInGroup,
 		group,
 		collapse,
 		modifiers,
+		disabled,
 		// local props
 		title,
 		content,

package/src/components/VvAccordionGroup/VvAccordionGroup.vue

@@ -6,20 +6,17 @@
 
 <script setup lang="ts">
 	import type { Ref } from 'vue'
-	import type { AccordionGroupState } from '@/types/group'
-	import { INJECTION_KEY_ACCORDION_GROUP } from '@/constants'
-	import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
-	import {
-		VvAccordionGroupProps,
-		VvAccordionGroupEvents,
-	} from '@/components/VvAccordionGroup/'
+	import type { AccordionGroupState } from '../../types/group'
+	import { INJECTION_KEY_ACCORDION_GROUP } from '../../constants'
+	import VvAccordion from '../VvAccordion/VvAccordion.vue'
+	import { VvAccordionGroupProps, VvAccordionGroupEvents } from '.'
 
 	// props and emit
 	const props = defineProps(VvAccordionGroupProps)
 	const emit = defineEmits(VvAccordionGroupEvents)
 
 	// data
-	const { disabled, collapse, modifiers, itemModifiers, items } =
+	const { disabled, collapse, modifiers, itemModifiers, items, not } =
 		toRefs(props)
 	watchEffect(() => {
 		if (typeof props.modelValue === 'string' && collapse.value) {
@@ -29,7 +26,18 @@
 			)
 		}
 	})
-	const localModelValue: Ref<string[]> = ref([])
+	let localModelValue: Ref<string[]> = ref([])
+	watch(
+		() => props.storeKey,
+		(newKey) => {
+			if (newKey) {
+				localModelValue = useStorage(newKey, localModelValue.value)
+			} else {
+				localModelValue = ref([])
+			}
+		},
+		{ immediate: true },
+	)
 	const modelValue = computed({
 		get: () => {
 			if (props.modelValue !== undefined) {
@@ -67,10 +75,11 @@
 		disabled,
 		collapse,
 		modifiers: itemModifiers,
+		not,
 	})
 
 	// styles
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-accordion-group',
 		modifiers,
 		computed(() => ({

package/src/components/VvAccordionGroup/index.ts

@@ -35,6 +35,14 @@ export const VvAccordionGroupProps = {
 	 * If true, the accordion items will be disabled
 	 */
 	disabled: Boolean,
+	/**
+	 * If true, the accordion items will be opened by default
+	 */
+	not: Boolean,
+	/**
+	 * Enable local storage persistence
+	 */
+	storeKey: String,
 }
 
 export const VvAccordionGroupEvents = ['update:modelValue']

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 '.'
+	import { ActionTag } from '../../constants'
+
+	// props and emit
+	const props = defineProps(VvActionProps)
+	const emit = 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)
+		emit('click', e)
+	}
+
+	/**
+	 * @description Catch mouseover event
+	 */
+	const onMouseover = (e: Event) => {
+		dropdownEventBus?.emit('mouseover', e)
+		emit('mouseover', e)
+	}
+
+	/**
+	 * @description Catch mouseleave event
+	 */
+	const onMouseleave = (e: Event) => {
+		dropdownEventBus?.emit('mouseleave', e)
+		emit('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

@@ -5,11 +5,11 @@
 </script>
 
 <script setup lang="ts">
-	import { VvBadgeProps } from '@/components/VvBadge'
+	import { VvBadgeProps } from '.'
 
 	const props = defineProps(VvBadgeProps)
 	const { modifiers } = toRefs(props)
-	const bemCssClasses = useBemModifiers('vv-badge', modifiers)
+	const bemCssClasses = useModifiers('vv-badge', modifiers)
 </script>
 
 <template>

package/src/components/VvBadge/index.ts

@@ -1,4 +1,4 @@
-import { ModifiersProps } from '@/props'
+import { ModifiersProps } from '../../props'
 
 export const VvBadgeProps = {
 	...ModifiersProps,

package/src/components/VvBreadcrumb/VvBreadcrumb.vue

@@ -5,12 +5,12 @@
 </script>
 
 <script setup lang="ts">
-	import { useBemModifiers } from '@/composables/useModifiers'
-	import { VvBreadcrumbProps } from '@/components/VvBreadcrumb'
+	import { useModifiers } from '../../composables/useModifiers'
+	import { VvBreadcrumbProps } from '.'
 
 	const props = defineProps(VvBreadcrumbProps)
 	const { modifiers } = toRefs(props)
-	const bemCssClasses = useBemModifiers('vv-breadcrumb', modifiers)
+	const bemCssClasses = useModifiers('vv-breadcrumb', modifiers)
 </script>
 
 <template>

package/src/components/VvButton/VvButton.vue

@@ -5,14 +5,10 @@
 </script>
 
 <script setup lang="ts">
-	import VvIcon from '@/components/VvIcon/VvIcon.vue'
-	import {
-		VvButtonEvents,
-		ButtonTag,
-		VvButtonProps,
-		useGroupProps,
-	} from '@/components/VvButton'
-	import { Side } from '@/constants'
+	import VvIcon from '../VvIcon/VvIcon.vue'
+	import VvAction from '../VvAction/VvAction.vue'
+	import { VvButtonEvents, VvButtonProps, useGroupProps } from '.'
+	import { Side } from '../../constants'
 
 	// props, attrs, slots and emit
 	const props = defineProps(VvButtonProps)
@@ -35,74 +31,42 @@
 	const hasId = useUniqueId(id)
 	const name = computed(() => (attrs?.name as string) || hasId.value)
 
-	// inject plugin
-	const volver = useVolver()
-
 	// expose el
-	const $el = ref<HTMLElement | null>(null)
+	const element = ref<{ $el: HTMLElement } | null>(null)
+	const $el = computed(() => element.value?.$el)
 	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.
-	 * @returns {string} The tag.
-	 */
-	const hasTag = computed(() => {
-		switch (true) {
-			case disabled.value:
-				return ButtonTag.button
-			case props.to !== undefined:
-				return volver?.nuxt ? ButtonTag.nuxtLink : ButtonTag.routerLink
-			case props.href !== undefined:
-				return ButtonTag.a
-			default:
-				return ButtonTag.button
-		}
-	})
-
 	/**
 	 * @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.value, modelValue.value)
-			: equals(name.value, 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(
+	const bemCssClasses = useModifiers(
 		'vv-button',
 		modifiers,
 		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),
+			reverse: [Side.right, Side.bottom].includes(
+				iconPosition.value as Side,
+			),
+			column: [Side.top, Side.bottom].includes(
+				iconPosition.value as Side,
+			),
+			'icon-only': Boolean(
+				icon?.value && !label?.value && !slots.default,
+			),
 		})),
 	)
 
@@ -114,48 +78,10 @@
 		typeof icon?.value === 'string' ? { name: icon?.value } : icon?.value,
 	)
 
-	/**
-	 * @description Define component attributes.
-	 * @returns {Object} The component attributes.
-	 */
-	const hasProps = computed(() => {
-		const toReturn = {
-			...dropdownAria?.value,
-			'aria-pressed': isPressed.value ? true : undefined,
-			class: bemCssClasses.value,
-			role,
-		}
-		switch (hasTag.value) {
-			case ButtonTag.a:
-				return {
-					...toReturn,
-					role: toReturn.role ?? 'button',
-					href: props.href,
-					target: props.target,
-					rel: props.rel,
-				}
-			case ButtonTag.routerLink:
-			case ButtonTag.nuxtLink:
-				return {
-					...toReturn,
-					role: toReturn.role ?? 'button',
-					to: props.to,
-					target: props.target,
-				}
-			default:
-				return {
-					...toReturn,
-					type: props.type,
-					disabled: disabled.value,
-				}
-		}
-	})
-
 	/**
 	 * @description Catch click event
 	 */
-	const onClick = (e: Event) => {
-		dropdownEventBus?.emit('click', e)
+	const onClick = () => {
 		if (toggle.value) {
 			if (Array.isArray(modelValue.value)) {
 				if (contains(name.value, modelValue.value)) {
@@ -169,39 +95,31 @@
 				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.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"
+	<VvAction
+		v-bind="{
+			disabled,
+			pressed,
+			active,
+			type,
+			to,
+			href,
+			target,
+			rel,
+		}"
 		:id="hasId"
-		ref="$el"
-		@click.passive="onClick"
-		@mouseover.passive="onMouseover"
-		@mouseleave.passive="onMouseleave"
+		ref="element"
+		:class="bemCssClasses"
+		@click="onClick"
 	>
 		<!-- @slot Default slot -->
 		<slot>
@@ -238,6 +156,5 @@
 			</template>
 			<!-- #endregion -->
 		</slot>
-	</component>
-	<!-- #endregion -->
+	</VvAction>
 </template>