@alpaca-headless/alpaca-headless-nextjs 1.0.13 → 1.0.20

package/dist/editor.css

@@ -1,120 +1,426 @@
-.alpaca-no-border {
-  border: none !important;
-}
-
-.alpaca-overflow-scroll {
-  overflow: auto;
-}
-
-.alpaca-editor-content {
-  height: calc(100vh - 70px);
-  padding: 3px;
-}
-
-.alpaca-component-selected {
-  outline: 3px solid red;
-}
-
-.alpaca-minor-label {
-  display: block;
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.alpaca-fields-section-headline {
-  background: #f0f0f0;
-  padding: 8px;
-  margin-top: 30px;
-}
-
-.alpaca-field-label {
-  font-weight: bolder;
-  display: block;
-  margin: 15px 0 5px 0;
-}
-
-.alpaca-editor-tabs {
-  overflow: hidden;
-  position: relative;
-}
-
-.alpaca-editor-tabs div.p-tabview-panels {
-  overflow: auto;
-  height: calc(100% - 60px);
-  padding: 0;
-}
-
-.alpaca-editor.p-splitter {
-  border: 0;
-  border-radius: 0;
-}
-
-.alpaca-editor.p-menubar {
-  border-radius: 0;
-  border: 0 0 1px 0;
-}
-
-/* placeholder code */
-[contentEditable="true"]:empty:before {
-  content: attr(placeholder);
-  opacity: 0.6;
-}
-
-[contenteditable] {
-  outline: 0px solid transparent;
-}
-
-div.p-tree {
-  padding: 0;
-}
-
-div.p-tree .p-tree-container .p-treenode .p-treenode-content {
-  padding: 0px;
-}
-
-div.p-tree .p-tree-container .p-treenode {
-  padding: 0;
-}
-
-div.p-tree .p-tree .p-tree-container .p-treenode {
-  padding: 0;
-}
-
-div.p-tree .p-treenode-droppoint {
-  height: 3px;
-}
-
-.ape-placeholder {
-  transition: all 0.3s;
-  display: flex;
-  justify-items: center;
-  align-items: center;
-  background: #eee;
-  cursor: pointer;
-  padding: 20px;
-  visibility: visible;
-  opacity: 1;
-}
-
-.ape-placeholder > div {
-  opacity: 1;
-  transition: 0.3s;
-}
-
-.ape-placeholder.ape-hidden > div {
-  opacity: 0;
-}
-
-.ape-placeholder.ape-hidden {
-  height: 0;
-  width: 0;
-  padding: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition: none;
-}
-
-.ap-editframe.ap-removed {
-  transition: all 1.5s;
-  opacity: 0;
+.a-absolute {
+  position: absolute;
+}
+
+.a-relative {
+  position: relative;
+}
+
+.a-inset-0 {
+  inset: 0px;
+}
+
+.a-right-0 {
+  right: 0px;
+}
+
+.a-top-0 {
+  top: 0px;
+}
+
+.a-m-1 {
+  margin: 0.25rem;
+}
+
+.a-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.a-my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.a-my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+.a-mb-8 {
+  margin-bottom: 2rem;
+}
+
+.a-ml-1 {
+  margin-left: 0.25rem;
+}
+
+.a-ml-3 {
+  margin-left: 0.75rem;
+}
+
+.a-flex {
+  display: flex;
+}
+
+.a-grid {
+  display: grid;
+}
+
+.a-h-24 {
+  height: 6rem;
+}
+
+.a-h-full {
+  height: 100%;
+}
+
+.a-w-24 {
+  width: 6rem;
+}
+
+.a-w-full {
+  width: 100%;
+}
+
+.a-max-w-sm {
+  max-width: 24rem;
+}
+
+.a-flex-1 {
+  flex: 1 1 0%;
+}
+
+.a-cursor-grab {
+  cursor: grab;
+}
+
+.a-cursor-move {
+  cursor: move;
+}
+
+.a-grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.a-flex-col {
+  flex-direction: column;
+}
+
+.a-items-center {
+  align-items: center;
+}
+
+.a-justify-between {
+  justify-content: space-between;
+}
+
+.a-gap-1 {
+  gap: 0.25rem;
+}
+
+.a-gap-2 {
+  gap: 0.5rem;
+}
+
+.a-space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.a-overflow-hidden {
+  overflow: hidden;
+}
+
+.a-overflow-y-auto {
+  overflow-y: auto;
+}
+
+.a-overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.a-rounded-none {
+  border-radius: 0px;
+}
+
+.a-rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.a-border {
+  border-width: 1px;
+}
+
+.a-border-0 {
+  border-width: 0px;
+}
+
+.a-border-b {
+  border-bottom-width: 1px;
+}
+
+.a-border-t-2 {
+  border-top-width: 2px;
+}
+
+.a-border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
+.a-bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+.a-bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.a-bg-orange-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
+}
+
+.a-bg-purple-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(192 132 252 / var(--tw-bg-opacity));
+}
+
+.a-bg-sky-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(56 189 248 / var(--tw-bg-opacity));
+}
+
+.a-bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.a-p-0 {
+  padding: 0px;
+}
+
+.a-p-1 {
+  padding: 0.25rem;
+}
+
+.a-p-10 {
+  padding: 2.5rem;
+}
+
+.a-p-2 {
+  padding: 0.5rem;
+}
+
+.a-p-4 {
+  padding: 1rem;
+}
+
+.a-p-6 {
+  padding: 1.5rem;
+}
+
+.a-px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.a-text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.a-text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.a-font-bold {
+  font-weight: 700;
+}
+
+.a-font-medium {
+  font-weight: 500;
+}
+
+.a-font-semibold {
+  font-weight: 600;
+}
+
+.a-text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.a-text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+.a-text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.a-text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.a-text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.a-shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.a-shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.a-ring-2 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.a-ring-orange-400 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(251 146 60 / var(--tw-ring-opacity));
+}
+
+.a-ring-purple-400 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(192 132 252 / var(--tw-ring-opacity));
+}
+
+.a-ring-red-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
+}
+
+.alpaca-no-border {
+  border: none !important;
+}
+
+.alpaca-overflow-scroll {
+  overflow: auto;
+}
+
+.alpaca-editor-content {
+  height: calc(100vh - 70px);
+  padding: 3px;
+}
+
+.alpaca-component-selected {
+  outline: 3px solid red;
+}
+
+.alpaca-minor-label {
+  display: block;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.alpaca-fields-section-headline {
+  background: #f0f0f0;
+  padding: 8px;
+  margin-top: 30px;
+}
+
+.alpaca-field-label {
+  font-weight: bolder;
+  display: block;
+  margin: 15px 0 5px 0;
+}
+
+.alpaca-editor-tabs {
+  overflow: hidden;
+  position: relative;
+}
+
+.alpaca-editor-tabs div.p-tabview-panels {
+  overflow: auto;
+  height: calc(100% - 60px);
+  padding: 0;
+}
+
+.alpaca-editor.p-splitter {
+  border: 0;
+  border-radius: 0;
+}
+
+.alpaca-editor.p-menubar {
+  border-radius: 0;
+  border: 0 0 1px 0;
+}
+
+/* placeholder code */
+
+[contentEditable="true"]:empty:before {
+  content: attr(placeholder);
+  opacity: 0.6;
+}
+
+[contenteditable] {
+  outline: 0px solid transparent;
+}
+
+div.p-tree {
+  padding: 0;
+}
+
+div.p-tree .p-tree-container .p-treenode .p-treenode-content {
+  padding: 0px;
+}
+
+div.p-tree .p-tree-container .p-treenode {
+  padding: 0;
+}
+
+div.p-tree .p-tree .p-tree-container .p-treenode {
+  padding: 0;
+}
+
+div.p-tree .p-treenode-droppoint {
+  height: 3px;
+}
+
+.ape-placeholder {
+  transition: all 0.3s;
+  display: flex;
+  justify-items: center;
+  align-items: center;
+  background: #eee;
+  cursor: pointer;
+  padding: 20px;
+  visibility: visible;
+  opacity: 1;
+}
+
+.ape-placeholder > div {
+  opacity: 1;
+  transition: 0.3s;
+}
+
+.ape-placeholder.ape-hidden > div {
+  opacity: 0;
+}
+
+.ape-placeholder.ape-hidden {
+  height: 0;
+  width: 0;
+  padding: 0;
+  opacity: 0;
+  visibility: hidden;
+  transition: none;
+}
+
+.ap-editframe.ap-removed {
+  transition: all 1.5s;
+  opacity: 0;
+}
+
+.hover\:a-underline:hover {
+  text-decoration-line: underline;
 }

package/dist/esm/components/Link.js

@@ -10,9 +10,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useAlpacaContext } from "..";
+import LinkEditor from "./LinkEditor";
 export function Link(_a) {
+    var _b;
     var { field, children } = _a, props = __rest(_a, ["field", "children"]);
     if (!field)
         return;
+    const editing = (_b = useAlpacaContext().pageContext) === null || _b === void 0 ? void 0 : _b.pageEditing;
+    if (editing)
+        return (_jsx(LinkEditor, Object.assign({ field: field, children: children }, props)));
     return (_jsx("a", Object.assign({ href: field.value.url }, props, { children: children })));
 }

