viewer: migrate to vue 3, general refactoring and cleanup

Non-exhaustive list of fixes and improvements done at the same time:

- html default background to grey (avoids white flash during init)
- unified links behavior
- added more theme variables
- removed the flex-expand transition (it wasn't working) and replaced it
  with a slide
- fixed LdLoading not centered on the content
- title on removable tags
- fixed an issue with encoded URI from vue-router
- unified Item resource URLs
- removed the iframe for PlainTextViewer (it wasn't working properly)
  and replaced it with a pre
- fixed clear and search buttons tabindex
- fixed the information panel bumping up during the fade animation of
  tag's dropdown
- fixed some focus outlines not appearing correctly
- moved CSS variables to the :root context
- Code cleaning

GitHub: closes #217
GitHub: closes #300
GitHub: closes #297
GitHub: closes #105
GitHub: closes #267
GitHub: closes #275
GitHub: closes #228
GitHub: closes #215
GitHub: closes #112

1 files changed, 31 insertions, 29 deletions

diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index 5ab56e0..d148b9c 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -1,7 +1,7 @@
 <!-- ldgallery - A static generator which turns a collection of tagged
 --             pictures into a searchable web gallery.
 --
--- Copyright (C) 2019-2020  Guillaume FOUET
+-- Copyright (C) 2019-2022  Guillaume FOUET
 --
 -- This program is free software: you can redistribute it and/or modify
 -- it under the terms of the GNU Affero General Public License as
@@ -18,37 +18,39 @@
 -->
 
 <template>
-  <ld-gallery :items="items" :noresult="noResult" />
+  <GalleryTiles
+    :items="items.filteredByPath"
+    :noresult-message="noResult"
+  />
 </template>
 
-<script lang="ts">
-import IndexSearch from "@/services/indexsearch";
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script setup lang="ts">
+import { useIndexSearch } from '@/services/indexSearch';
+import { useGalleryStore } from '@/store/galleryStore';
+import { useUiStore } from '@/store/uiStore';
+import { computed, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import GalleryTiles from './GalleryTiles.vue';
 
-@Component
-export default class GalleryPicture extends Vue {
-  @Prop(String) readonly path!: string;
-  otherCount: number = 0;
+const { t } = useI18n();
+const uiStore = useUiStore();
+const galleryStore = useGalleryStore();
+const indexSearch = useIndexSearch();
 
-  mounted() {
-    this.$uiStore.toggleFullscreen(false);
-    this.$uiStore.toggleSearchMode(true);
-  }
+uiStore.toggleFullscreen(false);
+uiStore.searchMode = true;
+onUnmounted(() => {
+  uiStore.searchMode = false;
+  galleryStore.currentSearch = [];
+});
 
-  destroyed() {
-    this.$uiStore.toggleSearchMode(false);
-    this.$galleryStore.setCurrentSearch([]);
-  }
-
-  get items() {
-    const searchResult = IndexSearch.search(this.$galleryStore.currentSearch);
-    const filteredByPath = searchResult.filter(item => item.path.startsWith(this.path));
-    this.otherCount = searchResult.length - filteredByPath.length;
-    return filteredByPath;
-  }
-
-  get noResult() {
-    return this.$tc("search.no-result-fmt", this.otherCount, [this.otherCount]);
-  }
-}
+const items = computed(() => {
+  const { currentPath, currentSearch } = galleryStore;
+  if (!currentPath) return { searchResult: [], filteredByPath: [] };
+  const searchResult = indexSearch(currentSearch);
+  const filteredByPath = searchResult.filter(item => item.path.startsWith(currentPath));
+  return { searchResult, filteredByPath };
+});
+const otherCount = computed(() => items.value.searchResult.length - items.value.filteredByPath.length);
+const noResult = computed(() => t('search.no-result-fmt', [otherCount.value]));
 </script>