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

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

@@ -86,9 +86,7 @@ export const useVvAlert = (
 	const hasTitleId = computed(() => `${hasId.value}-title`)
 
 	// icon
-	const hasIcon = computed(() =>
-		typeof props.icon === 'string' ? { name: props.icon } : props.icon,
-	)
+	const { hasIcon } = useComponentIcon(computed(() => props.icon))
 
 	// props
 	const hasClass = useModifiers(

package/src/components/VvAlertGroup/index.ts

@@ -1,10 +1,11 @@
 import { ModifiersProps } from '@/props'
 import type { ExtractPropTypes } from 'vue'
+import type { VvIconProps } from '../VvIcon'
 
 export type AlertItem = {
 	id: string | number
 	title?: string
-	icon?: string | Record<string, unknown>
+	icon?: string | VvIconProps
 	content?: string
 	footer?: string
 	modifiers?: string | string[]

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

@@ -74,9 +74,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
@@ -146,9 +144,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

@@ -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
 	 */

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,
 		})),
@@ -266,12 +267,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 +296,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
 			}
 		}
@@ -418,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"
@@ -482,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">

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/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,4 +1,3 @@
-import type { PropType } from 'vue'
 import type { IconifyIconOnLoad, IconifyRenderMode } from '@iconify/vue'
 
 export enum IconPrefix {
@@ -7,65 +6,38 @@ export enum IconPrefix {
 	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 +46,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,
 }