702 lines
24 KiB
JavaScript
702 lines
24 KiB
JavaScript
import { C as vShow, Cn as withDirectives, Dt as mergeProps, Kn as ref, M as Fragment, Ot as nextTick, Qn as toRef, U as computed, Ut as provide, W as createBaseVNode, Yn as shallowRef, ar as normalizeClass, et as createVNode, gn as watch, sr as normalizeStyle, xt as inject } from "./vue.runtime.esm-bundler-BvoXUmaf.js";
|
|
import { B as isObject, W as keys, Z as pick, it as PREFERS_REDUCED_MOTION, o as provideDefaults, q as omit, r as genericComponent, rt as IN_BROWSER, u as propsFactory, v as convertToUnit } from "./defineComponent-D5UWd5Vb.js";
|
|
import { t as animate } from "./animation-gSo9lwa6.js";
|
|
import { t as makeComponentProps } from "./component-W6F5nwNC.js";
|
|
import { i as standardEasing } from "./easing-DfcvkbkS.js";
|
|
import { t as getScrollParent } from "./getScrollParent-DuXs8SPu.js";
|
|
import { t as useRender } from "./useRender-DB_YiTtB.js";
|
|
import { r as useTextColor, t as useBackgroundColor } from "./color-B0NTWdor.js";
|
|
import { t as makeTagProps } from "./tag-CIFqtlp2.js";
|
|
import { i as provideTheme, r as makeThemeProps } from "./theme-C1b955Ym.js";
|
|
import { t as useProxiedModel } from "./proxiedModel-BOZtsMxA.js";
|
|
import { i as useRtl, r as useLocale } from "./locale-DTRSr4yu.js";
|
|
import { t as MaybeTransition } from "./transition-BieT_XBo.js";
|
|
import { n as useDensity, t as makeDensityProps } from "./density-Dey2iIaF.js";
|
|
import { n as useLazy, t as makeLazyProps } from "./lazy-CSlNPYYk.js";
|
|
import { t as useScopeId } from "./scopeId-BbFYJclW.js";
|
|
import { t as forwardRefs } from "./forwardRefs-C50LZ3ti.js";
|
|
import { t as useSsrBoot } from "./ssrBoot-Dt2Wz9ZC.js";
|
|
import { i as useGroupItem, r as useGroup, t as makeGroupItemProps } from "./group-sYL2sZpA.js";
|
|
import { n as makeVBtnProps, t as VBtn } from "./VBtn-Bm4dgaEe.js";
|
|
import { r as makeVSlideGroupProps, t as VSlideGroup } from "./VSlideGroup-CVNSOV5n.js";
|
|
import "/Users/thackmaster/Development/routie2/frontend/node_modules/vuetify/lib/components/VTabs/VTab.css";
|
|
import "/Users/thackmaster/Development/routie2/frontend/node_modules/vuetify/lib/components/VTabs/VTabs.css";
|
|
import "/Users/thackmaster/Development/routie2/frontend/node_modules/vuetify/lib/components/VWindow/VWindow.css";
|
|
//#region node_modules/vuetify/lib/components/VTabs/shared.js
|
|
var VTabsSymbol = Symbol.for("vuetify:v-tabs");
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/VTabs/VTab.js
|
|
var makeVTabProps = propsFactory({
|
|
fixed: Boolean,
|
|
sliderColor: String,
|
|
sliderTransition: String,
|
|
sliderTransitionDuration: [String, Number],
|
|
hideSlider: Boolean,
|
|
inset: Boolean,
|
|
direction: {
|
|
type: String,
|
|
default: "horizontal"
|
|
},
|
|
...omit(makeVBtnProps({
|
|
selectedClass: "v-tab--selected",
|
|
variant: "text"
|
|
}), [
|
|
"active",
|
|
"block",
|
|
"flat",
|
|
"location",
|
|
"position",
|
|
"symbol"
|
|
])
|
|
}, "VTab");
|
|
var VTab = genericComponent()({
|
|
name: "VTab",
|
|
props: makeVTabProps(),
|
|
setup(props, { slots, attrs }) {
|
|
const { textColorClasses: sliderColorClasses, textColorStyles: sliderColorStyles } = useTextColor(() => props.sliderColor);
|
|
const { backgroundColorClasses: insetColorClasses, backgroundColorStyles: insetColorStyles } = useBackgroundColor(() => props.sliderColor);
|
|
const rootEl = ref();
|
|
const sliderEl = ref();
|
|
const isHorizontal = computed(() => props.direction === "horizontal");
|
|
const isSelected = computed(() => rootEl.value?.group?.isSelected.value ?? false);
|
|
function fade(nextEl, prevEl) {
|
|
return { opacity: [0, 1] };
|
|
}
|
|
function grow(nextEl, prevEl) {
|
|
return props.direction === "vertical" ? { transform: ["scaleY(0)", "scaleY(1)"] } : { transform: ["scaleX(0)", "scaleX(1)"] };
|
|
}
|
|
function shift(nextEl, prevEl) {
|
|
const prevBox = prevEl.getBoundingClientRect();
|
|
const nextBox = nextEl.getBoundingClientRect();
|
|
const xy = isHorizontal.value ? "x" : "y";
|
|
const XY = isHorizontal.value ? "X" : "Y";
|
|
const rightBottom = isHorizontal.value ? "right" : "bottom";
|
|
const widthHeight = isHorizontal.value ? "width" : "height";
|
|
const delta = prevBox[xy] > nextBox[xy] ? prevBox[rightBottom] - nextBox[rightBottom] : prevBox[xy] - nextBox[xy];
|
|
const origin = Math.sign(delta) > 0 ? isHorizontal.value ? "right" : "bottom" : Math.sign(delta) < 0 ? isHorizontal.value ? "left" : "top" : "center";
|
|
const scale = (Math.abs(delta) + (Math.sign(delta) < 0 ? prevBox[widthHeight] : nextBox[widthHeight])) / Math.max(prevBox[widthHeight], nextBox[widthHeight]) || 0;
|
|
const initialScale = prevBox[widthHeight] / nextBox[widthHeight] || 0;
|
|
const sigma = 1.5;
|
|
return {
|
|
transform: [
|
|
`translate${XY}(${delta}px) scale${XY}(${initialScale})`,
|
|
`translate${XY}(${delta / sigma}px) scale${XY}(${(scale - 1) / sigma + 1})`,
|
|
"none"
|
|
],
|
|
transformOrigin: Array(3).fill(origin)
|
|
};
|
|
}
|
|
function updateSlider({ value }) {
|
|
if (value) {
|
|
const prevEl = rootEl.value?.$el.parentElement?.querySelector(".v-tab--selected .v-tab__slider");
|
|
const nextEl = sliderEl.value;
|
|
if (!prevEl || !nextEl) return;
|
|
const color = getComputedStyle(prevEl).backgroundColor;
|
|
const keyframes = {
|
|
fade,
|
|
grow,
|
|
shift
|
|
}[props.sliderTransition ?? "shift"] ?? shift;
|
|
const duration = Number(props.sliderTransitionDuration) || ({
|
|
fade: 400,
|
|
grow: 350,
|
|
shift: 225
|
|
}[props.sliderTransition ?? "shift"] ?? 225);
|
|
animate(nextEl, {
|
|
backgroundColor: [color, color],
|
|
...keyframes(nextEl, prevEl)
|
|
}, {
|
|
duration,
|
|
easing: standardEasing
|
|
});
|
|
}
|
|
}
|
|
useRender(() => {
|
|
const btnProps = VBtn.filterProps(props);
|
|
return createVNode(VBtn, mergeProps({
|
|
"symbol": VTabsSymbol,
|
|
"ref": rootEl,
|
|
"class": [
|
|
"v-tab",
|
|
props.class,
|
|
isSelected.value && props.inset ? insetColorClasses.value : []
|
|
],
|
|
"style": [
|
|
props.style,
|
|
isSelected.value && props.inset ? insetColorStyles.value : [],
|
|
{ backgroundColor: isSelected.value && props.inset ? "transparent !important" : void 0 }
|
|
],
|
|
"tabindex": isSelected.value ? 0 : -1,
|
|
"role": "tab",
|
|
"aria-selected": String(isSelected.value),
|
|
"active": false
|
|
}, btnProps, attrs, {
|
|
"block": props.fixed,
|
|
"maxWidth": props.fixed ? 300 : void 0,
|
|
"onGroup:selected": updateSlider
|
|
}), {
|
|
...slots,
|
|
default: () => createBaseVNode(Fragment, null, [slots.default?.() ?? props.text, !props.hideSlider && createBaseVNode("div", {
|
|
"ref": sliderEl,
|
|
"class": normalizeClass(["v-tab__slider", props.inset ? insetColorClasses.value : sliderColorClasses.value]),
|
|
"style": normalizeStyle([sliderColorStyles.value, props.inset ? insetColorStyles.value : sliderColorClasses.value])
|
|
}, null)])
|
|
});
|
|
});
|
|
return forwardRefs({}, rootEl);
|
|
}
|
|
});
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/directives/touch/index.js
|
|
var handleGesture = (wrapper) => {
|
|
const { touchstartX, touchendX, touchstartY, touchendY } = wrapper;
|
|
const dirRatio = .5;
|
|
const minDistance = 16;
|
|
wrapper.offsetX = touchendX - touchstartX;
|
|
wrapper.offsetY = touchendY - touchstartY;
|
|
if (Math.abs(wrapper.offsetY) < dirRatio * Math.abs(wrapper.offsetX)) {
|
|
wrapper.left && touchendX < touchstartX - minDistance && wrapper.left(wrapper);
|
|
wrapper.right && touchendX > touchstartX + minDistance && wrapper.right(wrapper);
|
|
}
|
|
if (Math.abs(wrapper.offsetX) < dirRatio * Math.abs(wrapper.offsetY)) {
|
|
wrapper.up && touchendY < touchstartY - minDistance && wrapper.up(wrapper);
|
|
wrapper.down && touchendY > touchstartY + minDistance && wrapper.down(wrapper);
|
|
}
|
|
};
|
|
function touchstart(event, wrapper) {
|
|
const touch = event.changedTouches[0];
|
|
wrapper.touchstartX = touch.clientX;
|
|
wrapper.touchstartY = touch.clientY;
|
|
wrapper.start?.({
|
|
originalEvent: event,
|
|
...wrapper
|
|
});
|
|
}
|
|
function touchend(event, wrapper) {
|
|
const touch = event.changedTouches[0];
|
|
wrapper.touchendX = touch.clientX;
|
|
wrapper.touchendY = touch.clientY;
|
|
wrapper.end?.({
|
|
originalEvent: event,
|
|
...wrapper
|
|
});
|
|
handleGesture(wrapper);
|
|
}
|
|
function touchmove(event, wrapper) {
|
|
const touch = event.changedTouches[0];
|
|
wrapper.touchmoveX = touch.clientX;
|
|
wrapper.touchmoveY = touch.clientY;
|
|
wrapper.move?.({
|
|
originalEvent: event,
|
|
...wrapper
|
|
});
|
|
}
|
|
function createHandlers(value = {}) {
|
|
const wrapper = {
|
|
touchstartX: 0,
|
|
touchstartY: 0,
|
|
touchendX: 0,
|
|
touchendY: 0,
|
|
touchmoveX: 0,
|
|
touchmoveY: 0,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
left: value.left,
|
|
right: value.right,
|
|
up: value.up,
|
|
down: value.down,
|
|
start: value.start,
|
|
move: value.move,
|
|
end: value.end
|
|
};
|
|
return {
|
|
touchstart: (e) => touchstart(e, wrapper),
|
|
touchend: (e) => touchend(e, wrapper),
|
|
touchmove: (e) => touchmove(e, wrapper)
|
|
};
|
|
}
|
|
function mounted(el, binding) {
|
|
const value = binding.value;
|
|
const target = value?.parent ? el.parentElement : el;
|
|
const options = value?.options ?? { passive: true };
|
|
const uid = binding.instance?.$.uid;
|
|
if (!target || uid === void 0) return;
|
|
const handlers = createHandlers(binding.value);
|
|
target._touchHandlers = target._touchHandlers ?? Object.create(null);
|
|
target._touchHandlers[uid] = handlers;
|
|
keys(handlers).forEach((eventName) => {
|
|
target.addEventListener(eventName, handlers[eventName], options);
|
|
});
|
|
}
|
|
function unmounted(el, binding) {
|
|
const target = binding.value?.parent ? el.parentElement : el;
|
|
const uid = binding.instance?.$.uid;
|
|
if (!target?._touchHandlers || uid === void 0) return;
|
|
const handlers = target._touchHandlers[uid];
|
|
keys(handlers).forEach((eventName) => {
|
|
target.removeEventListener(eventName, handlers[eventName]);
|
|
});
|
|
delete target._touchHandlers[uid];
|
|
}
|
|
var Touch = {
|
|
mounted,
|
|
unmounted
|
|
};
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/VWindow/VWindow.js
|
|
var VWindowSymbol = Symbol.for("vuetify:v-window");
|
|
var VWindowGroupSymbol = Symbol.for("vuetify:v-window-group");
|
|
var makeVWindowProps = propsFactory({
|
|
continuous: Boolean,
|
|
nextIcon: {
|
|
type: [
|
|
Boolean,
|
|
String,
|
|
Function,
|
|
Object
|
|
],
|
|
default: "$next"
|
|
},
|
|
prevIcon: {
|
|
type: [
|
|
Boolean,
|
|
String,
|
|
Function,
|
|
Object
|
|
],
|
|
default: "$prev"
|
|
},
|
|
reverse: Boolean,
|
|
showArrows: {
|
|
type: [Boolean, String],
|
|
validator: (v) => typeof v === "boolean" || v === "hover"
|
|
},
|
|
verticalArrows: [Boolean, String],
|
|
touch: {
|
|
type: [Object, Boolean],
|
|
default: void 0
|
|
},
|
|
direction: {
|
|
type: String,
|
|
default: "horizontal"
|
|
},
|
|
modelValue: null,
|
|
disabled: Boolean,
|
|
selectedClass: {
|
|
type: String,
|
|
default: "v-window-item--active"
|
|
},
|
|
mandatory: {
|
|
type: [Boolean, String],
|
|
default: "force"
|
|
},
|
|
crossfade: Boolean,
|
|
transitionDuration: Number,
|
|
...makeComponentProps(),
|
|
...makeTagProps(),
|
|
...makeThemeProps()
|
|
}, "VWindow");
|
|
var VWindow = genericComponent()({
|
|
name: "VWindow",
|
|
directives: { vTouch: Touch },
|
|
props: makeVWindowProps(),
|
|
emits: { "update:modelValue": (value) => true },
|
|
setup(props, { slots }) {
|
|
const { themeClasses } = provideTheme(props);
|
|
const { isRtl } = useRtl();
|
|
const { t } = useLocale();
|
|
const group = useGroup(props, VWindowGroupSymbol);
|
|
const rootRef = ref();
|
|
const isRtlReverse = computed(() => isRtl.value ? !props.reverse : props.reverse);
|
|
const isReversed = shallowRef(false);
|
|
const transition = computed(() => {
|
|
if (props.crossfade) return "v-window-crossfade-transition";
|
|
return `v-window-${props.direction === "vertical" ? "y" : "x"}${(isRtlReverse.value ? !isReversed.value : isReversed.value) ? "-reverse" : ""}-transition`;
|
|
});
|
|
const transitionCount = shallowRef(0);
|
|
const transitionHeight = ref(void 0);
|
|
const activeIndex = computed(() => {
|
|
return group.items.value.findIndex((item) => group.selected.value.includes(item.id));
|
|
});
|
|
watch(activeIndex, (newVal, oldVal) => {
|
|
let scrollableParent;
|
|
const savedScrollPosition = {
|
|
left: 0,
|
|
top: 0
|
|
};
|
|
if (IN_BROWSER && oldVal >= 0) {
|
|
scrollableParent = getScrollParent(rootRef.value);
|
|
savedScrollPosition.left = scrollableParent?.scrollLeft;
|
|
savedScrollPosition.top = scrollableParent?.scrollTop;
|
|
}
|
|
const itemsLength = group.items.value.length;
|
|
const lastIndex = itemsLength - 1;
|
|
if (itemsLength <= 2) isReversed.value = newVal < oldVal;
|
|
else if (newVal === lastIndex && oldVal === 0) isReversed.value = false;
|
|
else if (newVal === 0 && oldVal === lastIndex) isReversed.value = true;
|
|
else isReversed.value = newVal < oldVal;
|
|
nextTick(() => {
|
|
if (!IN_BROWSER || !scrollableParent) return;
|
|
if (scrollableParent.scrollTop !== savedScrollPosition.top) scrollableParent.scrollTo({
|
|
...savedScrollPosition,
|
|
behavior: "instant"
|
|
});
|
|
requestAnimationFrame(() => {
|
|
if (!scrollableParent) return;
|
|
if (scrollableParent.scrollTop !== savedScrollPosition.top) scrollableParent.scrollTo({
|
|
...savedScrollPosition,
|
|
behavior: "instant"
|
|
});
|
|
});
|
|
});
|
|
}, { flush: "sync" });
|
|
provide(VWindowSymbol, {
|
|
transition,
|
|
isReversed,
|
|
transitionCount,
|
|
transitionHeight,
|
|
rootRef
|
|
});
|
|
const canMoveBack = toRef(() => props.continuous || activeIndex.value !== 0);
|
|
const canMoveForward = toRef(() => props.continuous || activeIndex.value !== group.items.value.length - 1);
|
|
function prev() {
|
|
canMoveBack.value && group.prev();
|
|
}
|
|
function next() {
|
|
canMoveForward.value && group.next();
|
|
}
|
|
const arrows = computed(() => {
|
|
const arrows = [];
|
|
const prevProps = {
|
|
icon: isRtl.value ? props.nextIcon : props.prevIcon,
|
|
class: `v-window__${isRtlReverse.value ? "right" : "left"}`,
|
|
onClick: group.prev,
|
|
"aria-label": t("$vuetify.carousel.prev")
|
|
};
|
|
arrows.push(canMoveBack.value ? slots.prev ? slots.prev({ props: prevProps }) : createVNode(VBtn, prevProps, null) : createBaseVNode("div", null, null));
|
|
const nextProps = {
|
|
icon: isRtl.value ? props.prevIcon : props.nextIcon,
|
|
class: `v-window__${isRtlReverse.value ? "left" : "right"}`,
|
|
onClick: group.next,
|
|
"aria-label": t("$vuetify.carousel.next")
|
|
};
|
|
arrows.push(canMoveForward.value ? slots.next ? slots.next({ props: nextProps }) : createVNode(VBtn, nextProps, null) : createBaseVNode("div", null, null));
|
|
return arrows;
|
|
});
|
|
const touchOptions = computed(() => {
|
|
if (props.touch === false) return props.touch;
|
|
return {
|
|
left: () => {
|
|
isRtlReverse.value ? prev() : next();
|
|
},
|
|
right: () => {
|
|
isRtlReverse.value ? next() : prev();
|
|
},
|
|
start: ({ originalEvent }) => {
|
|
originalEvent.stopPropagation();
|
|
},
|
|
...props.touch === true ? {} : props.touch
|
|
};
|
|
});
|
|
function onKeyDown(e) {
|
|
if (props.direction === "horizontal" && e.key === "ArrowLeft" || props.direction === "vertical" && e.key === "ArrowUp") {
|
|
e.preventDefault();
|
|
prev();
|
|
nextTick(() => {
|
|
canMoveBack.value ? focusArrow(0) : focusArrow(1);
|
|
});
|
|
}
|
|
if (props.direction === "horizontal" && e.key === "ArrowRight" || props.direction === "vertical" && e.key === "ArrowDown") {
|
|
e.preventDefault();
|
|
next();
|
|
nextTick(() => {
|
|
canMoveForward.value ? focusArrow(1) : focusArrow(0);
|
|
});
|
|
}
|
|
}
|
|
function focusArrow(index) {
|
|
const arrow = arrows.value[index];
|
|
if (!arrow) return;
|
|
(Array.isArray(arrow) ? arrow[0] : arrow).el?.focus();
|
|
}
|
|
useRender(() => withDirectives(createVNode(props.tag, {
|
|
"ref": rootRef,
|
|
"class": normalizeClass([
|
|
"v-window",
|
|
{
|
|
"v-window--show-arrows-on-hover": props.showArrows === "hover",
|
|
"v-window--vertical-arrows": !!props.verticalArrows,
|
|
"v-window--crossfade": !!props.crossfade
|
|
},
|
|
themeClasses.value,
|
|
props.class
|
|
]),
|
|
"style": normalizeStyle([props.style, { "--v-window-transition-duration": !PREFERS_REDUCED_MOTION() ? convertToUnit(props.transitionDuration, "ms") : null }])
|
|
}, { default: () => [createBaseVNode("div", {
|
|
"class": "v-window__container",
|
|
"style": { height: transitionHeight.value }
|
|
}, [slots.default?.({ group }), props.showArrows !== false && createBaseVNode("div", {
|
|
"class": normalizeClass([
|
|
"v-window__controls",
|
|
{ "v-window__controls--left": props.verticalArrows === "left" || props.verticalArrows === true },
|
|
{ "v-window__controls--right": props.verticalArrows === "right" }
|
|
]),
|
|
"onKeydown": onKeyDown
|
|
}, [arrows.value])]), slots.additional?.({ group })] }), [[Touch, touchOptions.value]]));
|
|
return { group };
|
|
}
|
|
});
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/VTabs/VTabsWindow.js
|
|
var makeVTabsWindowProps = propsFactory({ ...omit(makeVWindowProps(), [
|
|
"continuous",
|
|
"nextIcon",
|
|
"prevIcon",
|
|
"showArrows",
|
|
"touch",
|
|
"mandatory"
|
|
]) }, "VTabsWindow");
|
|
var VTabsWindow = genericComponent()({
|
|
name: "VTabsWindow",
|
|
props: makeVTabsWindowProps(),
|
|
emits: { "update:modelValue": (v) => true },
|
|
setup(props, { slots }) {
|
|
const group = inject(VTabsSymbol, null);
|
|
const _model = useProxiedModel(props, "modelValue");
|
|
const model = computed({
|
|
get() {
|
|
if (_model.value != null || !group) return _model.value;
|
|
return group.items.value.find((item) => group.selected.value.includes(item.id))?.value;
|
|
},
|
|
set(val) {
|
|
_model.value = val;
|
|
}
|
|
});
|
|
useRender(() => {
|
|
return createVNode(VWindow, mergeProps({ "_as": "VTabsWindow" }, VWindow.filterProps(props), {
|
|
"modelValue": model.value,
|
|
"onUpdate:modelValue": ($event) => model.value = $event,
|
|
"class": ["v-tabs-window", props.class],
|
|
"style": props.style,
|
|
"mandatory": false,
|
|
"touch": false
|
|
}), slots);
|
|
});
|
|
return {};
|
|
}
|
|
});
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/VWindow/VWindowItem.js
|
|
var makeVWindowItemProps = propsFactory({
|
|
reverseTransition: {
|
|
type: [Boolean, String],
|
|
default: void 0
|
|
},
|
|
transition: {
|
|
type: [Boolean, String],
|
|
default: void 0
|
|
},
|
|
...makeComponentProps(),
|
|
...makeGroupItemProps(),
|
|
...makeLazyProps()
|
|
}, "VWindowItem");
|
|
var VWindowItem = genericComponent()({
|
|
name: "VWindowItem",
|
|
directives: { vTouch: Touch },
|
|
props: makeVWindowItemProps(),
|
|
emits: { "group:selected": (val) => true },
|
|
setup(props, { slots }) {
|
|
const window = inject(VWindowSymbol);
|
|
const groupItem = useGroupItem(props, VWindowGroupSymbol);
|
|
const { isBooted } = useSsrBoot();
|
|
if (!window || !groupItem) throw new Error("[Vuetify] VWindowItem must be used inside VWindow");
|
|
const isTransitioning = shallowRef(false);
|
|
const hasTransition = computed(() => isBooted.value && (window.isReversed.value ? props.reverseTransition !== false : props.transition !== false));
|
|
function onAfterTransition() {
|
|
if (!isTransitioning.value || !window) return;
|
|
isTransitioning.value = false;
|
|
if (window.transitionCount.value > 0) {
|
|
window.transitionCount.value -= 1;
|
|
if (window.transitionCount.value === 0) window.transitionHeight.value = void 0;
|
|
}
|
|
}
|
|
function onBeforeTransition() {
|
|
if (isTransitioning.value || !window) return;
|
|
isTransitioning.value = true;
|
|
if (window.transitionCount.value === 0) window.transitionHeight.value = convertToUnit(window.rootRef.value?.clientHeight);
|
|
window.transitionCount.value += 1;
|
|
}
|
|
function onTransitionCancelled() {
|
|
onAfterTransition();
|
|
}
|
|
function onEnterTransition(el) {
|
|
if (!isTransitioning.value) return;
|
|
nextTick(() => {
|
|
if (!hasTransition.value || !isTransitioning.value || !window) return;
|
|
window.transitionHeight.value = convertToUnit(el.clientHeight);
|
|
});
|
|
}
|
|
const transition = computed(() => {
|
|
const name = window.isReversed.value ? props.reverseTransition : props.transition;
|
|
return !hasTransition.value ? false : {
|
|
name: typeof name !== "string" ? window.transition.value : name,
|
|
onBeforeEnter: onBeforeTransition,
|
|
onAfterEnter: onAfterTransition,
|
|
onEnterCancelled: onTransitionCancelled,
|
|
onBeforeLeave: onBeforeTransition,
|
|
onAfterLeave: onAfterTransition,
|
|
onLeaveCancelled: onTransitionCancelled,
|
|
onEnter: onEnterTransition
|
|
};
|
|
});
|
|
const { hasContent } = useLazy(props, groupItem.isSelected);
|
|
useRender(() => createVNode(MaybeTransition, {
|
|
"transition": transition.value,
|
|
"disabled": !isBooted.value
|
|
}, { default: () => [withDirectives(createBaseVNode("div", {
|
|
"class": normalizeClass([
|
|
"v-window-item",
|
|
groupItem.selectedClass.value,
|
|
props.class
|
|
]),
|
|
"style": normalizeStyle(props.style)
|
|
}, [hasContent.value && slots.default?.()]), [[vShow, groupItem.isSelected.value]])] }));
|
|
return { groupItem };
|
|
}
|
|
});
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/VTabs/VTabsWindowItem.js
|
|
var makeVTabsWindowItemProps = propsFactory({ ...makeVWindowItemProps() }, "VTabsWindowItem");
|
|
var VTabsWindowItem = genericComponent()({
|
|
name: "VTabsWindowItem",
|
|
props: makeVTabsWindowItemProps(),
|
|
setup(props, { slots }) {
|
|
useRender(() => {
|
|
return createVNode(VWindowItem, mergeProps({ "_as": "VTabsWindowItem" }, VWindowItem.filterProps(props), {
|
|
"class": ["v-tabs-window-item", props.class],
|
|
"style": props.style
|
|
}), slots);
|
|
});
|
|
return {};
|
|
}
|
|
});
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/VTabs/VTabs.js
|
|
function parseItems(items) {
|
|
if (!items) return [];
|
|
return items.map((item) => {
|
|
if (!isObject(item)) return {
|
|
text: item,
|
|
value: item
|
|
};
|
|
return item;
|
|
});
|
|
}
|
|
var 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: void 0
|
|
},
|
|
hideSlider: Boolean,
|
|
inset: Boolean,
|
|
insetPadding: [String, Number],
|
|
insetRadius: [String, Number],
|
|
sliderColor: String,
|
|
...pick(makeVTabProps(), [
|
|
"spaced",
|
|
"sliderTransition",
|
|
"sliderTransitionDuration"
|
|
]),
|
|
...makeVSlideGroupProps({
|
|
mandatory: "force",
|
|
selectedClass: "v-tab-item--selected"
|
|
}),
|
|
...makeDensityProps(),
|
|
...makeTagProps()
|
|
}, "VTabs");
|
|
var VTabs = genericComponent()({
|
|
name: "VTabs",
|
|
props: makeVTabsProps(),
|
|
emits: { "update:modelValue": (v) => true },
|
|
setup(props, { attrs, slots }) {
|
|
const model = useProxiedModel(props, "modelValue");
|
|
const items = computed(() => parseItems(props.items));
|
|
const { densityClasses } = useDensity(props);
|
|
const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.bgColor);
|
|
const { scopeId } = useScopeId();
|
|
provideDefaults({ VTab: {
|
|
color: toRef(props, "color"),
|
|
direction: toRef(props, "direction"),
|
|
stacked: toRef(props, "stacked"),
|
|
fixed: toRef(props, "fixedTabs"),
|
|
inset: toRef(props, "inset"),
|
|
sliderColor: toRef(props, "sliderColor"),
|
|
sliderTransition: toRef(props, "sliderTransition"),
|
|
sliderTransitionDuration: toRef(props, "sliderTransitionDuration"),
|
|
hideSlider: toRef(props, "hideSlider")
|
|
} });
|
|
useRender(() => {
|
|
const slideGroupProps = VSlideGroup.filterProps(props);
|
|
const hasWindow = !!(slots.window || props.items.length > 0);
|
|
return createBaseVNode(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--inset": props.inset,
|
|
"v-tabs--stacked": props.stacked
|
|
},
|
|
densityClasses.value,
|
|
backgroundColorClasses.value,
|
|
props.class
|
|
],
|
|
"style": [
|
|
{
|
|
"--v-tabs-height": convertToUnit(props.height),
|
|
"--v-tabs-inset-padding": props.inset ? convertToUnit(props.insetPadding) : void 0,
|
|
"--v-tabs-inset-radius": props.inset ? convertToUnit(props.insetRadius) : void 0
|
|
},
|
|
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,
|
|
"spaced": props.spaced
|
|
}), { default: slots[`tab.${item.value}`] ? () => slots[`tab.${item.value}`]?.({ item }) : void 0 }))),
|
|
prev: slots.prev,
|
|
next: slots.next
|
|
}), 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 {};
|
|
}
|
|
});
|
|
//#endregion
|
|
export { VTab, VTabs, VTabsWindow, VTabsWindowItem };
|
|
|
|
//# sourceMappingURL=vuetify_components_VTabs.js.map
|