package/dist/esm/components/LinkEditor.js

@@ -0,0 +1,19 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function LinkEditor(_a) {
+    var { field, children } = _a, props = __rest(_a, ["field", "children"]);
+    if (!field)
+        return;
+    return (_jsx("a", Object.assign({ href: field.value.url }, props, { onClick: (e) => e.preventDefault(), children: children })));
+}

package/dist/esm/components/PictureEditor.js

@@ -19,12 +19,10 @@ import { Dialog } from "primereact/dialog";
 export const PictureEditor = (_a) => {
     var _b, _c;
     var { field, imageParams, sources, defaultVariant, renderJsonLinkedData } = _a, otherProps = __rest(_a, ["field", "imageParams", "sources", "defaultVariant", "renderJsonLinkedData"]);
-    function selectImage() {
-        setMediaSelectorVisible(true);
-    }
     const editContext = useEditContext();
     const [mediaSelectorVisible, setMediaSelectorVisible] = useState(false);
     const [editorVisible, setEditorVisible] = useState(false);
+    const [selectedVariant, setSelectedVariant] = useState();
     if (!editContext)
         return;
     function imageSelected(imageId) {
@@ -35,5 +33,6 @@ export const PictureEditor = (_a) => {
             editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, JSON.stringify(value), false);
     }
     console.log(JSON.stringify(field));
-    return (_jsxs(_Fragment, { children: [_jsx(MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: imageSelected }), _jsxs(Dialog, { header: "Header", visible: editorVisible, style: { width: "50vw" }, onHide: () => setEditorVisible(false), children: [_jsx("div", { className: "flex 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", { children: [_jsx("div", { className: "h-24 w-24 border", children: variant.src && _jsx("img", { src: variant.src }) }), _jsx("div", { children: variant.name }), _jsx("div", { children: variant.aspectRatioText })] }))) }), _jsx("div", { onClick: selectImage, children: "Select image" })] }), _jsxs("span", Object.assign({}, otherProps, { onClick: () => setEditorVisible(true), children: ["PICTURE", _jsx(Picture, { field: field, imageParams: imageParams, sources: sources })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: imageSelected }), _jsx(Dialog, { header: "Header", 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" +
+                                    (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 })] }))] }));
 };