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

package/src/stories/Select/SelectOptions.stories.ts

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { Default } from './Select.stories'
+import { defaultArgs, argTypes } from './Select.settings'
+
+const meta: Meta<typeof VvSelect> = {
+	title: 'Components/Select/Options',
+	component: VvSelect,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvSelect>
+
+export const ArrayOfObjects: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		options: [
+			{ value: 'first', label: 'First' },
+			{ value: 'second', label: 'Second' },
+			{ value: 'third', label: 'Third' },
+		],
+	},
+}
+
+export const OptionLabelKey: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		labelKey: 'name',
+		options: [
+			{ value: 'first', name: 'First' },
+			{ value: 'second', name: 'Second' },
+			{ value: 'third', name: 'Third' },
+		],
+	},
+}
+
+export const OptionValueKey: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		valueKey: 'id',
+		options: [
+			{ id: 'first', label: 'First' },
+			{ id: 'second', label: 'Second' },
+			{ id: 'third', label: 'Third' },
+		],
+
+	},
+}
+
+export const GroupedOptions: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		options: [
+			{
+				label: 'Group 1',
+				options: [
+					{ value: 'first', label: 'First' },
+					{ value: 'second', label: 'Second' },
+				],
+			},
+			{
+				label: 'Group 2',
+				options: [
+					{ value: 'third', label: 'Third' },
+					{ value: 'fourth', label: 'Fourth' },
+				],
+			},
+		],
+	},
+}

package/src/stories/Select/SelectSlots.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { Default } from './Select.stories'
+import { defaultArgs, argTypes } from './Select.settings'
+
+const meta: Meta<typeof VvSelect> = {
+	title: 'Components/Select/Slots',
+	component: VvSelect,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvSelect>
+
+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/Tab/Tab.settings.ts

@@ -0,0 +1,41 @@
+import { VvTabProps } from '@/components/VvTab'
+
+export const defaultArgs = {
+	...propsToObject(VvTabProps),
+	items: [
+		{
+			title: 'Item 1',
+			href: 'javascript:void(0)',
+		},
+		{
+			title: 'Item 2',
+			to: 'about',
+		},
+		{
+			id: 'tab-3',
+			title: 'Item 3',
+			to: 'contacts',
+			on: {
+				click: () => {
+					// eslint-disable-next-line no-console
+					console.log('clicked Item 3')
+				},
+			},
+		},
+	],
+}
+
+export const defaultArgTypes = {
+	tabId: {
+		description: 'Slot by tab-id',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+}

package/src/stories/Tab/Tab.stories.ts

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvTab from '@/components/VvTab/VvTab.vue'
+import { defaultArgs, defaultArgTypes } from './Tab.settings'
+import { defaultTest } from './Tab.test'
+
+const meta: Meta<typeof VvTab> = {
+	title: 'Components/Tab',
+	component: VvTab,
+	args: defaultArgs,
+	argTypes: defaultArgTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvTab>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: {VvTab},
+		setup() {
+			return {args}
+		},
+		template: /* html */ `
+			<div class="m-md w-1/2">
+				<vv-tab v-bind="args" data-testId="element">
+					<template #tab-item_0>
+						<span class="text-20 font-semibold">Tab 1</span>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+							vitae elit libero, a pharetra augue. Nullam id dolor id nibh
+							ultricies vehicula ut id elit. Morbi leo risus, porta ac
+							consectetur ac, vestibulum at eros. Praesent commodo cursus
+							magna, vel scelerisque nisl consectetur et. Donec sed odio dui.
+							Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae
+							elit libero, a pharetra augue.
+						</p>
+					</template>
+					<template #tab-item_1>
+						<span class="text-20 font-semibold">Tab 2</span>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+							vitae elit libero, a pharetra augue. Nullam id dolor id nibh
+							ultricies vehicula ut id elit. Morbi leo risus, porta ac
+							consectetur ac, vestibulum at eros. Praesent commodo cursus
+							magna, vel scelerisque nisl consectetur et. Donec sed odio dui.
+							Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae
+							elit libero, a pharetra augue.
+						</p>
+					</template>
+					<template #tab-3>
+						<span class="text-20 font-semibold">Tab 3</span>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+							vitae elit libero, a pharetra augue. Nullam id dolor id nibh
+							ultricies vehicula ut id elit. Morbi leo risus, porta ac
+							consectetur ac, vestibulum at eros. Praesent commodo cursus
+							magna, vel scelerisque nisl consectetur et. Donec sed odio dui.
+							Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae
+							elit libero, a pharetra augue.
+						</p>
+					</template>
+				</vv-tab>
+			</div>`
+	}),
+	play: defaultTest,
+}

