@volverjs/ui-vue 0.0.10-beta.9 → 0.0.11

package/src/stories/Accordion/Accordion.stories.ts

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
-import { defaultTest } from './Accordion.test'
-import { defaultArgs, argTypes } from './Accordion.settings'
-
-const meta: Meta<typeof VvAccordion> = {
-	title: 'Components/Accordion',
-	component: VvAccordion,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvAccordion>
-
-export const Default: Story = {
-	args: defaultArgs,
-	play: defaultTest,
-	render: (args) => ({
-		components: { VvAccordion },
-		setup() {
-			const open = ref(false)
-			return { args, open }
-		},
-		template: /* html */ `
-			<vv-accordion data-testId="element" v-bind="args" v-model="open">
-                <template #summary v-if="args.summary"><div v-html="args.summary"></div></template>
-                <template #default v-if="args.default"><div v-html="args.default"></div></template>
-            </vv-accordion>
-            <div class="mt-24">
-                {{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ open }}</span>
-            </div>
-    `,
-	}),
-}
-
-export const Not: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		not: true,
-	},
-}

package/src/stories/Accordion/Accordion.test.ts

@@ -1,67 +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 element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLDetailsElement
-	const summary = element.getElementsByTagName('summary')[0]
-	const content = element.getElementsByClassName(
-		'vv-accordion__content',
-	)[0] as HTMLElement
-
-	const modifiers =
-		!args.modifiers || Array.isArray(args.modifiers)
-			? args.modifiers
-			: [args.modifiers]
-
-	expect(element).toHaveClass('vv-accordion')
-
-	// modifiers
-	if (modifiers) {
-		for (const modifier of modifiers) {
-			expect(element).toHaveClass(`vv-accordion--${modifier}`)
-		}
-	}
-
-	// summary slot / title
-	if (args.summary) {
-		const div = document.createElement('div')
-		div.innerHTML = args.summary
-		expect(summary).toHaveClass('vv-accordion__summary')
-		expect(summary.innerText).toEqual(div.innerText)
-	} else if (args.title) {
-		expect(summary).toHaveClass('vv-accordion__summary')
-		expect(summary.innerText).toEqual(args.title)
-	}
-
-	// open
-	if (!args.disabled) {
-		expect(element.open).toBe(args.not ? true : false)
-		expect(summary).toBeClicked()
-		await sleep()
-		expect(element.open).toBe(args.not ? false : true)
-		expect(summary.getAttribute('aria-expanded')).toBe(
-			args.not ? 'false' : 'true',
-		)
-		expect(content.getAttribute('aria-hidden')).toBe(
-			args.not ? 'true' : 'false',
-		)
-	}
-
-	// default slot / content
-	if (element.open) {
-		if (args.default) {
-			const div = document.createElement('div')
-			div.innerHTML = args.default
-			expect(content.innerText).toEqual(div.innerText)
-		} else if (args.content) {
-			expect(content.innerText).toEqual(args.content)
-		}
-	}
-
-	// accessibility
-	await expect(element).toHaveNoViolations()
-}

package/src/stories/Accordion/AccordionSlots.stories.ts

