cli-menu-kit 0.1.26 → 0.2.1

package/dist/page-layout.js

@@ -0,0 +1,195 @@
+"use strict";
+/**
+ * Page Layout System - Simple Configuration API
+ * Architecture: Header + Main Area + Footer
+ *
+ * This is the simple, configuration-based API that users want.
+ * Just pass config objects, no need to create components manually.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderPage = renderPage;
+const api_js_1 = require("./api.js");
+const header_js_1 = require("./components/display/header.js");
+const headers_js_1 = require("./components/display/headers.js");
+/**
+ * Render Header
+ */
+function renderHeaderSection(config) {
+    if (!config || config.type === 'none') {
+        return;
+    }
+    const topBlankLines = Math.max(0, config.topBlankLines ?? 0);
+    for (let i = 0; i < topBlankLines; i += 1) {
+        console.log('');
+    }
+    if (config.type === 'simple' && config.text) {
+        (0, headers_js_1.renderSimpleHeader)(config.text);
+    }
+    else if (config.type === 'section' && config.text) {
+        // Add extra blank line before section header for spacing between menus
+        console.log('');
+        (0, headers_js_1.renderSectionHeader)(config.text, config.width || 50);
+    }
+    else if (config.type === 'full') {
+        // Render full header WITHOUT menuTitle
+        (0, header_js_1.renderHeader)({
+            asciiArt: config.asciiArt || [],
+            figletText: config.figletText,
+            figletFont: config.figletFont,
+            figletSize: config.figletSize,
+            figletScale: config.figletScale,
+            title: config.title || '',
+            titleColor: config.titleColor,
+            titleGradientStart: config.titleGradientStart,
+            titleGradientEnd: config.titleGradientEnd,
+            description: config.description,
+            descriptionColor: config.descriptionColor,
+            descriptionGradientStart: config.descriptionGradientStart,
+            descriptionGradientEnd: config.descriptionGradientEnd,
+            version: config.version,
+            url: config.url,
+            menuTitle: undefined, // Don't render menuTitle in header
+            boxWidth: config.boxWidth,
+            showBoxBorder: config.showBoxBorder,
+            fillBox: config.fillBox,
+            fillBoxColor: config.fillBoxColor,
+            fillBoxGradientStart: config.fillBoxGradientStart,
+            fillBoxGradientEnd: config.fillBoxGradientEnd,
+            asciiArtGradientStart: config.asciiArtGradientStart,
+            asciiArtGradientEnd: config.asciiArtGradientEnd,
+            asciiArtColor: config.asciiArtColor
+        });
+    }
+}
+/**
+ * Render Menu Title (separate from header)
+ */
+function renderMenuTitle(title) {
+    if (title) {
+        console.log('');
+        console.log(`  ${title}`);
+    }
+}
+/**
+ * Render Main Area
+ */
+async function renderMainArea(config, hints) {
+    if (config.type === 'menu' && config.menu) {
+        // Menu in main area - pass hints from footer
+        const result = await api_js_1.menuAPI.radio({
+            options: config.menu.options,
+            allowLetterKeys: config.menu.allowLetterKeys ?? true,
+            allowNumberKeys: config.menu.allowNumberKeys ?? true,
+            preserveOnSelect: config.menu.preserveOnSelect ?? true,
+            preserveOnExit: config.menu.preserveOnExit ?? config.menu.preserveOnSelect ?? false,
+            onExit: config.menu.onExit
+        }, hints); // Pass hints as second parameter
+        return result;
+    }
+    else if (config.render) {
+        // Custom render function
+        await config.render();
+        return null;
+    }
+    return null;
+}
+/**
+ * Render Footer
+ */
+async function renderFooterSection(config, hints) {
+    if (!config) {
+        return null;
+    }
+    let result = null;
+    // 1. Menu (if present)
+    if (config.menu) {
+        result = await api_js_1.menuAPI.radio({
+            options: config.menu.options,
+            allowLetterKeys: config.menu.allowLetterKeys ?? true,
+            allowNumberKeys: config.menu.allowNumberKeys ?? true,
+            preserveOnSelect: config.menu.preserveOnSelect ?? true,
+            preserveOnExit: config.menu.preserveOnExit ?? config.menu.preserveOnSelect ?? false,
+            onExit: config.menu.onExit
+        }, hints || config.hints);
+    }
+    // 2. Input (if present)
+    else if (config.input) {
+        result = await api_js_1.inputAPI.text({
+            prompt: config.input.prompt,
+            defaultValue: config.input.defaultValue,
+            allowEmpty: config.input.allowEmpty ?? false,
+            lang: config.input.lang,
+            preserveOnExit: config.input.preserveOnExit,
+            onExit: config.input.onExit
+        });
+    }
+    // 3. Ask (if present)
+    else if (config.ask) {
+        const askResult = await api_js_1.menuAPI.boolean({
+            question: config.ask.question,
+            helperText: config.ask.helperText,
+            defaultValue: config.ask.defaultValue ?? false,
+            orientation: config.ask.horizontal ? 'horizontal' : 'vertical',
+            preserveOnSelect: config.ask.preserveOnSelect ?? false,
+            preserveOnExit: config.ask.preserveOnExit ?? config.ask.preserveOnSelect ?? false,
+            onExit: config.ask.onExit
+        });
+        result = askResult;
+    }
+    return result;
+}
+/**
+ * Render complete page with simple configuration API
+ *
+ * @example
+ * ```typescript
+ * const result = await renderPage({
+ *   header: {
+ *     type: 'full',
+ *     asciiArt: ['...'],
+ *     title: 'My App',
+ *     description: 'Description',
+ *     version: '1.0.0'
+ *   },
+ *   mainArea: {
+ *     type: 'menu',
+ *     menu: {
+ *       options: ['Option 1', 'Option 2'],
+ *       allowLetterKeys: true,
+ *       allowNumberKeys: true
+ *     }
+ *   },
+ *   footer: {
+ *     hints: ['↑↓ Navigate', 'Enter Confirm']
+ *   }
+ * });
+ * ```
+ */
+async function renderPage(config) {
+    // 1. Render Header (without menuTitle)
+    renderHeaderSection(config.header);
+    // 2. Render Menu Title (if provided)
+    renderMenuTitle(config.header?.menuTitle);
+    // 3. Determine where to render hints
+    let mainResult = null;
+    if (config.footer?.menu || config.footer?.ask || config.footer?.input) {
+        // Footer has interactive element - render main area first, then footer with hints
+        if (config.mainArea.type === 'menu' && config.mainArea.menu) {
+            mainResult = await renderMainArea(config.mainArea, undefined);
+        }
+        else if (config.mainArea.render) {
+            await config.mainArea.render();
+            // Add newline after custom render to separate from footer menu
+            // This ensures the escape codes from initTerminal don't interfere
+            console.log('');
+        }
+        // Render footer with hints
+        const footerResult = await renderFooterSection(config.footer, config.footer.hints);
+        return footerResult || mainResult;
+    }
+    else {
+        // Footer has no interactive element - render main area with hints from footer
+        mainResult = await renderMainArea(config.mainArea, config.footer?.hints);
+        return mainResult;
+    }
+}

