@shtabapp/ui-kit 1.85.0 → 1.85.1

package/dist/composables/useLink.js

@@ -0,0 +1,79 @@
+import { hasLinkProp, resolveVueRouterLinkPresentation } from "../utils/vueRouterLinkPresentation.js";
+import { computed, getCurrentInstance, resolveDynamicComponent, toRef, toValue } from "vue";
+//#region src/composables/useLink.ts
+var areRouteQueriesEqual = (leftQuery, rightQuery) => {
+	const leftKeys = Object.keys(leftQuery);
+	const rightKeys = Object.keys(rightQuery);
+	if (leftKeys.length !== rightKeys.length) return false;
+	for (const queryKey of leftKeys) {
+		const leftValue = leftQuery[queryKey];
+		const rightValue = rightQuery[queryKey];
+		if (String(leftValue ?? "") !== String(rightValue ?? "")) return false;
+	}
+	return true;
+};
+var resolveLinkPresentation = (link, hasRouter) => {
+	return computed(() => {
+		const presentation = resolveVueRouterLinkPresentation(toValue(link));
+		if (presentation.mode === "route" && !hasRouter) return { mode: "none" };
+		return presentation;
+	});
+};
+var useStaticLink = (link) => {
+	const linkPresentation = resolveLinkPresentation(link, false);
+	const isLink = computed(() => hasLinkProp(toValue(link)));
+	const isRouterLink = computed(() => false);
+	const isActive = computed(() => false);
+	const navigate = () => {
+		return Promise.reject(/* @__PURE__ */ new Error("[@shtabapp/ui-kit] useLink.navigate() requires an active vue-router instance. Install and register vue-router in the app, or use an href link."));
+	};
+	return {
+		linkPresentation,
+		isLink,
+		isRouterLink,
+		isActive,
+		navigate
+	};
+};
+var isRouterLinkComponent = (component) => {
+	return typeof component === "object" && component !== null && "useLink" in component;
+};
+var useRouterLink = (router, routerLinkComponent, link, exact, replace) => {
+	const linkPresentation = resolveLinkPresentation(link, true);
+	const isLink = computed(() => hasLinkProp(toValue(link)));
+	const isRouterLink = computed(() => linkPresentation.value.mode === "route");
+	const linkTo = computed(() => {
+		const presentation = linkPresentation.value;
+		if (presentation.mode !== "route") return "";
+		return presentation.linkBindings.to;
+	});
+	const routerLink = routerLinkComponent.useLink({
+		to: toRef(() => linkTo.value),
+		replace: toRef(() => toValue(replace) ?? false)
+	});
+	const isActive = computed(() => {
+		if (!isRouterLink.value) return false;
+		if (!(toValue(exact) ?? false)) return routerLink.isActive.value;
+		if (!routerLink.isExactActive.value) return false;
+		return areRouteQueriesEqual(routerLink.route.value.query, router.currentRoute.value.query);
+	});
+	const navigate = (event) => {
+		if (!isRouterLink.value) return Promise.resolve();
+		return routerLink.navigate(event);
+	};
+	return {
+		linkPresentation,
+		isLink,
+		isRouterLink,
+		isActive,
+		navigate
+	};
+};
+var useLink = (link, exact, replace) => {
+	const router = getCurrentInstance()?.proxy?.$router;
+	const routerLinkComponent = router ? resolveDynamicComponent("RouterLink") : void 0;
+	if (!router || !isRouterLinkComponent(routerLinkComponent)) return useStaticLink(link);
+	return useRouterLink(router, routerLinkComponent, link, exact, replace);
+};
+//#endregion
+export { useLink };

package/dist/composables/useOverflowGroup.cjs