@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
-import { Default as AccordionDefault } from './Accordion.stories'
-import { defaultArgs } from './Accordion.settings'
-
-const meta: Meta<typeof VvAccordion> = {
-	title: 'Components/Accordion/Slots',
-	component: VvAccordion,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvAccordion>
-
-export const Default: Story = {
-	...AccordionDefault,
-	args: {
-		...defaultArgs,
-		default: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Details</strong>`,
-	},
-}
-
-export const Summary: Story = {
-	...AccordionDefault,
-	args: {
-		...defaultArgs,
-		summary: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Summary</strong>`,
-	},
-}

package/src/stories/AccordionGroup/AccordionGroup.settings.ts

@@ -1,77 +0,0 @@
-import {
-	DefaultSlotArgTypes,
-	DisabledArgTypes,
-	ModifiersArgTypes,
-} from '@/stories/argTypes'
-
-export const defaultArgs = {
-	collapse: false,
-	disabled: false,
-	items: [
-		{
-			name: 'a-1',
-			title: 'Details 1',
-			content:
-				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-		},
-		{
-			name: 'a-2',
-			title: 'Details 2',
-			content:
-				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-		},
-		{
-			name: 'a-3',
-			title: 'Details 3',
-			content:
-				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-		},
-	],
-	modifiers: [],
-	itemModifiers: [],
-}
-
-export const argTypes = {
-	'`details::${item.name}`': {
-		table: {
-			disable: true,
-		},
-	},
-	'`header::${item.name}`': {
-		table: {
-			disable: true,
-		},
-	},
-	items: {
-		description: 'Accordion group items',
-	},
-	collapse: {
-		description: 'Enables accordion group collapse',
-		control: 'boolean',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	not: {
-		description: 'Inverts the accordion group state',
-		control: 'boolean',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	modifiers: {
-		...ModifiersArgTypes.modifiers,
-		options: ['compact', 'bordered'],
-	},
-	itemModifiers: {
-		description: 'Accordion items BEM modifiers',
-		control: 'check',
-		options: ['marker-right', 'bordered'],
-	},
-	...DisabledArgTypes,
-	...DefaultSlotArgTypes,
-}

package/src/stories/AccordionGroup/AccordionGroup.stories.ts

@@ -1,62 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
-import { defaultTest } from './AccordionGroup.test'
-import { defaultArgs, argTypes } from './AccordionGroup.settings'
-
-export default {
-	title: 'Components/AccordionGroup',
-	component: VvAccordionGroup,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
-} as Meta<typeof VvAccordionGroup>
-
-export type Story = StoryObj<typeof VvAccordionGroup>
-
-export const Default: Story = {
-	args: defaultArgs,
-	play: defaultTest,
-	render: (args, { argTypes }) => ({
-		props: Object.keys(argTypes),
-		components: { VvAccordionGroup },
-		setup() {
-			return { args }
-		},
-		data() {
-			return {
-				selected: null,
-			}
-		},
-		template: /*html*/ `
-		<vv-accordion-group data-testId="element" v-bind="args" v-model="selected" />
-		<div class="mt-24">
-			{{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ selected }}</span>
-		</div>
-	`,
-	}),
-}
-
-export const Not: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		not: true,
-	},
-}
-
-export const Collapse: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		collapse: true,
-	},
-}
-
-export const CollapseNot: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		collapse: true,
-		not: true,
-	},
-}

package/src/stories/AccordionGroup/AccordionGroup.test.ts

@@ -1,56 +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 element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
-	const firstChild = element.children[0] as HTMLDetailsElement
-	const firstChildSummary = firstChild.getElementsByTagName('summary')[0]
-	const value = (await within(canvasElement).findByTestId(
-		'value',
-	)) as HTMLElement
-
-	const modifiers =
-		!args.modifiers || Array.isArray(args.modifiers)
-			? args.modifiers
-			: [args.modifiers]
-
-	expect(element).toHaveClass('vv-accordion-group')
-
-	// modifiers
-	if (modifiers) {
-		for (const modifier of modifiers) {
-			expect(element).toHaveClass(`vv-accordion-group--${modifier}`)
-		}
-	}
-
-	// open
-	if (!args.disabled && args.items && args.items.length > 0) {
-		expect(firstChild.open).toBe(args.not ? true : false)
-		expect(firstChildSummary).toBeClicked()
-		await sleep()
-		expect(firstChild.open).toBe(args.not ? false : true)
-		if (firstChild.open) {
-			if (args.collapse) {
-				expect(JSON.stringify(JSON.parse(value.innerText))).toBe(
-					JSON.stringify([args.items[0].name]),
-				)
-			} else {
-				expect(value.innerText).toBe(args.items[0].name)
-			}
-		}
-		expect(firstChildSummary.getAttribute('aria-expanded')).toBe(
-			args.not ? 'false' : 'true',
-		)
-		const content = firstChild.lastChild as HTMLElement
-		expect(content.getAttribute('aria-hidden')).toBe(
-			args.not ? 'true' : 'false',
-		)
-	}
-
-	// accessibility
-	await expect(element).toHaveNoViolations()
-}

