@svadmin/ui 0.5.4 → 0.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.5.4",
+  "version": "0.5.9",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [

package/src/app.css

@@ -1,3 +1,6 @@
+/* Typography — Inter font via Bunny Fonts (global CDN, works in China) */
+@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap');
+
 /* @svadmin/ui — Design Tokens (Shadcn New York style)
  * Auto-imported by AdminApp. Can be overridden by consumer's CSS.
  *
@@ -12,8 +15,8 @@
 /* Auto-register svadmin source files for Tailwind 4 content scanning.
  * This ensures all utility classes used in @svadmin/ui and @svadmin/core
  * components are generated without manual @source in consumer projects. */
-@source "./**/*.{svelte,ts,js}";
-@source "../../core/src/**/*.{svelte,ts,js}";
+@source "@svadmin/ui/src/**/*.{svelte,ts,js}";
+@source "@svadmin/core/src/**/*.{svelte,ts,js}";
 
 @layer base {
   :root {
@@ -86,10 +89,25 @@
     --sidebar-border: oklch(1 0 0 / 10%);
     --sidebar-ring: oklch(0.556 0 0);
   }
-}
 
-/* Typography — Inter font via Bunny Fonts (global CDN, works in China) */
-@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap');
+  /* Emulate new-york style shadows on inputs and buttons */
+  [data-slot="button"],
+  [data-slot="input"],
+  [data-slot="select-trigger"],
+  [data-slot="select"],
+  [data-slot="textarea"] {
+    @apply shadow-sm;
+  }
+  
+  [data-slot="card"] {
+    @apply shadow-sm;
+  }
+
+  [data-slot="dialog-content"],
+  [data-slot="sheet-content"] {
+    @apply shadow-lg;
+  }
+}
 
 body {
   font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;

package/src/components/ComboboxField.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { t } from '@svadmin/core/i18n';
   import { useSelect } from '@svadmin/core';
   import type { Filter } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
@@ -57,7 +58,8 @@
     onchange?.(null);
   }
 
