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

package/src/components/VvAccordion/VvAccordion.vue

@@ -1,109 +1,172 @@
-<script lang="ts">
-	export default {
-		name: 'VvAccordion',
-	}
-</script>
-
 <script setup lang="ts">
-	import { uid } from 'uid'
-	import { VvAccordionEvents, VvAccordionProps, useGroupProps } from '.'
+import { uid } from 'uid'
+import { VvAccordionEvents, VvAccordionProps, useGroupProps } from '.'
+
+// props, attrs and emit
+const props = defineProps(VvAccordionProps)
+
+const emit = defineEmits(VvAccordionEvents)
+
+const attrs = useAttrs()
+const modelValue = useVModel(props, 'modelValue', emit)
+
+// data
+const accordionName = computed(
+    () => props.name || (attrs?.id as string) || uid(),
+)
+const { title, content, not } = toRefs(props)
+const { isInGroup, modifiers, disabled, bus } = useGroupProps(props)
 
-	// props, attrs and emit
-	const props = defineProps(VvAccordionProps)
-	const attrs = useAttrs()
-	const emit = defineEmits(VvAccordionEvents)
+// state
+const isExpanded = ref(false)
+watch(
+    modelValue,
+    (newValue) => {
+        if (typeof newValue === 'boolean') {
+            isExpanded.value = not.value ? !newValue : newValue
+        }
+    },
+    { immediate: true },
+)
+watch(isExpanded, (newValue) => {
+    modelValue.value = not.value ? !newValue : newValue
+})
+bus?.on('toggle', ({ name, value }) => {
+    if (name !== accordionName.value) {
+        return
+    }
+    isExpanded.value = value
+})
+function onClick() {
+    if (disabled.value) {
+        return
+    }
+    if (isInGroup.value) {
+        bus?.emit('toggle', {
+            name: accordionName.value,
+            value: !isExpanded.value,
+        })
+        return
+    }
+    isExpanded.value = !isExpanded.value
+}
 
-	// data
-	const accordionName = computed(
-		() => props.name || (attrs?.id as string) || uid(),
-	)
-	const {
-		modifiers,
-		title,
-		content,
-		disabled,
-		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)) {
-					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
-			}
-			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
-				}
-				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
-			}
-			modelValue.value = newValue
-		},
-	})
+// register / unregister
+watch(
+    accordionName,
+    (newValue, oldValue) => {
+        if (bus) {
+            if (oldValue && oldValue !== newValue) {
+                bus.emit('unregister', { name: oldValue })
+            }
+            bus.emit('register', { name: newValue })
+        }
+    },
+    {
+        immediate: true,
+    },
+)
+onBeforeUnmount(() => {
+    if (bus) {
+        bus.emit('unregister', { name: accordionName.value })
+    }
+})
 
-	// styles
-	const bemCssClasses = useModifiers(
-		'vv-accordion',
-		modifiers,
-		computed(() => ({
-			disabled: disabled.value,
-		})),
-	)
+// methods
+function expand() {
+    if (isExpanded.value) {
+        return
+    }
+    onClick()
+}
 
-	// methods
-	const onClick = useToggle(isOpen)
+function collapse() {
+    if (!isExpanded.value) {
+        return
+    }
+    onClick()
+}
+
+function groupExpand(name?: string | string[]) {
+    if (!bus) {
+        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 })
+}
+
+function groupCollapse(name?: string | string[]) {
+    if (!bus) {
+        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
+const bemCssClasses = useModifiers(
+    'vv-accordion',
+    modifiers,
+    computed(() => ({
+        disabled: disabled.value,
+    })),
+)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvAccordion',
+}
 </script>
 
 <template>
-	<details :id="accordionName" :class="bemCssClasses" :open="isOpen">
-		<summary
-			:aria-controls="accordionName"
-			:aria-expanded="isOpen"
-			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-accordion__content">
-			<!-- @slot Slot for content  -->
-			<slot name="default" v-bind="{ open: isOpen }">
-				{{ content }}
-			</slot>
-		</div>
-	</details>
+    <details :id="accordionName" :class="bemCssClasses" :open="isExpanded">
+        <summary
+            :aria-controls="accordionName"
+            :aria-expanded="isExpanded"
+            class="vv-accordion__summary"
+            @click.prevent="onClick()"
+        >
+            <!-- @slot Slot for title -->
+            <slot
+                name="summary"
+                v-bind="{
+                    isExpanded,
+                    expand,
+                    collapse,
+                    groupExpand,
+                    groupCollapse,
+                }"
+            >
+                {{ title }}
+            </slot>
+        </summary>
+        <div :aria-hidden="!isExpanded" class="vv-accordion__content">
+            <!-- @slot Slot for content  -->
+            <slot
+                v-bind="{
+                    isExpanded,
+                    expand,
+                    collapse,
+                    groupExpand,
+                    groupCollapse,
+                }"
+            >
+                {{ content }}
+            </slot>
+        </div>
+    </details>
 </template>

