@volverjs/ui-vue 0.0.10-beta.2 → 0.0.10-beta.4

package/src/components/VvAccordion/VvAccordion.vue

@@ -5,7 +5,7 @@
 </script>
 
 <script setup lang="ts">
-	import { nanoid } from 'nanoid'
+	import { uid } from 'uid'
 	import { VvAccordionEvents, VvAccordionProps, useGroupProps } from '.'
 
 	// props, attrs and emit
@@ -15,7 +15,7 @@
 
 	// data
 	const accordionName = computed(
-		() => props.name || (attrs?.id as string) || nanoid(),
+		() => props.name || (attrs?.id as string) || uid(),
 	)
 	const {
 		modifiers,

package/src/components/VvAction/VvAction.vue

@@ -132,6 +132,7 @@
 			active,
 			pressed,
 			disabled,
+			current,
 		}"
 		@click.passive="onClick"
 		@mouseover.passive="onMouseover"

package/src/components/VvCombobox/VvCombobox.vue

@@ -266,12 +266,13 @@
 			return
 		}
 
+		// get option value
 		const value = getOptionValue(option)
-
 		let toReturn: string | string[] | Option | Option[] | undefined = value
-		// Check multiple prop, override value with array and remove or add the value
+
+		// check multiple prop, override value with array and remove or add the value
 		if (props.multiple) {
-			// check maxValues prop and block check new values
+			// check max-values prop and block check new values
 			if (Array.isArray(props.modelValue)) {
 				const maxValues = Number(props.maxValues)
 				if (
@@ -294,7 +295,13 @@
 			if (!props.keepOpen) {
 				collapse()
 			}
-			if (props.unselectable && value === props.modelValue) {
+			if (Array.isArray(props.modelValue)) {
+				if (props.unselectable && props.modelValue.includes(value)) {
+					toReturn = []
+				} else {
+					toReturn = [value]
+				}
+			} else if (props.unselectable && value === props.modelValue) {
 				toReturn = undefined
 			}
 		}

package/src/components/VvNav/VvNav.vue

@@ -1,66 +1,44 @@
 <script setup lang="ts">
-	import { VvNavProps, VvNavEvents, type NavItem } from '@/components/VvNav'
-	import VvAction from '@/components/VvAction/VvAction.vue'
+	import { VvNavProps, VvNavEvents } from '@/components/VvNav'
+	import VvNavItem from './VvNavItem.vue'
 
 	const props = defineProps(VvNavProps)
-	const emit = defineEmits(VvNavEvents)
-	const { modifiers, items } = toRefs(props)
-	const activeItem: Ref<string | null> = ref(null)
+	const { modifiers } = toRefs(props)
 
-	// 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}`,
+	const emit = defineEmits(VvNavEvents)
+	const onClick = (event: Event) => {
+		const target = event.target as HTMLElement
+		if (target?.dataset.index) {
+			const index = parseInt(target.dataset.index)
+			const item = props.items?.[index]
+			if (!item || item?.disabled) {
+				return
 			}
-		})
-	})
-
-	/**
-	 * 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
-			activeItem.value = item.id!
 		}
 	}
+
+	// bem css classes
+	const bemCssClasses = useModifiers('vv-nav', modifiers)
 </script>
 
 <template>
 	<nav :class="bemCssClasses">
-		<ul class="vv-nav__menu" role="menu" aria-busy="true">
-			<li
-				v-for="navItem in localItems"
-				:key="navItem.id"
-				class="vv-nav__item"
-				role="presentation"
-			>
-				<VvAction
-					v-bind="{
-						disabled: navItem.disabled,
-						to: navItem.to,
-						href: navItem.href,
-						tabindex: 0,
-					}"
-					:class="{
-						current: activeItem == navItem.id,
-						disabled: navItem.disabled,
-					}"
-					class="vv-nav__item-label"
-					v-on="navItem.on"
-					@click="onClick(navItem)"
-				>
-					{{ navItem.title }}
-				</VvAction>
-			</li>
+		<ul
+			class="vv-nav__menu"
+			role="menu"
+			aria-busy="true"
+			@click.stop="onClick"
+		>
+			<slot>
+				<VvNavItem
+					v-for="({ on = {}, ...item }, index) in items"
+					:key="index"
+					:data-index="index"
+					v-bind="item"
+					v-on="on"
+				/>
+			</slot>
 		</ul>
 	</nav>
 </template>

package/src/components/VvNav/VvNavItem.vue

@@ -0,0 +1,18 @@
+<script lang="ts">
+	export default {
+		name: 'VvNavItem',
+		inheritAttrs: false,
+	}
+</script>
+
+<script setup lang="ts">
+	import VvAction from '@/components/VvAction/VvAction.vue'
+</script>
+
+<template>
+	<li class="vv-nav__item" role="presentation">
+		<VvAction v-bind="$attrs" class="vv-nav__item-label">
+			<slot />
+		</VvAction>
+	</li>
+</template>

package/src/components/VvNav/VvNavSeparator.vue

@@ -0,0 +1,11 @@
+<script lang="ts">
+	export default {
+		name: 'VvNavSeparator',
+	}
+</script>
+
+<template>
+	<li class="vv-nav__separator" role="separator">
+		<slot />
+	</li>
+</template>

package/src/components/VvNav/index.ts

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

package/src/components/VvTab/VvTab.vue

@@ -1,53 +1,77 @@
 <script setup lang="ts">
 	import { VvTabProps, VvTabEvents } from '@/components/VvTab'
-	import type { NavItem } from '@/components/VvNav'
 	import VvNav from '@/components/VvNav/VvNav.vue'
+	import type { NavItemTab } from '@/types/nav'
 
 	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}`,
+	const tabKeys = computed(() => {
+		return items.value.reduce<string[]>((acc, item) => {
+			if (item.tab) {
+				acc.push(item.tab)
 			}
-		})
+			return acc
+		}, [])
 	})
-
-	/**
-	 * 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!
+	const localModelValue = ref<string | undefined>()
+	const activeTabKey = computed({
+		get: () => {
+			return (
+				props.modelValue || localModelValue.value || tabKeys.value?.[0]
+			)
+		},
+		set: (newValue) => {
+			localModelValue.value = newValue
+			emit('update:modelValue', newValue)
+		},
+	})
+	const hasNavModifiers = computed(() => {
+		return [
+			'tabs',
+			...(Array.isArray(props.navModifiers)
+				? props.navModifiers
+				: props.navModifiers?.split(' ') ?? []),
+		]
+	})
+	const onNavClick = (item: NavItemTab) => {
+		if (item.tab) {
+			activeTabKey.value = item.tab
 		}
 	}
+	const navItems = computed(() =>
+		props.items.map((item) => ({
+			current: item.tab === activeTabKey.value,
+			...item,
+		})),
+	)
+
+	// bem css classes
+	const bemCssClasses = useModifiers('vv-tab', modifiers)
 </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 -->
+		<!-- #region nav -->
+		<VvNav
+			v-bind="{
+				items: navItems,
+				modifiers: hasNavModifiers,
+			}"
+			@click="onNavClick"
+		/>
+		<!-- #endregion -->
+
+		<!-- #region panels -->
+		<template v-for="(item, index) in items" :key="index">
+			<article
+				v-if="item.tab"
+				:class="{ target: activeTabKey === item.tab }"
+				class="vv-tab__panel"
+			>
+				<slot :name="`panel::${item.tab}`" />
+			</article>
+		</template>
+		<!-- #endregion -->
 	</div>
 </template>

package/src/components/VvTab/index.ts

@@ -1,13 +1,19 @@
 import { ModifiersProps } from '@/props'
-import type { NavItem } from '../VvNav'
+import type { NavItemTab } from '@/types/nav'
 
 export const VvTabProps = {
 	...ModifiersProps,
+	navModifiers: {
+		type: [String, Array] as PropType<string | string[]>,
+	},
+	modelValue: {
+		type: String,
+		default: '',
+	},
 	items: {
-		type: Array as PropType<NavItem[]>,
-		required: true,
+		type: Array as PropType<NavItemTab[]>,
 		default: () => [],
 	},
 }
 
-export const VvTabEvents = ['click']
+export const VvTabEvents = ['update:modelValue']

package/src/composables/useUniqueId.ts

@@ -1,5 +1,5 @@
-import { nanoid } from 'nanoid'
+import { uid } from 'uid'
 import type { Ref } from 'vue'
 
 export const useUniqueId = (id?: Ref<string | number | undefined>) =>
-	computed(() => String(id?.value || nanoid()))
+	computed(() => String(id?.value || uid()))

package/src/props/index.ts

@@ -1,12 +1,13 @@
 import type { PropType } from 'vue'
-import type { Option } from '../types/generic'
+import type { Option } from '@/types/generic'
+import type { NavItem } from '@/types/nav'
 import type {
 	AutoPlacementOptions,
 	FlipOptions,
 	OffsetOptions,
 	ShiftOptions,
 	SizeOptions,
-} from '../types/floating-ui'
+} from '@/types/floating-ui'
 import {
 	Placement,
 	Strategy,
@@ -14,7 +15,7 @@ import {
 	Side,
 	AnchorTarget,
 	ButtonType,
-} from '../constants'
+} from '@/constants'
 
 export const LinkProps = {
 	/**
@@ -102,6 +103,13 @@ export const ActiveProps = {
 	active: Boolean,
 }
 
+export const CurrentProps = {
+	/**
+	 * Whether the item is current
+	 */
+	current: Boolean,
+}
+
 export const PressedProps = {
 	/**
 	 * Whether the item is pressed
@@ -443,6 +451,7 @@ export const ActionProps = {
 	...LabelProps,
 	...PressedProps,
 	...ActiveProps,
+	...CurrentProps,
 	...LinkProps,
 	/**
 	 * Button type
@@ -461,3 +470,10 @@ export const ActionProps = {
 		default: undefined,
 	},
 }
+
+export const NavProps = {
+	items: {
+		type: Array as PropType<NavItem[]>,
+		default: () => [],
+	},
+}

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

@@ -7,16 +7,15 @@ export const defaultArgs: Meta<typeof VvNav>['args'] = {
 	...propsToObject(VvNavProps),
 	items: [
 		{
-			title: 'Item 1',
+			label: 'Item 1',
 			href: 'javascript:void(0)',
 		},
 		{
-			title: 'Item 2',
+			label: 'Item 2',
 			to: 'about',
 		},
 		{
-			title: 'Item 3',
-			to: 'contacts',
+			label: 'Item 3',
 			on: {
 				click: () => {
 					// eslint-disable-next-line no-console

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

@@ -1,31 +1,20 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within, userEvent } from '@storybook/testing-library'
+import { within } from '@storybook/testing-library'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(
 		'element',
 	)) as HTMLElement
 
+	const menuEl = element.getElementsByClassName('vv-nav__menu')[0]
+
 	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')
+	expect(menuEl.children.length).toEqual(args.items?.length)
 
 	// check accessibility
 	await expect(element).toHaveNoViolations()

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

@@ -1,20 +1,20 @@
+import type { Meta } from '@storybook/vue3'
+import type { VvTab } from '@/components'
 import { VvTabProps } from '@/components/VvTab'
 
-export const defaultArgs = {
+export const defaultArgs: Meta<typeof VvTab>['args'] = {
 	...propsToObject(VvTabProps),
 	items: [
 		{
-			title: 'Item 1',
-			href: 'javascript:void(0)',
+			tab: 'tab-1',
+			label: 'Item 1',
 		},
 		{
-			title: 'Item 2',
-			to: 'about',
+			tab: 'tab-2',
+			label: 'Item 2',
 		},
 		{
-			id: 'tab-3',
-			title: 'Item 3',
-			to: 'contacts',
+			label: 'Item 3',
 			on: {
 				click: () => {
 					// eslint-disable-next-line no-console

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

@@ -27,7 +27,7 @@ export const Default: Story = {
 		template: /* html */ `
 			<div class="m-md w-1/2">
 				<vv-tab v-bind="args" data-testId="element">
-					<template #tab-item_0>
+					<template #panel::tab-1>
 						<span class="text-20 font-semibold">Tab 1</span>
 						<p>
 							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
@@ -39,7 +39,7 @@ export const Default: Story = {
 							elit libero, a pharetra augue.
 						</p>
 					</template>
-					<template #tab-item_1>
+					<template #panel::tab-2>
 						<span class="text-20 font-semibold">Tab 2</span>
 						<p>
 							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla

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

@@ -1,6 +1,6 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within, userEvent } from '@storybook/testing-library'
+import { within } from '@storybook/testing-library'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(
@@ -16,21 +16,13 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	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')
+	const firstNavItemLabelEl =
+		await element.getElementsByClassName('vv-nav__item-label')?.[0]
+	await expect(firstNavItemLabelEl.classList.contains('current')).toBe(true)
 
 	// check tab content to include "Tab 1"
-	const tabPanelEl = element.getElementsByClassName('vv-tab__panel')?.[0]
-	await expect(tabPanelEl.innerHTML.includes('Tab 1')).toBe(true)
+	const firstTabPanelEl = element.getElementsByClassName('vv-tab__panel')?.[0]
+	await expect(firstTabPanelEl.classList.contains('target')).toBe(true)
 
 	// check accessibility
 	await expect(element).toHaveNoViolations()

package/src/stories/argTypes.ts

@@ -238,7 +238,7 @@ export const IdNameArgTypes = {
 		},
 		table: {
 			defaultValue: {
-				summary: 'nanoid',
+				summary: 'uid',
 			},
 		},
 	},

package/src/types/nav.ts

@@ -0,0 +1,19 @@
+import type { AnchorTarget } from '@/constants'
+
+export type NavItem = {
+	label: string
+	ariaLabel?: string
+	title?: string
+	to?: string | Record<string, unknown>
+	href?: string
+	target?: `${AnchorTarget}`
+	rel?: string
+	disabled?: boolean
+	current?: boolean
+	class?: string | string[]
+	on?: Record<'click' | string, () => void>
+}
+
+export type NavItemTab = NavItem & {
+	tab?: string
+}

package/dist/components/VvNav/VvNavItemTitle.vue.d.ts

@@ -1,6 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    title: StringConstructor;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    title: StringConstructor;
-}>>, {}, {}>;
-export default _default;

package/dist/components/VvNavItemTitle/VvNavItemTitle.es.js

@@ -1,19 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, toDisplayString } from "vue";
-const _hoisted_1 = {
-  class: "vv-nav__heading-label",
-  "aria-hidden": "true"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "VvNavItemTitle",
-  props: {
-    title: String
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.title), 1);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

package/dist/components/VvNavItemTitle/VvNavItemTitle.umd.js

@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvNavItemTitle=t(e.vue)}(this,(function(e){"use strict";const t={class:"vv-nav__heading-label","aria-hidden":"true"};return e.defineComponent({__name:"VvNavItemTitle",props:{title:String},setup:n=>(i,o)=>(e.openBlock(),e.createElementBlock("span",t,e.toDisplayString(n.title),1))})}));

package/src/components/VvNav/VvNavItemTitle.vue

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

package/src/components/VvNav/VvNavSeparator.ts

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