@simon_he/vue-tui 1.0.2 → 1.1.0

package/dist/index.js

@@ -1,17 +1,18 @@
-import { createTerminal } from "./create-terminal-DBFNYr8f.js";
-import "./hyperlink-Bn02UXJb.js";
-import "./sgr-BmzxEjAO.js";
-import "./ansi-palette-CNXqFciC.js";
-import { createDomRenderer } from "./dom-renderer-BniJSQyX.js";
-import "./wheel-scroll-vBRaQ7p-.js";
-import { TView, createTheme, linkifyTextSegments, tuiDefaultTheme } from "./linkify-D_gzn9Xq.js";
-import "./runtime-rfcZCyJq.js";
-import "./trace-CjzYeIxN.js";
+import { createTerminal } from "./hyperlink-_1FAj7Wq.js";
+import "./width-GqllnV8C.js";
+import "./ansi-palette-CH6jc2Z7.js";
+import { createDomRenderer } from "./dom-renderer-DXx8fWzD.js";
+import "./rect-DUpeDfBg.js";
+import { TText, TView, createTheme, linkifyTextSegments, tuiDefaultTheme } from "./linkify-D68T7rdW.js";
+import "./runtime-Byf8XXOT.js";
+import "./frame-perf-CHpWhbC4.js";
+import "./trace-Bh8WnoMo.js";
 import "./env-Cl8qmNFN.js";
-import { TAutocompleteInput, TBadge, TCheckbox, TCode, TDataTable, TDivider, TFormField, TLink, TLinkifyText, TList, TPasswordInput, TRadioGroup, TSlider, TSwitch, TTable, TTag, TTree, TerminalProvider, createTInputHostPlugin } from "./TTree-kzhlB5P0.js";
-import "./terminal-selection-DBinO6p5.js";
-import { TBox, TCommandPalette, TDialog, TInput, TSelect, TText, computeCommandPaletteMatchRanges } from "./TSelect-DR0FomSu.js";
-import "./frame-perf-C6Xfg85O.js";
+import { TAutocompleteInput, TBadge, TCheckbox, TCode, TDataTable, TDivider, TFormField, TLink, TLinkifyText, TList, TPasswordInput, TRadioGroup, TSlider, TSwitch, TTable, TTag, TTree, TerminalProvider, createTInputHostPlugin } from "./TTree-CGdE-CYu.js";
+import "./terminal-selection-4W1SJj4c.js";
+import "./debug-logger-CmsGI4of.js";
+import { TBox, TCommandPalette, TDialog, TInput, TSelect, computeCommandPaletteMatchRanges } from "./TSelect-tJ87rKPM.js";
 import "./path-mnSgEpCm.js";
+import "./wheel-scroll-DASkEZr-.js";
 
 export { TAutocompleteInput, TBadge, TBox, TCheckbox, TCode, TCommandPalette, TDataTable, TDialog, TDivider, TFormField, TInput, TLink, TLinkifyText, TList, TPasswordInput, TRadioGroup, TSelect, TSlider, TSwitch, TTable, TTag, TText, TTree, TView, TerminalProvider, computeCommandPaletteMatchRanges, createDomRenderer, createTInputHostPlugin, createTerminal, createTheme, linkifyTextSegments, tuiDefaultTheme };

package/dist/{linkify-D_gzn9Xq.js → linkify-D68T7rdW.js}

@@ -1,5 +1,5 @@
-import { sanitizeDomHref } from "./hyperlink-Bn02UXJb.js";
-import { EventZIndexContextKey, LayoutContextKey, RenderStackKey, injectionKey, intersectRect, translateRect, useLayout, useRenderStack, useTerminal, useTerminalNode, useVisibility } from "./wheel-scroll-vBRaQ7p-.js";
+import { sanitizeDomHref } from "./hyperlink-_1FAj7Wq.js";
+import { EventZIndexContextKey, LayoutContextKey, RenderStackKey, injectionKey, intersectRect, padEndByCells$1 as padEndByCells, sanitizeInlineText, sanitizeTextBlock, sliceByCells, sliceByCellsRange, spaces, textCellWidth$1 as textCellWidth, translateRect, useLayout, useRenderNode, useRenderStack, useTerminal, useTerminalNode, useVisibility, wrapByCells } from "./rect-DUpeDfBg.js";
 import { computed, defineComponent, h, inject, provide, shallowReactive, watchEffect } from "vue";
 
 //#region src/vue/theme.ts
@@ -105,6 +105,167 @@ function createTheme(overrides = {}) {
 }
 const TuiThemeContextKey = injectionKey("TuiTheme");
 
