@svadmin/ui 0.49.3 → 0.51.0

package/dist/components/buttons/CloneButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Copy } from '@lucide/svelte';
@@ -7,9 +8,19 @@
 
   const i18n = useTranslation();
 
-  let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
+  let {
+    resource,
+    recordItemId,
+    label,
+    children,
+    hideText = false,
+    accessControl = { enabled: true, hideIfUnauthorized: true },
+    class: className = '',
+  } = $props<{
     resource: string;
     recordItemId: string | number;
+    label?: string;
+    children?: Snippet;
     hideText?: boolean;
     accessControl?: ButtonAccessControl;
     class?: string;
@@ -24,6 +35,7 @@
     queryOptions: { enabled: accessControl?.enabled ?? true }
   }));
   const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+  const displayText = $derived(label ?? i18n.t('common.clone'));
 </script>
 
 {#if !hidden}
@@ -31,10 +43,19 @@
     variant="outline"
     size={hideText ? 'icon' : 'sm'}
     class={className}
+    aria-label={hideText ? displayText : undefined}
     disabled={!can.allowed}
     onclick={() => nav.clone(resource, recordItemId)}
   >
     <Copy class="h-4 w-4" />
-    {#if !hideText}<span class="ml-1">{i18n.t('common.clone')}</span>{/if}
+    {#if !hideText}
+      <span class="ml-1">
+        {#if children}
+          {@render children()}
+        {:else}
+          {displayText}
+        {/if}
+      </span>
+    {/if}
   </Button>
 {/if}

package/dist/components/buttons/CloneButton.svelte.d.ts

@@ -1,7 +1,10 @@
+import type { Snippet } from 'svelte';
 import type { ButtonAccessControl } from './access-control';
 type $$ComponentProps = {
     resource: string;
     recordItemId: string | number;
+    label?: string;
+    children?: Snippet;
     hideText?: boolean;
     accessControl?: ButtonAccessControl;
     class?: string;

package/dist/components/buttons/CreateButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Plus } from '@lucide/svelte';
@@ -6,8 +7,17 @@
 
   const i18n = useTranslation();
 
-  let { resource, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
+  let {
+    resource,
+    label,
+    children,
+    hideText = false,
+    accessControl = { enabled: true, hideIfUnauthorized: true },
+    class: className = '',
+  } = $props<{
     resource: string;
+    label?: string;
+    children?: Snippet;
     hideText?: boolean;
     accessControl?: ButtonAccessControl;
     class?: string;
@@ -22,6 +32,7 @@
     queryOptions: { enabled: accessControl?.enabled ?? true }
   }));
   const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+  const displayText = $derived(label ?? i18n.t('common.create'));
 </script>
 
 {#if !hidden}
@@ -29,10 +40,19 @@
     variant="default"
     size={hideText ? 'icon' : 'default'}
     class={className}
+    aria-label={hideText ? displayText : undefined}
     disabled={!can.allowed}
     onclick={() => nav.create(resource)}
   >
     <Plus class="h-4 w-4" />
-    {#if !hideText}<span class="ml-1">{i18n.t('common.create')}</span>{/if}
+    {#if !hideText}
+      <span class="ml-1">
+        {#if children}
+          {@render children()}
+        {:else}
+          {displayText}
+        {/if}
+      </span>
+    {/if}
   </Button>
 {/if}

package/dist/components/buttons/CreateButton.svelte.d.ts

@@ -1,6 +1,9 @@
+import type { Snippet } from 'svelte';
 import type { ButtonAccessControl } from './access-control';
 type $$ComponentProps = {
     resource: string;
+    label?: string;
+    children?: Snippet;
     hideText?: boolean;
     accessControl?: ButtonAccessControl;
     class?: string;

package/dist/components/buttons/DeleteButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { useDelete, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Trash2 } from '@lucide/svelte';
@@ -8,11 +9,20 @@
   const i18n = useTranslation();
 
   let {
-    resource, recordItemId, hideText = false,
-    accessControl = { enabled: true, hideIfUnauthorized: true }, onSuccess, undoable = false, class: className = '',
+    resource,
+    recordItemId,
+    label,
+    children,
+    hideText = false,
+    accessControl = { enabled: true, hideIfUnauthorized: true },
+    onSuccess,
+    undoable = false,
+    class: className = '',
   } = $props<{
     resource: string;
     recordItemId: string | number;
+    label?: string;
+    children?: Snippet;
     hideText?: boolean;
     accessControl?: ButtonAccessControl;
     onSuccess?: () => void;
@@ -29,6 +39,7 @@
     queryOptions: { enabled: accessControl?.enabled ?? true }
   }));
   const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+  const displayText = $derived(label ?? i18n.t('common.delete'));
   let confirming = $state(false);
 
   async function handleDelete() {
@@ -59,11 +70,20 @@
       variant="ghost"
       size={hideText ? 'icon' : 'sm'}
       class="text-destructive hover:text-destructive {className}"
+      aria-label={hideText ? displayText : undefined}
       disabled={!can.allowed}
       onclick={handleDelete}
     >
       <Trash2 class="h-4 w-4" />
-      {#if !hideText}<span class="ml-1">{i18n.t('common.delete')}</span>{/if}
+      {#if !hideText}
+        <span class="ml-1">
+          {#if children}
+            {@render children()}
+          {:else}
+            {displayText}
+          {/if}
+        </span>
+      {/if}
     </Button>
   {/if}
 {/if}

package/dist/components/buttons/DeleteButton.svelte.d.ts

@@ -1,7 +1,10 @@
+import type { Snippet } from 'svelte';
 import type { ButtonAccessControl } from './access-control';
 type $$ComponentProps = {
     resource: string;
     recordItemId: string | number;
+    label?: string;
+    children?: Snippet;
     hideText?: boolean;
     accessControl?: ButtonAccessControl;
     onSuccess?: () => void;

package/dist/components/buttons/EditButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Pencil } from '@lucide/svelte';
@@ -7,9 +8,19 @@
 
   const i18n = useTranslation();
 
-  let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
+  let {
+    resource,
+    recordItemId,
+    label,
+    children,
+    hideText = false,
+    accessControl = { enabled: true, hideIfUnauthorized: true },
+    class: className = '',
+  } = $props<{
     resource: string;
     recordItemId: string | number;
+    label?: string;
+    children?: Snippet;
     hideText?: boolean;
     accessControl?: ButtonAccessControl;
     class?: string;
@@ -24,6 +35,7 @@
     queryOptions: { enabled: accessControl?.enabled ?? true }
   }));
   const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+  const displayText = $derived(label ?? i18n.t('common.edit'));
 </script>
 
 {#if !hidden}
@@ -31,10 +43,19 @@
     variant="outline"
     size={hideText ? 'icon' : 'sm'}
     class={className}
+    aria-label={hideText ? displayText : undefined}
     disabled={!can.allowed}
     onclick={() => nav.edit(resource, recordItemId)}
   >
     <Pencil class="h-4 w-4" />
-    {#if !hideText}<span class="ml-1">{i18n.t('common.edit')}</span>{/if}
+    {#if !hideText}
+      <span class="ml-1">
+        {#if children}
+          {@render children()}
+        {:else}
+          {displayText}
+        {/if}
+      </span>
+    {/if}
   </Button>
 {/if}

package/dist/components/buttons/EditButton.svelte.d.ts

@@ -1,7 +1,10 @@
+import type { Snippet } from 'svelte';
 import type { ButtonAccessControl } from './access-control';
 type $$ComponentProps = {
     resource: string;
     recordItemId: string | number;
+    label?: string;
+    children?: Snippet;
     hideText?: boolean;
     accessControl?: ButtonAccessControl;
     class?: string;

package/dist/components/buttons/ExportButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { useExport, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Download } from '@lucide/svelte';
@@ -6,8 +7,17 @@
 
   const i18n = useTranslation();
 
-  let { resource, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
+  let {
+    resource,
+    label,
+    children,
+    hideText = false,
+    accessControl = { enabled: true, hideIfUnauthorized: true },
+    class: className = '',
+  } = $props<{
     resource: string;
+    label?: string;
+    children?: Snippet;
     hideText?: boolean;
     accessControl?: ButtonAccessControl;
     class?: string;
@@ -22,18 +32,27 @@
     queryOptions: { enabled: accessControl?.enabled ?? true }
   }));
   const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+  const displayText = $derived(label ?? i18n.t('common.export'));
 </script>
 
 {#if !hidden}
-
   <Button
     variant="outline"
     size={hideText ? 'icon' : 'sm'}
     class={className}
+    aria-label={hideText ? displayText : undefined}
     disabled={isLoading || !can.allowed}
     onclick={triggerExport}
   >
     <Download class="h-4 w-4" />
-    {#if !hideText}<span class="ml-1">{i18n.t('common.export')}</span>{/if}
+    {#if !hideText}
+      <span class="ml-1">
+        {#if children}
+          {@render children()}
+        {:else}
+          {displayText}
+        {/if}
+      </span>
+    {/if}
   </Button>
 {/if}

package/dist/components/buttons/ExportButton.svelte.d.ts

@@ -1,6 +1,9 @@
+import type { Snippet } from 'svelte';
 import type { ButtonAccessControl } from './access-control';
 type $$ComponentProps = {
     resource: string;
+    label?: string;
+    children?: Snippet;
     hideText?: boolean;
     accessControl?: ButtonAccessControl;
     class?: string;

package/dist/components/buttons/ImportButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { useImport, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Upload } from '@lucide/svelte';
@@ -6,8 +7,18 @@
 
   const i18n = useTranslation();
 
-  let { resource, hideText = false, onFinish, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
+  let {
+    resource,
+    label,
+    children,
+    hideText = false,
+    onFinish,
+    accessControl = { enabled: true, hideIfUnauthorized: true },
+    class: className = '',
+  } = $props<{
     resource: string;
+    label?: string;
+    children?: Snippet;
     hideText?: boolean;
     onFinish?: (result: { succeeded: unknown[]; errored: { request: unknown; error: unknown }[] }) => void;
     accessControl?: ButtonAccessControl;
@@ -21,6 +32,15 @@
     onFinish: (result) => onFinish?.(result),
   });
 
+  const can = useCan(() => ({
+    resource,
+    action: 'import',
+    params: accessControl?.params,
+    meta: accessControl?.meta,
+    queryOptions: { enabled: accessControl?.enabled ?? true },
+  }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+
   function triggerImport() {
     fileInput?.click();
   }
@@ -34,32 +54,34 @@
     }
   }
 
-  const can = useCan(() => ({
-    resource,
-    action: 'import',
-    params: accessControl?.params,
-    meta: accessControl?.meta,
-    queryOptions: { enabled: accessControl?.enabled ?? true }
-  }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+  const displayText = $derived(label ?? i18n.t('common.import'));
 </script>
 
 {#if !hidden}
-<input
-  bind:this={fileInput}
-  type="file"
-  accept=".csv"
-  style="display:none"
-  onchange={handleFileChange}
-/>
+  <input
+    type="file"
+    accept={importHook.inputProps.accept}
+    class="hidden"
+    bind:this={fileInput}
+    onchange={handleFileChange}
+  />
   <Button
     variant="outline"
     size={hideText ? 'icon' : 'sm'}
     class={className}
+    aria-label={hideText ? displayText : undefined}
     disabled={importHook.isLoading || !can.allowed}
     onclick={triggerImport}
   >
     <Upload class="h-4 w-4" />
-    {#if !hideText}<span class="ml-1">{i18n.t('common.import')}</span>{/if}
+    {#if !hideText}
+      <span class="ml-1">
+        {#if children}
+          {@render children()}
+        {:else}
+          {displayText}
+        {/if}
+      </span>
+    {/if}
   </Button>
 {/if}

package/dist/components/buttons/ImportButton.svelte.d.ts

@@ -1,6 +1,9 @@
+import type { Snippet } from 'svelte';
 import type { ButtonAccessControl } from './access-control';
 type $$ComponentProps = {
     resource: string;
+    label?: string;
+    children?: Snippet;
     hideText?: boolean;
     onFinish?: (result: {
         succeeded: unknown[];

package/dist/components/buttons/ListButton.svelte

@@ -1,23 +1,48 @@
 <script lang="ts">
-  import { useNavigation } from '@svadmin/core';
+  import type { Snippet } from 'svelte';
+  import { useNavigation, getResource, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { List } from '@lucide/svelte';
 
-  let { resource, hideText = false, class: className = '' } = $props<{
+  const i18n = useTranslation();
+
+  let { resource: resourceName, hideText = false, label, children, onBeforeNavigate, class: className = '' } = $props<{
     resource: string;
     hideText?: boolean;
+    label?: string;
+    children?: Snippet;
+    onBeforeNavigate?: (navigate: () => void) => void;
     class?: string;
   }>();
 
   const nav = useNavigation();
+  const res = $derived((() => {
+    try { return getResource(resourceName); } catch { return null; }
+  })());
+  const displayLabel = $derived(label ?? res?.label ?? i18n.t('common.list') ?? resourceName);
+
+  function navigateToList() {
+    const navigate = () => nav.list(resourceName);
+    if (onBeforeNavigate) onBeforeNavigate(navigate);
+    else navigate();
+  }
 </script>
 
 <Button
   variant="outline"
   size={hideText ? 'icon' : 'sm'}
   class={className}
-  onclick={() => nav.list(resource)}
+  aria-label={hideText ? displayLabel : undefined}
+  onclick={navigateToList}
 >
   <List class="h-4 w-4" />
-  {#if !hideText}<span class="ml-1">{resource}</span>{/if}
+  {#if !hideText}
+    <span class="ml-1">
+      {#if children}
+        {@render children()}
+      {:else}
+        {displayLabel}
+      {/if}
+    </span>
+  {/if}
 </Button>

package/dist/components/buttons/ListButton.svelte.d.ts

@@ -1,6 +1,10 @@
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     resource: string;
     hideText?: boolean;
+    label?: string;
+    children?: Snippet;
+    onBeforeNavigate?: (navigate: () => void) => void;
     class?: string;
 };
 declare const ListButton: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/buttons/RefreshButton.svelte

@@ -1,12 +1,21 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { useInvalidate, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { RefreshCw } from '@lucide/svelte';
 
   const i18n = useTranslation();
 
-  let { resource, hideText = false, class: className = '' } = $props<{
+  let {
+    resource,
+    label,
+    children,
+    hideText = false,
+    class: className = '',
+  } = $props<{
     resource: string;
+    label?: string;
+    children?: Snippet;
     hideText?: boolean;
     class?: string;
   }>();
@@ -25,14 +34,25 @@
     if (spinTimer) clearTimeout(spinTimer);
     spinTimer = setTimeout(() => { spinning = false; }, 600);
   }
+
+  const displayText = $derived(label ?? i18n.t('common.refresh'));
 </script>
 
 <Button
   variant="ghost"
   size={hideText ? 'icon' : 'sm'}
   class={className}
+  aria-label={hideText ? displayText : undefined}
   onclick={refresh}
 >
   <RefreshCw class="h-4 w-4 {spinning ? 'animate-spin' : ''}" />
-  {#if !hideText}<span class="ml-1">{i18n.t('common.retry')}</span>{/if}
+  {#if !hideText}
+    <span class="ml-1">
+      {#if children}
+        {@render children()}
+      {:else}
+        {displayText}
+      {/if}
+    </span>
+  {/if}
 </Button>

package/dist/components/buttons/RefreshButton.svelte.d.ts

@@ -1,5 +1,8 @@
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     resource: string;
+    label?: string;
+    children?: Snippet;
     hideText?: boolean;
     class?: string;
 };

package/dist/components/buttons/SaveButton.svelte

@@ -1,16 +1,28 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Save, Loader2 } from '@lucide/svelte';
 
   const i18n = useTranslation();
 
-  let { loading = false, hideText = false, type = 'submit', class: className = '' } = $props<{
+  let {
+    loading = false,
+    label,
+    children,
+    hideText = false,
+    type = 'submit',
+    class: className = '',
+  } = $props<{
     loading?: boolean;
+    label?: string;
+    children?: Snippet;
     hideText?: boolean;
     type?: 'submit' | 'button';
     class?: string;
   }>();
+
+  const displayText = $derived(label ?? i18n.t('common.save'));
 </script>
 
 <Button
@@ -18,6 +30,7 @@
   variant="default"
   size={hideText ? 'icon' : 'default'}
   class={className}
+  aria-label={hideText ? displayText : undefined}
   disabled={loading}
 >
   {#if loading}
@@ -25,5 +38,13 @@
   {:else}
     <Save class="h-4 w-4" />
   {/if}
-  {#if !hideText}<span class="ml-1">{i18n.t('common.save')}</span>{/if}
+  {#if !hideText}
+    <span class="ml-1">
+      {#if children}
+        {@render children()}
+      {:else}
+        {displayText}
+      {/if}
+    </span>
+  {/if}
 </Button>

package/dist/components/buttons/SaveButton.svelte.d.ts

@@ -1,5 +1,8 @@
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     loading?: boolean;
+    label?: string;
+    children?: Snippet;
     hideText?: boolean;
     type?: 'submit' | 'button';
     class?: string;