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

package/src/components/VvTextarea/VvTextarea.vue

@@ -5,25 +5,11 @@
 </script>
 
 <script setup lang="ts">
-	import {
-		computed,
-		useSlots,
-		ref,
-		toRefs,
-		watch,
-		type TextareaHTMLAttributes,
-	} from 'vue'
+	import type { TextareaHTMLAttributes } from 'vue'
 	import { nanoid } from 'nanoid'
-	import { isEmpty } from '@/utils/ObjectUtilities'
 	import HintSlotFactory from '@/components/common/HintSlot'
-	import { useComponentIcon } from '@/composables/useComponentIcons'
-	import { useComponentFocus } from '@/composables/useComponentFocus'
-	import { useDebouncedInput } from '@/composables/useDebouncedInput'
-	import { useTextCount } from '@/composables/useTextCount'
-	import { useBemModifiers } from '@/composables/useModifiers'
 	import VvIcon from '@/components/VvIcon/VvIcon.vue'
 	import { VvTextareaProps, VvTextareaEvents } from '@/components/VvTextarea'
-	import { useElementVisibility } from '@vueuse/core'
 
 	// props, emit and slots
 	const props = defineProps(VvTextareaProps)

package/src/components/VvTooltip/VvTooltip.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { VvTooltipProps } from '@/components/VvTooltip'
+
+const props = defineProps(VvTooltipProps)
+const { modifiers } = toRefs(props)
+
+// styles
+const { bemCssClasses: tooltipClass } = useBemModifiers('vv-tooltip', {
+	modifiers
+})
+</script>
+
+<template>
+	<span :class="[tooltipClass, `vv-tooltip--${props.position}`]" role="tooltip" inert>
+		<slot />
+	</span>
+</template>

package/src/components/VvTooltip/index.ts

@@ -0,0 +1,21 @@
+import { ModifiersProps } from '@/props'
+import type { PropType } from 'vue'
+
+export enum TooltipPosition {
+	left = 'left',
+	right = 'right',
+	top = 'top',
+	bottom = 'bottom'
+}
+
+export const VvTooltipProps = {
+	...ModifiersProps,
+	/**
+	 * Define the tooltip position
+	 * @default TooltipPosition.bottom
+	 */
+	position: {
+		type: String as PropType<TooltipPosition>,
+		default: TooltipPosition.bottom
+	}
+}

package/src/stories/Accordion/Accordion.stories.mdx

@@ -21,7 +21,7 @@ export const Template = (args, { argTypes }) => ({
 	setup() {
 		return { args }
 	},
-	template: `<vv-accordion data-testId="element" v-bind="args" v-model="open">
+	template: /*html*/`<vv-accordion data-testId="element" v-bind="args" v-model="open">
 					<template #summary v-if="args.summary"><div v-html="args.summary"></div></template>
 					<template #details v-if="args.details"><div v-html="args.details"></div></template>
 			   </vv-accordion>

package/src/stories/AccordionGroup/AccordionGroup.stories.mdx

@@ -21,7 +21,7 @@ export const Template = (args, { argTypes }) => ({
 			selected: null,
 		}
 	},
-	template: `<vv-accordion-group data-testId="element" v-bind="args" v-model="selected" />
+	template: /*html*/`<vv-accordion-group data-testId="element" v-bind="args" v-model="selected" />
 				<div class="mt-24">
 					Selected: <span data-testId="value">{{ selected }}</span>
 				</div>`,

package/src/stories/AccordionGroup/AccordionGroupSlots.stories.mdx

@@ -42,7 +42,7 @@ import { defaultArgs, argTypes } from './AccordionGroup.settings'
 							'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
 					}
 				},
-				template: `<vv-accordion-group data-testId="element" v-bind="args" v-model="selected">
+				template: /*html*/`<vv-accordion-group data-testId="element" v-bind="args" v-model="selected">
 							<vv-accordion name="a-1" data-testId="a-1" title="Details 1" :content="content" />
 							<vv-accordion name="a-2" title="Details 2" :content="content" />
 							<vv-accordion name="a-3" title="Details 3" :content="content" />

package/src/stories/Badge/Badge.stories.mdx

@@ -16,7 +16,7 @@ export const Template = (args, { argTypes }) => ({
 	setup() {
 		return { args }
 	},
-	template: `<vv-badge v-bind="args">
+	template: /*html*/`<vv-badge v-bind="args">
 			   		<template #default v-if="args.default"><span v-html="args.default"></span></template>	
 			   </vv-badge>`,
 })