package/dist/types/input.types.d.ts

@@ -5,6 +5,8 @@
  * Base input configuration
  */
 export interface BaseInputConfig {
+    /** UI language (default: current i18n language) */
+    lang?: 'zh' | 'en';
     /** Input prompt text */
     prompt: string;
     /** Default value */
@@ -15,6 +17,8 @@ export interface BaseInputConfig {
     errorMessage?: string;
     /** Goodbye message function */
     onExit?: () => void;
+    /** Keep current input rendered on Ctrl+C exit instead of clearing (default: false) */
+    preserveOnExit?: boolean;
 }
 /**
  * Text input configuration
@@ -58,6 +62,8 @@ export interface LanguageSelectorConfig {
     prompt?: string;
     /** Goodbye message function */
     onExit?: () => void;
+    /** Keep current selector rendered on Ctrl+C exit instead of clearing (default: false) */
+    preserveOnExit?: boolean;
 }
 /**
  * Modify field configuration
@@ -75,6 +81,8 @@ export interface ModifyFieldConfig {
     validate?: (value: string) => boolean | string;
     /** Goodbye message function */
     onExit?: () => void;
+    /** Keep current prompt rendered on Ctrl+C exit instead of clearing (default: false) */
+    preserveOnExit?: boolean;
 }
 /**
  * Input result types

package/dist/types/menu.types.d.ts

@@ -1,7 +1,6 @@
 /**
  * Menu component types for CLI Menu Kit
  */
