@svadmin/create 0.33.0 → 0.34.0

package/template/src/App.svelte

@@ -15,7 +15,6 @@
   resources={[...resolved.resources]}
   title="svadmin Demo"
   locale="en"
-  themeConfig={{ layoutPreset: 'clean-flat', colorPreset: 'stripe' }}
 >
   {#snippet dashboard()}<Dashboard />{/snippet}
   {#snippet loginPage()}<Login />{/snippet}

package/template/src/pages/Dashboard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { useList } from '@svadmin/core';
   import { posts, users, comments } from '../resource-contracts';
-  import { Button, DataState, MetricBlock } from '@svadmin/ui';
+  import { AutoTable, Button, DashboardPage, DataState, MetricBlock, PageSection } from '@svadmin/ui';
 
   const postsQuery = useList({ resource: posts, pagination: { current: 1, pageSize: 1 } });
   const usersQuery = useList({ resource: users, pagination: { current: 1, pageSize: 1 } });
@@ -15,78 +15,28 @@
 
   const hasMetricError = $derived(stats.some(stat => stat.query.isError));
 
-  const recentPosts = useList({ resource: posts, pagination: { current: 1, pageSize: 5 } });
-  const recentUsers = useList({ resource: users, pagination: { current: 1, pageSize: 5 } });
 </script>
 
-<div class="space-y-4">
-  <h1 class="text-xl font-semibold text-foreground">Dashboard</h1>
-
+<DashboardPage title="Dashboard">
   {#if hasMetricError}
     <DataState state="error" title="Some totals are unavailable" retry={() => {
       for (const stat of stats) if (stat.query.isError && !stat.query.isFetching) void stat.query.refetch();
     }} />
   {/if}
-  <div class="grid gap-4 sm:grid-cols-3">
+  {#snippet metrics()}
     {#each stats as stat (stat.label)}
       <MetricBlock label={stat.label} value={stat.query.isError ? '—' : stat.query.data?.total ?? '—'} loading={stat.query.isLoading} />
     {/each}
-  </div>
-
-  <!-- Recent Data -->
-  <div class="grid gap-6 lg:grid-cols-2">
-    <section class="min-w-0">
-      <div class="flex items-center justify-between border-b py-3">
-        <h2 class="font-semibold text-foreground">Recent Posts</h2>
-        <a href="#/posts" class="text-sm text-primary hover:underline">View all</a>
-      </div>
-      {#if recentPosts.isLoading}
-        <DataState state="loading" />
-      {:else if recentPosts.isError}
-        <DataState state="error" retry={() => { if (!recentPosts.isFetching) void recentPosts.refetch(); }} />
-      {:else}
-      <div class="divide-y">
-        {#each recentPosts.data?.data ?? [] as post, _i (_i)}
-          <div class="flex items-center justify-between py-3">
-            <div class="min-w-0">
-              <p class="break-words text-sm font-medium text-foreground">{post.title}</p>
-              <p class="text-xs text-muted-foreground">User #{post.userId}</p>
-            </div>
-          </div>
-        {:else}
-          <DataState state="empty">
-            {#snippet action()}<Button href="#/posts/create">Create post</Button>{/snippet}
-          </DataState>
-        {/each}
-      </div>
-      {/if}
-    </section>
-
-    <section class="min-w-0">
-      <div class="flex items-center justify-between border-b py-3">
-        <h2 class="font-semibold text-foreground">Users</h2>
-        <a href="#/users" class="text-sm text-primary hover:underline">View all</a>
-      </div>
-      {#if recentUsers.isLoading}
-        <DataState state="loading" />
-      {:else if recentUsers.isError}
-        <DataState state="error" retry={() => { if (!recentUsers.isFetching) void recentUsers.refetch(); }} />
-      {:else}
-      <div class="divide-y">
-        {#each recentUsers.data?.data ?? [] as user, _i (_i)}
-          <div class="flex items-center justify-between py-3">
-            <div class="min-w-0">
-              <p class="break-words text-sm font-medium text-foreground">{user.name}</p>
-              <p class="break-words text-xs text-muted-foreground">{user.email}</p>
-            </div>
-          </div>
-        {:else}
-          <DataState state="empty">
-            {#snippet action()}<Button href="#/users">View users</Button>{/snippet}
-          </DataState>
-        {/each}
-      </div>
-      {/if}
-    </section>
-  </div>
-</div>
+  {/snippet}
+
+  <PageSection title="Posts">
+    {#snippet actions()}<Button variant="ghost" href="#/posts">View all</Button>{/snippet}
+    <AutoTable resourceName="posts" showHeader={false} selectable={false} syncWithLocation={false} />
+  </PageSection>
+  {#snippet secondary()}
+    <PageSection title="Users">
+      {#snippet actions()}<Button variant="ghost" href="#/users">View all</Button>{/snippet}
+      <AutoTable resourceName="users" showHeader={false} selectable={false} syncWithLocation={false} />
+    </PageSection>
+  {/snippet}
+</DashboardPage>

package/template/src/resource-contracts.ts

@@ -1,10 +1,15 @@
 import { Type } from '@sinclair/typebox';
-import { defineResource } from '@svadmin/core';
+import { defineResource } from '@svadmin/core/resource-contract';
 
+const postInput = Type.Object({
+  userId: Type.Number(), title: Type.String({ minLength: 1 }), body: Type.String(),
+});
 export const posts = defineResource('posts', {
   record: Type.Object({
     id: Type.Number(), userId: Type.Number(), title: Type.String(), body: Type.String(),
   }),
+  create: postInput,
+  update: Type.Partial(postInput),
 });
 export const users = defineResource('users', {
   record: Type.Object({
@@ -16,14 +21,28 @@ export const users = defineResource('users', {
     }),
     company: Type.Object({ name: Type.String(), catchPhrase: Type.String(), bs: Type.String() }),
   }),
+  update: Type.Partial(Type.Object({
+    name: Type.String(), username: Type.String(), email: Type.String(),
+    phone: Type.String(), website: Type.String(),
+  })),
+});
+const commentInput = Type.Object({
+  postId: Type.Number(), name: Type.String({ minLength: 1 }), email: Type.String(), body: Type.String(),
 });
 export const comments = defineResource('comments', {
   record: Type.Object({
     id: Type.Number(), postId: Type.Number(), name: Type.String(), email: Type.String(), body: Type.String(),
   }),
+  create: commentInput,
+  update: Type.Partial(commentInput),
+});
+const todoInput = Type.Object({
+  userId: Type.Number(), title: Type.String({ minLength: 1 }), completed: Type.Boolean(),
 });
 export const todos = defineResource('todos', {
   record: Type.Object({
     id: Type.Number(), userId: Type.Number(), title: Type.String(), completed: Type.Boolean(),
   }),
+  create: todoInput,
+  update: Type.Partial(todoInput),
 });