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

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

@@ -55,7 +55,7 @@
 			case props.href !== undefined:
 				return ActionTag.a
 			default:
-				return ActionTag.button
+				return props.defaultTag // button
 		}
 	})
 
@@ -85,12 +85,14 @@
 					to: props.to,
 					target: props.target,
 				}
-			default:
+			case ActionTag.button:
 				return {
 					...toReturn,
 					type: props.type,
 					disabled: props.disabled,
 				}
+			default:
+				return toReturn
 		}
 	})
 
@@ -132,6 +134,7 @@
 			active,
 			pressed,
 			disabled,
+			current,
 		}"
 		@click.passive="onClick"
 		@mouseover.passive="onMouseover"

package/src/components/VvBreadcrumb/VvBreadcrumb.vue

@@ -7,46 +7,47 @@
 <script setup lang="ts">
 	import { useModifiers } from '../../composables/useModifiers'
 	import { VvBreadcrumbProps } from '.'
+	import VvAction from '../VvAction/VvAction.vue'
 
 	const props = defineProps(VvBreadcrumbProps)
 	const { modifiers } = toRefs(props)
 	const bemCssClasses = useModifiers('vv-breadcrumb', modifiers)
+	const length = computed(() => props.routes?.length ?? 0)
+
+	const isLast = (index: number) => index === length.value - 1
 </script>
 
 <template>
 	<nav :class="bemCssClasses" aria-label="breadcrumbs">
 		<ol class="vv-breadcrumb__list">
 			<li
-				v-for="(route, index) in routes"
-				:key="`${route.label}-${index}`"
-				:class="{
-					'vv-breadcrumb__item': index < Number(routes?.length) - 1,
-					'vv-breadcrumb__item-active':
-						index === Number(routes?.length) - 1,
-				}"
+				v-for="({ label, ...route }, index) in routes"
+				:key="`${label}-${index}`"
+				:class="
+					!isLast(index)
+						? 'vv-breadcrumb__item'
+						: 'vv-breadcrumb__item-active'
+				"
 				itemprop="itemListElement"
 				itemtype="https://schema.org/ListItem"
 				itemscope
 			>
-				<Component
-					:is="route.to ? 'router-link' : route.href ? 'a' : 'span'"
+				<VvAction
 					v-bind="route"
-					:class="{
-						'vv-breadcrumb__link':
-							index < Number(routes?.length) - 1,
-					}"
-					:aria-current="
-						index === Number(routes?.length) - 1
-							? 'page'
-							: undefined
+					:class="
+						!isLast(index)
+							? 'vv-breadcrumb__link'
+							: 'vv-breadcrumb__label'
 					"
+					:aria-current="isLast(index) ? 'page' : undefined"
 					itemprop="item"
+					default-tag="span"
 				>
 					<!-- @slot Slot for label -->
 					<slot name="label" v-bind="{ route, index }">
-						{{ route.label }}
+						{{ label }}
 					</slot>
-				</Component>
+				</VvAction>
 				<meta itemprop="position" :content="`${index + 1}`" />
 			</li>
 		</ol>

package/src/components/VvBreadcrumb/index.ts

@@ -1,13 +1,7 @@
 import { ModifiersProps } from '../../props'
-
-export interface Route {
-	label: string
-	to?: string | { [key: string]: unknown }
-	title?: string
-	href?: string
-}
+import type { NavItem } from '../../types'
 
 export const VvBreadcrumbProps = {
 	...ModifiersProps,
-	routes: Array as PropType<Route[]>,
+	routes: Array as PropType<NavItem[]>,
 }

package/src/components/VvCombobox/VvCombobox.vue

@@ -87,9 +87,13 @@
 		searchText,
 		computed(() => Number(props.debounceSearch)),
 	)
-	watch(debouncedSearchText, () =>
-		emit('change:search', debouncedSearchText.value),
-	)
+	watch(debouncedSearchText, () => {
+		emit('update:search', debouncedSearchText.value)
+		/**
+		 * @deprecated change:search should not be used, use update:search instead
+		 */
+		emit('change:search', debouncedSearchText.value)
+	})
 
 	// expanded
 	const expanded = ref(false)
@@ -173,7 +177,7 @@
 			valid: valid.value,
 			invalid: invalid.value,
 			dirty: isDirty.value,
-			focus: focused.value,
+			focus: focused.value || focusedWithin.value || expanded.value,
 			floating: floating.value,
 			badges: props.badges,
 		})),
@@ -266,12 +270,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 +299,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/VvCombobox/index.ts

@@ -20,6 +20,10 @@ import type { Option } from '../../types/generic'
 
 export const VvComboboxEvents = [
 	'update:modelValue',
+	'update:search',
+	/**
+	 * @deprecated change:search should not be used, use update:search instead
+	 */
 	'change:search',
 	'focus',
 	'blur',

package/src/components/VvInputText/VvInputText.vue

@@ -227,7 +227,7 @@
 				return
 			}
 			inputEl.value.stepUp()
-			localModelValue.value = unref(inputEl).value
+			localModelValue.value = Number(unref(inputEl).value)
 		}
 	}
 	const onStepDown = () => {
@@ -238,7 +238,7 @@
 				return
 			}
 			inputEl.value.stepDown()
-			localModelValue.value = unref(inputEl).value
+			localModelValue.value = Number(unref(inputEl).value)
 		}
 	}
 

package/src/components/VvNav/VvNav.vue

