@thebes/cadmea 1.3.0 → 1.5.0

package/dist/index/server.js

@@ -17,15 +17,19 @@ var _tmpl$$4 = ["<p class=\"text-sm text-error\" role=\"alert\">", "</p>"], _tmp
 	">",
 	"</button>"
 ], _tmpl$6$2 = [
+	"<span class=\"text-base-content/60 self-center px-1 text-xs\" aria-live=\"polite\">",
+	"",
+	"</span>"
+], _tmpl$7$1 = [
 	"<form class=\"flex flex-col gap-4\">",
 	"",
 	"<div class=\"bg-base-100 sticky bottom-0 flex gap-2 border-t py-3\">",
 	"</div></form>"
-], _tmpl$7$1 = [
+], _tmpl$8$1 = [
 	"<fieldset class=\"border-base-300 rounded-box border p-4\"><legend class=\"px-2 text-sm font-semibold\">",
 	"</legend>",
 	"</fieldset>"
-], _tmpl$8$1 = ["<div class=\"grid grid-cols-1 gap-4 md:grid-cols-2\">", "</div>"], _tmpl$9$1 = "<span class=\"text-error\"> *</span>", _tmpl$0$1 = ["<p class=\"text-base-content/60 mb-1 text-xs\">", "</p>"], _tmpl$1$1 = ["<p class=\"text-error mt-1 text-sm\" role=\"alert\">", "</p>"], _tmpl$10$1 = [
+], _tmpl$9$1 = ["<div class=\"grid grid-cols-1 gap-4 md:grid-cols-2\">", "</div>"], _tmpl$0$1 = "<span class=\"text-error\"> *</span>", _tmpl$1$1 = ["<p class=\"text-base-content/60 mb-1 text-xs\">", "</p>"], _tmpl$10$1 = ["<p class=\"text-error mt-1 text-sm\" role=\"alert\">", "</p>"], _tmpl$11$1 = [
 	"<div class=\"",
 	"\"><label class=\"label\"",
 	">",
@@ -34,37 +38,37 @@ var _tmpl$$4 = ["<p class=\"text-sm text-error\" role=\"alert\">", "</p>"], _tmp
 	"",
 	"",
 	"</div>"
-], _tmpl$11$1 = [
+], _tmpl$12$1 = [
 	"<input",
 	" class=\"input\" type=\"text\"",
 	"",
 	">"
-], _tmpl$12$1 = [
+], _tmpl$13$1 = [
 	"<select",
 	" class=\"select\"",
 	"",
 	"",
 	">",
 	"</select>"
-], _tmpl$13$1 = [
+], _tmpl$14$1 = [
 	"<option",
 	">",
 	"</option>"
-], _tmpl$14$1 = [
+], _tmpl$15$1 = [
 	"<input",
 	" class=\"input\" type=\"number\"",
 	"",
 	">"
-], _tmpl$15$1 = [
+], _tmpl$16 = [
 	"<input",
 	" class=\"input\" type=\"text\" readonly",
 	">"
-], _tmpl$16 = [
+], _tmpl$17 = [
 	"<input",
 	" class=\"checkbox\" type=\"checkbox\"",
 	"",
 	">"
-], _tmpl$17 = ["<p class=\"text-sm opacity-70 break-all\">", "</p>"], _tmpl$18 = ["<p class=\"text-sm text-error\">", "</p>"], _tmpl$19 = [
+], _tmpl$18 = ["<p class=\"text-sm opacity-70 break-all\">", "</p>"], _tmpl$19 = ["<p class=\"text-sm text-error\">", "</p>"], _tmpl$20 = [
 	"<div class=\"flex flex-col gap-2\">",
 	"<input",
 	" class=\"file-input\" type=\"file\"",
@@ -72,11 +76,11 @@ var _tmpl$$4 = ["<p class=\"text-sm text-error\" role=\"alert\">", "</p>"], _tmp
 	">",
 	"",
 	"</div>"
-], _tmpl$20 = ["<div class=\"mb-1 flex flex-wrap gap-1\">", "</div>"], _tmpl$21 = "<button type=\"button\" aria-label=\"Clear\" class=\"absolute top-2 right-2 cursor-pointer opacity-60\">×</button>", _tmpl$22 = [
+], _tmpl$21 = ["<div class=\"mb-1 flex flex-wrap gap-1\">", "</div>"], _tmpl$22 = "<button type=\"button\" aria-label=\"Clear\" class=\"absolute top-2 right-2 cursor-pointer opacity-60\">×</button>", _tmpl$23 = [
 	"<div",
 	" role=\"listbox\" class=\"bg-base-100 border-base-300 rounded-box absolute z-10 mt-1 flex max-h-56 w-full flex-col overflow-auto border p-1 shadow\">",
 	"</div>"
-], _tmpl$23 = [
+], _tmpl$24 = [
 	"<div class=\"relative\">",
 	"<input",
 	" type=\"text\" role=\"combobox\"",
@@ -85,27 +89,27 @@ var _tmpl$$4 = ["<p class=\"text-sm text-error\" role=\"alert\">", "</p>"], _tmp
 	">",
 	"",
 	"</div>"
-], _tmpl$24 = [
+], _tmpl$25 = [
 	"<span class=\"badge badge-primary gap-1\">",
 	"<button type=\"button\" aria-label=\"",
 	"\" class=\"cursor-pointer\">×</button></span>"
-], _tmpl$25 = [
+], _tmpl$26 = [
 	"<button type=\"button\" role=\"option\"",
 	" class=\"",
 	"\">",
 	"</button>"
-], _tmpl$26 = ["<div role=\"menu\" class=\"bg-base-100 border-base-300 rounded-box absolute z-10 mt-1 flex flex-col border p-1 shadow\">", "</div>"], _tmpl$27 = [
+], _tmpl$27 = ["<div role=\"menu\" class=\"bg-base-100 border-base-300 rounded-box absolute z-10 mt-1 flex flex-col border p-1 shadow\">", "</div>"], _tmpl$28 = [
 	"<div class=\"relative self-start\"><button type=\"button\" class=\"btn btn-outline btn-sm\" aria-haspopup=\"menu\"",
 	">Add block</button>",
 	"</div>"
-], _tmpl$28 = [
+], _tmpl$29 = [
 	"<div class=\"form-control md:col-span-2\"><div class=\"label font-medium\">",
 	"",
 	"</div>",
 	"<div class=\"flex flex-col gap-3\">",
 	"",
 	"</div></div>"
-], _tmpl$29 = ["<span class=\"text-base-content/60 truncate text-sm\">", "</span>"], _tmpl$30 = ["<div class=\"flex flex-col gap-2\">", "</div>"], _tmpl$31 = [
+], _tmpl$30 = ["<span class=\"text-base-content/60 truncate text-sm\">", "</span>"], _tmpl$31 = ["<div class=\"flex flex-col gap-2\">", "</div>"], _tmpl$32 = [
 	"<div class=\"card bg-base-200 flex flex-col gap-2 p-3\"><div class=\"flex items-center gap-2\"><button type=\"button\" class=\"btn btn-ghost btn-sm gap-2\"",
 	"><span aria-hidden=\"true\">",
 	"</span><span class=\"font-semibold\">",
@@ -114,7 +118,7 @@ var _tmpl$$4 = ["<p class=\"text-sm text-error\" role=\"alert\">", "</p>"], _tmp
 	">↑</button><button type=\"button\" class=\"btn btn-ghost btn-xs\" aria-label=\"Move down\"",
 	">↓</button><button type=\"button\" class=\"btn btn-ghost btn-xs\" aria-label=\"Duplicate\">⧉</button><button type=\"button\" class=\"btn btn-ghost btn-xs text-error\" aria-label=\"Remove\">Remove</button></div></div>",
 	"</div>"
-], _tmpl$32 = ["<button type=\"button\" class=\"btn btn-outline btn-sm self-start\">Add ", "</button>"], _tmpl$33 = ["<i", " aria-hidden=\"true\"></i>"], _tmpl$34 = [
+], _tmpl$33 = ["<button type=\"button\" class=\"btn btn-outline btn-sm self-start\">Add ", "</button>"], _tmpl$34 = ["<i", " aria-hidden=\"true\"></i>"], _tmpl$35 = [
 	"<button type=\"button\" role=\"menuitem\" class=\"flex items-center gap-2 rounded px-3 py-2 text-left\">",
 	"",
 	"</button>"
@@ -166,6 +170,7 @@ function CollectionEdit(props) {
 	const isDefaultValue = form.useStore((s) => s.isDefaultValue);
 	createEffect(() => props.onDirtyChange?.(!isDefaultValue()));
 	const formValues = form.useStore((s) => s.values);
+	createEffect(() => props.onValuesChange?.(editablePayload(formValues())));
 	function editablePayload(value) {
 		return Object.fromEntries(Object.entries(value).filter(([key]) => props.config.fields[key]?.type !== "date"));
 	}
@@ -182,7 +187,29 @@ function CollectionEdit(props) {
 	};
 	const fieldGroups = groupFields(editableFields(props.config));
 	const versioned = () => props.config.versions?.drafts && props.draftActions;
-	return ssr(_tmpl$6$2, escape(createComponent(Show, {
+	const [autosaveStatus, setAutosaveStatus] = createSignal("idle");
+	let autosaveTimer;
+	createEffect(() => {
+		const dirty = !isDefaultValue();
+		const values = formValues();
+		if (!versioned() || !props.draftActions?.autosave) return;
+		if (!dirty) {
+			setAutosaveStatus("idle");
+			return;
+		}
+		clearTimeout(autosaveTimer);
+		autosaveTimer = setTimeout(async () => {
+			setAutosaveStatus("saving");
+			try {
+				await props.draftActions?.onSaveDraft(editablePayload(values));
+				setAutosaveStatus("saved");
+			} catch {
+				setAutosaveStatus("idle");
+			}
+		}, props.draftActions?.autosaveMs ?? 1500);
+	});
+	onCleanup(() => clearTimeout(autosaveTimer));
+	return ssr(_tmpl$7$1, escape(createComponent(Show, {
 		get when() {
 			return props.error;
 		},
@@ -206,7 +233,7 @@ function CollectionEdit(props) {
 				});
 			},
 			get children() {
-				return ssr(_tmpl$7$1, escape(group.name), escape(createComponent(FieldsGrid, {
+				return ssr(_tmpl$8$1, escape(group.name), escape(createComponent(FieldsGrid, {
 					form,
 					ctx,
 					get fields() {
@@ -281,13 +308,31 @@ function CollectionEdit(props) {
 							}
 						})));
 					}
+				}),
+				createComponent(Show, {
+					get when() {
+						return props.draftActions?.autosave;
+					},
+					get children() {
+						return ssr(_tmpl$6$2, escape(createComponent(Show, {
+							get when() {
+								return autosaveStatus() === "saving";
+							},
+							children: "Saving…"
+						})), escape(createComponent(Show, {
+							get when() {
+								return autosaveStatus() === "saved";
+							},
+							children: "Saved"
+						})));
+					}
 				})
 			];
 		}
 	})));
 }
 function FieldsGrid(props) {
-	return ssr(_tmpl$8$1, escape(createComponent(For, {
+	return ssr(_tmpl$9$1, escape(createComponent(For, {
 		get each() {
 			return props.fields;
 		},
@@ -306,26 +351,26 @@ function renderField(form, ctx, name, field, label) {
 	const spanClass = field.admin?.width === "half" ? "md:col-span-1" : "md:col-span-2";
 	return createComponent(form.Field, {
 		name,
-		children: (fieldApi) => ssr(_tmpl$10$1, `form-control ${escape(spanClass, true)}`, ssrAttribute("for", escape(name, true), false), escape(label), escape(createComponent(Show, {
+		children: (fieldApi) => ssr(_tmpl$11$1, `form-control ${escape(spanClass, true)}`, ssrAttribute("for", escape(name, true), false), escape(label), escape(createComponent(Show, {
 			get when() {
 				return field.required;
 			},
 			get children() {
-				return ssr(_tmpl$9$1);
+				return ssr(_tmpl$0$1);
 			}
 		})), escape(createComponent(Show, {
 			get when() {
 				return field.admin?.description;
 			},
 			get children() {
-				return ssr(_tmpl$0$1, escape(field.admin?.description));
+				return ssr(_tmpl$1$1, escape(field.admin?.description));
 			}
 		})), escape(renderControl(ctx, name, field, fieldApi)), escape(createComponent(Show, {
 			get when() {
 				return (fieldApi().state.meta.errors?.length ?? 0) > 0;
 			},
 			get children() {
-				return ssr(_tmpl$1$1, escape(fieldApi().state.meta.errors.filter(Boolean).join(", ")));
+				return ssr(_tmpl$10$1, escape(fieldApi().state.meta.errors.filter(Boolean).join(", ")));
 			}
 		})))
 	});
@@ -345,16 +390,16 @@ function renderControl(ctx, name, field, fieldApi) {
 	const readOnly = field.admin?.readOnly;
 	const change = (v) => fieldApi().handleChange(v);
 	switch (field.type) {
-		case "text": return ssr(_tmpl$11$1, ssrAttribute("id", escape(name, true), false), ssrAttribute("placeholder", escape(field.admin?.placeholder, true), false) + ssrAttribute("readonly", escape(readOnly, true), false) + ssrAttribute("value", escape(fieldApi().state.value ?? "", true), false), ssrAttribute("required", field.required, true));
-		case "select": return ssr(_tmpl$12$1, ssrAttribute("id", escape(name, true), false), ssrAttribute("value", escape(fieldApi().state.value ?? "", true), false), ssrAttribute("required", field.required, true), ssrAttribute("disabled", readOnly, true), escape(createComponent(For, {
+		case "text": return ssr(_tmpl$12$1, ssrAttribute("id", escape(name, true), false), ssrAttribute("placeholder", escape(field.admin?.placeholder, true), false) + ssrAttribute("readonly", escape(readOnly, true), false) + ssrAttribute("value", escape(fieldApi().state.value ?? "", true), false), ssrAttribute("required", field.required, true));
+		case "select": return ssr(_tmpl$13$1, ssrAttribute("id", escape(name, true), false), ssrAttribute("value", escape(fieldApi().state.value ?? "", true), false), ssrAttribute("required", field.required, true), ssrAttribute("disabled", readOnly, true), escape(createComponent(For, {
 			get each() {
 				return field.options;
 			},
-			children: (option) => ssr(_tmpl$13$1, ssrAttribute("value", escape(option, true), false), escape(option))
+			children: (option) => ssr(_tmpl$14$1, ssrAttribute("value", escape(option, true), false), escape(option))
 		})));
-		case "number": return ssr(_tmpl$14$1, ssrAttribute("id", escape(name, true), false), ssrAttribute("placeholder", escape(field.admin?.placeholder, true), false) + ssrAttribute("readonly", escape(readOnly, true), false) + ssrAttribute("value", escape(fieldApi().state.value ?? "", true), false), ssrAttribute("required", field.required, true));
-		case "date": return ssr(_tmpl$15$1, ssrAttribute("id", escape(name, true), false), ssrAttribute("value", escape(formatDateValue(fieldApi().state.value), true), false));
-		case "checkbox": return ssr(_tmpl$16, ssrAttribute("id", escape(name, true), false), ssrAttribute("disabled", readOnly, true), ssrAttribute("checked", fieldApi().state.value ?? false, true));
+		case "number": return ssr(_tmpl$15$1, ssrAttribute("id", escape(name, true), false), ssrAttribute("placeholder", escape(field.admin?.placeholder, true), false) + ssrAttribute("readonly", escape(readOnly, true), false) + ssrAttribute("value", escape(fieldApi().state.value ?? "", true), false), ssrAttribute("required", field.required, true));
+		case "date": return ssr(_tmpl$16, ssrAttribute("id", escape(name, true), false), ssrAttribute("value", escape(formatDateValue(fieldApi().state.value), true), false));
+		case "checkbox": return ssr(_tmpl$17, ssrAttribute("id", escape(name, true), false), ssrAttribute("disabled", readOnly, true), ssrAttribute("checked", fieldApi().state.value ?? false, true));
 		case "upload": return createComponent(UploadControl, {
 			name,
 			field,
@@ -393,12 +438,12 @@ function UploadControl(props) {
 	const [uploading, setUploading] = createSignal(false);
 	const [uploadError, setUploadError] = createSignal();
 	const value = () => props.fieldApi().state.value;
-	return ssr(_tmpl$19, escape(createComponent(Show, {
+	return ssr(_tmpl$20, escape(createComponent(Show, {
 		get when() {
 			return value();
 		},
 		get children() {
-			return ssr(_tmpl$17, escape(value()));
+			return ssr(_tmpl$18, escape(value()));
 		}
 	})), ssrAttribute("id", escape(props.name, true), false), ssrAttribute("required", props.field.required && !value(), true), ssrAttribute("disabled", uploading() || props.field.admin?.readOnly, true), escape(createComponent(Show, {
 		get when() {
@@ -412,7 +457,7 @@ function UploadControl(props) {
 			return uploadError();
 		},
 		get children() {
-			return ssr(_tmpl$18, escape(uploadError()));
+			return ssr(_tmpl$19, escape(uploadError()));
 		}
 	})));
 }
@@ -434,16 +479,16 @@ function RelationshipField(props) {
 		return props.options.filter((o) => o.label.toLowerCase().includes(q) && (!isMulti() || !selectedIds().includes(o.id)));
 	};
 	const singleLabel = () => selectedOptions()[0]?.label ?? "";
-	return ssr(_tmpl$23, escape(createComponent(Show, {
+	return ssr(_tmpl$24, escape(createComponent(Show, {
 		get when() {
 			return isMulti() && selectedOptions().length > 0;
 		},
 		get children() {
-			return ssr(_tmpl$20, escape(createComponent(For, {
+			return ssr(_tmpl$21, escape(createComponent(For, {
 				get each() {
 					return selectedOptions();
 				},
-				children: (option) => ssr(_tmpl$24, escape(option.label), `Remove ${escape(option.label, true)}`)
+				children: (option) => ssr(_tmpl$25, escape(option.label), `Remove ${escape(option.label, true)}`)
 			})));
 		}
 	})), ssrAttribute("id", escape(props.name, true), false), ssrAttribute("aria-expanded", escape(open(), true), false) + ssrAttribute("aria-controls", escape(listId, true), false), ssrAttribute("required", props.field.required && selectedIds().length === 0, true), ssrAttribute("disabled", props.field.admin?.readOnly, true) + ssrAttribute("placeholder", escape(props.field.admin?.placeholder ?? "Search…", true), false) + ssrAttribute("value", open() || isMulti() ? escape(query(), true) : escape(singleLabel(), true), false), escape(createComponent(Show, {
@@ -451,18 +496,18 @@ function RelationshipField(props) {
 			return !isMulti() && value() != null && !props.field.required;
 		},
 		get children() {
-			return ssr(_tmpl$21);
+			return ssr(_tmpl$22);
 		}
 	})), escape(createComponent(Show, {
 		get when() {
 			return open() && filtered().length > 0;
 		},
 		get children() {
-			return ssr(_tmpl$22, ssrAttribute("id", escape(listId, true), false), escape(createComponent(For, {
+			return ssr(_tmpl$23, ssrAttribute("id", escape(listId, true), false), escape(createComponent(For, {
 				get each() {
 					return filtered();
 				},
-				children: (option, i) => ssr(_tmpl$25, ssrAttribute("aria-selected", escape(selectedIds().includes(option.id), true), false), `rounded px-3 py-2 text-left ${i() === active() ? "bg-base-200" : ""}`, escape(option.label))
+				children: (option, i) => ssr(_tmpl$26, ssrAttribute("aria-selected", escape(selectedIds().includes(option.id), true), false), `rounded px-3 py-2 text-left ${i() === active() ? "bg-base-200" : ""}`, escape(option.label))
 			})));
 		}
 	})));
@@ -504,19 +549,19 @@ function BlockEditor(props) {
 		}
 		return "";
 	}
-	return ssr(_tmpl$28, escape(props.label), escape(createComponent(Show, {
+	return ssr(_tmpl$29, escape(props.label), escape(createComponent(Show, {
 		get when() {
 			return props.field.required;
 		},
 		get children() {
-			return ssr(_tmpl$9$1);
+			return ssr(_tmpl$0$1);
 		}
 	})), escape(createComponent(Show, {
 		get when() {
 			return props.field.admin?.description;
 		},
 		get children() {
-			return ssr(_tmpl$0$1, escape(props.field.admin?.description));
+			return ssr(_tmpl$1$1, escape(props.field.admin?.description));
 		}
 	})), escape(createComponent(Index, {
 		get each() {
@@ -524,19 +569,19 @@ function BlockEditor(props) {
 		},
 		children: (item, index) => {
 			const isCollapsed = () => collapsed().has(index);
-			return ssr(_tmpl$31, ssrAttribute("aria-expanded", !isCollapsed(), false), isCollapsed() ? "▸" : "▾", escape(blockTitle(item())), escape(createComponent(Show, {
+			return ssr(_tmpl$32, ssrAttribute("aria-expanded", !isCollapsed(), false), isCollapsed() ? "▸" : "▾", escape(blockTitle(item())), escape(createComponent(Show, {
 				get when() {
 					return isCollapsed() && blockSummary(item());
 				},
 				get children() {
-					return ssr(_tmpl$29, escape(blockSummary(item())));
+					return ssr(_tmpl$30, escape(blockSummary(item())));
 				}
 			})), ssrAttribute("disabled", index === 0, true), ssrAttribute("disabled", index === items().length - 1, true), escape(createComponent(Show, {
 				get when() {
 					return !isCollapsed();
 				},
 				get children() {
-					return ssr(_tmpl$30, escape(createComponent(For, {
+					return ssr(_tmpl$31, escape(createComponent(For, {
 						get each() {
 							return fieldsForItem(props.field, item());
 						},
@@ -550,22 +595,22 @@ function BlockEditor(props) {
 			return disc && variants.length > 0;
 		},
 		get fallback() {
-			return ssr(_tmpl$32, escape(props.label));
+			return ssr(_tmpl$33, escape(props.label));
 		},
 		get children() {
-			return ssr(_tmpl$27, ssrAttribute("aria-expanded", escape(menuOpen(), true), false), escape(createComponent(Show, {
+			return ssr(_tmpl$28, ssrAttribute("aria-expanded", escape(menuOpen(), true), false), escape(createComponent(Show, {
 				get when() {
 					return menuOpen();
 				},
 				get children() {
-					return ssr(_tmpl$26, escape(createComponent(For, {
+					return ssr(_tmpl$27, escape(createComponent(For, {
 						each: variants,
-						children: (variant) => ssr(_tmpl$34, escape(createComponent(Show, {
+						children: (variant) => ssr(_tmpl$35, escape(createComponent(Show, {
 							get when() {
 								return disc?.variantsAdmin?.[variant]?.icon;
 							},
 							get children() {
-								return ssr(_tmpl$33, ssrAttribute("class", escape(disc?.variantsAdmin?.[variant]?.icon, true), false));
+								return ssr(_tmpl$34, ssrAttribute("class", escape(disc?.variantsAdmin?.[variant]?.icon, true), false));
 							}
 						})), escape(variantLabel(disc, variant)))
 					})));
@@ -922,6 +967,10 @@ function VisualEditingPane(props) {
 		window.addEventListener("message", handler);
 		onCleanup(() => window.removeEventListener("message", handler));
 	});
+	createEffect(() => {
+		props.previewValues;
+		props.previewTarget;
+	});
 	return ssr(_tmpl$, ssrAttribute("src", escape(props.src, true), false) + ssrAttribute("title", escape(props.title ?? "Preview", true), false) + ssrAttribute("class", escape(props.class ?? "h-full w-full border-0", true), false));
 }
 //#endregion