Change global component names

src/components/Autocomplete/AutocompleteOtu.vue → src/components/Autocomplete/AutocompleteOtu.global.vue

@@ -10,7 +10,7 @@
 
 <script setup>
 import { useRouter } from 'vue-router'
-import Autocomplete from '@/components/Autocomplete/Autocomplete.vue'
+import Autocomplete from '@/components/Autocomplete/Autocomplete.global.vue'
 
 const router = useRouter()
 

src/components/Gallery/GalleryThumbnail.vue

@@ -1,10 +1,10 @@
 <template>
   <div 
-    class="bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 h-20 dark:border-gray-600 rounded border box-border"
+    class="bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 max-h-20 h-20 dark:border-gray-600 rounded border-2"
     :title="title"
   >
     <img 
-      class="max-h-24 max-w-24 h-24 w-24 object-cover rounded"
+      class="max-h-20 max-w-24 h-20 w-24 object-cover rounded"
       :src="image.thumb"
     >
   </div>

src/components/Gallery/GalleryThumbnailList.vue

@@ -18,6 +18,8 @@
 </template>
 
 <script setup>
+import GalleryThumbnail from './GalleryThumbnail.vue'
+
 defineProps({
   images: {
     type: Array,

src/components/Gallery/ControlImageNext.vue → src/components/ImageViewer/ControlImageNext.vue

@@ -20,5 +20,6 @@
     </svg>
   </button>
 </template>
+
 <script setup>
 </script>

src/components/Gallery/ImageToolbar.vue → src/components/ImageViewer/ImageToolbar.vue

@@ -5,7 +5,7 @@
     </div>
     <button
       type="button"
-      class="p-2  cursor-pointer text-white opacity-50 "
+      class="p-2 cursor-pointer text-white opacity-50 "
     >
       <IconClose />
     </button>

src/components/Gallery/ImageViewer.vue → src/components/ImageViewer/ImageViewer.global.vue

@@ -77,6 +77,7 @@ import ImageDepictions from './ImageDepictions.vue'
 import ImageViewerCounter from './ImageViewerCounter.vue'
 import ControlNextImage from './ControlImageNext.vue'
 import ControlPreviousImage from './ControlImagePrevious.vue'
+import GalleryThumbnailList from '@/components/Gallery/GalleryThumbnailList.vue'
 import ImageToolbar from './ImageToolbar.vue'
 
 const props = defineProps({

src/components/Gallery/ImageViewerCounter.vue → src/components/ImageViewer/ImageViewerCounter.vue

@@ -1,5 +1,5 @@
 <template>
-  <span>{{ currentImage + 1 }}/{{ totalImages }}</span>
+  <span class="p-2 text-white opacity-50">{{ currentImage + 1 }}/{{ totalImages }}</span>
 </template>
 
 <script setup>

src/components/TreeView.vue

@@ -37,7 +37,6 @@
 <script setup>
 import TreeView from '@/components/TreeView.vue'
 import SynonymList from './SynonymList.vue'
-import ButtonExpand from '@/components/Button/ButtonExpand.vue'
 import OtuService from '@/modules/otus/services/OtuService';
 import { ref, watch } from 'vue'
 

src/components/globalComponents.js

@@ -1,8 +1,8 @@
-const components = import.meta.globEager('@/components/**/*.vue')
+const components = import.meta.globEager('@/components/**/*.global.vue')
 
 const register = app => {
   Object.entries(components).forEach(([path, definition]) => {
-    const componentName = path.split('/').pop().replace(/\.\w+$/, '')
+    const componentName = path.split('/').pop().replace(/\.global.\w+$/, '')
 
     app.component(componentName, definition.default)
   })

src/modules/otus/components/Map.vue

@@ -1,22 +1,19 @@
 <template>
   <VCard>
-
-      <VSpinner v-if="isLoading" />
-      <VMap
-        ref="map"
-        class="h-96 max-h-96"
-        :zoom="zoom"
-        :geojson="geojson"
-        @geojson:ready="isLoading = false"
-      />
-
+    <VSpinner v-if="isLoading" />
+    <VMap
+      ref="map"
+      class="h-96 max-h-96"
+      :zoom="zoom"
+      :geojson="geojson"
+      @geojson:ready="isLoading = false"
+    />
   </VCard>
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
-import VMap from '@/components/Map/VMap.vue'
-import OtuService from "../services/OtuService";
+import { ref, watch } from "vue"
+import OtuService from "../services/OtuService"
 
 const props = defineProps({
   otuId: {

src/modules/otus/views/Index.vue

@@ -53,7 +53,8 @@
 
         <TabMenu
           v-if="tabs.length"
-          class="m-[-1px] print:hidden">
+          class="m-[-1px] print:hidden"
+        >
           <TabItem
             v-for="({ name, label }) in tabs"
             :key="name"
@@ -82,10 +83,7 @@
 
 import { ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import TabMenu from '@/components/Tab/TabMenu.vue'
-import TabItem from '@/components/Tab/TabItem.vue'
 import Breadcrumb from '@/components/Breadcrumb.vue'
-import Autocomplete from '@/components/Autocomplete/Autocomplete.vue'
 import TaxaInfo from '@/modules/otus/components/TaxaInfo.vue'
 import useChildrenRoutes from '../composables/useChildrenRoutes'
 import OtuService from '../services/OtuService'