@volverjs/ui-vue 0.0.10-beta.8 → 0.0.10

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

@@ -1,88 +0,0 @@
-import { HintArgTypes, InputTextareaArgTypes } from '@/stories/argTypes'
-import { VvTextareaProps } from '@/components/VvTextarea'
-
-export const defaultArgs = {
-	...propsToObject(VvTextareaProps),
-	name: 'vv-textarea',
-	label: 'Textarea label',
-	placeholder: 'Textarea placeholder',
-	minlength: undefined,
-	maxlength: undefined,
-}
-
-export const 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

@@ -1,107 +0,0 @@
-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'
-
-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

@@ -1,90 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { expect } from '@/test/expect'
-import { sleep } from '@/test/sleep'
-import { within, userEvent } from '@storybook/testing-library'
-
-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 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

@@ -1,58 +0,0 @@
-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'
-
-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

@@ -1,39 +0,0 @@
-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'
-
-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

@@ -1,43 +0,0 @@
-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'
-
-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

@@ -1,25 +0,0 @@
-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",
-}
-
-export const argTypes: ArgTypes = {
-	...ModifiersArgTypes,
-	...DefaultSlotArgTypes,
-	position: {
-		type: 'string',
-		control: {
-			type: 'select',
-		},
-		table: {
-			type: 'string',
-			defaultValue: { summary: 'bottom' },
-		},
-		description: 'Indicates where to place the tooltip',
-		options: [undefined, 'left', 'right', 'bottom', 'top'],
-	},
-}

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

@@ -1,40 +0,0 @@
-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'
-
-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

@@ -1,60 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { expect } from '@/test/expect'
-import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
-
-export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const parentElement = (await within(canvasElement).findByTestId(
-		'parent',
-	)) as HTMLElement
-	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
-	await 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
-	await 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,68 +0,0 @@
-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'
-
-const meta: Meta<typeof VvTooltip> = {
-	title: 'Directives/Tooltip',
-	component: VvTooltip,
-	args: defaultArgs,
-	argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvTooltip>
-
-export const DefaultDirective: Story = {
-	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,
-}
-
-export const Top: Story = {
-	...DefaultDirective,
-	args: {
-		...DefaultDirective.args,
-		position: 'top',
-	},
-}
-
-export const Bottom: Story = {
-	...DefaultDirective,
-	args: {
-		...DefaultDirective.args,
-		position: 'bottom',
-	},
-}
-
-export const Right: Story = {
-	...DefaultDirective,
-	args: {
-		...DefaultDirective.args,
-		position: 'right',
-	},
-}
-
-export const Left: Story = {
-	...DefaultDirective,
-	args: {
-		...DefaultDirective.args,
-		position: 'left',
-	},
-}