@svadmin/ui 0.46.0 → 0.48.0

package/dist/components/AppearanceSettings.svelte

@@ -1,187 +1,58 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-
   import { getTheme, setTheme, getColorTheme, setColorTheme, getColorPresets } from '@svadmin/core';
-  import * as Card from './ui/card/index.js';
-  import { Sun, Moon, Monitor, Check } from '@lucide/svelte';
+  import { Check, Monitor, Moon, Sun } from '@lucide/svelte';
+  import SettingsGroup from './content/SettingsGroup.svelte';
+  import SettingsFieldRow from './content/SettingsFieldRow.svelte';
 
   const i18n = useTranslation();
-
-  // Theme mode
   const themeOptions = [
     { value: 'light' as const, icon: Sun, label: 'settings.light' },
     { value: 'dark' as const, icon: Moon, label: 'settings.dark' },
     { value: 'system' as const, icon: Monitor, label: 'settings.systemTheme' },
   ];
-
   let currentTheme = $derived(getTheme());
   let currentColor = $derived(getColorTheme());
   let currentLocale = $derived(i18n.locale);
   const availableLocales = i18n.getAvailableLocales();
   const presets = getColorPresets();
-
-  // Sidebar density
   const DENSITY_KEY = 'svadmin-sidebar-density';
-  let density = $state<'compact' | 'standard'>(
-    (typeof window !== 'undefined' ? localStorage.getItem(DENSITY_KEY) : null) as 'compact' | 'standard' ?? 'standard'
-  );
-
-  function setDensity(d: 'compact' | 'standard') {
-    density = d;
-    if (typeof window !== 'undefined') {
-      localStorage.setItem(DENSITY_KEY, d);
-      window.dispatchEvent(new CustomEvent('svadmin-density-change', { detail: d }));
-    }
-  }
-
-  // Page size
+  let density = $state<'compact' | 'standard'>((typeof window !== 'undefined' ? localStorage.getItem(DENSITY_KEY) : null) as 'compact' | 'standard' ?? 'standard');
   const PAGE_SIZE_KEY = 'svadmin-default-page-size';
   const pageSizeOptions = [10, 20, 50];
-  let pageSize = $state<number>(
-    typeof window !== 'undefined' ? parseInt(localStorage.getItem(PAGE_SIZE_KEY) ?? '10', 10) : 10
-  );
-
-  function setPageSize(size: number) {
-    pageSize = size;
-    if (typeof window !== 'undefined') localStorage.setItem(PAGE_SIZE_KEY, String(size));
-  }
-
-  // Locale display names
-  const localeNames: Record<string, string> = {
-    'zh-CN': '中文（简体）',
-    'en': 'English',
-    'ja': '日本語',
-    'ko': '한국어',
-  };
+  let pageSize = $state(typeof window !== 'undefined' ? parseInt(localStorage.getItem(PAGE_SIZE_KEY) ?? '10', 10) : 10);
+  const localeNames: Record<string, string> = { 'zh-CN': '中文（简体）', en: 'English', ja: '日本語', ko: '한국어' };
+  function setDensity(value: 'compact' | 'standard') { density = value; if (typeof window !== 'undefined') { localStorage.setItem(DENSITY_KEY, value); window.dispatchEvent(new CustomEvent('svadmin-density-change', { detail: value })); } }
+  function setPageSize(size: number) { pageSize = size; if (typeof window !== 'undefined') localStorage.setItem(PAGE_SIZE_KEY, String(size)); }
 </script>
 
 <div class="space-y-6">
