Merge pull request #55 from SpeciesFileGroup/development

Development

src/components/Autocomplete/Autocomplete.global.vue

@@ -8,12 +8,14 @@
     <input
       v-model="typed"
       type="text"
+      autocomplete="none"
       class="autocomplete__input block box-border min-w-full p-1.5 pl-10 text-base-content rounded border sm:text-sm placeholder:text-sm dark:border-slate-700 border-gray-300 dark:placeholder:text-slate-400 focus:ring-primary-500 focus:border-primary-500"
       :placeholder="placeholder"
+      ref="inputElement"
     />
     <AutocompleteSpinner
       v-if="isSearching"
-      class="absolute top-2 right-2 h-5 w-5"
+      class="absolute top-1/2 -translate-y-1/2 right-2 h-5 w-5"
     />
 
     <ul
@@ -33,11 +35,16 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import { makeAPIRequest } from '@/utils/request'
 import AutocompleteSpinner from './AutocompleteSpinner.vue'
 
 const props = defineProps({
+  autofocus: {
+    type: Boolean,
+    default: false
+  },
+
   placeholder: {
     type: String,
     default: 'Search...'
@@ -68,6 +75,7 @@ const emit = defineEmits(['select'])
 const typed = ref('')
 const list = ref([])
 const isSearching = ref(false)
+const inputElement = ref(null)
 
 const delay = 500
 let timeout
@@ -99,6 +107,12 @@ const selectItem = (item) => {
   emit('select', item)
   typed.value = ''
 }
+
+onMounted(() => {
+  if (props.autofocus) {
+    inputElement.value.focus()
+  }
+})
 </script>
 
 <style lang="scss" scoped>

src/components/Autocomplete/AutocompleteOtu.global.vue

@@ -3,6 +3,7 @@
     url="/otus/autocomplete"
     query-param="term"
     label="label_html"
+    :autofocus="autofocus"
     :params="{ having_taxon_name_only: true }"
     @select="loadOtu"
   />
@@ -14,6 +15,13 @@ import Autocomplete from '@/components/Autocomplete/Autocomplete.global.vue'
 
 const router = useRouter()
 
+const props = defineProps({
+  autofocus: {
+    type: Boolean,
+    default: false
+  }
+})
+
 const loadOtu = ({ id }) => {
   router.push({
     name: 'otus-id-overview',
@@ -22,4 +30,4 @@ const loadOtu = ({ id }) => {
     }
   })
 }
-</script>
+</script>

src/components/Map/VMap.global.vue

@@ -258,7 +258,7 @@ onUnmounted(() => {
 function setGeoJSON(geojson) {
   if (geojson) {
     L.geoJSON(geojson, {
-      ...geojsonDefaultOptions,
+      ...geojsonDefaultOptions(L),
       ...props.geojsonOptions
     }).addTo(geoJSONGroup)
 

src/components/Map/icons/AssertedDistribution.js

@@ -1,7 +1,6 @@
 import L from 'leaflet'
-
-export const AssertedDistribution = L.divIcon({
+export const AssertedDistribution = {
   className: 'bg-map-asserted bg-opacity-50 rounded-full',
   iconSize: [8, 8],
   iconAnchor: [4, 4]
-})
+}

src/components/Map/icons/CollectionObject.js

@@ -1,7 +1,5 @@
-import L from 'leaflet'
-
-export const CollectionObject = L.divIcon({
+export const CollectionObject = {
   className: 'bg-map-collection-object bg-opacity-50 rounded-full',
   iconSize: [8, 8],
   iconAnchor: [4, 4]
-})
+}

src/components/Map/icons/Georeference.js

@@ -1,7 +1,5 @@
-import L from 'leaflet'
-
-export const Georeference = L.divIcon({
+export const Georeference = {
   className: 'bg-map-georeference bg-opacity-50 rounded-full',
   iconSize: [8, 8],
   iconAnchor: [4, 4]
-})
+}

src/components/Map/icons/TypeMaterial.js

@@ -1,7 +1,5 @@
-import L from 'leaflet'
-
-export const TypeMaterial = L.divIcon({
+export const TypeMaterial = {
   className: 'bg-map-type-material bg-opacity-50 rounded-full',
   iconSize: [8, 8],
   iconAnchor: [4, 4]
-})
+}

src/components/Map/utils/geojsonOptions.js

@@ -25,7 +25,7 @@ function getRelevantType(base) {
   return types[0]
 }
 
-export default {
+export default (L) => ({
   onEachFeature: (feature, layer) => {
     const label = `
     <div class="max-h-32 overflow-y-auto text-xs">
@@ -53,7 +53,10 @@ export default {
 
   pointToLayer: (feature, latLng) => {
     const type = getRelevantType(feature.properties.base)
-    const marker = L.marker(latLng, { icon: Icons[type] || Icon.Georeference })
+    const markerStyle = Icons[type] || Icon.Georeference
+    const marker = L.marker(latLng, {
+      icon: L.divIcon(markerStyle)
+    })
 
     marker.pm.setOptions(DEFAULT_OPTIONS)
 
@@ -67,4 +70,4 @@ export default {
       return Shape[type]
     }
   }
-}
+})

src/components/Navbar/NavbarMobile.vue

@@ -1,40 +1,23 @@
 <template>
   <button
     type="button"
-    class="
-      inline-flex
-      items-center
-      p-2 z-50
-      ml-3
-      text-sm
-      text-primary-content
-      rounded-lg
-      md:hidden
-      print:hidden"
+    class="inline-flex items-center p-2 z-50 ml-3 text-sm text-primary-content rounded-lg md:hidden print:hidden"
     aria-controls="mobile-menu"
     aria-expanded="false"
     @click="toggleMenu"
   >
     <span class="sr-only">Open main menu</span>
     <IconClose v-if="isMenuVisible" />
-    <IconHamburger v-else />
+    <IconHamburger
+      class="w-6 h-6"
+      v-else
+    />
   </button>
 
   <AnimationOpacity>
     <div
       v-if="isMenuVisible"
-      class="
-        absolute
-        top-full
-        left-0
-        w-full
-        z-50
-        bg-base-foreground
-        text-base-content
-        block
-        shadow-md
-        md:hidden
-        print:hidden"
+      class="absolute top-full left-0 w-full z-50 bg-base-foreground text-base-content block shadow-md md:hidden print:hidden"
     >
       <nav class="font-normal container mx-auto">
         <ul class="flex flex-col m-0 p-0 border-t border-base-border">
@@ -51,7 +34,9 @@
             </router-link>
           </li>
           <li>
-            <SwitchTheme class="text-base-content p-4 pt-3 pb-3 border-b w-full border-base-border" />
+            <SwitchTheme
+              class="text-base-content w-full p-4 pt-3 pb-3 block box-border border-b border-b-base-border"
+            />
           </li>
         </ul>
       </nav>
@@ -66,6 +51,7 @@ import SwitchTheme from '../SwitchTheme.vue'
 const { header_links } = __APP_ENV__
 const isMenuVisible = ref(false)
 
-const toggleMenu = () => { isMenuVisible.value = !isMenuVisible.value }
-
-</script>
+const toggleMenu = () => {
+  isMenuVisible.value = !isMenuVisible.value
+}
+</script>

src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue

@@ -18,6 +18,16 @@ const props = defineProps({
   taxonId: {
     type: [Number, String],
     required: true
+  },
+
+  taxon: {
+    type: Object,
+    default: undefined
+  },
+
+  otu: {
+    type: Object,
+    default: undefined
   }
 })