@yh-ui/components 0.1.0

package/dist/table/src/use-table-import.mjs

@@ -0,0 +1,324 @@
+import * as XLSX from "xlsx";
+import { useLocale } from "@yh-ui/hooks";
+export function useTableImport(data, columns) {
+  const { t } = useLocale();
+  function buildLabelMap() {
+    const map = /* @__PURE__ */ new Map();
+    columns.value.forEach((col) => {
+      if (col.prop) {
+        map.set(col.prop, { prop: col.prop });
+        if (col.label) {
+          map.set(col.label, { prop: col.prop });
+        }
+      }
+    });
+    return map;
+  }
+  function mapRow(row, labelMap, config) {
+    const mapped = {};
+    Object.entries(row).forEach(([key, val]) => {
+      let prop = key;
+      if (config.fieldMapping?.[key]) {
+        prop = config.fieldMapping[key];
+      } else if (config.autoMapping !== false) {
+        const info = labelMap.get(key);
+        if (info) prop = info.prop;
+      }
+      if (config.numberFields?.includes(prop)) {
+        const num = Number(val);
+        mapped[prop] = isNaN(num) ? val : num;
+      } else {
+        mapped[prop] = val;
+      }
+    });
+    return mapped;
+  }
+  function parseCSV(text, config = {}) {
+    const sep = config.separator || ",";
+    const lines = text.split(/\r?\n/).filter((l) => l.trim());
+    if (lines.length < 2) return [];
+    const headers = parseCSVLine(lines[0], sep);
+    const labelMap = buildLabelMap();
+    let rows = lines.slice(1).map((line) => {
+      const vals = parseCSVLine(line, sep);
+      const row = {};
+      headers.forEach((h, i) => {
+        row[h] = vals[i] ?? "";
+      });
+      return mapRow(row, labelMap, config);
+    });
+    if (config.maxRows) rows = rows.slice(0, config.maxRows);
+    return rows;
+  }
+  function parseCSVLine(line, sep) {
+    const result = [];
+    let current = "";
+    let inQuotes = false;
+    for (let i = 0; i < line.length; i++) {
+      const ch = line[i];
+      if (inQuotes) {
+        if (ch === '"') {
+          if (i + 1 < line.length && line[i + 1] === '"') {
+            current += '"';
+            i++;
+          } else {
+            inQuotes = false;
+          }
+        } else {
+          current += ch;
+        }
+      } else {
+        if (ch === '"') {
+          inQuotes = true;
+        } else if (ch === sep) {
+          result.push(current.trim());
+          current = "";
+        } else {
+          current += ch;
+        }
+      }
+    }
+    result.push(current.trim());
+    return result;
+  }
+  function parseTXT(text, config = {}) {
+    return parseCSV(text, { ...config, separator: "	" });
+  }
+  function parseJSON(text, config = {}) {
+    try {
+      const parsed = JSON.parse(text);
+      const arr = Array.isArray(parsed) ? parsed : [parsed];
+      const labelMap = buildLabelMap();
+      let rows = arr.map((item) => mapRow(item, labelMap, config));
+      if (config.maxRows) rows = rows.slice(0, config.maxRows);
+      return rows;
+    } catch {
+      console.warn("[YhTable] JSON \u89E3\u6790\u5931\u8D25");
+      return [];
+    }
+  }
+  function parseXML(text, config = {}) {
+    try {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(text, "application/xml");
+      const labelMap = buildLabelMap();
+      const colNodes = doc.querySelectorAll("column");
+      const colNames = [];
+      colNodes.forEach((n) => colNames.push(n.getAttribute("name") || ""));
+      const rowNodes = doc.querySelectorAll("row");
+      let rows = [];
+      rowNodes.forEach((rn) => {
+        const cellNodes = rn.querySelectorAll("cell");
+        const row = {};
+        cellNodes.forEach((cn, i) => {
+          const key = colNames[i] || `col${i}`;
+          row[key] = cn.textContent || "";
+        });
+        rows.push(mapRow(row, labelMap, config));
+      });
+      if (config.maxRows) rows = rows.slice(0, config.maxRows);
+      return rows;
+    } catch {
+      console.warn("[YhTable] XML \u89E3\u6790\u5931\u8D25");
+      return [];
+    }
+  }
+  function parseHTML(text, config = {}) {
+    try {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(text, "text/html");
+      const labelMap = buildLabelMap();
+      const ths = doc.querySelectorAll("thead th, thead td");
+      const headers = [];
+      ths.forEach((th) => headers.push(th.textContent?.trim() || ""));
+      const trs = doc.querySelectorAll("tbody tr");
+      let rows = [];
+      trs.forEach((tr) => {
+        const tds = tr.querySelectorAll("td");
+        const row = {};
+        tds.forEach((td, i) => {
+          const key = headers[i] || `col${i}`;
+          row[key] = td.textContent?.trim() || "";
+        });
+        rows.push(mapRow(row, labelMap, config));
+      });
+      if (config.maxRows) rows = rows.slice(0, config.maxRows);
+      return rows;
+    } catch {
+      console.warn("[YhTable] HTML \u89E3\u6790\u5931\u8D25");
+      return [];
+    }
+  }
+  function applyImport(rows, mode = "insertBottom") {
+    switch (mode) {
+      case "covering":
+        data.value = rows;
+        break;
+      case "insertTop":
+        data.value = [...rows, ...data.value];
+        break;
+      case "insertBottom":
+      default:
+        data.value = [...data.value, ...rows];
+        break;
+    }
+  }
+  function parseXLSX(buffer, config = {}) {
+    try {
+      const labelMap = buildLabelMap();
+      const wb = XLSX.read(buffer, { type: "array" });
+      let sheetName = config.sheetName;
+      if (!sheetName) {
+        const idx = config.sheetIndex ?? 0;
+        sheetName = wb.SheetNames[idx];
+      }
+      const ws = wb.Sheets[sheetName];
+      if (!ws) {
+        console.warn("[YhTable] XLSX \u5DE5\u4F5C\u8868\u4E0D\u5B58\u5728:", sheetName);
+        return [];
+      }
+      const useHeader = config.headerRow !== false;
+      const jsonData = XLSX.utils.sheet_to_json(ws, {
+        header: useHeader ? void 0 : 1,
+        defval: ""
+      });
+      let rows = jsonData.map((item) => mapRow(item, labelMap, config));
+      if (config.maxRows) rows = rows.slice(0, config.maxRows);
+      return rows;
+    } catch (err) {
+      console.warn("[YhTable] XLSX \u89E3\u6790\u5931\u8D25", err);
+      return [];
+    }
+  }
+  function guessType(filename) {
+    const ext = filename.split(".").pop()?.toLowerCase();
+    switch (ext) {
+      case "csv":
+        return "csv";
+      case "json":
+        return "json";
+      case "txt":
+        return "txt";
+      case "xml":
+        return "xml";
+      case "html":
+      case "htm":
+        return "html";
+      case "xlsx":
+      case "xls":
+      case "xlsm":
+        return "xlsx";
+      default:
+        return "csv";
+    }
+  }
+  function parseContent(text, type, config = {}) {
+    switch (type) {
+      case "csv":
+        return parseCSV(text, config);
+      case "txt":
+        return parseTXT(text, config);
+      case "json":
+        return parseJSON(text, config);
+      case "xml":
+        return parseXML(text, config);
+      case "html":
+        return parseHTML(text, config);
+      default:
+        return parseCSV(text, config);
+    }
+  }
+  async function importFile(file, config = {}) {
+    const type = config.type || guessType(file.name);
+    const encoding = config.encoding || "utf-8";
+    const mode = config.mode || "insertBottom";
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = async (ev) => {
+        let rows;
+        if (type === "xlsx") {
+          const buffer = ev.target?.result;
+          rows = parseXLSX(buffer, config);
+        } else {
+          const text = ev.target?.result;
+          rows = parseContent(text, type, config);
+        }
+        if (config.beforeImport) {
+          const result = await config.beforeImport(rows);
+          if (result === false) {
+            resolve([]);
+            return;
+          }
+          if (Array.isArray(result)) {
+            rows = result;
+          }
+        }
+        applyImport(rows, mode);
+        config.afterImport?.(rows, mode);
+        resolve(rows);
+      };
+      reader.onerror = () => reject(new Error(t("yh.upload.error")));
+      if (type === "xlsx") {
+        reader.readAsArrayBuffer(file);
+      } else {
+        reader.readAsText(file, encoding);
+      }
+    });
+  }
+  async function importData(content, config = {}) {
+    const mode = config.mode || "insertBottom";
+    let rows;
+    if (typeof content === "string") {
+      const type = config.type || "csv";
+      rows = parseContent(content, type, config);
+    } else {
+      rows = content;
+    }
+    if (config.beforeImport) {
+      const result = await config.beforeImport(rows);
+      if (result === false) return [];
+      if (Array.isArray(result)) rows = result;
+    }
+    applyImport(rows, mode);
+    config.afterImport?.(rows, mode);
+    return rows;
+  }
+  function openImport(config = {}) {
+    return new Promise((resolve) => {
+      const input = document.createElement("input");
+      input.type = "file";
+      const acceptMap = {
+        csv: ".csv",
+        json: ".json",
+        txt: ".txt",
+        xml: ".xml",
+        html: ".html,.htm",
+        xlsx: ".xlsx,.xls,.xlsm"
+      };
+      input.accept = config.type ? acceptMap[config.type] || "*" : ".csv,.json,.txt,.xml,.html,.xlsx,.xls";
+      input.onchange = async (e) => {
+        const file = e.target.files?.[0];
+        if (file) {
+          const rows = await importFile(file, config);
+          resolve(rows);
+        } else {
+          resolve([]);
+        }
+      };
+      input.click();
+    });
+  }
+  return {
+    importFile,
+    importData,
+    openImport,
+    parseCSV,
+    parseTXT,
+    parseJSON,
+    parseXML,
+    parseHTML,
+    parseXLSX,
+    parseContent,
+    applyImport
+  };
+}

