react-ink-scripter 0.0.25 → 0.0.27

package/dist/InkScripter.css

@@ -4,24 +4,34 @@
   flex-direction: column;
   overflow: hidden;
   padding: 4px;
-  font-size: 14px;
+  font-size: 14pt;
 }
 
 .inks-root > #title {
   text-align: center;
   flex: 1 0;
   padding: 16px;
-  font-size: 28px;
+  font-size: 28pt;
 }
 
 .inks-root > #footer {
   margin: 0;
 }
 
+.inks-root > #footer > .inks-grid-item {
+  padding: 0;
+}
+
+.inks-compose {
+  display: flex;
+  flex-direction: row;
+  column-gap: 3em;
+}
+
 .inks-grid {
-  --Grid-Columns: 12;
+  --Grid-Columns: 24;
   --Grid-RowSpacing: 8px;
-  --Grid-ColumnSpacing: 32px;
+  --Grid-ColumnSpacing: 8px;
 
   display: -webkit-box;
   display: -webkit-flex;
@@ -40,6 +50,7 @@
   flex-basis: auto;
   flex-grow: 0;
   padding: calc(var(--Grid-RowSpacing) / 2) calc(var(--Grid-ColumnSpacing) / 2);
+  box-sizing: border-box;
 }
 
 .inks-pair {
@@ -51,9 +62,12 @@
 }
 
 .inks-pair-value{
-  margin-left: 16px;
+  margin-left: 0.5em;
 }
 
+.inks-span-0 {
+  width: 0;
+}
 .inks-span-1 {
   width: calc(100% * 1 / var(--Grid-Columns));
 }
@@ -90,6 +104,45 @@
 .inks-span-12 {
   width: calc(100% * 12 / var(--Grid-Columns));
 }
