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

package/src/stories/Button/Button.settings.ts

@@ -1,159 +1,155 @@
-import type { Meta } from '@storybook/vue3'
+import type { ArgTypes, Meta } from '@storybook/vue3'
 import type { VvButton } from '@/components'
 import {
-	DefaultSlotArgTypes,
-	ModifiersArgTypes,
-	DisabledArgTypes,
-	LoadingArgTypes,
-	UnselectableArgTypes,
+    DefaultSlotArgTypes,
+    ModifiersArgTypes,
+    DisabledArgTypes,
+    LoadingArgTypes,
+    UnselectableArgTypes,
 } from '@/stories/argTypes'
 import normal from '@/assets/icons/normal.json'
 
 export const defaultArgs: Meta<typeof VvButton>['args'] = {
-	label: 'Button',
-	type: 'button',
-	toggle: false,
-	unselectable: true,
-	loading: false,
-	pressed: false,
-	active: false,
-	disabled: false,
-	rel: 'noopener noreferrer',
-	iconPosition: 'left',
-	icon: undefined,
+    label: 'Button',
+    type: 'button',
+    toggle: false,
+    unselectable: true,
+    loading: false,
+    pressed: false,
+    active: false,
+    disabled: false,
+    rel: 'noopener noreferrer',
+    iconPosition: 'left',
+    icon: undefined,
 }
 
