@thebes/cadmea 1.3.0 → 1.5.0

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.
Files changed (11) hide show
  1. package/dist/index/index.d.ts +26 -0
  2. package/dist/index/index.js +243 -181
  3. package/dist/index/index.js.map +1 -1
  4. package/dist/index/server.js +99 -50
  5. package/dist/index/server.js.map +1 -1
  6. package/dist/tanstack-start/index.d.ts +15 -0
  7. package/dist/tanstack-start/index.js +225 -181
  8. package/dist/tanstack-start/index.js.map +1 -1
  9. package/dist/tanstack-start/server.js +96 -51
  10. package/dist/tanstack-start/server.js.map +1 -1
  11. package/package.json +3 -3
package/dist/index/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { className, createComponent, delegateEvents, effect, insert, memo, setAttribute, setStyleProperty, template, use } from "solid-js/web";
2
2
  import { createForm } from "@tanstack/solid-form";
3
- import { VISUAL_EDIT_MESSAGE, validateDocument } from "@thebes/cadmus/cms";
3
+ import { PREVIEW_VALUES_MESSAGE, VISUAL_EDIT_MESSAGE, validateDocument } from "@thebes/cadmus/cms";
4
4
  import { For, Index, Show, Suspense, createEffect, createMemo, createSignal, lazy, onCleanup, onMount } from "solid-js";
5
5
  import { createSolidTable, flexRender, getCoreRowModel } from "@tanstack/solid-table";
6
6
  //#region src/CollectionEdit.tsx
