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

package/src/stories/Card/Card.stories.mdx

@@ -15,7 +15,7 @@ export const Template = (args) => ({
 	setup() {
 		return { args }
 	},
-	template: `
+	template: /*html*/`
         <vv-card v-bind="args" data-testId="card">
 			<template #default v-if="args.default"><div v-html="args.default"></div></template>
 			<template #header v-if="args.header"><div v-html="args.header"></div></template>

package/src/stories/Card/CardSlots.stories.mdx

@@ -31,7 +31,7 @@ import { Template } from './Card.stories.mdx'
 						args,
 					}
 				},
-				template: `
+				template: /*html*/`
 					<vv-card v-bind="args" class="max-w-max" data-testId="card">
 						<picture>
 							<img class="aspect-photo h-300" src="https://unsplash.it/300" alt="Card picture"/>

package/src/stories/Checkbox/Checkbox.stories.mdx

@@ -16,7 +16,7 @@ export const Template = (args) => ({
 		return { args }
 	},
 	data: () => ({ inputValue: args.uncheckedValue }),
-	template: `
+	template: /*html*/`
 			<vv-checkbox 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/CheckboxGroup/CheckboxGroup.stories.mdx

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

package/src/stories/CheckboxGroup/CheckboxGroupSlots.stories.mdx

@@ -17,7 +17,7 @@ export const Template = (args) => ({
 		return { args }
 	},
 	data: () => ({ inputValue: undefined }),
-	template: `
+	template: /*html*/`
            <vv-checkbox-group v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
 				<vv-checkbox id="o1" name="opts" value="1">Option 1</vv-checkbox>
 				<vv-checkbox id="o2" name="opts" value="2">Option 2</vv-checkbox>

package/src/stories/Combobox/Combobox.settings.ts

@@ -13,7 +13,6 @@ import {
 	UnselectableArgTypes,
 } from '@/stories/argTypes'
 import { VvComboboxProps } from '@/components/VvCombobox'
-import { propsToObject } from '@/utils/ObjectUtilities'
 
 export const defaultArgs = {
 	...propsToObject(VvComboboxProps),

package/src/stories/Combobox/Combobox.stories.mdx

@@ -21,7 +21,7 @@ export const Template = (args) => ({
 			inputValue: undefined,
 		}
 	},
-	template: `
+	template: /*html*/`
 		<vv-combobox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
 			<template #before v-if="args.before"><div class="pr-sm flex" v-html="args.before"></div></template>
 			<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>

package/src/stories/Dialog/Dialog.stories.mdx

@@ -21,7 +21,7 @@ export const Template = (args) => ({
 			this.open = !this.open
 		},
 	},
-	template: `
+	template: /*html*/`
 		<vv-dialog v-bind="args" v-model="open" data-testId="element">
 			<template #header v-if="args.header"><div v-html="args.header"></div></template>
 			<template #default v-if="args.default"><div v-html="args.default"></div></template>

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

@@ -1,5 +1,4 @@
 import { VvDropdownProps } from '@/components/VvDropdown'
-import { propsToObject } from '@/utils/ObjectUtilities'
 import {
 	ModifiersArgTypes,
 	OptionsArgTypes,

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

@@ -20,7 +20,7 @@ export const Template = (args) => ({
 			value: undefined,
 		}
 	},
-	template: `
+	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>
 	`,

package/src/stories/Icon/Icon.settings.ts

@@ -1,4 +1,3 @@
-import { propsToObject } from '@/utils/ObjectUtilities'
 import { VvIconProps } from '@/components/VvIcon'
 import normal from '@/assets/icons/normal.json'
 import { ModifiersArgTypes } from '@/stories/argTypes'

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

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

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

@@ -22,7 +22,7 @@ export const Template = (args) => ({
 		})
 		return { args, search, icons }
 	},
-	template: `
+	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,7 +1,6 @@
 import { InputTextareaArgTypes } from '@/stories/argTypes'
 import { VvInputTextProps } from '@/components/VvInputText'
 import normal from '@/assets/icons/normal.json'
-import { propsToObject } from '@/utils/ObjectUtilities'
 
 export const defaultArgs = {
 	...propsToObject(VvInputTextProps),

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

@@ -16,7 +16,7 @@ export const Template = (args) => ({
 		return { args }
 	},
 	data: () => ({ inputValue: undefined }),
-	template: `
+	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 #hint v-if="args.hint"><span v-html="args.hint"></span></template>

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

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

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

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

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

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

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

@@ -15,7 +15,6 @@ import {
 	AutofocusArgTypes,
 	AutocompleteArgTypes,
 } from '@/stories/argTypes'
-import { propsToObject } from '@/utils/ObjectUtilities'
 import { VvSelectProps } from '@/components/VvSelect'
 
 export const defaultArgs = {

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

@@ -20,7 +20,7 @@ export const Template = (args) => ({
 			inputValue: undefined,
 		}
 	},
-	template: `
+	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 #hint v-if="args.hint"><span v-html="args.hint"></span></template>

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

@@ -1,6 +1,5 @@
 import { InputTextareaArgTypes } from '@/stories/argTypes'
 import { VvTextareaProps } from '@/components/VvTextarea'
-import { propsToObject } from '@/utils/ObjectUtilities'
 
 export const defaultArgs = {
 	...propsToObject(VvTextareaProps),

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

@@ -16,7 +16,7 @@ export const Template = (args) => ({
 		return { args }
 	},
 	data: () => ({ inputValue: undefined }),
-	template: `
+	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 #hint v-if="args.hint"><span v-html="args.hint"></span></template>

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

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

package/src/stories/Tooltip/Tooltip.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"
+	component={ VvTooltip }
+	args={ defaultArgs }
+	argTypes={ argTypes }
+/>
+
+export const Template = (args) => ({
+	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>`
+})
+
+<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/Tooltip/Tooltip.test.ts

@@ -0,0 +1,49 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+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',
+	)) as HTMLElement
+	const parentElement = element.parentElement as HTMLElement
+
+	// slot default
+	if (!args.default) {
+		throw new Error('Default slot is required!')
+	}
+
+	// check if tooltip is visible after focus
+	await parentElement.focus()
+	await sleep(800)
+	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")
+
+	// 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/utils/ObjectUtilities.ts

@@ -1,4 +1,4 @@
-import { unref, type Ref } from 'vue'
+import type { Ref } from 'vue'
 
 /**
  * Compare objects, primitives, array, dates, regexp