runeforge 0.0.61 → 0.0.63

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

@@ -1,131 +1,131 @@
-<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 } from '../../../types/crud/actions.js';
-  import type { FieldDefinition } from '../../../types/crud/fields.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">
-
-  <div class="sticky-header sticky z-10 bg-base-100 pb-2">
-    <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>
-
-  <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} bind:record readonly class="md:min-w-0 md:flex-1" />
-                  {/each}
-                </div>
-              {:else}
-                <Field field={row[0]} bind: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} bind:record readonly class="md:min-w-0 md:flex-1" />
-              {/each}
-            </div>
-          {:else}
-            <Field field={row[0]} bind: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);
-  }
-
-  .sticky-header {
-    top: var(--runeforge-sticky-header-top, 0);
-  }
-</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 } from '../../../types/crud/actions.js';
+  import type { FieldDefinition } from '../../../types/crud/fields.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">
+
+  <div class="sticky-header sticky z-10 bg-base-100 pb-2">
+    <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>
+
+  <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} bind:record readonly class="md:min-w-0 md:flex-1" />
+                  {/each}
+                </div>
+              {:else}
+                <Field field={row[0]} bind: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} bind:record readonly class="md:min-w-0 md:flex-1" />
+              {/each}
+            </div>
+          {:else}
+            <Field field={row[0]} bind: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);
+  }
+
+  .sticky-header {
+    top: var(--runeforge-sticky-header-top, 0);
+  }
+</style>