320 lines
12 KiB
JavaScript
320 lines
12 KiB
JavaScript
import { U as computed, W as createBaseVNode, Yn as shallowRef, ar as normalizeClass, et as createVNode, gn as watch, sr as normalizeStyle } from "./vue.runtime.esm-bundler-BvoXUmaf.js";
|
|
import { O as focusableChildren, Q as IN_BROWSER, l as propsFactory, n as genericComponent } from "./defineComponent-DB6xIcDy.js";
|
|
import { r as VFadeTransition } from "./transitions-DCQ3sjjZ.js";
|
|
import { t as makeComponentProps } from "./component-DdiwBe6i.js";
|
|
import { t as useRender } from "./useRender-fVtVsZgv.js";
|
|
import { n as IconValue } from "./icons-k2ZLE_i8.js";
|
|
import { i as useRtl } from "./locale-DDGMqzqb.js";
|
|
import { a as useDisplay, i as makeDisplayProps } from "./display-DKaCj-_K.js";
|
|
import { r as useGoTo } from "./goto-Bn-PzNUr.js";
|
|
import { t as useResizeObserver } from "./resizeObserver-C12jWpYk.js";
|
|
import { t as makeTagProps } from "./tag-C_KkCPzB.js";
|
|
import { n as makeGroupProps, r as useGroup } from "./group-Cm2viEWK.js";
|
|
import { t as VIcon } from "./VIcon-1CJH_3Uo.js";
|
|
import "/Users/thackmaster/Development/routie2/frontend/node_modules/vuetify/lib/components/VSlideGroup/VSlideGroup.css";
|
|
//#region node_modules/vuetify/lib/components/VSlideGroup/helpers.js
|
|
function calculateUpdatedTarget({ selectedElement, containerElement, isRtl, isHorizontal }) {
|
|
const containerSize = getOffsetSize(isHorizontal, containerElement);
|
|
const scrollPosition = getScrollPosition(isHorizontal, isRtl, containerElement);
|
|
const childrenSize = getOffsetSize(isHorizontal, selectedElement);
|
|
const childrenStartPosition = getOffsetPosition(isHorizontal, selectedElement);
|
|
const additionalOffset = childrenSize * .4;
|
|
if (scrollPosition > childrenStartPosition) return childrenStartPosition - additionalOffset;
|
|
else if (scrollPosition + containerSize < childrenStartPosition + childrenSize) return childrenStartPosition - containerSize + childrenSize + additionalOffset;
|
|
return scrollPosition;
|
|
}
|
|
function calculateCenteredTarget({ selectedElement, containerElement, isHorizontal }) {
|
|
const containerOffsetSize = getOffsetSize(isHorizontal, containerElement);
|
|
const childrenOffsetPosition = getOffsetPosition(isHorizontal, selectedElement);
|
|
const childrenOffsetSize = getOffsetSize(isHorizontal, selectedElement);
|
|
return childrenOffsetPosition - containerOffsetSize / 2 + childrenOffsetSize / 2;
|
|
}
|
|
function getScrollSize(isHorizontal, element) {
|
|
return element?.[isHorizontal ? "scrollWidth" : "scrollHeight"] || 0;
|
|
}
|
|
function getScrollPosition(isHorizontal, rtl, element) {
|
|
if (!element) return 0;
|
|
const { scrollLeft, offsetWidth, scrollWidth } = element;
|
|
if (isHorizontal) return rtl ? scrollWidth - offsetWidth + scrollLeft : scrollLeft;
|
|
return element.scrollTop;
|
|
}
|
|
function getOffsetSize(isHorizontal, element) {
|
|
return element?.[isHorizontal ? "offsetWidth" : "offsetHeight"] || 0;
|
|
}
|
|
function getOffsetPosition(isHorizontal, element) {
|
|
return element?.[isHorizontal ? "offsetLeft" : "offsetTop"] || 0;
|
|
}
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/VSlideGroup/VSlideGroup.js
|
|
var VSlideGroupSymbol = Symbol.for("vuetify:v-slide-group");
|
|
var makeVSlideGroupProps = propsFactory({
|
|
centerActive: Boolean,
|
|
scrollToActive: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
contentClass: null,
|
|
direction: {
|
|
type: String,
|
|
default: "horizontal"
|
|
},
|
|
symbol: {
|
|
type: null,
|
|
default: VSlideGroupSymbol
|
|
},
|
|
nextIcon: {
|
|
type: IconValue,
|
|
default: "$next"
|
|
},
|
|
prevIcon: {
|
|
type: IconValue,
|
|
default: "$prev"
|
|
},
|
|
showArrows: {
|
|
type: [Boolean, String],
|
|
validator: (v) => typeof v === "boolean" || [
|
|
"always",
|
|
"desktop",
|
|
"mobile",
|
|
"never"
|
|
].includes(v)
|
|
},
|
|
...makeComponentProps(),
|
|
...makeDisplayProps({ mobile: null }),
|
|
...makeTagProps(),
|
|
...makeGroupProps({ selectedClass: "v-slide-group-item--active" })
|
|
}, "VSlideGroup");
|
|
var VSlideGroup = genericComponent()({
|
|
name: "VSlideGroup",
|
|
props: makeVSlideGroupProps(),
|
|
emits: { "update:modelValue": (value) => true },
|
|
setup(props, { slots }) {
|
|
const { isRtl } = useRtl();
|
|
const { displayClasses, mobile } = useDisplay(props);
|
|
const group = useGroup(props, props.symbol);
|
|
const isOverflowing = shallowRef(false);
|
|
const scrollOffset = shallowRef(0);
|
|
const containerSize = shallowRef(0);
|
|
const contentSize = shallowRef(0);
|
|
const isHorizontal = computed(() => props.direction === "horizontal");
|
|
const { resizeRef: containerRef, contentRect: containerRect } = useResizeObserver();
|
|
const { resizeRef: contentRef, contentRect } = useResizeObserver();
|
|
const goTo = useGoTo();
|
|
const goToOptions = computed(() => {
|
|
return {
|
|
container: containerRef.el,
|
|
duration: 200,
|
|
easing: "easeOutQuart"
|
|
};
|
|
});
|
|
const firstSelectedIndex = computed(() => {
|
|
if (!group.selected.value.length) return -1;
|
|
return group.items.value.findIndex((item) => item.id === group.selected.value[0]);
|
|
});
|
|
const lastSelectedIndex = computed(() => {
|
|
if (!group.selected.value.length) return -1;
|
|
return group.items.value.findIndex((item) => item.id === group.selected.value[group.selected.value.length - 1]);
|
|
});
|
|
if (IN_BROWSER) {
|
|
let frame = -1;
|
|
watch(() => [
|
|
group.selected.value,
|
|
containerRect.value,
|
|
contentRect.value,
|
|
isHorizontal.value
|
|
], () => {
|
|
cancelAnimationFrame(frame);
|
|
frame = requestAnimationFrame(() => {
|
|
if (containerRect.value && contentRect.value) {
|
|
const sizeProperty = isHorizontal.value ? "width" : "height";
|
|
containerSize.value = containerRect.value[sizeProperty];
|
|
contentSize.value = contentRect.value[sizeProperty];
|
|
isOverflowing.value = containerSize.value + 1 < contentSize.value;
|
|
}
|
|
if (props.scrollToActive && firstSelectedIndex.value >= 0 && contentRef.el) {
|
|
const selectedElement = contentRef.el.children[lastSelectedIndex.value];
|
|
scrollToChildren(selectedElement, props.centerActive);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
const isFocused = shallowRef(false);
|
|
function scrollToChildren(children, center) {
|
|
let target = 0;
|
|
if (center) target = calculateCenteredTarget({
|
|
containerElement: containerRef.el,
|
|
isHorizontal: isHorizontal.value,
|
|
selectedElement: children
|
|
});
|
|
else target = calculateUpdatedTarget({
|
|
containerElement: containerRef.el,
|
|
isHorizontal: isHorizontal.value,
|
|
isRtl: isRtl.value,
|
|
selectedElement: children
|
|
});
|
|
scrollToPosition(target);
|
|
}
|
|
function scrollToPosition(newPosition) {
|
|
if (!IN_BROWSER || !containerRef.el) return;
|
|
const offsetSize = getOffsetSize(isHorizontal.value, containerRef.el);
|
|
const scrollPosition = getScrollPosition(isHorizontal.value, isRtl.value, containerRef.el);
|
|
if (getScrollSize(isHorizontal.value, containerRef.el) <= offsetSize || Math.abs(newPosition - scrollPosition) < 16) return;
|
|
if (isHorizontal.value && isRtl.value && containerRef.el) {
|
|
const { scrollWidth, offsetWidth: containerWidth } = containerRef.el;
|
|
newPosition = scrollWidth - containerWidth - newPosition;
|
|
}
|
|
if (isHorizontal.value) goTo.horizontal(newPosition, goToOptions.value);
|
|
else goTo(newPosition, goToOptions.value);
|
|
}
|
|
function onScroll(e) {
|
|
const { scrollTop, scrollLeft } = e.target;
|
|
scrollOffset.value = isHorizontal.value ? scrollLeft : scrollTop;
|
|
}
|
|
function onFocusin(e) {
|
|
isFocused.value = true;
|
|
if (!isOverflowing.value || !contentRef.el) return;
|
|
for (const el of e.composedPath()) for (const item of contentRef.el.children) if (item === el) {
|
|
scrollToChildren(item);
|
|
return;
|
|
}
|
|
}
|
|
function onFocusout(e) {
|
|
isFocused.value = false;
|
|
}
|
|
let ignoreFocusEvent = false;
|
|
function onFocus(e) {
|
|
if (!ignoreFocusEvent && !isFocused.value && !(e.relatedTarget && contentRef.el?.contains(e.relatedTarget))) focus();
|
|
ignoreFocusEvent = false;
|
|
}
|
|
function onFocusAffixes() {
|
|
ignoreFocusEvent = true;
|
|
}
|
|
function onKeydown(e) {
|
|
if (!contentRef.el) return;
|
|
function toFocus(location) {
|
|
e.preventDefault();
|
|
focus(location);
|
|
}
|
|
if (isHorizontal.value) {
|
|
if (e.key === "ArrowRight") toFocus(isRtl.value ? "prev" : "next");
|
|
else if (e.key === "ArrowLeft") toFocus(isRtl.value ? "next" : "prev");
|
|
} else if (e.key === "ArrowDown") toFocus("next");
|
|
else if (e.key === "ArrowUp") toFocus("prev");
|
|
if (e.key === "Home") toFocus("first");
|
|
else if (e.key === "End") toFocus("last");
|
|
}
|
|
function getSiblingElement(el, location) {
|
|
if (!el) return void 0;
|
|
let sibling = el;
|
|
do
|
|
sibling = sibling?.[location === "next" ? "nextElementSibling" : "previousElementSibling"];
|
|
while (sibling?.hasAttribute("disabled"));
|
|
return sibling;
|
|
}
|
|
function focus(location) {
|
|
if (!contentRef.el) return;
|
|
let el;
|
|
if (!location) el = focusableChildren(contentRef.el)[0];
|
|
else if (location === "next") {
|
|
el = getSiblingElement(contentRef.el.querySelector(":focus"), location);
|
|
if (!el) return focus("first");
|
|
} else if (location === "prev") {
|
|
el = getSiblingElement(contentRef.el.querySelector(":focus"), location);
|
|
if (!el) return focus("last");
|
|
} else if (location === "first") {
|
|
el = contentRef.el.firstElementChild;
|
|
if (el?.hasAttribute("disabled")) el = getSiblingElement(el, "next");
|
|
} else if (location === "last") {
|
|
el = contentRef.el.lastElementChild;
|
|
if (el?.hasAttribute("disabled")) el = getSiblingElement(el, "prev");
|
|
}
|
|
if (el) el.focus({ preventScroll: true });
|
|
}
|
|
function scrollTo(location) {
|
|
const direction = isHorizontal.value && isRtl.value ? -1 : 1;
|
|
const offsetStep = (location === "prev" ? -direction : direction) * containerSize.value;
|
|
let newPosition = scrollOffset.value + offsetStep;
|
|
if (isHorizontal.value && isRtl.value && containerRef.el) {
|
|
const { scrollWidth, offsetWidth: containerWidth } = containerRef.el;
|
|
newPosition += scrollWidth - containerWidth;
|
|
}
|
|
scrollToPosition(newPosition);
|
|
}
|
|
const slotProps = computed(() => ({
|
|
next: group.next,
|
|
prev: group.prev,
|
|
select: group.select,
|
|
isSelected: group.isSelected
|
|
}));
|
|
const hasOverflowOrScroll = computed(() => isOverflowing.value || Math.abs(scrollOffset.value) > 0);
|
|
const hasAffixes = computed(() => {
|
|
switch (props.showArrows) {
|
|
case "never": return false;
|
|
case "always": return true;
|
|
case "desktop": return !mobile.value;
|
|
case true: return hasOverflowOrScroll.value;
|
|
case "mobile": return mobile.value || hasOverflowOrScroll.value;
|
|
default: return !mobile.value && hasOverflowOrScroll.value;
|
|
}
|
|
});
|
|
const hasPrev = computed(() => {
|
|
return Math.abs(scrollOffset.value) > 1;
|
|
});
|
|
const hasNext = computed(() => {
|
|
if (!hasOverflowOrScroll.value) return false;
|
|
return contentSize.value - containerSize.value - Math.abs(scrollOffset.value) > 1;
|
|
});
|
|
useRender(() => createVNode(props.tag, {
|
|
"class": normalizeClass([
|
|
"v-slide-group",
|
|
{
|
|
"v-slide-group--vertical": !isHorizontal.value,
|
|
"v-slide-group--has-affixes": hasAffixes.value,
|
|
"v-slide-group--is-overflowing": isOverflowing.value
|
|
},
|
|
displayClasses.value,
|
|
props.class
|
|
]),
|
|
"style": normalizeStyle(props.style),
|
|
"tabindex": isFocused.value || group.selected.value.length ? -1 : 0,
|
|
"onFocus": onFocus
|
|
}, { default: () => [
|
|
hasAffixes.value && createBaseVNode("div", {
|
|
"key": "prev",
|
|
"class": normalizeClass(["v-slide-group__prev", { "v-slide-group__prev--disabled": !hasPrev.value }]),
|
|
"onMousedown": onFocusAffixes,
|
|
"onClick": () => hasPrev.value && scrollTo("prev")
|
|
}, [slots.prev?.(slotProps.value) ?? createVNode(VFadeTransition, null, { default: () => [createVNode(VIcon, { "icon": isRtl.value ? props.nextIcon : props.prevIcon }, null)] })]),
|
|
createBaseVNode("div", {
|
|
"key": "container",
|
|
"ref": containerRef,
|
|
"class": normalizeClass(["v-slide-group__container", props.contentClass]),
|
|
"onScroll": onScroll
|
|
}, [createBaseVNode("div", {
|
|
"ref": contentRef,
|
|
"class": "v-slide-group__content",
|
|
"onFocusin": onFocusin,
|
|
"onFocusout": onFocusout,
|
|
"onKeydown": onKeydown
|
|
}, [slots.default?.(slotProps.value)])]),
|
|
hasAffixes.value && createBaseVNode("div", {
|
|
"key": "next",
|
|
"class": normalizeClass(["v-slide-group__next", { "v-slide-group__next--disabled": !hasNext.value }]),
|
|
"onMousedown": onFocusAffixes,
|
|
"onClick": () => hasNext.value && scrollTo("next")
|
|
}, [slots.next?.(slotProps.value) ?? createVNode(VFadeTransition, null, { default: () => [createVNode(VIcon, { "icon": isRtl.value ? props.prevIcon : props.nextIcon }, null)] })])
|
|
] }));
|
|
return {
|
|
selected: group.selected,
|
|
scrollTo,
|
|
scrollOffset,
|
|
focus,
|
|
hasPrev,
|
|
hasNext
|
|
};
|
|
}
|
|
});
|
|
//#endregion
|
|
export { VSlideGroupSymbol as n, makeVSlideGroupProps as r, VSlideGroup as t };
|
|
|
|
//# sourceMappingURL=VSlideGroup-TpMGTwfd.js.map
|