create-tauri-ui 0.3.2 → 0.3.3

package/templates/sveltekit/src/routes/authentication/UserAuthForm.svelte

@@ -1,61 +1,61 @@
-<script lang="ts">
-  import { Icons } from '$components/docs';
-  import { Button } from '$components/ui/button';
-  import { Input } from '$components/ui/input';
-  import { Label } from '$components/ui/label';
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-
-  let isLoading = false;
-  async function onSubmit() {
-    isLoading = true;
-
-    setTimeout(() => {
-      isLoading = false;
-    }, 3000);
-  }
-</script>
-
-<div class={cn('grid gap-6', className)} {...$$restProps}>
-  <form on:submit|preventDefault={onSubmit}>
-    <div class="grid gap-2">
-      <div class="grid gap-1">
-        <Label class="sr-only" for="email">Email</Label>
-        <Input
-          id="email"
-          placeholder="name@example.com"
-          type="email"
-          autoCapitalize="none"
-          autoComplete="email"
-          autoCorrect="off"
-          disabled={isLoading}
-        />
-      </div>
-      <Button disabled={isLoading}>
-        {#if isLoading}
-          <Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-        {/if}
-        Sign In with Email
-      </Button>
-    </div>
-  </form>
-  <div class="relative">
-    <div class="absolute inset-0 flex items-center">
-      <span class="w-full border-t" />
-    </div>
-    <div class="relative flex justify-center text-xs uppercase">
-      <span class="bg-background px-2 text-muted-foreground"> Or continue with </span>
-    </div>
-  </div>
-  <Button variant="outline" type="button" disabled={isLoading}>
-    {#if isLoading}
-      <Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-    {:else}
-      <Icons.gitHub class="mr-2 h-4 w-4" />
-    {/if}
-    {' '}
-    Github
-  </Button>
-</div>
+<script lang="ts">
+  import { Icons } from '$components/docs';
+  import { Button } from '$components/ui/button';
+  import { Input } from '$components/ui/input';
+  import { Label } from '$components/ui/label';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+
+  let isLoading = false;
+  async function onSubmit() {
+    isLoading = true;
+
+    setTimeout(() => {
+      isLoading = false;
+    }, 3000);
+  }
+</script>
+
+<div class={cn('grid gap-6', className)} {...$$restProps}>
+  <form on:submit|preventDefault={onSubmit}>
+    <div class="grid gap-2">
+      <div class="grid gap-1">
+        <Label class="sr-only" for="email">Email</Label>
+        <Input
+          id="email"
+          placeholder="name@example.com"
+          type="email"
+          autoCapitalize="none"
+          autoComplete="email"
+          autoCorrect="off"
+          disabled={isLoading}
+        />
+      </div>
+      <Button disabled={isLoading}>
+        {#if isLoading}
+          <Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+        {/if}
+        Sign In with Email
+      </Button>
+    </div>
+  </form>
+  <div class="relative">
+    <div class="absolute inset-0 flex items-center">
+      <span class="w-full border-t" />
+    </div>
+    <div class="relative flex justify-center text-xs uppercase">
+      <span class="bg-background px-2 text-muted-foreground"> Or continue with </span>
+    </div>
+  </div>
+  <Button variant="outline" type="button" disabled={isLoading}>
+    {#if isLoading}
+      <Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+    {:else}
+      <Icons.gitHub class="mr-2 h-4 w-4" />
+    {/if}
+    {' '}
+    Github
+  </Button>
+</div>

package/templates/sveltekit/src/routes/cards/+page.svelte

@@ -1,26 +1,26 @@
-<script lang="ts">
-  import DemoCookieSettings from './CookieSettings.svelte';
-  import DemoCreateAccount from './CreateAccount.svelte';
-  import DemoContainer from './DemoContainer.svelte';
-  import DemoNotifications from './Notifications.svelte';
-  import DemoPaymentMethod from './PaymentMethod.svelte';
-</script>
-
-<div class="items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3">
-  <div class="col-span-3 grid items-start gap-6 lg:col-span-1">
-    <DemoContainer>
-      <DemoCreateAccount />
-    </DemoContainer>
-    <DemoContainer>
-      <DemoNotifications />
-    </DemoContainer>
-  </div>
-  <div class="col-span-3 grid items-start gap-6 lg:col-span-2">
-    <DemoContainer>
-      <DemoPaymentMethod />
-    </DemoContainer>
-    <DemoContainer>
-      <DemoCookieSettings />
-    </DemoContainer>
-  </div>
-</div>
+<script lang="ts">
+  import DemoCookieSettings from './CookieSettings.svelte';
+  import DemoCreateAccount from './CreateAccount.svelte';
+  import DemoContainer from './DemoContainer.svelte';
+  import DemoNotifications from './Notifications.svelte';
+  import DemoPaymentMethod from './PaymentMethod.svelte';
+</script>
+
+<div class="items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3">
+  <div class="col-span-3 grid items-start gap-6 lg:col-span-1">
+    <DemoContainer>
+      <DemoCreateAccount />
+    </DemoContainer>
+    <DemoContainer>
+      <DemoNotifications />
+    </DemoContainer>
+  </div>
+  <div class="col-span-3 grid items-start gap-6 lg:col-span-2">
+    <DemoContainer>
+      <DemoPaymentMethod />
+    </DemoContainer>
+    <DemoContainer>
+      <DemoCookieSettings />
+    </DemoContainer>
+  </div>
+</div>

package/templates/sveltekit/src/routes/cards/+page.ts

@@ -1,7 +1,7 @@
-import type { PageLoad } from './$types';
-
-export const load: PageLoad = async () => {
-  return {
-    title: 'Card Example'
-  };
-};
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+  return {
+    title: 'Card Example'
+  };
+};

package/templates/sveltekit/src/routes/cards/CookieSettings.svelte

@@ -1,52 +1,52 @@
-<script lang="ts">
-  import { Button } from '$components/ui/button';
-  import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardFooter,
-    CardHeader,
-    CardTitle
-  } from '$components/ui/card';
-  import { Label } from '$components/ui/label';
-  import { Switch } from '$components/ui/switch';
-</script>
-
-<Card>
-  <CardHeader>
-    <CardTitle>Cookie Settings</CardTitle>
-    <CardDescription>Manage your cookie settings here.</CardDescription>
-  </CardHeader>
-  <CardContent class="grid gap-6">
-    <div class="flex items-center justify-between space-x-2">
-      <Label for="necessary" class="flex flex-col space-y-1">
-        <span>Strictly Necessary</span>
-        <span class="font-normal leading-snug text-muted-foreground">
-          These cookies are essential in order to use the website and use its features.
-        </span>
-      </Label>
-      <Switch id="necessary" defaultChecked />
-    </div>
-    <div class="flex items-center justify-between space-x-2">
-      <Label for="functional" class="flex flex-col space-y-1">
-        <span>Functional Cookies</span>
-        <span class="font-normal leading-snug text-muted-foreground">
-          These cookies allow the website to provide personalized functionality.
-        </span>
-      </Label>
-      <Switch id="functional" />
-    </div>
-    <div class="flex items-center justify-between space-x-2">
-      <Label for="performance" class="flex flex-col space-y-1">
-        <span>Performance Cookies</span>
-        <span class="font-normal leading-snug text-muted-foreground">
-          These cookies help to improve the performance of the website.
-        </span>
-      </Label>
-      <Switch id="performance" />
-    </div>
-  </CardContent>
-  <CardFooter>
-    <Button variant="outline" class="w-full">Save preferences</Button>
-  </CardFooter>
-</Card>
+<script lang="ts">
+  import { Button } from '$components/ui/button';
+  import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle
+  } from '$components/ui/card';
+  import { Label } from '$components/ui/label';
+  import { Switch } from '$components/ui/switch';
+</script>
+
+<Card>
+  <CardHeader>
+    <CardTitle>Cookie Settings</CardTitle>
+    <CardDescription>Manage your cookie settings here.</CardDescription>
+  </CardHeader>
+  <CardContent class="grid gap-6">
+    <div class="flex items-center justify-between space-x-2">
+      <Label for="necessary" class="flex flex-col space-y-1">
+        <span>Strictly Necessary</span>
+        <span class="font-normal leading-snug text-muted-foreground">
+          These cookies are essential in order to use the website and use its features.
+        </span>
+      </Label>
+      <Switch id="necessary" defaultChecked />
+    </div>
+    <div class="flex items-center justify-between space-x-2">
+      <Label for="functional" class="flex flex-col space-y-1">
+        <span>Functional Cookies</span>
+        <span class="font-normal leading-snug text-muted-foreground">
+          These cookies allow the website to provide personalized functionality.
+        </span>
+      </Label>
+      <Switch id="functional" />
+    </div>
+    <div class="flex items-center justify-between space-x-2">
+      <Label for="performance" class="flex flex-col space-y-1">
+        <span>Performance Cookies</span>
+        <span class="font-normal leading-snug text-muted-foreground">
+          These cookies help to improve the performance of the website.
+        </span>
+      </Label>
+      <Switch id="performance" />
+    </div>
+  </CardContent>
+  <CardFooter>
+    <Button variant="outline" class="w-full">Save preferences</Button>
+  </CardFooter>
+</Card>

package/templates/sveltekit/src/routes/cards/CreateAccount.svelte

@@ -1,52 +1,52 @@
-<script lang="ts">
-  import { Icons } from '$components/docs';
-  import { Button } from '$components/ui/button';
-  import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardFooter,
-    CardHeader,
-    CardTitle
-  } from '$components/ui/card';
-  import { Input } from '$components/ui/input';
-  import { Label } from '$components/ui/label';
-</script>
-
-<Card>
-  <CardHeader class="space-y-1">
-    <CardTitle class="text-2xl">Create an account</CardTitle>
-    <CardDescription>Enter your email below to create your account</CardDescription>
-  </CardHeader>
-  <CardContent class="grid gap-4">
-    <div class="grid grid-cols-2 gap-6">
-      <Button variant="outline">
-        <Icons.gitHub class="mr-2 h-4 w-4" />
-        Github
-      </Button>
-      <Button variant="outline">
-        <Icons.google class="mr-2 h-4 w-4" />
-        Google
-      </Button>
-    </div>
-    <div class="relative">
-      <div class="absolute inset-0 flex items-center">
-        <span class="w-full border-t" />
-      </div>
-      <div class="relative flex justify-center text-xs uppercase">
-        <span class="bg-background px-2 text-muted-foreground"> Or continue with </span>
-      </div>
-    </div>
-    <div class="grid gap-2">
-      <Label for="email">Email</Label>
-      <Input id="email" type="email" placeholder="m@example.com" />
-    </div>
-    <div class="grid gap-2">
-      <Label for="password">Password</Label>
-      <Input id="password" type="password" />
-    </div>
-  </CardContent>
-  <CardFooter>
-    <Button class="w-full">Create account</Button>
-  </CardFooter>
-</Card>
+<script lang="ts">
+  import { Icons } from '$components/docs';
+  import { Button } from '$components/ui/button';
+  import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle
+  } from '$components/ui/card';
+  import { Input } from '$components/ui/input';
+  import { Label } from '$components/ui/label';
+</script>
+
+<Card>
+  <CardHeader class="space-y-1">
+    <CardTitle class="text-2xl">Create an account</CardTitle>
+    <CardDescription>Enter your email below to create your account</CardDescription>
+  </CardHeader>
+  <CardContent class="grid gap-4">
+    <div class="grid grid-cols-2 gap-6">
+      <Button variant="outline">
+        <Icons.gitHub class="mr-2 h-4 w-4" />
+        Github
+      </Button>
+      <Button variant="outline">
+        <Icons.google class="mr-2 h-4 w-4" />
+        Google
+      </Button>
+    </div>
+    <div class="relative">
+      <div class="absolute inset-0 flex items-center">
+        <span class="w-full border-t" />
+      </div>
+      <div class="relative flex justify-center text-xs uppercase">
+        <span class="bg-background px-2 text-muted-foreground"> Or continue with </span>
+      </div>
+    </div>
+    <div class="grid gap-2">
+      <Label for="email">Email</Label>
+      <Input id="email" type="email" placeholder="m@example.com" />
+    </div>
+    <div class="grid gap-2">
+      <Label for="password">Password</Label>
+      <Input id="password" type="password" />
+    </div>
+  </CardContent>
+  <CardFooter>
+    <Button class="w-full">Create account</Button>
+  </CardFooter>
+</Card>

