@svadmin/ui 0.50.0 → 0.52.0

package/dist/components/fields/TagField.svelte

@@ -1,12 +1,96 @@
+<script module lang="ts">
+  export type TagTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+</script>
+
 <script lang="ts">
   import { Badge } from '../ui/badge/index.js';
-  interface Props { value: string | string[] | null | undefined }
-  let { value }: Props = $props();
-  const tags = $derived(Array.isArray(value) ? value : value ? [value] : []);
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value: string | string[] | null | undefined;
+    colorMap?: Record<string, TagTone | string>;
+    tone?: TagTone;
+    variant?: 'secondary' | 'outline' | 'default' | 'destructive';
+    size?: 'sm' | 'default';
+    clickable?: boolean;
+    onclick?: (tag: string) => void;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    colorMap,
+    tone,
+    variant = 'secondary',
+    size = 'default',
+    clickable = false,
+    onclick,
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  const toneClass: Record<TagTone, string> = {
+    success: 'border-success/30 bg-success/10 text-success',
+    warning: 'border-warning/30 bg-warning/10 text-warning-foreground',
+    danger: 'border-destructive/30 bg-destructive/10 text-destructive',
+    info: 'border-primary/30 bg-primary/10 text-primary',
+    neutral: 'border-border bg-muted text-muted-foreground',
+  };
+
+  const tags = $derived(
+    Array.isArray(value)
+      ? value.filter((t): t is string => t != null && t !== '')
+      : value != null && value !== ''
+        ? [String(value)]
+        : []
+  );
+
+  function resolveTagClass(tag: string): string {
+    const mapped = colorMap?.[tag] ?? tone;
+    if (mapped && mapped in toneClass) {
+      return toneClass[mapped as TagTone];
+    }
+    if (typeof mapped === 'string') {
+      return mapped;
+    }
+    return '';
+  }
 </script>
-<span class="inline-flex flex-wrap gap-1">
+
+<span class={cn('inline-flex flex-wrap gap-1 items-center', className)}>
   {#each tags as tag, _i (_i)}
-    <Badge variant="secondary">{tag}</Badge>
+    {@const customClass = resolveTagClass(tag)}
+    {#if clickable || onclick}
+      <button
+        type="button"
+        onclick={() => onclick?.(tag)}
+        class="focus:outline-none focus:ring-1 focus:ring-ring rounded"
+      >
+        <Badge
+          variant={customClass ? 'outline' : variant}
+          class={cn(
+            'transition-colors cursor-pointer hover:opacity-80',
+            size === 'sm' ? 'px-1.5 py-0 text-[11px] h-5' : '',
+            customClass
+          )}
+        >
+          {tag}
+        </Badge>
+      </button>
+    {:else}
+      <Badge
+        variant={customClass ? 'outline' : variant}
+        class={cn(
+          size === 'sm' ? 'px-1.5 py-0 text-[11px] h-5' : '',
+          customClass
+        )}
+      >
+        {tag}
+      </Badge>
+    {/if}
   {/each}
-  {#if tags.length === 0}<span class="text-muted-foreground">—</span>{/if}
+  {#if tags.length === 0}
+    <span class="text-muted-foreground">{nullLabel}</span>
+  {/if}
 </span>

package/dist/components/fields/TagField.svelte.d.ts

@@ -1,5 +1,14 @@
+export type TagTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 interface Props {
     value: string | string[] | null | undefined;
+    colorMap?: Record<string, TagTone | string>;
+    tone?: TagTone;
+    variant?: 'secondary' | 'outline' | 'default' | 'destructive';
+    size?: 'sm' | 'default';
+    clickable?: boolean;
+    onclick?: (tag: string) => void;
+    nullLabel?: string;
+    class?: string;
 }
 declare const TagField: import("svelte").Component<Props, {}, "">;
 type TagField = ReturnType<typeof TagField>;

package/dist/components/fields/UrlField.svelte

@@ -1,14 +1,50 @@
 <script lang="ts">
   import { ExternalLink } from '@lucide/svelte';
-  interface Props { value: string | null | undefined; label?: string }
-  let { value, label }: Props = $props();
-  const display = $derived(label ?? value ?? '');
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value: string | null | undefined;
+    label?: string;
+    target?: string;
+    maxDisplayLength?: number;
+    showIcon?: boolean;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    label,
+    target = '_blank',
+    maxDisplayLength = 40,
+    showIcon = true,
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  const display = $derived.by(() => {
+    if (label) return label;
+    if (!value) return '';
+    if (maxDisplayLength && value.length > maxDisplayLength) {
+      return value.slice(0, maxDisplayLength) + '…';
+    }
+    return value;
+  });
 </script>
+
 {#if value}
-  <a href={value} target="_blank" rel="noopener noreferrer" class="text-primary hover:underline no-underline inline-flex items-center gap-1">
-    {display}
-    <ExternalLink class="h-3 w-3 opacity-60" />
+  <a
+    href={value}
+    {target}
+    rel="noopener noreferrer"
+    class={cn('text-primary hover:underline inline-flex items-center gap-1 text-sm font-medium', className)}
+    title={value}
+  >
+    <span>{display}</span>
+    {#if showIcon}
+      <ExternalLink class="h-3 w-3 shrink-0 opacity-60" />
+    {/if}
   </a>
 {:else}
-  <span class="text-muted-foreground">—</span>
+  <span class="text-muted-foreground">{nullLabel}</span>
 {/if}

package/dist/components/fields/UrlField.svelte.d.ts

@@ -1,6 +1,11 @@
 interface Props {
     value: string | null | undefined;
     label?: string;
+    target?: string;
+    maxDisplayLength?: number;
+    showIcon?: boolean;
+    nullLabel?: string;
+    class?: string;
 }
 declare const UrlField: import("svelte").Component<Props, {}, "">;
 type UrlField = ReturnType<typeof UrlField>;

package/dist/index.d.ts

@@ -204,3 +204,8 @@ export type { DemoMember, DemoProject, DemoTeam, DemoIntegration, DemoApiKey, De
 export { default as RowActions } from './components/RowActions.svelte';
 export type { RowActionItem } from './components/RowActions.svelte';
 export { default as DetailDrawer } from './components/DetailDrawer.svelte';
+export { default as AuditTimeline } from './components/content/AuditTimeline.svelte';
+export type { TimelineItem } from './components/content/AuditTimeline.svelte';
+export type { TagTone } from './components/fields/TagField.svelte';
+export type { BooleanTone } from './components/fields/BooleanField.svelte';
+export type { DateFieldFormat } from './components/fields/DateField.svelte';

package/dist/index.js

@@ -202,3 +202,4 @@ export { default as SystemErrorState } from './components/content/SystemErrorSta
 export { referenceDemoData } from './reference-data.js';
 export { default as RowActions } from './components/RowActions.svelte';
 export { default as DetailDrawer } from './components/DetailDrawer.svelte';
+export { default as AuditTimeline } from './components/content/AuditTimeline.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.50.0",
+  "version": "0.52.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -39,7 +39,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.40.1",
+    "@svadmin/core": "^0.41.0",
     "@tanstack/svelte-query": "^6.1.38",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.22.0",