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

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/Nav.test.ts

@@ -0,0 +1,32 @@
+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
+	expect(element.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 accessibility
+	await expect(element).toHaveNoViolations()
+}

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

package/src/stories/Radio/Radio.stories.ts

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
+import { defaultArgs, argTypes } from './Radio.settings'
+import { defaultTest } from './Radio.test'
+
+const meta: Meta<typeof VvRadio> = {
+	title: 'Components/Radio',
+	component: VvRadio,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvRadio>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvRadio },
+		setup() {
+			return { args }
+		},
+		data: () => ({ inputValue: undefined }),
+		template: /* html */ `
+			<vv-radio 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-radio>
+			<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 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 Hint: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		hintLabel: 'Please accept terms and conditions',
+	},
+}

package/src/stories/Radio/RadioSlots.stories.ts

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

package/src/stories/RadioGroup/RadioGroup.stories.ts

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import { defaultArgs, argTypes } from './RadioGroup.settings'
+import { defaultTest } from './RadioGroup.test'
+
+const meta: Meta<typeof VvRadioGroup> = {
+	title: 'Components/RadioGroup',
+	component: VvRadioGroup,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvRadioGroup>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvRadioGroup },
+		setup() {
+			return { args }
+		},
+		data: () => ({ inputValue: undefined }),
+		template: /* html */ `
+			<vv-radio-group 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-radio-group>
+			<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 Vertical: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		vertical: true,
+	},
+}
+
+export const Invalid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		invalid: true,
+		invalidLabel: 'This field is required.',
+	},
+}
+
+
+export const Valid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		valid: true,
+		validLabel: 'Selected response is valid.',
+	},
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		hintLabel: 'Please fill the input above.',
+	},
+}

package/src/stories/RadioGroup/RadioGroupOptions.stories.ts

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

package/src/stories/RadioGroup/RadioGroupSlots.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
+import { defaultArgs, argTypes } from './RadioGroup.settings'
+import { defaultTest } from './RadioGroup.test'
+
+const meta: Meta<typeof VvRadioGroup> = {
+	title: 'Components/RadioGroup/Slots',
+	component: VvRadioGroup,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvRadioGroup>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvRadioGroup, VvRadio },
+		setup() {
+			return { args }
+		},
+		data: () => ({ inputValue: undefined }),
+		template: /* html */ `
+			<vv-radio-group v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+				<vv-radio id="o1" name="opts" value="1">Option 1</vv-radio>
+				<vv-radio id="o2" name="opts" value="2">Option 2</vv-radio>
+				<vv-radio id="o3" name="opts" value="3">Option 3</vv-radio>
+				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+			</vv-radio-group>
+			<div>Value: <span data-testId="value">{{inputValue}}</span></div>	
+		`,
+	}),
+	play: defaultTest,
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		hint: 'Hint <em class="italic">slot!</em>',
+	},
+}

package/src/stories/Select/Select.settings.ts

@@ -41,7 +41,6 @@ export const argTypes = {
 	...FloatingLabelArgTypes,
 	...UnselectableArgTypes,
 	multiple: {
-		type: 'boolean',
 		description:
 			'This Boolean attribute indicates that multiple options can be selected in the list.',
 		table: {
@@ -51,7 +50,6 @@ export const argTypes = {
 		},
 	},
 	required: {
-		type: 'boolean',
 		description:
 			'A Boolean attribute indicating that an option with a non-empty string value must be selected.',
 		table: {
@@ -61,7 +59,6 @@ export const argTypes = {
 		},
 	},
 	size: {
-		type: 'string',
 		description:
 			'If the control is presented as a scrolling list box this attribute represents the number of rows in the list.',
 		control: {
@@ -69,14 +66,12 @@ export const argTypes = {
 		},
 	},
 	label: {
-		type: 'string',
 		description: '<label> value for the select',
 		control: {
 			type: 'text',
 		},
 	},
 	placeholder: {
-		type: 'string',
 		description: 'Text that appears when it has no value set.',
 		control: {
 			type: 'text',

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

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { defaultTest } from './Select.test'
+import { defaultArgs, argTypes } from './Select.settings'
+
+const meta: Meta<typeof VvSelect> = {
+	title: 'Components/Select',
+	component: VvSelect,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvSelect>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvSelect },
+		setup() {
+			return { args }
+		},
+		data: () => ({ inputValue: undefined }),
+		template: /*html*/ `
+			<vv-select 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-select>
+			<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 Multiple: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		multiple: true,
+	},
+}
+
+export const Unselectable: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		unselectable: true,
+	},
+}
+
+export const Valid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		valid: true,
+		validLabel: 'Selected response is valid.',
+	},
+}
+
+export const Invalid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		invalid: true,
+		invalidLabel: 'Selected response is invalid.',
+	},
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		hintLabel: 'Please fill the input above.',
+	},
+}
+
+export const Loading: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		loading: true,
+		loadingLabel: 'Loading...',
+	},
+}
+
+export const Floating: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		floating: true,
+	},
+}

package/src/stories/Select/SelectIconPosition.stories.ts

@@ -0,0 +1,43 @@
+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/Icon',
+	component: VvSelect,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvSelect>
+
+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',
+		},
+	},
+}