[6.x] Misc fixes (#11610)

Author: jasonvarga

package-lock.json

@@ -370,7 +370,7 @@ export default {
             window.location = url;
         },
 
-        editPage(page, vm, store, $event) {
+        editPage(page, $event) {
             const url = page.edit_url;
             $event.metaKey ? window.open(url) : (window.location = url);
         },

resources/js/components/collections/View.vue

@@ -17,16 +17,17 @@
                     </select>
                     <svg-icon name="micro/chevron-down-xs" class="w-2 ltr:ml-2 rtl:mr-2" />
                 </div>
-                <input
-                    type="text"
-                    class="input-text"
-                    v-for="(element, index) in keyedData"
-                    :key="element._id"
-                    v-if="element.key === selectedKey"
-                    :id="fieldId + '__' + element.key"
-                    v-model="data[index].value"
-                    :readonly="isReadOnly"
-                />
+                <template v-for="(element, index) in keyedData">
+                    <input
+                        type="text"
+                        class="input-text"
+                        :key="element._id"
+                        v-if="element.key === selectedKey"
+                        :id="fieldId + '__' + element.key"
+                        v-model="data[index].value"
+                        :readonly="isReadOnly"
+                    />
+                </template>
             </div>
         </div>
 
@@ -132,9 +133,12 @@ export default {
     },
 
     data() {
+        const keys = Object.keys(this.value || {});
+        const selectedKey = keys.length > 0 ? keys[0] : null;
+
         return {
             data: this.objectToSortable(this.value || []),
-            selectedKey: Object.keys(this.value)[0],
+            selectedKey,
             deleting: false,
         };
     },

resources/js/components/fieldtypes/ArrayFieldtype.vue

@@ -53,7 +53,6 @@ import uniqid from 'uniqid';
 import GridTable from './Table.vue';
 import GridStacked from './Stacked.vue';
 import ManagesRowMeta from './ManagesRowMeta';
-import { mapValues, keyBy } from 'lodash-es';
 
 export default {
     mixins: [Fieldtype, ManagesRowMeta],
@@ -172,7 +171,9 @@ export default {
         addRow() {
             const id = uniqid();
 
-            const row = mapValues(keyBy(this.field, 'handle'), (field) => this.meta.defaults[field.handle]);
+            const row = Object.fromEntries(
+                this.fields.map((field) => [field.handle, this.meta.defaults[field.handle]]),
+            );
 
             row._id = id;
 

resources/js/components/fieldtypes/grid/Grid.vue

@@ -3,7 +3,7 @@ import PreviewHtml from './PreviewHtml';
 export default {
     computed: {
         previewText() {
-            const previews = this.previews.filter((value, handle) => {
+            const previews = Object.entries(this.previews).filter(([handle, value]) => {
                 const config = this.config.fields.find((f) => f.handle === handle) || {};
                 return config.replicator_preview === undefined ? this.showFieldPreviews : config.replicator_preview;
             });

resources/js/components/fieldtypes/replicator/ManagesPreviewText.js

@@ -221,7 +221,7 @@ export default {
             this.$emit('added', handle);
             this.unselectGroup();
             this.search = null;
-            this.$refs.popover.close();
+            this.$refs.popover?.close();
         },
 
         selectGroup(handle) {

resources/js/components/fieldtypes/replicator/SetPicker.vue

@@ -362,10 +362,13 @@ export default {
             this.request();
         },
 
-        selections() {
-            if (this.maxSelections === 1 && this.selections.length === 1) {
-                this.select();
-            }
+        selections: {
+            deep: true,
+            handler: function () {
+                if (this.maxSelections === 1 && this.selections.length === 1) {
+                    this.select();
+                }
+            },
         },
 
         view(view) {

resources/js/components/inputs/relationship/Selector.vue

@@ -179,7 +179,7 @@
         </page-tree>
 
         <page-selector
-            v-if="hasCollections && $refs.tree"
+            v-if="hasCollections"
             ref="selector"
             :site="site"
             :collections="collections"
@@ -376,7 +376,7 @@ export default {
 
             if (this.maxPagesSelection === 1) {
                 this.removePageOnCancel = true;
-                this.editPage(pages[0], this.$refs.tree.$refs.tree, this.$refs.tree.$refs.tree.store);
+                this.$wait(300).then(() => this.editPage(pages[0]));
             }
         },
 
@@ -392,8 +392,8 @@ export default {
             return !this.isEntryBranch(branch) && !this.isLinkBranch(branch);
         },
 
-        editPage(page, vm, store) {
-            this.editingPage = { page, vm, store };
+        editPage(page) {
+            this.editingPage = { page };
         },
 
         updatePage(values) {

resources/js/components/navigation/View.vue

@@ -2,7 +2,7 @@
 import { defineStore, getActivePinia } from 'pinia';
 import uniqid from 'uniqid';
 import Component from '../Component';
-import { getCurrentInstance, computed } from 'vue';
+import { getCurrentInstance, computed, watch } from 'vue';
 import { usePublishContainerStore } from '@statamic/stores/publish-container.js';
 import { isEqual } from 'lodash-es';
 import clone from '@statamic/util/clone.js';
@@ -71,9 +71,11 @@ export default {
     created() {
         this.$events.$emit('publish-container-created', this);
 
-        this.store.$subscribe((mutation, state) => {
-            this.emitUpdatedEvent(state.values);
-        });
+        watch(
+            () => this.store.values,
+            (values) => this.emitUpdatedEvent(values),
+            { deep: true },
+        );
     },
 
     beforeUnmount() {

resources/js/components/publish/Container.vue

@@ -83,6 +83,8 @@ import HasHiddenFields from '../publish/HasHiddenFields';
 import { flatten } from 'lodash-es';
 
 export default {
+    emits: ['closed', 'submitted', 'publish-info-updated', 'localized-fields-updated'],
+
     mixins: [HasHiddenFields],
 
     props: {