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

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

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Default } from './Textarea.stories'
 import { defaultArgs, argTypes } from './Textarea.settings'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 
 const meta: Meta<typeof VvTextarea> = {
-	title: 'Components/Textarea/Length',
-	component: VvTextarea,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Textarea/Length',
+    component: VvTextarea,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,44 +15,44 @@ export default meta
 type Story = StoryObj<typeof VvTextarea>
 
 export const Maxlength: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		maxlength: 5,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        maxlength: 5,
+    },
 }
 
 export const Minlength: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		minlength: 5,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        minlength: 5,
+    },
 }
 
 export const Count: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		count: true,
-		minlength: 100,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        count: true,
+        minlength: 100,
+    },
 }
 
 export const Limit: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		count: 'limit',
-		maxlength: 100,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        count: 'limit',
+        maxlength: 100,
+    },
 }
 
 export const Countdown: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		count: 'countdown',
-		maxlength: 100,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        count: 'countdown',
+        maxlength: 100,
+    },
 }

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

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Default } from './Textarea.stories'
 import { defaultArgs, argTypes } from './Textarea.settings'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 
 const meta: Meta<typeof VvTextarea> = {
-	title: 'Components/Textarea/Slots',
-	component: VvTextarea,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Textarea/Slots',
+    component: VvTextarea,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,25 +15,25 @@ export default meta
 type Story = StoryObj<typeof VvTextarea>
 
 export const Before: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		before: '<div class="vv-badge vv-badge--sm uppercase">Before</div>',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        before: '<div class="vv-badge vv-badge--sm uppercase">Before</div>',
+    },
 }
 
 export const After: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		after: '<div class="vv-badge vv-badge--sm uppercase">After</div>',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        after: '<div class="vv-badge vv-badge--sm uppercase">After</div>',
+    },
 }
 
 export const Hint: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		hint: 'Hint <em class="italic">slot!</em>',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        hint: 'Hint <em class="italic">slot!</em>',
+    },
 }

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

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

package/src/stories/Tooltip/Tooltip.settings.ts

@@ -1,24 +1,24 @@
+import type { ArgTypes } from '@storybook/types'
 import { VvTooltipProps } from '@/components/VvTooltip'
 import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
-import type { ArgTypes } from '@storybook/types'
 
 export const defaultArgs = {
-	...propsToObject(VvTooltipProps),
-	value: "I'm a tooltip",
+    ...propsToObject(VvTooltipProps),
+    value: 'I\'m a tooltip',
 }
 
 export const argTypes: ArgTypes = {
-	...ModifiersArgTypes,
-	...DefaultSlotArgTypes,
-	position: {
-		type: 'string',
-		control: {
-			type: 'select',
-		},
-		table: {
-			defaultValue: { summary: 'bottom' },
-		},
-		description: 'Indicates where to place the tooltip',
-		options: [undefined, 'left', 'right', 'bottom', 'top'],
-	},
+    ...ModifiersArgTypes,
+    ...DefaultSlotArgTypes,
+    position: {
+        type: 'string',
+        control: {
+            type: 'select',
+        },
+        table: {
+            defaultValue: { summary: 'bottom' },
+        },
+        description: 'Indicates where to place the tooltip',
+        options: [undefined, 'left', 'right', 'bottom', 'top'],
+    },
 }

package/src/stories/Tooltip/Tooltip.stories.ts

@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvTooltip from '@/components/VvTooltip/VvTooltip.vue'
-import VvButton from '@/components/VvButton/VvButton.vue'
 import { defaultArgs, argTypes } from './Tooltip.settings'
 import { defaultTest } from './Tooltip.test'
+import VvTooltip from '@/components/VvTooltip/VvTooltip.vue'
+import VvButton from '@/components/VvButton/VvButton.vue'
 
 const meta: Meta<typeof VvTooltip> = {
-	title: 'Components/Tooltip',
-	component: VvTooltip,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/Tooltip',
+    component: VvTooltip,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -17,15 +17,15 @@ export default meta
 type Story = StoryObj<typeof VvTooltip>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvButton, VvTooltip },
-		setup() {
-			return { args }
-		},
-		template: /* html */ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvButton, VvTooltip },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
 			<div class="w-full h-150">
 				<vv-button class="absolute left-1/2 top-1/2 -translate-1/2" data-testId="parent">
 					Hover me