@@ -0,0 +1,29 @@
+let vue = require("vue");
+//#region src/composables/useOverflowGroup.ts
+var getVisibleCount = (itemCount, maxVisible) => {
+	if (!maxVisible || !Number.isFinite(maxVisible) || maxVisible >= itemCount) return itemCount;
+	return Math.max(maxVisible, 0);
+};
+var useOverflowGroup = ({ items, maxVisible }) => {
+	const visibleItems = (0, vue.computed)(() => {
+		const groupItems = (0, vue.toValue)(items);
+		const visibleCount = getVisibleCount(groupItems.length, (0, vue.toValue)(maxVisible));
+		return groupItems.slice(0, visibleCount);
+	});
+	const hiddenCount = (0, vue.computed)(() => {
+		const groupItems = (0, vue.toValue)(items);
+		return Math.max(groupItems.length - visibleItems.value.length, 0);
+	});
+	return {
+		visibleItems,
+		hiddenCount,
+		hasOverflow: (0, vue.computed)(() => {
+			return hiddenCount.value > 0;
+		}),
+		overflowLabel: (0, vue.computed)(() => {
+			return `+${hiddenCount.value}`;
+		})
+	};
+};
+//#endregion
+exports.useOverflowGroup = useOverflowGroup;

package/dist/composables/useOverflowGroup.js

@@ -0,0 +1,29 @@
+import { computed, toValue } from "vue";
+//#region src/composables/useOverflowGroup.ts
+var getVisibleCount = (itemCount, maxVisible) => {
+	if (!maxVisible || !Number.isFinite(maxVisible) || maxVisible >= itemCount) return itemCount;
+	return Math.max(maxVisible, 0);
+};
+var useOverflowGroup = ({ items, maxVisible }) => {
+	const visibleItems = computed(() => {
+		const groupItems = toValue(items);
+		const visibleCount = getVisibleCount(groupItems.length, toValue(maxVisible));
+		return groupItems.slice(0, visibleCount);
+	});
+	const hiddenCount = computed(() => {
+		const groupItems = toValue(items);
+		return Math.max(groupItems.length - visibleItems.value.length, 0);
+	});
+	return {
+		visibleItems,
+		hiddenCount,
+		hasOverflow: computed(() => {
+			return hiddenCount.value > 0;
+		}),
+		overflowLabel: computed(() => {
+			return `+${hiddenCount.value}`;
+		})
+	};
+};
+//#endregion
+export { useOverflowGroup };

package/dist/composables/useResizeAutoScroll.cjs

