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

package/src/stories/Button/ButtonLoading.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/Loading',
-	component: VvButton,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Button/Loading',
+    component: VvButton,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,27 +15,27 @@ export default meta
 type Story = StoryObj<typeof VvButton>
 
 export const Loading: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		loading: true,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        loading: true,
+    },
 }
 
 export const Icon: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		loadingIcon: 'reload',
-		loading: true,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        loadingIcon: 'reload',
+        loading: true,
+    },
 }
 
 export const Label: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		loadingLabel: 'Reloading...',
-		loading: true,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        loadingLabel: 'Reloading...',
+        loading: true,
+    },
 }

package/src/stories/Button/ButtonModifiers.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/Modifiers',
-	component: VvButton,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Button/Modifiers',
+    component: VvButton,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,134 +15,134 @@ export default meta
 type Story = StoryObj<typeof VvButton>
 
 export const Primary: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		label: 'Primary',
-		modifiers: 'primary',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        label: 'Primary',
+        modifiers: 'primary',
+    },
 }
 
 export const Secondary: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		label: 'Secondary',
-		modifiers: 'secondary',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        label: 'Secondary',
+        modifiers: 'secondary',
+    },
 }
 
 export const Danger: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		label: 'Danger',
-		modifiers: 'danger',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        label: 'Danger',
+        modifiers: 'danger',
+    },
 }
 
 export const Ghost: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		label: 'Ghost',
-		modifiers: 'ghost',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        label: 'Ghost',
+        modifiers: 'ghost',
+    },
 }
 
 export const Link: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		label: 'Link',
+    ...Default,
+    args: {
+        ...Default.args,
+        label: 'Link',
 
-		modifiers: 'link',
-	},
+        modifiers: 'link',
+    },
 }
 
 export const StaticLight: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		label: 'Static light',
-		modifiers: 'static-light',
-	},
-	render: (args) => ({
-		components: { VvButton },
-		setup() {
-			return { args }
-		},
-		template: /*html*/ `
+    ...Default,
+    args: {
+        ...Default.args,
+        label: 'Static light',
+        modifiers: 'static-light',
+    },
+    render: args => ({
+        components: { VvButton },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
 			<div class="bg-black p-md">
 				<vv-button v-bind="args" data-testId="element" />
 			</div>
 		`,
-	}),
+    }),
 }
 
 export const StaticDark: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		label: 'Static dark',
-		modifiers: 'static-dark',
-	},
-	render: (args) => ({
-		components: { VvButton },
-		setup() {
-			return { args }
-		},
-		template: /*html*/ `
+    ...Default,
+    args: {
+        ...Default.args,
+        label: 'Static dark',
+        modifiers: 'static-dark',
+    },
+    render: args => ({
+        components: { VvButton },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
 			<div class="bg-white p-md">
 				<vv-button v-bind="args" data-testId="element" />
 			</div>
 		`,
-	}),
+    }),
 }
 
 export const Block: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		label: 'Block',
-		modifiers: 'block',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        label: 'Block',
+        modifiers: 'block',
+    },
 }
 
 export const Rounded: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		label: 'Rounded',
-		modifiers: 'rounded',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        label: 'Rounded',
+        modifiers: 'rounded',
+    },
 }
 
 export const FullBleed: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		label: 'Full bleed',
+    ...Default,
+    args: {
+        ...Default.args,
+        label: 'Full bleed',
 
-		modifiers: 'full-bleed',
-	},
+        modifiers: 'full-bleed',
+    },
 }
 
 export const Action: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		label: 'Action',
-		modifiers: 'action',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        label: 'Action',
+        modifiers: 'action',
+    },
 }
 
 export const ActionQuiet: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		label: 'Action quiet',
