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

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

@@ -5,12 +5,8 @@ import { within } from '@storybook/test'
 export async function defaultTest(
 	{ canvasElement, args }: PlayAttributes = {} as PlayAttributes,
 ) {
-	const buttonGroup = (await within(canvasElement).findByTestId(
-		'button-group',
-	)) as HTMLElement
-	const firstButton = (await within(canvasElement).findByTestId(
-		'first-button',
-	)) as HTMLElement
+	const buttonGroup = await within(canvasElement).findByTestId('button-group')
+	const firstButton = await within(canvasElement).findByTestId('first-button')
 	const modifiers =
 		!args.modifiers || Array.isArray(args.modifiers)
 			? args.modifiers

package/src/stories/Card/Card.settings.ts

@@ -1,4 +1,5 @@
 import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
+import type { ArgTypes } from '@storybook/vue3'
 
 export const defaultArgs = {
 	title: 'Card title',
@@ -6,7 +7,7 @@ export const defaultArgs = {
 		'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
 }
 
-export const argTypes = {
+export const argTypes: ArgTypes = {
 	modifiers: {
 		...ModifiersArgTypes.modifiers,
 		options: ['glass'],

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

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

package/src/stories/Checkbox/Checkbox.settings.ts

@@ -1,4 +1,5 @@
 import { CheckboxRadioArgTypes } from '@/stories/argTypes'
+import type { ArgTypes } from '@storybook/vue3'
 
 export const defaultArgs = {
 	name: 'checkbox',
@@ -14,13 +15,14 @@ export const defaultArgs = {
 	uncheckedValue: undefined,
 }
 
-export const argTypes = {
+// @ts-ignore
+export const argTypes: ArgTypes = {
 	...CheckboxRadioArgTypes,
 	indeterminate: {
 		description: 'If true, the input will be indeterminated',
 		table: {
 			defaultValue: {
-				summary: false,
+				summary: 'false',
 			},
 		},
 	},
@@ -34,7 +36,7 @@ export const argTypes = {
 		description: 'If true, the input will be displayed as a switch.',
 		table: {
 			defaultValue: {
-				summary: false,
+				summary: 'false',
 			},
 		},
 	},

package/src/stories/Checkbox/Checkbox.test.ts

@@ -4,12 +4,8 @@ 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 value = (await within(canvasElement).findByTestId(
-		'value',
-	)) as HTMLElement
+	const element = await within(canvasElement).findByTestId('element')
+	const value = await within(canvasElement).findByTestId('value')
 	const input = element.getElementsByTagName('input')[0]
 	const hint = element.getElementsByClassName('vv-checkbox__hint')[0]
 

package/src/stories/Checkbox/CheckboxBinary.stories.ts

@@ -30,4 +30,4 @@ export const YesNo: Story = {
 		value: 'Yes',
 		uncheckedValue: 'No',
 	},
-}
+}

package/src/stories/CheckboxGroup/CheckboxGroup.test.ts

@@ -5,12 +5,8 @@ import { within } from '@storybook/test'
 import { getOptionValue } from '@/test/options'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
-	const value = (await within(canvasElement).findByTestId(
-		'value',
-	)) as HTMLElement
+	const element = await within(canvasElement).findByTestId('element')
+	const value = await within(canvasElement).findByTestId('value')
 	const checkbox = element.getElementsByClassName('vv-checkbox')[0]
 	const input = checkbox.getElementsByTagName('input')[0]
 	const hint = element.getElementsByClassName('vv-checkbox-group__hint')[0]

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

@@ -1,5 +1,5 @@
 import type { VvCombobox } from '@/components'
-import type { Meta } from '@storybook/vue3'
+import type { ArgTypes, Meta } from '@storybook/vue3'
 import {
 	ValidArgTypes,
 	InvalidArgTypes,
@@ -48,7 +48,7 @@ export const defaultArgs: Meta<typeof VvCombobox>['args'] = {
 	strategy: 'fixed',
 }
 
-export const argTypes = {
+export const argTypes: ArgTypes = {
 	...TabindexArgTypes,
 	...ValidArgTypes,
 	...InvalidArgTypes,
@@ -66,7 +66,7 @@ export const argTypes = {
 		...DropdownArgTypes.triggerWidth,
 		table: {
 			defaultValue: {
-				summary: true,
+				summary: 'true',
 			},
 		},
 	},
@@ -75,7 +75,7 @@ export const argTypes = {
 			' This Boolean attribute indicates that multiple options can be selected in the list.',
 		table: {
 			defaultValue: {
-				summary: false,
+				summary: 'false',
 			},
 		},
 	},
@@ -183,7 +183,7 @@ export const argTypes = {
 		description: 'Enable search in options',
 		table: {
 			defaultValue: {
-				summary: false,
+				summary: 'false',
 			},
 		},
 	},
@@ -235,7 +235,7 @@ export const argTypes = {
 		description: 'Show native select',
 		table: {
 			defaultValue: {
-				summary: false,
+				summary: 'false',
 			},
 		},
 	},
@@ -243,7 +243,7 @@ export const argTypes = {
 		description: 'Show badges for selected values',
 		table: {
 			defaultValue: {
-				summary: false,
+				summary: 'false',
 			},
 		},
 	},
@@ -284,7 +284,7 @@ export const argTypes = {
 		description: 'Open dropdown on focus',
 		table: {
 			defaultValue: {
-				summary: false,
+				summary: 'false',
 			},
 		},
 	},
@@ -292,7 +292,7 @@ export const argTypes = {
 		description: 'Keep open dropdown on signle select',
 		table: {
 			defaultValue: {
-				summary: false,
+				summary: 'false',
 			},
 		},
 	},
@@ -300,7 +300,7 @@ export const argTypes = {
 		description: 'Autofocus first option on open dropdown',
 		table: {
 			defaultValue: {
-				summary: true,
+				summary: 'true',
 			},
 		},
 	},

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

@@ -11,12 +11,8 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 		return
 	}
 
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
-	const value = (await within(canvasElement).findByTestId(
-		'value',
-	)) as HTMLElement
+	const element = await within(canvasElement).findByTestId('element')
+	const value = await within(canvasElement).findByTestId('value')
 	const dropdown = element.getElementsByClassName(
 		'vv-dropdown',
 	)[0] as HTMLElement

package/src/stories/Dialog/Dialog.settings.ts

@@ -1,4 +1,5 @@
 import { DefaultSlotArgTypes } from '@/stories/argTypes'
+import type { ArgTypes } from '@storybook/vue3'
 
 export const defaultArgs = {
 	id: 'dialog',
@@ -9,7 +10,7 @@ export const defaultArgs = {
 	default: 'Default slot content',
 }
 
-export const argTypes = {
+export const argTypes: ArgTypes = {
 	title: { control: 'text' },
 	transition: {
 		control: 'radio',

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

@@ -1,18 +1,13 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { userEvent } from '@storybook/test'
-import { within } from '@storybook/test'
+import { userEvent, within } from '@storybook/test'
 import { sleep } from '@/test/sleep'
 
 export async function defaultTest(
 	{ canvasElement, args }: PlayAttributes = {} as PlayAttributes,
 ) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLDialogElement
-	const button = (await within(canvasElement).findByTestId(
-		'button',
-	)) as HTMLButtonElement
+	const element = await within(canvasElement).findByTestId('element')
+	const button = await within(canvasElement).findByTestId('button')
 
 	// hidden
 	await expect(element?.style.display).toEqual('none')

package/src/stories/Dropdown/Dropdown.settings.ts

@@ -1,12 +1,13 @@
 import { VvDropdownProps } from '@/components/VvDropdown'
 import { DropdownRole } from '@/constants'
 import { DropdownArgTypes } from '../argTypes'
+import type { ArgTypes } from '@storybook/vue3'
 
 export const defaultArgs = {
 	...propsToObject(VvDropdownProps),
 }
 
-export const argTypes = {
+export const argTypes: ArgTypes = {
 	...DropdownArgTypes,
 	role: {
 		description: 'Dropdown role',

package/src/stories/Dropdown/Dropdown.test.ts

@@ -4,12 +4,8 @@ import { sleep } from '@/test/sleep'
 import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement }: PlayAttributes) {
-	const wrapper = (await within(canvasElement).findByTestId(
-		'wrapper',
-	)) as HTMLElement
-	const trigger = (await within(canvasElement).findByTestId(
-		'trigger',
-	)) as HTMLElement
+	const wrapper = await within(canvasElement).findByTestId('wrapper')
+	const trigger = await within(canvasElement).findByTestId('trigger')
 
 	await expect(trigger).toBeClicked()
 	await sleep(100)

package/src/stories/Dropdown/DropdownSlots.stories.ts

@@ -92,4 +92,4 @@ export const After: Story = {
 		...Default.args,
 		after: '<div class="bg-danger text-white p-xs text-center">After</div>',
 	},
-}
+}

package/src/stories/Icon/Icon.settings.ts

@@ -1,6 +1,7 @@
 import { VvIconPropsDefaults } from '@/components/VvIcon'
 import normal from '@/assets/icons/normal.json'
 import { ModifiersArgTypes } from '@/stories/argTypes'
+import type { ArgTypes } from '@storybook/vue3'
 
 export const defaultArgs = {
 	...VvIconPropsDefaults,
@@ -8,7 +9,7 @@ export const defaultArgs = {
 	width: 48,
 }
 
-export const argTypes = {
+export const argTypes: ArgTypes = {
 	name: {
 		options: Object.keys(normal.icons),
 		control: {

package/src/stories/Icon/Icon.stories.ts

@@ -45,4 +45,3 @@ export const Inline: Story = {
 		svg: `<svg viewBox="0 0 24 24">${NormalIcons.icons.bell.body}</svg>`,
 	},
 }
-

package/src/stories/InputFile/InputFile.settings.ts

@@ -1,5 +1,6 @@
 import { HintArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
 import { VvInputFileProps } from '@/components/VvInputFile'
+import type { ArgTypes } from '@storybook/vue3'
 
 export const defaultArgs = {
 	...propsToObject(VvInputFileProps),
@@ -7,7 +8,7 @@ export const defaultArgs = {
 	label: 'Upload file',
 }
 
-export const argTypes = {
+export const argTypes: ArgTypes = {
 	...HintArgTypes,
 	modifiers: {
 		...ModifiersArgTypes.modifiers,

package/src/stories/InputText/InputText.settings.ts

@@ -1,6 +1,7 @@
 import { HintArgTypes, InputTextareaArgTypes } from '@/stories/argTypes'
 import { VvInputTextProps } from '@/components/VvInputText'
 import normal from '@/assets/icons/normal.json'
+import type { ArgTypes } from '@storybook/vue3'
 
 export const defaultArgs = {
 	...propsToObject(VvInputTextProps),
@@ -13,7 +14,8 @@ export const defaultArgs = {
 	maxlength: undefined,
 }
 
-export const argTypes = {
+// @ts-ignore
+export const argTypes: ArgTypes = {
 	...InputTextareaArgTypes,
 	...HintArgTypes,
 	type: {
@@ -61,7 +63,7 @@ export const argTypes = {
 			'Incremental values that are valid. Available for input types: date, month, week, time, datetime-local and number.',
 		table: {
 			defaultValue: {
-				summary: 1,
+				summary: '1',
 			},
 		},
 	},
@@ -77,7 +79,7 @@ export const argTypes = {
 			'Whether to allow multiple values. Available for input type email.',
 		table: {
 			defaultValue: {
-				summary: false,
+				summary: 'false',
 			},
 		},
 	},
@@ -193,7 +195,7 @@ export const argTypes = {
 		},
 		table: {
 			defaultValue: {
-				summary: false,
+				summary: 'false',
 			},
 			type: {
 				summary: 'boolean',
@@ -207,7 +209,7 @@ export const argTypes = {
 		},
 		table: {
 			defaultValue: {
-				summary: false,
+				summary: 'false',
 			},
 			type: {
 				summary: 'boolean',
@@ -227,7 +229,7 @@ export const argTypes = {
 		},
 		table: {
 			defaultValue: {
-				summary: false,
+				summary: 'false',
 			},
 			type: {
 				summary: 'boolean',

package/src/stories/InputText/InputText.test.ts

@@ -50,12 +50,8 @@ const valueByType = (type: InputType, mask?: string, id?: string) => {
 }
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
-	const value = (await within(canvasElement).findByTestId(
-		'value',
-	)) as HTMLElement
+	const element = await within(canvasElement).findByTestId('element')
+	const value = await within(canvasElement).findByTestId('value')
 	const input = element.getElementsByTagName('input')[0]
 	const hint = element.getElementsByClassName('vv-input-text__hint')[0]
 

package/src/stories/InputText/InputTextMinMax.stories.ts

@@ -48,4 +48,4 @@ export const MaxDate: Story = {
 		type: 'date',
 		max: new Date().toISOString().split('T')[0],
 	},
-}
+}

package/src/stories/Nav/Nav.settings.ts

@@ -1,4 +1,4 @@
-import type { Meta } from '@storybook/vue3'
+import type { ArgTypes, Meta } from '@storybook/vue3'
 import type { VvNav } from '@/components'
 import { VvNavProps } from '@/components/VvNav'
 import { ModifiersArgTypes } from '@/stories/argTypes'
@@ -27,7 +27,7 @@ export const defaultArgs: Meta<typeof VvNav>['args'] = {
 	modifiers: 'sidebar',
 }
 
-export const argTypes = {
+export const argTypes: ArgTypes = {
 	modifiers: {
 		...ModifiersArgTypes.modifiers,
 		options: ['sidebar', 'aside', 'tabs', 'full'],

package/src/stories/Nav/Nav.stories.ts

@@ -30,4 +30,4 @@ export const Default: Story = {
 			</div>`,
 	}),
 	play: defaultTest,
-}
+}

package/src/stories/Nav/Nav.test.ts

@@ -3,13 +3,11 @@ 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')
 
 	const menuEl = element.getElementsByClassName('vv-nav__menu')[0]
 
-	if (!args.items || !args.items?.length) {
+	if (!args.items?.length) {
 		throw new Error('No items passed')
 	}
 

package/src/stories/Progress/Progress.settings.ts

@@ -1,11 +1,12 @@
 import { ModifiersArgTypes } from '@/stories/argTypes'
+import type { ArgTypes } from '@storybook/vue3'
 
 export const defaultArgs = {
 	max: undefined,
 	value: undefined,
 	label: 'Progress bar',
 }
-export const argTypes = {
+export const argTypes: ArgTypes = {
 	...ModifiersArgTypes,
 	max: {
 		description:

package/src/stories/Radio/Radio.test.ts

@@ -4,12 +4,8 @@ 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 value = (await within(canvasElement).findByTestId(
-		'value',
-	)) as HTMLElement
+	const element = await within(canvasElement).findByTestId('element')
+	const value = await within(canvasElement).findByTestId('value')
 	const input = element.getElementsByTagName('input')[0]
 	const hint = element.getElementsByClassName('vv-radio__hint')[0]
 

package/src/stories/RadioGroup/RadioGroup.stories.ts

@@ -69,7 +69,6 @@ export const Invalid: Story = {
 	},
 }
 
-
 export const Valid: Story = {
 	...Default,
 	args: {
@@ -85,4 +84,4 @@ export const Hint: Story = {
 		...defaultArgs,
 		hintLabel: 'Please fill the input above.',
 	},
-}
+}

package/src/stories/RadioGroup/RadioGroup.test.ts

@@ -5,12 +5,8 @@ import { within } from '@storybook/test'
 import { getOptionValue } from '@/test/options'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
-	const value = (await within(canvasElement).findByTestId(
-		'value',
-	)) as HTMLElement
+	const element = await within(canvasElement).findByTestId('element')
+	const value = await within(canvasElement).findByTestId('value')
 	const radio = element.getElementsByClassName('vv-radio')[0]
 	const input = radio.getElementsByTagName('input')[0]
 	const hint = element.getElementsByClassName('vv-radio-group__hint')[0]

package/src/stories/RadioGroup/RadioGroupOptions.stories.ts

@@ -50,4 +50,4 @@ export const OptionValueKey: Story = {
 			{ id: 'third', label: 'Third' },
 		],
 	},
-}
+}

package/src/stories/Select/Select.settings.ts

@@ -16,6 +16,7 @@ import {
 	AutocompleteArgTypes,
 } from '@/stories/argTypes'
 import { VvSelectProps } from '@/components/VvSelect'
+import type { ArgTypes } from '@storybook/vue3'
 
 export const defaultArgs = {
 	...propsToObject(VvSelectProps),
@@ -24,7 +25,7 @@ export const defaultArgs = {
 	placeholder: 'Select an option',
 	label: 'Select label',
 }
-export const argTypes = {
+export const argTypes: ArgTypes = {
 	...IdNameArgTypes,
 	...AutofocusArgTypes,
 	...AutocompleteArgTypes,
@@ -45,7 +46,7 @@ export const argTypes = {
 			'This Boolean attribute indicates that multiple options can be selected in the list.',
 		table: {
 			defaultValue: {
-				summary: false,
+				summary: 'false',
 			},
 		},
 	},
@@ -54,7 +55,7 @@ export const argTypes = {
 			'A Boolean attribute indicating that an option with a non-empty string value must be selected.',
 		table: {
 			defaultValue: {
-				summary: false,
+				summary: 'false',
 			},
 		},
 	},

package/src/stories/Select/Select.test.ts

@@ -4,15 +4,9 @@ import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
-	const value = (await within(canvasElement).findByTestId(
-		'value',
-	)) as HTMLElement
-	const select = element.getElementsByTagName(
-		'select',
-	)[0] as HTMLSelectElement
+	const element = await within(canvasElement).findByTestId('element')
+	const value = await within(canvasElement).findByTestId('value')
+	const select = element.getElementsByTagName('select')[0]
 	const hint = element.getElementsByClassName('vv-select__hint')[0]
 
 	const { getOptionValue } = useOptions(args)

package/src/stories/Select/SelectIconPosition.stories.ts

@@ -22,7 +22,7 @@ export const DefaultIconPosition: Story = {
 	},
 }
 
-export const After: Story ={
+export const After: Story = {
 	...Default,
 	args: {
 		...Default.args,
@@ -40,4 +40,4 @@ export const Src: Story = {
 			src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/social/engineering/materialicons/24px.svg',
 		},
 	},
-}
+}

package/src/stories/Select/SelectOptions.stories.ts

@@ -49,7 +49,6 @@ export const OptionValueKey: Story = {
 			{ id: 'second', label: 'Second' },
 			{ id: 'third', label: 'Third' },
 		],
-
 	},
 }
 

package/src/stories/Tab/Tab.test.ts

@@ -3,11 +3,9 @@ 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')
 
-	if (!args.items || !args.items?.length) {
+	if (!args.items?.length) {
 		throw new Error('No items passed')
 	}
 
@@ -17,7 +15,7 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 
 	// take firse and second elements
 	const firstNavItemLabelEl =
-		await element.getElementsByClassName('vv-nav__item-label')?.[0]
+		element.getElementsByClassName('vv-nav__item-label')?.[0]
 	await expect(firstNavItemLabelEl.classList.contains('current')).toBe(true)
 
 	// check tab content to include "Tab 1"

package/src/stories/Textarea/Textarea.settings.ts

@@ -1,5 +1,6 @@
 import { HintArgTypes, InputTextareaArgTypes } from '@/stories/argTypes'
 import { VvTextareaProps } from '@/components/VvTextarea'
+import type { ArgTypes } from '@storybook/vue3'
 
 export const defaultArgs = {
 	...propsToObject(VvTextareaProps),
@@ -10,7 +11,8 @@ export const defaultArgs = {
 	maxlength: undefined,
 }
 
-export const argTypes = {
+// @ts-ignore
+export const argTypes: ArgTypes = {
 	...InputTextareaArgTypes,
 	...HintArgTypes,
 	cols: {
@@ -21,7 +23,7 @@ export const argTypes = {
 		},
 		table: {
 			defaultValue: {
-				summary: 20,
+				summary: '20',
 			},
 		},
 	},
@@ -33,7 +35,7 @@ export const argTypes = {
 		},
 		table: {
 			defaultValue: {
-				summary: 2,
+				summary: '2',
 			},
 		},
 	},