Continues migration to Vue 3. #794.

package-lock.json

@@ -1626,9 +1626,9 @@
       }
     },
     "@ntohq/buefy-next": {
-      "version": "0.1.1",
+      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@ntohq/buefy-next/-/buefy-next-0.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@ntohq/buefy-next/-/buefy-next-0.1.2.tgz",
-      "integrity": "sha512-5ZX1S9bhLqPFEmkmZeaUCRg289Ui/k3mT2qKQQ2p8ihTTCsW2ozXTcpcV3wmwsf81kPjT90ykU18u2ve92M2fA==",
+      "integrity": "sha512-CrPNKDC9aqFEk2rAmIk0sLPwXOnfPCx9Vi/QzU1shxYoDUox+7FOBFzv+TCLkuS3HQHkK5qESN6O1CfMx8BMyw==",
       "requires": {
         "@babel/runtime": "7.18.9",
         "bulma": "0.9.4"
@@ -2223,6 +2223,11 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true
     },
+    "@yr/monotone-cubic-spline": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
+      "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA=="
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -2385,10 +2390,11 @@
       }
     },
     "apexcharts": {
-      "version": "3.41.0",
+      "version": "3.42.0",
-      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.41.0.tgz",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.42.0.tgz",
-      "integrity": "sha512-FJXA7NVjxs1q+ptR3b1I+pN8K/gWuXn+qLZjFz8EHvJOokdgcuwa/HSe5aC465HW/LWnrjWLSTsOQejQbQ42hQ==",
+      "integrity": "sha512-hYhzZqh2Efny9uiutkGU2M/EarJ4Nn8s6dxZ0C7E7N+SV4d1xjTioXi2NLn4UKVJabZkb3HnpXDoumXgtAymwg==",
       "requires": {
+        "@yr/monotone-cubic-spline": "^1.0.3",
         "svg.draggable.js": "^2.2.2",
         "svg.easing.js": "^2.0.0",
         "svg.filter.js": "^2.0.2",
@@ -2476,9 +2482,9 @@
       "integrity": "sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg=="
     },
     "axios": {
-      "version": "1.4.0",
+      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz",
-      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==",
       "requires": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -3107,9 +3113,9 @@
       }
     },
     "countup.js": {
-      "version": "2.7.0",
+      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.8.0.tgz",
-      "integrity": "sha512-IP9nYLGgW//0If73eXQdFlReGhpFGHaStqB1v82FknxnUWueF6HFuuOXySW4sEDMc88PsZL1EOn/NPkfTZalmQ=="
+      "integrity": "sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ=="
     },
     "cross-env": {
       "version": "7.0.3",
@@ -5582,9 +5588,9 @@
       "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
     },
     "photoswipe": {
-      "version": "5.3.8",
+      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.4.1.tgz",
-      "integrity": "sha512-4vTzOQt8GP4Chsm0s+8j2xDtVHAEN252PxrU12A1zXauNn0zD5HRHgjALKO2GKTyBnTnOrJUOxbV8LTrFIMrYw=="
+      "integrity": "sha512-iauO0fP4oMdZvjlXzeIe8um1fZatkGE0bqdoIwpb65jlo/KK1KhfD7Z51+0YhS2tC4FOoOtE1p0c4o/HbY1s2Q=="
     },
     "picocolors": {
       "version": "1.0.0",

package.json

@@ -8,15 +8,15 @@
     "build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --progress --mode production"
   },
   "dependencies": {
-    "@ntohq/buefy-next": "^0.1.1",
+    "@ntohq/buefy-next": "^0.1.2",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
     "another-vue3-blurhash": "^0.0.1",
-    "apexcharts": "^3.41.0",
+    "apexcharts": "^3.42.0",
-    "axios": "^1.4.0",
+    "axios": "^1.5.0",
     "blurhash": "^2.0.5",
     "bulma": "^0.9.4",
     "conditioner-core": "^2.3.3",
-    "countup.js": "^2.7.0",
+    "countup.js": "^2.8.0",
     "css-vars-ponyfill": "^2.4.8",
     "floating-vue": "^2.0.0-beta.24",
     "leaflet": "^1.9.4",
@@ -25,7 +25,7 @@
     "mitt": "^3.0.1",
     "moment": "^2.29.4",
     "node-sass": "^7.0.3",
-    "photoswipe": "^5.3.8",
+    "photoswipe": "^5.4.1",
     "qs": "^6.11.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/assets/css/tainacan-gutenberg-block-item-gallery.css

@@ -288,9 +288,17 @@
 :root {
   /*
 --swiper-pagination-color: var(--swiper-theme-color);
+--swiper-pagination-left: auto;
+--swiper-pagination-right: 8px;
+--swiper-pagination-bottom: 8px;
+--swiper-pagination-top: auto;
+--swiper-pagination-fraction-color: inherit;
+--swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
+--swiper-pagination-progressbar-size: 4px;
 --swiper-pagination-bullet-size: 8px;
 --swiper-pagination-bullet-width: 8px;
 --swiper-pagination-bullet-height: 8px;
+--swiper-pagination-bullet-border-radius: 50%;
 --swiper-pagination-bullet-inactive-color: #000;
 --swiper-pagination-bullet-inactive-opacity: 0.2;
 --swiper-pagination-bullet-opacity: 1;
@@ -313,7 +321,8 @@
 .swiper-pagination-custom,
 .swiper-horizontal > .swiper-pagination-bullets,
 .swiper-pagination-bullets.swiper-pagination-horizontal {
-  bottom: 10px;
+  bottom: var(--swiper-pagination-bottom, 8px);
+  top: var(--swiper-pagination-top, auto);
   left: 0;
   width: 100%; }
 
@@ -341,7 +350,7 @@
   width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
   height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
   display: inline-block;
-  border-radius: 50%;
+  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
   background: var(--swiper-pagination-bullet-inactive-color, #000);
   opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); }
   button.swiper-pagination-bullet {
@@ -361,7 +370,8 @@
 
 .swiper-vertical > .swiper-pagination-bullets,
 .swiper-pagination-vertical.swiper-pagination-bullets {
-  right: 10px;
+  right: var(--swiper-pagination-right, 8px);
+  left: var(--swiper-pagination-left, auto);
   top: 50%;
   transform: translate3d(0px, -50%, 0); }
   .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
@@ -393,9 +403,13 @@
 .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
   transition: 200ms transform, 200ms right; }
 
+/* Fraction */
+.swiper-pagination-fraction {
+  color: var(--swiper-pagination-fraction-color, inherit); }
+
 /* Progress */
 .swiper-pagination-progressbar {
-  background: rgba(0, 0, 0, 0.25);
+  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
   position: absolute; }
   .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
     background: var(--swiper-pagination-color, var(--swiper-theme-color));
@@ -410,11 +424,11 @@
     transform-origin: right top; }
   .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
     width: 100%;
-    height: 4px;
+    height: var(--swiper-pagination-progressbar-size, 4px);
     left: 0;
     top: 0; }
   .swiper-vertical > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
-    width: 4px;
+    width: var(--swiper-pagination-progressbar-size, 4px);
     height: 100%;
     left: 0;
     top: 0; }

src/views/admin/components/edition/collection-edition-form.vue