+    ...Default,
+    args: {
+        ...Default.args,
+        label: 'Action quiet',
 
-		modifiers: 'action-quiet',
-	},
+        modifiers: 'action-quiet',
+    },
 }

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

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import VvBadge from '@/components/VvBadge/VvBadge.vue'
 import { Default as DefaultStory } from './Button.stories'
 import { argTypes, defaultArgs } from './Button.settings'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import VvBadge from '@/components/VvBadge/VvBadge.vue'
 
 const meta: Meta<typeof VvButton> = {
-	title: 'Components/Button/Slots',
-	component: VvButton,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Button/Slots',
+    component: VvButton,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -16,72 +16,72 @@ export default meta
 type Story = StoryObj<typeof VvButton>
 
 export const Default: Story = {
-	...DefaultStory,
-	args: {
-		...DefaultStory.args,
-		default: 'Default <em class="italic">slot!</em>',
-	},
+    ...DefaultStory,
+    args: {
+        ...DefaultStory.args,
+        default: 'Default <em class="italic">slot!</em>',
+    },
 }
 
 export const Before: Story = {
-	...DefaultStory,
-	args: {
-		...DefaultStory.args,
-		label: 'Before slot',
-	},
-	render: (args) => ({
-		components: { VvButton, VvBadge },
-		setup() {
-			return { args }
-		},
-		template: /*html*/ `
+    ...DefaultStory,
+    args: {
+        ...DefaultStory.args,
+        label: 'Before slot',
+    },
+    render: args => ({
+        components: { VvButton, VvBadge },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
 			<vv-button v-bind="args" data-testId="element">
 				<template #before>
 					<vv-badge value="12" modifiers="danger" />
 				</template>
 			</vv-button>
 		`,
-	}),
+    }),
 }
 
 export const After: Story = {
-	...DefaultStory,
-	args: {
-		...DefaultStory.args,
-		label: 'After slot',
-	},
-	render: (args) => ({
-		components: { VvButton, VvBadge },
-		setup() {
-			return { args }
-		},
-		template: /*html*/ `
+    ...DefaultStory,
+    args: {
+        ...DefaultStory.args,
+        label: 'After slot',
+    },
+    render: args => ({
+        components: { VvButton, VvBadge },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
 			<vv-button v-bind="args" data-testId="element">
 				<template #after>
 					<vv-badge value="12" modifiers="danger" />
 				</template>
 			</vv-button>
 		`,
-	}),
+    }),
 }
 
 export const Label: Story = {
-	...DefaultStory,
-	args: {
-		...DefaultStory.args,
-		icon: 'add',
-	},
-	render: (args) => ({
-		components: { VvButton },
-		setup() {
-			return { args }
-		},
-		template: /*html*/ `
+    ...DefaultStory,
+    args: {
+        ...DefaultStory.args,
+        icon: 'add',
+    },
+    render: args => ({
+        components: { VvButton },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
 			<vv-button v-bind="args" data-testId="element">
 				<template #label>
 					Label <em class="italic">slot!</em>
 				</template>
 			</vv-button>
 		`,
-	}),
+    }),
 }

package/src/stories/Button/ButtonState.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/State',
-	component: VvButton,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Button/State',
+    component: VvButton,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,28 +15,28 @@ export default meta
 type Story = StoryObj<typeof VvButton>
 
 export const Active: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		active: true,
-		label: 'Active button',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        active: true,
+        label: 'Active button',
+    },
 }
 
 export const Pressed: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		pressed: true,
-		label: 'Pressed button',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        pressed: true,
+        label: 'Pressed button',
+    },
 }
 
 export const Disabled: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		disabled: true,
-		label: 'Disabled button',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        disabled: true,
+        label: 'Disabled button',
+    },
 }

package/src/stories/Button/ButtonToggle.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/Toggle',
-	component: VvButton,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Button/Toggle',
+    component: VvButton,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,38 +15,38 @@ export default meta
 type Story = StoryObj<typeof VvButton>
 
 export const Toggle: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		toggle: true,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        toggle: true,
+    },
 }
 
 export const TrueFalse: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		toggle: true,
-		value: true,
-		uncheckedValue: false,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        toggle: true,
+        value: true,
+        uncheckedValue: false,
+    },
 }
 
 export const YesNo: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		toggle: true,
-		value: 'yes',
-		uncheckedValue: 'no',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        toggle: true,
+        value: 'yes',
+        uncheckedValue: 'no',
+    },
 }
 
 export const Unselectable: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		toggle: true,
-		unselectable: true,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        toggle: true,
+        unselectable: true,
+    },
 }

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

@@ -1,32 +1,41 @@
+import type { ArgTypes } from '@storybook/vue3'
+import { argTypes as buttonArgTypes } from '../Button/Button.settings'
 import {
-	DefaultSlotArgTypes,
-	ModifiersArgTypes,
-	UnselectableArgTypes,
+    DefaultSlotArgTypes,
+    ModifiersArgTypes,
+    UnselectableArgTypes,
 } from '@/stories/argTypes'
 import { VvButtonGroupProps } from '@/components/VvButtonGroup'
-import { argTypes as buttonArgTypes } from '../Button/Button.settings'
 
 export const defaultArgs = {
-	...propsToObject(VvButtonGroupProps),
-	modifiers: [],
+    ...propsToObject(VvButtonGroupProps),
+    modifiers: [],
 }
 
-export const argTypes = {
-	modelValue: {
-		table: {
-			disable: true,
-		},
-	},
-	modifiers: {
-		...ModifiersArgTypes.modifiers,
-		options: ['compact', 'vertical', 'block'],
-	},
-	itemModifiers: {
-		options: buttonArgTypes.modifiers.options,
-		control: {
-			type: 'check',
-		},
-	},
-	...UnselectableArgTypes,
-	...DefaultSlotArgTypes,
+export const argTypes: ArgTypes = {
+    modelValue: {
+        table: {
+            disable: true,
+        },
+    },
+    modifiers: {
+        ...ModifiersArgTypes.modifiers,
+        options: ['compact', 'vertical', 'block'],
+    },
+    itemModifiers: {
+        options: buttonArgTypes.modifiers.options,
+        control: {
+            type: 'check',
+        },
+    },
+    legend: {
+        control: {
+            type: 'text',
+            table: {
+                category: 'Slots',
+            },
+        },
+    },
+    ...UnselectableArgTypes,
+    ...DefaultSlotArgTypes,
 }