refactor(convention): remove app-dashboard prefix from component declration (#1)

refactor(convention): components naming conventions

Author: themustafaomar

src/components/dashboard/bar/notifications/Menu.vue

@@ -28,11 +28,11 @@
 
     <v-sheet rounded="lg" class="notifications-menu overflow-hidden">
       <v-responsive max-height="400" min-height="250" style="overflow-y: scroll">
-        <app-dashboard-bar-notifications-loader v-if="isLoading" />
+        <notifications-loader v-if="isLoading" />
 
         <template v-if="notifications.length">
           <v-list v-for="notification in notifications" :key="notification.id" lines="three">
-            <app-dashboard-bar-notifications-item :notification="notification" />
+            <notifications-item :notification="notification" />
           </v-list>
         </template>
 
@@ -54,8 +54,8 @@ import { useI18n } from 'vue-i18n'
 import { useNotificationsStore } from '@/stores/notifications'
 import { useUser } from '@/composables/useUser'
 import AppTooltipBtn from '@/components/app/TooltipBtn.vue'
-import AppDashboardBarNotificationsLoader from './Loader.vue'
-import AppDashboardBarNotificationsItem from './Item.vue'
+import NotificationsLoader from './Loader.vue'
+import NotificationsItem from './Item.vue'
 
 const menu = ref(false)
 const width = computed(() => (mobile.value ? 420 : 380))

src/components/dashboard/chat/conversations/List.vue

@@ -20,7 +20,7 @@
       </v-list-item>
     </template>
 
-    <app-dashboard-chat-settings ref="settings" />
+    <chat-settings ref="settings" />
 
     <v-divider color="grey-darken-1" />
 
@@ -94,7 +94,7 @@ import { onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useAuthStore } from '@/stores/auth'
 import { useChatStore } from '@/stores/chats'
-import AppDashboardChatSettings from '@/components/dashboard/chat/Settings.vue'
+import ChatSettings from '@/components/dashboard/chat/Settings.vue'
 
 const authStore = useAuthStore()
 const chatStore = useChatStore()

src/components/dashboard/chat/messages/Message.vue

@@ -38,7 +38,7 @@
       <!-- Voice message -->
       <div v-else>
         <div class="d-inline-block rounded-pill" :class="{ 'ms-4': !current, 'me-4': current }">
-          <app-dashboard-chat-messages-audio-player :source="data.source" />
+          <chat-messages-audio-player :source="data.source" />
         </div>
       </div>
 
@@ -69,7 +69,7 @@
 <script setup>
 import { computed } from 'vue'
 import { useUser } from '@/composables/useUser'
-import AppDashboardChatMessagesAudioPlayer from './AudioPlayer.vue'
+import ChatMessagesAudioPlayer from './AudioPlayer.vue'
 
 const props = defineProps({ data: Object })
 const user = useUser()

src/components/dashboard/chat/sender/Sender.vue

@@ -38,7 +38,7 @@
     </template>
   </v-text-field>
 
-  <app-dashboard-chat-sender-recorder
+  <chat-sender-recorder
     @abort="isRecording = false"
     @recorded=";(isRecording = false), send('voice', $event)"
     :is-recording="isRecording"
@@ -58,7 +58,7 @@ import { useChatStore } from '@/stores/chats'
 import { useAuthStore } from '@/stores/auth'
 import { useAppStore } from '@/stores/app'
 import EmojiesPicker from './EmojiesPicker.vue'
-import AppDashboardChatSenderRecorder from './Recorder.vue'
+import ChatSenderRecorder from './Recorder.vue'
 
 const message = ref(null)
 const loading = ref(false)

src/components/dashboard/drawer/NavigationDrawer.vue

@@ -9,10 +9,10 @@
     <v-list density="comfortable">
       <template v-for="link in links">
         <!-- Having children, we need to render it via list group -->
-        <app-dashboard-drawer-item-group v-if="link.children" :link="link" />
+        <drawer-item-group v-if="link.children" :link="link" />
 
         <!-- Not having any children -->
-        <app-dashboard-drawer-item
+        <drawer-item
           v-if="!link.children && (link.permissions && !can(link.permissions) ? false : true)"
           :link="link"
         />
@@ -25,8 +25,8 @@
 import { ref } from 'vue'
 import { useLocale } from 'vuetify'
 import { useUser } from '@/composables/useUser'
-import AppDashboardDrawerItem from './Item.vue'
-import AppDashboardDrawerItemGroup from './ItemGroup.vue'
+import DrawerItem from './Item.vue'
+import DrawerItemGroup from './ItemGroup.vue'
 
 const user = useUser()
 const { t } = useLocale()

src/layouts/dashboard.vue

@@ -5,16 +5,16 @@
     <!-- end snackbar -->
 
     <!-- sidebar -->
-    <app-dashboard-drawer v-model="isNavDrawerActive" :rail="rail" />
+    <drawer v-model="isNavDrawerActive" :rail="rail" />
     <!-- end sidebar -->
 
     <!-- navbar -->
-    <app-dashboard-bar @rail:switch="navigationDrawer" />
+    <bar @rail:switch="navigationDrawer" />
     <!-- end navbar -->
 
     <!-- content -->
     <v-main>
-      <app-dashboard-loader v-show="isLoading" />
+      <loader v-show="isLoading" />
       <div v-show="!isLoading" class="pa-4 pa-lg-6">
         <router-view />
       </div>
@@ -30,9 +30,9 @@ import { useDisplay } from 'vuetify'
 import { useAppStore } from '@/stores/app'
 import { useNotificationsStore } from '@/stores/notifications'
 import AppSnackbar from '@/components/app/Snackbar.vue'
-import AppDashboardDrawer from '@/components/dashboard/drawer/NavigationDrawer.vue'
-import AppDashboardLoader from '@/components/dashboard/Loader.vue'
-import AppDashboardBar from '@/components/dashboard/bar/Bar.vue'
+import Drawer from '@/components/dashboard/drawer/NavigationDrawer.vue'
+import Loader from '@/components/dashboard/Loader.vue'
+import Bar from '@/components/dashboard/bar/Bar.vue'
 
 const rail = ref(false)
 const isNavDrawerActive = ref(true)

src/pages/dashboard/chat.vue

@@ -4,7 +4,7 @@
       <source src="/message.mp3" type="audio/mpeg" />
     </audio>
 
-    <app-dashboard-chat-conversations-list />
+    <chat-conversations-list />
 
     <!--
       Equation: (Screen height - Navbar height - Top & Bottom paddings)
@@ -15,10 +15,7 @@
         class="position-relative h-100 ms-0 ms-lg-5"
         rounded="lg"
       >
-        <app-dashboard-chat-toolbar
-          :conversation="chatStore.activeConversation"
-          :isLoadingChat="isLoadingChat"
-        />
+        <chat-toolbar :conversation="chatStore.activeConversation" :isLoadingChat="isLoadingChat" />
 
         <v-divider color="grey-darken-1" />
 
@@ -46,11 +43,8 @@
           </div>
 
           <ul v-else>
-            <app-dashboard-chat-messages-message v-for="data in chat" :data="data" />
-            <app-dashboard-chat-typing
-              v-if="chat.length && isPartnerTyping"
-              :partner="activeConversation"
-            />
+            <chat-messages-message v-for="data in chat" :data="data" />
+            <chat-typing v-if="chat.length && isPartnerTyping" :partner="activeConversation" />
           </ul>
         </div>
 
@@ -59,11 +53,11 @@
           class="d-flex align-center position-absolute w-100 pa-5"
           style="bottom: 0; left: 0; height: 84px"
         >
-          <app-dashboard-chat-sender />
+          <chat-sender />
         </div>
       </v-sheet>
 
-      <app-dashboard-chat-empty v-else />
+      <chat-empty v-else />
     </v-main>
   </v-layout>
 </template>
@@ -77,12 +71,12 @@ import { useChatStore } from '@/stores/chats'
 import { useLoader } from '@/composables/useLoader'
 import { useUser } from '@/composables/useUser'
 import axios from '@/plugins/axios'
-import AppDashboardChatMessagesMessage from '@/components/dashboard/chat/messages/Message.vue'
-import AppDashboardChatSender from '@/components/dashboard/chat/sender/Sender.vue'
-import AppDashboardChatConversationsList from '@/components/dashboard/chat/conversations/List.vue'
-import AppDashboardChatTyping from '@/components/dashboard/chat/Typing.vue'
-import AppDashboardChatToolbar from '@/components/dashboard/chat/Toolbar.vue'
-import AppDashboardChatEmpty from '@/components/dashboard/chat/Empty.vue'
+import ChatMessagesMessage from '@/components/dashboard/chat/messages/Message.vue'
+import ChatSender from '@/components/dashboard/chat/sender/Sender.vue'
+import ChatConversationsList from '@/components/dashboard/chat/conversations/List.vue'
+import ChatTyping from '@/components/dashboard/chat/Typing.vue'
+import ChatToolbar from '@/components/dashboard/chat/Toolbar.vue'
+import ChatEmpty from '@/components/dashboard/chat/Empty.vue'
 
 const container = ref(null)
 const sender = ref(null)

src/pages/dashboard/index.vue

@@ -2,7 +2,7 @@
   <app-sheet title="Dashboard" class="mb-0">
     <v-row no-gutters>
       <v-col cols="12" sm="6" lg="3">
-        <app-dashboard-widgets-stat
+        <widgets-stat
           title="Today Orders"
           value="1,900"
           percentage="25.47%"
@@ -14,18 +14,13 @@
       <v-divider vertical />
 
       <v-col cols="12" sm="6" lg="3">
-        <app-dashboard-widgets-stat
-          title="Today Orders"
-          value="2,500"
-          percentage="5.64%"
-          class="px-5 py-0"
-        />
+        <widgets-stat title="Today Orders" value="2,500" percentage="5.64%" class="px-5 py-0" />
       </v-col>
 
       <v-divider vertical />
 
       <v-col cols="12" sm="6" lg="3">
-        <app-dashboard-widgets-stat
+        <widgets-stat
           title="Today Orders"
           value="564"
           percentage="14.47%"
@@ -37,7 +32,7 @@
       <v-divider vertical />
 
       <v-col cols="12" sm="6" lg="3">
-        <app-dashboard-widgets-stat
+        <widgets-stat
           title="Today Orders"
           value="1,000"
           percentage="9.14%"
@@ -130,33 +125,25 @@
     <v-col cols="16" lg="6">
       <v-row>
         <v-col cols="12">
-          <app-dashboard-widgets-sales-revenue />
+          <widgets-sales-revenue />
         </v-col>
 
         <!-- Second widget -->
         <v-col cols="12" lg="6">
-          <app-dashboard-widgets-bar-simple
-            title="Active Subscriptions"
-            value="1.1K"
-            percentage="25.47%"
-          />
+          <widgets-bar-simple title="Active Subscriptions" value="1.1K" percentage="25.47%" />
         </v-col>
 
         <!-- Third widget -->
         <v-col cols="12" lg="6">
-          <app-dashboard-widgets-bar-simple
-            title="AVG Subscriptions"
-            value="341.2"
-            percentage="10%"
-          />
+          <widgets-bar-simple title="AVG Subscriptions" value="341.2" percentage="10%" />
         </v-col>
 
         <v-col cols="6">
-          <app-dashboard-widgets-website-performance />
+          <widgets-website-performance />
         </v-col>
 
         <v-col cols="6">
-          <app-dashboard-widgets-pie />
+          <widgets-pie />
         </v-col>
 
         <!-- Fourth widget -->
@@ -264,11 +251,11 @@ import { LineChart, useLineChart } from 'vue-chart-3'
 import { useUser } from '@/composables/useUser'
 import { useLoader } from '@/composables/useLoader'
 import { months, numbers, createGradient } from '@/assets/js/charts/utils'
-import AppDashboardWidgetsSalesRevenue from '@/components/dashboard/widgets/SalesRevenue.vue'
-import AppDashboardWidgetsBarSimple from '@/components/dashboard/widgets/BarSimple.vue'
-import AppDashboardWidgetsWebsitePerformance from '@/components/dashboard/widgets/WebsitePerformance.vue'
-import AppDashboardWidgetsStat from '@/components/dashboard/widgets/Stat.vue'
-import AppDashboardWidgetsPie from '@/components/dashboard/widgets/Pie.vue'
+import WidgetsSalesRevenue from '@/components/dashboard/widgets/SalesRevenue.vue'
+import WidgetsBarSimple from '@/components/dashboard/widgets/BarSimple.vue'
+import WidgetsWebsitePerformance from '@/components/dashboard/widgets/WebsitePerformance.vue'
+import WidgetsStat from '@/components/dashboard/widgets/Stat.vue'
+import WidgetsPie from '@/components/dashboard/widgets/Pie.vue'
 
 Chart.register(...registerables)
 

src/pages/dashboard/profile.vue

@@ -3,7 +3,7 @@
   <app-sheet title="Profile">
     <v-row class="mt-2">
       <v-col cols="4" class="mx-auto text-center mb-5">
-        <app-dashboard-profile-avatar @save="saveAvatar" :user="user" />
+        <profile-avatar @save="saveAvatar" :user="user" />
         <h4 class="mt-1">Profile Picture</h4>
         <p class="text-grey">Change your profile picture.</p>
       </v-col>
@@ -99,7 +99,7 @@ import { useForm } from '@/composables/useForm'
 import { useUser } from '@/composables/useUser'
 import { useLoader } from '@/composables/useLoader'
 import storage from '@/plugins/storage'
-import AppDashboardProfileAvatar from '@/components/dashboard/profile/Avatar.vue'
+import ProfileAvatar from '@/components/dashboard/profile/Avatar.vue'
 
 const user = useUser()
 const loader = useLoader()

src/pages/dashboard/roles.vue

@@ -11,8 +11,8 @@
       <template #item.id="{ item }">#{{ item.raw.id }}</template>
 
       <template #item.actions="{ item }">
-        <app-dashboard-edit-btn @click="composer.update(item.raw)" />
-        <app-dashboard-delete-btn @click.prevent />
+        <edit-btn @click="composer.update(item.raw)" />
+        <delete-btn @click.prevent />
       </template>
 
       <template #bottom>
@@ -24,7 +24,7 @@
   </app-sheet>
 
   <useComposer ref="composer" title="Role" v-slot="{ props }">
-    <app-dashboard-roles-compose v-bind="props" @created="fetch()" />
+    <roles-compose v-bind="props" @created="fetch()" />
   </useComposer>
 </template>
 
@@ -33,9 +33,9 @@ import { ref, onMounted } from 'vue'
 import axios from '@/plugins/axios'
 import { useLoader } from '@/composables/useLoader'
 import useComposer from '@/hoc/useComposer.vue'
-import AppDashboardRolesCompose from '@/components/dashboard/roles/Compose.vue'
-import AppDashboardEditBtn from '@/components/dashboard/EditBtn.vue'
-import AppDashboardDeleteBtn from '@/components/dashboard/DeleteBtn.vue'
+import RolesCompose from '@/components/dashboard/roles/Compose.vue'
+import EditBtn from '@/components/dashboard/EditBtn.vue'
+import DeleteBtn from '@/components/dashboard/DeleteBtn.vue'
 
 const page = ref(1)
 const composer = ref(null)