viewer: refactoring for tag and sort dropdowns

4 files changed, 142 insertions, 104 deletions

diff --git a/viewer/src/components/LdDropdown.vue b/viewer/src/components/LdDropdown.vue
new file mode 100644
index 0000000..2ab3252
--- /dev/null
+++ b/viewer/src/components/LdDropdown.vue
@@ -0,0 +1,92 @@
+<template>
+  <div style="position:relative;">
+    <Transition name="fade">
+      <div
+        v-if="model"
+        ref="dropdown"
+        class="scrollbar"
+        :class="$style.dropdown"
+        v-bind="attrs"
+      >
+        <div
+          v-for="(option,idx) in props.list"
+          :key="listKey ? option[props.listKey] : idx"
+          :tabindex="props.tabindexRoot + idx"
+          @click="emit('select', option)"
+          @keypress.enter.space="emit('select', option)"
+        >
+          <slot
+            name="option"
+            :option="option"
+          />
+        </div>
+        <slot
+          v-if="!props.list.length"
+          name="empty"
+        />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside, onKeyStroke, useVModel } from '@vueuse/core';
+import { ref, useAttrs, watch } from 'vue';
+
+const props = defineProps({
+  modelValue: { type: Boolean, required: true },
+  // Vue 3 currently won't allow generics in props
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  list: { type: Array<any>, required: true },
+  listKey: { type: [String, Number], default: null },
+  tabindexRoot: { type: Number, required: true },
+});
+const emit = defineEmits(['update:modelValue', 'select', 'opening', 'closing']);
+const model = useVModel(props, 'modelValue', emit);
+
+const attrs = useAttrs();
+
+const dropdown = ref();
+
+watch(() => model.value, value => {
+  if (value) emit('opening');
+  else emit('closing');
+});
+
+onClickOutside(dropdown, closeDropdown);
+onKeyStroke('Escape', closeDropdown);
+
+function closeDropdown() {
+  setTimeout(() => (model.value = false));
+}
+</script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<style lang="scss" module>
+@import "~@/assets/scss/theme";
+
+.dropdown {
+  position: absolute;
+  left: 0;
+  z-index: 99;
+  width: $layout-left;
+  color: $input-color;
+  background-color: $dropdown-item-color;
+  padding: 4px 0px;
+  > div {
+    padding: 4px 0;
+    margin: 2px; // For the focus border
+    cursor: pointer;
+    &:hover {
+      background-color: $dropdown-item-hover-color;
+    }
+    &:focus {
+      outline: solid 1px $button-active-color;
+    }
+  }
+}
+  </style>
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 9c84116..d8b3300 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -103,6 +103,7 @@ function validateSpashScreen() {
   overflow: hidden;
   touch-action: none;
   background-color: $content-bgcolor;
+  margin: 0;
 }
 .layout {
   position: fixed;
diff --git a/viewer/src/views/layout/left/LayoutTagInput.vue b/viewer/src/views/layout/left/LayoutTagInput.vue
index 7ad3ed0..a37c546 100644
--- a/viewer/src/views/layout/left/LayoutTagInput.vue
+++ b/viewer/src/views/layout/left/LayoutTagInput.vue
@@ -27,42 +27,38 @@
     @keypress.enter="inputEnter"
     @keydown.backspace="inputBackspace"
   />
-  <div style="position:relative;">
-    <Transition name="fade">
+  <LdDropdown
+    ref="dropdown"
+    v-model="showDropdown"
+    :list="filteredTags"
+    list-key="tagfiltered"
+    :tabindex-root="51"
+    :class="$style.dropdown"
+    :style="dropdownStyle"
+    @select="addTag"
+    @opening="emit('opening')"
+    @closing="cleanSearch(); emit('closing');"
+  >
+    <template #option="{option}:{option:TagSearch}">
+      <div v-text="option.display" />
+      <div v-text="option.items.length" />
+    </template>
+    <template #empty>
       <div
-        v-if="openDropdown"
-        ref="dropdown"
-        class="scrollbar"
-        :class="$style.dropdown"
-        :style="dropdownStyle"
-      >
-        <div
-          v-for="(tag,idx) in filteredTags"
-          :key="tag.tagfiltered"
-          :tabindex="51 + idx"
-          @click="addTag(tag)"
-          @keypress.enter.space="addTag(tag)"
-        >
-          <div v-text="tag.display" />
-          <div v-text="tag.items.length" />
-        </div>
-        <div
-          v-if="!filteredTags.length"
-          class="disaled"
-          :class="$style.nomatch"
-          v-text="t('tagInput.nomatch')"
-        />
-      </div>
-    </Transition>
-  </div>
+        :class="$style.nomatch"
+        v-text="t('tagInput.nomatch')"
+      />
+    </template>
+  </LdDropdown>
 </template>
 
 <script setup lang="ts">
 import { TagSearch } from '@/@types/tag';
+import LdDropdown from '@/components/LdDropdown.vue';
 import LdInput from '@/components/LdInput.vue';
 import { useIndexFactory } from '@/services/indexFactory';
 import { useGalleryStore } from '@/store/galleryStore';
-import { computedEager, onClickOutside, onKeyStroke, useElementBounding, useFocus, useVModel } from '@vueuse/core';
+import { computedEager, useElementBounding, useFocus, useVModel } from '@vueuse/core';
 import { computed, ref, StyleValue, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -77,19 +73,15 @@ const galeryStore = useGalleryStore();
 const indexFactory = useIndexFactory();
 
 const search = ref('');
-const openDropdown = computedEager<boolean>(() => !!search.value);
-watchEffect(() => {
-  if (openDropdown.value) emit('opening');
-  else emit('closing');
-});
+const showDropdown = ref(false);
+
+watchEffect(() => (showDropdown.value = !!search.value));
 
 // ---
 
 const dropdown = ref();
 const { top } = useElementBounding(dropdown);
 const dropdownStyle = computedEager<StyleValue>(() => ({ height: `calc(100vh - 8px - ${top.value}px)` }));
-onClickOutside(dropdown, closeDropdown);
-onKeyStroke('Escape', closeDropdown);
 
 const input = ref();
 const { focused } = useFocus(input);
@@ -111,16 +103,16 @@ function addTag(tag?: TagSearch) {
   const toPush = tag ?? filteredTags.value[0];
   if (!toPush) return;
   model.value.push(toPush);
-  closeDropdown();
+  cleanSearch();
 }
 function inputEnter() {
   if (search.value) addTag();
   else emit('search');
 }