+.inks-span-13 {
+  width: calc(100% * 13 / var(--Grid-Columns));
+}
+.inks-span-14 {
+  width: calc(100% * 14 / var(--Grid-Columns));
+}
+.inks-span-15 {
+  width: calc(100% * 15 / var(--Grid-Columns));
+}
+.inks-span-16 {
+  width: calc(100% * 16 / var(--Grid-Columns));
+}
+.inks-span-17 {
+  width: calc(100% * 17 / var(--Grid-Columns));
+}
+.inks-span-18 {
+  width: calc(100% * 18 / var(--Grid-Columns));
+}
+.inks-span-18 {
+  width: calc(100% * 18 / var(--Grid-Columns));
+}
+.inks-span-19 {
+  width: calc(100% * 19 / var(--Grid-Columns));
+}
+.inks-span-20 {
+  width: calc(100% * 20 / var(--Grid-Columns));
+}
+.inks-span-21 {
+  width: calc(100% * 21 / var(--Grid-Columns));
+}
+.inks-span-22 {
+  width: calc(100% * 22 / var(--Grid-Columns));
+}
+.inks-span-23 {
+  width: calc(100% * 23 / var(--Grid-Columns));
+}
+.inks-span-24 {
+  width: calc(100% * 24 / var(--Grid-Columns));
+}
 
 .inks-table {
   --Border-Props: 0.8px solid #bbb;

package/dist/cjs/index.js

@@ -172,29 +172,48 @@ var Container = function Container(_ref) {
   var id = _ref.id,
     _ref$content = _ref.content,
     content = _ref$content === void 0 ? [] : _ref$content,
-    className = _ref.className;
+    className = _ref.className,
+    itemClass = _ref.itemClass;
   return jsxRuntime.jsx("div", {
     id: id,
-    className: clsx('inks-grid', className),
+    className: className,
     children: content.map(function (item, idx) {
       switch (item.type) {
         case 'pair':
           return jsxRuntime.jsx(Pair, _extends({}, item, {
-            className: clsx('inks-grid-item', item.className)
+            className: clsx(itemClass, item.className)
           }), idx);
         case 'text':
           return jsxRuntime.jsx(Text, _extends({}, item, {
-            className: clsx('inks-grid-item', item.className)
+            className: clsx(itemClass, item.className)
+          }), idx);
+        case 'compose':
+          return jsxRuntime.jsx(Compose, _extends({}, item, {
+            className: clsx(itemClass, item.className)
           }), idx);
       }
     })
   });
 };
 var Grid = function Grid(props) {
-  return jsxRuntime.jsx(Container, _extends({}, props));
+  return jsxRuntime.jsx(Container, _extends({
+    className: "inks-grid",
+    itemClass: "inks-grid-item"
+  }, props));
 };
-var TableCell = function TableCell(_ref2) {
-  var item = _ref2.item;
+var Compose = function Compose(_ref2) {
+  var id = _ref2.id,
+    content = _ref2.content,
+    span = _ref2.span,
+    className = _ref2.className;
+  return jsxRuntime.jsx(Container, {
+    id: id,
+    className: clsx('inks-compose', span && "inks-span-".concat(span), className),
+    content: content
+  });
+};
+var TableCell = function TableCell(_ref3) {
+  var item = _ref3.item;
   if (typeof item === 'string') {
     return jsxRuntime.jsx("td", {
       className: "inks-cell",
@@ -224,8 +243,8 @@ var TableCell = function TableCell(_ref2) {
     children: value
   });
 };
-var TableRow = function TableRow(_ref3) {
-  var cells = _ref3.cells;
+var TableRow = function TableRow(_ref4) {
+  var cells = _ref4.cells;
   if (!cells.length) {
     return null;
   }
@@ -300,23 +319,23 @@ var Table = function Table(props) {
     })]
   });
 };
-var Text = function Text(_ref4) {
-  var id = _ref4.id,
-    value = _ref4.value,
-    span = _ref4.span,
-    className = _ref4.className;
+var Text = function Text(_ref5) {
+  var id = _ref5.id,
+    value = _ref5.value,
+    span = _ref5.span,
+    className = _ref5.className;
   return jsxRuntime.jsx("div", {
     id: id,
     className: clsx('inks-text', span && "inks-span-".concat(span), className),
     children: value
   });
 };
-var Pair = function Pair(_ref5) {
-  var id = _ref5.id,
-    value = _ref5.value,
-    label = _ref5.label,
-    span = _ref5.span,
-    className = _ref5.className;
+var Pair = function Pair(_ref6) {
+  var id = _ref6.id,
+    value = _ref6.value,
+    label = _ref6.label,
+    span = _ref6.span,
+    className = _ref6.className;
   return jsxRuntime.jsxs("div", {
     id: id,
     className: clsx('inks-pair', span && "inks-span-".concat(span), className),
@@ -346,6 +365,8 @@ var InkScripter = react.forwardRef(function (props, ref) {
           return jsxRuntime.jsx(Text, _extends({}, item), index);
         case 'pair':
           return jsxRuntime.jsx(Pair, _extends({}, item), index);
+        case 'compose':
+          return jsxRuntime.jsx(Compose, _extends({}, item), index);
       }
     })
   });

package/dist/esm/InkScripter.d.ts

@@ -14,10 +14,17 @@ export type ContentPairItem = {
     value: string;
     span?: number;
 };
+export type ContentComposeItem = {
+    id?: string;
+    type: 'compose';
+    span?: number;
+    className?: string;
+    content: (ContentPairItem | ContentTextItem)[];
+};
 export type ContentGridItem = {
     id?: string;
     type: 'grid';
-    content: (ContentPairItem | ContentTextItem)[];
+    content: (ContentPairItem | ContentTextItem | ContentComposeItem)[];
 };
 export type ContentTableCellItem = {
     id?: string;
@@ -34,7 +41,7 @@ export type ContentTableItem = {
     body?: ContentTableCellItem[][];
     foot?: ContentTableCellItem[][];
 };
-export type ContentItemType = ContentGridItem | ContentTableItem | ContentTextItem | ContentPairItem;
+export type ContentItemType = ContentGridItem | ContentTableItem | ContentTextItem | ContentPairItem | ContentComposeItem;
 export type ContentType = ContentItemType[];
 export type InkScripterProps = {
     value?: ContentType;

package/dist/esm/index.js

@@ -118,18 +118,23 @@ padding-top: ${marginTop}mm;
     return pageStyle;
 };
 
-const Container = ({ id, content = [], className, }) => {
-    return (jsx("div", { id: id, className: clsx('inks-grid', className), children: content.map((item, idx) => {
+const Container = ({ id, content = [], className, itemClass, }) => {
+    return (jsx("div", { id: id, className: className, children: content.map((item, idx) => {
             switch (item.type) {
                 case 'pair':
-                    return (jsx(Pair, { ...item, className: clsx('inks-grid-item', item.className) }, idx));
+                    return (jsx(Pair, { ...item, className: clsx(itemClass, item.className) }, idx));
                 case 'text':
-                    return (jsx(Text, { ...item, className: clsx('inks-grid-item', item.className) }, idx));
+                    return (jsx(Text, { ...item, className: clsx(itemClass, item.className) }, idx));
+                case 'compose':
+                    return (jsx(Compose, { ...item, className: clsx(itemClass, item.className) }, idx));
             }
         }) }));
 };
 const Grid = (props) => {
-    return jsx(Container, { ...props });
+    return jsx(Container, { className: "inks-grid", itemClass: "inks-grid-item", ...props });
+};
+const Compose = ({ id, content, span, className }) => {
+    return (jsx(Container, { id: id, className: clsx('inks-compose', span && `inks-span-${span}`, className), content: content }));
 };
 const TableCell = ({ item }) => {
     if (typeof item === 'string') {
@@ -193,6 +198,8 @@ const InkScripter = forwardRef((props, ref) => {
                     return jsx(Text, { ...item }, index);
                 case 'pair':
                     return jsx(Pair, { ...item }, index);
+                case 'compose':
+                    return jsx(Compose, { ...item }, index);
             }
         }) }));
 });

package/package.json

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