colored-table 0.1.0-alpha.0 → 0.2.0

package/LICENSE

@@ -1,7 +1,7 @@
 # MIT License
-
-Copyright (c) <2025> <earthnut.dev>
     
+Copyright (c) <2025> <Mr.MudBean>
+
 Permission to use, copy, modify, and/or distribute this software for any  
 purpose with or without fee is hereby granted, provided that the above  
 copyright notice and this permission notice appear in all copies.
@@ -16,7 +16,7 @@ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 
 # MIT 许可证
 
-版权所有 (c) [2025] [花生亻]
+版权所有 (c) [2025] [泥豆君]
 
 特此免费授予任何获得本软件及相关文档文件（以下简称“软件”）副本的人不受限制地处置该软件的权利，包括不受限制地使用、复制、修改、合并、发布、分发、再许可和/或出售该软件副本的权利，并允许向其提供该软件的人这样做，但须遵守以下条件：
 

package/README.md

@@ -1,9 +1,5 @@
 # 彩色表格
 
-~~一个在控制台构建表格的工具（自定义版 console.table ）~~
-
-~~本来想着写成在终端（node 环境）和控制台（浏览器环境）公用的，但是发现在浏览器环境表现不佳，且不同的浏览器环境渲染效果不同，还不如使用 `console.table`~~
-
 现在支持在浏览器环境打印彩色文本的表格，但是目前不支持自定义边框及长文本换行。因为在 `node` 使用的终端和浏览器的控制台渲染的方式不同，其核心代码也不尽相同。
 
 (目前的小问题就是当同行表情过多时会产生偏移)
@@ -12,10 +8,6 @@
 
 ```bash
 npm install  --save colored-table
-
-# 亦可 (两包以后将同步版本发布)
-
-npm install --save @qqi/table
 ```
 
 ## 使用
@@ -49,11 +41,11 @@ table();
 
 在浏览器效果：
 
