create-tauri-ui 0.3.2 → 0.3.3

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

@@ -1,110 +1,110 @@
-<script lang="ts">
-  import { CreditCard } from 'lucide-svelte';
-  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';
-  import { RadioGroup, RadioGroupItem } from '$components/ui/radio-group';
-</script>
-
-<Card>
-  <CardHeader>
-    <CardTitle>Payment Method</CardTitle>
-    <CardDescription>Add a new payment method to your account.</CardDescription>
-  </CardHeader>
-  <CardContent class="grid gap-6">
-    <RadioGroup value="card" class="grid grid-cols-3 gap-4">
-      <Label
-        for="card"
-        class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-      >
-        <RadioGroupItem value="card" id="card" class="sr-only" />
-        <CreditCard class="mb-3 h-6 w-6" />
-        Card
-      </Label>
-      <Label
-        for="paypal"
-        class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-      >
-        <RadioGroupItem value="paypal" id="paypal" class="sr-only" />
-        <Icons.paypal class="mb-3 h-6 w-6" />
-        Paypal
-      </Label>
-      <Label
-        for="apple"
-        class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-      >
-        <RadioGroupItem value="apple" id="apple" class="sr-only" />
-        <Icons.apple class="mb-3 h-6 w-6" />
-        Apple
-      </Label>
-    </RadioGroup>
-    <div class="grid gap-2">
-      <Label for="name">Name</Label>
-      <Input id="name" placeholder="First Last" />
-    </div>
-    <div class="grid gap-2">
-      <Label for="number">Card number</Label>
-      <Input id="number" placeholder="" />
-    </div>
-    <div class="grid grid-cols-3 gap-4">
-      <div class="grid gap-2">
-        <Label for="month">Expires</Label>
-        <Input id="month" placeholder="" />
-        <!-- <Select>
-					<SelectTrigger id="month">
-						<SelectValue placeholder="Month" />
-					</SelectTrigger>
-					<SelectContent>
-						<SelectItem value="1">January</SelectItem>
-						<SelectItem value="2">February</SelectItem>
-						<SelectItem value="3">March</SelectItem>
-						<SelectItem value="4">April</SelectItem>
-						<SelectItem value="5">May</SelectItem>
-						<SelectItem value="6">June</SelectItem>
-						<SelectItem value="7">July</SelectItem>
-						<SelectItem value="8">August</SelectItem>
-						<SelectItem value="9">September</SelectItem>
-						<SelectItem value="10">October</SelectItem>
-						<SelectItem value="11">November</SelectItem>
-						<SelectItem value="12">December</SelectItem>
-					</SelectContent>
-				</Select> -->
-      </div>
-      <div class="grid gap-2">
-        <Label for="year">Year</Label>
-        <Input id="year" placeholder="" />
-        <!-- <Select>
-					<SelectTrigger id="year">
-						<SelectValue placeholder="Year" />
-					</SelectTrigger>
-					<SelectContent>
-						{#each Array(10) as _, i}}
-							<SelectItem
-								key={i}
-								value={`${new Date().getFullYear() + i}`}
-							>
-								{new Date().getFullYear() + i}
-							</SelectItem>
-						{/each}
-					</SelectContent>
-				</Select> -->
-      </div>
-      <div class="grid gap-2">
-        <Label for="cvc">CVC</Label>
-        <Input id="cvc" placeholder="CVC" />
-      </div>
-    </div>
-  </CardContent>
-  <CardFooter>
-    <Button class="w-full">Continue</Button>
-  </CardFooter>
-</Card>
+<script lang="ts">
+  import { CreditCard } from 'lucide-svelte';
+  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';
+  import { RadioGroup, RadioGroupItem } from '$components/ui/radio-group';
+</script>
+
+<Card>
+  <CardHeader>
+    <CardTitle>Payment Method</CardTitle>
+    <CardDescription>Add a new payment method to your account.</CardDescription>
+  </CardHeader>
+  <CardContent class="grid gap-6">
+    <RadioGroup value="card" class="grid grid-cols-3 gap-4">
+      <Label
+        for="card"
+        class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
+      >
+        <RadioGroupItem value="card" id="card" class="sr-only" />
+        <CreditCard class="mb-3 h-6 w-6" />
+        Card
+      </Label>
+      <Label
+        for="paypal"
+        class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
+      >
+        <RadioGroupItem value="paypal" id="paypal" class="sr-only" />
+        <Icons.paypal class="mb-3 h-6 w-6" />
+        Paypal
+      </Label>
+      <Label
+        for="apple"
+        class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
+      >
+        <RadioGroupItem value="apple" id="apple" class="sr-only" />
+        <Icons.apple class="mb-3 h-6 w-6" />
+        Apple
+      </Label>
+    </RadioGroup>
+    <div class="grid gap-2">
+      <Label for="name">Name</Label>
+      <Input id="name" placeholder="First Last" />
+    </div>
+    <div class="grid gap-2">
+      <Label for="number">Card number</Label>
+      <Input id="number" placeholder="" />
+    </div>
+    <div class="grid grid-cols-3 gap-4">
+      <div class="grid gap-2">
+        <Label for="month">Expires</Label>
+        <Input id="month" placeholder="" />
+        <!-- <Select>
+					<SelectTrigger id="month">
+						<SelectValue placeholder="Month" />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="1">January</SelectItem>
+						<SelectItem value="2">February</SelectItem>
+						<SelectItem value="3">March</SelectItem>
+						<SelectItem value="4">April</SelectItem>
+						<SelectItem value="5">May</SelectItem>
+						<SelectItem value="6">June</SelectItem>
+						<SelectItem value="7">July</SelectItem>
+						<SelectItem value="8">August</SelectItem>
+						<SelectItem value="9">September</SelectItem>
+						<SelectItem value="10">October</SelectItem>
+						<SelectItem value="11">November</SelectItem>
+						<SelectItem value="12">December</SelectItem>
+					</SelectContent>
+				</Select> -->
+      </div>
+      <div class="grid gap-2">
+        <Label for="year">Year</Label>
+        <Input id="year" placeholder="" />
+        <!-- <Select>
+					<SelectTrigger id="year">
+						<SelectValue placeholder="Year" />
+					</SelectTrigger>
+					<SelectContent>
+						{#each Array(10) as _, i}}
+							<SelectItem
+								key={i}
+								value={`${new Date().getFullYear() + i}`}
+							>
+								{new Date().getFullYear() + i}
+							</SelectItem>
+						{/each}
+					</SelectContent>
+				</Select> -->
+      </div>
+      <div class="grid gap-2">
+        <Label for="cvc">CVC</Label>
+        <Input id="cvc" placeholder="CVC" />
+      </div>
+    </div>
+  </CardContent>
+  <CardFooter>
+    <Button class="w-full">Continue</Button>
+  </CardFooter>
+</Card>

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

@@ -1,71 +1,71 @@
-<script lang="ts">
-  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';
-  import { Select, SelectContent, SelectTrigger, SelectValue } from '$components/ui/select';
-  import SelectItem from '$components/ui/select/SelectItem.svelte';
-  import { Textarea } from '$components/ui/textarea';
-</script>
-
-<Card>
-  <CardHeader>
-    <CardTitle>Report an issue</CardTitle>
-    <CardDescription>What area are you having problems with?</CardDescription>
-  </CardHeader>
-  <CardContent class="grid gap-6">
-    <div class="grid grid-cols-2 gap-4">
-      <div class="grid gap-2">
-        <Label for="area">Area</Label>
-        <Select value="billing">
-          <SelectTrigger id="area">
-            <SelectValue placeholder="Select" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="team">Team</SelectItem>
-            <SelectItem value="billing">Billing</SelectItem>
-            <SelectItem value="account">Account</SelectItem>
-            <SelectItem value="deployments">Deployments</SelectItem>
-            <SelectItem value="support">Support</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-      <div class="grid gap-2">
-        <Label for="security-level">Security Level</Label>
-        <Select value="2">
-          <SelectTrigger id="security-level">
-            <SelectValue placeholder="Select level" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="1">Severity 1 (Highest)</SelectItem>
-            <SelectItem value="2">Severity 2</SelectItem>
-            <SelectItem value="3">Severity 3</SelectItem>
-            <SelectItem value="4">Severity 4 (Lowest)</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-    </div>
-    <div class="grid gap-2">
-      <Label for="subject">Subject</Label>
-      <Input id="subject" placeholder="I need help with..." />
-    </div>
-    <div class="grid gap-2">
-      <Label for="description">Description</Label>
-      <Textarea
-        id="description"
-        placeholder="Please include all information relevant to your issue."
-      />
-    </div>
-  </CardContent>
-  <CardFooter class="justify-between space-x-2">
-    <Button variant="ghost">Cancel</Button>
-    <Button>Submit</Button>
-  </CardFooter>
-</Card>
+<script lang="ts">
+  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';
+  import { Select, SelectContent, SelectTrigger, SelectValue } from '$components/ui/select';
+  import SelectItem from '$components/ui/select/SelectItem.svelte';
+  import { Textarea } from '$components/ui/textarea';
+</script>
+
+<Card>
+  <CardHeader>
+    <CardTitle>Report an issue</CardTitle>
+    <CardDescription>What area are you having problems with?</CardDescription>
+  </CardHeader>
+  <CardContent class="grid gap-6">
+    <div class="grid grid-cols-2 gap-4">
+      <div class="grid gap-2">
+        <Label for="area">Area</Label>
+        <Select value="billing">
+          <SelectTrigger id="area">
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="team">Team</SelectItem>
+            <SelectItem value="billing">Billing</SelectItem>
+            <SelectItem value="account">Account</SelectItem>
+            <SelectItem value="deployments">Deployments</SelectItem>
+            <SelectItem value="support">Support</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div class="grid gap-2">
+        <Label for="security-level">Security Level</Label>
+        <Select value="2">
+          <SelectTrigger id="security-level">
+            <SelectValue placeholder="Select level" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="1">Severity 1 (Highest)</SelectItem>
+            <SelectItem value="2">Severity 2</SelectItem>
+            <SelectItem value="3">Severity 3</SelectItem>
+            <SelectItem value="4">Severity 4 (Lowest)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+    <div class="grid gap-2">
+      <Label for="subject">Subject</Label>
+      <Input id="subject" placeholder="I need help with..." />
+    </div>
+    <div class="grid gap-2">
+      <Label for="description">Description</Label>
+      <Textarea
+        id="description"
+        placeholder="Please include all information relevant to your issue."
+      />
+    </div>
+  </CardContent>
+  <CardFooter class="justify-between space-x-2">
+    <Button variant="ghost">Cancel</Button>
+    <Button>Submit</Button>
+  </CardFooter>
+</Card>

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

@@ -1,91 +1,91 @@
-<script lang="ts">
-  import { Avatar, AvatarFallback, AvatarImage } from '$components/ui/avatar';
-  import { Button } from '$components/ui/button';
-  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$components/ui/card';
-  import { Input } from '$components/ui/input';
-  import { Select, SelectContent, SelectTrigger, SelectValue } from '$components/ui/select';
-  import SelectItem from '$components/ui/select/SelectItem.svelte';
-  import { Separator } from '$components/ui/separator';
-</script>
-
-<Card>
-  <CardHeader>
-    <CardTitle>Share this document</CardTitle>
-    <CardDescription>Anyone with the link can view this document.</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <div class="flex space-x-2">
-      <Input value="http://example.com/link/to/document" readOnly />
-      <Button variant="secondary" class="shrink-0">Copy Link</Button>
-    </div>
-    <Separator class="my-4" />
-    <div class="space-y-4">
-      <h4 class="text-sm font-medium">People with access</h4>
-      <div class="grid gap-6">
-        <div class="flex items-center justify-between space-x-4">
-          <div class="flex items-center space-x-4">
-            <Avatar>
-              <AvatarImage src="/avatars/03.png" />
-              <AvatarFallback>OM</AvatarFallback>
-            </Avatar>
-            <div>
-              <p class="text-sm font-medium leading-none">Olivia Martin</p>
-              <p class="text-sm text-muted-foreground">m@example.com</p>
-            </div>
-          </div>
-          <Select value="edit">
-            <SelectTrigger class="ml-auto w-[110px]">
-              <SelectValue placeholder="Select" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="edit">Can edit</SelectItem>
-              <SelectItem value="view">Can view</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        <div class="flex items-center justify-between space-x-4">
-          <div class="flex items-center space-x-4">
-            <Avatar>
-              <AvatarImage src="/avatars/05.png" />
-              <AvatarFallback>IN</AvatarFallback>
-            </Avatar>
-            <div>
-              <p class="text-sm font-medium leading-none">Isabella Nguyen</p>
-              <p class="text-sm text-muted-foreground">b@example.com</p>
-            </div>
-          </div>
-          <Select value="view">
-            <SelectTrigger class="ml-auto w-[110px]">
-              <SelectValue placeholder="Select" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="edit">Can edit</SelectItem>
-              <SelectItem value="view">Can view</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        <div class="flex items-center justify-between space-x-4">
-          <div class="flex items-center space-x-4">
-            <Avatar>
-              <AvatarImage src="/avatars/01.png" />
-              <AvatarFallback>SD</AvatarFallback>
-            </Avatar>
-            <div>
-              <p class="text-sm font-medium leading-none">Sofia Davis</p>
-              <p class="text-sm text-muted-foreground">p@example.com</p>
-            </div>
-          </div>
-          <Select value="view">
-            <SelectTrigger class="ml-auto w-[110px]">
-              <SelectValue placeholder="Select" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="edit">Can edit</SelectItem>
-              <SelectItem value="view">Can view</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-    </div>
-  </CardContent>
-</Card>
+<script lang="ts">
+  import { Avatar, AvatarFallback, AvatarImage } from '$components/ui/avatar';
+  import { Button } from '$components/ui/button';
+  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$components/ui/card';
+  import { Input } from '$components/ui/input';
+  import { Select, SelectContent, SelectTrigger, SelectValue } from '$components/ui/select';
+  import SelectItem from '$components/ui/select/SelectItem.svelte';
+  import { Separator } from '$components/ui/separator';
+</script>
+
+<Card>
+  <CardHeader>
+    <CardTitle>Share this document</CardTitle>
+    <CardDescription>Anyone with the link can view this document.</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <div class="flex space-x-2">
+      <Input value="http://example.com/link/to/document" readOnly />
+      <Button variant="secondary" class="shrink-0">Copy Link</Button>
+    </div>
+    <Separator class="my-4" />
+    <div class="space-y-4">
+      <h4 class="text-sm font-medium">People with access</h4>
+      <div class="grid gap-6">
+        <div class="flex items-center justify-between space-x-4">
+          <div class="flex items-center space-x-4">
+            <Avatar>
+              <AvatarImage src="/avatars/03.png" />
+              <AvatarFallback>OM</AvatarFallback>
+            </Avatar>
+            <div>
+              <p class="text-sm font-medium leading-none">Olivia Martin</p>
+              <p class="text-sm text-muted-foreground">m@example.com</p>
+            </div>
+          </div>
+          <Select value="edit">
+            <SelectTrigger class="ml-auto w-[110px]">
+              <SelectValue placeholder="Select" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="edit">Can edit</SelectItem>
+              <SelectItem value="view">Can view</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div class="flex items-center justify-between space-x-4">
+          <div class="flex items-center space-x-4">
+            <Avatar>
+              <AvatarImage src="/avatars/05.png" />
+              <AvatarFallback>IN</AvatarFallback>
+            </Avatar>
+            <div>
+              <p class="text-sm font-medium leading-none">Isabella Nguyen</p>
+              <p class="text-sm text-muted-foreground">b@example.com</p>
+            </div>
+          </div>
+          <Select value="view">
+            <SelectTrigger class="ml-auto w-[110px]">
+              <SelectValue placeholder="Select" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="edit">Can edit</SelectItem>
+              <SelectItem value="view">Can view</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div class="flex items-center justify-between space-x-4">
+          <div class="flex items-center space-x-4">
+            <Avatar>
+              <AvatarImage src="/avatars/01.png" />
+              <AvatarFallback>SD</AvatarFallback>
+            </Avatar>
+            <div>
+              <p class="text-sm font-medium leading-none">Sofia Davis</p>
+              <p class="text-sm text-muted-foreground">p@example.com</p>
+            </div>
+          </div>
+          <Select value="view">
+            <SelectTrigger class="ml-auto w-[110px]">
+              <SelectValue placeholder="Select" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="edit">Can edit</SelectItem>
+              <SelectItem value="view">Can view</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+  </CardContent>
+</Card>

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

@@ -1,5 +1,5 @@
-<script lang="ts">
-  import { DashboardPage } from '$components/docs';
-</script>
-
-<DashboardPage />
+<script lang="ts">
+  import { DashboardPage } from '$components/docs';
+</script>
+
+<DashboardPage />

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

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