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

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

@@ -16,13 +16,13 @@ export const Template = (args) => ({
 		return { args }
 	},
 	data: () => ({ inputValue: args.uncheckedValue }),
-	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>
-			</vv-checkbox>
-			<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
-        `,
+	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>
+		</vv-checkbox>
+		<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+	`,
 })
 
 <Canvas>

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

@@ -16,13 +16,13 @@ export const Template = (args) => ({
 		return { args }
 	},
 	data: () => ({ inputValue: undefined }),
-	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>
-            </vv-checkbox-group>
-            <div>Value: <span data-testId="value">{{inputValue}}</span></div> 
-        `,
+	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>
+		</vv-checkbox-group>
+		<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+	`,
 })
 
 <Canvas>

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

@@ -17,15 +17,15 @@ export const Template = (args) => ({
 		return { args }
 	},
 	data: () => ({ inputValue: undefined }),
-	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>
-				<vv-checkbox id="o3" name="opts" value="3">Option 3</vv-checkbox>
-				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
-			</vv-checkbox-group>
-			<div>Value: <span data-testId="value">{{inputValue}}</span></div>
-        `,
+	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>
+			<vv-checkbox id="o3" name="opts" value="3">Option 3</vv-checkbox>
+			<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+		</vv-checkbox-group>
+		<div>Value: <span data-testId="value">{{inputValue}}</span></div>
+	`,
 })
 
 <Canvas>

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

@@ -9,8 +9,9 @@ import {
 	OptionsArgTypes,
 	IconArgTypes,
 	TabindexArgTypes,
-	FloatingArgTypes,
+	FloatingLabelArgTypes,
 	UnselectableArgTypes,
+	DropdownArgTypes,
 } from '@/stories/argTypes'
 import { VvComboboxProps } from '@/components/VvCombobox'
 
@@ -22,6 +23,7 @@ export const defaultArgs = {
 	placeholder: 'Select an option',
 	label: 'Combobox label',
 }
