@volverjs/ui-vue 0.0.10-beta.5 → 0.0.10-beta.50

package/src/stories/ButtonGroup/ButtonGroup.stories.ts

@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvButton from '@/components/VvButton/VvButton.vue'
 import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
-import { defaultArgs, argTypes } from './ButtonGroup.settings'
+import { argTypes, defaultArgs } from './ButtonGroup.settings'
 import { defaultTest } from './ButtonGroup.test'
 
 const meta: Meta<typeof VvButtonGroup> = {
-	title: 'Components/ButtonGroup',
-	component: VvButtonGroup,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/ButtonGroup',
+    component: VvButtonGroup,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -17,16 +17,16 @@ export default meta
 type Story = StoryObj<typeof VvButtonGroup>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvButton, VvButtonGroup },
-		setup() {
-			return { args }
-		},
-		data: () => ({ value: undefined }),
-		template: /*html*/ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvButton, VvButtonGroup },
+        setup() {
+            return { args }
+        },
+        data: () => ({ value: undefined }),
+        template: /* html */ `
 			<vv-button-group v-bind="args" v-model="value" data-testId="button-group">
 				<vv-button name="1a" data-testId="first-button">Button 1</vv-button>
 				<vv-button name="2b">Button 2</vv-button>
@@ -34,6 +34,6 @@ export const Default: Story = {
 			</vv-button-group>
 			<div v-if="args.toggle" class="mt-md">Value: {{ value }}</div>
 		`,
-	}),
-	play: defaultTest,
-}
+    }),
+    play: defaultTest,
+}

package/src/stories/ButtonGroup/ButtonGroup.test.ts

@@ -1,35 +1,32 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest(
-	{ canvasElement, args }: PlayAttributes = {} as PlayAttributes,
+    { canvasElement, args }: PlayAttributes = {} as PlayAttributes,
 ) {
-	const buttonGroup = (await within(canvasElement).findByTestId(
-		'button-group',
-	)) as HTMLElement
-	const firstButton = (await within(canvasElement).findByTestId(
-		'first-button',
-	)) as HTMLElement
-	const modifiers =
-		!args.modifiers || Array.isArray(args.modifiers)
-			? args.modifiers
-			: [args.modifiers]
+    const buttonGroup = await within(canvasElement).findByTestId('button-group')
+    const firstButton = await within(canvasElement).findByTestId('first-button')
+    const modifiers
+		= !args.modifiers || Array.isArray(args.modifiers)
+		    ? args.modifiers
+		    : [args.modifiers]
 
-	// check modifiers
-	if (modifiers) {
-		for (const modifier of modifiers) {
-			expect(buttonGroup).toHaveClass(`vv-button-group--${modifier}`)
-		}
-	}
+    // check modifiers
+    if (modifiers) {
+        for (const modifier of modifiers) {
+            expect(buttonGroup).toHaveClass(`vv-button-group--${modifier}`)
+        }
+    }
 
-	// check disabled
-	if (args.disabled) {
-		await expect(firstButton).not.toBeClicked()
-	} else {
-		await expect(firstButton).toBeClicked()
-	}
+    // check disabled
+    if (args.disabled) {
+        await expect(firstButton).not.toBeClicked()
+    }
+    else {
+        await expect(firstButton).toBeClicked()
+    }
 
-	// check accessibility
-	await expect(buttonGroup).toHaveNoViolations()
+    // check accessibility
+    await expect(buttonGroup).toHaveNoViolations()
 }

package/src/stories/ButtonGroup/ButtonGroupModifiers.stories.ts

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { argTypes, defaultArgs } from './ButtonGroup.settings'
 import { Default } from './ButtonGroup.stories'
-import { defaultArgs, argTypes } from './ButtonGroup.settings'
 
 const meta: Meta<typeof VvButtonGroup> = {
-	title: 'Components/ButtonGroup/Modifiers',
-	component: VvButtonGroup,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/ButtonGroup/Modifiers',
+    component: VvButtonGroup,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,25 +15,25 @@ export default meta
 type Story = StoryObj<typeof VvButtonGroup>
 
 export const Compact: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		modifiers: 'compact',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        modifiers: 'compact',
+    },
 }
 
 export const Vertical: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		modifiers: 'vertical',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        modifiers: 'vertical',
