@volverjs/ui-vue 0.0.10-beta.35 → 0.0.10-beta.36

package/src/components/VvAccordion/VvAccordion.vue

@@ -1,172 +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)
 
-	// props, attrs and emit
-	const props = defineProps(VvAccordionProps)
-	const attrs = useAttrs()
-	const emit = defineEmits(VvAccordionEvents)
-	const modelValue = useVModel(props, 'modelValue', emit)
+const emit = defineEmits(VvAccordionEvents)
 
-	// data
-	const accordionName = computed(
-		() => props.name || (attrs?.id as string) || uid(),
-	)
-	const { title, content, not } = toRefs(props)
-	const { isInGroup, modifiers, disabled, bus } = useGroupProps(props)
+const attrs = useAttrs()
+const modelValue = useVModel(props, 'modelValue', emit)
 
-	// 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
-	})
-	const 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 { title, content, not } = toRefs(props)
+const { isInGroup, modifiers, disabled, bus } = useGroupProps(props)
 
-	// 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 })
-		}
-	})
+// 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
+}
 
-	// methods
-	const expand = () => {
-		if (isExpanded.value) {
-			return
-		}
-		onClick()
-	}
+// 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 })
+    }
+})
 
-	const collapse = () => {
-		if (!isExpanded.value) {
-			return
-		}
-		onClick()
-	}
+// methods
+function expand() {
+    if (isExpanded.value) {
+        return
+    }
+    onClick()
+}
 
-	const groupExpand = (name?: string | string[]) => {
-		if (!bus) {
-			// eslint-disable-next-line no-console
-			console.warn(
+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 })
-	}
+        )
+        return
+    }
+    bus.emit('expand', { name })
+}
 
-	const groupCollapse = (name?: string | string[]) => {
-		if (!bus) {
-			// eslint-disable-next-line no-console
-			console.warn(
+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 })
-	}
+        )
+        return
+    }
+    bus?.emit('collapse', { name })
+}
+
+// expose
+defineExpose({
+    isExpanded,
+    expand,
+    collapse,
+    groupExpand,
+    groupCollapse,
+})
 
-	// expose
-	defineExpose({
-		isExpanded,
-		expand,
-		collapse,
-		groupExpand,
-		groupCollapse,
-	})
+// styles
+const bemCssClasses = useModifiers(
+    'vv-accordion',
+    modifiers,
+    computed(() => ({
+        disabled: disabled.value,
+    })),
+)
+</script>
 
-	// styles
-	const bemCssClasses = useModifiers(
-		'vv-accordion',
-		modifiers,
-		computed(() => ({
-			disabled: disabled.value,
-		})),
-	)
+<script lang="ts">
+export default {
+    name: 'VvAccordion',
+}
 </script>
 
 <template>
-	<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>
+    <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

@@ -4,34 +4,34 @@ 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']
@@ -41,41 +41,41 @@ export type VvAccordionPropsTypes = ExtractPropTypes<typeof VvAccordionProps>
  * Merges local and group props
  */
 export function useGroupProps(props: VvAccordionPropsTypes) {
-	const { group, isInGroup } = useInjectedGroupState<AccordionGroupState>(
-		INJECTION_KEY_ACCORDION_GROUP,
-	)
+    const { group, isInGroup } = useInjectedGroupState<AccordionGroupState>(
+        INJECTION_KEY_ACCORDION_GROUP,
+    )
 
-	// 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 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
 
-		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
-		isInGroup,
-		group,
-		modifiers,
-		disabled,
-		bus: group?.bus,
-	}
+    return {
+        // group props
+        isInGroup,
+        group,
+        modifiers,
+        disabled,
+        bus: group?.bus,
+    }
 }