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

package/src/directives/index.ts

@@ -0,0 +1,5 @@
+import tooltip from '@/directives/v-tooltip'
+
+export default {
+	tooltip,
+}

package/src/directives/v-tooltip.ts

@@ -0,0 +1,15 @@
+import { render, type Directive, type DirectiveBinding } from 'vue'
+import VvTooltip from '@/components/VvTooltip/VvTooltip.vue'
+import type { Side } from '@/constants'
+
+const tooltip: Directive = {
+	beforeMount(el: HTMLElement, binding: DirectiveBinding) {
+		const tooltip = h(VvTooltip, {
+			value: binding.value,
+			position: binding.arg as Side,
+		})
+		render(tooltip, el)
+	},
+}
+
+export default tooltip

package/src/index.ts

@@ -9,6 +9,6 @@ export { VolverPlugin }
 // Add custom property and extend vue type definition
 declare module 'vue' {
 	interface ComponentCustomProperties {
-		$ds?: typeof Volver.prototype
+		$vv?: typeof Volver.prototype
 	}
 }

package/src/props/index.ts

@@ -1,5 +1,13 @@
 import type { PropType } from 'vue'
 import type { Option } from '@/types/generic'
+import type {
+	AutoPlacementOptions,
+	FlipOptions,
+	OffsetOptions,
+	ShiftOptions,
+	SizeOptions,
+} from '@/types/floating-ui'
+import { Placement, Position, Side } from '@/constants'
 
 export const ValidProps = {
 	valid: Boolean,
@@ -57,6 +65,10 @@ export const OptionsProps = {
 	 * Used when options are objects: key to use for option label
 	 */
 	valueKey: { type: [String, Function], default: 'value' },
+	/**
+	 * Used when options are objects: key to use for option disabled
+	 */
+	disabledKey: { type: [String, Function], default: 'disabled' },
 }
 
 export const CountProps = {
@@ -78,12 +90,6 @@ export const DebounceProps = {
 	debounce: [Number, String],
 }
 
-export const ICON_POSITIONS = {
-	LEFT: 'left',
-	RIGHT: 'right',
-} as const
-export type IconPosition = ValueOf<typeof ICON_POSITIONS>
-
 export const IconProps = {
 	/**
 	 * VvIcon name or props
@@ -94,10 +100,10 @@ export const IconProps = {
 	 * VvIcon position
 	 */
 	iconPosition: {
-		type: String as PropType<IconPosition>,
-		validation: (value: IconPosition) =>
-			Object.values(ICON_POSITIONS).includes(value),
-		default: ICON_POSITIONS.RIGHT,
+		type: String as PropType<Position>,
+		default: Position.before,
+		validation: (value: Position) =>
+			Object.values(Position).includes(value),
 	},
 }
 
@@ -109,7 +115,7 @@ export const TabindexProps = {
 	tabindex: { type: [String, Number], default: 0 },
 }
 
-export const FloatingProps = {
+export const FloatingLabelProps = {
 	/**
 	 * If true the label will be floating
 	 */
@@ -123,12 +129,108 @@ export const UnselectableProps = {
 	unselectable: { type: Boolean, default: true },
 }
 
-export const IdNameProps = {
+export const IdProps = {
 	/**
 	 * Global attribute id
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
 	 */
 	id: [String, Number],
+}
+
+export const DropdownProps = {
+	/**
+	 * Dropdown placement
+	 */
+	placement: {
+		type: String as PropType<Side | Placement>,
+		default: Side.bottom,
+		validator: (value: Side & Placement) => {
+			return (
+				Object.values(Side).includes(value) ||
+				Object.values(Placement).includes(value)
+			)
+		},
+	},
+	/**
+	 * Dropdown show / hide transition name
+	 */
+	transitionName: {
+		type: String,
+	},
+	/**
+	 * Offset of the dropdown from the trigger
+	 * @see https://floating-ui.com/docs/offset
+	 */
+	offset: {
+		type: [Number, String, Object] as PropType<
+			OffsetOptions | number | string
+		>,
+		default: 0,
+	},
+	/**
+	 * Move dropdown to the side if there is no space in the default position
+	 * @see https://floating-ui.com/docs/shift
+	 */
+	shift: {
+		type: [Boolean, Object] as PropType<ShiftOptions | boolean>,
+		default: false,
+	},
+	/**
+	 * Flip dropdown position if there is no space in the default position
+	 * @see https://floating-ui.com/docs/flip
+	 */
+	flip: {
+		type: [Boolean, Object] as PropType<FlipOptions | boolean>,
+		default: true,
+	},
+	/**
+	 * Size of the dropdown
+	 * @see https://floating-ui.com/docs/size
+	 */
+	size: {
+		type: [Boolean, Object] as PropType<SizeOptions | boolean>,
+		default: () => ({ padding: 10 }),
+	},
+	/**
+	 * Automatically change the position of the dropdown
+	 * @see https://floating-ui.com/docs/autoPlacement
+	 */
+	autoPlacement: {
+		type: [Boolean, Object] as PropType<AutoPlacementOptions | boolean>,
+		default: false,
+	},
+	/**
+	 * Add arrow to the dropdown
+	 * @see https://floating-ui.com/docs/arrow
+	 */
+	arrow: {
+		type: Boolean,
+		default: false,
+	},
+	/**
+	 * Close dropdown on click outside
+	 */
+	autoClose: {
+		type: Boolean,
+		default: true,
+	},
+	/**
+	 * Autofocus first item on dropdown open
+	 */
+	autofocusFirst: {
+		type: Boolean,
+		default: true,
+	},
+	/**
+	 * Set dropdown width to the same as the trigger
+	 */
+	triggerWidth: {
+		type: Boolean,
+	},
+}
+
+export const IdNameProps = {
+	...IdProps,
 	/**
 	 * Input / Textarea name
 	 * Name of the form control. Submitted with the form as part of a name/value pair
@@ -168,7 +270,7 @@ export const InputTextareaProps = {
 	...CountProps,
 	...DebounceProps,
 	...IconProps,
-	...FloatingProps,
+	...FloatingLabelProps,
 	/**
 	 * Input / Textarea minlength
 	 * Minimum length (number of characters) of value
@@ -211,6 +313,7 @@ export const CheckboxRadioProps = {
 	...HintProps,
 	...DisabledProps,
 	...ReadonlyProps,
+	...ModifiersProps,
 	/**
 	 * Input value
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
@@ -233,6 +336,7 @@ export const CheckboxRadioGroupProps = {
 	...HintProps,
 	...DisabledProps,
 	...ReadonlyProps,
+	...ModifiersProps,
 	/**
 	 * Input value
 	 */

package/src/resolvers/unplugin.ts

@@ -42,8 +42,11 @@ const getStyleNames = function (kebabName: string) {
 	if (STYLE_EXCLUDE.includes(kebabName)) {
 		return undefined
 	}
+	if (kebabName === 'vv-dropdown') {
+		return ['vv-dropdown', 'vv-dropdown-action']
+	}
 	if (kebabName === 'vv-combobox') {
-		return ['vv-select', 'vv-dropdown']
+		return ['vv-select', 'vv-dropdown', 'vv-dropdown-action']
 	}
 	if (kebabName === 'vv-accordion-group') {
 		return ['vv-accordion-group', 'vv-accordion']

package/src/shims.d.ts

@@ -4,7 +4,7 @@ declare interface Window {
 }
 
 declare module '*.vue' {
-	import { type DefineComponent } from 'vue'
+	import type { DefineComponent } from 'vue'
 	// eslint-disable-next-line
 	const component: DefineComponent<{}, {}, any>
 	export default component

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

@@ -21,13 +21,15 @@ export const Template = (args, { argTypes }) => ({
 	setup() {
 		return { args }
 	},
-	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>
-			   <div class="mt-24">
-					Open: <span data-testId="value">{{ open }}</span>
-			   </div>`,
+	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>
+		<div class="mt-24">
+			Open: <span data-testId="value">{{ open }}</span>
+		</div>
+	`,
 })
 
 <Canvas>

package/src/stories/Accordion/Accordion.test.ts

@@ -57,5 +57,5 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	}
 
 	// accessibility
-	expect(element).toHaveNoViolations()
+	await expect(element).toHaveNoViolations()
 }

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

@@ -21,10 +21,12 @@ export const Template = (args, { argTypes }) => ({
 			selected: null,
 		}
 	},
-	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>`,
+	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>
+	`,
 })
 
 <Canvas>

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

@@ -42,14 +42,16 @@ 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: /*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" />
-						</vv-accordion-group>
-						<div class="mt-24"  >
-							Selected: <span data-testId="value">{{ selected }}</span>
-						</div>`,
+				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" />
+					</vv-accordion-group>
+					<div class="mt-24"  >
+						Selected: <span data-testId="value">{{ selected }}</span>
+					</div>
+				`,
 			}
 		}}
 	</Story>

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

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

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

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

package/src/stories/Breadcrumb/Breadcrumb.test.ts

@@ -12,39 +12,41 @@ export async function defaultTest(
 	const breadcrumb = document.getElementsByClassName('vv-breadcrumb')[0]
 
 	// breadcrumb component class test
-	expect(breadcrumb).toHaveClass('vv-breadcrumb')
+	await expect(breadcrumb).toHaveClass('vv-breadcrumb')
 
 	// test every breadcrumb item
 	const navLinks = breadcrumb.children[0].children
-	Array.from(navLinks).forEach((linkContainer, index) => {
+	Array.from(navLinks).forEach(async (linkContainer, index) => {
 		const link = linkContainer.children[0] as HTMLLinkElement
 		const propRoutes = data.args.routes[index]
 
 		// label and title test
 		if (!customSlot) {
-			expect(link.innerText).toEqual(propRoutes.label)
+			await expect(link.innerText).toEqual(propRoutes.label)
 		}
-		expect(link.title).toEqual(propRoutes.title)
+		await expect(link.title).toEqual(propRoutes.title)
 
 		const isNotLastItem = index < navLinks.length - 1
 		if (isNotLastItem) {
 			// link class test
-			expect(linkContainer).toHaveClass('vv-breadcrumb__item')
-			expect(link).toHaveClass('vv-breadcrumb__link')
+			await expect(linkContainer).toHaveClass('vv-breadcrumb__item')
+			await expect(link).toHaveClass('vv-breadcrumb__link')
 
 			// click test
 			link.addEventListener('click', linkClick)
-			expect(link).toBeClicked()
+			await expect(link).toBeClicked()
 
 			// tag type test
-			expect(link.nodeName).toEqual('A')
+			await expect(link.nodeName).toEqual('A')
 
 			// route test
-			expect(link.href).toContain(propRoutes.href)
+			await expect(link.href).toContain(propRoutes.href)
 		} else {
-			expect(linkContainer).toHaveClass('vv-breadcrumb__item-active')
-			expect(link.nodeName).toBe('SPAN')
+			await expect(linkContainer).toHaveClass(
+				'vv-breadcrumb__item-active',
+			)
+			await expect(link.nodeName).toBe('SPAN')
 		}
 	})
-	expect(breadcrumb).toHaveNoViolations()
+	await expect(breadcrumb).toHaveNoViolations()
 }

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

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

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

@@ -11,19 +11,19 @@ import { argTypes, defaultArgs } from './Button.settings'
 />
 
 export const Template = (args) => ({
-	components: { VvButton },
 	data() {
 		return { value: undefined }
 	},
 	setup() {
 		return { args }
 	},
-	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>
-			   </vv-button>
-			   <div v-if="args.toggle" class="mt-md">Value: {{ value }}</div>`,
+	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>
+		</vv-button>
+		<div v-if="args.toggle" class="mt-md">Value: {{ value }}</div>`,
 })
 
 <Canvas>

package/src/stories/Button/Button.test.ts

@@ -12,17 +12,17 @@ export async function defaultTest(
 			? args.modifiers
 			: [args.modifiers]
 
-	expect(element).toHaveClass('vv-button')
+	await expect(element).toHaveClass('vv-button')
 
 	// icon
 	if (args.icon) {
-		expect(element.innerHTML).toContain('vv-icon')
+		await expect(element.innerHTML).toContain('vv-icon')
 	}
 
 	// modifiers
 	if (modifiers) {
 		for (const modifier of modifiers) {
-			expect(element).toHaveClass(`vv-button--${modifier}`)
+			await expect(element).toHaveClass(`vv-button--${modifier}`)
 		}
 	}
 
@@ -34,13 +34,13 @@ export async function defaultTest(
 
 		// link
 		if (args.href) {
-			expect(element).toHaveProperty('href')
+			await expect(element).toHaveProperty('href')
 		}
 		if (args.target) {
-			expect(element).toHaveProperty('target')
+			await expect(element).toHaveProperty('target')
 		}
 	}
 
 	// accessibility
-	expect(element).toHaveNoViolations()
+	await expect(element).toHaveNoViolations()
 }

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

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

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

@@ -20,14 +20,14 @@ export const Template = (args, { argTypes }) => ({
 	setup() {
 		return { args }
 	},
-	template: /*html*/`
+	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>
             <vv-button name="3c">Button 3</vv-button>
         </vv-button-group>
 		<div v-if="args.toggle" class="mt-md">Value: {{ value }}</div>
-        `,
+    `,
 })
 
 <Canvas>

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

@@ -20,14 +20,14 @@ export const Template = (args, { argTypes }) => ({
 	setup() {
 		return { args }
 	},
-	template: /*html*/`
+	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>
             <vv-button modifiers="danger" name="3c">Button 3</vv-button>
         </vv-button-group>
 		<div v-if="args.toggle" class="mt-md">Value: {{ value }}</div>
-        `,
+    `,
 })
 
 <Canvas>

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

@@ -15,14 +15,14 @@ export const Template = (args) => ({
 	setup() {
 		return { args }
 	},
-	template: /*html*/`
+	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>
 			<template #content v-if="args.content"><div v-html="args.content"></div></template>
 			<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
         </vv-card>
-        `,
+    `,
 })
 
 <Canvas>

package/src/stories/Card/Card.test.ts

@@ -14,7 +14,7 @@ export async function defaulTest({ canvasElement, args }: PlayAttributes) {
 	// check modifiers
 	if (modifiers) {
 		for (const modifier of modifiers) {
-			expect(element).toHaveClass(`vv-card--${modifier}`)
+			await expect(element).toHaveClass(`vv-card--${modifier}`)
 		}
 	}
 

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

@@ -31,13 +31,13 @@ import { Template } from './Card.stories.mdx'
 						args,
 					}
 				},
-				template: /*html*/`
+				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"/>
 						</picture>
 					</vv-card>
-					`,
+				`,
 			}
 		}}
 	</Story>