sveltekit-admin 0.8.1 → 0.9.0

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

@@ -2,6 +2,7 @@ import type { AdminHandlerConfig } from '../handler.js';
 import type { ViewModel, ListRecordAction, FkFilterMeta } from './types.js';
 import type { ListQuery } from '../query/listQuery.js';
 import type { ResolvedFilterField } from '../query/filterDetection.js';
+import type { SortState } from '../query/sortQuery.js';
 type $$ComponentProps = {
     model: ViewModel;
     items: any[];
@@ -20,6 +21,10 @@ type $$ComponentProps = {
     listFilters?: ResolvedFilterField[];
     /** Métadonnées async (options scopées + label actif) pour les filtres FK configurés. */
     fkFilterMeta?: Map<string, FkFilterMeta>;
+    /** Tri actif + drapeau « colonne refusée ». Absent = en-têtes non cliquables. */
+    sort?: SortState;
+    /** Tailles de page proposées. Vide/absent = pas de sélecteur. */
+    pageSizes?: number[];
     recordActions?: ListRecordAction[];
 };
 declare const List: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/server/views/RelationCheckboxes.svelte

@@ -1,19 +1,33 @@
 <script lang="ts">
   import type { RelationEdge } from '../introspection/relations.js';
   import type { RelationMeta } from './types.js';
-  import { toLabel } from './html.js';
+  import { toLabel, fieldErrorAttrs } from './html.js';
 
   let {
     edge,
-    meta
+    meta,
+    submittedIds,
+    errorMessage
   }: {
     edge: RelationEdge;
     meta: RelationMeta;
+    /**
+     * IDs cochés au dernier POST, quand la mutation a échoué. Un tableau vide
+     * dit « tout décoché » et doit gagner sur `meta.selectedIds` ; `undefined`
+     * dit « pas un re-rendu d'erreur ». C'est la même distinction que le
+     * sentinelle `__rel_present__` côté écriture.
+     */
+    submittedIds?: string[];
+    /** Défini seulement si c'est cette relation que l'erreur désigne. */
+    errorMessage?: string;
   } = $props();
 
   const label = $derived(toLabel(edge.field));
   const inputName = $derived(`__rel__${edge.field}`);
-  const selected = $derived(new Set((meta.selectedIds ?? []).map(String)));
+  const selected = $derived(
+    new Set((submittedIds ?? meta.selectedIds ?? []).map(String))
+  );
+  const err = $derived(fieldErrorAttrs(inputName, errorMessage));
 </script>
 
 <!--
@@ -29,13 +43,18 @@
   <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" />
+    <input id={inputName} type="text" name={inputName} value={[...selected].join(',')} class="ska-input" aria-invalid={err.ariaInvalid} aria-describedby={err.describedBy} />
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -- fieldErrorAttrs échappe l'id et le message -->
+    {@html err.html}
   </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">
+    <!-- Pas d'`aria-invalid` ici : l'attribut n'est pas permis sur le rôle
+         `group` implicite d'un `<fieldset>`. Le rattachement du message se fait
+         par `aria-describedby` seul, qui l'est. -->
+    <fieldset id={inputName} class="ska-checkbox-group" aria-describedby={err.describedBy}>
       {#each meta.options as opt (opt.id)}
         <label class="ska-checkbox-wrap">
           <input
@@ -49,5 +68,7 @@
         </label>
       {/each}
     </fieldset>
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -- fieldErrorAttrs échappe l'id et le message -->
+    {@html err.html}
   </div>
 {/if}

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

@@ -3,6 +3,15 @@ import type { RelationMeta } from './types.js';
 type $$ComponentProps = {
     edge: RelationEdge;
     meta: RelationMeta;
+    /**
+     * IDs cochés au dernier POST, quand la mutation a échoué. Un tableau vide
+     * dit « tout décoché » et doit gagner sur `meta.selectedIds` ; `undefined`
+     * dit « pas un re-rendu d'erreur ». C'est la même distinction que le
+     * sentinelle `__rel_present__` côté écriture.
+     */
+    submittedIds?: string[];
+    /** Défini seulement si c'est cette relation que l'erreur désigne. */
+    errorMessage?: string;
 };
 declare const RelationCheckboxes: import("svelte").Component<$$ComponentProps, {}, "">;
 type RelationCheckboxes = ReturnType<typeof RelationCheckboxes>;

package/dist/server/views/RelationSelect.svelte

@@ -2,18 +2,21 @@
   import type { AdminHandlerConfig } from '../handler.js';
   import type { RelationEdge } from '../introspection/relations.js';
   import type { RelationMeta } from './types.js';
-  import { toLabel } from './html.js';
+  import { toLabel, fieldErrorAttrs } from './html.js';
 
   let {
     edge,
     meta,
     currentValue,
-    config
+    config,
+    errorMessage
   }: {
     edge: RelationEdge;
     meta: RelationMeta;
     currentValue: unknown;
     config: AdminHandlerConfig;
+    /** Défini seulement si c'est cette relation que l'erreur désigne. */
+    errorMessage?: string;
   } = $props();
 
   const relConfig = $derived(config.models?.[edge.model]?.relations?.[edge.field]);
@@ -23,6 +26,8 @@
   // 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]);
+  // Rattaché au scalaire : c'est lui qui porte l'`id` et le `name` du widget.
+  const err = $derived(fieldErrorAttrs(scalarName, errorMessage));
 </script>
 
 {#if meta.tooMany}
@@ -36,12 +41,16 @@
       value={currentValue ?? ''}
       class="ska-input"
       required={required}
+      aria-invalid={err.ariaInvalid}
+      aria-describedby={err.describedBy}
     />
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -- fieldErrorAttrs échappe l'id et le message -->
+    {@html err.html}
   </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}>
+    <select id={scalarName} name={scalarName} class="ska-input" required={required} aria-invalid={err.ariaInvalid} aria-describedby={err.describedBy}>
       {#if !required}
         <option value="">{nullLabel}</option>
       {/if}
@@ -49,5 +58,7 @@
         <option value={opt.id} selected={String(opt.id) === String(currentValue ?? '')}>{opt.label}</option>
       {/each}
     </select>
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -- fieldErrorAttrs échappe l'id et le message -->
+    {@html err.html}
   </div>
 {/if}

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

@@ -6,6 +6,8 @@ type $$ComponentProps = {
     meta: RelationMeta;
     currentValue: unknown;
     config: AdminHandlerConfig;
+    /** Défini seulement si c'est cette relation que l'erreur désigne. */
+    errorMessage?: string;
 };
 declare const RelationSelect: import("svelte").Component<$$ComponentProps, {}, "">;
 type RelationSelect = ReturnType<typeof RelationSelect>;

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

@@ -3,3 +3,22 @@ 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;
+/**
+ * Markup du message d'erreur d'un champ, et les attributs qui l'y rattachent.
+ *
+ * Rendu comme une chaîne passée à `{@html}` plutôt qu'en `{#if}` : la SSR de
+ * Svelte 5 pose de toute façon un commentaire de frontière autour des deux, et
+ * les deux coûtent la même chose sur un formulaire sans erreur (mesuré : 18
+ * octets par champ pour `{@html}`, 19 pour `{#if}`). Le `{@html}` est retenu
+ * pour la cohérence avec `recordActionsHtml` dans `Form.svelte`, qui documente
+ * déjà ce compromis, et parce qu'il garde l'échappement explicite ici plutôt
+ * que réparti dans quatre branches de gabarit.
+ *
+ * `inputId` doit être l'`id` du champ décrit : c'est lui qui fabrique la cible
+ * d'`aria-describedby`.
+ */
+export declare function fieldErrorAttrs(inputId: string, message: string | undefined): {
+    ariaInvalid: 'true' | undefined;
+    describedBy: string | undefined;
+    html: string;
+};

package/dist/server/views/html.js

@@ -39,3 +39,28 @@ export function formatValue(value, type) {
     }
     return escapeHtml(str);
 }
+/**
+ * Markup du message d'erreur d'un champ, et les attributs qui l'y rattachent.
+ *
+ * Rendu comme une chaîne passée à `{@html}` plutôt qu'en `{#if}` : la SSR de
+ * Svelte 5 pose de toute façon un commentaire de frontière autour des deux, et
+ * les deux coûtent la même chose sur un formulaire sans erreur (mesuré : 18
+ * octets par champ pour `{@html}`, 19 pour `{#if}`). Le `{@html}` est retenu
+ * pour la cohérence avec `recordActionsHtml` dans `Form.svelte`, qui documente
+ * déjà ce compromis, et parce qu'il garde l'échappement explicite ici plutôt
+ * que réparti dans quatre branches de gabarit.
+ *
+ * `inputId` doit être l'`id` du champ décrit : c'est lui qui fabrique la cible
+ * d'`aria-describedby`.
+ */
+export function fieldErrorAttrs(inputId, message) {
+    if (message === undefined) {
+        return { ariaInvalid: undefined, describedBy: undefined, html: '' };
+    }
+    const errorId = `${inputId}-error`;
+    return {
+        ariaInvalid: 'true',
+        describedBy: errorId,
+        html: `<p class="ska-field__error" id="${escapeHtml(errorId)}">${escapeHtml(message)}</p>`
+    };
+}

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

@@ -0,0 +1,9 @@
+/**
+ * Fenêtre de numéros de page : « 1 … 8 9 [10] 11 12 … 20 ».
+ *
+ * Pure, et volontairement hors du composant : les cas limites (premiers et
+ * derniers écrans, trous d'une seule page) se testent sur des nombres plutôt
+ * qu'en fouillant du HTML.
+ */
+export type PageEntry = number | 'gap';
+export declare function paginationWindow(page: number, totalPages: number): PageEntry[];

package/dist/server/views/pagination.js

@@ -0,0 +1,31 @@
+/**
+ * Fenêtre de numéros de page : « 1 … 8 9 [10] 11 12 … 20 ».
+ *
+ * Pure, et volontairement hors du composant : les cas limites (premiers et
+ * derniers écrans, trous d'une seule page) se testent sur des nombres plutôt
+ * qu'en fouillant du HTML.
+ */
+/** Nombre de pages affichées de part et d'autre de la page courante. */
+const SPAN = 2;
+export function paginationWindow(page, totalPages) {
+    if (totalPages <= 1)
+        return [];
+    const first = 1;
+    const last = totalPages;
+    const from = Math.max(first, page - SPAN);
+    const to = Math.min(last, page + SPAN);
+    const entries = [];
+    for (let n = from; n <= to; n++)
+        entries.push(n);
+    // Un trou qui ne cacherait qu'une seule page ne gagne aucune place et coûte
+    // un clic : on montre la page à la place. D'où la comparaison à 1 et non 0.
+    if (from - first > 1)
+        entries.unshift(first, 'gap');
+    else if (from > first)
+        entries.unshift(first);
+    if (last - to > 1)
+        entries.push('gap', last);
+    else if (to < last)
+        entries.push(last);
+    return entries;
+}

package/dist/server/views/theme.js

@@ -182,6 +182,45 @@ export function styles(primaryColor) {
       letter-spacing: 0.05em;
     }
 
+    .ska-pagination__pages {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      flex-wrap: wrap;
+    }
+    .ska-pagination__gap { padding: 0 0.25rem; color: #64748b; }
+    .ska-bulk { margin-bottom: 0.75rem; }
+    .ska-table__select { width: 2.5rem; text-align: center; }
+    .ska-alert--success {
+      background: #f0fdf4;
+      border-color: #bbf7d0;
+      color: #166534;
+    }
+    .ska-pagination__sizes {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      flex-wrap: wrap;
+    }
+    .ska-pagination__current {
+      background: var(--ska-primary);
+      color: #fff;
+      border-color: var(--ska-primary);
+      cursor: default;
+    }
+    .ska-table th a.ska-th-sort {
+      color: inherit;
+      text-decoration: none;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+    }
+    .ska-table th a.ska-th-sort:hover { text-decoration: underline; }
+    .ska-table th a.ska-th-sort:focus-visible {
+      outline: 2px solid var(--ska-primary);
+      outline-offset: 2px;
+      border-radius: 2px;
+    }
     .ska-table td {
       padding: 0.75rem 1rem;
       border-bottom: 1px solid #e2e8f0;
@@ -220,10 +259,15 @@ export function styles(primaryColor) {
       transition: all 0.15s;
     }
 
-    .ska-input:focus {
-      outline: none;
+    /* 'outline: none' remplacé par un box-shadow à 10 % d'opacité donnait un
+       contraste d'environ 1,1:1 contre le fond blanc — soit, en pratique, aucun
+       indicateur de focus. Le contour reprend la couleur de marque, qui est
+       elle contrastée, et le box-shadow ne fait plus que l'accompagner. */
+    .ska-input:focus-visible {
+      outline: 2px solid var(--ska-primary);
+      outline-offset: 1px;
       border-color: var(--ska-primary);
-      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
     }
 
     .ska-input[readonly] {
@@ -231,6 +275,25 @@ export function styles(primaryColor) {
       color: #6b7280;
     }
 
+    /* Sélecteur d'attribut et non une classe : aria-invalid est déjà la source
+       de vérité pour les lecteurs d'écran, une classe parallèle finirait par en
+       diverger. */
+    .ska-input[aria-invalid='true'] {
+      border-color: #dc2626;
+    }
+
+    .ska-input[aria-invalid='true']:focus-visible {
+      outline-color: #dc2626;
+      border-color: #dc2626;
+      box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
+    }
+
+    .ska-field__error {
+      margin-top: 0.375rem;
+      font-size: 0.8125rem;
+      color: #b91c1c;
+    }
+
     .ska-checkbox-wrap {
       display: flex;
       align-items: center;
@@ -533,5 +596,86 @@ export function styles(primaryColor) {
       color: #16a34a;
       border: 1px solid #bbf7d0;
     }
+
+    /* Hors flux tant qu'il n'est pas ciblé : 'display: none' le retirerait de
+       l'ordre de tabulation, ce qui le rendrait inatteignable — donc inutile. */
+    .ska-skip {
+      position: absolute;
+      left: -9999px;
+      top: 0;
+      background: var(--ska-primary);
+      color: #fff;
+      padding: 0.625rem 1rem;
+      border-radius: 0 0 0.375rem 0;
+      z-index: 100;
+    }
+
+    .ska-skip:focus {
+      left: 0;
+    }
+
+    /* Un seul contour, de la couleur de marque, sur tout ce qui prend le focus.
+       'focus-visible' et non 'focus' : le contour apparaît au clavier sans
+       s'afficher au clic à la souris. La cible du lien d'évitement porte
+       tabindex="-1" pour être focusable par programme, mais elle ne doit pas
+       dessiner de contour pour autant. */
+    .ska-btn:focus-visible,
+    .ska-nav__link:focus-visible,
+    .ska-logo:focus-visible,
+    .ska-back:focus-visible,
+    .ska-checkbox:focus-visible,
+    .ska-logout__btn:focus-visible,
+    .ska-skip:focus-visible {
+      outline: 2px solid var(--ska-primary);
+      outline-offset: 2px;
+    }
+
+    .ska-main:focus-visible { outline: none; }
+
+    /* La sidebar était fixe à 260px et le contenu décalé d'autant : sur un
+       écran de 375px il restait 115px utilisables. Elle repasse dans le flux et
+       la navigation devient horizontale. */
+    @media (max-width: 900px) {
+      .ska-layout { flex-direction: column; }
+
+      .ska-sidebar {
+        position: static;
+        width: auto;
+        height: auto;
+        border-right: none;
+        border-bottom: 1px solid #e2e8f0;
+        padding: 1rem;
+      }
+
+      .ska-nav {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.25rem;
+      }
+
+      .ska-nav__item { margin-bottom: 0; }
+
+      .ska-main {
+        margin-left: 0;
+        padding: 1rem;
+      }
+
+      .ska-header {
+        flex-direction: column;
+        gap: 0.75rem;
+      }
+
+      .ska-form { max-width: none; }
+    }
+
+    /* Cinq 'transition: all' vivent dans cette feuille. Le réglage système est
+       une demande explicite, pas une préférence esthétique. */
+    @media (prefers-reduced-motion: reduce) {
+      * {
+        transition-duration: 0.01ms !important;
+        animation-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+      }
+    }
   `;
 }

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

@@ -16,6 +16,13 @@ export interface ViewModel {
     label: string;
     fields: PrismaField[];
     primaryKey: string;
+    /**
+     * Valeurs déclarées de chaque enum du schéma, indexées par nom de type.
+     * Portées par le ViewModel plutôt que passées à part comme le fait
+     * `filterDetection` : le formulaire résout un enum champ par champ, et un
+     * second chemin d'acheminement vers les mêmes valeurs finirait par diverger.
+     */
+    enums?: Map<string, string[]>;
     relationGraph?: RelationGraph;
     /** Options résolues pour chaque arête to-one-owning, indexées par "Model.field" */
     relationOptions?: Map<string, RelationMeta>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-admin",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "Django-like admin panel for SvelteKit + Prisma",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -89,6 +89,7 @@
     "build": "pnpm run package",
     "package": "svelte-kit sync && svelte-package -o dist",
     "size": "pnpm run package && node scripts/package-size.mjs",
+    "smoke:packaged": "node scripts/consumer-smoke.mjs",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test:gen": "prisma generate --schema tests/fixtures/prisma/schema.prisma",