@simon_he/vue-tui 0.0.1 → 0.0.3

package/README.md

@@ -13,7 +13,7 @@
 ```vue
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { TerminalProvider, TBox, TInput, TText, useLayout } from 'vue-terminal'
+import { TerminalProvider, TBox, TInput, TText, useLayout } from '@simon_he/vue-tui'
 
 const layout = useLayout()
 const cols = computed(() => layout.clipRect?.w ?? 80)

package/dist/index.cjs

@@ -454,33 +454,6 @@ function createNodePathPickerProvider() {
   };
 }
 
-// src/cli/recording.ts
-async function loadFs() {
-  return import("fs");
-}
-async function writeEventLog(path, events) {
-  const { writeFileSync } = await loadFs();
-  const lines = events.map((e) => JSON.stringify(e)).join("\n");
-  writeFileSync(path, `${lines}${lines ? "\n" : ""}`, "utf8");
-}
-async function writeSnapshot(path, lines) {
-  const { writeFileSync } = await loadFs();
-  writeFileSync(path, `${lines.join("\n")}
-`, "utf8");
-}
-async function readEventLog(path) {
-  const { readFileSync } = await loadFs();
-  const raw = readFileSync(path, "utf8");
-  const out = [];
-  for (const line of raw.split(/\r?\n/g)) {
-    const trimmed = line.trim();
-    if (!trimmed)
-      continue;
-    out.push(JSON.parse(trimmed));
-  }
-  return out;
-}
-
 // src/utils/path.ts
 function normalizeSeparators(input) {
   return input.replace(/\\/g, "/");
@@ -652,43 +625,31 @@ function resolveUserPath(workspaceAbs, input) {
   return resolvePath(normalizePath(workspaceAbs), normalized);
 }
 
-// src/core/buffer/width.ts
-var fullWidthRanges = [
-  [4352, 4447],
-  [9001, 9002],
-  [11904, 42191],
-  [44032, 55203],
-  [63744, 64255],
-  [65040, 65049],
-  [65072, 65135],
-  [65280, 65376],
-  [65504, 65510]
-];
-function isFullWidthCodePoint(codePoint) {
-  for (const [start, end] of fullWidthRanges) {
-    if (codePoint >= start && codePoint <= end)
-      return true;
-  }
-  return false;
+// src/cli/recording.ts
+async function loadFs() {
+  return import("fs");
 }
-function isEmojiLike(codePoint) {
-  return codePoint >= 127744 && codePoint <= 129791 || codePoint >= 127462 && codePoint <= 127487;
+async function writeEventLog(path, events) {
+  const { writeFileSync } = await loadFs();
+  const lines = events.map((e) => JSON.stringify(e)).join("\n");
+  writeFileSync(path, `${lines}${lines ? "\n" : ""}`, "utf8");
 }
-var extendedPictographicRe = null;
-try {
-  extendedPictographicRe = new RegExp("\\p{Extended_Pictographic}", "u");
-} catch {
-  extendedPictographicRe = null;
+async function writeSnapshot(path, lines) {
+  const { writeFileSync } = await loadFs();
+  writeFileSync(path, `${lines.join("\n")}
+`, "utf8");
 }
-function charCellWidth(text) {
-  if (!text)
-    return 1;
-  if (extendedPictographicRe == null ? void 0 : extendedPictographicRe.test(text))
-    return 2;
-  const codePoint = text.codePointAt(0);
-  if (codePoint == null)
-    return 1;
-  return isFullWidthCodePoint(codePoint) || isEmojiLike(codePoint) ? 2 : 1;
+async function readEventLog(path) {
+  const { readFileSync } = await loadFs();
+  const raw = readFileSync(path, "utf8");
+  const out = [];
+  for (const line of raw.split(/\r?\n/g)) {
+    const trimmed = line.trim();
+    if (!trimmed)
+      continue;
+    out.push(JSON.parse(trimmed));
+  }
+  return out;
 }
 
 // src/core/ansi/sgr.ts
@@ -896,6 +857,45 @@ function parseAnsiSgr(input, baseStyle = {}) {
   return segments;
 }
 
+// src/core/buffer/width.ts
+var fullWidthRanges = [
+  [4352, 4447],
+  [9001, 9002],
+  [11904, 42191],
+  [44032, 55203],
+  [63744, 64255],
+  [65040, 65049],
+  [65072, 65135],
+  [65280, 65376],
+  [65504, 65510]
+];
+function isFullWidthCodePoint(codePoint) {
+  for (const [start, end] of fullWidthRanges) {
+    if (codePoint >= start && codePoint <= end)
+      return true;
+  }
+  return false;
+}
+function isEmojiLike(codePoint) {
+  return codePoint >= 127744 && codePoint <= 129791 || codePoint >= 127462 && codePoint <= 127487;
+}
+var extendedPictographicRe = null;
+try {
+  extendedPictographicRe = new RegExp("\\p{Extended_Pictographic}", "u");
+} catch {
+  extendedPictographicRe = null;
+}
+function charCellWidth(text) {
+  if (!text)
+    return 1;
+  if (extendedPictographicRe == null ? void 0 : extendedPictographicRe.test(text))
+    return 2;
+  const codePoint = text.codePointAt(0);
+  if (codePoint == null)
+    return 1;
+  return isFullWidthCodePoint(codePoint) || isEmojiLike(codePoint) ? 2 : 1;
+}
+
 // src/core/buffer/buffer.ts
 var DEFAULT_STYLE = Object.freeze({});
 function normalizeStyle(style) {
@@ -6770,6 +6770,30 @@ var TInput = (0, import_vue19.defineComponent)({
           return;
         }
       }
+      const base64EncodeBytes = (bytes) => {
+        const table = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+        let out = "";
+        for (let i = 0; i < bytes.length; i += 3) {
+          const a = bytes[i] ?? 0;
+          const b = bytes[i + 1] ?? 0;
+          const c = bytes[i + 2] ?? 0;
+          const triple = a << 16 | b << 8 | c;
+          out += table[triple >> 18 & 63] ?? "";
+          out += table[triple >> 12 & 63] ?? "";
+          out += i + 1 < bytes.length ? table[triple >> 6 & 63] ?? "" : "=";
+          out += i + 2 < bytes.length ? table[triple & 63] ?? "" : "=";
+        }
+        return out;
+      };
+      const base64EncodeText = (text) => {
+        if (typeof TextEncoder !== "undefined")
+          return base64EncodeBytes(new TextEncoder().encode(text));
+        const bin = unescape(encodeURIComponent(text));
+        const bytes = new Uint8Array(bin.length);
+        for (let i = 0; i < bin.length; i++)
+          bytes[i] = bin.charCodeAt(i);
+        return base64EncodeBytes(bytes);
+      };
       const copyText = async (text) => {
         var _a, _b, _c, _d, _e, _f;
         if (!text)
@@ -6785,7 +6809,7 @@ var TInput = (0, import_vue19.defineComponent)({
         const proc = globalThis.process;
         if (((_b = proc == null ? void 0 : proc.stdout) == null ? void 0 : _b.write) && ((_c = proc == null ? void 0 : proc.stdout) == null ? void 0 : _c.isTTY)) {
           try {
-            const base64 = typeof Buffer !== "undefined" ? Buffer.from(text, "utf-8").toString("base64") : btoa(unescape(encodeURIComponent(text)));
+            const base64 = base64EncodeText(text);
             proc.stdout.write(`\x1B]52;c;${base64}\x07`);
             return true;
           } catch {
@@ -7985,13 +8009,15 @@ var TSelect = (0, import_vue23.defineComponent)({
     h: { type: Number, required: true },
     zIndex: { type: Number, default: 0 },
     options: { type: Array, required: true },
-    modelValue: { type: Number, default: 0 },
+    modelValue: { type: [Number, Array], default: 0 },
+    multiple: { type: Boolean, default: false },
+    multipleEmit: { type: String, default: "value" },
     style: { type: Object, default: void 0 },
     highlightStyle: { type: Object, default: void 0 },
     autoFocus: { type: Boolean, default: false },
     closeOnBlur: { type: Boolean, default: false }
   },
-  emits: ["update:modelValue", "change", "close", "focus", "blur", "keydown"],
+  emits: ["update:modelValue", "change", "confirm", "close", "focus", "blur", "keydown"],
   setup(props, { emit }) {
     const { terminal, scheduler, defaultStyle, events } = useTerminal();
     const layout = useLayout();
@@ -7999,7 +8025,17 @@ var TSelect = (0, import_vue23.defineComponent)({
     const parentEventZ = (0, import_vue23.inject)(EventZIndexContextKey, (0, import_vue23.computed)(() => 0));
     const eventZ = (0, import_vue23.computed)(() => (parentEventZ.value ?? 0) + (props.zIndex ?? 0));
     const focused = (0, import_vue23.ref)(false);
-    const active = (0, import_vue23.ref)(props.modelValue);
+    const initialActive = (() => {
+      const max = Math.max(0, props.options.length - 1);
+      if (!props.multiple) {
+        const idx = typeof props.modelValue === "number" ? props.modelValue : 0;
+        return clamp6(idx, 0, max);
+      }
+      const selected = Array.isArray(props.modelValue) ? props.modelValue : [];
+      const first = selected[0] ?? 0;
+      return clamp6(first, 0, max);
+    })();
+    const active = (0, import_vue23.ref)(initialActive);
     const absRect = (0, import_vue23.computed)(() => {
       const raw = { x: props.x, y: props.y, w: props.w, h: props.h };
       const translated = translateRect(raw, layout.originX, layout.originY);
@@ -8008,7 +8044,13 @@ var TSelect = (0, import_vue23.defineComponent)({
       return intersectRect(translated, layout.clipRect) ?? { x: 0, y: 0, w: 0, h: 0 };
     });
     (0, import_vue23.watchEffect)(() => {
-      active.value = clamp6(props.modelValue, 0, Math.max(0, props.options.length - 1));
+      const max = Math.max(0, props.options.length - 1);
+      if (!props.multiple) {
+        const idx = typeof props.modelValue === "number" ? props.modelValue : 0;
+        active.value = clamp6(idx, 0, max);
+        return;
+      }
+      active.value = clamp6(active.value, 0, max);
     });
     function getOptionLabel(opt) {
       return typeof opt === "string" ? opt : opt.label;
@@ -8016,30 +8058,93 @@ var TSelect = (0, import_vue23.defineComponent)({
     function getOptionDetail(opt) {
       return typeof opt === "string" ? void 0 : opt.detail;
     }
-    function commit(index) {
+    function commitSingle(index) {
       const next = clamp6(index, 0, Math.max(0, props.options.length - 1));
       active.value = next;
       emit("update:modelValue", next);
       const opt = props.options[next];
       emit("change", opt ? getOptionLabel(opt) : null);
     }
+    function getSelectedIndices() {
+      if (!props.multiple)
+        return [];
+      const max = Math.max(0, props.options.length - 1);
+      const raw = Array.isArray(props.modelValue) ? props.modelValue : [];
+      const set = /* @__PURE__ */ new Set();
+      for (const v of raw) {
+        if (typeof v !== "number" || !Number.isFinite(v))
+          continue;
+        set.add(clamp6(Math.trunc(v), 0, max));
+      }
+      return [...set].sort((a, b) => a - b);
+    }
+    function makeMultiplePayload(indices) {
+      const values = indices.map((i) => props.options[i]).filter(Boolean).map((opt) => getOptionLabel(opt));
+      return { indices, values };
+    }
+    function emitMultiple(name, indices) {
+      const payload = makeMultiplePayload(indices);
+      if (props.multipleEmit === "index") {
+        emit(name, payload.indices);
+        return;
+      }
+      if (props.multipleEmit === "both") {
+        emit(name, payload);
+        return;
+      }
+      emit(name, payload.values);
+    }
+    function toggleMultiple(index) {
+      const nextIndex = clamp6(index, 0, Math.max(0, props.options.length - 1));
+      active.value = nextIndex;
+      const set = new Set(getSelectedIndices());
+      if (set.has(nextIndex))
+        set.delete(nextIndex);
+      else
+        set.add(nextIndex);
+      const indices = [...set].sort((a, b) => a - b);
+      emit("update:modelValue", indices);
+      emitMultiple("change", indices);
+    }
+    function confirmMultiple() {
+      const indices = getSelectedIndices();
+      emitMultiple("confirm", indices);
+    }
+    function commit(index) {
+      if (props.multiple)
+        toggleMultiple(index);
+      else
+        commitSingle(index);
+    }
     function onKeydown(e) {
       emit("keydown", e);
       if (e.key === "ArrowUp") {
         e.preventDefault();
         active.value = clamp6(active.value - 1, 0, Math.max(0, props.options.length - 1));
-        emit("update:modelValue", active.value);
+        if (!props.multiple)
+          emit("update:modelValue", active.value);
         scheduler.invalidate();
         return;
       }
       if (e.key === "ArrowDown") {
         e.preventDefault();
         active.value = clamp6(active.value + 1, 0, Math.max(0, props.options.length - 1));
-        emit("update:modelValue", active.value);
+        if (!props.multiple)
+          emit("update:modelValue", active.value);
         scheduler.invalidate();
         return;
       }
+      if (props.multiple && (e.code === "Space" || e.key === " " || e.key === "Spacebar")) {
+        e.preventDefault();
+        toggleMultiple(active.value);
+        return;
+      }
       if (e.key === "Enter") {
+        if (props.multiple) {
+          e.preventDefault();
+          confirmMultiple();
+          return;
+        }
         commit(active.value);
         return;
       }
@@ -8093,7 +8198,7 @@ var TSelect = (0, import_vue23.defineComponent)({
     useRenderNode(() => ({
       zIndex: props.zIndex,
       rect: absRect.value,
-      deps: [visible.value, absRect.value, props.w, props.h, props.options, props.modelValue, props.style, props.highlightStyle, focused.value, active.value, defaultStyle.value],
+      deps: [visible.value, absRect.value, props.w, props.h, props.options, props.modelValue, props.multiple, props.multipleEmit, props.style, props.highlightStyle, focused.value, active.value, defaultStyle.value],
       paint: () => {
         if (!visible.value)
           return;
@@ -8101,36 +8206,41 @@ var TSelect = (0, import_vue23.defineComponent)({
         if (r.w <= 0 || r.h <= 0)
           return;
         const base = props.style ?? defaultStyle.value;
-        const selectedBase = props.highlightStyle ?? { ...base, bg: "yellow", fg: "black" };
+        const highlightBase = props.highlightStyle ?? { ...base, bg: "yellow", fg: "black" };
         const detailDimStyle = { ...base, dim: true };
-        const selectedDetailStyle = { ...selectedBase, dim: true };
+        const highlightDetailStyle = { ...highlightBase, dim: true };
+        const selectedSet = props.multiple ? new Set(getSelectedIndices()) : null;
         for (let i = 0; i < r.h; i++) {
           const opt = props.options[i];
           if (!opt) {
             terminal.write(" ".repeat(r.w), { x: r.x, y: r.y + i, style: base });
             continue;
           }
-          const isSelected = i === active.value;
+          const isActiveRow = i === active.value;
+          const isChecked = props.multiple ? selectedSet.has(i) : isActiveRow;
+          const isHighlighted = props.multiple ? focused.value && isActiveRow : isActiveRow;
+          const prefix = props.multiple ? isChecked ? "[x] " : "[ ] " : "";
           const label = sanitizeInlineText(getOptionLabel(opt));
           const detail = getOptionDetail(opt);
           const rawDetail = detail ? sanitizeInlineText(detail) : "";
-          const labelCells = textCellWidth3(label);
+          const labelText = `${prefix}${label}`;
+          const labelCells = textCellWidth3(labelText);
           const minGap = 2;
           const availableForDetail = r.w - labelCells - minGap;
           if (rawDetail && availableForDetail >= 4) {
-            const labelStyle = isSelected ? selectedBase : base;
-            terminal.write(label, { x: r.x, y: r.y + i, style: labelStyle });
+            const labelStyle = isHighlighted ? highlightBase : base;
+            terminal.write(labelText, { x: r.x, y: r.y + i, style: labelStyle });
             const detailCells = textCellWidth3(rawDetail);
             const actualDetailWidth = Math.min(detailCells, availableForDetail);
             const gapWidth = r.w - labelCells - actualDetailWidth;
-            const gapStyle = isSelected ? selectedBase : base;
+            const gapStyle = isHighlighted ? highlightBase : base;
             terminal.write(" ".repeat(gapWidth), { x: r.x + labelCells, y: r.y + i, style: gapStyle });
             const detailText = sliceByCells(rawDetail, availableForDetail);
-            const dStyle = isSelected ? selectedDetailStyle : detailDimStyle;
+            const dStyle = isHighlighted ? highlightDetailStyle : detailDimStyle;
             terminal.write(detailText, { x: r.x + labelCells + gapWidth, y: r.y + i, style: dStyle });
           } else {
-            const line = padEndByCells(sliceByCells(label, r.w), r.w);
-            const style = isSelected ? selectedBase : base;
+            const line = padEndByCells(sliceByCells(labelText, r.w), r.w);
+            const style = isHighlighted ? highlightBase : base;
             terminal.write(line, { x: r.x, y: r.y + i, style });
           }
         }

package/dist/index.d.ts

@@ -77,19 +77,15 @@ type PathPickerProvider = Readonly<{
 }>;
 declare function createNodePathPickerProvider(): PathPickerProvider;
 
-//#endregion
-//#region src/cli/recording.d.ts
-declare function writeEventLog(path: string, events: readonly TerminalEventRecord[]): Promise<void>;
-declare function writeSnapshot(path: string, lines: readonly string[]): Promise<void>;
-declare function readEventLog(path: string): Promise<TerminalEventRecord[]>;
-
 //#endregion
 //#region src/cli/path-suggest.d.ts
 declare function resolveUserPath(workspaceAbs: string, input: string): string;
 
 //#endregion
-//#region src/core/buffer/width.d.ts
-declare function charCellWidth(text: string): 1 | 2;
+//#region src/cli/recording.d.ts
+declare function writeEventLog(path: string, events: readonly TerminalEventRecord[]): Promise<void>;
+declare function writeSnapshot(path: string, lines: readonly string[]): Promise<void>;
+declare function readEventLog(path: string): Promise<TerminalEventRecord[]>;
 
 //#endregion
 //#region src/core/types.d.ts
@@ -160,6 +156,10 @@ interface AnsiSegment {
 }
 declare function parseAnsiSgr(input: string, baseStyle?: Style): AnsiSegment[];
 
+//#endregion
+//#region src/core/buffer/width.d.ts
+declare function charCellWidth(text: string): 1 | 2;
+
 //#endregion
 //#region src/core/terminal/create-terminal.d.ts
 declare function createTerminal(opts: {

package/dist/index.js

@@ -417,32 +417,6 @@ function createNodePathPickerProvider() {
 	};
 }
 
-//#endregion
-//#region src/cli/recording.ts
-async function loadFs() {
-	return import("node:fs");
-}
-async function writeEventLog(path, events) {
-	const { writeFileSync } = await loadFs();
-	const lines = events.map((e) => JSON.stringify(e)).join("\n");
-	writeFileSync(path, `${lines}${lines ? "\n" : ""}`, "utf8");
-}
-async function writeSnapshot(path, lines) {
-	const { writeFileSync } = await loadFs();
-	writeFileSync(path, `${lines.join("\n")}\n`, "utf8");
-}
-async function readEventLog(path) {
-	const { readFileSync } = await loadFs();
-	const raw = readFileSync(path, "utf8");
-	const out = [];
-	for (const line of raw.split(/\r?\n/g)) {
-		const trimmed = line.trim();
-		if (!trimmed) continue;
-		out.push(JSON.parse(trimmed));
-	}
-	return out;
-}
-
 //#endregion
 //#region src/utils/path.ts
 function normalizeSeparators(input) {
@@ -617,37 +591,29 @@ function resolveUserPath(workspaceAbs, input) {
 }
 
 //#endregion
-//#region src/core/buffer/width.ts
-const fullWidthRanges = [
-	[4352, 4447],
-	[9001, 9002],
-	[11904, 42191],
-	[44032, 55203],
-	[63744, 64255],
-	[65040, 65049],
-	[65072, 65135],
-	[65280, 65376],
-	[65504, 65510]
-];
-function isFullWidthCodePoint(codePoint) {
-	for (const [start, end] of fullWidthRanges) if (codePoint >= start && codePoint <= end) return true;
-	return false;
+//#region src/cli/recording.ts
+async function loadFs() {
+	return import("node:fs");
 }
-function isEmojiLike(codePoint) {
-	return codePoint >= 127744 && codePoint <= 129791 || codePoint >= 127462 && codePoint <= 127487;
+async function writeEventLog(path, events) {
+	const { writeFileSync } = await loadFs();
+	const lines = events.map((e) => JSON.stringify(e)).join("\n");
+	writeFileSync(path, `${lines}${lines ? "\n" : ""}`, "utf8");
 }
-let extendedPictographicRe = null;
-try {
-	extendedPictographicRe = new RegExp("\\p{Extended_Pictographic}", "u");
-} catch {
-	extendedPictographicRe = null;
+async function writeSnapshot(path, lines) {
+	const { writeFileSync } = await loadFs();
+	writeFileSync(path, `${lines.join("\n")}\n`, "utf8");
 }
-function charCellWidth(text) {
-	if (!text) return 1;
-	if (extendedPictographicRe === null || extendedPictographicRe === void 0 ? void 0 : extendedPictographicRe.test(text)) return 2;
-	const codePoint = text.codePointAt(0);
-	if (codePoint == null) return 1;
-	return isFullWidthCodePoint(codePoint) || isEmojiLike(codePoint) ? 2 : 1;
+async function readEventLog(path) {
+	const { readFileSync } = await loadFs();
+	const raw = readFileSync(path, "utf8");
+	const out = [];
+	for (const line of raw.split(/\r?\n/g)) {
+		const trimmed = line.trim();
+		if (!trimmed) continue;
+		out.push(JSON.parse(trimmed));
+	}
+	return out;
 }
 
 //#endregion
@@ -953,6 +919,40 @@ function parseAnsiSgr(input, baseStyle = {}) {
 	return segments;
 }
 
+//#endregion
+//#region src/core/buffer/width.ts
+const fullWidthRanges = [
+	[4352, 4447],
+	[9001, 9002],
+	[11904, 42191],
+	[44032, 55203],
+	[63744, 64255],
+	[65040, 65049],
+	[65072, 65135],
+	[65280, 65376],
+	[65504, 65510]
+];
+function isFullWidthCodePoint(codePoint) {
+	for (const [start, end] of fullWidthRanges) if (codePoint >= start && codePoint <= end) return true;
+	return false;
+}
+function isEmojiLike(codePoint) {
+	return codePoint >= 127744 && codePoint <= 129791 || codePoint >= 127462 && codePoint <= 127487;
+}
+let extendedPictographicRe = null;
+try {
+	extendedPictographicRe = new RegExp("\\p{Extended_Pictographic}", "u");
+} catch {
+	extendedPictographicRe = null;
+}
+function charCellWidth(text) {
+	if (!text) return 1;
+	if (extendedPictographicRe === null || extendedPictographicRe === void 0 ? void 0 : extendedPictographicRe.test(text)) return 2;
+	const codePoint = text.codePointAt(0);
+	if (codePoint == null) return 1;
+	return isFullWidthCodePoint(codePoint) || isEmojiLike(codePoint) ? 2 : 1;
+}
+
 //#endregion
 //#region src/core/buffer/buffer.ts
 const DEFAULT_STYLE = Object.freeze({});
@@ -7182,6 +7182,28 @@ const TInput = defineComponent({
 					return;
 				}
 			}
+			const base64EncodeBytes = (bytes) => {
+				const table = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+				let out = "";
+				for (let i = 0; i < bytes.length; i += 3) {
+					const a = bytes[i] ?? 0;
+					const b = bytes[i + 1] ?? 0;
+					const c = bytes[i + 2] ?? 0;
+					const triple = a << 16 | b << 8 | c;
+					out += table[triple >> 18 & 63] ?? "";
+					out += table[triple >> 12 & 63] ?? "";
+					out += i + 1 < bytes.length ? table[triple >> 6 & 63] ?? "" : "=";
+					out += i + 2 < bytes.length ? table[triple & 63] ?? "" : "=";
+				}
+				return out;
+			};
+			const base64EncodeText = (text) => {
+				if (typeof TextEncoder !== "undefined") return base64EncodeBytes(new TextEncoder().encode(text));
+				const bin = unescape(encodeURIComponent(text));
+				const bytes = new Uint8Array(bin.length);
+				for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+				return base64EncodeBytes(bytes);
+			};
 			const copyText = async (text) => {
 				var _nav$clipboard, _proc$stdout, _proc$stdout2, _doc$body;
 				if (!text) return false;
@@ -7192,7 +7214,7 @@ const TInput = defineComponent({
 				} catch {}
 				const proc = globalThis.process;
 				if ((proc === null || proc === void 0 || (_proc$stdout = proc.stdout) === null || _proc$stdout === void 0 ? void 0 : _proc$stdout.write) && (proc === null || proc === void 0 || (_proc$stdout2 = proc.stdout) === null || _proc$stdout2 === void 0 ? void 0 : _proc$stdout2.isTTY)) try {
-					const base64 = typeof Buffer !== "undefined" ? Buffer.from(text, "utf-8").toString("base64") : btoa(unescape(encodeURIComponent(text)));
+					const base64 = base64EncodeText(text);
 					proc.stdout.write(`\u001B]52;c;${base64}\u0007`);
 					return true;
 				} catch {}
@@ -8639,9 +8661,17 @@ const TSelect = defineComponent({
 			required: true
 		},
 		modelValue: {
-			type: Number,
+			type: [Number, Array],
 			default: 0
 		},
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		multipleEmit: {
+			type: String,
+			default: "value"
+		},
 		style: {
 			type: Object,
 			default: void 0
@@ -8662,6 +8692,7 @@ const TSelect = defineComponent({
 	emits: [
 		"update:modelValue",
 		"change",
+		"confirm",
 		"close",
 		"focus",
 		"blur",
@@ -8674,7 +8705,17 @@ const TSelect = defineComponent({
 		const parentEventZ = inject(EventZIndexContextKey, computed(() => 0));
 		const eventZ = computed(() => (parentEventZ.value ?? 0) + (props.zIndex ?? 0));
 		const focused = ref(false);
-		const active = ref(props.modelValue);
+		const initialActive = (() => {
+			const max = Math.max(0, props.options.length - 1);
+			if (!props.multiple) {
+				const idx = typeof props.modelValue === "number" ? props.modelValue : 0;
+				return clamp(idx, 0, max);
+			}
+			const selected = Array.isArray(props.modelValue) ? props.modelValue : [];
+			const first = selected[0] ?? 0;
+			return clamp(first, 0, max);
+		})();
+		const active = ref(initialActive);
 		const absRect = computed(() => {
 			const raw = {
 				x: props.x,
@@ -8692,7 +8733,13 @@ const TSelect = defineComponent({
 			};
 		});
 		watchEffect(() => {
-			active.value = clamp(props.modelValue, 0, Math.max(0, props.options.length - 1));
+			const max = Math.max(0, props.options.length - 1);
+			if (!props.multiple) {
+				const idx = typeof props.modelValue === "number" ? props.modelValue : 0;
+				active.value = clamp(idx, 0, max);
+				return;
+			}
+			active.value = clamp(active.value, 0, max);
 		});
 		function getOptionLabel(opt) {
 			return typeof opt === "string" ? opt : opt.label;
@@ -8700,30 +8747,88 @@ const TSelect = defineComponent({
 		function getOptionDetail(opt) {
 			return typeof opt === "string" ? void 0 : opt.detail;
 		}
-		function commit(index) {
+		function commitSingle(index) {
 			const next = clamp(index, 0, Math.max(0, props.options.length - 1));
 			active.value = next;
 			emit("update:modelValue", next);
 			const opt = props.options[next];
 			emit("change", opt ? getOptionLabel(opt) : null);
 		}
+		function getSelectedIndices() {
+			if (!props.multiple) return [];
+			const max = Math.max(0, props.options.length - 1);
+			const raw = Array.isArray(props.modelValue) ? props.modelValue : [];
+			const set = new Set();
+			for (const v of raw) {
+				if (typeof v !== "number" || !Number.isFinite(v)) continue;
+				set.add(clamp(Math.trunc(v), 0, max));
+			}
+			return [...set].sort((a, b) => a - b);
+		}
+		function makeMultiplePayload(indices) {
+			const values = indices.map((i) => props.options[i]).filter(Boolean).map((opt) => getOptionLabel(opt));
+			return {
+				indices,
+				values
+			};
+		}
+		function emitMultiple(name, indices) {
+			const payload = makeMultiplePayload(indices);
+			if (props.multipleEmit === "index") {
+				emit(name, payload.indices);
+				return;
+			}
+			if (props.multipleEmit === "both") {
+				emit(name, payload);
+				return;
+			}
+			emit(name, payload.values);
+		}
+		function toggleMultiple(index) {
+			const nextIndex = clamp(index, 0, Math.max(0, props.options.length - 1));
+			active.value = nextIndex;
+			const set = new Set(getSelectedIndices());
+			if (set.has(nextIndex)) set.delete(nextIndex);
+			else set.add(nextIndex);
+			const indices = [...set].sort((a, b) => a - b);
+			emit("update:modelValue", indices);
+			emitMultiple("change", indices);
+		}
+		function confirmMultiple() {
+			const indices = getSelectedIndices();
+			emitMultiple("confirm", indices);
+		}
+		function commit(index) {
+			if (props.multiple) toggleMultiple(index);
+			else commitSingle(index);
+		}
 		function onKeydown(e) {
 			emit("keydown", e);
 			if (e.key === "ArrowUp") {
 				e.preventDefault();
 				active.value = clamp(active.value - 1, 0, Math.max(0, props.options.length - 1));
-				emit("update:modelValue", active.value);
+				if (!props.multiple) emit("update:modelValue", active.value);
 				scheduler.invalidate();
 				return;
 			}
 			if (e.key === "ArrowDown") {
 				e.preventDefault();
 				active.value = clamp(active.value + 1, 0, Math.max(0, props.options.length - 1));
-				emit("update:modelValue", active.value);
+				if (!props.multiple) emit("update:modelValue", active.value);
 				scheduler.invalidate();
 				return;
 			}
+			if (props.multiple && (e.code === "Space" || e.key === " " || e.key === "Spacebar")) {
+				e.preventDefault();
+				toggleMultiple(active.value);
+				return;
+			}
 			if (e.key === "Enter") {
+				if (props.multiple) {
+					e.preventDefault();
+					confirmMultiple();
+					return;
+				}
 				commit(active.value);
 				return;
 			}
@@ -8777,6 +8882,8 @@ const TSelect = defineComponent({
 				props.h,
 				props.options,
 				props.modelValue,
+				props.multiple,
+				props.multipleEmit,
 				props.style,
 				props.highlightStyle,
 				focused.value,
@@ -8788,7 +8895,7 @@ const TSelect = defineComponent({
 				const r = absRect.value;
 				if (r.w <= 0 || r.h <= 0) return;
 				const base = props.style ?? defaultStyle.value;
-				const selectedBase = props.highlightStyle ?? {
+				const highlightBase = props.highlightStyle ?? {
 					...base,
 					bg: "yellow",
 					fg: "black"
@@ -8797,10 +8904,11 @@ const TSelect = defineComponent({
 					...base,
 					dim: true
 				};
-				const selectedDetailStyle = {
-					...selectedBase,
+				const highlightDetailStyle = {
+					...highlightBase,
 					dim: true
 				};
+				const selectedSet = props.multiple ? new Set(getSelectedIndices()) : null;
 				for (let i = 0; i < r.h; i++) {
 					const opt = props.options[i];
 					if (!opt) {
@@ -8811,16 +8919,20 @@ const TSelect = defineComponent({
 						});
 						continue;
 					}
-					const isSelected = i === active.value;
+					const isActiveRow = i === active.value;
+					const isChecked = props.multiple ? selectedSet.has(i) : isActiveRow;
+					const isHighlighted = props.multiple ? focused.value && isActiveRow : isActiveRow;
+					const prefix = props.multiple ? isChecked ? "[x] " : "[ ] " : "";
 					const label = sanitizeInlineText(getOptionLabel(opt));
 					const detail = getOptionDetail(opt);
 					const rawDetail = detail ? sanitizeInlineText(detail) : "";
-					const labelCells = textCellWidth$1(label);
+					const labelText = `${prefix}${label}`;
+					const labelCells = textCellWidth$1(labelText);
 					const minGap = 2;
 					const availableForDetail = r.w - labelCells - minGap;
 					if (rawDetail && availableForDetail >= 4) {
-						const labelStyle = isSelected ? selectedBase : base;
-						terminal.write(label, {
+						const labelStyle = isHighlighted ? highlightBase : base;
+						terminal.write(labelText, {
 							x: r.x,
 							y: r.y + i,
 							style: labelStyle
@@ -8828,22 +8940,22 @@ const TSelect = defineComponent({
 						const detailCells = textCellWidth$1(rawDetail);
 						const actualDetailWidth = Math.min(detailCells, availableForDetail);
 						const gapWidth = r.w - labelCells - actualDetailWidth;
-						const gapStyle = isSelected ? selectedBase : base;
+						const gapStyle = isHighlighted ? highlightBase : base;
 						terminal.write(" ".repeat(gapWidth), {
 							x: r.x + labelCells,
 							y: r.y + i,
 							style: gapStyle
 						});
 						const detailText = sliceByCells(rawDetail, availableForDetail);
-						const dStyle = isSelected ? selectedDetailStyle : detailDimStyle;
+						const dStyle = isHighlighted ? highlightDetailStyle : detailDimStyle;
 						terminal.write(detailText, {
 							x: r.x + labelCells + gapWidth,
 							y: r.y + i,
 							style: dStyle
 						});
 					} else {
-						const line = padEndByCells(sliceByCells(label, r.w), r.w);
-						const style = isSelected ? selectedBase : base;
+						const line = padEndByCells(sliceByCells(labelText, r.w), r.w);
+						const style = isHighlighted ? highlightBase : base;
 						terminal.write(line, {
 							x: r.x,
 							y: r.y + i,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simon_he/vue-tui",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A Vue 3 terminal UI component library",
   "author": "Simon He",
   "license": "MIT",
@@ -77,6 +77,7 @@
     "build:examples": "pnpm run build:goatchain && pnpm -C examples/basic build && pnpm -C examples/goatchain build",
     "build:examples:terminal": "pnpm run build:goatchain && pnpm -C examples/basic build:terminal && pnpm -C examples/goatchain build:terminal",
     "run:basic:terminal": "pnpm run build && pnpm -C examples/basic terminal",
+    "run:basic:multi-select:terminal": "pnpm run build && pnpm -C examples/basic build:terminal:multi-select && pnpm -C examples/basic terminal:multi-select",
     "run:goatchain:terminal": "pnpm run build:goatchain && pnpm -C examples/goatchain terminal",
     "format": "prettier --cache --write .",
     "lint": "eslint . --cache",