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

package/src/stories/InputText/InputText.settings.ts

@@ -45,7 +45,6 @@ export const argTypes = {
 	min: {
 		description:
 			'Minimum value. Available for input types: date, month, week, time, datetime-local, number, range.',
-		type: ['number', 'string'],
 		control: {
 			type: 'text',
 		},
@@ -53,7 +52,6 @@ export const argTypes = {
 	max: {
 		description:
 			'Maximum value. Available for input types: date, month, week, time, datetime-local, number, range.',
-		type: ['number', 'string'],
 		control: {
 			type: 'text',
 		},
@@ -61,9 +59,6 @@ export const argTypes = {
 	step: {
 		description:
 			'Incremental values that are valid. Available for input types: date, month, week, time, datetime-local and number.',
-		type: {
-			summary: 'number',
-		},
 		table: {
 			defaultValue: {
 				summary: 1,
@@ -73,15 +68,11 @@ export const argTypes = {
 	pattern: {
 		description:
 			'Pattern the value must match to be valid. Available for input types: text, search, url, tel, email and password.',
-		type: {
-			summary: 'regex',
-		},
 		control: {
 			type: 'text',
 		},
 	},
 	multiple: {
-		type: 'boolean',
 		description:
 			'Whether to allow multiple values. Available for input type email.',
 		table: {
@@ -128,9 +119,6 @@ export const argTypes = {
 	},
 	labelStepUp: {
 		description: 'Label for step up button',
-		type: {
-			summary: 'string',
-		},
 		control: {
 			type: 'text',
 		},
@@ -142,9 +130,6 @@ export const argTypes = {
 	},
 	labelStepDown: {
 		description: 'Label for step down button',
-		type: {
-			summary: 'string',
-		},
 		control: {
 			type: 'text',
 		},
@@ -156,9 +141,6 @@ export const argTypes = {
 	},
 	labelShowPassword: {
 		description: 'Label for show password button',
-		type: {
-			summary: 'string',
-		},
 		control: {
 			type: 'text',
 		},
@@ -170,9 +152,7 @@ export const argTypes = {
 	},
 	labelHidePassword: {
 		description: 'Label for hide password button',
-		type: {
-			summary: 'string',
-		},
+
 		control: {
 			type: 'text',
 		},
@@ -184,9 +164,7 @@ export const argTypes = {
 	},
 	labelClear: {
 		description: 'Label for clear button',
-		type: {
-			summary: 'string',
-		},
+
 		control: {
 			type: 'text',
 		},
@@ -198,18 +176,13 @@ export const argTypes = {
 	},
 	mask: {
 		description: 'Input mask, only for text type',
-		type: {
-			summary: 'string',
-		},
+
 		control: {
 			type: 'text',
 		},
 	},
 	maskEager: {
 		description: 'Show mask before typing',
-		type: {
-			summary: 'boolean',
-		},
 		table: {
 			defaultValue: {
 				summary: false,
@@ -218,9 +191,6 @@ export const argTypes = {
 	},
 	maskReversed: {
 		description: 'Write typing reverse (ex. for numbers)',
-		type: {
-			summary: 'boolean',
-		},
 		table: {
 			defaultValue: {
 				summary: false,
@@ -229,9 +199,6 @@ export const argTypes = {
 	},
 	maskTokens: {
 		description: 'Add mask custom tokens',
-		type: {
-			summary: 'Object',
-		},
 		table: {
 			defaultValue: {
 				summary: 'undefined',
@@ -240,9 +207,6 @@ export const argTypes = {
 	},
 	maskTokensReplace: {
 		description: 'Replace default tokens',
-		type: {
-			summary: 'boolean',
-		},
 		table: {
 			defaultValue: {
 				summary: false,

package/src/stories/InputText/InputText.stories.ts

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { defaultArgs, argTypes } from './InputText.settings'
+import { defaultTest } from './InputText.test'
+import { Position } from '@/constants'
+
+const meta: Meta<typeof VvInputText> = {
+	title: 'Components/InputText',
+	component: VvInputText,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputText>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvInputText },
+		setup() {
+			return { args }
+		},
+		data: () => ({ inputValue: undefined }),
+		template: /* html */ `
+			<vv-input-text v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+				<template #before v-if="args.before"><div class="flex" v-html="args.before"></div></template>
+				<template #after v-if="args.after"><div class="flex" v-html="args.after"></div></template>
+				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+			</vv-input-text>
+			<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 Valid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		valid: true,
+		validLabel: 'The field is valid.',
+		icon: 'check',
+		iconPosition: Position.after,
+	},
+}
+
+export const Invalid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		invalid: true,
+		invalidLabel: 'The field is required.',
+		icon: 'error-2',
+		iconPosition: Position.after,
+	},
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		hintLabel: 'Please enter your name.',
+	},
+
+}
+
+export const Loading: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		loading: true,
+		loadingLabel: 'Loading...',
+	},
+}
+
+export const Floating: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		floating: true,
+	},
+}
+
+export const Mask: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		mask: '##-###-##',
+	},
+}
+
+export const Unit: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		unit: 'km',
+		autoWidth: true,
+		type: 'number',
+	},
+}

package/src/stories/InputText/InputTextIconPosition.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { Default } from './InputText.stories'
+import { defaultArgs, argTypes } from './InputText.settings'
+
+const meta: Meta<typeof VvInputText> = {
+	title: 'Components/InputText/Icon',
+	component: VvInputText,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputText>
+
+export const DefaultPosition: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: 'heart',
+	},
+}
+
+export const After: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: 'heart',
+		iconPosition: 'after',
+	},
+}
+
+export const Src: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: {
+			name: 'engineering',
+			src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/social/engineering/materialicons/24px.svg',
+		},
+	},
+}

package/src/stories/InputText/InputTextLength.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { Default } from './InputText.stories'
+import { defaultArgs, argTypes } from './InputText.settings'
+
+const meta: Meta<typeof VvInputText> = {
+	title: 'Components/InputText/Length',
+	component: VvInputText,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputText>
+
+export const MaxLength: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		maxlength: 5,
+	},
+}
+
+export const MinLength: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		minlength: 5,
+	},
+}
+
+export const Count: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		count: true,
+		minlength: 100,
+	},
+}
+
+export const Limit: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		count: 'limit',
+		maxlength: 100,
+	},
+}
+
+export const Countdown: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		count: 'countdown',
+		maxlength: 100,
+	},
+}

package/src/stories/InputText/InputTextMinMax.stories.ts

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { Default } from './InputText.stories'
+import { defaultArgs, argTypes } from './InputText.settings'
+
+const meta: Meta<typeof VvInputText> = {
+	title: 'Components/InputText/MinMax',
+	component: VvInputText,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputText>
+
+export const MinNumber: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		type: 'number',
+		min: -15,
+	},
+}
+
+export const MaxNumber: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		type: 'number',
+		max: 15,
+	},
+}
+
+export const MinDate: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		type: 'date',
+		min: new Date().toISOString().split('T')[0],
+	},
+}
+
+export const MaxDate: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		type: 'date',
+		max: new Date().toISOString().split('T')[0],
+	},
+}

package/src/stories/InputText/InputTextSlots.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { Default } from './InputText.stories'
+import { defaultArgs, argTypes } from './InputText.settings'
+
+const meta: Meta<typeof VvInputText> = {
+	title: 'Components/InputText/Slots',
+	component: VvInputText,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputText>
+
+export const Before: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		before: '<div class="vv-badge vv-badge--sm uppercase">Before</div>',
+	},
+}
+
+export const After: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		after: '<div class="vv-badge vv-badge--sm uppercase">After</div>',
+	},
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		hint: 'Hint <em class="italic">slot!</em>',
+	},
+}

package/src/stories/InputText/InputTextType.stories.ts

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { Default } from './InputText.stories'
+import { defaultArgs, argTypes } from './InputText.settings'
+
+const meta: Meta<typeof VvInputText> = {
+	title: 'Components/InputText/Type',
+	component: VvInputText,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputText>
+
+export const Text: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		type: 'text',
+	},
+}
+
+export const Password: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		type: 'password',
+	},
+}
+
+export const Date: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		type: 'date',
+	},
+}
+
+export const DateTime: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		type: 'datetime-local',
+	},
+}
+
+export const Time: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		type: 'time',
+	},
+}
+
+export const Month: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		type: 'month',
+	},
+}
+
+export const Week: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		type: 'week',
+	},
+}
+
+export const Number: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		type: 'number',
+	},
+}
+
+export const Email: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		type: 'email',
+	},
+}
+
+export const Tel: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		type: 'tel',
+	},
+}
+
+export const Url: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		type: 'url',
+	},
+}
+
+export const Color: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		type: 'color',
+	},
+}
+
+export const Search: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		type: 'search',
+	},
+}

package/src/stories/Nav/Nav.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvNav from '@/components/VvNav/VvNav.vue'
+import { defaultArgs, argTypes } from './Nav.settings'
+import { defaultTest } from './Nav.test'
+
+const meta: Meta<typeof VvNav> = {
+	title: 'Components/Nav',
+	component: VvNav,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvNav>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvNav },
+		setup() {
+			return { args }
+		},
+		template: /* html */ `
+			<div class="m-md w-1/2">
+				<vv-nav v-bind="args" data-testId="element" />
+			</div>`,
+	}),
+	play: defaultTest,
+}

package/src/stories/Nav/NavModifiers.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvNav from '@/components/VvNav/VvNav.vue'
+import { defaultArgs, argTypes } from './Nav.settings'
+import { Default } from './Nav.stories'
+
+const meta: Meta<typeof VvNav> = {
+	title: 'Components/Nav/Modifiers',
+	component: VvNav,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvNav>
+
+export const Sidebar: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		modifiers: 'sidebar',
+	},
+}
+
+export const Aside: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		modifiers: 'aside',
+	},
+}
+
+export const Tabs: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		modifiers: 'tabs',
+	},
+}
+
+export const TabsFull: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		modifiers: 'tabs full',
+	},
+}

package/src/stories/Progress/Progress.settings.ts

@@ -10,7 +10,6 @@ export const argTypes = {
 	max: {
 		description:
 			'This attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.',
-		type: ['number', 'string'],
 		control: {
 			type: 'text',
 		},
@@ -18,14 +17,12 @@ export const argTypes = {
 	value: {
 		description:
 			'This attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate.',
-		type: ['number', 'string'],
 		control: {
 			type: 'text',
 		},
 	},
 	label: {
 		description: 'Progress aria-label',
-		type: 'string',
 		control: {
 			type: 'text',
 		},

package/src/stories/Progress/Progress.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvProgress from '@/components/VvProgress/VvProgress.vue'
+import { defaultTest } from './Progress.test'
+import { defaultArgs, argTypes } from './Progress.settings'
+
+const meta: Meta<typeof VvProgress> = {
+	title: 'Components/Progress',
+	component: VvProgress,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvProgress>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvProgress },
+		setup() {
+			return { args }
+		},
+		template: /* html */ `
+			<vv-progress v-bind="args" />
+		`,
+	}),
+	play: defaultTest,
+}
+
+export const Determinate: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		max: '100',
+		value: '25',
+	},
+}