Michcio/FoundKey-0x7f
1
1
Fork 0
forked from FoundKeyGang/FoundKey
Code Pull requests Releases Activity

Fix #5842 and refactoring

Browse source
This commit is contained in:
syuilo 2020-02-06 14:23:01 +09:00
parent 781cebf194
commit 1b88a7bc03
21 changed files with 58 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/client/components/date-separated-list.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<sequential-entrance class="sqadhkmv" ref="list" :direction="direction"> <sequential-entrance class="sqadhkmv" ref="list" :direction="direction" :reversed="reversed">
<template v-for="(item, i) in items"> <template v-for="(item, i) in items">
<slot :item="item" :i="i"></slot> <slot :item="item" :i="i"></slot>
<div class="separator" :key="item.id + '_date'" :data-index="i" v-if="i != items.length - 1 && new Date(item.createdAt).getDate() != new Date(items[i + 1].createdAt).getDate()"> <div class="separator" :key="item.id + '_date'" v-if="i != items.length - 1 && new Date(item.createdAt).getDate() != new Date(items[i + 1].createdAt).getDate()">
<p class="date"> <p class="date">
<span><fa class="icon" :icon="faAngleUp"/>{{ getDateText(item.createdAt) }}</span> <span><fa class="icon" :icon="faAngleUp"/>{{ getDateText(item.createdAt) }}</span>
<span>{{ getDateText(items[i + 1].createdAt) }}<fa class="icon" :icon="faAngleDown"/></span> <span>{{ getDateText(items[i + 1].createdAt) }}<fa class="icon" :icon="faAngleDown"/></span>
@ -28,6 +28,11 @@ export default Vue.extend({
direction: { direction: {
type: String, type: String,
required: false required: false
},
reversed: {
type: Boolean,
required: false,
default: false
} }
}, },

12
src/client/components/menu.vue
View file

@ -2,26 +2,26 @@
<x-popup :source="source" :no-center="noCenter" :fixed="fixed" :width="width" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }"> <x-popup :source="source" :no-center="noCenter" :fixed="fixed" :width="width" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }">
<sequential-entrance class="rrevdjwt" :class="{ left: align === 'left' }" :delay="15" :direction="direction"> <sequential-entrance class="rrevdjwt" :class="{ left: align === 'left' }" :delay="15" :direction="direction">
<template v-for="(item, i) in items.filter(item => item !== undefined)"> <template v-for="(item, i) in items.filter(item => item !== undefined)">
<div v-if="item === null" class="divider" :key="i" :data-index="i"></div> <div v-if="item === null" class="divider" :key="i"></div>
<span v-else-if="item.type === 'label'" class="label item" :key="i" :data-index="i"> <span v-else-if="item.type === 'label'" class="label item" :key="i">
<span>{{ item.text }}</span> <span>{{ item.text }}</span>
</span> </span>
<router-link v-else-if="item.type === 'link'" :to="item.to" @click.native="close()" :tabindex="i" class="_button item" :key="i" :data-index="i"> <router-link v-else-if="item.type === 'link'" :to="item.to" @click.native="close()" :tabindex="i" class="_button item" :key="i">
<fa v-if="item.icon" :icon="item.icon" fixed-width/> <fa v-if="item.icon" :icon="item.icon" fixed-width/>
<mk-avatar v-if="item.avatar" :user="item.avatar" class="avatar"/> <mk-avatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
<span>{{ item.text }}</span> <span>{{ item.text }}</span>
<i v-if="item.indicate"><fa :icon="faCircle"/></i> <i v-if="item.indicate"><fa :icon="faCircle"/></i>
</router-link> </router-link>
<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" @click="close()" :tabindex="i" class="_button item" :key="i" :data-index="i"> <a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" @click="close()" :tabindex="i" class="_button item" :key="i">
<fa v-if="item.icon" :icon="item.icon" fixed-width/> <fa v-if="item.icon" :icon="item.icon" fixed-width/>
<span>{{ item.text }}</span> <span>{{ item.text }}</span>
<i v-if="item.indicate"><fa :icon="faCircle"/></i> <i v-if="item.indicate"><fa :icon="faCircle"/></i>
</a> </a>
<button v-else-if="item.type === 'user'" @click="clicked(item.action)" :tabindex="i" class="_button item" :key="i" :data-index="i"> <button v-else-if="item.type === 'user'" @click="clicked(item.action)" :tabindex="i" class="_button item" :key="i">
<mk-avatar :user="item.user" class="avatar"/><mk-user-name :user="item.user"/> <mk-avatar :user="item.user" class="avatar"/><mk-user-name :user="item.user"/>
<i v-if="item.indicate"><fa :icon="faCircle"/></i> <i v-if="item.indicate"><fa :icon="faCircle"/></i>
</button> </button>
<button v-else @click="clicked(item.action)" :tabindex="i" class="_button item" :key="i" :data-index="i"> <button v-else @click="clicked(item.action)" :tabindex="i" class="_button item" :key="i">
<fa v-if="item.icon" :icon="item.icon" fixed-width/> <fa v-if="item.icon" :icon="item.icon" fixed-width/>
<mk-avatar v-if="item.avatar" :user="item.avatar" class="avatar"/> <mk-avatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
<span>{{ item.text }}</span> <span>{{ item.text }}</span>

