@svadmin/ui 0.29.0 → 0.29.2

package/src/components/FieldRenderer.svelte

@@ -1,357 +0,0 @@
-<script lang="ts" module>
-  export type { FieldDefinition } from '@svadmin/core';
-</script>
-
-<script lang="ts">
-  import type { FieldDefinition } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import { Input } from './ui/input/index.js';
-  import { Textarea } from './ui/textarea/index.js';
-  import { Switch } from './ui/switch/index.js';
-  import { Badge } from './ui/badge/index.js';
-  import { Label } from './ui/label/index.js';
-  import { Select } from './ui/select/index.js';
-  import { Checkbox } from './ui/checkbox/index.js';
-  import { Button } from './ui/button/index.js';
-  import TooltipButton from './TooltipButton.svelte';
-  import ComboboxField from './ComboboxField.svelte';
-  import ArrayField from './fields/ArrayField.svelte';
-  import { Plus, X } from '@lucide/svelte';
-  import type { Snippet } from 'svelte';
-  import { getRichTextEditor } from '../editor-config.svelte.js';
-
-  let { field, value, onchange, children } = $props<{
-    field: FieldDefinition;
-    value: unknown;
-    onchange: (val: unknown) => void;
-    /** Optional custom renderer snippet */
-    children?: Snippet;
-  }>();
-
-  // Typed accessors
-  const strVal = $derived((value as string) ?? '');
-  const numVal = $derived((value as number) ?? 0);
-  const boolVal = $derived((value as boolean) ?? false);
-  const tagsVal = $derived((value as string[]) ?? []);
-  const multiVal = $derived((value as (string | number)[]) ?? []);
-  const imagesVal = $derived((value as string[]) ?? []);
-
-  function handleTagKeydown(e: KeyboardEvent) {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      const input = e.target as HTMLInputElement;
-      const tag = input.value.trim();
-      if (tag) {
-        onchange([...tagsVal, tag]);
-        input.value = '';
-      }
-    }
-  }
-
-  function removeTag(index: number) {
-    onchange(tagsVal.filter((_: string, i: number) => i !== index));
-  }
-
-  // Multiselect toggle
-  function toggleMulti(optValue: string | number) {
-    if (multiVal.includes(optValue)) {
-      onchange(multiVal.filter((v: string | number) => v !== optValue));
-    } else {
-      onchange([...multiVal, optValue]);
-    }
-  }
-
-  // Images management
-  function addImage() {
-    onchange([...imagesVal, '']);
-  }
-
-  function updateImage(index: number, url: string) {
-    const next = [...imagesVal];
-    next[index] = url;
-    onchange(next);
-  }
-
-  function removeImage(index: number) {
-    onchange(imagesVal.filter((_: string, i: number) => i !== index));
-  }
-</script>
-
-<div class="space-y-1.5">
-  <Label for={field.key} id="label-{field.key}">
-    {field.label}
-    {#if field.required}
-      <span class="text-destructive">*</span>
-    {/if}
-  </Label>
-
-  {#if children}
-    {@render children()}
-
-  {:else if field.type === 'array'}
-    <ArrayField {field} {value} {onchange} />
-
-  {:else if field.type === 'text' || field.type === 'image'}
-    <Input
-      id={field.key}
-      type="text"
-      value={strVal}
-      oninput={(e) => onchange((e.target as HTMLInputElement).value)}
-      required={field.required}
-      placeholder={t('field.enterValue', { label: field.label })}
-    />
-
-  {:else if field.type === 'email'}
-    <Input
-      id={field.key}
-      type="email"
-      value={strVal}
-      oninput={(e) => onchange((e.target as HTMLInputElement).value)}
-      required={field.required}
-      placeholder="name@example.com"
-    />
-
-  {:else if field.type === 'url'}
-    <Input
-      id={field.key}
-      type="url"
-      value={strVal}
-      oninput={(e) => onchange((e.target as HTMLInputElement).value)}
-      required={field.required}
-      placeholder="https://"
-    />
-
-  {:else if field.type === 'phone'}
-    <Input
-      id={field.key}
-      type="tel"
-      value={strVal}
-      oninput={(e) => onchange((e.target as HTMLInputElement).value)}
-      required={field.required}
-      placeholder="+1 (555) 000-0000"
-    />
-
-  {:else if field.type === 'color'}
-    <div class="flex items-center gap-3">
-      <input
-        id={field.key}
-        type="color"
-        value={strVal || '#000000'}
-        oninput={(e) => onchange((e.target as HTMLInputElement).value)}
-        class="h-10 w-14 cursor-pointer rounded-md border border-input bg-background p-1"
-      />
-      <Input
-        type="text"
-        value={strVal}
-        oninput={(e) => onchange((e.target as HTMLInputElement).value)}
-        placeholder="#000000"
-        class="max-w-32 font-mono text-sm"
-      />
-      {#if strVal}
-        <span
-          class="h-8 w-8 rounded-full border border-border shadow-sm"
-          style="background-color: {strVal}"
-        ></span>
-      {/if}
-    </div>
-
-  {:else if field.type === 'number'}
-    <Input
-      id={field.key}
-      type="number"
-      value={String(numVal)}
-      oninput={(e) => onchange(parseFloat((e.target as HTMLInputElement).value) || 0)}
-      required={field.required}
-    />
-
-  {:else if field.type === 'richtext'}
-    {@const EditorComp = getRichTextEditor()}
-    {#if EditorComp}
-      <EditorComp
-        id={field.key}
-        value={strVal}
-        placeholder={t('field.enterValue', { label: field.label })}
-        preset="full"
-        onchange={(html: string) => onchange(html)}
-      />
-    {:else}
-      <Textarea
-        id={field.key}
-        value={strVal}
-        oninput={(e) => onchange((e.target as HTMLTextAreaElement).value)}
-        required={field.required}
-        rows={10}
-        placeholder={t('field.enterValue', { label: field.label })}
-        class="resize-y"
-      />
-    {/if}
-
-  {:else if field.type === 'textarea'}
-    <Textarea
-      id={field.key}
-      value={strVal}
-      oninput={(e) => onchange((e.target as HTMLTextAreaElement).value)}
-      required={field.required}
-      rows={4}
-      placeholder={t('field.enterValue', { label: field.label })}
-      class="resize-y"
-    />
-
-  {:else if field.type === 'relation' && field.resource}
-    <ComboboxField
-      id={field.key}
-      resource={field.resource}
-      value={value as string | number | null}
-      onchange={(v) => onchange(v)}
-      optionLabel={field.optionLabel ?? 'title'}
-      optionValue={field.optionValue ?? 'id'}
-      placeholder={t('field.selectPlaceholder')}
-    />
-
-  {:else if field.type === 'select'}
-    {#if (field.options?.length ?? 0) > 8}
-      <!-- Many options → use ComboboxField-style search -->
-      <ComboboxField
-        id={field.key}
-        resource=""
-        value={value as string | number | null}
-        onchange={(v) => onchange(v)}
-        searchable={false}
-      />
-    {:else}
-      <Select
-        id={field.key}
-        value={strVal}
-        onchange={(e) => onchange((e.target as HTMLSelectElement).value)}
-        required={field.required}
-        placeholder={t('field.selectPlaceholder')}
-      >
-        {#each field.options ?? [] as opt}
-          <option value={opt.value}>{opt.label}</option>
-        {/each}
-      </Select>
-    {/if}
-
-  {:else if field.type === 'multiselect'}
-    <div 
-      class="space-y-2 rounded-lg border border-input p-3 max-h-48 overflow-y-auto"
-      role="group" 
-      aria-labelledby="label-{field.key}"
-    >
-      {#each field.options ?? [] as opt}
-        <label class="flex items-center gap-2 text-sm cursor-pointer hover:bg-muted/50 rounded px-1 py-0.5 transition-colors">
-          <Checkbox
-            id={`${field.key}-${opt.value}`}
-            checked={multiVal.includes(opt.value)}
-            onCheckedChange={() => toggleMulti(opt.value)}
-          />
-          {opt.label}
-        </label>
-      {/each}
-      {#if !(field.options?.length)}
-        <p class="text-xs text-muted-foreground">{t('field.noOptions')}</p>
-      {/if}
-    </div>
-    {#if multiVal.length > 0}
-      <div class="flex flex-wrap gap-1 mt-1">
-        {#each multiVal as v}
-          {@const label = field.options?.find((o: { label: string; value: string | number }) => 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>
-          </Badge>
-        {/each}
-      </div>
-    {/if}
-
-  {:else if field.type === 'boolean'}
-    <div class="flex items-center gap-2 pt-1">
-      <Switch
-        id={field.key}
-        checked={boolVal}
-        onCheckedChange={(v) => onchange(v)}
-      />
-      <span class="text-sm text-muted-foreground">{boolVal ? t('common.yes') : t('common.no')}</span>
-    </div>
-
-  {:else if field.type === 'tags'}
-    <div class="space-y-2">
-      <div class="flex flex-wrap gap-1.5">
-        {#each tagsVal as tag, i}
-          <Badge variant="secondary" class="gap-1">
-            {tag}
-            <button
-              type="button"
-              onclick={() => removeTag(i)}
-              class="ml-0.5 rounded-sm hover:text-destructive hover:bg-destructive/10 transition-colors"
-              aria-label={t('common.clear')}
-            >×</button>
-          </Badge>
-        {/each}
-      </div>
-      <Input
-        id={field.key}
-        type="text"
-        placeholder={t('field.tagsPlaceholder')}
-        onkeydown={handleTagKeydown}
-      />
-    </div>
-
-  {:else if field.type === 'date'}
-    <Input
-      id={field.key}
-      type="date"
-      value={strVal}
-      oninput={(e) => onchange((e.target as HTMLInputElement).value)}
-      required={field.required}
-    />
-
-  {:else if field.type === 'images'}
-    <div class="space-y-2">
-      {#each imagesVal as url, i}
-        <div class="flex items-center gap-2">
-          <Input
-            id={i === 0 ? field.key : undefined}
-            type="text"
-            value={url}
-            oninput={(e) => updateImage(i, (e.target as HTMLInputElement).value)}
-            placeholder="https://example.com/image.jpg"
-            class="flex-1"
-          />
-          {#if url}
-            <img src={url} alt="preview" class="h-9 w-9 rounded object-cover border" />
-          {/if}
-          <TooltipButton tooltip={t('common.removeImage')} variant="ghost" size="icon" class="h-8 w-8 shrink-0" onclick={() => removeImage(i)}>
-            <X class="h-3.5 w-3.5" />
-          </TooltipButton>
-        </div>
-      {/each}
-      <Button variant="outline" size="sm" type="button" onclick={addImage}>
-        <Plus class="h-3.5 w-3.5 mr-1" /> {t('field.addImage')}
-      </Button>
-    </div>
-
-  {:else if field.type === 'json'}
-    <Textarea
-      id={field.key}
-      value={typeof value === 'string' ? strVal : JSON.stringify(value, null, 2)}
-      oninput={(e) => {
-        try {
-          onchange(JSON.parse((e.target as HTMLTextAreaElement).value));
-        } catch {
-          // keep raw text until valid JSON
-        }
-      }}
-      rows={6}
-      class="resize-y font-mono text-xs"
-    />
-
-  {:else}
-    <Input
-      id={field.key}
-      type="text"
-      value={strVal}
-      oninput={(e) => onchange((e.target as HTMLInputElement).value)}
-    />
-  {/if}
-</div>

package/src/components/ForgotPasswordPage.svelte

@@ -1,112 +0,0 @@
-<script lang="ts">
-  import { useForgotPassword } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import { navigate } from '@svadmin/core/router';
-  import { Button } from './ui/button/index.js';
-  import { Input } from './ui/input/index.js';
-  import { Label } from './ui/label/index.js';
-  import * as Card from './ui/card/index.js';
-  import * as Alert from './ui/alert/index.js';
-  import { KeyRound, User, ArrowLeft, CheckCircle, Loader2, AlertCircle } from '@lucide/svelte';
-
-  let { title = 'Admin' } = $props<{
-    title?: string;
-  }>();
-
-  const forgot = useForgotPassword();
-
-  let identifier = $state('');
-  let error = $state('');
-  let sent = $state(false);
-
-  async function handleSubmit(e: Event) {
-    e.preventDefault();
-    error = '';
-
-    if (!identifier) { error = t('auth.usernameOrEmailRequired'); return; }
-
-    const result = await forgot.mutate({ email: identifier, username: identifier });
-    if (result.success) {
-      sent = true;
-    } else {
-      error = result.error?.message ?? t('common.operationFailed');
-    }
-  }
-</script>
-
-<div class="min-h-screen flex items-center justify-center bg-background p-4">
-  <div class="w-full max-w-[380px]">
-    <Card.Card>
-      <Card.CardHeader class="text-center pb-2">
-        <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary mx-auto mb-3">
-          {#if sent}
-            <CheckCircle class="h-5 w-5" />
-          {:else}
-            <KeyRound class="h-5 w-5" />
-          {/if}
-        </div>
-        <Card.CardTitle class="text-xl">
-          {sent ? t('auth.resetLinkSent') : t('auth.forgotPassword')}
-        </Card.CardTitle>
-        {#if !sent}
-          <p class="text-sm text-muted-foreground">{t('auth.forgotPasswordDescription')}</p>
-        {/if}
-      </Card.CardHeader>
-      <Card.CardContent>
-        {#if sent}
-          <div class="py-2">
-            <p class="text-sm text-muted-foreground text-center mb-4">
-              {t('auth.resetLinkSent')}
-            </p>
-            <Button variant="outline" class="w-full" onclick={() => navigate('/login')}>
-              <ArrowLeft class="h-4 w-4 mr-2" />
-              {t('auth.backToLogin')}
-            </Button>
-          </div>
-        {:else}
-          <form onsubmit={handleSubmit} class="space-y-4">
-            {#if error}
-              <Alert.Root variant="destructive">
-                <AlertCircle class="h-4 w-4" />
-                <Alert.Description>{error}</Alert.Description>
-              </Alert.Root>
-            {/if}
-
-            <div class="space-y-2">
-              <Label for="forgot-identifier">{t('auth.usernameOrEmail')}</Label>
-              <div class="relative">
-                <User class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-[1]" />
-                <Input
-                  id="forgot-identifier"
-                  type="text"
-                  placeholder={t('auth.identifierPlaceholder')}
-                  bind:value={identifier}
-                  class="pl-9"
-                  autocomplete="username"
-                />
-              </div>
-            </div>
-
-            <Button type="submit" class="w-full" disabled={forgot.isLoading}>
-              {#if forgot.isLoading}
-                <Loader2 class="h-4 w-4 animate-spin mr-2" />
-              {/if}
-              {t('auth.sendResetLink')}
-            </Button>
-          </form>
-
-          <div class="flex items-center justify-center mt-5 pt-5 border-t">
-            <Button variant="link" class="text-sm h-auto p-0 font-medium inline-flex items-center gap-1" onclick={() => navigate('/login')}>
-              <ArrowLeft class="h-3 w-3" />
-              {t('auth.backToLogin')}
-            </Button>
-          </div>
-        {/if}
-      </Card.CardContent>
-    </Card.Card>
-
-    <p class="text-xs text-muted-foreground mt-4 text-center opacity-60">
-      Powered by {title}
-    </p>
-  </div>
-</div>

package/src/components/Header.svelte

@@ -1,94 +0,0 @@
-<script lang="ts">
-  import { Moon, Sun, Search, MonitorUp } from '@lucide/svelte';
-  import { Button } from './ui/button';
-  import TooltipButton from './TooltipButton.svelte';
-  import { getResolvedTheme, toggleTheme } from '@svadmin/core';
-  import Breadcrumbs from './Breadcrumbs.svelte';
-  import { t } from '@svadmin/core/i18n';
-  import { getComponentRegistry } from '../component-registry.svelte.js';
-
-  let {
-    showThemeToggle = false,
-    showBreadcrumbs = true,
-    showSearch = true,
-    onSearchClick,
-    children,
-    /** Slot for additional actions on the right side of the header */
-    rightActions,
-    siteUrl,
-  } = $props<{
-    showThemeToggle?: boolean;
-    showBreadcrumbs?: boolean;
-    showSearch?: boolean;
-    onSearchClick?: () => void;
-    children?: import('svelte').Snippet;
-    rightActions?: import('svelte').Snippet;
-    siteUrl?: string;
-  }>();
-
-  // Retrieve optional component overrides from registry
-  const registry = getComponentRegistry();
-  const CustomBreadcrumbs = registry.Breadcrumbs;
-  const CustomThemeToggle = registry.ThemeToggle;
-  const CustomUserMenu = registry.UserMenu;
-  const CustomNotificationPanel = registry.NotificationPanel;
-</script>
-
-<header class="sticky top-0 z-30 flex h-14 w-full shrink-0 items-center justify-between bg-card/60 backdrop-blur-md px-4 md:px-6">
-  <div class="flex items-center gap-4">
-    {#if children}
-      {@render children()}
-    {/if}
-    {#if showBreadcrumbs}
-      {#if CustomBreadcrumbs}
-        <CustomBreadcrumbs />
-      {:else}
-        <Breadcrumbs />
-      {/if}
-    {/if}
-  </div>
-  <div class="ml-auto flex items-center gap-2">
-    {#if rightActions}
-      {@render rightActions()}
-    {/if}
-
-    {#if siteUrl}
-      <TooltipButton tooltip={t('common.goToSite') || 'Site'} href={siteUrl} target="_blank" rel="noopener noreferrer" class="rounded-full flex items-center justify-center">
-        <MonitorUp class="h-4 w-4 text-muted-foreground transition-colors hover:text-foreground" />
-      </TooltipButton>
-    {/if}
-
-    {#if CustomNotificationPanel}
-      <CustomNotificationPanel />
-    {/if}
-
-    {#if showSearch && onSearchClick}
-      <Button variant="outline" size="sm" onclick={onSearchClick} class="gap-2 text-muted-foreground h-8 px-3">
-        <Search class="h-3.5 w-3.5" />
-        <span class="hidden sm:inline text-xs">Search...</span>
-        <kbd class="hidden sm:inline-flex items-center gap-0.5 rounded border bg-muted px-1.5 py-0.5 text-[10px] font-medium font-mono text-muted-foreground">
-          <span class="text-xs">⌘</span>K
-        </kbd>
-      </Button>
-    {/if}
-    
-    {#if showThemeToggle}
-      {#if CustomThemeToggle}
-        <CustomThemeToggle />
-      {:else}
-        <TooltipButton tooltip={t('common.toggleTheme')} onclick={() => toggleTheme()} class="rounded-full">
-          {#if getResolvedTheme() === 'dark'}
-            <Moon class="h-4 w-4 transition-all" />
-          {:else}
-            <Sun class="h-4 w-4 transition-all" />
-          {/if}
-        </TooltipButton>
-      {/if}
-    {/if}
-
-    {#if CustomUserMenu}
-      <CustomUserMenu />
-    {/if}
-  </div>
-</header>
-