7
- var _tmpl$$4 = /*#__PURE__*/ template(`<p class="text-sm text-error"role=alert>`), _tmpl$2$3 = /*#__PURE__*/ template(`<span class="loading loading-spinner loading-sm">`), _tmpl$3$3 = /*#__PURE__*/ template(`<button type=button class="btn flex-1">`), _tmpl$4$3 = /*#__PURE__*/ template(`<button type=button class="btn btn-primary flex-1">`), _tmpl$5$2 = /*#__PURE__*/ template(`<button type=button class="btn btn-outline flex-1">`), _tmpl$6$2 = /*#__PURE__*/ template(`<form class="flex flex-col gap-4"><div class="bg-base-100 sticky bottom-0 flex gap-2 border-t py-3">`), _tmpl$7$1 = /*#__PURE__*/ template(`<fieldset class="border-base-300 rounded-box border p-4"><legend class="px-2 text-sm font-semibold">`), _tmpl$8$1 = /*#__PURE__*/ template(`<div class="grid grid-cols-1 gap-4 md:grid-cols-2">`), _tmpl$9$1 = /*#__PURE__*/ template(`<span class=text-error> *`), _tmpl$0$1 = /*#__PURE__*/ template(`<p class="text-base-content/60 mb-1 text-xs">`), _tmpl$1$1 = /*#__PURE__*/ template(`<p class="text-error mt-1 text-sm"role=alert>`), _tmpl$10$1 = /*#__PURE__*/ template(`<div><label class=label>`), _tmpl$11$1 = /*#__PURE__*/ template(`<input class=input type=text>`), _tmpl$12$1 = /*#__PURE__*/ template(`<select class=select>`), _tmpl$13$1 = /*#__PURE__*/ template(`<option>`), _tmpl$14 = /*#__PURE__*/ template(`<input class=input type=number>`), _tmpl$15 = /*#__PURE__*/ template(`<input class=input type=text readonly>`), _tmpl$16 = /*#__PURE__*/ template(`<input class=checkbox type=checkbox>`), _tmpl$17 = /*#__PURE__*/ template(`<p class="text-sm opacity-70 break-all">`), _tmpl$18 = /*#__PURE__*/ template(`<p class="text-sm text-error">`), _tmpl$19 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2"><input class=file-input type=file>`), _tmpl$20 = /*#__PURE__*/ template(`<div class="mb-1 flex flex-wrap gap-1">`), _tmpl$21 = /*#__PURE__*/ template(`<button type=button aria-label=Clear class="absolute top-2 right-2 cursor-pointer opacity-60">×`), _tmpl$22 = /*#__PURE__*/ template(`<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">`), _tmpl$23 = /*#__PURE__*/ template(`<div class=relative><input type=text role=combobox autocomplete=off class=input>`), _tmpl$24 = /*#__PURE__*/ template(`<span class="badge badge-primary gap-1"><button type=button class=cursor-pointer>×`), _tmpl$25 = /*#__PURE__*/ template(`<button type=button role=option class="rounded px-3 py-2 text-left">`), _tmpl$26 = /*#__PURE__*/ template(`<div role=menu class="bg-base-100 border-base-300 rounded-box absolute z-10 mt-1 flex flex-col border p-1 shadow">`), _tmpl$27 = /*#__PURE__*/ template(`<div class="relative self-start"><button type=button class="btn btn-outline btn-sm"aria-haspopup=menu>Add block`), _tmpl$28 = /*#__PURE__*/ template(`<div class="form-control md:col-span-2"><div class="label font-medium"></div><div class="flex flex-col gap-3">`), _tmpl$29 = /*#__PURE__*/ template(`<span class="text-base-content/60 truncate text-sm">`), _tmpl$30 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2">`), _tmpl$31 = /*#__PURE__*/ template(`<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></span></button><div class="ml-auto flex gap-1"><button type=button class="btn btn-ghost btn-xs"aria-label="Move up">↑</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`), _tmpl$32 = /*#__PURE__*/ template(`<button type=button class="btn btn-outline btn-sm self-start">Add `), _tmpl$33 = /*#__PURE__*/ template(`<i aria-hidden=true>`), _tmpl$34 = /*#__PURE__*/ template(`<button type=button role=menuitem class="flex items-center gap-2 rounded px-3 py-2 text-left">`);
7
+ var _tmpl$$4 = /*#__PURE__*/ template(`<p class="text-sm text-error"role=alert>`), _tmpl$2$3 = /*#__PURE__*/ template(`<span class="loading loading-spinner loading-sm">`), _tmpl$3$3 = /*#__PURE__*/ template(`<button type=button class="btn flex-1">`), _tmpl$4$3 = /*#__PURE__*/ template(`<button type=button class="btn btn-primary flex-1">`), _tmpl$5$2 = /*#__PURE__*/ template(`<button type=button class="btn btn-outline flex-1">`), _tmpl$6$2 = /*#__PURE__*/ template(`<span class="text-base-content/60 self-center px-1 text-xs"aria-live=polite>`), _tmpl$7$1 = /*#__PURE__*/ template(`<form class="flex flex-col gap-4"><div class="bg-base-100 sticky bottom-0 flex gap-2 border-t py-3">`), _tmpl$8$1 = /*#__PURE__*/ template(`<fieldset class="border-base-300 rounded-box border p-4"><legend class="px-2 text-sm font-semibold">`), _tmpl$9$1 = /*#__PURE__*/ template(`<div class="grid grid-cols-1 gap-4 md:grid-cols-2">`), _tmpl$0$1 = /*#__PURE__*/ template(`<span class=text-error> *`), _tmpl$1$1 = /*#__PURE__*/ template(`<p class="text-base-content/60 mb-1 text-xs">`), _tmpl$10$1 = /*#__PURE__*/ template(`<p class="text-error mt-1 text-sm"role=alert>`), _tmpl$11$1 = /*#__PURE__*/ template(`<div><label class=label>`), _tmpl$12$1 = /*#__PURE__*/ template(`<input class=input type=text>`), _tmpl$13$1 = /*#__PURE__*/ template(`<select class=select>`), _tmpl$14 = /*#__PURE__*/ template(`<option>`), _tmpl$15 = /*#__PURE__*/ template(`<input class=input type=number>`), _tmpl$16 = /*#__PURE__*/ template(`<input class=input type=text readonly>`), _tmpl$17 = /*#__PURE__*/ template(`<input class=checkbox type=checkbox>`), _tmpl$18 = /*#__PURE__*/ template(`<p class="text-sm opacity-70 break-all">`), _tmpl$19 = /*#__PURE__*/ template(`<p class="text-sm text-error">`), _tmpl$20 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2"><input class=file-input type=file>`), _tmpl$21 = /*#__PURE__*/ template(`<div class="mb-1 flex flex-wrap gap-1">`), _tmpl$22 = /*#__PURE__*/ template(`<button type=button aria-label=Clear class="absolute top-2 right-2 cursor-pointer opacity-60">×`), _tmpl$23 = /*#__PURE__*/ template(`<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">`), _tmpl$24 = /*#__PURE__*/ template(`<div class=relative><input type=text role=combobox autocomplete=off class=input>`), _tmpl$25 = /*#__PURE__*/ template(`<span class="badge badge-primary gap-1"><button type=button class=cursor-pointer>×`), _tmpl$26 = /*#__PURE__*/ template(`<button type=button role=option class="rounded px-3 py-2 text-left">`), _tmpl$27 = /*#__PURE__*/ template(`<div role=menu class="bg-base-100 border-base-300 rounded-box absolute z-10 mt-1 flex flex-col border p-1 shadow">`), _tmpl$28 = /*#__PURE__*/ template(`<div class="relative self-start"><button type=button class="btn btn-outline btn-sm"aria-haspopup=menu>Add block`), _tmpl$29 = /*#__PURE__*/ template(`<div class="form-control md:col-span-2"><div class="label font-medium"></div><div class="flex flex-col gap-3">`), _tmpl$30 = /*#__PURE__*/ template(`<span class="text-base-content/60 truncate text-sm">`), _tmpl$31 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2">`), _tmpl$32 = /*#__PURE__*/ template(`<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></span></button><div class="ml-auto flex gap-1"><button type=button class="btn btn-ghost btn-xs"aria-label="Move up">↑</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`), _tmpl$33 = /*#__PURE__*/ template(`<button type=button class="btn btn-outline btn-sm self-start">Add `), _tmpl$34 = /*#__PURE__*/ template(`<i aria-hidden=true>`), _tmpl$35 = /*#__PURE__*/ template(`<button type=button role=menuitem class="flex items-center gap-2 rounded px-3 py-2 text-left">`);
8
8
  const RichTextEditor = lazy(() => import("../RichTextEditor-ComcBFfl.js").then((mod) => ({ default: mod.RichTextEditor })));