@@ -0,0 +1,163 @@
+let vue = require("vue");
+let _vueuse_core = require("@vueuse/core");
+//#region src/composables/useResizeAutoScroll.ts
+var RESIZE_HANDLE_SIZE = 20;
+var AUTO_SCROLL_EDGE_ZONE = 96;
+var AUTO_SCROLL_MAX_SPEED = 12;
+var SCROLLABLE_OVERFLOW_VALUES = [
+	"auto",
+	"scroll",
+	"overlay"
+];
+var isScrollableOverflow = (overflowValue) => {
+	return SCROLLABLE_OVERFLOW_VALUES.some((scrollableValue) => scrollableValue === overflowValue);
+};
+var getScrollBoundary = (scrollTarget) => {
+	if (scrollTarget instanceof HTMLElement) {
+		const { top, bottom } = scrollTarget.getBoundingClientRect();
+		return {
+			top,
+			bottom
+		};
+	}
+	return {
+		top: 0,
+		bottom: window.innerHeight
+	};
+};
+var getAutoScrollSpeed = (distanceToEdge) => {
+	if (distanceToEdge <= 0) return AUTO_SCROLL_MAX_SPEED;
+	if (distanceToEdge >= AUTO_SCROLL_EDGE_ZONE) return 0;
+	const edgeRatio = 1 - distanceToEdge / AUTO_SCROLL_EDGE_ZONE;
+	return AUTO_SCROLL_MAX_SPEED * edgeRatio * edgeRatio;
+};
+var getEdgeDelta = (pointerPosition, start, end) => {
+	const distanceFromTop = pointerPosition - start;
+	if (distanceFromTop < 0) return -12;
+	if (distanceFromTop < AUTO_SCROLL_EDGE_ZONE) return -getAutoScrollSpeed(distanceFromTop);
+	const distanceFromBottom = end - pointerPosition;
+	if (distanceFromBottom < 0) return AUTO_SCROLL_MAX_SPEED;
+	if (distanceFromBottom < AUTO_SCROLL_EDGE_ZONE) return getAutoScrollSpeed(distanceFromBottom);
+	return 0;
+};
+var useResizeAutoScroll = ({ elementRef, isEnabled }) => {
+	const isResizeCandidate = (0, vue.ref)(false);
+	const isResizeActive = (0, vue.ref)(false);
+	const resizeStartPointer = (0, vue.ref)({
+		x: 0,
+		y: 0
+	});
+	const latestPointer = (0, vue.ref)({
+		x: 0,
+		y: 0
+	});
+	const resizeStartHeight = (0, vue.ref)(0);
+	let autoScrollFrameId = null;
+	let scrollTarget = null;
+	let scrollBoundary = {
+		top: 0,
+		bottom: 0
+	};
+	const resolveScrollTarget = () => {
+		const element = elementRef.value;
+		if (!element) return window;
+		let parentElement = element.parentElement;
+		while (parentElement) {
+			const parentStyles = getComputedStyle(parentElement);
+			if ((isScrollableOverflow(parentStyles.overflowY) || isScrollableOverflow(parentStyles.overflow)) && parentElement.scrollHeight > parentElement.clientHeight) return parentElement;
+			parentElement = parentElement.parentElement;
+		}
+		return window;
+	};
+	const refreshScrollCache = () => {
+		scrollTarget = resolveScrollTarget();
+		scrollBoundary = getScrollBoundary(scrollTarget);
+	};
+	const stop = () => {
+		isResizeCandidate.value = false;
+		isResizeActive.value = false;
+		scrollTarget = null;
+		scrollBoundary = {
+			top: 0,
+			bottom: 0
+		};
+		if (autoScrollFrameId !== null) {
+			cancelAnimationFrame(autoScrollFrameId);
+			autoScrollFrameId = null;
+		}
+	};
+	const tick = () => {
+		if (!isEnabled() || !isResizeActive.value || !elementRef.value) {
+			autoScrollFrameId = null;
+			return;
+		}
+		refreshScrollCache();
+		const delta = getEdgeDelta(latestPointer.value.y, scrollBoundary.top, scrollBoundary.bottom);
+		if (delta !== 0 && scrollTarget) scrollTarget.scrollBy({
+			top: delta,
+			behavior: "auto"
+		});
+		autoScrollFrameId = requestAnimationFrame(tick);
+	};
+	const start = () => {
+		if (!isEnabled() || isResizeActive.value || autoScrollFrameId !== null) return;
+		refreshScrollCache();
+		isResizeActive.value = true;
+		autoScrollFrameId = requestAnimationFrame(tick);
+	};
+	const isResizeHandleHit = (event) => {
+		const element = elementRef.value;
+		if (!isEnabled() || !element) return false;
+		const { right, bottom } = element.getBoundingClientRect();
+		const horizontalOffset = right - event.clientX;
+		const verticalOffset = bottom - event.clientY;
+		return horizontalOffset >= 0 && horizontalOffset <= RESIZE_HANDLE_SIZE && verticalOffset >= 0 && verticalOffset <= RESIZE_HANDLE_SIZE;
+	};
+	const handlePointerDown = (event) => {
+		const element = elementRef.value;
+		if (event.button !== 0 || !isResizeHandleHit(event) || !element) {
+			stop();
+			return;
+		}
+		resizeStartPointer.value = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		latestPointer.value = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		resizeStartHeight.value = element.offsetHeight;
+		isResizeCandidate.value = true;
+		isResizeActive.value = false;
+	};
+	const handlePointerMove = (event) => {
+		const element = elementRef.value;
+		if (!isEnabled() || !isResizeCandidate.value || !element) return;
+		latestPointer.value = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		if (isResizeActive.value) refreshScrollCache();
+		const hasPointerMoved = event.clientX !== resizeStartPointer.value.x || event.clientY !== resizeStartPointer.value.y;
+		const hasResizedEnough = Math.abs(element.offsetHeight - resizeStartHeight.value) >= 1;
+		if (hasPointerMoved || hasResizedEnough) start();
+	};
+	const handleLayoutChange = () => {
+		if (!isEnabled() || !isResizeActive.value) return;
+		refreshScrollCache();
+	};
+	(0, _vueuse_core.useEventListener)(elementRef, "pointerdown", handlePointerDown);
+	(0, _vueuse_core.useEventListener)(elementRef, "mousedown", handlePointerDown);
+	(0, _vueuse_core.useEventListener)(document, "pointermove", handlePointerMove, { passive: true });
+	(0, _vueuse_core.useEventListener)(document, "mousemove", handlePointerMove, { passive: true });
+	(0, _vueuse_core.useEventListener)(document, "pointerup", stop);
+	(0, _vueuse_core.useEventListener)(document, "mouseup", stop);
+	(0, _vueuse_core.useEventListener)(document, "pointercancel", stop);
+	(0, _vueuse_core.useEventListener)(window, "resize", handleLayoutChange, { passive: true });
+	(0, _vueuse_core.useEventListener)(window, "blur", stop);
+	(0, vue.onScopeDispose)(stop);
+	return { isResizeActive };
+};
+//#endregion
+exports.useResizeAutoScroll = useResizeAutoScroll;

