@nascentdigital/funnel-editor 4.5.4 → 4.5.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core/components/interaction/QuickPicker.d.ts +1 -0
- package/dist/core/components/interaction/QuickPicker.js +3 -3
- package/dist/core/domain/BlockConfiguration.d.ts +2 -1
- package/dist/core/domain/BlockConfiguration.js +28 -2
- package/dist/page/components/config/BlockConfigEditor.js +33 -18
- package/dist/page/components/config/ListPanelEditor.js +40 -1
- package/dist/styles/index.css +69 -9
- package/package.json +2 -2
- package/dist/page/components/config/ListLayoutPicker.d.ts +0 -6
- package/dist/page/components/config/ListLayoutPicker.js +0 -13
|
@@ -5,6 +5,7 @@ export declare const QuickPicker: import("react").ForwardRefExoticComponent<Quic
|
|
|
5
5
|
export declare namespace QuickPicker {
|
|
6
6
|
type Item<TId extends string> = {
|
|
7
7
|
id: TId;
|
|
8
|
+
label: string;
|
|
8
9
|
};
|
|
9
10
|
type ItemVariant = 'card';
|
|
10
11
|
type Props<TId extends string, TItem extends Item<TId>> = {
|
|
@@ -104,7 +104,7 @@ exports.QuickPicker = (0, react_1.forwardRef)(function QuickPicker({ variant, ti
|
|
|
104
104
|
})) })] })));
|
|
105
105
|
});
|
|
106
106
|
function renderCard({ item, content, selected, onSelect }) {
|
|
107
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('FieldCard w-[72px] h-[55px]', {
|
|
108
|
-
|
|
109
|
-
|
|
107
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-l2 shrink-0", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('FieldCard w-[72px] h-[55px]', {
|
|
108
|
+
'FieldCard-selected': selected
|
|
109
|
+
}), onClick: () => onSelect(item.id), children: content }), (0, jsx_runtime_1.jsx)("span", { className: "label-xxs text-content-tertiary cursor-default", children: item.label })] }, item.id));
|
|
110
110
|
}
|
|
@@ -20,7 +20,7 @@ export declare class BlockConfiguration {
|
|
|
20
20
|
get blocksFields(): FieldModel.Config[];
|
|
21
21
|
get blockFieldData(): Schema.Block.Data.ForFields<Schema.Fields>;
|
|
22
22
|
get desktopFields(): FieldModel.Config[];
|
|
23
|
-
get mobileFields():
|
|
23
|
+
get mobileFields(): FieldModel.Config[];
|
|
24
24
|
get nameField(): FieldModel.Config | undefined;
|
|
25
25
|
get themeField(): FieldModel.Config | undefined;
|
|
26
26
|
get layoutField(): Field<Schema.EnumField<Schema.EnumField.Options<PanelLayout>>> | undefined;
|
|
@@ -30,6 +30,7 @@ export declare class BlockConfiguration {
|
|
|
30
30
|
get messageFields(): Record<keyof MessagePanel.Config.Keys<'message'>, FieldModel.Config | undefined>;
|
|
31
31
|
get listFields(): Record<keyof ListPanel.Config.Keys<'list'>, FieldModel.Config | undefined>;
|
|
32
32
|
get visualFields(): Record<keyof VisualPanel.Config.Keys<'visual'>, FieldModel.Config | undefined>;
|
|
33
|
+
get extendedFields(): Record<string, FieldModel.Config>;
|
|
33
34
|
get layout(): BlockLayout | undefined;
|
|
34
35
|
get events$(): import("rxjs").Observable<EventBus.Event<string, string>>;
|
|
35
36
|
get valid(): boolean;
|
|
@@ -76,11 +76,14 @@ class BlockConfiguration {
|
|
|
76
76
|
}
|
|
77
77
|
get desktopFields() {
|
|
78
78
|
return [
|
|
79
|
-
this.
|
|
79
|
+
...Object.values(this.extendedFields),
|
|
80
|
+
this.getEditableField('contentAlign'),
|
|
80
81
|
].filter(funnel_core_1.Value.isDefined);
|
|
81
82
|
}
|
|
82
83
|
get mobileFields() {
|
|
83
|
-
return [
|
|
84
|
+
return [
|
|
85
|
+
...Object.values(this.extendedFields)
|
|
86
|
+
].filter(funnel_core_1.Value.isDefined);
|
|
84
87
|
}
|
|
85
88
|
get nameField() {
|
|
86
89
|
const { block, sectionBlock } = this;
|
|
@@ -154,6 +157,29 @@ class BlockConfiguration {
|
|
|
154
157
|
horizontalAlign: this.getEditableField(keys.horizontalAlign)
|
|
155
158
|
};
|
|
156
159
|
}
|
|
160
|
+
get extendedFields() {
|
|
161
|
+
// get all top-level keys
|
|
162
|
+
const { block, _editableFields } = this;
|
|
163
|
+
const coreKeys = [
|
|
164
|
+
block.nameField.id,
|
|
165
|
+
funnel_ui_1.BlockConfig.Presets.ThemeOnly.key,
|
|
166
|
+
'layout',
|
|
167
|
+
'slotVariation',
|
|
168
|
+
'contentAlign',
|
|
169
|
+
...Object.values(funnel_ui_1.MessagePanel.Config.getKeys('message')),
|
|
170
|
+
...Object.values(funnel_ui_1.ListPanel.Config.getKeys('list')),
|
|
171
|
+
...Object.values(funnel_ui_1.VisualPanel.Config.getKeys('visual'))
|
|
172
|
+
];
|
|
173
|
+
// return all editable fields, minus the core keys
|
|
174
|
+
return _editableFields.reduce((fields, field) => {
|
|
175
|
+
// add field if not core
|
|
176
|
+
if (!coreKeys.includes(field.id)) {
|
|
177
|
+
fields[field.id] = field;
|
|
178
|
+
}
|
|
179
|
+
// keep reducing
|
|
180
|
+
return fields;
|
|
181
|
+
}, {});
|
|
182
|
+
}
|
|
157
183
|
get layout() {
|
|
158
184
|
return this._layout;
|
|
159
185
|
}
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
exports.BlockConfigEditor = BlockConfigEditor;
|
|
4
7
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
8
|
const funnel_core_1 = require("@nascentdigital/funnel-core");
|
|
9
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
6
10
|
const react_1 = require("motion/react");
|
|
7
11
|
const react_2 = require("react");
|
|
8
12
|
const rxjs_1 = require("rxjs");
|
|
@@ -17,7 +21,7 @@ function BlockConfigEditor({ configuration, onClose }) {
|
|
|
17
21
|
const [blockView, setBlockView] = (0, react_2.useState)('desktop');
|
|
18
22
|
const pageController = (0, hooks_1.usePageController)();
|
|
19
23
|
const panelLayoutPickerRef = (0, react_2.useRef)(null);
|
|
20
|
-
const { modified = false, valid = false, blocksFields = [], desktopFields = [], mobileFields = [] } = configuration !== null && configuration !== void 0 ? configuration : {};
|
|
24
|
+
const { layoutField, modified = false, valid = false, blocksFields = [], desktopFields = [], mobileFields = [] } = configuration !== null && configuration !== void 0 ? configuration : {};
|
|
21
25
|
const settingsFields = blockView === 'desktop' ? desktopFields : mobileFields;
|
|
22
26
|
// sync w/ configuration
|
|
23
27
|
(0, core_1.useBlockConfiguration)(configuration);
|
|
@@ -39,7 +43,6 @@ function BlockConfigEditor({ configuration, onClose }) {
|
|
|
39
43
|
const onChangePanelLayout = async (e) => {
|
|
40
44
|
var _a;
|
|
41
45
|
// skip if there's no layout field (shouldn't happen)
|
|
42
|
-
const { layoutField } = configuration !== null && configuration !== void 0 ? configuration : {};
|
|
43
46
|
if (!layoutField) {
|
|
44
47
|
return;
|
|
45
48
|
}
|
|
@@ -63,7 +66,8 @@ function BlockConfigEditor({ configuration, onClose }) {
|
|
|
63
66
|
// render
|
|
64
67
|
const { options: slotOptions = [], currentIndex: slotIndex = 0 } = (_a = configuration === null || configuration === void 0 ? void 0 : configuration.slotState) !== null && _a !== void 0 ? _a : {};
|
|
65
68
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.SideSheet, { title: "Block Configuration", size: "xs", backdrop: "glass", open: !!configuration, onSave: onSave, onClose: onClose, disableDismiss: modified, disableSave: !modified || !valid, customActions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", disabled: configuration === null || configuration === void 0 ? void 0 : configuration.isConfigInDefault, onClick: () => configuration === null || configuration === void 0 ? void 0 : configuration.reset(), children: "Reset to Default" }), children: (0, jsx_runtime_1.jsxs)("div", { className: "h-full flex flex-col gap-l6", children: [(0, jsx_runtime_1.jsxs)("section", { className: "grid grid-cols-2 gap-x-l5 gap-y-l4", children: [blocksFields.length > 0 &&
|
|
66
|
-
(0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: blocksFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-full", field: field, size: "xs" }, field.id)) }),
|
|
69
|
+
(0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: blocksFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-full", field: field, size: "xs" }, field.id)) }), layoutField && layoutField.schema.enum.length > 1 &&
|
|
70
|
+
(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { label: "Layout", size: "xs" }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", iconLeft: "LayoutTemplate", onClick: onChangePanelLayout, children: "Change" })] }), slotOptions.length > 1 &&
|
|
67
71
|
(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { label: "Arrangement", size: "xs" }), slotOptions.length === 2
|
|
68
72
|
?
|
|
69
73
|
(0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", iconLeft: "ArrowLeftRight", onClick: () => configuration === null || configuration === void 0 ? void 0 : configuration.gotToNextSlot(), children: "Swap" })
|
|
@@ -73,37 +77,48 @@ function BlockConfigEditor({ configuration, onClose }) {
|
|
|
73
77
|
(0, jsx_runtime_1.jsx)("section", { className: "grid grid-cols-2 auto-rows-auto items-start gap-l6", children: (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: settingsFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-2", field: field, size: "xs" }, field.id)) }) })] }) }), (0, jsx_runtime_1.jsx)(core_1.QuickPicker, { ref: panelLayoutPickerRef, variant: "card", title: "Pick Block Layout", description: "Select an available layout for this block.", renderItem: (item) => renderPanelLayoutItem(item) })] }));
|
|
74
78
|
}
|
|
75
79
|
function renderPanelLayoutItem(item) {
|
|
80
|
+
const panel = (className = 'flex-1') => ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('bg-surface-placeholder rounded-[2px]', className) }));
|
|
81
|
+
const panelPaddedX = 'px-l4';
|
|
82
|
+
const panelPaddedY = 'py-l4';
|
|
83
|
+
const panelPadded = (0, classnames_1.default)(panelPaddedX, panelPaddedY);
|
|
84
|
+
const panelGap = 'gap-l1';
|
|
85
|
+
const nestedPanel = (config = {}) => {
|
|
86
|
+
// unpack config
|
|
87
|
+
const { panelClassName, nestedPanelClassName, multipleItems = false } = config;
|
|
88
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full bg-surface-placeholder rounded-[2px]', panelClassName, panelGap, { 'p-l2': multipleItems }), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('flex-1 bg-surface-placeholder-raised rounded-[2px]', nestedPanelClassName, { 'm-l2': !multipleItems }) }), multipleItems &&
|
|
89
|
+
(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('flex-1 bg-surface-placeholder-raised rounded-[2px]', nestedPanelClassName) })] }));
|
|
90
|
+
};
|
|
76
91
|
switch (item.id) {
|
|
77
92
|
case 'solo':
|
|
78
|
-
return ((0, jsx_runtime_1.jsx)("div", { className:
|
|
93
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('size-full', panelPadded), children: panel('size-full') }));
|
|
79
94
|
case 'stack.v':
|
|
80
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className:
|
|
95
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full", panelPadded, panelGap), children: [panel(), panel()] }));
|
|
81
96
|
case 'stack.h':
|
|
82
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className:
|
|
97
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex flex-col h-full", panelPadded, panelGap), children: [panel(), panel()] }));
|
|
83
98
|
case 'brick.v':
|
|
84
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className:
|
|
99
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex flex-col h-full", panelPadded, panelGap), children: [panel(), panel(), panel()] }));
|
|
85
100
|
case 'brick.t':
|
|
86
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex
|
|
101
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex flex-col h-full", panelPadded, panelGap), children: [panel('flex-1 w-full h-[20px]'), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex flex-1', panelGap), children: [panel(), panel()] })] }));
|
|
87
102
|
case 'brick.r':
|
|
88
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className:
|
|
103
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full', panelPadded, panelGap), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full flex-1 flex-col', panelGap), children: [panel(), panel()] }), panel('h-full w-[30px]')] }));
|
|
89
104
|
case 'brick.b':
|
|
90
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex
|
|
105
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex flex-col h-full", panelPadded, panelGap), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex flex-1', panelGap), children: [panel(), panel()] }), panel('flex-1 w-full h-[20px]')] }));
|
|
91
106
|
case 'brick.l':
|
|
92
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className:
|
|
107
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full', panelPadded, panelGap), children: [panel('h-full w-[30px]'), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full flex-1 flex-col', panelGap), children: [panel(), panel()] })] }));
|
|
93
108
|
case 'nested':
|
|
94
|
-
return ((0, jsx_runtime_1.jsx)("div", { className:
|
|
109
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('size-full', panelPadded), children: nestedPanel() }));
|
|
95
110
|
case 'nested.v':
|
|
96
|
-
return ((0, jsx_runtime_1.jsx)("div", { className:
|
|
111
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('size-full', panelPadded), children: nestedPanel({ panelClassName: 'flex-col', multipleItems: true }) }));
|
|
97
112
|
case 'nested.h':
|
|
98
|
-
return ((0, jsx_runtime_1.jsx)("div", { className:
|
|
113
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('size-full', panelPadded), children: nestedPanel({ multipleItems: true }) }));
|
|
99
114
|
case 'nested.t':
|
|
100
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className:
|
|
115
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full flex-col", panelPadded, panelGap), children: [nestedPanel({ panelClassName: 'flex-1' }), panel()] }));
|
|
101
116
|
case 'nested.r':
|
|
102
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className:
|
|
117
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full", panelPadded, panelGap), children: [panel(), nestedPanel({ panelClassName: 'flex-1' })] }));
|
|
103
118
|
case 'nested.b':
|
|
104
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className:
|
|
119
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full flex-col", panelPadded, panelGap), children: [panel(), nestedPanel({ panelClassName: 'flex-1' })] }));
|
|
105
120
|
case 'nested.l':
|
|
106
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className:
|
|
121
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full", panelPadded, panelGap), children: [nestedPanel({ panelClassName: 'flex-1' }), panel()] }));
|
|
107
122
|
default:
|
|
108
123
|
return ((0, jsx_runtime_1.jsx)("div", { children: item.id }));
|
|
109
124
|
}
|
|
@@ -56,8 +56,47 @@ function ListPanelEditor({ className, anchor, open, onClose, configuration }) {
|
|
|
56
56
|
.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) })] }));
|
|
57
57
|
}
|
|
58
58
|
function renderListLayoutItem(item) {
|
|
59
|
+
// panel
|
|
60
|
+
const panel = (className = 'w-full') => ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('bg-surface-placeholder-raised rounded-[2px]', className) }));
|
|
61
|
+
// get content
|
|
62
|
+
const panelClassName = 'w-full h-full';
|
|
63
|
+
const panelPaddedX = 'px-10';
|
|
64
|
+
const panelPaddedY = 'py-10';
|
|
65
|
+
const panelPadded = (0, classnames_1.default)(panelPaddedX, panelPaddedY);
|
|
66
|
+
let content;
|
|
59
67
|
switch (item.id) {
|
|
68
|
+
case 'card':
|
|
69
|
+
case 'grid':
|
|
70
|
+
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()] }));
|
|
71
|
+
break;
|
|
72
|
+
case 'flexWrap':
|
|
73
|
+
content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'flex flex-wrap justify-center items-center gap-l3'), children: [panel('w-12 h-12'), panel('w-12 h-12'), panel('w-12 h-12'), panel('w-12 h-12'), panel('w-12 h-12')] }));
|
|
74
|
+
break;
|
|
75
|
+
case 'verticalStack':
|
|
76
|
+
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()] }));
|
|
77
|
+
break;
|
|
78
|
+
case 'horizontalStack':
|
|
79
|
+
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()] }));
|
|
80
|
+
break;
|
|
81
|
+
case 'masonry':
|
|
82
|
+
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')] })] }));
|
|
83
|
+
break;
|
|
84
|
+
case 'bento':
|
|
85
|
+
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')] }));
|
|
86
|
+
break;
|
|
87
|
+
case 'brick':
|
|
88
|
+
content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPaddedX, 'grid grid-cols-2 gap-l3 pt-10'), children: [panel('h-12 row-start-1 col-span-full'), panel('h-12 row-start-2 col-start-1'), panel('h-12 row-start-2 col-start-2'), panel('h-12 row-start-3 col-span-full')] }));
|
|
89
|
+
break;
|
|
90
|
+
case 'brickFlipped':
|
|
91
|
+
content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPaddedX, 'grid grid-cols-2 gap-l3 pt-10'), children: [panel('h-12 row-start-1 col-start-1'), panel('h-12 row-start-1 col-start-2'), panel('h-12 row-start-2 col-span-full'), panel('h-12 row-start-3 col-start-1'), panel('h-12 row-start-3 col-start-2')] }));
|
|
92
|
+
break;
|
|
93
|
+
case 'carousel':
|
|
94
|
+
content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, 'flex flex-col gap-l2 pt-10 pb-l3'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex items-stretch gap-l3", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-8 bg-surface-placeholder rounded-r-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder-raised rounded-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "w-8 bg-surface-placeholder rounded-l-[2px]" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center items-center gap-l1", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 bg-surface-placeholder-raised rounded-full" }), (0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 bg-surface-placeholder-raised rounded-full" }), (0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 bg-surface-placeholder-raised rounded-full" })] })] }));
|
|
95
|
+
break;
|
|
60
96
|
default:
|
|
61
|
-
|
|
97
|
+
content = ((0, jsx_runtime_1.jsx)("div", { children: item.id }));
|
|
98
|
+
break;
|
|
62
99
|
}
|
|
100
|
+
// render item in frame
|
|
101
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-full h-full flex justify-center items-center'), children: content }));
|
|
63
102
|
}
|
package/dist/styles/index.css
CHANGED
|
@@ -4400,6 +4400,21 @@ video {
|
|
|
4400
4400
|
.col-end-13{
|
|
4401
4401
|
grid-column-end: 13;
|
|
4402
4402
|
}
|
|
4403
|
+
.row-span-2{
|
|
4404
|
+
grid-row: span 2 / span 2;
|
|
4405
|
+
}
|
|
4406
|
+
.row-start-1{
|
|
4407
|
+
grid-row-start: 1;
|
|
4408
|
+
}
|
|
4409
|
+
.row-start-2{
|
|
4410
|
+
grid-row-start: 2;
|
|
4411
|
+
}
|
|
4412
|
+
.row-start-3{
|
|
4413
|
+
grid-row-start: 3;
|
|
4414
|
+
}
|
|
4415
|
+
.m-l2{
|
|
4416
|
+
margin: 4px;
|
|
4417
|
+
}
|
|
4403
4418
|
.m-l6{
|
|
4404
4419
|
margin: 16px;
|
|
4405
4420
|
}
|
|
@@ -4557,6 +4572,9 @@ video {
|
|
|
4557
4572
|
.h-10{
|
|
4558
4573
|
height: 10px;
|
|
4559
4574
|
}
|
|
4575
|
+
.h-12{
|
|
4576
|
+
height: 12px;
|
|
4577
|
+
}
|
|
4560
4578
|
.h-14{
|
|
4561
4579
|
height: 14px;
|
|
4562
4580
|
}
|
|
@@ -4566,6 +4584,9 @@ video {
|
|
|
4566
4584
|
.h-20{
|
|
4567
4585
|
height: 20px;
|
|
4568
4586
|
}
|
|
4587
|
+
.h-22{
|
|
4588
|
+
height: 22px;
|
|
4589
|
+
}
|
|
4569
4590
|
.h-24{
|
|
4570
4591
|
height: 24px;
|
|
4571
4592
|
}
|
|
@@ -4623,9 +4644,6 @@ video {
|
|
|
4623
4644
|
.h-\[55px\]{
|
|
4624
4645
|
height: 55px;
|
|
4625
4646
|
}
|
|
4626
|
-
.h-\[60\%\]{
|
|
4627
|
-
height: 60%;
|
|
4628
|
-
}
|
|
4629
4647
|
.h-\[80px\]{
|
|
4630
4648
|
height: 80px;
|
|
4631
4649
|
}
|
|
@@ -4638,6 +4656,18 @@ video {
|
|
|
4638
4656
|
.h-full{
|
|
4639
4657
|
height: 100%;
|
|
4640
4658
|
}
|
|
4659
|
+
.h-l4{
|
|
4660
|
+
height: 8px;
|
|
4661
|
+
}
|
|
4662
|
+
.h-l5{
|
|
4663
|
+
height: 12px;
|
|
4664
|
+
}
|
|
4665
|
+
.h-l6{
|
|
4666
|
+
height: 16px;
|
|
4667
|
+
}
|
|
4668
|
+
.h-l7{
|
|
4669
|
+
height: 20px;
|
|
4670
|
+
}
|
|
4641
4671
|
.h-lvh{
|
|
4642
4672
|
height: 100lvh;
|
|
4643
4673
|
}
|
|
@@ -4701,6 +4731,9 @@ video {
|
|
|
4701
4731
|
.w-11\/12{
|
|
4702
4732
|
width: 91.666667%;
|
|
4703
4733
|
}
|
|
4734
|
+
.w-12{
|
|
4735
|
+
width: 12px;
|
|
4736
|
+
}
|
|
4704
4737
|
.w-14{
|
|
4705
4738
|
width: 14px;
|
|
4706
4739
|
}
|
|
@@ -4713,6 +4746,9 @@ video {
|
|
|
4713
4746
|
.w-20{
|
|
4714
4747
|
width: 20px;
|
|
4715
4748
|
}
|
|
4749
|
+
.w-28{
|
|
4750
|
+
width: 28px;
|
|
4751
|
+
}
|
|
4716
4752
|
.w-32{
|
|
4717
4753
|
width: 32px;
|
|
4718
4754
|
}
|
|
@@ -4737,8 +4773,8 @@ video {
|
|
|
4737
4773
|
.w-6{
|
|
4738
4774
|
width: 6px;
|
|
4739
4775
|
}
|
|
4740
|
-
.w-
|
|
4741
|
-
width:
|
|
4776
|
+
.w-8{
|
|
4777
|
+
width: 8px;
|
|
4742
4778
|
}
|
|
4743
4779
|
.w-8\/12{
|
|
4744
4780
|
width: 66.666667%;
|
|
@@ -4937,6 +4973,9 @@ video {
|
|
|
4937
4973
|
.grid-cols-2{
|
|
4938
4974
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
4939
4975
|
}
|
|
4976
|
+
.grid-cols-3{
|
|
4977
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
4978
|
+
}
|
|
4940
4979
|
.grid-cols-\[1fr\2c 1fr\]{
|
|
4941
4980
|
grid-template-columns: 1fr 1fr;
|
|
4942
4981
|
}
|
|
@@ -5054,10 +5093,17 @@ video {
|
|
|
5054
5093
|
.gap-l9{
|
|
5055
5094
|
gap: 32px;
|
|
5056
5095
|
}
|
|
5096
|
+
.gap-x-l3{
|
|
5097
|
+
-moz-column-gap: 6px;
|
|
5098
|
+
column-gap: 6px;
|
|
5099
|
+
}
|
|
5057
5100
|
.gap-x-l5{
|
|
5058
5101
|
-moz-column-gap: 12px;
|
|
5059
5102
|
column-gap: 12px;
|
|
5060
5103
|
}
|
|
5104
|
+
.gap-y-l2{
|
|
5105
|
+
row-gap: 4px;
|
|
5106
|
+
}
|
|
5061
5107
|
.gap-y-l4{
|
|
5062
5108
|
row-gap: 8px;
|
|
5063
5109
|
}
|
|
@@ -5127,6 +5173,14 @@ video {
|
|
|
5127
5173
|
.rounded-xxs{
|
|
5128
5174
|
border-radius: 2px;
|
|
5129
5175
|
}
|
|
5176
|
+
.rounded-l-\[2px\]{
|
|
5177
|
+
border-top-left-radius: 2px;
|
|
5178
|
+
border-bottom-left-radius: 2px;
|
|
5179
|
+
}
|
|
5180
|
+
.rounded-r-\[2px\]{
|
|
5181
|
+
border-top-right-radius: 2px;
|
|
5182
|
+
border-bottom-right-radius: 2px;
|
|
5183
|
+
}
|
|
5130
5184
|
.rounded-t-lg{
|
|
5131
5185
|
border-top-left-radius: 18px;
|
|
5132
5186
|
border-top-right-radius: 18px;
|
|
@@ -5517,6 +5571,10 @@ video {
|
|
|
5517
5571
|
padding-left: 24px;
|
|
5518
5572
|
padding-right: 24px;
|
|
5519
5573
|
}
|
|
5574
|
+
.py-10{
|
|
5575
|
+
padding-top: 10px;
|
|
5576
|
+
padding-bottom: 10px;
|
|
5577
|
+
}
|
|
5520
5578
|
.py-l1{
|
|
5521
5579
|
padding-top: 2px;
|
|
5522
5580
|
padding-bottom: 2px;
|
|
@@ -5533,10 +5591,6 @@ video {
|
|
|
5533
5591
|
padding-top: 72px;
|
|
5534
5592
|
padding-bottom: 72px;
|
|
5535
5593
|
}
|
|
5536
|
-
.py-l2{
|
|
5537
|
-
padding-top: 4px;
|
|
5538
|
-
padding-bottom: 4px;
|
|
5539
|
-
}
|
|
5540
5594
|
.py-l3{
|
|
5541
5595
|
padding-top: 6px;
|
|
5542
5596
|
padding-bottom: 6px;
|
|
@@ -5557,6 +5611,9 @@ video {
|
|
|
5557
5611
|
padding-top: 24px;
|
|
5558
5612
|
padding-bottom: 24px;
|
|
5559
5613
|
}
|
|
5614
|
+
.pb-l3{
|
|
5615
|
+
padding-bottom: 6px;
|
|
5616
|
+
}
|
|
5560
5617
|
.pb-l4{
|
|
5561
5618
|
padding-bottom: 8px;
|
|
5562
5619
|
}
|
|
@@ -5593,6 +5650,9 @@ video {
|
|
|
5593
5650
|
.pr-l5{
|
|
5594
5651
|
padding-right: 12px;
|
|
5595
5652
|
}
|
|
5653
|
+
.pt-10{
|
|
5654
|
+
padding-top: 10px;
|
|
5655
|
+
}
|
|
5596
5656
|
.pt-l12{
|
|
5597
5657
|
padding-top: 56px;
|
|
5598
5658
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nascentdigital/funnel-editor",
|
|
3
|
-
"version": "4.5.
|
|
3
|
+
"version": "4.5.7",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"registry": "https://registry.npmjs.org/",
|
|
6
6
|
"access": "restricted"
|
|
@@ -89,5 +89,5 @@
|
|
|
89
89
|
"ts-jest": "^29",
|
|
90
90
|
"type-fest": "^4"
|
|
91
91
|
},
|
|
92
|
-
"gitHead": "
|
|
92
|
+
"gitHead": "aa14b53e99044a968b850c4f426e40d312a9306a"
|
|
93
93
|
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.ListLayoutPicker = ListLayoutPicker;
|
|
7
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
const classnames_1 = __importDefault(require("classnames"));
|
|
9
|
-
// component
|
|
10
|
-
function ListLayoutPicker({ className }) {
|
|
11
|
-
// render
|
|
12
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), children: "ListLayoutPicker" }));
|
|
13
|
-
}
|