sveltekit-admin 0.2.0 → 0.5.0

package/dist/server/views/ListFilters.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+  import type { ResolvedFilterField } from '../query/filterDetection.js';
+  import type { FkFilterMeta } from './types.js';
+  import { buildListUrl, hiddenParams } from '../query/urls.js';
+
+  /**
+   * Sidebar de filtres façon Django admin. Boolean/enum/datetime rendus en
+   * liens (§3.1 : zéro JS, un clic = un état). Les plages numériques et les
+   * FK à forte cardinalité utilisent un `<form method="GET">` avec bouton
+   * explicite — la seule exception documentée au rendu en liens, qui reste
+   * fonctionnelle sans JavaScript (§3.2).
+   */
+  let {
+    filters,
+    activeValues,
+    activeRangeValues,
+    fkFilterMeta,
+    currentUrl
+  }: {
+    filters: ResolvedFilterField[];
+    /** Valeur brute active par champ (Boolean/enum/datetime/FK), telle qu'apparue dans l'URL. */
+    activeValues: Map<string, string>;
+    /** Bornes actives par champ range, ex. { views: { gte: '10', lte: '100' } }. */
+    activeRangeValues: Map<string, { gte?: string; lte?: string }>;
+    /** Résolution async, scopée, des FK configurées. */
+    fkFilterMeta: Map<string, FkFilterMeta>;
+    currentUrl: URL;
+  } = $props();
+
+  interface Option {
+    label: string;
+    href: string;
+    active: boolean;
+    /** Valeur brute envoyée dans `f.<field>` ; null représente l'option All. */
+    value: string | null;
+  }
+
+  interface LinkGroup {
+    kind: 'links';
+    field: string;
+    label: string;
+    options: Option[];
+  }
+
+  interface RangeGroup {
+    kind: 'range';
+    field: string;
+    label: string;
+    gteParam: string;
+    lteParam: string;
+    gteValue: string;
+    lteValue: string;
+    hidden: { name: string; value: string }[];
+  }
+
+  interface FkGroup {
+    kind: 'fk';
+    field: string;
+    label: string;
+    mode: 'links' | 'select' | 'raw-id';
+    options: Option[];
+    inputValue: string;
+    hidden: { name: string; value: string }[];
+    activeLabel?: string;
+    activeHref?: string;
+    clearHref: string;
+  }
+
+  const PRESET_LABELS: Record<string, string> = {
+    today: 'Today',
+    '7d': 'Last 7 days',
+    month: 'This month',
+    year: 'This year'
+  };
+
+  const groups = $derived.by((): (LinkGroup | RangeGroup | FkGroup)[] => {
+    return filters.flatMap((f): (LinkGroup | RangeGroup | FkGroup)[] => {
+      const paramName = `f.${f.field}`;
+
+      if (f.kind === 'fk') {
+        const meta = fkFilterMeta.get(f.field);
+        // Résolution async indisponible (client Prisma incomplet, modèle
+        // cible absent...) : ne pas afficher un filtre mort. Le filtre URL
+        // reste accepté par parseListQuery, mais l'UI ne l'invente pas.
+        if (!meta) return [];
+        const current = activeValues.get(f.field);
+        const allOption: Option = {
+          label: 'All',
+          href: buildListUrl(currentUrl, { [paramName]: null }),
+          active: current === undefined,
+          value: null
+        };
+        const options = meta.options.map((o) => ({
+          label: o.label,
+          href: buildListUrl(currentUrl, { [paramName]: String(o.id) }),
+          active: current === String(o.id),
+          value: String(o.id)
+        }));
+        return [{
+          kind: 'fk',
+          field: f.field,
+          label: f.label,
+          mode: meta.mode,
+          options: [allOption, ...options],
+          inputValue: current ?? '',
+          hidden: hiddenParams(currentUrl, [paramName]),
+          // Une valeur forgée hors scope a activeLabel undefined : afficher
+          // l'ID brut dans le chip, jamais un label qui fuit un autre tenant.
+          activeLabel: current === undefined ? undefined : meta.activeLabel ?? current,
+          activeHref: meta.activeHref,
+          clearHref: buildListUrl(currentUrl, { [paramName]: null })
+        }];
+      }
+
+      if (f.kind === 'range') {
+        const gteParam = `f.${f.field}__gte`;
+        const lteParam = `f.${f.field}__lte`;
+        const active = activeRangeValues.get(f.field);
+        return [{
+          kind: 'range',
+          field: f.field,
+          label: f.label,
+          gteParam,
+          lteParam,
+          gteValue: active?.gte ?? '',
+          lteValue: active?.lte ?? '',
+          hidden: hiddenParams(currentUrl, [gteParam, lteParam])
+        }];
+      }
+
+      const current = activeValues.get(f.field);
+      const allOption: Option = {
+        label: 'All',
+        href: buildListUrl(currentUrl, { [paramName]: null }),
+        active: current === undefined,
+        value: null
+      };
+
+      let valueOptions: Option[];
+      if (f.kind === 'boolean') {
+        valueOptions = [
+          { value: 'true', label: 'Yes' },
+          { value: 'false', label: 'No' }
+        ].map((o) => ({
+          label: o.label,
+          href: buildListUrl(currentUrl, { [paramName]: o.value }),
+          active: current === o.value,
+          value: o.value
+        }));
+      } else if (f.kind === 'datetime') {
+        valueOptions = (f.presets ?? []).map((p) => ({
+          label: PRESET_LABELS[p] ?? p,
+          href: buildListUrl(currentUrl, { [paramName]: p }),
+          active: current === p,
+          value: p
+        }));
+      } else {
+        valueOptions = (f.enumValues ?? []).map((v) => ({
+          label: v,
+          href: buildListUrl(currentUrl, { [paramName]: v }),
+          active: current === v,
+          value: v
+        }));
+      }
+
+      return [{ kind: 'links', field: f.field, label: f.label, options: [allOption, ...valueOptions] }];
+    });
+  });
+</script>
+
+{#if groups.length > 0}
+  <div class="ska-card ska-filters">
+    {#each groups as group (group.field)}
+      <div class="ska-filters__group">
+        <h3 class="ska-filters__title">{group.label}</h3>
+
+        {#if group.kind === 'range'}
+          <form method="GET" class="ska-filters__range">
+            {#each group.hidden as p (p.name)}
+              <input type="hidden" name={p.name} value={p.value} />
+            {/each}
+            <input
+              type="number"
+              name={group.gteParam}
+              value={group.gteValue}
+              placeholder="Min"
+              class="ska-filters__range-input"
+            />
+            <input
+              type="number"
+              name={group.lteParam}
+              value={group.lteValue}
+              placeholder="Max"
+              class="ska-filters__range-input"
+            />
+            <button type="submit" class="ska-btn ska-btn--secondary ska-btn--sm">Apply</button>
+          </form>
+
+        {:else if group.kind === 'fk' && group.activeLabel}
+          <p class="ska-filters__chip">
+            {#if group.activeHref}
+              <a href={group.activeHref}>{group.activeLabel}</a>
+            {:else}
+              <span>{group.activeLabel}</span>
+            {/if}
+            <a href={group.clearHref} class="ska-filters__chip-clear" aria-label={`Clear ${group.label}`}>×</a>
+          </p>
+        {/if}
+
+        {#if group.kind === 'fk' && group.mode === 'select'}
+          <form method="GET" class="ska-filters__select">
+            {#each group.hidden as p (p.name)}
+              <input type="hidden" name={p.name} value={p.value} />
+            {/each}
+            <select name={`f.${group.field}`} class="ska-filters__select-input">
+              {#each group.options as option (option.value ?? 'all')}
+                <option value={option.value ?? ''} selected={option.active}>{option.label}</option>
+              {/each}
+            </select>
+            <button type="submit" class="ska-btn ska-btn--secondary ska-btn--sm">Apply</button>
+          </form>
+
+        {:else if group.kind === 'fk' && group.mode === 'raw-id'}
+          <form method="GET" class="ska-filters__range">
+            {#each group.hidden as p (p.name)}
+              <input type="hidden" name={p.name} value={p.value} />
+            {/each}
+            <input
+              type="text"
+              name={`f.${group.field}`}
+              value={group.inputValue}
+              placeholder="ID"
+              class="ska-filters__range-input"
+            />
+            <button type="submit" class="ska-btn ska-btn--secondary ska-btn--sm">Apply</button>
+          </form>
+
+        {:else if group.kind === 'links' || (group.kind === 'fk' && group.mode === 'links')}
+          <ul class="ska-filters__list">
+            {#each group.options as option (option.value ?? 'all')}
+              <li>
+                <a
+                  href={option.href}
+                  class="ska-filters__link"
+                  class:ska-filters__link--active={option.active}
+                  aria-current={option.active ? 'page' : undefined}
+                >
+                  {option.label}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        {/if}
+      </div>
+    {/each}
+  </div>
+{/if}

package/dist/server/views/ListFilters.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ResolvedFilterField } from '../query/filterDetection.js';
+import type { FkFilterMeta } from './types.js';
+type $$ComponentProps = {
+    filters: ResolvedFilterField[];
+    /** Valeur brute active par champ (Boolean/enum/datetime/FK), telle qu'apparue dans l'URL. */
+    activeValues: Map<string, string>;
+    /** Bornes actives par champ range, ex. { views: { gte: '10', lte: '100' } }. */
+    activeRangeValues: Map<string, {
+        gte?: string;
+        lte?: string;
+    }>;
+    /** Résolution async, scopée, des FK configurées. */
+    fkFilterMeta: Map<string, FkFilterMeta>;
+    currentUrl: URL;
+};
+declare const ListFilters: import("svelte").Component<$$ComponentProps, {}, "">;
+type ListFilters = ReturnType<typeof ListFilters>;
+export default ListFilters;

package/dist/server/views/ModelCard.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  let { href, label, count }: { href: string; label: string; count: number } = $props();
+</script>
+
+<a {href} class="ska-model-card">
+  <div>
+    <div class="ska-model-card__name">{label}</div>
+    <div class="ska-model-card__count">{count} records</div>
+  </div>
+  <div class="ska-model-card__footer">Manage →</div>
+</a>

package/dist/server/views/ModelCard.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    href: string;
+    label: string;
+    count: number;
+};
+declare const ModelCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type ModelCard = ReturnType<typeof ModelCard>;
+export default ModelCard;

package/dist/server/views/NotFound.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  let { message, basePath }: { message: string; basePath: string } = $props();
+</script>
+
+<h1>Not Found</h1>
+<p class="ska-subtitle">{message}</p>
+<a href={basePath} class="ska-btn ska-btn--secondary">← Back to Dashboard</a>

package/dist/server/views/NotFound.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    message: string;
+    basePath: string;
+};
+declare const NotFound: import("svelte").Component<$$ComponentProps, {}, "">;
+type NotFound = ReturnType<typeof NotFound>;
+export default NotFound;

package/dist/server/views/RelatedBlock.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import type { RelationEdge, RelationGraph } from '../introspection/relations.js';
+  import { toLabel } from './html.js';
+
+  /**
+   * Bloc read-only pour les relations inverses (1-N inverse, 1-1 inverse) :
+   * compteur + lien "voir tout" filtré + lien "ajouter" pré-rempli avec la FK.
+   * Jamais éditable depuis ce formulaire — éditer une liste d'enfants depuis
+   * le parent, c'est un inline formset (non-objectif, voir
+   * docs/design/relations.md §2.5/§3.4).
+   */
+  let {
+    edges,
+    graph,
+    counts,
+    currentId,
+    basePath
+  }: {
+    edges: RelationEdge[];
+    graph: RelationGraph;
+    counts: Map<string, number>;
+    currentId: string | number;
+    basePath: string;
+  } = $props();
+
+  interface Row {
+    field: string;
+    label: string;
+    count: number;
+    viewAllHref: string;
+    addHref: string;
+  }
+
+  const rows = $derived.by((): Row[] => {
+    const out: Row[] = [];
+    for (const e of edges) {
+      // Le champ FK vit sur la contrepartie owning (ex: `User.posts` inverse
+      // ↔ `Post.author` owning, qui porte `authorId`), pas sur `e` lui-même.
+      const owning = [...graph.edges.values()].find(
+        (o) => o.model === e.target && o.kind === 'to-one-owning' && o.relationName === e.relationName
+      );
+      if (!owning || owning.unsupported) continue;
+
+      const targetPath = `${basePath}/${e.target.toLowerCase()}`;
+      const scalarName = owning.scalarFields[0];
+      out.push({
+        field: e.field,
+        label: toLabel(e.field),
+        count: counts.get(`${e.model}.${e.field}`)!,
+        // `f.<field>=<value>` — même pipeline sécurisé que la recherche/
+        // filtre (whitelist + coercion, docs/design/list-search-filters.md).
+        // L'ancien `?filter=field:value` reste supporté en lecture pour la
+        // rétrocompatibilité, mais ce composant n'en émet plus.
+        viewAllHref: `${targetPath}?f.${encodeURIComponent(scalarName)}=${encodeURIComponent(String(currentId))}`,
+        addHref: `${targetPath}/new?${encodeURIComponent(scalarName)}=${encodeURIComponent(String(currentId))}`
+      });
+    }
+    return out;
+  });
+</script>
+
+{#if rows.length > 0}
+  <div class="ska-card ska-related">
+    <h2 class="ska-subtitle">Liaisons</h2>
+    {#each rows as row (row.field)}
+      <div class="ska-related-row">
+        <span class="ska-label">{row.label}</span>
+        <span class="ska-subtitle">{row.count} record{row.count === 1 ? '' : 's'}</span>
+        <a href={row.viewAllHref} class="ska-btn ska-btn--secondary ska-btn--sm">Voir tout</a>
+        <a href={row.addHref} class="ska-btn ska-btn--secondary ska-btn--sm">Ajouter</a>
+      </div>
+    {/each}
+  </div>
+{/if}

package/dist/server/views/RelatedBlock.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { RelationEdge, RelationGraph } from '../introspection/relations.js';
+type $$ComponentProps = {
+    edges: RelationEdge[];
+    graph: RelationGraph;
+    counts: Map<string, number>;
+    currentId: string | number;
+    basePath: string;
+};
+declare const RelatedBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type RelatedBlock = ReturnType<typeof RelatedBlock>;
+export default RelatedBlock;

package/dist/server/views/RelationCheckboxes.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { RelationEdge } from '../introspection/relations.js';
+  import type { RelationMeta } from './types.js';
+  import { toLabel } from './html.js';
+
+  let {
+    edge,
+    meta
+  }: {
+    edge: RelationEdge;
+    meta: RelationMeta;
+  } = $props();
+
+  const label = $derived(toLabel(edge.field));
+  const inputName = $derived(`__rel__${edge.field}`);
+  const selected = $derived(new Set((meta.selectedIds ?? []).map(String)));
+</script>
+
+<!--
+  Fieldset de checkboxes pour une arête m2m-implicite.
+
+  Nommage `__rel__<field>` pour les valeurs cochées et un hidden sentinelle
+  `__rel_present__<field>` toujours émis : en HTML, zéro checkbox cochée
+  retire la clé du POST, donc impossible de distinguer "tout décoché" de
+  "widget absent" sans ce sentinelle. Voir docs/design/relations.md §3.1.
+-->
+{#if meta.tooMany}
+  <!-- Au-delà du seuil : liste d'IDs texte, jamais des centaines de checkboxes. -->
+  <div class="ska-field">
+    <label class="ska-label" for={inputName}>{label} (IDs séparés par des virgules)</label>
+    <input type="hidden" name="__rel_present__{edge.field}" value="1" />
+    <input id={inputName} type="text" name={inputName} value={[...selected].join(',')} class="ska-input" />
+  </div>
+{:else}
+  <div class="ska-field">
+    <label class="ska-label" for={inputName}>{label}</label>
+    <input type="hidden" name="__rel_present__{edge.field}" value="1" />
+    <fieldset id={inputName} class="ska-checkbox-group">
+      {#each meta.options as opt (opt.id)}
+        <label class="ska-checkbox-wrap">
+          <input
+            type="checkbox"
+            name={inputName}
+            value={opt.id}
+            class="ska-checkbox"
+            checked={selected.has(String(opt.id))}
+          />
+          <span class="ska-label">{opt.label}</span>
+        </label>
+      {/each}
+    </fieldset>
+  </div>
+{/if}

package/dist/server/views/RelationCheckboxes.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { RelationEdge } from '../introspection/relations.js';
+import type { RelationMeta } from './types.js';
+type $$ComponentProps = {
+    edge: RelationEdge;
+    meta: RelationMeta;
+};
+declare const RelationCheckboxes: import("svelte").Component<$$ComponentProps, {}, "">;
+type RelationCheckboxes = ReturnType<typeof RelationCheckboxes>;
+export default RelationCheckboxes;

package/dist/server/views/RelationSelect.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { AdminHandlerConfig } from '../handler.js';
+  import type { RelationEdge } from '../introspection/relations.js';
+  import type { RelationMeta } from './types.js';
+  import { toLabel } from './html.js';
+
+  let {
+    edge,
+    meta,
+    currentValue,
+    config
+  }: {
+    edge: RelationEdge;
+    meta: RelationMeta;
+    currentValue: unknown;
+    config: AdminHandlerConfig;
+  } = $props();
+
+  const relConfig = $derived(config.models?.[edge.model]?.relations?.[edge.field]);
+  const label = $derived(toLabel(edge.field));
+  const required = $derived(edge.isRequired);
+  const nullLabel = $derived(relConfig?.nullLabel ?? '— aucun —');
+  // Toujours défini pour une arête to-one-owning : c'est ce qui la distingue
+  // des autres kinds dans le graphe (voir buildRelationGraph).
+  const scalarName = $derived(edge.scalarFields[0]);
+</script>
+
+{#if meta.tooMany}
+  <!-- Au-delà du seuil : raw-id, jamais un select de 10k lignes. -->
+  <div class="ska-field">
+    <label class="ska-label" for={scalarName}>{label} (ID){required ? ' *' : ''}</label>
+    <input
+      id={scalarName}
+      type="text"
+      name={scalarName}
+      value={currentValue ?? ''}
+      class="ska-input"
+      required={required}
+    />
+  </div>
+{:else}
+  <div class="ska-field">
+    <label class="ska-label" for={scalarName}>{label}{required ? ' *' : ''}</label>
+    <select id={scalarName} name={scalarName} class="ska-input" required={required}>
+      {#if !required}
+        <option value="">{nullLabel}</option>
+      {/if}
+      {#each meta.options as opt (opt.id)}
+        <option value={opt.id} selected={String(opt.id) === String(currentValue ?? '')}>{opt.label}</option>
+      {/each}
+    </select>
+  </div>
+{/if}

package/dist/server/views/RelationSelect.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { AdminHandlerConfig } from '../handler.js';
+import type { RelationEdge } from '../introspection/relations.js';
+import type { RelationMeta } from './types.js';
+type $$ComponentProps = {
+    edge: RelationEdge;
+    meta: RelationMeta;
+    currentValue: unknown;
+    config: AdminHandlerConfig;
+};
+declare const RelationSelect: import("svelte").Component<$$ComponentProps, {}, "">;
+type RelationSelect = ReturnType<typeof RelationSelect>;
+export default RelationSelect;

package/dist/server/views/StatCard.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  let { value, label, icon }: { value: number; label: string; icon: 'models' | 'records' } =
+    $props();
+</script>
+
+<div class="ska-stat">
+  <div class="ska-stat__icon">
+    {#if icon === 'models'}
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/></svg>
+    {:else}
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></svg>
+    {/if}
+  </div>
+  <div>
+    <div class="ska-stat__value">{value}</div>
+    <div class="ska-stat__label">{label}</div>
+  </div>
+</div>

package/dist/server/views/StatCard.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    value: number;
+    label: string;
+    icon: 'models' | 'records';
+};
+declare const StatCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type StatCard = ReturnType<typeof StatCard>;
+export default StatCard;

package/dist/server/views/html.d.ts

@@ -0,0 +1,5 @@
+/** Primitives de rendu partagées par toutes les vues. */
+export declare function escapeHtml(str: string): string;
+export declare function toLabel(name: string): string;
+export declare function adjustColor(hex: string, percent: number): string;
+export declare function formatValue(value: any, type: string): string;

package/dist/server/views/html.js

@@ -0,0 +1,41 @@
+/** Primitives de rendu partagées par toutes les vues. */
+export function escapeHtml(str) {
+    return str
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+export function toLabel(name) {
+    return name.replace(/([A-Z])/g, ' $1').trim();
+}
+/** Couleur de repli, alignée sur le `primaryColor` par défaut du layout. */
+const DEFAULT_PRIMARY = '#6366f1';
+export function adjustColor(hex, percent) {
+    // Sans ce garde-fou, un hex invalide part en `parseInt(…, 16)` → NaN, que les
+    // décalages de bits ramènent à 0 : la fonction rendait '#000000' sans rien signaler.
+    if (!/^#?[0-9a-f]{6}$/i.test(hex))
+        return DEFAULT_PRIMARY;
+    const num = parseInt(hex.replace('#', ''), 16);
+    const amt = Math.round(2.55 * percent);
+    const R = Math.max(0, Math.min(255, (num >> 16) + amt));
+    const G = Math.max(0, Math.min(255, ((num >> 8) & 0x00FF) + amt));
+    const B = Math.max(0, Math.min(255, (num & 0x0000FF) + amt));
+    return `#${(0x1000000 + R * 0x10000 + G * 0x100 + B).toString(16).slice(1)}`;
+}
+export function formatValue(value, type) {
+    if (value === null || value === undefined)
+        return '<span style="color:#94a3b8">—</span>';
+    if (type === 'DateTime') {
+        return new Date(value).toLocaleString();
+    }
+    if (type === 'Boolean') {
+        return value ? '✓' : '✗';
+    }
+    const str = String(value);
+    if (str.length > 50) {
+        return escapeHtml(str.slice(0, 50)) + '...';
+    }
+    return escapeHtml(str);
+}

package/dist/server/views/theme.d.ts

@@ -0,0 +1 @@
+export declare function styles(primaryColor: string): string;