2
src/client/components/notes.vue
View file

@ -5,7 +5,7 @@
<mk-error v-if="error" @retry="init()"/> <mk-error v-if="error" @retry="init()"/>
<x-list ref="notes" class="notes" :items="notes" v-slot="{ item: note, i }"> <x-list ref="notes" class="notes" :items="notes" v-slot="{ item: note, i }">
<x-note :note="note" :detail="detail" :key="note.id" :data-index="i"/> <x-note :note="note" :detail="detail" :key="note.id"/>
</x-list> </x-list>
<footer v-if="more"> <footer v-if="more">

2
src/client/components/notifications.vue
View file

@ -2,7 +2,7 @@
<div class="mk-notifications"> <div class="mk-notifications">
<div class="contents"> <div class="contents">
<x-list class="notifications" :items="items" v-slot="{ item: notification, i }"> <x-list class="notifications" :items="items" v-slot="{ item: notification, i }">
<x-notification :notification="notification" :with-time="true" :full="true" class="notification" :key="notification.id" :data-index="i"/> <x-notification :notification="notification" :with-time="true" :full="true" class="notification" :key="notification.id"/>
</x-list> </x-list>
<button class="more _button" v-if="more" @click="fetchMore" :disabled="moreFetching"> <button class="more _button" v-if="more" @click="fetchMore" :disabled="moreFetching">

2
src/client/components/reaction-picker.vue
View file

@ -13,7 +13,7 @@
mode="out-in" mode="out-in"
appear appear
> >
<button class="_button" v-for="(reaction, i) in rs" :key="reaction" @click="react(reaction)" :data-index="i" :tabindex="i + 1" :title="/^[a-z]+$/.test(reaction) ? $t('@.reactions.' + reaction) : reaction"><x-reaction-icon :reaction="reaction"/></button> <button class="_button" v-for="(reaction, i) in rs" :key="reaction" @click="react(reaction)" :tabindex="i + 1" :title="/^[a-z]+$/.test(reaction) ? $t('@.reactions.' + reaction) : reaction"><x-reaction-icon :reaction="reaction"/></button>
</transition-group> </transition-group>
<input class="text" v-model="text" :placeholder="$t('enterEmoji')" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: 'text' }"> <input class="text" v-model="text" :placeholder="$t('enterEmoji')" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: 'text' }">
</div> </div>

26
src/client/components/sequential-entrance.vue
View file

