kaze 1.4.0 → 2.0.1

data/stubs/inertia-vue-ts/app/javascript/Layouts/AuthenticatedLayout.vue

@@ -1,152 +1,22 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import ApplicationLogo from '@/Components/ApplicationLogo.vue'
-import Dropdown from '@/Components/Dropdown.vue'
-import DropdownLink from '@/Components/DropdownLink.vue'
-import NavLink from '@/Components/NavLink.vue'
-import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue'
-import { Link } from '@inertiajs/vue3'
-import { dashboard_path, logout_path, profile_edit_path } from '@/routes'
-
-const showingNavigationDropdown = ref(false)
-
-const { pathname = '' } = typeof window !== 'undefined' ? window.location : {}
+import AppShell from '@/Components/AppShell.vue'
+import AppSidebar from '@/Components/AppSidebar.vue'
+import AppSidebarHeader from '@/Components/AppSidebarHeader.vue'
+import { SidebarInset } from '@/Components/ui/sidebar'
+import { BreadcrumbItem } from '@/types'
+
+withDefaults(defineProps<{ breadcrumbs?: BreadcrumbItem[] }>(), {
+  breadcrumbs: () => [],
+})
 </script>
 
 <template>
-  <div>
-    <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
-      <nav class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700">
-        <!-- Primary Navigation Menu -->
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div class="flex justify-between h-16">
-            <div class="flex">
-              <!-- Logo -->
-              <div class="shrink-0 flex items-center">
-                <Link href="/">
-                  <ApplicationLogo class="block h-9 w-auto fill-current text-red-800 dark:text-red-200" />
-                </Link>
-              </div>
-
-              <!-- Navigation Links -->
-              <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
-                <NavLink :href="dashboard_path()" :active="pathname.match(/dashboard/) != null"> Dashboard </NavLink>
-              </div>
-            </div>
-
-            <div class="hidden sm:flex sm:items-center sm:ms-6">
-              <!-- Settings Dropdown -->
-              <div class="ms-3 relative">
-                <Dropdown align="right" width="48">
-                  <template #trigger>
-                    <span class="inline-flex rounded-md">
-                      <button
-                        type="button"
-                        class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-hidden transition ease-in-out duration-150"
-                      >
-                        {{ $page.props.auth.user.name }}
-
-                        <svg
-                          class="ms-2 -me-0.5 h-4 w-4"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 20 20"
-                          fill="currentColor"
-                        >
-                          <path
-                            fill-rule="evenodd"
-                            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                            clip-rule="evenodd"
-                          />
-                        </svg>
-                      </button>
-                    </span>
-                  </template>
-
-                  <template #content>
-                    <DropdownLink :href="profile_edit_path()"> Profile </DropdownLink>
-                    <DropdownLink :href="logout_path()" method="post" as="button"> Log Out </DropdownLink>
-                  </template>
-                </Dropdown>
-              </div>
-            </div>
-
-            <!-- Hamburger -->
-            <div class="-me-2 flex items-center sm:hidden">
-              <button
-                @click="showingNavigationDropdown = !showingNavigationDropdown"
-                class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-hidden focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out"
-              >
-                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                  <path
-                    :class="{
-                      hidden: showingNavigationDropdown,
-                      'inline-flex': !showingNavigationDropdown,
-                    }"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M4 6h16M4 12h16M4 18h16"
-                  />
-                  <path
-                    :class="{
-                      hidden: !showingNavigationDropdown,
-                      'inline-flex': showingNavigationDropdown,
-                    }"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Responsive Navigation Menu -->
-        <div
-          :class="{
-            block: showingNavigationDropdown,
-            hidden: !showingNavigationDropdown,
-          }"
-          class="sm:hidden"
-        >
-          <div class="pt-2 pb-3 space-y-1">
-            <ResponsiveNavLink :href="dashboard_path()" :active="pathname.match(/dashboard/) != null">
-              Dashboard
-            </ResponsiveNavLink>
-          </div>
-
-          <!-- Responsive Settings Options -->
-          <div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
-            <div class="px-4">
-              <div class="font-medium text-base text-gray-800 dark:text-gray-200">
-                {{ $page.props.auth.user.name }}
-              </div>
-              <div class="font-medium text-sm text-gray-500">
-                {{ $page.props.auth.user.email }}
-              </div>
-            </div>
-
-            <div class="mt-3 space-y-1">
-              <ResponsiveNavLink :href="profile_edit_path()"> Profile </ResponsiveNavLink>
-              <ResponsiveNavLink :href="logout_path()" method="post" as="button"> Log Out </ResponsiveNavLink>
-            </div>
-          </div>
-        </div>
-      </nav>
-
-      <!-- Page Heading -->
-      <header class="bg-white dark:bg-gray-800 shadow-sm" v-if="$slots.header">
-        <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-          <slot name="header" />
-        </div>
-      </header>
-
-      <!-- Page Content -->
-      <main>
-        <slot />
-      </main>
-    </div>
-  </div>
+  <AppShell>
+    <AppSidebar />
+
+    <SidebarInset class="min-w-0 overflow-x-clip">
+      <AppSidebarHeader :breadcrumbs="breadcrumbs" />
+      <slot />
+    </SidebarInset>
+  </AppShell>
 </template>

