@volverjs/ui-vue 0.0.3-beta.3 → 0.0.3

package/src/stories/Dropdown/Dropdown.settings.ts

@@ -1,50 +1,68 @@
-import { VvDropdownProps } from '@/components/VvDropdown'
-import {
-	ModifiersArgTypes,
-	OptionsArgTypes,
-	UnselectableArgTypes,
-} from '@/stories/argTypes'
+import { DROPDOWN_ROLES, VvDropdownProps } from '@/components/VvDropdown'
+import { DropdownArgTypes } from '../argTypes'
 
 export const defaultArgs = {
 	...propsToObject(VvDropdownProps),
-	name: 'vv-dropdown',
-	disabled: false,
-	valueObject: false,
-	multiple: false,
-	labelKey: 'label',
-	valueKey: 'value',
-	options: [
-		{
-			label: 'Option 1',
-			value: 1,
-		},
-		{
-			label: 'Option 2',
-			value: 2,
-		},
-		{
-			label: 'Option 3',
-			value: 3,
-		},
-	],
 }
 
 export const argTypes = {
-	modifiers: {
-		...ModifiersArgTypes.modifiers,
-		options: ['place-top'],
+	...DropdownArgTypes,
+	role: {
+		description: 'Dropdown role',
+		options: DROPDOWN_ROLES,
+		control: {
+			type: 'select',
+		},
+		table: {
+			defaultValue: { summary: 'menu' },
+		},
+	},
+	default: {
+		description: 'The trigger slot',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	items: {
+		description: 'The dropdown items slot',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
 	},
-	...OptionsArgTypes,
-	labelNoResults: {
-		control: { type: 'text' },
+	before: {
+		description: 'The dropdown before slot',
+		control: {
+			type: 'text',
+		},
 		table: {
-			defaultValue: {
-				summary: 'No results',
+			category: 'Slots',
+			type: {
+				summary: 'html',
 			},
 		},
 	},
-	maxValues: {
-		control: { type: 'number' },
+	after: {
+		description: 'The dropdown after slot',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
 	},
-	...UnselectableArgTypes,
 }

package/src/stories/Dropdown/Dropdown.stories.mdx

@@ -1,5 +1,8 @@
+import { ref } from 'vue'
 import { Meta, Story } from '@storybook/addon-docs'
 import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import VvDropdownItem from '@/components/VvDropdown/VvDropdownItem.vue'
 import { defaultTest } from './Dropdown.test'
 import { defaultArgs, argTypes } from './Dropdown.settings'
 
@@ -11,18 +14,53 @@ import { defaultArgs, argTypes } from './Dropdown.settings'
 />
 
 export const Template = (args) => ({
-	components: { VvDropdown },
+	components: { VvDropdown, VvDropdownItem, VvButton },
 	setup() {
-		return { args }
+		const expanded = ref(false)
+		return { args, expanded }
 	},
-	data() {
-		return {
-			value: undefined,
-		}
+	watch: {
+		expanded(newValue) {
+			if (!newValue) {
+				return
+			}
+			setTimeout(() => {
+				this.centerWrapper()
+			}, 300)
+		},
 	},
-	template: /*html*/`
-		<vv-dropdown v-bind="args" v-model="value" class="max-w-224 relative" data-testId="element" />
-		<div class="mt-24">Value: <span data-testId="value">{{ value }}</span></div>
+	methods: {
+		centerWrapper() {
+			this.$refs.toggle?.$el?.scrollIntoView({
+				inline: 'center',
+				block: 'center',
+			})
+		},
+	},
+	mounted() {
+		this.centerWrapper()
+	},
+	template: /* html */ `
+		<div class="absolute inset-0 overflow-auto" ref="container">
+			<div style="width: 200%; height: 200%" ref="wrapper" data-testId="wrapper">
+				<vv-dropdown v-model="expanded" v-bind="args">
+					<vv-button ref="toggle" class="absolute top-full left-full -translate-1/2" modifiers="full-bleed" data-testId="trigger">
+						Toggle dropdown
+					</vv-button>
+					<template #items>
+						<vv-dropdown-item>
+							<vv-button modifiers="link" icon="add" label="Create" class="p-md w-full justify-start" />
+						</vv-dropdown-item>
+						<vv-dropdown-item>
+							<vv-button modifiers="link" icon="edit" label="Update" class="p-md w-full justify-start" />
+						</vv-dropdown-item>
+						<vv-dropdown-item>
+							<vv-button modifiers="link" icon="trash" label="Delete" class="p-md w-full justify-start" />
+						</vv-dropdown-item>
+					</template>
+				</vv-dropdown>
+			</div>
+		</div>
 	`,
 })
 
@@ -34,33 +72,16 @@ export const Template = (args) => ({
 
 <Canvas>
 	<Story
-		name="Disabled"
-		play={defaultTest}
-		args={{ disabled: true }}
+		name="Arrow"
+		args={{ arrow: true, offset: 10 }}
 		argTypes={{
-			disabled: {
+			arrow: {
 				control: {
 					disable: true,
 				},
 			},
 		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Multiple"
 		play={defaultTest}
-		args={{ multiple: true }}
-		argTypes={{
-			multiple: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
 	>
 		{Template.bind()}
 	</Story>
@@ -68,38 +89,16 @@ export const Template = (args) => ({
 
 <Canvas>
 	<Story
-		name="Unselectable"
-		play={defaultTest}
-		args={{ unselectable: false }}
+		name="Auto placement"
+		args={{ flip: false, autoPlacement: true, arrow: true, offset: 10 }}
 		argTypes={{
-			unselectable: {
+			autoPlacement: {
 				control: {
 					disable: true,
 				},
 			},
 		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Max values"
 		play={defaultTest}
-		args={{ multiple: true, maxValues: 2 }}
-		argTypes={{
-			multiple: {
-				control: {
-					disable: true,
-				},
-			},
-			maxValues: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
 	>
 		{Template.bind()}
 	</Story>
@@ -107,16 +106,16 @@ export const Template = (args) => ({
 
 <Canvas>
 	<Story
-		name="No results"
-		play={defaultTest}
-		args={{ options: [] }}
+		name="Trigger width"
+		args={{ triggerWidth: true }}
 		argTypes={{
-			options: {
+			triggerWidth: {
 				control: {
 					disable: true,
 				},
 			},
 		}}
+		play={defaultTest}
 	>
 		{Template.bind()}
 	</Story>

package/src/stories/Dropdown/Dropdown.test.ts

@@ -2,42 +2,20 @@ import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
 import { within } from '@storybook/testing-library'
-import { getOptionValue } from '@/test/options'
 
-export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
+export async function defaultTest({ canvasElement }: PlayAttributes) {
+	const wrapper = (await within(canvasElement).findByTestId(
+		'wrapper',
 	)) as HTMLElement
-	const value = (await within(canvasElement).findByTestId(
-		'value',
+	const trigger = (await within(canvasElement).findByTestId(
+		'trigger',
 	)) as HTMLElement
-	const label = element.getElementsByTagName('label')[0]
-	const input = label.getElementsByTagName('input')[0]
 
-	// checked value
-	if (!args.invalid && args.options && args.options.length > 0) {
-		label.addEventListener('click', async () => {
-			await sleep()
-			if (!args.disabled && !args.readonly) {
-				const firstValue = getOptionValue(args, 0)
-				expect(JSON.parse(value.innerHTML)).toEqual(
-					args.multiple ? [firstValue] : firstValue,
-				)
-			}
-		})
-		if (args.disabled || args.readonly) {
-			await expect(input).not.toBeChecked()
-		} else {
-			await expect(input).toBeChecked()
-		}
-	}
-
-	// disabled
-	if (args.disabled) {
-		await expect(input).toHaveProperty('disabled')
-		await expect(input).not.toBeChecked()
-	}
+	await expect(trigger).toBeClicked()
+	await sleep(100)
+	const dropdown = wrapper.getElementsByClassName('vv-dropdown')[0]
+	await expect(dropdown).toBeDefined()
 
 	// check accessibility
-	await expect(element).toHaveNoViolations()
+	await expect(dropdown).toHaveNoViolations()
 }

package/src/stories/Dropdown/DropdownSlots.stories.mdx

@@ -0,0 +1,113 @@
+import { ref } from 'vue'
+import { Meta, Story } from '@storybook/addon-docs'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import VvDropdownItem from '@/components/VvDropdown/VvDropdownItem.vue'
+import { defaultTest } from './Dropdown.test'
+import { defaultArgs, argTypes } from './Dropdown.settings'
+
+<Meta
+	title="Components/Dropdown/Slots"
+	component={VvDropdown}
+	argTypes={argTypes}
+	args={defaultArgs}
+/>
+
+export const Template = (args) => ({
+	components: { VvDropdown, VvDropdownItem, VvButton },
+	setup() {
+		const expanded = ref(false)
+		return { args, expanded }
+	},
+	watch: {
+		expanded(newValue) {
+			if (!newValue) {
+				return
+			}
+			setTimeout(() => {
+				this.centerWrapper()
+			}, 300)
+		},
+	},
+	methods: {
+		centerWrapper() {
+			document.getElementById('toggle-button').scrollIntoView({
+				inline: 'center',
+				block: 'center',
+			})
+		},
+	},
+	mounted() {
+		this.centerWrapper()
+	},
+	template: /* html */ `
+		<div class="absolute inset-0 overflow-auto" ref="container">
+			<div style="width: 200%; height: 200%" ref="wrapper" data-testId="wrapper">
+				<vv-dropdown v-model="expanded" v-bind="args">
+                    <template #before v-if="args.before"><div v-html="args.before"></div></template>
+                    <template #default="{ init, toggle, aria }">
+                        <button :ref="(e) => init(e)" v-bind="aria" id="toggle-button" class="absolute cursor-pointer bg-info p-lg text-center top-full left-full -translate-1/2" data-testId="trigger" @click="toggle">
+                            Toggle dropdown
+                        </button>
+                    </template>
+					<template #items>
+						<vv-dropdown-item>
+							<vv-button modifiers="link" icon="add" label="Create" class="p-md"  />
+						</vv-dropdown-item>
+						<vv-dropdown-item>
+							<vv-button modifiers="link" icon="edit" label="Update" class="p-md"  />
+						</vv-dropdown-item>
+						<vv-dropdown-item>
+							<vv-button modifiers="link" icon="trash" label="Delete" class="p-md"  />
+						</vv-dropdown-item>
+					</template>
+                    <template #after v-if="args.after"><div v-html="args.after"></div></template>
+				</vv-dropdown>
+			</div>
+		</div>
+	`,
+})
+
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Before"
+		args={{
+			before: '<div class="bg-warning p-xs text-center">Before</div>',
+		}}
+		argTypes={{
+			before: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="After"
+		args={{
+			after: '<div class="bg-danger text-white p-xs text-center">After</div>',
+		}}
+		argTypes={{
+			after: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Icon/Icon.stories.mdx

@@ -15,7 +15,7 @@ export const Template = (args) => ({
 	setup() {
 		return { args }
 	},
-	template: /*html*/`<vv-icon v-bind="args" />`,
+	template: /*html*/ `<vv-icon v-bind="args" />`,
 })
 
 <Canvas>

package/src/stories/Icon/IconsCollection.stories.mdx

@@ -1,7 +1,7 @@
+import { ref, watch } from 'vue'
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
 import VvIcon from '@/components/VvIcon/VvIcon.vue'
 import { icons as NormalIcons } from '@/assets/icons/normal.json'
-import { ref, watch } from 'vue'
 import { defaultArgs, argTypes } from './Icon.settings'
 
 <Meta
@@ -22,7 +22,7 @@ export const Template = (args) => ({
 		})
 		return { args, search, icons }
 	},
-	template: /*html*/`
+	template: /*html*/ `
 		<div class="absolute inset-0 overflow-y-auto p-16">
 			<div class="vv-input-text">
 				<div class="vv-input-text__wrapper">

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

@@ -1,4 +1,4 @@
-import { InputTextareaArgTypes } from '@/stories/argTypes'
+import { HintArgTypes, InputTextareaArgTypes } from '@/stories/argTypes'
 import { VvInputTextProps } from '@/components/VvInputText'
 import normal from '@/assets/icons/normal.json'
 
@@ -15,6 +15,7 @@ export const defaultArgs = {
 
 export const argTypes = {
 	...InputTextareaArgTypes,
+	...HintArgTypes,
 	type: {
 		description: 'Type of form control',
 		options: [

package/src/stories/InputText/InputText.stories.mdx

@@ -2,6 +2,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
 import VvInputText from '@/components/VvInputText/VvInputText.vue'
 import { defaultArgs, argTypes } from './InputText.settings'
 import { defaultTest } from './InputText.test'
+import { Position } from '@/constants'
 
 <Meta
 	title="Components/InputText"
@@ -16,14 +17,14 @@ export const Template = (args) => ({
 		return { args }
 	},
 	data: () => ({ inputValue: undefined }),
-	template: /*html*/`
+	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="pl-sm flex" v-html="args.before"></div></template>
+			<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>
-			<template #after v-if="args.after"><div class="pr-sm flex" v-html="args.after"></div></template>
 		</vv-input-text>
 		<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
-        `,
+    `,
 })
 
 <Canvas>
@@ -73,6 +74,7 @@ export const Template = (args) => ({
 			valid: true,
 			validLabel: 'The field is valid.',
 			icon: 'check',
+			iconPosition: Position.after,
 		}}
 		argTypes={{
 			valid: {
@@ -94,6 +96,7 @@ export const Template = (args) => ({
 			invalid: true,
 			invalidLabel: 'The field is required.',
 			icon: 'error-2',
+			iconPosition: Position.after,
 		}}
 		argTypes={{
 			invalid: {

package/src/stories/InputText/InputTextIconPosition.stories.mdx

@@ -32,10 +32,10 @@ import { defaultArgs, argTypes } from './InputText.settings'
 
 <Canvas>
 	<Story
-		name="Left"
+		name="After"
 		args={{
 			icon: 'heart',
-			iconPosition: 'left',
+			iconPosition: 'after',
 		}}
 		argTypes={{
 			icon: {

package/src/stories/InputText/InputTextSlots.stories.mdx

@@ -15,7 +15,7 @@ import { defaultArgs, argTypes } from './InputText.settings'
 	<Story
 		name="Before"
 		args={{
-			before: '<div class="vv-badge vv-badge--sm uppercase">Before</vv-badge>',
+			before: '<div class="vv-badge vv-badge--sm uppercase">Before</div>',
 		}}
 		argTypes={{
 			before: {
@@ -34,7 +34,7 @@ import { defaultArgs, argTypes } from './InputText.settings'
 	<Story
 		name="After"
 		args={{
-			after: '<div class="vv-badge vv-badge--sm uppercase">After</vv-badge>',
+			after: '<div class="vv-badge vv-badge--sm uppercase">After</div>',
 		}}
 		argTypes={{
 			after: {

package/src/stories/Progress/Progress.stories.mdx

@@ -15,7 +15,9 @@ export const Template = (args) => ({
 	setup() {
 		return { args }
 	},
-	template: /*html*/`<vv-progress v-bind="args" />`,
+	template: /*html*/ `
+		<vv-progress v-bind="args" />
+	`,
 })
 
 <Story name="Default" play={defaultTest}>

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

@@ -4,6 +4,6 @@ import { within } from '@storybook/testing-library'
 
 export async function defaultTest({ canvasElement }: PlayAttributes) {
 	const progress = await within(canvasElement).findByRole('progressbar')
-	expect(progress).toHaveClass('vv-progress')
+	await expect(progress).toHaveClass('vv-progress')
 	await expect(progress).toHaveNoViolations()
 }

package/src/stories/Radio/Radio.stories.mdx

@@ -16,7 +16,7 @@ export const Template = (args) => ({
 		return { args }
 	},
 	data: () => ({ inputValue: undefined }),
-	template: /*html*/`
+	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>

package/src/stories/RadioGroup/RadioGroup.stories.mdx

@@ -16,13 +16,13 @@ export const Template = (args) => ({
 		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> 
-        `,
+	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> 
+	`,
 })
 
 <Canvas>

package/src/stories/RadioGroup/RadioGroupSlots.stories.mdx

@@ -17,15 +17,15 @@ export const Template = (args) => ({
 		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>
-        `,
+	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>
+	`,
 })
 
 <Canvas>

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

@@ -10,7 +10,7 @@ import {
 	IconArgTypes,
 	TabindexArgTypes,
 	IdNameArgTypes,
-	FloatingArgTypes,
+	FloatingLabelArgTypes,
 	UnselectableArgTypes,
 	AutofocusArgTypes,
 	AutocompleteArgTypes,
@@ -38,7 +38,7 @@ export const argTypes = {
 	...ModifiersArgTypes,
 	...OptionsArgTypes,
 	...IconArgTypes,
-	...FloatingArgTypes,
+	...FloatingLabelArgTypes,
 	...UnselectableArgTypes,
 	multiple: {
 		type: 'boolean',

package/src/stories/Select/Select.stories.mdx

@@ -20,11 +20,11 @@ export const Template = (args) => ({
 			inputValue: undefined,
 		}
 	},
-	template: /*html*/`
+	template: /*html*/ `
 		<vv-select v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
-			<template #before v-if="args.before"><div class="pl-sm flex" v-html="args.before"></div></template>
+			<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>
-			<template #after v-if="args.after"><div class="pr-sm flex" v-html="args.after"></div></template>
 		</vv-select>
 		<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
 	`,