VBreadcrumbs.mjs 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. import { mergeProps as _mergeProps, Fragment as _Fragment, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
  2. // Styles
  3. import "./VBreadcrumbs.css";
  4. // Components
  5. import { VBreadcrumbsDivider } from "./VBreadcrumbsDivider.mjs";
  6. import { VBreadcrumbsItem } from "./VBreadcrumbsItem.mjs";
  7. import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
  8. import { VIcon } from "../VIcon/index.mjs"; // Composables
  9. import { useBackgroundColor } from "../../composables/color.mjs";
  10. import { makeComponentProps } from "../../composables/component.mjs";
  11. import { provideDefaults } from "../../composables/defaults.mjs";
  12. import { makeDensityProps, useDensity } from "../../composables/density.mjs";
  13. import { IconValue } from "../../composables/icons.mjs";
  14. import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
  15. import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
  16. import { computed, toRef } from 'vue';
  17. import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
  18. export const makeVBreadcrumbsProps = propsFactory({
  19. activeClass: String,
  20. activeColor: String,
  21. bgColor: String,
  22. color: String,
  23. disabled: Boolean,
  24. divider: {
  25. type: String,
  26. default: '/'
  27. },
  28. icon: IconValue,
  29. items: {
  30. type: Array,
  31. default: () => []
  32. },
  33. ...makeComponentProps(),
  34. ...makeDensityProps(),
  35. ...makeRoundedProps(),
  36. ...makeTagProps({
  37. tag: 'ul'
  38. })
  39. }, 'VBreadcrumbs');
  40. export const VBreadcrumbs = genericComponent()({
  41. name: 'VBreadcrumbs',
  42. props: makeVBreadcrumbsProps(),
  43. setup(props, _ref) {
  44. let {
  45. slots
  46. } = _ref;
  47. const {
  48. backgroundColorClasses,
  49. backgroundColorStyles
  50. } = useBackgroundColor(toRef(props, 'bgColor'));
  51. const {
  52. densityClasses
  53. } = useDensity(props);
  54. const {
  55. roundedClasses
  56. } = useRounded(props);
  57. provideDefaults({
  58. VBreadcrumbsDivider: {
  59. divider: toRef(props, 'divider')
  60. },
  61. VBreadcrumbsItem: {
  62. activeClass: toRef(props, 'activeClass'),
  63. activeColor: toRef(props, 'activeColor'),
  64. color: toRef(props, 'color'),
  65. disabled: toRef(props, 'disabled')
  66. }
  67. });
  68. const items = computed(() => props.items.map(item => {
  69. return typeof item === 'string' ? {
  70. item: {
  71. title: item
  72. },
  73. raw: item
  74. } : {
  75. item,
  76. raw: item
  77. };
  78. }));
  79. useRender(() => {
  80. const hasPrepend = !!(slots.prepend || props.icon);
  81. return _createVNode(props.tag, {
  82. "class": ['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value, props.class],
  83. "style": [backgroundColorStyles.value, props.style]
  84. }, {
  85. default: () => [hasPrepend && _createVNode("li", {
  86. "key": "prepend",
  87. "class": "v-breadcrumbs__prepend"
  88. }, [!slots.prepend ? _createVNode(VIcon, {
  89. "key": "prepend-icon",
  90. "start": true,
  91. "icon": props.icon
  92. }, null) : _createVNode(VDefaultsProvider, {
  93. "key": "prepend-defaults",
  94. "disabled": !props.icon,
  95. "defaults": {
  96. VIcon: {
  97. icon: props.icon,
  98. start: true
  99. }
  100. }
  101. }, slots.prepend)]), items.value.map((_ref2, index, array) => {
  102. let {
  103. item,
  104. raw
  105. } = _ref2;
  106. return _createVNode(_Fragment, null, [slots.item?.({
  107. item,
  108. index
  109. }) ?? _createVNode(VBreadcrumbsItem, _mergeProps({
  110. "key": index,
  111. "disabled": index >= array.length - 1
  112. }, typeof item === 'string' ? {
  113. title: item
  114. } : item), {
  115. default: slots.title ? () => slots.title?.({
  116. item,
  117. index
  118. }) : undefined
  119. }), index < array.length - 1 && _createVNode(VBreadcrumbsDivider, null, {
  120. default: slots.divider ? () => slots.divider?.({
  121. item: raw,
  122. index
  123. }) : undefined
  124. })]);
  125. }), slots.default?.()]
  126. });
  127. });
  128. return {};
  129. }
  130. });
  131. //# sourceMappingURL=VBreadcrumbs.mjs.map