@volverjs/ui-vue 0.0.10-beta.5 → 0.0.10-beta.51

package/src/stories/Tab/Tab.settings.ts

@@ -1,41 +1,41 @@
-import type { Meta } from '@storybook/vue3'
 import type { VvTab } from '@/components'
+import type { ArgTypes, Meta } from '@storybook/vue3'
 import { VvTabProps } from '@/components/VvTab'
 
 export const defaultArgs: Meta<typeof VvTab>['args'] = {
-	...propsToObject(VvTabProps),
-	items: [
-		{
-			tab: 'tab-1',
-			label: 'Item 1',
-		},
-		{
-			tab: 'tab-2',
-			label: 'Item 2',
-		},
-		{
-			label: 'Item 3',
-			on: {
-				click: () => {
-					// eslint-disable-next-line no-console
-					console.log('clicked Item 3')
-				},
-			},
-		},
-	],
+    ...propsToObject(VvTabProps),
+    items: [
+        {
+            tab: 'tab-1',
+            label: 'Item 1',
+        },
+        {
+            tab: 'tab-2',
+            label: 'Item 2',
+        },
+        {
+            label: 'Item 3',
+            on: {
+                click: () => {
+                    // eslint-disable-next-line no-console
+                    console.log('clicked Item 3')
+                },
+            },
+        },
+    ],
 }
 
