@volverjs/ui-vue 0.0.10-beta.3 → 0.0.10-beta.31

package/src/components/VvAccordion/VvAccordion.vue

@@ -5,72 +5,121 @@
 </script>
 
 <script setup lang="ts">
-	import { nanoid } from 'nanoid'
+	import { uid } from 'uid'
 	import { VvAccordionEvents, VvAccordionProps, useGroupProps } from '.'
 
 	// props, attrs and emit
 	const props = defineProps(VvAccordionProps)
 	const attrs = useAttrs()
 	const emit = defineEmits(VvAccordionEvents)
+	const modelValue = useVModel(props, 'modelValue', emit)
 
 	// data
 	const accordionName = computed(
-		() => props.name || (attrs?.id as string) || nanoid(),
+		() => props.name || (attrs?.id as string) || uid(),
 	)
-	const {
-		modifiers,
-		title,
-		content,
-		disabled,
-		collapse,
+	const { title, content, not } = toRefs(props)
+	const { isInGroup, modifiers, disabled, bus } = useGroupProps(props)
+
+	// state
+	const isExpanded = ref(false)
+	watch(
 		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)) {
-					toReturn = modelValue.value.includes(accordionName.value)
-				} else {
-					toReturn = modelValue.value === accordionName.value
-				}
-			} else if (modelValue.value === undefined) {
-				// localModelValue is used when the accordion is not in a group
-				toReturn = localModelValue.value
+		(newValue) => {
+			if (typeof newValue === 'boolean') {
+				isExpanded.value = not.value ? !newValue : newValue
 			}
-			return not.value ? !toReturn : toReturn
 		},
-		set: (newValue) => {
-			if (not.value) {
-				newValue = !newValue
-			}
-			if (isInGroup.value) {
-				if (collapse.value && Array.isArray(modelValue.value)) {
-					if (newValue) {
-						modelValue.value.push(accordionName.value)
-						return
-					}
-					modelValue.value = modelValue.value.filter(
-						(name: string) => name !== accordionName.value,
-					)
-					return
+		{ immediate: true },
+	)
+	watch(isExpanded, (newValue) => {
+		modelValue.value = not.value ? !newValue : newValue
+	})
+	bus?.on('toggle', ({ name, value }) => {
+		if (name !== accordionName.value) {
+			return
+		}
+		isExpanded.value = value
+	})
+	const onClick = () => {
+		if (disabled.value) {
+			return
+		}
+		if (isInGroup.value) {
+			bus?.emit('toggle', {
+				name: accordionName.value,
+				value: !isExpanded.value,
+			})
+			return
+		}
+		isExpanded.value = !isExpanded.value
+	}
+
+	// register / unregister
+	watch(
+		accordionName,
+		(newValue, oldValue) => {
+			if (bus) {
+				if (oldValue && oldValue !== newValue) {
+					bus.emit('unregister', { name: oldValue })
 				}
-				modelValue.value = newValue ? accordionName.value : null
-				return
-			}
-			// localModelValue is used when the accordion is not in a group
-			if (
-				modelValue.value === undefined &&
-				typeof newValue === 'boolean'
-			) {
-				localModelValue.value = newValue
-				return
+				bus.emit('register', { name: newValue })
 			}
-			modelValue.value = newValue
 		},
+		{
+			immediate: true,
+		},
+	)
+	onBeforeUnmount(() => {
+		if (bus) {
+			bus.emit('unregister', { name: accordionName.value })
+		}
+	})
+
+	// methods
+	const expand = () => {
+		if (isExpanded.value) {
+			return
+		}
+		onClick()
+	}
+
+	const collapse = () => {
+		if (!isExpanded.value) {
+			return
+		}
+		onClick()
+	}
+
+	const groupExpand = (name?: string | string[]) => {
+		if (!bus) {
+			// eslint-disable-next-line no-console
+			console.warn(
+				`[VvAccordion]: You are trying to expand accordion group of "${accordionName.value}" but it is not in a group`,
+			)
+			return
+		}
+		bus.emit('expand', { name })
+	}
+
+	const groupCollapse = (name?: string | string[]) => {
+		if (!bus) {
+			// eslint-disable-next-line no-console
+			console.warn(
+				`[VvAccordion]: You are trying to collapse accordion group of "${accordionName.value}" but it is not in a group`,
+			)
+			return
+		}
+		bus?.emit('collapse', { name })
+	}
+
+	// expose
+	defineExpose({
+		isExpanded,
+		expand,
+		collapse,
+		groupExpand,
+		groupCollapse,
 	})
 
 	// styles
@@ -81,27 +130,41 @@
 			disabled: disabled.value,
 		})),
 	)