9
9
  function editableFields(config) {
10
10
  return Object.entries(config.fields).filter(([key]) => key !== "id");
@@ -52,6 +52,7 @@ function CollectionEdit(props) {
52
52
  const isDefaultValue = form.useStore((s) => s.isDefaultValue);
53
53
  createEffect(() => props.onDirtyChange?.(!isDefaultValue()));
54
54
  const formValues = form.useStore((s) => s.values);
55
+ createEffect(() => props.onValuesChange?.(editablePayload(formValues())));
55
56
  function editablePayload(value) {
56
57
  return Object.fromEntries(Object.entries(value).filter(([key]) => props.config.fields[key]?.type !== "date"));
57
58
  }
@@ -68,8 +69,30 @@ function CollectionEdit(props) {
68
69
  };
69
70
  const fieldGroups = groupFields(editableFields(props.config));
70
71
  const versioned = () => props.config.versions?.drafts && props.draftActions;
72
+ const [autosaveStatus, setAutosaveStatus] = createSignal("idle");
73
+ let autosaveTimer;
74
+ createEffect(() => {
75
+ const dirty = !isDefaultValue();
76
+ const values = formValues();
77
+ if (!versioned() || !props.draftActions?.autosave) return;
78
+ if (!dirty) {
79
+ setAutosaveStatus("idle");
80
+ return;
81
+ }
82
+ clearTimeout(autosaveTimer);
83
+ autosaveTimer = setTimeout(async () => {
84
+ setAutosaveStatus("saving");
85
+ try {
86
+ await props.draftActions?.onSaveDraft(editablePayload(values));
87
+ setAutosaveStatus("saved");
88
+ } catch {
89
+ setAutosaveStatus("idle");
90
+ }
91
+ }, props.draftActions?.autosaveMs ?? 1500);
92
+ });
93
+ onCleanup(() => clearTimeout(autosaveTimer));
71
94
  return (() => {
72
- var _el$ = _tmpl$6$2(), _el$3 = _el$.firstChild;
95
+ var _el$ = _tmpl$7$1(), _el$3 = _el$.firstChild;
73
96
  _el$.addEventListener("submit", (event) => {
74
97
  event.preventDefault();
75
98
  form.handleSubmit();
@@ -101,9 +124,9 @@ function CollectionEdit(props) {
101
124
  });
102
125
  },
103
126
  get children() {
104
- var _el$0 = _tmpl$7$1(), _el$1 = _el$0.firstChild;
105
- insert(_el$1, () => group.name);
106
- insert(_el$0, createComponent(FieldsGrid, {
127
+ var _el$1 = _tmpl$8$1(), _el$10 = _el$1.firstChild;
128
+ insert(_el$10, () => group.name);
129
+ insert(_el$1, createComponent(FieldsGrid, {
107
130
  form,
108
131
  ctx,
109
132
  get fields() {
@@ -111,7 +134,7 @@ function CollectionEdit(props) {
111
134
  },
112
135
  values: formValues
113
136
  }), null);
114
- return _el$0;
137
+ return _el$1;
115
138
  }
116
139
  })
117
140
  }), _el$3);
@@ -125,9 +148,9 @@ function CollectionEdit(props) {
125
148
  return props.capabilities?.canUpdate !== false;
126
149
  },
127
150
  get children() {
128
- var _el$10 = _tmpl$4$3();
129
- _el$10.$$click = () => void form.handleSubmit();
130
- insert(_el$10, createComponent(Show, {
151
+ var _el$11 = _tmpl$4$3();
152
+ _el$11.$$click = () => void form.handleSubmit();
153
+ insert(_el$11, createComponent(Show, {
131
154
  get when() {
132
155
  return props.saving;
133
156
  },
@@ -138,8 +161,8 @@ function CollectionEdit(props) {
138
161
  return _tmpl$2$3();
139
162
  }
140
163
  }));
141
- effect(() => _el$10.disabled = props.saving);
142
- return _el$10;
164
+ effect(() => _el$11.disabled = props.saving);
165
+ return _el$11;
143
166
  }
144
167
  });
145
168
  },
@@ -200,6 +223,27 @@ function CollectionEdit(props) {
200
223
  effect(() => _el$8.disabled = !props.draftActions?.canPreview || props.draftActions?.previewing);
201
224
  return _el$8;
202
225
  }
226
+ }),
227
+ createComponent(Show, {
228
+ get when() {
229
+ return props.draftActions?.autosave;
230
+ },
231
+ get children() {
232
+ var _el$0 = _tmpl$6$2();
233
+ insert(_el$0, createComponent(Show, {
234
+ get when() {
235
+ return autosaveStatus() === "saving";
236
+ },
237
+ children: "Saving…"
238
+ }), null);
239
+ insert(_el$0, createComponent(Show, {
240
+ get when() {
241
+ return autosaveStatus() === "saved";
242
+ },
243
+ children: "Saved"
244
+ }), null);
245
+ return _el$0;
246
+ }
203
247
  })
204
248
  ];
205
249
  }
@@ -209,8 +253,8 @@ function CollectionEdit(props) {
209
253
  }
