Merge branch 'development' into schema

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

src/components/Animation/AnimationOpacity.global.vue

@@ -10,6 +10,3 @@
     <slot />
   </transition>
 </template>
-
-<script setup>
-</script>

src/components/Dropdown/Dropdown.global.vue

@@ -1,26 +1,14 @@
 <template>
   <div class="relative inline">
-    <button @click="toggleMenu">
+    <button
+      title="Menu"
+      @click="toggleMenu"
+    >
       <slot name="button" />
     </button>
     <ul
       v-if="isVisible"
-      class="
-        bg-base-foreground
-        absolute font-normal
-        text-sm
-        text-base-lighter
-        right-0
-        z-10
-        mt-2
-        w-56
-        origin-top-right
-        rounded-md
-        shadow-lg
-        ring-1
-        ring-black
-        ring-opacity-5
-        focus:outline-none"
+      class="bg-base-foreground absolute font-normal text-sm text-base-lighter right-0 z-10 mt-2 w-56 origin-top-right rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
     >
       <li
         v-for="item in items"
@@ -50,7 +38,7 @@ const toggleMenu = () => {
   isVisible.value = !isVisible.value
 }
 
-const itemClicked = item => {
+const itemClicked = (item) => {
   isVisible.value = false
 
   item.action()

src/components/Gallery/GalleryMainImage.vue

@@ -7,6 +7,7 @@
       ref="imageElement"
       class="max-h-80 h-max w-100 cursor-zoom-in m-auto"
       :src="image.original"
+      :alt="image.depictions.map((d) => d.label).join(';')"
       @click="emit('open:viewer')"
     />
   </div>
@@ -38,5 +39,4 @@ watch(
 onMounted(() => {
   imageElement.value.addEventListener('load', () => (isLoading.value = false))
 })
-
 </script>

src/components/Layout/LayoutFooter.vue

@@ -1,5 +1,7 @@
 <template>
-  <footer class="footer text-white bottom-0 border-gray-200 bg-zinc-800 pl-4 pr-4">
+  <footer
+    class="footer text-white bottom-0 border-gray-200 bg-zinc-800 pl-4 pr-4"
+  >
     <div class="container mx-auto text-sm pt-2 pb-4">
       <div class="pt-4 pb-2">
         {{ project_authors }}
@@ -10,32 +12,31 @@
             class="text-secondary-color"
             :href="project_url"
           >
-            {{ project_url }} 
+            {{ project_url }}
           </a>
           &gt;
         </span>
       </div>
       <div class="flex items-center text-xs">
-        <component 
-          :is="copyright_image_link
-            ? 'a'
-            : 'span'"
+        <component
+          :is="copyright_image_link ? 'a' : 'span'"
           :href="copyright_image_link"
         >
           <img
             v-if="copyright_image"
-            class="mr-2"
             :src="copyright_image"
-          >
+            alt="copyright"
+            class="mr-2"
+          />
         </component>
         <p>{{ copyright_text }}</p>
       </div>
 
-      <hr class="mt-3 mb-3 border-gray-500">
+      <hr class="mt-3 mb-3 border-gray-500" />
 
       <div class="flex items-center">
         <span>
-          Data provided by 
+          Data provided by
           <a
             class="text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 font-medium"
             target="_blank"
@@ -49,7 +50,7 @@
 
         <span>
           Pages by
-          <a 
+          <a
             class="text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 font-medium"
             target="_blank"
             href="https://github.com/SpeciesFileGroup/taxonpages"
@@ -59,7 +60,7 @@
         </span>
         <span class="ml-2 mr-2">|</span>
         <span>
-          Support (Services) by 
+          Support (Services) by
           <a
             class="text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 font-medium"
             target="_blank"
@@ -73,7 +74,6 @@
   </footer>
 </template>
 <script setup>
-
 const {
   project_authors,
   project_citation,
@@ -82,5 +82,4 @@ const {
   copyright_image,
   copyright_image_link
 } = __APP_ENV__
-
 </script>

src/components/Navbar/NavbarMobile.vue

@@ -2,8 +2,9 @@
   <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"
+    title="Menu"
     aria-controls="mobile-menu"
-    aria-expanded="false"
+    :aria-expanded="isMenuVisible"
     @click="toggleMenu"
   >
     <span class="sr-only">Open main menu</span>

src/components/SwitchTheme.vue

@@ -2,6 +2,7 @@
   <button
     type="button"
     @click="toggleTheme"
+    title="Toggle mode"
   >
     <svg
       v-if="themeMode === themeModes.dark"

src/components/VSkeleton.global.vue

@@ -0,0 +1,49 @@
+<template>
+  <slot />
+  <span
+    v-if="isEmpty"
+    :class="class"
+  >
+    <span
+      v-for="line in lines"
+      :key="line"
+      class="inline-block w-full rounded-sm bg-gray-100 leading-5"
+    >
+      &zwnj;
+    </span>
+  </span>
+</template>
+
+<script setup>
+import { useAttrs, useSlots, computed } from 'vue'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: 'w-full'
+  },
+
+  lines: {
+    type: Number,
+    default: 1
+  }
+})
+
+const slots = useSlots()
+const attrs = useAttrs()
+
+const isEmpty = computed(() => {
+  const children = slots.default?.()
+
+  return isEmptyVNode(children)
+})
+
+function isEmptyVNode(children) {
+  if (!children) return true
+
+  const [firstNode] = children
+  let str = firstNode.children
+
+  return firstNode.el || str
+}
+</script>

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

@@ -3,13 +3,13 @@
     <div class="relative">
       <ClientOnly>
         <VSpinner v-if="isLoading" />
-          <VMap
-            class="h-96 max-h-96"
-            dragging
-            :zoom="zoom"
-            :geojson="geojson"
-            @geojson:ready="() => (isLoading = false)"
-          />
+        <VMap
+          class="h-96 max-h-96"
+          dragging
+          :zoom="zoom"
+          :geojson="geojson"
+          @geojson:ready="() => (isLoading = false)"
+        />
       </ClientOnly>
       <VButton
         class="h-6 text-sm absolute right-3 top-3 z-[400]"
@@ -78,7 +78,7 @@ const errorMessage = ref(null)
 
 const LEGEND = {
   AssertedDistribution: {
-    label: 'Asserted disitrubtion',
+    label: 'Asserted distribution',
     background: 'bg-map-asserted'
   },
   Georeference: {

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

@@ -21,16 +21,20 @@
         :count="citationList.middle.length"
         @click="showAll = true"
       />
-      <AnimationOpacity>
-        <div v-show="showAll">
-          <CitationRow
-            v-for="citation in citationList.middle"
-            :key="citation.label"
-            :citation="citation"
-          />
-        </div>
-      </AnimationOpacity>
-
+    </ul>
+    <AnimationOpacity>
+      <ul
+        class="text-sm"
+        v-show="showAll"
+      >
+        <CitationRow
+          v-for="citation in citationList.middle"
+          :key="citation.label"
+          :citation="citation"
+        />
+      </ul>
+    </AnimationOpacity>
+    <ul class="text-sm">
       <CitationRow
         v-for="citation in citationList.last"
         :key="citation.label"

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

@@ -1,6 +1,6 @@
 <template>
-  <div
-    class="flex justify-start border-b p-3 px-4 last:border-b-0 cursor-pointer border-base-muted"
+  <li
+    class="flex justify-start border-b p-3 px-4 cursor-pointer border-base-muted"
   >
     <div
       class="h-5 w-5 text-secondary-color opacity-60 mr-2 cursor-pointer"
@@ -9,7 +9,7 @@
       <IconPlusCircle class="h-5 w-5" />
     </div>
     <span>... Show all ... ({{ count }})</span>
-  </div>
+  </li>
 </template>
 
 <script setup>

src/modules/otus/components/Search/ListResults.vue

@@ -8,7 +8,7 @@
         <VTableHeaderCell
           class="w-full flex justify-between box-border items-center"
         >
-          <span>OTU</span>
+          <span>OTU ({{ list.length }})</span>
           <IconArrowRight
             class="opacity-50 cursor-pointer w-4 h-4"
             @click="emit('close:table')"

src/modules/otus/components/Search/OtuSearch.vue

@@ -28,7 +28,7 @@
       />
 
       <div
-        class="h-screen md:w-96 absolute top-0 bg-base-background z-[2000] overflow-auto ease-in-out duration-300 w-full"
+        class="h-full md:w-96 absolute top-0 bg-base-background z-[2000] overflow-auto ease-in-out duration-300 w-full"
         :class="{
           'md:-right-96 -right-full': !isTableVisible,
           'right-0': isTableVisible
@@ -97,7 +97,8 @@ function loadOTUs(geojson) {
   const payload = {
     geo_json: geojson,
     taxon_name_id: [props.otu.taxon_name_id],
-    descendants: true
+    descendants: true,
+    per: 5000
   }
 
   isLoading.value = true

src/modules/otus/components/TaxaInfo.vue

@@ -5,11 +5,11 @@
     </h2>
     <h1 class="text-xl dark:text-gray-100">
       <span>
-        <span 
+        <span
           :title="taxon.short_status"
-          v-html="taxon.full_name_tag" 
+          v-html="taxon.full_name_tag"
         />
-        <span 
+        <span
           v-if="!taxon.is_valid"
           class="ml-1"
           :class="statusStyle"
@@ -40,15 +40,8 @@ const props = defineProps({
   }
 })
 
-const status = computed(() => 
-  props.taxon.cached_is_valid
-    ? ''
-    : '&#10005;'
+const status = computed(() => (props.taxon.cached_is_valid ? '' : '&#10005;'))
+const statusStyle = computed(() =>
+  props.taxon.cached_is_valid ? '' : 'text-red-600'
 )
-const statusStyle = computed(() => 
-  props.taxon.cached_is_valid
-    ? ''
-    : 'text-red-600'
-)
-
 </script>