VBreadcrumbsItem.mjs 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
  2. // Composables
  3. import { useTextColor } from "../../composables/color.mjs";
  4. import { makeComponentProps } from "../../composables/component.mjs";
  5. import { makeRouterProps, useLink } from "../../composables/router.mjs";
  6. import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
  7. import { computed } from 'vue';
  8. import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
  9. export const makeVBreadcrumbsItemProps = propsFactory({
  10. active: Boolean,
  11. activeClass: String,
  12. activeColor: String,
  13. color: String,
  14. disabled: Boolean,
  15. title: String,
  16. ...makeComponentProps(),
  17. ...makeRouterProps(),
  18. ...makeTagProps({
  19. tag: 'li'
  20. })
  21. }, 'VBreadcrumbsItem');
  22. export const VBreadcrumbsItem = genericComponent()({
  23. name: 'VBreadcrumbsItem',
  24. props: makeVBreadcrumbsItemProps(),
  25. setup(props, _ref) {
  26. let {
  27. slots,
  28. attrs
  29. } = _ref;
  30. const link = useLink(props, attrs);
  31. const isActive = computed(() => props.active || link.isActive?.value);
  32. const color = computed(() => isActive.value ? props.activeColor : props.color);
  33. const {
  34. textColorClasses,
  35. textColorStyles
  36. } = useTextColor(color);
  37. useRender(() => {
  38. return _createVNode(props.tag, {
  39. "class": ['v-breadcrumbs-item', {
  40. 'v-breadcrumbs-item--active': isActive.value,
  41. 'v-breadcrumbs-item--disabled': props.disabled,
  42. [`${props.activeClass}`]: isActive.value && props.activeClass
  43. }, textColorClasses.value, props.class],
  44. "style": [textColorStyles.value, props.style],
  45. "aria-current": isActive.value ? 'page' : undefined
  46. }, {
  47. default: () => [!link.isLink.value ? slots.default?.() ?? props.title : _createVNode("a", _mergeProps({
  48. "class": "v-breadcrumbs-item--link",
  49. "onClick": link.navigate
  50. }, link.linkProps), [slots.default?.() ?? props.title])]
  51. });
  52. });
  53. return {};
  54. }
  55. });
  56. //# sourceMappingURL=VBreadcrumbsItem.mjs.map