package/src/stories/AccordionGroup/AccordionGroupSlots.stories.ts

@@ -1,53 +0,0 @@
-import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
-import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
-import { defaultTest } from './AccordionGroup.test'
-import { defaultArgs, argTypes } from './AccordionGroup.settings'
-import meta, { type Story } from './AccordionGroup.stories'
-
-export default {
-	...meta,
-	title: 'Components/AccordionGroup/Slots',
-}
-
-export const Default: Story = {
-	args: defaultArgs,
-	argTypes: {
-		...argTypes,
-		items: {
-			control: {
-				disable: true,
-			},
-		},
-		default: {
-			...argTypes.default,
-			control: {
-				disable: true,
-			},
-		},
-	},
-	play: defaultTest,
-	render: (args) => ({
-		props: Object.keys(argTypes),
-		components: { VvAccordionGroup, VvAccordion },
-		setup() {
-			return { args }
-		},
-		data() {
-			return {
-				selected: '',
-				content:
-					'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-			}
-		},
-		template: /*html*/ `
-			<vv-accordion-group data-testId="element" v-bind="args" v-model="selected">
-				<vv-accordion name="a-1" data-testId="a-1" title="Details 1" :content="content" />
-				<vv-accordion name="a-2" title="Details 2" :content="content" />
-				<vv-accordion name="a-3" title="Details 3" :content="content" />
-			</vv-accordion-group>
-			<div class="mt-24"  >
-				Opened: <span data-testId="value">{{ selected }}</span>
-			</div>
-		`,
-	}),
-}

package/src/stories/Alert/Alert.settings.ts

@@ -1,122 +0,0 @@
-import type { Meta } from '@storybook/vue3'
-import type { VvAlert } from '@/components'
-import { IconArgTypes } from '../argTypes'
-import { ModifiersArgTypes } from '../argTypes'
-
-export const defaultArgs: Meta<typeof VvAlert>['args'] = {
-	title: 'Alert title!',
-	content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-	dismissable: false,
-	autoClose: 0,
-	role: 'alert',
-}
-
-export const argTypes = {
-	title: {
-		description: 'The alert title',
-	},
-	content: {
-		description: 'The alert content',
-	},
-	dismissable: {
-		description: 'Dismissable by clicking on the close button',
-		control: 'boolean',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	autoClose: {
-		description: 'Auto close after the specified time in milliseconds',
-		control: 'number',
-		table: {
-			defaultValue: {
-				summary: 0,
-			},
-		},
-	},
-	modifiers: {
-		...ModifiersArgTypes.modifiers,
-		options: [
-			'success',
-			'warning',
-			'danger',
-			'info',
-			'brand',
-			'notification',
-			'accent',
-			'callout',
-		],
-	},
-	icon: IconArgTypes.icon,
-	role: {
-		description: 'The alert role',
-		control: 'radio',
-		options: ['alert', 'alertdialog'],
-		table: {
-			defaultValue: 'alert',
-		},
-	},
-	// slots
-	header: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	'title::before': {
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	'title::after': {
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	close: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	default: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	footer: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-}

package/src/stories/Alert/Alert.stories.ts

@@ -1,60 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAlert from '@/components/VvAlert/VvAlert.vue'
-import { defaultTest } from './Alert.test'
-import { defaultArgs, argTypes } from './Alert.settings'
-
-const meta: Meta<typeof VvAlert> = {
-	title: 'Components/Alert',
-	component: VvAlert,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
-}
-
-export default meta
-
-export type Story = StoryObj<typeof VvAlert>
-
-export const Default: Story = {
-	args: defaultArgs,
-	play: defaultTest,
-	render: (args) => ({
-		components: { VvAlert },
-		setup() {
-			return { args }
-		},
-		template: /* html */ `
-			<vv-alert v-bind="args" data-testId="element">
-				<template #header v-if="args.header"><div v-html="args.header"></div></template>
-				<template #title::before v-if="args['title::before']"><div v-html="args['title::before']"></div></template>
-				<template #title::after v-if="args['title::after']"><div v-html="args['title::after']"></div></template>
-				<template #default v-if="args.default"><div v-html="args.default"></div></template>
-				<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
-			</vv-alert>
-        `,
-	}),
-}
-
-export const Dismissable: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		dismissable: true,
-	},
-}
-
-export const AutoClose: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		autoClose: 8000,
-	},
-}
-
-export const Icon: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		icon: 'warning',
-	},
-}