package/src/stories/Breadcrumb/Breadcrumb.stories.mdx

@@ -15,7 +15,7 @@ export const Template = (args) => ({
 	setup() {
 		return { args }
 	},
-	template: `<div class="bg-surface p-lg">
+	template: /*html*/`<div class="bg-surface p-lg">
 			     <vv-breadcrumb v-bind="args" />
 			   </div>`,
 })

package/src/stories/Breadcrumb/BreadcrumbSlots.stories.mdx

@@ -29,7 +29,7 @@ import { defaultArgs, argTypes } from './Breadcrumb.settings'
 					return { args }
 				},
 				components: { VvBreadcrumb, VvIcon },
-				template: `
+				template: /*html*/`
                 <VvBreadcrumb v-bind="args">
                     <template #label="{route, index}">
                         <VvIcon v-if="index === 0" name="home" :aria-label="route.label"  />

package/src/stories/Button/Button.stories.mdx

@@ -18,7 +18,7 @@ export const Template = (args) => ({
 	setup() {
 		return { args }
 	},
-	template: `<vv-button v-bind="args" v-model="value" name="my-button">
+	template: /*html*/`<vv-button v-bind="args" v-model="value" name="my-button">
 					<template #before v-if="args.before"><div v-html="args.before"></div></template>
 					<template #default v-if="args.default"><div v-html="args.default"></div></template>
 					<template #after v-if="args.after"><div v-html="args.after"></div></template>

package/src/stories/Button/ButtonModifiers.stories.mdx

@@ -123,7 +123,7 @@ import { argTypes, defaultArgs } from './Button.settings'
 				setup() {
 					return { args }
 				},
-				template: `
+				template: /*html*/`
 				<div class="bg-black p-md">
 					<vv-button v-bind="args" />
 				</div>
@@ -156,7 +156,7 @@ import { argTypes, defaultArgs } from './Button.settings'
 				setup() {
 					return { args }
 				},
-				template: `
+				template: /*html*/`
 				<div class="bg-white p-md">
 					<vv-button v-bind="args" />
 				</div>

package/src/stories/Button/ButtonSlots.stories.mdx

@@ -46,7 +46,7 @@ import { argTypes, defaultArgs } from './Button.settings'
 					return { args }
 				},
 				components: { VvButton, VvBadge },
-				template: `<vv-button v-bind="args">
+				template: /*html*/`<vv-button v-bind="args">
 							<template #before>
 								<vv-badge value="12" modifiers="danger" />
 							</template>
@@ -77,7 +77,7 @@ import { argTypes, defaultArgs } from './Button.settings'
 					return { args }
 				},
 				components: { VvButton, VvBadge },
-				template: `<vv-button v-bind="args">
+				template: /*html*/`<vv-button v-bind="args">
 							<template #after>
 								<vv-badge value="12" modifiers="danger" />
 							</template>
@@ -100,7 +100,7 @@ import { argTypes, defaultArgs } from './Button.settings'
 				setup() {
 					return { args }
 				},
-				template: `<vv-button v-bind="args">
+				template: /*html*/`<vv-button v-bind="args">
 							<template #label>
 								Label <em class="italic">slot!</em>
 							</template>

package/src/stories/ButtonGroup/ButtonGroup.stories.mdx

@@ -20,7 +20,7 @@ export const Template = (args, { argTypes }) => ({
 	setup() {
 		return { args }
 	},
-	template: `
+	template: /*html*/`
         <vv-button-group v-bind="args" v-model="value" data-testId="button-group">
             <vv-button name="1a" data-testId="first-button">Button 1</vv-button>
             <vv-button name="2b">Button 2</vv-button>

package/src/stories/ButtonGroup/ButtonGroupSlots.stories.mdx

@@ -20,7 +20,7 @@ export const Template = (args, { argTypes }) => ({
 	setup() {
 		return { args }
 	},
-	template: `
+	template: /*html*/`
         <vv-button-group v-bind="args" v-model="value" data-testId="button-group">
             <vv-button modifiers="primary" name="1a" data-testId="first-button">Button 1</vv-button>
             <vv-button modifiers="secondary" name="2b">Button 2</vv-button>

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.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.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.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.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.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.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,26 @@
+import { propsToObject } from '@/utils/ObjectUtilities'
+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')
+	}
+}