vuetify
Version:
Vue Material Component Framework
54 lines • 1.78 kB
JavaScript
import { createVNode as _createVNode } from "vue";
// Composables
import { makeRouterProps, useLink } from "../../composables/router.mjs";
import { makeTagProps } from "../../composables/tag.mjs";
import { useTextColor } from "../../composables/color.mjs"; // Utilities
import { computed } from 'vue';
import { genericComponent, useRender } from "../../util/index.mjs";
export const VBreadcrumbsItem = genericComponent()({
name: 'VBreadcrumbsItem',
props: {
active: Boolean,
activeClass: String,
activeColor: String,
color: String,
disabled: Boolean,
title: String,
...makeRouterProps(),
...makeTagProps({
tag: 'li'
})
},
setup(props, _ref) {
let {
slots,
attrs
} = _ref;
const link = useLink(props, attrs);
const isActive = computed(() => props.active || link.isActive?.value);
const color = computed(() => isActive.value ? props.activeColor : props.color);
const {
textColorClasses,
textColorStyles
} = useTextColor(color);
useRender(() => {
const Tag = link.isLink.value ? 'a' : props.tag;
return _createVNode(Tag, {
"class": ['v-breadcrumbs-item', {
'v-breadcrumbs-item--active': isActive.value,
'v-breadcrumbs-item--disabled': props.disabled,
'v-breadcrumbs-item--link': link.isLink.value,
[`${props.activeClass}`]: isActive.value && props.activeClass
}, textColorClasses.value],
"style": [textColorStyles.value],
"href": link.href.value,
"aria-current": isActive.value ? 'page' : undefined,
"onClick": link.navigate
}, {
default: () => [slots.default?.() ?? props.title]
});
});
return {};
}
});
//# sourceMappingURL=VBreadcrumbsItem.mjs.map