From 556d875f1ddbe87438785aab4e93c3d53534e92a Mon Sep 17 00:00:00 2001
From: Oketa Fred <oketafred@gmail.com>
Date: Mon, 24 Feb 2025 18:31:57 +0300
Subject: [PATCH] refactor: simplify prop usage in Vue components

This change removes unnecessary `props` destructuring in Vue components and directly uses the props where applicable. This improves code readability and consistency across the codebase. No breaking changes are introduced as the functionality remains the same.
---
 resources/js/components/AppHeader.vue         | 2 +-
 resources/js/components/AppearanceTabs.vue    | 4 ++--
 resources/js/components/Icon.vue              | 2 +-
 resources/js/layouts/AppLayout.vue            | 4 ++--
 resources/js/layouts/app/AppHeaderLayout.vue  | 4 ++--
 resources/js/layouts/app/AppSidebarLayout.vue | 4 ++--
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/resources/js/components/AppHeader.vue b/resources/js/components/AppHeader.vue
index ecc4755a..f2233f05 100644
--- a/resources/js/components/AppHeader.vue
+++ b/resources/js/components/AppHeader.vue
@@ -182,7 +182,7 @@ const rightNavItems: NavItem[] = [
 
         <div v-if="props.breadcrumbs.length > 1" class="flex w-full border-b border-sidebar-border/70">
             <div class="mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl">
-                <Breadcrumbs :breadcrumbs="props.breadcrumbs" />
+                <Breadcrumbs :breadcrumbs="breadcrumbs" />
             </div>
         </div>
     </div>
diff --git a/resources/js/components/AppearanceTabs.vue b/resources/js/components/AppearanceTabs.vue
index 45b90a98..ff0d9366 100644
--- a/resources/js/components/AppearanceTabs.vue
+++ b/resources/js/components/AppearanceTabs.vue
@@ -6,7 +6,7 @@ interface Props {
     class?: string;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const { class: containerClass } = withDefaults(defineProps<Props>(), {
     class: '',
 });
 
@@ -20,7 +20,7 @@ const tabs = [
 </script>
 
 <template>
-    <div :class="['inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800', props.class]">
+    <div :class="['inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800', containerClass]">
         <button
             v-for="{ value, Icon, label } in tabs"
             :key="value"
diff --git a/resources/js/components/Icon.vue b/resources/js/components/Icon.vue
index 99ca355e..c0b1b765 100644
--- a/resources/js/components/Icon.vue
+++ b/resources/js/components/Icon.vue
@@ -26,5 +26,5 @@ const icon = computed(() => {
 </script>
 
 <template>
-    <component :is="icon" :class="className" :size="props.size" :stroke-width="props.strokeWidth" :color="props.color" />
+    <component :is="icon" :class="className" :size="size" :stroke-width="strokeWidth" :color="color" />
 </template>
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index 60df1bd2..77c93964 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -6,13 +6,13 @@ interface Props {
     breadcrumbs?: BreadcrumbItemType[];
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
     breadcrumbs: () => [],
 });
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="props.breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs">
         <slot />
     </AppLayout>
 </template>
diff --git a/resources/js/layouts/app/AppHeaderLayout.vue b/resources/js/layouts/app/AppHeaderLayout.vue
index da072cbd..0f0f84ef 100644
--- a/resources/js/layouts/app/AppHeaderLayout.vue
+++ b/resources/js/layouts/app/AppHeaderLayout.vue
@@ -8,14 +8,14 @@ interface Props {
     breadcrumbs?: BreadcrumbItemType[];
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
     breadcrumbs: () => [],
 });
 </script>
 
 <template>
     <AppShell class="flex-col">
-        <AppHeader :breadcrumbs="props.breadcrumbs" />
+        <AppHeader :breadcrumbs="breadcrumbs" />
         <AppContent>
             <slot />
         </AppContent>
diff --git a/resources/js/layouts/app/AppSidebarLayout.vue b/resources/js/layouts/app/AppSidebarLayout.vue
index e8079be6..dc831922 100644
--- a/resources/js/layouts/app/AppSidebarLayout.vue
+++ b/resources/js/layouts/app/AppSidebarLayout.vue
@@ -9,7 +9,7 @@ interface Props {
     breadcrumbs?: BreadcrumbItemType[];
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
     breadcrumbs: () => [],
 });
 </script>
@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<Props>(), {
     <AppShell variant="sidebar">
         <AppSidebar />
         <AppContent variant="sidebar">
-            <AppSidebarHeader :breadcrumbs="props.breadcrumbs" />
+            <AppSidebarHeader :breadcrumbs="breadcrumbs" />
             <slot />
         </AppContent>
     </AppShell>