@svadmin/ui 0.72.0 → 0.74.0

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

@@ -0,0 +1,38 @@
+export interface SegmentedControlOption<T extends string = string> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+}
+interface Props<T extends string = string> {
+    options: readonly SegmentedControlOption<T>[];
+    value?: T;
+    disabled?: boolean;
+    ariaLabel: string;
+    dir?: 'ltr' | 'rtl';
+    class?: string;
+    onchange?: (value: T) => void;
+}
+declare function $$render<T extends string>(): {
+    props: Props<T>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SegmentedControl: $$IsomorphicComponent;
+type SegmentedControl<T extends string> = InstanceType<typeof SegmentedControl<T>>;
+export default SegmentedControl;

package/dist/components/SettingsPage.svelte

@@ -30,6 +30,7 @@
   }
 
   interface Props {
+    preferencesProvider?: import('./NotificationsSettings.svelte').NotificationPreferencesProvider;
     customSections?: SettingsSection[];
     profile?: Snippet;
     appearance?: Snippet;
@@ -44,6 +45,7 @@
   }
 
   let {
+    preferencesProvider,
     customSections,
     profile,
     appearance,
@@ -197,7 +199,7 @@
     {:else if activeKey === "integrations"}
       {#if integrations}{@render integrations()}{:else}<IntegrationsSettings />{/if}
     {:else if activeKey === "notifications"}
-      {#if notifications}{@render notifications()}{:else}<NotificationsSettings />{/if}
+      {#if notifications}{@render notifications()}{:else}<NotificationsSettings {...preferencesProvider ? { preferencesProvider } : {}} />{/if}
     {:else if activeKey === "api"}
       {#if api}{@render api()}{:else}<ApiSettings />{/if}
     {:else if activeKey === "audit"}

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

@@ -10,6 +10,7 @@ interface SettingsSection {
     items: SettingsItem[];
 }
 interface Props {
+    preferencesProvider?: import('./NotificationsSettings.svelte').NotificationPreferencesProvider;
     customSections?: SettingsSection[];
     profile?: Snippet;
     appearance?: Snippet;

package/dist/components/ShowInferencer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { ResourceRendering } from '../rendering/index.js';
   // ShowInferencer renders a detail page from the resource definition with no page-specific configuration.
   // The :id parameter is extracted from the URL automatically.
   import ShowPage from './ShowPage.svelte';
@@ -6,16 +7,17 @@
 
   interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     /** Optional explicit id; defaults to the value parsed from the URL. */
     id?: string | number;
     class?: string;
   }
 
-  let { resourceName, id, class: className = '' }: Props = $props();
+  let { resourceName, rendering, id, class: className = '' }: Props = $props();
   const parsed = useParsed();
   const resolvedId = $derived(id ?? parsed.id ?? '');
 </script>
 
 {#if resolvedId}
-  <ShowPage {resourceName} id={resolvedId} class={className} />
+  <ShowPage {rendering} {resourceName} id={resolvedId} class={className} />
 {/if}

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

@@ -1,5 +1,7 @@
+import type { ResourceRendering } from '../rendering/index.js';
 interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     /** Optional explicit id; defaults to the value parsed from the URL. */
     id?: string | number;
     class?: string;

package/dist/components/ShowPage.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { useNavigation } from '@svadmin/core';
+  import type { ResourceRendering } from '../rendering/index.js';
+  import { captureAdminContext, useNavigation } from '@svadmin/core';
   import { useRecordDetail } from './record-detail.svelte';
   import { useTranslation } from '@svadmin/core/i18n';
   import type { Snippet } from 'svelte';
@@ -17,6 +18,7 @@
 
   interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     id: string | number;
     density?: 'compact' | 'comfortable';
     layout?: 'list' | 'grid';
@@ -25,10 +27,14 @@
     headerActions?: Snippet;
     children?: Snippet;
     class?: string;
+    /** 宿主明确提供来源时优先使用，拒绝外部地址。 */
+    returnTo?: string;
+    onBack?: () => void;
   }
 
   let {
     resourceName,
+    rendering,
     id,
     density = 'comfortable',
     layout = 'list',
@@ -37,12 +43,25 @@
     headerActions,
     children,
     class: className = '',
+    returnTo,
+    onBack,
   }: Props = $props();
 
   const navigation = useNavigation();
+  const context = captureAdminContext();
+  function goBack() {
+    if (onBack) { onBack(); return; }
+    const target = returnTo ?? context.routerProvider?.parse().params['returnTo'];
+    if (target?.startsWith('/') && !target.startsWith('//') && !/[\\\r\n]/.test(target)) {
+      navigation.push(target);
+      return;
+    }
+    navigation.list(resourceName);
+  }
   const isCompact = $derived(density === 'compact');
 
-  const detail = useRecordDetail(() => ({ resourceName, id }));
+  const detail = useRecordDetail(() => ({ resourceName, id, rendering }));
+  const activeRendering = $derived(detail.rendering);
   const resource = $derived(detail.resource);
   const showFields = $derived(detail.fields);
   const query = detail.query;
@@ -57,12 +76,12 @@
   });
 </script>
 
-<div class="{isCompact ? 'svadmin-u-6ed543e2fbbb' : 'svadmin-u-3e7ce58d64fa'} {className}">
+<div data-svadmin-rendering-resource={activeRendering?.resource.name} data-svadmin-rendering-kind={activeRendering ? 'show' : undefined} class="{isCompact ? 'svadmin-u-6ed543e2fbbb' : 'svadmin-u-3e7ce58d64fa'} {className}">
   <PageHeader
     title="{resource.label} {i18n.t('common.detail')} #{id}"
     {density}
-    onBack={() => navigation.list(resourceName)}
-    backLabel={i18n.t('common.backToList')}
+    onBack={goBack}
+    backLabel={i18n.t('common.back')}
   >
     {#snippet actions()}
       {#if detail.canRead && query.isSuccess && resource.canEdit !== false}
@@ -107,7 +126,7 @@
       </Button>
     </div>
   {:else if query.isSuccess}
-    {@const record = query.data.data}
+    {@const record = activeRendering ? activeRendering.record(query.data.data) : query.data.data}
     {#if layout === 'grid'}
       <Card.Root class="svadmin-u-2cd02d11d1af svadmin-u-6ee2d41e2d2d svadmin-u-438b2237b8d6">
         <Card.Content class="svadmin-u-8a539c7fe216">

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

@@ -1,6 +1,8 @@
+import type { ResourceRendering } from '../rendering/index.js';
 import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     id: string | number;
     density?: 'compact' | 'comfortable';
     layout?: 'list' | 'grid';
@@ -9,6 +11,9 @@ interface Props {
     headerActions?: Snippet;
     children?: Snippet;
     class?: string;
+    /** 宿主明确提供来源时优先使用，拒绝外部地址。 */
+    returnTo?: string;
+    onBack?: () => void;
 }
 declare const ShowPage: import("svelte").Component<Props, {}, "">;
 type ShowPage = ReturnType<typeof ShowPage>;

package/dist/components/Sidebar.svelte

@@ -309,10 +309,10 @@
   aria-label="Sidebar navigation"
   class="svadmin-u-7bc555991dba svadmin-u-5f89f14a26db svadmin-u-c78facc7a0a6 svadmin-u-0f2fff0ae96e svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-5ceb636bd9f3 svadmin-u-6ee2d41e2d2d svadmin-u-0fe7d7d814d0 svadmin-u-7890552ecd63"
   style="background-color: var(--sidebar);"
-  class:w-[252px]={!collapsed}
-  class:w-[70px]={collapsed}
+  class:svadmin-sidebar-expanded={!collapsed}
+  class:svadmin-sidebar-collapsed={collapsed}
 >
-  <div class="svadmin-u-60fbb7713999 svadmin-u-07017cde3e97 svadmin-u-3960ffc248d9 svadmin-u-012fbd121f37" class:px-5={!collapsed} class:justify-center={collapsed}>
+  <div class="svadmin-u-60fbb7713999 svadmin-u-07017cde3e97 svadmin-u-3960ffc248d9 svadmin-u-012fbd121f37" class:svadmin-u-d139dd09e38d={!collapsed} class:svadmin-u-86843cf1e227={collapsed}>
     {#if !collapsed}
       <a href={formatSidebarLink('/')} class="group svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-7e9a2a250cc3" onclick={(e) => { e.preventDefault(); adminContext.navigate('/'); }}>
         <SvadminLogo />
@@ -331,7 +331,7 @@
   </div>
 
   <ScrollArea class="svadmin-u-36e579c0b41c sidebar-scroll">
-  <nav aria-label="Main menu" class="svadmin-u-9fcd8a13827e" class:px-[10px]={!collapsed} class:px-2={collapsed}>
+  <nav aria-label="Main menu" class="svadmin-u-9fcd8a13827e" class:svadmin-u-7597e11b4d4b={!collapsed} class:svadmin-u-d5eab218aa34={collapsed}>
     {#if menu && menu.length > 0}
       <div class="svadmin-u-a26339f4b89e">
         {#each customMenuItems as item (item.name)}
@@ -511,7 +511,7 @@
         <Tooltip.Root>
           <Tooltip.Trigger>
             {#snippet child({ props }: { props: Record<string, unknown> })}
-              <Button {...props} variant="ghost" size="icon" onclick={onToggle} class="svadmin-u-ed8a5df7b2fb svadmin-u-2bbcfc3b5179 svadmin-u-421ac2be5045 svadmin-u-68d55a736ff4 svadmin-u-55d1f8b9d318 svadmin-u-646e10356266">
+              <Button {...props} aria-label={i18n.t('common.toggleSidebar')} variant="ghost" size="icon" onclick={onToggle} class="svadmin-u-ed8a5df7b2fb svadmin-u-2bbcfc3b5179 svadmin-u-421ac2be5045 svadmin-u-68d55a736ff4 svadmin-u-55d1f8b9d318 svadmin-u-646e10356266">
                 <ChevronRight class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
               </Button>
             {/snippet}

package/dist/components/Slider.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+
+  interface Props {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    ariaLabel?: string;
+    showValue?: boolean;
+    class?: string;
+    onchange?: (value: number) => void;
+  }
+
+  let {
+    value = $bindable(0),
+    min = 0,
+    max = 100,
+    step = 1,
+    id,
+    name,
+    disabled = false,
+    required = false,
+    invalid = false,
+    describedby,
+    ariaLabel,
+    showValue = false,
+    class: className = '',
+    onchange,
+  }: Props = $props();
+
+  const boundsValid = $derived(
+    Number.isFinite(min) && Number.isFinite(max) && min < max
+      && Number.isFinite(step) && step > 0,
+  );
+  const normalizedValue = $derived(
+    boundsValid ? Math.min(max, Math.max(min, Number.isFinite(value) ? value : min)) : min,
+  );
+
+  function handleInput(event: Event): void {
+    const input = event.currentTarget;
+    if (!(input instanceof HTMLInputElement) || disabled || !boundsValid) return;
+    const next = Number(input.value);
+    if (!Number.isFinite(next)) return;
+    value = next;
+    onchange?.(next);
+  }
+</script>
+
+<div class={cn('svadmin-slider', className)} data-invalid={invalid ? 'true' : undefined}>
+  <input
+    {id}
+    {name}
+    type="range"
+    value={normalizedValue}
+    {min}
+    {max}
+    {step}
+    {disabled}
+    {required}
+    aria-label={ariaLabel}
+    aria-invalid={invalid || undefined}
+    aria-describedby={describedby}
+    aria-valuetext={showValue ? String(normalizedValue) : undefined}
+    oninput={handleInput}
+  />
+  {#if showValue}<output for={id}>{normalizedValue}</output>{/if}
+</div>
+
+<style>
+  .svadmin-slider {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    inline-size: 100%;
+  }
+
+  .svadmin-slider input {
+    min-inline-size: 0;
+    flex: 1 1 auto;
+    accent-color: var(--primary);
+  }
+
+  .svadmin-slider output {
+    min-inline-size: 3ch;
+    color: var(--muted-foreground);
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .svadmin-slider[data-invalid='true'] input {
+    accent-color: var(--destructive);
+  }
+</style>

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

@@ -0,0 +1,19 @@
+interface Props {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    ariaLabel?: string;
+    showValue?: boolean;
+    class?: string;
+    onchange?: (value: number) => void;
+}
+declare const Slider: import("svelte").Component<Props, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;