run npm format

Author: taylorotwell

resources/css/app.css

@@ -88,4 +88,4 @@ html {
     body {
         @apply bg-background text-foreground;
     }
-}
+}

resources/js/components/AppHeader.vue

@@ -35,9 +35,7 @@ const isCurrentRoute = (url: string) => {
     return page.url === url;
 };
 
-const activeItemStyles = computed(
-    () => (url: string) => (isCurrentRoute(url) ? 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100' : ''),
-);
+const activeItemStyles = computed(() => (url: string) => (isCurrentRoute(url) ? 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100' : ''));
 
 const mainNavItems: NavItem[] = [
     {
@@ -134,7 +132,7 @@ const rightNavItems: NavItem[] = [
 
                 <div class="ml-auto flex items-center space-x-2">
                     <div class="relative flex items-center space-x-1">
-                        <Button variant="ghost" size="icon" class="h-9 w-9 cursor-pointer group">
+                        <Button variant="ghost" size="icon" class="group h-9 w-9 cursor-pointer">
                             <Search class="size-5 opacity-80 group-hover:opacity-100" />
                         </Button>
 
@@ -143,7 +141,7 @@ const rightNavItems: NavItem[] = [
                                 <TooltipProvider :delay-duration="0">
                                     <Tooltip>
                                         <TooltipTrigger>
-                                            <Button variant="ghost" size="icon" as-child class="h-9 w-9 group cursor-pointer">
+                                            <Button variant="ghost" size="icon" as-child class="group h-9 w-9 cursor-pointer">
                                                 <a :href="item.url" target="_blank" rel="noopener noreferrer">
                                                     <span class="sr-only">{{ item.title }}</span>
                                                     <component :is="item.icon" class="size-5 opacity-80 group-hover:opacity-100" />
@@ -161,10 +159,14 @@ const rightNavItems: NavItem[] = [
 
                     <DropdownMenu>
                         <DropdownMenuTrigger :as-child="true">
-                            <Button variant="ghost" size="icon" class="relative size-10 w-auto rounded-full p-1 focus-within:ring-primary focus-within:ring-2">
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                class="relative size-10 w-auto rounded-full p-1 focus-within:ring-2 focus-within:ring-primary"
+                            >
                                 <Avatar class="size-8 overflow-hidden rounded-full">
                                     <AvatarImage :src="auth.user.avatar" :alt="auth.user.name" />
-                                    <AvatarFallback class="rounded-lg bg-neutral-200 text-black font-semibold dark:bg-neutral-700 dark:text-white">
+                                    <AvatarFallback class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white">
                                         {{ getInitials(auth.user?.name) }}
                                     </AvatarFallback>
                                 </Avatar>

resources/js/components/AppLogo.vue

@@ -9,10 +9,10 @@ defineProps<Props>();
 </script>
 
 <template>
-    <div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-md">
+    <div class="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
         <AppLogoIcon class="size-5 fill-current text-white dark:text-black" />
     </div>
     <div class="ml-1 grid flex-1 text-left text-sm">
-        <span class="mb-0.5 truncate leading-none font-semibold">Laravel Starter Kit</span>
+        <span class="mb-0.5 truncate font-semibold leading-none">Laravel Starter Kit</span>
     </div>
 </template>

resources/js/components/AppLogoIcon.vue

@@ -14,9 +14,9 @@ defineProps<Props>();
 
 <template>
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42" :class="className" v-bind="$attrs">
-        <path 
-            fill="currentColor" 
-            fill-rule="evenodd" 
+        <path
+            fill="currentColor"
+            fill-rule="evenodd"
             clip-rule="evenodd"
             d="M17.2 5.633 8.6.855 0 5.633v26.51l16.2 9 16.2-9v-8.442l7.6-4.223V9.856l-8.6-4.777-8.6 4.777V18.3l-5.6 3.111V5.633ZM38 18.301l-5.6 3.11v-6.157l5.6-3.11V18.3Zm-1.06-7.856-5.54 3.078-5.54-3.079 5.54-3.078 5.54 3.079ZM24.8 18.3v-6.157l5.6 3.111v6.158L24.8 18.3Zm-1 1.732 5.54 3.078-13.14 7.302-5.54-3.078 13.14-7.3v-.002Zm-16.2 7.89 7.6 4.222V38.3L2 30.966V7.92l5.6 3.111v16.892ZM8.6 9.3 3.06 6.222 8.6 3.143l5.54 3.08L8.6 9.3Zm21.8 15.51-13.2 7.334V38.3l13.2-7.334v-6.156ZM9.6 11.034l5.6-3.11v14.6l-5.6 3.11v-14.6Z"
         />

resources/js/components/AppSidebarHeader.vue

@@ -10,7 +10,7 @@ defineProps<{
 
 <template>
     <header
-        class="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/70 px-6 md:px-4 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12"
+        class="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/70 px-6 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 md:px-4"
     >
         <div class="flex items-center gap-2">
             <SidebarTrigger class="-ml-1" />

resources/js/components/Heading.vue

@@ -12,7 +12,7 @@ defineProps<Props>();
 <template>
     <div class="mb-8 space-y-0.5">
         <h2 class="text-xl font-semibold tracking-tight">{{ title }}</h2>
-        <p v-if="description" class="text-muted-foreground text-sm">
+        <p v-if="description" class="text-sm text-muted-foreground">
             {{ description }}
         </p>
     </div>

resources/js/components/PlaceholderPattern.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed } from 'vue';
 
-const patternId = computed(() => `pattern-${Math.random().toString(36).substring(2, 9)}`)
+const patternId = computed(() => `pattern-${Math.random().toString(36).substring(2, 9)}`);
 </script>
 
 <template>

resources/js/components/TextLink.vue

@@ -17,7 +17,7 @@ defineProps<Props>();
         :tabindex="tabindex"
         :method="method"
         :as="as"
-        class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
+        class="hover:decoration-current! text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out dark:decoration-neutral-500"
     >
         <slot />
     </Link>

resources/js/components/UserInfo.vue

@@ -10,7 +10,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    showEmail: false
+    showEmail: false,
 });
 
 const { getInitials } = useInitials();

resources/js/layouts/auth/AuthSimpleLayout.vue

@@ -14,14 +14,14 @@ defineProps<{
             <div class="flex flex-col gap-8">
                 <div class="flex flex-col items-center gap-4">
                     <Link :href="route('home')" class="flex flex-col items-center gap-2 font-medium">
-                        <div class="flex h-9 w-9 mb-1 items-center justify-center rounded-md">
+                        <div class="mb-1 flex h-9 w-9 items-center justify-center rounded-md">
                             <AppLogoIcon class="size-9 fill-current text-[var(--foreground)] dark:text-white" />
                         </div>
                         <span class="sr-only">{{ title }}</span>
                     </Link>
                     <div class="space-y-2 text-center">
                         <h1 class="text-xl font-medium">{{ title }}</h1>
-                        <p class="text-muted-foreground text-center text-sm">{{ description }}</p>
+                        <p class="text-center text-sm text-muted-foreground">{{ description }}</p>
                     </div>
                 </div>
                 <slot />

resources/js/layouts/settings/Layout.vue

@@ -27,7 +27,7 @@ const currentPath = window.location.pathname;
     <div class="px-4 py-6">
         <Heading title="Settings" description="Manage your profile and account settings" />
 
-        <div class="flex flex-col space-y-8 lg:flex-row lg:space-y-0 lg:space-x-12 md:space-y-0">
+        <div class="flex flex-col space-y-8 md:space-y-0 lg:flex-row lg:space-x-12 lg:space-y-0">
             <aside class="w-full max-w-xl lg:w-48">
                 <nav class="flex flex-col space-x-0 space-y-1">
                     <Button

resources/js/pages/auth/ForgotPassword.vue

@@ -25,7 +25,7 @@ const submit = () => {
     <AuthLayout title="Forgot password" description="Enter your email to receive a password reset link">
         <Head title="Forgot password" />
 
-        <div v-if="status" class="mb-4 text-sm font-medium text-green-600">
+        <div v-if="status" class="mb-4 text-center text-sm font-medium text-green-600">
             {{ status }}
         </div>
 
@@ -45,7 +45,7 @@ const submit = () => {
                 </div>
             </form>
 
-            <div class="text-muted-foreground space-x-1 text-center text-sm">
+            <div class="space-x-1 text-center text-sm text-muted-foreground">
                 <span>Or, return to</span>
                 <TextLink :href="route('login')">log in</TextLink>
             </div>

resources/js/pages/auth/Login.vue

@@ -39,18 +39,33 @@ const submit = () => {
             <div class="grid gap-6">
                 <div class="grid gap-2">
                     <Label for="email">Email address</Label>
-                    <Input id="email" type="email" required autofocus tabindex="1" autocomplete="email" v-model="form.email" placeholder="[email protected]" />
+                    <Input
+                        id="email"
+                        type="email"
+                        required
+                        autofocus
+                        tabindex="1"
+                        autocomplete="email"
+                        v-model="form.email"
+                        placeholder="[email protected]"
+                    />
                     <InputError :message="form.errors.email" />
                 </div>
 
                 <div class="grid gap-2">
                     <div class="flex items-center justify-between">
                         <Label for="password">Password</Label>
-                        <TextLink v-if="canResetPassword" :href="route('password.request')" class="text-sm" tabindex="5">
-                            Forgot password?
-                        </TextLink>
+                        <TextLink v-if="canResetPassword" :href="route('password.request')" class="text-sm" tabindex="5"> Forgot password? </TextLink>
                     </div>
-                    <Input id="password" type="password" required tabindex="2" autocomplete="current-password" v-model="form.password" placeholder="Password" />
+                    <Input
+                        id="password"
+                        type="password"
+                        required
+                        tabindex="2"
+                        autocomplete="current-password"
+                        v-model="form.password"
+                        placeholder="Password"
+                    />
                     <InputError :message="form.errors.password" />
                 </div>
 
@@ -67,7 +82,7 @@ const submit = () => {
                 </Button>
             </div>
 
-            <div class="text-muted-foreground text-center text-sm">
+            <div class="text-center text-sm text-muted-foreground">
                 Don't have an account?
                 <TextLink :href="route('register')" :tabindex="5">Sign up</TextLink>
             </div>

resources/js/pages/auth/Register.vue

@@ -42,7 +42,15 @@ const submit = () => {
 
                 <div class="grid gap-2">
                     <Label for="password">Password</Label>
-                    <Input id="password" type="password" required tabindex="3" autocomplete="new-password" v-model="form.password" placeholder="Password" />
+                    <Input
+                        id="password"
+                        type="password"
+                        required
+                        tabindex="3"
+                        autocomplete="new-password"
+                        v-model="form.password"
+                        placeholder="Password"
+                    />
                     <InputError :message="form.errors.password" />
                 </div>
 
@@ -66,7 +74,7 @@ const submit = () => {
                 </Button>
             </div>
 
-            <div class="text-muted-foreground text-center text-sm">
+            <div class="text-center text-sm text-muted-foreground">
                 Already have an account?
                 <TextLink :href="route('login')" class="underline underline-offset-4" tabindex="6">Log in</TextLink>
             </div>

resources/js/pages/auth/VerifyEmail.vue

@@ -30,14 +30,7 @@ const submit = () => {
                 Resend verification email
             </Button>
 
-            <TextLink
-                :href="route('logout')"
-                method="post"
-                as="button"
-                class="mx-auto block text-sm"
-            >
-                Log out
-            </TextLink>
+            <TextLink :href="route('logout')" method="post" as="button" class="mx-auto block text-sm"> Log out </TextLink>
         </form>
     </AuthLayout>
 </template>

resources/js/pages/settings/Profile.vue

@@ -57,7 +57,15 @@ const submit = () => {
 
                     <div class="grid gap-2">
                         <Label for="email">Email address</Label>
-                        <Input id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autocomplete="username" placeholder="Email address" />
+                        <Input
+                            id="email"
+                            type="email"
+                            class="mt-1 block w-full"
+                            v-model="form.email"
+                            required
+                            autocomplete="username"
+                            placeholder="Email address"
+                        />
                         <InputError class="mt-2" :message="form.errors.email" />
                     </div>
 
@@ -68,7 +76,7 @@ const submit = () => {
                                 :href="route('verification.send')"
                                 method="post"
                                 as="button"
-                                class="rounded-md text-sm text-neutral-600 underline hover:text-neutral-900 focus:ring-2 focus:ring-offset-2 focus:outline-hidden"
+                                class="focus:outline-hidden rounded-md text-sm text-neutral-600 underline hover:text-neutral-900 focus:ring-2 focus:ring-offset-2"
                             >
                                 Click here to re-send the verification email.
                             </Link>