@@ -35,6 +35,6 @@ export const Default: Story = {
 				</vv-button>
 			</div>
 		`,
-	}),
-	play: defaultTest,
+    }),
+    play: defaultTest,
 }

package/src/stories/Tooltip/Tooltip.test.ts

@@ -1,58 +1,59 @@
+import { within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const parentElement = await within(canvasElement).findByTestId('parent')
-	const element = parentElement.firstElementChild as HTMLSpanElement
-
-	if (args.default) {
-		// slot default
-		await expect(element.innerText).toEqual(args.default)
-	} else if (args.value) {
-		// value
-		await expect(element.innerText).toEqual(args.value)
-	}
-
-	// check if tooltip is visible after focus
-	parentElement.focus({
-		preventScroll: true,
-	})
-	await sleep(1200)
-	await expect(window.getComputedStyle(element)).toHaveProperty(
-		'opacity',
-		'1',
-	)
-
-	// check accessibility
-	await expect(element).toHaveNoViolations()
-
-	// check if tooltip is not visible after blur
-	parentElement.blur()
-	await sleep(1200)
-	await expect(window.getComputedStyle(element)).toHaveProperty(
-		'opacity',
-		'0',
-	)
-
-	// position right
-	if (args.position === 'right') {
-		await expect(element).toHaveClass('vv-tooltip--right')
-	}
-
-	// position left
-	if (args.position === 'left') {
-		await expect(element).toHaveClass('vv-tooltip--left')
-	}
-
-	// position top
-	if (args.position === 'top') {
-		await expect(element).toHaveClass('vv-tooltip--top')
-	}
-
-	// position bottom
-	if (args.position === 'bottom') {
-		await expect(element).toHaveClass('vv-tooltip--bottom')
-	}
+    const parentElement = await within(canvasElement).findByTestId('parent')
+    const element = parentElement.firstElementChild as HTMLSpanElement
+
+    if (args.default) {
+        // slot default
+        await expect(element.textContent).toEqual(args.default)
+    }
+    else if (args.value) {
+        // value
+        await expect(element.textContent).toEqual(args.value)
+    }
+
+    // check if tooltip is visible after focus
+    parentElement.focus({
+        preventScroll: true,
+    })
+    await sleep(1200)
+    await expect(window.getComputedStyle(element)).toHaveProperty(
+        'opacity',
+        '1',
+    )
+
+    // check accessibility
+    await expect(element).toHaveNoViolations()
+
+    // check if tooltip is not visible after blur
+    parentElement.blur()
+    await sleep(1200)
+    await expect(window.getComputedStyle(element)).toHaveProperty(
+        'opacity',
+        '0',
+    )
+
+    // position right
+    if (args.position === 'right') {
+        await expect(element).toHaveClass('vv-tooltip--right')
+    }
+
+    // position left
+    if (args.position === 'left') {
+        await expect(element).toHaveClass('vv-tooltip--left')
+    }
+
+    // position top
+    if (args.position === 'top') {
+        await expect(element).toHaveClass('vv-tooltip--top')
+    }
+
+    // position bottom
+    if (args.position === 'bottom') {
+        await expect(element).toHaveClass('vv-tooltip--bottom')
+    }
 }

package/src/stories/Tooltip/TooltipDirective.stories.ts

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvTooltip from '@/components/VvTooltip/VvTooltip.vue'
-import VvButton from '@/components/VvButton/VvButton.vue'
 import { defaultArgs, argTypes } from './Tooltip.settings'
 import { defaultTest } from './Tooltip.test'
+import VvTooltip from '@/components/VvTooltip/VvTooltip.vue'
+import VvButton from '@/components/VvButton/VvButton.vue'
 
 const meta: Meta<typeof VvTooltip> = {
-	title: 'Directives/Tooltip',
-	component: VvTooltip,
-	args: defaultArgs,
-	argTypes,
+    title: 'Directives/Tooltip',
+    component: VvTooltip,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -16,53 +16,53 @@ export default meta
 type Story = StoryObj<typeof VvTooltip>
 
 export const DefaultDirective: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvButton, VvTooltip },
-		setup() {
-			return { args }
-		},
-		template: /* html */ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvButton, VvTooltip },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
 			<div class="w-full h-150">
 				<vv-button v-tooltip:[args.position]="args.value" class="absolute left-1/2 top-1/2 -translate-1/2" data-testId="parent">
 					HOVER Me
 				</vv-button>
 			</div>
 		`,
-	}),
-	play: defaultTest,
+    }),
+    play: defaultTest,
 }
 
 export const Top: Story = {
-	...DefaultDirective,
-	args: {
-		...DefaultDirective.args,
-		position: 'top',
-	},
+    ...DefaultDirective,
+    args: {
+        ...DefaultDirective.args,
+        position: 'top',
+    },
 }
 
 export const Bottom: Story = {
-	...DefaultDirective,
-	args: {
-		...DefaultDirective.args,
-		position: 'bottom',
-	},
+    ...DefaultDirective,
+    args: {
+        ...DefaultDirective.args,
+        position: 'bottom',
+    },
 }
 
 export const Right: Story = {
-	...DefaultDirective,
-	args: {
-		...DefaultDirective.args,
-		position: 'right',
-	},
+    ...DefaultDirective,
+    args: {
+        ...DefaultDirective.args,
+        position: 'right',
+    },
 }
 
 export const Left: Story = {
-	...DefaultDirective,
-	args: {
-		...DefaultDirective.args,
-		position: 'left',
-	},
+    ...DefaultDirective,
+    args: {
+        ...DefaultDirective.args,
+        position: 'left',
+    },
 }