react-ink-scripter 0.0.10 → 0.0.11

package/dist/InkScripter.css

@@ -6,14 +6,14 @@
   padding: 4px;
 }
 
-.inks-title{
+.inks-root > #title {
   text-align: center;
   flex: 1 0;
   padding: 16px;
   font-size: 20px;
 }
 
-.inks-footer {
+.inks-root > #footer {
   margin-left: -8px;
 }
 
@@ -41,15 +41,15 @@
   padding: calc(var(--Grid-RowSpacing) / 2) calc(var(--Grid-ColumnSpacing) / 2);
 }
 
-.inks-field {
+.inks-pair {
   display: flex;
   flex-direction: row;
 }
 
-.inks-field-label {
+.inks-pair-label {
 }
 
-.inks-field-value{
+.inks-pair-value{
   margin-left: 16px;
 }
 

package/dist/cjs/index.js

@@ -60,27 +60,18 @@ var PrinterFrame = function PrinterFrame(props) {
   });
 };
 
-var Title = function Title(_ref) {
-  var value = _ref.value,
-    id = _ref.id;
-  return jsxRuntime.jsx("div", {
-    id: id,
-    className: "inks-title",
-    children: value
-  });
-};
-var Container = function Container(_ref2) {
-  var id = _ref2.id,
-    _ref2$content = _ref2.content,
-    content = _ref2$content === void 0 ? [] : _ref2$content,
-    className = _ref2.className;
+var Container = function Container(_ref) {
+  var id = _ref.id,
+    _ref$content = _ref.content,
+    content = _ref$content === void 0 ? [] : _ref$content,
+    className = _ref.className;
   return jsxRuntime.jsx("div", {
     id: id,
     className: clsx("inks-grid", className),
     children: content.map(function (item, idx) {
       switch (item.type) {
-        case "field":
-          return jsxRuntime.jsx(Field, _extends({
+        case "pair":
+          return jsxRuntime.jsx(Pair, _extends({
             className: "inks-grid-item"
           }, item), idx);
         case "text":
@@ -94,13 +85,8 @@ var Container = function Container(_ref2) {
 var Grid = function Grid(props) {
   return jsxRuntime.jsx(Container, _extends({}, props));
 };
-var Footer = function Footer(props) {
-  return jsxRuntime.jsx(Container, _extends({}, props, {
-    className: "inks-footer"
-  }));
-};
-var TableCell = function TableCell(_ref3) {
-  var item = _ref3.item;
+var TableCell = function TableCell(_ref2) {
+  var item = _ref2.item;
   if (typeof item === "string") {
     return jsxRuntime.jsx("td", {
       className: "inks-cell",
@@ -129,8 +115,8 @@ var TableCell = function TableCell(_ref3) {
     children: value
   });
 };
-var TableRow = function TableRow(_ref4) {
-  var cells = _ref4.cells;
+var TableRow = function TableRow(_ref3) {
+  var cells = _ref3.cells;
   if (!cells.length) {
     return null;
   }
@@ -144,31 +130,31 @@ var TableRow = function TableRow(_ref4) {
   });
 };
 var TableHead = function TableHead(props) {
-  var cells = props.cells;
-  if (!cells || !cells.length) {
+  var rows = props.rows;
+  if (!rows || !rows.length) {
     return null;
   }
   return jsxRuntime.jsx("thead", {
     className: "inks-table-head",
-    children: cells.map(function (v, idx) {
-      return jsxRuntime.jsx(TableCell, {
-        item: v
+    children: rows.map(function (v, idx) {
+      return jsxRuntime.jsx(TableRow, {
+        cells: v
       }, idx);
     })
   });
 };
 var TableFoot = function TableFoot(props) {
-  var cells = props.cells;
-  if (!cells || !cells.length) {
+  var rows = props.rows;
+  if (!rows || !rows.length) {
     return null;
   }
-  return jsxRuntime.jsxs("tfoot", {
+  return jsxRuntime.jsx("tfoot", {
     className: "inks-table-foot",
-    children: [cells.map(function (v, idx) {
-      return jsxRuntime.jsx(TableCell, {
-        item: v
+    children: rows.map(function (v, idx) {
+      return jsxRuntime.jsx(TableRow, {
+        cells: v
       }, idx);
-    }), " "]
+    })
   });
 };
 var TableBody = function TableBody(props) {
@@ -197,39 +183,39 @@ var Table = function Table(props) {
     id: id,
     className: "inks-table",
     children: [jsxRuntime.jsx(TableHead, {
-      cells: head
+      rows: head
     }), jsxRuntime.jsx(TableBody, {
       rows: body
     }), jsxRuntime.jsx(TableFoot, {
-      cells: foot
+      rows: foot
     })]
   });
 };
-var Text = function Text(_ref5) {
-  var id = _ref5.id,
-    value = _ref5.value,
-    span = _ref5.span,
-    className = _ref5.className;
+var Text = function Text(_ref4) {
+  var id = _ref4.id,
+    value = _ref4.value,
+    span = _ref4.span,
+    className = _ref4.className;
   return jsxRuntime.jsx("div", {
     id: id,
     className: clsx("inks-text", span && "inks-grid", span && "inks-span-".concat(span), className),
     children: value
   });
 };
-var Field = function Field(_ref6) {
-  var id = _ref6.id,
-    value = _ref6.value,
-    label = _ref6.label,
-    span = _ref6.span,
-    className = _ref6.className;
+var Pair = function Pair(_ref5) {
+  var id = _ref5.id,
+    value = _ref5.value,
+    label = _ref5.label,
+    span = _ref5.span,
+    className = _ref5.className;
   return jsxRuntime.jsxs("div", {
     id: id,
-    className: clsx("inks-field", span && "inks-grid", span && "inks-span-".concat(span), className),
+    className: clsx("inks-pair", span && "inks-grid", span && "inks-span-".concat(span), className),
     children: [jsxRuntime.jsxs("label", {
-      className: "inks-field-label",
+      className: "inks-pair-label",
       children: [label, ":"]
     }), jsxRuntime.jsx("div", {
-      className: "inks-field-value",
+      className: "inks-pair-value",
       children: value
     })]
   });
@@ -242,18 +228,14 @@ var InkScripter = function InkScripter(props) {
     className: clsx("inks-root", className),
     children: value.map(function (item, index) {
       switch (item.type) {
-        case "title":
-          return jsxRuntime.jsx(Title, _extends({}, item), index);
-        case "footer":
-          return jsxRuntime.jsx(Footer, _extends({}, item), index);
         case "grid":
           return jsxRuntime.jsx(Grid, _extends({}, item), index);
         case "table":
           return jsxRuntime.jsx(Table, _extends({}, item), index);
         case "text":
           return jsxRuntime.jsx(Text, _extends({}, item), index);
-        case "field":
-          return jsxRuntime.jsx(Field, _extends({}, item), index);
+        case "pair":
+          return jsxRuntime.jsx(Pair, _extends({}, item), index);
       }
     })
   });

package/dist/esm/InkScripter.d.ts

@@ -1,27 +1,22 @@
 /// <reference types="react" />
 import { ClassValue } from "clsx";
-export type ContentTitleItem = {
-    id?: string;
-    type: "title";
-    value: string;
-};
-export type ContentFieldItem = {
+export type ContentTextItem = {
     id?: string;
-    type: "field";
-    label: string;
+    type: "text";
     value: string;
     span?: number;
 };
-export type ContentTextItem = {
+export type ContentPairItem = {
     id?: string;
-    type: "text";
+    type: "pair";
+    label: string;
     value: string;
     span?: number;
 };
-export type ContentContainerItem = {
+export type ContentGridItem = {
     id?: string;
-    type: "grid" | "footer";
-    content: (ContentFieldItem | ContentTextItem)[];
+    type: "grid";
+    content: (ContentPairItem | ContentTextItem)[];
 };
 export type ContentTableCellItem = {
     id?: string;
@@ -33,11 +28,11 @@ export type ContentTableCellItem = {
 export type ContentTableItem = {
     id?: string;
     type: "table";
-    head?: ContentTableCellItem[];
+    head?: ContentTableCellItem[][];
     body?: ContentTableCellItem[][];
-    foot?: ContentTableCellItem[];
+    foot?: ContentTableCellItem[][];
 };
-export type ContentItemType = ContentTitleItem | ContentContainerItem | ContentTableItem | ContentTextItem | ContentFieldItem;
+export type ContentItemType = ContentGridItem | ContentTableItem | ContentTextItem | ContentPairItem;
 export type ContentType = ContentItemType[];
 export type ReactInkScripterProps = {
     value?: ContentType;

package/dist/esm/index.js

@@ -42,14 +42,11 @@ const PrinterFrame = (props) => {
           `, styleCss] }), attachStyle), !!attachNode && createPortal(children, attachNode)] }));
 };
 
-const Title = ({ value, id }) => {
-    return (jsx("div", { id: id, className: "inks-title", children: value }));
-};
 const Container = ({ id, content = [], className, }) => {
     return (jsx("div", { id: id, className: clsx("inks-grid", className), children: content.map((item, idx) => {
             switch (item.type) {
-                case "field":
-                    return jsx(Field, { className: "inks-grid-item", ...item }, idx);
+                case "pair":
+                    return jsx(Pair, { className: "inks-grid-item", ...item }, idx);
                 case "text":
                     return jsx(Text, { className: "inks-grid-item", ...item }, idx);
             }
@@ -58,9 +55,6 @@ const Container = ({ id, content = [], className, }) => {
 const Grid = (props) => {
     return jsx(Container, { ...props });
 };
-const Footer = (props) => {
-    return jsx(Container, { ...props, className: "inks-footer" });
-};
 const TableCell = ({ item }) => {
     if (typeof item === "string") {
         return jsx("td", { className: "inks-cell", children: item });
@@ -78,18 +72,18 @@ const TableRow = ({ cells }) => {
     return (jsx("tr", { className: "inks-table-row", children: cells.map((v, idx) => (jsx(TableCell, { item: v }, idx))) }));
 };
 const TableHead = (props) => {
-    const { cells } = props;
-    if (!cells || !cells.length) {
+    const { rows } = props;
+    if (!rows || !rows.length) {
         return null;
     }
-    return (jsx("thead", { className: "inks-table-head", children: cells.map((v, idx) => (jsx(TableCell, { item: v }, idx))) }));
+    return (jsx("thead", { className: "inks-table-head", children: rows.map((v, idx) => (jsx(TableRow, { cells: v }, idx))) }));
 };
 const TableFoot = (props) => {
-    const { cells } = props;
-    if (!cells || !cells.length) {
+    const { rows } = props;
+    if (!rows || !rows.length) {
         return null;
     }
-    return (jsxs("tfoot", { className: "inks-table-foot", children: [cells.map((v, idx) => (jsx(TableCell, { item: v }, idx))), " "] }));
+    return (jsx("tfoot", { className: "inks-table-foot", children: rows.map((v, idx) => (jsx(TableRow, { cells: v }, idx))) }));
 };
 const TableBody = (props) => {
     const { rows } = props;
@@ -103,30 +97,26 @@ const Table = (props) => {
     if (!head?.length && !body?.length && !foot?.length) {
         return null;
     }
-    return (jsxs("table", { id: id, className: "inks-table", children: [jsx(TableHead, { cells: head }), jsx(TableBody, { rows: body }), jsx(TableFoot, { cells: foot })] }));
+    return (jsxs("table", { id: id, className: "inks-table", children: [jsx(TableHead, { rows: head }), jsx(TableBody, { rows: body }), jsx(TableFoot, { rows: foot })] }));
 };
 const Text = ({ id, value, span, className, }) => {
     return (jsx("div", { id: id, className: clsx("inks-text", span && "inks-grid", span && `inks-span-${span}`, className), children: value }));
 };
-const Field = ({ id, value, label, span, className, }) => {
-    return (jsxs("div", { id: id, className: clsx("inks-field", span && "inks-grid", span && `inks-span-${span}`, className), children: [jsxs("label", { className: "inks-field-label", children: [label, ":"] }), jsx("div", { className: "inks-field-value", children: value })] }));
+const Pair = ({ id, value, label, span, className, }) => {
+    return (jsxs("div", { id: id, className: clsx("inks-pair", span && "inks-grid", span && `inks-span-${span}`, className), children: [jsxs("label", { className: "inks-pair-label", children: [label, ":"] }), jsx("div", { className: "inks-pair-value", children: value })] }));
 };
 const InkScripter = (props) => {
     const { value = [], className } = props;
     return (jsx("div", { className: clsx("inks-root", className), children: value.map((item, index) => {
             switch (item.type) {
-                case "title":
-                    return jsx(Title, { ...item }, index);
-                case "footer":
-                    return jsx(Footer, { ...item }, index);
                 case "grid":
                     return jsx(Grid, { ...item }, index);
                 case "table":
                     return jsx(Table, { ...item }, index);
                 case "text":
                     return jsx(Text, { ...item }, index);
-                case "field":
-                    return jsx(Field, { ...item }, index);
+                case "pair":
+                    return jsx(Pair, { ...item }, index);
             }
         }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ink-scripter",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "a react component for generate page to print",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",