package/src/stories/Alert/Alert.test.ts

@@ -1,99 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
-
-export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
-
-	expect(element).toHaveClass('vv-alert')
-
-	const modifiers =
-		!args.modifiers || Array.isArray(args.modifiers)
-			? args.modifiers
-			: args.modifiers.split(' ')
-
-	const alertHeaderEl =
-		element.getElementsByClassName('vv-alert__header')?.[0]
-	const closeButtonEl = element.getElementsByClassName('vv-alert__close')?.[0]
-	const alertContentEl =
-		element.getElementsByClassName('vv-alert__content')?.[0]
-	const alertFooterEl =
-		element.getElementsByClassName('vv-alert__footer')?.[0]
-
-	// modifiers
-	if (modifiers) {
-		for (const modifier of modifiers) {
-			expect(element).toHaveClass(`vv-alert--${modifier}`)
-		}
-	}
-
-	// dismissable
-	if (args.dismissable) {
-		expect(element).toHaveClass('vv-alert--dismissable')
-		expect(closeButtonEl).not.toBeUndefined()
-	}
-
-	// autoclose
-	if (args.autoClose) {
-		expect(element).toHaveClass('vv-alert--auto-close')
-		expect(closeButtonEl).not.toBeUndefined()
-		expect(closeButtonEl.firstChild).toHaveClass('vv-alert__close-mask')
-	}
-
-	if (!args.autoClose && !args.dismissable) {
-		expect(closeButtonEl).toBeUndefined()
-	}
-
-	// icon
-	if (args.icon) {
-		expect(alertHeaderEl.firstChild).toHaveClass('vv-alert__icon')
-	}
-
-	// slot default
-	if (args.default) {
-		const div = document.createElement('div')
-		div.innerHTML = args.default
-		expect(alertContentEl.firstElementChild?.innerHTML).toEqual(
-			div.innerHTML,
-		)
-	}
-
-	// slot header
-	if (args.header) {
-		const div = document.createElement('div')
-		div.innerHTML = args.header
-		expect(alertHeaderEl.firstElementChild?.innerHTML).toEqual(
-			div.innerHTML,
-		)
-	}
-
-	// slot title before
-	if (args['title::before']) {
-		const div = document.createElement('div')
-		div.innerHTML = args['title::before']
-		expect(alertHeaderEl.firstElementChild?.innerHTML).toEqual(
-			div.innerHTML,
-		)
-	}
-
-	// slot title after
-	if (args['title::after']) {
-		const div = document.createElement('div')
-		div.innerHTML = args['title::after']
-		expect(alertHeaderEl.lastElementChild?.innerHTML).toEqual(div.innerHTML)
-	}
-
-	// slot footer
-	if (args.footer) {
-		const div = document.createElement('div')
-		div.innerHTML = args.footer
-		expect(alertFooterEl.firstElementChild?.innerHTML).toEqual(
-			div.innerHTML,
-		)
-	}
-
-	// check accessibility
-	await expect(element).toHaveNoViolations()
-}