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

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

@@ -1,77 +0,0 @@
-import type { Meta } from '@storybook/vue3'
-import VvAlert from '@/components/VvAlert/VvAlert.vue'
-import { defaultArgs, argTypes } from './Alert.settings'
-import { Default, type Story } from './Alert.stories'
-
-const meta: Meta<typeof VvAlert> = {
-	title: 'Components/Alert/Modifiers',
-	component: VvAlert,
-	args: defaultArgs,
-	argTypes,
-}
-
-export default meta
-
-export const Notification: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		modifiers: ['notification'],
-	},
-}
-
-export const Callout: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		modifiers: ['callout'],
-	},
-}
-
-export const Info: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		modifiers: ['info'],
-	},
-}
-
-export const Success: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		modifiers: ['success'],
-	},
-}
-
-export const Warning: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		modifiers: ['warning'],
-	},
-}
-
-export const Danger: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		modifiers: ['danger'],
-	},
-}
-
-export const Accent: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		modifiers: ['accent'],
-	},
-}
-
-export const Brand: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		modifiers: ['brand'],
-	},
-}

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

@@ -1,74 +0,0 @@
-import type { Meta } from '@storybook/vue3'
-import VvAlert from '@/components/VvAlert/VvAlert.vue'
-import { defaultArgs, argTypes } from './Alert.settings'
-import { Default as DefaultStory, type Story } from './Alert.stories'
-
-const meta: Meta<typeof VvAlert> = {
-	title: 'Components/Alert/Slots',
-	component: VvAlert,
-	args: defaultArgs,
-	argTypes,
-}
-
-export default meta
-
-export const Default: Story = {
-	...DefaultStory,
-	args: {
-		...defaultArgs,
-		modifiers: ['notification'],
-		default: /*html*/ `
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-			<div class="mt-sm">Default <em class="italic">slot!</em></div>
-		`,
-	},
-}
-
-export const Header: Story = {
-	...DefaultStory,
-	args: {
-		...defaultArgs,
-		header: 'Header <em class="italic">slot!</em>',
-	},
-}
-
-export const TitleBefore: Story = {
-	...DefaultStory,
-	args: {
-		...defaultArgs,
-		modifiers: ['notification'],
-		'title::before': /*html*/ `
-			<small class="text-smaller flex-1">10 minutes ago</small>
-		`,
-	},
-}
-
-export const TitleAfter: Story = {
-	...DefaultStory,
-	args: {
-		...defaultArgs,
-		modifiers: ['notification'],
-		'title::after': /*html*/ `
-			<small class="text-smaller ml-auto">10 minutes ago</small>
-		`,
-	},
-}
-
-export const Footer: Story = {
-	...DefaultStory,
-	args: {
-		...defaultArgs,
-		modifiers: ['notification'],
-		role: 'alertdialog',
-		footer: /*html*/ `
-			<div class="vv-button-group" role="group">
-				<button type="button" class="vv-button vv-button--action" id="c1RmyuK7IURatQsTHcP42">
-					<span class="vv-button__label">Save</span>
-				</button>
-				<button type="button" class="vv-button vv-button--action-quiet" id="i2YcewpfM6ZKrhx1dHDe5">
-					<span class="vv-button__label">Cancel</span>
-				</button>
-			</div>
-		`,
-	},
-}

package/src/stories/AlertGroup/AlertGroup.settings.ts

