react-receipt-slip/dist/Paper.js

The react-receipt-slip easiest way to create a receipt template.

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/Paper.tsx
var Paper_exports = {};
__export(Paper_exports, {
  Dash: () => Dash,
  DataTable: () => DataTable,
  Dot: () => Dot,
  Line: () => Line,
  Paper: () => Paper,
  RowText: () => RowText,
  Space: () => Space,
  TableCell: () => TableCell,
  TableHead: () => TableHead,
  TableRow: () => TableRow,
  Text: () => Text
});
module.exports = __toCommonJS(Paper_exports);
var import_styled_components = __toESM(require("styled-components"));
var Paper = import_styled_components.default.div`
    max-width: ${(props) => props.size ?? 80}mm;
    width: 100%;
`;
var Text = import_styled_components.default.div.withConfig({
  shouldForwardProp: (props) => !["bold", "underlined", "italic"].includes(props)
})`
    font-family: monospace;
    font-size: 12;
    text-align: ${(props) => props.align ?? "left"};
    font-weight: ${(props) => props.bold ? "bold" : "normal"};
    text-decoration: ${(props) => props.underlined ? "underline" : "unset"};
    font-style: ${(props) => props.italic ? "italic" : "normal"};
`;
var Line = import_styled_components.default.div`
    border: 0.5px dashed gray;
    width: 100%;
    height: 0px;
    margin: ${(props) => {
  if (props.margin && props.margin.length === 2) {
    return `${props.margin[1]}px ${props.margin[0]}px`;
  }
  return "0px 0px 5px 0px";
}};
`;
var Dot = import_styled_components.default.hr`
    border: 0.5px ${(props) => props.type ?? "dotted"} gray;
    margin: ${(props) => {
  if (props.margin && props.margin.length === 2) {
    const [y, x] = props.margin;
    return `${y}px ${x}px`;
  }
  if (props.vmar && props.vmar.length === 2) {
    const [top, bottom] = props.vmar;
    return `${top}px 0px ${bottom}px 0px`;
  }
  return "0px";
}};
`;
var Dash = import_styled_components.default.hr`
    border: 0.5px dashed gray;
    margin: ${(props) => {
  if (props.margin && props.margin.length === 2) {
    const [y, x] = props.margin;
    return `${y}px ${x}px`;
  }
  return "0px";
}};
`;
var RowText = import_styled_components.default.div`
    display: flex;
    align-items: ${(props) => {
  if (props.valign) {
    if (props.valign === "bottom") {
      return "flex-end";
    } else if (props.valign === "top") {
      return "flex-start";
    } else {
      return "center";
    }
  }
  return "left";
}};
    justify-content: ${(props) => {
  if (props.justify) {
    if (props.justify === "start") {
      return "flex-start";
    } else if (props.justify === "end") {
      return "flex-end";
    } else if (props.justify === "center") {
      return "center";
    } else {
      return "space-between";
    }
  }
  return "space-between";
}};
    gap: ${(props) => {
  if (props.gap) {
    return `${props.gap}px`;
  }
  if (props.space) {
    return `0px ${props.space}px`;
  }
  return "0px 5px";
}};
    padding: ${(props) => {
  if (props.padding && props.padding.length === 2) {
    const [x, y] = props.padding;
    return `${y}px ${x}px`;
  }
  const pady = props.pady ?? 0;
  const padx = props.padx ?? 0;
  return `${pady}px ${padx}px`;
}};
`;
var DataTable = import_styled_components.default.table`
    ${(props) => {
  if (props.collapse) {
    return "border-collapse: collapse;";
  } else {
    return "border-collapse: unset;";
  }
}}
    ${(props) => props.bordered && "border: 0.5px dashed gray;"}
    width: 100%;
`;
var TableRow = import_styled_components.default.tr`
    text-align: ${(props) => props.align ?? "left"};
`;
var TableHead = import_styled_components.default.th`
    border: 1px dashed gray;
    border-left-width: 0px;
    border-right-width: 0px;
    font-family: monospace;
    padding: 0px 5px;
`;
var TableCell = import_styled_components.default.td.withConfig({
  shouldForwardProp: (props) => !["bold", "underlined", "italic"].includes(props)
})`
    font-family: monospace;
    text-align: ${(props) => props.align ?? "left"};
    font-style: ${(props) => props.italic ? "italic" : "normal"};
    font-weight: ${(props) => props.bold === true ? "500" : "normal"};
    text-decoration: ${(props) => props.underlined ? "underline" : "unset"};
`;
var Space = import_styled_components.default.div`
    margin: ${(props) => {
  if (props.size && props.size.length === 2) {
    const [y, x] = props.size;
    return `${y}px ${x}px`;
  }
  return "5px 0px";
}};
`;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Dash,
  DataTable,
  Dot,
  Line,
  Paper,
  RowText,
  Space,
  TableCell,
  TableHead,
  TableRow,
  Text
});
//# sourceMappingURL=Paper.js.map