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>
pull/41619/head
Grigorii K. Shartsev 6 months ago
parent fedd5316d3
commit e6bdbdbdb8

@ -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',
},
}
}

Loading…
Cancel
Save