viewer: architectural fixes and improvements

Make use of VueX's strict mode (which is different from vuex-class-component strict mode)
Fixed issues and bad-practices with search filter tags mutations
Correctly implement the new index.json format

4 files changed, 6 insertions, 6 deletions

diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 2ac1216..2b45b71 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -53,7 +53,7 @@ import Navigation from "@/services/navigation";
 
 @Component
 export default class LdBreadcrumb extends Vue {
-  @Prop({ required: true }) readonly currentItemPath!: Gallery.Item[];
+  @Prop({ type: Array, required: true }) readonly currentItemPath!: Gallery.Item[];
   @Prop(Boolean) readonly searchMode!: boolean;
   @Ref() readonly breadcrumb!: HTMLUListElement;
 
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 367e08f..398107e 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -44,7 +44,7 @@ import { RawLocation } from "vue-router";
 
 @Component
 export default class LdCommand extends Vue {
-  @Prop({ required: true }) readonly currentItemPath!: Gallery.Item[];
+  @Prop({ type: Array, required: true }) readonly currentItemPath!: Gallery.Item[];
 
   commandToggleSearchPanelIcon(): string {
     return this.$uiStore.fullWidth ? "search" : "angle-double-left";
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 7f6521f..375c482 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -49,14 +49,14 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Model, Prop } from "vue-property-decorator";
+import { Component, Vue, Prop, PropSync } from "vue-property-decorator";
 import { Operation } from "@/@types/Operation";
 
 @Component
 export default class LdProposition extends Vue {
   @Prop({ type: Array, required: true }) readonly currentTags!: string[];
   @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
-  @Model() model!: Tag.Search[];
+  @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[];
 
   get Operation() {
     return Operation;
diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
index ad0845e..b2a2c58 100644
--- a/viewer/src/components/LdTagInput.vue
+++ b/viewer/src/components/LdTagInput.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Model, Prop } from "vue-property-decorator";
+import { Component, Vue, Prop, PropSync } from "vue-property-decorator";
 import { Operation } from "@/@types/Operation";
 import Navigation from "@/services/navigation";
 import IndexFactory from "@/services/indexfactory";
@@ -46,7 +46,7 @@ import IndexFactory from "@/services/indexfactory";
 @Component
 export default class LdTagInput extends Vue {
   @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
-  @Model() model!: Tag.Search[];
+  @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[];
 
   filteredTags: Tag.Search[] = [];