@@ -1,110 +0,0 @@
-import { ModifiersArgTypes } from '../argTypes'
-
-export const defaultArgs = {
-	name: 'default',
-	items: [
-		{
-			id: 1,
-			title: 'Info!',
-			content: 'This is an info message.',
-			icon: 'information',
-			modifiers: 'info',
-		},
-		{
-			id: 2,
-			title: 'Warning!',
-			content: 'This is an warning message.',
-			icon: 'warning',
-			modifiers: 'warning',
-		},
-		{
-			id: 3,
-			title: 'Danger!',
-			content: 'This is an danger message.',
-			icon: 'error',
-			modifiers: 'danger',
-		},
-	],
-	stack: false,
-	reverse: false,
-}
-export const argTypes = {
-	name: {
-		description: 'The alert group name',
-	},
-	items: {
-		description: 'The alert group items',
-		table: {
-			defaultValue: {
-				summary: '[]',
-			},
-		},
-	},
-	stack: {
-		description: 'Stack alerts',
-		table: {
-			defaultValue: {
-				summary: 'false',
-			},
-		},
-	},
-	reverse: {
-		description: 'Reverse alerts',
-		table: {
-			defaultValue: {
-				summary: 'false',
-			},
-		},
-	},
-	position: {
-		description: 'The alert group position',
-		control: 'radio',
-		options: ['absolute', 'fixed'],
-	},
-	inline: {
-		description: 'The alert group inline alignment',
-		control: 'radio',
-		options: ['start', 'middle', 'end'],
-	},
-	block: {
-		description: 'The alert group block alignment',
-		control: 'radio',
-		options: ['top', 'center', 'bottom'],
-	},
-	transition: {
-		description: 'The alert group transition',
-		control: 'text',
-	},
-	...ModifiersArgTypes,
-	// slots
-	default: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	before: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	after: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-}

package/src/stories/AlertGroup/AlertGroup.stories.ts

@@ -1,50 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
-import { defaultTest } from './AlertGroup.test'
-import { defaultArgs, argTypes } from './AlertGroup.settings'
-
-const meta: Meta<typeof VvAlertGroup> = {
-	title: 'Components/AlertGroup',
-	component: VvAlertGroup,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
-}
-
-export default meta
-
-export type Story = StoryObj<typeof VvAlertGroup>
-
-export const Default: Story = {
-	args: defaultArgs,
-	play: defaultTest,
-	render: (args) => ({
-		components: { VvAlertGroup },
-		setup() {
-			return { args }
-		},
-		template: /* html */ `
-            <vv-alert-group v-bind="args" data-testId="element">
-                <template #before v-if="args.before"><div v-html="args.before"></div></template>
-                <template #after v-if="args.after"><div v-html="args.after"></div></template>
-                <template #default v-if="args.default"><div v-html="args.default"></div></template>
-            </vv-alert-group>
-        `,
-	}),
-}
-
-export const Stack: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		stack: true,
-	},
-}
-
-export const Reverse: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		reverse: true,
-	},
-}

package/src/stories/AlertGroup/AlertGroup.test.ts

@@ -1,89 +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
-	const buttons =
-		canvasElement.getElementsByClassName('buttons-container')?.[0]
-
-	expect(element).toHaveClass('vv-alert-group')
-
-	// check alert group list
-	const alertGroupList = element.getElementsByClassName(
-		'vv-alert-group__list',
-	)?.[0]
-	expect(alertGroupList).toBeTruthy()
-
-	const modifiers =
-		!args.modifiers || Array.isArray(args.modifiers)
-			? args.modifiers
-			: args.modifiers.split(' ')
-
-	// modifiers
-	if (modifiers) {
-		for (const modifier of modifiers) {
-			expect(element).toHaveClass(`vv-alert-group--${modifier}`)
-		}
-	}
-
-	// stack
-	if (args.stack) {
-		expect(element).toHaveClass('vv-alert-group--stack')
-	}
-
-	// reverse
-	if (args.reverse) {
-		expect(element).toHaveClass('vv-alert-group--reverse')
-	}
-
-	// position
-	if (args.position) {
-		expect(element).toHaveClass(`vv-alert-group--${args.position}`)
-	}
-
-	if (args.inline && args.block) {
-		expect(element).toHaveClass(
-			`vv-alert-group--${args.block}-${args.inline}`,
-		)
-	}
-
-	// slot default
-	if (args.default) {
-		const div = document.createElement('div')
-		div.innerHTML = args.default
-		expect(alertGroupList.firstElementChild?.innerHTML).toEqual(
-			div.innerHTML,
-		)
-	}
-
-	// slot before
-	if (args.before) {
-		const div = document.createElement('div')
-		div.innerHTML = args.before
-		expect(element.firstElementChild?.innerHTML).toEqual(div.innerHTML)
-	}
-
-	// slot after
-	if (args.after) {
-		const div = document.createElement('div')
-		div.innerHTML = args.after
-		expect(element.lastElementChild?.innerHTML).toEqual(div.innerHTML)
-	}
-
-	if (buttons) {
-		// click every button child and expect to have alert with correct css class
-		for (let i = 0; i < buttons.children.length; i++) {
-			const button = buttons.children[i] as HTMLElement
-			await button.click()
-			expect(alertGroupList.lastElementChild).toHaveClass(
-				`vv-alert--${button.id}`,
-			)
-		}
-	}
-
-	// check accessibility
-	await expect(element).toHaveNoViolations()
-}

