VTabs.mjs 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective, Fragment as _Fragment } from "vue";
  2. // Styles
  3. import "./VTabs.css";
  4. // Components
  5. import { VTab } from "./VTab.mjs";
  6. import { VTabsWindow } from "./VTabsWindow.mjs";
  7. import { VTabsWindowItem } from "./VTabsWindowItem.mjs";
  8. import { makeVSlideGroupProps, VSlideGroup } from "../VSlideGroup/VSlideGroup.mjs"; // Composables
  9. import { useBackgroundColor } from "../../composables/color.mjs";
  10. import { provideDefaults } from "../../composables/defaults.mjs";
  11. import { makeDensityProps, useDensity } from "../../composables/density.mjs";
  12. import { useProxiedModel } from "../../composables/proxiedModel.mjs";
  13. import { useScopeId } from "../../composables/scopeId.mjs";
  14. import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
  15. import { computed, toRef } from 'vue';
  16. import { convertToUnit, genericComponent, isObject, propsFactory, useRender } from "../../util/index.mjs"; // Types
  17. import { VTabsSymbol } from "./shared.mjs";
  18. function parseItems(items) {
  19. if (!items) return [];
  20. return items.map(item => {
  21. if (!isObject(item)) return {
  22. text: item,
  23. value: item
  24. };
  25. return item;
  26. });
  27. }
  28. export const makeVTabsProps = propsFactory({
  29. alignTabs: {
  30. type: String,
  31. default: 'start'
  32. },
  33. color: String,
  34. fixedTabs: Boolean,
  35. items: {
  36. type: Array,
  37. default: () => []
  38. },
  39. stacked: Boolean,
  40. bgColor: String,
  41. grow: Boolean,
  42. height: {
  43. type: [Number, String],
  44. default: undefined
  45. },
  46. hideSlider: Boolean,
  47. sliderColor: String,
  48. ...makeVSlideGroupProps({
  49. mandatory: 'force',
  50. selectedClass: 'v-tab-item--selected'
  51. }),
  52. ...makeDensityProps(),
  53. ...makeTagProps()
  54. }, 'VTabs');
  55. export const VTabs = genericComponent()({
  56. name: 'VTabs',
  57. props: makeVTabsProps(),
  58. emits: {
  59. 'update:modelValue': v => true
  60. },
  61. setup(props, _ref) {
  62. let {
  63. attrs,
  64. slots
  65. } = _ref;
  66. const model = useProxiedModel(props, 'modelValue');
  67. const items = computed(() => parseItems(props.items));
  68. const {
  69. densityClasses
  70. } = useDensity(props);
  71. const {
  72. backgroundColorClasses,
  73. backgroundColorStyles
  74. } = useBackgroundColor(toRef(props, 'bgColor'));
  75. const {
  76. scopeId
  77. } = useScopeId();
  78. provideDefaults({
  79. VTab: {
  80. color: toRef(props, 'color'),
  81. direction: toRef(props, 'direction'),
  82. stacked: toRef(props, 'stacked'),
  83. fixed: toRef(props, 'fixedTabs'),
  84. sliderColor: toRef(props, 'sliderColor'),
  85. hideSlider: toRef(props, 'hideSlider')
  86. }
  87. });
  88. useRender(() => {
  89. const slideGroupProps = VSlideGroup.filterProps(props);
  90. const hasWindow = !!(slots.window || props.items.length > 0);
  91. return _createVNode(_Fragment, null, [_createVNode(VSlideGroup, _mergeProps(slideGroupProps, {
  92. "modelValue": model.value,
  93. "onUpdate:modelValue": $event => model.value = $event,
  94. "class": ['v-tabs', `v-tabs--${props.direction}`, `v-tabs--align-tabs-${props.alignTabs}`, {
  95. 'v-tabs--fixed-tabs': props.fixedTabs,
  96. 'v-tabs--grow': props.grow,
  97. 'v-tabs--stacked': props.stacked
  98. }, densityClasses.value, backgroundColorClasses.value, props.class],
  99. "style": [{
  100. '--v-tabs-height': convertToUnit(props.height)
  101. }, backgroundColorStyles.value, props.style],
  102. "role": "tablist",
  103. "symbol": VTabsSymbol
  104. }, scopeId, attrs), {
  105. default: () => [slots.default?.() ?? items.value.map(item => slots.tab?.({
  106. item
  107. }) ?? _createVNode(VTab, _mergeProps(item, {
  108. "key": item.text,
  109. "value": item.value
  110. }), {
  111. default: slots[`tab.${item.value}`] ? () => slots[`tab.${item.value}`]?.({
  112. item
  113. }) : undefined
  114. }))]
  115. }), hasWindow && _createVNode(VTabsWindow, _mergeProps({
  116. "modelValue": model.value,
  117. "onUpdate:modelValue": $event => model.value = $event,
  118. "key": "tabs-window"
  119. }, scopeId), {
  120. default: () => [items.value.map(item => slots.item?.({
  121. item
  122. }) ?? _createVNode(VTabsWindowItem, {
  123. "value": item.value
  124. }, {
  125. default: () => slots[`item.${item.value}`]?.({
  126. item
  127. })
  128. })), slots.window?.()]
  129. })]);
  130. });
  131. return {};
  132. }
  133. });
  134. //# sourceMappingURL=VTabs.mjs.map