package/src/stories/Tab/Tab.test.ts

@@ -0,0 +1,37 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+import { within, userEvent } from '@storybook/testing-library'
+
+export async function defaultTest({ canvasElement, args }: PlayAttributes) {
+	const element = (await within(canvasElement).findByTestId(
+		'element',
+	)) as HTMLElement
+
+	if (!args.items || !args.items?.length) {
+		throw new Error('No items passed')
+	}
+
+	// check children number the same of items prop
+	const childrenEls = element.getElementsByClassName('vv-nav')[0]
+	expect(childrenEls?.children[0].children.length).toEqual(args.items?.length)
+
+	// take firse and second elements
+	const firstEl = await element.getElementsByTagName('a')?.[0]
+	const secondEl = await element.getElementsByTagName('router-link')?.[1]
+	// check they have not current class
+	const secondElHasCurrentClass = secondEl.classList.contains('current')
+	const firstElHasCurrentClass = firstEl.classList.contains('current')
+
+	await expect(firstElHasCurrentClass).toBe(false)
+	await expect(secondElHasCurrentClass).toBe(false)
+	// click first item and check "current" css class
+	await userEvent.click(firstEl)
+	await expect(firstEl).toHaveClass('current')
+
+	// check tab content to include "Tab 1"
+	const tabPanelEl = element.getElementsByClassName('vv-tab__panel')?.[0]
+	await expect(tabPanelEl.innerHTML.includes('Tab 1')).toBe(true)
+
+	// check accessibility
+	await expect(element).toHaveNoViolations()
+}

package/src/stories/Textarea/Textarea.settings.ts