package/dist/composables/useResizeAutoScroll.js

@@ -0,0 +1,163 @@
+import { onScopeDispose, ref } from "vue";
+import { useEventListener } from "@vueuse/core";
+//#region src/composables/useResizeAutoScroll.ts
+var RESIZE_HANDLE_SIZE = 20;
+var AUTO_SCROLL_EDGE_ZONE = 96;
+var AUTO_SCROLL_MAX_SPEED = 12;
+var SCROLLABLE_OVERFLOW_VALUES = [
+	"auto",
+	"scroll",
+	"overlay"
+];
+var isScrollableOverflow = (overflowValue) => {
+	return SCROLLABLE_OVERFLOW_VALUES.some((scrollableValue) => scrollableValue === overflowValue);
+};
+var getScrollBoundary = (scrollTarget) => {
+	if (scrollTarget instanceof HTMLElement) {
+		const { top, bottom } = scrollTarget.getBoundingClientRect();
+		return {
+			top,
+			bottom
+		};
+	}
+	return {
+		top: 0,
+		bottom: window.innerHeight
+	};
+};
+var getAutoScrollSpeed = (distanceToEdge) => {
+	if (distanceToEdge <= 0) return AUTO_SCROLL_MAX_SPEED;
+	if (distanceToEdge >= AUTO_SCROLL_EDGE_ZONE) return 0;
+	const edgeRatio = 1 - distanceToEdge / AUTO_SCROLL_EDGE_ZONE;
+	return AUTO_SCROLL_MAX_SPEED * edgeRatio * edgeRatio;
+};
+var getEdgeDelta = (pointerPosition, start, end) => {
+	const distanceFromTop = pointerPosition - start;
+	if (distanceFromTop < 0) return -12;
+	if (distanceFromTop < AUTO_SCROLL_EDGE_ZONE) return -getAutoScrollSpeed(distanceFromTop);
+	const distanceFromBottom = end - pointerPosition;
+	if (distanceFromBottom < 0) return AUTO_SCROLL_MAX_SPEED;
+	if (distanceFromBottom < AUTO_SCROLL_EDGE_ZONE) return getAutoScrollSpeed(distanceFromBottom);
+	return 0;
+};
+var useResizeAutoScroll = ({ elementRef, isEnabled }) => {
+	const isResizeCandidate = ref(false);
+	const isResizeActive = ref(false);
+	const resizeStartPointer = ref({
+		x: 0,
+		y: 0
+	});
+	const latestPointer = ref({
+		x: 0,
+		y: 0
+	});
+	const resizeStartHeight = ref(0);
+	let autoScrollFrameId = null;
+	let scrollTarget = null;
+	let scrollBoundary = {
+		top: 0,
+		bottom: 0
+	};
+	const resolveScrollTarget = () => {
+		const element = elementRef.value;
+		if (!element) return window;
+		let parentElement = element.parentElement;
+		while (parentElement) {
+			const parentStyles = getComputedStyle(parentElement);
+			if ((isScrollableOverflow(parentStyles.overflowY) || isScrollableOverflow(parentStyles.overflow)) && parentElement.scrollHeight > parentElement.clientHeight) return parentElement;
+			parentElement = parentElement.parentElement;
+		}
+		return window;
+	};
+	const refreshScrollCache = () => {
+		scrollTarget = resolveScrollTarget();
+		scrollBoundary = getScrollBoundary(scrollTarget);
+	};
+	const stop = () => {
+		isResizeCandidate.value = false;
+		isResizeActive.value = false;
+		scrollTarget = null;
+		scrollBoundary = {
+			top: 0,
+			bottom: 0
+		};
+		if (autoScrollFrameId !== null) {
+			cancelAnimationFrame(autoScrollFrameId);
+			autoScrollFrameId = null;
+		}
+	};
+	const tick = () => {
+		if (!isEnabled() || !isResizeActive.value || !elementRef.value) {
+			autoScrollFrameId = null;
+			return;
+		}
+		refreshScrollCache();
+		const delta = getEdgeDelta(latestPointer.value.y, scrollBoundary.top, scrollBoundary.bottom);
+		if (delta !== 0 && scrollTarget) scrollTarget.scrollBy({
+			top: delta,
+			behavior: "auto"
+		});
+		autoScrollFrameId = requestAnimationFrame(tick);
+	};
+	const start = () => {
+		if (!isEnabled() || isResizeActive.value || autoScrollFrameId !== null) return;
+		refreshScrollCache();
+		isResizeActive.value = true;
+		autoScrollFrameId = requestAnimationFrame(tick);
+	};
+	const isResizeHandleHit = (event) => {
+		const element = elementRef.value;
+		if (!isEnabled() || !element) return false;
+		const { right, bottom } = element.getBoundingClientRect();
+		const horizontalOffset = right - event.clientX;
+		const verticalOffset = bottom - event.clientY;
+		return horizontalOffset >= 0 && horizontalOffset <= RESIZE_HANDLE_SIZE && verticalOffset >= 0 && verticalOffset <= RESIZE_HANDLE_SIZE;
+	};
+	const handlePointerDown = (event) => {
+		const element = elementRef.value;
+		if (event.button !== 0 || !isResizeHandleHit(event) || !element) {
+			stop();
+			return;
+		}
+		resizeStartPointer.value = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		latestPointer.value = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		resizeStartHeight.value = element.offsetHeight;
+		isResizeCandidate.value = true;
+		isResizeActive.value = false;
+	};
+	const handlePointerMove = (event) => {
+		const element = elementRef.value;
+		if (!isEnabled() || !isResizeCandidate.value || !element) return;
+		latestPointer.value = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		if (isResizeActive.value) refreshScrollCache();
+		const hasPointerMoved = event.clientX !== resizeStartPointer.value.x || event.clientY !== resizeStartPointer.value.y;
+		const hasResizedEnough = Math.abs(element.offsetHeight - resizeStartHeight.value) >= 1;
+		if (hasPointerMoved || hasResizedEnough) start();
+	};
+	const handleLayoutChange = () => {
+		if (!isEnabled() || !isResizeActive.value) return;
+		refreshScrollCache();
+	};
+	useEventListener(elementRef, "pointerdown", handlePointerDown);
+	useEventListener(elementRef, "mousedown", handlePointerDown);
+	useEventListener(document, "pointermove", handlePointerMove, { passive: true });
+	useEventListener(document, "mousemove", handlePointerMove, { passive: true });
+	useEventListener(document, "pointerup", stop);
+	useEventListener(document, "mouseup", stop);
+	useEventListener(document, "pointercancel", stop);
+	useEventListener(window, "resize", handleLayoutChange, { passive: true });
+	useEventListener(window, "blur", stop);
+	onScopeDispose(stop);
+	return { isResizeActive };
+};
+//#endregion
+export { useResizeAutoScroll };