package/src/stories/AlertGroup/AlertGroupPosition.stories.ts

@@ -1,103 +0,0 @@
-import type { Meta } from '@storybook/vue3'
-import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
-import { defaultArgs, argTypes } from './AlertGroup.settings'
-import { Default, type Story } from './AlertGroup.stories'
-
-const meta: Meta<typeof VvAlertGroup> = {
-	title: 'Components/AlertGroup/Position',
-	component: VvAlertGroup,
-	args: defaultArgs,
-	argTypes,
-}
-
-export default meta
-
-export const TopStart: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		position: 'absolute',
-		block: 'top',
-		inline: 'start',
-	},
-}
-
-export const TopMiddle: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		position: 'absolute',
-		block: 'top',
-		inline: 'middle',
-	},
-}
-
-export const TopEnd: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		position: 'absolute',
-		block: 'top',
-		inline: 'end',
-	},
-}
-
-export const CenterStart: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		position: 'absolute',
-		block: 'center',
-		inline: 'start',
-	},
-}
-
-export const CenterMiddle: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		position: 'absolute',
-		block: 'center',
-		inline: 'middle',
-	},
-}
-
-export const CenterEnd: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		position: 'absolute',
-		block: 'center',
-		inline: 'end',
-	},
-}
-
-export const BottomStart: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		position: 'absolute',
-		block: 'bottom',
-		inline: 'start',
-	},
-}
-
-export const BottomMiddle: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		position: 'absolute',
-		block: 'bottom',
-		inline: 'middle',
-	},
-}
-
-export const BottomEnd: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		position: 'absolute',
-		block: 'bottom',
-		inline: 'end',
-	},
-}

package/src/stories/AlertGroup/AlertGroupSlots.stories.ts

@@ -1,67 +0,0 @@
-import type { Meta } from '@storybook/vue3'
-import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
-import { defaultArgs, argTypes } from './AlertGroup.settings'
-import { Default as DefaultStory, type Story } from './AlertGroup.stories'
-
-const meta: Meta<typeof VvAlertGroup> = {
-	title: 'Components/AlertGroup/Slots',
-	component: VvAlertGroup,
-	args: defaultArgs,
-	argTypes,
-}
-
-export default meta
-
-export const Default: Story = {
-	...DefaultStory,
-	args: {
-		...defaultArgs,
-		modifiers: ['notification'],
-		default: /* html */ `
-			<div class="vv-alert vv-alert--success" role="alert" aria-labelledby="Els38gSOH_Op3SFpzekW--title" style="--alert-duration:0ms;">
-				<div class="vv-alert__header">
-					<strong id="Els38gSOH_Op3SFpzekW--title" class="vv-alert__title">Success!</strong>
-				</div>
-				<div class="vv-alert__content">This is an success message.</div>
-			</div>
-			<div class="vv-alert vv-alert--accent mt-xs" role="alert" aria-labelledby="nkas44ZTfhbt5OEJYL06N-title" style="--alert-duration:0ms;">
-				<div class="vv-alert__header">
-					<strong id="nkas44ZTfhbt5OEJYL06N-title" class="vv-alert__title">Accent!</strong>
-				</div>
-				<div class="vv-alert__content">This is an accent message.</div>
-			</div>
-		`,
-	},
-}
-
-export const Before: Story = {
-	...DefaultStory,
-	args: {
-		...defaultArgs,
-		modifiers: ['notification'],
-		before: /* html */ `
-			<div class="flex justify-center">
-				<button type="button" class="vv-button vv-button--action-quiet" id="y_Cl2wtJ8JJpDo-t6za2i">
-					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="vv-icon vv-button__icon iconify iconify--normal iconify--vv" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M6 18 18 6M6 6l12 12"></path></svg>
-					<span class="vv-button__label">Clear All</span>
-				</button>
-			</div>
-		`,
-	},
-}
-
-export const After: Story = {
-	...DefaultStory,
-	args: {
-		...defaultArgs,
-		modifiers: ['notification'],
-		after: /* html */ `
-			<div class="flex justify-center">
-				<button type="button" class="vv-button vv-button--action-quiet" id="y_Cl2wtJ8JJpDo-t6za2i">
-					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="vv-icon vv-button__icon iconify iconify--normal iconify--vv" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M6 18 18 6M6 6l12 12"></path></svg>
-					<span class="vv-button__label">Clear All</span>
-				</button>
-			</div>
-		`,
-	},
-}

