@volverjs/ui-vue 0.0.10-beta.1 → 0.0.10-beta.11

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,8 @@ import {
 	Side,
 	AnchorTarget,
 	ButtonType,
-} from '../constants'
+	ActionTag,
+} from '@/constants'
 
 export const LinkProps = {
 	/**
@@ -102,6 +104,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 +452,7 @@ export const ActionProps = {
 	...LabelProps,
 	...PressedProps,
 	...ActiveProps,
+	...CurrentProps,
 	...LinkProps,
 	/**
 	 * Button type
@@ -460,4 +470,18 @@ export const ActionProps = {
 		type: String,
 		default: undefined,
 	},
+	/**
+	 * Default tag for the action
+	 */
+	defaultTag: {
+		type: String,
+		default: ActionTag.button,
+	},
+}
+
+export const NavProps = {
+	items: {
+		type: Array as PropType<NavItem[]>,
+		default: () => [],
+	},
 }

package/src/resolvers/unplugin.ts

@@ -38,6 +38,11 @@ export interface VolverResolverOptions {
 	 * @default undefined
 	 */
 	ignore?: string[]
+	/**
+	 * cherry pick components from named exports
+	 * @default undefined
+	 */
+	cherryPick?: boolean
 }
 
 const STYLE_EXCLUDE = ['vv-icon', 'vv-action']
@@ -113,6 +118,7 @@ export function VolverResolver({
 	importStyle,
 	directives,
 	ignore,
+	cherryPick,
 }: VolverResolverOptions = {}): ComponentResolver[] {
 	return [
 		{
@@ -134,9 +140,16 @@ export function VolverResolver({
 				}
 
 				// import component
+				if (cherryPick) {
+					return {
+						from: `@volverjs/ui-vue/${kebabName}`,
+						sideEffects: getSideEffects(kebabName, importStyle),
+					}
+				}
 				return {
-					from: `@volverjs/ui-vue/${kebabName}`,
+					from: '@volverjs/ui-vue/components',
 					sideEffects: getSideEffects(kebabName, importStyle),
+					name,
 				}
 			},
 		},
@@ -159,9 +172,16 @@ export function VolverResolver({
 				}
 
 				// import directive
+				if (cherryPick) {
+					return {
+						from: `@volverjs/ui-vue/${kebabName}`,
+						sideEffects: getSideEffects(kebabName, importStyle),
+					}
+				}
 				return {
-					from: `@volverjs/ui-vue/${kebabName}`,
+					from: '@volverjs/ui-vue/directives',
 					sideEffects: getSideEffects(kebabName, importStyle),
+					name,
 				}
 			},
 		},

package/src/stories/Button/ButtonModifiers.stories.ts

@@ -3,7 +3,6 @@ import VvButton from '@/components/VvButton/VvButton.vue'
 import { Default } from './Button.stories'
 import { argTypes, defaultArgs } from './Button.settings'
 
-
 const meta: Meta<typeof VvButton> = {
 	title: 'Components/Button/Modifiers',
 	component: VvButton,
@@ -70,9 +69,6 @@ export const StaticLight: Story = {
 	},
 	render: (args) => ({
 		components: { VvButton },
-		backgrounds: {
-			default: 'dark',
-		},
 		setup() {
 			return { args }
 		},
@@ -81,23 +77,18 @@ export const StaticLight: Story = {
 				<vv-button v-bind="args" data-testId="element" />
 			</div>
 		`,
-	})
-
+	}),
 }
 
-
 export const StaticDark: Story = {
 	...Default,
 	args: {
 		...Default.args,
-		label: 'Static light',
-		modifiers: 'static-light',
+		label: 'Static dark',
+		modifiers: 'static-dark',
 	},
 	render: (args) => ({
 		components: { VvButton },
-		backgrounds: {
-			default: 'dark',
-		},
 		setup() {
 			return { args }
 		},
@@ -106,7 +97,7 @@ export const StaticDark: Story = {
 				<vv-button v-bind="args" data-testId="element" />
 			</div>
 		`,
-	})
+	}),
 }
 
 export const Block: Story = {
@@ -137,7 +128,6 @@ export const FullBleed: Story = {
 	},
 }
 
-
 export const Action: Story = {
 	...Default,
 	args: {

package/src/stories/Combobox/Combobox.settings.ts

@@ -392,4 +392,12 @@ export const argTypes = {
 			},
 		},
 	},
+	'update:search': {
+		table: {
+			category: 'Events',
+			type: {
+				summary: 'string',
+			},
+		},
+	},
 }

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 { ArgTypes, 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
@@ -25,7 +25,7 @@ export const defaultArgs = {
 	],
 }
 
-export const defaultArgTypes = {
+export const defaultArgTypes: ArgTypes = {
 	tabId: {
 		description: 'Slot by tab-id',
 		control: {

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/generic.ts

@@ -0,0 +1,6 @@
+export type Nullable<T> = T | null | undefined
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Option = Record<string | number | symbol, any> & {
+	options?: Option[]
+}

package/src/types/index.ts

@@ -0,0 +1,5 @@
+export * from './alert'
+export * from './floating-ui'
+export * from './generic'
+export * from './group'
+export * from './nav'

package/src/types/nav.ts

@@ -0,0 +1,20 @@
+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>
+	data?: Record<string, unknown>
+}
+
+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',
-		})
-	},
-})

package/src/types/generic.d.ts

@@ -1,6 +0,0 @@
-export type Nullable<T> = T | null | undefined
-
-export type Option = {
-	options?: Option[],
-	[key: string]: unknown,
-}