-export const argTypes = {
-	modifiers: {
-		...ModifiersArgTypes.modifiers,
-		options: [
-			'primary',
-			'secondary',
-			'danger',
-			'ghost',
-			'link',
-			'action',
-			'action-quiet',
-			'static-light',
-			'static-dark',
-			'full-bleed',
-			'block',
-			'rounded',
-		],
-	},
-	icon: {
-		options: ['', ...Object.keys(normal.icons)],
-		control: {
-			type: 'select',
-		},
-	},
-	iconPosition: {
-		options: ['left', 'right', 'top', 'bottom'],
-		control: {
-			type: 'radio',
-		},
-		table: {
-			defaultValue: { summary: 'left' },
-		},
-	},
-	label: {
-		table: {
-			category: '',
-			type: '',
-		},
-		description: 'The label of the button',
-		control: { type: 'text' },
-	},
-	toggle: {
-		description: 'Whether the button is toggleable',
-		control: { type: 'boolean' },
-		table: {
-			defaultValue: { summary: false },
-		},
-	},
-	value: {
-		description: 'The button value',
-		table: {
-			defaultValue: { summary: 'undefined' },
-		},
-	},
-	uncheckedValue: {
-		description: 'The button unchecked value',
-		table: {
-			defaultValue: { summary: 'undefined' },
-		},
-	},
-	...UnselectableArgTypes,
-	...LoadingArgTypes,
-	...DisabledArgTypes,
-	pressed: {
-		description: 'Whether the button is pressed',
-		control: { type: 'boolean' },
-		table: {
-			defaultValue: { summary: false },
-		},
-	},
-	active: {
-		description: 'Whether the button is active',
-		control: { type: 'boolean' },
-		table: {
-			defaultValue: { summary: false },
-		},
-	},
-	rel: {
-		description: 'The rel attribute of the button',
-		control: { type: 'text' },
-		table: {
-			defaultValue: { summary: 'noopener noreferrer' },
-		},
-	},
-	type: {
-		options: ['button', 'submit', 'reset'],
-		control: {
-			type: 'radio',
-		},
-		table: {
-			defaultValue: { summary: 'button' },
-		},
-	},
-	href: {
-		description: 'The href attribute',
-		control: { type: 'text' },
-	},
-	target: {
-		options: ['', '_blank', '_self', '_parent', '_top'],
-		description: 'The target attribute',
-		control: {
-			type: 'select',
-		},
-	},
-	to: {
-		description: 'The router link / nuxt link settings',
-		control: { type: 'object' },
-	},
-	...DefaultSlotArgTypes,
-	before: {
-		description: 'Before label slot',
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	after: {
-		description: 'After label slot',
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
+export const argTypes: ArgTypes = {
+    modifiers: {
+        ...ModifiersArgTypes.modifiers,
+        options: [
+            'primary',
+            'secondary',
+            'danger',
+            'ghost',
+            'link',
+            'action',
+            'action-quiet',
+            'static-light',
+            'static-dark',
+            'full-bleed',
+            'block',
+            'rounded',
+        ],
+    },
+    icon: {
+        options: ['', ...Object.keys(normal.icons)],
+        control: {
+            type: 'select',
+        },
+    },
+    iconPosition: {
+        options: ['left', 'right', 'top', 'bottom'],
+        control: {
+            type: 'radio',
+        },
+        table: {
+            defaultValue: { summary: 'left' },
+        },
+    },
+    label: {
+        table: {
+            category: '',
+        },
+        description: 'The label of the button',
+        control: { type: 'text' },
+    },
+    toggle: {
+        description: 'Whether the button is toggleable',
+        control: { type: 'boolean' },
+        table: {
+            defaultValue: { summary: 'false' },
+        },
+    },
+    value: {
+        description: 'The button value',
+        table: {
+            defaultValue: { summary: 'undefined' },
+        },
+    },
+    uncheckedValue: {
+        description: 'The button unchecked value',
+        table: {
+            defaultValue: { summary: 'undefined' },
+        },
+    },
+    ...UnselectableArgTypes,
+    ...LoadingArgTypes,
+    ...DisabledArgTypes,
+    pressed: {
+        description: 'Whether the button is pressed',
+        control: { type: 'boolean' },
+        table: {
+            defaultValue: { summary: 'false' },
+        },
+    },
+    active: {
+        description: 'Whether the button is active',
+        control: { type: 'boolean' },
+        table: {
+            defaultValue: { summary: 'false' },
+        },
+    },
+    rel: {
+        description: 'The rel attribute of the button',
+        control: { type: 'text' },
+        table: {
+            defaultValue: { summary: 'noopener noreferrer' },
+        },
+    },
+    type: {
+        options: ['button', 'submit', 'reset'],
+        control: {
+            type: 'radio',
+        },
+        table: {
+            defaultValue: { summary: 'button' },
+        },
+    },
+    href: {
+        description: 'The href attribute',
+        control: { type: 'text' },
+    },
+    target: {
+        description: 'The target attribute',
+        control: { type: 'text' },
+    },
+    to: {
+        description: 'The router link / nuxt link settings',
+        control: { type: 'object' },
+    },
+    ...DefaultSlotArgTypes,
+    before: {
+        description: 'Before label slot',
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    after: {
+        description: 'After label slot',
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
 }

package/src/stories/Button/Button.stories.ts

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

package/src/stories/Button/Button.test.ts

@@ -1,48 +1,47 @@
+import { within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
-import { within } from '@storybook/testing-library'
 import { expect } from '@/test/expect'
 
 export async function defaultTest(
-	{ canvasElement, args }: PlayAttributes = {} as PlayAttributes,
+    { canvasElement, args }: PlayAttributes = {} as PlayAttributes,
 ) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
-
-	const modifiers =
-		!args.modifiers || Array.isArray(args.modifiers)
-			? args.modifiers
-			: [args.modifiers]
-
-	await expect(element).toHaveClass('vv-button')
-
-	// icon
-	if (args.icon) {
-		await expect(element.innerHTML).toContain('vv-icon')
-	}
-
-	// modifiers
-	if (modifiers) {
-		for (const modifier of modifiers) {
-			await expect(element).toHaveClass(`vv-button--${modifier}`)
-		}
-	}
-
-	// disabled
-	if (args.disabled) {
-		await expect(element).not.toBeClicked()
-	} else {
-		await expect(element).toBeClicked()
-
-		// link
-		if (args.href) {
-			await expect(element).toHaveProperty('href')
-		}
-		if (args.target) {
-			await expect(element).toHaveProperty('target')
-		}
-	}
-
-	// accessibility
-	await expect(element).toHaveNoViolations()
+    const element = await within(canvasElement).findByTestId('element')
+
+    const modifiers
+		= !args.modifiers || Array.isArray(args.modifiers)
+		    ? args.modifiers
+		    : [args.modifiers]
+
+    await expect(element).toHaveClass('vv-button')
+
+    // icon
+    if (args.icon) {
+        await expect(element.innerHTML).toContain('vv-icon')
+    }
+
+    // modifiers
+    if (modifiers) {
+        for (const modifier of modifiers) {
+            await expect(element).toHaveClass(`vv-button--${modifier}`)
+        }
+    }
+
+    // disabled
+    if (args.disabled) {
+        await expect(element).not.toBeClicked()
+    }
+    else {
+        await expect(element).toBeClicked()
+
+        // link
+        if (args.href) {
+            await expect(element).toHaveProperty('href')
+        }
+        if (args.target) {
+            await expect(element).toHaveProperty('target')
+        }
+    }
+
+    // accessibility
+    await expect(element).toHaveNoViolations()
 }

package/src/stories/Button/ButtonIcon.stories.ts

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvButton from '@/components/VvButton/VvButton.vue'
 import { Default } from './Button.stories'
 import { argTypes, defaultArgs } from './Button.settings'
+import VvButton from '@/components/VvButton/VvButton.vue'
 
 const meta: Meta<typeof VvButton> = {
-	title: 'Components/Button/Icon',
-	component: VvButton,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Button/Icon',
+    component: VvButton,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,53 +15,53 @@ export default meta
 type Story = StoryObj<typeof VvButton>
 
 export const Top: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		icon: 'add',
-		iconPosition: 'top',
-		label: 'Button with top icon',
-		modifiers: 'ghost',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        icon: 'add',
+        iconPosition: 'top',
+        label: 'Button with top icon',
+        modifiers: 'ghost',
+    },
 }
 
 export const Right: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		icon: 'add',
-		iconPosition: 'right',
-		label: 'Button with right icon',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        icon: 'add',
+        iconPosition: 'right',
+        label: 'Button with right icon',
+    },
 }
 
 export const Bottom: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		icon: 'add',
-		iconPosition: 'bottom',
-		label: 'Button with bottom icon',
-		modifiers: 'ghost',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        icon: 'add',
+        iconPosition: 'bottom',
+        label: 'Button with bottom icon',
+        modifiers: 'ghost',
+    },
 }
 
 export const Left: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		icon: 'add',