+    },
 }
 
 export const Block: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		modifiers: 'block',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        modifiers: 'block',
+    },
 }

package/src/stories/ButtonGroup/ButtonGroupSlots.stories.ts

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvButton from '@/components/VvButton/VvButton.vue'
 import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
-import { defaultArgs, argTypes } from './ButtonGroup.settings'
+import { argTypes, defaultArgs } from './ButtonGroup.settings'
 import { defaultTest } from './ButtonGroup.test'
 
 const meta: Meta<typeof VvButtonGroup> = {
-	title: 'Components/ButtonGroup/Slots',
-	component: VvButtonGroup,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/ButtonGroup/Slots',
+    component: VvButtonGroup,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -16,16 +16,16 @@ export default meta
 type Story = StoryObj<typeof VvButtonGroup>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvButton, VvButtonGroup },
-		setup() {
-			return { args }
-		},
-		data: () => ({ value: undefined }),
-		template: /*html*/ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvButton, VvButtonGroup },
+        setup() {
+            return { args }
+        },
+        data: () => ({ value: undefined }),
+        template: /* html */ `
 			<vv-button-group v-bind="args" v-model="value" data-testId="button-group">
 				<vv-button modifiers="primary" name="1a" data-testId="first-button">Button 1</vv-button>
 				<vv-button modifiers="secondary" name="2b">Button 2</vv-button>
@@ -33,6 +33,6 @@ export const Default: Story = {
 			</vv-button-group>
 			<div v-if="args.toggle" class="mt-md">Value: {{ value }}</div>
 		`,
-	}),
-	play: defaultTest,
+    }),
+    play: defaultTest,
 }

package/src/stories/ButtonGroup/ButtonGroupToggle.stories.ts

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { argTypes, defaultArgs } from './ButtonGroup.settings'
 import { Default } from './ButtonGroup.stories'
-import { defaultArgs, argTypes } from './ButtonGroup.settings'
 
 const meta: Meta<typeof VvButtonGroup> = {
-	title: 'Components/ButtonGroup/Toggle',
-	component: VvButtonGroup,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/ButtonGroup/Toggle',
+    component: VvButtonGroup,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,27 +15,27 @@ export default meta
 type Story = StoryObj<typeof VvButtonGroup>
 
 export const Toggle: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		toggle: true,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        toggle: true,
+    },
 }
 
 export const Multiple: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		toggle: true,
-		multiple: true,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        toggle: true,
+        multiple: true,
+    },
 }
 
 export const Unselectable: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		toggle: true,
-		unselectable: true,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        toggle: true,
+        unselectable: true,
+    },
 }

package/src/stories/Card/Card.settings.ts

@@ -1,55 +1,56 @@
+import type { ArgTypes } from '@storybook/vue3'
 import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
 
 export const defaultArgs = {
-	title: 'Card title',
-	content:
+    title: 'Card title',
+    content:
 		'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
 }
 
