@volverjs/ui-vue 0.0.10-beta.32 → 0.0.10-beta.33

package/src/components/VvAlert/index.ts

@@ -138,18 +138,18 @@ export const useVvAlert = (
 
 	// listeners
 	const isMouseover = ref(false)
-	const onMouseover = withModifiers(() => {
+	const onMouseover = () => {
 		isMouseover.value = true
 		if (timeout) {
 			clearTimeout(timeout)
 		}
-	}, ['passive'])
-	const onMouseleave = withModifiers(() => {
+	}
+	const onMouseleave = () => {
 		isMouseover.value = false
 		if (props.autoClose > 0) {
 			timeout = setTimeout(close, props.autoClose)
 		}
-	}, ['passive'])
+	}
 
 	return {
 		close,

package/src/components/VvAlertGroup/VvAlertGroup.vue

@@ -48,7 +48,6 @@
 		<slot name="before" />
 		<TransitionGroup
 			tag="div"
-			role="group"
 			:name="hasTransition"
 			class="vv-alert-group__list"
 			v-on="alertGroupTransitionHandlers"

package/src/components/VvBadge/VvBadge.vue

@@ -13,7 +13,7 @@
 </script>
 
 <template>
-	<span :class="bemCssClasses" role="status">
+	<span :class="bemCssClasses">
 		<!-- @slot Default slot -->
 		<slot>{{ value }}</slot>
 	</span>

package/src/components/VvButtonGroup/VvButtonGroup.vue

@@ -66,8 +66,17 @@
 </script>
 
 <template>
-	<div :class="bemCssClasses" role="group">
+	<fieldset :class="bemCssClasses" role="group">
+		<legend
+			v-if="$slots.legend || legendLabel"
+			class="vv-button-group__legend"
+		>
+			<!-- @slot Legend slot -->
+			<slot name="legend">
+				{{ legendLabel }}
+			</slot>
+		</legend>
 		<!-- @slot Default slot -->
 		<slot />
-	</div>
+	</fieldset>
 </template>

package/src/components/VvButtonGroup/index.ts

@@ -4,6 +4,7 @@ export const VvButtonGroupProps = {
 	...ModifiersProps,
 	...DisabledProps,
 	...UnselectableProps,
+	legendLabel: { type: String },
 	/**
 	 * String or String[] of css classes (modifiers) that will be provided to each button'
 	 */

package/src/components/VvCheckbox/VvCheckbox.vue

@@ -90,12 +90,9 @@
 			if (isBinary.value) {
 				modelValue.value = newValue ? props.value : props.uncheckedValue
 			} else if (Array.isArray(modelValue.value) || isInGroup.value) {
+				const currentValue = modelValue.value ?? []
 				const toReturn = new Set(
-					Array.isArray(modelValue.value)
-						? modelValue.value
-						: modelValue.value !== undefined
-						? [modelValue.value]
-						: [],
+					Array.isArray(currentValue) ? currentValue : [currentValue],
 				)
 				if (newValue) {
 					toReturn.add(props.value)

package/src/components/VvCombobox/VvCombobox.vue

@@ -247,7 +247,7 @@
 
 	const hasValue = computed(() => {
 		return selectedOptions.value
-			.map((option) => getOptionLabel(option))
+			.map((option: string | Option) => getOptionLabel(option))
 			.join(props.separator)
 	})
 
@@ -434,6 +434,7 @@
 							v-bind="aria"
 							class="vv-select__input"
 							role="combobox"
+							:aria-controls="hasDropdownId"
 							:aria-expanded="expanded"
 							:aria-labelledby="hasLabelId"
 							:aria-describedby="

package/src/components/VvInputText/VvInputText.vue

@@ -67,6 +67,7 @@
 	)
 
 	// mask
+	const NEGATIVE_ZERO_REGEX = /^-0?[.,]?[0*]?$/
 	const maskReady = ref(false)
 	const { el, mask, typed, masked, unmasked } = useIMask(
 		computed(
@@ -83,7 +84,7 @@
 				}
 				emit('update:masked', masked.value)
 				if (type.value === INPUT_TYPES.NUMBER) {
-					if (masked.value === '') {
+					if (/^-$|^$/.test(unmasked.value)) {
 						if (
 							localModelValue.value === null ||
 							localModelValue.value === undefined
@@ -93,6 +94,10 @@
 						localModelValue.value = undefined
 						return
 					}
+					if (NEGATIVE_ZERO_REGEX.test(unmasked.value)) {
+						localModelValue.value = 0
+						return
+					}
 					if (typeof typed.value !== 'number') {
 						localModelValue.value = Number(typed.value)
 						return
@@ -170,6 +175,13 @@
 				typed.value = new Date(newValue)
 				return
 			}
+			if (
+				type.value === INPUT_TYPES.NUMBER &&
+				NEGATIVE_ZERO_REGEX.test(unmasked.value) &&
+				newValue === 0
+			) {
+				return
+			}
 			typed.value = newValue
 			unmasked.value = `${typed.value}`
 		}
@@ -432,12 +444,11 @@
 			type === INPUT_TYPES.NUMBER
 		) {
 			let max = props.max
-			if(type === INPUT_TYPES.DATE && !max) {
+			if (type === INPUT_TYPES.DATE && !max) {
 				max = '9999-12-31'
 			}
 			toReturn.step = props.step
-			toReturn.max =
-				max !== undefined ? String(max) : undefined
+			toReturn.max = max !== undefined ? String(max) : undefined
 			toReturn.min =
 				props.min !== undefined ? String(props.min) : undefined
 		}

package/src/components/VvNav/VvNav.vue

@@ -24,12 +24,7 @@
 
 <template>
 	<nav :class="bemCssClasses">
-		<ul
-			class="vv-nav__menu"
-			role="menu"
-			aria-busy="true"
-			@click.stop="onClick"
-		>
+		<ul class="vv-nav__menu" role="menu" @click.stop="onClick">
 			<slot>
 				<VvNavItem
 					v-for="({ on = {}, data, ...item }, index) in items"

package/src/components/VvNav/VvNavItem.vue

@@ -11,7 +11,7 @@
 
 <template>
 	<li class="vv-nav__item" role="presentation">
-		<VvAction v-bind="$attrs" class="vv-nav__item-label">
+		<VvAction v-bind="$attrs" class="vv-nav__item-label" role="menuitem">
 			<slot />
 		</VvAction>
 	</li>

package/src/components/VvProgress/VvProgress.vue

@@ -23,7 +23,6 @@
 
 <template>
 	<progress
-		role="progressbar"
 		v-bind="{
 			class: bemCssClasses,
 			ariaLabel,

package/src/composables/alert/useAlert.ts

@@ -6,7 +6,7 @@ import {
 	DEFAULT_ALERT_INFO_ICON,
 	DefaultAlertIconMap,
 } from '@/constants'
-import type { Alert, AlertModifier } from '@/types/alert'
+import type { Alert } from '@/types/alert'
 
 type AlertInGroup = Alert & { timestamp: number; group: string }
 
@@ -59,8 +59,8 @@ export const useAlert = () => {
 
 		if (!icon) {
 			const alertModifier = normalizedModifiers.find((modifier) =>
-				DefaultAlertIconMap.has(modifier as AlertModifier),
-			) as AlertModifier | undefined
+				DefaultAlertIconMap.has(modifier),
+			)
 
 			if (alertModifier) {
 				icon = DefaultAlertIconMap.get(alertModifier) as string

package/src/stories/Accordion/Accordion.settings.ts

@@ -1,3 +1,4 @@
+import type { ArgTypes } from '@storybook/types'
 import { DisabledArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
 
 export const defaultArgs = {
@@ -9,7 +10,7 @@ export const defaultArgs = {
 	not: false,
 }
 
-export const argTypes = {
+export const argTypes: ArgTypes = {
 	summary: {
 		description: 'The title slot',
 		control: {
@@ -49,7 +50,7 @@ export const argTypes = {
 		control: 'boolean',
 		table: {
 			defaultValue: {
-				summary: false,
+				summary: `false`,
 			},
 		},
 	},

package/src/stories/AccordionGroup/AccordionGroup.settings.ts

@@ -3,6 +3,7 @@ import {
 	DisabledArgTypes,
 	ModifiersArgTypes,
 } from '@/stories/argTypes'
+import type { ArgTypes } from '@storybook/vue3'
 
 export const defaultArgs = {
 	collapse: false,
@@ -31,7 +32,7 @@ export const defaultArgs = {
 	itemModifiers: [],
 }
 
-export const argTypes = {
+export const argTypes: ArgTypes = {
 	'`details::${item.name}`': {
 		table: {
 			disable: true,
@@ -50,7 +51,7 @@ export const argTypes = {
 		control: 'boolean',
 		table: {
 			defaultValue: {
-				summary: false,
+				summary: 'false',
 			},
 		},
 	},
@@ -59,7 +60,7 @@ export const argTypes = {
 		control: 'boolean',
 		table: {
 			defaultValue: {
-				summary: false,
+				summary: 'false',
 			},
 		},
 	},

package/src/stories/AccordionGroup/AccordionGroup.stories.ts

@@ -3,13 +3,15 @@ import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue
 import { defaultTest } from './AccordionGroup.test'
 import { defaultArgs, argTypes } from './AccordionGroup.settings'
 
-export default {
+const meta: Meta<typeof VvAccordionGroup> = {
 	title: 'Components/AccordionGroup',
 	component: VvAccordionGroup,
 	args: defaultArgs,
 	argTypes,
 	tags: ['autodocs'],
-} as Meta<typeof VvAccordionGroup>
+}
+
+export default meta
 
 export type Story = StoryObj<typeof VvAccordionGroup>
 

package/src/stories/AccordionGroup/AccordionGroup.test.ts

@@ -4,14 +4,10 @@ import { sleep } from '@/test/sleep'
 import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
+	const element = await within(canvasElement).findByTestId('element')
 	const firstChild = element.children[0] as HTMLDetailsElement
 	const firstChildSummary = firstChild.getElementsByTagName('summary')[0]
-	const value = (await within(canvasElement).findByTestId(
-		'value',
-	)) as HTMLElement
+	const value = await within(canvasElement).findByTestId('value')
 
 	const modifiers =
 		!args.modifiers || Array.isArray(args.modifiers)

package/src/stories/Alert/Alert.settings.ts

@@ -1,7 +1,6 @@
-import type { Meta } from '@storybook/vue3'
+import type { ArgTypes, Meta } from '@storybook/vue3'
 import type { VvAlert } from '@/components'
-import { IconArgTypes } from '../argTypes'
-import { ModifiersArgTypes } from '../argTypes'
+import { IconArgTypes, ModifiersArgTypes } from '../argTypes'
 
 export const defaultArgs: Meta<typeof VvAlert>['args'] = {
 	title: 'Alert title!',
@@ -11,7 +10,7 @@ export const defaultArgs: Meta<typeof VvAlert>['args'] = {
 	role: 'alert',
 }
 
-export const argTypes = {
+export const argTypes: ArgTypes = {
 	title: {
 		description: 'The alert title',
 	},
@@ -23,7 +22,7 @@ export const argTypes = {
 		control: 'boolean',
 		table: {
 			defaultValue: {
-				summary: false,
+				summary: 'false',
 			},
 		},
 	},
@@ -32,7 +31,7 @@ export const argTypes = {
 		control: 'number',
 		table: {
 			defaultValue: {
-				summary: 0,
+				summary: '0',
 			},
 		},
 	},
@@ -55,7 +54,9 @@ export const argTypes = {
 		control: 'radio',
 		options: ['alert', 'alertdialog'],
 		table: {
-			defaultValue: 'alert',
+			defaultValue: {
+				summary: 'alert',
+			},
 		},
 	},
 	// slots

package/src/stories/Alert/Alert.test.ts

@@ -3,9 +3,7 @@ import { expect } from '@/test/expect'
 import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
+	const element = await within(canvasElement).findByTestId('element')
 
 	expect(element).toHaveClass('vv-alert')
 

package/src/stories/AlertGroup/AlertGroup.settings.ts

@@ -1,3 +1,4 @@
+import type { ArgTypes } from '@storybook/vue3'
 import { ModifiersArgTypes } from '../argTypes'
 
 export const defaultArgs = {
@@ -28,7 +29,8 @@ export const defaultArgs = {
 	stack: false,
 	reverse: false,
 }
-export const argTypes = {
+
+export const argTypes: ArgTypes = {
 	name: {
 		description: 'The alert group name',
 	},

package/src/stories/AlertGroup/AlertGroup.test.ts

@@ -1,11 +1,9 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/test'
+import { userEvent, within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
+	const element = await within(canvasElement).findByTestId('element')
 	const buttons =
 		canvasElement.getElementsByClassName('buttons-container')?.[0]
 
@@ -75,9 +73,9 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 
 	if (buttons) {
 		// click every button child and expect to have alert with correct css class
-		for (let i = 0; i < buttons.children.length; i++) {
-			const button = buttons.children[i] as HTMLElement
-			await button.click()
+		for (const element of buttons.children) {
+			const button = element as HTMLElement
+			await userEvent.click(button)
 			expect(alertGroupList.lastElementChild).toHaveClass(
 				`vv-alert--${button.id}`,
 			)

package/src/stories/Avatar/Avatar.test.ts

@@ -3,9 +3,7 @@ import { expect } from '@/test/expect'
 import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
+	const element = await within(canvasElement).findByTestId('element')
 
 	// slot default
 	if (!args.default && !args.imgSrc) {

package/src/stories/Avatar/AvatarModifiers.stories.ts

@@ -94,6 +94,7 @@ export const CustomColor: Story = {
 		...argTypes,
 		modifiers: {
 			...argTypes.modifiers,
+			//@ts-ignore
 			options: [...argTypes.modifiers.options, 'accent'],
 		},
 	},

package/src/stories/AvatarGroup/AvatarGroup.settings.ts

@@ -1,5 +1,6 @@
 import { VvAvatarGroupProps } from '@/components/VvAvatarGroup'
 import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
+import type { ArgTypes } from '@storybook/vue3'
 
 export const defaultArgs = {
 	...propsToObject(VvAvatarGroupProps),
@@ -25,7 +26,7 @@ export const defaultArgs = {
 	avatarModifiers: 'rounded',
 }
 
-export const argTypes = {
+export const argTypes: ArgTypes = {
 	...DefaultSlotArgTypes,
 	default: {
 		description: 'Default slot',

package/src/stories/AvatarGroup/AvatarGroup.test.ts

@@ -3,9 +3,7 @@ import { expect } from '@/test/expect'
 import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
+	const element = await within(canvasElement).findByTestId('element')
 
 	// slot default
 	if (!args.default && !args.items && !args.items?.length) {

package/src/stories/AvatarGroup/AvatarGroupModifiers.stories.ts

@@ -7,6 +7,7 @@ const meta: Meta<typeof VvAvatarGroup> = {
 	title: 'Components/AvatarGroup/Modifiers',
 	component: VvAvatarGroup,
 	args: defaultArgs,
+	// @ts-ignore
 	argTypes,
 }
 

package/src/stories/Badge/Badge.settings.ts

@@ -1,10 +1,11 @@
 import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
+import type { ArgTypes } from '@storybook/vue3'
 
 export const defaultArgs = {
 	modifiers: [],
 }
 
-export const argTypes = {
+export const argTypes: ArgTypes = {
 	value: {
 		control: { type: 'text' },
 	},

package/src/stories/Badge/Badge.stories.ts

@@ -18,7 +18,7 @@ type Story = StoryObj<typeof VvBadge>
 export const Default: Story = {
 	args: {
 		...defaultArgs,
-		value: 14
+		value: 14,
 	},
 	render: (args) => ({
 		components: { VvBadge },
@@ -26,7 +26,7 @@ export const Default: Story = {
 			return { args }
 		},
 		template: /*html*/ `
-			<vv-badge v-bind="args">
+			<vv-badge v-bind="args" data-testId="element">
 				<template #default v-if="args.default"><span v-html="args.default"></span></template>	
 			</vv-badge>
 		`,

package/src/stories/Badge/Badge.test.ts

@@ -3,7 +3,7 @@ import { within } from '@storybook/test'
 import { expect } from '@/test/expect'
 
 export const defaultTest = async ({ canvasElement, args }: PlayAttributes) => {
-	const badge = await within(canvasElement).findByRole('status')
+	const badge = await within(canvasElement).findByTestId('element')
 	expect(badge).toHaveClass('vv-badge')
 	if (args.modifiers.length > 0) {
 		expect(badge).toHaveClass(`vv-badge--${args.modifiers}`)

package/src/stories/Breadcrumb/Breadcrumb.settings.ts

@@ -1,4 +1,5 @@
 import { VvBreadcrumbProps } from '@/components/VvBreadcrumb'
+import type { ArgTypes } from '@storybook/vue3'
 
 export const defaultArgs = {
 	...propsToObject(VvBreadcrumbProps),
@@ -20,7 +21,7 @@ export const defaultArgs = {
 	],
 }
 
-export const argTypes = {
+export const argTypes: ArgTypes = {
 	modifiers: {
 		control: 'check',
 		options: ['multiline'],

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

@@ -38,4 +38,4 @@ export const Multiline: Story = {
 		...defaultArgs,
 		modifiers: 'multiline',
 	},
-}
+}

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

@@ -7,7 +7,7 @@ function linkClick(event: Event) {
 
 export async function defaultTest(
 	data: PlayAttributes = {} as PlayAttributes,
-	customSlot: boolean,
+	customSlot: boolean = false,
 ) {
 	const breadcrumb = document.getElementsByClassName('vv-breadcrumb')[0]
 

package/src/stories/Button/Button.settings.ts

@@ -1,4 +1,4 @@
-import type { Meta } from '@storybook/vue3'
+import type { ArgTypes, Meta } from '@storybook/vue3'
 import type { VvButton } from '@/components'
 import {
 	DefaultSlotArgTypes,
@@ -23,7 +23,8 @@ export const defaultArgs: Meta<typeof VvButton>['args'] = {
 	icon: undefined,
 }
 
-export const argTypes = {
+// @ts-ignore
+export const argTypes: ArgTypes = {
 	modifiers: {
 		...ModifiersArgTypes.modifiers,
 		options: [
@@ -59,7 +60,6 @@ export const argTypes = {
 	label: {
 		table: {
 			category: '',
-			type: '',
 		},
 		description: 'The label of the button',
 		control: { type: 'text' },
@@ -68,7 +68,7 @@ export const argTypes = {
 		description: 'Whether the button is toggleable',
 		control: { type: 'boolean' },
 		table: {
-			defaultValue: { summary: false },
+			defaultValue: { summary: 'false' },
 		},
 	},
 	value: {
@@ -90,14 +90,14 @@ export const argTypes = {
 		description: 'Whether the button is pressed',
 		control: { type: 'boolean' },
 		table: {
-			defaultValue: { summary: false },
+			defaultValue: { summary: 'false' },
 		},
 	},
 	active: {
 		description: 'Whether the button is active',
 		control: { type: 'boolean' },
 		table: {
-			defaultValue: { summary: false },
+			defaultValue: { summary: 'false' },
 		},
 	},
 	rel: {

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

@@ -35,4 +35,4 @@ export const Default: Story = {
 		`,
 	}),
 	play: defaultTest,
-}
+}

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

@@ -5,9 +5,7 @@ import { expect } from '@/test/expect'
 export async function defaultTest(
 	{ canvasElement, args }: PlayAttributes = {} as PlayAttributes,
 ) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
+	const element = await within(canvasElement).findByTestId('element')
 
 	const modifiers =
 		!args.modifiers || Array.isArray(args.modifiers)

package/src/stories/ButtonGroup/ButtonGroup.settings.ts

@@ -5,13 +5,15 @@ import {
 } from '@/stories/argTypes'
 import { VvButtonGroupProps } from '@/components/VvButtonGroup'
 import { argTypes as buttonArgTypes } from '../Button/Button.settings'
+import type { ArgTypes } from '@storybook/vue3'
 
 export const defaultArgs = {
 	...propsToObject(VvButtonGroupProps),
 	modifiers: [],
 }
 
-export const argTypes = {
+// @ts-ignore
+export const argTypes: ArgTypes = {
 	modelValue: {
 		table: {
 			disable: true,
@@ -27,6 +29,14 @@ export const argTypes = {
 			type: 'check',
 		},
 	},
+	legend: {
+		control: {
+			type: 'text',
+			table: {
+				category: 'Slots',
+			},
+		},
+	},
 	...UnselectableArgTypes,
 	...DefaultSlotArgTypes,
 }

package/src/stories/ButtonGroup/ButtonGroup.stories.ts

@@ -36,4 +36,4 @@ export const Default: Story = {
 		`,
 	}),
 	play: defaultTest,
-}
+}