@nascentdigital/funnel-editor 4.5.4 → 4.5.6

package/dist/page/components/config/ListPanelEditor.js

@@ -56,8 +56,34 @@ function ListPanelEditor({ className, anchor, open, onClose, configuration }) {
                             .map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: field, size: "xs" }, field.id))] }) }), (0, jsx_runtime_1.jsx)(core_1.QuickPicker, { ref: layoutPickerRef, variant: "card", title: "Pick List Layout", description: "Select an available layout for this list.", renderItem: (item) => renderListLayoutItem(item) })] }));
 }
 function renderListLayoutItem(item) {
+    // panel
+    const panel = (className = 'w-full') => ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('bg-surface-placeholder rounded-[3px]', className) }));
+    // get content
+    const panelClassName = 'w-full h-full';
+    const panelPaddedX = 'px-10';
+    const panelPaddedY = 'py-10';
+    const panelPadded = (0, classnames_1.default)(panelPaddedX, panelPaddedY);
+    let content;
     switch (item.id) {
+        case 'grid':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid grid-cols-3 auto-cols-fr gap-x-l3 gap-y-l2 '), children: [panel(), panel(), panel(), panel(), panel()] }));
+            break;
+        case 'verticalStack':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid grid-cols-1 auto-rows-fr gap-y-l2 '), children: [panel(), panel(), panel()] }));
+            break;
+        case 'horizontalStack':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid grid-rows-1 auto-cols-fr grid-flow-col gap-x-l3 '), children: [panel(), panel(), panel()] }));
+            break;
+        case 'masonry':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPaddedX, 'grid grid-cols-3 grid-flow-col gap-x-l3 pt-10'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [panel('h-l5'), panel('h-l6'), panel('h-l5')] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [panel('h-22'), panel('h-l6')] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [panel('h-l4'), panel('h-l7'), panel('h-l5')] })] }));
+            break;
+        case 'bento':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid auto-rows-auto auto-cols-auto gap-l3'), children: [panel('w-20 row-start-1 row-span-2 col-start-1'), panel('w-28 row-start-1 col-start-2'), panel('w-18 row-start-2 col-start-2')] }));
+            break;
         default:
-            return ((0, jsx_runtime_1.jsx)("div", { children: item.id }));
+            content = ((0, jsx_runtime_1.jsx)("div", { children: item.id }));
+            break;
     }
+    // render item in frame
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-full h-full flex justify-center items-center'), children: content }));
 }

package/dist/styles/index.css

@@ -4400,6 +4400,15 @@ video {
 .col-end-13{
     grid-column-end: 13;
 }
+.row-span-2{
+    grid-row: span 2 / span 2;
+}
+.row-start-1{
+    grid-row-start: 1;
+}
+.row-start-2{
+    grid-row-start: 2;
+}
 .m-l6{
     margin: 16px;
 }
@@ -4566,6 +4575,9 @@ video {
 .h-20{
     height: 20px;
 }
+.h-22{
+    height: 22px;
+}
 .h-24{
     height: 24px;
 }
@@ -4638,6 +4650,18 @@ video {
 .h-full{
     height: 100%;
 }
+.h-l4{
+    height: 8px;
+}
+.h-l5{
+    height: 12px;
+}
+.h-l6{
+    height: 16px;
+}
+.h-l7{
+    height: 20px;
+}
 .h-lvh{
     height: 100lvh;
 }
@@ -4713,6 +4737,9 @@ video {
 .w-20{
     width: 20px;
 }
+.w-28{
+    width: 28px;
+}
 .w-32{
     width: 32px;
 }
@@ -4937,6 +4964,9 @@ video {
 .grid-cols-2{
     grid-template-columns: repeat(2, minmax(0, 1fr));
 }
+.grid-cols-3{
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
 .grid-cols-\[1fr\2c 1fr\]{
     grid-template-columns: 1fr 1fr;
 }
@@ -5054,10 +5084,17 @@ video {
 .gap-l9{
     gap: 32px;
 }
+.gap-x-l3{
+    -moz-column-gap: 6px;
+         column-gap: 6px;
+}
 .gap-x-l5{
     -moz-column-gap: 12px;
          column-gap: 12px;
 }
+.gap-y-l2{
+    row-gap: 4px;
+}
 .gap-y-l4{
     row-gap: 8px;
 }
@@ -5103,6 +5140,9 @@ video {
 .rounded-\[2px\]{
     border-radius: 2px;
 }
+.rounded-\[3px\]{
+    border-radius: 3px;
+}
 .rounded-full{
     border-radius: 9999px;
 }
@@ -5517,6 +5557,10 @@ video {
     padding-left: 24px;
     padding-right: 24px;
 }
+.py-10{
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
 .py-l1{
     padding-top: 2px;
     padding-bottom: 2px;
@@ -5593,6 +5637,9 @@ video {
 .pr-l5{
     padding-right: 12px;
 }
+.pt-10{
+    padding-top: 10px;
+}
 .pt-l12{
     padding-top: 56px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nascentdigital/funnel-editor",
-  "version": "4.5.4",
+  "version": "4.5.6",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "restricted"
@@ -89,5 +89,5 @@
     "ts-jest": "^29",
     "type-fest": "^4"
   },
-  "gitHead": "d3d65564e0935e40c8b1e441316b63a126516bca"
+  "gitHead": "e5899ba807b2c7241f493c850a98c1607df6771b"
 }

package/dist/page/components/config/ListLayoutPicker.d.ts

@@ -1,6 +0,0 @@
-export declare function ListLayoutPicker({ className }: ListLayoutPicker.Props): import("react/jsx-runtime").JSX.Element;
-export declare namespace ListLayoutPicker {
-    type Props = {
-        className?: string;
-    };
-}

package/dist/page/components/config/ListLayoutPicker.js

@@ -1,13 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListLayoutPicker = ListLayoutPicker;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = __importDefault(require("classnames"));
-// component
-function ListLayoutPicker({ className }) {
-    // render
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), children: "ListLayoutPicker" }));
-}