123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective, Fragment as _Fragment } from "vue";
- // Styles
- import "./VTabs.css";
- // Components
- import { VTab } from "./VTab.mjs";
- import { VTabsWindow } from "./VTabsWindow.mjs";
- import { VTabsWindowItem } from "./VTabsWindowItem.mjs";
- import { makeVSlideGroupProps, VSlideGroup } from "../VSlideGroup/VSlideGroup.mjs"; // Composables
- import { useBackgroundColor } from "../../composables/color.mjs";
- import { provideDefaults } from "../../composables/defaults.mjs";
- import { makeDensityProps, useDensity } from "../../composables/density.mjs";
- import { useProxiedModel } from "../../composables/proxiedModel.mjs";
- import { useScopeId } from "../../composables/scopeId.mjs";
- import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
- import { computed, toRef } from 'vue';
- import { convertToUnit, genericComponent, isObject, propsFactory, useRender } from "../../util/index.mjs"; // Types
- import { VTabsSymbol } from "./shared.mjs";
- function parseItems(items) {
- if (!items) return [];
- return items.map(item => {
- if (!isObject(item)) return {
- text: item,
- value: item
- };
- return item;
- });
- }
- export const makeVTabsProps = propsFactory({
- alignTabs: {
- type: String,
- default: 'start'
- },
- color: String,
- fixedTabs: Boolean,
- items: {
- type: Array,
- default: () => []
- },
- stacked: Boolean,
- bgColor: String,
- grow: Boolean,
- height: {
- type: [Number, String],
- default: undefined
- },
- hideSlider: Boolean,
- sliderColor: String,
- ...makeVSlideGroupProps({
- mandatory: 'force',
- selectedClass: 'v-tab-item--selected'
- }),
- ...makeDensityProps(),
- ...makeTagProps()
- }, 'VTabs');
- export const VTabs = genericComponent()({
- name: 'VTabs',
- props: makeVTabsProps(),
- emits: {
- 'update:modelValue': v => true
- },
- setup(props, _ref) {
- let {
- attrs,
- slots
- } = _ref;
- const model = useProxiedModel(props, 'modelValue');
- const items = computed(() => parseItems(props.items));
- const {
- densityClasses
- } = useDensity(props);
- const {
- backgroundColorClasses,
- backgroundColorStyles
- } = useBackgroundColor(toRef(props, 'bgColor'));
- const {
- scopeId
- } = useScopeId();
- provideDefaults({
- VTab: {
- color: toRef(props, 'color'),
- direction: toRef(props, 'direction'),
- stacked: toRef(props, 'stacked'),
- fixed: toRef(props, 'fixedTabs'),
- sliderColor: toRef(props, 'sliderColor'),
- hideSlider: toRef(props, 'hideSlider')
- }
- });
- useRender(() => {
- const slideGroupProps = VSlideGroup.filterProps(props);
- const hasWindow = !!(slots.window || props.items.length > 0);
- return _createVNode(_Fragment, null, [_createVNode(VSlideGroup, _mergeProps(slideGroupProps, {
- "modelValue": model.value,
- "onUpdate:modelValue": $event => model.value = $event,
- "class": ['v-tabs', `v-tabs--${props.direction}`, `v-tabs--align-tabs-${props.alignTabs}`, {
- 'v-tabs--fixed-tabs': props.fixedTabs,
- 'v-tabs--grow': props.grow,
- 'v-tabs--stacked': props.stacked
- }, densityClasses.value, backgroundColorClasses.value, props.class],
- "style": [{
- '--v-tabs-height': convertToUnit(props.height)
- }, backgroundColorStyles.value, props.style],
- "role": "tablist",
- "symbol": VTabsSymbol
- }, scopeId, attrs), {
- default: () => [slots.default?.() ?? items.value.map(item => slots.tab?.({
- item
- }) ?? _createVNode(VTab, _mergeProps(item, {
- "key": item.text,
- "value": item.value
- }), {
- default: slots[`tab.${item.value}`] ? () => slots[`tab.${item.value}`]?.({
- item
- }) : undefined
- }))]
- }), hasWindow && _createVNode(VTabsWindow, _mergeProps({
- "modelValue": model.value,
- "onUpdate:modelValue": $event => model.value = $event,
- "key": "tabs-window"
- }, scopeId), {
- default: () => [items.value.map(item => slots.item?.({
- item
- }) ?? _createVNode(VTabsWindowItem, {
- "value": item.value
- }, {
- default: () => slots[`item.${item.value}`]?.({
- item
- })
- })), slots.window?.()]
- })]);
- });
- return {};
- }
- });
- //# sourceMappingURL=VTabs.mjs.map
|