@volverjs/ui-vue 0.0.6-beta.1 → 0.0.6-beta.3

package/src/components/VvAvatarGroup/VvAvatarGroup.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+	import { VvAvatarGroupProps } from '@/components/VvAvatarGroup'
+	import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+
+	const props = defineProps(VvAvatarGroupProps)
+	const { modifiers, items, toShow, totalItems, avatarModifiers } =
+		toRefs(props)
+
+	// bem css classes
+	const bemCssClasses = useModifiers('vv-avatar-group', modifiers)
+
+	const stringModifiers = computed(() => {
+		if (avatarModifiers?.value && Array.isArray(avatarModifiers?.value)) {
+			return avatarModifiers.value.join(' ')
+		}
+		return avatarModifiers?.value || ''
+	})
+
+	const avatarItems = computed(() => {
+		return items.value.slice(0, toShow.value).map((item) => {
+			let modifiers: string[] = []
+			let itemModifiers: string[] = []
+
+			if (avatarModifiers?.value) {
+				modifiers = Array.isArray(avatarModifiers?.value)
+					? avatarModifiers?.value
+					: [avatarModifiers?.value]
+			}
+
+			if (item.modifiers) {
+				itemModifiers = Array.isArray(item.modifiers)
+					? item.modifiers
+					: [item.modifiers]
+			}
+
+			return {
+				...item,
+				key: item.key || useUniqueId().value,
+				modifiers: [...modifiers, ...itemModifiers],
+			}
+		})
+	})
+</script>
+
+<template>
+	<span :class="bemCssClasses">
+		<slot name="default">
+			<VvAvatar
+				v-for="avatarItem in avatarItems"
+				:key="avatarItem.key"
+				v-bind="{
+					modifiers: avatarItem.modifiers,
+					imgSrc: avatarItem.imgSrc,
+				}"
+			>
+				<span v-if="avatarItem.text">{{ avatarItem.text }}</span>
+			</VvAvatar>
+			<VvAvatar
+				v-if="(totalItems || items.length) > toShow"
+				:modifiers="`${stringModifiers} surface bordered`"
+				>{{ `+${(totalItems || items.length) - toShow}` }}</VvAvatar
+			>
+		</slot>
+	</span>
+</template>

package/src/components/VvAvatarGroup/index.ts

@@ -0,0 +1,28 @@
+import { ModifiersProps } from '@/props'
+
+export type AvatarItem = {
+	key?: string
+	text?: string
+	imgSrc?: string
+	modifiers?: string | string[]
+}
+
+export const VvAvatarGroupProps = {
+	...ModifiersProps,
+	/**
+	 * avatar items
+	 */
+	items: {
+		type: Array<AvatarItem>,
+		default: () => [],
+		required: true,
+	},
+	toShow: {
+		type: Number,
+		default: 3,
+	},
+	totalItems: {
+		type: Number,
+	},
+	avatarModifiers: [String, Array] as PropType<string | Array<string>>,
+}

package/src/components/VvNav/VvNav.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+	import { VvNavProps, VvNavEvents, type NavItem } from '@/components/VvNav'
+	import VvAction from '@/components/VvAction/VvAction.vue'
+
+	const props = defineProps(VvNavProps)
+	const emit = defineEmits(VvNavEvents)
+	const { modifiers } = toRefs(props)
+	const activeItem: Ref<string | null> = ref(null)
+
+	// bem css classes
+	const bemCssClasses = useModifiers('vv-nav', modifiers)
+
+	/**
+	 * Triggers when the item is clicked.
+	 * @private
+	 * @event click
+	 * @param [NavItem, number] item, id - the clicked item
+	 */
+	function onClick(item: NavItem, id: string) {
+		if (!item.disabled) {
+			emit('click', item)
+			activeItem.value = id
+		}
+	}
+</script>
+
+<template>
+	<nav :class="bemCssClasses">
+		<ul class="vv-nav__menu" role="menu" aria-busy="true">
+			<li
+				v-for="(navItem, index) in items"
+				:key="`nav-item_${index}`"
+				class="vv-nav__item"
+				role="presentation"
+			>
+				<VvAction
+					v-bind="{
+						disabled: navItem.disabled,
+						to: navItem.to,
+						href: navItem.href,
+						tabindex: 0,
+					}"
+					:class="{
+						current: activeItem == `nav-item_${index}`,
+						disabled: navItem.disabled,
+					}"
+					class="vv-nav__item-label"
+					v-on="navItem.on || {}"
+					@click="onClick(navItem, `nav-item_${index}`)"
+				>
+					{{ navItem.title }}
+				</VvAction>
+			</li>
+		</ul>
+	</nav>
+</template>

package/src/components/VvNav/index.ts

