routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+320
@@ -0,0 +1,320 @@
|
||||
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
|
||||
Reference in New Issue
Block a user