package/templates/sveltekit/src/routes/cards/DemoContainer.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-</script>
-
-<div class={cn('flex items-center justify-center [&>div]:w-full', className)} {...$$restProps}>
-  <slot />
-</div>
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<div class={cn('flex items-center justify-center [&>div]:w-full', className)} {...$$restProps}>
+  <slot />
+</div>

package/templates/sveltekit/src/routes/cards/Notifications.svelte

@@ -1,38 +1,38 @@
-<script lang="ts">
-  import { AtSign, Bell, BellOff } from 'lucide-svelte';
-  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$components/ui/card';
-</script>
-
-<Card>
-  <CardHeader>
-    <CardTitle>Notifications</CardTitle>
-    <CardDescription>Choose what you want to be notified about.</CardDescription>
-  </CardHeader>
-  <CardContent class="grid gap-1 p-1.5">
-    <div
-      class="flex items-center space-x-4 rounded-md p-2 hover:bg-accent hover:text-accent-foreground"
-    >
-      <Bell class="h-5 w-5" />
-      <div class="space-y-1">
-        <p class="text-sm font-medium leading-none">Everything</p>
-        <p class="text-sm text-muted-foreground">Email digest, mentions & all activity.</p>
-      </div>
-    </div>
-    <div class="flex items-center space-x-4 rounded-md bg-accent p-2 text-accent-foreground">
-      <AtSign class="h-5 w-5" />
-      <div class="space-y-1">
-        <p class="text-sm font-medium leading-none">Available</p>
-        <p class="text-sm text-muted-foreground">Only mentions and comments.</p>
-      </div>
-    </div>
-    <div
-      class="flex items-center space-x-4 rounded-md p-2 hover:bg-accent hover:text-accent-foreground"
-    >
-      <BellOff class="h-5 w-5" />
-      <div class="space-y-1">
-        <p class="text-sm font-medium leading-none">Ignoring</p>
-        <p class="text-sm text-muted-foreground">Turn off all notifications.</p>
-      </div>
-    </div>
-  </CardContent>
-</Card>
+<script lang="ts">
+  import { AtSign, Bell, BellOff } from 'lucide-svelte';
+  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$components/ui/card';
+</script>
+
+<Card>
+  <CardHeader>
+    <CardTitle>Notifications</CardTitle>
+    <CardDescription>Choose what you want to be notified about.</CardDescription>
+  </CardHeader>
+  <CardContent class="grid gap-1 p-1.5">
+    <div
+      class="flex items-center space-x-4 rounded-md p-2 hover:bg-accent hover:text-accent-foreground"
+    >
+      <Bell class="h-5 w-5" />
+      <div class="space-y-1">
+        <p class="text-sm font-medium leading-none">Everything</p>
+        <p class="text-sm text-muted-foreground">Email digest, mentions & all activity.</p>
+      </div>
+    </div>
+    <div class="flex items-center space-x-4 rounded-md bg-accent p-2 text-accent-foreground">
+      <AtSign class="h-5 w-5" />
+      <div class="space-y-1">
+        <p class="text-sm font-medium leading-none">Available</p>
+        <p class="text-sm text-muted-foreground">Only mentions and comments.</p>
+      </div>
+    </div>
+    <div
+      class="flex items-center space-x-4 rounded-md p-2 hover:bg-accent hover:text-accent-foreground"
+    >
+      <BellOff class="h-5 w-5" />
+      <div class="space-y-1">
+        <p class="text-sm font-medium leading-none">Ignoring</p>
+        <p class="text-sm text-muted-foreground">Turn off all notifications.</p>
+      </div>
+    </div>
+  </CardContent>
+</Card>