refactor: replace the slot-scope syntax and $set removed in Vue 3

assets/js/app/editor/Components/Imagelist.vue

@@ -119,7 +119,7 @@ export default {
             let fieldNumber = this.getFieldNumberFromElement(elem);
             let updatedImage = this.containerImages[fieldNumber];
             updatedImage.hidden = true;
-            this.$set(this.containerImages, fieldNumber, updatedImage);
+            this.containerImages.splice(fieldNumber, 1, updatedImage);
         },
         fieldName(index) {
             return this.name + '[' + index + ']';

assets/js/app/editor/Components/Select.vue

@@ -19,24 +19,22 @@
             :loading="isLoading"
             @tag="addTag"
         >
-            <template v-if="name === 'status'" slot="singleLabel" slot-scope="props">
-                <span class="status me-2" :class="`is-${props.option.key}`"></span>
-                {{ raw(props.option.value) }}
-            </template>
             <template v-if="name === 'status'" #option="props">
                 <span class="status me-2" :class="`is-${props.option.key}`"></span>
                 {{ raw(props.option.value) }}
             </template>
 
-            <template v-if="props.option.link_to_record_url" slot="singleLabel" slot-scope="props">
-                <!-- eslint-disable vue/no-v-html -->
-                <span v-html="props.option.value"></span>
-                <!--eslint-enable-->
-                <div class="multiselect__tag__edit">
-                    <a :href="props.option.link_to_record_url" target="_blank" rel="noopener noreferrer">
-                        <i class="far fa-edit me-0"></i>
-                    </a>
-                </div>
+            <template #singleLabel="props">
+                <template v-if="props.option.link_to_record_url">
+                    <!-- eslint-disable vue/no-v-html -->
+                    <span v-html="props.option.value"></span>
+                    <!--eslint-enable-->
+                    <div class="multiselect__tag__edit">
+                        <a :href="props.option.link_to_record_url" target="_blank" rel="noopener noreferrer">
+                            <i class="far fa-edit me-0"></i>
+                        </a>
+                    </div>
+                </template>
             </template>
 
             <template v-if="name !== 'status'" #tag="props">

tests/unit/components/Select.spec.ts

@@ -180,6 +180,23 @@ describe('EditorSelect', () => {
         expect(wrapper.find('.multiselect__tag__edit a').attributes('href')).toBe('/bolt/edit/1');
     });
 
+    it('offers an edit link on the selected record when only one can be picked', async () => {
+        const linked = [{ key: 'a', value: 'A record', link_to_record_url: '/bolt/edit/1' }];
+        const wrapper = mountSelect({ options: linked, value: 'a', multiple: false });
+        await nextTick();
+
+        expect(wrapper.find('.stub-single-label .multiselect__tag__edit a').attributes('href')).toBe('/bolt/edit/1');
+    });
+
+    it('leaves the label of a selected option without a link to the picker', async () => {
+        // Rendering nothing makes vue-multiselect fall back to its own label.
+        const wrapper = mountSelect({ value: 'published', multiple: false });
+        await nextTick();
+
+        expect(wrapper.find('.stub-single-label').exists()).toBe(true);
+        expect(wrapper.find('.stub-single-label').text()).toBe('');
+    });
+
     it('does not offer dragging when tags are freely editable', async () => {
         const wrapper = mountSelect({ value: ['draft'], taggable: true });
         await nextTick();

tests/unit/helpers/stubs.ts

@@ -30,6 +30,10 @@ export const multiselectStub = {
         tagOptions(this: { value: unknown }) {
             return Array.isArray(this.value) ? this.value : [];
         },
+        /** Like vue-multiselect, which labels the first item of an array value. */
+        singleValue(this: { value: unknown }) {
+            return Array.isArray(this.value) ? this.value[0] : this.value;
+        },
     },
     methods: {
         /** Pick an option, as clicking one in the real dropdown would. */
@@ -43,8 +47,8 @@ export const multiselectStub = {
     },
     template: `
         <div class="multiselect-stub">
-            <div v-if="!multiple && value" class="stub-single-label">
-                <slot name="singleLabel" :option="value"></slot>
+            <div v-if="!multiple && singleValue" class="stub-single-label">
+                <slot name="singleLabel" :option="singleValue"></slot>
             </div>
             <div v-for="(option, index) in options" :key="'option-' + index" class="stub-option">
                 <slot name="option" :option="option"></slot>