@@ -14,7 +14,6 @@ export const argTypes = {
 	...InputTextareaArgTypes,
 	...HintArgTypes,
 	cols: {
-		type: 'number',
 		description:
 			'The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.',
 		control: {
@@ -27,7 +26,6 @@ export const argTypes = {
 		},
 	},
 	rows: {
-		type: 'number',
 		description:
 			'The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.',
 		control: {
@@ -40,9 +38,6 @@ export const argTypes = {
 		},
 	},
 	wrap: {
-		type: {
-			summary: 'string',
-		},
 		description:
 			'Indicates how the control should wrap the value for form submission.',
 		options: ['hard', 'soft', 'off'],
@@ -56,9 +51,6 @@ export const argTypes = {
 		},
 	},
 	spellcheck: {
-		type: {
-			summary: ['string', 'boolean'],
-		},
 		description:
 			'Specifies whether the textarea is subject to spell checking by the underlying browser/OS. ',
 		options: [true, false, 'default'],

package/src/stories/Textarea/Textarea.stories.ts

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
+import { defaultArgs, argTypes } from './Textarea.settings'
+import { defaultTest } from './Textarea.test'
+
+const meta: Meta<typeof VvTextarea> = {
+	title: 'Components/Textarea',
+	component: VvTextarea,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvTextarea>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvTextarea },
+		setup() {
+			return { args }
+		},
+		data: () => ({ inputValue: undefined }),
+		template: /* html */ `
+			<vv-textarea 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-textarea>
+			<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',
+	},
+}
+
+export const Invalid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		invalid: true,
+		invalidLabel: 'The field is required.',
+		icon: 'error-2',
+	},
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		hintLabel: 'Please enter your name.',
+	},
+}
+
+export const Loading: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		loading: true,
+		loadingLabel: 'Loading...',
+	},
+}
+
+export const Floating: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		floating: true,
+	},
+}
+
+export const Resizable: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		resizable: true,
+	},
+}

package/src/stories/Textarea/TextareaLength.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
+import { Default } from './Textarea.stories'
+import { defaultArgs, argTypes } from './Textarea.settings'
+
+const meta: Meta<typeof VvTextarea> = {
+	title: 'Components/Textarea/Length',
+	component: VvTextarea,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvTextarea>
+
+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/Textarea/TextareaSlots.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
+import { Default } from './Textarea.stories'
+import { defaultArgs, argTypes } from './Textarea.settings'
+
+const meta: Meta<typeof VvTextarea> = {
+	title: 'Components/Textarea/Slots',
+	component: VvTextarea,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvTextarea>
+
+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/Textarea/TextareatIconPosition.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
+import { Default } from './Textarea.stories'
+import { defaultArgs, argTypes } from './Textarea.settings'
+
+const meta: Meta<typeof VvTextarea> = {
+	title: 'Components/Textarea/Icon',
+	component: VvTextarea,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvTextarea>
+
+export const DefaultIconPosition: 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/Tooltip/Tooltip.settings.ts

@@ -1,22 +1,22 @@
 import { VvTooltipProps } from '@/components/VvTooltip'
 import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
+import type { ArgTypes } from '@storybook/types'
 
 export const defaultArgs = {
 	...propsToObject(VvTooltipProps),
 	value: "I'm a tooltip",
 }
 
-export const argTypes = {
+export const argTypes: ArgTypes = {
 	...ModifiersArgTypes,
 	...DefaultSlotArgTypes,
 	position: {
-		type: {
-			summary: 'string',
-		},
+		type: 'string',
 		control: {
 			type: 'select',
 		},
 		table: {
+			type: 'string',
 			defaultValue: { summary: 'bottom' },
 		},
 		description: 'Indicates where to place the tooltip',

package/src/stories/Tooltip/Tooltip.stories.ts

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvTooltip from '@/components/VvTooltip/VvTooltip.vue'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import { defaultArgs, argTypes } from './Tooltip.settings'
+import { defaultTest } from './Tooltip.test'
+
+const meta: Meta<typeof VvTooltip> = {
+	title: 'Components/Tooltip',
+	component: VvTooltip,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvTooltip>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvButton, VvTooltip },
+		setup() {
+			return { args }
+		},
+		template: /* html */ `
+			<div class="w-full h-150">
+				<vv-button class="absolute left-1/2 top-1/2 -translate-1/2" data-testId="parent">
+					Hover me
+					<vv-tooltip v-bind="args">
+						<template #default v-if="args.default"><div v-html="args.default"></div></template>
+					</vv-tooltip>
+				</vv-button>
+			</div>
+		`,
+	}),
+	play: defaultTest,
+}

package/src/stories/Tooltip/TooltipDirective.stories.ts

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvTooltip from '@/components/VvTooltip/VvTooltip.vue'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import { defaultArgs, argTypes } from './Tooltip.settings'
+import { defaultTest } from './Tooltip.test'
+
+const meta: Meta<typeof VvTooltip> = {
+	title: 'Directives/Tooltip',
+	component: VvTooltip,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvTooltip>
+
+export const DefaultDirective: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvButton, VvTooltip },
+		setup() {
+			return { args }
+		},
+		template: /* html */ `
+			<div class="w-full h-150">
+				<vv-button v-tooltip:[args.position]="args.value" class="absolute left-1/2 top-1/2 -translate-1/2" data-testId="parent">
+					HOVER Me
+				</vv-button>
+			</div>
+		`,
+	}),
+	play: defaultTest,
+}
+
+export const Top: Story = {
+	...DefaultDirective,
+	args: {
+		...DefaultDirective.args,
+		position: 'top',
+	},
+}
+
+export const Bottom: Story = {
+	...DefaultDirective,
+	args: {
+		...DefaultDirective.args,
+		position: 'bottom',
+	},
+}
+
+export const Right: Story = {
+	...DefaultDirective,
+	args: {
+		...DefaultDirective.args,
+		position: 'right',
+	},
+}
+
+export const Left: Story = {
+	...DefaultDirective,
+	args: {
+		...DefaultDirective.args,
+		position: 'left',
+	},
+}