colored-table 0.1.0-alpha.0 → 0.2.0

package/cjs/proto/setPro.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var aTypeOfJs = require('a-type-of-js');
+
+/**  配置原型上的属性  */
+function setPro(targetObj, options) {
+    if (options.align) {
+        targetObj.align = options.align;
+    }
+    if (options.bgColor) {
+        targetObj.bgColor = options.bgColor;
+    }
+    if (options.color) {
+        targetObj.color = options.color;
+    }
+    if (options.italic) {
+        targetObj.italic = options.italic;
+    }
+    if (options.underline) {
+        targetObj.underline = options.underline;
+    }
+    if (options.border) {
+        if (aTypeOfJs.isType(options.border, e => aTypeOfJs.isString(e))) {
+            const style = options.border;
+            targetObj.border = {
+                left: {
+                    color: undefined,
+                    style,
+                },
+                right: {
+                    color: undefined,
+                    style,
+                },
+                top: {
+                    color: undefined,
+                    style,
+                },
+                bottom: {
+                    color: undefined,
+                    style,
+                },
+            };
+        }
+        else if (aTypeOfJs.isType(options.border, e => ['color', 'style'].some(i => !aTypeOfJs.isUndefined(e[i])))) {
+            const border = options.border;
+            const style = border.style;
+            const color = border.color || undefined;
+            // 设置边框并剔除空值
+            targetObj.border = JSON.parse(JSON.stringify({
+                left: {
+                    color,
+                    style,
+                },
+                right: {
+                    color,
+                    style,
+                },
+                top: {
+                    color,
+                    style,
+                },
+                bottom: {
+                    color,
+                    style,
+                },
+            }, (a, b) => (b === '' ? undefined : b)));
+        }
+        else if (aTypeOfJs.isType(options.border, e => ['left', 'right', 'top', 'bottom'].some(i => !aTypeOfJs.isUndefined(e[i])))) {
+            targetObj.border = options.border;
+        }
+    }
+}
+
+exports.setPro = setPro;

package/es/build/buildBody.js

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

package/es/build/buildHeader.js

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

package/es/build/computerMaxLen.js

@@ -0,0 +1,46 @@
+import { strInTerminalLength } from 'color-pen';
+import { browserEnv, data } from '../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, browserEnv ? strInBrowserLength(current) : 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, browserEnv
+                    ? strInBrowserLength(current)
+                    : strInTerminalLength(current));
+            });
+        });
+    }
+    return result;
+}
+/**  字符串在浏览器环境的字符长度  */
+function strInBrowserLength(str) {
+    /**    */
+    let result = 0;
+    [...str].forEach(e => {
+        data.emojiRegex.lastIndex = 0;
+        data.chineseRegex.lastIndex = 0;
+        if (e.match(data.emojiRegex)) {
+            result += data.emojiLength;
+        }
+        else if (e.match(data.chineseRegex)) {
+            result += data.chineseLength;
+        }
+        else {
+            result++;
+        }
+    });
+    return Math.ceil(result);
+}
+
+export { computerMaxLen };

package/es/build/createPen.js

@@ -0,0 +1,23 @@
+import { isType, isBusinessEmptyString, isUndefined } from 'a-type-of-js';
+import { pen } from 'color-pen';
+
+/**  默认的笔  */
+function createPen(options) {
+    let defaultPen = pen;
+    if (isType(options)) {
+        if (options.bold)
+            defaultPen = defaultPen.bold;
+        if (!isBusinessEmptyString(options.bgColor) &&
+            !isUndefined(options.bgColor))
+            defaultPen = defaultPen.bgColor(options.bgColor);
+        if (!isBusinessEmptyString(options.color) && !isUndefined(options.color))
+            defaultPen = defaultPen.color(options.color);
+        if (options.italic)
+            defaultPen = defaultPen.italic;
+        if (options.underline)
+            defaultPen = defaultPen.underline;
+    }
+    return defaultPen;
+}
+
+export { createPen };

package/es/build/index.js

@@ -0,0 +1,54 @@
+import { colorText, strInTerminalLength } from 'color-pen';
+import { buildBody } from './buildBody.js';
+import { buildHeader } from './buildHeader.js';
+import { computerMaxLen } from './computerMaxLen.js';
+import { browserEnv, data } from '../global.js';
+
+/**  渲染  */
+function render(table, fontSize) {
+    /**  获取每一行最大宽度的元素的宽度组成的数组  */
+    const lineLen = computerMaxLen(table);
+    /**  是否有表头  */
+    let hasHeader = false;
+    let buildStr = '';
+    // 构建表头
+    if (table.header) {
+        hasHeader = true;
+        buildStr += buildHeader(table.header, lineLen);
+    }
+    buildStr += buildBody(table.body, lineLen, hasHeader);
+    /**  彩色数组  */
+    const colorTextArr = colorText(buildStr);
+    if (browserEnv) {
+        const strList = colorTextArr[0].split('%c');
+        const result = colorTextArr.map((e, i) => {
+            if (i > 0) {
+                /**  构建最小的单位的组  */
+                const doubleByteCharNumber = [...strList[i]].reduce((v, e) => {
+                    if (strInTerminalLength(e) > 1) {
+                        data.emojiRegex.lastIndex = 0;
+                        if (e.match(data.emojiRegex))
+                            return v - (data.emojiLength - 2);
+                        return v + (2 - 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);
+    }
+}
+
+export { render };

package/es/core.js

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

package/es/ele/rowEle.js

@@ -0,0 +1,10 @@
+import { createConstructor } from 'a-js-tools';
+
+/**  构建行 原始类  */
+const RowEleClass = createConstructor(function (proto) {
+    this.data = [];
+    Object.setPrototypeOf(this, proto);
+    return this;
+});
+
+export { RowEleClass };

package/es/ele/tableEle.js

@@ -0,0 +1,11 @@
+import { createConstructor } from 'a-js-tools';
+
+/** TableEleClass 类，原始构建类   */
+const TableEleClass = createConstructor(function (proto) {
+    this.body = [];
+    this.header = undefined;
+    Object.setPrototypeOf(this, proto);
+    return this;
+});
+
+export { TableEleClass };

package/es/global.js

@@ -0,0 +1,49 @@
+import { isNode } from 'a-js-tools';
+
+/**  浏览器环境  */
+const browserEnv = !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();
+
+export { browserEnv, data, globalData };

package/es/index.js

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

package/es/lines.js

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

package/es/parse/parse.js

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

package/es/parse/parseCell.js

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

package/es/parse/parseRow.js

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

package/es/proto/createHeaderProto.js

@@ -0,0 +1,31 @@
+import { RowProto } from '../parse/parseRow.js';
+
+/** 表头  */
+class HeaderProto extends 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;
+}
+
+export { createHeaderProto };