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

package/src/stories/Accordion/AccordionSlots.stories.ts

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
 import { Default as AccordionDefault } from './Accordion.stories'
 import { defaultArgs } from './Accordion.settings'
+import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
 
 const meta: Meta<typeof VvAccordion> = {
-	title: 'Components/Accordion/Slots',
-	component: VvAccordion,
+    title: 'Components/Accordion/Slots',
+    component: VvAccordion,
 }
 
 export default meta
@@ -13,17 +13,17 @@ export default meta
 type Story = StoryObj<typeof VvAccordion>
 
 export const Default: Story = {
-	...AccordionDefault,
-	args: {
-		...defaultArgs,
-		default: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Details</strong>`,
-	},
+    ...AccordionDefault,
+    args: {
+        ...defaultArgs,
+        default: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Details</strong>`,
+    },
 }
 
 export const Summary: Story = {
-	...AccordionDefault,
-	args: {
-		...defaultArgs,
-		summary: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Summary</strong>`,
-	},
+    ...AccordionDefault,
+    args: {
+        ...defaultArgs,
+        summary: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Summary</strong>`,
+    },
 }

package/src/stories/AccordionGroup/AccordionGroup.settings.ts

@@ -1,77 +1,80 @@
+import type { ArgTypes } from '@storybook/vue3'
 import {
-	DefaultSlotArgTypes,
-	DisabledArgTypes,
-	ModifiersArgTypes,
+    DefaultSlotArgTypes,
+    DisabledArgTypes,
+    ModifiersArgTypes,
 } from '@/stories/argTypes'
 
 export const defaultArgs = {
-	collapse: false,
-	disabled: false,
-	items: [
-		{
-			name: 'a-1',
-			title: 'Details 1',
-			content:
+    collapse: false,
+    disabled: false,
+    items: [
+        {
+            name: 'a-1',
+            title: 'Details 1',
+            content:
 				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-		},
-		{
-			name: 'a-2',
-			title: 'Details 2',
-			content:
+        },
+        {
+            name: 'a-2',
+            title: 'Details 2',
+            content:
 				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-		},
-		{
-			name: 'a-3',
-			title: 'Details 3',
-			content:
+        },
+        {
+            name: 'a-3',
+            title: 'Details 3',
+            content:
 				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-		},
-	],
-	modifiers: [],
-	itemModifiers: [],
+        },
+    ],
+    modifiers: [],
+    itemModifiers: [],
 }
 