-
-	// methods
-	const onClick = useToggle(isOpen)
 </script>
 
 <template>
-	<details :id="accordionName" :class="bemCssClasses" :open="isOpen">
+	<details :id="accordionName" :class="bemCssClasses" :open="isExpanded">
 		<summary
 			:aria-controls="accordionName"
-			:aria-expanded="isOpen"
+			:aria-expanded="isExpanded"
 			class="vv-accordion__summary"
 			@click.prevent="onClick()"
 		>
 			<!-- @slot Slot for title -->
-			<slot name="summary" v-bind="{ open: isOpen }">
+			<slot
+				name="summary"
+				v-bind="{
+					isExpanded,
+					expand,
+					collapse,
+					groupExpand,
+					groupCollapse,
+				}"
+			>
 				{{ title }}
 			</slot>
 		</summary>
-		<div :aria-hidden="!isOpen" class="vv-accordion__content">
+		<div :aria-hidden="!isExpanded" class="vv-accordion__content">
 			<!-- @slot Slot for content  -->
-			<slot name="default" v-bind="{ open: isOpen }">
+			<slot
+				v-bind="{
+					isExpanded,
+					expand,
+					collapse,
+					groupExpand,
+					groupCollapse,
+				}"
+			>
 				{{ content }}
 			</slot>
 		</div>

package/src/components/VvAccordion/index.ts

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, Ref } from 'vue'
+import type { ExtractPropTypes } from 'vue'
 import type { AccordionGroupState } from '../../types/group'
 import { INJECTION_KEY_ACCORDION_GROUP } from '../../constants'
 import { ModifiersProps } from '@/props'
@@ -40,29 +40,19 @@ export type VvAccordionPropsTypes = ExtractPropTypes<typeof VvAccordionProps>
 /**
  * Merges local and group props
  */