+//#endregion
+//#region src/vue/components/TText.ts
+function fitText(text, max) {
+	if (max <= 0) return "";
+	text = sanitizeInlineText(text);
+	return sliceByCells(text, max);
+}
+function splitLines(text) {
+	return sanitizeTextBlock(text).split("\n");
+}
+function computeDefaultWidth(text) {
+	const lines = splitLines(text);
+	let max = 0;
+	for (const line of lines) max = Math.max(max, textCellWidth(line));
+	return max;
+}
+const TText = defineComponent({
+	name: "TText",
+	props: {
+		x: {
+			type: Number,
+			required: true
+		},
+		y: {
+			type: Number,
+			required: true
+		},
+		zIndex: {
+			type: Number,
+			default: 0
+		},
+		value: {
+			type: String,
+			required: true
+		},
+		w: {
+			type: Number,
+			default: void 0
+		},
+		h: {
+			type: Number,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			default: void 0
+		},
+		clear: {
+			type: Boolean,
+			default: true
+		},
+		wrap: {
+			type: Boolean,
+			default: false
+		},
+		depsKey: {
+			type: null,
+			default: void 0
+		}
+	},
+	setup(props) {
+		const { terminal, defaultStyle } = useTerminal();
+		const layout = useLayout();
+		const { visible, rootProps } = useVisibility();
+		const defaultWidth = computed(() => computeDefaultWidth(props.value));
+		const lines = computed(() => {
+			const w = props.w ?? defaultWidth.value;
+			if (w <= 0) return [""];
+			if (!props.wrap) return splitLines(props.value).map((l) => fitText(l, w));
+			const safe = sanitizeTextBlock(props.value);
+			return wrapByCells(safe, w).map((l) => fitText(l, w));
+		});
+		const absRect = computed(() => {
+			const width = props.w ?? defaultWidth.value;
+			const height = props.h ?? (props.wrap ? lines.value.length || 1 : lines.value.length || 1);
+			const raw = {
+				x: props.x,
+				y: props.y,
+				w: width,
+				h: height
+			};
+			const translated = translateRect(raw, layout.originX, layout.originY);
+			if (!layout.clipRect) return translated;
+			return intersectRect(translated, layout.clipRect) ?? {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			};
+		});
+		const fullRect = computed(() => {
+			const width = props.w ?? defaultWidth.value;
+			const height = props.h ?? (props.wrap ? lines.value.length || 1 : lines.value.length || 1);
+			return translateRect({
+				x: props.x,
+				y: props.y,
+				w: width,
+				h: height
+			}, layout.originX, layout.originY);
+		});
+		useRenderNode(() => ({
+			zIndex: props.zIndex,
+			rect: visible.value ? absRect.value : {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			},
+			deps: [
+				visible.value,
+				absRect.value,
+				fullRect.value,
+				props.value,
+				props.w,
+				props.h,
+				props.wrap,
+				props.style,
+				defaultStyle.value,
+				props.depsKey
+			],
+			paint: (dirtyRows) => {
+				if (!visible.value) return;
+				const r = absRect.value;
+				if (r.w <= 0 || r.h <= 0) return;
+				const full = fullRect.value;
+				const style = props.style ?? defaultStyle.value;
+				const blank = props.clear ? spaces(r.w) : "";
+				const out = lines.value;
+				const dx = Math.max(0, Math.floor(r.x - full.x));
+				const fullY = Math.floor(full.y);
+				const paintRow = (y) => {
+					const relY = y - r.y;
+					if (relY < 0 || relY >= r.h) return;
+					const i = y - fullY;
+					if (i < 0 || i >= out.length) {
+						if (props.clear) terminal.write(blank, {
+							x: r.x,
+							y,
+							style
+						});
+						return;
+					}
+					const src = out[i] ?? "";
+					const clipped = dx > 0 ? sliceByCellsRange(src, dx, dx + r.w) : sliceByCells(src, r.w);
+					terminal.write(padEndByCells(clipped, r.w), {
+						x: r.x,
+						y,
+						style
+					});
+				};
+				if (!dirtyRows) {
+					for (let i = 0; i < r.h; i++) paintRow(r.y + i);
+					return;
+				}
+				for (const y of dirtyRows) paintRow(y);
+			}
+		}));
+		return () => h("span", rootProps);
+	}
+});
+
 //#endregion
 //#region src/vue/components/TView.ts
 const EMPTY_RECT = Object.freeze({
@@ -267,6 +428,35 @@ const TView = defineComponent({
 	}
 });
 
+//#endregion
+//#region src/vue/components/simple-utils.ts
+function clamp(n, min, max) {
+	return Math.max(min, Math.min(max, n));
+}
+function mergeStyle(...styles) {
+	const out = {};
+	for (const style of styles) {
+		if (!style) continue;
+		Object.assign(out, style);
+	}
+	return out;
+}
+function fitCellText(value, width, align = "left") {
+	const w = Math.max(0, Math.floor(width));
+	if (w <= 0) return "";
+	const text = sliceByCells(sanitizeInlineText(String(value ?? "")), w);
+	if (align === "right") {
+		const cells = textCellWidth(text);
+		return `${" ".repeat(Math.max(0, w - cells))}${text}`;
+	}
+	return padEndByCells(text, w);
+}
+function repeatToCells(ch, width) {
+	const w = Math.max(0, Math.floor(width));
+	if (w <= 0) return "";
+	return ch.repeat(w);
+}
+
 //#endregion
 //#region src/vue/scheduler/frame-mailbox.ts
 const EMPTY = Symbol("frame-mailbox-empty");
@@ -559,4 +749,4 @@ function linkifyTextSegments(text, options = {}) {
 }
 
 //#endregion
-export { TView, TuiThemeContextKey, createFrameMailbox, createTheme, defaultActiveStyle, defaultDimStyle, linkifyTextSegments, tuiDefaultTheme };
+export { TText, TView, TuiThemeContextKey, clamp, createFrameMailbox, createTheme, defaultActiveStyle, defaultDimStyle, fitCellText, linkifyTextSegments, mergeStyle, repeatToCells, tuiDefaultTheme };