@volverjs/ui-vue 0.0.6-beta.7 → 0.0.7-beta.1

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

@@ -0,0 +1,40 @@
+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/Link',
+	component: VvButton,
+	args: defaultArgs,
+	argTypes,
+}
+
+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',
+	},
+}
+
+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,
+	},
+}

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

@@ -0,0 +1,41 @@
+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/Loading',
+	component: VvButton,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvButton>
+
+export const Loading: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		loading: true,
+	},
+}
+
+export const Icon: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		loadingIcon: 'reload',
+		loading: true,
+	},
+}
+
+export const Label: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		loadingLabel: 'Reloading...',
+		loading: true,
+	},
+}

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

@@ -0,0 +1,158 @@
+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/Modifiers',
+	component: VvButton,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvButton>
+
+export const Primary: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Primary',
+		modifiers: 'primary',
+	},
+}
+
+export const Secondary: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Secondary',
+		modifiers: 'secondary',
+	},
+}
+
+export const Danger: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Danger',
+		modifiers: 'danger',
+	},
+}
+
+export const Ghost: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Ghost',
+		modifiers: 'ghost',
+	},
+}
+
+export const Link: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Link',
+
+		modifiers: 'link',
+	},
+}
+
+export const StaticLight: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Static light',
+		modifiers: 'static-light',
+	},
+	render: (args) => ({
+		components: { VvButton },
+		backgrounds: {
+			default: 'dark',
+		},
+		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 light',
+		modifiers: 'static-light',
+	},
+	render: (args) => ({
+		components: { VvButton },
+		backgrounds: {
+			default: 'dark',
+		},
+		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',
+	},
+}
+
+export const Rounded: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Rounded',
+		modifiers: 'rounded',
+	},
+}
+
+export const FullBleed: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Full bleed',
+
+		modifiers: 'full-bleed',
+	},
+}
+
+
+export const Action: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Action',
+		modifiers: 'action',
+	},
+}
+
+export const ActionQuiet: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Action quiet',
+
+		modifiers: 'action-quiet',
+	},
+}

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>',
+	},
+}