@ -27,20 +27,42 @@ export default Vue.extend({
type: String, type: String,
required: false, required: false,
default: 'down' default: 'down'
},
reversed: {
type: Boolean,
required: false,
default: false
} }
}, },
data() {
return {
currentChildren: [] as Node[],
index: 0
};
},
methods: { methods: {
updateChildren() {
this.currentChildren = this.$slots.default!.filter(n => n.elm != null).map(n => n.elm!);
},
beforeEnter(el) { beforeEnter(el) {
el.style.opacity = 0; el.style.opacity = 0;
el.style.transform = this.direction === 'down' ? 'translateY(-64px)' : 'translateY(64px)'; el.style.transform = this.direction === 'down' ? 'translateY(-64px)' : 'translateY(64px)';
}, },
enter(el, done) { enter(el, done) {
let index = this.index;
// TODO
//if (this.reversed) index = ...;
//console.log(index);
el.style.transition = [getComputedStyle(el).transition, 'transform 0.7s cubic-bezier(0.23, 1, 0.32, 1)', 'opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1)'].filter(x => x != '').join(','); el.style.transition = [getComputedStyle(el).transition, 'transform 0.7s cubic-bezier(0.23, 1, 0.32, 1)', 'opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1)'].filter(x => x != '').join(',');
setTimeout(() => { setTimeout(() => {
el.style.opacity = 1; el.style.opacity = 1;
el.style.transform = 'translateY(0px)'; el.style.transform = 'translateY(0px)';
setTimeout(done, 700); setTimeout(() => {
}, this.delay * el.dataset.index) done();
this.index--;
}, 700);
}, this.delay * index)
this.index++;
}, },
leave(el, done) { leave(el, done) {
setTimeout(() => { setTimeout(() => {

2
src/client/components/users-dialog.vue
View file

@ -7,7 +7,7 @@
</div> </div>
<sequential-entrance class="users"> <sequential-entrance class="users">
<router-link v-for="(item, i) in items" class="user" :key="item.id" :data-index="i" :to="extract ? extract(item) : item | userPage"> <router-link v-for="(item, i) in items" class="user" :key="item.id" :to="extract ? extract(item) : item | userPage">
<mk-avatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true"/> <mk-avatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true"/>
<div class="body"> <div class="body">
<mk-user-name :user="extract ? extract(item) : item" class="name"/> <mk-user-name :user="extract ? extract(item) : item" class="name"/>

2
src/client/pages/announcements.vue
View file

@ -4,7 +4,7 @@
<portal to="title">{{ $t('announcements') }}</portal> <portal to="title">{{ $t('announcements') }}</portal>
<mk-pagination :pagination="pagination" #default="{items}" class="ruryvtyk" ref="list"> <mk-pagination :pagination="pagination" #default="{items}" class="ruryvtyk" ref="list">
<section class="_card announcement" v-for="(announcement, i) in items" :key="announcement.id" :data-index="i"> <section class="_card announcement" v-for="(announcement, i) in items" :key="announcement.id">
<div class="_title"><span v-if="$store.getters.isSignedIn && !announcement.isRead">🆕 </span>{{ announcement.title }}</div> <div class="_title"><span v-if="$store.getters.isSignedIn && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
<div class="_content"> <div class="_content">
<mfm :text="announcement.text"/> <mfm :text="announcement.text"/>

2
src/client/pages/follow-requests.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<mk-pagination :pagination="pagination" #default="{items}" class="mk-follow-requests" ref="list"> <mk-pagination :pagination="pagination" #default="{items}" class="mk-follow-requests" ref="list">
<div class="user _panel" v-for="(req, i) in items" :key="req.id" :data-index="i"> <div class="user _panel" v-for="(req, i) in items" :key="req.id">
<mk-avatar class="avatar" :user="req.follower"/> <mk-avatar class="avatar" :user="req.follower"/>
<div class="body"> <div class="body">
<div class="name"> <div class="name">

4
src/client/pages/instance/emojis.vue
View file

@ -9,7 +9,7 @@
<mk-pagination :pagination="pagination" class="emojis" ref="emojis"> <mk-pagination :pagination="pagination" class="emojis" ref="emojis">
<template #empty><span>{{ $t('noCustomEmojis') }}</span></template> <template #empty><span>{{ $t('noCustomEmojis') }}</span></template>
<template #default="{items}"> <template #default="{items}">
<div class="emoji" v-for="(emoji, i) in items" :key="emoji.id" :data-index="i" @click="selected = emoji" :class="{ selected: selected && (selected.id === emoji.id) }"> <div class="emoji" v-for="(emoji, i) in items" :key="emoji.id" @click="selected = emoji" :class="{ selected: selected && (selected.id === emoji.id) }">
<img :src="emoji.url" class="img" :alt="emoji.name"/> <img :src="emoji.url" class="img" :alt="emoji.name"/>
<div class="body"> <div class="body">
<span class="name">{{ emoji.name }}</span> <span class="name">{{ emoji.name }}</span>
@ -30,7 +30,7 @@
<mk-pagination :pagination="remotePagination" class="emojis" ref="remoteEmojis"> <mk-pagination :pagination="remotePagination" class="emojis" ref="remoteEmojis">
<template #empty><span>{{ $t('noCustomEmojis') }}</span></template> <template #empty><span>{{ $t('noCustomEmojis') }}</span></template>
<template #default="{items}"> <template #default="{items}">
<div class="emoji" v-for="(emoji, i) in items" :key="emoji.id" :data-index="i" @click="selectedRemote = emoji" :class="{ selected: selectedRemote && (selectedRemote.id === emoji.id) }"> <div class="emoji" v-for="(emoji, i) in items" :key="emoji.id" @click="selectedRemote = emoji" :class="{ selected: selectedRemote && (selectedRemote.id === emoji.id) }">
<img :src="emoji.url" class="img" :alt="emoji.name"/> <img :src="emoji.url" class="img" :alt="emoji.name"/>
<div class="body"> <div class="body">
<span class="name">{{ emoji.name }}</span> <span class="name">{{ emoji.name }}</span>

2
src/client/pages/instance/federation.vue
View file

@ -18,7 +18,7 @@
</div> </div>
<div class="_content"> <div class="_content">
<mk-pagination :pagination="pagination" #default="{items}" class="instances" ref="instances" :key="host + state"> <mk-pagination :pagination="pagination" #default="{items}" class="instances" ref="instances" :key="host + state">
<div class="instance" v-for="(instance, i) in items" :key="instance.id" :data-index="i" @click="info(instance)"> <div class="instance" v-for="(instance, i) in items" :key="instance.id" @click="info(instance)">
<div class="host"><fa :icon="faCircle" class="indicator" :class="getStatus(instance)"/><b>{{ instance.host }}</b></div> <div class="host"><fa :icon="faCircle" class="indicator" :class="getStatus(instance)"/><b>{{ instance.host }}</b></div>
<div class="status"> <div class="status">
<span class="sub" v-if="instance.followersCount > 0"><fa :icon="faCaretDown" class="icon"/>Sub</span> <span class="sub" v-if="instance.followersCount > 0"><fa :icon="faCaretDown" class="icon"/>Sub</span>

2
src/client/pages/instance/queue.queue.vue
View file

@ -12,7 +12,7 @@
</div> </div>
<div class="_content" style="max-height: 180px; overflow: auto;"> <div class="_content" style="max-height: 180px; overflow: auto;">
<sequential-entrance :delay="15" v-if="jobs.length > 0"> <sequential-entrance :delay="15" v-if="jobs.length > 0">
<div v-for="(job, i) in jobs" :key="job[0]" :data-index="i"> <div v-for="(job, i) in jobs" :key="job[0]">
<span>{{ job[0] }}</span> <span>{{ job[0] }}</span>
<span style="margin-left: 8px; opacity: 0.7;">({{ job[1] | number }} jobs)</span> <span style="margin-left: 8px; opacity: 0.7;">({{ job[1] | number }} jobs)</span>
</div> </div>

2
src/client/pages/instance/users.vue
View file

@ -20,7 +20,7 @@
<div class="_title"><fa :icon="faUsers"/> {{ $t('users') }}</div> <div class="_title"><fa :icon="faUsers"/> {{ $t('users') }}</div>
<div class="_content _list"> <div class="_content _list">
<mk-pagination :pagination="pagination" #default="{items}" class="users" ref="users" :auto-margin="false"> <mk-pagination :pagination="pagination" #default="{items}" class="users" ref="users" :auto-margin="false">
<button class="user _button _listItem" v-for="(user, i) in items" :key="user.id" :data-index="i" @click="show(user)"> <button class="user _button _listItem" v-for="(user, i) in items" :key="user.id" @click="show(user)">
<mk-avatar :user="user" class="avatar"/> <mk-avatar :user="user" class="avatar"/>
<div class="body"> <div class="body">
<mk-user-name :user="user" class="name"/> <mk-user-name :user="user" class="name"/>

4
src/client/pages/messaging-room.vue
View file

@ -18,8 +18,8 @@
<button class="more _button" :class="{ fetching: fetchingMoreMessages }" v-if="existMoreMessages" @click="fetchMoreMessages" :disabled="fetchingMoreMessages"> <button class="more _button" :class="{ fetching: fetchingMoreMessages }" v-if="existMoreMessages" @click="fetchMoreMessages" :disabled="fetchingMoreMessages">
<template v-if="fetchingMoreMessages"><fa icon="spinner" pulse fixed-width/></template>{{ fetchingMoreMessages ? $t('@.loading') : $t('@.load-more') }} <template v-if="fetchingMoreMessages"><fa icon="spinner" pulse fixed-width/></template>{{ fetchingMoreMessages ? $t('@.loading') : $t('@.load-more') }}
</button> </button>
<x-list class="messages" :items="messages" v-slot="{ item: message, i }" direction="up"> <x-list class="messages" :items="messages" v-slot="{ item: message, i }" direction="up" reversed>
<x-message :message="message" :is-group="group != null" :key="message.id" :data-index="messages.length - i"/> <x-message :message="message" :is-group="group != null" :key="message.id"/>
</x-list> </x-list>
</div> </div>
<footer> <footer>

2
src/client/pages/my-antennas/index.vue
View file

@ -8,7 +8,7 @@
<x-antenna v-if="draft" :antenna="draft" @created="onAntennaCreated" style="margin-bottom: var(--margin);"/> <x-antenna v-if="draft" :antenna="draft" @created="onAntennaCreated" style="margin-bottom: var(--margin);"/>
<mk-pagination :pagination="pagination" #default="{items}" class="antennas" ref="list"> <mk-pagination :pagination="pagination" #default="{items}" class="antennas" ref="list">
<x-antenna v-for="(antenna, i) in items" :key="antenna.id" :data-index="i" :antenna="antenna" @created="onAntennaDeleted"/> <x-antenna v-for="(antenna, i) in items" :key="antenna.id" :antenna="antenna" @created="onAntennaDeleted"/>
</mk-pagination> </mk-pagination>
</div> </div>
</template> </template>

2
src/client/pages/my-lists/index.vue
View file

@ -6,7 +6,7 @@
<mk-button @click="create" primary class="add"><fa :icon="faPlus"/> {{ $t('createList') }}</mk-button> <mk-button @click="create" primary class="add"><fa :icon="faPlus"/> {{ $t('createList') }}</mk-button>
<mk-pagination :pagination="pagination" #default="{items}" class="lists" ref="list"> <mk-pagination :pagination="pagination" #default="{items}" class="lists" ref="list">
<div class="list _panel" v-for="(list, i) in items" :key="list.id" :data-index="i"> <div class="list _panel" v-for="(list, i) in items" :key="list.id">
<router-link :to="`/lists/${ list.id }`">{{ list.name }}</router-link> <router-link :to="`/lists/${ list.id }`">{{ list.name }}</router-link>
</div> </div>
</mk-pagination> </mk-pagination>

2
src/client/pages/my-lists/list.vue
View file

@ -5,7 +5,7 @@
<div class="_title">{{ list.name }}</div> <div class="_title">{{ list.name }}</div>
<div class="_content"> <div class="_content">
<div class="users"> <div class="users">
<div class="user" v-for="(user, i) in users" :key="user.id" :data-index="i"> <div class="user" v-for="(user, i) in users" :key="user.id">
<mk-avatar :user="user" class="avatar"/> <mk-avatar :user="user" class="avatar"/>
<div class="body"> <div class="body">
<mk-user-name :user="user" class="name"/> <mk-user-name :user="user" class="name"/>

2
src/client/pages/settings/drive.vue
View file

@ -3,7 +3,7 @@
<div class="_title"><fa :icon="faCloud"/> {{ $t('drive') }}</div> <div class="_title"><fa :icon="faCloud"/> {{ $t('drive') }}</div>
<div class="_content"> <div class="_content">
<mk-pagination :pagination="drivePagination" #default="{items}" class="drive" ref="drive"> <mk-pagination :pagination="drivePagination" #default="{items}" class="drive" ref="drive">
<div class="file" v-for="(file, i) in items" :key="file.id" :data-index="i" @click="selected = file" :class="{ selected: selected && (selected.id === file.id) }"> <div class="file" v-for="(file, i) in items" :key="file.id" @click="selected = file" :class="{ selected: selected && (selected.id === file.id) }">
<x-file-thumbnail class="thumbnail" :file="file" fit="cover"/> <x-file-thumbnail class="thumbnail" :file="file" fit="cover"/>
<div class="body"> <div class="body">
<p class="name"> <p class="name">

4
src/client/pages/settings/mute-block.vue
View file

@ -6,7 +6,7 @@
<mk-pagination :pagination="mutingPagination" class="muting"> <mk-pagination :pagination="mutingPagination" class="muting">
<template #empty><span>{{ $t('noUsers') }}</span></template> <template #empty><span>{{ $t('noUsers') }}</span></template>
<template #default="{items}"> <template #default="{items}">
<div class="user" v-for="(mute, i) in items" :key="mute.id" :data-index="i"> <div class="user" v-for="(mute, i) in items" :key="mute.id">
<router-link class="name" :to="mute.mutee | userPage"> <router-link class="name" :to="mute.mutee | userPage">
<mk-acct :user="mute.mutee"/> <mk-acct :user="mute.mutee"/>
</router-link> </router-link>
@ -19,7 +19,7 @@
<mk-pagination :pagination="blockingPagination" class="blocking"> <mk-pagination :pagination="blockingPagination" class="blocking">
<template #empty><span>{{ $t('noUsers') }}</span></template> <template #empty><span>{{ $t('noUsers') }}</span></template>
<template #default="{items}"> <template #default="{items}">
<div class="user" v-for="(block, i) in items" :key="block.id" :data-index="i"> <div class="user" v-for="(block, i) in items" :key="block.id">
<router-link class="name" :to="block.blockee | userPage"> <router-link class="name" :to="block.blockee | userPage">
<mk-acct :user="block.blockee"/> <mk-acct :user="block.blockee"/>
</router-link> </router-link>

2
src/client/pages/user/follow-list.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<mk-pagination :pagination="pagination" #default="{items}" class="mk-following-or-followers" ref="list"> <mk-pagination :pagination="pagination" #default="{items}" class="mk-following-or-followers" ref="list">
<div class="user _panel" v-for="(user, i) in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" :data-index="i"> <div class="user _panel" v-for="(user, i) in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id">
<mk-avatar class="avatar" :user="user"/> <mk-avatar class="avatar" :user="user"/>
<div class="body"> <div class="body">
<div class="name"> <div class="name">

2
src/client/pages/user/index.vue
View file

@ -83,7 +83,7 @@
<router-view :user="user"></router-view> <router-view :user="user"></router-view>
<template v-if="$route.name == 'user'"> <template v-if="$route.name == 'user'">
<sequential-entrance class="pins"> <sequential-entrance class="pins">
<x-note v-for="(note, i) in user.pinnedNotes" class="note" :note="note" :key="note.id" :data-index="i" :detail="true" :pinned="true"/> <x-note v-for="(note, i) in user.pinnedNotes" class="note" :note="note" :key="note.id" :detail="true" :pinned="true"/>
</sequential-entrance> </sequential-entrance>
<mk-container :body-togglable="true" class="content"> <mk-container :body-togglable="true" class="content">
<template #header><fa :icon="faImage"/>{{ $t('images') }}</template> <template #header><fa :icon="faImage"/>{{ $t('images') }}</template>