-		label: 'Button with left icon',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        icon: 'add',
+        label: 'Button with left icon',
+    },
 }
 
 export const NoLabel: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		icon: 'add',
-		label: '',
-		ariaLabel: 'Add new item',
-		modifiers: 'rounded',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        icon: 'add',
+        label: '',
+        ariaLabel: 'Add new item',
+        modifiers: 'rounded',
+    },
 }

package/src/stories/Button/ButtonLink.stories.ts

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvButton from '@/components/VvButton/VvButton.vue'
 import { Default } from './Button.stories'
 import { argTypes, defaultArgs } from './Button.settings'
+import VvButton from '@/components/VvButton/VvButton.vue'
 
 const meta: Meta<typeof VvButton> = {
-	title: 'Components/Button/Link',
-	component: VvButton,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Button/Link',
+    component: VvButton,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,26 +15,26 @@ export default meta
 type Story = StoryObj<typeof VvButton>
 
 export const Href: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		icon: 'arrow-right',
-		iconPosition: 'right',
-		label: 'Link button',
-		href: 'https://volverjs.github.io/style',
-		target: '_blank',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        icon: 'arrow-right',
+        iconPosition: 'right',
+        label: 'Link button',
+        href: 'https://volverjs.github.io/style',
+        target: '_blank',
+    },
 }
 
 export const HrefDisabled: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		icon: 'arrow-right',
-		iconPosition: 'right',
-		label: 'Link button',
-		href: 'https://volverjs.github.io/style',
-		target: '_blank',
-		disabled: true,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        icon: 'arrow-right',
+        iconPosition: 'right',
+        label: 'Link button',
+        href: 'https://volverjs.github.io/style',
+        target: '_blank',
+        disabled: true,
+    },
 }