@volverjs/ui-vue 0.0.10-beta.7 → 0.0.10-beta.71

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

@@ -1,403 +0,0 @@
-import type { VvCombobox } from '@/components'
-import type { Meta } from '@storybook/vue3'
-import {
-	ValidArgTypes,
-	InvalidArgTypes,
-	HintArgTypes,
-	LoadingArgTypes,
-	DisabledArgTypes,
-	ReadonlyArgTypes,
-	ModifiersArgTypes,
-	OptionsArgTypes,
-	IconArgTypes,
-	TabindexArgTypes,
-	FloatingLabelArgTypes,
-	UnselectableArgTypes,
-	DropdownArgTypes,
-} from '@/stories/argTypes'
-import { VvComboboxProps } from '@/components/VvCombobox'
-
-export const defaultArgs: Meta<typeof VvCombobox>['args'] = {
-	...propsToObject(VvComboboxProps),
-	name: 'vv-combobox',
-	maxValues: undefined,
-	options: [
-		'Option 1',
-		'Option 2',
-		'Option 3',
-		'Option 4',
-		'Option 5',
-		'Option 6',
-		'Option 7',
-		'Option 8',
-		'Option 9',
-		'Option 10',
-		'Option 11',
-		'Option 12',
-		'Option 13',
-		'Option 14',
-		'Option 15',
-		'Option 16',
-		'Option 17',
-		'Option 18',
-		'Option 19',
-		'Option 20',
-	],
-	placeholder: 'Select an option',
-	label: 'Combobox label',
-	strategy: 'fixed',
-}
-
-export const argTypes = {
-	...TabindexArgTypes,
-	...ValidArgTypes,
-	...InvalidArgTypes,
-	...HintArgTypes,
-	...LoadingArgTypes,
-	...DisabledArgTypes,
-	...ReadonlyArgTypes,
-	...ModifiersArgTypes,
-	...OptionsArgTypes,
-	...IconArgTypes,
-	...FloatingLabelArgTypes,
-	...UnselectableArgTypes,
-	...DropdownArgTypes,
-	triggerWidth: {
-		...DropdownArgTypes.triggerWidth,
-		table: {
-			defaultValue: {
-				summary: true,
-			},
-		},
-	},
-	multiple: {
-		description:
-			' This Boolean attribute indicates that multiple options can be selected in the list.',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	label: {
-		description: '<label> value for the combobox',
-		control: {
-			type: 'text',
-		},
-	},
-	noResultsLabel: {
-		description: 'Label for no search results',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'No results',
-			},
-		},
-	},
-	noOptionsLabel: {
-		description: 'Label for no options available',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'No options available',
-			},
-		},
-	},
-	selectedHintLabel: {
-		description: 'Label for selected option hint',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'Selected',
-			},
-		},
-	},
-	deselectActionLabel: {
-		description: 'Label for deselect action button',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'Deselect',
-			},
-		},
-	},
-	selectHintLabel: {
-		description: 'Label for select option hint',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'Press enter to select',
-			},
-		},
-	},
-	deselectHintLabel: {
-		description: 'Label for deselected option hint',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'Press enter to remove',
-			},
-		},
-	},
-	closeLabel: {
-		description: 'Label for close button',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'Close',
-			},
-		},
-	},
-	loadingLabel: {
-		description: 'Label for loading',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'Loading...',
-			},
-		},
-	},
-	placeholder: {
-		description: 'Text that appears when it has no value set.',
-		control: {
-			type: 'text',
-		},
-	},
-	searchable: {
-		description: 'Enable search in options',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	searchFunction: {
-		description: 'Search function to filter options',
-		table: {
-			defaultValue: {
-				summary: undefined,
-			},
-		},
-	},
-	searchPlaceholder: {
-		description:
-			'Text that appears in the in the search input when it has no value set..',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'Search...',
-			},
-		},
-	},
-	debounceSearch: {
-		description: 'Debounce milliseconds for search',
-		control: {
-			type: 'number',
-		},
-	},
-	maxValues: {
-		description: 'Max number of selected values',
-
-		control: {
-			type: 'text',
-		},
-	},
-	separator: {
-		description: 'Separator of selected values',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: ', ',
-			},
-		},
-	},
-	native: {
-		description: 'Show native select',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	badges: {
-		description: 'Show badges for selected values',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	badgeModifiers: {
-		description: 'Modifiers for badges',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'action sm',
-			},
-		},
-	},
-	dropdownModifiers: {
-		control: {
-			type: 'text',
-		},
-		description: 'Modifiers for dropdown',
-		table: {
-			defaultValue: {
-				summary: 'mobile',
-			},
-		},
-	},
-	transitionName: {
-		control: {
-			type: 'text',
-		},
-		description: 'Transition name for dropdown',
-		table: {
-			defaultValue: {
-				summary: 'vv-dropdown--mobile-fade-block',
-			},
-		},
-	},
-	autoOpen: {
-		description: 'Open dropdown on focus',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	keepOpen: {
-		description: 'Keep open dropdown on signle select',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	autofocusFirst: {
-		description: 'Autofocus first option on open dropdown',
-		table: {
-			defaultValue: {
-				summary: true,
-			},
-		},
-	},
-	before: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	after: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	'dropdown::before': {
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	'dropdown::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',
-			},
-		},
-	},
-	'no-options': {
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	'no-results': {
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	'update:search': {
-		table: {
-			category: 'Events',
-			type: {
-				summary: 'string',
-			},
-		},
-	},
-}

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

@@ -1,176 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
-import { defaultTest } from './Combobox.test'
-import { defaultArgs, argTypes } from './Combobox.settings'
-
-const meta: Meta<typeof VvCombobox> = {
-	title: 'Components/Combobox',
-	component: VvCombobox,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvCombobox>
-
-export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvCombobox },
-		setup() {
-			return { args }
-		},
-		data: () => ({ inputValue: undefined }),
-		template: /* html */ `
-			<vv-combobox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
-				<template #dropdown::before v-if="args['dropdown::before']"><div class="flex" v-html="args['dropdown::before']"></div></template>
-				<template #dropdown::after v-if="args['dropdown::after']"><div class="flex" v-html="args['dropdown::after']"></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>
-			</vv-combobox>
-			<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
-		`,
-	}),
-	play: defaultTest,
-}
-
-export const Disabled: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		disabled: true,
-	},
-}
-
-export const Readonly: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		readonly: true,
-	},
-}
-
-export const Unselectable: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		unselectable: true,
-	},
-}
-
-export const Valid: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		valid: true,
-		validLabel: 'Selected response is valid.',
-	},
-}
-
-export const Invalid: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		invalid: true,
-		invalidLabel: 'Selected response is invalid.',
-	},
-}
-
-export const Hint: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		hintLabel: 'Please fill the input above.',
-	},
-}
-
-export const Loading: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		loading: true,
-		loadingLabel: 'Loading...',
-	},
-}
-
-export const Searchable: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		searchable: true,
-		searchPlaceholder: 'Search...',
-	},
-}
-
-export const Floating: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		floating: true,
-	},
-}
-
-export const Native: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		native: true,
-	},
-}
-
-export const Arrow: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		arrow: true,
-		offset: 10,
-		triggerWidth: false,
-		placement: 'bottom-end',
-		dropdownModifiers: 'full-bleed rounded',
-	},
-}
-
-export const Badges: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		badges: true,
-		multiple: true,
-	},
-}
-
-export const AutoOpen: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		autoOpen: true,
-	},
-}
-
-export const KeepOpen: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		keepOpen: true,
-	},
-}
-
-export const Size: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		'dropdown::before':
-			'<div class="bg-brand text-white flex-1 text-center uppercase">Before</div>',
-		'dropdown::after':
-			'<div class="bg-brand text-white flex-1 text-center uppercase">After</div>',
-		options: Array.from({ length: 30 }, (_, i) => ({
-			label: `Option ${i + 1}`,
-			value: String(i + 1),
-		})),
-	},
-}

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