-import { MenuLayout } from './layout.types.js';
 /**
  * Menu option (can be string, object with label, or section header)
  */
@@ -20,10 +19,6 @@ export interface BaseMenuConfig {
     title?: string;
     /** Input prompt text */
     prompt?: string;
-    /** Hint texts to display */
-    hints?: string[];
-    /** Layout configuration */
-    layout?: MenuLayout;
     /** Color for highlighted items */
     highlightColor?: string;
     /** Goodbye message function */
@@ -32,6 +27,8 @@ export interface BaseMenuConfig {
     separatorWidth?: number;
     /** Keep menu rendered after selection instead of clearing (default: false) */
     preserveOnSelect?: boolean;
+    /** Keep current menu rendered on Ctrl+C exit instead of clearing (default: false) */
+    preserveOnExit?: boolean;
 }
 /**
  * Radio menu (single-select) configuration
@@ -69,6 +66,8 @@ export interface CheckboxMenuConfig extends BaseMenuConfig {
 export interface BooleanMenuConfig extends BaseMenuConfig {
     /** Question text */
     question: string;
+    /** Optional helper text rendered on the next line */
+    helperText?: string;
     /** Default value */
     defaultValue?: boolean;
     /** Yes text */
@@ -90,3 +89,60 @@ export interface CheckboxMenuResult {
     values: string[];
 }
 export type BooleanMenuResult = boolean;
+/**
+ * Checkbox table menu configuration
+ * Combines checkbox selection with table display
+ */
+export interface CheckboxTableMenuConfig extends BaseMenuConfig {
+    /** Table columns definition */
+    columns: Array<{
+        header: string;
+        key: string;
+        width?: number;
+        align?: 'left' | 'center' | 'right';
+    }>;
+    /** Data rows (each row is an object with column keys) */
+    data: Record<string, any>[];
+    /** Optional: Key to use as unique identifier (default: index) */
+    idKey?: string;
+    /** Default selected row indices or IDs */
+    defaultSelected?: (number | string)[];
+    /** Minimum selections required */
+    minSelections?: number;
+    /** Maximum selections allowed */
+    maxSelections?: number;
+    /** Allow select all */
+    allowSelectAll?: boolean;
+    /** Allow invert selection */
+    allowInvert?: boolean;
+    /** Show table borders (default: false for checkbox menu style) */
+    showBorders?: boolean;
+    /** Show header separator (default: true) */
+    showHeaderSeparator?: boolean;
+    /** Phase/group separators (for grouping rows) */
+    separators?: Array<{
+        /** Insert before this row index */
+        beforeIndex: number;
+        /** Separator label */
+        label: string;
+        /** Optional description shown below the separator */
+        description?: string;
+    }>;
+    /** Separator label and description alignment (default: 'center') */
+    separatorAlign?: 'left' | 'center' | 'right';
+    /** Column width calculation mode */
+    widthMode?: 'auto' | 'fixed';
+    /** Checkbox column width (default: 4) */
+    checkboxWidth?: number;
+}
+/**
+ * Checkbox table menu result
+ */
+export interface CheckboxTableMenuResult {
+    /** Selected row indices */
+    indices: number[];
+    /** Selected row data objects */
+    rows: Record<string, any>[];
+    /** Selected IDs (if idKey is provided) */
+    ids?: (string | number)[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cli-menu-kit",
-  "version": "0.1.26",
+  "version": "0.2.1",
   "description": "A lightweight, customizable CLI menu system with keyboard shortcuts and real-time rendering",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,5 +31,8 @@
   },
   "engines": {
     "node": ">=14.0.0"
+  },
+  "dependencies": {
+    "figlet": "^1.10.0"
   }
 }