routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+702
@@ -0,0 +1,702 @@
|
||||
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 { $ as PREFERS_REDUCED_MOTION, H as omit, I as isObject, K as pick, Q as IN_BROWSER, _ as convertToUnit, a as provideDefaults, l as propsFactory, n as genericComponent, z as keys } from "./defineComponent-DB6xIcDy.js";
|
||||
import { s as animate } from "./transitions-DCQ3sjjZ.js";
|
||||
import { t as makeComponentProps } from "./component-DdiwBe6i.js";
|
||||
import { i as standardEasing } from "./easing-DfcvkbkS.js";
|
||||
import { t as getScrollParent } from "./getScrollParent-DuXs8SPu.js";
|
||||
import { t as useRender } from "./useRender-fVtVsZgv.js";
|
||||
import { r as useTextColor, t as useBackgroundColor } from "./color-B6vuQruj.js";
|
||||
import { i as provideTheme, r as makeThemeProps } from "./theme-Cx5kFg0-.js";
|
||||
import { t as useProxiedModel } from "./proxiedModel-DSlSIQ0y.js";
|
||||
import { i as useRtl, r as useLocale } from "./locale-DDGMqzqb.js";
|
||||
import { t as makeTagProps } from "./tag-C_KkCPzB.js";
|
||||
import { t as MaybeTransition } from "./transition-DqoZ8fA1.js";
|
||||
import { t as useSsrBoot } from "./ssrBoot-CSc1_bcP.js";
|
||||
import { n as useDensity, t as makeDensityProps } from "./density-CpKZ5PhP.js";
|
||||
import { n as makeVBtnProps, t as VBtn } from "./VBtn-BZzD9gwE.js";
|
||||
import { i as useGroupItem, r as useGroup, t as makeGroupItemProps } from "./group-Cm2viEWK.js";
|
||||
import { n as useLazy, t as makeLazyProps } from "./lazy-DhsobH97.js";
|
||||
import { t as useScopeId } from "./scopeId-CyMkmyzM.js";
|
||||
import { t as forwardRefs } from "./forwardRefs-CW3d8km7.js";
|
||||
import { r as makeVSlideGroupProps, t as VSlideGroup } from "./VSlideGroup-TpMGTwfd.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
|
||||
Reference in New Issue
Block a user