package/src/stories/AlertGroup/AlertGroupWithComposable.stories.ts

@@ -1,118 +0,0 @@
-import type { Meta } from '@storybook/vue3'
-import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import { defaultArgs, argTypes } from './AlertGroup.settings'
-import { Default as DefaultStory, type Story } from './AlertGroup.stories'
-import { useAlert } from '@/composables/alert/useAlert'
-
-const meta: Meta<typeof VvAlertGroup> = {
-	title: 'Components/AlertGroup/UseComposable',
-	component: VvAlertGroup,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
-}
-
-export default meta
-
-export const UseComposable: Story = {
-	...DefaultStory,
-	parameters: {
-		docs: {
-			source: {
-				type: 'code',
-				language: 'html',
-				code: /* html */ `
-<div class="flex gap-md">
-	<vv-button label="Show success" modifiers="secondary" @click="showSuccess" class="mb-lg" />
-	<vv-button label="Show danger" modifiers="secondary" @click="showDanger" class="mb-lg" />
-	<vv-button label="Show warning" modifiers="secondary" @click="showWarning" class="mb-lg" />
-	<vv-button label="Show info" modifiers="secondary" @click="showInfo" class="mb-lg" />
-</div>
-<vv-alert-group v-bind="args" :items="alerts" :onClose="removeAlert" data-testId="element" />
-
-<script setup lang='ts'>
-	import { useAlert } from '@volverjs/ui-vue/composables'
-
-	const { addAlert, removeAlert, alerts } = useAlert()
-
-	function showSuccess() {
-		addAlert({
-			title: 'Success!',
-			modifiers: 'success',
-		})
-	}
-	function showDanger() {
-		addAlert({
-			title: 'Danger!',
-			modifiers: 'danger',
-		})
-	}
-	function showWarning() {
-		addAlert({
-			title: 'Warning!',
-			modifiers: 'warning',
-		})
-	}
-	function showInfo() {
-		addAlert({
-			title: 'Info!',
-			modifiers: 'info',
-		})
-	}
-</script>
-				`,
-			},
-		},
-	},
-	render: (args) => ({
-		components: { VvAlertGroup, VvButton },
-		setup() {
-			const { addAlert, removeAlert, alerts } = useAlert()
-
-			function showSuccess() {
-				addAlert({
-					title: 'Success!',
-					modifiers: 'success',
-				})
-			}
-			function showDanger() {
-				addAlert({
-					title: 'Danger!',
-					modifiers: 'danger',
-				})
-			}
-			function showWarning() {
-				addAlert({
-					title: 'Warning!',
-					modifiers: 'warning',
-				})
-			}
-			function showInfo() {
-				addAlert({
-					title: 'Info!',
-					modifiers: 'info',
-				})
-			}
-
-			return {
-				args,
-				alerts,
-				removeAlert,
-				showSuccess,
-				showDanger,
-				showWarning,
-				showInfo,
-			}
-		},
-		template: /* html */ `
-			<div class="buttons-container flex gap-md" >
-				<vv-button id="success" label="Show success" modifiers="secondary" @click="showSuccess" class="mb-lg" />
-				<vv-button id="danger" label="Show danger" modifiers="secondary" @click="showDanger" class="mb-lg" />
-				<vv-button id="warning" label="Show warning" modifiers="secondary" @click="showWarning" class="mb-lg" />
-				<vv-button id="info" label="Show info" modifiers="secondary" @click="showInfo" class="mb-lg" />
-			</div>
-			<vv-alert-group v-bind="args" :items="alerts" :onClose="removeAlert" data-testId="element" />
-        `,
-	}),
-}