-export function useGroupProps(
-	props: VvAccordionPropsTypes,
-	emit: (event: string, value: unknown) => void,
-) {
-	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<AccordionGroupState>(
-			INJECTION_KEY_ACCORDION_GROUP,
-		)
-
-	// local props
-	const { title, content } = toRefs(props)
+export function useGroupProps(props: VvAccordionPropsTypes) {
+	const { group, isInGroup } = useInjectedGroupState<AccordionGroupState>(
+		INJECTION_KEY_ACCORDION_GROUP,
+	)
 
 	// group props
-	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
-	const not = getGroupOrLocalRef('not', props) as Ref<boolean>
-	const collapse = getGroupOrLocalRef('collapse', props) as Ref<boolean>
 	const disabled = computed(() =>
-		Boolean(props.disabled || group?.value?.disabled.value),
+		Boolean(props.disabled || group?.disabled.value),
 	)
 	// merge local and group modifiers
 	const modifiers = computed(() => {
 		let localModifiers = props.modifiers
-		let groupModifiers = group?.value.modifiers.value
+		let groupModifiers = group?.modifiers.value
 
 		const toReturn = new Set<string>()
 		if (localModifiers) {
@@ -82,15 +72,10 @@ export function useGroupProps(
 
 	return {
 		// group props
-		modelValue,
-		not,
 		isInGroup,
 		group,
-		collapse,
 		modifiers,
 		disabled,
-		// local props
-		title,
-		content,
+		bus: group?.bus,
 	}
 }

package/src/components/VvAccordionGroup/VvAccordionGroup.vue

@@ -5,78 +5,183 @@
 </script>
 
 <script setup lang="ts">
-	import type { Ref } from 'vue'
-	import type { AccordionGroupState } from '../../types/group'
+	import mitt from 'mitt'
+	import type {
+		AccordionGroupState,
+		AccordionGroupBusEvents,
+	} 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)
+	// eslint-disable-next-line
 	const emit = defineEmits(VvAccordionGroupEvents)
 
 	// data
-	const { disabled, collapse, modifiers, itemModifiers, items, not } =
-		toRefs(props)
+	const {
+		disabled,
+		modifiers,
+		itemModifiers,
+		items,
+		storageKey,
+		storageType,
+	} = toRefs(props)
 	watchEffect(() => {
-		if (typeof props.modelValue === 'string' && collapse.value) {
-			// eslint-disable-next-line
+		if (typeof props.modelValue === 'string' && props.collapse) {
+			// eslint-disable-next-line no-console
 			console.warn(
 				`[VvAccordionGroup]: modelValue is a string but collapse is true.`,
 			)
 		}
 	})
-	let localModelValue: Ref<string[]> = ref([])
-	watch(
-		() => props.storeKey,
-		(newKey) => {
-			if (newKey) {
-				localModelValue = useStorage(newKey, localModelValue.value)
-			} else {
-				localModelValue = ref([])
-			}
-		},
-		{ immediate: true },
+
+	const accordionNames = reactive(new Set<string>())
+	const storageModelValue = usePersistence<string | string[] | undefined>(
+		storageKey,
+		storageType,
+		[],
 	)
-	const modelValue = computed({
+	const localModelValue = computed({
 		get: () => {
-			if (props.modelValue !== undefined) {
-				if (!collapse.value) {
-					return Array.isArray(props.modelValue)
-						? props.modelValue[0]
-						: props.modelValue
-				}
+			if (props.modelValue !== null && props.modelValue !== undefined) {
 				return props.modelValue
 			}
-			return !collapse.value
-				? localModelValue.value?.[0]
-				: localModelValue.value
+			return storageModelValue.value
 		},
 		set: (newValue) => {
-			if (props.modelValue !== undefined) {
-				if (
-					(Array.isArray(props.modelValue) || collapse.value) &&
-					!Array.isArray(newValue)
-				) {
-					newValue = [newValue]
+			emit('update:modelValue', newValue)
+			storageModelValue.value = newValue
+		},
+	})
+	const expandedAccordions = computed<Set<string>>({
+		get: () => {
+			if (localModelValue.value === undefined) {
+				return new Set<string>()
+			}
+			let toReturn = new Set<string>()
+			if (props.not) {
+				if (typeof localModelValue.value === 'string') {
+					toReturn = new Set<string>(
+						[...accordionNames].filter(
+							(name) => name !== localModelValue.value,
+						),
+					)
+				} else if (Array.isArray(localModelValue.value)) {
+					toReturn = new Set<string>(
+						[...accordionNames].filter(
+							(name) =>
+								!(localModelValue.value as string[]).includes(
+									name,
+								),
+						),
+					)
 				}
-				return emit('update:modelValue', newValue)
+			} else if (typeof localModelValue.value === 'string') {
+				toReturn = new Set<string>([localModelValue.value])
+			} else if (Array.isArray(localModelValue.value)) {
+				toReturn = new Set<string>(localModelValue.value)
+			}
+			return toReturn
+		},
+		set: (newValue) => {
+			if (props.not) {
+				localModelValue.value = [...accordionNames].filter(
+					(name) => !newValue.has(name),
+				)
+				return
+			}
+			if (props.collapse) {
+				localModelValue.value = [...newValue]
+				return
 			}
-			localModelValue.value = Array.isArray(newValue)
-				? newValue
-				: [newValue]
+			localModelValue.value = newValue.values().next().value
 		},
 	})
+	onMounted(() => {
+		if (props.not && localModelValue.value === undefined) {
+			localModelValue.value = props.collapse
+				? []
+				: [...accordionNames.values()].splice(1, accordionNames.size)
+		}
+		nextTick(() => {
+			for (const name of accordionNames) {
+				bus.emit('toggle', {
+					name,
+					value: expandedAccordions.value.has(name),
+				})
+			}
+		})
+	})
 
 	// provide
-	useProvideGroupState<AccordionGroupState>({
-		key: INJECTION_KEY_ACCORDION_GROUP,
-		modelValue,
+	const bus = mitt<AccordionGroupBusEvents>()
+	useProvideGroupState<AccordionGroupState>(INJECTION_KEY_ACCORDION_GROUP, {
 		disabled,
-		collapse,
 		modifiers: itemModifiers,
-		not,
+		bus,
+	})
+	bus.on('register', ({ name }) => {
+		accordionNames.add(name)
 	})
+	bus.on('unregister', ({ name }) => {
+		accordionNames.delete(name)
+	})
+	bus.on('toggle', ({ name, value }) => {
+		const newValue = new Set<string>(expandedAccordions.value)
+		if (value) {
+			if (!props.collapse) {
+				for (const item of newValue) {
+					if (item !== name) {
+						bus.emit('toggle', { name: item, value: false })
+					}
+				}
+				newValue.clear()
+			}
+			newValue.add(name)
+			expandedAccordions.value = newValue
+			return
+		}
+		newValue.delete(name)
+		expandedAccordions.value = newValue
+	})
+	const expand = (name?: string | string[]) => {
+		if (typeof name === 'string') {
+			bus.emit('toggle', { name, value: true })
+			return
+		}
+		if (Array.isArray(name)) {
+			for (const item of name) {
+				bus.emit('toggle', { name: item, value: true })
+			}
+			return
+		}
+		for (const item of accordionNames) {
+			bus.emit('toggle', { name: item, value: true })
+		}
+	}
+	bus.on('expand', ({ name }) => expand(name))
+
+	const collapse = (name?: string | string[]) => {
+		if (typeof name === 'string') {
+			bus.emit('toggle', { name, value: false })
+			return
+		}
+		if (Array.isArray(name)) {
+			for (const item of name) {
+				bus.emit('toggle', { name: item, value: false })
+			}
+			return
+		}
+		for (const item of accordionNames) {
+			bus.emit('toggle', { name: item, value: false })
+		}
+	}
+	bus.on('collapse', ({ name }) => collapse(name))
+
+	// expose
+	defineExpose({ expandedAccordions, expand, collapse })
 
 	// styles
 	const bemCssClasses = useModifiers(
@@ -91,7 +196,13 @@
 <template>
 	<div :class="bemCssClasses">
 		<!-- @slot Default slot -->
-		<slot>
+		<slot
+			v-bind="{
+				expandedAccordions,
+				expand,
+				collapse,
+			}"
+		>
 			<VvAccordion
 				v-for="item in items"
 				:key="item.title"
@@ -101,13 +212,19 @@
 					content: item.content,
 				}"
 			>
-				<template #header="data">
+				<template
+					v-if="$slots[`summary::${item.name}`]"
+					#summary="data"
+				>
 					<!-- @slot Slot for accordion header -->
-					<slot v-bind="data" :name="`header::${item.name}`" />
+					<slot v-bind="data" :name="`summary::${item.name}`" />
 				</template>
-				<template #details="data">
+				<template
+					v-if="$slots[`content::${item.name}`]"
+					#default="data"
+				>
 					<!-- @slot Slot for accordion details -->
-					<slot v-bind="data" :name="`details::${item.name}`" />
+					<slot v-bind="data" :name="`content::${item.name}`" />
 				</template>
 			</VvAccordion>
 		</slot>

package/src/components/VvAccordionGroup/index.ts

@@ -1,4 +1,4 @@
-import { ModifiersProps } from '@/props'
+import { ModifiersProps, StorageProps } from '@/props'
 
 export interface VvAccordionGroupItem {
 	title: string
@@ -10,10 +10,14 @@ export interface VvAccordionGroupItem {
 
 export const VvAccordionGroupProps = {
 	...ModifiersProps,
+	...StorageProps,
 	/**
 	 * VModel
 	 */
-	modelValue: [String, Array],
+	modelValue: {
+		type: [String, Array] as PropType<string | string[] | undefined>,
+		default: undefined,
+	},
 	/**
 	 * Accordion items
 	 * @type VvAccordionGroupItem
@@ -41,10 +45,6 @@ export const VvAccordionGroupProps = {
 	 * 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

@@ -11,6 +11,7 @@
 	// props and emit
 	const props = defineProps(VvActionProps)
 	const emit = defineEmits(VvActionEvents)
+	const instance = getCurrentInstance()
 
 	// inject plugin
 	const volver = useVolver()
@@ -55,7 +56,7 @@
 			case props.href !== undefined:
 				return ActionTag.a
 			default:
-				return ActionTag.button
+				return props.defaultTag // button
 		}
 	})
 
@@ -85,12 +86,14 @@
 					to: props.to,
 					target: props.target,
 				}
-			default:
+			case ActionTag.button:
 				return {
 					...toReturn,
 					type: props.type,
 					disabled: props.disabled,
 				}
+			default:
+				return toReturn
 		}
 	})
 
@@ -102,24 +105,33 @@
 			e.preventDefault()
 			return
 		}
+		if (instance?.vnode.props?.onClick) {
+			emit('click', e)
+			return
+		}
 		dropdownEventBus?.emit('click', e)
-		emit('click', e)
 	}
 
 	/**
 	 * @description Catch mouseover event
 	 */
 	const onMouseover = (e: Event) => {
+		if (instance?.vnode.props?.onMouseover) {
+			emit('mouseover', e)
+			return
+		}
 		dropdownEventBus?.emit('mouseover', e)
-		emit('mouseover', e)
 	}
 
 	/**
 	 * @description Catch mouseleave event
 	 */
 	const onMouseleave = (e: Event) => {
+		if (instance?.vnode.props?.onMouseleave) {
+			emit('mouseleave', e)
+			return
+		}
 		dropdownEventBus?.emit('mouseleave', e)
-		emit('mouseleave', e)
 	}
 </script>
 

package/src/components/VvAlert/index.ts

@@ -1,11 +1,18 @@
-import { IconProps, IdProps, ModifiersProps } from '@/props'
-import type { ExtractPropTypes, PropType } from 'vue'
-import { withModifiers } from 'vue'
+import { type ExtractPropTypes, type PropType, withModifiers } from 'vue'
+import { AlertRole } from '@/constants'
+import { IconProps, IdProps } from '@/props'
+import type { AlertModifier } from '@/types'
 
 export const VvAlertProps = {
 	...IdProps,
-	...ModifiersProps,
 	...IconProps,
+	/**
+	 * Component BEM modifiers
+	 */
+	modifiers: {
+		type: [String, Array] as PropType<AlertModifier | AlertModifier[]>,
+		default: undefined,
+	},
 	/**
 	 * The alert is dismissable
 	 * @default false
@@ -69,8 +76,8 @@ export const VvAlertProps = {
 	 * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_role
 	 */
 	role: {
-		type: String as PropType<'alert' | 'alertdialog'>,
-		default: 'alert',
+		type: String as PropType<`${AlertRole}`>,
+		default: AlertRole.alert,
 	},
 }
 
@@ -86,9 +93,7 @@ export const useVvAlert = (
 	const hasTitleId = computed(() => `${hasId.value}-title`)
 
 	// icon
-	const hasIcon = computed(() =>
-		typeof props.icon === 'string' ? { name: props.icon } : props.icon,
-	)
+	const { hasIcon } = useComponentIcon(computed(() => props.icon))
 
 	// props
 	const hasClass = useModifiers(