-export const argTypes = {
-	'`details::${item.name}`': {
-		table: {
-			disable: true,
-		},
-	},
-	'`header::${item.name}`': {
-		table: {
-			disable: true,
-		},
-	},
-	items: {
-		description: 'Accordion group items',
-	},
-	collapse: {
-		description: 'Enables accordion group collapse',
-		control: 'boolean',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	not: {
-		description: 'Inverts the accordion group state',
-		control: 'boolean',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	modifiers: {
-		...ModifiersArgTypes.modifiers,
-		options: ['compact', 'bordered'],
-	},
-	itemModifiers: {
-		description: 'Accordion items BEM modifiers',
-		control: 'check',
-		options: ['marker-right', 'bordered'],
-	},
-	...DisabledArgTypes,
-	...DefaultSlotArgTypes,
+export const argTypes: ArgTypes = {
+    // eslint-disable-next-line no-template-curly-in-string
+    '`details::${item.name}`': {
+        table: {
+            disable: true,
+        },
+    },
+    // eslint-disable-next-line no-template-curly-in-string
+    '`header::${item.name}`': {
+        table: {
+            disable: true,
+        },
+    },
+    'items': {
+        description: 'Accordion group items',
+    },
+    'collapse': {
+        description: 'Enables accordion group collapse',
+        control: 'boolean',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    'not': {
+        description: 'Inverts the accordion group state',
+        control: 'boolean',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    'modifiers': {
+        ...ModifiersArgTypes.modifiers,
+        options: ['condensed'],
+    },
+    'itemModifiers': {
+        description: 'Accordion items BEM modifiers',
+        control: 'check',
+        options: ['marker-right', 'bordered', 'square'],
+    },
+    ...DisabledArgTypes,
+    ...DefaultSlotArgTypes,
 }

package/src/stories/AccordionGroup/AccordionGroup.stories.ts

@@ -1,62 +1,64 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
 import { defaultTest } from './AccordionGroup.test'
 import { defaultArgs, argTypes } from './AccordionGroup.settings'
+import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
+
+const meta: Meta<typeof VvAccordionGroup> = {
+    title: 'Components/AccordionGroup',
+    component: VvAccordionGroup,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
+}
 
-export default {
-	title: 'Components/AccordionGroup',
-	component: VvAccordionGroup,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
-} as Meta<typeof VvAccordionGroup>
+export default meta
 
 export type Story = StoryObj<typeof VvAccordionGroup>
 
 export const Default: Story = {
-	args: defaultArgs,
-	play: defaultTest,
-	render: (args, { argTypes }) => ({
-		props: Object.keys(argTypes),
-		components: { VvAccordionGroup },
-		setup() {
-			return { args }
-		},
-		data() {
-			return {
-				selected: null,
-			}
-		},
-		template: /*html*/ `
+    args: defaultArgs,
+    play: defaultTest,
+    render: (args, { argTypes }) => ({
+        props: Object.keys(argTypes),
+        components: { VvAccordionGroup },
+        setup() {
+            return { args }
+        },
+        data() {
+            return {
+                selected: null,
+            }
+        },
+        template: /* html */ `
 		<vv-accordion-group data-testId="element" v-bind="args" v-model="selected" />
 		<div class="mt-24">
 			{{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ selected }}</span>
 		</div>
 	`,
-	}),
+    }),
 }
 
 export const Not: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		not: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        not: true,
+    },
 }
 
 export const Collapse: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		collapse: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        collapse: true,
+    },
 }
 
 export const CollapseNot: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		collapse: true,
-		not: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        collapse: true,
+        not: true,
+    },
 }

package/src/stories/AccordionGroup/AccordionGroup.test.ts

@@ -1,56 +1,60 @@
+import { within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
-	const firstChild = element.children[0] as HTMLDetailsElement
-	const firstChildSummary = firstChild.getElementsByTagName('summary')[0]
-	const value = (await within(canvasElement).findByTestId(
-		'value',
-	)) as HTMLElement
+    const element = await within(canvasElement).findByTestId('element')
+    const firstChild = element.children[0] as HTMLDetailsElement
+    const firstChildSummary = firstChild.getElementsByTagName('summary')[0]
+    const value = await within(canvasElement).findByTestId('value')
 
-	const modifiers =
-		!args.modifiers || Array.isArray(args.modifiers)
-			? args.modifiers
-			: [args.modifiers]
+    const modifiers
+		= !args.modifiers || Array.isArray(args.modifiers)
+		    ? args.modifiers
+		    : [args.modifiers]
 
-	expect(element).toHaveClass('vv-accordion-group')
+    expect(element).toHaveClass('vv-accordion-group')
 
-	// modifiers
-	if (modifiers) {
-		for (const modifier of modifiers) {
-			expect(element).toHaveClass(`vv-accordion-group--${modifier}`)
-		}
-	}
+    // modifiers
+    if (modifiers) {
+        for (const modifier of modifiers) {
+            expect(element).toHaveClass(`vv-accordion-group--${modifier}`)
+        }
+    }
 
-	// open
-	if (!args.disabled && args.items && args.items.length > 0) {
-		expect(firstChild.open).toBe(args.not ? true : false)
-		expect(firstChildSummary).toBeClicked()
-		await sleep()
-		expect(firstChild.open).toBe(args.not ? false : true)
-		if (firstChild.open) {
-			if (args.collapse) {
-				expect(JSON.stringify(JSON.parse(value.innerText))).toBe(
-					JSON.stringify([args.items[0].name]),
-				)
-			} else {
-				expect(value.innerText).toBe(args.items[0].name)
-			}
-		}
-		expect(firstChildSummary.getAttribute('aria-expanded')).toBe(
-			args.not ? 'false' : 'true',
-		)
-		const content = firstChild.lastChild as HTMLElement
-		expect(content.getAttribute('aria-hidden')).toBe(
-			args.not ? 'true' : 'false',
-		)
-	}
+    // open
+    if (!args.disabled && args.items && args.items.length > 0) {
+        expect(firstChild.open).toBe(args.not ?? false)
+        expect(firstChildSummary).toBeClicked()
+        await sleep()
+        expect(firstChild.open).toBe(!args.not)
+        if (firstChild.open) {
+            if (args.not) {
+                expect(JSON.stringify(JSON.parse(value.textContent ?? ''))).toBe(
+                    JSON.stringify(
+                        [
+                            ...args.items.map(
+                                (item: { name: string }) => item.name,
+                            ),
+                        ].splice(1),
+                    ),
+                )
+            }
+            else if (args.collapse) {
+                expect(JSON.stringify(JSON.parse(value.textContent ?? ''))).toBe(
+                    JSON.stringify([args.items[0].name]),
+                )
+            }
+            else {
+                expect(value.textContent ?? '').toBe(args.items[0].name)
+            }
+            expect(firstChildSummary.getAttribute('aria-expanded')).toBe('true')
+            const content = firstChild.lastChild as HTMLElement
+            expect(content.getAttribute('aria-hidden')).toBe('false')
+        }
+    }
 
-	// accessibility
-	await expect(element).toHaveNoViolations()
+    // accessibility
+    await expect(element).toHaveNoViolations()
 }

package/src/stories/AccordionGroup/AccordionGroupSlots.stories.ts

@@ -1,53 +1,53 @@
-import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
-import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
 import { defaultTest } from './AccordionGroup.test'
 import { defaultArgs, argTypes } from './AccordionGroup.settings'
 import meta, { type Story } from './AccordionGroup.stories'
+import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
+import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
 
 export default {
-	...meta,
-	title: 'Components/AccordionGroup/Slots',
+    ...meta,
+    title: 'Components/AccordionGroup/Slots',
 }
 
 export const Default: Story = {
-	args: defaultArgs,
-	argTypes: {
-		...argTypes,
-		items: {
-			control: {
-				disable: true,
-			},
-		},
-		default: {
-			...argTypes.default,
-			control: {
-				disable: true,
-			},
-		},
-	},
-	play: defaultTest,
-	render: (args) => ({
-		props: Object.keys(argTypes),
-		components: { VvAccordionGroup, VvAccordion },
-		setup() {
-			return { args }
-		},
-		data() {
-			return {
-				selected: '',
-				content:
+    args: defaultArgs,
+    argTypes: {
+        ...argTypes,
+        items: {
+            control: {
+                disable: true,
+            },
+        },
+        default: {
+            ...argTypes.default,
+            control: {
+                disable: true,
+            },
+        },
+    },
+    play: defaultTest,
+    render: args => ({
+        props: Object.keys(argTypes),
+        components: { VvAccordionGroup, VvAccordion },
+        setup() {
+            return { args }
+        },
+        data() {
+            return {
+                selected: '',
+                content:
 					'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-			}
-		},
-		template: /*html*/ `
+            }
+        },
+        template: /* html */ `
 			<vv-accordion-group data-testId="element" v-bind="args" v-model="selected">
 				<vv-accordion name="a-1" data-testId="a-1" title="Details 1" :content="content" />
 				<vv-accordion name="a-2" title="Details 2" :content="content" />
 				<vv-accordion name="a-3" title="Details 3" :content="content" />
 			</vv-accordion-group>
 			<div class="mt-24"  >
-				Opened: <span data-testId="value">{{ selected }}</span>
+				{{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ selected }}</span>
 			</div>
 		`,
-	}),
+    }),
 }