@volverjs/ui-vue 0.0.3-beta.4 → 0.0.4

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

@@ -10,13 +10,14 @@ import { defaultTest } from './Radio.test'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvRadio },
 	setup() {
 		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

@@ -10,19 +10,20 @@ import { defaultTest } from './RadioGroup.test'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	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> 
-        `,
+	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

@@ -11,21 +11,22 @@ import { defaultTest } from './RadioGroup.test'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	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>
-        `,
+	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

@@ -10,7 +10,8 @@ import { defaultArgs, argTypes } from './Select.settings'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvSelect },
 	setup() {
 		return { args }
@@ -20,11 +21,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> 
 	`,

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

@@ -0,0 +1,78 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { Template } from './Select.stories.mdx'
+import { defaultTest } from './Select.test.ts'
+import { defaultArgs, argTypes } from './Select.settings'
+
+<Meta
+	title="Components/Select/Icon"
+	component={VvSelect}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+<Canvas>
+	<Story
+		name="Default"
+		args={{
+			icon: 'heart',
+		}}
+		argTypes={{
+			icon: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="After"
+		args={{
+			icon: 'heart',
+			iconPosition: 'after',
+		}}
+		argTypes={{
+			icon: {
+				control: {
+					disable: true,
+				},
+			},
+			iconPosition: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Src"
+		args={{
+			icon: {
+				name: 'engineering',
+				src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/social/engineering/materialicons/24px.svg',
+			},
+		}}
+		argTypes={{
+			icon: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

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

@@ -16,7 +16,7 @@ import { defaultArgs, argTypes } from './Select.settings'
 		name="Before"
 		play={defaultTest}
 		args={{
-			before: '<div class="vv-badge vv-badge--sm uppercase">Before</vv-badge>',
+			before: '<div class="vv-badge vv-badge--sm uppercase">Before</div>',
 		}}
 	>
 		{Template.bind()}
@@ -28,7 +28,7 @@ import { defaultArgs, argTypes } from './Select.settings'
 		name="After"
 		play={defaultTest}
 		args={{
-			after: '<div class="vv-badge vv-badge--sm uppercase">After</vv-badge>',
+			after: '<div class="vv-badge vv-badge--sm uppercase">After</div>',
 		}}
 	>
 		{Template.bind()}

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

@@ -1,4 +1,4 @@
-import { InputTextareaArgTypes } from '@/stories/argTypes'
+import { HintArgTypes, InputTextareaArgTypes } from '@/stories/argTypes'
 import { VvTextareaProps } from '@/components/VvTextarea'
 
 export const defaultArgs = {
@@ -12,6 +12,7 @@ export const defaultArgs = {
 
 export const argTypes = {
 	...InputTextareaArgTypes,
+	...HintArgTypes,
 	cols: {
 		type: 'number',
 		description:

package/src/stories/Textarea/Textarea.stories.mdx

@@ -10,20 +10,21 @@ import { defaultTest } from './Textarea.test'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvTextarea },
 	setup() {
 		return { args }
 	},
 	data: () => ({ inputValue: undefined }),
-	template: /*html*/`
+	template: /*html*/ `
 		<vv-textarea v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
-			<template #before v-if="args.before"><div class="pt-sm 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="pt-sm pr-sm flex" v-html="args.after"></div></template>
 		</vv-textarea>
 		<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
-        `,
+	`,
 })
 
 <Canvas>

package/src/stories/Textarea/TextareaSlots.stories.mdx

@@ -15,7 +15,7 @@ import { defaultArgs, argTypes } from './Textarea.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 './Textarea.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/Textarea/TextareatIconPosition.stories.mdx

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

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

@@ -3,23 +3,23 @@ import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
 
 export const defaultArgs = {
 	...propsToObject(VvTooltipProps),
-    default: "I'm a tooltip"
+	value: "I'm a tooltip",
 }
 
 export const argTypes = {
-    ...ModifiersArgTypes,
-    ...DefaultSlotArgTypes,
-    position: {
-        type: {
+	...ModifiersArgTypes,
+	...DefaultSlotArgTypes,
+	position: {
+		type: {
 			summary: 'string',
 		},
-        control: {
-            type: 'select',
-        },
-        table: {
+		control: {
+			type: 'select',
+		},
+		table: {
 			defaultValue: { summary: 'bottom' },
 		},
-        description: 'Indicates where to place the tooltip',
-        options: [undefined, 'left', 'right', 'bottom', 'top']
-    }
-}
+		description: 'Indicates where to place the tooltip',
+		options: [undefined, 'left', 'right', 'bottom', 'top'],
+	},
+}

package/src/stories/Tooltip/Tooltip.stories.mdx

@@ -6,25 +6,25 @@ import { defaultTest } from './Tooltip.test'
 
 <Meta
 	title="Components/Tooltip"
-	component={ VvTooltip }
-	args={ defaultArgs }
-	argTypes={ argTypes }
+	component={VvTooltip}
+	args={defaultArgs}
+	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvTooltip, VvButton },
 	setup() {
 		return { args }
 	},
-	template:
-		/* html */`
-		<div class="max-w-full flex justify-center m-xl">
-			<vv-button >Hover me
-				<vv-tooltip v-bind="args" data-testId="element">
-					<template #default v-if="args.default"><div v-html="args.default"></div></template>
-				</vv-tooltip>
-			</vv-button>
-		</div>`
+	template: /* html */ `
+		<vv-button class="fixed 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>
+	`,
 })
 
 <Canvas>
@@ -42,9 +42,10 @@ export const Template = (args) => ({
 			position: {
 				control: {
 					disable: true,
-				}
+				},
 			},
-		}}>
+		}}
+	>
 		{Template.bind({})}
 	</Story>
 </Canvas>
@@ -58,9 +59,10 @@ export const Template = (args) => ({
 			position: {
 				control: {
 					disable: true,
-				}
+				},
 			},
-		}}>
+		}}
+	>
 		{Template.bind({})}
 	</Story>
 </Canvas>
@@ -74,9 +76,10 @@ export const Template = (args) => ({
 			position: {
 				control: {
 					disable: true,
-				}
+				},
 			},
-		}}>
+		}}
+	>
 		{Template.bind({})}
 	</Story>
 </Canvas>
@@ -90,9 +93,10 @@ export const Template = (args) => ({
 			position: {
 				control: {
 					disable: true,
-				}
+				},
 			},
-		}}>
+		}}
+	>
 		{Template.bind({})}
 	</Story>
-</Canvas>
+</Canvas>

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

@@ -4,44 +4,53 @@ import { sleep } from '@/test/sleep'
 import { within } from '@storybook/testing-library'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
+	const parentElement = (await within(canvasElement).findByTestId(
+		'parent',
 	)) as HTMLElement
-	const parentElement = element.parentElement as HTMLElement
+	const element = parentElement.firstElementChild as HTMLSpanElement
 
-	// slot default
-	if (!args.default) {
-		throw new Error('Default slot is required!')
+	if (args.default) {
+		// slot default
+		await expect(element.innerText).toEqual(args.default)
+	} else if (args.value) {
+		// value
+		await expect(element.innerText).toEqual(args.value)
 	}
 
 	// check if tooltip is visible after focus
 	await parentElement.focus()
-	await sleep(800)
-	await expect(window.getComputedStyle(element)).toHaveProperty('opacity', "1")
+	await sleep(1200)
+	await expect(window.getComputedStyle(element)).toHaveProperty(
+		'opacity',
+		'1',
+	)
 
 	// check accessibility
 	await expect(element).toHaveNoViolations()
 
 	// check if tooltip is not visible after blur
 	await parentElement.blur()
-	await sleep(800)
-	await expect(window.getComputedStyle(element)).toHaveProperty('opacity', "0")
+	await sleep(1200)
+	await expect(window.getComputedStyle(element)).toHaveProperty(
+		'opacity',
+		'0',
+	)
 
 	// position right
 	if (args.position === 'right') {
 		await expect(element).toHaveClass('vv-tooltip--right')
 	}
-	
+
 	// position left
 	if (args.position === 'left') {
 		await expect(element).toHaveClass('vv-tooltip--left')
 	}
-	
+
 	// position top
 	if (args.position === 'top') {
 		await expect(element).toHaveClass('vv-tooltip--top')
 	}
-	
+
 	// position bottom
 	if (args.position === 'bottom') {
 		await expect(element).toHaveClass('vv-tooltip--bottom')

package/src/stories/Tooltip/TooltipDirective.stories.mdx

@@ -0,0 +1,99 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+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'
+
+<Meta
+	title="Components/Tooltip/Directive"
+	component={VvTooltip}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { VvTooltip, VvButton },
+	setup() {
+		return { args }
+	},
+	template: /* html */ `
+		<vv-button v-tooltip:[args.position]="args.value" class="fixed left-1/2 top-1/2 -translate-1/2" data-testId="parent">
+            Hover me
+        </vv-button>
+	`,
+})
+
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Top"
+		play={defaultTest}
+		args={{ position: 'top' }}
+		argTypes={{
+			position: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Bottom"
+		play={defaultTest}
+		args={{ position: 'bottom' }}
+		argTypes={{
+			position: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Right"
+		play={defaultTest}
+		args={{ position: 'right' }}
+		argTypes={{
+			position: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Left"
+		play={defaultTest}
+		args={{ position: 'left' }}
+		argTypes={{
+			position: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind({})}
+	</Story>
+</Canvas>