@@ -1,110 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
-import { sleep } from '@/test/sleep'
-import { defaultTest as selectDefaultTest } from '@/stories/Select/Select.test'
-
-export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	// native
-	if (args.native) {
-		await selectDefaultTest({ canvasElement, args })
-		return
-	}
-
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
-	const value = (await within(canvasElement).findByTestId(
-		'value',
-	)) as HTMLElement
-	const dropdown = element.getElementsByClassName(
-		'vv-dropdown',
-	)[0] as HTMLElement
-	const dropdownFirstItem = dropdown.querySelectorAll(
-		'div[role="option"]',
-	)[0] as HTMLElement
-	const dropdownSecondItem = dropdown.querySelectorAll(
-		'div[role="option"]',
-	)[1] as HTMLElement
-	const hint = element.getElementsByClassName('vv-select__hint')[0]
-
-	// disabled
-	if (args.disabled) {
-		await expect(element).toHaveClass('vv-select--disabled')
-	}
-
-	// readonly
-	if (args.readonly) {
-		await expect(element).toHaveClass('vv-select--readonly')
-	}
-
-	if (
-		!args.invalid &&
-		!args.disabled &&
-		!args.readonly &&
-		args.options &&
-		args.options.length > 0
-	) {
-		// select first value
-		await expect(dropdownFirstItem).toBeClicked()
-		await sleep()
-
-		const { getOptionValue } = useOptions(args)
-
-		const firstValue = getOptionValue(
-			args.options[0].options?.[0] ?? args.options[0],
-		)
-		// in grouped options the first element is not selectable
-		if (args.multiple) {
-			await expect(JSON.parse(value.innerHTML)).toEqual([firstValue])
-		} else {
-			await expect(value.innerHTML).toEqual(firstValue)
-		}
-
-		// select second value
-		if (args.options && args.options.length > 1) {
-			await expect(dropdownSecondItem).toBeClicked()
-			await sleep()
-			const secondValue = getOptionValue(
-				args.options[0].options?.[1] ?? args.options[1],
-			)
-			if (args.multiple) {
-				await expect(JSON.parse(value.innerHTML)).toEqual([
-					firstValue,
-					secondValue,
-				])
-			} else {
-				await expect(value.innerHTML).toEqual(secondValue)
-			}
-		}
-	}
-
-	// invalid
-	if (args.invalid) {
-		await expect(element).toHaveClass('vv-select--invalid')
-		if (args.invalidLabel) {
-			await expect(hint.innerHTML).toEqual(args.invalidLabel)
-		}
-	}
-
-	// valid
-	if (args.valid) {
-		await expect(element).toHaveClass('vv-select--valid')
-		if (args.validLabel) {
-			await expect(hint.innerHTML).toEqual(args.validLabel)
-		}
-	}
-
-	// loading
-	if (args.loading) {
-		await expect(element).toHaveClass('vv-select--loading')
-	}
-
-	// hint
-	if (args.hintLabel) {
-		await expect(hint.innerHTML).toEqual(args.hintLabel)
-	}
-
-	// check accessibility
-	await expect(element).toHaveNoViolations()
-}

package/src/stories/Combobox/ComboboxIconPosition.stories.ts

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
-import { Default } from './Combobox.stories'
-import { defaultArgs, argTypes } from './Combobox.settings'
-
-const meta: Meta<typeof VvCombobox> = {
-	title: 'Components/Combobox/Icon',
-	component: VvCombobox,
-	args: defaultArgs,
-	argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvCombobox>
-
-export const DefaultIconPosition: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		icon: 'heart',
-	},
-}
-
-export const After: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		icon: 'heart',
-		iconPosition: 'after',
-	},
-}
-
-export const Src: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		icon: {
-			name: 'engineering',
-			src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/social/engineering/materialicons/24px.svg',
-		},
-	},
-}