refactor(files): replace deprecated `is` attr on `<a>` with dynamic component

- Special attribute `is` is deprecated and removed in Vue 3
- It is confusing, that `<a>` element is rendered as `span` sometimes

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

diff --git a/apps/files/src/components/FileEntry/FileEntryName.vue b/apps/files/src/components/FileEntry/FileEntryName.vue
index 538c79b02db9beef6a9149ace65652413d57be00..3848b3bb73d18adeec52ba5f5b421e7ff7300548 100644 (file)
--- a/apps/files/src/components/FileEntry/FileEntryName.vue
+++ b/apps/files/src/components/FileEntry/FileEntryName.vue
@@ -37,12 +37,13 @@
                        @keyup.esc="stopRenaming" />
        </form>
 
-       <a v-else
+       <component :is="linkTo.is"
+               v-else
                ref="basename"
                :aria-hidden="isRenaming"
                class="files-list__row-name-link"
                data-cy-files-list-row-name-link
-               v-bind="linkTo"
+               v-bind="linkTo.params"
                @click="$emit('click', $event)">
                <!-- File name -->
                <span class="files-list__row-name-text">
@@ -50,7 +51,7 @@
                        <span class="files-list__row-name-" v-text="displayName" />
                        <span class="files-list__row-name-ext" v-text="extension" />
                </span>
-       </a>
+       </component>
 </template>
 
 <script lang="ts">
@@ -137,8 +138,10 @@ export default Vue.extend({
                linkTo() {
                        if (this.source.attributes.failed) {
                                return {
-                                       title: t('files', 'This node is unavailable'),
                                        is: 'span',
+                                       params: {
+                                               title: t('files', 'This node is unavailable'),
+                                       },
                                }
                        }
 
@@ -147,18 +150,24 @@ export default Vue.extend({
                                const action = enabledDefaultActions[0]
                                const displayName = action.displayName([this.source], this.currentView)
                                return {
-                                       title: displayName,
-                                       role: 'button',
-                                       tabindex: '0',
+                                       is: 'a',
+                                       params: {
+                                               title: displayName,
+                                               role: 'button',
+                                               tabindex: '0',
+                                       },
                                }
                        }
 
                        if (this.source?.permissions & Permission.READ) {
                                return {
-                                       download: this.source.basename,
-                                       href: this.source.source,
-                                       title: t('files', 'Download file {name}', { name: this.displayName }),
-                                       tabindex: '0',
+                                       is: 'a',
+                                       params: {
+                                               download: this.source.basename,
+                                               href: this.source.source,
+                                               title: t('files', 'Download file {name}', { name: this.displayName }),
+                                               tabindex: '0',
+                                       },
                                }
                        }