@@ -704,7 +704,7 @@ export default {
     mixins: [ wpAjax, formHooks ],
     data(){
         return {
-            collectionId: Number,
+            collectionId: [String, Number],
             collection: null,
             isLoading: false,
             form: {

src/views/admin/components/edition/item-edition-form.vue

@@ -775,10 +775,10 @@ export default {
             swiper: {},
             selected: 'Home',
             pageTitle: '',
-            itemId: Number,
+            itemId: [String, Number],
             item: {},
             itemRequestCancel: undefined,
-            collectionId: Number,
+            collectionId: [String, Number],
             sequenceId: Number,
             itemPosition: Number,
             isCreatingNewItem: false,
@@ -790,7 +790,7 @@ export default {
             metadataSectionCollapses: [],
             collapseAll: true,
             form: {
-                collectionId: Number,
+                collectionId: [String, Number],
                 status: '',
                 document: '',
                 document_type: '',
@@ -831,6 +831,7 @@ export default {
         },
         itemMetadata() {
             const realItemMetadata = JSON.parse(JSON.stringify(this.getItemMetadata()));
+            console.log(realItemMetadata)
             const tweakedItemMetadata = realItemMetadata.map((anItemMetadatum) => {
 
                 // We need this because repository level metadata have an array of section IDs

src/views/admin/components/edition/item-form-footer-buttons.vue

@@ -188,7 +188,7 @@ import ItemCreationStatusDialog from '../other/item-creation-status-dialog.vue';
 export default {
     props: {
         status: String,
-        collectionId: Number|String,
+        collectionId: [Number, String],
         isOnSequenceEdit: Boolean,
         isCurrentItemOnSequenceEdit: Boolean,
         hasNextItemOnSequenceEdit: Boolean,

src/views/admin/components/edition/term-edition-form.vue

@@ -318,7 +318,7 @@
                             this.form = {};
                             this.formErrors = {};
                             this.isLoading = false;
-                            this.$parent.close();
+                            this.$emit('close');
                         })
                         .catch((errors) => {
                             this.isLoading = false;
@@ -350,7 +350,7 @@
                         .then((term) => {
                             this.formErrors = {};
                             this.$emit('onEditionFinished', { term: term, hasChangedParent: this.hasChangedParent, initialParent: this.initialParentId });
-                            this.$parent.close();
+                            this.$emit('close');
                         })
                         .catch((errors) => {
                             for (let error of errors.errors) {
@@ -363,7 +363,7 @@
                 }
             },
             cancelEdition() {
-                this.$parent.close();
+                this.$emit('close');
             },
             deleteHeaderImage() {
                 this.form = Object.assign({},

src/views/admin/components/filter-types/taxonomy/Checkbox.vue

@@ -75,7 +75,6 @@
         mixins: [ filterTypeMixin ],
         props: {
             isRepositoryLevel: Boolean,
-            currentCollectionId: String,
             filtersAsModal: Boolean
         },
         emits: [

src/views/admin/components/lists/collection-metadata-list.vue

@@ -558,7 +558,7 @@ export default {
     },
     computed: {
         hasSomeMetadataTypeFilterApplied() {
-            return this.metadataTypeFilterOptions.length && this.metadataTypeFilterOptions.some((metadatumType) => metadatumType.enabled);
+            return this.metadataTypeFilterOptions.length > 0 && this.metadataTypeFilterOptions.some((metadatumType) => metadatumType.enabled);
         },
         activeMetadataSectionsList: {
             get() {

src/views/admin/components/lists/related-items-list.vue

@@ -160,7 +160,7 @@
             isLoading: Boolean,
             isEditable: Boolean,
             itemId: String,
-            collectionId: String,
+            collectionId: [String, Number],
             isMobileScreen: Boolean
         },
         data() {

src/views/admin/components/lists/repository-metadata-list.vue

@@ -316,7 +316,7 @@ export default {
     },
     computed: {
         hasSomeMetadataTypeFilterApplied() {
-            return this.metadataTypeFilterOptions.length && this.metadataTypeFilterOptions.some((metadatumType) => metadatumType.enabled);
+            return this.metadataTypeFilterOptions.length > 0 && this.metadataTypeFilterOptions.some((metadatumType) => metadatumType.enabled);
         },
         activeMetadatumList: {
             get() {

src/views/admin/components/lists/terms-list-hierarchical.vue

@@ -17,6 +17,7 @@
 
         <!-- Hierarchical lists -->
         <transition-group
+                tag="div"
                 class="tainacan-hierarchical-list-columns-container"
                 name="page-left"
                 ref="tainacan-finder-scrolling-container">

src/views/admin/components/metadata-types/date/Date.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-input
+        <!-- <b-input
                 :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
                 :disabled="disabled"
                 :custom-class="isInvalidDate && dateValue ? 'is-danger' : ''"
@@ -10,6 +10,17 @@
                 @update:model-value="onInput"
                 @blur="onBlur"
                 @focus="onMobileSpecialFocus"
+                :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : dateFormat.toLowerCase()" /> -->
+        <!-- TODO: FIX IMASK -->    
+        <b-input
+                :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
+                :disabled="disabled"
+                :custom-class="isInvalidDate && dateValue ? 'is-danger' : ''"
+                type="text"
+                v-model="dateValue"
+                @update:model-value="onInput"
+                @blur="onBlur"
+                @focus="onMobileSpecialFocus"
                 :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : dateFormat.toLowerCase()" />
         <p
                 v-if="isInvalidDate && dateValue"

src/views/admin/components/metadata-types/geocoordinate/GeoCoordinate.vue

@@ -131,7 +131,7 @@
                 return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.map_provider ? this.itemMetadatum.metadatum.metadata_type_options.map_provider : 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
             },
             initialZoom() {
-                return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.initial_zoom ? this.itemMetadatum.metadatum.metadata_type_options.initial_zoom : 5;
+                return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.initial_zoom ? Number(this.itemMetadatum.metadatum.metadata_type_options.initial_zoom) : 5;
             },
             maxZoom() {
                 return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.maximum_zoom ? this.itemMetadatum.metadatum.metadata_type_options.maximum_zoom : 12;
@@ -171,7 +171,7 @@
             },
             shouldAddMore() {
                 // MaxTags value may come from a preset prop (bulk adition, for example) or from the actual maxMultipleValues setting.
-                const hasMaxTagsValue = ( this.maxtags != undefined ? this.maxtags : (this.itemMetadatum.metadatum.multiple == 'yes' || this.allowNew === true ? (this.maxMultipleValues !== undefined ? this.maxMultipleValues : null) : '1') );
+                const hasMaxTagsValue = ( this.maxtags != undefined ? this.maxtags : (this.itemMetadatum.metadatum.multiple == 'yes' ? (this.maxMultipleValues !== undefined ? this.maxMultipleValues : null) : '1') );
                 // For multivalued metadata without maxMultipleValues, the limit is infinet, so we should let add anyway.
                 return (hasMaxTagsValue !== null ? (this.selected.length < hasMaxTagsValue) : true);
             }

src/views/admin/components/metadata-types/tainacan-form-item.vue

@@ -74,6 +74,7 @@
                         :is-metadata-navigation="isMetadataNavigation" />
                 <template v-if="isMultiple && values.length > 1">
                     <transition-group
+                            tag="div"
                             name="filter-item"
                             class="multiple-inputs">
                         <template 

src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue

@@ -83,13 +83,13 @@
 </template>
 
 <script>
-    import TainacanTaxonomyTagInput from './TaxonomyTaginput.vue';
+    import TaxonomyTagInput from './TaxonomyTaginput.vue';
     import CheckboxRadioMetadataInput from '../../other/checkbox-radio-metadata-input.vue';
     import { tainacan as axios } from '../../../js/axios.js';
 
     export default {
         components: {
-            TainacanTaxonomyTagInput,
+            TaxonomyTagInput,
             CheckboxRadioMetadataInput
         },
         props: {

src/views/admin/components/modals/activity-details-modal.vue

@@ -551,7 +551,7 @@
                 <button
                         class="button is-outlined"
                         type="button"
-                        @click="$parent.close()">
+                        @click="$emit('close')">
                     {{ $i18n.get('close') }}
                 </button>
                 <div class="buttons is-pulled-right">
@@ -590,7 +590,7 @@
 
                     <!-- <button
                             v-if="activity.status == 'publish'"
-                            @click="$parent.close()"
+                            @click="$emit('close')"
                             type="button"
                             class="button is-secondary">
                         <span>OK</span>
@@ -670,7 +670,7 @@
             '$route': {
                 handler(to, from) {
                     if (to !== from)
-                        this.$parent.close();
+                        this.$emit('close');
                 },
                 deep: true
             }

src/views/admin/components/modals/available-exporters-modal.vue

@@ -37,7 +37,7 @@
                                 id="button-cancel-exporter-selection"
                                 class="button is-outlined"
                                 type="button"
-                                @click="$parent.close();">
+                                @click="$emit('close');">
                             {{ $i18n.get('cancel') }}</button>
                     </div>
                 </footer>
@@ -85,7 +85,7 @@
             ]),
             onSelectExporter(exporterType) {
                 this.$router.push({ path: this.$routerHelper.getExporterEditionPath(exporterType.slug), query: { sourceCollection: this.sourceCollection } });
-                this.$parent.close();
+                this.$emit('close');
             }
         }
     }

src/views/admin/components/modals/available-importers-modal.vue

@@ -41,7 +41,7 @@
                         <button 
                                 class="button is-outlined" 
                                 type="button" 
-                                @click="$parent.close()">Close</button>
+                                @click="$emit('close')">Close</button>
                     </div>
                     <!-- <div class="control">
                         <button class="button is-success">Confirm</button>
@@ -87,7 +87,7 @@ export default {
         ]),
         onSelectImporter(importerType) {
             this.$router.push({ path: this.$routerHelper.getImporterEditionPath(importerType.slug), query: { targetCollection: this.targetCollection } });
-            this.$parent.close();
+            this.$emit('close');
         }
     }
 }

src/views/admin/components/modals/bulk-edition-modal.vue

@@ -30,6 +30,7 @@
                                 :disabled="!!bulkEditionProcedures[criterion].metadatum || metadataIsLoading"
                                 class="tainacan-bulk-edition-field tainacan-bulk-edition-field-not-last"
                                 :placeholder="$i18n.get('instruction_select_a_metadatum')"
+                                inherit-attrs="false"
                                 @update:model-value="addToBulkEditionProcedures($event, 'metadatum', criterion)">
                             <template 
                                     v-for="(metadatum, index) in metadata"
@@ -292,7 +293,7 @@
             <footer class="field is-grouped form-submit">
                 <p class="control">
                     <button
-                            @click="$eventBusSearch.loadItems(); $parent.close()"
+                            @click="$eventBusSearch.loadItems(); $emit('close')"
                             :disabled="(Object.keys(bulkEditionProcedures).length &&
                                 bulkEditionProcedures[editionCriteria[editionCriteria.length-1]].isExecuting) || false"
                             type="button"
@@ -305,7 +306,7 @@
                             :disabled="dones.every((item) => item === true) === false"
                             class="button is-success"
                             type="button"
-                            @click="$root.$emit('openProcessesPopup'); $eventBusSearch.loadItems(); $parent.close();">
+                            @click="$root.$emit('openProcessesPopup'); $eventBusSearch.loadItems(); $emit('close');">
                         {{ $i18n.get('finish') }}
                     </button>
                 </p>
@@ -324,7 +325,7 @@
             totalItems: Array,
             objectType: String,
             selectedForBulk: Object,
-            collectionId: Number
+            collectionId: [String, Number]
         },
         data() {
             return {

src/views/admin/components/modals/capability-edition-modal.vue

@@ -83,7 +83,7 @@
                     id="button-cancel-importer-edition"
                     class="button is-outlined"
                     type="button"
-                    @click="$parent.close()">
+                    @click="$emit('close')">
                 {{ $i18n.get('exit') }}</button>
         </div>
     </div>

src/views/admin/components/modals/collection-creation-modal.vue

@@ -64,7 +64,7 @@
                         :key="metadatumMapper.slug">
                     <button
                             class="collection-creation-option"
-                            @click="$router.push($routerHelper.getNewMappedCollectionPath(metadatumMapper.slug)); $parent.close();"
+                            @click="$router.push($routerHelper.getNewMappedCollectionPath(metadatumMapper.slug)); $emit('close');"
                             v-if="metadatumMapper.metadata != false"
                             aria-role="listitem">
                         <h3>{{ metadatumMapper.name }}</h3>
@@ -103,7 +103,7 @@
                     <button 
                             class="button is-outlined" 
                             type="button" 
-                            @click="$parent.close()">{{ $i18n.get('close') }}</button>
+                            @click="$emit('close')">{{ $i18n.get('close') }}</button>
                 </div>
             </footer>
         </section>
@@ -187,7 +187,7 @@ export default {
                     });
                     this.isCreatingCollectionPreset = false;
                     this.$router.push(this.$routerHelper.getCollectionsPath());
-                    this.$parent.close();
+                    this.$emit('close');
                 })
                 .catch((error) =>{
                     if (typeof collectionPreset.onError === 'function') {

src/views/admin/components/modals/collections-modal.vue

@@ -48,7 +48,7 @@
                         <button 
                                 class="button is-outlined" 
                                 type="button" 
-                                @click="$parent.close()">Close</button>
+                                @click="$emit('close')">Close</button>
                     </div>
                 </footer>
             </section>
@@ -92,7 +92,7 @@ export default {
         ]),
         onSelectCollection(collection) {
             this.$router.push(this.$routerHelper.getNewItemPath(collection.id));
-            this.$parent.close();
+            this.$emit('close');
         }
     }
 }

src/views/admin/components/modals/exposers-modal.vue

@@ -236,7 +236,7 @@
                     <button 
                             class="button is-outlined" 
                             type="button" 
-                            @click="$parent.close()">Close</button>
+                            @click="$emit('close')">Close</button>
                 </div>
             </footer>
         </section>
@@ -260,9 +260,9 @@ export default {
         }
     },
     props: {
-        collectionId: Number,
+        collectionId: [String, Number],
         totalItems: Number,
-        itemId: Number,
+        itemId: [String, Number],
         itemURL: String,
         selectedItems: Array
     },

src/views/admin/components/modals/item-document-text-modal.vue

@@ -17,14 +17,14 @@
                         id="button-cancel-text-content-writing"
                         class="button is-outlined"
                         type="button"
-                        @click="$emit('cancelTextWriting');$parent.close();">
+                        @click="$emit('cancelTextWriting');$emit('close');">
                     {{ $i18n.get('cancel') }}</button>
             </div>
             <div class="control">
                 <button
                         id="button-submit-text-content-writing"
                         type="submit"
-                        @click.prevent="confirmTextWriting();$parent.close();"
+                        @click.prevent="confirmTextWriting();$emit('close');"
                         class="button is-success">
                     {{ $i18n.get('save') }}</button>
             </div>

src/views/admin/components/modals/item-document-url-modal.vue

@@ -67,13 +67,13 @@
                         id="button-cancel-url-link-selection"
                         class="button is-outlined"
                         type="button"
-                        @click="$parent.close()">
+                        @click="$emit('close')">
                     {{ $i18n.get('cancel') }}</button>
             </div>
             <div class="control">
                 <button
                         id="button-submit-url-link-selection"
-                        @click.prevent="confirmURLSelection();$parent.close();"
+                        @click.prevent="confirmURLSelection();$emit('close');"
                         class="button is-success">
                     {{ $i18n.get('save') }}</button>
             </div>

src/views/admin/components/navigation/primary-menu.vue

@@ -34,8 +34,8 @@
                 </li>
                 <li v-if="!$adminOptions.hidePrimaryMenuItemsButton">
                     <router-link
-                            :to="$routerHelper.getItemsPath()"
+                            :to="{name: 'RepositoryItemsPage' }"
-                            :class="activeRoute == 'ItemsPage' ? 'is-active':''">
+                            :class="activeRoute == 'RepositoryItemsPage' ? 'is-active':''">
                         <span class="icon">
                             <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-items"/>
                         </span>

src/views/admin/components/other/checkbox-radio-filter-input.vue

@@ -168,7 +168,8 @@
                     <transition-group
                             v-if="!isSearching && isTaxonomy"
                             class="modal-card-body tainacan-finder-columns-container"
-                            name="page-left">
+                            name="page-left"
+                            tag="div">
                         <div 
                                 v-for="(finderColumn, key) in finderColumns"
                                 class="tainacan-finder-column"
@@ -304,7 +305,7 @@
                     <button
                             class="button is-outlined"
                             type="button"
-                            @click="$parent.close()">{{ $i18n.get('cancel') }}
+                            @click="$emit('close')">{{ $i18n.get('cancel') }}
                     </button>
                 </div>
                 <div class="control">
@@ -329,14 +330,14 @@
         mixins: [ dynamicFilterTypeMixin ],
         props: {
             filter: '',
-            parent: Number,
+            parent: [Number, String],
-            taxonomy_id: Number,
+            taxonomy_id: [Number, String],
             taxonomy: String,
-            collectionId: Number,
+            collectionId: [String, Number],
-            metadatumId: Number,
+            metadatumId: [Number, String],
             metadatum: Object,
             selected: Array,
-            currentCollectionId: String,
+            currentCollectionId: [Number, String],
             isTaxonomy: {
                 type: Boolean,
                 default: false,
@@ -806,7 +807,7 @@
             },
             applyFilter() {
                 if (this.isModal)
-                    this.$parent.close();
+                    this.$emit('close');
                 else    
                     this.initializeValues();
 

src/views/admin/components/other/checkbox-radio-metadata-input.vue

@@ -172,7 +172,8 @@
                         class="modal-card-body tainacan-finder-columns-container"
                         :style="{ height: expandResultsSection ? 'auto' : '0px' }"
                         name="page-left"
-                        ref="tainacan-finder-scrolling-container">
+                        ref="tainacan-finder-scrolling-container"
+                        tag="div">
                     <div 
                             v-for="(finderColumn, key) in finderColumns"
                             class="tainacan-finder-column"
@@ -328,7 +329,7 @@
             parent: Number,
             taxonomy_id: Number,
             taxonomy: String,
-            collectionId: Number,
+            collectionId: [Number, String],
             metadatumId: Number,
             metadatum: Object,
             selected: Array,

src/views/admin/components/other/custom-dialog.vue

@@ -44,13 +44,13 @@
                         v-if="!hideCancel"
                         class="button is-outlined" 
                         type="button"
-                        @click="$parent.close()">
+                        @click="$emit('close')">
                     {{ $i18n.get('cancel') }}
                 </button>
                 <button 
                         type="submit"
                         class="button is-success"
-                        @click="onConfirm(); $parent.close();">
+                        @click="onConfirm(); $emit('close');">
                     {{ $i18n.get('continue') }}
                 </button>
             </footer>

src/views/admin/components/other/file-preview.vue

@@ -22,7 +22,7 @@
                         id="button-cancel-importer-edition"
                         class="button is-outlined"
                         type="button"
-                        @click="$parent.close()">
+                        @click="$emit('close')">
                     {{ $i18n.get('exit') }}</button>
             </div>
         </div>

src/views/admin/components/other/item-copy-dialog.vue

@@ -53,7 +53,7 @@
                         type="submit"
                         class="button is-outlined"
                         :disabled="isLoading"
-                        @click="onConfirm(newItems); $parent.close();">
+                        @click="onConfirm(newItems); $emit('close');">
                     {{ hasCopied ? $i18n.get('label_return_to_list') : $i18n.get('cancel') }}
                 </button>
                 <button 
@@ -68,7 +68,7 @@
                 <button 
                         v-if="copyCount == 1 && hasCopied && newItems.length == 1"
                         class="button is-secondary" 
-                        @click.prevent="$router.push($routerHelper.getItemEditPath(collectionId, newItems[0].id)); $parent.close();"
+                        @click.prevent="$router.push($routerHelper.getItemEditPath(collectionId, newItems[0].id)); $emit('close');"
                         type="submit">
                     {{ $i18n.getFrom('items','edit_item') }}
                 </button>
@@ -105,7 +105,7 @@
                 type: Function,
                 default: () => {}
             },
-            collectionId: String,
+            collectionId: [String, Number],
             itemId: String
         },
         data() {
@@ -169,7 +169,7 @@
                     let sequenceId = group.id;
                     this.isCreatingSequenceEditGroup = false;
                     this.$router.push(this.$routerHelper.getCollectionSequenceEditPath(this.collectionId, sequenceId, 1));
-                    this.$parent.close();
+                    this.$emit('close');
                 });
             },
             openBulkEditionModal() {
@@ -192,7 +192,7 @@
                     closeButtonAriaLabel: this.$i18n.get('close')
                 }); 
 
-                this.$parent.close();
+                this.$emit('close');
             },
         }
     }

src/views/admin/components/other/item-creation-status-dialog.vue

@@ -53,13 +53,13 @@
                         type="button"
                         style="margin-right: auto"
                         class="button is-outlined"
-                        @click="$parent.close();">
+                        @click="$emit('close');">
                     {{ $i18n.get('cancel') }}
                 </button>
                 <button 
                         type="submit"
                         class="button is-success"
-                        @click="onConfirm(selectedStatus); $parent.close();">
+                        @click="onConfirm(selectedStatus); $emit('close');">
                     {{ $i18n.get('label_create_item') }}
                 </button>
             </footer>

src/views/admin/components/other/term-deletion-dialog.vue

@@ -48,13 +48,13 @@
                         v-if="!hideCancel"
                         class="button is-outlined" 
                         type="button"
-                        @click="$parent.close()">
+                        @click="$emit('close')">
                     {{ $i18n.get('cancel') }}
                 </button>
                 <button 
                         type="submit"
                         class="button is-success"
-                        @click="onConfirm(typeOfDelete); $parent.close();">
+                        @click="onConfirm(typeOfDelete); $emit('close');">
                     {{ $i18n.get('continue') }}
                 </button>
             </footer>

src/views/admin/components/other/term-multiple-insertion-dialog.vue

@@ -111,14 +111,14 @@
                         v-if="!hideCancel"
                         class="button is-outlined" 
                         type="button"
-                        @click="$parent.close()">
+                        @click="$emit('close')">
                     {{ $i18n.get('cancel') }}
                 </button>
                 <button 
                         type="submit"
                         class="button is-success"
                         :disabled="hasParent ? !selectedParentTerm : false"
-                        @click="onConfirm({ parent: hasParent ? selectedParentTerm : 0, termNames: termNames }); $parent.close();">
+                        @click="onConfirm({ parent: hasParent ? selectedParentTerm : 0, termNames: termNames }); $emit('close');">
                     {{ $i18n.get('continue') }}
                 </button>
             </footer>

src/views/admin/components/other/term-parent-selection-dialog.vue

@@ -78,14 +78,14 @@
                         v-if="!hideCancel"
                         class="button is-outlined" 
                         type="button"
-                        @click="$parent.close()">
+                        @click="$emit('close')">
                     {{ $i18n.get('cancel') }}
                 </button>
                 <button 
                         type="submit"
                         class="button is-success"
                         :disabled="hasParent ? !selectedParentTerm : false"
-                        @click="onConfirm(hasParent ? selectedParentTerm : 0); $parent.close();">
+                        @click="onConfirm(hasParent ? selectedParentTerm : 0); $emit('close');">
                     {{ $i18n.get('continue') }}
                 </button>
             </footer>

src/views/admin/components/search/filters-items-list.vue

@@ -306,7 +306,7 @@
             FiltersTagsList
         },
         props: {
-            collectionId: String,
+            collectionId: [String, Number],
             isRepositoryLevel: Boolean,
             taxonomy: String,
             filtersAsModal: Boolean,

src/views/admin/components/search/filters-tags-list.vue

@@ -7,7 +7,7 @@
                     class="filter-tags-info">
                 <span 
                         style="margin-right: 1em"
-                        v-html="totalItems == 1 ? $i18n.getWithVariables('info_item_%s_found', [totalItems]) : $i18n.getWithVariables('info_items_%s_found', [totalItems])" />
+                        v-html="totalItems === null ? $i18n.get('label_loading_items') : totalItems == 1 ? $i18n.getWithVariables('info_item_%s_found', [totalItems]) : $i18n.getWithVariables('info_items_%s_found', [totalItems])" />
                 <span>
                     <span v-html="filterTags.length == 1 ? $i18n.getWithVariables('info_%s_applied_filter', [filterTags.length]) : $i18n.getWithVariables('info_%s_applied_filters', [filterTags.length])" />
                     &nbsp;

src/views/admin/js/event-bus-search.js

@@ -6,10 +6,10 @@ export default {
         
         const emitter = mitt();
         const bus = {
+            $userPrefs: app.config.globalProperties.$userPrefs,
             $store: app.config.globalProperties.$store,
             $router: app.config.globalProperties.$router,
             $route: app.config.globalProperties.$route,
-            $userPrefs: app.config.globalProperties.$userPrefs,
             errors : [],
             query: {},
             collectionId: undefined,
@@ -171,7 +171,7 @@ export default {
                 this.$store.dispatch('search/setAdminViewMode', adminViewMode);
                 this.updateURLQueries();  
             },
-            setSelectedItemsForIframe(selectedItems, singleSelection) {
+            async setSelectedItemsForIframe(selectedItems, singleSelection) {
 
                 if (singleSelection)
                     this.$store.dispatch('search/cleanSelectedItems');
@@ -180,36 +180,48 @@ export default {
 
                 let currentSelectedItems = this.$store.getters['search/getSelectedItems'];
 
-                if (window.history.pushState) {
+                if (window.history.replaceState) {
                     let searchParams = new URLSearchParams(window.location.search);
                     searchParams.delete('selecteditems');
                     for (let selectedItem of currentSelectedItems)
                         searchParams.append('selecteditems', selectedItem);
 
                     let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString() + window.location.hash;
-                    window.history.pushState({path: newurl}, '', newurl);
+
+                    await this.$router.push(newurl)
+                    window.history.replaceState({ ...window.history.state, ...{ path: newurl } }, '')
                 }      
             },
             cleanSelectedItems() {
                 this.$store.dispatch('search/cleanSelectedItems');
             },
             filterBySelectedItems(selectedItems) {
-                this.$router.replace({ query: {} });
+                if ( app.config.globalProperties.$route.name ) {
-                this.$router.replace({ query: { postin: selectedItems } });
+                    this.$router.replace({ name: app.config.globalProperties.$route.name, query: {} });
+                    this.$router.replace({ name: app.config.globalProperties.$route.name, query: { postin: selectedItems } });
+                } else {
+                    this.$router.replace({ path: '', query: {} });
+                    this.$router.replace({ path: '', query: { postin: selectedItems } });
+                }
             },
             highlightsItem(itemId) {
                 this.$store.dispatch('search/highlightsItem', itemId);
                 this.updateURLQueries();
             },
             updateURLQueries() {
-                this.$router.replace({ query: {} });
+                if ( app.config.globalProperties.$route.name ) {
-                this.$router.replace({ query: this.$store.getters['search/getPostQuery'] });
+                    this.$router.replace({ name: app.config.globalProperties.$route.name, query: {} });
+                    this.$router.replace({ name: app.config.globalProperties.$route.name, query: this.$store.getters['search/getPostQuery'] });
+                } else {
+                    this.$router.replace({ path: '', query: {} });
+                    this.$router.replace({ path: '', query: this.$store.getters['search/getPostQuery'] });
+                }
             },
             updateStoreFromURL() {
                 this.$store.dispatch('search/set_postquery', this.$route.query);
             },
             loadItems() {
-                console.log('loadItems')
+                
                 // Forces fetch_only to be filled before any search happens
                 if (this.$store.getters['search/getPostQuery']['fetch_only'] != undefined) {  
 
@@ -220,7 +232,7 @@ export default {
 
                     this.$store.dispatch('collection/fetchItems', {
                         'collectionId': this.collectionId,
-                        'isOnTheme': (this.$route.name == null),
+                        'isOnTheme': app.config.globalProperties.$route.meta && app.config.globalProperties.$route.meta.isOnTheme,
                         'termId': this.termId,
                         'taxonomy': this.taxonomy
                     }).then((resp) => {

src/views/admin/js/filter-types-mixin.js

@@ -19,7 +19,7 @@ export const filterTypeMixin = {
         isRepositoryLevel: Boolean,
         isUsingElasticSearch: Boolean,
         isLoadingItems: Boolean,
-        currentCollectionId: String|Number
+        currentCollectionId: [Number, String]
     },
     created() {
         this.collectionId = this.filter.collection_id ? this.filter.collection_id : this.collectionId;

src/views/admin/js/router.js

@@ -30,7 +30,7 @@ const i18nGet = function (key) {
 };
 
 const routes = [
-    { path: '/', redirect:'/home' },
+    { path: '/', redirect: { name: 'HomePage' } },
     { path: '/home', name: 'HomePage', component: HomePage, meta: {title: 'Tainacan'} },
 
     { path: '/collections', name: 'CollectionsPage', component: CollectionsPage, meta: { title: i18nGet('title_repository_collections_page') } },
@@ -39,8 +39,12 @@ const routes = [
 
     { path: '/collections/:collectionId', component: CollectionPage, meta: {title: i18nGet('title_collection_page') },
       children: [
-        { path: '', redirect: { name: 'CollectionItemsPage' }},
+        /**
-        { path: 'items', component: ItemsPage, name: 'CollectionItemsPage', meta: {title: i18nGet('title_collection_page') }, props: { isOnTheme: false } },
+         * Previously, the first child route had a path: ''. Due to the following Vue3 update, we're doing it like that
+         * https://router.vuejs.org/guide/migration/#Named-children-routes-with-an-empty-path-no-longer-appends-a-slash
+         */
+        { path: '/collections/:collectionId', redirect: { name: 'CollectionItemsPage' }},
+        { path: 'items', component: ItemsPage, name: 'CollectionItemsPage', meta: {title: i18nGet('title_collection_page') }, meta: { isOnTheme: false } },
         { path: 'items/:itemId/edit', name: 'ItemEditionForm', component: ItemEditionForm, meta: {title:  i18nGet('title_edit_item') } },
         { path: 'items/new', name: 'CollectionItemCreatePage', component: ItemEditionForm, meta: {title: i18nGet('title_create_item_collection') } },
         { path: 'items/:itemId', name: 'ItemPage', component: ItemPage, meta: {title: i18nGet('title_item_page') } },
@@ -55,7 +59,7 @@ const routes = [
     ]
     },
 
-    { path: '/items', name: 'ItemsPage', component: ItemsPage, meta: {title: i18nGet('title_items_page') } },
+    { path: '/items', name: 'RepositoryItemsPage', component: ItemsPage, meta: {title: i18nGet('title_items_page') } },
     { path: '/items/new', name: 'ItemCreationForm', component: ItemEditionForm, meta: {title: i18nGet('title_create_item') } },
 
     { path: '/filters', name: 'FiltersPage', component: FiltersPage, meta: {title: i18nGet('title_repository_filters_page') } },
@@ -79,6 +83,7 @@ const routes = [
     { path: '/exporters/', name: 'ExportersPage', component: AvailableExportersPage, meta: {title: i18nGet('title_exporters_page') } },
     { path: '/exporters/:exporterSlug', name: 'ExporterEditionForm', component: ExporterEditionForm, meta: {title: i18nGet('title_exporter_page') }},
 
+    { path: '/:pathMatch(.*)*', redirect: { name: 'HomePage' } }
 ];
 
 export default createRouter({

src/views/admin/js/store/modules/collection/actions.js

@@ -98,7 +98,7 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, is
                             itemsPerPage: res.headers['x-wp-itemperpage'] });                            
                     }
                     console.log(res.headers['x-wp-total']);
-                    dispatch('search/setTotalItems', res.headers['x-wp-total'], { root: true } );
+                    dispatch('search/setTotalItems', Number(res.headers['x-wp-total']), { root: true } );
                     dispatch('search/setTotalPages', res.headers['x-wp-totalpages'], { root: true } );
                     dispatch('search/setItemsPerPage', res.headers['x-wp-itemsperpage'], { root: true } );
                     

src/views/admin/pages/lists/items-page.vue

@@ -565,7 +565,6 @@
             <!-- FILTERS TAG LIST-->
             <filters-tags-list 
                     class="filter-tags-list"
-                    :filters="filters"
                     v-if="hasFiltered && !openAdvancedSearch" />
             
             <!-- ITEMS LISTING RESULTS ------------------------- -->
@@ -729,7 +728,7 @@
             AdvancedSearch
         },
         props: {
-            collectionId: String
+            collectionId: [String, Number]
         },
         data() {
             return {
@@ -816,15 +815,14 @@
         watch: {
             '$route': {
                 handler(to, from) {
-                    console.log('line 819')
+                    
                     // Should set Collection ID from URL only when in admin.
                     if (this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage')
                         this.$eventBusSearch.setCollectionId( !this.$route.params.collectionId ? this.$route.params.collectionId : parseInt(this.$route.params.collectionId) );
                     
-                    console.log('line 824')
                     // Fills the URL with appropriate default values in case a query is not passed
                     if (this.$route.name == null || this.$route.name == undefined || this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage') {
-                        console.log('line 828')
+                        
                         // Items Per Page
                         if (this.$route.query.perpage == undefined || to.params.collectionId != from.params.collectionId) {
                             let perPageKey = (this.collectionId != undefined ? 'items_per_page_' + this.collectionId : 'items_per_page');
@@ -837,12 +835,11 @@
                                 this.$userPrefs.set(perPageKey, 12);
                             }
                         }    
-                        console.log('line 841')
+                        
-                        console.log(this.$route.query, to.params, from.params);
                         // Page
                         if (this.$route.query.paged == undefined || to.params.collectionId != from.params.collectionId)
                             this.$route.query.paged = 1;
-                        console.log('line 845')
+                    
                         // Order (ASC, DESC)
                         if (this.$route.query.order == undefined || to.params.collectionId != from.params.collectionId) {
                             let orderKey = (this.collectionId != undefined ? 'order_' + this.collectionId : 'order');
@@ -855,7 +852,7 @@
                                 this.$userPrefs.set(orderKey, 'DESC');
                             }
                         }
-                        console.log('line 851')
+                        
                         // Order By (required extra work to deal with custom metadata ordering)
                         if (this.$route.query.orderby == undefined || (to.params.collectionId != from.params.collectionId)) {
                             let orderByKey = (this.collectionId != undefined ? 'order_by_' + this.collectionId : 'order_by');
@@ -884,7 +881,7 @@
                         } else if ( this.$route.query.orderby == 'creation_date' ) { // Fixes old usage of creation_date
                             this.$route.query.orderby = 'date'
                         }
-                        console.log('line 887')
+                        
                         // Theme View Modes
                         if ((this.$route.name == null || this.$route.name == undefined ) && 
                             this.$route.name != 'CollectionItemsPage' && this.$route.name != 'ItemsPage' &&
@@ -905,7 +902,7 @@
                         // Emit slideshow-from to start this view mode from index
                         if (this.$route.query.view_mode != 'slideshow' && this.$route.query['slideshow-from'] !== null && this.$route.query['slideshow-from'] !== undefined && this.$route.query['slideshow-from'] !== false)
                             this.$eventBusSearchEmitter.emit('startSlideshowFromItem', this.$route.query['slideshow-from']);
-                        console.log('line 908')
+                       
                         // Admin View Modes
                         if (this.$route.name != null && this.$route.name != undefined  && 
                             (this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage') &&
@@ -929,7 +926,6 @@
                             this.$store.dispatch('search/set_postquery', this.$route.query);
                         }
                         
-                        console.log('line 931')
                         // Checks current metaqueries and taxqueries to alert filters that should reload
                         // For some reason, this process is not working accessing to.query, so we need to check the path string. 
                         const oldQueryString = from.fullPath.replace(from.path + '?', '');
@@ -956,11 +952,9 @@
                             this.$eventBusSearchEmitter.emit('hasToReloadFacets', true);
                         }
 
-                        console.log('line 958')
+                        console.log(to == from);
-                        console.log(to.query, from.query);
                         // Finally, loads items
                         //if (to.fullPath != from.fullPath) {
-                            console.log('vai')
                             this.$eventBusSearch.loadItems();
                         //}
                     }
@@ -1089,13 +1083,6 @@
             ...mapGetters('metadata', [
                 'getMetadata'
             ]),
-            ...mapActions('filter', [
-                'fetchFilters'
-            ]),
-            ...mapGetters('filter', [
-                'getFilters',
-                'getRepositoryCollectionFilters'
-            ]),
             ...mapGetters('search', [
                 'getSearchQuery',
                 'getSentenceMode',

src/views/admin/pages/singles/collection-page.vue

@@ -32,7 +32,7 @@ export default {
     },
     data() {
         return {
-            collectionId: Number,
+            collectionId: [String, Number],
             isLoadingCollectionBasics: Boolean
         }
     },

src/views/admin/pages/singles/item-page.vue

@@ -464,13 +464,14 @@
         mixins: [formHooks],
         data() {
             return {
-                collectionId: Number,
+                collectionId: [String, Number],
                 itemId: Number,
                 itemRequestCancel: undefined,
                 isLoading: false,
                 isLoadingMetadataSections: false,
                 open: true,
                 urls_open: false,
+                entityName: 'item',
                 activeTab: 'metadata'
             }
         },

src/views/admin/scss/_selects.scss

@@ -29,7 +29,8 @@
             box-shadow: none !important;
             text-decoration: none !important;
         }
-        &[disabled=disabled] {
+        &[disabled=disabled],
+        &:disabled {
             background: var(--tainacan-gray1) !important;
         }
         &:hover,

src/views/gutenberg-blocks/blocks/carousel-items-list/theme.vue

@@ -163,7 +163,7 @@ export default {
     name: "CarouselItemsListTheme",
     props: {
         blockId: String,
-        collectionId: String,  
+        collectionId: [String, Number],  
         searchURL: String,
         selectedItems: Array,
         loadStrategy: String,

src/views/gutenberg-blocks/blocks/dynamic-items-list/theme.vue

@@ -281,7 +281,7 @@ import debounce from 'lodash/debounce.js';
 export default {
     name: "DynamicItemsListTheme",
     props: {
-        collectionId: String,  
+        collectionId: [String, Number],  
         showImage: Boolean,
         showName: Boolean,
         layout: String,

src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/slides-help-modal.vue

@@ -21,7 +21,7 @@
                         id="button-close-slides-modal"
                         class="button is-outlined"
                         type="button"
-                        @click="$parent.close();">
+                        @click="$emit('close');">
                     {{ $i18n.get('close') }}</button>
             </div>
         </footer>

src/views/gutenberg-blocks/blocks/faceted-search/theme-search/js/theme-router.js

@@ -4,7 +4,7 @@ import qs from 'qs';
 const themeRoutes = [];
 
 export default createRouter ({
-    history: createWebHistory(),
+    history: createWebHistory(window.document.location.pathname),
     routes: themeRoutes,
     // set custom query resolver
     parseQuery(query) {

src/views/gutenberg-blocks/blocks/faceted-search/theme-search/js/view-modes-mixin.js

@@ -7,7 +7,7 @@ export const viewModesMixin = {
         }
     },
     props: {
-        collectionId: Number,
+        collectionId: [String, Number],
         displayedMetadata: Array,
         items:  {
             type: Array,

src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue

@@ -719,8 +719,8 @@
         },
         props: {
             // Source settings
-            collectionId: Number,
+            collectionId: [String,Number],
-            termId: Number,
+            termId: [String,Number],
             taxonomy: String,
             // View Mode settings
             isForcedViewMode: Boolean,
@@ -744,7 +744,7 @@
             defaultOrderBy: 'date',
             defaultOrderByMeta: '',
             defaultOrderByType: '',
-            defaultItemsPerPage: Number,
+            defaultItemsPerPage: '',
             showFiltersButtonInsideSearchControl: false,
             startWithFiltersHidden: false,
             filtersAsModal: false,
@@ -835,6 +835,154 @@
             }
         },
         watch: {
+            '$route': {
+                handler(to, from) {
+                    
+                    // Should set Collection ID from URL only when in admin.
+                    if (this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage')
+                        this.$eventBusSearch.setCollectionId( !this.$route.params.collectionId ? this.$route.params.collectionId : parseInt(this.$route.params.collectionId) );
+                    
+                    // Fills the URL with appropriate default values in case a query is not passed
+                    if (this.$route.name == null || this.$route.name == undefined || this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage') {
+                        
+                        // Items Per Page
+                        if (this.$route.query.perpage == undefined || to.params.collectionId != from.params.collectionId) {
+                            let perPageKey = (this.collectionId != undefined ? 'items_per_page_' + this.collectionId : 'items_per_page');
+                            let perPageValue = this.$userPrefs.get(perPageKey);
+
+                            if (perPageValue)
+                                this.$route.query.perpage = perPageValue;
+                            else {
+                                this.$route.query.perpage = 12;
+                                this.$userPrefs.set(perPageKey, 12);
+                            }
+                        }    
+                        
+                        // Page
+                        if (this.$route.query.paged == undefined || to.params.collectionId != from.params.collectionId)
+                            this.$route.query.paged = 1;
+                    
+                        // Order (ASC, DESC)
+                        if (this.$route.query.order == undefined || to.params.collectionId != from.params.collectionId) {
+                            let orderKey = (this.collectionId != undefined ? 'order_' + this.collectionId : 'order');
+                            let orderValue = this.$userPrefs.get(orderKey) ? this.$userPrefs.get(orderKey) : this.defaultOrder;
+                            
+                            if (orderValue)
+                                this.$route.query.order = orderValue;
+                            else {
+                                this.$route.query.order = 'DESC';
+                                this.$userPrefs.set(orderKey, 'DESC');
+                            }
+                        }
+                        
+                        // Order By (required extra work to deal with custom metadata ordering)
+                        if (this.$route.query.orderby == undefined || (to.params.collectionId != from.params.collectionId)) {
+                            let orderByKey = (this.collectionId != undefined ? 'order_by_' + this.collectionId : 'order_by');
+                            let orderBy = this.$userPrefs.get(orderByKey) ? this.$userPrefs.get(orderByKey) : this.defaultOrderBy;
+                        
+                            if (orderBy && orderBy != 'name') {
+                            
+                                // Previously was stored as a metadata object, now it is a orderby object
+                                if (orderBy.slug || typeof orderBy == 'string')
+                                    orderBy = this.$orderByHelper.getOrderByForMetadatum(orderBy);
+
+                                if (orderBy.orderby)
+                                    Object.keys(orderBy).forEach((paramKey) => {
+                                        this.$route.query[paramKey] = orderBy[paramKey];
+                                    });
+                                else
+                                    this.$route.query.orderby = 'date'
+                                
+                            } else {
+                                this.$route.query.orderby = 'date';
+                                this.$userPrefs.set(orderByKey, { 
+                                    slug: 'creation_date',
+                                    name: this.$i18n.get('label_creation_date')
+                                }).catch(() => { });
+                            }
+                        } else if ( this.$route.query.orderby == 'creation_date' ) { // Fixes old usage of creation_date
+                            this.$route.query.orderby = 'date'
+                        }
+                        
+                        // Theme View Modes
+                        if ((this.$route.name == null || this.$route.name == undefined ) && 
+                            this.$route.name != 'CollectionItemsPage' && this.$route.name != 'ItemsPage' &&
+                            (this.$route.query.view_mode == undefined || to.params.collectionId != from.params.collectionId)
+                        ) {
+                            
+                            let viewModeKey = (this.collectionId != undefined ? 'view_mode_' + this.collectionId : 'view_mode');
+                            let viewModeValue = this.$userPrefs.get(viewModeKey);
+
+                            if (viewModeValue)
+                                this.$route.query.view_mode = viewModeValue;
+                            else {
+                                this.$route.query.view_mode = 'table';
+                                this.$userPrefs.set(viewModeKey, 'table');
+                            }
+                        }
+
+                        // Emit slideshow-from to start this view mode from index
+                        if (this.$route.query.view_mode != 'slideshow' && this.$route.query['slideshow-from'] !== null && this.$route.query['slideshow-from'] !== undefined && this.$route.query['slideshow-from'] !== false)
+                            this.$eventBusSearchEmitter.emit('startSlideshowFromItem', this.$route.query['slideshow-from']);
+                       
+                        // Admin View Modes
+                        if (this.$route.name != null && this.$route.name != undefined  && 
+                            (this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage') &&
+                            (this.$route.query.admin_view_mode == undefined || to.params.collectionId != from.params.collectionId)
+                        ) {
+                            let adminViewModeKey = (this.collectionId != undefined ? 'admin_view_mode_' + this.collectionId : 'admin_view_mode');
+                            let adminViewModeValue = this.$userPrefs.get(adminViewModeKey);
+
+                            if (adminViewModeValue)
+                                this.$route.query.admin_view_mode = adminViewModeValue;
+                            else {
+                                this.$route.query.admin_view_mode = 'table';
+                                this.$userPrefs.set(adminViewModeKey, 'table');
+                            }
+                        }
+                        
+                        // Advanced Search
+                        if (this.$route.query && this.$route.query.advancedSearch){
+                            this.$store.dispatch('search/set_advanced_query', this.$route.query);
+                        } else {
+                            this.$store.dispatch('search/set_postquery', this.$route.query);
+                        }
+                        
+                        // Checks current metaqueries and taxqueries to alert filters that should reload
+                        // For some reason, this process is not working accessing to.query, so we need to check the path string. 
+                        const oldQueryString = from.fullPath.replace(from.path + '?', '');
+                        const newQueryString = to.fullPath.replace(from.path + '?', '');
+                        
+                        const oldQueryArray = oldQueryString.split('&');
+                        const newQueryArray = newQueryString.split('&');
+
+                        const oldMetaQueryArray = oldQueryArray.filter(queryItem => queryItem.startsWith('metaquery'));
+                        const newMetaQueryArray = newQueryArray.filter(queryItem => queryItem.startsWith('metaquery'));
+                        const oldTaxQueryArray  = oldQueryArray.filter(queryItem => queryItem.startsWith('taxquery'));
+                        const newTaxQueryArray  = newQueryArray.filter(queryItem => queryItem.startsWith('taxquery'));
+                        const oldStatusArray    = oldQueryArray.filter(queryItem => queryItem.startsWith('status'));
+                        const newStatusArray    = newQueryArray.filter(queryItem => queryItem.startsWith('status'));
+                        const oldSearchQuery    = oldQueryArray.filter(queryItem => queryItem.startsWith('search'));
+                        const newSearchQuery    = newQueryArray.filter(queryItem => queryItem.startsWith('search'));
+
+                        if (
+                            JSON.stringify(oldMetaQueryArray) != JSON.stringify(newMetaQueryArray) ||
+                            JSON.stringify(oldTaxQueryArray)  != JSON.stringify(newTaxQueryArray) ||
+                            JSON.stringify(oldStatusArray)    != JSON.stringify(newStatusArray) ||
+                            JSON.stringify(oldSearchQuery)    != JSON.stringify(newSearchQuery)
+                        ) {
+                            this.$eventBusSearchEmitter.emit('hasToReloadFacets', true);
+                        }
+
+                        console.log(to == from);
+                        // Finally, loads items
+                        //if (to.fullPath != from.fullPath) {
+                            this.$eventBusSearch.loadItems();
+                        //}
+                    }
+                },
+                deep: true
+            },
             displayedMetadata: {
                 handler() {
                     this.localDisplayedMetadata = JSON.parse(JSON.stringify(this.displayedMetadata));

src/views/gutenberg-blocks/blocks/faceted-search/theme.js

@@ -1,5 +1,5 @@
 // Main imports
-import { createApp, h, onMounted } from 'vue';
+import { createApp, h, defineAsyncComponent } from 'vue';
 import {
     Field,
     Input,
@@ -77,7 +77,7 @@ export default (element) => {
                         defaultOrderByType: '',
                         isForcedViewMode: false,
                         enabledViewModes: {},
-                        defaultItemsPerPage: '',
+                        defaultItemsPerPage: 12,
                         hideFilters: false,
                         hideHideFiltersButton: false,
                         hideSearch: false,
@@ -161,7 +161,7 @@ export default (element) => {
 
                     // Other Tweaks
                     if (this.$el.attributes['default-items-per-page'] != undefined)
-                        this.defaultItemsPerPage = this.$el.attributes['default-items-per-page'].value;
+                        this.defaultItemsPerPage = Number(this.$el.attributes['default-items-per-page'].value);
                     if (this.$el.attributes['show-filters-button-inside-search-control'] != undefined)
                         this.showFiltersButtonInsideSearchControl = this.isParameterTrue('show-filters-button-inside-search-control');
                     if (this.$el.attributes['start-with-filters-hidden'] != undefined)
@@ -254,9 +254,7 @@ export default (element) => {
             }
 
             if ( !possibleHideFilters ) {
-                import('../../../admin/components/search/filters-items-list.vue')
+                VueItemsList.component('filters-items-list', defineAsyncComponent(() => import('../../../admin/components/search/filters-items-list.vue')));
-                    .then(importedModule => VueItemsList.component('filters-items-list', importedModule.default))
-                    .catch(error => console.log(error));
             }
 
             /* Main page component */
@@ -285,15 +283,13 @@ export default (element) => {
             // Logic for dynamic importing Tainacan oficial view modes only if they are necessary
             possibleViewModes.forEach(viewModeSlug => {
                 if ( registeredViewModes.indexOf(viewModeSlug) >= 0 )
-                    import('./theme-search/components/view-mode-' + viewModeSlug + '.vue')
+                    VueItemsList.component('view-mode-' + viewModeSlug, defineAsyncComponent(() => import('./theme-search/components/view-mode-' + viewModeSlug + '.vue')));
-                        .then(importedModule => VueItemsList.component('view-mode-' + viewModeSlug, importedModule.default) )
-                        .catch(error => console.log(error)); 
             });
 
             const emitter = mitt();
             VueItemsList.config.globalProperties.$emitter = emitter;
             
-            VueItemsList.use(eventBusSearch, { store: store, router: routerTheme });
+            VueItemsList.use(eventBusSearch);
 
             VueItemsList.mount('#tainacan-items-page');
 

src/views/gutenberg-blocks/blocks/facets-list/theme.vue

@@ -176,7 +176,7 @@ export default {
     props: {
         metadatumId: String,  
         metadatumType: String,  
-        collectionId: String,  
+        collectionId: [String, Number],  
         collectionSlug: String,
         parentTermId: String,
         showImage: Boolean,

src/views/gutenberg-blocks/blocks/item-gallery/theme.js

@@ -224,9 +224,9 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
                 let currentURL = window.location.toString();
                 if (currentURL.indexOf("#") > 0) {
                     currentURL = currentURL.substring(0, currentURL.indexOf("#"));
-                    window.history.replaceState({}, '', currentURL + '#gid=' + this.options.media_id + '&pid=' + (self.lightbox.pswp.currIndex + 1));
+                    window.history.replaceState(window.history.state, '', currentURL + '#gid=' + this.options.media_id + '&pid=' + (self.lightbox.pswp.currIndex + 1));
                 } else {
-                    window.history.pushState({}, '', currentURL + '#gid=' + this.options.media_id + '&pid=' + (self.lightbox.pswp.currIndex + 1));  
+                    window.history.pushState(window.history.state, '', currentURL + '#gid=' + this.options.media_id + '&pid=' + (self.lightbox.pswp.currIndex + 1));  
                 } 
             }
         });

src/views/gutenberg-blocks/blocks/item-submission-form/item-submission/components/term-creation-panel.vue

@@ -114,7 +114,7 @@
     import { mapActions } from 'vuex';
 
     export default {
-        name: 'TermEditionForm',
+        name: 'TermCreationPanel',
         mixins: [ formHooks ],
         props: {
             originalForm: Object,

src/views/gutenberg-blocks/blocks/item-submission-form/item-submission/item-submission-form.vue

@@ -753,7 +753,7 @@ export default {
     name: 'ItemSubmissionForm',
     mixins: [ formHooks, itemMetadataMixin ],
     props: {
-        collectionId: String,
+        collectionId: [String, Number],
         hideFileModalButton: Boolean,
         hideTextModalButton: Boolean,
         hideLinkModalButton: Boolean,

src/views/tainacan-i18n.php

@@ -697,6 +697,7 @@ return apply_filters( 'tainacan-i18n', [
 	'label_multiple_terms'							 => __( 'Multiple terms', 'tainacan' ),
 	'label_multiple'								 => __( 'Multiple', 'tainacan' ),
 	'label_separator'								 => __( 'Separator', 'tainacan' ),
+	'label_loading_items'							 => __( 'Loading items...', 'tainacan' ),
 
 	// Instructions. More complex sentences to guide user and placeholders
 	'instruction_delete_selected_collections'        => __( 'Delete selected collections', 'tainacan' ),