-[![浏览器表格](https://raw.githubusercontent.com/earthnutDev/qqi/main/media/浏览器表格.png)](https://github.com/earthnutDev/qqi/blob/main/media/浏览器表格.png)
+[![浏览器表格](https://raw.githubusercontent.com/MrMudBean/qqi/main/media/浏览器表格.png)](https://github.com/MrMudBean/qqi/blob/main/media/浏览器表格.png)
 
 带表情的效果
 
-[![浏览器表格](https://raw.githubusercontent.com/earthnutDev/qqi/main/media/浏览器表格-with-emoji.png)](https://github.com/earthnutDev/qqi/blob/main/media/浏览器表格-with-emoji.png)
+[![浏览器表格](https://raw.githubusercontent.com/MrMudBean/qqi/main/media/浏览器表格-with-emoji.png)](https://github.com/MrMudBean/qqi/blob/main/media/浏览器表格-with-emoji.png)
 
 ### setFontSize
 
@@ -70,4 +62,4 @@ table.setFontSize(16); // 渲染表格会在控制台显示更大
 
 ## 文档地址
 
-[colored-table](https://earthnut.dev/colored-table)
+[colored-table](https://earthnut.dev/nmp/colored-table)

package/cjs/build/buildBody.js

@@ -0,0 +1,85 @@
+'use strict';
+
+var aTypeOfJs = require('a-type-of-js');
+var createPen = require('./createPen.js');
+var colorPen = require('color-pen');
+var lines = require('../lines.js');
+var _static = require('@color-pen/static');
+
+/**  构建表头  */
+function buildBody(body, lineList, hasHeader) {
+    /**  结果  */
+    let result = '';
+    /** 最大的下标  */
+    const lineMaxIndex = lineList.length - 1;
+    const { fine } = lines.lines;
+    lineList.forEach((e, i) => {
+        if (i === 0) {
+            result += _static.terminalResetStyle;
+            result += hasHeader ? fine.lc : fine.lt;
+        }
+        result += _static.terminalResetStyle;
+        result += fine.l.repeat(e + 2);
+        if (i === lineMaxIndex) {
+            result += _static.terminalResetStyle;
+            result += hasHeader ? fine.rc : fine.rt;
+        }
+        else {
+            result += _static.terminalResetStyle;
+            result += hasHeader ? fine.c : fine.ct;
+        }
+    });
+    result += '\n';
+    body.forEach((row, index) => {
+        /**  默认的画笔 (用于绘制空值时的表格)  */
+        const defaultPen = createPen.createPen(row);
+        lineList.forEach((e, i) => {
+            result += _static.terminalResetStyle;
+            result += fine.v;
+            /**  当前的元素  */
+            const ele = row.data[i];
+            // 元素为空则输出默认的样式
+            if (aTypeOfJs.isUndefined(ele) || aTypeOfJs.isNull(ele)) {
+                result += defaultPen `${'\u2002'.repeat(e + 2)}`;
+            }
+            else {
+                /**  默认的画笔 (用于绘制空值时的表格)  */
+                const cellPen = createPen.createPen(ele);
+                let str = ele.content?.toString() || '';
+                str = str
+                    .replace(/[\n]/g, '\\n')
+                    .replace(/\r/g, '\\r')
+                    .replace(/\t/g, '\\t');
+                result += _static.terminalResetStyle;
+                result += cellPen `\u2002${colorPen.cutoffStringWithChar(str, e)}\u2002`;
+            }
+            if (i === lineMaxIndex) {
+                result += _static.terminalResetStyle;
+                result += fine.v;
+            }
+        });
+        result += '\n';
+        const isLastRow = body.length - 1 === index;
+        lineList.forEach((e, i) => {
+            if (i === 0) {
+                result += _static.terminalResetStyle;
+                result += isLastRow ? fine.lb : fine.lc;
+            }
+            result += _static.terminalResetStyle;
+            result += fine.l.repeat(e + 2);
+            if (i === lineMaxIndex) {
+                // 最后一行的最后一个
+                result += _static.terminalResetStyle;
+                result += isLastRow ? fine.rb : fine.rc;
+            }
+            else {
+                result += _static.terminalResetStyle;
+                result += isLastRow ? fine.cb : fine.c;
+            }
+        });
+        result += '\n';
+    });
+    return result;
+}
+
+exports.buildBody = buildBody;

package/cjs/build/buildHeader.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var aTypeOfJs = require('a-type-of-js');
+var createPen = require('./createPen.js');
+var colorPen = require('color-pen');
+var lines = require('../lines.js');
+var _static = require('@color-pen/static');
+
+/**  构建表头  */
+function buildHeader(header, lineList) {
+    /**  结果  */
+    let result = '';
+    /** 最大的下标  */
+    const lineMaxIndex = lineList.length - 1;
+    const { fine } = lines.lines;
+    /**  默认的画笔 (用于绘制空值时的表格)  */
+    const defaultPen = createPen.createPen(header);
+    lineList.forEach((e, i) => {
+        if (i === 0) {
+            result += fine.lt;
+        }
+        result += _static.terminalResetStyle;
+        result += fine.l.repeat(e + 2);
+        if (i === lineMaxIndex) {
+            result += _static.terminalResetStyle;
+            result += fine.rt;
+        }
+        else {
+            result += _static.terminalResetStyle;
+            result += fine.ct;
+        }
+    });
+    result += '\n';
+    lineList.forEach((e, i) => {
+        result += _static.terminalResetStyle;
+        result += fine.v;
+        /**  当前的元素  */
+        const ele = header.data[i];
+        // 元素为空则输出默认的样式
+        if (aTypeOfJs.isUndefined(ele) || aTypeOfJs.isNull(ele)) {
+            result += _static.terminalResetStyle;
+            result += defaultPen('\u2002'.repeat(e + 2));
+        }
+        else {
+            /**  默认的画笔 (用于绘制空值时的表格)  */
+            const cellPen = createPen.createPen(ele);
+            let str = ele.content?.toString() ?? '';
+            str = str
+                .replace(/[\n]/g, '\\n')
+                .replace(/\r/g, '\\r')
+                .replace(/\t/g, '\\t');
+            result += _static.terminalResetStyle;
+            result += cellPen `\u2002${colorPen.cutoffStringWithChar(str, e)}\u2002`;
+        }
+        if (i === lineMaxIndex) {
+            result += fine.v;
+        }
+    });
+    result += '\n';
+    return result;
+}
+
+exports.buildHeader = buildHeader;

package/cjs/build/computerMaxLen.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var colorPen = require('color-pen');
+var global = require('../global.js');
+
+/**  计算得到最大的值  */
+function computerMaxLen(data) {
+    const result = [];
+    /**  计算  */
+    if (data.header) {
+        data.header.data.forEach((e, i) => {
+            const current = e?.content?.toString() ?? '';
+            result[i] = Math.max(result[i] ?? 0, global.browserEnv ? strInBrowserLength(current) : colorPen.strInTerminalLength(current));
+        });
+    }
+    if (data.body) {
+        data.body.forEach(row => {
+            row.data.forEach((e, i) => {
+                const current = e?.content?.toString() ?? '';
+                result[i] = Math.max(result[i] ?? 0, global.browserEnv
+                    ? strInBrowserLength(current)
+                    : colorPen.strInTerminalLength(current));
+            });
+        });
+    }
+    return result;
+}
+/**  字符串在浏览器环境的字符长度  */
+function strInBrowserLength(str) {
+    /**    */
+    let result = 0;
+    [...str].forEach(e => {
+        global.data.emojiRegex.lastIndex = 0;
+        global.data.chineseRegex.lastIndex = 0;
+        if (e.match(global.data.emojiRegex)) {
+            result += global.data.emojiLength;
+        }
+        else if (e.match(global.data.chineseRegex)) {
+            result += global.data.chineseLength;
+        }
+        else {
+            result++;
+        }
+    });
+    return Math.ceil(result);
+}
+
+exports.computerMaxLen = computerMaxLen;

package/cjs/build/createPen.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var aTypeOfJs = require('a-type-of-js');
+var colorPen = require('color-pen');
+
+/**  默认的笔  */
+function createPen(options) {
+    let defaultPen = colorPen.pen;
+    if (aTypeOfJs.isType(options)) {
+        if (options.bold)
+            defaultPen = defaultPen.bold;
+        if (!aTypeOfJs.isBusinessEmptyString(options.bgColor) &&
+            !aTypeOfJs.isUndefined(options.bgColor))
+            defaultPen = defaultPen.bgColor(options.bgColor);
+        if (!aTypeOfJs.isBusinessEmptyString(options.color) && !aTypeOfJs.isUndefined(options.color))
+            defaultPen = defaultPen.color(options.color);
+        if (options.italic)
+            defaultPen = defaultPen.italic;
+        if (options.underline)
+            defaultPen = defaultPen.underline;
+    }
+    return defaultPen;
+}
+
+exports.createPen = createPen;

package/cjs/build/index.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var colorPen = require('color-pen');
+var buildBody = require('./buildBody.js');
+var buildHeader = require('./buildHeader.js');
+var computerMaxLen = require('./computerMaxLen.js');
+var global = require('../global.js');
+
+/**  渲染  */
+function render(table, fontSize) {
+    /**  获取每一行最大宽度的元素的宽度组成的数组  */
+    const lineLen = computerMaxLen.computerMaxLen(table);
+    /**  是否有表头  */
+    let hasHeader = false;
+    let buildStr = '';
+    // 构建表头
+    if (table.header) {
+        hasHeader = true;
+        buildStr += buildHeader.buildHeader(table.header, lineLen);
+    }
+    buildStr += buildBody.buildBody(table.body, lineLen, hasHeader);
+    /**  彩色数组  */
+    const colorTextArr = colorPen.colorText(buildStr);
+    if (global.browserEnv) {
+        const strList = colorTextArr[0].split('%c');
+        const result = colorTextArr.map((e, i) => {
+            if (i > 0) {
+                /**  构建最小的单位的组  */
+                const doubleByteCharNumber = [...strList[i]].reduce((v, e) => {
+                    if (colorPen.strInTerminalLength(e) > 1) {
+                        global.data.emojiRegex.lastIndex = 0;
+                        if (e.match(global.data.emojiRegex))
+                            return v - (global.data.emojiLength - 2);
+                        return v + (2 - global.data.chineseLength);
+                    }
+                    return v;
+                }, 0);
+                const newStr = e +
+                    "font-family: Consolas,Monaco,Courier,'Courier New','等宽字体',monospace; font-size:" +
+                    fontSize +
+                    'px;word-spacing:normal;padding:0;margin:0;padding-right:' +
+                    doubleByteCharNumber * fontSize +
+                    'px';
+                return newStr;
+            }
+            return e;
+        });
+        /// 渲染表格
+        console.log(...result);
+    }
+    else {
+        console.log(...colorTextArr);
+    }
+}
+
+exports.render = render;

package/cjs/core.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var createHeaderProto = require('./proto/createHeaderProto.js');
+var parse = require('./parse/parse.js');
+var parseRow = require('./parse/parseRow.js');
+var index = require('./build/index.js');
+
+/**  构建一个用于控制台的表格  */
+function table(options) {
+    /**  构建初始化配置的表单  */
+    const [tableEle, tablePro] = parse.parse(options);
+    let fontSize = 12;
+    /**
+     * 核心技能
+     *
+     *  这里将构建表格
+     *
+     *
+     */
+    const core = () => index.render(tableEle, fontSize);
+    Object.setPrototypeOf(core, this);
+    Object.defineProperties(core, {
+        addRow: {
+            value: (data) => {
+                tableEle.body.push(parseRow.parseRow(data, tablePro));
+                return core;
+            },
+            configurable: false,
+            writable: false,
+            enumerable: false,
+        },
+        setHeader: {
+            value: (data) => {
+                tableEle.header = parseRow.parseRow(data, createHeaderProto.createHeaderProto(tablePro));
+                return core;
+            },
+            configurable: false,
+            writable: false,
+            enumerable: false,
+        },
+        setFontSize: {
+            value: (_fontSize) => {
+                fontSize = _fontSize;
+                return core;
+            },
+        },
+    });
+    return core;
+}
+
+exports.table = table;

package/cjs/ele/rowEle.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var aJsTools = require('a-js-tools');
+
+/**  构建行 原始类  */
+const RowEleClass = aJsTools.createConstructor(function (proto) {
+    this.data = [];
+    Object.setPrototypeOf(this, proto);
+    return this;
+});
+
+exports.RowEleClass = RowEleClass;

package/cjs/ele/tableEle.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var aJsTools = require('a-js-tools');
+
+/** TableEleClass 类，原始构建类   */
+const TableEleClass = aJsTools.createConstructor(function (proto) {
+    this.body = [];
+    this.header = undefined;
+    Object.setPrototypeOf(this, proto);
+    return this;
+});
+
+exports.TableEleClass = TableEleClass;

package/cjs/global.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var aJsTools = require('a-js-tools');
+
+/**  浏览器环境  */
+const browserEnv = !aJsTools.isNode();
+const data = {
+    emojiLength: 2.08,
+    emojiRegex: /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F900}-\u{1F9FF}]/gu,
+    chineseLength: 1.8,
+    /**  中文的正则  */
+    chineseRegex: /[\u4E00-\u9FFF]/g,
+};
+/**  全局的属性  */
+class ColoredTableGlobalData {
+    align = 'left';
+    color = '';
+    bgColor = '';
+    bold = false;
+    underline = false;
+    italic = false;
+    border = {
+        left: {
+            color: undefined,
+            style: 'simple',
+        },
+        right: {
+            color: undefined,
+            style: 'simple',
+        },
+        top: {
+            color: undefined,
+            style: 'simple',
+        },
+        bottom: {
+            color: undefined,
+            style: 'simple',
+        },
+    };
+}
+/**
+ *
+ * 全局 table 配置
+ *
+ * 若没有其他特殊说名，将使用该数据作为最终的渲染依据
+ *
+ * 即为默认属性
+ */
+const globalData = new ColoredTableGlobalData();
+
+exports.browserEnv = browserEnv;
+exports.data = data;
+exports.globalData = globalData;

package/cjs/index.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var aJsTools = require('a-js-tools');
+var core = require('./core.js');
+var global = require('./global.js');
+
+/**
+ *
+ *  # 构建 DIY 表单
+ *
+ *  使用 console.table 构建的表单默认不支持彩色文本（目前我没找到支持的方法），遂花几日写该方法
+ *
+ *
+ *
+ */
+const tableClass = aJsTools.createConstructor(core.table);
+
+exports.ColoredTableGlobalData = global.globalData;
+exports.ColoredTable = tableClass;
+exports.Table = tableClass;

package/cjs/lines.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const lines = {
+    fine: {
+        lt: '┌',
+        ct: '┬',
+        rt: '┐',
+        lc: '├',
+        c: '┼',
+        rc: '┤',
+        lb: '└',
+        cb: '┴',
+        rb: '┘',
+        l: '─',
+        v: '│',
+    },
+};
+
+exports.lines = lines;

package/cjs/parse/parse.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var aTypeOfJs = require('a-type-of-js');
+var global = require('../global.js');
+var setPro = require('../proto/setPro.js');
+var tableEle = require('../ele/tableEle.js');
+var parseRow = require('./parseRow.js');
+var createHeaderProto = require('../proto/createHeaderProto.js');
+
+/**  表格的  */
+class TableProto {
+}
+/**
+ *
+ * 解析并转化（可选）参数为定值属性
+ *
+ */
+function parse(options) {
+    // 初始化时可为空（undefined）
+    if (aTypeOfJs.isUndefined(options)) {
+        options = {};
+    }
+    // 数组参数转化为对象
+    if (aTypeOfJs.isArray(options)) {
+        options = {
+            body: options,
+        };
+    }
+    /**  表格的原型属性  */
+    const tableProto = new TableProto();
+    // 将在 options 上配置的属性配置到原型上
+    setPro.setPro(tableProto, options);
+    Object.setPrototypeOf(tableProto, global.globalData);
+    // 创建表格
+    const table = new tableEle.TableEleClass(tableProto);
+    // 解析表头
+    if (options.header)
+        table.header = parseRow.parseRow(options.header, createHeaderProto.createHeaderProto(tableProto));
+    /**  解析表干  */
+    options.body?.forEach(e => table.body.push(parseRow.parseRow(e, tableProto)));
+    return [table, tableProto];
+}
+
+exports.parse = parse;

package/cjs/parse/parseCell.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var aTypeOfJs = require('a-type-of-js');
+var setPro = require('../proto/setPro.js');
+
+/**  解析为单元格  */
+function parseCell(data, parentPro) {
+    // 空值直接返回空
+    if (aTypeOfJs.isUndefined(data)) {
+        return undefined;
+    }
+    // 直接值转化为对象值，方便后续统一处理
+    if (aTypeOfJs.isType(data, i => !aTypeOfJs.isPlainObject(i))) {
+        data = {
+            content: data,
+        };
+    }
+    /**  单元格的属性  */
+    const cell = {
+        content: data.content,
+    }; // 其他的属性在下面的 `setPro` 中进行给值
+    setPro.setPro(cell, data); // 构建属性的值
+    Object.setPrototypeOf(cell, parentPro);
+    return cell;
+}
+
+exports.parseCell = parseCell;

package/cjs/parse/parseRow.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var aTypeOfJs = require('a-type-of-js');
+var rowEle = require('../ele/rowEle.js');
+var setPro = require('../proto/setPro.js');
+var parseCell = require('./parseCell.js');
+
+/**  表格的行原型  */
+class RowProto {
+}
+/**
+ * 解析行
+ *
+ * @param data 行数据
+ * @param parentPro 父级的属性参数
+ */
+function parseRow(data, parentPro) {
+    // 数组转化为对，方便后续统一处理
+    if (aTypeOfJs.isArray(data))
+        data = { data };
+    /**  表格的原型属性  */
+    const rowProto = new RowProto();
+    setPro.setPro(rowProto, data); // 设置已配置的属性
+    /**  行数据  */
+    const result = new rowEle.RowEleClass(rowProto);
+    Object.setPrototypeOf(rowProto, parentPro);
+    data.data?.forEach(e => {
+        if (e)
+            result.data.push(parseCell.parseCell(e, rowProto));
+    });
+    return result;
+}
+
+exports.RowProto = RowProto;
+exports.parseRow = parseRow;

package/cjs/proto/createHeaderProto.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var parseRow = require('../parse/parseRow.js');
+
+/** 表头  */
+class HeaderProto extends parseRow.RowProto {
+    border = {
+        left: {
+            style: 'bold',
+            color: undefined,
+        },
+        right: {
+            style: 'bold',
+            color: undefined,
+        },
+        top: {
+            style: 'bold',
+            color: undefined,
+        },
+        bottom: {
+            style: 'bold',
+            color: undefined,
+        },
+    };
+}
+/**  设置 header 的原型  */
+function createHeaderProto(tableProto) {
+    const headerProto = new HeaderProto();
+    Object.setPrototypeOf(headerProto, tableProto);
+    return headerProto;
+}
+
+exports.createHeaderProto = createHeaderProto;