package/dist/composables/useSListEndReached.cjs

@@ -0,0 +1,18 @@
+let vue = require("vue");
+let _vueuse_core = require("@vueuse/core");
+//#region src/composables/useSListEndReached.ts
+var useSListEndReached = (scrollElement, options) => {
+	const resolveCanLoadMore = () => {
+		if (options.canLoadMore === void 0) return true;
+		return (0, vue.toValue)(options.canLoadMore);
+	};
+	return (0, _vueuse_core.useInfiniteScroll)(scrollElement, () => {
+		options.onEndReached();
+	}, {
+		distance: (0, vue.toValue)(options.distance),
+		canLoadMore: resolveCanLoadMore,
+		direction: "bottom"
+	});
+};
+//#endregion
+exports.useSListEndReached = useSListEndReached;

package/dist/composables/useSListEndReached.js

@@ -0,0 +1,18 @@
+import { toValue } from "vue";
+import { useInfiniteScroll } from "@vueuse/core";
+//#region src/composables/useSListEndReached.ts
+var useSListEndReached = (scrollElement, options) => {
+	const resolveCanLoadMore = () => {
+		if (options.canLoadMore === void 0) return true;
+		return toValue(options.canLoadMore);
+	};
+	return useInfiniteScroll(scrollElement, () => {
+		options.onEndReached();
+	}, {
+		distance: toValue(options.distance),
+		canLoadMore: resolveCanLoadMore,
+		direction: "bottom"
+	});
+};
+//#endregion
+export { useSListEndReached };

