@vizejs/fresco 0.712.0 → 0.713.0

package/dist/{components-CqGU-NNE.mjs → components-DWIDBGTL.mjs}

@@ -1,5 +1,5 @@
-import { i as useIsScreenReaderEnabled, t as useInput } from "./useInput-BmjmkjZ9.mjs";
-import { computed, defineComponent, h, onMounted, onUnmounted, ref, watch } from "vue";
+import { i as useInput, r as useMouse, s as useIsScreenReaderEnabled, t as createVirtualViewport } from "./useVirtualViewport-CcJuIc7U.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, h, mergeProps, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, unref, watch, withCtx } from "vue";
 //#region src/components/Box.ts
 /**
 * Box Component - Container with flexbox layout
@@ -550,6 +550,301 @@ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/ScrollBar.vue
+var ScrollBar_default = /* @__PURE__ */ defineComponent({
+	__name: "ScrollBar",
+	props: {
+		itemCount: {
+			type: Number,
+			required: true
+		},
+		viewportSize: {
+			type: Number,
+			required: true
+		},
+		offset: {
+			type: Number,
+			required: true
+		},
+		length: {
+			type: Number,
+			required: false
+		},
+		orientation: {
+			type: String,
+			required: false,
+			default: "vertical"
+		},
+		track: {
+			type: String,
+			required: false,
+			default: "│"
+		},
+		thumb: {
+			type: String,
+			required: false,
+			default: "█"
+		},
+		fg: {
+			type: String,
+			required: false
+		},
+		thumbFg: {
+			type: String,
+			required: false
+		}
+	},
+	setup(__props) {
+		function nonNegativeInteger(value) {
+			const floored = Math.floor(value);
+			return Number.isSafeInteger(floored) && floored >= 0 ? floored : 0;
+		}
+		const metrics = computed(() => {
+			const trackLength = nonNegativeInteger(__props.length ?? __props.viewportSize);
+			const boundedViewportSize = nonNegativeInteger(__props.viewportSize);
+			const boundedItemCount = nonNegativeInteger(__props.itemCount);
+			const maxOffset = Math.max(0, boundedItemCount - boundedViewportSize);
+			return {
+				trackLength,
+				boundedViewportSize,
+				boundedItemCount,
+				maxOffset,
+				boundedOffset: Number.isFinite(__props.offset) ? Math.min(maxOffset, Math.max(0, __props.offset)) : 0
+			};
+		});
+		const cells = computed(() => {
+			const { trackLength, boundedViewportSize, boundedItemCount, maxOffset, boundedOffset } = metrics.value;
+			if (trackLength === 0) return [];
+			const thumbSize = maxOffset === 0 ? trackLength : Math.max(1, Math.min(trackLength, Math.floor(trackLength * boundedViewportSize / boundedItemCount)));
+			const travel = trackLength - thumbSize;
+			const thumbStart = maxOffset === 0 ? 0 : Math.round(boundedOffset / maxOffset * travel);
+			return Array.from({ length: trackLength }, (_, position) => ({
+				position,
+				symbol: position >= thumbStart && position < thumbStart + thumbSize ? __props.thumb : __props.track,
+				thumb: position >= thumbStart && position < thumbStart + thumbSize
+			}));
+		});
+		const ariaState = computed(() => ({
+			orientation: __props.orientation,
+			valueMin: 0,
+			valueMax: metrics.value.maxOffset,
+			valueNow: metrics.value.boundedOffset
+		}));
+		const accessibilityProps = computed(() => ({
+			ariaRole: "scrollbar",
+			ariaState: ariaState.value
+		}));
+		const cellAccessibilityProps = { ariaHidden: true };
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Box), mergeProps({ "flex-direction": __props.orientation === "vertical" ? "column" : "row" }, accessibilityProps.value), {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(cells.value, (cell) => {
+					return openBlock(), createBlock(unref(Text), mergeProps({
+						key: cell.position,
+						content: cell.symbol,
+						fg: cell.thumb ? __props.thumbFg ?? __props.fg : __props.fg
+					}, { ref_for: true }, cellAccessibilityProps), null, 16, ["content", "fg"]);
+				}), 128))]),
+				_: 1
+			}, 16, ["flex-direction"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/ScrollBox.vue
+var ScrollBox_default = /* @__PURE__ */ defineComponent({
+	__name: "ScrollBox",
+	props: {
+		itemCount: {
+			type: Number,
+			required: true
+		},
+		viewportSize: {
+			type: Number,
+			required: true
+		},
+		modelValue: {
+			type: Number,
+			required: false
+		},
+		overscan: {
+			type: Number,
+			required: false,
+			default: 2
+		},
+		focused: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		wheelStep: {
+			type: Number,
+			required: false,
+			default: 3
+		},
+		showScrollbar: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		followOutput: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		scrollbarTrack: {
+			type: String,
+			required: false,
+			default: "│"
+		},
+		scrollbarThumb: {
+			type: String,
+			required: false,
+			default: "█"
+		}
+	},
+	emits: ["update:modelValue", "scroll"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const viewport = createVirtualViewport({
+			itemCount: __props.itemCount,
+			viewportSize: __props.viewportSize,
+			overscan: __props.overscan,
+			initialOffset: __props.modelValue ?? 0
+		});
+		const isActive = computed(() => __props.focused && !__props.disabled);
+		const normalizedWheelStep = computed(() => {
+			const truncated = Math.trunc(__props.wheelStep);
+			return Number.isSafeInteger(truncated) && truncated > 0 ? truncated : 1;
+		});
+		const retainedIndexes = computed(() => {
+			const range = viewport.range.value;
+			return Array.from({ length: range.overscanEnd - range.overscanStart }, (_, index) => range.overscanStart + index);
+		});
+		const rootAriaState = computed(() => ({ disabled: __props.disabled }));
+		const rootAccessibilityProps = computed(() => ({
+			ariaRole: "list",
+			ariaState: rootAriaState.value
+		}));
+		function publish(changed) {
+			if (!changed) return false;
+			emit("update:modelValue", viewport.offset.value);
+			emit("scroll", viewport.range.value);
+			return true;
+		}
+		function scrollTo(offset) {
+			return publish(viewport.scrollTo(offset));
+		}
+		function scrollBy(delta) {
+			return publish(viewport.scrollBy(delta));
+		}
+		function scrollIntoView(index, alignment = "nearest") {
+			return publish(viewport.scrollIntoView(index, alignment));
+		}
+		function isVisible(index) {
+			const range = viewport.range.value;
+			return index >= range.visibleStart && index < range.visibleEnd;
+		}
+		function itemSlot(index) {
+			return {
+				...viewport.range.value,
+				index,
+				visible: isVisible(index)
+			};
+		}
+		watch([
+			() => __props.itemCount,
+			() => __props.viewportSize,
+			() => __props.modelValue
+		], ([itemCount, viewportSize, modelValue], [previousItemCount, previousViewportSize, previousModelValue]) => {
+			const itemCountChanged = itemCount !== previousItemCount;
+			const viewportSizeChanged = viewportSize !== previousViewportSize;
+			const modelValueChanged = modelValue !== previousModelValue;
+			const followedEnd = itemCountChanged && __props.followOutput && viewport.atEnd.value;
+			const previousOffset = viewport.offset.value;
+			if (itemCountChanged) viewport.setItemCount(itemCount);
+			if (viewportSizeChanged) viewport.setViewportSize(viewportSize);
+			if (followedEnd && !modelValueChanged) viewport.scrollTo(viewport.maxOffset.value);
+			if (modelValue !== void 0 && (modelValueChanged || (itemCountChanged || viewportSizeChanged) && !followedEnd)) viewport.scrollTo(modelValue);
+			const offsetChanged = previousOffset !== viewport.offset.value;
+			const requestedOffsetWasClamped = modelValue !== void 0 && modelValue !== viewport.offset.value;
+			if (requestedOffsetWasClamped || offsetChanged && !modelValueChanged) emit("update:modelValue", viewport.offset.value);
+			if (offsetChanged && (itemCountChanged || viewportSizeChanged || requestedOffsetWasClamped)) emit("scroll", viewport.range.value);
+		});
+		watch(() => __props.overscan, (value) => viewport.setOverscan(value));
+		useInput((_input, key) => {
+			if (key.eventType === "release") return;
+			if (key.upArrow) scrollBy(-1);
+			else if (key.downArrow) scrollBy(1);
+			else if (key.pageUp) scrollBy(-Math.max(1, __props.viewportSize - 1));
+			else if (key.pageDown) scrollBy(Math.max(1, __props.viewportSize - 1));
+			else if (key.home) scrollTo(0);
+			else if (key.end) scrollTo(viewport.maxOffset.value);
+		}, { isActive });
+		useMouse((event) => {
+			if (event.kind === "scroll-up") scrollBy(-normalizedWheelStep.value);
+			else if (event.kind === "scroll-down") scrollBy(normalizedWheelStep.value);
+		}, { isActive });
+		__expose({
+			scrollTo,
+			scrollBy,
+			scrollIntoView,
+			range: () => viewport.range.value
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Box), mergeProps({ "flex-direction": "column" }, rootAccessibilityProps.value), {
+				default: withCtx(() => [
+					renderSlot(_ctx.$slots, "start"),
+					createVNode(unref(Box), { "flex-direction": __props.showScrollbar ? "row" : "column" }, {
+						default: withCtx(() => [createVNode(unref(Box), {
+							"flex-direction": "column",
+							height: __props.viewportSize,
+							overflow: "hidden"
+						}, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(retainedIndexes.value, (index) => {
+								return openBlock(), createBlock(unref(Box), {
+									key: index,
+									display: isVisible(index) ? "flex" : "none",
+									"aria-hidden": !isVisible(index),
+									"data-scroll-index": index
+								}, {
+									default: withCtx(() => [renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, itemSlot(index)))]),
+									_: 2
+								}, 1032, [
+									"display",
+									"aria-hidden",
+									"data-scroll-index"
+								]);
+							}), 128))]),
+							_: 3
+						}, 8, ["height"]), __props.showScrollbar && __props.itemCount > __props.viewportSize ? (openBlock(), createBlock(ScrollBar_default, {
+							key: 0,
+							"item-count": __props.itemCount,
+							"viewport-size": __props.viewportSize,
+							offset: unref(viewport).offset.value,
+							track: __props.scrollbarTrack,
+							thumb: __props.scrollbarThumb
+						}, null, 8, [
+							"item-count",
+							"viewport-size",
+							"offset",
+							"track",
+							"thumb"
+						])) : createCommentVNode("v-if", true)]),
+						_: 3
+					}, 8, ["flex-direction"]),
+					renderSlot(_ctx.$slots, "end")
+				]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
 //#region src/components/Newline.ts
 /**
 * Newline Component - inserts one or more newline characters inside Text.
@@ -2894,6 +3189,6 @@ const Avatar = defineComponent({
 	}
 });
 //#endregion
-export { Newline as A, Select as C, Code as D, Link as E, Stack as F, VStack as I, Divider as L, Card as M, Grid as N, Transform as O, HStack as P, Spacer as R, Checkbox as S, TextInput as T, ProgressBar as _, Modal as a, Confirm as b, Tabs as c, Table as d, List as f, Alert as g, Badge as h, StatusBar as i, Text as j, Static as k, Menu as l, Timer as m, KeyHint as n, Stepper as o, Tooltip as p, Header as r, Breadcrumb as s, Avatar as t, Tree as u, Spinner as v, TextArea as w, RadioGroup as x, Form as y, Box as z };
+export { Newline as A, Spacer as B, Select as C, Code as D, Link as E, Grid as F, HStack as I, Stack as L, ScrollBar_default as M, Text as N, Transform as O, Card as P, VStack as R, Checkbox as S, TextInput as T, Box as V, ProgressBar as _, Modal as a, Confirm as b, Tabs as c, Table as d, List as f, Alert as g, Badge as h, StatusBar as i, ScrollBox_default as j, Static as k, Menu as l, Timer as m, KeyHint as n, Stepper as o, Tooltip as p, Header as r, Breadcrumb as s, Avatar as t, Tree as u, Spinner as v, TextArea as w, RadioGroup as x, Form as y, Divider as z };
 
-//# sourceMappingURL=components-CqGU-NNE.mjs.map
+//# sourceMappingURL=components-DWIDBGTL.mjs.map