@alpaca-headless/alpaca-headless-nextjs 1.0.19 → 1.0.21
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/cjs/components/PictureEditor.js +2 -2
- package/dist/cjs/editor/ComponentPalette.js +1 -1
- package/dist/cjs/editor/ComponentTree.js +1 -1
- package/dist/cjs/editor/GraphQL.js +1 -1
- package/dist/cjs/editor/MediaSelector.js +6 -6
- package/dist/editor.css +30 -0
- package/dist/esm/components/PictureEditor.js +2 -2
- package/dist/esm/editor/ComponentPalette.js +1 -1
- package/dist/esm/editor/ComponentTree.js +1 -1
- package/dist/esm/editor/GraphQL.js +1 -1
- package/dist/esm/editor/MediaSelector.js +6 -6
- package/package.json +1 -1
|
@@ -36,7 +36,7 @@ const PictureEditor = (_a) => {
|
|
|
36
36
|
editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, JSON.stringify(value), false);
|
|
37
37
|
}
|
|
38
38
|
console.log(JSON.stringify(field));
|
|
39
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MediaSelector_1.MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: imageSelected }), (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { header: "
|
|
40
|
-
(selectedVariant == variant ? " a-shadow-xl " : ""), children: [variant.src && (0, jsx_runtime_1.jsx)("img", { src: variant.src }), (0, jsx_runtime_1.jsx)("div", { className: "a-absolute " })] }, variant.name), (0, jsx_runtime_1.jsx)("div", { children: variant.name }), (0, jsx_runtime_1.jsx)("div", { children: variant.aspectRatioText })] }))) }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({}, otherProps, { onClick: () => setEditorVisible(true), children: ["PICTURE", (0, jsx_runtime_1.jsx)(Picture_1.Picture, { field: field, imageParams: imageParams, sources: sources })] }))] }));
|
|
39
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MediaSelector_1.MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: imageSelected }), (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { header: "Edit picture", visible: editorVisible, style: { width: "50vw" }, onHide: () => setEditorVisible(false), children: (0, jsx_runtime_1.jsx)("div", { className: "a-flex a-gap-1", children: (_c = (_b = field === null || field === void 0 ? void 0 : field.value) === null || _b === void 0 ? void 0 : _b.variants) === null || _c === void 0 ? void 0 : _c.map((variant) => ((0, jsx_runtime_1.jsxs)("div", { onClick: () => setSelectedVariant(variant), children: [(0, jsx_runtime_1.jsxs)("div", { className: "a-h-24 a-w-24 a-border a-relative" +
|
|
40
|
+
(selectedVariant == variant ? " a-shadow-xl " : ""), children: [variant.src && (0, jsx_runtime_1.jsx)("img", { src: variant.src }), (0, jsx_runtime_1.jsx)("div", { className: "a-absolute a-top-0 a-right-0 ", children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-pencil a-m-1 a-cursor-pointer", onClick: () => setMediaSelectorVisible(true) }) })] }, variant.name), (0, jsx_runtime_1.jsx)("div", { children: variant.name }), (0, jsx_runtime_1.jsx)("div", { children: variant.aspectRatioText })] }))) }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({}, otherProps, { onClick: () => setEditorVisible(true), children: ["PICTURE", (0, jsx_runtime_1.jsx)(Picture_1.Picture, { field: field, imageParams: imageParams, sources: sources })] }))] }));
|
|
41
41
|
};
|
|
42
42
|
exports.PictureEditor = PictureEditor;
|
|
@@ -44,7 +44,7 @@ function ComponentPalette({ selection, page, dragStart, dragEnd, }) {
|
|
|
44
44
|
}
|
|
45
45
|
return ((0, jsx_runtime_1.jsxs)("div", {
|
|
46
46
|
// onClick={directInsert}
|
|
47
|
-
draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: "p-3 shadow-md flex items-center flex-col gap-1 cursor-grab", children: [(0, jsx_runtime_1.jsx)("img", { src: option.icon, width: "32", height: "32" }), option.name] }, option.id));
|
|
47
|
+
draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: "a-p-3 a-shadow-md a-flex a-items-center a-flex-col a-gap-1 a-cursor-grab", children: [(0, jsx_runtime_1.jsx)("img", { src: option.icon, width: "32", height: "32" }), option.name] }, option.id));
|
|
48
48
|
}) }), (0, jsx_runtime_1.jsx)("h2", { className: "a-text-xl a-font-bold a-my-8", children: "Existing" }), (0, jsx_runtime_1.jsx)(ContentTree_1.default, { rootItemId: "0DE95AE4-41AB-4D01-9EB0-67441B7C2450", dragStart: (itemNode) => {
|
|
49
49
|
dragStart({
|
|
50
50
|
type: "link-component",
|
|
@@ -108,7 +108,7 @@ function ComponentTree({ page, selection, }) {
|
|
|
108
108
|
createMap(treeNodes, nodeDictionary);
|
|
109
109
|
const nodeTemplate = (node, options) => {
|
|
110
110
|
var _a;
|
|
111
|
-
let label = ((0, jsx_runtime_1.jsxs)("span", { "data-key": node.key, className: "flex", children: [node.label, (_a = node.tags) === null || _a === void 0 ? void 0 : _a.map((x) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { icon: x.icon, value: x.value, severity: x.severity, onClick: x.onClick, style: { backgroundColor: x.color, marginLeft: "8px" } }, x.value)))] }));
|
|
111
|
+
let label = ((0, jsx_runtime_1.jsxs)("span", { "data-key": node.key, className: "a-flex", children: [node.label, (_a = node.tags) === null || _a === void 0 ? void 0 : _a.map((x) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { icon: x.icon, value: x.value, severity: x.severity, onClick: x.onClick, style: { backgroundColor: x.color, marginLeft: "8px" } }, x.value)))] }));
|
|
112
112
|
return (0, jsx_runtime_1.jsx)("span", { className: options.className, children: label });
|
|
113
113
|
};
|
|
114
114
|
const menu = [
|
|
@@ -85,6 +85,6 @@ function GraphQL({ component }) {
|
|
|
85
85
|
editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, prettyQuery, false);
|
|
86
86
|
setShowSpinner(true);
|
|
87
87
|
}
|
|
88
|
-
return ((0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", style: { height: "100%" }, children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 50, className: "a-relative", children: (0, jsx_runtime_1.jsxs)("div", { className: "a-absolute a-inset-0 a-flex", children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { value: query, onChange: (e) => setQuery(e.target.value), className: "a-flex-1", style: { height: "100%" } }), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-refresh" + (showSpinner ? " pi-spin" : ""), onClick: refresh, disabled: showSpinner })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "alpaca-editor-tabs", children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, { className: "a-inset-0 absolute", children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Data", style: { height: "100%" }, className: "a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-m-1", children: Object.values(fieldsjsonValues).map((x) => renderItem(x)) }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "JSON", className: "a-relative", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: (0, jsx_runtime_1.jsx)(react_json_pretty_1.default, { data: component.graphql }) }) })] }) })] }));
|
|
88
|
+
return ((0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", style: { height: "100%" }, children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 50, className: "a-relative", children: (0, jsx_runtime_1.jsxs)("div", { className: "a-absolute a-inset-0 a-flex", children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { value: query, onChange: (e) => setQuery(e.target.value), className: "a-flex-1", style: { height: "100%" } }), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-refresh" + (showSpinner ? " pi-spin" : ""), onClick: refresh, disabled: showSpinner })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "alpaca-editor-tabs", children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, { className: "a-inset-0 a-absolute", children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Data", style: { height: "100%" }, className: "a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-m-1", children: Object.values(fieldsjsonValues).map((x) => renderItem(x)) }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "JSON", className: "a-relative", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: (0, jsx_runtime_1.jsx)(react_json_pretty_1.default, { data: component.graphql }) }) })] }) })] }));
|
|
89
89
|
}
|
|
90
90
|
exports.GraphQL = GraphQL;
|
|
@@ -14,13 +14,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
15
|
exports.MediaSelector = void 0;
|
|
16
16
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
17
|
-
const sidebar_1 = require("primereact/sidebar");
|
|
18
17
|
const ContentTree_1 = __importDefault(require("./ContentTree"));
|
|
19
18
|
const splitter_1 = require("primereact/splitter");
|
|
20
19
|
const react_1 = require("react");
|
|
21
20
|
const contentService_1 = require("./contentService");
|
|
22
21
|
const editContext_1 = require("./editContext");
|
|
23
22
|
const button_1 = require("primereact/button");
|
|
23
|
+
const dialog_1 = require("primereact/dialog");
|
|
24
24
|
const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
|
|
25
25
|
const [selectedFolderId, setSelectedFolderId] = (0, react_1.useState)();
|
|
26
26
|
const [images, setImages] = (0, react_1.useState)();
|
|
@@ -43,17 +43,17 @@ const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
|
|
|
43
43
|
}
|
|
44
44
|
});
|
|
45
45
|
}
|
|
46
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
46
|
+
return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { style: { width: "60%" }, visible: visible, onHide: onHide, children: (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-flex-col a-h-full", children: [(0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { className: "a-flex-1 a-border-0", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 35, className: "alpaca-overflow-scroll", children: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 70, children: (0, jsx_runtime_1.jsx)(ContentTree_1.default, { rootItemId: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", selectionMode: "single", selectedItemIds: selection, templateIds: ["FE5DD826-48C6-436D-B87A-7C4210C7413B"], expandIdPath: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", onSelectionChange: (selection) => {
|
|
47
47
|
if (selection.length)
|
|
48
48
|
setSelectedFolderId(selection[0]);
|
|
49
49
|
else
|
|
50
50
|
setSelectedFolderId(undefined);
|
|
51
|
-
} }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { children: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.name })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "alpaca-overflow-scroll relative", children: (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 gap-2 absolute inset-0", children: images === null || images === void 0 ? void 0 : images.map((t) => {
|
|
52
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col justify-between hover:shadow-md cursor-pointer p-1", onDoubleClick: () => {
|
|
51
|
+
} }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { children: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.name })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "alpaca-overflow-scroll a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-grid a-grid-cols-3 a-gap-2 a-absolute a-inset-0", children: images === null || images === void 0 ? void 0 : images.map((t) => {
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-flex-col a-justify-between hover:a-shadow-md a-cursor-pointer a-p-1", onDoubleClick: () => {
|
|
53
53
|
onMediaSelected(t.id);
|
|
54
54
|
onHide();
|
|
55
|
-
}, onClick: () => setSelectedImage(t), children: [(0, jsx_runtime_1.jsx)("img", { src: t.imageUrl }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs break-all", children: t.name })] }));
|
|
56
|
-
}) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end gap-3", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => onHide(), children: "Cancel" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: !selectedImage, onClick: () => {
|
|
55
|
+
}, onClick: () => setSelectedImage(t), children: [(0, jsx_runtime_1.jsx)("img", { src: t.imageUrl }), (0, jsx_runtime_1.jsx)("div", { className: "a-text-xs a-break-all", children: t.name })] }));
|
|
56
|
+
}) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-justify-end a-gap-3", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => onHide(), children: "Cancel" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: !selectedImage, onClick: () => {
|
|
57
57
|
onMediaSelected(selectedImage.id);
|
|
58
58
|
onHide();
|
|
59
59
|
}, children: "Select" })] })] }) }));
|
package/dist/editor.css
CHANGED
|
@@ -89,6 +89,14 @@
|
|
|
89
89
|
cursor: move;
|
|
90
90
|
}
|
|
91
91
|
|
|
92
|
+
.a-cursor-pointer {
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.a-grid-cols-3 {
|
|
97
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
98
|
+
}
|
|
99
|
+
|
|
92
100
|
.a-grid-cols-4 {
|
|
93
101
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
94
102
|
}
|
|
@@ -101,6 +109,10 @@
|
|
|
101
109
|
align-items: center;
|
|
102
110
|
}
|
|
103
111
|
|
|
112
|
+
.a-justify-end {
|
|
113
|
+
justify-content: flex-end;
|
|
114
|
+
}
|
|
115
|
+
|
|
104
116
|
.a-justify-between {
|
|
105
117
|
justify-content: space-between;
|
|
106
118
|
}
|
|
@@ -113,6 +125,10 @@
|
|
|
113
125
|
gap: 0.5rem;
|
|
114
126
|
}
|
|
115
127
|
|
|
128
|
+
.a-gap-3 {
|
|
129
|
+
gap: 0.75rem;
|
|
130
|
+
}
|
|
131
|
+
|
|
116
132
|
.a-space-x-4 > :not([hidden]) ~ :not([hidden]) {
|
|
117
133
|
--tw-space-x-reverse: 0;
|
|
118
134
|
margin-right: calc(1rem * var(--tw-space-x-reverse));
|
|
@@ -131,6 +147,10 @@
|
|
|
131
147
|
overflow-x: hidden;
|
|
132
148
|
}
|
|
133
149
|
|
|
150
|
+
.a-break-all {
|
|
151
|
+
word-break: break-all;
|
|
152
|
+
}
|
|
153
|
+
|
|
134
154
|
.a-rounded-none {
|
|
135
155
|
border-radius: 0px;
|
|
136
156
|
}
|
|
@@ -206,6 +226,10 @@
|
|
|
206
226
|
padding: 0.5rem;
|
|
207
227
|
}
|
|
208
228
|
|
|
229
|
+
.a-p-3 {
|
|
230
|
+
padding: 0.75rem;
|
|
231
|
+
}
|
|
232
|
+
|
|
209
233
|
.a-p-4 {
|
|
210
234
|
padding: 1rem;
|
|
211
235
|
}
|
|
@@ -423,4 +447,10 @@ div.p-tree .p-treenode-droppoint {
|
|
|
423
447
|
|
|
424
448
|
.hover\:a-underline:hover {
|
|
425
449
|
text-decoration-line: underline;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.hover\:a-shadow-md:hover {
|
|
453
|
+
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
454
|
+
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
|
455
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
426
456
|
}
|
|
@@ -33,6 +33,6 @@ export const PictureEditor = (_a) => {
|
|
|
33
33
|
editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, JSON.stringify(value), false);
|
|
34
34
|
}
|
|
35
35
|
console.log(JSON.stringify(field));
|
|
36
|
-
return (_jsxs(_Fragment, { children: [_jsx(MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: imageSelected }), _jsx(Dialog, { header: "
|
|
37
|
-
(selectedVariant == variant ? " a-shadow-xl " : ""), children: [variant.src && _jsx("img", { src: variant.src }), _jsx("div", { className: "a-absolute " })] }, variant.name), _jsx("div", { children: variant.name }), _jsx("div", { children: variant.aspectRatioText })] }))) }) }), _jsxs("span", Object.assign({}, otherProps, { onClick: () => setEditorVisible(true), children: ["PICTURE", _jsx(Picture, { field: field, imageParams: imageParams, sources: sources })] }))] }));
|
|
36
|
+
return (_jsxs(_Fragment, { children: [_jsx(MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: imageSelected }), _jsx(Dialog, { header: "Edit picture", visible: editorVisible, style: { width: "50vw" }, onHide: () => setEditorVisible(false), children: _jsx("div", { className: "a-flex a-gap-1", children: (_c = (_b = field === null || field === void 0 ? void 0 : field.value) === null || _b === void 0 ? void 0 : _b.variants) === null || _c === void 0 ? void 0 : _c.map((variant) => (_jsxs("div", { onClick: () => setSelectedVariant(variant), children: [_jsxs("div", { className: "a-h-24 a-w-24 a-border a-relative" +
|
|
37
|
+
(selectedVariant == variant ? " a-shadow-xl " : ""), children: [variant.src && _jsx("img", { src: variant.src }), _jsx("div", { className: "a-absolute a-top-0 a-right-0 ", children: _jsx("i", { className: "pi pi-pencil a-m-1 a-cursor-pointer", onClick: () => setMediaSelectorVisible(true) }) })] }, variant.name), _jsx("div", { children: variant.name }), _jsx("div", { children: variant.aspectRatioText })] }))) }) }), _jsxs("span", Object.assign({}, otherProps, { onClick: () => setEditorVisible(true), children: ["PICTURE", _jsx(Picture, { field: field, imageParams: imageParams, sources: sources })] }))] }));
|
|
38
38
|
};
|
|
@@ -38,7 +38,7 @@ export function ComponentPalette({ selection, page, dragStart, dragEnd, }) {
|
|
|
38
38
|
}
|
|
39
39
|
return (_jsxs("div", {
|
|
40
40
|
// onClick={directInsert}
|
|
41
|
-
draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: "p-3 shadow-md flex items-center flex-col gap-1 cursor-grab", children: [_jsx("img", { src: option.icon, width: "32", height: "32" }), option.name] }, option.id));
|
|
41
|
+
draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: "a-p-3 a-shadow-md a-flex a-items-center a-flex-col a-gap-1 a-cursor-grab", children: [_jsx("img", { src: option.icon, width: "32", height: "32" }), option.name] }, option.id));
|
|
42
42
|
}) }), _jsx("h2", { className: "a-text-xl a-font-bold a-my-8", children: "Existing" }), _jsx(ContentTree, { rootItemId: "0DE95AE4-41AB-4D01-9EB0-67441B7C2450", dragStart: (itemNode) => {
|
|
43
43
|
dragStart({
|
|
44
44
|
type: "link-component",
|
|
@@ -105,7 +105,7 @@ export function ComponentTree({ page, selection, }) {
|
|
|
105
105
|
createMap(treeNodes, nodeDictionary);
|
|
106
106
|
const nodeTemplate = (node, options) => {
|
|
107
107
|
var _a;
|
|
108
|
-
let label = (_jsxs("span", { "data-key": node.key, className: "flex", children: [node.label, (_a = node.tags) === null || _a === void 0 ? void 0 : _a.map((x) => (_jsx(Tag, { icon: x.icon, value: x.value, severity: x.severity, onClick: x.onClick, style: { backgroundColor: x.color, marginLeft: "8px" } }, x.value)))] }));
|
|
108
|
+
let label = (_jsxs("span", { "data-key": node.key, className: "a-flex", children: [node.label, (_a = node.tags) === null || _a === void 0 ? void 0 : _a.map((x) => (_jsx(Tag, { icon: x.icon, value: x.value, severity: x.severity, onClick: x.onClick, style: { backgroundColor: x.color, marginLeft: "8px" } }, x.value)))] }));
|
|
109
109
|
return _jsx("span", { className: options.className, children: label });
|
|
110
110
|
};
|
|
111
111
|
const menu = [
|
|
@@ -79,5 +79,5 @@ export function GraphQL({ component }) {
|
|
|
79
79
|
editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, prettyQuery, false);
|
|
80
80
|
setShowSpinner(true);
|
|
81
81
|
}
|
|
82
|
-
return (_jsxs(Splitter, { layout: "vertical", style: { height: "100%" }, children: [_jsx(SplitterPanel, { size: 50, className: "a-relative", children: _jsxs("div", { className: "a-absolute a-inset-0 a-flex", children: [_jsx(InputTextarea, { value: query, onChange: (e) => setQuery(e.target.value), className: "a-flex-1", style: { height: "100%" } }), _jsx(Button, { icon: "pi pi-refresh" + (showSpinner ? " pi-spin" : ""), onClick: refresh, disabled: showSpinner })] }) }), _jsx(SplitterPanel, { className: "alpaca-editor-tabs", children: _jsxs(TabView, { className: "a-inset-0 absolute", children: [_jsx(TabPanel, { header: "Data", style: { height: "100%" }, className: "a-relative", children: _jsx("div", { className: "a-m-1", children: Object.values(fieldsjsonValues).map((x) => renderItem(x)) }) }), _jsx(TabPanel, { header: "JSON", className: "a-relative", style: { height: "100%" }, children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: _jsx(JSONPretty, { data: component.graphql }) }) })] }) })] }));
|
|
82
|
+
return (_jsxs(Splitter, { layout: "vertical", style: { height: "100%" }, children: [_jsx(SplitterPanel, { size: 50, className: "a-relative", children: _jsxs("div", { className: "a-absolute a-inset-0 a-flex", children: [_jsx(InputTextarea, { value: query, onChange: (e) => setQuery(e.target.value), className: "a-flex-1", style: { height: "100%" } }), _jsx(Button, { icon: "pi pi-refresh" + (showSpinner ? " pi-spin" : ""), onClick: refresh, disabled: showSpinner })] }) }), _jsx(SplitterPanel, { className: "alpaca-editor-tabs", children: _jsxs(TabView, { className: "a-inset-0 a-absolute", children: [_jsx(TabPanel, { header: "Data", style: { height: "100%" }, className: "a-relative", children: _jsx("div", { className: "a-m-1", children: Object.values(fieldsjsonValues).map((x) => renderItem(x)) }) }), _jsx(TabPanel, { header: "JSON", className: "a-relative", style: { height: "100%" }, children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: _jsx(JSONPretty, { data: component.graphql }) }) })] }) })] }));
|
|
83
83
|
}
|
|
@@ -8,13 +8,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
10
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
|
-
import { Sidebar } from "primereact/sidebar";
|
|
12
11
|
import ContentTree from "./ContentTree";
|
|
13
12
|
import { Splitter, SplitterPanel } from "primereact/splitter";
|
|
14
13
|
import { useEffect, useState } from "react";
|
|
15
14
|
import { getChildren } from "./contentService";
|
|
16
15
|
import { useEditContext } from "./editContext";
|
|
17
16
|
import { Button } from "primereact/button";
|
|
17
|
+
import { Dialog } from "primereact/dialog";
|
|
18
18
|
export const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
|
|
19
19
|
const [selectedFolderId, setSelectedFolderId] = useState();
|
|
20
20
|
const [images, setImages] = useState();
|
|
@@ -37,17 +37,17 @@ export const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
|
|
|
37
37
|
}
|
|
38
38
|
});
|
|
39
39
|
}
|
|
40
|
-
return (_jsx(
|
|
40
|
+
return (_jsx(Dialog, { style: { width: "60%" }, visible: visible, onHide: onHide, children: _jsxs("div", { className: "a-flex a-flex-col a-h-full", children: [_jsxs(Splitter, { className: "a-flex-1 a-border-0", children: [_jsx(SplitterPanel, { size: 35, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { size: 70, children: _jsx(ContentTree, { rootItemId: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", selectionMode: "single", selectedItemIds: selection, templateIds: ["FE5DD826-48C6-436D-B87A-7C4210C7413B"], expandIdPath: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", onSelectionChange: (selection) => {
|
|
41
41
|
if (selection.length)
|
|
42
42
|
setSelectedFolderId(selection[0]);
|
|
43
43
|
else
|
|
44
44
|
setSelectedFolderId(undefined);
|
|
45
|
-
} }) }), _jsx(SplitterPanel, { children: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.name })] }) }), _jsx(SplitterPanel, { className: "alpaca-overflow-scroll relative", children: _jsx("div", { className: "grid grid-cols-3 gap-2 absolute inset-0", children: images === null || images === void 0 ? void 0 : images.map((t) => {
|
|
46
|
-
return (_jsxs("div", { className: "flex flex-col justify-between hover:shadow-md cursor-pointer p-1", onDoubleClick: () => {
|
|
45
|
+
} }) }), _jsx(SplitterPanel, { children: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.name })] }) }), _jsx(SplitterPanel, { className: "alpaca-overflow-scroll a-relative", children: _jsx("div", { className: "a-grid a-grid-cols-3 a-gap-2 a-absolute a-inset-0", children: images === null || images === void 0 ? void 0 : images.map((t) => {
|
|
46
|
+
return (_jsxs("div", { className: "a-flex a-flex-col a-justify-between hover:a-shadow-md a-cursor-pointer a-p-1", onDoubleClick: () => {
|
|
47
47
|
onMediaSelected(t.id);
|
|
48
48
|
onHide();
|
|
49
|
-
}, onClick: () => setSelectedImage(t), children: [_jsx("img", { src: t.imageUrl }), _jsx("div", { className: "text-xs break-all", children: t.name })] }));
|
|
50
|
-
}) }) })] }), _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx(Button, { onClick: () => onHide(), children: "Cancel" }), _jsx(Button, { disabled: !selectedImage, onClick: () => {
|
|
49
|
+
}, onClick: () => setSelectedImage(t), children: [_jsx("img", { src: t.imageUrl }), _jsx("div", { className: "a-text-xs a-break-all", children: t.name })] }));
|
|
50
|
+
}) }) })] }), _jsxs("div", { className: "a-flex a-justify-end a-gap-3", children: [_jsx(Button, { onClick: () => onHide(), children: "Cancel" }), _jsx(Button, { disabled: !selectedImage, onClick: () => {
|
|
51
51
|
onMediaSelected(selectedImage.id);
|
|
52
52
|
onHide();
|
|
53
53
|
}, children: "Select" })] })] }) }));
|