@simon_he/vue-tui 0.0.8 → 1.0.0

package/dist/linkify-D_gzn9Xq.js

@@ -0,0 +1,562 @@
+import { sanitizeDomHref } from "./hyperlink-Bn02UXJb.js";
+import { EventZIndexContextKey, LayoutContextKey, RenderStackKey, injectionKey, intersectRect, translateRect, useLayout, useRenderStack, useTerminal, useTerminalNode, useVisibility } from "./wheel-scroll-vBRaQ7p-.js";
+import { computed, defineComponent, h, inject, provide, shallowReactive, watchEffect } from "vue";
+
+//#region src/vue/theme.ts
+const tuiDefaultTheme = Object.freeze({
+	colors: Object.freeze({
+		link: "cyanBright",
+		linkVisited: "magentaBright",
+		danger: "redBright",
+		success: "greenBright",
+		warning: "yellowBright",
+		info: "cyanBright",
+		muted: "white",
+		accent: "blueBright"
+	}),
+	components: Object.freeze({
+		TLink: Object.freeze({
+			style: Object.freeze({
+				fg: "cyanBright",
+				underline: true
+			}),
+			hoverStyle: Object.freeze({ underline: true }),
+			focusStyle: Object.freeze({ inverse: true }),
+			visitedStyle: Object.freeze({
+				fg: "magentaBright",
+				underline: true
+			}),
+			underline: true,
+			hoverUnderline: true
+		}),
+		TTable: Object.freeze({
+			headerStyle: Object.freeze({
+				bold: true,
+				underline: true
+			}),
+			borderStyle: Object.freeze({ dim: true }),
+			rowStyle: Object.freeze({}),
+			selectedStyle: Object.freeze({ inverse: true }),
+			activeStyle: Object.freeze({ underline: true })
+		}),
+		TFormField: Object.freeze({
+			labelStyle: Object.freeze({ bold: true }),
+			helpStyle: Object.freeze({ dim: true }),
+			errorStyle: Object.freeze({ fg: "redBright" })
+		})
+	})
+});
+function mergeStyleToken(base, override) {
+	if (!base && !override) return void 0;
+	return {
+		...base ?? {},
+		...override ?? {}
+	};
+}
+function createTheme(overrides = {}) {
+	const components = overrides.components ?? {};
+	const link = components.TLink;
+	const table = components.TTable;
+	const formField = components.TFormField;
+	const defaultLink = tuiDefaultTheme.components.TLink;
+	const defaultTable = tuiDefaultTheme.components.TTable;
+	const defaultFormField = tuiDefaultTheme.components.TFormField;
+	const colors = {
+		...tuiDefaultTheme.colors,
+		...overrides.colors ?? {}
+	};
+	const defaultLinkFromColors = {
+		...defaultLink ?? {},
+		style: mergeStyleToken(defaultLink?.style, colors.link ? { fg: colors.link } : void 0),
+		visitedStyle: mergeStyleToken(defaultLink?.visitedStyle, colors.linkVisited ? { fg: colors.linkVisited } : void 0)
+	};
+	const linkStyle = link?.underline === false ? mergeStyleToken(mergeStyleToken(defaultLinkFromColors.style, link?.style), { underline: false }) : mergeStyleToken(defaultLinkFromColors.style, link?.style);
+	const linkVisitedStyle = link?.underline === false ? mergeStyleToken(mergeStyleToken(defaultLinkFromColors.visitedStyle, link?.visitedStyle), { underline: false }) : mergeStyleToken(defaultLinkFromColors.visitedStyle, link?.visitedStyle);
+	const linkHoverStyle = mergeStyleToken(defaultLinkFromColors.hoverStyle, link?.hoverStyle);
+	return {
+		colors,
+		components: {
+			TLink: {
+				...defaultLinkFromColors,
+				...link ?? {},
+				style: linkStyle,
+				hoverStyle: link?.hoverUnderline === false && link?.hoverStyle?.underline == null ? mergeStyleToken(linkHoverStyle, { underline: false }) : linkHoverStyle,
+				focusStyle: mergeStyleToken(defaultLinkFromColors.focusStyle, link?.focusStyle),
+				visitedStyle: linkVisitedStyle
+			},
+			TTable: {
+				...defaultTable ?? {},
+				...table ?? {},
+				headerStyle: mergeStyleToken(defaultTable?.headerStyle, table?.headerStyle),
+				borderStyle: mergeStyleToken(defaultTable?.borderStyle, table?.borderStyle),
+				rowStyle: mergeStyleToken(defaultTable?.rowStyle, table?.rowStyle),
+				selectedStyle: mergeStyleToken(defaultTable?.selectedStyle, table?.selectedStyle),
+				activeStyle: mergeStyleToken(defaultTable?.activeStyle, table?.activeStyle)
+			},
+			TFormField: {
+				...defaultFormField ?? {},
+				...formField ?? {},
+				labelStyle: mergeStyleToken(defaultFormField?.labelStyle, formField?.labelStyle),
+				helpStyle: mergeStyleToken(defaultFormField?.helpStyle, formField?.helpStyle),
+				errorStyle: mergeStyleToken(defaultFormField?.errorStyle, formField?.errorStyle)
+			}
+		}
+	};
+}
+const TuiThemeContextKey = injectionKey("TuiTheme");
+
+//#endregion
+//#region src/vue/components/TView.ts
+const EMPTY_RECT = Object.freeze({
+	x: 0,
+	y: 0,
+	w: 0,
+	h: 0
+});
+const TView = defineComponent({
+	name: "TView",
+	props: {
+		x: {
+			type: Number,
+			required: true
+		},
+		y: {
+			type: Number,
+			required: true
+		},
+		w: {
+			type: Number,
+			required: true
+		},
+		h: {
+			type: Number,
+			required: true
+		},
+		zIndex: {
+			type: Number,
+			default: 0
+		},
+		scrollX: {
+			type: Number,
+			default: 0
+		},
+		scrollY: {
+			type: Number,
+			default: 0
+		},
+		focusable: {
+			type: Boolean,
+			default: false
+		},
+		selectable: {
+			type: Boolean,
+			default: void 0
+		},
+		selectionScrollBy: {
+			type: Function,
+			default: void 0
+		},
+		autoFocus: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"clickCapture",
+		"click",
+		"dblclickCapture",
+		"dblclick",
+		"pointerdownCapture",
+		"pointerdown",
+		"pointerupCapture",
+		"pointerup",
+		"pointermoveCapture",
+		"pointermove",
+		"pointerenterCapture",
+		"pointerenter",
+		"pointerleaveCapture",
+		"pointerleave",
+		"wheelCapture",
+		"wheel",
+		"keydownCapture",
+		"keydown",
+		"keyupCapture",
+		"keyup",
+		"focusCapture",
+		"focus",
+		"blurCapture",
+		"blur"
+	],
+	setup(props, { emit, slots }) {
+		const parent = useLayout();
+		const { render, events } = useTerminal();
+		const parentStack = useRenderStack();
+		const { visible, rootProps } = useVisibility({ provide: true });
+		const parentEventZ = inject(EventZIndexContextKey, computed(() => 0));
+		const eventZ = computed(() => (parentEventZ.value ?? 0) + (props.zIndex ?? 0));
+		const rawRect = computed(() => translateRect({
+			x: props.x,
+			y: props.y,
+			w: props.w,
+			h: props.h
+		}, parent.originX, parent.originY));
+		const rect = computed(() => {
+			const translated = rawRect.value;
+			if (!parent.clipRect) return translated;
+			return intersectRect(translated, parent.clipRect) ?? EMPTY_RECT;
+		});
+		const { id } = useTerminalNode(() => ({
+			rect: rect.value,
+			zIndex: eventZ.value,
+			visible: visible.value,
+			focusable: props.focusable,
+			selectable: props.selectable,
+			selectionScrollBy: props.selectionScrollBy,
+			handlers: {
+				clickCapture: (e) => emit("clickCapture", e),
+				click: (e) => emit("click", e),
+				dblclickCapture: (e) => emit("dblclickCapture", e),
+				dblclick: (e) => emit("dblclick", e),
+				pointerdownCapture: (e) => emit("pointerdownCapture", e),
+				pointerdown: (e) => emit("pointerdown", e),
+				pointerupCapture: (e) => emit("pointerupCapture", e),
+				pointerup: (e) => emit("pointerup", e),
+				pointermoveCapture: (e) => emit("pointermoveCapture", e),
+				pointermove: (e) => emit("pointermove", e),
+				pointerenterCapture: (e) => emit("pointerenterCapture", e),
+				pointerenter: (e) => emit("pointerenter", e),
+				pointerleaveCapture: (e) => emit("pointerleaveCapture", e),
+				pointerleave: (e) => emit("pointerleave", e),
+				wheelCapture: (e) => emit("wheelCapture", e),
+				wheel: (e) => emit("wheel", e),
+				keydownCapture: (e) => emit("keydownCapture", e),
+				keydown: (e) => emit("keydown", e),
+				keyupCapture: (e) => emit("keyupCapture", e),
+				keyup: (e) => emit("keyup", e),
+				focusCapture: (e) => emit("focusCapture", e),
+				focus: (e) => emit("focus", e),
+				blurCapture: (e) => emit("blurCapture", e),
+				blur: (e) => emit("blur", e)
+			}
+		}));
+		watchEffect(() => {
+			if (!props.autoFocus) return;
+			if (!visible.value) return;
+			const manager = events.value;
+			const nodeId = id.value;
+			if (!manager || !nodeId) return;
+			if (manager.getFocused() === nodeId) return;
+			manager.focus(nodeId);
+		});
+		const childLayout = shallowReactive({
+			originX: 0,
+			originY: 0,
+			clipRect: null
+		});
+		const childStack = computed(() => render.createStack(parentStack.value, props.zIndex));
+		watchEffect(() => {
+			const translated = rawRect.value;
+			childLayout.originX = translated.x - Math.floor(props.scrollX);
+			childLayout.originY = translated.y - Math.floor(props.scrollY);
+			childLayout.clipRect = rect.value;
+		});
+		provide(LayoutContextKey, childLayout);
+		provide(RenderStackKey, childStack);
+		provide(EventZIndexContextKey, eventZ);
+		return () => h("div", rootProps, slots.default?.());
+	}
+});
+
+//#endregion
+//#region src/vue/scheduler/frame-mailbox.ts
+const EMPTY = Symbol("frame-mailbox-empty");
+/**
+* Coalesces many producer updates into a single scheduler frame task.
+*
+* This helper is currently internal to vue-tui. It is used by library
+* components and internal tests, but it is not exported from the package root.
+*
+* Default behavior keeps only the latest queued value. If `merge` is provided,
+* the pending value is updated with `merge(prev, next)`.
+*
+* Only the first queue() call in a pending cycle schedules a frame task.
+* Later queue() calls update the pending payload and are reported as dropped
+* producer updates when the frame task runs.
+*
+* droppedUpdates are reported after apply() succeeds. They only appear in
+* framePerf when apply() also invalidates and produces a rendered frame sample.
+* If apply() throws, scheduler error stats include mailbox queued/dropped
+* metadata for the failed delivery attempt. The pending payload has already
+* been cleared; mailbox delivery is fail-fast and does not retry stale payloads
+* on later frames.
+*
+* cancel() is best-effort at scheduler level. The run callback still guards
+* `disposed || !hasPending`, because a scheduler may already have taken a
+* snapshot of tasks for the current frame.
+*
+* queue() returns false only when the scheduler explicitly rejects the task.
+* Legacy void-returning schedulers are treated as accepted for compatibility.
+* Owners should call dispose() before the component/scope that owns the
+* mailbox is destroyed.
+*
+* id is scheduler-global. Components should include instance id and producer
+* name, for example `TList:${uid}:wheel`.
+*/
+function createFrameMailbox(options) {
+	let disposed = false;
+	let hasPending = false;
+	let pending = EMPTY;
+	let queued = 0;
+	let pendingTaskId = null;
+	function clearPending() {
+		hasPending = false;
+		pending = EMPTY;
+		queued = 0;
+		pendingTaskId = null;
+	}
+	function currentTaskId() {
+		if (pendingTaskId) return pendingTaskId;
+		const id = typeof options.id === "function" ? options.id() : options.id;
+		if (!id) throw new Error("createFrameMailbox requires a non-empty task id");
+		pendingTaskId = id;
+		return pendingTaskId;
+	}
+	function queue(value) {
+		if (disposed) return false;
+		const wasPending = hasPending;
+		const taskId = wasPending ? pendingTaskId : currentTaskId();
+		let nextPending;
+		try {
+			nextPending = hasPending && options.merge ? options.merge(pending, value) : value;
+		} catch (error) {
+			clearPending();
+			if (wasPending) options.scheduler.cancelFrameTask?.(taskId);
+			throw error;
+		}
+		pending = nextPending;
+		hasPending = true;
+		queued++;
+		if (wasPending) return true;
+		let accepted;
+		try {
+			accepted = options.scheduler.queueFrameTask({
+				id: taskId,
+				reason: options.reason,
+				priority: options.priority,
+				sync: options.sync,
+				run(ctx) {
+					if (disposed || !hasPending) return;
+					const value$1 = pending;
+					const count = queued;
+					const dropped = Math.max(0, count - 1);
+					clearPending();
+					ctx.reportMailboxDeliveryAttempt?.({
+						id: taskId,
+						queued: count,
+						dropped
+					});
+					options.apply(value$1, ctx, {
+						queued: count,
+						dropped
+					});
+					ctx.reportDroppedUpdates?.(dropped);
+				}
+			});
+		} catch (error) {
+			clearPending();
+			throw error;
+		}
+		if (accepted === false) {
+			clearPending();
+			return false;
+		}
+		return true;
+	}
+	function replacePending(value) {
+		if (disposed) return false;
+		if (!hasPending) return queue(value);
+		pending = value;
+		return true;
+	}
+	function cancel() {
+		const taskId = pendingTaskId;
+		clearPending();
+		if (taskId) options.scheduler.cancelFrameTask?.(taskId);
+	}
+	function dispose() {
+		cancel();
+		disposed = true;
+	}
+	return {
+		queue,
+		replacePending,
+		cancel,
+		dispose,
+		hasPending: () => hasPending,
+		peek: () => hasPending ? pending : void 0
+	};
+}
+
+//#endregion
+//#region src/vue/utils/style-cache.ts
+const EMPTY_STYLE = Object.freeze({});
+const inverseStyleCache = new WeakMap();
+const dimStyleCache = new WeakMap();
+function cacheBase(base) {
+	for (const key in base) if (Object.prototype.hasOwnProperty.call(base, key)) return base;
+	return EMPTY_STYLE;
+}
+function cacheable(base) {
+	return Object.isFrozen(base);
+}
+function defaultActiveStyle(base) {
+	if (base.inverse) return base;
+	base = cacheBase(base);
+	if (!cacheable(base)) return {
+		...base,
+		inverse: true
+	};
+	let cached = inverseStyleCache.get(base);
+	if (!cached) {
+		cached = Object.freeze({
+			...base,
+			inverse: true
+		});
+		inverseStyleCache.set(base, cached);
+	}
+	return cached;
+}
+function defaultDimStyle(base) {
+	if (base.dim) return base;
+	base = cacheBase(base);
+	if (!cacheable(base)) return {
+		...base,
+		dim: true
+	};
+	let cached = dimStyleCache.get(base);
+	if (!cached) {
+		cached = Object.freeze({
+			...base,
+			dim: true
+		});
+		dimStyleCache.set(base, cached);
+	}
+	return cached;
+}
+
+//#endregion
+//#region src/vue/linkify.ts
+const DEFAULT_PROTOCOLS = Object.freeze([
+	"http",
+	"https",
+	"mailto"
+]);
+const URL_TEXT_RE = /(?:https?:\/\/|mailto:|\.{1,2}\/|\/|#|\?)[^\s<>"'`，。；：！？、]+/giu;
+const TRAILING_PUNCTUATION_RE = /[.,;:!?，。；：！？、]/u;
+const TRAILING_CLOSER_RE = /[)\]}）】》」』”’]/u;
+const TEXT_BOUNDARY_RE = /[\s([{<:="'`，。；：！？、（【《「『“‘]/u;
+const CLOSE_TO_OPEN = {
+	")": "(",
+	"]": "[",
+	"}": "{",
+	"）": "（",
+	"】": "【",
+	"》": "《",
+	"」": "「",
+	"』": "『",
+	"”": "“",
+	"’": "‘"
+};
+function protocolSet(options) {
+	return new Set(options.protocols ?? DEFAULT_PROTOCOLS);
+}
+function scheme(raw) {
+	return raw.match(/^[a-z][a-z0-9+.-]*:/i)?.[0].slice(0, -1).toLowerCase() ?? null;
+}
+function isRelativeCandidate(raw) {
+	if (raw.startsWith("./")) return raw.length > 2;
+	if (raw.startsWith("../")) return raw.length > 3;
+	if (raw.startsWith("/")) return raw.length > 1;
+	if (raw.startsWith("#")) return raw.length > 1;
+	if (raw.startsWith("?")) return raw.length > 1;
+	return false;
+}
+function hasTextBoundary(text, index) {
+	return index === 0 || TEXT_BOUNDARY_RE.test(text[index - 1] ?? "");
+}
+function lastChar(value) {
+	return value[value.length - 1] ?? "";
+}
+function splitTrailingPunctuation(raw) {
+	let body = raw;
+	let suffix = "";
+	let changed = true;
+	while (changed && body) {
+		changed = false;
+		while (body && TRAILING_PUNCTUATION_RE.test(lastChar(body))) {
+			suffix = lastChar(body) + suffix;
+			body = body.slice(0, -1);
+			changed = true;
+		}
+		while (body && TRAILING_CLOSER_RE.test(lastChar(body))) {
+			const ch = lastChar(body);
+			const open = CLOSE_TO_OPEN[ch];
+			if (!open) break;
+			let opens = 0;
+			let closes = 0;
+			for (const c of body) if (c === open) opens++;
+			else if (c === ch) closes++;
+			if (closes <= opens) break;
+			suffix = ch + suffix;
+			body = body.slice(0, -1);
+			changed = true;
+		}
+	}
+	return {
+		body,
+		suffix
+	};
+}
+function normalizeLinkifiedHref(body, options) {
+	const protocols = protocolSet(options);
+	const maxUrlLength = options.maxUrlLength;
+	if (maxUrlLength != null && body.length > Math.max(0, Math.floor(maxUrlLength))) return null;
+	const rawScheme = scheme(body);
+	if (rawScheme === "http" || rawScheme === "https" || rawScheme === "mailto") {
+		if (!protocols.has(rawScheme)) return null;
+		return sanitizeDomHref(body, { allowRelative: false });
+	}
+	if (options.allowRelative && isRelativeCandidate(body)) return sanitizeDomHref(body, { allowRelative: true });
+	return null;
+}
+function linkifyTextSegments(text, options = {}) {
+	if (!text) return [];
+	const out = [];
+	const regex = new RegExp(URL_TEXT_RE.source, URL_TEXT_RE.flags);
+	let cursor = 0;
+	let match;
+	while ((match = regex.exec(text)) != null) {
+		const raw = match[0] ?? "";
+		if (!raw) {
+			regex.lastIndex = Math.max(regex.lastIndex, match.index + 1);
+			continue;
+		}
+		const { body, suffix } = splitTrailingPunctuation(raw);
+		if (!hasTextBoundary(text, match.index)) continue;
+		if (isRelativeCandidate(body) && text[match.index - 1] === ":" && /[a-z0-9]/iu.test(text[match.index - 2] ?? "")) continue;
+		const href = normalizeLinkifiedHref(body, options);
+		if (!href) continue;
+		if (match.index > cursor) out.push({ text: text.slice(cursor, match.index) });
+		out.push({
+			text: body,
+			href
+		});
+		if (suffix) out.push({ text: suffix });
+		cursor = match.index + raw.length;
+	}
+	if (cursor < text.length) out.push({ text: text.slice(cursor) });
+	return out.length ? out : [{ text }];
+}
+
+//#endregion
+export { TView, TuiThemeContextKey, createFrameMailbox, createTheme, defaultActiveStyle, defaultDimStyle, linkifyTextSegments, tuiDefaultTheme };