data/stubs/inertia-vue-ts/app/javascript/Layouts/SettingsLayout.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { Link, usePage } from '@inertiajs/vue3'
+import Heading from '@/Components/Heading.vue'
+import { Button } from '@/Components/ui/button'
+import { Separator } from '@/Components/ui/separator'
+import { cn } from '@/lib/utils'
+import { appearance_edit_path, password_edit_path, profile_edit_path } from '@/routes'
+import { NavItem } from '@/types'
+
+const sidebarNavItems: NavItem[] = [
+  {
+    title: 'Profile',
+    href: profile_edit_path(),
+  },
+  {
+    title: 'Password',
+    href: password_edit_path(),
+  },
+  {
+    title: 'Appearance',
+    href: appearance_edit_path(),
+  },
+]
+
+const page = usePage()
+</script>
+
+<template>
+  <div class="px-4 py-6">
+    <Heading title="Settings" description="Manage your profile and account settings" />
+
+    <div class="flex flex-col lg:flex-row lg:space-x-12">
+      <aside class="w-full max-w-xl lg:w-48">
+        <nav class="flex flex-col space-y-1 space-x-0" aria-label="Settings">
+          <Button
+            v-for="item in sidebarNavItems"
+            :key="item.href"
+            size="sm"
+            variant="ghost"
+            as-child
+            :class="cn('w-full justify-start', { 'bg-muted': page.url.startsWith(item.href) })"
+          >
+            <Link :href="item.href">{{ item.title }}</Link>
+          </Button>
+        </nav>
+      </aside>
+
+      <Separator class="my-6 lg:hidden" />
+
+      <div class="flex-1 md:max-w-2xl">
+        <section class="max-w-xl space-y-12">
+          <slot />
+        </section>
+      </div>
+    </div>
+  </div>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Pages/Auth/ForgotPassword.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import GuestLayout from '@/Layouts/GuestLayout.vue'
+import { Button } from '@/Components/ui/button'
+import { Input } from '@/Components/ui/input'
+import { Label } from '@/Components/ui/label'
 import InputError from '@/Components/InputError.vue'
-import InputLabel from '@/Components/InputLabel.vue'
-import PrimaryButton from '@/Components/PrimaryButton.vue'
-import TextInput from '@/Components/TextInput.vue'
 import { Head, useForm } from '@inertiajs/vue3'
 import { password_email_path } from '@/routes'
 
