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

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

@@ -16,14 +16,14 @@ export const Template = (args) => ({
 		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,9 +6,9 @@ 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) => ({
@@ -16,15 +16,14 @@ export const Template = (args) => ({
 	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 +41,10 @@ export const Template = (args) => ({
 			position: {
 				control: {
 					disable: true,
-				}
+				},
 			},
-		}}>
+		}}
+	>
 		{Template.bind({})}
 	</Story>
 </Canvas>
@@ -58,9 +58,10 @@ export const Template = (args) => ({
 			position: {
 				control: {
 					disable: true,
-				}
+				},
 			},
-		}}>
+		}}
+	>
 		{Template.bind({})}
 	</Story>
 </Canvas>
@@ -74,9 +75,10 @@ export const Template = (args) => ({
 			position: {
 				control: {
 					disable: true,
-				}
+				},
 			},
-		}}>
+		}}
+	>
 		{Template.bind({})}
 	</Story>
 </Canvas>
@@ -90,9 +92,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,98 @@
+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) => ({
+	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>

package/src/stories/argTypes.ts

@@ -1,4 +1,5 @@
 import normal from '@/assets/icons/normal.json'
+import { Placement, Position, Side } from '@/constants'
 
 export const ValidArgTypes = {
 	valid: {
@@ -110,12 +111,12 @@ export const IconArgTypes = {
 	},
 	iconPosition: {
 		description: 'VvIcon position',
-		options: ['', 'left', 'right'],
+		options: ['', ...Object.values(Position)],
 		control: {
 			type: 'select',
 		},
 		table: {
-			defaultValue: { summary: 'right' },
+			defaultValue: { summary: Position.before },
 		},
 	},
 }
@@ -158,6 +159,20 @@ export const OptionsArgTypes = {
 			},
 		},
 	},
+	disabledKey: {
+		type: {
+			summary: ['string', 'function'],
+		},
+		description: 'Key of disabled in option object',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'disabled',
+			},
+		},
+	},
 }
 
 export const CountArgTypes = {
@@ -272,6 +287,140 @@ export const IdNameArgTypes = {
 	},
 }
 
+export const DropdownArgTypes = {
+	placement: {
+		description: 'Dropdown placement',
+		options: [...Object.values(Placement), ...Object.values(Side)],
+		control: {
+			type: 'select',
+		},
+		table: {
+			defaultValue: { summary: 'bottom' },
+		},
+	},
+	transitionName: {
+		description: 'Dropdown show / hide transition name',
+		control: {
+			type: 'text',
+		},
+	},
+	offset: {
+		description: 'Offset of the dropdown from the trigger',
+		control: {
+			type: 'number',
+		},
+		table: {
+			defaultValue: {
+				summary: 0,
+			},
+			type: {
+				summary: ['number', 'string', 'object'],
+			},
+		},
+	},
+	shift: {
+		description:
+			'Move dropdown to the side if there is no space in the default position',
+		control: {
+			type: 'boolean',
+		},
+		table: {
+			defaultValue: {
+				summary: true,
+			},
+			type: {
+				summary: ['boolean', 'object'],
+			},
+		},
+	},
+	flip: {
+		description:
+			'Flip dropdown position if there is no space in the default position',
+		control: {
+			type: 'boolean',
+		},
+		table: {
+			defaultValue: {
+				summary: true,
+			},
+			type: {
+				summary: ['boolean', 'object'],
+			},
+		},
+	},
+	size: {
+		description:
+			'Change the size of the dropdown to not overflow the viewport',
+		control: {
+			type: 'object',
+		},
+		table: {
+			defaultValue: {
+				summary: '{ "padding": 10 }',
+			},
+			type: {
+				summary: ['boolean', 'object'],
+			},
+		},
+	},
+	autoPlacement: {
+		description: 'Automatically change the position of the dropdown',
+		control: {
+			type: 'boolean',
+		},
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+			type: {
+				summary: ['boolean', 'object'],
+			},
+		},
+	},
+	arrow: {
+		description: 'Add arrow to the dropdown',
+		control: {
+			type: 'boolean',
+		},
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+			type: {
+				summary: 'boolean',
+			},
+		},
+	},
+	autoClose: {
+		description: 'Close dropdown on click outside',
+		control: {
+			type: 'boolean',
+		},
+		table: {
+			defaultValue: {
+				summary: true,
+			},
+			type: {
+				summary: 'boolean',
+			},
+		},
+	},
+	triggerWidth: {
+		description: 'Set dropdown width to the same as the trigger',
+		control: {
+			type: 'boolean',
+		},
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+			type: {
+				summary: 'boolean',
+			},
+		},
+	},
+}
+
 export const UnselectableArgTypes = {
 	unselectable: {
 		type: 'boolean',
@@ -284,7 +433,7 @@ export const UnselectableArgTypes = {
 	},
 }
 
-export const FloatingArgTypes = {
+export const FloatingLabelArgTypes = {
 	floating: {
 		type: 'boolean',
 		description: 'If true the label will be floating',
@@ -340,7 +489,7 @@ export const InputTextareaArgTypes = {
 	...CountArgTypes,
 	...DebounceArgTypes,
 	...IconArgTypes,
-	...FloatingArgTypes,
+	...FloatingLabelArgTypes,
 	minlength: {
 		type: 'number',
 		description:

package/src/types/floating-ui.d.ts

@@ -0,0 +1,7 @@
+import type { flip, autoPlacement, shift, offset, size } from '@floating-ui/vue'
+
+export type AutoPlacementOptions = Parameters<typeof autoPlacement>[0]
+export type FlipOptions = Parameters<typeof flip>[0]
+export type ShiftOptions = Parameters<typeof shift>[0]
+export type OffsetOptions = Parameters<typeof offset>[0]
+export type SizeOptions = Parameters<typeof size>[0]

package/src/types/generic.d.ts

@@ -2,5 +2,4 @@ export type Nullable<T> = T | null | undefined
 
 export type Option = {
 	[key: string]: unknown
-	disabled?: boolean
 }