-export const argTypes = {
-	modifiers: {
-		...ModifiersArgTypes.modifiers,
-		options: ['glass'],
-	},
-	title: {
-		description: 'The title of the card',
-		control: { type: 'text' },
-	},
-	...DefaultSlotArgTypes,
-	header: {
-		description: 'The header slot',
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	content: {
-		description: 'The content slot',
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	footer: {
-		description: 'The footer slot',
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
+export const argTypes: ArgTypes = {
+    modifiers: {
+        ...ModifiersArgTypes.modifiers,
+        options: ['glass'],
+    },
+    title: {
+        description: 'The title of the card',
+        control: { type: 'text' },
+    },
+    ...DefaultSlotArgTypes,
+    header: {
+        description: 'The header slot',
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    content: {
+        description: 'The content slot',
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    footer: {
+        description: 'The footer slot',
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
 }

package/src/stories/Card/Card.stories.ts

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvCard from '@/components/VvCard/VvCard.vue'
+import { argTypes, defaultArgs } from './Card.settings'
 import { defaulTest } from './Card.test'
-import { defaultArgs, argTypes } from './Card.settings'
 
 const meta: Meta<typeof VvCard> = {
-	title: 'Components/Card',
-	component: VvCard,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/Card',
+    component: VvCard,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,15 +16,15 @@ export default meta
 type Story = StoryObj<typeof VvCard>
 
 const Template: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvCard },
-		setup() {
-			return { args }
-		},
-		template: /*html*/ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvCard },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
 			<vv-card v-bind="args" data-testId="card">
 				<template #default v-if="args.default"><div v-html="args.default"></div></template>
 				<template #header v-if="args.header"><div v-html="args.header"></div></template>
@@ -32,15 +32,15 @@ const Template: Story = {
 				<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
 			</vv-card>
 		`,
-	}),
-	play: defaulTest,
+    }),
+    play: defaulTest,
 }
 
 export const Default: Story = {
-	...Template,
-	args: {
-		...defaultArgs,
-		content:
+    ...Template,
+    args: {
+        ...defaultArgs,
+        content:
 			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-	},
+    },
 }

package/src/stories/Card/Card.test.ts

@@ -1,23 +1,21 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaulTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'card',
-	)) as HTMLElement
-	const modifiers =
-		!args.modifiers || Array.isArray(args.modifiers)
-			? args.modifiers
-			: [args.modifiers]
+    const element = await within(canvasElement).findByTestId('card')
+    const modifiers
+		= !args.modifiers || Array.isArray(args.modifiers)
+		    ? args.modifiers
+		    : [args.modifiers]
 
-	// check modifiers
-	if (modifiers) {
-		for (const modifier of modifiers) {
-			await expect(element).toHaveClass(`vv-card--${modifier}`)
-		}
-	}
+    // check modifiers
+    if (modifiers) {
+        for (const modifier of modifiers) {
+            await expect(element).toHaveClass(`vv-card--${modifier}`)
+        }
+    }
 
-	// check accessibility
-	await expect(element).toHaveNoViolations()
+    // check accessibility
+    await expect(element).toHaveNoViolations()
 }

package/src/stories/Card/CardSlots.stories.ts

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvCard from '@/components/VvCard/VvCard.vue'
+import { argTypes, defaultArgs } from './Card.settings'
 import { defaulTest } from './Card.test'
-import { defaultArgs, argTypes } from './Card.settings'
 
 const meta: Meta<typeof VvCard> = {
-	title: 'Components/Card/Slots',
-	component: VvCard,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Card/Slots',
+    component: VvCard,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,15 +15,15 @@ export default meta
 type Story = StoryObj<typeof VvCard>
 
 const Template: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvCard },
-		setup() {
-			return { args }
-		},
-		template: /*html*/ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvCard },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
 			<vv-card v-bind="args" data-testId="card">
 				<template #default v-if="args.default"><div v-html="args.default"></div></template>
 				<template #header v-if="args.header"><div v-html="args.header"></div></template>
@@ -31,51 +31,51 @@ const Template: Story = {
 				<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
 			</vv-card>
 		`,
-	}),
-	play: defaulTest,
+    }),
+    play: defaulTest,
 }
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvCard },
-		setup() {
-			return { args }
-		},
-		template: /*html*/ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvCard },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
 		<vv-card v-bind="args" class="max-w-max" data-testId="card">
 			<picture>
 				<img class="aspect-photo h-300" src="https://unsplash.it/300" alt="Card picture"/>
 			</picture>
 		</vv-card>
 	`,
-	}),
-	play: defaulTest,
+    }),
+    play: defaulTest,
 }
 
 export const Header: Story = {
-	...Template,
-	args: {
-		...defaultArgs,
-		header: 'Header <em class="italic">slot!</em>',
-	},
+    ...Template,
+    args: {
+        ...defaultArgs,
+        header: 'Header <em class="italic">slot!</em>',
+    },
 }
 
 export const Content: Story = {
-	...Template,
-	args: {
-		...defaultArgs,
-		content:
+    ...Template,
+    args: {
+        ...defaultArgs,
+        content:
 			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-	},
+    },
 }
 
 export const Footer: Story = {
-	...Template,
-	args: {
-		...defaultArgs,
-		footer: 'Footer <em class="italic">slot!</em>',
-	},
+    ...Template,
+    args: {
+        ...defaultArgs,
+        footer: 'Footer <em class="italic">slot!</em>',
+    },
 }