From f6d63c2bbb0f13559d23cbe815f63bac7a629ab9 Mon Sep 17 00:00:00 2001
From: Tomas Vondracek <tomasvondrac@gmail.com>
Date: Mon, 26 Oct 2026 11:39:48 +0100
Subject: [PATCH] refactor: replace the slot-scope syntax and $set removed in
 Vue 3

Vue 3 drops the `slot`/`slot-scope` attributes and `vm.$set`; both
replacements already work on Vue 2.7, and behaviour is unchanged.

Select: the record-link `singleLabel` template moves to `#singleLabel`.
Its `v-if` reads the slot props, so it moves inside the slot; when it is
false the slot renders nothing and vue-multiselect falls back to its own
label, as before. The status `singleLabel` template is removed: Vue 2
keeps only the last template per slot name, so it never rendered.

Imagelist: `this.$set(list, i, item)` becomes `list.splice(i, 1, item)`,
which is what `$set` does for arrays in Vue 2.

The multiselect stub now passes the first selected item to `singleLabel`,
like vue-multiselect, so the selected-value label can be tested.
---
 assets/js/app/editor/Components/Imagelist.vue |  2 +-
 assets/js/app/editor/Components/Select.vue    | 24 +++++++++----------
 tests/unit/components/Select.spec.ts          | 17 +++++++++++++
 tests/unit/helpers/stubs.ts                   |  8 +++++--
 4 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/assets/js/app/editor/Components/Imagelist.vue b/assets/js/app/editor/Components/Imagelist.vue
index 8e7e57875b..6e417aff2a 100644
--- a/assets/js/app/editor/Components/Imagelist.vue
+++ b/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 + ']';
diff --git a/assets/js/app/editor/Components/Select.vue b/assets/js/app/editor/Components/Select.vue
index 9c87b06913..dcc5ad1879 100644
--- a/assets/js/app/editor/Components/Select.vue
+++ b/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">
diff --git a/tests/unit/components/Select.spec.ts b/tests/unit/components/Select.spec.ts
index 188434762c..42ae0c8659 100644
--- a/tests/unit/components/Select.spec.ts
+++ b/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();
diff --git a/tests/unit/helpers/stubs.ts b/tests/unit/helpers/stubs.ts
index 812ef4f2e9..162de76e64 100644
--- a/tests/unit/helpers/stubs.ts
+++ b/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>