-  function handleSearchInput(v: string) {
+  function handleSearchInput(e: Event) {
+    const v = (e.currentTarget as HTMLInputElement).value;
     searchInputValue = v;
     onSearchChange(v);
   }
@@ -88,8 +90,8 @@
           <div class="flex items-center border-b px-2">
             <Search class="mr-1.5 h-3.5 w-3.5 shrink-0 opacity-50" />
             <Command.Input
-              value={searchInputValue}
-              onValueChange={handleSearchInput}
+              bind:value={searchInputValue}
+              oninput={handleSearchInput}
               placeholder="Search..."
               class="flex h-9 w-full bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground"
             />

package/src/components/ConfirmDialog.svelte

@@ -3,10 +3,10 @@
   import { Button } from './ui/button/index.js';
   import { t } from '@svadmin/core/i18n';
 
-  let { open = false, title, message = '',
+  let { open = $bindable(false), title, message = '',
     confirmText, cancelText, variant = 'danger',
     onconfirm, oncancel } = $props<{
-    open: boolean;
+    open?: boolean;
     title?: string;
     message?: string;
     confirmText?: string;

package/src/components/EditPage.svelte

@@ -67,5 +67,6 @@
 <ConfirmDialog
   bind:open={confirmOpen}
   title={t('common.deleteConfirm')}
-  onConfirm={handleDelete}
+  onconfirm={handleDelete}
+  oncancel={() => confirmOpen = false}
 />

package/src/components/FieldRenderer.svelte

@@ -220,7 +220,7 @@
     {#if multiVal.length > 0}
       <div class="flex flex-wrap gap-1 mt-1">
         {#each multiVal as v}
-          {@const label = field.options?.find(o => o.value === v)?.label ?? String(v)}
+          {@const label = field.options?.find((o: any) => o.value === v)?.label ?? String(v)}
           <Badge variant="secondary" class="gap-1">
             {label}
             <button type="button" onclick={() => toggleMulti(v)} class="ml-0.5 rounded-sm hover:text-destructive hover:bg-destructive/10 transition-colors" aria-label={t('common.clear')}>×</button>

package/src/components/PasswordInput.svelte

@@ -63,7 +63,7 @@
       {placeholder}
       bind:value
       class="pl-9 pr-9"
-      {autocomplete}
+      autocomplete={autocomplete as any}
     />
     <TooltipButton
       tooltip={showPassword ? 'Hide password' : 'Show password'}

package/src/components/Sidebar.svelte

@@ -244,7 +244,7 @@
             </Button>
           {/snippet}
         </DropdownMenu.Trigger>
-        <DropdownMenu.Content side="right" align="end" class="w-40">
+        <DropdownMenu.Content align="end" class="w-40">
           {#each colorThemes as ct}
             <DropdownMenu.Item onclick={() => setColorTheme(ct.id)} class="gap-2">
               <span

package/src/components/StepsForm.svelte

@@ -2,7 +2,7 @@
   import { fly } from 'svelte/transition';
   import { useStepsForm } from '@svadmin/core';
   import type { FieldDefinition } from '@svadmin/core';
-  import { getResource } from '@svadmin/core';
+  import { getResource, useOne } from '@svadmin/core';
   import { navigate } from '@svadmin/core/router';
   import { t } from '@svadmin/core/i18n';
   import { Button } from './ui/button/index.js';
@@ -49,13 +49,88 @@
       .filter((f): f is FieldDefinition => f != null && f.key !== primaryKey) ?? []
   );
 
+  const flatStepsFields = steps.flatMap(s => s.fields)
+    .map(key => resource.fields.find(f => f.key === key))
+    .filter((f): f is FieldDefinition => f != null);
+
+  const existingQuery = mode === 'edit' && id != null 
+    ? stepsForm.query as { data?: { data: Record<string, unknown> }, isLoading: boolean } 
+    : null;
+
+  let formData = $state<Record<string, unknown>>({});
+  let fieldErrors = $state<Record<string, string>>({});
+  let initialized = $state(false);
+
+  function getDefaultForType(field: FieldDefinition): unknown {
+    switch (field.type) {
+      case 'text': case 'textarea': case 'richtext': case 'image': return '';
+      case 'number': return 0;
+      case 'boolean': return false;
+      case 'tags': case 'images': case 'multiselect': return [];
+      case 'select': return field.options?.[0]?.value ?? '';
+      case 'json': return {};
+      default: return '';
+    }
+  }
+
+  $effect.pre(() => {
+    if (initialized) return;
+    if (mode === 'create') {
+      const defaults: Record<string, unknown> = {};
+      for (const field of flatStepsFields) {
+        defaults[field.key] = field.defaultValue ?? getDefaultForType(field);
+      }
+      formData = defaults;
+      initialized = true;
+    } else if (existingQuery && existingQuery.data?.data) {
+      formData = { ...existingQuery.data.data };
+      initialized = true;
+    }
+  });
+
+  function handleFieldChange(key: string, val: unknown) {
+    formData[key] = val;
+    if (fieldErrors[key]) delete fieldErrors[key];
+  }
+
+  function validateCurrentStep(): boolean {
+    const errors: Record<string, string> = {};
+    let valid = true;
+    for (const field of currentFields) {
+      const value = formData[field.key];
+      if (field.required && (value === undefined || value === null || value === '')) {
+        errors[field.key] = t('validation.required');
+        valid = false;
+      } else if (field.validate) {
+        const msg = field.validate(value);
+        if (msg) {
+          errors[field.key] = msg;
+          valid = false;
+        }
+      }
+    }
+    fieldErrors = errors;
+    return valid;
+  }
+
   function handleSubmit() {
+    if (!validateCurrentStep()) return;
+    
     if (!isLastStep) {
       next();
       return;
     }
-    stepsForm.onFinish(stepsForm.formValues);
+    
+    const cleanData: Record<string, unknown> = {};
+    for (const field of flatStepsFields) {
+      const value = formData[field.key];
+      if (value !== undefined) cleanData[field.key] = value;
+    }
+    
+    stepsForm.onFinish(cleanData, { redirect: 'list' });
   }
+
+  const isLoadingData = $derived(mode === 'edit' && !initialized);
 </script>
 
 <div class="space-y-6">
@@ -103,12 +178,15 @@
     <Card.CardContent>
       {#key currentStep}
         <form class="space-y-5" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} in:fly={{ x: 30, duration: 250 }}>
-        {#each currentFields as field}
+        {#each currentFields as field (field.key)}
           <FieldRenderer
             {field}
-            value={stepsForm.formValues[field.key]}
-            onchange={(v) => stepsForm.setFieldValue(field.key, v)}
+            value={formData[field.key]}
+            onchange={(v) => handleFieldChange(field.key, v)}
           />
+          {#if fieldErrors[field.key]}
+            <p class="text-destructive text-[0.8125rem] mt-1">{fieldErrors[field.key]}</p>
+          {/if}
         {/each}
 
         <div class="flex items-center justify-between pt-4">

package/src/components/fieldComponentMap.ts

@@ -5,12 +5,12 @@
 import type { Component } from 'svelte';
 
 export interface FieldComponentMap {
-  [fieldType: string]: Component<Record<string, unknown>>;
+  [fieldType: string]: Component<any>;
 }
 
 // Default display component map (read-only field display)
 // Dynamically imports components only when first used
-const displayCache = new Map<string, Component<Record<string, unknown>>>();
+const displayCache = new Map<string, Component<any>>();
 
 // Pre-import all field display components (tree-shaken by bundler)
 import BooleanField from './fields/BooleanField.svelte';
@@ -52,13 +52,13 @@ export const builtinDisplayComponents: FieldComponentMap = {
 // ─── Custom component registry ─────────────────────────────────
 // Users can register custom field display components at runtime
 
-const customDisplayComponents = new Map<string, Component<Record<string, unknown>>>();
+const customDisplayComponents = new Map<string, Component<any>>();
 
 /**
  * Register a custom field display component for a given field type.
  * The component will be used by ShowPage and any other display contexts.
  */
-export function registerDisplayComponent(fieldType: string, component: Component<Record<string, unknown>>): void {
+export function registerDisplayComponent(fieldType: string, component: Component<any>): void {
   customDisplayComponents.set(fieldType, component);
 }
 
@@ -67,7 +67,7 @@ export function registerDisplayComponent(fieldType: string, component: Component
  * Custom components take precedence over built-in ones.
  * Returns undefined if no component is registered for the type.
  */
-export function getDisplayComponent(fieldType: string): Component<Record<string, unknown>> | undefined {
+export function getDisplayComponent(fieldType: string): Component<any> | undefined {
   return customDisplayComponents.get(fieldType) ?? builtinDisplayComponents[fieldType];
 }
 

package/src/components/fields/MultiSelectField.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Badge } from '../ui/badge/index.js';
 
-  let { value } = $props<{
+  let { value, options } = $props<{
     value: (string | number)[] | null | undefined;
     options?: { label: string; value: string | number }[];
   }>();
@@ -11,8 +11,9 @@
 
 {#if items.length > 0}
   <div class="flex flex-wrap gap-1">
-    {#each items as item}
-      <Badge variant="secondary">{String(item)}</Badge>
+    {#each items as v}
+      {@const label = options?.find((o: { label: string; value: string | number }) => o.value === v)?.label ?? String(v)}
+      <Badge variant="secondary" class="font-normal">{label}</Badge>
     {/each}
   </div>
 {:else}

package/src/components/fields/SelectField.svelte

@@ -7,7 +7,7 @@
   }>();
 
   const label = $derived(
-    options?.find(o => o.value === value)?.label ?? (value != null ? String(value) : '—')
+    options?.find((o: any) => o.value === value)?.label ?? (value != null ? String(value) : '—')
   );
 </script>
 

package/src/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -2,12 +2,14 @@
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 	import type { WithoutChildrenOrChild } from "bits-ui";
 	import { cn } from "../../../utils.js";
+	import type { Snippet } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		children,
 		...restProps
-	}: WithoutChildrenOrChild<AlertDialogPrimitive.ContentProps> & { class?: string } = $props();
+	}: WithoutChildrenOrChild<AlertDialogPrimitive.ContentProps> & { children?: Snippet; class?: string } = $props();
 </script>
 
 <AlertDialogPrimitive.Portal>
@@ -21,5 +23,7 @@
 			className,
 		)}
 		{...restProps}
-	/>
+	>
+		{@render children?.()}
+	</AlertDialogPrimitive.Content>
 </AlertDialogPrimitive.Portal>

package/src/components/ui/button/button.svelte

@@ -15,14 +15,14 @@
 				link: "text-primary underline-offset-4 hover:underline",
 			},
 			size: {
-				default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
 				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-				sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-				lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-				icon: "size-8",
+				sm: "h-8 gap-1 rounded-[min(var(--radius-md),12px)] px-3 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: "h-10 gap-2 px-4 has-data-[icon=inline-end]:pr-3.5 has-data-[icon=inline-start]:pl-3.5",
+				icon: "size-9",
 				"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-				"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-				"icon-lg": "size-9",
+				"icon-sm": "size-8 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+				"icon-lg": "size-10",
 			},
 		},
 		defaultVariants: {

package/src/components/ui/card/card-title.svelte

@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="card-title" class={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)} {...restProps}>
+<div bind:this={ref} data-slot="card-title" class={cn("leading-none font-semibold tracking-tight group-data-[size=sm]/card:text-sm", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/src/components/ui/input/input.svelte

@@ -25,7 +25,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-9 rounded-lg border bg-transparent px-3 py-1.5 text-base transition-colors file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		type="file"
@@ -38,7 +38,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-9 rounded-lg border bg-transparent px-3 py-1.5 text-base transition-colors file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		{type}

package/src/components/ui/select/select.svelte

@@ -20,7 +20,7 @@
 	bind:this={ref}
 	data-slot="select"
 	class={cn(
-		"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 w-full appearance-none rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 bg-[length:16px] bg-[right_8px_center] bg-no-repeat",
+		"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-9 w-full appearance-none rounded-lg border bg-transparent px-3 py-1.5 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 bg-[length:16px] bg-[right_8px_center] bg-no-repeat",
 		"bg-[url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\")]",
 		className
 	)}

package/src/components/ui/tooltip/tooltip-content.svelte

@@ -27,7 +27,7 @@
 		{sideOffset}
 		{side}
 		class={cn(
-			"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm bg-foreground text-background z-50 w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin)",
+			"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm bg-primary text-primary-foreground z-50 w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin)",
 			className
 		)}
 		{...restProps}
@@ -37,7 +37,7 @@
 			{#snippet child({ props })}
 				<div
 					class={cn(
-						"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50",
+						"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-primary fill-primary z-50",
 						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%+2px)]",
 						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%+1px)]",
 						"data-[side=right]:translate-x-[calc(50%+2px)] data-[side=right]:translate-y-1/2",