@volverjs/ui-vue 0.0.13-beta.9 → 0.0.14

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

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvTab from '@/components/VvTab/VvTab.vue'
+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'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvTab>
+
+export const Default: Story = {
+    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>
+						<span class="text-20 font-semibold">Tab 1</span>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+							vitae elit libero, a pharetra augue. Nullam id dolor id nibh
+							ultricies vehicula ut id elit. Morbi leo risus, porta ac
+							consectetur ac, vestibulum at eros. Praesent commodo cursus
+							magna, vel scelerisque nisl consectetur et. Donec sed odio dui.
+							Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae
+							elit libero, a pharetra augue.
+						</p>
+					</template>
+					<template #panel::tab-2>
+						<span class="text-20 font-semibold">Tab 2</span>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+							vitae elit libero, a pharetra augue. Nullam id dolor id nibh
+							ultricies vehicula ut id elit. Morbi leo risus, porta ac
+							consectetur ac, vestibulum at eros. Praesent commodo cursus
+							magna, vel scelerisque nisl consectetur et. Donec sed odio dui.
+							Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae
+							elit libero, a pharetra augue.
+						</p>
+					</template>
+					<template #tab-3>
+						<span class="text-20 font-semibold">Tab 3</span>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+							vitae elit libero, a pharetra augue. Nullam id dolor id nibh
+							ultricies vehicula ut id elit. Morbi leo risus, porta ac
+							consectetur ac, vestibulum at eros. Praesent commodo cursus
+							magna, vel scelerisque nisl consectetur et. Donec sed odio dui.
+							Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae
+							elit libero, a pharetra augue.
+						</p>
+					</template>
+				</vv-tab>
+			</div>`,
+    }),
+    play: defaultTest,
+}

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

@@ -0,0 +1,27 @@
+import type { PlayAttributes } from '@/test/types'
+import { within } from 'storybook/test'
+import { expect } from '@/test/expect'
+
+export async function defaultTest({ canvasElement, args }: PlayAttributes) {
+    const element = await within(canvasElement).findByTestId('element')
+
+    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)
+
+    // 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 accessibility
+    await expect(element).toHaveNoViolations()
+}

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

@@ -0,0 +1,90 @@
+import type { ArgTypes } from '@storybook/vue3-vite'
+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,
+}
+
+// @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:
+			'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:
+			'Indicates how the control should wrap the value for form submission.',
+        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',
+            },
+        },
+    },
+}

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

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
+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'],
+}
+
+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 */ `
+			<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>
+				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+			</vv-textarea>
+			<div>Value: <span data-testId="value">{{ inputValue }}</span></div> 
+		`,
+    }),
+    play: defaultTest,
+}
+
+export const Disabled: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        disabled: true,
+    },
+}
+
+export const Readonly: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        readonly: true,
+    },
+}
+
+export const Valid: Story = {
+    ...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',
+    },
+}
+
+export const Hint: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        hintLabel: 'Please enter your name.',
+    },
+}
+
+export const Loading: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        loading: true,
+        loadingLabel: 'Loading...',
+    },
+}
+
+export const Floating: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        floating: true,
+    },
+}
+
+export const Resizable: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        resizable: true,
+    },
+}

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

@@ -0,0 +1,86 @@
+import type { PlayAttributes } from '@/test/types'
+import { userEvent, within } from 'storybook/test'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+
+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]
+
+    // 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()
+    }
+
+    // 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)
+        }
+    }
+
+    // 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)
+    }
+
+    if (args.maxlength) {
+        await expect(textarea).toHaveProperty('maxLength', args.maxlength)
+    }
+
+    // floating
+    if (args.floating) {
+        await expect(element).toHaveClass('vv-textarea--floating')
+    }
+
+    // loading
+    if (args.loading) {
+        await expect(element).toHaveClass('vv-textarea--loading')
+    }
+
+    // hint
+    if (args.hintLabel) {
+        await expect(hint.innerHTML).toEqual(args.hintLabel)
+    }
+
+    // check accessibility
+    await expect(element).toHaveNoViolations()
+}

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

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

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
+import { argTypes, defaultArgs } from './Textarea.settings'
+import { Default } from './Textarea.stories'
+
+const meta: Meta<typeof VvTextarea> = {
+    title: 'Components/Textarea/Slots',
+    component: VvTextarea,
+    args: defaultArgs,
+    argTypes,
+}
+
+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>',
+    },
+}
+
+export const After: Story = {
+    ...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>',
+    },
+}

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
+import { argTypes, defaultArgs } from './Textarea.settings'
+import { Default } from './Textarea.stories'
+
+const meta: Meta<typeof VvTextarea> = {
+    title: 'Components/Textarea/Icon',
+    component: VvTextarea,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvTextarea>
+
+export const DefaultIconPosition: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        icon: 'heart',
+    },
+}
+
+export const After: Story = {
+    ...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',
+        },
+    },
+}

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

@@ -0,0 +1,24 @@
+import type { ArgTypes } from '@storybook/vue3-vite'
+import { VvTooltipProps } from '@/components/VvTooltip'
+import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+    ...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'],
+    },
+}

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import VvTooltip from '@/components/VvTooltip/VvTooltip.vue'
+import { argTypes, defaultArgs } from './Tooltip.settings'
+import { defaultTest } from './Tooltip.test'
+
+const meta: Meta<typeof VvTooltip> = {
+    title: 'Components/Tooltip',
+    component: VvTooltip,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvTooltip>
+
+export const Default: Story = {
+    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
+					<vv-tooltip v-bind="args">
+						<template #default v-if="args.default"><div v-html="args.default"></div></template>
+					</vv-tooltip>
+				</vv-button>
+			</div>
+		`,
+    }),
+    play: defaultTest,
+}

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

@@ -0,0 +1,58 @@
+import type { PlayAttributes } from '@/test/types'
+import { within } from 'storybook/test'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+
+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.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')
+    }
+}