@volverjs/ui-vue 0.0.9 → 0.0.10-beta.10

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,
 		})),
@@ -182,8 +186,8 @@
 	const {
 		getOptionLabel,
 		getOptionValue,
-		getOptionDisabled,
 		getOptionGrouped,
+		isOptionDisabled,
 	} = useOptions(props)
 
 	// options filtered by search text
@@ -210,7 +214,7 @@
 	 * Check if an option exist into modelValue array (multiple) or is equal to modelValue (single)
 	 * @param {String | Option} option
 	 */
-	function getOptionSelected(option: string | Option) {
+	function isOptionSelected(option: string | Option) {
 		if (Array.isArray(props.modelValue)) {
 			// check if contain whole option or option value
 			return (
@@ -230,29 +234,17 @@
 	 * Check if is multiple mode, object mode or "string" mode
 	 */
 	const selectedOptions = computed(() => {
-		let selectedValues: Array<typeof props.modelValue> = []
-		if (Array.isArray(props.modelValue)) {
-			selectedValues = props.modelValue as Array<typeof props.modelValue>
-		} else if (props.modelValue) {
-			selectedValues = [props.modelValue]
-		}
-		const options = props.options.reduce(
+		const options = props.options.reduce<Array<Option | string>>(
 			(acc, value) => {
 				if (isGroup(value)) {
 					return [...acc, ...getOptionGrouped(value)]
 				}
 				return [...acc, value]
 			},
-			[] as Array<Option | string>,
+			[],
 		)
-
 		return options.filter((option) => {
-			if (isGroup(option)) {
-				return getOptionGrouped(option).some((item) =>
-					selectedValues.includes(getOptionValue(item)),
-				)
-			}
-			return selectedValues.includes(getOptionValue(option))
+			return isOptionSelected(option)
 		})
 	})
 
@@ -278,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 (
@@ -306,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
 			}
 		}
@@ -518,8 +517,8 @@
 										option,
 									)"
 									v-bind="{
-										disabled: getOptionDisabled(item),
-										selected: getOptionSelected(item),
+										selected: isOptionSelected(item),
+										disabled: isOptionDisabled(item),
 										unselectable,
 										deselectHintLabel:
 											propsDefaults.deselectHintLabel,
@@ -538,8 +537,8 @@
 										v-bind="{
 											option,
 											selectedOptions,
-											selected: getOptionSelected(item),
-											disabled: getOptionDisabled(item),
+											selected: isOptionSelected(item),
+											disabled: isOptionDisabled(item),
 										}"
 									>
 										{{ getOptionLabel(item) }}
@@ -549,8 +548,8 @@
 							<VvDropdownOption
 								v-else
 								v-bind="{
-									disabled: getOptionDisabled(option),
-									selected: getOptionSelected(option),
+									selected: isOptionSelected(option),
+									disabled: isOptionDisabled(option),
 									unselectable,
 									deselectHintLabel:
 										propsDefaults.deselectHintLabel,
@@ -568,8 +567,8 @@
 									v-bind="{
 										option,
 										selectedOptions,
-										selected: getOptionSelected(option),
-										disabled: getOptionDisabled(option),
+										selected: isOptionSelected(option),
+										disabled: isOptionDisabled(option),
 									}"
 								>
 									{{ getOptionLabel(option) }}

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 = {}, ...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, 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/VvSelect/VvSelect.vue

@@ -139,7 +139,7 @@
 	const {
 		getOptionLabel,
 		getOptionValue,
-		getOptionDisabled,
+		isOptionDisabled,
 		getOptionGrouped,
 	} = useOptions(props)
 
@@ -195,7 +195,7 @@
 						<option
 							v-if="!isGroup(option)"
 							:key="index"
-							:disabled="getOptionDisabled(option)"
+							:disabled="isOptionDisabled(option)"
 							:value="getOptionValue(option)"
 						>
 							{{ getOptionLabel(option) }}
@@ -203,13 +203,13 @@
 						<optgroup
 							v-else
 							:key="`group-${index}`"
-							:disabled="getOptionDisabled(option)"
+							:disabled="isOptionDisabled(option)"
 							:label="getOptionLabel(option)"
 						>
 							<option
 								v-for="(item, i) in getOptionGrouped(option)"
 								:key="`group-${index}-item-${i}`"
-								:disabled="getOptionDisabled(item)"
+								:disabled="isOptionDisabled(item)"
 								:value="getOptionValue(item)"
 							>
 								{{ getOptionLabel(item) }}

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/composables/useOptions.ts

@@ -24,7 +24,7 @@ export function useOptions(props: any) {
 			: get(option, valueKey.value)
 	}
 
-	const getOptionDisabled = (option: string | Option): boolean => {
+	const isOptionDisabled = (option: string | Option): boolean => {
 		if (typeof option !== 'object' && option !== null) return false
 
 		return typeof disabledKey.value === 'function'
@@ -41,7 +41,7 @@ export function useOptions(props: any) {
 		options,
 		getOptionLabel,
 		getOptionValue,
-		getOptionDisabled,
+		isOptionDisabled,
 		getOptionGrouped,
 	}
 }