@volverjs/ui-vue 0.0.10-beta.4 → 0.0.10-beta.40

package/src/components/VvAccordionGroup/VvAccordionGroup.vue

@@ -1,115 +1,233 @@
-<script lang="ts">
-	export default {
-		name: 'VvAccordionGroup',
-	}
-</script>
-
 <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 '../VvAccordion/VvAccordion.vue'
-	import { VvAccordionGroupProps, VvAccordionGroupEvents } from '.'
+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)
-	const emit = defineEmits(VvAccordionGroupEvents)
+// props and emit
+const props = defineProps(VvAccordionGroupProps)
+const emit = defineEmits(VvAccordionGroupEvents)
 
-	// data
-	const { disabled, collapse, modifiers, itemModifiers, items, not } =
-		toRefs(props)
-	watchEffect(() => {
-		if (typeof props.modelValue === 'string' && collapse.value) {
-			// eslint-disable-next-line
-			console.warn(
+// data
+const {
+    disabled,
+    modifiers,
+    itemModifiers,
+    items,
+    storageKey,
+    storageType,
+} = toRefs(props)
+watchEffect(() => {
+    if (typeof props.modelValue === 'string' && props.collapse) {
+        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 modelValue = computed({
-		get: () => {
-			if (props.modelValue !== undefined) {
-				if (!collapse.value) {
-					return Array.isArray(props.modelValue)
-						? props.modelValue[0]
-						: props.modelValue
-				}
-				return props.modelValue
-			}
-			return !collapse.value
-				? localModelValue.value?.[0]
-				: localModelValue.value
-		},
-		set: (newValue) => {
-			if (props.modelValue !== undefined) {
-				if (
-					(Array.isArray(props.modelValue) || collapse.value) &&
-					!Array.isArray(newValue)
-				) {
-					newValue = [newValue]
-				}
-				return emit('update:modelValue', newValue)
-			}
-			localModelValue.value = Array.isArray(newValue)
-				? newValue
-				: [newValue]
-		},
-	})
+        )
+    }
+})
+
+const accordionNames = reactive(new Set<string>())
+const storageModelValue = usePersistence<string | string[] | undefined>(
+    storageKey,
+    storageType,
+    [],
+)
+const localModelValue = computed({
+    get: () => {
+        if (props.modelValue !== null && props.modelValue !== undefined) {
+            return props.modelValue
+        }
+        return storageModelValue.value
+    },
+    set: (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,
+                            ),
+                    ),
+                )
+            }
+        }
+        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 = 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
+const bus = mitt<AccordionGroupBusEvents>()
+useProvideGroupState<AccordionGroupState>(INJECTION_KEY_ACCORDION_GROUP, {
+    disabled,
+    modifiers: itemModifiers,
+    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
+})
+function 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))
 
-	// provide
-	useProvideGroupState<AccordionGroupState>({
-		key: INJECTION_KEY_ACCORDION_GROUP,
-		modelValue,
-		disabled,
-		collapse,
-		modifiers: itemModifiers,
-		not,
-	})
+function 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))
 
-	// styles
-	const bemCssClasses = useModifiers(
-		'vv-accordion-group',
-		modifiers,
-		computed(() => ({
-			disabled: disabled.value,
-		})),
-	)
+// expose
+defineExpose({ expandedAccordions, expand, collapse })
+
+// styles
+const bemCssClasses = useModifiers(
+    'vv-accordion-group',
+    modifiers,
+    computed(() => ({
+        disabled: disabled.value,
+    })),
+)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvAccordionGroup',
+}
 </script>
 
 <template>
-	<div :class="bemCssClasses">
-		<!-- @slot Default slot -->
-		<slot>
-			<VvAccordion
-				v-for="item in items"
-				:key="item.title"
-				v-bind="{
-					name: item.name,
-					title: item.title,
-					content: item.content,
-				}"
-			>
-				<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>
-			</VvAccordion>
-		</slot>
-	</div>
+    <div :class="bemCssClasses">
+        <!-- @slot Default slot -->
+        <slot
+            v-bind="{
+                expandedAccordions,
+                expand,
+                collapse,
+            }"
+        >
+            <VvAccordion
+                v-for="item in items"
+                :key="item.title"
+                v-bind="{
+                    name: item.name,
+                    title: item.title,
+                    content: item.content,
+                }"
+            >
+                <template
+                    v-if="$slots[`summary::${item.name}`]"
+                    #summary="data"
+                >
+                    <!-- @slot Slot for accordion header -->
+                    <slot v-bind="data" :name="`summary::${item.name}`" />
+                </template>
+                <template
+                    v-if="$slots[`content::${item.name}`]"
+                    #default="data"
+                >
+                    <!-- @slot Slot for accordion details -->
+                    <slot v-bind="data" :name="`content::${item.name}`" />
+                </template>
+            </VvAccordion>
+        </slot>
+    </div>
 </template>

package/src/components/VvAccordionGroup/index.ts

@@ -1,50 +1,50 @@
-import { ModifiersProps } from '@/props'
+import { ModifiersProps, StorageProps } from '@/props'
 
 export interface VvAccordionGroupItem {
-	title: string
-	content: string
-	name?: string
-	disabled?: boolean
-	modifiers?: string | string[]
+    title: string
+    content: string
+    name?: string
+    disabled?: boolean
+    modifiers?: string | string[]
 }
 
 export const VvAccordionGroupProps = {
-	...ModifiersProps,
-	/**
-	 * VModel
-	 */
-	modelValue: [String, Array],
-	/**
-	 * Accordion items
-	 * @type VvAccordionGroupItem
-	 */
-	items: {
-		type: Array as PropType<VvAccordionGroupItem[]>,
-		default: () => [],
-	},
-	/**
-	 * If true, accordion items stay open when another item is opened
-	 */
-	collapse: Boolean,
-	/**
-	 * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
-	 */
-	itemModifiers: {
-		type: [String, Array] as PropType<string | string[]>,
-		default: '',
-	},
-	/**
-	 * 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,
+    ...ModifiersProps,
+    ...StorageProps,
+    /**
+     * VModel
+     */
+    modelValue: {
+        type: [String, Array] as PropType<string | string[] | undefined>,
+        default: undefined,
+    },
+    /**
+     * Accordion items
+     * @type VvAccordionGroupItem
+     */
+    items: {
+        type: Array as PropType<VvAccordionGroupItem[]>,
+        default: () => [],
+    },
+    /**
+     * If true, accordion items stay open when another item is opened
+     */
+    collapse: Boolean,
+    /**
+     * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
+     */
+    itemModifiers: {
+        type: [String, Array] as PropType<string | string[]>,
+        default: '',
+    },
+    /**
+     * If true, the accordion items will be disabled
+     */
+    disabled: Boolean,
+    /**
+     * If true, the accordion items will be opened by default
+     */
+    not: Boolean,
 }
 
 export const VvAccordionGroupEvents = ['update:modelValue']