-  <div>
-    <h2 class="text-xl font-semibold text-foreground">{i18n.t('settings.appearance')}</h2>
-    <p class="text-sm text-muted-foreground mt-1">{i18n.t('settings.settingsDescription')}</p>
-  </div>
-
-  <!-- Theme Mode -->
-  <Card.Card>
-    <Card.CardHeader class="pb-3">
-      <Card.CardTitle class="text-base">{i18n.t('settings.themeMode')}</Card.CardTitle>
-    </Card.CardHeader>
-    <Card.CardContent>
-      <div class="grid grid-cols-3 gap-3">
-        {#each themeOptions as opt, _i (_i)}
-          {@const active = currentTheme === opt.value}
-          <button
-            class="relative flex flex-col items-center gap-2 rounded-xl border-2 p-4 transition-all duration-200
-              {active
-                ? 'border-primary bg-primary/5 shadow-sm'
-                : 'border-border hover:border-muted-foreground/30 hover:bg-accent/50'}"
-            onclick={() => setTheme(opt.value)}
-          >
-            {#if active}
-              <div class="absolute top-2 right-2">
-                <Check class="h-3.5 w-3.5 text-primary" />
-              </div>
-            {/if}
-            <div class="h-10 w-10 rounded-lg flex items-center justify-center
-              {active ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}">
-              <opt.icon class="h-5 w-5" />
-            </div>
-            <span class="text-xs font-medium {active ? 'text-primary' : 'text-muted-foreground'}">
-              {i18n.t(opt.label)}
-            </span>
-          </button>
-        {/each}
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-
-  <!-- Color Accent -->
-  <Card.Card>
-    <Card.CardHeader class="pb-3">
-      <Card.CardTitle class="text-base">{i18n.t('settings.colorAccent')}</Card.CardTitle>
-    </Card.CardHeader>
-    <Card.CardContent>
-      <div class="flex flex-wrap gap-3">
-        {#each presets as preset, _i (_i)}
-          {@const active = currentColor === preset.name}
-          <button
-            class="group relative h-9 w-9 rounded-full transition-all duration-200 hover:scale-110
-              {active ? 'ring-2 ring-offset-2 ring-offset-background scale-110' : 'opacity-70 hover:opacity-100'}"
-            style="background-color: {preset.color}; {active ? `--tw-ring-color: ${preset.color}` : ''}"
-            onclick={() => setColorTheme(preset.name as Parameters<typeof setColorTheme>[0])}
-            title={preset.label}
-          >
-            {#if active}
-              <Check class="h-4 w-4 text-white absolute inset-0 m-auto drop-shadow-sm" />
-            {/if}
-          </button>
-        {/each}
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-
-  <!-- Interface -->
-  <Card.Card>
-    <Card.CardHeader class="pb-3">
-      <Card.CardTitle class="text-base">{i18n.t('settings.interface')}</Card.CardTitle>
-    </Card.CardHeader>
-    <Card.CardContent class="space-y-5">
-      <!-- Language -->
-      <div class="flex items-center justify-between">
-        <div>
-          <p class="text-sm font-medium text-foreground">{i18n.t('settings.language')}</p>
-          <p class="text-xs text-muted-foreground">{localeNames[currentLocale] ?? currentLocale}</p>
-        </div>
-        <select
-          class="h-9 rounded-md border border-input bg-background px-3 text-sm ring-offset-background
-            focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
-          value={currentLocale}
-          onchange={(e) => i18n.setLocale((e.target as HTMLSelectElement).value)}
-        >
-          {#each availableLocales as loc, _i (_i)}
-            <option value={loc}>{localeNames[loc] ?? loc}</option>
-          {/each}
-        </select>
-      </div>
-
-      <div class="h-px bg-border"></div>
-
-      <!-- Sidebar Density -->
-      <div class="flex items-center justify-between">
-        <div>
-          <p class="text-sm font-medium text-foreground">{i18n.t('settings.sidebarDensity')}</p>
-        </div>
-        <div class="flex rounded-lg border border-input overflow-hidden">
-          <button
-            class="px-3 py-1.5 text-xs font-medium transition-colors
-              {density === 'compact' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
-            onclick={() => setDensity('compact')}
-          >{i18n.t('settings.compact')}</button>
-          <button
-            class="px-3 py-1.5 text-xs font-medium transition-colors
-              {density === 'standard' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
-            onclick={() => setDensity('standard')}
-          >{i18n.t('settings.standard')}</button>
-        </div>
-      </div>
-
-      <div class="h-px bg-border"></div>
-
-      <!-- Default Page Size -->
-      <div class="flex items-center justify-between">
-        <div>
-          <p class="text-sm font-medium text-foreground">{i18n.t('settings.defaultPageSize')}</p>
-        </div>
-        <div class="flex rounded-lg border border-input overflow-hidden">
-          {#each pageSizeOptions as size, _i (_i)}
-            <button
-              class="px-3 py-1.5 text-xs font-mono font-medium transition-colors
-                {pageSize === size ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
-              onclick={() => setPageSize(size)}
-            >{size}</button>
-          {/each}
-        </div>
-      </div>
-    </Card.CardContent>
-  </Card.Card>
+  <div><h2 class="text-xl font-semibold text-foreground">{i18n.t('settings.appearance')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('settings.settingsDescription')}</p></div>
+  <SettingsGroup title={i18n.t('settings.themeMode')}>
+    <div class="grid grid-cols-3 gap-3">
+      {#each themeOptions as option (option.value)}
+        {@const active = currentTheme === option.value}
+        <button class="relative flex min-w-0 flex-col items-center gap-2 rounded-lg border p-4 transition-colors {active ? 'border-primary bg-primary/5' : 'border-border hover:bg-accent/50'}" onclick={() => setTheme(option.value)} aria-pressed={active}>
+          {#if active}<Check class="absolute right-2 top-2 size-3.5 text-primary" />{/if}
+          <span class="flex size-10 items-center justify-center rounded-md {active ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}"><option.icon class="size-5" /></span>
+          <span class="truncate text-xs font-medium {active ? 'text-primary' : 'text-muted-foreground'}">{i18n.t(option.label)}</span>
+        </button>
+      {/each}
+    </div>
+  </SettingsGroup>
+  <SettingsGroup title={i18n.t('settings.colorAccent')}>
+    <div class="flex flex-wrap gap-3">
+      {#each presets as preset (preset.name)}
+        {@const active = currentColor === preset.name}
+        <button class="relative size-9 rounded-full border border-border transition-opacity {active ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : 'opacity-70 hover:opacity-100'}" style="background-color: {preset.color}" onclick={() => setColorTheme(preset.name as Parameters<typeof setColorTheme>[0])} aria-label={preset.label} aria-pressed={active}>{#if active}<Check class="absolute inset-0 m-auto size-4 text-white drop-shadow-sm" />{/if}</button>
+      {/each}
+    </div>
+  </SettingsGroup>
+  <SettingsGroup title={i18n.t('settings.interface')}>
+    <div class="divide-y divide-border">
+      <SettingsFieldRow label={i18n.t('settings.language')} description={localeNames[currentLocale] ?? currentLocale}>{#snippet control()}<select class="h-9 max-w-44 rounded-md border border-input bg-background px-3 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" value={currentLocale} onchange={(event) => i18n.setLocale((event.target as HTMLSelectElement).value)}>{#each availableLocales as locale (locale)}<option value={locale}>{localeNames[locale] ?? locale}</option>{/each}</select>{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow label={i18n.t('settings.sidebarDensity')}>{#snippet control()}<div class="flex overflow-hidden rounded-md border border-input"><button class="px-3 py-1.5 text-xs font-medium {density === 'compact' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}" onclick={() => setDensity('compact')}>{i18n.t('settings.compact')}</button><button class="px-3 py-1.5 text-xs font-medium {density === 'standard' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}" onclick={() => setDensity('standard')}>{i18n.t('settings.standard')}</button></div>{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow label={i18n.t('settings.defaultPageSize')}>{#snippet control()}<div class="flex overflow-hidden rounded-md border border-input">{#each pageSizeOptions as size (size)}<button class="px-3 py-1.5 font-mono text-xs font-medium {pageSize === size ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}" onclick={() => setPageSize(size)}>{size}</button>{/each}</div>{/snippet}</SettingsFieldRow>
+    </div>
+  </SettingsGroup>
 </div>

package/dist/components/AutoForm.svelte

@@ -91,11 +91,25 @@
 
   // ─── Submission error (non-field, e.g. network error) ─────────────
   let submitError = $state<string | null>(null);
+  let formElement = $state.raw<HTMLFormElement>();
+
+  function fieldErrorId(fieldKey: string): string {
+    return `${resourceName}-${fieldKey}-error`;
+  }
+
+  function focusFirstInvalidField(): void {
+    const firstInvalid = formElement?.querySelector<HTMLElement>('[aria-invalid="true"]');
+    firstInvalid?.focus();
+  }
 
   async function handleSubmit() {
     submitError = null;
     try {
       await form.submit();
+      if (Object.keys(form.errors).length > 0) {
+        queueMicrotask(focusFirstInvalidField);
+        return;
+      }
       onSuccess?.();
     } catch (e) {
       submitError = e instanceof Error ? e.message : i18n.t('common.operationFailed');
@@ -164,7 +178,7 @@
       </div>
     </div>
   {:else}
-    <form onsubmit={(e: Event) => { e.preventDefault(); handleSubmit(); }} class="max-w-3xl space-y-6">
+    <form bind:this={formElement} onsubmit={(e: Event) => { e.preventDefault(); handleSubmit(); }} class="max-w-3xl space-y-6" novalidate>
       {#if submitError}
         <div transition:slide={{ duration: 300, axis: 'y' }} class="svadmin-shake">
           <Alert.Root variant="destructive">
@@ -192,11 +206,13 @@
                       {field}
                       value={form.values[field.key]}
                       onchange={(val: unknown) => form.setFieldValue(field.key, val)}
+                      invalid={!!form.errors[field.key]}
+                      errorId={form.errors[field.key] ? fieldErrorId(field.key) : undefined}
                       disabled={isReadonly}
                     />
                   {/if}
                   {#if form.errors[field.key]}
-                    <p class="text-destructive text-[0.8125rem] mt-1" role="alert" aria-live="polite">{form.errors[field.key]}</p>
+                    <p id={fieldErrorId(field.key)} class="text-destructive text-[0.8125rem] mt-1" role="alert" aria-live="polite">{form.errors[field.key]}</p>
                   {/if}
                 </div>
               {/each}
@@ -215,11 +231,13 @@
                     {field}
                     value={form.values[field.key]}
                     onchange={(val: unknown) => form.setFieldValue(field.key, val)}
+                    invalid={!!form.errors[field.key]}
+                    errorId={form.errors[field.key] ? fieldErrorId(field.key) : undefined}
                     disabled={isReadonly}
                   />
                 {/if}
                 {#if form.errors[field.key]}
-                  <p class="text-destructive text-[0.8125rem] mt-1" role="alert" aria-live="polite">{form.errors[field.key]}</p>
+                  <p id={fieldErrorId(field.key)} class="text-destructive text-[0.8125rem] mt-1" role="alert" aria-live="polite">{form.errors[field.key]}</p>
                 {/if}
               </div>
             {/each}

package/dist/components/DetailDrawer.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '../utils.js';
+  import * as Sheet from './ui/sheet/index.js';
+
+  type Props = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    side?: 'left' | 'right';
+    width?: string;
+    onClose?: () => void;
+    children?: Snippet;
+    footer?: Snippet;
+  };
+
+  let {
+    open = $bindable(false),
+    title = '',
+    description = '',
+    side = 'right',
+    width = 'max-w-md w-full sm:max-w-lg',
+    ref = $bindable(null),
+    class: className,
+    'aria-label': ariaLabel,
+    onClose,
+    children,
+    footer,
+    ...restProps
+  }: Props = $props();
+
+  function handleClose() {
+    open = false;
+    onClose?.();
+  }
+</script>
+
+<Sheet.Root
+  bind:ref
+  bind:open
+  {side}
+  onClose={handleClose}
+  class={cn('overflow-y-auto', width, className)}
+  role="dialog"
+  aria-modal="true"
+  aria-label={ariaLabel || title || 'Details'}
+  {...restProps}
+>
+  <Sheet.Content class="flex h-full flex-col">
+    {#if title || description}
+      <Sheet.Header>
+        {#if title}
+          <Sheet.Title>{title}</Sheet.Title>
+        {/if}
+        {#if description}
+          <Sheet.Description>{description}</Sheet.Description>
+        {/if}
+      </Sheet.Header>
+    {/if}
+
+    <div class="flex-1 overflow-y-auto py-2">
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+
+    {#if footer}
+      <Sheet.Footer>
+        {@render footer()}
+      </Sheet.Footer>
+    {/if}
+  </Sheet.Content>
+</Sheet.Root>

package/dist/components/DetailDrawer.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+type Props = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    side?: 'left' | 'right';
+    width?: string;
+    onClose?: () => void;
+    children?: Snippet;
+    footer?: Snippet;
+};
+declare const DetailDrawer: import("svelte").Component<Props, {}, "open" | "ref">;
+type DetailDrawer = ReturnType<typeof DetailDrawer>;
+export default DetailDrawer;