@@ -0,0 +1,20 @@
+import { ModifiersProps } from '@/props'
+
+export type NavItem = {
+	title: string
+	to?: string | { [key: string]: unknown }
+	href?: string
+	disabled?: boolean
+	on: () => void
+}
+
+export const VvNavProps = {
+	...ModifiersProps,
+	items: {
+		type: Array<NavItem>,
+		required: true,
+		default: () => [],
+	},
+}
+
+export const VvNavEvents = ['click']

package/src/components/VvNavItemTitle/VvNavItemTitle.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+	defineProps({
+		title: String,
+	})
+</script>
+
+<template>
+	<span class="vv-nav__heading-label" aria-hidden="true">
+		{{ title }}
+	</span>
+</template>

package/src/components/VvNavSeparator/VvNavSeparator.ts

@@ -0,0 +1,8 @@
+export default defineComponent({
+	render() {
+		return h('li', {
+			class: 'vv-nav__divider',
+			role: 'separator',
+		})
+	},
+})

package/src/stories/Avatar/Avatar.settings.ts

@@ -22,15 +22,7 @@ export const argTypes = {
 	},
 	modifiers: {
 		...ModifiersArgTypes.modifiers,
-		options: [
-			'rounded',
-			'square',
-			'bordered',
-			'ring',
-			'circle',
-			'lg',
-			'md',
-		],
+		options: ['rounded', 'square', 'bordered', 'ring', 'lg', 'md'],
 	},
 	imgSrc: {
 		type: {

package/src/stories/AvatarGroup/AvatarGroup.settings.ts

@@ -0,0 +1,60 @@
+import { VvAvatarGroupProps } from '@/components/VvAvatarGroup'
+import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+	...propsToObject(VvAvatarGroupProps),
+	items: [
+		{
+			text: 'MR',
+			imgSrc: 'https://i.pravatar.cc/300',
+			modifiers: 'rounded',
+		},
+		{
+			imgSrc: 'https://i.pravatar.cc/300',
+			modifiers: 'rounded',
+		},
+		{
+			imgSrc: 'https://i.pravatar.cc/300',
+			modifiers: 'rounded',
+		},
+		{
+			imgSrc: 'https://i.pravatar.cc/300',
+			modifiers: 'rounded',
+		},
+	],
+	avatarModifiers: 'rounded',
+}
+
+export const argTypes = {
+	...DefaultSlotArgTypes,
+	default: {
+		description: 'Default slot',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	modifiers: {
+		...ModifiersArgTypes.modifiers,
+		options: ['tight', 'relaxed'],
+	},
+	avatarModifiers: {
+		...ModifiersArgTypes.modifiers,
+		options: ['rounded', 'square', 'bordered', 'ring', 'lg', 'md'],
+	},
+	toShow: {
+		control: {
+			type: 'number',
+		},
+	},
+	totalItems: {
+		control: {
+			type: 'number',
+		},
+	},
+}

package/src/stories/AvatarGroup/AvatarGroup.stories.mdx

@@ -0,0 +1,30 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
+import { defaultArgs, argTypes } from './AvatarGroup.settings'
+import { defaultTest } from './AvatarGroup.test'
+
+<Meta
+	title="Components/AvatarGroup"
+	component={VvAvatarGroup}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+export const Template = (args) => ({
+	components: { VvAvatarGroup },
+	setup() {
+		return { args }
+	},
+	template: /* html */ `
+		<div class="m-md">
+			<vv-avatar-group v-bind="args" data-testId="element">
+				<template v-if="args.default">{{ args.default }}</template>
+			</vv-avatar-group>
+		</div>`,
+})
+
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/AvatarGroup/AvatarGroup.test.ts

@@ -0,0 +1,36 @@
+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
+
+	// slot default
+	if (!args.default && !args.items && !args.items?.length) {
+		throw new Error('Default slot or items is required!')
+	}
+
+	const modifiers =
+		!args.modifiers || Array.isArray(args.modifiers)
+			? args.modifiers
+			: [args.modifiers]
+
+	// modifiers
+	if (modifiers) {
+		for (const modifier of modifiers) {
+			expect(element).toHaveClass(`vv-avatar-group--${modifier}`)
+		}
+	}
+
+	// check children numbers
+	if (args.items && args.items.length && !args.default) {
+		if ((args.totalItems || args.items.length) > args.toShow) {
+			expect(element.children.length).toEqual(args.toShow + 1)
+		}
+	}
+
+	// check accessibility
+	await expect(element).toHaveNoViolations()
+}

package/src/stories/AvatarGroup/AvatarGroupModifiers.stories.mdx

@@ -0,0 +1,24 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
+import { defaultArgs, argTypes } from './AvatarGroup.settings'
+import { defaultTest } from './AvatarGroup.test'
+import { Template } from './AvatarGroup.stories.mdx'
+
+<Meta
+	title="Components/AvatarGroup/Modifiers"
+	component={VvAvatarGroup}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+<Canvas>
+	<Story name="Tight" play={defaultTest} args={{ modifiers: 'tight' }}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story name="Relaxed" play={defaultTest} args={{ modifiers: 'relaxed' }}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/AvatarGroup/AvatarGroupSlotDefault.stories.mdx

@@ -0,0 +1,45 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
+import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import { defaultArgs, argTypes } from './AvatarGroup.settings'
+import { defaultTest } from './AvatarGroup.test'
+import { Template } from './AvatarGroup.stories.mdx'
+
+<Meta
+	title="Components/AvatarGroup/Slots"
+	component={VvAvatarGroup}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+export const TemplateSlot = (args) => ({
+	components: { VvAvatarGroup, VvAvatar },
+	setup() {
+		return { args }
+	},
+	template: /* html */ `
+		<div class="m-md">
+			<vv-avatar-group v-bind="args" data-testId="element" modifiers="relaxed">
+				<vv-avatar modifiers="rounded">MR</vv-avatar>
+				<vv-avatar modifiers="rounded accent">PB</vv-avatar>
+				<vv-avatar imgSrc="https://i.pravatar.cc/300" modifiers="rounded" />
+				<vv-avatar modifiers="rounded surface">+3</vv-avatar>
+			</vv-avatar-group>
+		</div>`,
+})
+
+<Canvas>
+	<Story
+		name="Default"
+		play={defaultTest}
+		argTypes={{
+			default: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{TemplateSlot.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Nav/Nav.settings.ts

@@ -0,0 +1,34 @@
+import { VvNavProps } from '@/components/VvNav'
+import { ModifiersArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+	...propsToObject(VvNavProps),
+	items: [
+		{
+			title: 'Item 1',
+			href: 'javascript:void(0)',
+		},
+		{
+			title: 'Item 2',
+			to: 'about',
+		},
+		{
+			title: 'Item 3',
+			to: 'contacts',
+			on: {
+				click: () => {
+					// eslint-disable-next-line no-console
+					console.log('clicked Item 3')
+				},
+			},
+		},
+	],
+	modifiers: 'sidebar',
+}
+
+export const argTypes = {
+	modifiers: {
+		...ModifiersArgTypes.modifiers,
+		options: ['sidebar', 'aside', 'tabs', 'full'],
+	},
+}

package/src/stories/Nav/Nav.stories.mdx

@@ -0,0 +1,28 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import VvNav from '@/components/VvNav/VvNav.vue'
+import { defaultArgs, argTypes } from './Nav.settings'
+import { defaultTest } from './Nav.test'
+
+<Meta
+	title="Components/Nav"
+	component={VvNav}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+export const Template = (args) => ({
+	components: { VvNav },
+	setup() {
+		return { args }
+	},
+	template: /* html */ `
+		<div class="m-md w-1/5">
+			<vv-nav v-bind="args" data-testId="element" />
+		</div>`,
+})
+
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Nav/Nav.test.ts

@@ -0,0 +1,32 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+import { within, userEvent } from '@storybook/testing-library'
+
+export async function defaultTest({ canvasElement, args }: PlayAttributes) {
+	const element = (await within(canvasElement).findByTestId(
+		'element',
+	)) as HTMLElement
+
+	if (!args.items || !args.items?.length) {
+		throw new Error('No items passed')
+	}
+
+	// check children number the same of items prop
+	expect(element.children?.[0].children.length).toEqual(args.items?.length)
+
+	// take firse and second elements
+	const firstEl = await element.getElementsByTagName('a')?.[0]
+	const secondEl = await element.getElementsByTagName('router-link')?.[1]
+	// check they have not current class
+	const secondElHasCurrentClass = secondEl.classList.contains('current')
+	const firstElHasCurrentClass = firstEl.classList.contains('current')
+
+	await expect(firstElHasCurrentClass).toBe(false)
+	await expect(secondElHasCurrentClass).toBe(false)
+	// click first item and check "current" css class
+	await userEvent.click(firstEl)
+	await expect(firstEl).toHaveClass('current')
+
+	// check accessibility
+	await expect(element).toHaveNoViolations()
+}

package/src/stories/Nav/NavModifiers.stories.mdx

@@ -0,0 +1,48 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import VvNav from '@/components/VvNav/VvNav.vue'
+import { defaultArgs, argTypes } from './Nav.settings'
+import { defaultTest } from './Nav.test'
+import { Template } from './Nav.stories.mdx'
+
+<Meta
+	title="Components/Nav/Modifiers"
+	component={VvNav}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+<Canvas>
+	<Story name="Sidebar" play={defaultTest} args={{ modifiers: 'sidebar' }}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story name="Aside" play={defaultTest} args={{ modifiers: 'aside' }}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Tabs"
+		play={defaultTest}
+		args={{
+			modifiers: 'tabs',
+		}}
+	>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="TabsFull"
+		play={defaultTest}
+		args={{
+			modifiers: 'tabs full',
+		}}
+	>
+		{Template.bind({})}
+	</Story>
+</Canvas>