@volverjs/ui-vue 0.0.10-beta.3 → 0.0.10-beta.31

package/src/components/VvAlertGroup/index.ts

@@ -1,18 +1,6 @@
-import { ModifiersProps } from '@/props'
 import type { ExtractPropTypes } from 'vue'
-
-export type AlertItem = {
-	id: string | number
-	title?: string
-	icon?: string | Record<string, unknown>
-	content?: string
-	footer?: string
-	modifiers?: string | string[]
-	dismissable?: boolean
-	autoClose?: number
-	closeLabel?: string
-	role?: 'alert' | 'alertdialog'
-}
+import type { Alert } from '@/types'
+import { ModifiersProps } from '@/props'
 
 export const VvAlertGroupProps = {
 	...ModifiersProps,
@@ -21,7 +9,7 @@ export const VvAlertGroupProps = {
 		required: true,
 	},
 	items: {
-		type: Array as PropType<AlertItem[]>,
+		type: Array as PropType<Alert[]>,
 		default: () => [],
 	},
 	stack: {

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/VvButton/VvButton.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 	export default {
 		name: 'VvButton',
+		inheritAttrs: false,
 	}
 </script>
 
@@ -74,9 +75,7 @@
 	 * @description Define icon attributes.
 	 * @returns {Object} The icon attributes.
 	 */
-	const hasIconProps = computed(() =>
-		typeof icon?.value === 'string' ? { name: icon?.value } : icon?.value,
-	)
+	const { hasIcon } = useComponentIcon(icon)
 
 	/**
 	 * @description Catch click event
@@ -84,6 +83,14 @@
 	const toggleValue = computed(() => {
 		return props.value !== undefined ? props.value : name.value
 	})
+	const hasListeners = computed(() => {
+		if (!toggle.value) {
+			return undefined
+		}
+		return {
+			onClick,
+		}
+	})
 	const onClick = () => {
 		if (toggle.value) {
 			if (Array.isArray(modelValue.value)) {
@@ -110,6 +117,8 @@
 <template>
 	<VvAction
 		v-bind="{
+			...attrs,
+			...hasListeners,
 			disabled,
 			pressed,
 			active,
@@ -123,7 +132,6 @@
 		:id="hasId"
 		ref="element"
 		:class="bemCssClasses"
-		@click="onClick"
 	>
 		<!-- @slot Default slot -->
 		<slot>
@@ -146,9 +154,11 @@
 			<template v-else>
 				<!-- @slot Before label and icon -->
 				<slot name="before" />
-				<template v-if="icon">
-					<VvIcon class="vv-button__icon" v-bind="hasIconProps" />
-				</template>
+				<VvIcon
+					v-if="hasIcon"
+					v-bind="hasIcon"
+					class="vv-button__icon"
+				/>
 				<span v-if="label" class="vv-button__label">
 					<!-- @slot Use this slot for button label -->
 					<slot name="label">

package/src/components/VvButton/index.ts

@@ -1,4 +1,4 @@
-import type { Ref, PropType, ExtractPropTypes } from 'vue'
+import type { PropType, ExtractPropTypes } from 'vue'
 import type { ButtonGroupState } from '../../types/group'
 import {
 	ActionProps,
@@ -6,6 +6,7 @@ import {
 	LoadingProps,
 	ModifiersProps,
 	UnselectableProps,
+	IconProps,
 } from '../../props'
 import { INJECTION_KEY_BUTTON_GROUP, Side } from '../../constants'
 
@@ -17,10 +18,7 @@ export const VvButtonProps = {
 	...ModifiersProps,
 	...UnselectableProps,
 	...LoadingProps,
-	/**
-	 * Button icon
-	 */
-	icon: [String, Object],
+	...IconProps,
 	/**
 	 * Button icon position
 	 */
@@ -79,19 +77,14 @@ export function useGroupProps(
 	const { id, iconPosition, icon, label, pressed } = toRefs(props)
 
 	// group props
-	const modelValue = getGroupOrLocalRef('modelValue', props, emit) as Ref<
-		string | number | boolean | (string | number | boolean)[] | undefined
-	>
-	const toggle = getGroupOrLocalRef('toggle', props) as Ref<boolean>
-	const unselectable = getGroupOrLocalRef(
-		'unselectable',
-		props,
-	) as Ref<boolean>
-	const multiple = computed(() => group?.value.multiple.value ?? false)
+	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
+	const toggle = getGroupOrLocalRef('toggle', props)
+	const unselectable = getGroupOrLocalRef('unselectable', props)
+	const multiple = computed(() => group?.multiple.value ?? false)
 	// merge local and group modifiers
 	const modifiers = computed(() => {
 		let localModifiers = props.modifiers
-		let groupModifiers = group?.value.modifiers.value
+		let groupModifiers = group?.modifiers.value
 
 		const toReturn = new Set<string>()
 		if (localModifiers) {
@@ -109,7 +102,7 @@ export function useGroupProps(
 		return Array.from(toReturn)
 	})
 	const disabled = computed(() =>
-		Boolean(props.disabled || group?.value?.disabled.value),
+		Boolean(props.disabled || group?.disabled.value),
 	)
 
 	return {

package/src/components/VvButtonGroup/VvButtonGroup.vue

@@ -52,8 +52,7 @@
 	})
 
 	// provide
-	useProvideGroupState<ButtonGroupState>({
-		key: INJECTION_KEY_BUTTON_GROUP,
+	useProvideGroupState<ButtonGroupState>(INJECTION_KEY_BUTTON_GROUP, {
 		modelValue,
 		disabled,
 		toggle,

package/src/components/VvCheckbox/index.ts

@@ -42,10 +42,10 @@ export function useGroupProps(
 	const valid = getGroupOrLocalRef('valid', props) as Ref<boolean>
 	const invalid = getGroupOrLocalRef('invalid', props) as Ref<boolean>
 	const readonly = computed(() =>
-		Boolean(props.readonly || group?.value?.readonly.value),
+		Boolean(props.readonly || group?.readonly.value),
 	)
 	const disabled = computed(() =>
-		Boolean(props.disabled || group?.value?.disabled.value),
+		Boolean(props.disabled || group?.disabled.value),
 	)
 
 	return {

package/src/components/VvCheckboxGroup/VvCheckboxGroup.vue

@@ -29,8 +29,7 @@
 	const { disabled, readonly, vertical, valid, invalid, modifiers } =
 		toRefs(props)
 
-	useProvideGroupState<InputGroupState>({
-		key: INJECTION_KEY_CHECK_GROUP,
+	useProvideGroupState<InputGroupState>(INJECTION_KEY_CHECK_GROUP, {
 		modelValue,
 		disabled,
 		readonly,

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)
@@ -147,10 +151,7 @@
 	const dropdownEl = ref()
 
 	// icons
-	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-		icon,
-		iconPosition,
-	)
+	const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
 
 	// dirty
 	const isDirty = computed(() => !isEmpty(props.modelValue))
@@ -168,12 +169,12 @@
 			disabled: disabled.value,
 			loading: isLoading.value,
 			readonly: readonly.value,
-			'icon-before': Boolean(hasIconBefore.value),
-			'icon-after': Boolean(hasIconAfter.value),
+			'icon-before': hasIconBefore.value !== undefined,
+			'icon-after': hasIconAfter.value !== undefined,
 			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,
 		})),
@@ -425,8 +426,8 @@
 					<div class="vv-select__inner">
 						<VvIcon
 							v-if="hasIconBefore"
+							v-bind="hasIconBefore"
 							class="vv-select__icon"
-							v-bind="hasIcon"
 						/>
 						<div
 							ref="inputEl"
@@ -489,8 +490,8 @@
 						</div>
 						<VvIcon
 							v-if="hasIconAfter"
+							v-bind="hasIconAfter"
 							class="vv-select__icon vv-select__icon-after"
-							v-bind="hasIcon"
 						/>
 					</div>
 					<div v-if="$slots.after" class="vv-select__input-after">
@@ -525,6 +526,7 @@
 									}"
 									:key="i"
 									class="vv-dropdown-option"
+									focus-on-hover
 									@click.passive="onInput(item)"
 								>
 									<!-- @slot Slot for option customization -->
@@ -555,6 +557,7 @@
 										propsDefaults.selectedHintLabel,
 								}"
 								class="vv-dropdown-option"
+								focus-on-hover
 								@click.passive="onInput(option)"
 							>
 								<!-- @slot Slot for option customization -->

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/VvDropdown/VvDropdown.vue

@@ -299,9 +299,7 @@
 		})
 	bus.on('click', toggle)
 
-	// provide top dropdown item
 	const { role, modifiers } = toRefs(props)
-	const { itemRole } = useProvideDropdownItem({ role, expanded })
 
 	// styles
 	const bemCssClasses = useModifiers(
@@ -376,6 +374,17 @@
 		})
 	}
 
+	// hover
+	const hovered = useElementHover(floatingEl)
+
+	// provide top dropdown item
+	const { itemRole } = useProvideDropdownItem({
+		role,
+		expanded,
+		focused,
+		hovered,
+	})
+
 	// keyboard
 	onKeyStroke('Escape', (e) => {
 		if (expanded.value) {

package/src/components/VvDropdown/VvDropdownItem.vue

@@ -5,6 +5,9 @@
 </script>
 
 <script setup lang="ts">
+	import { VvDropdownItemProps } from '.'
+
+	const props = defineProps(VvDropdownItemProps)
 	const { role, expanded } = useInjectedDropdownItem()
 	const element = ref(null)
 	useProvideDropdownAction({ expanded })
@@ -14,7 +17,7 @@
 
 	// focus item on hover
 	watch(hovered, (newValue) => {
-		if (newValue) {
+		if (newValue && props.focusOnHover) {
 			focused.value = true
 		}
 	})

package/src/components/VvDropdown/VvDropdownOption.vue

@@ -5,30 +5,11 @@
 </script>
 
 <script setup lang="ts">
+	import { VvDropdownOptionProps } from '.'
 	import VvDropdownItem from './VvDropdownItem.vue'
-	import {
-		DisabledProps,
-		ModifiersProps,
-		SelectedProps,
-		UnselectableProps,
-	} from '../../props'
 
 	// props
-	const props = defineProps({
-		...DisabledProps,
-		...SelectedProps,
-		...UnselectableProps,
-		...ModifiersProps,
-		deselectHintLabel: {
-			type: String,
-		},
-		selectHintLabel: {
-			type: String,
-		},
-		selectedHintLabel: {
-			type: String,
-		},
-	})
+	const props = defineProps(VvDropdownOptionProps)
 
 	// style
 	const { modifiers } = toRefs(props)
@@ -52,6 +33,7 @@
 		if (!props.disabled) {
 			return props.selectHintLabel
 		}
+		return ''
 	})
 </script>
 
@@ -61,6 +43,7 @@
 		:tabindex="disabled ? -1 : 0"
 		:aria-selected="selected"
 		:aria-disabled="disabled"
+		:focus-on-hover="focusOnHover"
 	>
 		<slot />
 		<span class="vv-dropdown-option__hint" :title="hintLabel">

package/src/components/VvDropdown/index.ts

@@ -1,5 +1,12 @@
 import type { PropType } from 'vue'
-import { DropdownProps, IdProps, ModifiersProps } from '../../props'
+import {
+	DropdownProps,
+	IdProps,
+	DisabledProps,
+	ModifiersProps,
+	SelectedProps,
+	UnselectableProps,
+} from '../../props'
 import { DropdownRole } from '../../constants'
 
 export const VvDropdownProps = {
@@ -30,3 +37,30 @@ export const VvDropdownProps = {
 			Object.values(DropdownRole).includes(value),
 	},
 }
+
+export const VvDropdownItemProps = {
+	focusOnHover: {
+		type: Boolean,
+		default: false,
+	},
+}
+
+export const VvDropdownOptionProps = {
+	...DisabledProps,
+	...SelectedProps,
+	...UnselectableProps,
+	...ModifiersProps,
+	deselectHintLabel: {
+		type: String,
+	},
+	selectHintLabel: {
+		type: String,
+	},
+	selectedHintLabel: {
+		type: String,
+	},
+	focusOnHover: {
+		type: Boolean,
+		default: false,
+	},
+}

package/src/components/VvIcon/VvIcon.vue

@@ -6,10 +6,10 @@
 
 <script setup lang="ts">
 	import { Icon, addIcon, iconExists } from '@iconify/vue'
-	import { VvIconProps } from '.'
+	import { type VvIconProps, VvIconPropsDefaults } from '.'
 
 	// props
-	const props = defineProps(VvIconProps)
+	const props = withDefaults(defineProps<VvIconProps>(), VvIconPropsDefaults)
 
 	const hasRotate = computed(() => {
 		if (typeof props.rotate === 'string') {

package/src/components/VvIcon/index.ts

@@ -1,71 +1,56 @@
-import type { PropType } from 'vue'
 import type { IconifyIconOnLoad, IconifyRenderMode } from '@iconify/vue'
 
+export const ACTION_ICONS = {
+	showPassword: 'eye-on',
+	hidePassword: 'eye-off',
+	showDatePicker: 'calendar',
+	showTimePicker: 'time',
+	showColorPicker: 'color',
+	clear: 'close',
+	add: 'add',
+	remove: 'trash',
+	edit: 'edit',
+	download: 'download',
+} as const
+
 export enum IconPrefix {
 	simple = 'simple',
 	normal = 'normal',
 	detailed = 'detailed',
 }
 
-export const VvIconProps = {
-	/**
-	 * Color
-	 */
-	color: String,
-	/**
-	 * Width
-	 */
-	width: {
-		type: [String, Number],
-	},
-	/**
-	 * Height
-	 */
-	height: {
-		type: [String, Number],
-	},
+export type VvIconProps = {
 	/**
 	 * Icon name
 	 * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
 	 * https://docs.iconify.design/api/providers.html#provider-in-icon-name
 	 */
-	name: {
-		type: String,
-		required: true,
-	},
+	name: string
+	color?: string
+	width?: string | number
+	height?: string | number
 	/**
-	 * By default 'vv'
 	 * If custom collection is not added with "addCollection" DS class method, this prop could not be used
 	 * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
 	 */
-	provider: {
-		type: String,
-	},
+	provider?: string
 	/**
+	 * @default 'normal'
 	 * The name of icon set.
 	 * Icon default options prefix: simple | normal | detailed
 	 */
-	prefix: {
-		type: String as PropType<`${IconPrefix}` | string>,
-		default: 'normal',
-	},
+	prefix?: IconPrefix | string
 	/**
 	 * Url remote SVG icon
 	 */
-	src: String,
-	/**
-	 * Horizontal flip
-	 */
-	horizontalFlip: Boolean,
-	/**
-	 * Vertical flip
-	 */
-	verticalFlip: Boolean,
+	src?: string
+	horizontalFlip?: boolean
+	verticalFlip?: boolean
 	/**
 	 * String alternative to "horizontalFlip" and "verticalFlip".
 	 * Example: https://docs.iconify.design/icon-components/vue/transform.html
 	 */
-	flip: String,
+	flip?: string
 	/**
 	 * Icon render mode
 	 * 'style' = 'bg' or 'mask', depending on icon content
@@ -74,30 +59,32 @@ export const VvIconProps = {
 	 * 'svg' = svg
 	 * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
 	 */
-	mode: String as PropType<`${IconifyRenderMode}`>,
+	mode?: IconifyRenderMode
 	/**
 	 * Toggles inline or block mode
 	 * Example https://docs.iconify.design/icon-components/vue/inline.html
 	 */
-	inline: Boolean,
+	inline?: boolean
 	/**
 	 * rotates icon
 	 * Example https://docs.iconify.design/icon-components/vue/transform.html
 	 */
-	rotate: [Number, String],
+	rotate?: number | string
 	/**
 	 * A callback that is called when icon data has been loaded
 	 */
-	onLoad: Function as PropType<IconifyIconOnLoad>,
+	onLoad?: IconifyIconOnLoad
 	/**
 	 * SVG icon string
 	 */
-	svg: String,
+	svg?: string
 	/**
 	 * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
 	 * @values string | string[]
 	 */
-	modifiers: {
-		type: [String, Array] as PropType<string | string[]>,
-	},
+	modifiers?: string | string[]
+}
+
+export const VvIconPropsDefaults = {
+	prefix: IconPrefix.normal,
 }