@@ -35,9 +35,9 @@ const submit = () => {
 
     <form @submit.prevent="submit">
       <div>
-        <InputLabel for="email" value="Email" />
+        <Label for="email">Email</Label>
 
-        <TextInput
+        <Input
           id="email"
           type="email"
           class="mt-1 block w-full"
@@ -51,9 +51,9 @@ const submit = () => {
       </div>
 
       <div class="flex items-center justify-end mt-4">
-        <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+        <Button :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
           Email Password Reset Link
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   </GuestLayout>

data/stubs/inertia-vue-ts/app/javascript/Pages/Auth/Login.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import Checkbox from '@/Components/Checkbox.vue'
+import { Button } from '@/Components/ui/button'
+import { Input } from '@/Components/ui/input'
+import { Label } from '@/Components/ui/label'
+import { Checkbox } from '@/Components/ui/checkbox'
 import GuestLayout from '@/Layouts/GuestLayout.vue'
 import InputError from '@/Components/InputError.vue'
-import InputLabel from '@/Components/InputLabel.vue'
-import PrimaryButton from '@/Components/PrimaryButton.vue'
-import TextInput from '@/Components/TextInput.vue'
 import { Head, Link, useForm } from '@inertiajs/vue3'
 import { login_path, password_request_path } from '@/routes'
 
@@ -37,9 +37,9 @@ const submit = () => {
 
     <form @submit.prevent="submit">
       <div>
-        <InputLabel for="email" value="Email" />
+        <Label for="email">Email</Label>
 
-        <TextInput
+        <Input
           id="email"
           type="email"
           class="mt-1 block w-full"
@@ -53,9 +53,9 @@ const submit = () => {
       </div>
 
       <div class="mt-4">
-        <InputLabel for="password" value="Password" />
+        <Label for="password">Password</Label>
 
-        <TextInput
+        <Input
           id="password"
           type="password"
           class="mt-1 block w-full"
@@ -69,7 +69,7 @@ const submit = () => {
 
       <div class="block mt-4">
         <label class="flex items-center">
-          <Checkbox name="remember" v-model:checked="form.remember" />
+          <Checkbox id="remember" name="remember" v-model="form.remember" />
           <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
         </label>
       </div>
@@ -82,9 +82,7 @@ const submit = () => {
           Forgot your password?
         </Link>
 
-        <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-          Log in
-        </PrimaryButton>
+        <Button class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing"> Log in </Button>
       </div>
     </form>
   </GuestLayout>

data/stubs/inertia-vue-ts/app/javascript/Pages/Auth/Register.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import GuestLayout from '@/Layouts/GuestLayout.vue'
+import { Button } from '@/Components/ui/button'
+import { Input } from '@/Components/ui/input'
+import { Label } from '@/Components/ui/label'
 import InputError from '@/Components/InputError.vue'
-import InputLabel from '@/Components/InputLabel.vue'
-import PrimaryButton from '@/Components/PrimaryButton.vue'
-import TextInput from '@/Components/TextInput.vue'
 import { Head, Link, useForm } from '@inertiajs/vue3'
 import { login_path, register_path } from '@/routes'
 
@@ -29,9 +29,9 @@ const submit = () => {
 
     <form @submit.prevent="submit">
       <div>
-        <InputLabel for="name" value="Name" />
+        <Label for="name">Name</Label>
 
-        <TextInput
+        <Input
           id="name"
           type="text"
           class="mt-1 block w-full"
@@ -45,9 +45,9 @@ const submit = () => {
       </div>
 
       <div class="mt-4">
-        <InputLabel for="email" value="Email" />
+        <Label for="email">Email</Label>
 
-        <TextInput
+        <Input
           id="email"
           type="email"
           class="mt-1 block w-full"
@@ -60,9 +60,9 @@ const submit = () => {
       </div>
 
       <div class="mt-4">
-        <InputLabel for="password" value="Password" />
+        <Label for="password">Password</Label>
 
-        <TextInput
+        <Input
           id="password"
           type="password"
           class="mt-1 block w-full"
@@ -75,9 +75,9 @@ const submit = () => {
       </div>
 
       <div class="mt-4">
-        <InputLabel for="password_confirmation" value="Confirm Password" />
+        <Label for="password_confirmation">Confirm Password</Label>
 
-        <TextInput
+        <Input
           id="password_confirmation"
           type="password"
           class="mt-1 block w-full"
@@ -97,9 +97,7 @@ const submit = () => {
           Already registered?
         </Link>
 
-        <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-          Register
-        </PrimaryButton>
+        <Button class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing"> Register </Button>
       </div>
     </form>
   </GuestLayout>

data/stubs/inertia-vue-ts/app/javascript/Pages/Auth/ResetPassword.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import GuestLayout from '@/Layouts/GuestLayout.vue'
+import { Button } from '@/Components/ui/button'
+import { Input } from '@/Components/ui/input'
+import { Label } from '@/Components/ui/label'
 import InputError from '@/Components/InputError.vue'
-import InputLabel from '@/Components/InputLabel.vue'
-import PrimaryButton from '@/Components/PrimaryButton.vue'
-import TextInput from '@/Components/TextInput.vue'
 import { Head, useForm } from '@inertiajs/vue3'
 import { password_store_path } from '@/routes'
 
@@ -32,9 +32,9 @@ const submit = () => {
 
     <form @submit.prevent="submit">
       <div>
-        <InputLabel for="password" value="Password" />
+        <Label for="password">Password</Label>
 
-        <TextInput
+        <Input
           id="password"
           type="password"
           class="mt-1 block w-full"
@@ -48,9 +48,9 @@ const submit = () => {
       </div>
 
       <div class="mt-4">
-        <InputLabel for="password_confirmation" value="Confirm Password" />
+        <Label for="password_confirmation">Confirm Password</Label>
 
-        <TextInput
+        <Input
           id="password_confirmation"
           type="password"
           class="mt-1 block w-full"
@@ -63,9 +63,7 @@ const submit = () => {
       </div>
 
       <div class="flex items-center justify-end mt-4">
-        <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-          Reset Password
-        </PrimaryButton>
+        <Button :class="{ 'opacity-25': form.processing }" :disabled="form.processing"> Reset Password </Button>
       </div>
     </form>
   </GuestLayout>

data/stubs/inertia-vue-ts/app/javascript/Pages/Auth/VerifyEmail.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { Button } from '@/Components/ui/button'
 import GuestLayout from '@/Layouts/GuestLayout.vue'
-import PrimaryButton from '@/Components/PrimaryButton.vue'
 import { Head, Link, useForm } from '@inertiajs/vue3'
 import { logout_path, verification_send_path } from '@/routes'
 
@@ -33,9 +33,9 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
 
     <form @submit.prevent="submit">
       <div class="mt-4 flex items-center justify-between">
-        <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+        <Button :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
           Resend Verification Email
-        </PrimaryButton>
+        </Button>
 
         <Link
           :href="logout_path()"

data/stubs/inertia-vue-ts/app/javascript/Pages/Dashboard.vue

@@ -1,21 +1,26 @@
 <script setup lang="ts">
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
 import { Head } from '@inertiajs/vue3'
+import { dashboard_path } from '@/routes'
+import { BreadcrumbItem } from '@/types'
+
+const breadcrumbs: BreadcrumbItem[] = [
+  {
+    title: 'Dashboard',
+    href: dashboard_path(),
+  },
+]
 </script>
 
 <template>
   <Head title="Dashboard" />
 
-  <AuthenticatedLayout>
-    <template #header>
-      <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Dashboard</h2>
-    </template>
-
-    <div class="py-12">
-      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xs sm:rounded-lg">
-          <div class="p-6 text-gray-900 dark:text-gray-100">You're logged in!</div>
-        </div>
+  <AuthenticatedLayout :breadcrumbs="breadcrumbs">
+    <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
+      <div
+        class="relative min-h-[60vh] flex-1 overflow-hidden rounded-xl border border-sidebar-border/70 p-6 dark:border-sidebar-border"
+      >
+        You're logged in!
       </div>
     </div>
   </AuthenticatedLayout>

data/stubs/inertia-vue-ts/app/javascript/Pages/Settings/Appearance.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { Head } from '@inertiajs/vue3'
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
+import SettingsLayout from '@/Layouts/SettingsLayout.vue'
+import Heading from '@/Components/Heading.vue'
+import UpdateAppearanceForm from './Partials/UpdateAppearanceForm.vue'
+import { appearance_edit_path } from '@/routes'
+import { BreadcrumbItem } from '@/types'
+
+const breadcrumbs: BreadcrumbItem[] = [
+  {
+    title: 'Appearance settings',
+    href: appearance_edit_path(),
+  },
+]
+</script>
+
+<template>
+  <Head title="Appearance settings" />
+
+  <AuthenticatedLayout :breadcrumbs="breadcrumbs">
+    <SettingsLayout>
+      <div class="space-y-6">
+        <Heading
+          variant="small"
+          title="Appearance settings"
+          description="Update the appearance settings for your account"
+        />
+        <UpdateAppearanceForm />
+      </div>
+    </SettingsLayout>
+  </AuthenticatedLayout>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Pages/Settings/Partials/DeleteUserForm.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import InputError from '@/Components/InputError.vue'
+import { Button } from '@/Components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/Components/ui/dialog'
+import { Input } from '@/Components/ui/input'
+import { Label } from '@/Components/ui/label'
+import { useForm } from '@inertiajs/vue3'
+import { nextTick, ref } from 'vue'
+import { profile_destroy_path } from '@/routes'
+
+const confirmingUserDeletion = ref(false)
+const passwordInput = ref<HTMLInputElement | null>(null)
+
+const form = useForm({
+  password: '',
+})
+
+const confirmUserDeletion = () => {
+  confirmingUserDeletion.value = true
+
+  nextTick(() => passwordInput.value?.focus())
+}
+
+const deleteUser = () => {
+  form.delete(profile_destroy_path(), {
+    preserveScroll: true,
+    onSuccess: () => closeModal(),
+    onError: () => passwordInput.value?.focus(),
+    onFinish: () => {
+      form.reset()
+    },
+  })
+}
+
+const closeModal = () => {
+  confirmingUserDeletion.value = false
+
+  form.clearErrors()
+  form.reset()
+}
+</script>
+
+<template>
+  <section class="space-y-6">
+    <Button variant="destructive" @click="confirmUserDeletion">Delete Account</Button>
+
+    <Dialog v-model:open="confirmingUserDeletion">
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
+
+          <DialogDescription>
+            Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your
+            password to confirm you would like to permanently delete your account.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div class="mt-6">
+          <Label for="password" class="sr-only">Password</Label>
+
+          <Input
+            id="password"
+            ref="passwordInput"
+            v-model="form.password"
+            type="password"
+            class="mt-1 block w-3/4"
+            placeholder="Password"
+            @keyup.enter="deleteUser"
+          />
+
+          <InputError :message="form.errors.password" class="mt-2" />
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" @click="closeModal"> Cancel </Button>
+
+          <Button
+            variant="destructive"
+            :class="{ 'opacity-25': form.processing }"
+            :disabled="form.processing"
+            @click="deleteUser"
+          >
+            Delete Account
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  </section>
+</template>