210
254
  function FieldsGrid(props) {
211
255
  return (() => {
212
- var _el$12 = _tmpl$8$1();
213
- insert(_el$12, createComponent(For, {
256
+ var _el$13 = _tmpl$9$1();
257
+ insert(_el$13, createComponent(For, {
214
258
  get each() {
215
259
  return props.fields;
216
260
  },
@@ -223,7 +267,7 @@ function FieldsGrid(props) {
223
267
  }
224
268
  })
225
269
  }));
226
- return _el$12;
270
+ return _el$13;
227
271
  })();
228
272
  }
229
273
  function renderField(form, ctx, name, field, label) {
@@ -232,40 +276,40 @@ function renderField(form, ctx, name, field, label) {
232
276
  return createComponent(form.Field, {
233
277
  name,
234
278
  children: (fieldApi) => (() => {
235
- var _el$13 = _tmpl$10$1(), _el$14 = _el$13.firstChild;
236
- className(_el$13, `form-control ${spanClass}`);
237
- setAttribute(_el$14, "for", name);
238
- insert(_el$14, label, null);
239
- insert(_el$14, createComponent(Show, {
279
+ var _el$14 = _tmpl$11$1(), _el$15 = _el$14.firstChild;
280
+ className(_el$14, `form-control ${spanClass}`);
281
+ setAttribute(_el$15, "for", name);
282
+ insert(_el$15, label, null);
283
+ insert(_el$15, createComponent(Show, {
240
284
  get when() {
241
285
  return field.required;
242
286
  },
243
287
  get children() {
244
- return _tmpl$9$1();
288
+ return _tmpl$0$1();
245
289
  }
246
290
  }), null);
247
- insert(_el$13, createComponent(Show, {
291
+ insert(_el$14, createComponent(Show, {
248
292
  get when() {
249
293
  return field.admin?.description;
250
294
  },
251
295
  get children() {
252
- var _el$16 = _tmpl$0$1();
253
- insert(_el$16, () => field.admin?.description);
254
- return _el$16;
296
+ var _el$17 = _tmpl$1$1();
297
+ insert(_el$17, () => field.admin?.description);
298
+ return _el$17;
255
299
  }
256
300
  }), null);
257
- insert(_el$13, () => renderControl(ctx, name, field, fieldApi), null);
258
- insert(_el$13, createComponent(Show, {
301
+ insert(_el$14, () => renderControl(ctx, name, field, fieldApi), null);
302
+ insert(_el$14, createComponent(Show, {
259
303
  get when() {
260
304
  return (fieldApi().state.meta.errors?.length ?? 0) > 0;
261
305
  },
262
306
  get children() {
263
- var _el$17 = _tmpl$1$1();
264
- insert(_el$17, () => fieldApi().state.meta.errors.filter(Boolean).join(", "));
265
- return _el$17;
307
+ var _el$18 = _tmpl$10$1();
308
+ insert(_el$18, () => fieldApi().state.meta.errors.filter(Boolean).join(", "));
309
+ return _el$18;
266
310
  }
267
311
  }), null);
268
- return _el$13;
312
+ return _el$14;
269
313
  })()
270
314
  });
271
315
  }
@@ -285,76 +329,76 @@ function renderControl(ctx, name, field, fieldApi) {
285
329
  const change = (v) => fieldApi().handleChange(v);
286
330
  switch (field.type) {
287
331
  case "text": return (() => {
288
- var _el$18 = _tmpl$11$1();
289
- _el$18.addEventListener("blur", () => fieldApi().handleBlur());
290
- _el$18.$$input = (e) => change(e.currentTarget.value);
291
- setAttribute(_el$18, "id", name);
292
- _el$18.readOnly = readOnly;
332
+ var _el$19 = _tmpl$12$1();
333
+ _el$19.addEventListener("blur", () => fieldApi().handleBlur());
334
+ _el$19.$$input = (e) => change(e.currentTarget.value);
335
+ setAttribute(_el$19, "id", name);
336
+ _el$19.readOnly = readOnly;
293
337
  effect((_p$) => {
294
338
  var _v$ = field.admin?.placeholder, _v$2 = field.required;
295
- _v$ !== _p$.e && setAttribute(_el$18, "placeholder", _p$.e = _v$);
296
- _v$2 !== _p$.t && (_el$18.required = _p$.t = _v$2);
339
+ _v$ !== _p$.e && setAttribute(_el$19, "placeholder", _p$.e = _v$);
340
+ _v$2 !== _p$.t && (_el$19.required = _p$.t = _v$2);
297
341
  return _p$;
298
342
  }, {
299
343
  e: void 0,
300
344
  t: void 0
301
345
  });
302
- effect(() => _el$18.value = fieldApi().state.value ?? "");
303
- return _el$18;
346
+ effect(() => _el$19.value = fieldApi().state.value ?? "");
347
+ return _el$19;
304
348
  })();
305
349
  case "select": return (() => {
306
- var _el$19 = _tmpl$12$1();
307
- _el$19.addEventListener("blur", () => fieldApi().handleBlur());
308
- _el$19.addEventListener("change", (e) => change(e.currentTarget.value));
309
- setAttribute(_el$19, "id", name);
310
- _el$19.disabled = readOnly;
311
- insert(_el$19, createComponent(For, {
350
+ var _el$20 = _tmpl$13$1();
351
+ _el$20.addEventListener("blur", () => fieldApi().handleBlur());
352
+ _el$20.addEventListener("change", (e) => change(e.currentTarget.value));
353
+ setAttribute(_el$20, "id", name);
354
+ _el$20.disabled = readOnly;
355
+ insert(_el$20, createComponent(For, {
312
356
  get each() {
313
357
  return field.options;
314
358
  },
315
359
  children: (option) => (() => {
316
- var _el$20 = _tmpl$13$1();
317
- _el$20.value = option;
318
- insert(_el$20, option);
319
- return _el$20;
360
+ var _el$21 = _tmpl$14();
361
+ _el$21.value = option;
362
+ insert(_el$21, option);
363
+ return _el$21;
320
364
  })()
321
365
  }));
322
- effect(() => _el$19.required = field.required);
323
- effect(() => _el$19.value = fieldApi().state.value ?? "");
324
- return _el$19;
366
+ effect(() => _el$20.required = field.required);
367
+ effect(() => _el$20.value = fieldApi().state.value ?? "");
368
+ return _el$20;
325
369
  })();
326
370
  case "number": return (() => {
327
- var _el$21 = _tmpl$14();
328
- _el$21.addEventListener("blur", () => fieldApi().handleBlur());
329
- _el$21.$$input = (e) => change(e.currentTarget.valueAsNumber);
330
- setAttribute(_el$21, "id", name);
331
- _el$21.readOnly = readOnly;
371
+ var _el$22 = _tmpl$15();
372
+ _el$22.addEventListener("blur", () => fieldApi().handleBlur());
373
+ _el$22.$$input = (e) => change(e.currentTarget.valueAsNumber);
374
+ setAttribute(_el$22, "id", name);
375
+ _el$22.readOnly = readOnly;
332
376
  effect((_p$) => {
333
377
  var _v$3 = field.admin?.placeholder, _v$4 = field.required;
334
- _v$3 !== _p$.e && setAttribute(_el$21, "placeholder", _p$.e = _v$3);
335
- _v$4 !== _p$.t && (_el$21.required = _p$.t = _v$4);
378
+ _v$3 !== _p$.e && setAttribute(_el$22, "placeholder", _p$.e = _v$3);
379
+ _v$4 !== _p$.t && (_el$22.required = _p$.t = _v$4);
336
380
  return _p$;
337
381
  }, {
338
382
  e: void 0,
339
383
  t: void 0
340
384
  });
341
- effect(() => _el$21.value = fieldApi().state.value ?? "");
342
- return _el$21;
343
- })();
344
- case "date": return (() => {
345
- var _el$22 = _tmpl$15();
346
- setAttribute(_el$22, "id", name);
347
- effect(() => _el$22.value = formatDateValue(fieldApi().state.value));
385
+ effect(() => _el$22.value = fieldApi().state.value ?? "");
348
386
  return _el$22;
349
387
  })();
350
- case "checkbox": return (() => {
388
+ case "date": return (() => {
351
389
  var _el$23 = _tmpl$16();
352
- _el$23.addEventListener("change", (e) => change(e.currentTarget.checked));
353
390
  setAttribute(_el$23, "id", name);
354
- _el$23.disabled = readOnly;
355
- effect(() => _el$23.checked = fieldApi().state.value ?? false);
391
+ effect(() => _el$23.value = formatDateValue(fieldApi().state.value));
356
392
  return _el$23;
357
393
  })();
394
+ case "checkbox": return (() => {
395
+ var _el$24 = _tmpl$17();
396
+ _el$24.addEventListener("change", (e) => change(e.currentTarget.checked));
397
+ setAttribute(_el$24, "id", name);
398
+ _el$24.disabled = readOnly;
399
+ effect(() => _el$24.checked = fieldApi().state.value ?? false);
400
+ return _el$24;
401
+ })();
358
402
  case "upload": return createComponent(UploadControl, {
359
403
  name,
360
404
  field,
@@ -412,19 +456,19 @@ function UploadControl(props) {
412
456
  }
413
457
  }
414
458
  return (() => {
415
- var _el$25 = _tmpl$19(), _el$27 = _el$25.firstChild;
416
- insert(_el$25, createComponent(Show, {
459
+ var _el$26 = _tmpl$20(), _el$28 = _el$26.firstChild;
460
+ insert(_el$26, createComponent(Show, {
417
461
  get when() {
418
462
  return value();
419
463
  },
420
464
  get children() {
421
- var _el$26 = _tmpl$17();
422
- insert(_el$26, value);
423
- return _el$26;
465
+ var _el$27 = _tmpl$18();
466
+ insert(_el$27, value);
467
+ return _el$27;
424
468
  }
425
- }), _el$27);
426
- _el$27.addEventListener("change", handleFileChange);
427
- insert(_el$25, createComponent(Show, {
469
+ }), _el$28);
470
+ _el$28.addEventListener("change", handleFileChange);
471
+ insert(_el$26, createComponent(Show, {
428
472
  get when() {
429
473
  return uploading();
430
474
  },
@@ -432,28 +476,28 @@ function UploadControl(props) {
432
476
  return _tmpl$2$3();
433
477
  }
434
478
  }), null);
435
- insert(_el$25, createComponent(Show, {
479
+ insert(_el$26, createComponent(Show, {
436
480
  get when() {
437
481
  return uploadError();
438
482
  },
439
483
  get children() {
440
- var _el$29 = _tmpl$18();
441
- insert(_el$29, uploadError);
442
- return _el$29;
484
+ var _el$30 = _tmpl$19();
485
+ insert(_el$30, uploadError);
486
+ return _el$30;
443
487
  }
444
488
  }), null);
445
489
  effect((_p$) => {
446
490
  var _v$5 = props.name, _v$6 = props.field.required && !value(), _v$7 = uploading() || props.field.admin?.readOnly;
447
- _v$5 !== _p$.e && setAttribute(_el$27, "id", _p$.e = _v$5);
448
- _v$6 !== _p$.t && (_el$27.required = _p$.t = _v$6);
449
- _v$7 !== _p$.a && (_el$27.disabled = _p$.a = _v$7);
491
+ _v$5 !== _p$.e && setAttribute(_el$28, "id", _p$.e = _v$5);
492
+ _v$6 !== _p$.t && (_el$28.required = _p$.t = _v$6);
493
+ _v$7 !== _p$.a && (_el$28.disabled = _p$.a = _v$7);
450
494
  return _p$;
451
495
  }, {
452
496
  e: void 0,
453
497
  t: void 0,
454
498
  a: void 0
455
499
  });
456
- return _el$25;
500
+ return _el$26;
457
501
  })();
458
502
  }
459
503
  function RelationshipField(props) {
@@ -508,86 +552,86 @@ function RelationshipField(props) {
508
552
  }
509
553
  }
510
554
  return (() => {
511
- var _el$30 = _tmpl$23(), _el$32 = _el$30.firstChild;
512
- insert(_el$30, createComponent(Show, {
555
+ var _el$31 = _tmpl$24(), _el$33 = _el$31.firstChild;
556
+ insert(_el$31, createComponent(Show, {
513
557
  get when() {
514
558
  return memo(() => !!isMulti())() && selectedOptions().length > 0;
515
559
  },
516
560
  get children() {
517
- var _el$31 = _tmpl$20();
518
- insert(_el$31, createComponent(For, {
561
+ var _el$32 = _tmpl$21();
562
+ insert(_el$32, createComponent(For, {
519
563
  get each() {
520
564
  return selectedOptions();
521
565
  },
522
566
  children: (option) => (() => {
523
- var _el$35 = _tmpl$24(), _el$36 = _el$35.firstChild;
524
- insert(_el$35, () => option.label, _el$36);
525
- _el$36.$$click = () => removeId(option.id);
526
- effect(() => setAttribute(_el$36, "aria-label", `Remove ${option.label}`));
527
- return _el$35;
567
+ var _el$36 = _tmpl$25(), _el$37 = _el$36.firstChild;
568
+ insert(_el$36, () => option.label, _el$37);
569
+ _el$37.$$click = () => removeId(option.id);
570
+ effect(() => setAttribute(_el$37, "aria-label", `Remove ${option.label}`));
571
+ return _el$36;
528
572
  })()
529
573
  }));
530
- return _el$31;
574
+ return _el$32;
531
575
  }
532
- }), _el$32);
533
- _el$32.$$keydown = onKeyDown;
534
- _el$32.addEventListener("blur", () => setTimeout(() => setOpen(false), 120));
535
- _el$32.addEventListener("focus", () => setOpen(true));
536
- _el$32.$$input = (e) => {
576
+ }), _el$33);
577
+ _el$33.$$keydown = onKeyDown;
578
+ _el$33.addEventListener("blur", () => setTimeout(() => setOpen(false), 120));
579
+ _el$33.addEventListener("focus", () => setOpen(true));
580
+ _el$33.$$input = (e) => {
537
581
  setQuery(e.currentTarget.value);
538
582
  setOpen(true);
539
583
  setActive(0);
540
584
  };
541
- setAttribute(_el$32, "aria-controls", listId);
542
- insert(_el$30, createComponent(Show, {
585
+ setAttribute(_el$33, "aria-controls", listId);
586
+ insert(_el$31, createComponent(Show, {
543
587
  get when() {
544
588
  return memo(() => !!(!isMulti() && value() != null))() && !props.field.required;
545
589
  },
546
590
  get children() {
547
- var _el$33 = _tmpl$21();
548
- _el$33.$$click = () => removeId(value());
549
- _el$33.$$mousedown = (e) => e.preventDefault();
550
- return _el$33;
591
+ var _el$34 = _tmpl$22();
592
+ _el$34.$$click = () => removeId(value());
593
+ _el$34.$$mousedown = (e) => e.preventDefault();
594
+ return _el$34;
551
595
  }
552
596
  }), null);
553
- insert(_el$30, createComponent(Show, {
597
+ insert(_el$31, createComponent(Show, {
554
598
  get when() {
555
599
  return memo(() => !!open())() && filtered().length > 0;
556
600
  },
557
601
  get children() {
558
- var _el$34 = _tmpl$22();
559
- setAttribute(_el$34, "id", listId);
560
- insert(_el$34, createComponent(For, {
602
+ var _el$35 = _tmpl$23();
603
+ setAttribute(_el$35, "id", listId);
604
+ insert(_el$35, createComponent(For, {
561
605
  get each() {
562
606
  return filtered();
563
607
  },
564
608
  children: (option, i) => (() => {
565
- var _el$37 = _tmpl$25();
566
- _el$37.$$click = () => choose(option);
567
- _el$37.$$mousedown = (e) => e.preventDefault();
568
- insert(_el$37, () => option.label);
609
+ var _el$38 = _tmpl$26();
610
+ _el$38.$$click = () => choose(option);
611
+ _el$38.$$mousedown = (e) => e.preventDefault();
612
+ insert(_el$38, () => option.label);
569
613
  effect((_p$) => {
570
614
  var _v$11 = selectedIds().includes(option.id), _v$12 = !!(i() === active());
571
- _v$11 !== _p$.e && setAttribute(_el$37, "aria-selected", _p$.e = _v$11);
572
- _v$12 !== _p$.t && _el$37.classList.toggle("bg-base-200", _p$.t = _v$12);
615
+ _v$11 !== _p$.e && setAttribute(_el$38, "aria-selected", _p$.e = _v$11);
616
+ _v$12 !== _p$.t && _el$38.classList.toggle("bg-base-200", _p$.t = _v$12);
573
617
  return _p$;
574
618
  }, {
575
619
  e: void 0,
576
620
  t: void 0
577
621
  });
578
- return _el$37;
622
+ return _el$38;
579
623
  })()
580
624
  }));
581
- return _el$34;
625
+ return _el$35;
582
626
  }
583
627
  }), null);
584
628
  effect((_p$) => {
585
629
  var _v$8 = props.name, _v$9 = open(), _v$0 = props.field.required && selectedIds().length === 0, _v$1 = props.field.admin?.readOnly, _v$10 = props.field.admin?.placeholder ?? "Search…";
586
- _v$8 !== _p$.e && setAttribute(_el$32, "id", _p$.e = _v$8);
587
- _v$9 !== _p$.t && setAttribute(_el$32, "aria-expanded", _p$.t = _v$9);
588
- _v$0 !== _p$.a && (_el$32.required = _p$.a = _v$0);
589
- _v$1 !== _p$.o && (_el$32.disabled = _p$.o = _v$1);
590
- _v$10 !== _p$.i && setAttribute(_el$32, "placeholder", _p$.i = _v$10);
630
+ _v$8 !== _p$.e && setAttribute(_el$33, "id", _p$.e = _v$8);
631
+ _v$9 !== _p$.t && setAttribute(_el$33, "aria-expanded", _p$.t = _v$9);
632
+ _v$0 !== _p$.a && (_el$33.required = _p$.a = _v$0);
633
+ _v$1 !== _p$.o && (_el$33.disabled = _p$.o = _v$1);
634
+ _v$10 !== _p$.i && setAttribute(_el$33, "placeholder", _p$.i = _v$10);
591
635
  return _p$;
592
636
  }, {
593
637
  e: void 0,
@@ -596,8 +640,8 @@ function RelationshipField(props) {
596
640
  o: void 0,
597
641
  i: void 0
598
642
  });
599
- effect(() => _el$32.value = open() || isMulti() ? query() : singleLabel());
600
- return _el$30;
643
+ effect(() => _el$33.value = open() || isMulti() ? query() : singleLabel());
644
+ return _el$31;
601
645
  })();
602
646
  }
603
647
  function renderArray(form, ctx, name, field, label) {
@@ -658,129 +702,129 @@ function BlockEditor(props) {
658
702
  return "";
659
703
  }
660
704
  return (() => {
661
- var _el$38 = _tmpl$28(), _el$39 = _el$38.firstChild, _el$42 = _el$39.nextSibling;
662
- insert(_el$39, () => props.label, null);
663
- insert(_el$39, createComponent(Show, {
705
+ var _el$39 = _tmpl$29(), _el$40 = _el$39.firstChild, _el$43 = _el$40.nextSibling;
706
+ insert(_el$40, () => props.label, null);
707
+ insert(_el$40, createComponent(Show, {
664
708
  get when() {
665
709
  return props.field.required;
666
710
  },
667
711
  get children() {
668
- return _tmpl$9$1();
712
+ return _tmpl$0$1();
669
713
  }
670
714
  }), null);
671
- insert(_el$38, createComponent(Show, {
715
+ insert(_el$39, createComponent(Show, {
672
716
  get when() {
673
717
  return props.field.admin?.description;
674
718
  },
675
719
  get children() {
676
- var _el$41 = _tmpl$0$1();
677
- insert(_el$41, () => props.field.admin?.description);
678
- return _el$41;
720
+ var _el$42 = _tmpl$1$1();
721
+ insert(_el$42, () => props.field.admin?.description);
722
+ return _el$42;
679
723
  }
680
- }), _el$42);
681
- insert(_el$42, createComponent(Index, {
724
+ }), _el$43);
725
+ insert(_el$43, createComponent(Index, {
682
726
  get each() {
683
727
  return items();
684
728
  },
685
729
  children: (item, index) => {
686
730
  const isCollapsed = () => collapsed().has(index);
687
731
  return (() => {
688
- var _el$46 = _tmpl$31(), _el$47 = _el$46.firstChild, _el$48 = _el$47.firstChild, _el$49 = _el$48.firstChild, _el$50 = _el$49.nextSibling, _el$52 = _el$48.nextSibling, _el$53 = _el$52.firstChild, _el$54 = _el$53.nextSibling, _el$55 = _el$54.nextSibling, _el$56 = _el$55.nextSibling;
689
- _el$48.$$click = () => toggleCollapse(index);
690
- insert(_el$49, () => isCollapsed() ? "▸" : "▾");
691
- insert(_el$50, () => blockTitle(item()));
692
- insert(_el$47, createComponent(Show, {
732
+ var _el$47 = _tmpl$32(), _el$48 = _el$47.firstChild, _el$49 = _el$48.firstChild, _el$50 = _el$49.firstChild, _el$51 = _el$50.nextSibling, _el$53 = _el$49.nextSibling, _el$54 = _el$53.firstChild, _el$55 = _el$54.nextSibling, _el$56 = _el$55.nextSibling, _el$57 = _el$56.nextSibling;
733
+ _el$49.$$click = () => toggleCollapse(index);
734
+ insert(_el$50, () => isCollapsed() ? "▸" : "▾");
735
+ insert(_el$51, () => blockTitle(item()));
736
+ insert(_el$48, createComponent(Show, {
693
737
  get when() {
694
738
  return memo(() => !!isCollapsed())() && blockSummary(item());
695
739
  },
696
740
  get children() {
697
- var _el$51 = _tmpl$29();
698
- insert(_el$51, () => blockSummary(item()));
699
- return _el$51;
741
+ var _el$52 = _tmpl$30();
742
+ insert(_el$52, () => blockSummary(item()));
743
+ return _el$52;
700
744
  }
701
- }), _el$52);
702
- _el$53.$$click = () => move(index, index - 1);
703
- _el$53.disabled = index === 0;
704
- _el$54.$$click = () => move(index, index + 1);
705
- _el$55.$$click = () => duplicate(index);
706
- _el$56.$$click = () => props.fieldApi().removeValue(index);
707
- insert(_el$46, createComponent(Show, {
745
+ }), _el$53);
746
+ _el$54.$$click = () => move(index, index - 1);
747
+ _el$54.disabled = index === 0;
748
+ _el$55.$$click = () => move(index, index + 1);
749
+ _el$56.$$click = () => duplicate(index);
750
+ _el$57.$$click = () => props.fieldApi().removeValue(index);
751
+ insert(_el$47, createComponent(Show, {
708
752
  get when() {
709
753
  return !isCollapsed();
710
754
  },
711
755
  get children() {
712
- var _el$57 = _tmpl$30();
713
- insert(_el$57, createComponent(For, {
756
+ var _el$58 = _tmpl$31();
757
+ insert(_el$58, createComponent(For, {
714
758
  get each() {
715
759
  return fieldsForItem(props.field, item());
716
760
  },
717
761
  children: ([itemKey, itemField]) => renderField(props.form, props.ctx, `${props.name}[${index}].${itemKey}`, itemField, labelFor(itemKey, itemField))
718
762
  }));
719
- return _el$57;
763
+ return _el$58;
720
764
  }
721
765
  }), null);
722
766
  effect((_p$) => {
723
767
  var _v$13 = !isCollapsed(), _v$14 = index === items().length - 1;
724
- _v$13 !== _p$.e && setAttribute(_el$48, "aria-expanded", _p$.e = _v$13);
725
- _v$14 !== _p$.t && (_el$54.disabled = _p$.t = _v$14);
768
+ _v$13 !== _p$.e && setAttribute(_el$49, "aria-expanded", _p$.e = _v$13);
769
+ _v$14 !== _p$.t && (_el$55.disabled = _p$.t = _v$14);
726
770
  return _p$;
727
771
  }, {
728
772
  e: void 0,
729
773
  t: void 0
730
774
  });
731
- return _el$46;
775
+ return _el$47;
732
776
  })();
733
777
  }
734
778
  }), null);
735
- insert(_el$42, createComponent(Show, {
779
+ insert(_el$43, createComponent(Show, {
736
780
  get when() {
737
781
  return disc && variants.length > 0;
738
782
  },
739
783
  get fallback() {
740
784
  return (() => {
741
- var _el$58 = _tmpl$32();
742
- _el$58.firstChild;
743
- _el$58.$$click = () => addBlock();
744
- insert(_el$58, () => props.label, null);
745
- return _el$58;
785
+ var _el$59 = _tmpl$33();
786
+ _el$59.firstChild;
787
+ _el$59.$$click = () => addBlock();
788
+ insert(_el$59, () => props.label, null);
789
+ return _el$59;
746
790
  })();
747
791
  },
748
792
  get children() {
749
- var _el$43 = _tmpl$27(), _el$44 = _el$43.firstChild;
750
- _el$44.$$click = () => setMenuOpen((o) => !o);
751
- insert(_el$43, createComponent(Show, {
793
+ var _el$44 = _tmpl$28(), _el$45 = _el$44.firstChild;
794
+ _el$45.$$click = () => setMenuOpen((o) => !o);
795
+ insert(_el$44, createComponent(Show, {
752
796
  get when() {
753
797
  return menuOpen();
754
798
  },
755
799
  get children() {
756
- var _el$45 = _tmpl$26();
757
- insert(_el$45, createComponent(For, {
800
+ var _el$46 = _tmpl$27();
801
+ insert(_el$46, createComponent(For, {
758
802
  each: variants,
759
803
  children: (variant) => (() => {
760
- var _el$60 = _tmpl$34();
761
- _el$60.$$click = () => addBlock(variant);
762
- insert(_el$60, createComponent(Show, {
804
+ var _el$61 = _tmpl$35();
805
+ _el$61.$$click = () => addBlock(variant);
806
+ insert(_el$61, createComponent(Show, {
763
807
  get when() {
764
808
  return disc?.variantsAdmin?.[variant]?.icon;
765
809
  },
766
810
  get children() {
767
- var _el$61 = _tmpl$33();
768
- effect(() => className(_el$61, disc?.variantsAdmin?.[variant]?.icon));
769
- return _el$61;
811
+ var _el$62 = _tmpl$34();
812
+ effect(() => className(_el$62, disc?.variantsAdmin?.[variant]?.icon));
813
+ return _el$62;
770
814
  }
771
815
  }), null);
772
- insert(_el$60, () => variantLabel(disc, variant), null);
773
- return _el$60;
816
+ insert(_el$61, () => variantLabel(disc, variant), null);
817
+ return _el$61;
774
818
  })()
775
819
  }));
776
- return _el$45;
820
+ return _el$46;
777
821
  }
778
822
  }), null);
779
- effect(() => setAttribute(_el$44, "aria-expanded", menuOpen()));
780
- return _el$43;
823
+ effect(() => setAttribute(_el$45, "aria-expanded", menuOpen()));
824
+ return _el$44;
781
825
  }
782
826
  }), null);
783
- return _el$38;
827
+ return _el$39;
784
828
  })();
785
829
  }
786
830
  function fieldsForItem(field, item) {
@@ -1344,6 +1388,8 @@ function originOf(url) {
1344
1388
  }
1345
1389
  }
1346
1390
  function VisualEditingPane(props) {
1391
+ let iframe;
1392
+ const targetOrigin = () => props.allowedOrigin ?? originOf(props.src) ?? "*";
1347
1393
  onMount(() => {
1348
1394
  const expected = props.allowedOrigin ?? originOf(props.src);
1349
1395
  const handler = (event) => {
@@ -1354,8 +1400,24 @@ function VisualEditingPane(props) {
1354
1400
  window.addEventListener("message", handler);
1355
1401
  onCleanup(() => window.removeEventListener("message", handler));
1356
1402
  });
1403
+ createEffect(() => {
1404
+ const values = props.previewValues;
1405
+ const target = props.previewTarget;
1406
+ const win = iframe?.contentWindow;
1407
+ if (!values || !target || !win) return;
1408
+ const message = {
1409
+ type: PREVIEW_VALUES_MESSAGE,
1410
+ collection: target.collection,
1411
+ id: target.id,
1412
+ values
1413
+ };
1414
+ win.postMessage(message, targetOrigin());
1415
+ });
1357
1416
  return (() => {
1358
1417
  var _el$ = _tmpl$();
1418
+ use((el) => {
1419
+ iframe = el;
1420
+ }, _el$);
1359
1421
  effect((_p$) => {
1360
1422
  var _v$ = props.src, _v$2 = props.title ?? "Preview", _v$3 = props.class ?? "h-full w-full border-0";
1361
1423
  _v$ !== _p$.e && setAttribute(_el$, "src", _p$.e = _v$);