package/dist/table/src/use-table-print.cjs

@@ -0,0 +1,213 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTablePrint = useTablePrint;
+var _hooks = require("@yh-ui/hooks");
+function useTablePrint(data, columns) {
+  const {
+    t
+  } = (0, _hooks.useLocale)();
+  function getPrintColumns(config = {}) {
+    let cols = columns.value.filter(col => col.visible !== false && col.prop);
+    if (config.columns?.length) {
+      cols = cols.filter(c => config.columns.includes(c.prop));
+    }
+    if (config.excludeColumns?.length) {
+      cols = cols.filter(c => !config.excludeColumns.includes(c.prop));
+    }
+    return cols;
+  }
+  function getLabel(col, config) {
+    if (config.columnTitles?.[col.prop]) {
+      return config.columnTitles[col.prop];
+    }
+    return col.label || col.prop || "";
+  }
+  function getCellValue(row, col, config) {
+    const raw = col.prop ? row[col.prop] : "";
+    if (config.formatCell) {
+      return config.formatCell(raw, col, row);
+    }
+    return raw == null ? "" : String(raw);
+  }
+  function escapeHTML(str) {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+  function buildStyles(config) {
+    const margin = config.margin || {};
+    const mt = margin.top || "10mm";
+    const mr = margin.right || "10mm";
+    const mb = margin.bottom || "10mm";
+    const ml = margin.left || "10mm";
+    let css = ["*{margin:0;padding:0;box-sizing:border-box}", `@page{size:${config.orientation === "landscape" ? "landscape" : "portrait"};margin:${mt} ${mr} ${mb} ${ml}}`, 'body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#303133;padding:20px}', ".print-title{text-align:center;font-size:18px;font-weight:700;margin-bottom:12px;color:#303133}", ".print-header,.print-footer{text-align:center;color:#909399;font-size:12px;line-height:1.6}", ".print-header{margin-bottom:12px;border-bottom:1px solid #ebeef5;padding-bottom:8px}", ".print-footer{margin-top:12px;border-top:1px solid #ebeef5;padding-top:8px}", "table{width:100%;border-collapse:collapse;font-size:13px}", "th,td{padding:8px 12px;border:1px solid #dcdfe6;text-align:left;word-break:break-all}", "th{background:#f5f7fa;font-weight:600;color:#303133}", "tr:nth-child(even) td{background:#fafafa}", ".page-break{page-break-after:always}", ".page-number{text-align:center;font-size:11px;color:#909399;margin-top:8px}", ".no-print{text-align:center;margin-top:20px}", ".no-print button{padding:8px 24px;border-radius:4px;cursor:pointer;font-size:14px;border:none;margin:0 4px}", ".btn-print{background:#409eff;color:#fff}", ".btn-cancel{background:#fff;color:#606266;border:1px solid #dcdfe6!important}", "@media print{.no-print{display:none!important}.page-number{position:fixed;bottom:10mm;width:100%}}"];
+    if (config.extraCss) css.push(config.extraCss);
+    if (config.tableStyle) css.push(`.print-table{${config.tableStyle}}`);
+    return css.join("\n");
+  }
+  function buildTableHead(cols, config) {
+    let html = "<thead><tr>";
+    if (config.showIndex) {
+      html += `<th style="width:50px;text-align:center">${escapeHTML(config.indexTitle || t("table.index"))}</th>`;
+    }
+    cols.forEach(col => {
+      const align = col.headerAlign || col.align || "left";
+      html += `<th style="text-align:${align}">${escapeHTML(getLabel(col, config))}</th>`;
+    });
+    html += "</tr></thead>";
+    return html;
+  }
+  function buildTableRows(rows, cols, config, startIndex = 0) {
+    let html = "";
+    rows.forEach((row, idx) => {
+      html += "<tr>";
+      if (config.showIndex) {
+        html += `<td style="text-align:center">${startIndex + idx + 1}</td>`;
+      }
+      cols.forEach(col => {
+        const align = col.align || "left";
+        html += `<td style="text-align:${align}">${escapeHTML(getCellValue(row, col, config))}</td>`;
+      });
+      html += "</tr>";
+    });
+    return html;
+  }
+  function buildInfoFooter(config, totalRows) {
+    const parts = [];
+    if (config.showTime !== false) {
+      parts.push(t("table.printTime") + (/* @__PURE__ */new Date()).toLocaleString());
+    }
+    if (config.showCount !== false) {
+      parts.push(t("table.total", {
+        total: totalRows
+      }));
+    }
+    if (parts.length === 0) return "";
+    return '<div class="print-footer">' + parts.join("&nbsp;&nbsp;") + "</div>";
+  }
+  async function print(config = {}) {
+    if (config.beforePrint) {
+      const ok = await config.beforePrint();
+      if (!ok) return;
+    }
+    const cols = getPrintColumns(config);
+    const rows = config.data || data.value;
+    const title = config.title || "";
+    const styles = buildStyles(config);
+    const thead = buildTableHead(cols, config);
+    let body = "";
+    if (config.pageSize && config.pageSize > 0) {
+      const totalPages = Math.ceil(rows.length / config.pageSize);
+      for (let p = 0; p < totalPages; p++) {
+        const pageRows = rows.slice(p * config.pageSize, (p + 1) * config.pageSize);
+        const startIdx = p * config.pageSize;
+        const isLast = p === totalPages - 1;
+        if (title) body += `<div class="print-title">${escapeHTML(title)}</div>`;
+        if (config.headerHtml) body += `<div class="print-header">${config.headerHtml}</div>`;
+        body += '<table class="print-table">';
+        body += thead;
+        body += "<tbody>" + buildTableRows(pageRows, cols, config, startIdx) + "</tbody>";
+        body += "</table>";
+        if (config.showPageNumber) {
+          body += `<div class="page-number">${t("table.page", {
+            page: p + 1,
+            total: totalPages
+          })}</div>`;
+        }
+        if (config.footerHtml) body += `<div class="print-footer">${config.footerHtml}</div>`;
+        if (!isLast) body += '<div class="page-break"></div>';
+      }
+      body += buildInfoFooter(config, rows.length);
+    } else {
+      if (title) body += `<div class="print-title">${escapeHTML(title)}</div>`;
+      if (config.headerHtml) body += `<div class="print-header">${config.headerHtml}</div>`;
+      body += '<table class="print-table">';
+      body += thead;
+      body += "<tbody>" + buildTableRows(rows, cols, config) + "</tbody>";
+      body += "</table>";
+      body += buildInfoFooter(config, rows.length);
+      if (config.footerHtml) body += `<div class="print-footer">${config.footerHtml}</div>`;
+    }
+    body += '<div class="no-print">';
+    body += `<button class="btn-print" onclick="window.print()">${t("table.print")}</button>`;
+    body += `<button class="btn-cancel" onclick="window.close()">${t("table.cancel")}</button>`;
+    body += "</div>";
+    const printWin = window.open("", "_blank");
+    if (!printWin) {
+      console.warn("[YhTable] \u65E0\u6CD5\u6253\u5F00\u6253\u5370\u7A97\u53E3\uFF0C\u8BF7\u68C0\u67E5\u6D4F\u89C8\u5668\u5F39\u7A97\u8BBE\u7F6E");
+      return;
+    }
+    const html = ['<!DOCTYPE html><html><head><meta charset="UTF-8">', "<title>" + escapeHTML(title || t("table.preview")) + "</title>", "<style>" + styles + "</style>", "</head><body>", body, "</body></html>"].join("");
+    printWin.document.write(html);
+    printWin.document.close();
+    if (config.autoPrint) {
+      printWin.onload = () => {
+        printWin.print();
+      };
+    }
+    config.afterPrint?.();
+  }
+  async function printMultiple(tables, globalConfig = {}) {
+    if (globalConfig.beforePrint) {
+      const ok = await globalConfig.beforePrint();
+      if (!ok) return;
+    }
+    const styles = buildStyles(globalConfig);
+    let body = "";
+    tables.forEach((table, tIdx) => {
+      const cfg = {
+        ...globalConfig,
+        ...table.config
+      };
+      const cols = table.columns ? table.columns.filter(c => c.visible !== false && c.prop) : getPrintColumns(cfg);
+      const rows = table.data;
+      if (table.title) body += `<div class="print-title">${escapeHTML(table.title)}</div>`;
+      if (cfg.headerHtml) body += `<div class="print-header">${cfg.headerHtml}</div>`;
+      body += '<table class="print-table">';
+      body += buildTableHead(cols, cfg);
+      body += "<tbody>" + buildTableRows(rows, cols, cfg) + "</tbody>";
+      body += "</table>";
+      body += buildInfoFooter(cfg, rows.length);
+      if (cfg.footerHtml) body += `<div class="print-footer">${cfg.footerHtml}</div>`;
+      if (tIdx < tables.length - 1) {
+        body += '<div class="page-break"></div>';
+      }
+    });
+    body += '<div class="no-print">';
+    body += `<button class="btn-print" onclick="window.print()">${t("table.print")}</button>`;
+    body += `<button class="btn-cancel" onclick="window.close()">${t("table.cancel")}</button>`;
+    body += "</div>";
+    const printWin = window.open("", "_blank");
+    if (!printWin) return;
+    const html = ['<!DOCTYPE html><html><head><meta charset="UTF-8">', "<title>" + escapeHTML(globalConfig.title || t("table.preview")) + "</title>", "<style>" + styles + "</style>", "</head><body>", body, "</body></html>"].join("");
+    printWin.document.write(html);
+    printWin.document.close();
+    if (globalConfig.autoPrint) {
+      printWin.onload = () => printWin.print();
+    }
+    globalConfig.afterPrint?.();
+  }
+  async function printTemplate(templateHtml, config = {}) {
+    if (config.beforePrint) {
+      const ok = await config.beforePrint();
+      if (!ok) return;
+    }
+    const styles = buildStyles(config);
+    const printWin = window.open("", "_blank");
+    if (!printWin) return;
+    const html = ['<!DOCTYPE html><html><head><meta charset="UTF-8">', "<title>" + escapeHTML(config.title || t("table.preview")) + "</title>", "<style>" + styles + "</style>", "</head><body>", templateHtml, '<div class="no-print">', `<button class="btn-print" onclick="window.print()">${t("table.print")}</button>`, `<button class="btn-cancel" onclick="window.close()">${t("table.cancel")}</button>`, "</div>", "</body></html>"].join("");
+    printWin.document.write(html);
+    printWin.document.close();
+    if (config.autoPrint) {
+      printWin.onload = () => printWin.print();
+    }
+    config.afterPrint?.();
+  }
+  return {
+    print,
+    printMultiple,
+    printTemplate,
+    getPrintColumns
+  };
+}

package/dist/table/src/use-table-print.d.ts

@@ -0,0 +1,62 @@
+import type { Ref } from 'vue';
+import type { TableColumn } from './table';
+export interface PrintConfig {
+    /** 打印标题 */
+    title?: string;
+    /** 是否显示序号 */
+    showIndex?: boolean;
+    /** 序号列标题 */
+    indexTitle?: string;
+    /** 指定打印列（prop 数组） */
+    columns?: string[];
+    /** 排除列 */
+    excludeColumns?: string[];
+    /** 自定义打印数据 */
+    data?: Record<string, unknown>[];
+    /** 格式化单元格 */
+    formatCell?: (value: unknown, column: TableColumn, row: Record<string, unknown>) => string;
+    /** 自定义页眉 HTML */
+    headerHtml?: string;
+    /** 自定义页脚 HTML */
+    footerHtml?: string;
+    /** 页边距 */
+    margin?: {
+        top?: string;
+        right?: string;
+        bottom?: string;
+        left?: string;
+    };
+    /** 纸张方向 */
+    orientation?: 'portrait' | 'landscape';
+    /** 是否显示打印时间 */
+    showTime?: boolean;
+    /** 是否显示数据条数 */
+    showCount?: boolean;
+    /** 自定义列标题映射 */
+    columnTitles?: Record<string, string>;
+    /** 每页最大行数（用于分页切割） */
+    pageSize?: number;
+    /** 是否显示页码 */
+    showPageNumber?: boolean;
+    /** 表格样式 */
+    tableStyle?: string;
+    /** 打印前回调 */
+    beforePrint?: () => boolean | Promise<boolean>;
+    /** 打印后回调 */
+    afterPrint?: () => void;
+    /** 额外 CSS */
+    extraCss?: string;
+    /** 是否自动打印（打开窗口后自动弹出打印对话框） */
+    autoPrint?: boolean;
+}
+export declare function useTablePrint(data: Ref<Record<string, unknown>[]>, columns: Ref<TableColumn[]>): {
+    print: (config?: PrintConfig) => Promise<void>;
+    printMultiple: (tables: Array<{
+        title?: string;
+        data: Record<string, unknown>[];
+        columns?: TableColumn[];
+        config?: PrintConfig;
+    }>, globalConfig?: PrintConfig) => Promise<void>;
+    printTemplate: (templateHtml: string, config?: PrintConfig) => Promise<void>;
+    getPrintColumns: (config?: PrintConfig) => TableColumn[];
+};