npm - create-tauri-ui - Versions diffs - 0.3.2 → 0.3.3 - Mend

create-tauri-ui 0.3.2 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (245) hide show

package/templates/sveltekit/postcss.config.cjs CHANGED Viewed

@@ -1,13 +1,13 @@
-const tailwindcss = require('tailwindcss');
-const autoprefixer = require('autoprefixer');
-const config = {
-  plugins: [
-    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
-    tailwindcss(),
-    //But others, like autoprefixer, need to run after,
-    autoprefixer
-  ]
-};
-module.exports = config;
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+const config = {
+  plugins: [
+    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+    tailwindcss(),
+    //But others, like autoprefixer, need to run after,
+    autoprefixer
+  ]
+};
+module.exports = config;

package/templates/sveltekit/src/app.d.ts CHANGED Viewed

@@ -1,18 +1,18 @@
-// See https://kit.svelte.dev/docs/types#app
-// for information about these interfaces
-declare global {
-  namespace App {
-    // interface Error {}
-    // interface Locals {}
-    // interface PageData {}
-    // interface Platform {}
-  }
-  namespace svelteHTML {
-    interface HTMLAttributes<T> {
-      'on:copy-done'?: (e: CustomEvent<T>) => void;
-      'on:copy-error'?: (e: CustomEvent<T>) => void;
-    }
-  }
-}
-export {};
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface Platform {}
+  }
+  namespace svelteHTML {
+    interface HTMLAttributes<T> {
+      'on:copy-done'?: (e: CustomEvent<T>) => void;
+      'on:copy-error'?: (e: CustomEvent<T>) => void;
+    }
+  }
+}
+export {};

package/templates/sveltekit/src/app.html CHANGED Viewed

@@ -1,16 +1,16 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
-    <meta name="viewport" content="width=device-width" />
-    %sveltekit.head%
-  </head>
-  <body
-    data-sveltekit-preload-data="hover"
-    class="min-h-screen bg-background font-sans antialiased"
-  >
-    <div style="display: contents" class="flex min-h-screen flex-col">%sveltekit.body%</div>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+    <meta name="viewport" content="width=device-width" />
+    %sveltekit.head%
+  </head>
+  <body
+    data-sveltekit-preload-data="hover"
+    class="min-h-screen bg-background font-sans antialiased"
+  >
+    <div style="display: contents" class="flex min-h-screen flex-col">%sveltekit.body%</div>
+  </body>
+</html>

package/templates/sveltekit/src/index.test.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-import { describe, expect, it } from 'vitest';
-describe('sum test', () => {
-  it('adds 1 + 2 to equal 3', () => {
-    expect(1 + 2).toBe(3);
-  });
-});
+import { describe, expect, it } from 'vitest';
+describe('sum test', () => {
+  it('adds 1 + 2 to equal 3', () => {
+    expect(1 + 2).toBe(3);
+  });
+});

package/templates/sveltekit/src/lib/components/docs/TailwindIndicator.svelte CHANGED Viewed

@@ -1,10 +1,10 @@
-<div
-  class="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white"
->
-  <div class="block sm:hidden">xs</div>
-  <div class="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">sm</div>
-  <div class="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
-  <div class="hidden lg:block xl:hidden 2xl:hidden">lg</div>
-  <div class="hidden xl:block 2xl:hidden">xl</div>
-  <div class="hidden 2xl:block">2xl</div>
-</div>
+<div
+  class="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white"
+>
+  <div class="block sm:hidden">xs</div>
+  <div class="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">sm</div>
+  <div class="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
+  <div class="hidden lg:block xl:hidden 2xl:hidden">lg</div>
+  <div class="hidden xl:block 2xl:hidden">xl</div>
+  <div class="hidden 2xl:block">2xl</div>
+</div>

package/templates/sveltekit/src/lib/components/docs/charts/Bar.svelte CHANGED Viewed

