@volverjs/ui-vue 0.0.6-beta.6 → 0.0.6

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

@@ -0,0 +1,87 @@
+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'
+
+const meta: Meta<typeof VvButton> = {
+	title: 'Components/Button/Slots',
+	component: VvButton,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvButton>
+
+export const Default: Story = {
+	...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*/ `
+			<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*/ `
+			<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*/ `
+			<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

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

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

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

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

@@ -0,0 +1,39 @@
+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 { defaultTest } from './ButtonGroup.test'
+
+const meta: Meta<typeof VvButtonGroup> = {
+	title: 'Components/ButtonGroup',
+	component: VvButtonGroup,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+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*/ `
+			<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>
+				<vv-button name="3c">Button 3</vv-button>
+			</vv-button-group>
+			<div v-if="args.toggle" class="mt-md">Value: {{ value }}</div>
+		`,
+	}),
+	play: defaultTest,
+}

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+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,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvButtonGroup>
+
+export const Compact: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		modifiers: 'compact',
+	},
+}
+
+export const Vertical: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		modifiers: 'vertical',
+	},
+}
+
+export const Block: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		modifiers: 'block',
+	},
+}

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

@@ -0,0 +1,38 @@
+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 { defaultTest } from './ButtonGroup.test'
+
+const meta: Meta<typeof VvButtonGroup> = {
+	title: 'Components/ButtonGroup/Slots',
+	component: VvButtonGroup,
+	args: defaultArgs,
+	argTypes,
+}
+
+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*/ `
+			<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>
+				<vv-button modifiers="danger" name="3c">Button 3</vv-button>
+			</vv-button-group>
+			<div v-if="args.toggle" class="mt-md">Value: {{ value }}</div>
+		`,
+	}),
+	play: defaultTest,
+}

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+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,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvButtonGroup>
+
+export const Toggle: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		toggle: true,
+	},
+}
+
+export const Multiple: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		toggle: true,
+		multiple: true,
+	},
+}
+
+export const Unselectable: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		toggle: true,
+		unselectable: true,
+	},
+}

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

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvCard from '@/components/VvCard/VvCard.vue'
+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'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvCard>
+
+const Template: Story = {
+	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>
+				<template #content v-if="args.content"><div v-html="args.content"></div></template>
+				<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
+			</vv-card>
+		`,
+	}),
+	play: defaulTest,
+}
+
+export const Default: Story = {
+	...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/CardSlots.stories.ts

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvCard from '@/components/VvCard/VvCard.vue'
+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,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvCard>
+
+const Template: Story = {
+	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>
+				<template #content v-if="args.content"><div v-html="args.content"></div></template>
+				<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
+			</vv-card>
+		`,
+	}),
+	play: defaulTest,
+}
+
+export const Default: Story = {
+	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,
+}
+
+export const Header: Story = {
+	...Template,
+	args: {
+		...defaultArgs,
+		header: 'Header <em class="italic">slot!</em>',
+	},
+}
+
+export const Content: Story = {
+	...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>',
+	},
+}

package/src/stories/Checkbox/Checkbox.settings.ts

@@ -17,7 +17,6 @@ export const defaultArgs = {
 export const argTypes = {
 	...CheckboxRadioArgTypes,
 	indeterminate: {
-		type: 'boolean',
 		description: 'If true, the input will be indeterminated',
 		table: {
 			defaultValue: {
@@ -32,7 +31,6 @@ export const argTypes = {
 		},
 	},
 	switch: {
-		type: 'boolean',
 		description: 'If true, the input will be displayed as a switch.',
 		table: {
 			defaultValue: {

package/src/stories/Checkbox/Checkbox.stories.ts

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { defaultArgs, argTypes } from './Checkbox.settings'
+import { defaultTest } from './Checkbox.test'
+
+const meta: Meta<typeof VvCheckbox> = {
+	title: 'Components/Checkbox',
+	component: VvCheckbox,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvCheckbox>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvCheckbox },
+		setup() {
+			return { args }
+		},
+		data: () => ({ inputValue: args.uncheckedValue }),
+		template: /* html */ `
+			<vv-checkbox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+				<template #default v-if="args.default"><span v-html="args.default"></span></template>
+				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+			</vv-checkbox>
+			<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+		`,
+	}),
+	play: defaultTest,
+}
+
+export const Disabled: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		disabled: true,
+	},
+}
+
+export const Readonly: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		readonly: true,
+	},
+}
+
+export const Switch: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		switch: true,
+	},
+}
+
+export const Invalid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		invalid: true,
+		invalidLabel: 'You must accept terms and conditions',
+		label: 'Accept terms and conditions',
+	},
+}
+
+export const Valid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		valid: true,
+		validLabel: 'Thank you for accepting terms and conditions',
+		label: 'Accept terms and conditions',
+	},
+}
+
+export const Indeterminate: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		indeterminate: true,
+	},
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		hintLabel: 'Please accept terms and conditions',
+	},
+}

package/src/stories/Checkbox/CheckboxBinary.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { defaultArgs, argTypes } from './Checkbox.settings'
+import { Default } from './Checkbox.stories'
+
+const meta: Meta<typeof VvCheckbox> = {
+	title: 'Components/Checkbox/Binary',
+	component: VvCheckbox,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvCheckbox>
+
+export const TrueFalse: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		value: true,
+		uncheckedValue: false,
+	},
+}
+
+export const YesNo: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		value: 'Yes',
+		uncheckedValue: 'No',
+	},
+}

package/src/stories/Checkbox/CheckboxSlots.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { defaultArgs, argTypes } from './Checkbox.settings'
+import { Default as DefaultStory } from './Checkbox.stories'
+
+const meta: Meta<typeof VvCheckbox> = {
+	title: 'Components/Checkbox/Slots',
+	component: VvCheckbox,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvCheckbox>
+
+export const Default: Story = {
+	...DefaultStory,
+	args: {
+		...defaultArgs,
+		default: 'DefaultStory <em class="italic">slot!</em>',
+	},
+}
+
+export const HintSlot: Story = {
+	...DefaultStory,
+	args: {
+		...defaultArgs,
+		hint: 'Hint <em class="italic">slot!</em>',
+	},
+}