+
 export const argTypes = {
 	...TabindexArgTypes,
 	...ValidArgTypes,
@@ -33,8 +35,17 @@ export const argTypes = {
 	...ModifiersArgTypes,
 	...OptionsArgTypes,
 	...IconArgTypes,
-	...FloatingArgTypes,
+	...FloatingLabelArgTypes,
 	...UnselectableArgTypes,
+	...DropdownArgTypes,
+	triggerWidth: {
+		...DropdownArgTypes.triggerWidth,
+		table: {
+			defaultValue: {
+				summary: true,
+			},
+		},
+	},
 	multiple: {
 		type: 'boolean',
 		description:
@@ -52,7 +63,7 @@ export const argTypes = {
 			type: 'text',
 		},
 	},
-	labelNoResults: {
+	noResultsLabel: {
 		type: 'string',
 		description: 'Label of "no results" options',
 		control: {
@@ -97,7 +108,9 @@ export const argTypes = {
 	},
 	maxValues: {
 		description: 'Max number of selected values',
-		type: ['number', 'string'],
+		type: {
+			summary: ['string', 'string[]'],
+		},
 		control: {
 			type: 'text',
 		},
@@ -123,4 +136,98 @@ export const argTypes = {
 			},
 		},
 	},
+	badges: {
+		type: 'boolean',
+		description: 'Show badges for selected values',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+	badgeModifiers: {
+		type: {
+			summary: ['string', 'string[]'],
+		},
+		description: 'Modifiers for badges',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'action sm',
+			},
+		},
+	},
+	dropdownModifiers: {
+		type: {
+			summary: ['string', 'string[]'],
+		},
+		control: {
+			type: 'text',
+		},
+		description: 'Modifiers for dropdown',
+	},
+	autoOpen: {
+		type: 'boolean',
+		description: 'Open dropdown on focus',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+	autoClose: {
+		type: 'boolean',
+		description: 'Close dropdown on select of an option (not multiple)',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+	before: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	after: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	value: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	option: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
 }

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

@@ -21,14 +21,14 @@ export const Template = (args) => ({
 			inputValue: undefined,
 		}
 	},
-	template: /*html*/`
+	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 #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="pl-sm flex" v-html="args.after"></div></template>
 		</vv-combobox>
 		<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
-		`,
+	`,
 })
 
 <Canvas>
@@ -202,3 +202,84 @@ export const Template = (args) => ({
 		{Template.bind()}
 	</Story>
 </Canvas>
+
+<Canvas>
+	<Story
+		name="Arrow"
+		args={{
+			arrow: true,
+			offset: 10,
+			triggerWidth: false,
+			placement: 'bottom-end',
+			dropdownModifiers: 'full-bleed rounded',
+		}}
+		argTypes={{
+			arrow: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Badges"
+		args={{
+			badges: true,
+			multiple: true,
+		}}
+		argTypes={{
+			badges: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Auto open"
+		args={{
+			autoOpen: true,
+		}}
+		argTypes={{
+			autoOpen: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Auto close"
+		args={{
+			autoClose: true,
+		}}
+		argTypes={{
+			autoClose: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Combobox/Combobox.test.ts

@@ -22,10 +22,10 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 		'vv-dropdown',
 	)[0] as HTMLElement
 	const dropdownFirstItem = dropdown.getElementsByTagName(
-		'label',
+		'li',
 	)[0] as HTMLElement
 	const dropdownSecondItem = dropdown.getElementsByTagName(
-		'label',
+		'li',
 	)[1] as HTMLElement
 	const hint = element.getElementsByClassName('vv-select__hint')[0]
 

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

@@ -0,0 +1,78 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
+import { Template } from './Combobox.stories.mdx'
+import { defaultTest } from './Combobox.test.ts'
+import { defaultArgs, argTypes } from './Combobox.settings'
+
+<Meta
+	title="Components/Combobox/Icon"
+	component={VvCombobox}
+	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/Combobox/ComboboxMultiple.stories.mdx

@@ -7,9 +7,8 @@ import { Template } from './Combobox.stories.mdx'
 <Meta
 	title="Components/Combobox/Multiple"
 	component={VvCombobox}
-    args={defaultArgs}
+	args={defaultArgs}
 	argTypes={argTypes}
-
 />
 
 <Canvas>

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

@@ -1,5 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
 import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
 import { Template } from './Combobox.stories.mdx'
 import { defaultTest } from './Combobox.test.ts'
 import { defaultArgs, argTypes } from './Combobox.settings'
@@ -16,7 +17,14 @@ import { defaultArgs, argTypes } from './Combobox.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 vv-badge--gray vv-badge--outline uppercase">Before</div>',
+		}}
+		argTypes={{
+			before: {
+				control: {
+					disable: true,
+				},
+			},
 		}}
 	>
 		{Template.bind()}
@@ -28,13 +36,103 @@ import { defaultArgs, argTypes } from './Combobox.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 vv-badge--gray vv-badge--outline uppercase">After</div>',
+		}}
+		argTypes={{
+			after: {
+				control: {
+					disable: true,
+				},
+			},
 		}}
 	>
 		{Template.bind()}
 	</Story>
 </Canvas>
 
+<Canvas>
+	<Story
+		name="Value"
+		play={defaultTest}
+		args={{
+			multiple: true,
+		}}
+		argTypes={{
+			value: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{(args) => ({
+			components: { VvCombobox },
+			setup() {
+				return { args }
+			},
+			data() {
+				return {
+					inputValue: undefined,
+				}
+			},
+			template: /*html*/ `
+				<vv-combobox 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>
+					<template #after v-if="args.after"><div class="pr-sm flex" v-html="args.after"></div></template>
+					<template #value="{ selectedOptions }">
+						<div v-for="(option, index) in selectedOptions" :key="index" class="vv-badge vv-badge--sm vv-badge--rounded vv-badge--outline uppercase">{{option}}</div>
+					</template>
+				</vv-combobox>
+				<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+			`,
+		})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Option"
+		play={defaultTest}
+		args={{
+			multiple: true,
+		}}
+		argTypes={{
+			option: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{(args) => ({
+			components: { VvCombobox, VvIcon },
+			setup() {
+				return { args }
+			},
+			data() {
+				return {
+					inputValue: undefined,
+				}
+			},
+			template: /*html*/ `
+				<vv-combobox 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>
+					<template #after v-if="args.after"><div class="pr-sm flex" v-html="args.after"></div></template>
+					<template #option="{ option, selected }">
+						<div class="flex flex-1 items-center">
+							<vv-icon :name="selected ? 'check-circle' : 'circle'" />
+							<div class="flex-1 pl-sm">{{ option }}</div>
+						</div>
+					</template>
+				</vv-combobox>
+				<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+			`,
+		})}
+	</Story>
+</Canvas>
+
 <Canvas>
 	<Story
 		name="Hint"
@@ -42,6 +140,13 @@ import { defaultArgs, argTypes } from './Combobox.settings'
 		args={{
 			hint: 'Hint <em class="italic">slot!</em>',
 		}}
+		argTypes={{
+			hint: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
 	>
 		{Template.bind()}
 	</Story>

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

@@ -21,14 +21,14 @@ export const Template = (args) => ({
 			this.open = !this.open
 		},
 	},
-	template: /*html*/`
+	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>
 			<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
 		</vv-dialog>
 		<button class="vv-button" @click="onClick" data-testId="button">Toggle</button>
-        `,
+    `,
 })
 
 <Canvas>

package/src/stories/Dialog/Dialog.test.ts

@@ -15,11 +15,11 @@ export async function defaultTest(
 	)) as HTMLButtonElement
 
 	// hidden
-	expect(element?.style.display).toEqual('none')
+	await expect(element?.style.display).toEqual('none')
 
 	// open
 	await userEvent.click(button)
-	expect(element).toHaveProperty('open', true)
+	await expect(element).toHaveProperty('open', true)
 
 	// check accessibility
 	await expect(element).toHaveNoViolations()
@@ -63,7 +63,7 @@ export async function defaultTest(
 	if (args.autoClose) {
 		await userEvent.click(element)
 		await sleep(1000)
-		expect(element).toHaveProperty('open', false)
-		expect(element?.style.display).toEqual('none')
+		await expect(element).toHaveProperty('open', false)
+		await expect(element?.style.display).toEqual('none')
 	}
 }