runeforge 0.0.55 → 0.0.57

package/dist/components/crud/views/Read.svelte

@@ -1,124 +1,124 @@
-<script lang="ts" generics="T extends object = Record<string, unknown>">
-  import { untrack } from 'svelte';
-  import { deserialize } from '$app/forms';
-  import Field from '../Field.svelte';
-  import Button from '../../form/Button.svelte';
-  import Header from '../../common/Header.svelte';
-  import { getIconSet } from '../../../icons/context.js';
-  import { defaultIconSet } from '../../../icons/sets/default.js';
-  import { groupFields } from '../utils/grouping.js';
-  import type { ActionConfiguration, FieldDefinition } from '../../../types/crud.js';
-  import { getStrings } from '../../../i18n/context.js';
-
-  const strings = getStrings();
-
-  let {
-    labelOne = '',
-    labelMany = '',
-    icon,
-    idKey = '_id',
-    fields = [] as FieldDefinition<T>[],
-    instance = {} as T,
-    read = {} as ActionConfiguration<T>,
-    onCancel,
-  }: {
-    labelOne?: string;
-    labelMany?: string;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    icon?: any;
-    idKey?: string;
-    fields?: FieldDefinition<T>[];
-    instance?: T;
-    read?: ActionConfiguration<T>;
-    onCancel?: () => void;
-  } = $props();
-
-  const icons = $derived(getIconSet() ?? defaultIconSet);
-  const entityIcon = $derived(icon ?? icons.folder);
-
-  let record = $state<Record<string, unknown>>(untrack(() => instance as Record<string, unknown>));
-
-  $effect(() => {
-    const endpoint = read.endpoint;
-    const id = (instance as Record<string, unknown>)[idKey];
-    if (!endpoint || id == null) return;
-
-    let cancelled = false;
-    (async () => {
-      const fd = new FormData();
-      fd.set('id', String(id));
-      const res = await fetch(endpoint, { method: 'POST', body: fd });
-      const result = deserialize(await res.text());
-      if (!cancelled && result.type === 'success') {
-        const data = result.data as Record<string, unknown> | undefined;
-        const fetched = data
-          ? Object.values(data).find(
-              (v) => v !== null && typeof v === 'object' && !Array.isArray(v) && idKey in (v as object)
-            )
-          : undefined;
-        if (fetched && typeof fetched === 'object') record = fetched as Record<string, unknown>;
-      }
-    })();
-    return () => { cancelled = true; };
-  });
-
-  const groups = $derived(groupFields(fields));
-</script>
-
-<div class="flex flex-col gap-6">
-
-  <Header
-    title={labelMany}
-    breadcrumbs={[
-      { label: labelMany, icon: entityIcon, link: { href: '#', onclick: (e) => { e.preventDefault(); onCancel?.(); } }, prominent: true },
-      { label: read.label ?? labelOne, icon: icons.view },
-    ]}
-  />
-
-  <div class="fields-panel mx-auto flex w-full flex-col gap-4 px-4">
-    {#each groups as group, i (group.title ?? `_ungrouped_${i}`)}
-      {#if group.title}
-        <fieldset class="fieldset border border-base-300 rounded-box p-4">
-          <legend class="fieldset-legend px-2">{group.title}</legend>
-          <div class="flex flex-col gap-4">
-            {#each group.rows as row (row.map((f) => f.attribute).join('|'))}
-              {#if row.length > 1}
-                <div class="flex flex-col gap-4 md:flex-row">
-                  {#each row as field (field.attribute)}
-                    <Field {field} {record} readonly class="md:min-w-0 md:flex-1" />
-                  {/each}
-                </div>
-              {:else}
-                <Field field={row[0]} {record} readonly />
-              {/if}
-            {/each}
-          </div>
-        </fieldset>
-      {:else}
-        {#each group.rows as row (row.map((f) => f.attribute).join('|'))}
-          {#if row.length > 1}
-            <div class="flex flex-col gap-4 md:flex-row">
-              {#each row as field (field.attribute)}
-                <Field {field} {record} readonly class="md:min-w-0 md:flex-1" />
-              {/each}
-            </div>
-          {:else}
-            <Field field={row[0]} {record} readonly />
-          {/if}
-        {/each}
-      {/if}
-    {/each}
-
-    <div class="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">
-      <Button variant="ghost" onclick={() => onCancel?.()}>
-        {strings.back}
-      </Button>
-    </div>
-  </div>
-</div>
-
-<style>
-  .fields-panel {
-    max-width: var(--runeforge-form-max-width, 32rem);
-  }
-</style>
+<script lang="ts" generics="T extends object = Record<string, unknown>">
+  import { untrack } from 'svelte';
+  import { deserialize } from '$app/forms';
+  import Field from '../Field.svelte';
+  import Button from '../../form/Button.svelte';
+  import Header from '../../common/Header.svelte';
+  import { getIconSet } from '../../../icons/context.js';
+  import { defaultIconSet } from '../../../icons/sets/default.js';
+  import { groupFields } from '../utils/grouping.js';
+  import type { ActionConfiguration, FieldDefinition } from '../../../types/crud.js';
+  import { getStrings } from '../../../i18n/context.js';
+
+  const strings = getStrings();
+
+  let {
+    labelOne = '',
+    labelMany = '',
+    icon,
+    idKey = '_id',
+    fields = [] as FieldDefinition<T>[],
+    instance = {} as T,
+    read = {} as ActionConfiguration<T>,
+    onCancel,
+  }: {
+    labelOne?: string;
+    labelMany?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    icon?: any;
+    idKey?: string;
+    fields?: FieldDefinition<T>[];
+    instance?: T;
+    read?: ActionConfiguration<T>;
+    onCancel?: () => void;
+  } = $props();
+
+  const icons = $derived(getIconSet() ?? defaultIconSet);
+  const entityIcon = $derived(icon ?? icons.folder);
+
+  let record = $state<Record<string, unknown>>(untrack(() => instance as Record<string, unknown>));
+
+  $effect(() => {
+    const endpoint = read.endpoint;
+    const id = (instance as Record<string, unknown>)[idKey];
+    if (!endpoint || id == null) return;
+
+    let cancelled = false;
+    (async () => {
+      const fd = new FormData();
+      fd.set('id', String(id));
+      const res = await fetch(endpoint, { method: 'POST', body: fd });
+      const result = deserialize(await res.text());
+      if (!cancelled && result.type === 'success') {
+        const data = result.data as Record<string, unknown> | undefined;
+        const fetched = data
+          ? Object.values(data).find(
+              (v) => v !== null && typeof v === 'object' && !Array.isArray(v) && idKey in (v as object)
+            )
+          : undefined;
+        if (fetched && typeof fetched === 'object') record = fetched as Record<string, unknown>;
+      }
+    })();
+    return () => { cancelled = true; };
+  });
+
+  const groups = $derived(groupFields(fields));
+</script>
+
+<div class="flex flex-col gap-6">
+
+  <Header
+    title={labelMany}
+    breadcrumbs={[
+      { label: labelMany, icon: entityIcon, link: { href: '#', onclick: (e) => { e.preventDefault(); onCancel?.(); } }, prominent: true },
+      { label: read.label ?? labelOne, icon: icons.view },
+    ]}
+  />
+
+  <div class="fields-panel mx-auto flex w-full flex-col gap-4 px-4">
+    {#each groups as group, i (group.title ?? `_ungrouped_${i}`)}
+      {#if group.title}
+        <fieldset class="fieldset border border-base-300 rounded-box p-4">
+          <legend class="fieldset-legend px-2">{group.title}</legend>
+          <div class="flex flex-col gap-4">
+            {#each group.rows as row (row.map((f) => f.attribute).join('|'))}
+              {#if row.length > 1}
+                <div class="flex flex-col gap-4 md:flex-row">
+                  {#each row as field (field.attribute)}
+                    <Field {field} {record} readonly class="md:min-w-0 md:flex-1" />
+                  {/each}
+                </div>
+              {:else}
+                <Field field={row[0]} {record} readonly />
+              {/if}
+            {/each}
+          </div>
+        </fieldset>
+      {:else}
+        {#each group.rows as row (row.map((f) => f.attribute).join('|'))}
+          {#if row.length > 1}
+            <div class="flex flex-col gap-4 md:flex-row">
+              {#each row as field (field.attribute)}
+                <Field {field} {record} readonly class="md:min-w-0 md:flex-1" />
+              {/each}
+            </div>
+          {:else}
+            <Field field={row[0]} {record} readonly />
+          {/if}
+        {/each}
+      {/if}
+    {/each}
+
+    <div class="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">
+      <Button variant="ghost" onclick={() => onCancel?.()}>
+        {strings.back}
+      </Button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .fields-panel {
+    max-width: var(--runeforge-form-max-width, 32rem);
+  }
+</style>

package/dist/components/crud/views/Update.svelte

@@ -1,208 +1,208 @@
-<script lang="ts" generics="T extends object = Record<string, unknown>">
-  import { untrack } from 'svelte';
-  import { enhance } from '$app/forms';
-  import Field from '../Field.svelte';
-  import Button from '../../form/Button.svelte';
-  import Header from '../../common/Header.svelte';
-  import { getIconSet } from '../../../icons/context.js';
-  import { defaultIconSet } from '../../../icons/sets/default.js';
-  import { validateAll } from '../utils/validation.js';
-  import { groupFields } from '../utils/grouping.js';
-  import { applyDuplicateOmit, seedRecord } from '../utils/embedded.js';
-  import type { ActionConfiguration, FieldDefinition } from '../../../types/crud.js';
-  import { getStrings } from '../../../i18n/context.js';
-
-  const strings = getStrings();
-
-  let {
-    labelOne = '',
-    labelMany = '',
-    icon,
-    idKey = '_id',
-    fields = [] as FieldDefinition<T>[],
-    instance = {} as T,
-    update = {} as ActionConfiguration<T>,
-    serverError = '',
-    onCancel,
-    onSuccess,
-    onContinue,
-    onDuplicate,
-  }: {
-    labelOne?: string;
-    labelMany?: string;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    icon?: any;
-    idKey?: string;
-    fields?: FieldDefinition<T>[];
-    instance?: T;
-    update?: ActionConfiguration<T>;
-    serverError?: string;
-    onCancel?: () => void;
-    onSuccess?: () => void;
-    onContinue?: () => void;
-    onDuplicate?: (record: Record<string, unknown>) => void;
-  } = $props();
-
-  const icons = $derived(getIconSet() ?? defaultIconSet);
-  const entityIcon = $derived(icon ?? icons.folder);
-
-  let fieldErrors = $state<Record<string, string>>({});
-  let internalError = $state('');
-  let continuing = $state(false);
-  let duplicating = $state(false);
-
-  let record = $state<Record<string, unknown>>(
-    untrack(() => seedRecord(fields, instance as Record<string, unknown>))
-  );
-
-  $effect(() => {
-    const id = (instance as Record<string, unknown>)[idKey];
-    if (!id) return;
-    untrack(() => { record = seedRecord(fields, instance as Record<string, unknown>); });
-  });
-
-  const groups = $derived(groupFields(fields));
-  const hasFileField = $derived(fields.some((f) => f.type === 'file'));
-
-  const continueEnabled = $derived(update.continue?.enabled ?? false);
-  const continueLabel = $derived(update.continue?.label ?? strings.saveAndContinue);
-  const continueClass = $derived(update.continue?.class ?? '');
-
-  const duplicationEnabled = $derived(update.duplication?.enabled ?? false);
-  const duplicationLabel = $derived(update.duplication?.label ?? strings.duplicate);
-  const duplicationClass = $derived(update.duplication?.class ?? '');
-
-  const errorEntries = $derived([
-    ...((serverError || internalError) ? [['_global', internalError || serverError] as [string, string]] : []),
-    ...Object.entries(fieldErrors),
-  ]);
-</script>
-
-<div class="flex flex-col gap-6">
-
-  <Header
-    title={labelMany}
-    breadcrumbs={[
-      { label: labelMany, icon: entityIcon, link: { href: '#', onclick: (e) => { e.preventDefault(); onCancel?.(); } }, prominent: true },
-      { label: update.label ?? labelOne, icon: icons.edit },
-    ]}
-  />
-
-  {#if errorEntries.length > 0}
-    <div role="alert" class="alert alert-error">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </svg>
-      <ul class="list-disc list-inside text-sm">
-        {#each errorEntries as [key, msg] (key)}
-          <li>{msg}</li>
-        {/each}
-      </ul>
-    </div>
-  {/if}
-
-  <form
-    method="POST"
-    action={update.endpoint ?? '?/update'}
-    enctype={hasFileField ? 'multipart/form-data' : undefined}
-    class="mx-auto flex w-full flex-col gap-4 px-4"
-    use:enhance={({ formData, cancel }) => {
-      fieldErrors = {};
-      internalError = '';
-      const errs = validateAll(fields, formData, strings);
-      if (Object.keys(errs).length > 0) {
-        fieldErrors = errs;
-        cancel();
-        return;
-      }
-      return async ({ result, update: updateForm }) => {
-        if (result.type === 'success' || result.type === 'redirect') {
-          await updateForm({ reset: false });
-          if (continuing) {
-            continuing = false;
-            onContinue?.();
-          } else if (duplicating) {
-            duplicating = false;
-            onDuplicate?.(applyDuplicateOmit(fields, record, update.duplication?.omit));
-          } else {
-            onSuccess?.();
-          }
-        } else if (result.type === 'error') {
-          internalError = result.error?.message ?? strings.serverError;
-        } else {
-          await updateForm({ reset: false });
-        }
-      };
-    }}
-  >
-    <input type="hidden" name="id" value={String(record[idKey] ?? '')} />
-
-    {#each groups as group, i (group.title ?? `_ungrouped_${i}`)}
-      {#if group.title}
-        <fieldset class="fieldset border border-base-300 rounded-box p-4">
-          <legend class="fieldset-legend px-2">{group.title}</legend>
-          <div class="flex flex-col gap-4">
-            {#each group.rows as row (row.map((f) => f.attribute).join('|'))}
-              {#if row.length > 1}
-                <div class="flex flex-col gap-4 md:flex-row">
-                  {#each row as field (field.attribute)}
-                    <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} class="md:min-w-0 md:flex-1" />
-                  {/each}
-                </div>
-              {:else}
-                <Field field={row[0]} bind:record error={fieldErrors[row[0].attribute] ?? ''} />
-              {/if}
-            {/each}
-          </div>
-        </fieldset>
-      {:else}
-        {#each group.rows as row (row.map((f) => f.attribute).join('|'))}
-          {#if row.length > 1}
-            <div class="flex flex-col gap-4 md:flex-row">
-              {#each row as field (field.attribute)}
-                <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} class="md:min-w-0 md:flex-1" />
-              {/each}
-            </div>
-          {:else}
-            <Field field={row[0]} bind:record error={fieldErrors[row[0].attribute] ?? ''} />
-          {/if}
-        {/each}
-      {/if}
-    {/each}
-
-    <div class="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">
-      <Button variant="ghost" onclick={() => onCancel?.()}>
-        {strings.cancel}
-      </Button>
-      {#if duplicationEnabled}
-        <Button
-          type="submit"
-          variant="warning"
-          class={duplicationClass}
-          onclick={() => { continuing = false; duplicating = true; }}
-        >
-          {duplicationLabel}
-        </Button>
-      {/if}
-      {#if continueEnabled}
-        <Button
-          type="submit"
-          variant="secondary"
-          class={continueClass}
-          onclick={() => { continuing = true; duplicating = false; }}
-        >
-          {continueLabel}
-        </Button>
-      {/if}
-      <Button type="submit" variant="primary" onclick={() => { continuing = false; duplicating = false; }}>
-        {strings.save}
-      </Button>
-    </div>
-  </form>
-</div>
-
-<style>
-  form {
-    max-width: var(--runeforge-form-max-width, 32rem);
-  }
-</style>
+<script lang="ts" generics="T extends object = Record<string, unknown>">
+  import { untrack } from 'svelte';
+  import { enhance } from '$app/forms';
+  import Field from '../Field.svelte';
+  import Button from '../../form/Button.svelte';
+  import Header from '../../common/Header.svelte';
+  import { getIconSet } from '../../../icons/context.js';
+  import { defaultIconSet } from '../../../icons/sets/default.js';
+  import { validateAll } from '../utils/validation.js';
+  import { groupFields } from '../utils/grouping.js';
+  import { applyDuplicateOmit, seedRecord } from '../utils/embedded.js';
+  import type { ActionConfiguration, FieldDefinition } from '../../../types/crud.js';
+  import { getStrings } from '../../../i18n/context.js';
+
+  const strings = getStrings();
+
+  let {
+    labelOne = '',
+    labelMany = '',
+    icon,
+    idKey = '_id',
+    fields = [] as FieldDefinition<T>[],
+    instance = {} as T,
+    update = {} as ActionConfiguration<T>,
+    serverError = '',
+    onCancel,
+    onSuccess,
+    onContinue,
+    onDuplicate,
+  }: {
+    labelOne?: string;
+    labelMany?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    icon?: any;
+    idKey?: string;
+    fields?: FieldDefinition<T>[];
+    instance?: T;
+    update?: ActionConfiguration<T>;
+    serverError?: string;
+    onCancel?: () => void;
+    onSuccess?: () => void;
+    onContinue?: () => void;
+    onDuplicate?: (record: Record<string, unknown>) => void;
+  } = $props();
+
+  const icons = $derived(getIconSet() ?? defaultIconSet);
+  const entityIcon = $derived(icon ?? icons.folder);
+
+  let fieldErrors = $state<Record<string, string>>({});
+  let internalError = $state('');
+  let continuing = $state(false);
+  let duplicating = $state(false);
+
+  let record = $state<Record<string, unknown>>(
+    untrack(() => seedRecord(fields, instance as Record<string, unknown>))
+  );
+
+  $effect(() => {
+    const id = (instance as Record<string, unknown>)[idKey];
+    if (!id) return;
+    untrack(() => { record = seedRecord(fields, instance as Record<string, unknown>); });
+  });
+
+  const groups = $derived(groupFields(fields));
+  const hasFileField = $derived(fields.some((f) => f.type === 'file'));
+
+  const continueEnabled = $derived(update.continue?.enabled ?? false);
+  const continueLabel = $derived(update.continue?.label ?? strings.saveAndContinue);
+  const continueClass = $derived(update.continue?.class ?? '');
+
+  const duplicationEnabled = $derived(update.duplication?.enabled ?? false);
+  const duplicationLabel = $derived(update.duplication?.label ?? strings.duplicate);
+  const duplicationClass = $derived(update.duplication?.class ?? '');
+
+  const errorEntries = $derived([
+    ...((serverError || internalError) ? [['_global', internalError || serverError] as [string, string]] : []),
+    ...Object.entries(fieldErrors),
+  ]);
+</script>
+
+<div class="flex flex-col gap-6">
+
+  <Header
+    title={labelMany}
+    breadcrumbs={[
+      { label: labelMany, icon: entityIcon, link: { href: '#', onclick: (e) => { e.preventDefault(); onCancel?.(); } }, prominent: true },
+      { label: update.label ?? labelOne, icon: icons.edit },
+    ]}
+  />
+
+  {#if errorEntries.length > 0}
+    <div role="alert" class="alert alert-error">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      <ul class="list-disc list-inside text-sm">
+        {#each errorEntries as [key, msg] (key)}
+          <li>{msg}</li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
+
+  <form
+    method="POST"
+    action={update.endpoint ?? '?/update'}
+    enctype={hasFileField ? 'multipart/form-data' : undefined}
+    class="mx-auto flex w-full flex-col gap-4 px-4"
+    use:enhance={({ formData, cancel }) => {
+      fieldErrors = {};
+      internalError = '';
+      const errs = validateAll(fields, formData, strings);
+      if (Object.keys(errs).length > 0) {
+        fieldErrors = errs;
+        cancel();
+        return;
+      }
+      return async ({ result, update: updateForm }) => {
+        if (result.type === 'success' || result.type === 'redirect') {
+          await updateForm({ reset: false });
+          if (continuing) {
+            continuing = false;
+            onContinue?.();
+          } else if (duplicating) {
+            duplicating = false;
+            onDuplicate?.(applyDuplicateOmit(fields, record, update.duplication?.omit));
+          } else {
+            onSuccess?.();
+          }
+        } else if (result.type === 'error') {
+          internalError = result.error?.message ?? strings.serverError;
+        } else {
+          await updateForm({ reset: false });
+        }
+      };
+    }}
+  >
+    <input type="hidden" name="id" value={String(record[idKey] ?? '')} />
+
+    {#each groups as group, i (group.title ?? `_ungrouped_${i}`)}
+      {#if group.title}
+        <fieldset class="fieldset border border-base-300 rounded-box p-4">
+          <legend class="fieldset-legend px-2">{group.title}</legend>
+          <div class="flex flex-col gap-4">
+            {#each group.rows as row (row.map((f) => f.attribute).join('|'))}
+              {#if row.length > 1}
+                <div class="flex flex-col gap-4 md:flex-row">
+                  {#each row as field (field.attribute)}
+                    <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} class="md:min-w-0 md:flex-1" />
+                  {/each}
+                </div>
+              {:else}
+                <Field field={row[0]} bind:record error={fieldErrors[row[0].attribute] ?? ''} />
+              {/if}
+            {/each}
+          </div>
+        </fieldset>
+      {:else}
+        {#each group.rows as row (row.map((f) => f.attribute).join('|'))}
+          {#if row.length > 1}
+            <div class="flex flex-col gap-4 md:flex-row">
+              {#each row as field (field.attribute)}
+                <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} class="md:min-w-0 md:flex-1" />
+              {/each}
+            </div>
+          {:else}
+            <Field field={row[0]} bind:record error={fieldErrors[row[0].attribute] ?? ''} />
+          {/if}
+        {/each}
+      {/if}
+    {/each}
+
+    <div class="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">
+      <Button variant="ghost" onclick={() => onCancel?.()}>
+        {strings.cancel}
+      </Button>
+      {#if duplicationEnabled}
+        <Button
+          type="submit"
+          variant="warning"
+          class={duplicationClass}
+          onclick={() => { continuing = false; duplicating = true; }}
+        >
+          {duplicationLabel}
+        </Button>
+      {/if}
+      {#if continueEnabled}
+        <Button
+          type="submit"
+          variant="secondary"
+          class={continueClass}
+          onclick={() => { continuing = true; duplicating = false; }}
+        >
+          {continueLabel}
+        </Button>
+      {/if}
+      <Button type="submit" variant="primary" onclick={() => { continuing = false; duplicating = false; }}>
+        {strings.save}
+      </Button>
+    </div>
+  </form>
+</div>
+
+<style>
+  form {
+    max-width: var(--runeforge-form-max-width, 32rem);
+  }
+</style>