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

package/src/components/VvNav/VvNav.vue

@@ -4,22 +4,32 @@
 
 	const props = defineProps(VvNavProps)
 	const emit = defineEmits(VvNavEvents)
-	const { modifiers } = toRefs(props)
+	const { modifiers, items } = toRefs(props)
 	const activeItem: Ref<string | null> = ref(null)
 
 	// bem css classes
 	const bemCssClasses = useModifiers('vv-nav', modifiers)
 
+	const localItems = computed(() => {
+		return items.value.map((item, index) => {
+			return {
+				...item,
+				id: item.id || `nav-item_${index}`,
+			}
+		})
+	})
+
 	/**
 	 * Triggers when the item is clicked.
 	 * @private
 	 * @event click
-	 * @param [NavItem, number] item, id - the clicked item
+	 * @param [NavItem, string] item - the clicked item
 	 */
-	function onClick(item: NavItem, id: string) {
+	function onClick(item: NavItem) {
 		if (!item.disabled) {
 			emit('click', item)
-			activeItem.value = id
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			activeItem.value = item.id!
 		}
 	}
 </script>
@@ -28,8 +38,8 @@
 	<nav :class="bemCssClasses">
 		<ul class="vv-nav__menu" role="menu" aria-busy="true">
 			<li
-				v-for="(navItem, index) in items"
-				:key="`nav-item_${index}`"
+				v-for="navItem in localItems"
+				:key="navItem.id"
 				class="vv-nav__item"
 				role="presentation"
 			>
@@ -41,12 +51,12 @@
 						tabindex: 0,
 					}"
 					:class="{
-						current: activeItem == `nav-item_${index}`,
+						current: activeItem == navItem.id,
 						disabled: navItem.disabled,
 					}"
 					class="vv-nav__item-label"
 					v-on="navItem.on || {}"
-					@click="onClick(navItem, `nav-item_${index}`)"
+					@click="onClick(navItem)"
 				>
 					{{ navItem.title }}
 				</VvAction>

package/src/components/VvNav/index.ts

@@ -1,6 +1,7 @@
 import { ModifiersProps } from '@/props'
 
 export type NavItem = {
+	id?: string
 	title: string
 	to?: string | { [key: string]: unknown }
 	href?: string

package/src/components/VvTab/VvTab.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+	import { VvTabProps, VvTabEvents } from '@/components/VvTab'
+	import type { NavItem } from '@/components/VvNav'
+	import VvNav from '@/components/VvNav/VvNav.vue'
+
+	const props = defineProps(VvTabProps)
+	const emit = defineEmits(VvTabEvents)
+	const { modifiers, items } = toRefs(props)
+	const activeTab: Ref<string | null> = ref(null)
+
+	// bem css classes
+	const bemCssClasses = useModifiers('vv-tab', modifiers)
+
+	const localItems = computed(() => {
+		return items.value.map((item, index) => {
+			return {
+				...item,
+				id: item.id || `tab-item_${index}`,
+			}
+		})
+	})
+
+	/**
+	 * Triggers when the item is clicked.
+	 * @private
+	 * @event click
+	 * @param [NavItem, string] item - the clicked item
+	 */
+	function onClick(item: NavItem) {
+		if (!item.disabled) {
+			emit('click', item)
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			activeTab.value = item.id!
+		}
+	}
+</script>
+
+<template>
+	<div :class="bemCssClasses">
+		<VvNav :items="localItems" modifiers="tabs full" @click="onClick" />
+		<!-- #region tab content -->
+		<article
+			v-for="item in localItems"
+			:id="item.id"
+			:key="item.id"
+			:class="{ target: activeTab === item.id }"
+			class="vv-tab__panel"
+		>
+			<slot :name="`${item.id}`" />
+		</article>
+		<!-- #endregion tab content -->
+	</div>
+</template>

package/src/components/VvTab/index.ts

@@ -0,0 +1,13 @@
+import { ModifiersProps } from '@/props'
+import type { NavItem } from '../VvNav'
+
+export const VvTabProps = {
+	...ModifiersProps,
+	items: {
+		type: Array<NavItem>,
+		required: true,
+		default: () => [],
+	},
+}
+
+export const VvTabEvents = ['click']

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

@@ -0,0 +1,41 @@
+import { VvTabProps } from '@/components/VvTab'
+
+export const defaultArgs = {
+	...propsToObject(VvTabProps),
+	items: [
+		{
+			title: 'Item 1',
+			href: 'javascript:void(0)',
+		},
+		{
+			title: 'Item 2',
+			to: 'about',
+		},
+		{
+			id: 'tab-3',
+			title: 'Item 3',
+			to: 'contacts',
+			on: {
+				click: () => {
+					// eslint-disable-next-line no-console
+					console.log('clicked Item 3')
+				},
+			},
+		},
+	],
+}
+
+export const defaultArgTypes = {
+	tabId: {
+		description: 'Slot by tab-id',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+}

package/src/stories/Tab/Tab.stories.mdx

@@ -0,0 +1,65 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import VvTab from '@/components/VvTab/VvTab.vue'
+import { defaultArgs, defaultArgTypes } from './Tab.settings'
+import { defaultTest } from './Tab.test'
+
+<Meta
+	title="Components/Tab"
+	component={VvTab}
+	args={defaultArgs}
+	argTypes={defaultArgTypes}
+/>
+
+export const Template = (args) => ({
+	components: { VvTab },
+	setup() {
+		return { args }
+	},
+	template: /* html */ `
+		<div class="m-md w-1/2">
+			<vv-tab v-bind="args" data-testId="element">
+				<template #tab-item_0>
+					<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 #tab-item_1>
+					<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>`,
+})
+
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>

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

@@ -0,0 +1,37 @@
+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
+	const childrenEls = element.getElementsByClassName('vv-nav')[0]
+	expect(childrenEls?.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 tab content to include "Tab 1"
+	const tabPanelEl = element.getElementsByClassName('vv-tab__panel')?.[0]
+	await expect(tabPanelEl.innerHTML.includes('Tab 1')).toBe(true)
+
+	// check accessibility
+	await expect(element).toHaveNoViolations()
+}