@volverjs/ui-vue 0.0.5 → 0.0.6-beta.15

package/src/stories/Icon/Icon.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { defaultArgs, argTypes } from './Icon.settings'
+import NormalIcons from '@/assets/icons/normal.json'
+
+const meta: Meta<typeof VvIcon> = {
+	title: 'Components/Icon',
+	component: VvIcon,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvIcon>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvIcon },
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `<vv-icon v-bind="args" />`,
+	}),
+}
+
+export const Remote: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		name: 'fingerprint',
+		src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/action/fingerprint/materialicons/24px.svg',
+	},
+}
+
+export const Inline: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		name: 'bell-2',
+		svg: `<svg viewBox="0 0 24 24">${NormalIcons.icons.bell.body}</svg>`,
+	},
+}
+

package/src/stories/Icon/IconsCollection.stories.ts

@@ -0,0 +1,53 @@
+import { ref, watch } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { icons as NormalIcons } from '@/assets/icons/normal.json'
+import { defaultArgs, argTypes } from './Icon.settings'
+
+const meta: Meta<typeof VvIcon> = {
+	title: 'Components/Icon/Collection',
+	component: VvIcon,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvIcon>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+		width: 24,
+	},
+	render: (args) => ({
+		components: { VvIcon },
+		setup() {
+			const allIcons = Object.keys(NormalIcons)
+			const icons = ref(allIcons)
+			const search = ref('')
+			watch(search, (newValue) => {
+				icons.value = allIcons.filter((icon) => icon.includes(newValue))
+			})
+			return { args, search, icons }
+		},
+		template: /*html*/ `
+			<div class="absolute inset-0 overflow-y-auto p-16">
+				<div class="vv-input-text">
+					<div class="vv-input-text__wrapper">
+						<input v-model="search" type="search" placeholder="Search..." />
+					</div>
+				</div>
+				<div class="grid grid-cols-5 gap-16 mt-16">
+					<div
+						v-for="iconName in icons"
+						:key="iconName"
+						class="flex items-center gap-16">
+						<VvIcon v-bind="args" :name="iconName" />
+						{{ iconName }}
+					</div>
+				</div>
+			</div>
+		`,
+	}),
+}

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.settings.ts

@@ -0,0 +1,34 @@
+import { VvNavProps } from '@/components/VvNav'
+import { ModifiersArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+	...propsToObject(VvNavProps),
+	items: [
+		{
+			title: 'Item 1',
+			href: 'javascript:void(0)',
+		},
+		{
+			title: 'Item 2',
+			to: 'about',
+		},
+		{
+			title: 'Item 3',
+			to: 'contacts',
+			on: {
+				click: () => {
+					// eslint-disable-next-line no-console
+					console.log('clicked Item 3')
+				},
+			},
+		},
+	],
+	modifiers: 'sidebar',
+}
+
+export const argTypes = {
+	modifiers: {
+		...ModifiersArgTypes.modifiers,
+		options: ['sidebar', 'aside', 'tabs', 'full'],
+	},
+}