@volverjs/ui-vue 0.0.10-beta.8 → 0.0.10-beta.9

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
 		}
 	})
 

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

@@ -15,6 +15,7 @@ import {
 	Side,
 	AnchorTarget,
 	ButtonType,
+	ActionTag,
 } from '@/constants'
 
 export const LinkProps = {
@@ -469,6 +470,13 @@ export const ActionProps = {
 		type: String,
 		default: undefined,
 	},
+	/**
+	 * Default tag for the action
+	 */
+	defaultTag: {
+		type: String,
+		default: ActionTag.button,
+	},
 }
 
 export const NavProps = {