package/dist/composables/useSelectLink.cjs

@@ -0,0 +1,16 @@
+let vue = require("vue");
+//#region src/composables/useSelectLink.ts
+var useSelectLink = ({ isRouterLink, isActive, group, value }) => {
+	(0, vue.watch)(() => isActive.value, (active) => {
+		if (!isRouterLink.value || active !== true) return;
+		const groupContext = (0, vue.toValue)(group);
+		const itemValue = (0, vue.toValue)(value);
+		if (!groupContext || itemValue === void 0) return;
+		if (groupContext.isSelected(itemValue)) return;
+		(0, vue.nextTick)(() => {
+			groupContext.selectItem(itemValue);
+		});
+	}, { immediate: true });
+};
+//#endregion
+exports.useSelectLink = useSelectLink;

package/dist/composables/useSelectLink.js

@@ -0,0 +1,16 @@
+import { nextTick, toValue, watch } from "vue";
+//#region src/composables/useSelectLink.ts
+var useSelectLink = ({ isRouterLink, isActive, group, value }) => {
+	watch(() => isActive.value, (active) => {
+		if (!isRouterLink.value || active !== true) return;
+		const groupContext = toValue(group);
+		const itemValue = toValue(value);
+		if (!groupContext || itemValue === void 0) return;
+		if (groupContext.isSelected(itemValue)) return;
+		nextTick(() => {
+			groupContext.selectItem(itemValue);
+		});
+	}, { immediate: true });
+};
+//#endregion
+export { useSelectLink };