package/src/components/VvAccordion/index.ts

@@ -1,37 +1,37 @@
-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'
 
 export const VvAccordionProps = {
-	...ModifiersProps,
-	/**
-	 * Accordion name
-	 */
-	name: String,
-	/**
-	 * Header title
-	 */
-	title: String,
-	/**
-	 * Content text
-	 */
-	content: String,
-	/**
-	 * (Optional) Defines if item is open. Event "update:modelValue" is emitted on accordion header click
-	 */
-	modelValue: {
-		type: Boolean,
-		default: undefined,
-	},
-	/**
-	 * If true, the accordion will be disabled
-	 */
-	disabled: Boolean,
-	/**
-	 * If true, the accordion will be opened by default
-	 */
-	not: Boolean,
+    ...ModifiersProps,
+    /**
+     * Accordion name
+     */
+    name: String,
+    /**
+     * Header title
+     */
+    title: String,
+    /**
+     * Content text
+     */
+    content: String,
+    /**
+     * (Optional) Defines if item is open. Event "update:modelValue" is emitted on accordion header click
+     */
+    modelValue: {
+        type: Boolean,
+        default: undefined,
+    },
+    /**
+     * 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']
@@ -40,57 +40,42 @@ 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,
-		)
+export function useGroupProps(props: VvAccordionPropsTypes) {
+    const { group, isInGroup } = useInjectedGroupState<AccordionGroupState>(
+        INJECTION_KEY_ACCORDION_GROUP,
+    )
 
-	// local props
-	const { title, content } = toRefs(props)
+    // group props
+    const disabled = computed(() =>
+        Boolean(props.disabled || group?.disabled.value),
+    )
+    // merge local and group modifiers
+    const modifiers = computed(() => {
+        let localModifiers = props.modifiers
+        let groupModifiers = group?.modifiers.value
 
-	// 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),
-	)
-	// merge local and group modifiers
-	const modifiers = computed(() => {
-		let localModifiers = props.modifiers
-		let groupModifiers = group?.value.modifiers.value
+        const toReturn = new Set<string>()
+        if (localModifiers) {
+            if (!Array.isArray(localModifiers)) {
+                localModifiers = localModifiers.split(' ')
+            }
+            localModifiers.forEach(modifier => toReturn.add(modifier))
+        }
+        if (groupModifiers) {
+            if (!Array.isArray(groupModifiers)) {
+                groupModifiers = groupModifiers.split(' ')
+            }
+            groupModifiers.forEach(modifier => toReturn.add(modifier))
+        }
+        return Array.from(toReturn)
+    })
 
-		const toReturn = new Set<string>()
-		if (localModifiers) {
-			if (!Array.isArray(localModifiers)) {
-				localModifiers = localModifiers.split(' ')
-			}
-			localModifiers.forEach((modifier) => toReturn.add(modifier))
-		}
-		if (groupModifiers) {
-			if (!Array.isArray(groupModifiers)) {
-				groupModifiers = groupModifiers.split(' ')
-			}
-			groupModifiers.forEach((modifier) => toReturn.add(modifier))
-		}
-		return Array.from(toReturn)
-	})
-
-	return {
-		// group props
-		modelValue,
-		not,
-		isInGroup,
-		group,
-		collapse,
-		modifiers,
-		disabled,
-		// local props
-		title,
-		content,
-	}
+    return {
+        // group props
+        isInGroup,
+        group,
+        modifiers,
+        disabled,
+        bus: group?.bus,
+    }
 }