@volverjs/ui-vue 0.0.10-beta.22 → 0.0.10-beta.24

package/src/components/VvAccordion/VvAccordion.vue

@@ -12,65 +12,114 @@
 	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) || 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,8 +5,11 @@
 </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 '.'
@@ -16,67 +19,157 @@
 	const emit = defineEmits(VvAccordionGroupEvents)
 
 	// data
-	const { disabled, collapse, modifiers, itemModifiers, items, not } =
-		toRefs(props)
+	const { disabled, modifiers, itemModifiers, items } = 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([])
+
+	const accordionNames = reactive(new Set<string>())
+	let modelValue = ref(new Set<string>())
 	watch(
 		() => props.storeKey,
-		(newKey) => {
+		(newKey, oldKey) => {
+			if (oldKey && oldKey !== newKey) {
+				localStorage.removeItem(oldKey)
+			}
 			if (newKey) {
-				localModelValue = useStorage(newKey, localModelValue.value)
-			} else {
-				localModelValue = ref([])
+				modelValue = useLocalStorage(newKey, modelValue.value)
+				return
 			}
+			modelValue = ref(new Set<string>(modelValue.value))
 		},
 		{ immediate: true },
 	)
-	const modelValue = computed({
-		get: () => {
-			if (props.modelValue !== undefined) {
-				if (!collapse.value) {
-					return Array.isArray(props.modelValue)
-						? props.modelValue[0]
-						: props.modelValue
-				}
-				return props.modelValue
+	watch(
+		[modelValue, accordionNames, () => props.not, () => props.collapse],
+		() => {
+			if (props.not) {
+				emit(
+					'update:modelValue',
+					[...accordionNames].filter(
+						(name) => !modelValue.value.has(name),
+					),
+				)
+				return
 			}
-			return !collapse.value
-				? localModelValue.value?.[0]
-				: localModelValue.value
+			if (props.collapse) {
+				emit('update:modelValue', [...modelValue.value])
+				return
+			}
+			emit('update:modelValue', modelValue.value.values().next().value)
+		},
+		{
+			deep: true,
+			immediate: true,
 		},
-		set: (newValue) => {
-			if (props.modelValue !== undefined) {
-				if (
-					(Array.isArray(props.modelValue) || collapse.value) &&
-					!Array.isArray(newValue)
-				) {
-					newValue = [newValue]
+	)
+	watch(
+		() => props.modelValue,
+		(newValue, oldValue) => {
+			if (
+				newValue === undefined ||
+				newValue === null ||
+				JSON.stringify(newValue) === JSON.stringify(oldValue)
+			) {
+				return
+			}
+			let toReturn = new Set<string>()
+			if (props.not) {
+				if (typeof newValue === 'string') {
+					toReturn = new Set<string>(
+						[...accordionNames].filter((name) => name !== newValue),
+					)
+				} else if (Array.isArray(newValue)) {
+					toReturn = new Set<string>(
+						[...accordionNames].filter(
+							(name) => !newValue.includes(name),
+						),
+					)
 				}
-				return emit('update:modelValue', newValue)
+			} else if (typeof newValue === 'string') {
+				toReturn = new Set<string>([newValue])
+			} else if (Array.isArray(newValue)) {
+				toReturn = new Set<string>(newValue)
+			}
+			for (const name of accordionNames) {
+				bus.emit('toggle', { name, value: toReturn.has(name) })
 			}
-			localModelValue.value = Array.isArray(newValue)
-				? newValue
-				: [newValue]
+			modelValue.value = toReturn
 		},
-	})
+		{
+			immediate: true,
+		},
+	)
 
 	// 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 }) => {
+		if (value) {
+			if (!props.collapse) {
+				for (const item of modelValue.value) {
+					if (item !== name) {
+						bus.emit('toggle', { name: item, value: false })
+					}
+				}
+				modelValue.value.clear()
+			}
+			modelValue.value.add(name)
+			return
+		}
+		modelValue.value.delete(name)
+	})
+	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({ modelValue, expand, collapse })
 
 	// styles
 	const bemCssClasses = useModifiers(
@@ -91,7 +184,13 @@
 <template>
 	<div :class="bemCssClasses">
 		<!-- @slot Default slot -->
-		<slot>
+		<slot
+			v-bind="{
+				modelValue,
+				expand,
+				collapse,
+			}"
+		>
 			<VvAccordion
 				v-for="item in items"
 				:key="item.title"

package/src/components/VvAccordionGroup/index.ts

@@ -13,7 +13,9 @@ export const VvAccordionGroupProps = {
 	/**
 	 * VModel
 	 */
-	modelValue: [String, Array],
+	modelValue: {
+		type: [String, Array] as PropType<string | string[] | undefined>,
+	},
 	/**
 	 * Accordion items
 	 * @type VvAccordionGroupItem

package/src/components/VvButton/index.ts

@@ -1,4 +1,4 @@
-import type { Ref, PropType, ExtractPropTypes } from 'vue'
+import type { PropType, ExtractPropTypes } from 'vue'
 import type { ButtonGroupState } from '../../types/group'
 import {
 	ActionProps,
@@ -77,19 +77,14 @@ export function useGroupProps(
 	const { id, iconPosition, icon, label, pressed } = toRefs(props)
 
 	// group props
-	const modelValue = getGroupOrLocalRef('modelValue', props, emit) as Ref<
-		string | number | boolean | (string | number | boolean)[] | undefined
-	>
-	const toggle = getGroupOrLocalRef('toggle', props) as Ref<boolean>
-	const unselectable = getGroupOrLocalRef(
-		'unselectable',
-		props,
-	) as Ref<boolean>
-	const multiple = computed(() => group?.value.multiple.value ?? false)
+	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
+	const toggle = getGroupOrLocalRef('toggle', props)
+	const unselectable = getGroupOrLocalRef('unselectable', props)
+	const multiple = computed(() => group?.multiple.value ?? false)
 	// 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) {
@@ -107,7 +102,7 @@ export function useGroupProps(
 		return Array.from(toReturn)
 	})
 	const disabled = computed(() =>
-		Boolean(props.disabled || group?.value?.disabled.value),
+		Boolean(props.disabled || group?.disabled.value),
 	)
 
 	return {

package/src/components/VvButtonGroup/VvButtonGroup.vue

@@ -52,8 +52,7 @@
 	})
 
 	// provide
-	useProvideGroupState<ButtonGroupState>({
-		key: INJECTION_KEY_BUTTON_GROUP,
+	useProvideGroupState<ButtonGroupState>(INJECTION_KEY_BUTTON_GROUP, {
 		modelValue,
 		disabled,
 		toggle,

package/src/components/VvCheckbox/index.ts

@@ -42,10 +42,10 @@ export function useGroupProps(
 	const valid = getGroupOrLocalRef('valid', props) as Ref<boolean>
 	const invalid = getGroupOrLocalRef('invalid', props) as Ref<boolean>
 	const readonly = computed(() =>
-		Boolean(props.readonly || group?.value?.readonly.value),
+		Boolean(props.readonly || group?.readonly.value),
 	)
 	const disabled = computed(() =>
-		Boolean(props.disabled || group?.value?.disabled.value),
+		Boolean(props.disabled || group?.disabled.value),
 	)
 
 	return {

package/src/components/VvCheckboxGroup/VvCheckboxGroup.vue

@@ -29,8 +29,7 @@
 	const { disabled, readonly, vertical, valid, invalid, modifiers } =
 		toRefs(props)
 
-	useProvideGroupState<InputGroupState>({
-		key: INJECTION_KEY_CHECK_GROUP,
+	useProvideGroupState<InputGroupState>(INJECTION_KEY_CHECK_GROUP, {
 		modelValue,
 		disabled,
 		readonly,