@svadmin/ui 0.29.3 → 0.30.0

package/dist/components/buttons/CloneButton.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { useNavigation, useCan, t } from '@svadmin/core';
+  import { Button } from '../ui/button/index.js';
+  import { Copy } from '@lucide/svelte';
+
+  let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
+    resource: string;
+    recordItemId: string | number;
+    hideText?: boolean;
+    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
+    class?: string;
+  }>();
+
+  const nav = useNavigation();
+  const can = useCan(() => ({ resource, action: 'create', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+</script>
+
+{#if !hidden}
+  <Button
+    variant="outline"
+    size={hideText ? 'icon' : 'sm'}
+    class={className}
+    disabled={!can.allowed}
+    onclick={() => nav.clone(resource, recordItemId)}
+  >
+    <Copy class="h-4 w-4" />
+    {#if !hideText}<span class="ml-1">{t('common.clone')}</span>{/if}
+  </Button>
+{/if}

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

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    resource: string;
+    recordItemId: string | number;
+    hideText?: boolean;
+    accessControl?: {
+        enabled?: boolean;
+        hideIfUnauthorized?: boolean;
+    };
+    class?: string;
+};
+declare const CloneButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type CloneButton = ReturnType<typeof CloneButton>;
+export default CloneButton;

package/dist/components/buttons/CreateButton.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { useNavigation, useCan, t } from '@svadmin/core';
+  import { Button } from '../ui/button/index.js';
+  import { Plus } from '@lucide/svelte';
+
+  let { resource, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
+    resource: string;
+    hideText?: boolean;
+    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
+    class?: string;
+  }>();
+
+  const nav = useNavigation();
+  const can = useCan(() => ({ resource, action: 'create', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+</script>
+
+{#if !hidden}
+  <Button
+    variant="default"
+    size={hideText ? 'icon' : 'default'}
+    class={className}
+    disabled={!can.allowed}
+    onclick={() => nav.create(resource)}
+  >
+    <Plus class="h-4 w-4" />
+    {#if !hideText}<span class="ml-1">{t('common.create')}</span>{/if}
+  </Button>
+{/if}

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

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    resource: string;
+    hideText?: boolean;
+    accessControl?: {
+        enabled?: boolean;
+        hideIfUnauthorized?: boolean;
+    };
+    class?: string;
+};
+declare const CreateButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type CreateButton = ReturnType<typeof CreateButton>;
+export default CreateButton;

package/dist/components/buttons/DeleteButton.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { useDelete, useCan, t } from '@svadmin/core';
+  import { Button } from '../ui/button/index.js';
+  import { Trash2 } from '@lucide/svelte';
+
+  let {
+    resource, recordItemId, hideText = false,
+    accessControl = { enabled: true, hideIfUnauthorized: true }, onSuccess, undoable = false, class: className = '',
+  } = $props<{
+    resource: string;
+    recordItemId: string | number;
+    hideText?: boolean;
+    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
+    onSuccess?: () => void;
+    undoable?: boolean;
+    class?: string;
+  }>();
+
+  const deleteMut = useDelete({ get resource() { return resource; }, get mutationMode() { return undoable ? 'undoable' as const : 'pessimistic' as const; } });
+  const can = useCan(() => ({ resource, action: 'delete', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+  let confirming = $state(false);
+
+  async function handleDelete() {
+    if (!confirming) {
+      confirming = true;
+      return;
+    }
+    confirming = false;
+    await deleteMut.mutation.mutateAsync({ id: recordItemId, resource });
+    onSuccess?.();
+  }
+
+  function cancel() { confirming = false; }
+</script>
+
+{#if !hidden}
+  {#if confirming}
+    <div class="inline-flex items-center gap-1">
+      <Button variant="destructive" size="sm" onclick={handleDelete}>
+        {t('common.confirm')}
+      </Button>
+      <Button variant="ghost" size="sm" onclick={cancel}>
+        {t('common.cancel')}
+      </Button>
+    </div>
+  {:else}
+    <Button
+      variant="ghost"
+      size={hideText ? 'icon' : 'sm'}
+      class="text-destructive hover:text-destructive {className}"
+      disabled={!can.allowed}
+      onclick={handleDelete}
+    >
+      <Trash2 class="h-4 w-4" />
+      {#if !hideText}<span class="ml-1">{t('common.delete')}</span>{/if}
+    </Button>
+  {/if}
+{/if}

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

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    resource: string;
+    recordItemId: string | number;
+    hideText?: boolean;
+    accessControl?: {
+        enabled?: boolean;
+        hideIfUnauthorized?: boolean;
+    };
+    onSuccess?: () => void;
+    undoable?: boolean;
+    class?: string;
+};
+declare const DeleteButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type DeleteButton = ReturnType<typeof DeleteButton>;
+export default DeleteButton;

package/dist/components/buttons/EditButton.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { useNavigation, useCan, t } from '@svadmin/core';
+  import { Button } from '../ui/button/index.js';
+  import { Pencil } from '@lucide/svelte';
+
+  let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
+    resource: string;
+    recordItemId: string | number;
+    hideText?: boolean;
+    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
+    class?: string;
+  }>();
+
+  const nav = useNavigation();
+  const can = useCan(() => ({ resource, action: 'edit', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+</script>
+
+{#if !hidden}
+  <Button
+    variant="outline"
+    size={hideText ? 'icon' : 'sm'}
+    class={className}
+    disabled={!can.allowed}
+    onclick={() => nav.edit(resource, recordItemId)}
+  >
+    <Pencil class="h-4 w-4" />
+    {#if !hideText}<span class="ml-1">{t('common.edit')}</span>{/if}
+  </Button>
+{/if}

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

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    resource: string;
+    recordItemId: string | number;
+    hideText?: boolean;
+    accessControl?: {
+        enabled?: boolean;
+        hideIfUnauthorized?: boolean;
+    };
+    class?: string;
+};
+declare const EditButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditButton = ReturnType<typeof EditButton>;
+export default EditButton;

package/dist/components/buttons/ExportButton.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { useExport, useCan, t } from '@svadmin/core';
+  import { Button } from '../ui/button/index.js';
+  import { Download } from '@lucide/svelte';
+
+  let { resource, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
+    resource: string;
+    hideText?: boolean;
+    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
+    class?: string;
+  }>();
+
+  const { triggerExport, isLoading } = useExport({ get resource() { return resource; } });
+  const can = useCan(() => ({ resource, action: 'export', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+</script>
+
+{#if !hidden}
+
+  <Button
+    variant="outline"
+    size={hideText ? 'icon' : 'sm'}
+    class={className}
+    disabled={isLoading || !can.allowed}
+    onclick={triggerExport}
+  >
+    <Download class="h-4 w-4" />
+    {#if !hideText}<span class="ml-1">{t('common.export')}</span>{/if}
+  </Button>
+{/if}

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

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    resource: string;
+    hideText?: boolean;
+    accessControl?: {
+        enabled?: boolean;
+        hideIfUnauthorized?: boolean;
+    };
+    class?: string;
+};
+declare const ExportButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ExportButton = ReturnType<typeof ExportButton>;
+export default ExportButton;

package/dist/components/buttons/ImportButton.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { useImport, useCan, t, type UseImportOptions } from '@svadmin/core';
+  import { Button } from '../ui/button/index.js';
+  import { Upload } from '@lucide/svelte';
+
+  let { resource, hideText = false, onFinish, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
+    resource: string;
+    hideText?: boolean;
+    onFinish?: (result: { succeeded: unknown[]; errored: { request: unknown; error: unknown }[] }) => void;
+    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
+    class?: string;
+  }>();
+
+  let fileInput: HTMLInputElement | undefined = $state();
+
+  const importHook = useImport({
+    get resource() { return resource; },
+    onFinish: (result) => onFinish?.(result),
+  });
+
+  function triggerImport() {
+    fileInput?.click();
+  }
+
+  function handleFileChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (file) {
+      importHook.handleChange({ file });
+      input.value = ''; // reset for re-import
+    }
+  }
+
+  const can = useCan(() => ({ resource, action: 'import', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+</script>
+
+{#if !hidden}
+<input
+  bind:this={fileInput}
+  type="file"
+  accept=".csv"
+  style="display:none"
+  onchange={handleFileChange}
+/>
+  <Button
+    variant="outline"
+    size={hideText ? 'icon' : 'sm'}
+    class={className}
+    disabled={importHook.isLoading || !can.allowed}
+    onclick={triggerImport}
+  >
+    <Upload class="h-4 w-4" />
+    {#if !hideText}<span class="ml-1">{t('common.import')}</span>{/if}
+  </Button>
+{/if}

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

@@ -0,0 +1,19 @@
+type $$ComponentProps = {
+    resource: string;
+    hideText?: boolean;
+    onFinish?: (result: {
+        succeeded: unknown[];
+        errored: {
+            request: unknown;
+            error: unknown;
+        }[];
+    }) => void;
+    accessControl?: {
+        enabled?: boolean;
+        hideIfUnauthorized?: boolean;
+    };
+    class?: string;
+};
+declare const ImportButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImportButton = ReturnType<typeof ImportButton>;
+export default ImportButton;

package/dist/components/buttons/ListButton.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { useNavigation, t } from '@svadmin/core';
+  import { Button } from '../ui/button/index.js';
+  import { List } from '@lucide/svelte';
+
+  let { resource, hideText = false, class: className = '' } = $props<{
+    resource: string;
+    hideText?: boolean;
+    class?: string;
+  }>();
+
+  const nav = useNavigation();
+</script>
+
+<Button
+  variant="outline"
+  size={hideText ? 'icon' : 'sm'}
+  class={className}
+  onclick={() => nav.list(resource)}
+>
+  <List class="h-4 w-4" />
+  {#if !hideText}<span class="ml-1">{resource}</span>{/if}
+</Button>

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    resource: string;
+    hideText?: boolean;
+    class?: string;
+};
+declare const ListButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ListButton = ReturnType<typeof ListButton>;
+export default ListButton;

package/dist/components/buttons/RefreshButton.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { useInvalidate, t } from '@svadmin/core';
+  import { Button } from '../ui/button/index.js';
+  import { RefreshCw } from '@lucide/svelte';
+
+  let { resource, hideText = false, class: className = '' } = $props<{
+    resource: string;
+    hideText?: boolean;
+    class?: string;
+  }>();
+
+  const invalidate = useInvalidate();
+  let spinning = $state(false);
+  let spinTimer: ReturnType<typeof setTimeout> | undefined;
+
+  $effect(() => {
+    return () => { if (spinTimer) clearTimeout(spinTimer); };
+  });
+
+  function refresh() {
+    spinning = true;
+    invalidate({ resource, invalidates: ['list', 'many'] });
+    if (spinTimer) clearTimeout(spinTimer);
+    spinTimer = setTimeout(() => { spinning = false; }, 600);
+  }
+</script>
+
+<Button
+  variant="ghost"
+  size={hideText ? 'icon' : 'sm'}
+  class={className}
+  onclick={refresh}
+>
+  <RefreshCw class="h-4 w-4 {spinning ? 'animate-spin' : ''}" />
+  {#if !hideText}<span class="ml-1">{t('common.retry')}</span>{/if}
+</Button>

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    resource: string;
+    hideText?: boolean;
+    class?: string;
+};
+declare const RefreshButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type RefreshButton = ReturnType<typeof RefreshButton>;
+export default RefreshButton;

package/dist/components/buttons/SaveButton.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { t } from '@svadmin/core';
+  import { Button } from '../ui/button/index.js';
+  import { Save, Loader2 } from '@lucide/svelte';
+
+  let { loading = false, hideText = false, type = 'submit', class: className = '' } = $props<{
+    loading?: boolean;
+    hideText?: boolean;
+    type?: 'submit' | 'button';
+    class?: string;
+  }>();
+</script>
+
+<Button
+  {type}
+  variant="default"
+  size={hideText ? 'icon' : 'default'}
+  class={className}
+  disabled={loading}
+>
+  {#if loading}
+    <Loader2 class="h-4 w-4 animate-spin" />
+  {:else}
+    <Save class="h-4 w-4" />
+  {/if}
+  {#if !hideText}<span class="ml-1">{t('common.save')}</span>{/if}
+</Button>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    loading?: boolean;
+    hideText?: boolean;
+    type?: 'submit' | 'button';
+    class?: string;
+};
+declare const SaveButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type SaveButton = ReturnType<typeof SaveButton>;
+export default SaveButton;

package/dist/components/buttons/ShowButton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { useNavigation, useCan, t } from '@svadmin/core';
+  import { Button } from '../ui/button/index.js';
+  import { Eye } from '@lucide/svelte';
+
+  let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
+    resource: string;
+    recordItemId: string | number;
+    hideText?: boolean;
+    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
+    class?: string;
+  }>();
+
+  const nav = useNavigation();
+  const can = useCan(() => ({ resource, action: 'show', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+</script>
+
+{#if !hidden}
+
+  <Button
+    variant="ghost"
+    size={hideText ? 'icon' : 'sm'}
+    class={className}
+    disabled={!can.allowed}
+    onclick={() => nav.show(resource, recordItemId)}
+  >
+    <Eye class="h-4 w-4" />
+    {#if !hideText}<span class="ml-1">{t('common.detail')}</span>{/if}
+  </Button>
+{/if}

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

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    resource: string;
+    recordItemId: string | number;
+    hideText?: boolean;
+    accessControl?: {
+        enabled?: boolean;
+        hideIfUnauthorized?: boolean;
+    };
+    class?: string;
+};
+declare const ShowButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ShowButton = ReturnType<typeof ShowButton>;
+export default ShowButton;

package/dist/components/buttons/index.d.ts

@@ -0,0 +1,10 @@
+export { default as CreateButton } from './CreateButton.svelte';
+export { default as EditButton } from './EditButton.svelte';
+export { default as DeleteButton } from './DeleteButton.svelte';
+export { default as ShowButton } from './ShowButton.svelte';
+export { default as ListButton } from './ListButton.svelte';
+export { default as RefreshButton } from './RefreshButton.svelte';
+export { default as ExportButton } from './ExportButton.svelte';
+export { default as ImportButton } from './ImportButton.svelte';
+export { default as SaveButton } from './SaveButton.svelte';
+export { default as CloneButton } from './CloneButton.svelte';

package/dist/components/buttons/index.js

@@ -0,0 +1,10 @@
+export { default as CreateButton } from './CreateButton.svelte';
+export { default as EditButton } from './EditButton.svelte';
+export { default as DeleteButton } from './DeleteButton.svelte';
+export { default as ShowButton } from './ShowButton.svelte';
+export { default as ListButton } from './ListButton.svelte';
+export { default as RefreshButton } from './RefreshButton.svelte';
+export { default as ExportButton } from './ExportButton.svelte';
+export { default as ImportButton } from './ImportButton.svelte';
+export { default as SaveButton } from './SaveButton.svelte';
+export { default as CloneButton } from './CloneButton.svelte';

package/dist/components/charts/BarChart.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  interface DataPoint {
+    label: string;
+    value: number;
+    color?: string;
+  }
+
+  interface Props {
+    data: DataPoint[];
+    height?: number;
+    /** Show value labels on top of bars */
+    showValues?: boolean;
+    class?: string;
+  }
+
+  let { data, height = 200, showValues = true, class: className = '' }: Props = $props();
+
+  const maxValue = $derived(Math.max(...data.map(d => d.value), 1));
+  const barWidth = $derived(Math.max(20, Math.min(60, 400 / data.length)));
+  const gap = $derived(Math.max(4, barWidth * 0.3));
+  const totalWidth = $derived(data.length * (barWidth + gap) - gap + 40);
+</script>
+
+<div class="w-full overflow-x-auto {className}">
+  <svg viewBox="0 0 {totalWidth} {height + 30}" class="w-full" style="min-width: {Math.min(totalWidth, 300)}px;">
+    <!-- Bars -->
+    {#each data as point, i}
+      {@const barHeight = (point.value / maxValue) * (height - 20)}
+      {@const x = 20 + i * (barWidth + gap)}
+      {@const y = height - barHeight}
+
+      <!-- Bar with animation -->
+      <rect
+        {x}
+        {y}
+        width={barWidth}
+        height={barHeight}
+        rx="4"
+        fill={point.color || 'var(--primary)'}
+        opacity="0.85"
+        class="transition-all duration-500 hover:opacity-100"
+      >
+        <animate attributeName="height" from="0" to={barHeight} dur="0.6s" fill="freeze" calcMode="spline" keySplines="0.16 1 0.3 1" />
+        <animate attributeName="y" from={height} to={y} dur="0.6s" fill="freeze" calcMode="spline" keySplines="0.16 1 0.3 1" />
+      </rect>
+
+      <!-- Value label -->
+      {#if showValues}
+        <text
+          x={x + barWidth / 2}
+          y={y - 6}
+          text-anchor="middle"
+          fill="var(--muted-foreground)"
+          font-size="11"
+          font-weight="500"
+        >{point.value}</text>
+      {/if}
+
+      <!-- X-axis label -->
+      <text
+        x={x + barWidth / 2}
+        y={height + 16}
+        text-anchor="middle"
+        fill="var(--muted-foreground)"
+        font-size="10"
+      >{point.label}</text>
+    {/each}
+  </svg>
+</div>

package/dist/components/charts/BarChart.svelte.d.ts

@@ -0,0 +1,15 @@
+interface DataPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+interface Props {
+    data: DataPoint[];
+    height?: number;
+    /** Show value labels on top of bars */
+    showValues?: boolean;
+    class?: string;
+}
+declare const BarChart: import("svelte").Component<Props, {}, "">;
+type BarChart = ReturnType<typeof BarChart>;
+export default BarChart;