-export const defaultArgTypes = {
-	tabId: {
-		description: 'Slot by tab-id',
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
+export const defaultArgTypes: ArgTypes = {
+    tabId: {
+        description: 'Slot by tab-id',
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
 }

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

@@ -4,11 +4,11 @@ import { defaultArgs, defaultArgTypes } from './Tab.settings'
 import { defaultTest } from './Tab.test'
 
 const meta: Meta<typeof VvTab> = {
-	title: 'Components/Tab',
-	component: VvTab,
-	args: defaultArgs,
-	argTypes: defaultArgTypes,
-	tags: ['autodocs'],
+    title: 'Components/Tab',
+    component: VvTab,
+    args: defaultArgs,
+    argTypes: defaultArgTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,15 +16,15 @@ export default meta
 type Story = StoryObj<typeof VvTab>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvTab },
-		setup() {
-			return { args }
-		},
-		template: /* html */ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvTab },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
 			<div class="m-md w-1/2">
 				<vv-tab v-bind="args" data-testId="element">
 					<template #panel::tab-1>
@@ -65,6 +65,6 @@ export const Default: Story = {
 					</template>
 				</vv-tab>
 			</div>`,
-	}),
-	play: defaultTest,
+    }),
+    play: defaultTest,
 }

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

@@ -1,29 +1,27 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+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) {
-		throw new Error('No items passed')
-	}
+    if (!args.items?.length) {
+        throw new Error('No items passed')
+    }
 
-	// check children number the same of items prop
-	const childrenEls = element.getElementsByClassName('vv-nav')[0]
-	expect(childrenEls?.children[0].children.length).toEqual(args.items?.length)
+    // check children number the same of items prop
+    const childrenEls = element.getElementsByClassName('vv-nav')[0]
+    expect(childrenEls?.children[0].children.length).toEqual(args.items?.length)
 
-	// take firse and second elements
-	const firstNavItemLabelEl =
-		await element.getElementsByClassName('vv-nav__item-label')?.[0]
-	await expect(firstNavItemLabelEl.classList.contains('current')).toBe(true)
+    // take firse and second elements
+    const firstNavItemLabelEl
+		= element.getElementsByClassName('vv-nav__item-label')?.[0]
+    await expect(firstNavItemLabelEl.classList.contains('current')).toBe(true)
 
-	// check tab content to include "Tab 1"
-	const firstTabPanelEl = element.getElementsByClassName('vv-tab__panel')?.[0]
-	await expect(firstTabPanelEl.classList.contains('target')).toBe(true)
+    // check tab content to include "Tab 1"
+    const firstTabPanelEl = element.getElementsByClassName('vv-tab__panel')?.[0]
+    await expect(firstTabPanelEl.classList.contains('target')).toBe(true)
 
-	// check accessibility
-	await expect(element).toHaveNoViolations()
+    // check accessibility
+    await expect(element).toHaveNoViolations()
 }

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

@@ -1,88 +1,90 @@
-import { HintArgTypes, InputTextareaArgTypes } from '@/stories/argTypes'
+import type { ArgTypes } from '@storybook/vue3'
 import { VvTextareaProps } from '@/components/VvTextarea'
+import { HintArgTypes, InputTextareaArgTypes } from '@/stories/argTypes'
 
 export const defaultArgs = {
-	...propsToObject(VvTextareaProps),
-	name: 'vv-textarea',
-	label: 'Textarea label',
-	placeholder: 'Textarea placeholder',
-	minlength: undefined,
-	maxlength: undefined,
+    ...propsToObject(VvTextareaProps),
+    name: 'vv-textarea',
+    label: 'Textarea label',
+    placeholder: 'Textarea placeholder',
+    minlength: undefined,
+    maxlength: undefined,
 }
 
-export const argTypes = {
-	...InputTextareaArgTypes,
-	...HintArgTypes,
-	cols: {
-		description:
+// @ts-expect-error to be fixed
+export const argTypes: ArgTypes = {
+    ...InputTextareaArgTypes,
+    ...HintArgTypes,
+    cols: {
+        description:
 			'The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.',
-		control: {
-			type: 'number',
-		},
-		table: {
-			defaultValue: {
-				summary: 20,
-			},
-		},
-	},
-	rows: {
-		description:
+        control: {
+            type: 'number',
+        },
+        table: {
+            defaultValue: {
+                summary: '20',
+            },
+        },
+    },
+    rows: {
+        description:
 			'The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.',
-		control: {
-			type: 'number',
-		},
-		table: {
-			defaultValue: {
-				summary: 2,
-			},
-		},
-	},
-	wrap: {
-		description:
+        control: {
+            type: 'number',
+        },
+        table: {
+            defaultValue: {
+                summary: '2',
+            },
+        },
+    },
+    wrap: {
+        description:
 			'Indicates how the control should wrap the value for form submission.',
-		options: ['hard', 'soft', 'off'],
-		control: {
-			type: 'check',
-		},
-		table: {
-			defaultValue: {
-				summary: 'soft',
-			},
-		},
-	},
-	spellcheck: {
-		description:
+        options: ['hard', 'soft', 'off'],
+        control: {
+            type: 'check',
+        },
+        table: {
+            defaultValue: {
+                summary: 'soft',
+            },
+        },
+    },
+    spellcheck: {
+        description:
 			'Specifies whether the textarea is subject to spell checking by the underlying browser/OS. ',
-		options: [true, false, 'default'],
-		control: {
-			type: 'check',
-		},
-		table: {
-			defaultValue: {
-				summary: 'default',
-			},
-		},
-	},
-	before: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	after: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
+        options: [true, false, 'default'],
+        control: {
+            type: 'check',
+        },
+        table: {
+            defaultValue: {
+                summary: 'default',
+            },
+        },
+    },
+    before: {
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    after: {
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
 }

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

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
-import { defaultArgs, argTypes } from './Textarea.settings'
+import { argTypes, defaultArgs } from './Textarea.settings'
 import { defaultTest } from './Textarea.test'
 
 const meta: Meta<typeof VvTextarea> = {
-	title: 'Components/Textarea',
-	component: VvTextarea,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/Textarea',
+    component: VvTextarea,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,16 +16,16 @@ export default meta
 type Story = StoryObj<typeof VvTextarea>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvTextarea },
-		setup() {
-			return { args }
-		},
-		data: () => ({ inputValue: undefined }),
-		template: /* html */ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvTextarea },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: undefined }),
+        template: /* html */ `
 			<vv-textarea v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
 				<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>
@@ -33,75 +33,75 @@ export const Default: Story = {
 			</vv-textarea>
 			<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
 		`,
-	}),
-	play: defaultTest,
+    }),
+    play: defaultTest,
 }
 
 export const Disabled: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		disabled: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        disabled: true,
+    },
 }
 
 export const Readonly: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		readonly: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        readonly: true,
+    },
 }
 
 export const Valid: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		valid: true,
-		validLabel: 'The field is valid.',
-		icon: 'check',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        valid: true,
+        validLabel: 'The field is valid.',
+        icon: 'check',
+    },
 }
 
 export const Invalid: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		invalid: true,
-		invalidLabel: 'The field is required.',
-		icon: 'error-2',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        invalid: true,
+        invalidLabel: 'The field is required.',
+        icon: 'error-2',
+    },
 }
 
 export const Hint: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		hintLabel: 'Please enter your name.',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        hintLabel: 'Please enter your name.',
+    },
 }
 
 export const Loading: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		loading: true,
-		loadingLabel: 'Loading...',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        loading: true,
+        loadingLabel: 'Loading...',
+    },
 }
 
 export const Floating: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		floating: true,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        floating: true,
+    },
 }
 
 export const Resizable: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		resizable: true,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        resizable: true,
+    },
 }