@@ -1,66 +1,46 @@
 <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)"
+		<ul
+			class="vv-nav__menu"
+			role="menu"
+			aria-busy="true"
+			@click.stop="onClick"
+		>
+			<slot>
+				<VvNavItem
+					v-for="({ on = {}, data, ...item }, index) in items"
+					:key="index"
+					:data-index="index"
+					v-bind="item"
+					v-on="on"
 				>
-					{{ navItem.title }}
-				</VvAction>
-			</li>
+					<slot name="item" v-bind="{ item, data, index }" />
+				</VvNavItem>
+			</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,81 @@
 <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"
+		<!-- #region nav -->
+		<VvNav
+			v-bind="{
+				items: navItems,
+				modifiers: hasNavModifiers,
+			}"
+			@click="onNavClick"
 		>
-			<slot :name="`${item.id}`" />
-		</article>
-		<!-- #endregion tab content -->
+			<template #item="{ item, index }">
+				<slot name="nav-item" v-bind="{ item, index }" />
+			</template>
+		</VvNav>
+		<!-- #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/components/VvTextarea/VvTextarea.vue

@@ -117,7 +117,7 @@
 			'icon-after': hasIconAfter.value,
 			floating: props.floating && !isEmpty(props.label),
 			dirty: isDirty.value,
-			focused: focused.value,
+			focus: focused.value,
 			resizable: props.resizable,
 		})),
 	)

package/src/components/index.ts

@@ -2,6 +2,9 @@ export { default as VvAccordion } from './VvAccordion/VvAccordion.vue'
 export { default as VvAccordionGroup } from './VvAccordionGroup/VvAccordionGroup.vue'
 export { default as VvAction } from './VvAction/VvAction.vue'
 export { default as VvAlert } from './VvAlert/VvAlert.vue'
+export { default as VvAlertGroup } from './VvAlertGroup/VvAlertGroup.vue'
+export { default as VvAvatar } from './VvAvatar/VvAvatar.vue'
+export { default as VvAvatarGroup } from './VvAvatarGroup/VvAvatarGroup.vue'
 export { default as VvBadge } from './VvBadge/VvBadge.vue'
 export { default as VvBreadcrumb } from './VvBreadcrumb/VvBreadcrumb.vue'
 export { default as VvButton } from './VvButton/VvButton.vue'
@@ -12,9 +15,15 @@ export { default as VvCheckboxGroup } from './VvCheckboxGroup/VvCheckboxGroup.vu
 export { default as VvCombobox } from './VvCombobox/VvCombobox.vue'
 export { default as VvDialog } from './VvDialog/VvDialog.vue'
 export { default as VvDropdown } from './VvDropdown/VvDropdown.vue'
+export { default as VvDropdownAction } from './VvDropdown/VvDropdownAction.vue'
+export { default as VvDropdownItem } from './VvDropdown/VvDropdownItem.vue'
+export { default as VvDropdownOptgroup } from './VvDropdown/VvDropdownOptgroup.vue'
+export { default as VvDropdownOption } from './VvDropdown/VvDropdownOption.vue'
 export { default as VvIcon } from './VvIcon/VvIcon.vue'
 export { default as VvInputText } from './VvInputText/VvInputText.vue'
 export { default as VvNav } from './VvNav/VvNav.vue'
+export { default as VvNavItem } from './VvNav/VvNavItem.vue'
+export { default as VvNavSeparator } from './VvNav/VvNavSeparator.vue'
 export { default as VvProgress } from './VvProgress/VvProgress.vue'
 export { default as VvRadio } from './VvRadio/VvRadio.vue'
 export { default as VvRadioGroup } from './VvRadioGroup/VvRadioGroup.vue'

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/directives/index.ts

@@ -1,7 +1,4 @@
 import tooltip from '../directives/v-tooltip'
 import contextmenu from '../directives/v-contextmenu'
 
-export default {
-	tooltip,
-	contextmenu,
-}
+export { tooltip, contextmenu }

package/src/directives/v-tooltip.ts

@@ -1,15 +1,24 @@
 import { render, type Directive, type DirectiveBinding } from 'vue'
 import VvTooltip from '../components/VvTooltip/VvTooltip.vue'
-import type { Side } from '../constants'
+import { Side } from '../constants'
 
-const tooltip: Directive = {
-	beforeMount(el: HTMLElement, binding: DirectiveBinding) {
-		const tooltip = h(VvTooltip, {
-			value: binding.value,
-			position: binding.arg as Side,
-		})
-		render(tooltip, el)
-	},
-}
+const tooltip: Directive = (() => {
+	return {
+		beforeMount(el: HTMLElement, binding: DirectiveBinding) {
+			const tooltip = h(VvTooltip, {
+				value: binding.value,
+				position: binding.arg as Side,
+			})
+			render(tooltip, el)
+		},
+		updated(el: HTMLElement, binding: DirectiveBinding) {
+			const tooltip = h(VvTooltip, {
+				value: binding.value,
+				position: binding.arg as Side,
+			})
+			render(tooltip, el)
+		},
+	}
+})()
 
 export default tooltip

package/src/index.ts

@@ -1,7 +1,9 @@
 import VolverPlugin from './Volver'
-import type { Volver } from './Volver'
+import type { Volver, VolverOptions } from './Volver'
 
 export { VolverPlugin }
+export * from './types'
+export type { Volver, VolverOptions }
 
 // https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties
 // Add custom property and extend vue type definition