@volverjs/ui-vue 0.0.10-beta.34 → 0.0.10-beta.36

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

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvTab from '@/components/VvTab/VvTab.vue'
 import { defaultArgs, defaultArgTypes } from './Tab.settings'
 import { defaultTest } from './Tab.test'
+import VvTab from '@/components/VvTab/VvTab.vue'
 
 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,27 +1,27 @@
+import { within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = await within(canvasElement).findByTestId('element')
+    const element = await within(canvasElement).findByTestId('element')
 
-	if (!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 =
-		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,91 +1,90 @@
+import type { ArgTypes } from '@storybook/vue3'
 import { HintArgTypes, InputTextareaArgTypes } from '@/stories/argTypes'
 import { VvTextareaProps } from '@/components/VvTextarea'
-import type { ArgTypes } from '@storybook/vue3'
 
 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,
 }
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
+// @ts-expect-error to be fixed
 export const argTypes: ArgTypes = {
-	...InputTextareaArgTypes,
-	...HintArgTypes,
-	cols: {
-		description:
+    ...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 { defaultTest } from './Textarea.test'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 
 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,
+    },
 }

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

@@ -1,86 +1,87 @@
+import { within, userEvent } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within, userEvent } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = await within(canvasElement).findByTestId('element')
-	const value = await within(canvasElement).findByTestId('value')
-	const textarea = element.getElementsByTagName('textarea')[0]
-	const hint = element.getElementsByClassName('vv-textarea__hint')[0]
+    const element = await within(canvasElement).findByTestId('element')
+    const value = await within(canvasElement).findByTestId('value')
+    const textarea = element.getElementsByTagName('textarea')[0]
+    const hint = element.getElementsByClassName('vv-textarea__hint')[0]
 
-	// value
-	if (!args.invalid && !args.disabled && !args.readonly) {
-		const inputValue = 'Lorem ipsum'
-		if (inputValue) {
-			await expect(textarea).toBeClicked()
-			await userEvent.keyboard(inputValue)
-			await sleep()
-			if (args.maxlength) {
-				await expect(value.innerHTML).toEqual(
-					inputValue.slice(0, args.maxlength),
-				)
-			} else {
-				await expect(value.innerHTML).toEqual(inputValue)
-			}
-		}
-	}
+    // value
+    if (!args.invalid && !args.disabled && !args.readonly) {
+        const inputValue = 'Lorem ipsum'
+        if (inputValue) {
+            await expect(textarea).toBeClicked()
+            await userEvent.keyboard(inputValue)
+            await sleep()
+            if (args.maxlength) {
+                await expect(value.innerHTML).toEqual(
+                    inputValue.slice(0, args.maxlength),
+                )
+            }
+            else {
+                await expect(value.innerHTML).toEqual(inputValue)
+            }
+        }
+    }
 
-	// disabled
-	if (args.disabled) {
-		await expect(element).toHaveClass('vv-textarea--disabled')
-		await expect(textarea).toHaveProperty('disabled')
-		await expect(textarea).not.toBeClicked()
-	}
+    // disabled
+    if (args.disabled) {
+        await expect(element).toHaveClass('vv-textarea--disabled')
+        await expect(textarea).toHaveProperty('disabled')
+        await expect(textarea).not.toBeClicked()
+    }
 
-	// readonly
-	if (args.readonly) {
-		await expect(element).toHaveClass('vv-textarea--readonly')
-		await expect(textarea).toHaveProperty('readOnly')
-	}
+    // readonly
+    if (args.readonly) {
+        await expect(element).toHaveClass('vv-textarea--readonly')
+        await expect(textarea).toHaveProperty('readOnly')
+    }
 
-	// invalid
-	if (args.invalid) {
-		await expect(element).toHaveClass('vv-textarea--invalid')
-		await expect(textarea).toHaveProperty('ariaInvalid')
-		if (args.invalidLabel) {
-			await expect(hint.innerHTML).toEqual(args.invalidLabel)
-		}
-	}
+    // invalid
+    if (args.invalid) {
+        await expect(element).toHaveClass('vv-textarea--invalid')
+        await expect(textarea).toHaveProperty('ariaInvalid')
+        if (args.invalidLabel) {
+            await expect(hint.innerHTML).toEqual(args.invalidLabel)
+        }
+    }
 
-	// valid
-	if (args.valid) {
-		await expect(element).toHaveClass('vv-textarea--valid')
-		await expect(textarea).toHaveProperty('ariaInvalid', 'false')
-		if (args.validLabel) {
-			await expect(hint.innerHTML).toEqual(args.validLabel)
-		}
-	}
+    // valid
+    if (args.valid) {
+        await expect(element).toHaveClass('vv-textarea--valid')
+        await expect(textarea).toHaveProperty('ariaInvalid', 'false')
+        if (args.validLabel) {
+            await expect(hint.innerHTML).toEqual(args.validLabel)
+        }
+    }
 
-	// minlength / maxlength
-	if (args.minlength) {
-		await expect(textarea).toHaveProperty('minLength', args.minlength)
-	}
+    // minlength / maxlength
+    if (args.minlength) {
+        await expect(textarea).toHaveProperty('minLength', args.minlength)
+    }
 
-	if (args.maxlength) {
-		await expect(textarea).toHaveProperty('maxLength', args.maxlength)
-	}
+    if (args.maxlength) {
+        await expect(textarea).toHaveProperty('maxLength', args.maxlength)
+    }
 
-	// floating
-	if (args.floating) {
-		await expect(element).toHaveClass('vv-textarea--floating')
-	}
+    // floating
+    if (args.floating) {
+        await expect(element).toHaveClass('vv-textarea--floating')
+    }
 
-	// loading
-	if (args.loading) {
-		await expect(element).toHaveClass('vv-textarea--loading')
-	}
+    // loading
+    if (args.loading) {
+        await expect(element).toHaveClass('vv-textarea--loading')
+    }
 
-	// hint
-	if (args.hintLabel) {
-		await expect(hint.innerHTML).toEqual(args.hintLabel)
-	}
+    // hint
+    if (args.hintLabel) {
+        await expect(hint.innerHTML).toEqual(args.hintLabel)
+    }
 
-	// check accessibility
-	await expect(element).toHaveNoViolations()
+    // check accessibility
+    await expect(element).toHaveNoViolations()
 }