@@ -1,152 +1,152 @@
-<script lang="ts">
-  import { scaleLinear } from 'd3-scale';
-  const data = [
-    {
-      name: 'Jan',
-      total: Math.floor(Math.random() * 5000) + 1000
-    },
-    {
-      name: 'Feb',
-      total: Math.floor(Math.random() * 5000) + 1000
-    },
-    {
-      name: 'Mar',
-      total: Math.floor(Math.random() * 5000) + 1000
-    },
-    {
-      name: 'Apr',
-      total: Math.floor(Math.random() * 5000) + 1000
-    },
-    {
-      name: 'May',
-      total: Math.floor(Math.random() * 5000) + 1000
-    },
-    {
-      name: 'Jun',
-      total: Math.floor(Math.random() * 5000) + 1000
-    },
-    {
-      name: 'Jul',
-      total: Math.floor(Math.random() * 5000) + 1000
-    },
-    {
-      name: 'Aug',
-      total: Math.floor(Math.random() * 5000) + 1000
-    },
-    {
-      name: 'Sep',
-      total: Math.floor(Math.random() * 5000) + 1000
-    },
-    {
-      name: 'Oct',
-      total: Math.floor(Math.random() * 5000) + 1000
-    },
-    {
-      name: 'Nov',
-      total: Math.floor(Math.random() * 5000) + 1000
-    },
-    {
-      name: 'Dec',
-      total: Math.floor(Math.random() * 5000) + 1000
-    }
-  ];
-  const xTicks = data.map((d) => d.name);
-  const yTicks = [0, 1500, 3000, 4500, 6000];
-  const padding = { top: 20, right: 15, bottom: 20, left: 45 };
-  let width = 500;
-  let height = 200;
-  function formatMobile(tick: number | string) {
-    return "'" + tick.toString().slice(-2);
-  }
-  $: xScale = scaleLinear()
-    .domain([0, xTicks.length])
-    .range([padding.left, width - padding.right]);
-  $: yScale = scaleLinear()
-    .domain([0, Math.max.apply(null, yTicks)])
-    .range([height - padding.bottom, padding.top]);
-  $: innerWidth = width - (padding.left + padding.right);
-  $: barWidth = innerWidth / xTicks.length;
-</script>
-<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
-  <svg>
-    <!-- y axis -->
-    <g class="axis y-axis">
-      {#each yTicks as tick}
-        <g class="text-xs" transform="translate(0, {yScale(tick)})">
-          <text
-            stroke="none"
-            font-size="12"
-            orientation="left"
-            width="60"
-            height="310"
-            x="57"
-            y="-4"
-            fill="#888888"
-            text-anchor="end"><tspan x="36" dy="0.355em">${tick}</tspan></text
-          >
-        </g>
-      {/each}
-    </g>
-    <!-- x axis -->
-    <g class="axis x-axis">
-      {#each data as point, i}
-        <g class="text-xs" transform="translate({xScale(i)},{height})">
-          <text
-            stroke="none"
-            font-size="12"
-            orientation="bottom"
-            width="531"
-            height="30"
-            x={barWidth / 2}
-            y="-15"
-            fill="#888888"
-            text-anchor="middle"
-            ><tspan x={barWidth / 2} dy="0.71em"
-              >{width > 380 ? point.name : formatMobile(point.name)}</tspan
-            ></text
-          >
-        </g>
-      {/each}
-    </g>
-    <g>
-      {#each data as point, i}
-        <rect
-          x={xScale(i) + 2}
-          y={yScale(point.total)}
-          width={barWidth - 8}
-          height={yScale(0) - yScale(point.total)}
-          fill="#adfa1d"
-          rx="4"
-          ry="4"
-        />
-      {/each}
-    </g>
-  </svg>
-</div>
-<style>
-  .chart {
-    width: 100%;
-    margin: 0 auto;
-  }
-  svg {
-    position: relative;
-    width: 100%;
-    height: 350px;
-  }
-  rect {
-    max-width: 51px;
-  }
-</style>
+<script lang="ts">
+  import { scaleLinear } from 'd3-scale';
+  const data = [
+    {
+      name: 'Jan',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Feb',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Mar',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Apr',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'May',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Jun',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Jul',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Aug',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Sep',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Oct',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Nov',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Dec',
+      total: Math.floor(Math.random() * 5000) + 1000
+    }
+  ];
+  const xTicks = data.map((d) => d.name);
+  const yTicks = [0, 1500, 3000, 4500, 6000];
+  const padding = { top: 20, right: 15, bottom: 20, left: 45 };
+  let width = 500;
+  let height = 200;
+  function formatMobile(tick: number | string) {
+    return "'" + tick.toString().slice(-2);
+  }
+  $: xScale = scaleLinear()
+    .domain([0, xTicks.length])
+    .range([padding.left, width - padding.right]);
+  $: yScale = scaleLinear()
+    .domain([0, Math.max.apply(null, yTicks)])
+    .range([height - padding.bottom, padding.top]);
+  $: innerWidth = width - (padding.left + padding.right);
+  $: barWidth = innerWidth / xTicks.length;
+</script>
+<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
+  <svg>
+    <!-- y axis -->
+    <g class="axis y-axis">
+      {#each yTicks as tick}
+        <g class="text-xs" transform="translate(0, {yScale(tick)})">
+          <text
+            stroke="none"
+            font-size="12"
+            orientation="left"
+            width="60"
+            height="310"
+            x="57"
+            y="-4"
+            fill="#888888"
+            text-anchor="end"><tspan x="36" dy="0.355em">${tick}</tspan></text
+          >
+        </g>
+      {/each}
+    </g>
+    <!-- x axis -->
+    <g class="axis x-axis">
+      {#each data as point, i}
+        <g class="text-xs" transform="translate({xScale(i)},{height})">
+          <text
+            stroke="none"
+            font-size="12"
+            orientation="bottom"
+            width="531"
+            height="30"
+            x={barWidth / 2}
+            y="-15"
+            fill="#888888"
+            text-anchor="middle"
+            ><tspan x={barWidth / 2} dy="0.71em"
+              >{width > 380 ? point.name : formatMobile(point.name)}</tspan
+            ></text
+          >
+        </g>
+      {/each}
+    </g>
+    <g>
+      {#each data as point, i}
+        <rect
+          x={xScale(i) + 2}
+          y={yScale(point.total)}
+          width={barWidth - 8}
+          height={yScale(0) - yScale(point.total)}
+          fill="#adfa1d"
+          rx="4"
+          ry="4"
+        />
+      {/each}
+    </g>
+  </svg>
+</div>
+<style>
+  .chart {
+    width: 100%;
+    margin: 0 auto;
+  }
+  svg {
+    position: relative;
+    width: 100%;
+    height: 350px;
+  }
+  rect {
+    max-width: 51px;
+  }
+</style>

package/templates/sveltekit/src/lib/components/docs/dashboard/DashboardPage.svelte CHANGED Viewed

@@ -1,108 +1,108 @@
-<script lang="ts">
-  import { Activity, CreditCard, DollarSign, Download, Users } from 'lucide-svelte';
-  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 { Tabs, TabsContent, TabsList, TabsTrigger } from '$components/ui/tabs';
-  import MainNav from './MainNav.svelte';
-  import Overview from './Overview.svelte';
-  import RecentSales from './RecentSales.svelte';
-  import Search from './Search.svelte';
-</script>
-<div class="flex-col md:flex">
-  <div class="border-b">
-    <div class="flex h-16 items-center px-4">
-      <MainNav class="mx-6" />
-      <div class="ml-auto flex items-center space-x-4">
-        <Search />
-        <Avatar className="h-8 w-8">
-          <AvatarImage src="/avatars/01.png" alt="@shadcn" />
-          <AvatarFallback>SC</AvatarFallback>
-        </Avatar>
-      </div>
-    </div>
-  </div>
-  <div class="flex-1 space-y-4 p-8 pt-6">
-    <div class="flex items-center justify-between space-y-2">
-      <h2 class="text-3xl font-bold tracking-tight">Dashboard</h2>
-      <div class="flex items-center space-x-2">
-        <Button size="sm">
-          <Download class="mr-2 h-4 w-4" />
-          Download
-        </Button>
-      </div>
-    </div>
-    <Tabs value="overview" class="space-y-4">
-      <TabsList>
-        <TabsTrigger value="overview">Overview</TabsTrigger>
-        <TabsTrigger value="analytics" disabled>Analytics</TabsTrigger>
-        <TabsTrigger value="reports" disabled>Reports</TabsTrigger>
-        <TabsTrigger value="notifications" disabled>Notifications</TabsTrigger>
-      </TabsList>
-      <TabsContent value="overview" class="space-y-4">
-        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-          <Card>
-            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle class="text-sm font-medium">Total Revenue</CardTitle>
-              <DollarSign class="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div class="text-2xl font-bold">$45,231.89</div>
-              <p class="text-xs text-muted-foreground">+20.1% from last month</p>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle class="text-sm font-medium">Subscriptions</CardTitle>
-              <Users class="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div class="text-2xl font-bold">+2350</div>
-              <p class="text-xs text-muted-foreground">+180.1% from last month</p>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle class="text-sm font-medium">Sales</CardTitle>
-              <CreditCard class="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div class="text-2xl font-bold">+12,234</div>
-              <p class="text-xs text-muted-foreground">+19% from last month</p>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle class="text-sm font-medium">Active Now</CardTitle>
-              <Activity class="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div class="text-2xl font-bold">+573</div>
-              <p class="text-xs text-muted-foreground">+201 since last hour</p>
-            </CardContent>
-          </Card>
-        </div>
-        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
-          <Card class="col-span-4">
-            <CardHeader>
-              <CardTitle>Overview</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Overview />
-            </CardContent>
-          </Card>
-          <Card class="col-span-3">
-            <CardHeader>
-              <CardTitle>Recent Sales</CardTitle>
-              <CardDescription>You made 265 sales this month.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <RecentSales />
-            </CardContent>
-          </Card>
-        </div>
-      </TabsContent>
-    </Tabs>
-  </div>
-</div>
+<script lang="ts">
+  import { Activity, CreditCard, DollarSign, Download, Users } from 'lucide-svelte';
+  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 { Tabs, TabsContent, TabsList, TabsTrigger } from '$components/ui/tabs';
+  import MainNav from './MainNav.svelte';
+  import Overview from './Overview.svelte';
+  import RecentSales from './RecentSales.svelte';
+  import Search from './Search.svelte';
+</script>
+<div class="flex-col md:flex">
+  <div class="border-b">
+    <div class="flex h-16 items-center px-4">
+      <MainNav class="mx-6" />
+      <div class="ml-auto flex items-center space-x-4">
+        <Search />
+        <Avatar className="h-8 w-8">
+          <AvatarImage src="/avatars/01.png" alt="@shadcn" />
+          <AvatarFallback>SC</AvatarFallback>
+        </Avatar>
+      </div>
+    </div>
+  </div>
+  <div class="flex-1 space-y-4 p-8 pt-6">
+    <div class="flex items-center justify-between space-y-2">
+      <h2 class="text-3xl font-bold tracking-tight">Dashboard</h2>
+      <div class="flex items-center space-x-2">
+        <Button size="sm">
+          <Download class="mr-2 h-4 w-4" />
+          Download
+        </Button>
+      </div>
+    </div>
+    <Tabs value="overview" class="space-y-4">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="analytics" disabled>Analytics</TabsTrigger>
+        <TabsTrigger value="reports" disabled>Reports</TabsTrigger>
+        <TabsTrigger value="notifications" disabled>Notifications</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview" class="space-y-4">
+        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          <Card>
+            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle class="text-sm font-medium">Total Revenue</CardTitle>
+              <DollarSign class="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div class="text-2xl font-bold">$45,231.89</div>
+              <p class="text-xs text-muted-foreground">+20.1% from last month</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle class="text-sm font-medium">Subscriptions</CardTitle>
+              <Users class="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div class="text-2xl font-bold">+2350</div>
+              <p class="text-xs text-muted-foreground">+180.1% from last month</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle class="text-sm font-medium">Sales</CardTitle>
+              <CreditCard class="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div class="text-2xl font-bold">+12,234</div>
+              <p class="text-xs text-muted-foreground">+19% from last month</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle class="text-sm font-medium">Active Now</CardTitle>
+              <Activity class="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div class="text-2xl font-bold">+573</div>
+              <p class="text-xs text-muted-foreground">+201 since last hour</p>
+            </CardContent>
+          </Card>
+        </div>
+        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
+          <Card class="col-span-4">
+            <CardHeader>
+              <CardTitle>Overview</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Overview />
+            </CardContent>
+          </Card>
+          <Card class="col-span-3">
+            <CardHeader>
+              <CardTitle>Recent Sales</CardTitle>
+              <CardDescription>You made 265 sales this month.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <RecentSales />
+            </CardContent>
+          </Card>
+        </div>
+      </TabsContent>
+    </Tabs>
+  </div>
+</div>