From 5d968afa7424d82f49502c12f63f546f86eae433 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 19 Nov 2021 19:36:12 +0900
Subject: [PATCH] update linr
---
packages/client/.eslintrc.js | 12 ++++
.../src/components/abuse-report-window.vue | 2 +-
.../client/src/components/analog-clock.vue | 2 +-
.../client/src/components/autocomplete.vue | 28 ++++----
.../src/components/channel-follow-button.vue | 2 +-
.../client/src/components/channel-preview.vue | 10 +--
packages/client/src/components/code-core.vue | 4 +-
.../client/src/components/debobigego/base.vue | 2 +-
.../src/components/debobigego/group.vue | 4 +-
.../src/components/debobigego/input.vue | 14 ++--
.../client/src/components/debobigego/link.vue | 4 +-
.../src/components/debobigego/object-view.vue | 4 +-
.../src/components/debobigego/pagination.vue | 4 +-
.../src/components/debobigego/range.vue | 2 +-
.../src/components/debobigego/select.vue | 4 +-
.../src/components/debobigego/suspense.vue | 6 +-
.../src/components/debobigego/switch.vue | 4 +-
.../src/components/debobigego/textarea.vue | 6 +-
.../src/components/debobigego/tuple.vue | 2 +-
packages/client/src/components/dialog.vue | 16 ++---
.../src/components/drive-file-thumbnail.vue | 2 +-
.../src/components/drive-select-dialog.vue | 2 +-
packages/client/src/components/drive.file.vue | 12 ++--
.../client/src/components/drive.folder.vue | 6 +-
packages/client/src/components/drive.vue | 32 ++++-----
.../src/components/emoji-picker-dialog.vue | 4 +-
.../src/components/emoji-picker.section.vue | 2 +-
.../client/src/components/emoji-picker.vue | 22 +++----
.../client/src/components/featured-photos.vue | 2 +-
.../client/src/components/follow-button.vue | 2 +-
.../client/src/components/forgot-password.vue | 6 +-
.../client/src/components/form-dialog.vue | 4 +-
packages/client/src/components/form/input.vue | 12 ++--
packages/client/src/components/form/range.vue | 2 +-
.../client/src/components/form/section.vue | 2 +-
.../client/src/components/form/select.vue | 12 ++--
.../client/src/components/form/switch.vue | 4 +-
.../client/src/components/form/textarea.vue | 4 +-
.../client/src/components/global/acct.vue | 2 +-
packages/client/src/components/global/ad.vue | 6 +-
.../client/src/components/global/avatar.vue | 4 +-
.../client/src/components/global/error.vue | 2 +-
.../client/src/components/global/header.vue | 18 ++---
packages/client/src/components/global/url.vue | 4 +-
packages/client/src/components/google.vue | 2 +-
.../src/components/img-with-blurhash.vue | 2 +-
packages/client/src/components/launch-pad.vue | 10 +--
packages/client/src/components/link.vue | 2 +-
.../client/src/components/media-banner.vue | 14 ++--
.../client/src/components/media-caption.vue | 6 +-
.../client/src/components/media-image.vue | 6 +-
packages/client/src/components/media-list.vue | 8 +--
.../client/src/components/media-video.vue | 4 +-
packages/client/src/components/mention.vue | 4 +-
.../src/components/modal-page-window.vue | 2 +-
.../client/src/components/note-detailed.vue | 66 +++++++++----------
.../client/src/components/note-header.vue | 12 ++--
.../client/src/components/note-preview.vue | 2 +-
.../client/src/components/note-simple.vue | 6 +-
packages/client/src/components/note.sub.vue | 4 +-
packages/client/src/components/note.vue | 58 ++++++++--------
packages/client/src/components/notes.vue | 10 +--
.../client/src/components/notification.vue | 8 +--
.../client/src/components/notifications.vue | 10 +--
.../client/src/components/page-preview.vue | 2 +-
.../client/src/components/page-window.vue | 2 +-
.../client/src/components/page/page.block.vue | 2 +-
.../src/components/page/page.button.vue | 2 +-
.../client/src/components/page/page.if.vue | 2 +-
.../client/src/components/page/page.note.vue | 4 +-
.../src/components/page/page.number-input.vue | 2 +-
.../client/src/components/page/page.post.vue | 2 +-
.../src/components/page/page.radio-button.vue | 2 +-
.../src/components/page/page.section.vue | 2 +-
.../src/components/page/page.text-input.vue | 2 +-
.../client/src/components/page/page.text.vue | 4 +-
packages/client/src/components/page/page.vue | 4 +-
.../client/src/components/poll-editor.vue | 10 +--
packages/client/src/components/poll.vue | 4 +-
.../src/components/post-form-attaches.vue | 6 +-
.../src/components/post-form-dialog.vue | 4 +-
packages/client/src/components/post-form.vue | 46 ++++++-------
.../src/components/reaction-tooltip.vue | 2 +-
.../components/reactions-viewer.details.vue | 4 +-
.../components/reactions-viewer.reaction.vue | 6 +-
.../src/components/reactions-viewer.vue | 2 +-
.../client/src/components/renote-button.vue | 4 +-
.../client/src/components/renote.details.vue | 4 +-
packages/client/src/components/signin.vue | 24 +++----
packages/client/src/components/signup.vue | 22 +++----
.../src/components/sub-note-content.vue | 4 +-
.../client/src/components/taskmanager.vue | 8 +--
packages/client/src/components/timeline.vue | 2 +-
packages/client/src/components/toast.vue | 2 +-
.../client/src/components/ui/container.vue | 6 +-
.../client/src/components/ui/context-menu.vue | 2 +-
packages/client/src/components/ui/folder.vue | 4 +-
packages/client/src/components/ui/menu.vue | 14 ++--
.../client/src/components/ui/modal-window.vue | 12 ++--
packages/client/src/components/ui/modal.vue | 4 +-
.../client/src/components/ui/pagination.vue | 6 +-
.../client/src/components/ui/popup-menu.vue | 2 +-
packages/client/src/components/ui/popup.vue | 2 +-
.../client/src/components/ui/super-menu.vue | 6 +-
packages/client/src/components/ui/tooltip.vue | 2 +-
packages/client/src/components/ui/window.vue | 6 +-
.../src/components/url-preview-popup.vue | 2 +-
.../client/src/components/url-preview.vue | 24 +++----
packages/client/src/components/user-info.vue | 4 +-
packages/client/src/components/user-list.vue | 6 +-
.../src/components/user-online-indicator.vue | 2 +-
.../client/src/components/user-preview.vue | 2 +-
.../src/components/user-select-dialog.vue | 12 ++--
.../src/components/visibility-picker.vue | 10 +--
.../client/src/components/waiting-dialog.vue | 2 +-
packages/client/src/components/widgets.vue | 6 +-
packages/client/src/pages/_error_.vue | 4 +-
packages/client/src/pages/about-misskey.vue | 6 +-
packages/client/src/pages/admin/abuses.vue | 6 +-
packages/client/src/pages/admin/ads.vue | 6 +-
.../client/src/pages/admin/announcements.vue | 4 +-
.../client/src/pages/admin/bot-protection.vue | 10 +--
packages/client/src/pages/admin/database.vue | 2 +-
.../client/src/pages/admin/email-settings.vue | 4 +-
.../src/pages/admin/emoji-edit-dialog.vue | 6 +-
packages/client/src/pages/admin/emojis.vue | 12 ++--
.../client/src/pages/admin/file-dialog.vue | 8 +--
.../client/src/pages/admin/files-settings.vue | 2 +-
packages/client/src/pages/admin/files.vue | 8 +--
packages/client/src/pages/admin/index.vue | 6 +-
.../client/src/pages/admin/instance-block.vue | 2 +-
packages/client/src/pages/admin/instance.vue | 4 +-
.../src/pages/admin/integrations-discord.vue | 2 +-
.../src/pages/admin/integrations-github.vue | 2 +-
.../src/pages/admin/integrations-twitter.vue | 2 +-
.../client/src/pages/admin/object-storage.vue | 2 +-
.../client/src/pages/admin/other-settings.vue | 2 +-
packages/client/src/pages/admin/overview.vue | 12 ++--
.../client/src/pages/admin/proxy-account.vue | 2 +-
packages/client/src/pages/admin/queue.vue | 2 +-
packages/client/src/pages/admin/relays.vue | 4 +-
packages/client/src/pages/admin/security.vue | 8 +--
.../client/src/pages/admin/service-worker.vue | 2 +-
packages/client/src/pages/admin/settings.vue | 2 +-
packages/client/src/pages/admin/users.vue | 14 ++--
.../src/pages/advanced-theme-editor.vue | 34 +++++-----
packages/client/src/pages/announcements.vue | 8 +--
.../client/src/pages/antenna-timeline.vue | 8 +--
packages/client/src/pages/api-console.vue | 4 +-
packages/client/src/pages/auth.form.vue | 4 +-
packages/client/src/pages/auth.vue | 14 ++--
packages/client/src/pages/channel-editor.vue | 2 +-
packages/client/src/pages/channel.vue | 8 +--
packages/client/src/pages/channels.vue | 22 +++----
packages/client/src/pages/clip.vue | 2 +-
packages/client/src/pages/emojis.category.vue | 4 +-
packages/client/src/pages/explore.vue | 12 ++--
packages/client/src/pages/federation.vue | 12 ++--
packages/client/src/pages/follow-requests.vue | 8 +--
packages/client/src/pages/gallery/edit.vue | 10 +--
packages/client/src/pages/gallery/index.vue | 18 ++---
packages/client/src/pages/gallery/post.vue | 16 ++---
packages/client/src/pages/instance-info.vue | 4 +-
packages/client/src/pages/messaging/index.vue | 14 ++--
.../pages/messaging/messaging-room.form.vue | 8 +--
.../messaging/messaging-room.message.vue | 18 ++---
.../src/pages/messaging/messaging-room.vue | 16 ++---
packages/client/src/pages/miauth.vue | 18 ++---
.../client/src/pages/my-antennas/editor.vue | 14 ++--
.../client/src/pages/my-antennas/index.vue | 4 +-
packages/client/src/pages/my-clips/index.vue | 4 +-
packages/client/src/pages/my-groups/group.vue | 2 +-
packages/client/src/pages/my-groups/index.vue | 24 +++----
packages/client/src/pages/my-lists/index.vue | 4 +-
packages/client/src/pages/my-lists/list.vue | 2 +-
packages/client/src/pages/note.vue | 8 +--
packages/client/src/pages/notifications.vue | 2 +-
.../page-editor/els/page-editor.el.button.vue | 2 +-
.../page-editor/els/page-editor.el.canvas.vue | 2 +-
.../els/page-editor.el.counter.vue | 2 +-
.../page-editor/els/page-editor.el.if.vue | 6 +-
.../page-editor/els/page-editor.el.image.vue | 4 +-
.../page-editor/els/page-editor.el.note.vue | 6 +-
.../els/page-editor.el.number-input.vue | 2 +-
.../page-editor/els/page-editor.el.post.vue | 2 +-
.../els/page-editor.el.radio-button.vue | 2 +-
.../els/page-editor.el.section.vue | 8 +--
.../page-editor/els/page-editor.el.switch.vue | 2 +-
.../els/page-editor.el.text-input.vue | 2 +-
.../page-editor/els/page-editor.el.text.vue | 2 +-
.../els/page-editor.el.textarea-input.vue | 2 +-
.../els/page-editor.el.textarea.vue | 2 +-
.../pages/page-editor/page-editor.blocks.vue | 4 +-
.../page-editor/page-editor.container.vue | 8 +--
.../page-editor/page-editor.script-block.vue | 10 +--
.../src/pages/page-editor/page-editor.vue | 36 +++++-----
packages/client/src/pages/page.vue | 20 +++---
packages/client/src/pages/pages.vue | 20 +++---
.../client/src/pages/reversi/game.board.vue | 38 +++++------
.../client/src/pages/reversi/game.setting.vue | 22 +++----
packages/client/src/pages/reversi/index.vue | 12 ++--
packages/client/src/pages/room/room.vue | 44 ++++++-------
packages/client/src/pages/scratchpad.vue | 6 +-
packages/client/src/pages/settings/2fa.vue | 8 +--
.../client/src/pages/settings/accounts.vue | 4 +-
packages/client/src/pages/settings/api.vue | 2 +-
packages/client/src/pages/settings/apps.vue | 6 +-
.../src/pages/settings/delete-account.vue | 4 +-
packages/client/src/pages/settings/drive.vue | 2 +-
.../src/pages/settings/email-address.vue | 6 +-
.../client/src/pages/settings/general.vue | 4 +-
packages/client/src/pages/settings/index.vue | 4 +-
.../client/src/pages/settings/integration.vue | 18 ++---
packages/client/src/pages/settings/menu.vue | 2 +-
.../src/pages/settings/plugin.install.vue | 2 +-
.../src/pages/settings/plugin.manage.vue | 4 +-
.../client/src/pages/settings/profile.vue | 8 +--
.../client/src/pages/settings/reaction.vue | 2 +-
.../src/pages/settings/registry.keys.vue | 2 +-
.../src/pages/settings/registry.value.vue | 4 +-
.../client/src/pages/settings/registry.vue | 2 +-
.../client/src/pages/settings/security.vue | 2 +-
packages/client/src/pages/settings/sounds.vue | 2 +-
.../src/pages/settings/theme.install.vue | 4 +-
.../src/pages/settings/theme.manage.vue | 10 +--
packages/client/src/pages/settings/theme.vue | 22 +++----
packages/client/src/pages/settings/update.vue | 10 +--
.../client/src/pages/settings/word-mute.vue | 2 +-
packages/client/src/pages/share.vue | 4 +-
packages/client/src/pages/theme-editor.vue | 24 +++----
.../client/src/pages/timeline.tutorial.vue | 22 +++----
packages/client/src/pages/timeline.vue | 8 +--
packages/client/src/pages/user-ap-info.vue | 2 +-
packages/client/src/pages/user-info.vue | 6 +-
.../client/src/pages/user-list-timeline.vue | 8 +--
packages/client/src/pages/user/clips.vue | 2 +-
.../client/src/pages/user/follow-list.vue | 4 +-
packages/client/src/pages/user/gallery.vue | 4 +-
.../client/src/pages/user/index.photos.vue | 6 +-
.../client/src/pages/user/index.timeline.vue | 22 +++----
packages/client/src/pages/user/index.vue | 54 +++++++--------
packages/client/src/pages/user/pages.vue | 4 +-
packages/client/src/pages/user/reactions.vue | 4 +-
.../client/src/pages/welcome.entrance.a.vue | 8 +--
.../client/src/pages/welcome.entrance.b.vue | 10 +--
.../client/src/pages/welcome.entrance.c.vue | 10 +--
.../client/src/pages/welcome.timeline.vue | 8 +--
packages/client/src/ui/_common_/common.vue | 6 +-
packages/client/src/ui/_common_/sidebar.vue | 20 +++---
.../src/ui/_common_/stream-indicator.vue | 2 +-
packages/client/src/ui/_common_/upload.vue | 6 +-
packages/client/src/ui/chat/index.vue | 22 +++----
packages/client/src/ui/chat/note-header.vue | 12 ++--
packages/client/src/ui/chat/note-preview.vue | 4 +-
packages/client/src/ui/chat/note.sub.vue | 2 +-
packages/client/src/ui/chat/note.vue | 54 +++++++--------
packages/client/src/ui/chat/notes.vue | 10 +--
packages/client/src/ui/chat/pages/channel.vue | 10 +--
.../client/src/ui/chat/pages/timeline.vue | 8 +--
packages/client/src/ui/chat/post-form.vue | 24 +++----
packages/client/src/ui/chat/side.vue | 2 +-
.../client/src/ui/chat/sub-note-content.vue | 4 +-
packages/client/src/ui/chat/widgets.vue | 4 +-
packages/client/src/ui/classic.header.vue | 12 ++--
packages/client/src/ui/classic.side.vue | 6 +-
packages/client/src/ui/classic.sidebar.vue | 18 ++---
packages/client/src/ui/classic.vue | 24 +++----
packages/client/src/ui/classic.widgets.vue | 4 +-
packages/client/src/ui/deck.vue | 8 +--
packages/client/src/ui/deck/column.vue | 12 ++--
packages/client/src/ui/deck/tl-column.vue | 4 +-
packages/client/src/ui/universal.vue | 12 ++--
packages/client/src/ui/universal.widgets.vue | 4 +-
packages/client/src/ui/visitor/a.vue | 14 ++--
packages/client/src/ui/visitor/b.vue | 12 ++--
packages/client/src/ui/visitor/header.vue | 12 ++--
packages/client/src/ui/visitor/kanban.vue | 10 +--
packages/client/src/widgets/activity.vue | 4 +-
packages/client/src/widgets/aichan.vue | 4 +-
packages/client/src/widgets/aiscript.vue | 6 +-
packages/client/src/widgets/clock.vue | 2 +-
packages/client/src/widgets/digital-clock.vue | 4 +-
packages/client/src/widgets/federation.vue | 4 +-
packages/client/src/widgets/memo.vue | 4 +-
packages/client/src/widgets/notifications.vue | 4 +-
packages/client/src/widgets/photos.vue | 2 +-
packages/client/src/widgets/post-form.vue | 2 +-
packages/client/src/widgets/rss.vue | 4 +-
.../src/widgets/server-metric/index.vue | 6 +-
packages/client/src/widgets/timeline.vue | 4 +-
packages/client/src/widgets/trends.vue | 4 +-
291 files changed, 1176 insertions(+), 1164 deletions(-)
diff --git a/packages/client/.eslintrc.js b/packages/client/.eslintrc.js
index 6090a26bfe..b1d31fc04b 100644
--- a/packages/client/.eslintrc.js
+++ b/packages/client/.eslintrc.js
@@ -14,6 +14,18 @@ module.exports = {
"plugin:vue/vue3-recommended"
],
rules: {
+ "vue/attributes-order": ["error", {
+ "alphabetical": false
+ }],
+ "vue/no-use-v-if-with-v-for": ["error", {
+ "allowUsingIterationVar": false
+ }],
+ "vue/no-ref-as-operand": "error",
+ "vue/no-multi-spaces": ["error", {
+ "ignoreProperties": false
+ }],
+ "vue/no-v-html": "error",
+ "vue/order-in-components": "error",
"vue/html-indent": ["warn", "tab", {
"attribute": 1,
"baseIndent": 0,
diff --git a/packages/client/src/components/abuse-report-window.vue b/packages/client/src/components/abuse-report-window.vue
index d6d229bc8d..6b07639f6d 100644
--- a/packages/client/src/components/abuse-report-window.vue
+++ b/packages/client/src/components/abuse-report-window.vue
@@ -16,7 +16,7 @@
</MkTextarea>
</div>
<div class="_section">
- <MkButton @click="send" primary full :disabled="comment.length === 0">{{ $ts.send }}</MkButton>
+ <MkButton primary full :disabled="comment.length === 0" @click="send">{{ $ts.send }}</MkButton>
</div>
</div>
</XWindow>
diff --git a/packages/client/src/components/analog-clock.vue b/packages/client/src/components/analog-clock.vue
index bc572e5fff..450488b198 100644
--- a/packages/client/src/components/analog-clock.vue
+++ b/packages/client/src/components/analog-clock.vue
@@ -1,11 +1,11 @@
<template>
<svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
<circle v-for="(angle, i) in graduations"
+ :key="i"
:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
:r="i % 5 == 0 ? 0.125 : 0.05"
:fill="i % 5 == 0 ? majorGraduationColor : minorGraduationColor"
- :key="i"
/>
<line
diff --git a/packages/client/src/components/autocomplete.vue b/packages/client/src/components/autocomplete.vue
index a7d2d507e0..d6c972aaea 100644
--- a/packages/client/src/components/autocomplete.vue
+++ b/packages/client/src/components/autocomplete.vue
@@ -1,31 +1,31 @@
<template>
<div class="swhvrteh _popup _shadow" @contextmenu.prevent="() => {}">
- <ol class="users" ref="suggests" v-if="type === 'user'">
- <li v-for="user in users" @click="complete(type, user)" @keydown="onKeydown" tabindex="-1" class="user">
+ <ol v-if="type === 'user'" ref="suggests" class="users">
+ <li v-for="user in users" tabindex="-1" class="user" @click="complete(type, user)" @keydown="onKeydown">
<img class="avatar" :src="user.avatarUrl"/>
<span class="name">
- <MkUserName :user="user" :key="user.id"/>
+ <MkUserName :key="user.id" :user="user"/>
</span>
<span class="username">@{{ acct(user) }}</span>
</li>
- <li @click="chooseUser()" @keydown="onKeydown" tabindex="-1" class="choose">{{ $ts.selectUser }}</li>
+ <li tabindex="-1" class="choose" @click="chooseUser()" @keydown="onKeydown">{{ $ts.selectUser }}</li>
</ol>
- <ol class="hashtags" ref="suggests" v-else-if="hashtags.length > 0">
- <li v-for="hashtag in hashtags" @click="complete(type, hashtag)" @keydown="onKeydown" tabindex="-1">
+ <ol v-else-if="hashtags.length > 0" ref="suggests" class="hashtags">
+ <li v-for="hashtag in hashtags" tabindex="-1" @click="complete(type, hashtag)" @keydown="onKeydown">
<span class="name">{{ hashtag }}</span>
</li>
</ol>
- <ol class="emojis" ref="suggests" v-else-if="emojis.length > 0">
- <li v-for="emoji in emojis" @click="complete(type, emoji.emoji)" @keydown="onKeydown" tabindex="-1">
- <span class="emoji" v-if="emoji.isCustomEmoji"><img :src="$store.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span>
- <span class="emoji" v-else-if="!$store.state.useOsNativeEmojis"><img :src="emoji.url" :alt="emoji.emoji"/></span>
- <span class="emoji" v-else>{{ emoji.emoji }}</span>
+ <ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
+ <li v-for="emoji in emojis" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
+ <span v-if="emoji.isCustomEmoji" class="emoji"><img :src="$store.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span>
+ <span v-else-if="!$store.state.useOsNativeEmojis" class="emoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
+ <span v-else class="emoji">{{ emoji.emoji }}</span>
<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
- <span class="alias" v-if="emoji.aliasOf">({{ emoji.aliasOf }})</span>
+ <span v-if="emoji.aliasOf" class="alias">({{ emoji.aliasOf }})</span>
</li>
</ol>
- <ol class="mfmTags" ref="suggests" v-else-if="mfmTags.length > 0">
- <li v-for="tag in mfmTags" @click="complete(type, tag)" @keydown="onKeydown" tabindex="-1">
+ <ol v-else-if="mfmTags.length > 0" ref="suggests" class="mfmTags">
+ <li v-for="tag in mfmTags" tabindex="-1" @click="complete(type, tag)" @keydown="onKeydown">
<span class="tag">{{ tag }}</span>
</li>
</ol>
diff --git a/packages/client/src/components/channel-follow-button.vue b/packages/client/src/components/channel-follow-button.vue
index 9af65325bb..abde7c8148 100644
--- a/packages/client/src/components/channel-follow-button.vue
+++ b/packages/client/src/components/channel-follow-button.vue
@@ -1,8 +1,8 @@
<template>
<button class="hdcaacmi _button"
:class="{ wait, active: isFollowing, full }"
- @click="onClick"
:disabled="wait"
+ @click="onClick"
>
<template v-if="!wait">
<template v-if="isFollowing">
diff --git a/packages/client/src/components/channel-preview.vue b/packages/client/src/components/channel-preview.vue
index eb00052a78..f2b6de97fd 100644
--- a/packages/client/src/components/channel-preview.vue
+++ b/packages/client/src/components/channel-preview.vue
@@ -44,6 +44,11 @@ export default defineComponent({
},
},
+ data() {
+ return {
+ };
+ },
+
computed: {
bannerStyle() {
if (this.channel.bannerUrl) {
@@ -53,11 +58,6 @@ export default defineComponent({
}
}
},
-
- data() {
- return {
- };
- },
});
</script>
diff --git a/packages/client/src/components/code-core.vue b/packages/client/src/components/code-core.vue
index 9cff7b4448..b58484c2ac 100644
--- a/packages/client/src/components/code-core.vue
+++ b/packages/client/src/components/code-core.vue
@@ -1,6 +1,6 @@
<template>
-<code v-if="inline" v-html="html" :class="`language-${prismLang}`"></code>
-<pre v-else :class="`language-${prismLang}`"><code v-html="html" :class="`language-${prismLang}`"></code></pre>
+<code v-if="inline" :class="`language-${prismLang}`" v-html="html"></code>
+<pre v-else :class="`language-${prismLang}`"><code :class="`language-${prismLang}`" v-html="html"></code></pre>
</template>
<script lang="ts">
diff --git a/packages/client/src/components/debobigego/base.vue b/packages/client/src/components/debobigego/base.vue
index f551a3478b..9ed59abc69 100644
--- a/packages/client/src/components/debobigego/base.vue
+++ b/packages/client/src/components/debobigego/base.vue
@@ -1,5 +1,5 @@
<template>
-<div class="rbusrurv" :class="{ wide: forceWide }" v-size="{ max: [400] }">
+<div v-size="{ max: [400] }" class="rbusrurv" :class="{ wide: forceWide }">
<slot></slot>
</div>
</template>
diff --git a/packages/client/src/components/debobigego/group.vue b/packages/client/src/components/debobigego/group.vue
index cba2c6ec94..871d3c8dba 100644
--- a/packages/client/src/components/debobigego/group.vue
+++ b/packages/client/src/components/debobigego/group.vue
@@ -1,7 +1,7 @@
<template>
-<div class="vrtktovg _debobigegoItem _debobigegoNoConcat" v-size="{ max: [500] }" v-sticky-container>
+<div v-size="{ max: [500] }" v-sticky-container class="vrtktovg _debobigegoItem _debobigegoNoConcat">
<div class="_debobigegoLabel"><slot name="label"></slot></div>
- <div class="main _debobigego_group" ref="child">
+ <div ref="child" class="main _debobigego_group">
<slot></slot>
</div>
<div class="_debobigegoCaption"><slot name="caption"></slot></div>
diff --git a/packages/client/src/components/debobigego/input.vue b/packages/client/src/components/debobigego/input.vue
index d113f04d27..6228a33fe4 100644
--- a/packages/client/src/components/debobigego/input.vue
+++ b/packages/client/src/components/debobigego/input.vue
@@ -2,12 +2,12 @@
<FormGroup class="_debobigegoItem">
<template #label><slot></slot></template>
<div class="ztzhwixg _debobigegoItem" :class="{ inline, disabled }">
- <div class="icon" ref="icon"><slot name="icon"></slot></div>
+ <div ref="icon" class="icon"><slot name="icon"></slot></div>
<div class="input _debobigegoPanel">
- <div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
+ <div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
<input ref="inputEl"
- :type="type"
v-model="v"
+ :type="type"
:disabled="disabled"
:required="required"
:readonly="readonly"
@@ -16,21 +16,21 @@
:autocomplete="autocomplete"
:spellcheck="spellcheck"
:step="step"
+ :list="id"
@focus="focused = true"
@blur="focused = false"
@keydown="onKeydown($event)"
@input="onInput"
- :list="id"
>
- <datalist :id="id" v-if="datalist">
+ <datalist v-if="datalist" :id="id">
<option v-for="data in datalist" :value="data"/>
</datalist>
- <div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
+ <div ref="suffixEl" class="suffix"><slot name="suffix"></slot></div>
</div>
</div>
<template #caption><slot name="desc"></slot></template>
- <FormButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormGroup>
</template>
diff --git a/packages/client/src/components/debobigego/link.vue b/packages/client/src/components/debobigego/link.vue
index 885579eadf..de463465d4 100644
--- a/packages/client/src/components/debobigego/link.vue
+++ b/packages/client/src/components/debobigego/link.vue
@@ -1,6 +1,6 @@
<template>
<div class="qmfkfnzi _debobigegoItem">
- <a class="main _button _debobigegoPanel _debobigegoClickable" :href="to" target="_blank" v-if="external">
+ <a v-if="external" class="main _button _debobigegoPanel _debobigegoClickable" :href="to" target="_blank">
<span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span>
<span class="right">
@@ -8,7 +8,7 @@
<i class="fas fa-external-link-alt icon"></i>
</span>
</a>
- <MkA class="main _button _debobigegoPanel _debobigegoClickable" :class="{ active }" :to="to" :behavior="behavior" v-else>
+ <MkA v-else class="main _button _debobigegoPanel _debobigegoClickable" :class="{ active }" :to="to" :behavior="behavior">
<span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span>
<span class="right">
diff --git a/packages/client/src/components/debobigego/object-view.vue b/packages/client/src/components/debobigego/object-view.vue
index ea79daa915..68be08560b 100644
--- a/packages/client/src/components/debobigego/object-view.vue
+++ b/packages/client/src/components/debobigego/object-view.vue
@@ -3,8 +3,8 @@
<template #label><slot></slot></template>
<div class="drooglns _debobigegoItem" :class="{ tall }">
<div class="input _debobigegoPanel">
- <textarea class="_monospace"
- v-model="v"
+ <textarea v-model="v"
+ class="_monospace"
readonly
:spellcheck="false"
></textarea>
diff --git a/packages/client/src/components/debobigego/pagination.vue b/packages/client/src/components/debobigego/pagination.vue
index 07012cb759..16779caa42 100644
--- a/packages/client/src/components/debobigego/pagination.vue
+++ b/packages/client/src/components/debobigego/pagination.vue
@@ -2,10 +2,10 @@
<FormGroup class="uljviswt _debobigegoItem">
<template #label><slot name="label"></slot></template>
<slot :items="items"></slot>
- <div class="empty" v-if="empty" key="_empty_">
+ <div v-if="empty" key="_empty_" class="empty">
<slot name="empty"></slot>
</div>
- <FormButton v-show="more" class="button" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary>
+ <FormButton v-show="more" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</FormButton>
diff --git a/packages/client/src/components/debobigego/range.vue b/packages/client/src/components/debobigego/range.vue
index 26fb0f37c6..dc71f25d83 100644
--- a/packages/client/src/components/debobigego/range.vue
+++ b/packages/client/src/components/debobigego/range.vue
@@ -3,9 +3,9 @@
<div class="_debobigegoLabel"><slot name="label"></slot></div>
<div class="_debobigegoPanel main">
<input
- type="range"
ref="input"
v-model="v"
+ type="range"
:disabled="disabled"
:min="min"
:max="max"
diff --git a/packages/client/src/components/debobigego/select.vue b/packages/client/src/components/debobigego/select.vue
index 7a31371afc..081bbfe302 100644
--- a/packages/client/src/components/debobigego/select.vue
+++ b/packages/client/src/components/debobigego/select.vue
@@ -1,9 +1,9 @@
<template>
<div class="yrtfrpux _debobigegoItem" :class="{ disabled, inline }">
<div class="_debobigegoLabel"><slot name="label"></slot></div>
- <div class="icon" ref="icon"><slot name="icon"></slot></div>
+ <div ref="icon" class="icon"><slot name="icon"></slot></div>
<div class="input _debobigegoPanel _debobigegoClickable" @click="focus">
- <div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
+ <div ref="prefix" class="prefix"><slot name="prefix"></slot></div>
<select ref="input"
v-model="v"
:required="required"
diff --git a/packages/client/src/components/debobigego/suspense.vue b/packages/client/src/components/debobigego/suspense.vue
index b5ba63b4b5..acb0b64424 100644
--- a/packages/client/src/components/debobigego/suspense.vue
+++ b/packages/client/src/components/debobigego/suspense.vue
@@ -1,6 +1,6 @@
<template>
<transition name="fade" mode="out-in">
- <div class="_debobigegoItem" v-if="pending">
+ <div v-if="pending" class="_debobigegoItem">
<div class="_debobigegoPanel">
<MkLoading/>
</div>
@@ -8,10 +8,10 @@
<div v-else-if="resolved" class="_debobigegoItem">
<slot :result="result"></slot>
</div>
- <div class="_debobigegoItem" v-else>
+ <div v-else class="_debobigegoItem">
<div class="_debobigegoPanel eiurkvay">
<div><i class="fas fa-exclamation-triangle"></i> {{ $ts.somethingHappened }}</div>
- <MkButton inline @click="retry" class="retry"><i class="fas fa-redo-alt"></i> {{ $ts.retry }}</MkButton>
+ <MkButton inline class="retry" @click="retry"><i class="fas fa-redo-alt"></i> {{ $ts.retry }}</MkButton>
</div>
</div>
</transition>
diff --git a/packages/client/src/components/debobigego/switch.vue b/packages/client/src/components/debobigego/switch.vue
index 9a69e18302..239140f730 100644
--- a/packages/client/src/components/debobigego/switch.vue
+++ b/packages/client/src/components/debobigego/switch.vue
@@ -7,12 +7,12 @@
@click.prevent="toggle"
>
<input
- type="checkbox"
ref="input"
+ type="checkbox"
:disabled="disabled"
@keydown.enter="toggle"
>
- <span class="button" v-tooltip="checked ? $ts.itsOn : $ts.itsOff">
+ <span v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button">
<span class="handle"></span>
</span>
<span class="label">
diff --git a/packages/client/src/components/debobigego/textarea.vue b/packages/client/src/components/debobigego/textarea.vue
index 64e8d47126..ca5b35c49e 100644
--- a/packages/client/src/components/debobigego/textarea.vue
+++ b/packages/client/src/components/debobigego/textarea.vue
@@ -3,8 +3,8 @@
<template #label><slot></slot></template>
<div class="rivhosbp _debobigegoItem" :class="{ tall, pre }">
<div class="input _debobigegoPanel">
- <textarea ref="input" :class="{ code, _monospace: code }"
- v-model="v"
+ <textarea ref="input" v-model="v"
+ :class="{ code, _monospace: code }"
:required="required"
:readonly="readonly"
:pattern="pattern"
@@ -18,7 +18,7 @@
</div>
<template #caption><slot name="desc"></slot></template>
- <FormButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormGroup>
</template>
diff --git a/packages/client/src/components/debobigego/tuple.vue b/packages/client/src/components/debobigego/tuple.vue
index 8a4599fd64..1d2a6cb55e 100644
--- a/packages/client/src/components/debobigego/tuple.vue
+++ b/packages/client/src/components/debobigego/tuple.vue
@@ -1,5 +1,5 @@
<template>
-<div class="wthhikgt _debobigegoItem" v-size="{ max: [500] }">
+<div v-size="{ max: [500] }" class="wthhikgt _debobigegoItem">
<slot></slot>
</div>
</template>
diff --git a/packages/client/src/components/dialog.vue b/packages/client/src/components/dialog.vue
index 90086fd430..1b03e65a3d 100644
--- a/packages/client/src/components/dialog.vue
+++ b/packages/client/src/components/dialog.vue
@@ -1,10 +1,10 @@
<template>
<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
<div class="mk-dialog">
- <div class="icon" v-if="icon">
+ <div v-if="icon" class="icon">
<i :class="icon"></i>
</div>
- <div class="icon" v-else-if="!input && !select" :class="type">
+ <div v-else-if="!input && !select" class="icon" :class="type">
<i v-if="type === 'success'" class="fas fa-check"></i>
<i v-else-if="type === 'error'" class="fas fa-times-circle"></i>
<i v-else-if="type === 'warning'" class="fas fa-exclamation-triangle"></i>
@@ -13,7 +13,7 @@
<i v-else-if="type === 'waiting'" class="fas fa-spinner fa-pulse"></i>
</div>
<header v-if="title"><Mfm :text="title"/></header>
- <div class="body" v-if="text"><Mfm :text="text"/></div>
+ <div v-if="text" class="body"><Mfm :text="text"/></div>
<MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></MkInput>
<MkSelect v-if="select" v-model="selectedValue" autofocus>
<template v-if="select.items">
@@ -25,12 +25,12 @@
</optgroup>
</template>
</MkSelect>
- <div class="buttons" v-if="(showOkButton || showCancelButton) && !actions">
- <MkButton inline @click="ok" v-if="showOkButton" primary :autofocus="!input && !select">{{ (showCancelButton || input || select) ? $ts.ok : $ts.gotIt }}</MkButton>
- <MkButton inline @click="cancel" v-if="showCancelButton || input || select">{{ $ts.cancel }}</MkButton>
+ <div v-if="(showOkButton || showCancelButton) && !actions" class="buttons">
+ <MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? $ts.ok : $ts.gotIt }}</MkButton>
+ <MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ $ts.cancel }}</MkButton>
</div>
- <div class="buttons" v-if="actions">
- <MkButton v-for="action in actions" inline @click="() => { action.callback(); close(); }" :primary="action.primary" :key="action.text">{{ action.text }}</MkButton>
+ <div v-if="actions" class="buttons">
+ <MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" @click="() => { action.callback(); close(); }">{{ action.text }}</MkButton>
</div>
</div>
</MkModal>
diff --git a/packages/client/src/components/drive-file-thumbnail.vue b/packages/client/src/components/drive-file-thumbnail.vue
index 9b6a0c9a0d..b374ac1cfd 100644
--- a/packages/client/src/components/drive-file-thumbnail.vue
+++ b/packages/client/src/components/drive-file-thumbnail.vue
@@ -1,5 +1,5 @@
<template>
-<div class="zdjebgpv" ref="thumbnail">
+<div ref="thumbnail" class="zdjebgpv">
<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :style="`object-fit: ${ fit }`"/>
<i v-else-if="is === 'image'" class="fas fa-file-image icon"></i>
<i v-else-if="is === 'video'" class="fas fa-file-video icon"></i>
diff --git a/packages/client/src/components/drive-select-dialog.vue b/packages/client/src/components/drive-select-dialog.vue
index f9a4025452..75537dfe3e 100644
--- a/packages/client/src/components/drive-select-dialog.vue
+++ b/packages/client/src/components/drive-select-dialog.vue
@@ -13,7 +13,7 @@
{{ multiple ? ((type === 'file') ? $ts.selectFiles : $ts.selectFolders) : ((type === 'file') ? $ts.selectFile : $ts.selectFolder) }}
<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
</template>
- <XDrive :multiple="multiple" @changeSelection="onChangeSelection" @selected="ok()" :select="type"/>
+ <XDrive :multiple="multiple" :select="type" @changeSelection="onChangeSelection" @selected="ok()"/>
</XModalWindow>
</template>
diff --git a/packages/client/src/components/drive.file.vue b/packages/client/src/components/drive.file.vue
index 7e510e4f5d..62fd56d487 100644
--- a/packages/client/src/components/drive.file.vue
+++ b/packages/client/src/components/drive.file.vue
@@ -1,22 +1,22 @@
<template>
<div class="ncvczrfv"
:class="{ isSelected }"
+ draggable="true"
+ :title="title"
@click="onClick"
@contextmenu.stop="onContextmenu"
- draggable="true"
@dragstart="onDragstart"
@dragend="onDragend"
- :title="title"
>
- <div class="label" v-if="$i.avatarId == file.id">
+ <div v-if="$i.avatarId == file.id" class="label">
<img src="/client-assets/label.svg"/>
<p>{{ $ts.avatar }}</p>
</div>
- <div class="label" v-if="$i.bannerId == file.id">
+ <div v-if="$i.bannerId == file.id" class="label">
<img src="/client-assets/label.svg"/>
<p>{{ $ts.banner }}</p>
</div>
- <div class="label red" v-if="file.isSensitive">
+ <div v-if="file.isSensitive" class="label red">
<img src="/client-assets/label-red.svg"/>
<p>{{ $ts.nsfw }}</p>
</div>
@@ -25,7 +25,7 @@
<p class="name">
<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
- <span class="ext" v-if="file.name.lastIndexOf('.') != -1">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
+ <span v-if="file.name.lastIndexOf('.') != -1" class="ext">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
</p>
</div>
</template>
diff --git a/packages/client/src/components/drive.folder.vue b/packages/client/src/components/drive.folder.vue
index 95690b7e61..aaba736cf8 100644
--- a/packages/client/src/components/drive.folder.vue
+++ b/packages/client/src/components/drive.folder.vue
@@ -1,6 +1,8 @@
<template>
<div class="rghtznwe"
:class="{ draghover }"
+ draggable="true"
+ :title="title"
@click="onClick"
@contextmenu.stop="onContextmenu"
@mouseover="onMouseover"
@@ -9,17 +11,15 @@
@dragenter.prevent="onDragenter"
@dragleave="onDragleave"
@drop.prevent.stop="onDrop"
- draggable="true"
@dragstart="onDragstart"
@dragend="onDragend"
- :title="title"
>
<p class="name">
<template v-if="hover"><i class="fas fa-folder-open fa-fw"></i></template>
<template v-if="!hover"><i class="fas fa-folder fa-fw"></i></template>
{{ folder.name }}
</p>
- <p class="upload" v-if="$store.state.uploadFolder == folder.id">
+ <p v-if="$store.state.uploadFolder == folder.id" class="upload">
{{ $ts.uploadFolder }}
</p>
<button v-if="selectMode" class="checkbox _button" :class="{ checked: isSelected }" @click.prevent.stop="checkboxClicked"></button>
diff --git a/packages/client/src/components/drive.vue b/packages/client/src/components/drive.vue
index a785751ad2..1e59de7055 100644
--- a/packages/client/src/components/drive.vue
+++ b/packages/client/src/components/drive.vue
@@ -7,33 +7,33 @@
<span class="separator"><i class="fas fa-angle-right"></i></span>
<XNavFolder :folder="f"/>
</template>
- <span class="separator" v-if="folder != null"><i class="fas fa-angle-right"></i></span>
- <span class="folder current" v-if="folder != null">{{ folder.name }}</span>
+ <span v-if="folder != null" class="separator"><i class="fas fa-angle-right"></i></span>
+ <span v-if="folder != null" class="folder current">{{ folder.name }}</span>
</div>
- <button @click="showMenu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
+ <button class="menu _button" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
</nav>
- <div class="main" :class="{ uploading: uploadings.length > 0, fetching }"
- ref="main"
+ <div ref="main" class="main"
+ :class="{ uploading: uploadings.length > 0, fetching }"
@dragover.prevent.stop="onDragover"
@dragenter="onDragenter"
@dragleave="onDragleave"
@drop.prevent.stop="onDrop"
@contextmenu.stop="onContextmenu"
>
- <div class="contents" ref="contents">
- <div class="folders" ref="foldersContainer" v-show="folders.length > 0">
- <XFolder v-for="(f, i) in folders" :key="f.id" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder" v-anim="i"/>
+ <div ref="contents" class="contents">
+ <div v-show="folders.length > 0" ref="foldersContainer" class="folders">
+ <XFolder v-for="(f, i) in folders" :key="f.id" v-anim="i" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder"/>
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
- <div class="padding" v-for="(n, i) in 16" :key="i"></div>
- <MkButton ref="moreFolders" v-if="moreFolders">{{ $ts.loadMore }}</MkButton>
+ <div v-for="(n, i) in 16" :key="i" class="padding"></div>
+ <MkButton v-if="moreFolders" ref="moreFolders">{{ $ts.loadMore }}</MkButton>
</div>
- <div class="files" ref="filesContainer" v-show="files.length > 0">
- <XFile v-for="(file, i) in files" :key="file.id" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile" v-anim="i"/>
+ <div v-show="files.length > 0" ref="filesContainer" class="files">
+ <XFile v-for="(file, i) in files" :key="file.id" v-anim="i" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile"/>
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
- <div class="padding" v-for="(n, i) in 16" :key="i"></div>
- <MkButton ref="loadMoreFiles" @click="fetchMoreFiles" v-show="moreFiles">{{ $ts.loadMore }}</MkButton>
+ <div v-for="(n, i) in 16" :key="i" class="padding"></div>
+ <MkButton v-show="moreFiles" ref="loadMoreFiles" @click="fetchMoreFiles">{{ $ts.loadMore }}</MkButton>
</div>
- <div class="empty" v-if="files.length == 0 && folders.length == 0 && !fetching">
+ <div v-if="files.length == 0 && folders.length == 0 && !fetching" class="empty">
<p v-if="draghover">{{ $t('empty-draghover') }}</p>
<p v-if="!draghover && folder == null"><strong>{{ $ts.emptyDrive }}</strong><br/>{{ $t('empty-drive-description') }}</p>
<p v-if="!draghover && folder != null">{{ $ts.emptyFolder }}</p>
@@ -41,7 +41,7 @@
</div>
<MkLoading v-if="fetching"/>
</div>
- <div class="dropzone" v-if="draghover"></div>
+ <div v-if="draghover" class="dropzone"></div>
<input ref="fileInput" type="file" accept="*/*" multiple="multiple" tabindex="-1" @change="onChangeFileInput"/>
</div>
</template>
diff --git a/packages/client/src/components/emoji-picker-dialog.vue b/packages/client/src/components/emoji-picker-dialog.vue
index 1d48bbb8a3..4517a90db9 100644
--- a/packages/client/src/components/emoji-picker-dialog.vue
+++ b/packages/client/src/components/emoji-picker-dialog.vue
@@ -1,6 +1,6 @@
<template>
-<MkPopup ref="popup" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.popup.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')" #default="{point}">
- <MkEmojiPicker class="ryghynhb _popup _shadow" :class="{ pointer: point === 'top' }" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/>
+<MkPopup ref="popup" #default="{point}" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.popup.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
+ <MkEmojiPicker ref="picker" class="ryghynhb _popup _shadow" :class="{ pointer: point === 'top' }" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen"/>
</MkPopup>
</template>
diff --git a/packages/client/src/components/emoji-picker.section.vue b/packages/client/src/components/emoji-picker.section.vue
index 2401eca2a5..08c4f6813d 100644
--- a/packages/client/src/components/emoji-picker.section.vue
+++ b/packages/client/src/components/emoji-picker.section.vue
@@ -5,9 +5,9 @@
</header>
<div v-if="shown">
<button v-for="emoji in emojis"
+ :key="emoji"
class="_button"
@click="chosen(emoji, $event)"
- :key="emoji"
>
<MkEmoji :emoji="emoji" :normal="true"/>
</button>
diff --git a/packages/client/src/components/emoji-picker.vue b/packages/client/src/components/emoji-picker.vue
index 015e201269..6695c236e7 100644
--- a/packages/client/src/components/emoji-picker.vue
+++ b/packages/client/src/components/emoji-picker.vue
@@ -1,15 +1,15 @@
<template>
<div class="omfetrab" :class="['w' + width, 'h' + height, { big }]">
- <input ref="search" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" v-model.trim="q" :placeholder="$ts.search" @paste.stop="paste" @keyup.enter="done()">
- <div class="emojis" ref="emojis">
+ <input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="$ts.search" @paste.stop="paste" @keyup.enter="done()">
+ <div ref="emojis" class="emojis">
<section class="result">
<div v-if="searchResultCustom.length > 0">
<button v-for="emoji in searchResultCustom"
+ :key="emoji"
class="_button"
:title="emoji.name"
- @click="chosen(emoji, $event)"
- :key="emoji"
tabindex="0"
+ @click="chosen(emoji, $event)"
>
<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>
<img v-else :src="$store.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
@@ -17,25 +17,25 @@
</div>
<div v-if="searchResultUnicode.length > 0">
<button v-for="emoji in searchResultUnicode"
+ :key="emoji.name"
class="_button"
:title="emoji.name"
- @click="chosen(emoji, $event)"
- :key="emoji.name"
tabindex="0"
+ @click="chosen(emoji, $event)"
>
<MkEmoji :emoji="emoji.char"/>
</button>
</div>
</section>
- <div class="index" v-if="tab === 'index'">
+ <div v-if="tab === 'index'" class="index">
<section v-if="showPinned">
<div>
<button v-for="emoji in pinned"
- class="_button"
- @click="chosen(emoji, $event)"
- tabindex="0"
:key="emoji"
+ class="_button"
+ tabindex="0"
+ @click="chosen(emoji, $event)"
>
<MkEmoji :emoji="emoji" :normal="true"/>
</button>
@@ -46,9 +46,9 @@
<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ $ts.recentUsed }}</header>
<div>
<button v-for="emoji in $store.state.recentlyUsedEmojis"
+ :key="emoji"
class="_button"
@click="chosen(emoji, $event)"
- :key="emoji"
>
<MkEmoji :emoji="emoji" :normal="true"/>
</button>
diff --git a/packages/client/src/components/featured-photos.vue b/packages/client/src/components/featured-photos.vue
index 276344dfb4..af5892c98e 100644
--- a/packages/client/src/components/featured-photos.vue
+++ b/packages/client/src/components/featured-photos.vue
@@ -1,5 +1,5 @@
<template>
-<div class="xfbouadm" v-if="meta" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
+<div v-if="meta" class="xfbouadm" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
</template>
<script lang="ts">
diff --git a/packages/client/src/components/follow-button.vue b/packages/client/src/components/follow-button.vue
index ab19c64768..7136261914 100644
--- a/packages/client/src/components/follow-button.vue
+++ b/packages/client/src/components/follow-button.vue
@@ -1,8 +1,8 @@
<template>
<button class="kpoogebi _button"
:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou, full, large }"
- @click="onClick"
:disabled="wait"
+ @click="onClick"
>
<template v-if="!wait">
<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
diff --git a/packages/client/src/components/forgot-password.vue b/packages/client/src/components/forgot-password.vue
index a42ea5864a..b03a6133b4 100644
--- a/packages/client/src/components/forgot-password.vue
+++ b/packages/client/src/components/forgot-password.vue
@@ -7,14 +7,14 @@
>
<template #header>{{ $ts.forgotPassword }}</template>
- <form class="bafeceda" @submit.prevent="onSubmit" v-if="$instance.enableEmail">
+ <form v-if="$instance.enableEmail" class="bafeceda" @submit.prevent="onSubmit">
<div class="main _formRoot">
- <MkInput class="_formBlock" v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required>
+ <MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required>
<template #label>{{ $ts.username }}</template>
<template #prefix>@</template>
</MkInput>
- <MkInput class="_formBlock" v-model="email" type="email" spellcheck="false" required>
+ <MkInput v-model="email" class="_formBlock" type="email" spellcheck="false" required>
<template #label>{{ $ts.emailAddress }}</template>
<template #caption>{{ $ts._forgotPassword.enterEmail }}</template>
</MkInput>
diff --git a/packages/client/src/components/form-dialog.vue b/packages/client/src/components/form-dialog.vue
index 172e6a5138..27810d315a 100644
--- a/packages/client/src/components/form-dialog.vue
+++ b/packages/client/src/components/form-dialog.vue
@@ -32,11 +32,11 @@
</FormSwitch>
<FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]">
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
- <option v-for="item in form[item].enum" :value="item.value" :key="item.value">{{ item.label }}</option>
+ <option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option>
</FormSelect>
<FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]">
<template #desc><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
- <option v-for="item in form[item].options" :value="item.value" :key="item.value">{{ item.label }}</option>
+ <option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
</FormRadios>
<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step">
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index f2c1ead00c..99267f9231 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -2,10 +2,10 @@
<div class="matxzzsk">
<div class="label" @click="focus"><slot name="label"></slot></div>
<div class="input" :class="{ inline, disabled, focused }">
- <div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
+ <div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
<input ref="inputEl"
- :type="type"
v-model="v"
+ :type="type"
:disabled="disabled"
:required="required"
:readonly="readonly"
@@ -14,20 +14,20 @@
:autocomplete="autocomplete"
:spellcheck="spellcheck"
:step="step"
+ :list="id"
@focus="focused = true"
@blur="focused = false"
@keydown="onKeydown($event)"
@input="onInput"
- :list="id"
>
- <datalist :id="id" v-if="datalist">
+ <datalist v-if="datalist" :id="id">
<option v-for="data in datalist" :value="data"/>
</datalist>
- <div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
+ <div ref="suffixEl" class="suffix"><slot name="suffix"></slot></div>
</div>
<div class="caption"><slot name="caption"></slot></div>
- <MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+ <MkButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
</div>
</template>
diff --git a/packages/client/src/components/form/range.vue b/packages/client/src/components/form/range.vue
index 4cfe66a8fc..dd771abfe2 100644
--- a/packages/client/src/components/form/range.vue
+++ b/packages/client/src/components/form/range.vue
@@ -3,9 +3,9 @@
<div class="icon"><slot name="icon"></slot></div>
<span class="label"><slot name="label"></slot></span>
<input
- type="range"
ref="input"
v-model="v"
+ type="range"
:disabled="disabled"
:min="min"
:max="max"
diff --git a/packages/client/src/components/form/section.vue b/packages/client/src/components/form/section.vue
index 8eac40a0db..76db7ac5c3 100644
--- a/packages/client/src/components/form/section.vue
+++ b/packages/client/src/components/form/section.vue
@@ -1,5 +1,5 @@
<template>
-<div class="vrtktovh" v-size="{ max: [500] }" v-sticky-container>
+<div v-size="{ max: [500] }" v-sticky-container class="vrtktovh">
<div class="label"><slot name="label"></slot></div>
<div class="main">
<slot></slot>
diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue
index f7eb5cd14d..fe2a4e3a7d 100644
--- a/packages/client/src/components/form/select.vue
+++ b/packages/client/src/components/form/select.vue
@@ -1,10 +1,10 @@
<template>
<div class="vblkjoeq">
<div class="label" @click="focus"><slot name="label"></slot></div>
- <div class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick" ref="container">
- <div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
- <select class="select" ref="inputEl"
- v-model="v"
+ <div ref="container" class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick">
+ <div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
+ <select ref="inputEl" v-model="v"
+ class="select"
:disabled="disabled"
:required="required"
:readonly="readonly"
@@ -15,11 +15,11 @@
>
<slot></slot>
</select>
- <div class="suffix" ref="suffixEl"><i class="fas fa-chevron-down"></i></div>
+ <div ref="suffixEl" class="suffix"><i class="fas fa-chevron-down"></i></div>
</div>
<div class="caption"><slot name="caption"></slot></div>
- <MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+ <MkButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
</div>
</template>
diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue
index 85f8b7c870..d6df68a07f 100644
--- a/packages/client/src/components/form/switch.vue
+++ b/packages/client/src/components/form/switch.vue
@@ -8,12 +8,12 @@
@click.prevent="toggle"
>
<input
- type="checkbox"
ref="input"
+ type="checkbox"
:disabled="disabled"
@keydown.enter="toggle"
>
- <span class="button" v-tooltip="checked ? $ts.itsOn : $ts.itsOff">
+ <span v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button">
<span class="handle"></span>
</span>
<span class="label">
diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue
index fdb24f1e2b..f3a2c394f1 100644
--- a/packages/client/src/components/form/textarea.vue
+++ b/packages/client/src/components/form/textarea.vue
@@ -3,8 +3,8 @@
<div class="label" @click="focus"><slot name="label"></slot></div>
<div class="input" :class="{ disabled, focused, tall, pre }">
<textarea ref="inputEl"
- :class="{ code, _monospace: code }"
v-model="v"
+ :class="{ code, _monospace: code }"
:disabled="disabled"
:required="required"
:readonly="readonly"
@@ -20,7 +20,7 @@
</div>
<div class="caption"><slot name="caption"></slot></div>
- <MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+ <MkButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
</div>
</template>
diff --git a/packages/client/src/components/global/acct.vue b/packages/client/src/components/global/acct.vue
index b0c41c99c0..018826153c 100644
--- a/packages/client/src/components/global/acct.vue
+++ b/packages/client/src/components/global/acct.vue
@@ -1,7 +1,7 @@
<template>
<span class="mk-acct">
<span class="name">@{{ user.username }}</span>
- <span class="host" v-if="user.host || detail || $store.state.showFullAcct">@{{ user.host || host }}</span>
+ <span v-if="user.host || detail || $store.state.showFullAcct" class="host">@{{ user.host || host }}</span>
</span>
</template>
diff --git a/packages/client/src/components/global/ad.vue b/packages/client/src/components/global/ad.vue
index 71cb16740c..49046b00a7 100644
--- a/packages/client/src/components/global/ad.vue
+++ b/packages/client/src/components/global/ad.vue
@@ -1,12 +1,12 @@
<template>
-<div class="qiivuoyo" v-if="ad">
- <div class="main" :class="ad.place" v-if="!showMenu">
+<div v-if="ad" class="qiivuoyo">
+ <div v-if="!showMenu" class="main" :class="ad.place">
<a :href="ad.url" target="_blank">
<img :src="ad.imageUrl">
<button class="_button menu" @click.prevent.stop="toggleMenu"><span class="fas fa-info-circle"></span></button>
</a>
</div>
- <div class="menu" v-else>
+ <div v-else class="menu">
<div class="body">
<div>Ads by {{ host }}</div>
<!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>-->
diff --git a/packages/client/src/components/global/avatar.vue b/packages/client/src/components/global/avatar.vue
index e509e893da..300e5e079f 100644
--- a/packages/client/src/components/global/avatar.vue
+++ b/packages/client/src/components/global/avatar.vue
@@ -1,9 +1,9 @@
<template>
-<span class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
+<span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :title="acct(user)" @click="onClick">
<img class="inner" :src="url" decoding="async"/>
<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
</span>
-<MkA class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
+<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :to="userPage(user)" :title="acct(user)" :target="target">
<img class="inner" :src="url" decoding="async"/>
<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
</MkA>
diff --git a/packages/client/src/components/global/error.vue b/packages/client/src/components/global/error.vue
index 8ce5d16ac6..d759186167 100644
--- a/packages/client/src/components/global/error.vue
+++ b/packages/client/src/components/global/error.vue
@@ -3,7 +3,7 @@
<div class="mjndxjcg">
<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
<p><i class="fas fa-exclamation-triangle"></i> {{ $ts.somethingHappened }}</p>
- <MkButton @click="() => $emit('retry')" class="button">{{ $ts.retry }}</MkButton>
+ <MkButton class="button" @click="() => $emit('retry')">{{ $ts.retry }}</MkButton>
</div>
</transition>
</template>
diff --git a/packages/client/src/components/global/header.vue b/packages/client/src/components/global/header.vue
index 7d5e426f2b..2e03d783af 100644
--- a/packages/client/src/components/global/header.vue
+++ b/packages/client/src/components/global/header.vue
@@ -1,24 +1,24 @@
<template>
-<div class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick" ref="el">
+<div ref="el" class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick">
<template v-if="info">
- <div class="titleContainer" @click="showTabsPopup" v-if="!hideTitle">
+ <div v-if="!hideTitle" class="titleContainer" @click="showTabsPopup">
<MkAvatar v-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
<i v-else-if="info.icon" class="icon" :class="info.icon"></i>
<div class="title">
<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/>
<div v-else-if="info.title" class="title">{{ info.title }}</div>
- <div class="subtitle" v-if="!narrow && info.subtitle">
+ <div v-if="!narrow && info.subtitle" class="subtitle">
{{ info.subtitle }}
</div>
- <div class="subtitle activeTab" v-if="narrow && hasTabs">
+ <div v-if="narrow && hasTabs" class="subtitle activeTab">
{{ info.tabs.find(tab => tab.active)?.title }}
<i class="chevron fas fa-chevron-down"></i>
</div>
</div>
</div>
- <div class="tabs" v-if="!narrow || hideTitle">
- <button class="tab _button" v-for="tab in info.tabs" :class="{ active: tab.active }" @click="tab.onClick" v-tooltip="tab.title">
+ <div v-if="!narrow || hideTitle" class="tabs">
+ <button v-for="tab in info.tabs" v-tooltip="tab.title" class="tab _button" :class="{ active: tab.active }" @click="tab.onClick">
<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
</button>
@@ -27,11 +27,11 @@
<div class="buttons right">
<template v-if="info && info.actions && !narrow">
<template v-for="action in info.actions">
- <MkButton class="fullButton" v-if="action.asFullButton" @click.stop="action.handler" primary><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
- <button v-else class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
+ <MkButton v-if="action.asFullButton" class="fullButton" primary @click.stop="action.handler"><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
+ <button v-else v-tooltip="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
</template>
</template>
- <button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
+ <button v-if="shouldShowMenu" v-tooltip="$ts.menu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag"><i class="fas fa-ellipsis-h"></i></button>
</div>
</div>
</template>
diff --git a/packages/client/src/components/global/url.vue b/packages/client/src/components/global/url.vue
index 092fe6620c..4987c2b61c 100644
--- a/packages/client/src/components/global/url.vue
+++ b/packages/client/src/components/global/url.vue
@@ -7,12 +7,12 @@
<template v-if="!self">
<span class="schema">{{ schema }}//</span>
<span class="hostname">{{ hostname }}</span>
- <span class="port" v-if="port != ''">:{{ port }}</span>
+ <span v-if="port != ''" class="port">:{{ port }}</span>
</template>
<template v-if="pathname === '/' && self">
<span class="self">{{ hostname }}</span>
</template>
- <span class="pathname" v-if="pathname != ''">{{ self ? pathname.substr(1) : pathname }}</span>
+ <span v-if="pathname != ''" class="pathname">{{ self ? pathname.substr(1) : pathname }}</span>
<span class="query">{{ query }}</span>
<span class="hash">{{ hash }}</span>
<i v-if="target === '_blank'" class="fas fa-external-link-square-alt icon"></i>
diff --git a/packages/client/src/components/google.vue b/packages/client/src/components/google.vue
index c48feffbf1..a39168b80f 100644
--- a/packages/client/src/components/google.vue
+++ b/packages/client/src/components/google.vue
@@ -1,6 +1,6 @@
<template>
<div class="mk-google">
- <input type="search" v-model="query" :placeholder="q">
+ <input v-model="query" type="search" :placeholder="q">
<button @click="search"><i class="fas fa-search"></i> {{ $ts.search }}</button>
</div>
</template>
diff --git a/packages/client/src/components/img-with-blurhash.vue b/packages/client/src/components/img-with-blurhash.vue
index 7e80b00208..a000c699b6 100644
--- a/packages/client/src/components/img-with-blurhash.vue
+++ b/packages/client/src/components/img-with-blurhash.vue
@@ -1,6 +1,6 @@
<template>
<div class="xubzgfgb" :class="{ cover }" :title="title">
- <canvas ref="canvas" :width="size" :height="size" :title="title" v-if="!loaded"/>
+ <canvas v-if="!loaded" ref="canvas" :width="size" :height="size" :title="title"/>
<img v-if="src" :src="src" :title="title" :alt="alt" @load="onLoad"/>
</div>
</template>
diff --git a/packages/client/src/components/launch-pad.vue b/packages/client/src/components/launch-pad.vue
index 09f5f89f90..8fe72c5f8c 100644
--- a/packages/client/src/components/launch-pad.vue
+++ b/packages/client/src/components/launch-pad.vue
@@ -3,12 +3,12 @@
<div class="szkkfdyq _popup">
<div class="main">
<template v-for="item in items">
- <button v-if="item.action" class="_button" @click="$event => { item.action($event); close(); }" v-click-anime>
+ <button v-if="item.action" v-click-anime class="_button" @click="$event => { item.action($event); close(); }">
<i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</button>
- <MkA v-else :to="item.to" @click.passive="close()" v-click-anime>
+ <MkA v-else v-click-anime :to="item.to" @click.passive="close()">
<i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
@@ -16,15 +16,15 @@
</template>
</div>
<div class="sub">
- <a href="https://misskey-hub.net/help.html" target="_blank" @click.passive="close()" v-click-anime>
+ <a v-click-anime href="https://misskey-hub.net/help.html" target="_blank" @click.passive="close()">
<i class="fas fa-question-circle icon"></i>
<div class="text">{{ $ts.help }}</div>
</a>
- <MkA to="/about" @click.passive="close()" v-click-anime>
+ <MkA v-click-anime to="/about" @click.passive="close()">
<i class="fas fa-info-circle icon"></i>
<div class="text">{{ $t('aboutX', { x: instanceName }) }}</div>
</MkA>
- <MkA to="/about-misskey" @click.passive="close()" v-click-anime>
+ <MkA v-click-anime to="/about-misskey" @click.passive="close()">
<img src="/static-assets/favicon.png" class="icon"/>
<div class="text">{{ $ts.aboutMisskey }}</div>
</MkA>
diff --git a/packages/client/src/components/link.vue b/packages/client/src/components/link.vue
index a8e096e0a0..5a6754016e 100644
--- a/packages/client/src/components/link.vue
+++ b/packages/client/src/components/link.vue
@@ -1,8 +1,8 @@
<template>
<component :is="self ? 'MkA' : 'a'" class="xlcxczvw _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
+ :title="url"
@mouseover="onMouseover"
@mouseleave="onMouseleave"
- :title="url"
>
<slot></slot>
<i v-if="target === '_blank'" class="fas fa-external-link-square-alt icon"></i>
diff --git a/packages/client/src/components/media-banner.vue b/packages/client/src/components/media-banner.vue
index 2cf8c772e5..9dbfe3d0c6 100644
--- a/packages/client/src/components/media-banner.vue
+++ b/packages/client/src/components/media-banner.vue
@@ -1,20 +1,20 @@
<template>
<div class="mk-media-banner">
- <div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false">
+ <div v-if="media.isSensitive && hide" class="sensitive" @click="hide = false">
<span class="icon"><i class="fas fa-exclamation-triangle"></i></span>
<b>{{ $ts.sensitive }}</b>
<span>{{ $ts.clickToShow }}</span>
</div>
- <div class="audio" v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'">
- <audio class="audio"
+ <div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
+ <audio ref="audio"
+ class="audio"
:src="media.url"
:title="media.name"
controls
- ref="audio"
- @volumechange="volumechange"
- preload="metadata" />
+ preload="metadata"
+ @volumechange="volumechange" />
</div>
- <a class="download" v-else
+ <a v-else class="download"
:href="media.url"
:title="media.name"
:download="media.name"
diff --git a/packages/client/src/components/media-caption.vue b/packages/client/src/components/media-caption.vue
index 08a3ca2b4c..0bcc80dbf9 100644
--- a/packages/client/src/components/media-caption.vue
+++ b/packages/client/src/components/media-caption.vue
@@ -7,9 +7,9 @@
<Mfm v-if="title" class="title" :text="title"/>
<span class="text-count" :class="{ over: remainingLength < 0 }">{{ remainingLength }}</span>
</header>
- <textarea autofocus v-model="inputValue" :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
- <div class="buttons" v-if="(showOkButton || showCancelButton)">
- <MkButton inline @click="ok" primary :disabled="remainingLength < 0">{{ $ts.ok }}</MkButton>
+ <textarea v-model="inputValue" autofocus :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
+ <div v-if="(showOkButton || showCancelButton)" class="buttons">
+ <MkButton inline primary :disabled="remainingLength < 0" @click="ok">{{ $ts.ok }}</MkButton>
<MkButton inline @click="cancel" >{{ $ts.cancel }}</MkButton>
</div>
</div>
diff --git a/packages/client/src/components/media-image.vue b/packages/client/src/components/media-image.vue
index 8843b63207..1820c78edd 100644
--- a/packages/client/src/components/media-image.vue
+++ b/packages/client/src/components/media-image.vue
@@ -1,5 +1,5 @@
<template>
-<div class="qjewsnkg" v-if="hide" @click="hide = false">
+<div v-if="hide" class="qjewsnkg" @click="hide = false">
<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/>
<div class="text">
<div>
@@ -8,13 +8,13 @@
</div>
</div>
</div>
-<div class="gqnyydlz" :style="{ background: color }" v-else>
+<div v-else class="gqnyydlz" :style="{ background: color }">
<a
:href="image.url"
:title="image.name"
>
<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment" :title="image.comment" :cover="false"/>
- <div class="gif" v-if="image.type === 'image/gif'">GIF</div>
+ <div v-if="image.type === 'image/gif'" class="gif">GIF</div>
</a>
<i class="fas fa-eye-slash" @click="hide = true"></i>
</div>
diff --git a/packages/client/src/components/media-list.vue b/packages/client/src/components/media-list.vue
index 51eaa86f35..4eef95af54 100644
--- a/packages/client/src/components/media-list.vue
+++ b/packages/client/src/components/media-list.vue
@@ -1,11 +1,11 @@
<template>
<div class="hoawjimk">
- <XBanner v-for="media in mediaList.filter(media => !previewable(media))" :media="media" :key="media.id"/>
+ <XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container">
- <div :data-count="mediaList.filter(media => previewable(media)).length" ref="gallery">
+ <div ref="gallery" :data-count="mediaList.filter(media => previewable(media)).length">
<template v-for="media in mediaList">
- <XVideo :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
- <XImage class="image" :data-id="media.id" :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
+ <XVideo v-if="media.type.startsWith('video')" :key="media.id" :video="media"/>
+ <XImage v-else-if="media.type.startsWith('image')" :key="media.id" class="image" :data-id="media.id" :image="media" :raw="raw"/>
</template>
</div>
</div>
diff --git a/packages/client/src/components/media-video.vue b/packages/client/src/components/media-video.vue
index aa885bd564..a0dc57b657 100644
--- a/packages/client/src/components/media-video.vue
+++ b/packages/client/src/components/media-video.vue
@@ -1,11 +1,11 @@
<template>
-<div class="icozogqfvdetwohsdglrbswgrejoxbdj" v-if="hide" @click="hide = false">
+<div v-if="hide" class="icozogqfvdetwohsdglrbswgrejoxbdj" @click="hide = false">
<div>
<b><i class="fas fa-exclamation-triangle"></i> {{ $ts.sensitive }}</b>
<span>{{ $ts.clickToShow }}</span>
</div>
</div>
-<div class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else>
+<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
<video
:poster="video.thumbnailUrl"
:title="video.name"
diff --git a/packages/client/src/components/mention.vue b/packages/client/src/components/mention.vue
index a5be3fab22..479acfbc8f 100644
--- a/packages/client/src/components/mention.vue
+++ b/packages/client/src/components/mention.vue
@@ -1,9 +1,9 @@
<template>
-<MkA v-if="url.startsWith('/')" class="ldlomzub" :class="{ isMe }" :to="url" v-user-preview="canonical" :style="{ background: bg }">
+<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="ldlomzub" :class="{ isMe }" :to="url" :style="{ background: bg }">
<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
<span class="main">
<span class="username">@{{ username }}</span>
- <span class="host" v-if="(host != localHost) || $store.state.showFullAcct">@{{ toUnicode(host) }}</span>
+ <span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
</span>
</MkA>
<a v-else class="ldlomzub" :href="url" target="_blank" rel="noopener" :style="{ background: bg }">
diff --git a/packages/client/src/components/modal-page-window.vue b/packages/client/src/components/modal-page-window.vue
index 2086736683..3de1980820 100644
--- a/packages/client/src/components/modal-page-window.vue
+++ b/packages/client/src/components/modal-page-window.vue
@@ -2,7 +2,7 @@
<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
<div class="hrmcaedk _window _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
<div class="header" @contextmenu="onContextmenu">
- <button v-if="history.length > 0" class="_button" @click="back()" v-tooltip="$ts.goBack"><i class="fas fa-arrow-left"></i></button>
+ <button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
<span v-else style="display: inline-block; width: 20px"></span>
<span v-if="pageInfo" class="title">
<i v-if="pageInfo.icon" class="icon" :class="pageInfo.icon"></i>
diff --git a/packages/client/src/components/note-detailed.vue b/packages/client/src/components/note-detailed.vue
index fd4883e660..5fd8e9f6e2 100644
--- a/packages/client/src/components/note-detailed.vue
+++ b/packages/client/src/components/note-detailed.vue
@@ -1,36 +1,36 @@
<template>
<div
- class="lxwezrsl _block"
v-if="!muted"
v-show="!isDeleted"
- :tabindex="!isDeleted ? '-1' : null"
- :class="{ renote: isRenote }"
v-hotkey="keymap"
v-size="{ max: [500, 450, 350, 300] }"
+ class="lxwezrsl _block"
+ :tabindex="!isDeleted ? '-1' : null"
+ :class="{ renote: isRenote }"
>
- <XSub v-for="note in conversation" class="reply-to-more" :key="note.id" :note="note"/>
- <XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
- <div class="renote" v-if="isRenote">
+ <XSub v-for="note in conversation" :key="note.id" class="reply-to-more" :note="note"/>
+ <XSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
+ <div v-if="isRenote" class="renote">
<MkAvatar class="avatar" :user="note.user"/>
<i class="fas fa-retweet"></i>
<I18n :src="$ts.renotedBy" tag="span">
<template #user>
- <MkA class="name" :to="userPage(note.user)" v-user-preview="note.userId">
+ <MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
<MkUserName :user="note.user"/>
</MkA>
</template>
</I18n>
<div class="info">
- <button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
+ <button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
<MkTime :time="note.createdAt"/>
</button>
- <span class="visibility" v-if="note.visibility !== 'public'">
+ <span v-if="note.visibility !== 'public'" class="visibility">
<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
</span>
- <span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
+ <span v-if="note.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
</div>
</div>
<article class="article" @contextmenu.stop="onContextmenu">
@@ -38,18 +38,18 @@
<MkAvatar class="avatar" :user="appearNote.user" :show-indicator="true"/>
<div class="body">
<div class="top">
- <MkA class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.user.id">
+ <MkA v-user-preview="appearNote.user.id" class="name" :to="userPage(appearNote.user)">
<MkUserName :user="appearNote.user"/>
</MkA>
- <span class="is-bot" v-if="appearNote.user.isBot">bot</span>
- <span class="admin" v-if="appearNote.user.isAdmin"><i class="fas fa-bookmark"></i></span>
- <span class="moderator" v-if="!appearNote.user.isAdmin && appearNote.user.isModerator"><i class="far fa-bookmark"></i></span>
- <span class="visibility" v-if="appearNote.visibility !== 'public'">
+ <span v-if="appearNote.user.isBot" class="is-bot">bot</span>
+ <span v-if="appearNote.user.isAdmin" class="admin"><i class="fas fa-bookmark"></i></span>
+ <span v-if="!appearNote.user.isAdmin && appearNote.user.isModerator" class="moderator"><i class="far fa-bookmark"></i></span>
+ <span v-if="appearNote.visibility !== 'public'" class="visibility">
<i v-if="appearNote.visibility === 'home'" class="fas fa-home"></i>
<i v-else-if="appearNote.visibility === 'followers'" class="fas fa-unlock"></i>
<i v-else-if="appearNote.visibility === 'specified'" class="fas fa-envelope"></i>
</span>
- <span class="localOnly" v-if="appearNote.localOnly"><i class="fas fa-biohazard"></i></span>
+ <span v-if="appearNote.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
</div>
<div class="username"><MkAcct :user="appearNote.user"/></div>
<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
@@ -61,26 +61,26 @@
<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
<XCwButton v-model="showContent" :note="appearNote"/>
</p>
- <div class="content" v-show="appearNote.cw == null || showContent">
+ <div v-show="appearNote.cw == null || showContent" class="content">
<div class="text">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
- <MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
+ <MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
- <a class="rp" v-if="appearNote.renote != null">RN:</a>
- <div class="translation" v-if="translating || translation">
+ <a v-if="appearNote.renote != null" class="rp">RN:</a>
+ <div v-if="translating || translation" class="translation">
<MkLoading v-if="translating" mini/>
- <div class="translated" v-else>
+ <div v-else class="translated">
<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
</div>
</div>
</div>
- <div class="files" v-if="appearNote.files.length > 0">
+ <div v-if="appearNote.files.length > 0" class="files">
<XMediaList :media-list="appearNote.files"/>
</div>
- <XPoll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/>
- <MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="true" class="url-preview"/>
- <div class="renote" v-if="appearNote.renote"><XNoteSimple :note="appearNote.renote"/></div>
+ <XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
+ <MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" class="url-preview"/>
+ <div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
</div>
<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="fas fa-satellite-dish"></i> {{ appearNote.channel.name }}</MkA>
</div>
@@ -88,20 +88,20 @@
<div class="info">
<MkTime class="created-at" :time="appearNote.createdAt" mode="detail"/>
</div>
- <XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
- <button @click="reply()" class="button _button">
+ <XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
+ <button class="button _button" @click="reply()">
<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
<template v-else><i class="fas fa-reply"></i></template>
- <p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
+ <p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
</button>
- <XRenoteButton class="button" :note="appearNote" :count="appearNote.renoteCount" ref="renoteButton"/>
- <button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton">
+ <XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
+ <button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
<i class="fas fa-plus"></i>
</button>
- <button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton">
+ <button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
<i class="fas fa-minus"></i>
</button>
- <button class="button _button" @click="menu()" ref="menuButton">
+ <button ref="menuButton" class="button _button" @click="menu()">
<i class="fas fa-ellipsis-h"></i>
</button>
</footer>
@@ -112,7 +112,7 @@
<div v-else class="_panel muted" @click="muted = false">
<I18n :src="$ts.userSaysSomething" tag="small">
<template #name>
- <MkA class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.userId">
+ <MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
<MkUserName :user="appearNote.user"/>
</MkA>
</template>
diff --git a/packages/client/src/components/note-header.vue b/packages/client/src/components/note-header.vue
index c228869039..ca4be1e67f 100644
--- a/packages/client/src/components/note-header.vue
+++ b/packages/client/src/components/note-header.vue
@@ -1,22 +1,22 @@
<template>
<header class="kkwtjztg">
- <MkA class="name" :to="userPage(note.user)" v-user-preview="note.user.id">
+ <MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)">
<MkUserName :user="note.user"/>
</MkA>
- <div class="is-bot" v-if="note.user.isBot">bot</div>
+ <div v-if="note.user.isBot" class="is-bot">bot</div>
<div class="username"><MkAcct :user="note.user"/></div>
- <div class="admin" v-if="note.user.isAdmin"><i class="fas fa-bookmark"></i></div>
- <div class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><i class="far fa-bookmark"></i></div>
+ <div v-if="note.user.isAdmin" class="admin"><i class="fas fa-bookmark"></i></div>
+ <div v-if="!note.user.isAdmin && note.user.isModerator" class="moderator"><i class="far fa-bookmark"></i></div>
<div class="info">
<MkA class="created-at" :to="notePage(note)">
<MkTime :time="note.createdAt"/>
</MkA>
- <span class="visibility" v-if="note.visibility !== 'public'">
+ <span v-if="note.visibility !== 'public'" class="visibility">
<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
</span>
- <span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
+ <span v-if="note.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
</div>
</header>
</template>
diff --git a/packages/client/src/components/note-preview.vue b/packages/client/src/components/note-preview.vue
index a474a01341..6e3eba9306 100644
--- a/packages/client/src/components/note-preview.vue
+++ b/packages/client/src/components/note-preview.vue
@@ -1,5 +1,5 @@
<template>
-<div class="fefdfafb" v-size="{ min: [350, 500] }">
+<div v-size="{ min: [350, 500] }" class="fefdfafb">
<MkAvatar class="avatar" :user="$i"/>
<div class="main">
<div class="header">
diff --git a/packages/client/src/components/note-simple.vue b/packages/client/src/components/note-simple.vue
index 2f19bd6e0b..135f06602d 100644
--- a/packages/client/src/components/note-simple.vue
+++ b/packages/client/src/components/note-simple.vue
@@ -1,14 +1,14 @@
<template>
-<div class="yohlumlk" v-size="{ min: [350, 500] }">
+<div v-size="{ min: [350, 500] }" class="yohlumlk">
<MkAvatar class="avatar" :user="note.user"/>
<div class="main">
<XNoteHeader class="header" :note="note" :mini="true"/>
<div class="body">
<p v-if="note.cw != null" class="cw">
- <span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
+ <span v-if="note.cw != ''" class="text">{{ note.cw }}</span>
<XCwButton v-model="showContent" :note="note"/>
</p>
- <div class="content" v-show="note.cw == null || showContent">
+ <div v-show="note.cw == null || showContent" class="content">
<XSubNote-content class="text" :note="note"/>
</div>
</div>
diff --git a/packages/client/src/components/note.sub.vue b/packages/client/src/components/note.sub.vue
index 2e36365505..40e1f5c8c4 100644
--- a/packages/client/src/components/note.sub.vue
+++ b/packages/client/src/components/note.sub.vue
@@ -1,5 +1,5 @@
<template>
-<div class="wrpstxzv" :class="{ children: depth > 1 }" v-size="{ max: [450] }">
+<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1 }">
<div class="main">
<MkAvatar class="avatar" :user="note.user"/>
<div class="body">
@@ -9,7 +9,7 @@
<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis" />
<XCwButton v-model="showContent" :note="note"/>
</p>
- <div class="content" v-show="note.cw == null || showContent">
+ <div v-show="note.cw == null || showContent" class="content">
<XSubNote-content class="text" :note="note"/>
</div>
</div>
diff --git a/packages/client/src/components/note.vue b/packages/client/src/components/note.vue
index 08654b17ca..1a458b45f7 100644
--- a/packages/client/src/components/note.vue
+++ b/packages/client/src/components/note.vue
@@ -1,38 +1,38 @@
<template>
<div
- class="tkcbzcuz"
v-if="!muted"
v-show="!isDeleted"
- :tabindex="!isDeleted ? '-1' : null"
- :class="{ renote: isRenote }"
v-hotkey="keymap"
v-size="{ max: [500, 450, 350, 300] }"
+ class="tkcbzcuz"
+ :tabindex="!isDeleted ? '-1' : null"
+ :class="{ renote: isRenote }"
>
- <XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
- <div class="info" v-if="pinned"><i class="fas fa-thumbtack"></i> {{ $ts.pinnedNote }}</div>
- <div class="info" v-if="appearNote._prId_"><i class="fas fa-bullhorn"></i> {{ $ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ $ts.hideThisNote }} <i class="fas fa-times"></i></button></div>
- <div class="info" v-if="appearNote._featuredId_"><i class="fas fa-bolt"></i> {{ $ts.featured }}</div>
- <div class="renote" v-if="isRenote">
+ <XSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
+ <div v-if="pinned" class="info"><i class="fas fa-thumbtack"></i> {{ $ts.pinnedNote }}</div>
+ <div v-if="appearNote._prId_" class="info"><i class="fas fa-bullhorn"></i> {{ $ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ $ts.hideThisNote }} <i class="fas fa-times"></i></button></div>
+ <div v-if="appearNote._featuredId_" class="info"><i class="fas fa-bolt"></i> {{ $ts.featured }}</div>
+ <div v-if="isRenote" class="renote">
<MkAvatar class="avatar" :user="note.user"/>
<i class="fas fa-retweet"></i>
<I18n :src="$ts.renotedBy" tag="span">
<template #user>
- <MkA class="name" :to="userPage(note.user)" v-user-preview="note.userId">
+ <MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
<MkUserName :user="note.user"/>
</MkA>
</template>
</I18n>
<div class="info">
- <button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
+ <button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
<MkTime :time="note.createdAt"/>
</button>
- <span class="visibility" v-if="note.visibility !== 'public'">
+ <span v-if="note.visibility !== 'public'" class="visibility">
<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
</span>
- <span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
+ <span v-if="note.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
</div>
</div>
<article class="article" @contextmenu.stop="onContextmenu">
@@ -45,26 +45,26 @@
<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
<XCwButton v-model="showContent" :note="appearNote"/>
</p>
- <div class="content" :class="{ collapsed }" v-show="appearNote.cw == null || showContent">
+ <div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed }">
<div class="text">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
- <MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
+ <MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
- <a class="rp" v-if="appearNote.renote != null">RN:</a>
- <div class="translation" v-if="translating || translation">
+ <a v-if="appearNote.renote != null" class="rp">RN:</a>
+ <div v-if="translating || translation" class="translation">
<MkLoading v-if="translating" mini/>
- <div class="translated" v-else>
+ <div v-else class="translated">
<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
</div>
</div>
</div>
- <div class="files" v-if="appearNote.files.length > 0">
+ <div v-if="appearNote.files.length > 0" class="files">
<XMediaList :media-list="appearNote.files"/>
</div>
- <XPoll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/>
- <MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="false" class="url-preview"/>
- <div class="renote" v-if="appearNote.renote"><XNoteSimple :note="appearNote.renote"/></div>
+ <XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
+ <MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
+ <div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
<button v-if="collapsed" class="fade _button" @click="collapsed = false">
<span>{{ $ts.showMore }}</span>
</button>
@@ -72,20 +72,20 @@
<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="fas fa-satellite-dish"></i> {{ appearNote.channel.name }}</MkA>
</div>
<footer class="footer">
- <XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
- <button @click="reply()" class="button _button">
+ <XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
+ <button class="button _button" @click="reply()">
<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
<template v-else><i class="fas fa-reply"></i></template>
- <p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
+ <p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
</button>
- <XRenoteButton class="button" :note="appearNote" :count="appearNote.renoteCount" ref="renoteButton"/>
- <button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton">
+ <XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
+ <button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
<i class="fas fa-plus"></i>
</button>
- <button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton">
+ <button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
<i class="fas fa-minus"></i>
</button>
- <button class="button _button" @click="menu()" ref="menuButton">
+ <button ref="menuButton" class="button _button" @click="menu()">
<i class="fas fa-ellipsis-h"></i>
</button>
</footer>
@@ -95,7 +95,7 @@
<div v-else class="muted" @click="muted = false">
<I18n :src="$ts.userSaysSomething" tag="small">
<template #name>
- <MkA class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.userId">
+ <MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
<MkUserName :user="appearNote.user"/>
</MkA>
</template>
diff --git a/packages/client/src/components/notes.vue b/packages/client/src/components/notes.vue
index 1e7da7a2b0..4136f72b1b 100644
--- a/packages/client/src/components/notes.vue
+++ b/packages/client/src/components/notes.vue
@@ -4,25 +4,25 @@
<MkError v-else-if="error" @retry="init()"/>
- <div class="_fullinfo" v-else-if="empty">
+ <div v-else-if="empty" class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ $ts.noNotes }}</div>
</div>
<div v-else class="giivymft" :class="{ noGap }">
<div v-show="more && reversed" style="margin-bottom: var(--margin);">
- <MkButton style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+ <MkButton style="margin: 0 auto;" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMoreFeature">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</MkButton>
</div>
- <XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap" :ad="true" class="notes">
- <XNote class="qtqtichx" :note="note" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
+ <XList ref="notes" v-slot="{ item: note }" :items="notes" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap" :ad="true" class="notes">
+ <XNote :key="note._featuredId_ || note._prId_ || note.id" class="qtqtichx" :note="note" @update:note="updated(note, $event)"/>
</XList>
<div v-show="more && !reversed" style="margin-top: var(--margin);">
- <MkButton style="margin: 0 auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+ <MkButton v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" style="margin: 0 auto;" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</MkButton>
diff --git a/packages/client/src/components/notification.vue b/packages/client/src/components/notification.vue
index 40670daa9c..89025b72e6 100644
--- a/packages/client/src/components/notification.vue
+++ b/packages/client/src/components/notification.vue
@@ -1,5 +1,5 @@
<template>
-<div class="qglefbjs" :class="notification.type" v-size="{ max: [500, 600] }" ref="elRef">
+<div ref="elRef" v-size="{ max: [500, 600] }" class="qglefbjs" :class="notification.type">
<div class="head">
<MkAvatar v-if="notification.user" class="icon" :user="notification.user"/>
<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
@@ -15,6 +15,7 @@
<i v-else-if="notification.type === 'pollVote'" class="fas fa-poll-h"></i>
<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
<XReactionIcon v-else-if="notification.type === 'reaction'"
+ ref="reactionRef"
:reaction="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction"
:custom-emojis="notification.note.emojis"
:no-style="true"
@@ -22,15 +23,14 @@
@mouseover="onReactionMouseover"
@mouseleave="onReactionMouseleave"
@touchend="onReactionMouseleave"
- ref="reactionRef"
/>
</div>
</div>
<div class="tail">
<header>
- <MkA v-if="notification.user" class="name" :to="userPage(notification.user)" v-user-preview="notification.user.id"><MkUserName :user="notification.user"/></MkA>
+ <MkA v-if="notification.user" v-user-preview="notification.user.id" class="name" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA>
<span v-else>{{ notification.header }}</span>
- <MkTime :time="notification.createdAt" v-if="withTime" class="time"/>
+ <MkTime v-if="withTime" :time="notification.createdAt" class="time"/>
</header>
<MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
<i class="fas fa-quote-left"></i>
diff --git a/packages/client/src/components/notifications.vue b/packages/client/src/components/notifications.vue
index 4ebb12c44b..f3e5ee32f7 100644
--- a/packages/client/src/components/notifications.vue
+++ b/packages/client/src/components/notifications.vue
@@ -4,15 +4,15 @@
<MkError v-else-if="error" @retry="init()"/>
- <p class="mfcuwfyp" v-else-if="empty">{{ $ts.noNotifications }}</p>
+ <p v-else-if="empty" class="mfcuwfyp">{{ $ts.noNotifications }}</p>
<div v-else>
- <XList class="elsfgstc" :items="items" v-slot="{ item: notification }" :no-gap="true">
- <XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
- <XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
+ <XList v-slot="{ item: notification }" class="elsfgstc" :items="items" :no-gap="true">
+ <XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note" @update:note="noteUpdated(notification.note, $event)"/>
+ <XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
</XList>
- <MkButton primary style="margin: var(--margin) auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+ <MkButton v-show="more" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" primary style="margin: var(--margin) auto;" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</MkButton>
diff --git a/packages/client/src/components/page-preview.vue b/packages/client/src/components/page-preview.vue
index 05df1dc16e..090aff6c65 100644
--- a/packages/client/src/components/page-preview.vue
+++ b/packages/client/src/components/page-preview.vue
@@ -1,6 +1,6 @@
<template>
<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj _block _isolated" tabindex="-1">
- <div class="thumbnail" v-if="page.eyeCatchingImage" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
+ <div v-if="page.eyeCatchingImage" class="thumbnail" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
<article>
<header>
<h1 :title="page.title">{{ page.title }}</h1>
diff --git a/packages/client/src/components/page-window.vue b/packages/client/src/components/page-window.vue
index b6be114cd7..39c185b3e0 100644
--- a/packages/client/src/components/page-window.vue
+++ b/packages/client/src/components/page-window.vue
@@ -14,7 +14,7 @@
</template>
</template>
<template #headerLeft>
- <button v-if="history.length > 0" class="_button" @click="back()" v-tooltip="$ts.goBack"><i class="fas fa-arrow-left"></i></button>
+ <button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
</template>
<div class="yrolvcoq">
<MkStickyContainer>
diff --git a/packages/client/src/components/page/page.block.vue b/packages/client/src/components/page/page.block.vue
index 54b8b30276..d7984afac2 100644
--- a/packages/client/src/components/page/page.block.vue
+++ b/packages/client/src/components/page/page.block.vue
@@ -1,5 +1,5 @@
<template>
-<component :is="'x-' + block.type" :block="block" :hpml="hpml" :key="block.id" :h="h"/>
+<component :is="'x-' + block.type" :key="block.id" :block="block" :hpml="hpml" :h="h"/>
</template>
<script lang="ts">
diff --git a/packages/client/src/components/page/page.button.vue b/packages/client/src/components/page/page.button.vue
index d6fa42bd59..a87f6e9f02 100644
--- a/packages/client/src/components/page/page.button.vue
+++ b/packages/client/src/components/page/page.button.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkButton class="kudkigyw" @click="click()" :primary="block.primary">{{ hpml.interpolate(block.text) }}</MkButton>
+ <MkButton class="kudkigyw" :primary="block.primary" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
</div>
</template>
diff --git a/packages/client/src/components/page/page.if.vue b/packages/client/src/components/page/page.if.vue
index ec25332db0..6dc7a429a6 100644
--- a/packages/client/src/components/page/page.if.vue
+++ b/packages/client/src/components/page/page.if.vue
@@ -1,6 +1,6 @@
<template>
<div v-show="hpml.vars.value[block.var]">
- <XBlock v-for="child in block.children" :block="child" :hpml="hpml" :key="child.id" :h="h"/>
+ <XBlock v-for="child in block.children" :key="child.id" :block="child" :hpml="hpml" :h="h"/>
</div>
</template>
diff --git a/packages/client/src/components/page/page.note.vue b/packages/client/src/components/page/page.note.vue
index 925844c1bd..3bb338b095 100644
--- a/packages/client/src/components/page/page.note.vue
+++ b/packages/client/src/components/page/page.note.vue
@@ -1,7 +1,7 @@
<template>
<div class="voxdxuby">
- <XNote v-if="note && !block.detailed" v-model:note="note" :key="note.id + ':normal'"/>
- <XNoteDetailed v-if="note && block.detailed" v-model:note="note" :key="note.id + ':detail'"/>
+ <XNote v-if="note && !block.detailed" :key="note.id + ':normal'" v-model:note="note"/>
+ <XNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" v-model:note="note"/>
</div>
</template>
diff --git a/packages/client/src/components/page/page.number-input.vue b/packages/client/src/components/page/page.number-input.vue
index b5120d0f85..47ff2a0177 100644
--- a/packages/client/src/components/page/page.number-input.vue
+++ b/packages/client/src/components/page/page.number-input.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkInput class="kudkigyw" :model-value="value" @update:modelValue="updateValue($event)" type="number">
+ <MkInput class="kudkigyw" :model-value="value" type="number" @update:modelValue="updateValue($event)">
<template #label>{{ hpml.interpolate(block.text) }}</template>
</MkInput>
</div>
diff --git a/packages/client/src/components/page/page.post.vue b/packages/client/src/components/page/page.post.vue
index 1b86ea1ab9..847da37c51 100644
--- a/packages/client/src/components/page/page.post.vue
+++ b/packages/client/src/components/page/page.post.vue
@@ -1,7 +1,7 @@
<template>
<div class="ngbfujlo">
<MkTextarea :model-value="text" readonly style="margin: 0;"></MkTextarea>
- <MkButton class="button" primary @click="post()" :disabled="posting || posted">
+ <MkButton class="button" primary :disabled="posting || posted" @click="post()">
<i v-if="posted" class="fas fa-check"></i>
<i v-else class="fas fa-paper-plane"></i>
</MkButton>
diff --git a/packages/client/src/components/page/page.radio-button.vue b/packages/client/src/components/page/page.radio-button.vue
index 4d3c03291e..5a726da229 100644
--- a/packages/client/src/components/page/page.radio-button.vue
+++ b/packages/client/src/components/page/page.radio-button.vue
@@ -1,7 +1,7 @@
<template>
<div>
<div>{{ hpml.interpolate(block.title) }}</div>
- <MkRadio v-for="item in block.values" :modelValue="value" @update:modelValue="updateValue($event)" :value="item" :key="item">{{ item }}</MkRadio>
+ <MkRadio v-for="item in block.values" :key="item" :modelValue="value" :value="item" @update:modelValue="updateValue($event)">{{ item }}</MkRadio>
</div>
</template>
diff --git a/packages/client/src/components/page/page.section.vue b/packages/client/src/components/page/page.section.vue
index d32f5dc732..a2cd662833 100644
--- a/packages/client/src/components/page/page.section.vue
+++ b/packages/client/src/components/page/page.section.vue
@@ -3,7 +3,7 @@
<component :is="'h' + h">{{ block.title }}</component>
<div class="children">
- <XBlock v-for="child in block.children" :block="child" :hpml="hpml" :key="child.id" :h="h + 1"/>
+ <XBlock v-for="child in block.children" :key="child.id" :block="child" :hpml="hpml" :h="h + 1"/>
</div>
</section>
</template>
diff --git a/packages/client/src/components/page/page.text-input.vue b/packages/client/src/components/page/page.text-input.vue
index e4d3f6039a..30a0379df9 100644
--- a/packages/client/src/components/page/page.text-input.vue
+++ b/packages/client/src/components/page/page.text-input.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkInput class="kudkigyw" :model-value="value" @update:modelValue="updateValue($event)" type="text">
+ <MkInput class="kudkigyw" :model-value="value" type="text" @update:modelValue="updateValue($event)">
<template #label>{{ hpml.interpolate(block.text) }}</template>
</MkInput>
</div>
diff --git a/packages/client/src/components/page/page.text.vue b/packages/client/src/components/page/page.text.vue
index 7dd41ed869..8d2955466d 100644
--- a/packages/client/src/components/page/page.text.vue
+++ b/packages/client/src/components/page/page.text.vue
@@ -1,7 +1,7 @@
<template>
<div class="mrdgzndn">
- <Mfm :text="text" :is-note="false" :i="$i" :key="text"/>
- <MkUrlPreview v-for="url in urls" :url="url" :key="url" class="url"/>
+ <Mfm :key="text" :text="text" :is-note="false" :i="$i"/>
+ <MkUrlPreview v-for="url in urls" :key="url" :url="url" class="url"/>
</div>
</template>
diff --git a/packages/client/src/components/page/page.vue b/packages/client/src/components/page/page.vue
index cd81b16c55..e54147bbd0 100644
--- a/packages/client/src/components/page/page.vue
+++ b/packages/client/src/components/page/page.vue
@@ -1,6 +1,6 @@
<template>
-<div class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }" v-if="hpml">
- <XBlock v-for="child in page.content" :block="child" :hpml="hpml" :key="child.id" :h="2"/>
+<div v-if="hpml" class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }">
+ <XBlock v-for="child in page.content" :key="child.id" :block="child" :hpml="hpml" :h="2"/>
</div>
</template>
diff --git a/packages/client/src/components/poll-editor.vue b/packages/client/src/components/poll-editor.vue
index aa213cfe49..c2f760acbd 100644
--- a/packages/client/src/components/poll-editor.vue
+++ b/packages/client/src/components/poll-editor.vue
@@ -1,19 +1,19 @@
<template>
<div class="zmdxowus">
- <p class="caution" v-if="choices.length < 2">
+ <p v-if="choices.length < 2" class="caution">
<i class="fas fa-exclamation-triangle"></i>{{ $ts._poll.noOnlyOneChoice }}
</p>
<ul ref="choices">
<li v-for="(choice, i) in choices" :key="i">
- <MkInput class="input" :model-value="choice" @update:modelValue="onInput(i, $event)" :placeholder="$t('_poll.choiceN', { n: i + 1 })">
+ <MkInput class="input" :model-value="choice" :placeholder="$t('_poll.choiceN', { n: i + 1 })" @update:modelValue="onInput(i, $event)">
</MkInput>
- <button @click="remove(i)" class="_button">
+ <button class="_button" @click="remove(i)">
<i class="fas fa-times"></i>
</button>
</li>
</ul>
- <MkButton class="add" v-if="choices.length < 10" @click="add">{{ $ts.add }}</MkButton>
- <MkButton class="add" v-else disabled>{{ $ts._poll.noMore }}</MkButton>
+ <MkButton v-if="choices.length < 10" class="add" @click="add">{{ $ts.add }}</MkButton>
+ <MkButton v-else class="add" disabled>{{ $ts._poll.noMore }}</MkButton>
<section>
<MkSwitch v-model="multiple">{{ $ts._poll.canMultipleVote }}</MkSwitch>
<div>
diff --git a/packages/client/src/components/poll.vue b/packages/client/src/components/poll.vue
index 049fe3a435..6dbe0c84e9 100644
--- a/packages/client/src/components/poll.vue
+++ b/packages/client/src/components/poll.vue
@@ -1,12 +1,12 @@
<template>
<div class="tivcixzd" :class="{ done: closed || isVoted }">
<ul>
- <li v-for="(choice, i) in poll.choices" :key="i" @click="vote(i)" :class="{ voted: choice.voted }">
+ <li v-for="(choice, i) in poll.choices" :key="i" :class="{ voted: choice.voted }" @click="vote(i)">
<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
<span>
<template v-if="choice.isVoted"><i class="fas fa-check"></i></template>
<Mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
- <span class="votes" v-if="showResult">({{ $t('_poll.votesCount', { n: choice.votes }) }})</span>
+ <span v-if="showResult" class="votes">({{ $t('_poll.votesCount', { n: choice.votes }) }})</span>
</span>
</li>
</ul>
diff --git a/packages/client/src/components/post-form-attaches.vue b/packages/client/src/components/post-form-attaches.vue
index 23ccd54dd8..0782ce22e5 100644
--- a/packages/client/src/components/post-form-attaches.vue
+++ b/packages/client/src/components/post-form-attaches.vue
@@ -1,10 +1,10 @@
<template>
-<div class="skeikyzd" v-show="files.length != 0">
- <XDraggable class="files" v-model="_files" item-key="id" animation="150" delay="100" delay-on-touch-only="true">
+<div v-show="files.length != 0" class="skeikyzd">
+ <XDraggable v-model="_files" class="files" item-key="id" animation="150" delay="100" delay-on-touch-only="true">
<template #item="{element}">
<div @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
- <div class="sensitive" v-if="element.isSensitive">
+ <div v-if="element.isSensitive" class="sensitive">
<i class="fas fa-exclamation-triangle icon"></i>
</div>
</div>
diff --git a/packages/client/src/components/post-form-dialog.vue b/packages/client/src/components/post-form-dialog.vue
index ae1cd7f01e..b8b357bcde 100644
--- a/packages/client/src/components/post-form-dialog.vue
+++ b/packages/client/src/components/post-form-dialog.vue
@@ -1,6 +1,6 @@
<template>
-<MkModal ref="modal" @click="$refs.modal.close()" @closed="$emit('closed')" :position="'top'">
- <MkPostForm @posted="$refs.modal.close()" @cancel="$refs.modal.close()" @esc="$refs.modal.close()" v-bind="$attrs"/>
+<MkModal ref="modal" :position="'top'" @click="$refs.modal.close()" @closed="$emit('closed')">
+ <MkPostForm v-bind="$attrs" @posted="$refs.modal.close()" @cancel="$refs.modal.close()" @esc="$refs.modal.close()"/>
</MkModal>
</template>
diff --git a/packages/client/src/components/post-form.vue b/packages/client/src/components/post-form.vue
index 6cbcc57a76..6f75e12a77 100644
--- a/packages/client/src/components/post-form.vue
+++ b/packages/client/src/components/post-form.vue
@@ -1,6 +1,6 @@
<template>
-<div class="gafaadew" :class="{ modal, _popup: modal }"
- v-size="{ max: [310, 500] }"
+<div v-size="{ max: [310, 500] }" class="gafaadew"
+ :class="{ modal, _popup: modal }"
@dragover.stop="onDragover"
@dragenter="onDragenter"
@dragleave="onDragleave"
@@ -10,21 +10,21 @@
<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="fas fa-times"></i></button>
<div>
<span class="text-count" :class="{ over: textLength > max }">{{ max - textLength }}</span>
- <span class="local-only" v-if="localOnly"><i class="fas fa-biohazard"></i></span>
- <button class="_button visibility" @click="setVisibility" ref="visibilityButton" v-tooltip="$ts.visibility" :disabled="channel != null">
+ <span v-if="localOnly" class="local-only"><i class="fas fa-biohazard"></i></span>
+ <button ref="visibilityButton" v-tooltip="$ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
<span v-if="visibility === 'public'"><i class="fas fa-globe"></i></span>
<span v-if="visibility === 'home'"><i class="fas fa-home"></i></span>
<span v-if="visibility === 'followers'"><i class="fas fa-unlock"></i></span>
<span v-if="visibility === 'specified'"><i class="fas fa-envelope"></i></span>
</button>
- <button class="_button preview" @click="showPreview = !showPreview" :class="{ active: showPreview }" v-tooltip="$ts.previewNoteText"><i class="fas fa-file-code"></i></button>
- <button class="submit _buttonGradate" :disabled="!canPost" @click="post" data-cy-open-post-form-submit>{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
+ <button v-tooltip="$ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="fas fa-file-code"></i></button>
+ <button class="submit _buttonGradate" :disabled="!canPost" data-cy-open-post-form-submit @click="post">{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
</div>
</header>
<div class="form" :class="{ fixed }">
- <XNoteSimple class="preview" v-if="reply" :note="reply"/>
- <XNoteSimple class="preview" v-if="renote" :note="renote"/>
- <div class="with-quote" v-if="quoteId"><i class="fas fa-quote-left"></i> {{ $ts.quoteAttached }}<button @click="quoteId = null"><i class="fas fa-times"></i></button></div>
+ <XNoteSimple v-if="reply" class="preview" :note="reply"/>
+ <XNoteSimple v-if="renote" class="preview" :note="renote"/>
+ <div v-if="quoteId" class="with-quote"><i class="fas fa-quote-left"></i> {{ $ts.quoteAttached }}<button @click="quoteId = null"><i class="fas fa-times"></i></button></div>
<div v-if="visibility === 'specified'" class="to-specified">
<span style="margin-right: 8px;">{{ $ts.recipient }}</span>
<div class="visibleUsers">
@@ -32,27 +32,27 @@
<MkAcct :user="u"/>
<button class="_button" @click="removeVisibleUser(u)"><i class="fas fa-times"></i></button>
</span>
- <button @click="addVisibleUser" class="_buttonPrimary"><i class="fas fa-plus fa-fw"></i></button>
+ <button class="_buttonPrimary" @click="addVisibleUser"><i class="fas fa-plus fa-fw"></i></button>
</div>
</div>
- <MkInfo warn v-if="hasNotSpecifiedMentions" class="hasNotSpecifiedMentions">{{ $ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ $ts.add }}</button></MkInfo>
- <input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$ts.annotation" @keydown="onKeydown">
- <textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd" data-cy-post-form-text/>
- <input v-show="withHashtags" ref="hashtags" class="hashtags" v-model="hashtags" :placeholder="$ts.hashtags" list="hashtags">
+ <MkInfo v-if="hasNotSpecifiedMentions" warn class="hasNotSpecifiedMentions">{{ $ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ $ts.add }}</button></MkInfo>
+ <input v-show="useCw" ref="cw" v-model="cw" class="cw" :placeholder="$ts.annotation" @keydown="onKeydown">
+ <textarea ref="text" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
+ <input v-show="withHashtags" ref="hashtags" v-model="hashtags" class="hashtags" :placeholder="$ts.hashtags" list="hashtags">
<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
- <XNotePreview class="preview" v-if="showPreview" :text="text"/>
+ <XNotePreview v-if="showPreview" class="preview" :text="text"/>
<footer>
- <button class="_button" @click="chooseFileFrom" v-tooltip="$ts.attachFile"><i class="fas fa-photo-video"></i></button>
- <button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$ts.poll"><i class="fas fa-poll-h"></i></button>
- <button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$ts.useCw"><i class="fas fa-eye-slash"></i></button>
- <button class="_button" @click="insertMention" v-tooltip="$ts.mention"><i class="fas fa-at"></i></button>
- <button class="_button" @click="withHashtags = !withHashtags" :class="{ active: withHashtags }" v-tooltip="$ts.hashtags"><i class="fas fa-hashtag"></i></button>
- <button class="_button" @click="insertEmoji" v-tooltip="$ts.emoji"><i class="fas fa-laugh-squint"></i></button>
- <button class="_button" @click="showActions" v-tooltip="$ts.plugin" v-if="postFormActions.length > 0"><i class="fas fa-plug"></i></button>
+ <button v-tooltip="$ts.attachFile" class="_button" @click="chooseFileFrom"><i class="fas fa-photo-video"></i></button>
+ <button v-tooltip="$ts.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><i class="fas fa-poll-h"></i></button>
+ <button v-tooltip="$ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="fas fa-eye-slash"></i></button>
+ <button v-tooltip="$ts.mention" class="_button" @click="insertMention"><i class="fas fa-at"></i></button>
+ <button v-tooltip="$ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="fas fa-hashtag"></i></button>
+ <button v-tooltip="$ts.emoji" class="_button" @click="insertEmoji"><i class="fas fa-laugh-squint"></i></button>
+ <button v-if="postFormActions.length > 0" v-tooltip="$ts.plugin" class="_button" @click="showActions"><i class="fas fa-plug"></i></button>
</footer>
<datalist id="hashtags">
- <option v-for="hashtag in recentHashtags" :value="hashtag" :key="hashtag"/>
+ <option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
</datalist>
</div>
</div>
diff --git a/packages/client/src/components/reaction-tooltip.vue b/packages/client/src/components/reaction-tooltip.vue
index 93143cbe81..a52c295277 100644
--- a/packages/client/src/components/reaction-tooltip.vue
+++ b/packages/client/src/components/reaction-tooltip.vue
@@ -1,5 +1,5 @@
<template>
-<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')" :max-width="340">
+<MkTooltip ref="tooltip" :source="source" :max-width="340" @closed="$emit('closed')">
<div class="beeadbfb">
<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
<div class="name">{{ reaction.replace('@.', '') }}</div>
diff --git a/packages/client/src/components/reactions-viewer.details.vue b/packages/client/src/components/reactions-viewer.details.vue
index ecf1389691..63c22b98c4 100644
--- a/packages/client/src/components/reactions-viewer.details.vue
+++ b/packages/client/src/components/reactions-viewer.details.vue
@@ -1,12 +1,12 @@
<template>
-<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')" :max-width="340">
+<MkTooltip ref="tooltip" :source="source" :max-width="340" @closed="$emit('closed')">
<div class="bqxuuuey">
<div class="reaction">
<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
<div class="name">{{ reaction.replace('@.', '') }}</div>
</div>
<div class="users">
- <div class="user" v-for="u in users" :key="u.id">
+ <div v-for="u in users" :key="u.id" class="user">
<MkAvatar class="avatar" :user="u"/>
<MkUserName class="name" :user="u" :nowrap="true"/>
</div>
diff --git a/packages/client/src/components/reactions-viewer.reaction.vue b/packages/client/src/components/reactions-viewer.reaction.vue
index a7769868b9..65f92c39ee 100644
--- a/packages/client/src/components/reactions-viewer.reaction.vue
+++ b/packages/client/src/components/reactions-viewer.reaction.vue
@@ -1,15 +1,15 @@
<template>
<button
+ v-if="count > 0"
+ ref="buttonRef"
+ v-particle="canToggle"
class="hkzvhatu _button"
:class="{ reacted: note.myReaction == reaction, canToggle }"
@click="toggleReaction()"
- v-if="count > 0"
@touchstart.passive="onMouseover"
@mouseover="onMouseover"
@mouseleave="onMouseleave"
@touchend="onMouseleave"
- ref="buttonRef"
- v-particle="canToggle"
>
<XReactionIcon :reaction="reaction" :custom-emojis="note.emojis"/>
<span>{{ count }}</span>
diff --git a/packages/client/src/components/reactions-viewer.vue b/packages/client/src/components/reactions-viewer.vue
index 94a0318734..59fcbb7129 100644
--- a/packages/client/src/components/reactions-viewer.vue
+++ b/packages/client/src/components/reactions-viewer.vue
@@ -1,6 +1,6 @@
<template>
<div class="tdflqwzn" :class="{ isMe }">
- <XReaction v-for="(count, reaction) in note.reactions" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note" :key="reaction"/>
+ <XReaction v-for="(count, reaction) in note.reactions" :key="reaction" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note"/>
</div>
</template>
diff --git a/packages/client/src/components/renote-button.vue b/packages/client/src/components/renote-button.vue
index af27bfca2f..62780cacea 100644
--- a/packages/client/src/components/renote-button.vue
+++ b/packages/client/src/components/renote-button.vue
@@ -1,15 +1,15 @@
<template>
<button v-if="canRenote"
+ ref="buttonRef"
class="eddddedb _button canRenote"
@click="renote()"
@touchstart.passive="onMouseover"
@mouseover="onMouseover"
@mouseleave="onMouseleave"
@touchend="onMouseleave"
- ref="buttonRef"
>
<i class="fas fa-retweet"></i>
- <p class="count" v-if="count > 0">{{ count }}</p>
+ <p v-if="count > 0" class="count">{{ count }}</p>
</button>
<button v-else class="eddddedb _button">
<i class="fas fa-ban"></i>
diff --git a/packages/client/src/components/renote.details.vue b/packages/client/src/components/renote.details.vue
index ff9c4505a5..e3ef15c753 100644
--- a/packages/client/src/components/renote.details.vue
+++ b/packages/client/src/components/renote.details.vue
@@ -1,7 +1,7 @@
<template>
-<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')" :max-width="250">
+<MkTooltip ref="tooltip" :source="source" :max-width="250" @closed="$emit('closed')">
<div class="beaffaef">
- <div class="user" v-for="u in users" :key="u.id">
+ <div v-for="u in users" :key="u.id" class="user">
<MkAvatar class="avatar" :user="u"/>
<MkUserName class="name" :user="u" :nowrap="true"/>
</div>
diff --git a/packages/client/src/components/signin.vue b/packages/client/src/components/signin.vue
index ef299090fa..51913f7a23 100644
--- a/packages/client/src/components/signin.vue
+++ b/packages/client/src/components/signin.vue
@@ -1,31 +1,31 @@
<template>
<form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
<div class="auth _section _formRoot">
- <div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
- <div class="normal-signin" v-if="!totpLogin">
- <MkInput class="_formBlock" v-model="username" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange" data-cy-signin-username>
+ <div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }"></div>
+ <div v-if="!totpLogin" class="normal-signin">
+ <MkInput v-model="username" class="_formBlock" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange">
<template #prefix>@</template>
<template #suffix>@{{ host }}</template>
</MkInput>
- <MkInput class="_formBlock" v-model="password" :placeholder="$ts.password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required data-cy-signin-password>
+ <MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" class="_formBlock" :placeholder="$ts.password" type="password" :with-password-toggle="true" required data-cy-signin-password>
<template #prefix><i class="fas fa-lock"></i></template>
- <template #caption><button class="_textButton" @click="resetPassword" type="button">{{ $ts.forgotPassword }}</button></template>
+ <template #caption><button class="_textButton" type="button" @click="resetPassword">{{ $ts.forgotPassword }}</button></template>
</MkInput>
<MkButton class="_formBlock" type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton>
</div>
- <div class="2fa-signin" v-if="totpLogin" :class="{ securityKeys: user && user.securityKeys }">
+ <div v-if="totpLogin" class="2fa-signin" :class="{ securityKeys: user && user.securityKeys }">
<div v-if="user && user.securityKeys" class="twofa-group tap-group">
<p>{{ $ts.tapSecurityKey }}</p>
- <MkButton @click="queryKey" v-if="!queryingKey">
+ <MkButton v-if="!queryingKey" @click="queryKey">
{{ $ts.retry }}
</MkButton>
</div>
- <div class="or-hr" v-if="user && user.securityKeys">
+ <div v-if="user && user.securityKeys" class="or-hr">
<p class="or-msg">{{ $ts.or }}</p>
</div>
<div class="twofa-group totp-group">
<p style="margin-bottom:0;">{{ $ts.twoStepAuthentication }}</p>
- <MkInput v-model="password" type="password" :with-password-toggle="true" v-if="user && user.usePasswordLessLogin" required>
+ <MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" :with-password-toggle="true" required>
<template #label>{{ $ts.password }}</template>
<template #prefix><i class="fas fa-lock"></i></template>
</MkInput>
@@ -38,9 +38,9 @@
</div>
</div>
<div class="social _section">
- <a class="_borderButton _gap" v-if="meta && meta.enableTwitterIntegration" :href="`${apiUrl}/signin/twitter`"><i class="fab fa-twitter" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
- <a class="_borderButton _gap" v-if="meta && meta.enableGithubIntegration" :href="`${apiUrl}/signin/github`"><i class="fab fa-github" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
- <a class="_borderButton _gap" v-if="meta && meta.enableDiscordIntegration" :href="`${apiUrl}/signin/discord`"><i class="fab fa-discord" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Discord' }) }}</a>
+ <a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/twitter`"><i class="fab fa-twitter" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
+ <a v-if="meta && meta.enableGithubIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/github`"><i class="fab fa-github" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
+ <a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/discord`"><i class="fab fa-discord" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Discord' }) }}</a>
</div>
</form>
</template>
diff --git a/packages/client/src/components/signup.vue b/packages/client/src/components/signup.vue
index 0572fdaa7a..8668d1d076 100644
--- a/packages/client/src/components/signup.vue
+++ b/packages/client/src/components/signup.vue
@@ -1,12 +1,12 @@
<template>
-<form class="qlvuhzng _formRoot" @submit.prevent="onSubmit" :autocomplete="Math.random()">
+<form class="qlvuhzng _formRoot" :autocomplete="Math.random()" @submit.prevent="onSubmit">
<template v-if="meta">
- <MkInput class="_formBlock" v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required>
+ <MkInput v-if="meta.disableRegistration" v-model="invitationCode" class="_formBlock" type="text" :autocomplete="Math.random()" spellcheck="false" required>
<template #label>{{ $ts.invitationCode }}</template>
<template #prefix><i class="fas fa-key"></i></template>
</MkInput>
- <MkInput class="_formBlock" v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeUsername" data-cy-signup-username>
- <template #label>{{ $ts.username }} <div class="_button _help" v-tooltip:dialog="$ts.usernameInfo"><i class="far fa-question-circle"></i></div></template>
+ <MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required data-cy-signup-username @update:modelValue="onChangeUsername">
+ <template #label>{{ $ts.username }} <div v-tooltip:dialog="$ts.usernameInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
<template #prefix>@</template>
<template #suffix>@{{ host }}</template>
<template #caption>
@@ -19,8 +19,8 @@
<span v-else-if="usernameState === 'max-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooLong }}</span>
</template>
</MkInput>
- <MkInput v-if="meta.emailRequiredForSignup" class="_formBlock" v-model="email" :debounce="true" type="email" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeEmail" data-cy-signup-email>
- <template #label>{{ $ts.emailAddress }} <div class="_button _help" v-tooltip:dialog="$ts._signup.emailAddressInfo"><i class="far fa-question-circle"></i></div></template>
+ <MkInput v-if="meta.emailRequiredForSignup" v-model="email" class="_formBlock" :debounce="true" type="email" :autocomplete="Math.random()" spellcheck="false" required data-cy-signup-email @update:modelValue="onChangeEmail">
+ <template #label>{{ $ts.emailAddress }} <div v-tooltip:dialog="$ts._signup.emailAddressInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
<template #prefix><i class="fas fa-envelope"></i></template>
<template #caption>
<span v-if="emailState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ $ts.checking }}</span>
@@ -34,7 +34,7 @@
<span v-else-if="emailState === 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.error }}</span>
</template>
</MkInput>
- <MkInput class="_formBlock" v-model="password" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePassword" data-cy-signup-password>
+ <MkInput v-model="password" class="_formBlock" type="password" :autocomplete="Math.random()" required data-cy-signup-password @update:modelValue="onChangePassword">
<template #label>{{ $ts.password }}</template>
<template #prefix><i class="fas fa-lock"></i></template>
<template #caption>
@@ -43,7 +43,7 @@
<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.strongPassword }}</span>
</template>
</MkInput>
- <MkInput class="_formBlock" v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePasswordRetype" data-cy-signup-password-retype>
+ <MkInput v-model="retypedPassword" class="_formBlock" type="password" :autocomplete="Math.random()" required data-cy-signup-password-retype @update:modelValue="onChangePasswordRetype">
<template #label>{{ $ts.password }} ({{ $ts.retype }})</template>
<template #prefix><i class="fas fa-lock"></i></template>
<template #caption>
@@ -52,15 +52,15 @@
</template>
</MkInput>
<label v-if="meta.tosUrl" class="_formBlock tou">
- <input type="checkbox" v-model="ToSAgreement">
+ <input v-model="ToSAgreement" type="checkbox">
<I18n :src="$ts.agreeTo">
<template #0>
<a :href="meta.tosUrl" class="_link" target="_blank">{{ $ts.tos }}</a>
</template>
</I18n>
</label>
- <captcha v-if="meta.enableHcaptcha" class="_formBlock captcha" provider="hcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
- <captcha v-if="meta.enableRecaptcha" class="_formBlock captcha" provider="recaptcha" ref="recaptcha" v-model="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
+ <captcha v-if="meta.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="_formBlock captcha" provider="hcaptcha" :sitekey="meta.hcaptchaSiteKey"/>
+ <captcha v-if="meta.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="_formBlock captcha" provider="recaptcha" :sitekey="meta.recaptchaSiteKey"/>
<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ $ts.start }}</MkButton>
</template>
</form>
diff --git a/packages/client/src/components/sub-note-content.vue b/packages/client/src/components/sub-note-content.vue
index 0a557c0c6c..efa202ce2f 100644
--- a/packages/client/src/components/sub-note-content.vue
+++ b/packages/client/src/components/sub-note-content.vue
@@ -3,9 +3,9 @@
<div class="body">
<span v-if="note.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
<span v-if="note.deletedAt" style="opacity: 0.5">({{ $ts.deleted }})</span>
- <MkA class="reply" v-if="note.replyId" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
+ <MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
- <MkA class="rp" v-if="note.renoteId" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
+ <MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
</div>
<details v-if="note.files.length > 0">
<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary>
diff --git a/packages/client/src/components/taskmanager.vue b/packages/client/src/components/taskmanager.vue
index 6efbf286e6..6901d88c2c 100644
--- a/packages/client/src/components/taskmanager.vue
+++ b/packages/client/src/components/taskmanager.vue
@@ -12,7 +12,7 @@
</MkTab>
<div class="content">
- <div v-if="tab === 'windows'" class="windows" v-follow>
+ <div v-if="tab === 'windows'" v-follow class="windows">
<div class="header">
<div>#ID</div>
<div>Component</div>
@@ -24,7 +24,7 @@
<div><button class="_textButton" @click="killPopup(p)">Kill</button></div>
</div>
</div>
- <div v-if="tab === 'stream'" class="stream" v-follow>
+ <div v-if="tab === 'stream'" v-follow class="stream">
<div class="header">
<div>#ID</div>
<div>Ch</div>
@@ -41,7 +41,7 @@
<div>{{ c.out }}</div>
</div>
</div>
- <div v-if="tab === 'streamPool'" class="streamPool" v-follow>
+ <div v-if="tab === 'streamPool'" v-follow class="streamPool">
<div class="header">
<div>#ID</div>
<div>Ch</div>
@@ -53,7 +53,7 @@
<div>{{ p.users }}</div>
</div>
</div>
- <div v-if="tab === 'api'" class="api" v-follow>
+ <div v-if="tab === 'api'" v-follow class="api">
<div class="header">
<div>#ID</div>
<div>Endpoint</div>
diff --git a/packages/client/src/components/timeline.vue b/packages/client/src/components/timeline.vue
index fa7f4e7f4d..f8a800872f 100644
--- a/packages/client/src/components/timeline.vue
+++ b/packages/client/src/components/timeline.vue
@@ -1,5 +1,5 @@
<template>
-<XNotes :no-gap="!$store.state.showGapBetweenNotesInTimeline" ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
+<XNotes ref="tl" :no-gap="!$store.state.showGapBetweenNotesInTimeline" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
</template>
<script lang="ts">
diff --git a/packages/client/src/components/toast.vue b/packages/client/src/components/toast.vue
index fb0de68092..740370003e 100644
--- a/packages/client/src/components/toast.vue
+++ b/packages/client/src/components/toast.vue
@@ -1,7 +1,7 @@
<template>
<div class="mk-toast">
<transition name="notification-slide" appear @after-leave="$emit('closed')">
- <XNotification :notification="notification" class="notification _acrylic" v-if="showing"/>
+ <XNotification v-if="showing" :notification="notification" class="notification _acrylic"/>
</transition>
</div>
</template>
diff --git a/packages/client/src/components/ui/container.vue b/packages/client/src/components/ui/container.vue
index 14673dfcd7..fcd9f32290 100644
--- a/packages/client/src/components/ui/container.vue
+++ b/packages/client/src/components/ui/container.vue
@@ -1,10 +1,10 @@
<template>
-<div class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }" v-size="{ max: [380] }">
+<div v-size="{ max: [380] }" class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
<header v-if="showHeader" ref="header">
<div class="title"><slot name="header"></slot></div>
<div class="sub">
<slot name="func"></slot>
- <button class="_button" v-if="foldable" @click="() => showBody = !showBody">
+ <button v-if="foldable" class="_button" @click="() => showBody = !showBody">
<template v-if="showBody"><i class="fas fa-angle-up"></i></template>
<template v-else><i class="fas fa-angle-down"></i></template>
</button>
@@ -16,7 +16,7 @@
@leave="leave"
@after-leave="afterLeave"
>
- <div v-show="showBody" class="content" :class="{ omitted }" ref="content">
+ <div v-show="showBody" ref="content" class="content" :class="{ omitted }">
<slot></slot>
<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
<span>{{ $ts.showMore }}</span>
diff --git a/packages/client/src/components/ui/context-menu.vue b/packages/client/src/components/ui/context-menu.vue
index 561099cbe0..0438d3323e 100644
--- a/packages/client/src/components/ui/context-menu.vue
+++ b/packages/client/src/components/ui/context-menu.vue
@@ -1,7 +1,7 @@
<template>
<transition :name="$store.state.animation ? 'fade' : ''" appear>
<div class="nvlagfpb" @contextmenu.prevent.stop="() => {}">
- <MkMenu :items="items" @close="$emit('closed')" class="_popup _shadow" :align="'left'"/>
+ <MkMenu :items="items" class="_popup _shadow" :align="'left'" @close="$emit('closed')"/>
</div>
</transition>
</template>
diff --git a/packages/client/src/components/ui/folder.vue b/packages/client/src/components/ui/folder.vue
index 3997421d08..9795b1d81a 100644
--- a/packages/client/src/components/ui/folder.vue
+++ b/packages/client/src/components/ui/folder.vue
@@ -1,6 +1,6 @@
<template>
-<div class="ssazuxis" v-size="{ max: [500] }">
- <header @click="showBody = !showBody" class="_button" :style="{ background: bg }">
+<div v-size="{ max: [500] }" class="ssazuxis">
+ <header class="_button" :style="{ background: bg }" @click="showBody = !showBody">
<div class="title"><slot name="header"></slot></div>
<div class="divider"></div>
<button class="_button">
diff --git a/packages/client/src/components/ui/menu.vue b/packages/client/src/components/ui/menu.vue
index c17cc43ce1..0e237432ae 100644
--- a/packages/client/src/components/ui/menu.vue
+++ b/packages/client/src/components/ui/menu.vue
@@ -1,9 +1,9 @@
<template>
-<div class="rrevdjwt" :class="{ center: align === 'center' }"
+<div ref="items" v-hotkey="keymap"
+ class="rrevdjwt"
+ :class="{ center: align === 'center' }"
:style="{ width: width ? width + 'px' : null }"
- ref="items"
@contextmenu.self="e => e.preventDefault()"
- v-hotkey="keymap"
>
<template v-for="(item, i) in items2">
<div v-if="item === null" class="divider"></div>
@@ -13,22 +13,22 @@
<span v-else-if="item.type === 'pending'" :tabindex="i" class="pending item">
<span><MkEllipsis/></span>
</span>
- <MkA v-else-if="item.type === 'link'" :to="item.to" @click.passive="close()" :tabindex="i" class="_button item">
+ <MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button item" @click.passive="close()">
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
<span>{{ item.text }}</span>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</MkA>
- <a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" @click="close()" :tabindex="i" class="_button item">
+ <a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button item" @click="close()">
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
<span>{{ item.text }}</span>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</a>
- <button v-else-if="item.type === 'user'" @click="clicked(item.action, $event)" :tabindex="i" class="_button item">
+ <button v-else-if="item.type === 'user'" :tabindex="i" class="_button item" @click="clicked(item.action, $event)">
<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</button>
- <button v-else @click="clicked(item.action, $event)" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active">
+ <button v-else :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)">
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
<span>{{ item.text }}</span>
diff --git a/packages/client/src/components/ui/modal-window.vue b/packages/client/src/components/ui/modal-window.vue
index da98192b87..61c2afe1ec 100644
--- a/packages/client/src/components/ui/modal-window.vue
+++ b/packages/client/src/components/ui/modal-window.vue
@@ -1,20 +1,20 @@
<template>
<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
- <div class="ebkgoccj _window _narrow_" @keydown="onKeydown" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }">
+ <div class="ebkgoccj _window _narrow_" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }" @keydown="onKeydown">
<div class="header">
- <button class="_button" v-if="withOkButton" @click="$emit('close')"><i class="fas fa-times"></i></button>
+ <button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="fas fa-times"></i></button>
<span class="title">
<slot name="header"></slot>
</span>
- <button class="_button" v-if="!withOkButton" @click="$emit('close')"><i class="fas fa-times"></i></button>
- <button class="_button" v-if="withOkButton" @click="$emit('ok')" :disabled="okButtonDisabled"><i class="fas fa-check"></i></button>
+ <button v-if="!withOkButton" class="_button" @click="$emit('close')"><i class="fas fa-times"></i></button>
+ <button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="fas fa-check"></i></button>
</div>
- <div class="body" v-if="padding">
+ <div v-if="padding" class="body">
<div class="_section">
<slot></slot>
</div>
</div>
- <div class="body" v-else>
+ <div v-else class="body">
<slot></slot>
</div>
</div>
diff --git a/packages/client/src/components/ui/modal.vue b/packages/client/src/components/ui/modal.vue
index 33fcdb687f..d1884f8dfb 100644
--- a/packages/client/src/components/ui/modal.vue
+++ b/packages/client/src/components/ui/modal.vue
@@ -1,8 +1,8 @@
<template>
<transition :name="$store.state.animation ? popup ? 'modal-popup' : 'modal' : ''" :duration="$store.state.animation ? popup ? 500 : 300 : 0" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
- <div v-show="manualShowing != null ? manualShowing : showing" class="qzhlnise" :class="{ front }" v-hotkey.global="keymap" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
+ <div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" class="qzhlnise" :class="{ front }" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
<div class="bg _modalBg" @click="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
- <div class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick" ref="content">
+ <div ref="content" class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick">
<slot></slot>
</div>
</div>
diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index f6a457d88f..00200efd3c 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -4,14 +4,14 @@
<MkError v-else-if="error" @retry="init()"/>
- <div class="empty" v-else-if="empty" key="_empty_">
+ <div v-else-if="empty" key="_empty_" class="empty">
<slot name="empty"></slot>
</div>
<div v-else class="cxiknjgy">
<slot :items="items"></slot>
- <div class="more _gap" v-show="more" key="_more_">
- <MkButton class="button" v-appear="($store.state.enableInfiniteScroll && !disableAutoLoad) ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary>
+ <div v-show="more" key="_more_" class="more _gap">
+ <MkButton v-appear="($store.state.enableInfiniteScroll && !disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</MkButton>
diff --git a/packages/client/src/components/ui/popup-menu.vue b/packages/client/src/components/ui/popup-menu.vue
index 3ff4c658b1..ae2c044282 100644
--- a/packages/client/src/components/ui/popup-menu.vue
+++ b/packages/client/src/components/ui/popup-menu.vue
@@ -1,6 +1,6 @@
<template>
<MkPopup ref="popup" :src="src" @closed="$emit('closed')">
- <MkMenu :items="items" :align="align" :width="width" @close="$refs.popup.close()" class="_popup _shadow"/>
+ <MkMenu :items="items" :align="align" :width="width" class="_popup _shadow" @close="$refs.popup.close()"/>
</MkPopup>
</template>
diff --git a/packages/client/src/components/ui/popup.vue b/packages/client/src/components/ui/popup.vue
index 001ecbb47d..77e928542d 100644
--- a/packages/client/src/components/ui/popup.vue
+++ b/packages/client/src/components/ui/popup.vue
@@ -1,6 +1,6 @@
<template>
<transition :name="$store.state.animation ? 'popup-menu' : ''" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
- <div v-show="manualShowing != null ? manualShowing : showing" class="ccczpooj" :class="{ front, fixed, top: position === 'top' }" ref="content" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
+ <div v-show="manualShowing != null ? manualShowing : showing" ref="content" class="ccczpooj" :class="{ front, fixed, top: position === 'top' }" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
<slot></slot>
</div>
</transition>
diff --git a/packages/client/src/components/ui/super-menu.vue b/packages/client/src/components/ui/super-menu.vue
index 195cc57326..b438d5dbc8 100644
--- a/packages/client/src/components/ui/super-menu.vue
+++ b/packages/client/src/components/ui/super-menu.vue
@@ -1,7 +1,7 @@
<template>
<div class="rrevdjwu" :class="{ grid }">
- <div class="group" v-for="group in def">
- <div class="title" v-if="group.title">{{ group.title }}</div>
+ <div v-for="group in def" class="group">
+ <div v-if="group.title" class="title">{{ group.title }}</div>
<div class="items">
<template v-for="(item, i) in group.items">
@@ -9,7 +9,7 @@
<i v-if="item.icon" class="icon fa-fw" :class="item.icon"></i>
<span class="text">{{ item.text }}</span>
</a>
- <button v-else-if="item.type === 'button'" @click="ev => item.action(ev)" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active">
+ <button v-else-if="item.type === 'button'" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)">
<i v-if="item.icon" class="icon fa-fw" :class="item.icon"></i>
<span class="text">{{ item.text }}</span>
</button>
diff --git a/packages/client/src/components/ui/tooltip.vue b/packages/client/src/components/ui/tooltip.vue
index c003895c14..dbc1a1c9b7 100644
--- a/packages/client/src/components/ui/tooltip.vue
+++ b/packages/client/src/components/ui/tooltip.vue
@@ -1,6 +1,6 @@
<template>
<transition name="tooltip" appear @after-leave="$emit('closed')">
- <div class="buebdbiu _acrylic _shadow" v-show="showing" ref="content" :style="{ maxWidth: maxWidth + 'px' }">
+ <div v-show="showing" ref="content" class="buebdbiu _acrylic _shadow" :style="{ maxWidth: maxWidth + 'px' }">
<slot>{{ text }}</slot>
</div>
</transition>
diff --git a/packages/client/src/components/ui/window.vue b/packages/client/src/components/ui/window.vue
index b7093b6641..5019396b36 100644
--- a/packages/client/src/components/ui/window.vue
+++ b/packages/client/src/components/ui/window.vue
@@ -1,6 +1,6 @@
<template>
<transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
- <div class="ebkgocck" :class="{ front }" v-if="showing">
+ <div v-if="showing" class="ebkgocck" :class="{ front }">
<div class="body _window _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
<span class="left">
@@ -14,12 +14,12 @@
<button v-if="closeButton" class="_button" @click="close()"><i class="fas fa-times"></i></button>
</span>
</div>
- <div class="body" v-if="padding">
+ <div v-if="padding" class="body">
<div class="_section">
<slot></slot>
</div>
</div>
- <div class="body" v-else>
+ <div v-else class="body">
<slot></slot>
</div>
</div>
diff --git a/packages/client/src/components/url-preview-popup.vue b/packages/client/src/components/url-preview-popup.vue
index 0a402f793f..65076c6dda 100644
--- a/packages/client/src/components/url-preview-popup.vue
+++ b/packages/client/src/components/url-preview-popup.vue
@@ -1,7 +1,7 @@
<template>
<div class="fgmtyycl" :style="{ top: top + 'px', left: left + 'px' }">
<transition name="zoom" @after-leave="$emit('closed')">
- <MkUrlPreview class="_popup _shadow" :url="url" v-if="showing"/>
+ <MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/>
</transition>
</div>
</template>
diff --git a/packages/client/src/components/url-preview.vue b/packages/client/src/components/url-preview.vue
index 0826ba5ccf..fe88985a62 100644
--- a/packages/client/src/components/url-preview.vue
+++ b/packages/client/src/components/url-preview.vue
@@ -1,16 +1,16 @@
<template>
<div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
- <button class="disablePlayer" @click="playerEnabled = false" :title="$ts.disablePlayer"><i class="fas fa-times"></i></button>
+ <button class="disablePlayer" :title="$ts.disablePlayer" @click="playerEnabled = false"><i class="fas fa-times"></i></button>
<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen />
</div>
-<div v-else-if="tweetId && tweetExpanded" class="twitter" ref="twitter">
+<div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter">
<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', left: `${tweetLeft}px`, width: `${tweetLeft < 0 ? 'auto' : '100%'}`, height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&hideCard=false&hideThread=false&lang=en&theme=${$store.state.darkMode ? 'dark' : 'light'}&id=${tweetId}`"></iframe>
</div>
-<div v-else class="mk-url-preview" v-size="{ max: [400, 350] }">
+<div v-else v-size="{ max: [400, 350] }" class="mk-url-preview">
<transition name="zoom" mode="out-in">
- <component :is="self ? 'MkA' : 'a'" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url" v-if="!fetching">
- <div class="thumbnail" v-if="thumbnail" :style="`background-image: url('${thumbnail}')`">
- <button class="_button" v-if="!playerEnabled && player.url" @click.prevent="playerEnabled = true" :title="$ts.enablePlayer"><i class="fas fa-play-circle"></i></button>
+ <component :is="self ? 'MkA' : 'a'" v-if="!fetching" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
+ <div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
+ <button v-if="!playerEnabled && player.url" class="_button" :title="$ts.enablePlayer" @click.prevent="playerEnabled = true"><i class="fas fa-play-circle"></i></button>
</div>
<article>
<header>
@@ -18,13 +18,13 @@
</header>
<p v-if="description" :title="description">{{ description.length > 85 ? description.slice(0, 85) + '…' : description }}</p>
<footer>
- <img class="icon" v-if="icon" :src="icon"/>
+ <img v-if="icon" class="icon" :src="icon"/>
<p :title="sitename">{{ sitename }}</p>
</footer>
</article>
</component>
</transition>
- <div class="expandTweet" v-if="tweetId">
+ <div v-if="tweetId" class="expandTweet">
<a @click="tweetExpanded = true">
<i class="fab fa-twitter"></i> {{ $ts.expandTweet }}
</a>
@@ -122,6 +122,10 @@ export default defineComponent({
if (areaWidth && areaWidth < 300) this.tweetLeft = areaWidth - 241;
},
+ beforeUnmount() {
+ (window as any).removeEventListener('message', this.adjustTweetHeight);
+ },
+
methods: {
adjustTweetHeight(message: any) {
if (message.origin !== 'https://platform.twitter.com') return;
@@ -132,10 +136,6 @@ export default defineComponent({
if (height) this.tweetHeight = height;
},
},
-
- beforeUnmount() {
- (window as any).removeEventListener('message', this.adjustTweetHeight);
- },
});
</script>
diff --git a/packages/client/src/components/user-info.vue b/packages/client/src/components/user-info.vue
index ce82443b84..779a71358d 100644
--- a/packages/client/src/components/user-info.vue
+++ b/packages/client/src/components/user-info.vue
@@ -7,7 +7,7 @@
<p class="username"><MkAcct :user="user"/></p>
</div>
<div class="description">
- <div class="mfm" v-if="user.description">
+ <div v-if="user.description" class="mfm">
<Mfm :text="user.description" :author="user" :i="$i" :custom-emojis="user.emojis"/>
</div>
<span v-else style="opacity: 0.7;">{{ $ts.noAccountDescription }}</span>
@@ -23,7 +23,7 @@
<p>{{ $ts.followers }}</p><span>{{ user.followersCount }}</span>
</div>
</div>
- <MkFollowButton class="koudoku-button" v-if="$i && user.id != $i.id" :user="user" mini/>
+ <MkFollowButton v-if="$i && user.id != $i.id" class="koudoku-button" :user="user" mini/>
</div>
</template>
diff --git a/packages/client/src/components/user-list.vue b/packages/client/src/components/user-list.vue
index 733dbe0ad7..2148dab608 100644
--- a/packages/client/src/components/user-list.vue
+++ b/packages/client/src/components/user-list.vue
@@ -2,13 +2,13 @@
<MkError v-if="error" @retry="init()"/>
<div v-else class="efvhhmdq _isolated">
- <div class="no-users" v-if="empty">
+ <div v-if="empty" class="no-users">
<p>{{ $ts.noUsers }}</p>
</div>
<div class="users">
- <MkUserInfo class="user" v-for="user in users" :user="user" :key="user.id"/>
+ <MkUserInfo v-for="user in users" :key="user.id" class="user" :user="user"/>
</div>
- <button class="more" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :class="{ fetching: moreFetching }" v-show="more" :disabled="moreFetching">
+ <button v-show="more" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" class="more" :class="{ fetching: moreFetching }" :disabled="moreFetching" @click="fetchMore">
<template v-if="moreFetching"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>{{ moreFetching ? $ts.loading : $ts.loadMore }}
</button>
</div>
diff --git a/packages/client/src/components/user-online-indicator.vue b/packages/client/src/components/user-online-indicator.vue
index afaf0e8736..93e9dea57b 100644
--- a/packages/client/src/components/user-online-indicator.vue
+++ b/packages/client/src/components/user-online-indicator.vue
@@ -1,5 +1,5 @@
<template>
-<div class="fzgwjkgc" :class="user.onlineStatus" v-tooltip="text"></div>
+<div v-tooltip="text" class="fzgwjkgc" :class="user.onlineStatus"></div>
</template>
<script lang="ts">
diff --git a/packages/client/src/components/user-preview.vue b/packages/client/src/components/user-preview.vue
index f7fd3f6b64..5289ce54d7 100644
--- a/packages/client/src/components/user-preview.vue
+++ b/packages/client/src/components/user-preview.vue
@@ -22,7 +22,7 @@
<p>{{ $ts.followers }}</p><span>{{ user.followersCount }}</span>
</div>
</div>
- <MkFollowButton class="koudoku-button" v-if="$i && user.id != $i.id" :user="user" mini/>
+ <MkFollowButton v-if="$i && user.id != $i.id" class="koudoku-button" :user="user" mini/>
</div>
<div v-else>
<MkLoading/>
diff --git a/packages/client/src/components/user-select-dialog.vue b/packages/client/src/components/user-select-dialog.vue
index 80f6293563..ba2975478b 100644
--- a/packages/client/src/components/user-select-dialog.vue
+++ b/packages/client/src/components/user-select-dialog.vue
@@ -11,7 +11,7 @@
<div class="tbhwbxda _monolithic_">
<div class="_section">
<div class="_inputSplit">
- <MkInput v-model="username" class="input" @update:modelValue="search" ref="username">
+ <MkInput ref="username" v-model="username" class="input" @update:modelValue="search">
<template #label>{{ $ts.username }}</template>
<template #prefix>@</template>
</MkInput>
@@ -21,9 +21,9 @@
</MkInput>
</div>
</div>
- <div class="_section result" v-if="username != '' || host != ''" :class="{ hit: users.length > 0 }">
- <div class="users" v-if="users.length > 0">
- <div class="user" v-for="user in users" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
+ <div v-if="username != '' || host != ''" class="_section result" :class="{ hit: users.length > 0 }">
+ <div v-if="users.length > 0" class="users">
+ <div v-for="user in users" :key="user.id" class="user" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
<div class="body">
<MkUserName :user="user" class="name"/>
@@ -35,9 +35,9 @@
<span>{{ $ts.noUsers }}</span>
</div>
</div>
- <div class="_section recent" v-if="username == '' && host == ''">
+ <div v-if="username == '' && host == ''" class="_section recent">
<div class="users">
- <div class="user" v-for="user in recentUsers" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
+ <div v-for="user in recentUsers" :key="user.id" class="user" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
<div class="body">
<MkUserName :user="user" class="name"/>
diff --git a/packages/client/src/components/visibility-picker.vue b/packages/client/src/components/visibility-picker.vue
index 7a811b42f7..c75202d958 100644
--- a/packages/client/src/components/visibility-picker.vue
+++ b/packages/client/src/components/visibility-picker.vue
@@ -1,28 +1,28 @@
<template>
<MkModal ref="modal" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')">
<div class="gqyayizv _popup">
- <button class="_button" @click="choose('public')" :class="{ active: v == 'public' }" data-index="1" key="public">
+ <button key="public" class="_button" :class="{ active: v == 'public' }" data-index="1" @click="choose('public')">
<div><i class="fas fa-globe"></i></div>
<div>
<span>{{ $ts._visibility.public }}</span>
<span>{{ $ts._visibility.publicDescription }}</span>
</div>
</button>
- <button class="_button" @click="choose('home')" :class="{ active: v == 'home' }" data-index="2" key="home">
+ <button key="home" class="_button" :class="{ active: v == 'home' }" data-index="2" @click="choose('home')">
<div><i class="fas fa-home"></i></div>
<div>
<span>{{ $ts._visibility.home }}</span>
<span>{{ $ts._visibility.homeDescription }}</span>
</div>
</button>
- <button class="_button" @click="choose('followers')" :class="{ active: v == 'followers' }" data-index="3" key="followers">
+ <button key="followers" class="_button" :class="{ active: v == 'followers' }" data-index="3" @click="choose('followers')">
<div><i class="fas fa-unlock"></i></div>
<div>
<span>{{ $ts._visibility.followers }}</span>
<span>{{ $ts._visibility.followersDescription }}</span>
</div>
</button>
- <button :disabled="localOnly" class="_button" @click="choose('specified')" :class="{ active: v == 'specified' }" data-index="4" key="specified">
+ <button key="specified" :disabled="localOnly" class="_button" :class="{ active: v == 'specified' }" data-index="4" @click="choose('specified')">
<div><i class="fas fa-envelope"></i></div>
<div>
<span>{{ $ts._visibility.specified }}</span>
@@ -30,7 +30,7 @@
</div>
</button>
<div class="divider"></div>
- <button class="_button localOnly" @click="localOnly = !localOnly" :class="{ active: localOnly }" data-index="5" key="localOnly">
+ <button key="localOnly" class="_button localOnly" :class="{ active: localOnly }" data-index="5" @click="localOnly = !localOnly">
<div><i class="fas fa-biohazard"></i></div>
<div>
<span>{{ $ts._visibility.localOnly }}</span>
diff --git a/packages/client/src/components/waiting-dialog.vue b/packages/client/src/components/waiting-dialog.vue
index 35a760ea41..206f7d0c5a 100644
--- a/packages/client/src/components/waiting-dialog.vue
+++ b/packages/client/src/components/waiting-dialog.vue
@@ -3,7 +3,7 @@
<div class="iuyakobc" :class="{ iconOnly: (text == null) || success }">
<i v-if="success" class="fas fa-check icon success"></i>
<i v-else class="fas fa-spinner fa-pulse icon waiting"></i>
- <div class="text" v-if="text && !success">{{ text }}<MkEllipsis/></div>
+ <div v-if="text && !success" class="text">{{ text }}<MkEllipsis/></div>
</div>
</MkModal>
</template>
diff --git a/packages/client/src/components/widgets.vue b/packages/client/src/components/widgets.vue
index 8aec77796d..12f7129253 100644
--- a/packages/client/src/components/widgets.vue
+++ b/packages/client/src/components/widgets.vue
@@ -4,9 +4,9 @@
<header>
<MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)">
<template #label>{{ $ts.selectWidget }}</template>
- <option v-for="widget in widgetDefs" :value="widget" :key="widget">{{ $t(`_widgets.${widget}`) }}</option>
+ <option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ $t(`_widgets.${widget}`) }}</option>
</MkSelect>
- <MkButton inline @click="addWidget" primary><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
+ <MkButton inline primary @click="addWidget"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
<MkButton inline @click="$emit('exit')">{{ $ts.close }}</MkButton>
</header>
<XDraggable
@@ -23,7 +23,7 @@
</template>
</XDraggable>
</template>
- <component v-else class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" @updateProps="updateWidget(widget.id, $event)"/>
+ <component :is="`mkw-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" class="widget" :widget="widget" @updateProps="updateWidget(widget.id, $event)"/>
</div>
</template>
diff --git a/packages/client/src/pages/_error_.vue b/packages/client/src/pages/_error_.vue
index c549751a27..2f8f08b5cf 100644
--- a/packages/client/src/pages/_error_.vue
+++ b/packages/client/src/pages/_error_.vue
@@ -1,7 +1,7 @@
<template>
<MkLoading v-if="!loaded" />
<transition :name="$store.state.animation ? 'zoom' : ''" appear>
- <div class="mjndxjch" v-show="loaded">
+ <div v-show="loaded" class="mjndxjch">
<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
<p><b><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</b></p>
<p v-if="version === meta.version">{{ $ts.pageLoadErrorDescription }}</p>
@@ -9,7 +9,7 @@
<template v-else>
<p>{{ $ts.newVersionOfClientAvailable }}</p>
<p>{{ $ts.youShouldUpgradeClient }}</p>
- <MkButton @click="reload" class="button primary">{{ $ts.reload }}</MkButton>
+ <MkButton class="button primary" @click="reload">{{ $ts.reload }}</MkButton>
</template>
<p><MkA to="/docs/general/troubleshooting" class="_link">{{ $ts.troubleshooting }}</MkA></p>
<p v-if="error" class="error">ERROR: {{ error }}</p>
diff --git a/packages/client/src/pages/about-misskey.vue b/packages/client/src/pages/about-misskey.vue
index c428c1ad83..c5c4ce9ef2 100644
--- a/packages/client/src/pages/about-misskey.vue
+++ b/packages/client/src/pages/about-misskey.vue
@@ -3,11 +3,11 @@
<FormBase class="znqjceqz">
<div id="debug"></div>
<section class="_debobigegoItem about">
- <div class="_debobigegoPanel panel" :class="{ playing: easterEggEngine != null }" ref="about">
- <img src="/client-assets/about-icon.png" alt="" class="icon" @load="iconLoaded" draggable="false" @click="gravity"/>
+ <div ref="about" class="_debobigegoPanel panel" :class="{ playing: easterEggEngine != null }">
+ <img src="/client-assets/about-icon.png" alt="" class="icon" draggable="false" @load="iconLoaded" @click="gravity"/>
<div class="misskey">Misskey</div>
<div class="version">v{{ version }}</div>
- <span class="emoji" v-for="emoji in easterEggEmojis" :key="emoji.id" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"><MkEmoji class="emoji" :emoji="emoji.emoji" :custom-emojis="$instance.emojis" :is-reaction="false" :normal="true" :no-style="true"/></span>
+ <span v-for="emoji in easterEggEmojis" :key="emoji.id" class="emoji" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"><MkEmoji class="emoji" :emoji="emoji.emoji" :custom-emojis="$instance.emojis" :is-reaction="false" :normal="true" :no-style="true"/></span>
</div>
</section>
<section class="_debobigegoItem" style="text-align: center; padding: 0 16px;">
diff --git a/packages/client/src/pages/admin/abuses.vue b/packages/client/src/pages/admin/abuses.vue
index ca94737781..ff1c4c57fc 100644
--- a/packages/client/src/pages/admin/abuses.vue
+++ b/packages/client/src/pages/admin/abuses.vue
@@ -33,8 +33,8 @@
</div>
-->
- <MkPagination :pagination="pagination" #default="{items}" ref="reports" style="margin-top: var(--margin);">
- <div class="bcekxzvu _card _gap" v-for="report in items" :key="report.id">
+ <MkPagination #default="{items}" ref="reports" :pagination="pagination" style="margin-top: var(--margin);">
+ <div v-for="report in items" :key="report.id" class="bcekxzvu _card _gap">
<div class="_content target">
<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true"/>
<div class="info">
@@ -52,7 +52,7 @@
</div>
<div class="_footer">
<div v-if="report.assignee">Assignee: <MkAcct :user="report.assignee"/></div>
- <MkButton @click="resolve(report)" primary v-if="!report.resolved">{{ $ts.abuseMarkAsResolved }}</MkButton>
+ <MkButton v-if="!report.resolved" primary @click="resolve(report)">{{ $ts.abuseMarkAsResolved }}</MkButton>
</div>
</div>
</MkPagination>
diff --git a/packages/client/src/pages/admin/ads.vue b/packages/client/src/pages/admin/ads.vue
index 5652080cd7..c802db8ac5 100644
--- a/packages/client/src/pages/admin/ads.vue
+++ b/packages/client/src/pages/admin/ads.vue
@@ -1,6 +1,6 @@
<template>
<div class="uqshojas">
- <section class="_card _gap ads" v-for="ad in ads">
+ <section v-for="ad in ads" class="_card _gap ads">
<div class="_content ad">
<MkAd v-if="ad.url" :specify="ad"/>
<MkInput v-model="ad.url" type="url">
@@ -32,8 +32,8 @@
<template #label>{{ $ts.memo }}</template>
</MkTextarea>
<div class="buttons">
- <MkButton class="button" inline @click="save(ad)" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
- <MkButton class="button" inline @click="remove(ad)" danger><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
+ <MkButton class="button" inline primary @click="save(ad)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+ <MkButton class="button" inline danger @click="remove(ad)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
</div>
</div>
</section>
diff --git a/packages/client/src/pages/admin/announcements.vue b/packages/client/src/pages/admin/announcements.vue
index 301b0f9f5f..3614cb1441 100644
--- a/packages/client/src/pages/admin/announcements.vue
+++ b/packages/client/src/pages/admin/announcements.vue
@@ -1,6 +1,6 @@
<template>
<div class="ztgjmzrw">
- <section class="_card _gap announcements" v-for="announcement in announcements">
+ <section v-for="announcement in announcements" class="_card _gap announcements">
<div class="_content announcement">
<MkInput v-model="announcement.title">
<template #label>{{ $ts.title }}</template>
@@ -13,7 +13,7 @@
</MkInput>
<p v-if="announcement.reads">{{ $t('nUsersRead', { n: announcement.reads }) }}</p>
<div class="buttons">
- <MkButton class="button" inline @click="save(announcement)" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+ <MkButton class="button" inline primary @click="save(announcement)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
<MkButton class="button" inline @click="remove(announcement)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
</div>
</div>
diff --git a/packages/client/src/pages/admin/bot-protection.vue b/packages/client/src/pages/admin/bot-protection.vue
index 8f7873baa3..5a97083841 100644
--- a/packages/client/src/pages/admin/bot-protection.vue
+++ b/packages/client/src/pages/admin/bot-protection.vue
@@ -9,7 +9,7 @@
</FormRadios>
<template v-if="provider === 'hcaptcha'">
- <div class="_debobigegoItem _debobigegoNoConcat" v-sticky-container>
+ <div v-sticky-container class="_debobigegoItem _debobigegoNoConcat">
<div class="_debobigegoLabel">hCaptcha</div>
<div class="main">
<FormInput v-model="hcaptchaSiteKey">
@@ -22,7 +22,7 @@
</FormInput>
</div>
</div>
- <div class="_debobigegoItem _debobigegoNoConcat" v-sticky-container>
+ <div v-sticky-container class="_debobigegoItem _debobigegoNoConcat">
<div class="_debobigegoLabel">{{ $ts.preview }}</div>
<div class="_debobigegoPanel" style="padding: var(--debobigegoContentHMargin);">
<MkCaptcha provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/>
@@ -30,7 +30,7 @@
</div>
</template>
<template v-else-if="provider === 'recaptcha'">
- <div class="_debobigegoItem _debobigegoNoConcat" v-sticky-container>
+ <div v-sticky-container class="_debobigegoItem _debobigegoNoConcat">
<div class="_debobigegoLabel">reCAPTCHA</div>
<div class="main">
<FormInput v-model="recaptchaSiteKey">
@@ -43,7 +43,7 @@
</FormInput>
</div>
</div>
- <div v-if="recaptchaSiteKey" class="_debobigegoItem _debobigegoNoConcat" v-sticky-container>
+ <div v-if="recaptchaSiteKey" v-sticky-container class="_debobigegoItem _debobigegoNoConcat">
<div class="_debobigegoLabel">{{ $ts.preview }}</div>
<div class="_debobigegoPanel" style="padding: var(--debobigegoContentHMargin);">
<MkCaptcha provider="recaptcha" :sitekey="recaptchaSiteKey"/>
@@ -51,7 +51,7 @@
</div>
</template>
- <FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense>
</FormBase>
</template>
diff --git a/packages/client/src/pages/admin/database.vue b/packages/client/src/pages/admin/database.vue
index b550831e02..b09f1ad867 100644
--- a/packages/client/src/pages/admin/database.vue
+++ b/packages/client/src/pages/admin/database.vue
@@ -1,6 +1,6 @@
<template>
<FormBase>
- <FormSuspense :p="databasePromiseFactory" v-slot="{ result: database }">
+ <FormSuspense v-slot="{ result: database }" :p="databasePromiseFactory">
<FormGroup v-for="table in database" :key="table[0]">
<template #label>{{ table[0] }}</template>
<FormKeyValueView>
diff --git a/packages/client/src/pages/admin/email-settings.vue b/packages/client/src/pages/admin/email-settings.vue
index aad971830e..873a853918 100644
--- a/packages/client/src/pages/admin/email-settings.vue
+++ b/packages/client/src/pages/admin/email-settings.vue
@@ -8,7 +8,7 @@
<span>{{ $ts.emailAddress }}</span>
</FormInput>
- <div class="_debobigegoItem _debobigegoNoConcat" v-sticky-container>
+ <div v-sticky-container class="_debobigegoItem _debobigegoNoConcat">
<div class="_debobigegoLabel">{{ $ts.smtpConfig }}</div>
<div class="main">
<FormInput v-model="smtpHost">
@@ -31,7 +31,7 @@
<FormButton @click="testEmail">{{ $ts.testEmail }}</FormButton>
</template>
- <FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense>
</FormBase>
</template>
diff --git a/packages/client/src/pages/admin/emoji-edit-dialog.vue b/packages/client/src/pages/admin/emoji-edit-dialog.vue
index dcc5a9cbee..a45d92fa16 100644
--- a/packages/client/src/pages/admin/emoji-edit-dialog.vue
+++ b/packages/client/src/pages/admin/emoji-edit-dialog.vue
@@ -11,13 +11,13 @@
<div class="_monolithic_">
<div class="yigymqpb _section">
<img :src="emoji.url" class="img"/>
- <MkInput class="_formBlock" v-model="name">
+ <MkInput v-model="name" class="_formBlock">
<template #label>{{ $ts.name }}</template>
</MkInput>
- <MkInput class="_formBlock" v-model="category" :datalist="categories">
+ <MkInput v-model="category" class="_formBlock" :datalist="categories">
<template #label>{{ $ts.category }}</template>
</MkInput>
- <MkInput class="_formBlock" v-model="aliases">
+ <MkInput v-model="aliases" class="_formBlock">
<template #label>{{ $ts.tags }}</template>
<template #caption>{{ $ts.setMultipleBySeparatingWithSpace }}</template>
</MkInput>
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index c9ba193dd1..6f9a955da2 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -1,15 +1,15 @@
<template>
<div class="ogwlenmc">
- <div class="local" v-if="tab === 'local'">
+ <div v-if="tab === 'local'" class="local">
<MkInput v-model="query" :debounce="true" type="search" style="margin: var(--margin);">
<template #prefix><i class="fas fa-search"></i></template>
<template #label>{{ $ts.search }}</template>
</MkInput>
- <MkPagination :pagination="pagination" ref="emojis">
+ <MkPagination ref="emojis" :pagination="pagination">
<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
<template #default="{items}">
<div class="ldhfsamy">
- <button class="emoji _panel _button" v-for="emoji in items" :key="emoji.id" @click="edit(emoji)">
+ <button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="edit(emoji)">
<img :src="emoji.url" class="img" :alt="emoji.name"/>
<div class="body">
<div class="name _monospace">{{ emoji.name }}</div>
@@ -21,7 +21,7 @@
</MkPagination>
</div>
- <div class="remote" v-else-if="tab === 'remote'">
+ <div v-else-if="tab === 'remote'" class="remote">
<MkInput v-model="queryRemote" :debounce="true" type="search" style="margin: var(--margin);">
<template #prefix><i class="fas fa-search"></i></template>
<template #label>{{ $ts.search }}</template>
@@ -29,11 +29,11 @@
<MkInput v-model="host" :debounce="true" style="margin: var(--margin);">
<template #label>{{ $ts.host }}</template>
</MkInput>
- <MkPagination :pagination="remotePagination" ref="remoteEmojis">
+ <MkPagination ref="remoteEmojis" :pagination="remotePagination">
<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
<template #default="{items}">
<div class="ldhfsamy">
- <div class="emoji _panel _button" v-for="emoji in items" :key="emoji.id" @click="remoteMenu(emoji, $event)">
+ <div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
<img :src="emoji.url" class="img" :alt="emoji.name"/>
<div class="body">
<div class="name _monospace">{{ emoji.name }}</div>
diff --git a/packages/client/src/pages/admin/file-dialog.vue b/packages/client/src/pages/admin/file-dialog.vue
index 0d36276553..f0774b2946 100644
--- a/packages/client/src/pages/admin/file-dialog.vue
+++ b/packages/client/src/pages/admin/file-dialog.vue
@@ -4,8 +4,8 @@
@close="$refs.dialog.close()"
@closed="$emit('closed')"
>
- <template #header v-if="file">{{ file.name }}</template>
- <div class="cxqhhsmd" v-if="file">
+ <template v-if="file" #header>{{ file.name }}</template>
+ <div v-if="file" class="cxqhhsmd">
<div class="_section">
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
<div class="info">
@@ -16,7 +16,7 @@
</div>
<div class="_section">
<div class="_content">
- <MkSwitch @update:modelValue="toggleIsSensitive" v-model="isSensitive">NSFW</MkSwitch>
+ <MkSwitch v-model="isSensitive" @update:modelValue="toggleIsSensitive">NSFW</MkSwitch>
</div>
</div>
<div class="_section">
@@ -25,7 +25,7 @@
<MkButton full danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
</div>
</div>
- <div class="_section" v-if="info">
+ <div v-if="info" class="_section">
<details class="_content rawdata">
<pre><code>{{ JSON.stringify(info, null, 2) }}</code></pre>
</details>
diff --git a/packages/client/src/pages/admin/files-settings.vue b/packages/client/src/pages/admin/files-settings.vue
index 03d8f3de1f..df25bd0fb2 100644
--- a/packages/client/src/pages/admin/files-settings.vue
+++ b/packages/client/src/pages/admin/files-settings.vue
@@ -23,7 +23,7 @@
<template #desc>{{ $ts.inMb }}</template>
</FormInput>
- <FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense>
</FormBase>
</template>
diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue
index 30bef13356..a6b0f8e59e 100644
--- a/packages/client/src/pages/admin/files.vue
+++ b/packages/client/src/pages/admin/files.vue
@@ -3,10 +3,10 @@
<MkContainer :foldable="true" class="lookup">
<template #header><i class="fas fa-search"></i> {{ $ts.lookup }}</template>
<div class="xrmjdkdw-lookup">
- <MkInput class="item" v-model="q" type="text" @enter="find()">
+ <MkInput v-model="q" class="item" type="text" @enter="find()">
<template #label>{{ $ts.fileIdOrUrl }}</template>
</MkInput>
- <MkButton @click="find()" primary><i class="fas fa-search"></i> {{ $ts.lookup }}</MkButton>
+ <MkButton primary @click="find()"><i class="fas fa-search"></i> {{ $ts.lookup }}</MkButton>
</div>
</MkContainer>
@@ -28,8 +28,8 @@
<template #label>MIME type</template>
</MkInput>
</div>
- <MkPagination :pagination="pagination" #default="{items}" class="urempief" ref="files">
- <button class="file _panel _button _gap" v-for="file in items" :key="file.id" @click="show(file, $event)">
+ <MkPagination #default="{items}" ref="files" :pagination="pagination" class="urempief">
+ <button v-for="file in items" :key="file.id" class="file _panel _button _gap" @click="show(file, $event)">
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
<div class="body">
<div>
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index 24ca2f65f2..e363d1bd03 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -1,6 +1,6 @@
<template>
-<div class="hiyeyicy" :class="{ wide: !narrow }" ref="el">
- <div class="nav" v-if="!narrow || page == null">
+<div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
+ <div v-if="!narrow || page == null" class="nav">
<MkHeader :info="header"></MkHeader>
<MkSpacer :content-max="700">
@@ -19,7 +19,7 @@
<div class="main">
<MkStickyContainer>
<template #header><MkHeader v-if="childInfo && !childInfo.hideHeader" :info="childInfo"/></template>
- <component :is="component" :key="page" @info="onInfo" v-bind="pageProps"/>
+ <component :is="component" :key="page" v-bind="pageProps" @info="onInfo"/>
</MkStickyContainer>
</div>
</div>
diff --git a/packages/client/src/pages/admin/instance-block.vue b/packages/client/src/pages/admin/instance-block.vue
index f5b249698d..2e899de687 100644
--- a/packages/client/src/pages/admin/instance-block.vue
+++ b/packages/client/src/pages/admin/instance-block.vue
@@ -6,7 +6,7 @@
<template #desc>{{ $ts.blockedInstancesDescription }}</template>
</FormTextarea>
- <FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense>
</FormBase>
</template>
diff --git a/packages/client/src/pages/admin/instance.vue b/packages/client/src/pages/admin/instance.vue
index 26eefe243f..51fcb8675a 100644
--- a/packages/client/src/pages/admin/instance.vue
+++ b/packages/client/src/pages/admin/instance.vue
@@ -106,11 +106,11 @@
<MkSwitch :model-value="isBlocked" class="switch" @update:modelValue="changeBlock">{{ $ts.blockThisInstance }}</MkSwitch>
<details>
<summary>{{ $ts.deleteAllFiles }}</summary>
- <MkButton @click="deleteAllFiles()" style="margin: 0.5em 0 0.5em 0;"><i class="fas fa-trash-alt"></i> {{ $ts.deleteAllFiles }}</MkButton>
+ <MkButton style="margin: 0.5em 0 0.5em 0;" @click="deleteAllFiles()"><i class="fas fa-trash-alt"></i> {{ $ts.deleteAllFiles }}</MkButton>
</details>
<details>
<summary>{{ $ts.removeAllFollowing }}</summary>
- <MkButton @click="removeAllFollowing()" style="margin: 0.5em 0 0.5em 0;"><i class="fas fa-minus-circle"></i> {{ $ts.removeAllFollowing }}</MkButton>
+ <MkButton style="margin: 0.5em 0 0.5em 0;" @click="removeAllFollowing()"><i class="fas fa-minus-circle"></i> {{ $ts.removeAllFollowing }}</MkButton>
<MkInfo warn>{{ $t('removeAllFollowingDescription', { host: instance.host }) }}</MkInfo>
</details>
</div>
diff --git a/packages/client/src/pages/admin/integrations-discord.vue b/packages/client/src/pages/admin/integrations-discord.vue
index 81e47499c6..50539a0a36 100644
--- a/packages/client/src/pages/admin/integrations-discord.vue
+++ b/packages/client/src/pages/admin/integrations-discord.vue
@@ -19,7 +19,7 @@
</FormInput>
</template>
- <FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense>
</FormBase>
</template>
diff --git a/packages/client/src/pages/admin/integrations-github.vue b/packages/client/src/pages/admin/integrations-github.vue
index 2bbc3ae9a1..ea6e8261ff 100644
--- a/packages/client/src/pages/admin/integrations-github.vue
+++ b/packages/client/src/pages/admin/integrations-github.vue
@@ -19,7 +19,7 @@
</FormInput>
</template>
- <FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense>
</FormBase>
</template>
diff --git a/packages/client/src/pages/admin/integrations-twitter.vue b/packages/client/src/pages/admin/integrations-twitter.vue
index 19ed216ab9..7147a035f8 100644
--- a/packages/client/src/pages/admin/integrations-twitter.vue
+++ b/packages/client/src/pages/admin/integrations-twitter.vue
@@ -19,7 +19,7 @@
</FormInput>
</template>
- <FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense>
</FormBase>
</template>
diff --git a/packages/client/src/pages/admin/object-storage.vue b/packages/client/src/pages/admin/object-storage.vue
index 0f1431c258..8984686b5e 100644
--- a/packages/client/src/pages/admin/object-storage.vue
+++ b/packages/client/src/pages/admin/object-storage.vue
@@ -58,7 +58,7 @@
</FormSwitch>
</template>
- <FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense>
</FormBase>
</template>
diff --git a/packages/client/src/pages/admin/other-settings.vue b/packages/client/src/pages/admin/other-settings.vue
index e8f872bf0a..eb214a21c8 100644
--- a/packages/client/src/pages/admin/other-settings.vue
+++ b/packages/client/src/pages/admin/other-settings.vue
@@ -16,7 +16,7 @@
Pro account
</FormSwitch>
</FormGroup>
- <FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense>
</FormBase>
</template>
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index e1352945a1..da5fc0ba6d 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -1,18 +1,18 @@
<template>
-<div class="edbbcaef" v-size="{ max: [740] }">
+<div v-size="{ max: [740] }" class="edbbcaef">
<div v-if="stats" class="cfcdecdf" style="margin: var(--margin)">
<div class="number _panel">
<div class="label">Users</div>
<div class="value _monospace">
{{ number(stats.originalUsersCount) }}
- <MkNumberDiff v-if="usersComparedToThePrevDay != null" class="diff" :value="usersComparedToThePrevDay" v-tooltip="$ts.dayOverDayChanges"><template #before>(</template><template #after>)</template></MkNumberDiff>
+ <MkNumberDiff v-if="usersComparedToThePrevDay != null" v-tooltip="$ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"><template #before>(</template><template #after>)</template></MkNumberDiff>
</div>
</div>
<div class="number _panel">
<div class="label">Notes</div>
<div class="value _monospace">
{{ number(stats.originalNotesCount) }}
- <MkNumberDiff v-if="notesComparedToThePrevDay != null" class="diff" :value="notesComparedToThePrevDay" v-tooltip="$ts.dayOverDayChanges"><template #before>(</template><template #after>)</template></MkNumberDiff>
+ <MkNumberDiff v-if="notesComparedToThePrevDay != null" v-tooltip="$ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"><template #before>(</template><template #after>)</template></MkNumberDiff>
</div>
</div>
</div>
@@ -44,15 +44,15 @@
<div class="label">Misskey</div>
<div class="value _monospace">{{ version }}</div>
</div>
- <div class="number _panel" v-if="serverInfo">
+ <div v-if="serverInfo" class="number _panel">
<div class="label">Node.js</div>
<div class="value _monospace">{{ serverInfo.node }}</div>
</div>
- <div class="number _panel" v-if="serverInfo">
+ <div v-if="serverInfo" class="number _panel">
<div class="label">PostgreSQL</div>
<div class="value _monospace">{{ serverInfo.psql }}</div>
</div>
- <div class="number _panel" v-if="serverInfo">
+ <div v-if="serverInfo" class="number _panel">
<div class="label">Redis</div>
<div class="value _monospace">{{ serverInfo.redis }}</div>
</div>
diff --git a/packages/client/src/pages/admin/proxy-account.vue b/packages/client/src/pages/admin/proxy-account.vue
index 5852c6a20d..14ef92a747 100644
--- a/packages/client/src/pages/admin/proxy-account.vue
+++ b/packages/client/src/pages/admin/proxy-account.vue
@@ -9,7 +9,7 @@
<template #caption>{{ $ts.proxyAccountDescription }}</template>
</FormGroup>
- <FormButton @click="chooseProxyAccount" primary>{{ $ts.selectAccount }}</FormButton>
+ <FormButton primary @click="chooseProxyAccount">{{ $ts.selectAccount }}</FormButton>
</FormSuspense>
</FormBase>
</template>
diff --git a/packages/client/src/pages/admin/queue.vue b/packages/client/src/pages/admin/queue.vue
index 0886216c7b..37a87089cb 100644
--- a/packages/client/src/pages/admin/queue.vue
+++ b/packages/client/src/pages/admin/queue.vue
@@ -6,7 +6,7 @@
<XQueue :connection="connection" domain="deliver">
<template #title>Out</template>
</XQueue>
- <FormButton @click="clear()" danger><i class="fas fa-trash-alt"></i> {{ $ts.clearQueue }}</FormButton>
+ <FormButton danger @click="clear()"><i class="fas fa-trash-alt"></i> {{ $ts.clearQueue }}</FormButton>
</FormBase>
</template>
diff --git a/packages/client/src/pages/admin/relays.vue b/packages/client/src/pages/admin/relays.vue
index f4cfc2a885..3e2f1c6f26 100644
--- a/packages/client/src/pages/admin/relays.vue
+++ b/packages/client/src/pages/admin/relays.vue
@@ -1,8 +1,8 @@
<template>
<FormBase class="relaycxt">
- <FormButton @click="addRelay" primary><i class="fas fa-plus"></i> {{ $ts.addRelay }}</FormButton>
+ <FormButton primary @click="addRelay"><i class="fas fa-plus"></i> {{ $ts.addRelay }}</FormButton>
- <div class="_debobigegoItem" v-for="relay in relays" :key="relay.inbox">
+ <div v-for="relay in relays" :key="relay.inbox" class="_debobigegoItem">
<div class="_debobigegoPanel" style="padding: 16px;">
<div>{{ relay.inbox }}</div>
<div>{{ $t(`_relayStatus.${relay.status}`) }}</div>
diff --git a/packages/client/src/pages/admin/security.vue b/packages/client/src/pages/admin/security.vue
index ad53ec4fcf..adfb2e786c 100644
--- a/packages/client/src/pages/admin/security.vue
+++ b/packages/client/src/pages/admin/security.vue
@@ -3,16 +3,16 @@
<FormSuspense :p="init">
<FormLink to="/admin/bot-protection">
<i class="fas fa-shield-alt"></i> {{ $ts.botProtection }}
- <template #suffix v-if="enableHcaptcha">hCaptcha</template>
- <template #suffix v-else-if="enableRecaptcha">reCAPTCHA</template>
- <template #suffix v-else>{{ $ts.none }} ({{ $ts.notRecommended }})</template>
+ <template v-if="enableHcaptcha" #suffix>hCaptcha</template>
+ <template v-else-if="enableRecaptcha" #suffix>reCAPTCHA</template>
+ <template v-else #suffix>{{ $ts.none }} ({{ $ts.notRecommended }})</template>
</FormLink>
<FormSwitch v-model="enableRegistration">{{ $ts.enableRegistration }}</FormSwitch>
<FormSwitch v-model="emailRequiredForSignup">{{ $ts.emailRequiredForSignup }}</FormSwitch>
- <FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense>
</FormBase>
</template>
diff --git a/packages/client/src/pages/admin/service-worker.vue b/packages/client/src/pages/admin/service-worker.vue
index 9e91d6d64f..f34cb03e4e 100644
--- a/packages/client/src/pages/admin/service-worker.vue
+++ b/packages/client/src/pages/admin/service-worker.vue
@@ -18,7 +18,7 @@
</FormInput>
</template>
- <FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense>
</FormBase>
</template>
diff --git a/packages/client/src/pages/admin/settings.vue b/packages/client/src/pages/admin/settings.vue
index 66aa3e21db..d88445abdb 100644
--- a/packages/client/src/pages/admin/settings.vue
+++ b/packages/client/src/pages/admin/settings.vue
@@ -52,7 +52,7 @@
<FormSwitch v-model="enableGlobalTimeline">{{ $ts.enableGlobalTimeline }}</FormSwitch>
<FormInfo>{{ $ts.disablingTimelinesInfo }}</FormInfo>
- <FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense>
</FormBase>
</template>
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index 3c43c7aa36..016a013e51 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -30,23 +30,23 @@
<template #prefix>@</template>
<template #label>{{ $ts.username }}</template>
</MkInput>
- <MkInput v-model="searchHost" style="flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
+ <MkInput v-model="searchHost" style="flex: 1;" type="text" spellcheck="false" :disabled="pagination.params().origin === 'local'" @update:modelValue="$refs.users.reload()">
<template #prefix>@</template>
<template #label>{{ $ts.host }}</template>
</MkInput>
</div>
- <MkPagination :pagination="pagination" #default="{items}" class="users" ref="users">
- <button class="user _panel _button _gap" v-for="user in items" :key="user.id" @click="show(user)">
+ <MkPagination #default="{items}" ref="users" :pagination="pagination" class="users">
+ <button v-for="user in items" :key="user.id" class="user _panel _button _gap" @click="show(user)">
<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
<div class="body">
<header>
<MkUserName class="name" :user="user"/>
<span class="acct">@{{ acct(user) }}</span>
- <span class="staff" v-if="user.isAdmin"><i class="fas fa-bookmark"></i></span>
- <span class="staff" v-if="user.isModerator"><i class="far fa-bookmark"></i></span>
- <span class="punished" v-if="user.isSilenced"><i class="fas fa-microphone-slash"></i></span>
- <span class="punished" v-if="user.isSuspended"><i class="fas fa-snowflake"></i></span>
+ <span v-if="user.isAdmin" class="staff"><i class="fas fa-bookmark"></i></span>
+ <span v-if="user.isModerator" class="staff"><i class="far fa-bookmark"></i></span>
+ <span v-if="user.isSilenced" class="punished"><i class="fas fa-microphone-slash"></i></span>
+ <span v-if="user.isSuspended" class="punished"><i class="fas fa-snowflake"></i></span>
</header>
<div>
<span>{{ $ts.lastUsed }}: <MkTime v-if="user.updatedAt" :time="user.updatedAt" mode="detail"/></span>
diff --git a/packages/client/src/pages/advanced-theme-editor.vue b/packages/client/src/pages/advanced-theme-editor.vue
index 122c7821b7..9c2423131c 100644
--- a/packages/client/src/pages/advanced-theme-editor.vue
+++ b/packages/client/src/pages/advanced-theme-editor.vue
@@ -26,7 +26,7 @@
</div>
<div class="_content _card _gap">
<div class="list-view _content">
- <div class="item" v-for="([ k, v ], i) in theme" :key="k">
+ <div v-for="([ k, v ], i) in theme" :key="k" class="item">
<div class="_inputs">
<div>
{{ k.startsWith('$') ? `${k} (${$ts._theme.constant})` : $t('_theme.keys.' + k) }}
@@ -37,7 +37,7 @@
{{ getTypeOf(v) }} <i class="fas fa-chevron-down"></i>
</div>
<!-- default -->
- <div v-if="v === null" v-text="baseProps[k]" class="default-value" />
+ <div v-if="v === null" class="default-value" v-text="baseProps[k]" />
<!-- color -->
<div v-else-if="typeof v === 'string'" class="color">
<input type="color" :value="v" @input="colorChanged($event.target.value, i)"/>
@@ -49,19 +49,19 @@
<span>{{ $ts.name }}</span>
</MkInput>
<!-- ref props -->
- <MkSelect class="select" v-else-if="v.type === 'refProp'" v-model="v.key">
- <option v-for="key in themeProps" :value="key" :key="key">{{ $t('_theme.keys.' + key) }}</option>
+ <MkSelect v-else-if="v.type === 'refProp'" v-model="v.key" class="select">
+ <option v-for="key in themeProps" :key="key" :value="key">{{ $t('_theme.keys.' + key) }}</option>
</MkSelect>
<!-- func -->
<template v-else-if="v.type === 'func'">
- <MkSelect class="select" v-model="v.name">
+ <MkSelect v-model="v.name" class="select">
<template #label>{{ $ts._theme.funcKind }}</template>
- <option v-for="n in ['alpha', 'darken', 'lighten']" :value="n" :key="n">{{ $t('_theme.' + n) }}</option>
+ <option v-for="n in ['alpha', 'darken', 'lighten']" :key="n" :value="n">{{ $t('_theme.' + n) }}</option>
</MkSelect>
- <MkInput type="number" v-model="v.arg"><span>{{ $ts._theme.argument }}</span></MkInput>
- <MkSelect class="select" v-model="v.value">
+ <MkInput v-model="v.arg" type="number"><span>{{ $ts._theme.argument }}</span></MkInput>
+ <MkSelect v-model="v.value" class="select">
<template #label>{{ $ts._theme.basedProp }}</template>
- <option v-for="key in themeProps" :value="key" :key="key">{{ $t('_theme.keys.' + key) }}</option>
+ <option v-for="key in themeProps" :key="key" :value="key">{{ $t('_theme.keys.' + key) }}</option>
</MkSelect>
</template>
<!-- CSS -->
@@ -120,6 +120,14 @@ export default defineComponent({
MkSample,
},
+ async beforeRouteLeave(to, from, next) {
+ if (this.changed && !(await this.confirm())) {
+ next(false);
+ } else {
+ next();
+ }
+ },
+
data() {
return {
[symbols.PAGE_INFO]: {
@@ -147,14 +155,6 @@ export default defineComponent({
window.removeEventListener('beforeunload', this.beforeunload);
},
- async beforeRouteLeave(to, from, next) {
- if (this.changed && !(await this.confirm())) {
- next(false);
- } else {
- next();
- }
- },
-
mounted() {
this.init();
window.addEventListener('beforeunload', this.beforeunload);
diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue
index 946b368733..34879a18bd 100644
--- a/packages/client/src/pages/announcements.vue
+++ b/packages/client/src/pages/announcements.vue
@@ -1,14 +1,14 @@
<template>
<MkSpacer :content-max="800">
- <MkPagination :pagination="pagination" #default="{items}" class="ruryvtyk _content">
- <section class="_card announcement" v-for="(announcement, i) in items" :key="announcement.id">
+ <MkPagination #default="{items}" :pagination="pagination" class="ruryvtyk _content">
+ <section v-for="(announcement, i) in items" :key="announcement.id" class="_card announcement">
<div class="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
<div class="_content">
<Mfm :text="announcement.text"/>
<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
</div>
- <div class="_footer" v-if="$i && !announcement.isRead">
- <MkButton @click="read(items, announcement, i)" primary><i class="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
+ <div v-if="$i && !announcement.isRead" class="_footer">
+ <MkButton primary @click="read(items, announcement, i)"><i class="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
</div>
</section>
</MkPagination>
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index a874ca6025..2738208c9d 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -1,9 +1,9 @@
<template>
-<div class="tqmomfks" v-hotkey.global="keymap" v-size="{ min: [800] }">
- <div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
+<div v-hotkey.global="keymap" v-size="{ min: [800] }" class="tqmomfks">
+ <div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
<div class="tl _block">
- <XTimeline ref="tl" class="tl"
- :key="antennaId"
+ <XTimeline ref="tl" :key="antennaId"
+ class="tl"
src="antenna"
:antenna="antennaId"
:sound="true"
diff --git a/packages/client/src/pages/api-console.vue b/packages/client/src/pages/api-console.vue
index 48495df3c2..1c41315d21 100644
--- a/packages/client/src/pages/api-console.vue
+++ b/packages/client/src/pages/api-console.vue
@@ -1,7 +1,7 @@
<template>
<div class="_root">
<div class="_block" style="padding: 24px;">
- <MkInput v-model="endpoint" :datalist="endpoints" @update:modelValue="onEndpointChange()" class="">
+ <MkInput v-model="endpoint" :datalist="endpoints" class="" @update:modelValue="onEndpointChange()">
<template #label>Endpoint</template>
</MkInput>
<MkTextarea v-model="body" code>
@@ -10,7 +10,7 @@
<MkSwitch v-model="withCredential">
With credential
</MkSwitch>
- <MkButton primary full @click="send" :disabled="sending">
+ <MkButton primary full :disabled="sending" @click="send">
<template v-if="sending"><MkEllipsis/></template>
<template v-else><i class="fas fa-paper-plane"></i> Send</template>
</MkButton>
diff --git a/packages/client/src/pages/auth.form.vue b/packages/client/src/pages/auth.form.vue
index 8b2adc3e07..bc719aebd3 100644
--- a/packages/client/src/pages/auth.form.vue
+++ b/packages/client/src/pages/auth.form.vue
@@ -13,8 +13,8 @@
</ul>
</div>
<div class="_footer">
- <MkButton @click="cancel" inline>{{ $ts.cancel }}</MkButton>
- <MkButton @click="accept" inline primary>{{ $ts.accept }}</MkButton>
+ <MkButton inline @click="cancel">{{ $ts.cancel }}</MkButton>
+ <MkButton inline primary @click="accept">{{ $ts.accept }}</MkButton>
</div>
</section>
</template>
diff --git a/packages/client/src/pages/auth.vue b/packages/client/src/pages/auth.vue
index 522bd4cdf8..e65161dd2b 100644
--- a/packages/client/src/pages/auth.vue
+++ b/packages/client/src/pages/auth.vue
@@ -1,29 +1,29 @@
<template>
-<div class="" v-if="$i && fetching">
+<div v-if="$i && fetching" class="">
<MkLoading/>
</div>
<div v-else-if="$i">
<XForm
- class="form"
- ref="form"
v-if="state == 'waiting'"
+ ref="form"
+ class="form"
:session="session"
@denied="state = 'denied'"
@accepted="accepted"
/>
- <div class="denied" v-if="state == 'denied'">
+ <div v-if="state == 'denied'" class="denied">
<h1>{{ $ts._auth.denied }}</h1>
</div>
- <div class="accepted" v-if="state == 'accepted'">
+ <div v-if="state == 'accepted'" class="accepted">
<h1>{{ session.app.isAuthorized ? this.$t('already-authorized') : this.$ts.allowed }}</h1>
<p v-if="session.app.callbackUrl">{{ $ts._auth.callback }}<MkEllipsis/></p>
<p v-if="!session.app.callbackUrl">{{ $ts._auth.pleaseGoBack }}</p>
</div>
- <div class="error" v-if="state == 'fetch-session-error'">
+ <div v-if="state == 'fetch-session-error'" class="error">
<p>{{ $ts.somethingHappened }}</p>
</div>
</div>
-<div class="signin" v-else>
+<div v-else class="signin">
<MkSignin @login="onLogin"/>
</div>
</template>
diff --git a/packages/client/src/pages/channel-editor.vue b/packages/client/src/pages/channel-editor.vue
index e2cf8b9f00..3843ea9795 100644
--- a/packages/client/src/pages/channel-editor.vue
+++ b/packages/client/src/pages/channel-editor.vue
@@ -19,7 +19,7 @@
</div>
</div>
<div class="_footer">
- <MkButton @click="save()" primary><i class="fas fa-save"></i> {{ channelId ? $ts.save : $ts.create }}</MkButton>
+ <MkButton primary @click="save()"><i class="fas fa-save"></i> {{ channelId ? $ts.save : $ts.create }}</MkButton>
</div>
</div>
</div>
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index f9a9ca29e9..a328eacb07 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -6,7 +6,7 @@
<template v-if="showBanner"><i class="fas fa-angle-up"></i></template>
<template v-else><i class="fas fa-angle-down"></i></template>
</button>
- <div class="hideOverlay" v-if="!showBanner">
+ <div v-if="!showBanner" class="hideOverlay">
</div>
<div :style="{ backgroundImage: channel.bannerUrl ? `url(${channel.bannerUrl})` : null }" class="banner">
<div class="status">
@@ -15,14 +15,14 @@
</div>
<div class="fade"></div>
</div>
- <div class="description" v-if="channel.description">
+ <div v-if="channel.description" class="description">
<Mfm :text="channel.description" :is-note="false" :i="$i"/>
</div>
</div>
- <XPostForm :channel="channel" class="post-form _content _panel _gap" fixed v-if="$i"/>
+ <XPostForm v-if="$i" :channel="channel" class="post-form _content _panel _gap" fixed/>
- <XTimeline class="_content _gap" src="channel" :key="channelId" :channel="channelId" @before="before" @after="after"/>
+ <XTimeline :key="channelId" class="_content _gap" src="channel" :channel="channelId" @before="before" @after="after"/>
</div>
</template>
diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
index 09e136ac00..a7bd8a018c 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -1,7 +1,7 @@
<template>
<div>
- <div class="_section" style="padding: 0;" v-if="$i">
- <MkTab class="_content" v-model="tab">
+ <div v-if="$i" class="_section" style="padding: 0;">
+ <MkTab v-model="tab" class="_content">
<option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._channel.featured }}</option>
<option value="following"><i class="fas fa-heart"></i> {{ $ts._channel.following }}</option>
<option value="owned"><i class="fas fa-edit"></i> {{ $ts._channel.owned }}</option>
@@ -9,22 +9,22 @@
</div>
<div class="_section">
- <div class="_content grwlizim featured" v-if="tab === 'featured'">
- <MkPagination :pagination="featuredPagination" #default="{items}">
- <MkChannelPreview v-for="channel in items" class="_gap" :channel="channel" :key="channel.id"/>
+ <div v-if="tab === 'featured'" class="_content grwlizim featured">
+ <MkPagination #default="{items}" :pagination="featuredPagination">
+ <MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
</MkPagination>
</div>
- <div class="_content grwlizim following" v-if="tab === 'following'">
- <MkPagination :pagination="followingPagination" #default="{items}">
- <MkChannelPreview v-for="channel in items" class="_gap" :channel="channel" :key="channel.id"/>
+ <div v-if="tab === 'following'" class="_content grwlizim following">
+ <MkPagination #default="{items}" :pagination="followingPagination">
+ <MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
</MkPagination>
</div>
- <div class="_content grwlizim owned" v-if="tab === 'owned'">
+ <div v-if="tab === 'owned'" class="_content grwlizim owned">
<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
- <MkPagination :pagination="ownedPagination" #default="{items}">
- <MkChannelPreview v-for="channel in items" class="_gap" :channel="channel" :key="channel.id"/>
+ <MkPagination #default="{items}" :pagination="ownedPagination">
+ <MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
</MkPagination>
</div>
</div>
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index dc7abf36b4..e3ceab9eea 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -1,7 +1,7 @@
<template>
<div v-if="clip" class="_section">
<div class="okzinsic _content _panel _gap">
- <div class="description" v-if="clip.description">
+ <div v-if="clip.description" class="description">
<Mfm :text="clip.description" :is-note="false" :i="$i"/>
</div>
<div class="user">
diff --git a/packages/client/src/pages/emojis.category.vue b/packages/client/src/pages/emojis.category.vue
index 327cbce7e8..9a317418be 100644
--- a/packages/client/src/pages/emojis.category.vue
+++ b/packages/client/src/pages/emojis.category.vue
@@ -12,14 +12,14 @@
-->
</div>
- <MkFolder class="emojis" v-if="searchEmojis">
+ <MkFolder v-if="searchEmojis" class="emojis">
<template #header>{{ $ts.searchResult }}</template>
<div class="zuvgdzyt">
<XEmoji v-for="emoji in searchEmojis" :key="emoji.name" class="emoji" :emoji="emoji"/>
</div>
</MkFolder>
- <MkFolder class="emojis" v-for="category in customEmojiCategories" :key="category">
+ <MkFolder v-for="category in customEmojiCategories" :key="category" class="emojis">
<template #header>{{ category || $ts.other }}</template>
<div class="zuvgdzyt">
<XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" class="emoji" :emoji="emoji"/>
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
index 92d940144b..a3c3b771f2 100644
--- a/packages/client/src/pages/explore.vue
+++ b/packages/client/src/pages/explore.vue
@@ -3,7 +3,7 @@
<MkSpacer :content-max="1200">
<div class="lznhrdub">
<div v-if="tab === 'local'">
- <div class="localfedi7 _block _isolated" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
+ <div v-if="meta && stats && tag == null" class="localfedi7 _block _isolated" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
<div><span>{{ $t('exploreUsersCount', { count: num(stats.originalUsersCount) }) }}</span></div>
</div>
@@ -28,16 +28,16 @@
</template>
</div>
<div v-else-if="tab === 'remote'">
- <div class="localfedi7 _block _isolated" v-if="tag == null" :style="{ backgroundImage: `url(/client-assets/fedi.jpg)` }">
+ <div v-if="tag == null" class="localfedi7 _block _isolated" :style="{ backgroundImage: `url(/client-assets/fedi.jpg)` }">
<header><span>{{ $ts.exploreFediverse }}</span></header>
</div>
- <MkFolder :foldable="true" :expanded="false" ref="tags" class="_gap">
+ <MkFolder ref="tags" :foldable="true" :expanded="false" class="_gap">
<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularTags }}</template>
<div class="vxjfqztj">
- <MkA v-for="tag in tagsLocal" :to="`/explore/tags/${tag.tag}`" :key="'local:' + tag.tag" class="local">{{ tag.tag }}</MkA>
- <MkA v-for="tag in tagsRemote" :to="`/explore/tags/${tag.tag}`" :key="'remote:' + tag.tag">{{ tag.tag }}</MkA>
+ <MkA v-for="tag in tagsLocal" :key="'local:' + tag.tag" :to="`/explore/tags/${tag.tag}`" class="local">{{ tag.tag }}</MkA>
+ <MkA v-for="tag in tagsRemote" :key="'remote:' + tag.tag" :to="`/explore/tags/${tag.tag}`">{{ tag.tag }}</MkA>
</div>
</MkFolder>
@@ -74,7 +74,7 @@
</MkRadios>
</div>
- <XUserList v-if="searchQuery" class="_gap" :pagination="searchPagination" ref="search"/>
+ <XUserList v-if="searchQuery" ref="search" class="_gap" :pagination="searchPagination"/>
</div>
</div>
</MkSpacer>
diff --git a/packages/client/src/pages/federation.vue b/packages/client/src/pages/federation.vue
index 1bd5da58e3..398619d3be 100644
--- a/packages/client/src/pages/federation.vue
+++ b/packages/client/src/pages/federation.vue
@@ -40,9 +40,9 @@
</div>
</div>
- <MkPagination :pagination="pagination" #default="{items}" ref="instances" :key="host + state">
+ <MkPagination #default="{items}" ref="instances" :key="host + state" :pagination="pagination">
<div class="dqokceoi">
- <MkA class="instance" v-for="instance in items" :key="instance.id" :to="`/instance-info/${instance.host}`">
+ <MkA v-for="instance in items" :key="instance.id" class="instance" :to="`/instance-info/${instance.host}`">
<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>
<div class="table">
<div class="cell">
@@ -77,10 +77,10 @@
<div class="footer">
<span class="status" :class="getStatus(instance)">{{ getStatus(instance) }}</span>
<span class="pubSub">
- <span class="sub" v-if="instance.followersCount > 0"><i class="fas fa-caret-down icon"></i>Sub</span>
- <span class="sub" v-else><i class="fas fa-caret-down icon"></i>-</span>
- <span class="pub" v-if="instance.followingCount > 0"><i class="fas fa-caret-up icon"></i>Pub</span>
- <span class="pub" v-else><i class="fas fa-caret-up icon"></i>-</span>
+ <span v-if="instance.followersCount > 0" class="sub"><i class="fas fa-caret-down icon"></i>Sub</span>
+ <span v-else class="sub"><i class="fas fa-caret-down icon"></i>-</span>
+ <span v-if="instance.followingCount > 0" class="pub"><i class="fas fa-caret-up icon"></i>Pub</span>
+ <span v-else class="pub"><i class="fas fa-caret-up icon"></i>-</span>
</span>
<span class="right">
<span class="latestStatus">{{ instance.latestStatus || '-' }}</span>
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index d8967dc9d9..a4de393995 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkPagination :pagination="pagination" class="mk-follow-requests" ref="list">
+ <MkPagination ref="list" :pagination="pagination" class="mk-follow-requests">
<template #empty>
<div class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
@@ -8,14 +8,14 @@
</div>
</template>
<template #default="{items}">
- <div class="user _panel" v-for="req in items" :key="req.id">
+ <div v-for="req in items" :key="req.id" class="user _panel">
<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
<div class="body">
<div class="name">
- <MkA class="name" :to="userPage(req.follower)" v-user-preview="req.follower.id"><MkUserName :user="req.follower"/></MkA>
+ <MkA v-user-preview="req.follower.id" class="name" :to="userPage(req.follower)"><MkUserName :user="req.follower"/></MkA>
<p class="acct">@{{ acct(req.follower) }}</p>
</div>
- <div class="description" v-if="req.follower.description" :title="req.follower.description">
+ <div v-if="req.follower.description" class="description" :title="req.follower.description">
<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :custom-emojis="req.follower.emojis" :plain="true" :nowrap="true"/>
</div>
<div class="actions">
diff --git a/packages/client/src/pages/gallery/edit.vue b/packages/client/src/pages/gallery/edit.vue
index b34928713d..08f31d0db2 100644
--- a/packages/client/src/pages/gallery/edit.vue
+++ b/packages/client/src/pages/gallery/edit.vue
@@ -12,17 +12,17 @@
<FormGroup>
<div v-for="file in files" :key="file.id" class="_debobigegoItem _debobigegoPanel wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : null }">
<div class="name">{{ file.name }}</div>
- <button class="remove _button" @click="remove(file)" v-tooltip="$ts.remove"><i class="fas fa-times"></i></button>
+ <button v-tooltip="$ts.remove" class="remove _button" @click="remove(file)"><i class="fas fa-times"></i></button>
</div>
- <FormButton @click="selectFile" primary><i class="fas fa-plus"></i> {{ $ts.attachFile }}</FormButton>
+ <FormButton primary @click="selectFile"><i class="fas fa-plus"></i> {{ $ts.attachFile }}</FormButton>
</FormGroup>
<FormSwitch v-model="isSensitive">{{ $ts.markAsSensitive }}</FormSwitch>
- <FormButton v-if="postId" @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
- <FormButton v-else @click="save" primary><i class="fas fa-save"></i> {{ $ts.publish }}</FormButton>
+ <FormButton v-if="postId" primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton v-else primary @click="save"><i class="fas fa-save"></i> {{ $ts.publish }}</FormButton>
- <FormButton v-if="postId" @click="del" danger><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</FormButton>
+ <FormButton v-if="postId" danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</FormButton>
</FormSuspense>
</FormBase>
</template>
diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
index dfcd59349e..a036f4286b 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="xprsixdl _root">
- <MkTab v-model="tab" v-if="$i">
+ <MkTab v-if="$i" v-model="tab">
<option value="explore"><i class="fas fa-icons"></i> {{ $ts.gallery }}</option>
<option value="liked"><i class="fas fa-heart"></i> {{ $ts._gallery.liked }}</option>
<option value="my"><i class="fas fa-edit"></i> {{ $ts._gallery.my }}</option>
@@ -9,33 +9,33 @@
<div v-if="tab === 'explore'">
<MkFolder class="_gap">
<template #header><i class="fas fa-clock"></i>{{ $ts.recentPosts }}</template>
- <MkPagination :pagination="recentPostsPagination" #default="{items}" :disable-auto-load="true">
+ <MkPagination #default="{items}" :pagination="recentPostsPagination" :disable-auto-load="true">
<div class="vfpdbgtk">
- <MkGalleryPostPreview v-for="post in items" :post="post" :key="post.id" class="post"/>
+ <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
</MkPagination>
</MkFolder>
<MkFolder class="_gap">
<template #header><i class="fas fa-fire-alt"></i>{{ $ts.popularPosts }}</template>
- <MkPagination :pagination="popularPostsPagination" #default="{items}" :disable-auto-load="true">
+ <MkPagination #default="{items}" :pagination="popularPostsPagination" :disable-auto-load="true">
<div class="vfpdbgtk">
- <MkGalleryPostPreview v-for="post in items" :post="post" :key="post.id" class="post"/>
+ <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
</MkPagination>
</MkFolder>
</div>
<div v-else-if="tab === 'liked'">
- <MkPagination :pagination="likedPostsPagination" #default="{items}">
+ <MkPagination #default="{items}" :pagination="likedPostsPagination">
<div class="vfpdbgtk">
- <MkGalleryPostPreview v-for="like in items" :post="like.post" :key="like.id" class="post"/>
+ <MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/>
</div>
</MkPagination>
</div>
<div v-else-if="tab === 'my'">
<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="fas fa-plus"></i> {{ $ts.postToGallery }}</MkA>
- <MkPagination :pagination="myPostsPagination" #default="{items}">
+ <MkPagination #default="{items}" :pagination="myPostsPagination">
<div class="vfpdbgtk">
- <MkGalleryPostPreview v-for="post in items" :post="post" :key="post.id" class="post"/>
+ <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
</MkPagination>
</div>
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index 531ecda8de..f145caf28e 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -3,7 +3,7 @@
<transition name="fade" mode="out-in">
<div v-if="post" class="rkxwuolj">
<div class="files">
- <div class="file" v-for="file in post.files" :key="file.id">
+ <div v-for="file in post.files" :key="file.id" class="file">
<img :src="file.url"/>
</div>
</div>
@@ -15,13 +15,13 @@
</div>
<div class="actions">
<div class="like">
- <MkButton class="button" @click="unlike()" v-if="post.isLiked" v-tooltip="$ts._gallery.unlike" primary><i class="fas fa-heart"></i><span class="count" v-if="post.likedCount > 0">{{ post.likedCount }}</span></MkButton>
- <MkButton class="button" @click="like()" v-else v-tooltip="$ts._gallery.like"><i class="far fa-heart"></i><span class="count" v-if="post.likedCount > 0">{{ post.likedCount }}</span></MkButton>
+ <MkButton v-if="post.isLiked" v-tooltip="$ts._gallery.unlike" class="button" primary @click="unlike()"><i class="fas fa-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
+ <MkButton v-else v-tooltip="$ts._gallery.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
</div>
<div class="other">
- <button v-if="$i && $i.id === post.user.id" class="_button" @click="edit" v-tooltip="$ts.edit" v-click-anime><i class="fas fa-pencil-alt fa-fw"></i></button>
- <button class="_button" @click="shareWithNote" v-tooltip="$ts.shareWithNote" v-click-anime><i class="fas fa-retweet fa-fw"></i></button>
- <button class="_button" @click="share" v-tooltip="$ts.share" v-click-anime><i class="fas fa-share-alt fa-fw"></i></button>
+ <button v-if="$i && $i.id === post.user.id" v-tooltip="$ts.edit" v-click-anime class="_button" @click="edit"><i class="fas fa-pencil-alt fa-fw"></i></button>
+ <button v-tooltip="$ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
+ <button v-tooltip="$ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
</div>
</div>
<div class="user">
@@ -36,9 +36,9 @@
<MkAd :prefer="['horizontal', 'horizontal-big']"/>
<MkContainer :max-height="300" :foldable="true" class="other">
<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
- <MkPagination :pagination="otherPostsPagination" #default="{items}">
+ <MkPagination #default="{items}" :pagination="otherPostsPagination">
<div class="sdrarzaf">
- <MkGalleryPostPreview v-for="post in items" :post="post" :key="post.id" class="post"/>
+ <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
</MkPagination>
</MkContainer>
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index 586d9d7e52..85096d991a 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -14,7 +14,7 @@
</FormKeyValueView>
</FormGroup>
- <FormButton v-if="$i.isAdmin || $i.isModerator" @click="info" primary>{{ $ts.settings }}</FormButton>
+ <FormButton v-if="$i.isAdmin || $i.isModerator" primary @click="info">{{ $ts.settings }}</FormButton>
<FormTextarea readonly :value="instance.description">
<span>{{ $ts.description }}</span>
@@ -108,7 +108,7 @@
<FormLink :to="`https://${host}/robots.txt`" external>robots.txt</FormLink>
<FormLink :to="`https://${host}/manifest.json`" external>manifest.json</FormLink>
</FormGroup>
- <FormSuspense :p="dnsPromiseFactory" v-slot="{ result: dns }">
+ <FormSuspense v-slot="{ result: dns }" :p="dnsPromiseFactory">
<FormGroup>
<template #label>DNS</template>
<FormKeyValueView v-for="record in dns.a" :key="record">
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index d0a02aa443..01f9d4518f 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -1,16 +1,16 @@
<template>
<MkSpacer :content-max="800">
- <div class="yweeujhr" v-size="{ max: [400] }">
- <MkButton @click="start" primary class="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
+ <div v-size="{ max: [400] }" class="yweeujhr">
+ <MkButton primary class="start" @click="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
- <div class="history" v-if="messages.length > 0">
+ <div v-if="messages.length > 0" class="history">
<MkA v-for="(message, i) in messages"
+ :key="message.id"
+ v-anim="i"
class="message _block"
:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
:data-index="i"
- :key="message.id"
- v-anim="i"
>
<div>
<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/>
@@ -24,12 +24,12 @@
<MkTime :time="message.createdAt" class="time"/>
</header>
<div class="body">
- <p class="text"><span class="me" v-if="isMe(message)">{{ $ts.you }}:</span>{{ message.text }}</p>
+ <p class="text"><span v-if="isMe(message)" class="me">{{ $ts.you }}:</span>{{ message.text }}</p>
</div>
</div>
</MkA>
</div>
- <div class="_fullinfo" v-if="!fetching && messages.length == 0">
+ <div v-if="!fetching && messages.length == 0" class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ $ts.noHistory }}</div>
</div>
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index d378fc186b..0ce589f034 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -4,15 +4,15 @@
@drop.stop="onDrop"
>
<textarea
- v-model="text"
ref="text"
+ v-model="text"
+ :placeholder="$ts.inputMessageHere"
@keypress="onKeypress"
@compositionupdate="onCompositionUpdate"
@paste="onPaste"
- :placeholder="$ts.inputMessageHere"
></textarea>
- <div class="file" @click="file = null" v-if="file">{{ file.name }}</div>
- <button class="send _button" @click="send" :disabled="!canSend || sending" :title="$ts.send">
+ <div v-if="file" class="file" @click="file = null">{{ file.name }}</div>
+ <button class="send _button" :disabled="!canSend || sending" :title="$ts.send" @click="send">
<template v-if="!sending"><i class="fas fa-paper-plane"></i></template><template v-if="sending"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>
</button>
<button class="_button" @click="chooseFile"><i class="fas fa-photo-video"></i></button>
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index 432d11add8..4315bbecdb 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -1,32 +1,32 @@
<template>
-<div class="thvuemwp" :class="{ isMe }" v-size="{ max: [400, 500] }">
+<div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }">
<MkAvatar class="avatar" :user="message.user" :show-indicator="true"/>
<div class="content">
<div class="balloon" :class="{ noText: message.text == null }" >
- <button class="delete-button" v-if="isMe" :title="$ts.delete" @click="del">
+ <button v-if="isMe" class="delete-button" :title="$ts.delete" @click="del">
<img src="/client-assets/remove.png" alt="Delete"/>
</button>
- <div class="content" v-if="!message.isDeleted">
- <Mfm class="text" v-if="message.text" ref="text" :text="message.text" :i="$i"/>
- <div class="file" v-if="message.file">
+ <div v-if="!message.isDeleted" class="content">
+ <Mfm v-if="message.text" ref="text" class="text" :text="message.text" :i="$i"/>
+ <div v-if="message.file" class="file">
<a :href="message.file.url" rel="noopener" target="_blank" :title="message.file.name">
<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"/>
<p v-else>{{ message.file.name }}</p>
</a>
</div>
</div>
- <div class="content" v-else>
+ <div v-else class="content">
<p class="is-deleted">{{ $ts.deleted }}</p>
</div>
</div>
<div></div>
- <MkUrlPreview v-for="url in urls" :url="url" :key="url" style="margin: 8px 0;"/>
+ <MkUrlPreview v-for="url in urls" :key="url" :url="url" style="margin: 8px 0;"/>
<footer>
<template v-if="isGroup">
- <span class="read" v-if="message.reads.length > 0">{{ $ts.messageRead }} {{ message.reads.length }}</span>
+ <span v-if="message.reads.length > 0" class="read">{{ $ts.messageRead }} {{ message.reads.length }}</span>
</template>
<template v-else>
- <span class="read" v-if="isMe && message.isRead">{{ $ts.messageRead }}</span>
+ <span v-if="isMe && message.isRead" class="read">{{ $ts.messageRead }}</span>
</template>
<MkTime :time="message.createdAt"/>
<template v-if="message.is_edited"><i class="fas fa-pencil-alt"></i></template>
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index d71e415c8f..ffc7f7bc0d 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -6,17 +6,17 @@
<div class="_content mk-messaging-room">
<div class="body">
<MkLoading v-if="fetching"/>
- <p class="empty" v-if="!fetching && messages.length == 0"><i class="fas fa-info-circle"></i>{{ $ts.noMessagesYet }}</p>
- <p class="no-history" v-if="!fetching && messages.length > 0 && !existMoreMessages"><i class="fas fa-flag"></i>{{ $ts.noMoreHistory }}</p>
- <button class="more _button" ref="loadMore" :class="{ fetching: fetchingMoreMessages }" v-show="existMoreMessages" @click="fetchMoreMessages" :disabled="fetchingMoreMessages">
+ <p v-if="!fetching && messages.length == 0" class="empty"><i class="fas fa-info-circle"></i>{{ $ts.noMessagesYet }}</p>
+ <p v-if="!fetching && messages.length > 0 && !existMoreMessages" class="no-history"><i class="fas fa-flag"></i>{{ $ts.noMoreHistory }}</p>
+ <button v-show="existMoreMessages" ref="loadMore" class="more _button" :class="{ fetching: fetchingMoreMessages }" :disabled="fetchingMoreMessages" @click="fetchMoreMessages">
<template v-if="fetchingMoreMessages"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>{{ fetchingMoreMessages ? $ts.loading : $ts.loadMore }}
</button>
- <XList class="messages" :items="messages" v-slot="{ item: message }" direction="up" reversed>
- <XMessage :message="message" :is-group="group != null" :key="message.id"/>
+ <XList v-slot="{ item: message }" class="messages" :items="messages" direction="up" reversed>
+ <XMessage :key="message.id" :message="message" :is-group="group != null"/>
</XList>
</div>
<footer>
- <div class="typers" v-if="typers.length > 0">
+ <div v-if="typers.length > 0" class="typers">
<I18n :src="$ts.typingUsers" text-tag="span" class="users">
<template #users>
<b v-for="user in typers" :key="user.id" class="user">{{ user.username }}</b>
@@ -25,11 +25,11 @@
<MkEllipsis/>
</div>
<transition name="fade">
- <div class="new-message" v-show="showIndicator">
+ <div v-show="showIndicator" class="new-message">
<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-arrow-circle-down"></i>{{ $ts.newMessageExists }}</button>
</div>
</transition>
- <XForm v-if="!fetching" :user="user" :group="group" ref="form" class="form"/>
+ <XForm v-if="!fetching" ref="form" :user="user" :group="group" class="form"/>
</footer>
</div>
</div>
diff --git a/packages/client/src/pages/miauth.vue b/packages/client/src/pages/miauth.vue
index 6430588c46..6e85b784ff 100644
--- a/packages/client/src/pages/miauth.vue
+++ b/packages/client/src/pages/miauth.vue
@@ -1,24 +1,24 @@
<template>
<div v-if="$i">
- <div class="waiting _section" v-if="state == 'waiting'">
+ <div v-if="state == 'waiting'" class="waiting _section">
<div class="_content">
<MkLoading/>
</div>
</div>
- <div class="denied _section" v-if="state == 'denied'">
+ <div v-if="state == 'denied'" class="denied _section">
<div class="_content">
<p>{{ $ts._auth.denied }}</p>
</div>
</div>
- <div class="accepted _section" v-else-if="state == 'accepted'">
+ <div v-else-if="state == 'accepted'" class="accepted _section">
<div class="_content">
<p v-if="callback">{{ $ts._auth.callback }}<MkEllipsis/></p>
<p v-else>{{ $ts._auth.pleaseGoBack }}</p>
</div>
</div>
- <div class="_section" v-else>
- <div class="_title" v-if="name">{{ $t('_auth.shareAccess', { name: name }) }}</div>
- <div class="_title" v-else>{{ $ts._auth.shareAccessAsk }}</div>
+ <div v-else class="_section">
+ <div v-if="name" class="_title">{{ $t('_auth.shareAccess', { name: name }) }}</div>
+ <div v-else class="_title">{{ $ts._auth.shareAccessAsk }}</div>
<div class="_content">
<p>{{ $ts._auth.permissionAsk }}</p>
<ul>
@@ -26,12 +26,12 @@
</ul>
</div>
<div class="_footer">
- <MkButton @click="deny" inline>{{ $ts.cancel }}</MkButton>
- <MkButton @click="accept" inline primary>{{ $ts.accept }}</MkButton>
+ <MkButton inline @click="deny">{{ $ts.cancel }}</MkButton>
+ <MkButton inline primary @click="accept">{{ $ts.accept }}</MkButton>
</div>
</div>
</div>
-<div class="signin" v-else>
+<div v-else class="signin">
<MkSignin @login="onLogin"/>
</div>
</template>
diff --git a/packages/client/src/pages/my-antennas/editor.vue b/packages/client/src/pages/my-antennas/editor.vue
index bf3ed25b42..77199388c5 100644
--- a/packages/client/src/pages/my-antennas/editor.vue
+++ b/packages/client/src/pages/my-antennas/editor.vue
@@ -12,15 +12,15 @@
<option value="list">{{ $ts._antennaSources.userList }}</option>
<option value="group">{{ $ts._antennaSources.userGroup }}</option>
</MkSelect>
- <MkSelect v-model="userListId" v-if="src === 'list'" class="_formBlock">
+ <MkSelect v-if="src === 'list'" v-model="userListId" class="_formBlock">
<template #label>{{ $ts.userList }}</template>
- <option v-for="list in userLists" :value="list.id" :key="list.id">{{ list.name }}</option>
+ <option v-for="list in userLists" :key="list.id" :value="list.id">{{ list.name }}</option>
</MkSelect>
- <MkSelect v-model="userGroupId" v-else-if="src === 'group'" class="_formBlock">
+ <MkSelect v-else-if="src === 'group'" v-model="userGroupId" class="_formBlock">
<template #label>{{ $ts.userGroup }}</template>
- <option v-for="group in userGroups" :value="group.id" :key="group.id">{{ group.name }}</option>
+ <option v-for="group in userGroups" :key="group.id" :value="group.id">{{ group.name }}</option>
</MkSelect>
- <MkTextarea v-model="users" v-else-if="src === 'users'" class="_formBlock">
+ <MkTextarea v-else-if="src === 'users'" v-model="users" class="_formBlock">
<template #label>{{ $ts.users }}</template>
<template #caption>{{ $ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ $ts.addUser }}</button></template>
</MkTextarea>
@@ -38,8 +38,8 @@
<MkSwitch v-model="notify" class="_formBlock">{{ $ts.notifyAntenna }}</MkSwitch>
</div>
<div class="actions">
- <MkButton inline @click="saveAntenna()" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
- <MkButton inline @click="deleteAntenna()" v-if="antenna.id != null" danger><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton>
+ <MkButton inline primary @click="saveAntenna()"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+ <MkButton v-if="antenna.id != null" inline danger @click="deleteAntenna()"><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton>
</div>
</div>
</template>
diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue
index 029f1949d7..8fc17c3606 100644
--- a/packages/client/src/pages/my-antennas/index.vue
+++ b/packages/client/src/pages/my-antennas/index.vue
@@ -3,8 +3,8 @@
<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
<div class="_content">
- <MkPagination :pagination="pagination" #default="{items}" ref="list">
- <MkA class="ljoevbzj" v-for="antenna in items" :key="antenna.id" :to="`/my/antennas/${antenna.id}`">
+ <MkPagination #default="{items}" ref="list" :pagination="pagination">
+ <MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`">
<div class="name">{{ antenna.name }}</div>
</MkA>
</MkPagination>
diff --git a/packages/client/src/pages/my-clips/index.vue b/packages/client/src/pages/my-clips/index.vue
index cbcdb85fa5..fc2f6d7380 100644
--- a/packages/client/src/pages/my-clips/index.vue
+++ b/packages/client/src/pages/my-clips/index.vue
@@ -1,9 +1,9 @@
<template>
<div class="_section qtcaoidl">
- <MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
+ <MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
<div class="_content">
- <MkPagination :pagination="pagination" #default="{items}" ref="list" class="list">
+ <MkPagination #default="{items}" ref="list" :pagination="pagination" class="list">
<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
<b>{{ item.name }}</b>
<div v-if="item.description" class="description">{{ item.description }}</div>
diff --git a/packages/client/src/pages/my-groups/group.vue b/packages/client/src/pages/my-groups/group.vue
index b79e1cb49c..e13e8c0e57 100644
--- a/packages/client/src/pages/my-groups/group.vue
+++ b/packages/client/src/pages/my-groups/group.vue
@@ -16,7 +16,7 @@
<div class="_title">{{ $ts.members }}</div>
<div class="_content">
<div class="users">
- <div class="user _panel" v-for="user in users" :key="user.id">
+ <div v-for="user in users" :key="user.id" class="user _panel">
<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
<div class="body">
<MkUserName :user="user" class="name"/>
diff --git a/packages/client/src/pages/my-groups/index.vue b/packages/client/src/pages/my-groups/index.vue
index 1c66eb14dd..e203b497df 100644
--- a/packages/client/src/pages/my-groups/index.vue
+++ b/packages/client/src/pages/my-groups/index.vue
@@ -9,34 +9,34 @@
</div>
<div class="_section">
- <div class="_content" v-if="tab === 'owned'">
- <MkButton @click="create" primary style="margin: 0 auto var(--margin) auto;"><i class="fas fa-plus"></i> {{ $ts.createGroup }}</MkButton>
+ <div v-if="tab === 'owned'" class="_content">
+ <MkButton primary style="margin: 0 auto var(--margin) auto;" @click="create"><i class="fas fa-plus"></i> {{ $ts.createGroup }}</MkButton>
- <MkPagination :pagination="ownedPagination" #default="{items}" ref="owned">
- <div class="_card" v-for="group in items" :key="group.id">
+ <MkPagination #default="{items}" ref="owned" :pagination="ownedPagination">
+ <div v-for="group in items" :key="group.id" class="_card">
<div class="_title"><MkA :to="`/my/groups/${ group.id }`" class="_link">{{ group.name }}</MkA></div>
<div class="_content"><MkAvatars :user-ids="group.userIds"/></div>
</div>
</MkPagination>
</div>
- <div class="_content" v-else-if="tab === 'joined'">
- <MkPagination :pagination="joinedPagination" #default="{items}" ref="joined">
- <div class="_card" v-for="group in items" :key="group.id">
+ <div v-else-if="tab === 'joined'" class="_content">
+ <MkPagination #default="{items}" ref="joined" :pagination="joinedPagination">
+ <div v-for="group in items" :key="group.id" class="_card">
<div class="_title">{{ group.name }}</div>
<div class="_content"><MkAvatars :user-ids="group.userIds"/></div>
</div>
</MkPagination>
</div>
- <div class="_content" v-else-if="tab === 'invites'">
- <MkPagination :pagination="invitationPagination" #default="{items}" ref="invitations">
- <div class="_card" v-for="invitation in items" :key="invitation.id">
+ <div v-else-if="tab === 'invites'" class="_content">
+ <MkPagination #default="{items}" ref="invitations" :pagination="invitationPagination">
+ <div v-for="invitation in items" :key="invitation.id" class="_card">
<div class="_title">{{ invitation.group.name }}</div>
<div class="_content"><MkAvatars :user-ids="invitation.group.userIds"/></div>
<div class="_footer">
- <MkButton @click="acceptInvite(invitation)" primary inline><i class="fas fa-check"></i> {{ $ts.accept }}</MkButton>
- <MkButton @click="rejectInvite(invitation)" primary inline><i class="fas fa-ban"></i> {{ $ts.reject }}</MkButton>
+ <MkButton primary inline @click="acceptInvite(invitation)"><i class="fas fa-check"></i> {{ $ts.accept }}</MkButton>
+ <MkButton primary inline @click="rejectInvite(invitation)"><i class="fas fa-ban"></i> {{ $ts.reject }}</MkButton>
</div>
</div>
</MkPagination>
diff --git a/packages/client/src/pages/my-lists/index.vue b/packages/client/src/pages/my-lists/index.vue
index a1b0fee317..645035d4ed 100644
--- a/packages/client/src/pages/my-lists/index.vue
+++ b/packages/client/src/pages/my-lists/index.vue
@@ -1,8 +1,8 @@
<template>
<div class="qkcjvfiv">
- <MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
+ <MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
- <MkPagination :pagination="pagination" #default="{items}" class="lists _content" ref="list">
+ <MkPagination #default="{items}" ref="list" :pagination="pagination" class="lists _content">
<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
<div class="name">{{ list.name }}</div>
<MkAvatars :user-ids="list.userIds"/>
diff --git a/packages/client/src/pages/my-lists/list.vue b/packages/client/src/pages/my-lists/list.vue
index fd986b4097..bf73cdafde 100644
--- a/packages/client/src/pages/my-lists/list.vue
+++ b/packages/client/src/pages/my-lists/list.vue
@@ -15,7 +15,7 @@
<div class="_title">{{ $ts.members }}</div>
<div class="_content">
<div class="users">
- <div class="user _panel" v-for="user in users" :key="user.id">
+ <div v-for="user in users" :key="user.id" class="user _panel">
<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
<div class="body">
<MkUserName :user="user" class="name"/>
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index ecd391dfbf..d40082381c 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -3,7 +3,7 @@
<div class="fcuexfpr">
<transition name="fade" mode="out-in">
<div v-if="note" class="note">
- <div class="_gap" v-if="showNext">
+ <div v-if="showNext" class="_gap">
<XNotes class="_content" :pagination="next" :no-gap="true"/>
</div>
@@ -11,9 +11,9 @@
<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="fas fa-chevron-up"></i></MkButton>
<div class="note _gap">
<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_isolated"/>
- <XNoteDetailed v-model:note="note" :key="note.id" class="_isolated note"/>
+ <XNoteDetailed :key="note.id" v-model:note="note" class="_isolated note"/>
</div>
- <div class="_content clips _gap" v-if="clips && clips.length > 0">
+ <div v-if="clips && clips.length > 0" class="_content clips _gap">
<div class="title">{{ $ts.clip }}</div>
<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
<b>{{ item.name }}</b>
@@ -26,7 +26,7 @@
<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><i class="fas fa-chevron-down"></i></MkButton>
</div>
- <div class="_gap" v-if="showPrev">
+ <div v-if="showPrev" class="_gap">
<XNotes class="_content" :pagination="prev" :no-gap="true"/>
</div>
</div>
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index f8e610a719..cf8e934b59 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -1,7 +1,7 @@
<template>
<MkSpacer :content-max="800">
<div class="clupoqwt">
- <XNotifications class="notifications" @before="before" @after="after" :include-types="includeTypes" :unread-only="tab === 'unread'"/>
+ <XNotifications class="notifications" :include-types="includeTypes" :unread-only="tab === 'unread'" @before="before" @after="after"/>
</div>
</MkSpacer>
</template>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
index 68e4e7b5a2..827679d6a9 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
@@ -1,6 +1,6 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
-<XContainer @remove="() => $emit('remove')" :draggable="true">
+<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.button }}</template>
<section class="xfhsjczc">
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue b/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
index fdc0bb6804..ba5d0ba1f7 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
@@ -1,6 +1,6 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
-<XContainer @remove="() => $emit('remove')" :draggable="true">
+<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-paint-brush"></i> {{ $ts._pages.blocks.canvas }}</template>
<section style="padding: 0 16px 0 16px;">
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
index c16e0bc2a6..dc98a610ba 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
@@ -1,6 +1,6 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
-<XContainer @remove="() => $emit('remove')" :draggable="true">
+<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.counter }}</template>
<section style="padding: 0 16px 0 16px;">
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
index 0c6dd48c95..be3a520ea5 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
@@ -1,9 +1,9 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
-<XContainer @remove="() => $emit('remove')" :draggable="true">
+<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-question"></i> {{ $ts._pages.blocks.if }}</template>
<template #func>
- <button @click="add()" class="_button">
+ <button class="_button" @click="add()">
<i class="fas fa-plus"></i>
</button>
</template>
@@ -20,7 +20,7 @@
</optgroup>
</MkSelect>
- <XBlocks class="children" v-model="value.children" :hpml="hpml"/>
+ <XBlocks v-model="value.children" class="children" :hpml="hpml"/>
</section>
</XContainer>
</template>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
index 6f815d3419..9a6adab30a 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
@@ -1,6 +1,6 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
-<XContainer @remove="() => $emit('remove')" :draggable="true">
+<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-image"></i> {{ $ts._pages.blocks.image }}</template>
<template #func>
<button @click="choose()">
@@ -9,7 +9,7 @@
</template>
<section class="oyyftmcf">
- <MkDriveFileThumbnail class="preview" v-if="file" :file="file" fit="contain" @click="choose()"/>
+ <MkDriveFileThumbnail v-if="file" class="preview" :file="file" fit="contain" @click="choose()"/>
</section>
</XContainer>
</template>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
index f3aeb10129..2d4d9c5dcc 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
@@ -1,6 +1,6 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
-<XContainer @remove="() => $emit('remove')" :draggable="true">
+<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-sticky-note"></i> {{ $ts._pages.blocks.note }}</template>
<section style="padding: 0 16px 0 16px;">
@@ -10,8 +10,8 @@
</MkInput>
<MkSwitch v-model="value.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch>
- <XNote v-if="note && !value.detailed" v-model:note="note" :key="note.id + ':normal'" style="margin-bottom: 16px;"/>
- <XNoteDetailed v-if="note && value.detailed" v-model:note="note" :key="note.id + ':detail'" style="margin-bottom: 16px;"/>
+ <XNote v-if="note && !value.detailed" :key="note.id + ':normal'" v-model:note="note" style="margin-bottom: 16px;"/>
+ <XNoteDetailed v-if="note && value.detailed" :key="note.id + ':detail'" v-model:note="note" style="margin-bottom: 16px;"/>
</section>
</XContainer>
</template>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
index 7ad3b11c2a..9083f0c493 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
@@ -1,6 +1,6 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
-<XContainer @remove="() => $emit('remove')" :draggable="true">
+<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.numberInput }}</template>
<section style="padding: 0 16px 0 16px;">
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
index b2b1940352..3af720f4b7 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
@@ -1,6 +1,6 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
-<XContainer @remove="() => $emit('remove')" :draggable="true">
+<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-paper-plane"></i> {{ $ts._pages.blocks.post }}</template>
<section style="padding: 16px;">
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
index 16d4bf212c..2502a54d79 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
@@ -1,6 +1,6 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
-<XContainer @remove="() => $emit('remove')" :draggable="true">
+<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.radioButton }}</template>
<section style="padding: 0 16px 16px 16px;">
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.section.vue b/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
index 49031f1866..1684895fe1 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
@@ -1,18 +1,18 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
-<XContainer @remove="() => $emit('remove')" :draggable="true">
+<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-sticky-note"></i> {{ value.title }}</template>
<template #func>
- <button @click="rename()" class="_button">
+ <button class="_button" @click="rename()">
<i class="fas fa-pencil-alt"></i>
</button>
- <button @click="add()" class="_button">
+ <button class="_button" @click="add()">
<i class="fas fa-plus"></i>
</button>
</template>
<section class="ilrvjyvi">
- <XBlocks class="children" v-model="value.children" :hpml="hpml"/>
+ <XBlocks v-model="value.children" class="children" :hpml="hpml"/>
</section>
</XContainer>
</template>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
index b7eefd5f82..b989dce0ac 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
@@ -1,6 +1,6 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
-<XContainer @remove="() => $emit('remove')" :draggable="true">
+<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.switch }}</template>
<section class="kjuadyyj">
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
index ba7fbbb451..b25ac38d51 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
@@ -1,6 +1,6 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
-<XContainer @remove="() => $emit('remove')" :draggable="true">
+<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.textInput }}</template>
<section style="padding: 0 16px 0 16px;">
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
index 003b159047..f23a8ded90 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
@@ -1,6 +1,6 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
-<XContainer @remove="() => $emit('remove')" :draggable="true">
+<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-align-left"></i> {{ $ts._pages.blocks.text }}</template>
<section class="vckmsadr">
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
index a8a66e7071..f61f0cb1b7 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
@@ -1,6 +1,6 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
-<XContainer @remove="() => $emit('remove')" :draggable="true">
+<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.textareaInput }}</template>
<section style="padding: 0 16px 16px 16px;">
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue b/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
index 122ba62dc3..bbabe28488 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
@@ -1,6 +1,6 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
-<XContainer @remove="() => $emit('remove')" :draggable="true">
+<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-align-left"></i> {{ $ts._pages.blocks.textarea }}</template>
<section class="ihymsbbe">
diff --git a/packages/client/src/pages/page-editor/page-editor.blocks.vue b/packages/client/src/pages/page-editor/page-editor.blocks.vue
index b91d9abae8..dc363fe251 100644
--- a/packages/client/src/pages/page-editor/page-editor.blocks.vue
+++ b/packages/client/src/pages/page-editor/page-editor.blocks.vue
@@ -1,7 +1,7 @@
<template>
-<XDraggable tag="div" v-model="blocks" item-key="id" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
+<XDraggable v-model="blocks" tag="div" item-key="id" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
<template #item="{element}">
- <component :is="'x-' + element.type" :value="element" @update:value="updateItem" @remove="() => removeItem(element)" :hpml="hpml"/>
+ <component :is="'x-' + element.type" :value="element" :hpml="hpml" @update:value="updateItem" @remove="() => removeItem(element)"/>
</template>
</XDraggable>
</template>
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index afd261fac7..6927e55868 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -4,20 +4,20 @@
<div class="title"><slot name="header"></slot></div>
<div class="buttons">
<slot name="func"></slot>
- <button v-if="removable" @click="remove()" class="_button">
+ <button v-if="removable" class="_button" @click="remove()">
<i class="fas fa-trash-alt"></i>
</button>
<button v-if="draggable" class="drag-handle _button">
<i class="fas fa-bars"></i>
</button>
- <button @click="toggleContent(!showBody)" class="_button">
+ <button class="_button" @click="toggleContent(!showBody)">
<template v-if="showBody"><i class="fas fa-angle-up"></i></template>
<template v-else><i class="fas fa-angle-down"></i></template>
</button>
</div>
</header>
- <p v-show="showBody" class="error" v-if="error != null">{{ $t('_pages.script.typeError', { slot: error.arg + 1, expect: $t(`script.types.${error.expect}`), actual: $t(`script.types.${error.actual}`) }) }}</p>
- <p v-show="showBody" class="warn" v-if="warn != null">{{ $t('_pages.script.thereIsEmptySlot', { slot: warn.slot + 1 }) }}</p>
+ <p v-show="showBody" v-if="error != null" class="error">{{ $t('_pages.script.typeError', { slot: error.arg + 1, expect: $t(`script.types.${error.expect}`), actual: $t(`script.types.${error.actual}`) }) }}</p>
+ <p v-show="showBody" v-if="warn != null" class="warn">{{ $t('_pages.script.thereIsEmptySlot', { slot: warn.slot + 1 }) }}</p>
<div v-show="showBody" class="body">
<slot></slot>
</div>
diff --git a/packages/client/src/pages/page-editor/page-editor.script-block.vue b/packages/client/src/pages/page-editor/page-editor.script-block.vue
index 7a91ab16f4..1d3dc25d4b 100644
--- a/packages/client/src/pages/page-editor/page-editor.script-block.vue
+++ b/packages/client/src/pages/page-editor/page-editor.script-block.vue
@@ -1,9 +1,9 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
-<XContainer :removable="removable" @remove="() => $emit('remove')" :error="error" :warn="warn" :draggable="draggable">
- <template #header><i v-if="icon" :class="icon"></i> <template v-if="title">{{ title }} <span class="turmquns" v-if="typeText">({{ typeText }})</span></template><template v-else-if="typeText">{{ typeText }}</template></template>
+<XContainer :removable="removable" :error="error" :warn="warn" :draggable="draggable" @remove="() => $emit('remove')">
+ <template #header><i v-if="icon" :class="icon"></i> <template v-if="title">{{ title }} <span v-if="typeText" class="turmquns">({{ typeText }})</span></template><template v-else-if="typeText">{{ typeText }}</template></template>
<template #func>
- <button @click="changeType()" class="_button">
+ <button class="_button" @click="changeType()">
<i class="fas fa-pencil-alt"></i>
</button>
</template>
@@ -48,10 +48,10 @@
<XV v-if="modelValue.value.expression" v-model="modelValue.value.expression" :title="$t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="value.value.slots" :name="name"/>
</section>
<section v-else-if="modelValue.type.startsWith('fn:')" class="" style="padding:16px;">
- <XV v-for="(x, i) in modelValue.args" v-model="value.args[i]" :title="hpml.getVarByName(modelValue.type.split(':')[1]).value.slots[i].name" :get-expected-type="() => null" :hpml="hpml" :name="name" :key="i"/>
+ <XV v-for="(x, i) in modelValue.args" :key="i" v-model="value.args[i]" :title="hpml.getVarByName(modelValue.type.split(':')[1]).value.slots[i].name" :get-expected-type="() => null" :hpml="hpml" :name="name"/>
</section>
<section v-else class="" style="padding:16px;">
- <XV v-for="(x, i) in modelValue.args" v-model="modelValue.args[i]" :title="$t(`_pages.script.blocks._${modelValue.type}.arg${i + 1}`)" :get-expected-type="() => _getExpectedType(i)" :hpml="hpml" :name="name" :fn-slots="fnSlots" :key="i"/>
+ <XV v-for="(x, i) in modelValue.args" :key="i" v-model="modelValue.args[i]" :title="$t(`_pages.script.blocks._${modelValue.type}.arg${i + 1}`)" :get-expected-type="() => _getExpectedType(i)" :hpml="hpml" :name="name" :fn-slots="fnSlots"/>
</section>
</XContainer>
</template>
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 31b1dddef5..4de1121fd3 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -2,9 +2,9 @@
<div>
<div class="jqqmcavi" style="margin: 16px;">
<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkButton>
- <MkButton inline @click="save" primary class="button" v-if="!readonly"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
- <MkButton inline @click="duplicate" class="button" v-if="pageId"><i class="fas fa-copy"></i> {{ $ts.duplicate }}</MkButton>
- <MkButton inline @click="del" class="button" v-if="pageId && !readonly" danger><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
+ <MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+ <MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="fas fa-copy"></i> {{ $ts.duplicate }}</MkButton>
+ <MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
</div>
<div v-if="tab === 'settings'">
@@ -36,7 +36,7 @@
<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="fas fa-plus"></i> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
<div v-else-if="eyeCatchingImage">
<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
- <MkButton @click="removeEyeCatchingImage()" v-if="!readonly"><i class="fas fa-trash-alt"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
+ <MkButton v-if="!readonly" @click="removeEyeCatchingImage()"><i class="fas fa-trash-alt"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
</div>
</div>
</div>
@@ -44,35 +44,35 @@
<div v-else-if="tab === 'contents'">
<div style="padding: 16px;">
- <XBlocks class="content" v-model="content" :hpml="hpml"/>
+ <XBlocks v-model="content" class="content" :hpml="hpml"/>
- <MkButton @click="add()" v-if="!readonly"><i class="fas fa-plus"></i></MkButton>
+ <MkButton v-if="!readonly" @click="add()"><i class="fas fa-plus"></i></MkButton>
</div>
</div>
<div v-else-if="tab === 'variables'">
<div class="qmuvgica">
- <XDraggable tag="div" class="variables" v-show="variables.length > 0" v-model="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
+ <XDraggable v-show="variables.length > 0" v-model="variables" tag="div" class="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
<template #item="{element}">
<XVariable
:modelValue="element"
:removable="true"
- @remove="() => removeVariable(element)"
:hpml="hpml"
:name="element.name"
:title="element.name"
:draggable="true"
+ @remove="() => removeVariable(element)"
/>
</template>
</XDraggable>
- <MkButton @click="addVariable()" class="add" v-if="!readonly"><i class="fas fa-plus"></i></MkButton>
+ <MkButton v-if="!readonly" class="add" @click="addVariable()"><i class="fas fa-plus"></i></MkButton>
</div>
</div>
<div v-else-if="tab === 'script'">
<div>
- <MkTextarea class="_code" v-model="script"/>
+ <MkTextarea v-model="script" class="_code"/>
</div>
</div>
</div>
@@ -109,6 +109,14 @@ export default defineComponent({
XVariable, XBlocks, MkTextarea, MkContainer, MkButton, MkSelect, MkSwitch, MkInput,
},
+ provide() {
+ return {
+ readonly: this.readonly,
+ getScriptBlockList: this.getScriptBlockList,
+ getPageBlockList: this.getPageBlockList
+ }
+ },
+
props: {
initPageId: {
type: String,
@@ -242,14 +250,6 @@ export default defineComponent({
}
},
- provide() {
- return {
- readonly: this.readonly,
- getScriptBlockList: this.getScriptBlockList,
- getPageBlockList: this.getPageBlockList
- }
- },
-
methods: {
getSaveOptions() {
return {
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 5cc56e443b..efbdc175d8 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -1,7 +1,7 @@
<template>
<div>
<transition name="fade" mode="out-in">
- <div v-if="page" class="xcukqgmh" :key="page.id" v-size="{ max: [450] }">
+ <div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh">
<div class="_block main">
<!--
<div class="header">
@@ -9,19 +9,19 @@
</div>
-->
<div class="banner">
- <img :src="page.eyeCatchingImage.url" v-if="page.eyeCatchingImageId"/>
+ <img v-if="page.eyeCatchingImageId" :src="page.eyeCatchingImage.url"/>
</div>
<div class="content">
<XPage :page="page"/>
</div>
<div class="actions">
<div class="like">
- <MkButton class="button" @click="unlike()" v-if="page.isLiked" v-tooltip="$ts._pages.unlike" primary><i class="fas fa-heart"></i><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
- <MkButton class="button" @click="like()" v-else v-tooltip="$ts._pages.like"><i class="far fa-heart"></i><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
+ <MkButton v-if="page.isLiked" v-tooltip="$ts._pages.unlike" class="button" primary @click="unlike()"><i class="fas fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+ <MkButton v-else v-tooltip="$ts._pages.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
</div>
<div class="other">
- <button class="_button" @click="shareWithNote" v-tooltip="$ts.shareWithNote" v-click-anime><i class="fas fa-retweet fa-fw"></i></button>
- <button class="_button" @click="share" v-tooltip="$ts.share" v-click-anime><i class="fas fa-share-alt fa-fw"></i></button>
+ <button v-tooltip="$ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
+ <button v-tooltip="$ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
</div>
</div>
<div class="user">
@@ -36,8 +36,8 @@
<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ $ts._pages.viewSource }}</MkA>
<template v-if="$i && $i.id === page.userId">
<MkA :to="`/pages/edit/${page.id}`" class="link">{{ $ts._pages.editThisPage }}</MkA>
- <button v-if="$i.pinnedPageId === page.id" @click="pin(false)" class="link _textButton">{{ $ts.unpin }}</button>
- <button v-else @click="pin(true)" class="link _textButton">{{ $ts.pin }}</button>
+ <button v-if="$i.pinnedPageId === page.id" class="link _textButton" @click="pin(false)">{{ $ts.unpin }}</button>
+ <button v-else class="link _textButton" @click="pin(true)">{{ $ts.pin }}</button>
</template>
</div>
</div>
@@ -48,8 +48,8 @@
<MkAd :prefer="['horizontal', 'horizontal-big']"/>
<MkContainer :max-height="300" :foldable="true" class="other">
<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
- <MkPagination :pagination="otherPostsPagination" #default="{items}">
- <MkPagePreview v-for="page in items" :page="page" :key="page.id" class="_gap"/>
+ <MkPagination #default="{items}" :pagination="otherPostsPagination">
+ <MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
</MkPagination>
</MkContainer>
</div>
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index d66fc2ad5b..a8ded5cda9 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -1,29 +1,29 @@
<template>
<MkSpacer>
<!-- TODO: MkHeaderに統合 -->
- <MkTab v-model="tab" v-if="$i">
+ <MkTab v-if="$i" v-model="tab">
<option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option>
<option value="my"><i class="fas fa-edit"></i> {{ $ts._pages.my }}</option>
<option value="liked"><i class="fas fa-heart"></i> {{ $ts._pages.liked }}</option>
</MkTab>
<div class="_section">
- <div class="rknalgpo _content" v-if="tab === 'featured'">
- <MkPagination :pagination="featuredPagesPagination" #default="{items}">
- <MkPagePreview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/>
+ <div v-if="tab === 'featured'" class="rknalgpo _content">
+ <MkPagination #default="{items}" :pagination="featuredPagesPagination">
+ <MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
</MkPagination>
</div>
- <div class="rknalgpo _content my" v-if="tab === 'my'">
+ <div v-if="tab === 'my'" class="rknalgpo _content my">
<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
- <MkPagination :pagination="myPagesPagination" #default="{items}">
- <MkPagePreview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/>
+ <MkPagination #default="{items}" :pagination="myPagesPagination">
+ <MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
</MkPagination>
</div>
- <div class="rknalgpo _content" v-if="tab === 'liked'">
- <MkPagination :pagination="likedPagesPagination" #default="{items}">
- <MkPagePreview v-for="like in items" class="ckltabjg" :page="like.page" :key="like.page.id"/>
+ <div v-if="tab === 'liked'" class="rknalgpo _content">
+ <MkPagination #default="{items}" :pagination="likedPagesPagination">
+ <MkPagePreview v-for="like in items" :key="like.page.id" class="ckltabjg" :page="like.page"/>
</MkPagination>
</div>
</div>
diff --git a/packages/client/src/pages/reversi/game.board.vue b/packages/client/src/pages/reversi/game.board.vue
index 529e00d969..eb6fef2799 100644
--- a/packages/client/src/pages/reversi/game.board.vue
+++ b/packages/client/src/pages/reversi/game.board.vue
@@ -3,16 +3,16 @@
<header><b><MkA :to="userPage(blackUser)"><MkUserName :user="blackUser"/></MkA></b>({{ $ts._reversi.black }}) vs <b><MkA :to="userPage(whiteUser)"><MkUserName :user="whiteUser"/></MkA></b>({{ $ts._reversi.white }})</header>
<div style="overflow: hidden; line-height: 28px;">
- <p class="turn" v-if="!iAmPlayer && !game.isEnded">
+ <p v-if="!iAmPlayer && !game.isEnded" class="turn">
<Mfm :key="'turn:' + turnUser().name" :text="$t('_reversi.turnOf', { name: turnUser().name })" :plain="true" :custom-emojis="turnUser().emojis"/>
<MkEllipsis/>
</p>
- <p class="turn" v-if="logPos != logs.length">
+ <p v-if="logPos != logs.length" class="turn">
<Mfm :key="'past-turn-of:' + turnUser().name" :text="$t('_reversi.pastTurnOf', { name: turnUser().name })" :plain="true" :custom-emojis="turnUser().emojis"/>
</p>
- <p class="turn1" v-if="iAmPlayer && !game.isEnded && !isMyTurn()">{{ $ts._reversi.opponentTurn }}<MkEllipsis/></p>
- <p class="turn2" v-if="iAmPlayer && !game.isEnded && isMyTurn()" style="animation: tada 1s linear infinite both;">{{ $ts._reversi.myTurn }}</p>
- <p class="result" v-if="game.isEnded && logPos == logs.length">
+ <p v-if="iAmPlayer && !game.isEnded && !isMyTurn()" class="turn1">{{ $ts._reversi.opponentTurn }}<MkEllipsis/></p>
+ <p v-if="iAmPlayer && !game.isEnded && isMyTurn()" class="turn2" style="animation: tada 1s linear infinite both;">{{ $ts._reversi.myTurn }}</p>
+ <p v-if="game.isEnded && logPos == logs.length" class="result">
<template v-if="game.winner">
<Mfm :key="'won'" :text="$t('_reversi.won', { name: game.winner.name })" :plain="true" :custom-emojis="game.winner.emojis"/>
<span v-if="game.surrendered != null"> ({{ $ts._reversi.surrendered }})</span>
@@ -22,18 +22,18 @@
</div>
<div class="board">
- <div class="labels-x" v-if="$store.state.gamesReversiShowBoardLabels">
+ <div v-if="$store.state.gamesReversiShowBoardLabels" class="labels-x">
<span v-for="i in game.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
</div>
<div class="flex">
- <div class="labels-y" v-if="$store.state.gamesReversiShowBoardLabels">
+ <div v-if="$store.state.gamesReversiShowBoardLabels" class="labels-y">
<div v-for="i in game.map.length">{{ i }}</div>
</div>
<div class="cells" :style="cellsStyle">
<div v-for="(stone, i) in o.board"
:class="{ empty: stone == null, none: o.map[i] == 'null', isEnded: game.isEnded, myTurn: !game.isEnded && isMyTurn(), can: turnUser() ? o.canPut(turnUser().id == blackUser.id, i) : null, prev: o.prevPos == i }"
- @click="set(i)"
:title="`${String.fromCharCode(65 + o.transformPosToXy(i)[0])}${o.transformPosToXy(i)[1] + 1}`"
+ @click="set(i)"
>
<template v-if="$store.state.gamesReversiUseAvatarStones || true">
<img v-if="stone === true" :src="blackUser.avatarUrl" alt="black">
@@ -45,30 +45,30 @@
</template>
</div>
</div>
- <div class="labels-y" v-if="$store.state.gamesReversiShowBoardLabels">
+ <div v-if="$store.state.gamesReversiShowBoardLabels" class="labels-y">
<div v-for="i in game.map.length">{{ i }}</div>
</div>
</div>
- <div class="labels-x" v-if="$store.state.gamesReversiShowBoardLabels">
+ <div v-if="$store.state.gamesReversiShowBoardLabels" class="labels-x">
<span v-for="i in game.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
</div>
</div>
<p class="status"><b>{{ $t('_reversi.turnCount', { count: logPos }) }}</b> {{ $ts._reversi.black }}:{{ o.blackCount }} {{ $ts._reversi.white }}:{{ o.whiteCount }} {{ $ts._reversi.total }}:{{ o.blackCount + o.whiteCount }}</p>
- <div class="actions" v-if="!game.isEnded && iAmPlayer">
- <MkButton @click="surrender" inline>{{ $ts._reversi.surrender }}</MkButton>
+ <div v-if="!game.isEnded && iAmPlayer" class="actions">
+ <MkButton inline @click="surrender">{{ $ts._reversi.surrender }}</MkButton>
</div>
- <div class="player" v-if="game.isEnded">
+ <div v-if="game.isEnded" class="player">
<span>{{ logPos }} / {{ logs.length }}</span>
- <div class="buttons" v-if="!autoplaying">
- <MkButton inline @click="logPos = 0" :disabled="logPos == 0"><i class="fas fa-angle-double-left"></i></MkButton>
- <MkButton inline @click="logPos--" :disabled="logPos == 0"><i class="fas fa-angle-left"></i></MkButton>
- <MkButton inline @click="logPos++" :disabled="logPos == logs.length"><i class="fas fa-angle-right"></i></MkButton>
- <MkButton inline @click="logPos = logs.length" :disabled="logPos == logs.length"><i class="fas fa-angle-double-right"></i></MkButton>
+ <div v-if="!autoplaying" class="buttons">
+ <MkButton inline :disabled="logPos == 0" @click="logPos = 0"><i class="fas fa-angle-double-left"></i></MkButton>
+ <MkButton inline :disabled="logPos == 0" @click="logPos--"><i class="fas fa-angle-left"></i></MkButton>
+ <MkButton inline :disabled="logPos == logs.length" @click="logPos++"><i class="fas fa-angle-right"></i></MkButton>
+ <MkButton inline :disabled="logPos == logs.length" @click="logPos = logs.length"><i class="fas fa-angle-double-right"></i></MkButton>
</div>
- <MkButton @click="autoplay()" :disabled="autoplaying" style="margin: var(--margin) auto 0 auto;"><i class="fas fa-play"></i></MkButton>
+ <MkButton :disabled="autoplaying" style="margin: var(--margin) auto 0 auto;" @click="autoplay()"><i class="fas fa-play"></i></MkButton>
</div>
<div class="info">
diff --git a/packages/client/src/pages/reversi/game.setting.vue b/packages/client/src/pages/reversi/game.setting.vue
index e6a6661f16..28bc598cfd 100644
--- a/packages/client/src/pages/reversi/game.setting.vue
+++ b/packages/client/src/pages/reversi/game.setting.vue
@@ -8,7 +8,7 @@
<div class="card map _panel">
<header>
<select v-model="mapName" :placeholder="$ts._reversi.chooseBoard" @change="onMapChange">
- <option label="-Custom-" :value="mapName" v-if="mapName == '-Custom-'"/>
+ <option v-if="mapName == '-Custom-'" label="-Custom-" :value="mapName"/>
<option :label="$ts.random" :value="null"/>
<optgroup v-for="c in mapCategories" :key="c" :label="c">
<option v-for="m in Object.values(maps).filter(m => m.category == c)" :key="m.name" :label="m.name" :value="m.name">{{ m.name }}</option>
@@ -17,8 +17,8 @@
</header>
<div>
- <div class="random" v-if="game.map == null"><i class="fas fa-dice"></i></div>
- <div class="board" v-else :style="{ 'grid-template-rows': `repeat(${ game.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.map[0].length }, 1fr)` }">
+ <div v-if="game.map == null" class="random"><i class="fas fa-dice"></i></div>
+ <div v-else class="board" :style="{ 'grid-template-rows': `repeat(${ game.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.map[0].length }, 1fr)` }">
<div v-for="(x, i) in game.map.join('')" :class="{ none: x == ' ' }" @click="onPixelClick(i, x)">
<i v-if="x === 'b'" class="fas fa-circle"></i>
<i v-if="x === 'w'" class="far fa-circle"></i>
@@ -63,16 +63,16 @@
</div>
</div>
- <div class="card form _panel" v-if="form">
+ <div v-if="form" class="card form _panel">
<header>
<span>{{ $ts._reversi.botSettings }}</span>
</header>
<div>
<template v-for="item in form">
- <MkSwitch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" @change="onChangeForm(item)">{{ item.label || item.desc || '' }}</MkSwitch>
+ <MkSwitch v-if="item.type == 'switch'" :key="item.id" v-model="item.value" @change="onChangeForm(item)">{{ item.label || item.desc || '' }}</MkSwitch>
- <div class="card" v-if="item.type == 'radio'" :key="item.id">
+ <div v-if="item.type == 'radio'" :key="item.id" class="card">
<header>
<span>{{ item.label }}</span>
</header>
@@ -82,17 +82,17 @@
</div>
</div>
- <div class="card" v-if="item.type == 'slider'" :key="item.id">
+ <div v-if="item.type == 'slider'" :key="item.id" class="card">
<header>
<span>{{ item.label }}</span>
</header>
<div>
- <input type="range" :min="item.min" :max="item.max" :step="item.step || 1" v-model="item.value" @change="onChangeForm(item)"/>
+ <input v-model="item.value" type="range" :min="item.min" :max="item.max" :step="item.step || 1" @change="onChangeForm(item)"/>
</div>
</div>
- <div class="card" v-if="item.type == 'textbox'" :key="item.id">
+ <div v-if="item.type == 'textbox'" :key="item.id" class="card">
<header>
<span>{{ item.label }}</span>
</header>
@@ -116,8 +116,8 @@
<div class="actions">
<MkButton inline @click="exit">{{ $ts.cancel }}</MkButton>
- <MkButton inline primary @click="accept" v-if="!isAccepted">{{ $ts._reversi.ready }}</MkButton>
- <MkButton inline primary @click="cancel" v-if="isAccepted">{{ $ts._reversi.cancelReady }}</MkButton>
+ <MkButton v-if="!isAccepted" inline primary @click="accept">{{ $ts._reversi.ready }}</MkButton>
+ <MkButton v-if="isAccepted" inline primary @click="cancel">{{ $ts._reversi.cancelReady }}</MkButton>
</div>
</footer>
</div>
diff --git a/packages/client/src/pages/reversi/index.vue b/packages/client/src/pages/reversi/index.vue
index 1b8f1ffb71..0b118531fc 100644
--- a/packages/client/src/pages/reversi/index.vue
+++ b/packages/client/src/pages/reversi/index.vue
@@ -1,16 +1,16 @@
<template>
-<div class="bgvwxkhb" v-if="!matching">
+<div v-if="!matching" class="bgvwxkhb">
<h1>Misskey {{ $ts._reversi.reversi }}</h1>
<div class="play">
- <MkButton primary round @click="match" style="margin: var(--margin) auto 0 auto;">{{ $ts.invite }}</MkButton>
+ <MkButton primary round style="margin: var(--margin) auto 0 auto;" @click="match">{{ $ts.invite }}</MkButton>
</div>
<div class="_section">
<MkFolder v-if="invitations.length > 0">
<template #header>{{ $ts.invitations }}</template>
<div class="nfcacttm">
- <button class="invitation _panel _button" v-for="invitation in invitations" tabindex="-1" @click="accept(invitation)">
+ <button v-for="invitation in invitations" class="invitation _panel _button" tabindex="-1" @click="accept(invitation)">
<MkAvatar class="avatar" :user="invitation.parent" :show-indicator="true"/>
<span class="name"><b><MkUserName :user="invitation.parent"/></b></span>
<span class="username">@{{ invitation.parent.username }}</span>
@@ -22,7 +22,7 @@
<MkFolder v-if="myGames.length > 0">
<template #header>{{ $ts._reversi.myGames }}</template>
<div class="knextgwz">
- <MkA class="game _panel" v-for="g in myGames" tabindex="-1" :to="`/games/reversi/${g.id}`" :key="g.id">
+ <MkA v-for="g in myGames" :key="g.id" class="game _panel" tabindex="-1" :to="`/games/reversi/${g.id}`">
<div class="players">
<MkAvatar class="avatar" :user="g.user1"/><b><MkUserName :user="g.user1"/></b> vs <b><MkUserName :user="g.user2"/></b><MkAvatar class="avatar" :user="g.user2"/>
</div>
@@ -34,7 +34,7 @@
<MkFolder v-if="games.length > 0">
<template #header>{{ $ts._reversi.allGames }}</template>
<div class="knextgwz">
- <MkA class="game _panel" v-for="g in games" tabindex="-1" :to="`/games/reversi/${g.id}`" :key="g.id">
+ <MkA v-for="g in games" :key="g.id" class="game _panel" tabindex="-1" :to="`/games/reversi/${g.id}`">
<div class="players">
<MkAvatar class="avatar" :user="g.user1"/><b><MkUserName :user="g.user1"/></b> vs <b><MkUserName :user="g.user2"/></b><MkAvatar class="avatar" :user="g.user2"/>
</div>
@@ -44,7 +44,7 @@
</MkFolder>
</div>
</div>
-<div class="sazhgisb" v-else>
+<div v-else class="sazhgisb">
<h1>
<I18n :src="$ts.waitingFor" tag="span">
<template #x>
diff --git a/packages/client/src/pages/room/room.vue b/packages/client/src/pages/room/room.vue
index 926a681e88..fa35d7d93e 100644
--- a/packages/client/src/pages/room/room.vue
+++ b/packages/client/src/pages/room/room.vue
@@ -1,6 +1,6 @@
<template>
<div class="hveuntkp">
- <div class="controller _section" v-if="objectSelected">
+ <div v-if="objectSelected" class="controller _section">
<div class="_content">
<p class="name">{{ selectedFurnitureName }}</p>
<XPreview ref="preview"/>
@@ -17,16 +17,16 @@
</template>
</div>
<div class="_content">
- <MkButton inline @click="translate()" :primary="isTranslateMode"><i class="fas fa-arrows-alt"></i> {{ $ts._rooms.translate }}</MkButton>
- <MkButton inline @click="rotate()" :primary="isRotateMode"><i class="fas fa-undo"></i> {{ $ts._rooms.rotate }}</MkButton>
- <MkButton inline v-if="isTranslateMode || isRotateMode" @click="exit()"><i class="fas fa-ban"></i> {{ $ts._rooms.exit }}</MkButton>
+ <MkButton inline :primary="isTranslateMode" @click="translate()"><i class="fas fa-arrows-alt"></i> {{ $ts._rooms.translate }}</MkButton>
+ <MkButton inline :primary="isRotateMode" @click="rotate()"><i class="fas fa-undo"></i> {{ $ts._rooms.rotate }}</MkButton>
+ <MkButton v-if="isTranslateMode || isRotateMode" inline @click="exit()"><i class="fas fa-ban"></i> {{ $ts._rooms.exit }}</MkButton>
</div>
<div class="_content">
<MkButton @click="remove()"><i class="fas fa-trash-alt"></i> {{ $ts._rooms.remove }}</MkButton>
</div>
</div>
- <div class="menu _section" v-if="isMyRoom">
+ <div v-if="isMyRoom" class="menu _section">
<div class="_content">
<MkButton @click="add()"><i class="fas fa-box-open"></i> {{ $ts._rooms.addFurniture }}</MkButton>
</div>
@@ -72,6 +72,23 @@ export default defineComponent({
MkSelect,
},
+ beforeRouteLeave(to, from, next) {
+ if (this.changed) {
+ os.confirm({
+ type: 'warning',
+ text: this.$ts.leaveConfirm,
+ }).then(({ canceled }) => {
+ if (canceled) {
+ next(false);
+ } else {
+ next();
+ }
+ });
+ } else {
+ next();
+ }
+ },
+
props: {
acct: {
type: String,
@@ -135,23 +152,6 @@ export default defineComponent({
});
},
- beforeRouteLeave(to, from, next) {
- if (this.changed) {
- os.confirm({
- type: 'warning',
- text: this.$ts.leaveConfirm,
- }).then(({ canceled }) => {
- if (canceled) {
- next(false);
- } else {
- next();
- }
- });
- } else {
- next();
- }
- },
-
beforeUnmount() {
room.destroy();
window.removeEventListener('beforeunload', this.beforeunload);
diff --git a/packages/client/src/pages/scratchpad.vue b/packages/client/src/pages/scratchpad.vue
index 65f6fa07d5..f871dc48e8 100644
--- a/packages/client/src/pages/scratchpad.vue
+++ b/packages/client/src/pages/scratchpad.vue
@@ -1,14 +1,14 @@
<template>
<div class="iltifgqe">
<div class="editor _panel _gap">
- <PrismEditor class="_code code" v-model="code" :highlight="highlighter" :line-numbers="false"/>
- <MkButton style="position: absolute; top: 8px; right: 8px;" @click="run()" primary><i class="fas fa-play"></i></MkButton>
+ <PrismEditor v-model="code" class="_code code" :highlight="highlighter" :line-numbers="false"/>
+ <MkButton style="position: absolute; top: 8px; right: 8px;" primary @click="run()"><i class="fas fa-play"></i></MkButton>
</div>
<MkContainer :foldable="true" class="_gap">
<template #header>{{ $ts.output }}</template>
<div class="bepmlvbi">
- <div v-for="log in logs" class="log" :key="log.id" :class="{ print: log.print }">{{ log.text }}</div>
+ <div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
</div>
</MkContainer>
diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue
index 67c8b626ee..8921480271 100644
--- a/packages/client/src/pages/settings/2fa.vue
+++ b/packages/client/src/pages/settings/2fa.vue
@@ -13,16 +13,16 @@
<h2 class="heading">{{ $ts.securityKey }}</h2>
<p>{{ $ts._2fa.securityKeyInfo }}</p>
<div class="key-list">
- <div class="key" v-for="key in $i.securityKeysList">
+ <div v-for="key in $i.securityKeysList" class="key">
<h3>{{ key.name }}</h3>
<div class="last-used">{{ $ts.lastUsed }}<MkTime :time="key.lastUsed"/></div>
<MkButton @click="unregisterKey(key)">{{ $ts.unregister }}</MkButton>
</div>
</div>
- <MkSwitch v-model="usePasswordLessLogin" @update:modelValue="updatePasswordLessLogin" v-if="$i.securityKeysList.length > 0">{{ $ts.passwordLessLogin }}</MkSwitch>
+ <MkSwitch v-if="$i.securityKeysList.length > 0" v-model="usePasswordLessLogin" @update:modelValue="updatePasswordLessLogin">{{ $ts.passwordLessLogin }}</MkSwitch>
- <MkInfo warn v-if="registration && registration.error">{{ $ts.error }} {{ registration.error }}</MkInfo>
+ <MkInfo v-if="registration && registration.error" warn>{{ $ts.error }} {{ registration.error }}</MkInfo>
<MkButton v-if="!registration || registration.error" @click="addSecurityKey">{{ $ts._2fa.registerKey }}</MkButton>
<ol v-if="registration && !registration.error">
@@ -35,7 +35,7 @@
<MkInput v-model="keyName" :max="30">
<template #label>{{ $ts.securityKeyName }}</template>
</MkInput>
- <MkButton @click="registerKey" :disabled="keyName.length == 0">{{ $ts.registerSecurityKey }}</MkButton>
+ <MkButton :disabled="keyName.length == 0" @click="registerKey">{{ $ts.registerSecurityKey }}</MkButton>
<i v-if="registration.saving && registration.stage == 1" class="fas fa-spinner fa-pulse fa-fw"></i>
</MkForm>
</li>
diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue
index 94a3c9483d..2d1e0eff4e 100644
--- a/packages/client/src/pages/settings/accounts.vue
+++ b/packages/client/src/pages/settings/accounts.vue
@@ -1,9 +1,9 @@
<template>
<FormBase>
<FormSuspense :p="init">
- <FormButton @click="addAccount" primary><i class="fas fa-plus"></i> {{ $ts.addAccount }}</FormButton>
+ <FormButton primary @click="addAccount"><i class="fas fa-plus"></i> {{ $ts.addAccount }}</FormButton>
- <div class="_debobigegoItem _button" v-for="account in accounts" :key="account.id" @click="menu(account, $event)">
+ <div v-for="account in accounts" :key="account.id" class="_debobigegoItem _button" @click="menu(account, $event)">
<div class="_debobigegoPanel lcjjdxlm">
<div class="avatar">
<MkAvatar :user="account" class="avatar"/>
diff --git a/packages/client/src/pages/settings/api.vue b/packages/client/src/pages/settings/api.vue
index b6bff51c7f..30a4902a15 100644
--- a/packages/client/src/pages/settings/api.vue
+++ b/packages/client/src/pages/settings/api.vue
@@ -1,6 +1,6 @@
<template>
<FormBase>
- <FormButton @click="generateToken" primary>{{ $ts.generateAccessToken }}</FormButton>
+ <FormButton primary @click="generateToken">{{ $ts.generateAccessToken }}</FormButton>
<FormLink to="/settings/apps">{{ $ts.manageAccessTokens }}</FormLink>
<FormLink to="/api-console" :behavior="isDesktop ? 'window' : null">API console</FormLink>
</FormBase>
diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue
index 6eec80d805..10b5fc603e 100644
--- a/packages/client/src/pages/settings/apps.vue
+++ b/packages/client/src/pages/settings/apps.vue
@@ -1,6 +1,6 @@
<template>
<FormBase>
- <FormPagination :pagination="pagination" ref="list">
+ <FormPagination ref="list" :pagination="pagination">
<template #empty>
<div class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
@@ -8,8 +8,8 @@
</div>
</template>
<template #default="{items}">
- <div class="_debobigegoPanel bfomjevm" v-for="token in items" :key="token.id">
- <img class="icon" :src="token.iconUrl" alt="" v-if="token.iconUrl"/>
+ <div v-for="token in items" :key="token.id" class="_debobigegoPanel bfomjevm">
+ <img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/>
<div class="body">
<div class="name">{{ token.name }}</div>
<div class="description">{{ token.description }}</div>
diff --git a/packages/client/src/pages/settings/delete-account.vue b/packages/client/src/pages/settings/delete-account.vue
index d5ad648939..6ce8d6509c 100644
--- a/packages/client/src/pages/settings/delete-account.vue
+++ b/packages/client/src/pages/settings/delete-account.vue
@@ -2,8 +2,8 @@
<FormBase>
<FormInfo warn>{{ $ts._accountDelete.mayTakeTime }}</FormInfo>
<FormInfo>{{ $ts._accountDelete.sendEmail }}</FormInfo>
- <FormButton @click="deleteAccount" danger v-if="!$i.isDeleted">{{ $ts._accountDelete.requestAccountDelete }}</FormButton>
- <FormButton disabled v-else>{{ $ts._accountDelete.inProgress }}</FormButton>
+ <FormButton v-if="!$i.isDeleted" danger @click="deleteAccount">{{ $ts._accountDelete.requestAccountDelete }}</FormButton>
+ <FormButton v-else disabled>{{ $ts._accountDelete.inProgress }}</FormButton>
</FormBase>
</template>
diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue
index ed5282e23d..1fcfed2114 100644
--- a/packages/client/src/pages/settings/drive.vue
+++ b/packages/client/src/pages/settings/drive.vue
@@ -24,7 +24,7 @@
</div>
</div>
- <FormButton :center="false" @click="chooseUploadFolder()" primary>
+ <FormButton :center="false" primary @click="chooseUploadFolder()">
{{ $ts.uploadFolder }}
<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
<template #suffixIcon><i class="fas fa-folder-open"></i></template>
diff --git a/packages/client/src/pages/settings/email-address.vue b/packages/client/src/pages/settings/email-address.vue
index c2c56ed0a8..c8ce61716f 100644
--- a/packages/client/src/pages/settings/email-address.vue
+++ b/packages/client/src/pages/settings/email-address.vue
@@ -3,11 +3,11 @@
<FormGroup>
<FormInput v-model="emailAddress" type="email">
{{ $ts.emailAddress }}
- <template #desc v-if="$i.email && !$i.emailVerified">{{ $ts.verificationEmailSent }}</template>
- <template #desc v-else-if="emailAddress === $i.email && $i.emailVerified">{{ $ts.emailVerified }}</template>
+ <template v-if="$i.email && !$i.emailVerified" #desc>{{ $ts.verificationEmailSent }}</template>
+ <template v-else-if="emailAddress === $i.email && $i.emailVerified" #desc>{{ $ts.emailVerified }}</template>
</FormInput>
</FormGroup>
- <FormButton @click="save" primary>{{ $ts.save }}</FormButton>
+ <FormButton primary @click="save">{{ $ts.save }}</FormButton>
</FormBase>
</template>
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index e0fcf70102..ac8e04511c 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -4,7 +4,7 @@
<FormSelect v-model="lang">
<template #label>{{ $ts.uiLanguage }}</template>
- <option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
+ <option v-for="x in langs" :key="x[0]" :value="x[0]">{{ x[1] }}</option>
<template #caption>
<I18n :src="$ts.i18nInfo" tag="span">
<template #link>
@@ -41,7 +41,7 @@
<FormSwitch v-model="squareAvatars">{{ $ts.squareAvatars }}</FormSwitch>
<FormSwitch v-model="useSystemFont">{{ $ts.useSystemFont }}</FormSwitch>
<FormSwitch v-model="useOsNativeEmojis">{{ $ts.useOsNativeEmojis }}
- <div><Mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪" :key="useOsNativeEmojis"/></div>
+ <div><Mfm :key="useOsNativeEmojis" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
</FormSwitch>
</FormGroup>
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index bc7516731c..333d07c9c6 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -1,6 +1,6 @@
<template>
-<div class="vvcocwet" :class="{ wide: !narrow }" ref="el">
- <div class="nav" v-if="!narrow || page == null">
+<div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
+ <div v-if="!narrow || page == null" class="nav">
<MkSpacer :content-max="700">
<div class="baaadecd">
<div class="title">{{ $ts.settings }}</div>
diff --git a/packages/client/src/pages/settings/integration.vue b/packages/client/src/pages/settings/integration.vue
index 405f93b779..3d8aaf8a6f 100644
--- a/packages/client/src/pages/settings/integration.vue
+++ b/packages/client/src/pages/settings/integration.vue
@@ -1,29 +1,29 @@
<template>
<FormBase>
- <div class="_debobigegoItem" v-if="enableTwitterIntegration">
+ <div v-if="enableTwitterIntegration" class="_debobigegoItem">
<div class="_debobigegoLabel"><i class="fab fa-twitter"></i> Twitter</div>
<div class="_debobigegoPanel" style="padding: 16px;">
<p v-if="integrations.twitter">{{ $ts.connectedTo }}: <a :href="`https://twitter.com/${integrations.twitter.screenName}`" rel="nofollow noopener" target="_blank">@{{ integrations.twitter.screenName }}</a></p>
- <MkButton v-if="integrations.twitter" @click="disconnectTwitter" danger>{{ $ts.disconnectService }}</MkButton>
- <MkButton v-else @click="connectTwitter" primary>{{ $ts.connectService }}</MkButton>
+ <MkButton v-if="integrations.twitter" danger @click="disconnectTwitter">{{ $ts.disconnectService }}</MkButton>
+ <MkButton v-else primary @click="connectTwitter">{{ $ts.connectService }}</MkButton>
</div>
</div>
- <div class="_debobigegoItem" v-if="enableDiscordIntegration">
+ <div v-if="enableDiscordIntegration" class="_debobigegoItem">
<div class="_debobigegoLabel"><i class="fab fa-discord"></i> Discord</div>
<div class="_debobigegoPanel" style="padding: 16px;">
<p v-if="integrations.discord">{{ $ts.connectedTo }}: <a :href="`https://discord.com/users/${integrations.discord.id}`" rel="nofollow noopener" target="_blank">@{{ integrations.discord.username }}#{{ integrations.discord.discriminator }}</a></p>
- <MkButton v-if="integrations.discord" @click="disconnectDiscord" danger>{{ $ts.disconnectService }}</MkButton>
- <MkButton v-else @click="connectDiscord" primary>{{ $ts.connectService }}</MkButton>
+ <MkButton v-if="integrations.discord" danger @click="disconnectDiscord">{{ $ts.disconnectService }}</MkButton>
+ <MkButton v-else primary @click="connectDiscord">{{ $ts.connectService }}</MkButton>
</div>
</div>
- <div class="_debobigegoItem" v-if="enableGithubIntegration">
+ <div v-if="enableGithubIntegration" class="_debobigegoItem">
<div class="_debobigegoLabel"><i class="fab fa-github"></i> GitHub</div>
<div class="_debobigegoPanel" style="padding: 16px;">
<p v-if="integrations.github">{{ $ts.connectedTo }}: <a :href="`https://github.com/${integrations.github.login}`" rel="nofollow noopener" target="_blank">@{{ integrations.github.login }}</a></p>
- <MkButton v-if="integrations.github" @click="disconnectGithub" danger>{{ $ts.disconnectService }}</MkButton>
- <MkButton v-else @click="connectGithub" primary>{{ $ts.connectService }}</MkButton>
+ <MkButton v-if="integrations.github" danger @click="disconnectGithub">{{ $ts.disconnectService }}</MkButton>
+ <MkButton v-else primary @click="connectGithub">{{ $ts.connectService }}</MkButton>
</div>
</div>
</FormBase>
diff --git a/packages/client/src/pages/settings/menu.vue b/packages/client/src/pages/settings/menu.vue
index 6027910e03..47cc4256b0 100644
--- a/packages/client/src/pages/settings/menu.vue
+++ b/packages/client/src/pages/settings/menu.vue
@@ -13,7 +13,7 @@
<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ $ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
</FormRadios>
- <FormButton @click="reset()" danger><i class="fas fa-redo"></i> {{ $ts.default }}</FormButton>
+ <FormButton danger @click="reset()"><i class="fas fa-redo"></i> {{ $ts.default }}</FormButton>
</FormBase>
</template>
diff --git a/packages/client/src/pages/settings/plugin.install.vue b/packages/client/src/pages/settings/plugin.install.vue
index d79979bc2d..af93ef2930 100644
--- a/packages/client/src/pages/settings/plugin.install.vue
+++ b/packages/client/src/pages/settings/plugin.install.vue
@@ -8,7 +8,7 @@
</FormTextarea>
</FormGroup>
- <FormButton @click="install" :disabled="code == null" primary inline><i class="fas fa-check"></i> {{ $ts.install }}</FormButton>
+ <FormButton :disabled="code == null" primary inline @click="install"><i class="fas fa-check"></i> {{ $ts.install }}</FormButton>
</FormBase>
</template>
diff --git a/packages/client/src/pages/settings/plugin.manage.vue b/packages/client/src/pages/settings/plugin.manage.vue
index 1b452fa55d..8b9021dc3d 100644
--- a/packages/client/src/pages/settings/plugin.manage.vue
+++ b/packages/client/src/pages/settings/plugin.manage.vue
@@ -22,8 +22,8 @@
</div>
<div class="_debobigegoItem">
<div class="_debobigegoPanel" style="padding: 16px;">
- <MkButton @click="config(plugin)" inline v-if="plugin.config"><i class="fas fa-cog"></i> {{ $ts.settings }}</MkButton>
- <MkButton @click="uninstall(plugin)" inline danger><i class="fas fa-trash-alt"></i> {{ $ts.uninstall }}</MkButton>
+ <MkButton v-if="plugin.config" inline @click="config(plugin)"><i class="fas fa-cog"></i> {{ $ts.settings }}</MkButton>
+ <MkButton inline danger @click="uninstall(plugin)"><i class="fas fa-trash-alt"></i> {{ $ts.uninstall }}</MkButton>
</div>
</div>
</FormGroup>
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index e7d0d9b418..ce55c57c09 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -4,8 +4,8 @@
<div class="_debobigegoItem _debobigegoPanel llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
<MkAvatar class="avatar" :user="$i"/>
</div>
- <FormButton @click="changeAvatar" primary>{{ $ts._profile.changeAvatar }}</FormButton>
- <FormButton @click="changeBanner" primary>{{ $ts._profile.changeBanner }}</FormButton>
+ <FormButton primary @click="changeAvatar">{{ $ts._profile.changeAvatar }}</FormButton>
+ <FormButton primary @click="changeBanner">{{ $ts._profile.changeBanner }}</FormButton>
</FormGroup>
<FormInput v-model="name" :max="30" manual-save>
@@ -29,11 +29,11 @@
<FormSelect v-model="lang">
<template #label>{{ $ts.language }}</template>
- <option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
+ <option v-for="x in langs" :key="x[0]" :value="x[0]">{{ x[1] }}</option>
</FormSelect>
<FormGroup>
- <FormButton @click="editMetadata" primary>{{ $ts._profile.metadataEdit }}</FormButton>
+ <FormButton primary @click="editMetadata">{{ $ts._profile.metadataEdit }}</FormButton>
<template #caption>{{ $ts._profile.metadataDescription }}</template>
</FormGroup>
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index 8878b4149f..5864020cb9 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -3,7 +3,7 @@
<div class="_debobigegoItem">
<div class="_debobigegoLabel">{{ $ts.reactionSettingDescription }}</div>
<div class="_debobigegoPanel">
- <XDraggable class="zoaiodol" v-model="reactions" :item-key="item => item" animation="150" delay="100" delay-on-touch-only="true">
+ <XDraggable v-model="reactions" class="zoaiodol" :item-key="item => item" animation="150" delay="100" delay-on-touch-only="true">
<template #item="{element}">
<button class="_button item" @click="remove(element, $event)">
<MkEmoji :emoji="element" :normal="true"/>
diff --git a/packages/client/src/pages/settings/registry.keys.vue b/packages/client/src/pages/settings/registry.keys.vue
index ca4d01cc94..89953ebea1 100644
--- a/packages/client/src/pages/settings/registry.keys.vue
+++ b/packages/client/src/pages/settings/registry.keys.vue
@@ -16,7 +16,7 @@
<FormLink v-for="key in keys" :to="`/settings/registry/value/system/${scope.join('/')}/${key[0]}`" class="_monospace">{{ key[0] }}<template #suffix>{{ key[1].toUpperCase() }}</template></FormLink>
</FormGroup>
- <FormButton @click="createKey" primary>{{ $ts._registry.createKey }}</FormButton>
+ <FormButton primary @click="createKey">{{ $ts._registry.createKey }}</FormButton>
</FormBase>
</template>
diff --git a/packages/client/src/pages/settings/registry.value.vue b/packages/client/src/pages/settings/registry.value.vue
index 6604cf056b..6acd3f6048 100644
--- a/packages/client/src/pages/settings/registry.value.vue
+++ b/packages/client/src/pages/settings/registry.value.vue
@@ -19,10 +19,10 @@
</FormGroup>
<FormGroup>
- <FormTextarea tall v-model="valueForEditor" class="_monospace" style="tab-size: 2;">
+ <FormTextarea v-model="valueForEditor" tall class="_monospace" style="tab-size: 2;">
<span>{{ $ts.value }} (JSON)</span>
</FormTextarea>
- <FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormGroup>
<FormKeyValueView>
diff --git a/packages/client/src/pages/settings/registry.vue b/packages/client/src/pages/settings/registry.vue
index 0bfed0ddb7..6faff5d2a4 100644
--- a/packages/client/src/pages/settings/registry.vue
+++ b/packages/client/src/pages/settings/registry.vue
@@ -4,7 +4,7 @@
<template #label>{{ $ts.system }}</template>
<FormLink v-for="scope in scopes" :to="`/settings/registry/keys/system/${scope.join('/')}`" class="_monospace">{{ scope.join('/') }}</FormLink>
</FormGroup>
- <FormButton @click="createKey" primary>{{ $ts._registry.createKey }}</FormButton>
+ <FormButton primary @click="createKey">{{ $ts._registry.createKey }}</FormButton>
</FormBase>
</template>
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index 879fd83f70..c18edd80b0 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -6,7 +6,7 @@
<FormPagination :pagination="pagination">
<template #label>{{ $ts.signinHistory }}</template>
<template #default="{items}">
- <div class="_debobigegoPanel timnmucd" v-for="item in items" :key="item.id">
+ <div v-for="item in items" :key="item.id" class="_debobigegoPanel timnmucd">
<header>
<i v-if="item.success" class="fas fa-check icon succ"></i>
<i v-else class="fas fa-times-circle icon fail"></i>
diff --git a/packages/client/src/pages/settings/sounds.vue b/packages/client/src/pages/settings/sounds.vue
index ea3daced9d..7bea50976e 100644
--- a/packages/client/src/pages/settings/sounds.vue
+++ b/packages/client/src/pages/settings/sounds.vue
@@ -13,7 +13,7 @@
</FormButton>
</FormGroup>
- <FormButton @click="reset()" danger><i class="fas fa-redo"></i> {{ $ts.default }}</FormButton>
+ <FormButton danger @click="reset()"><i class="fas fa-redo"></i> {{ $ts.default }}</FormButton>
</FormBase>
</template>
diff --git a/packages/client/src/pages/settings/theme.install.vue b/packages/client/src/pages/settings/theme.install.vue
index 95c6f4c7ee..c3e531afb2 100644
--- a/packages/client/src/pages/settings/theme.install.vue
+++ b/packages/client/src/pages/settings/theme.install.vue
@@ -4,10 +4,10 @@
<FormTextarea v-model="installThemeCode">
<span>{{ $ts._theme.code }}</span>
</FormTextarea>
- <FormButton @click="() => preview(installThemeCode)" :disabled="installThemeCode == null" inline><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton>
+ <FormButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton>
</FormGroup>
- <FormButton @click="() => install(installThemeCode)" :disabled="installThemeCode == null" primary inline><i class="fas fa-check"></i> {{ $ts.install }}</FormButton>
+ <FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="fas fa-check"></i> {{ $ts.install }}</FormButton>
</FormBase>
</template>
diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue
index 8a24481ae2..ac4edbe66e 100644
--- a/packages/client/src/pages/settings/theme.manage.vue
+++ b/packages/client/src/pages/settings/theme.manage.vue
@@ -3,24 +3,24 @@
<FormSelect v-model="selectedThemeId">
<template #label>{{ $ts.theme }}</template>
<optgroup :label="$ts._theme.installedThemes">
- <option v-for="x in installedThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+ <option v-for="x in installedThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
<optgroup :label="$ts._theme.builtinThemes">
- <option v-for="x in builtinThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+ <option v-for="x in builtinThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
</FormSelect>
<template v-if="selectedTheme">
<FormInput readonly :modelValue="selectedTheme.author">
<span>{{ $ts.author }}</span>
</FormInput>
- <FormTextarea readonly :modelValue="selectedTheme.desc" v-if="selectedTheme.desc">
+ <FormTextarea v-if="selectedTheme.desc" readonly :modelValue="selectedTheme.desc">
<span>{{ $ts._theme.description }}</span>
</FormTextarea>
<FormTextarea readonly tall :modelValue="selectedThemeCode">
<span>{{ $ts._theme.code }}</span>
- <template #desc><button @click="copyThemeCode()" class="_textButton">{{ $ts.copy }}</button></template>
+ <template #desc><button class="_textButton" @click="copyThemeCode()">{{ $ts.copy }}</button></template>
</FormTextarea>
- <FormButton @click="uninstall()" danger v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><i class="fas fa-trash-alt"></i> {{ $ts.uninstall }}</FormButton>
+ <FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" danger @click="uninstall()"><i class="fas fa-trash-alt"></i> {{ $ts.uninstall }}</FormButton>
</template>
</FormBase>
</template>
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 2347f605a8..2420966c51 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -4,7 +4,7 @@
<div class="rfqxtzch _debobigegoItem _debobigegoPanel">
<div class="darkMode">
<div class="toggleWrapper">
- <input type="checkbox" class="dn" id="dn" v-model="darkMode"/>
+ <input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
<label for="dn" class="toggle">
<span class="before">{{ $ts.light }}</span>
<span class="after">{{ $ts.dark }}</span>
@@ -30,19 +30,19 @@
<FormSelect v-model="darkThemeId">
<template #label>{{ $ts.themeForDarkMode }}</template>
<optgroup :label="$ts.darkThemes">
- <option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+ <option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
<optgroup :label="$ts.lightThemes">
- <option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+ <option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
</FormSelect>
<FormSelect v-model="lightThemeId">
<template #label>{{ $ts.themeForLightMode }}</template>
<optgroup :label="$ts.lightThemes">
- <option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+ <option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
<optgroup :label="$ts.darkThemes">
- <option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+ <option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
</FormSelect>
</template>
@@ -50,25 +50,25 @@
<FormSelect v-model="lightThemeId">
<template #label>{{ $ts.themeForLightMode }}</template>
<optgroup :label="$ts.lightThemes">
- <option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+ <option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
<optgroup :label="$ts.darkThemes">
- <option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+ <option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
</FormSelect>
<FormSelect v-model="darkThemeId">
<template #label>{{ $ts.themeForDarkMode }}</template>
<optgroup :label="$ts.darkThemes">
- <option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+ <option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
<optgroup :label="$ts.lightThemes">
- <option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+ <option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
</FormSelect>
</template>
- <FormButton primary v-if="wallpaper == null" @click="setWallpaper">{{ $ts.setWallpaper }}</FormButton>
- <FormButton primary v-else @click="wallpaper = null">{{ $ts.removeWallpaper }}</FormButton>
+ <FormButton v-if="wallpaper == null" primary @click="setWallpaper">{{ $ts.setWallpaper }}</FormButton>
+ <FormButton v-else primary @click="wallpaper = null">{{ $ts.removeWallpaper }}</FormButton>
<FormGroup>
<FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="fas fa-globe"></i></template>{{ $ts._theme.explore }}</FormLink>
diff --git a/packages/client/src/pages/settings/update.vue b/packages/client/src/pages/settings/update.vue
index aa4050fe9f..e0d8f6d15c 100644
--- a/packages/client/src/pages/settings/update.vue
+++ b/packages/client/src/pages/settings/update.vue
@@ -12,18 +12,18 @@
</FormKeyValueView>
<FormKeyValueView>
<template #key>{{ $ts.latestVersion }}</template>
- <template #value v-if="meta">{{ meta.version }}</template>
- <template #value v-else><MkEllipsis/></template>
+ <template v-if="meta" #value>{{ meta.version }}</template>
+ <template v-else #value><MkEllipsis/></template>
</FormKeyValueView>
</FormGroup>
<FormGroup>
<template #label>Misskey</template>
<FormKeyValueView>
<template #key>{{ $ts.latestVersion }}</template>
- <template #value v-if="releases">{{ releases[0].tag_name }}</template>
- <template #value v-else><MkEllipsis/></template>
+ <template v-if="releases" #value>{{ releases[0].tag_name }}</template>
+ <template v-else #value><MkEllipsis/></template>
</FormKeyValueView>
- <template #caption v-if="releases"><MkTime :time="releases[0].published_at" mode="detail"/></template>
+ <template v-if="releases" #caption><MkTime :time="releases[0].published_at" mode="detail"/></template>
</FormGroup>
</FormBase>
</template>
diff --git a/packages/client/src/pages/settings/word-mute.vue b/packages/client/src/pages/settings/word-mute.vue
index c2162bb1f3..f97557ece3 100644
--- a/packages/client/src/pages/settings/word-mute.vue
+++ b/packages/client/src/pages/settings/word-mute.vue
@@ -25,7 +25,7 @@
</FormKeyValueView>
</div>
</div>
- <FormButton @click="save()" primary inline :disabled="!changed"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton primary inline :disabled="!changed" @click="save()"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormBase>
</div>
</template>
diff --git a/packages/client/src/pages/share.vue b/packages/client/src/pages/share.vue
index e7ee04f7e7..bdd8500ee4 100644
--- a/packages/client/src/pages/share.vue
+++ b/packages/client/src/pages/share.vue
@@ -13,10 +13,10 @@
:reply="reply"
:renote="renote"
:initial-visible-users="visibleUsers"
- @posted="state = 'posted'"
class="_panel"
+ @posted="state = 'posted'"
/>
- <MkButton v-else-if="state === 'posted'" primary @click="close()" class="close">{{ $ts.close }}</MkButton>
+ <MkButton v-else-if="state === 'posted'" primary class="close" @click="close()">{{ $ts.close }}</MkButton>
</div>
</section>
</div>
diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue
index c0bb1bd531..f023653425 100644
--- a/packages/client/src/pages/theme-editor.vue
+++ b/packages/client/src/pages/theme-editor.vue
@@ -4,12 +4,12 @@
<div class="_debobigegoLabel">{{ $ts.backgroundColor }}</div>
<div class="_debobigegoPanel colors">
<div class="row">
- <button v-for="color in bgColors.filter(x => x.kind === 'light')" :key="color.color" @click="setBgColor(color)" class="color _button" :class="{ active: theme.props.bg === color.color }">
+ <button v-for="color in bgColors.filter(x => x.kind === 'light')" :key="color.color" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
<div class="preview" :style="{ background: color.forPreview }"></div>
</button>
</div>
<div class="row">
- <button v-for="color in bgColors.filter(x => x.kind === 'dark')" :key="color.color" @click="setBgColor(color)" class="color _button" :class="{ active: theme.props.bg === color.color }">
+ <button v-for="color in bgColors.filter(x => x.kind === 'dark')" :key="color.color" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
<div class="preview" :style="{ background: color.forPreview }"></div>
</button>
</div>
@@ -19,7 +19,7 @@
<div class="_debobigegoLabel">{{ $ts.accentColor }}</div>
<div class="_debobigegoPanel colors">
<div class="row">
- <button v-for="color in accentColors" :key="color" @click="setAccentColor(color)" class="color rounded _button" :class="{ active: theme.props.accent === color }">
+ <button v-for="color in accentColors" :key="color" class="color rounded _button" :class="{ active: theme.props.accent === color }" @click="setAccentColor(color)">
<div class="preview" :style="{ background: color }"></div>
</button>
</div>
@@ -29,7 +29,7 @@
<div class="_debobigegoLabel">{{ $ts.textColor }}</div>
<div class="_debobigegoPanel colors">
<div class="row">
- <button v-for="color in fgColors" :key="color" @click="setFgColor(color)" class="color char _button" :class="{ active: (theme.props.fg === color.forLight) || (theme.props.fg === color.forDark) }">
+ <button v-for="color in fgColors" :key="color" class="color char _button" :class="{ active: (theme.props.fg === color.forLight) || (theme.props.fg === color.forDark) }" @click="setFgColor(color)">
<div class="preview" :style="{ color: color.forPreview ? color.forPreview : theme.base === 'light' ? '#5f5f5f' : '#dadada' }">A</div>
</button>
</div>
@@ -40,7 +40,7 @@
<FormTextarea v-model="themeCode" tall>
<span>{{ $ts._theme.code }}</span>
</FormTextarea>
- <FormButton @click="applyThemeCode" primary>{{ $ts.apply }}</FormButton>
+ <FormButton primary @click="applyThemeCode">{{ $ts.apply }}</FormButton>
</FormGroup>
<FormButton v-else @click="codeEnabled = true"><i class="fas fa-code"></i> {{ $ts.editCode }}</FormButton>
@@ -53,7 +53,7 @@
<FormGroup>
<FormButton @click="showPreview"><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton>
- <FormButton @click="saveAs" primary><i class="fas fa-save"></i> {{ $ts.saveAs }}</FormButton>
+ <FormButton primary @click="saveAs"><i class="fas fa-save"></i> {{ $ts.saveAs }}</FormButton>
</FormGroup>
</FormBase>
</template>
@@ -85,6 +85,12 @@ export default defineComponent({
FormGroup,
},
+ async beforeRouteLeave(to, from) {
+ if (this.changed && !(await this.leaveConfirm())) {
+ return false;
+ }
+ },
+
data() {
return {
[symbols.PAGE_INFO]: {
@@ -140,12 +146,6 @@ export default defineComponent({
window.removeEventListener('beforeunload', this.beforeunload);
},
- async beforeRouteLeave(to, from) {
- if (this.changed && !(await this.leaveConfirm())) {
- return false;
- }
- },
-
methods: {
beforeunload(e: BeforeUnloadEvent) {
if (this.changed) {
diff --git a/packages/client/src/pages/timeline.tutorial.vue b/packages/client/src/pages/timeline.tutorial.vue
index 4d6dd0af41..3775796940 100644
--- a/packages/client/src/pages/timeline.tutorial.vue
+++ b/packages/client/src/pages/timeline.tutorial.vue
@@ -1,27 +1,27 @@
<template>
<div class="_card tbkwesmv">
<div class="_title"><i class="fas fa-info-circle"></i> {{ $ts._tutorial.title }}</div>
- <div class="_content" v-if="tutorial === 0">
+ <div v-if="tutorial === 0" class="_content">
<div>{{ $ts._tutorial.step1_1 }}</div>
<div>{{ $ts._tutorial.step1_2 }}</div>
<div>{{ $ts._tutorial.step1_3 }}</div>
</div>
- <div class="_content" v-else-if="tutorial === 1">
+ <div v-else-if="tutorial === 1" class="_content">
<div>{{ $ts._tutorial.step2_1 }}</div>
<div>{{ $ts._tutorial.step2_2 }}</div>
<MkA class="_link" to="/settings/profile">{{ $ts.editProfile }}</MkA>
</div>
- <div class="_content" v-else-if="tutorial === 2">
+ <div v-else-if="tutorial === 2" class="_content">
<div>{{ $ts._tutorial.step3_1 }}</div>
<div>{{ $ts._tutorial.step3_2 }}</div>
<div>{{ $ts._tutorial.step3_3 }}</div>
<small>{{ $ts._tutorial.step3_4 }}</small>
</div>
- <div class="_content" v-else-if="tutorial === 3">
+ <div v-else-if="tutorial === 3" class="_content">
<div>{{ $ts._tutorial.step4_1 }}</div>
<div>{{ $ts._tutorial.step4_2 }}</div>
</div>
- <div class="_content" v-else-if="tutorial === 4">
+ <div v-else-if="tutorial === 4" class="_content">
<div>{{ $ts._tutorial.step5_1 }}</div>
<I18n :src="$ts._tutorial.step5_2" tag="div">
<template #featured>
@@ -34,12 +34,12 @@
<div>{{ $ts._tutorial.step5_3 }}</div>
<small>{{ $ts._tutorial.step5_4 }}</small>
</div>
- <div class="_content" v-else-if="tutorial === 5">
+ <div v-else-if="tutorial === 5" class="_content">
<div>{{ $ts._tutorial.step6_1 }}</div>
<div>{{ $ts._tutorial.step6_2 }}</div>
<div>{{ $ts._tutorial.step6_3 }}</div>
</div>
- <div class="_content" v-else-if="tutorial === 6">
+ <div v-else-if="tutorial === 6" class="_content">
<div>{{ $ts._tutorial.step7_1 }}</div>
<I18n :src="$ts._tutorial.step7_2" tag="div">
<template #help>
@@ -51,16 +51,16 @@
<div class="_footer navigation">
<div class="step">
- <button class="arrow _button" @click="tutorial--" :disabled="tutorial === 0">
+ <button class="arrow _button" :disabled="tutorial === 0" @click="tutorial--">
<i class="fas fa-chevron-left"></i>
</button>
<span>{{ tutorial + 1 }} / 7</span>
- <button class="arrow _button" @click="tutorial++" :disabled="tutorial === 6">
+ <button class="arrow _button" :disabled="tutorial === 6" @click="tutorial++">
<i class="fas fa-chevron-right"></i>
</button>
</div>
- <MkButton class="ok" @click="tutorial = -1" primary v-if="tutorial === 6"><i class="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
- <MkButton class="ok" @click="tutorial++" primary v-else><i class="fas fa-check"></i> {{ $ts.next }}</MkButton>
+ <MkButton v-if="tutorial === 6" class="ok" primary @click="tutorial = -1"><i class="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
+ <MkButton v-else class="ok" primary @click="tutorial++"><i class="fas fa-check"></i> {{ $ts.next }}</MkButton>
</div>
</div>
</template>
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 71e8238269..81de0277f5 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -1,12 +1,12 @@
<template>
-<div class="cmuxhskf" v-size="{ min: [800] }" v-hotkey.global="keymap">
+<div v-size="{ min: [800] }" v-hotkey.global="keymap" class="cmuxhskf">
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
- <div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
+ <div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
<div class="tl _block">
- <XTimeline ref="tl" class="tl"
- :key="src"
+ <XTimeline ref="tl" :key="src"
+ class="tl"
:src="src"
:sound="true"
@before="before()"
diff --git a/packages/client/src/pages/user-ap-info.vue b/packages/client/src/pages/user-ap-info.vue
index 6253faa242..0027381f53 100644
--- a/packages/client/src/pages/user-ap-info.vue
+++ b/packages/client/src/pages/user-ap-info.vue
@@ -1,6 +1,6 @@
<template>
<FormBase>
- <FormSuspense :p="apPromiseFactory" v-slot="{ result: ap }">
+ <FormSuspense v-slot="{ result: ap }" :p="apPromiseFactory">
<FormGroup>
<template #label>ActivityPub</template>
<FormKeyValueView>
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index 948eaa6504..0fd208a64a 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -20,9 +20,9 @@
</FormGroup>
<FormGroup v-if="iAmModerator">
- <FormSwitch v-if="user.host == null && $i.isAdmin && (moderator || !user.isAdmin)" @update:modelValue="toggleModerator" v-model="moderator">{{ $ts.moderator }}</FormSwitch>
- <FormSwitch @update:modelValue="toggleSilence" v-model="silenced">{{ $ts.silence }}</FormSwitch>
- <FormSwitch @update:modelValue="toggleSuspend" v-model="suspended">{{ $ts.suspend }}</FormSwitch>
+ <FormSwitch v-if="user.host == null && $i.isAdmin && (moderator || !user.isAdmin)" v-model="moderator" @update:modelValue="toggleModerator">{{ $ts.moderator }}</FormSwitch>
+ <FormSwitch v-model="silenced" @update:modelValue="toggleSilence">{{ $ts.silence }}</FormSwitch>
+ <FormSwitch v-model="suspended" @update:modelValue="toggleSuspend">{{ $ts.suspend }}</FormSwitch>
</FormGroup>
<FormGroup>
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index a2773e2d49..c2970c8d06 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -1,9 +1,9 @@
<template>
-<div class="eqqrhokj" v-hotkey.global="keymap" v-size="{ min: [800] }">
- <div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
+<div v-hotkey.global="keymap" v-size="{ min: [800] }" class="eqqrhokj">
+ <div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
<div class="tl _block">
- <XTimeline ref="tl" class="tl"
- :key="listId"
+ <XTimeline ref="tl" :key="listId"
+ class="tl"
src="list"
:list="listId"
:sound="true"
diff --git a/packages/client/src/pages/user/clips.vue b/packages/client/src/pages/user/clips.vue
index 2ec96d2286..9e16bfc45b 100644
--- a/packages/client/src/pages/user/clips.vue
+++ b/packages/client/src/pages/user/clips.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkPagination :pagination="pagination" #default="{items}" ref="list">
+ <MkPagination #default="{items}" ref="list" :pagination="pagination">
<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
<b>{{ item.name }}</b>
<div v-if="item.description" class="description">{{ item.description }}</div>
diff --git a/packages/client/src/pages/user/follow-list.vue b/packages/client/src/pages/user/follow-list.vue
index fec4431419..2cfb8ee1ad 100644
--- a/packages/client/src/pages/user/follow-list.vue
+++ b/packages/client/src/pages/user/follow-list.vue
@@ -1,8 +1,8 @@
<template>
<div>
- <MkPagination :pagination="pagination" #default="{items}" class="mk-following-or-followers" ref="list">
+ <MkPagination #default="{items}" ref="list" :pagination="pagination" class="mk-following-or-followers">
<div class="users _isolated">
- <MkUserInfo class="user" v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :user="user" :key="user.id"/>
+ <MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" class="user" :user="user"/>
</div>
</MkPagination>
</div>
diff --git a/packages/client/src/pages/user/gallery.vue b/packages/client/src/pages/user/gallery.vue
index fb99cdff19..9def25c2ae 100644
--- a/packages/client/src/pages/user/gallery.vue
+++ b/packages/client/src/pages/user/gallery.vue
@@ -1,8 +1,8 @@
<template>
<div>
- <MkPagination :pagination="pagination" #default="{items}">
+ <MkPagination #default="{items}" :pagination="pagination">
<div class="jrnovfpt">
- <MkGalleryPostPreview v-for="post in items" :post="post" :key="post.id" class="post"/>
+ <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
</MkPagination>
</div>
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index 4c52dceae6..589a9465da 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -3,16 +3,16 @@
<template #header><i class="fas fa-image" style="margin-right: 0.5em;"></i>{{ $ts.images }}</template>
<div class="ujigsodd">
<MkLoading v-if="fetching"/>
- <div class="stream" v-if="!fetching && images.length > 0">
+ <div v-if="!fetching && images.length > 0" class="stream">
<MkA v-for="image in images"
+ :key="image.id"
class="img"
:to="notePage(image.note)"
- :key="image.id"
>
<ImgWithBlurhash :hash="image.blurhash" :src="thumbnail(image.file)" :alt="image.name" :title="image.name"/>
</MkA>
</div>
- <p class="empty" v-if="!fetching && images.length == 0">{{ $ts.nothing }}</p>
+ <p v-if="!fetching && images.length == 0" class="empty">{{ $ts.nothing }}</p>
</div>
</MkContainer>
</template>
diff --git a/packages/client/src/pages/user/index.timeline.vue b/packages/client/src/pages/user/index.timeline.vue
index eff38ec3c8..2ffa496979 100644
--- a/packages/client/src/pages/user/index.timeline.vue
+++ b/packages/client/src/pages/user/index.timeline.vue
@@ -1,5 +1,5 @@
<template>
-<div class="yrzkoczt" v-sticky-container>
+<div v-sticky-container class="yrzkoczt">
<MkTab v-model="with_" class="tab">
<option :value="null">{{ $ts.notes }}</option>
<option value="replies">{{ $ts.notesAndReplies }}</option>
@@ -28,16 +28,6 @@ export default defineComponent({
},
},
- watch: {
- user() {
- this.$refs.timeline.reload();
- },
-
- with_() {
- this.$refs.timeline.reload();
- },
- },
-
data() {
return {
date: null,
@@ -54,6 +44,16 @@ export default defineComponent({
}
};
},
+
+ watch: {
+ user() {
+ this.$refs.timeline.reload();
+ },
+
+ with_() {
+ this.$refs.timeline.reload();
+ },
+ },
});
</script>
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index d2531c0d1b..5a529ba8cf 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -1,11 +1,11 @@
<template>
<div>
<transition name="fade" mode="out-in">
- <div class="ftskorzw wide" v-if="user && narrow === false">
+ <div v-if="user && narrow === false" class="ftskorzw wide">
<MkRemoteCaution v-if="user.host != null" :href="user.url"/>
<div class="banner-container" :style="style">
- <div class="banner" ref="banner" :style="style"></div>
+ <div ref="banner" class="banner" :style="style"></div>
</div>
<div class="contents">
<div class="side _forceContainerFull_">
@@ -14,7 +14,7 @@
<MkUserName :user="user" :nowrap="false" class="name"/>
<MkAcct :user="user" :detail="true" class="acct"/>
</div>
- <div class="followed" v-if="$i && $i.id != user.id && user.isFollowed"><span>{{ $ts.followsYou }}</span></div>
+ <div v-if="$i && $i.id != user.id && user.isFollowed" class="followed"><span>{{ $ts.followsYou }}</span></div>
<div class="status">
<MkA :to="userPage(user)" :class="{ active: page === 'index' }">
<b>{{ number(user.notesCount) }}</b>
@@ -34,11 +34,11 @@
<p v-else class="empty">{{ $ts.noAccountDescription }}</p>
</div>
<div class="fields system">
- <dl class="field" v-if="user.location">
+ <dl v-if="user.location" class="field">
<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
<dd class="value">{{ user.location }}</dd>
</dl>
- <dl class="field" v-if="user.birthday">
+ <dl v-if="user.birthday" class="field">
<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
</dl>
@@ -47,8 +47,8 @@
<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
</dl>
</div>
- <div class="fields" v-if="user.fields.length > 0">
- <dl class="field" v-for="(field, i) in user.fields" :key="i">
+ <div v-if="user.fields.length > 0" class="fields">
+ <dl v-for="(field, i) in user.fields" :key="i" class="field">
<dt class="name">
<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
</dt>
@@ -57,17 +57,17 @@
</dd>
</dl>
</div>
- <XActivity :user="user" :key="user.id" class="_gap"/>
- <XPhotos :user="user" :key="user.id" class="_gap"/>
+ <XActivity :key="user.id" :user="user" class="_gap"/>
+ <XPhotos :key="user.id" :user="user" class="_gap"/>
</div>
<div class="main">
<div class="actions">
- <button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
+ <button class="menu _button" @click="menu"><i class="fas fa-ellipsis-h"></i></button>
<MkFollowButton v-if="!$i || $i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
</div>
<template v-if="page === 'index'">
<div v-if="user.pinnedNotes.length > 0" class="_gap">
- <XNote v-for="note in user.pinnedNotes" class="note _gap" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
+ <XNote v-for="note in user.pinnedNotes" :key="note.id" class="note _gap" :note="note" :pinned="true" @update:note="pinnedNoteUpdated(note, $event)"/>
</div>
<div class="_gap">
<XUserTimeline :user="user"/>
@@ -81,7 +81,7 @@
</div>
</div>
<MkSpacer v-else-if="user && narrow === true" :content-max="800">
- <div class="ftskorzw narrow" v-size="{ max: [500] }">
+ <div v-size="{ max: [500] }" class="ftskorzw narrow">
<!-- TODO -->
<!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSuspended }}</div> -->
<!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSilenced }}</div> -->
@@ -89,9 +89,9 @@
<div class="profile">
<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
- <div class="_block main" :key="user.id">
+ <div :key="user.id" class="_block main">
<div class="banner-container" :style="style">
- <div class="banner" ref="banner" :style="style"></div>
+ <div ref="banner" class="banner" :style="style"></div>
<div class="fade"></div>
<div class="title">
<MkUserName class="name" :user="user" :nowrap="true"/>
@@ -103,9 +103,9 @@
<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
</div>
</div>
- <span class="followed" v-if="$i && $i.id != user.id && user.isFollowed">{{ $ts.followsYou }}</span>
- <div class="actions" v-if="$i">
- <button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
+ <span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span>
+ <div v-if="$i" class="actions">
+ <button class="menu _button" @click="menu"><i class="fas fa-ellipsis-h"></i></button>
<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
</div>
</div>
@@ -125,11 +125,11 @@
<p v-else class="empty">{{ $ts.noAccountDescription }}</p>
</div>
<div class="fields system">
- <dl class="field" v-if="user.location">
+ <dl v-if="user.location" class="field">
<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
<dd class="value">{{ user.location }}</dd>
</dl>
- <dl class="field" v-if="user.birthday">
+ <dl v-if="user.birthday" class="field">
<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
</dl>
@@ -138,8 +138,8 @@
<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
</dl>
</div>
- <div class="fields" v-if="user.fields.length > 0">
- <dl class="field" v-for="(field, i) in user.fields" :key="i">
+ <div v-if="user.fields.length > 0" class="fields">
+ <dl v-for="(field, i) in user.fields" :key="i" class="field">
<dt class="name">
<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
</dt>
@@ -149,15 +149,15 @@
</dl>
</div>
<div class="status">
- <MkA :to="userPage(user)" :class="{ active: page === 'index' }" v-click-anime>
+ <MkA v-click-anime :to="userPage(user)" :class="{ active: page === 'index' }">
<b>{{ number(user.notesCount) }}</b>
<span>{{ $ts.notes }}</span>
</MkA>
- <MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }" v-click-anime>
+ <MkA v-click-anime :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
<b>{{ number(user.followingCount) }}</b>
<span>{{ $ts.following }}</span>
</MkA>
- <MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }" v-click-anime>
+ <MkA v-click-anime :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
<b>{{ number(user.followersCount) }}</b>
<span>{{ $ts.followers }}</span>
</MkA>
@@ -169,11 +169,11 @@
<template v-if="page === 'index'">
<div>
<div v-if="user.pinnedNotes.length > 0" class="_gap">
- <XNote v-for="note in user.pinnedNotes" class="note _block" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
+ <XNote v-for="note in user.pinnedNotes" :key="note.id" class="note _block" :note="note" :pinned="true" @update:note="pinnedNoteUpdated(note, $event)"/>
</div>
<MkInfo v-else-if="$i && $i.id === user.id">{{ $ts.userPagePinTip }}</MkInfo>
- <XPhotos :user="user" :key="user.id"/>
- <XActivity :user="user" :key="user.id" style="margin-top: var(--margin);"/>
+ <XPhotos :key="user.id" :user="user"/>
+ <XActivity :key="user.id" :user="user" style="margin-top: var(--margin);"/>
</div>
<div>
<XUserTimeline :user="user"/>
diff --git a/packages/client/src/pages/user/pages.vue b/packages/client/src/pages/user/pages.vue
index 0bf925d7d5..eb8f10d8aa 100644
--- a/packages/client/src/pages/user/pages.vue
+++ b/packages/client/src/pages/user/pages.vue
@@ -1,7 +1,7 @@
<template>
<div>
- <MkPagination :pagination="pagination" #default="{items}" ref="list">
- <MkPagePreview v-for="page in items" :page="page" :key="page.id" class="_gap"/>
+ <MkPagination #default="{items}" ref="list" :pagination="pagination">
+ <MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
</MkPagination>
</div>
</template>
diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue
index 3ca3b2aac8..eff456372c 100644
--- a/packages/client/src/pages/user/reactions.vue
+++ b/packages/client/src/pages/user/reactions.vue
@@ -1,13 +1,13 @@
<template>
<div>
- <MkPagination :pagination="pagination" #default="{items}" ref="list">
+ <MkPagination #default="{items}" ref="list" :pagination="pagination">
<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap afdcfbfb">
<div class="header">
<MkAvatar class="avatar" :user="user"/>
<MkReactionIcon class="reaction" :reaction="item.type" :custom-emojis="item.note.emojis" :no-style="true"/>
<MkTime :time="item.createdAt" class="createdAt"/>
</div>
- <MkNote :note="item.note" @update:note="updated(note, $event)" :key="item.id"/>
+ <MkNote :key="item.id" :note="item.note" @update:note="updated(note, $event)"/>
</div>
</MkPagination>
</div>
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index 2e0c520bc6..efdc038b7e 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -1,5 +1,5 @@
<template>
-<div class="rsqzvsbo" v-if="meta">
+<div v-if="meta" class="rsqzvsbo">
<div class="top">
<MkFeaturedPhotos class="bg"/>
<XTimeline class="tl"/>
@@ -27,10 +27,10 @@
<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
</div>
<div class="action">
- <MkButton @click="signup()" inline gradate data-cy-signup style="margin-right: 12px;">{{ $ts.signup }}</MkButton>
- <MkButton @click="signin()" inline data-cy-signin>{{ $ts.login }}</MkButton>
+ <MkButton inline gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ $ts.signup }}</MkButton>
+ <MkButton inline data-cy-signin @click="signin()">{{ $ts.login }}</MkButton>
</div>
- <div class="status" v-if="onlineUsersCount && stats">
+ <div v-if="onlineUsersCount && stats" class="status">
<div>
<I18n :src="$ts.nUsers" text-tag="span" class="users">
<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
diff --git a/packages/client/src/pages/welcome.entrance.b.vue b/packages/client/src/pages/welcome.entrance.b.vue
index efb8b09360..93344dc9a8 100644
--- a/packages/client/src/pages/welcome.entrance.b.vue
+++ b/packages/client/src/pages/welcome.entrance.b.vue
@@ -1,21 +1,21 @@
<template>
-<div class="rsqzvsbo" v-if="meta">
+<div v-if="meta" class="rsqzvsbo">
<div class="top">
<MkFeaturedPhotos class="bg"/>
<XTimeline class="tl"/>
<div class="shape"></div>
<div class="main">
<h1>
- <img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span>
+ <img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span>
</h1>
<div class="about">
<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
</div>
<div class="action">
- <MkButton class="signup" @click="signup()" inline gradate>{{ $ts.signup }}</MkButton>
- <MkButton class="signin" @click="signin()" inline>{{ $ts.login }}</MkButton>
+ <MkButton class="signup" inline gradate @click="signup()">{{ $ts.signup }}</MkButton>
+ <MkButton class="signin" inline @click="signin()">{{ $ts.login }}</MkButton>
</div>
- <div class="status" v-if="onlineUsersCount && stats">
+ <div v-if="onlineUsersCount && stats" class="status">
<div>
<I18n :src="$ts.nUsers" text-tag="span" class="users">
<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index 2b0ff7a31c..36b61647a6 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -1,5 +1,5 @@
<template>
-<div class="rsqzvsbo" v-if="meta">
+<div v-if="meta" class="rsqzvsbo">
<div class="top">
<MkFeaturedPhotos class="bg"/>
<div class="fade"></div>
@@ -18,16 +18,16 @@
</div>
<div class="fg">
<h1>
- <img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span>
+ <img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span>
</h1>
<div class="about">
<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
</div>
<div class="action">
- <MkButton @click="signup()" inline gradate>{{ $ts.signup }}</MkButton>
- <MkButton @click="signin()" inline>{{ $ts.login }}</MkButton>
+ <MkButton inline gradate @click="signup()">{{ $ts.signup }}</MkButton>
+ <MkButton inline @click="signin()">{{ $ts.login }}</MkButton>
</div>
- <div class="status" v-if="onlineUsersCount && stats">
+ <div v-if="onlineUsersCount && stats" class="status">
<div>
<I18n :src="$ts.nUsers" text-tag="span" class="users">
<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
diff --git a/packages/client/src/pages/welcome.timeline.vue b/packages/client/src/pages/welcome.timeline.vue
index a3f4b9c295..38a85f67b1 100644
--- a/packages/client/src/pages/welcome.timeline.vue
+++ b/packages/client/src/pages/welcome.timeline.vue
@@ -1,12 +1,12 @@
<template>
<div class="civpbkhh">
- <div class="scrollbox" ref="scroll" v-bind:class="{ scroll: isScrolling }">
+ <div ref="scroll" class="scrollbox" v-bind:class="{ scroll: isScrolling }">
<div v-for="note in notes" class="note">
<div class="content _panel">
<div class="body">
- <MkA class="reply" v-if="note.replyId" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
+ <MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
- <MkA class="rp" v-if="note.renoteId" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
+ <MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
</div>
<div v-if="note.files.length > 0" class="richcontent">
<XMediaList :media-list="note.files"/>
@@ -15,7 +15,7 @@
<XPoll :note="note" :readOnly="true"/>
</div>
</div>
- <XReactionsViewer :note="note" ref="reactionsViewer"/>
+ <XReactionsViewer ref="reactionsViewer" :note="note"/>
</div>
</div>
</div>
diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue
index 59e26c837e..f7242dd86a 100644
--- a/packages/client/src/ui/_common_/common.vue
+++ b/packages/client/src/ui/_common_/common.vue
@@ -1,7 +1,7 @@
<template>
-<component v-for="popup in popups"
+<component :is="popup.component"
+ v-for="popup in popups"
:key="popup.id"
- :is="popup.component"
v-bind="popup.props"
v-on="popup.events"
/>
@@ -10,7 +10,7 @@
<XStreamIndicator/>
-<div id="wait" v-if="pendingApiRequestsCount > 0"></div>
+<div v-if="pendingApiRequestsCount > 0" id="wait"></div>
</template>
<script lang="ts">
diff --git a/packages/client/src/ui/_common_/sidebar.vue b/packages/client/src/ui/_common_/sidebar.vue
index 9bbf1b3e3d..6abb21d963 100644
--- a/packages/client/src/ui/_common_/sidebar.vue
+++ b/packages/client/src/ui/_common_/sidebar.vue
@@ -1,41 +1,41 @@
<template>
<div class="mvcprjjd">
<transition name="nav-back">
- <div class="nav-back _modalBg"
- v-if="showing"
+ <div v-if="showing"
+ class="nav-back _modalBg"
@click="showing = false"
@touchstart.passive="showing = false"
></div>
</transition>
<transition name="nav">
- <nav class="nav" :class="{ iconOnly, hidden }" v-show="showing">
+ <nav v-show="showing" class="nav" :class="{ iconOnly, hidden }">
<div>
- <button class="item _button account" @click="openAccountMenu" v-click-anime>
+ <button v-click-anime class="item _button account" @click="openAccountMenu">
<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
</button>
- <MkA class="item index" active-class="active" to="/" exact v-click-anime>
+ <MkA v-click-anime class="item index" active-class="active" to="/" exact>
<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
</MkA>
<template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div>
- <component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
+ <component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
</component>
</template>
<div class="divider"></div>
- <MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" v-click-anime>
+ <MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
</MkA>
- <button class="item _button" @click="more" v-click-anime>
+ <button v-click-anime class="item _button" @click="more">
<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
</button>
- <MkA class="item" active-class="active" to="/settings" v-click-anime>
+ <MkA v-click-anime class="item" active-class="active" to="/settings">
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
</MkA>
- <button class="item _button post" @click="post" data-cy-open-post-form>
+ <button class="item _button post" data-cy-open-post-form @click="post">
<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
</button>
</div>
diff --git a/packages/client/src/ui/_common_/stream-indicator.vue b/packages/client/src/ui/_common_/stream-indicator.vue
index 8b1b4b567c..3f86f94549 100644
--- a/packages/client/src/ui/_common_/stream-indicator.vue
+++ b/packages/client/src/ui/_common_/stream-indicator.vue
@@ -1,5 +1,5 @@
<template>
-<div class="nsbbhtug" v-if="hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" @click="resetDisconnected">
+<div v-if="hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" class="nsbbhtug" @click="resetDisconnected">
<div>{{ $ts.disconnectedFromServer }}</div>
<div class="command">
<button class="_textButton" @click="reload">{{ $ts.reload }}</button>
diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue
index 0ca353e4e1..1a20d46796 100644
--- a/packages/client/src/ui/_common_/upload.vue
+++ b/packages/client/src/ui/_common_/upload.vue
@@ -6,9 +6,9 @@
<div class="top">
<p class="name"><i class="fas fa-spinner fa-pulse"></i>{{ ctx.name }}</p>
<p class="status">
- <span class="initing" v-if="ctx.progressValue === undefined">{{ $ts.waiting }}<MkEllipsis/></span>
- <span class="kb" v-if="ctx.progressValue !== undefined">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
- <span class="percentage" v-if="ctx.progressValue !== undefined">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
+ <span v-if="ctx.progressValue === undefined" class="initing">{{ $ts.waiting }}<MkEllipsis/></span>
+ <span v-if="ctx.progressValue !== undefined" class="kb">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
+ <span v-if="ctx.progressValue !== undefined" class="percentage">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
</p>
</div>
<progress :value="ctx.progressValue || 0" :max="ctx.progressMax || 0" :class="{ initing: ctx.progressValue === undefined, waiting: ctx.progressValue !== undefined && ctx.progressValue === ctx.progressMax }"></progress>
diff --git a/packages/client/src/ui/chat/index.vue b/packages/client/src/ui/chat/index.vue
index 68b179e0c0..f66ab4dcee 100644
--- a/packages/client/src/ui/chat/index.vue
+++ b/packages/client/src/ui/chat/index.vue
@@ -10,10 +10,10 @@
</button>
</div>
<div class="right">
- <MkA class="item" to="/my/messaging" v-tooltip="$ts.messaging"><i class="fas fa-comments icon"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></MkA>
- <MkA class="item" to="/my/messages" v-tooltip="$ts.directNotes"><i class="fas fa-envelope icon"></i><span v-if="$i.hasUnreadSpecifiedNotes" class="indicator"><i class="fas fa-circle"></i></span></MkA>
- <MkA class="item" to="/my/mentions" v-tooltip="$ts.mentions"><i class="fas fa-at icon"></i><span v-if="$i.hasUnreadMentions" class="indicator"><i class="fas fa-circle"></i></span></MkA>
- <MkA class="item" to="/my/notifications" v-tooltip="$ts.notifications"><i class="fas fa-bell icon"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></MkA>
+ <MkA v-tooltip="$ts.messaging" class="item" to="/my/messaging"><i class="fas fa-comments icon"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></MkA>
+ <MkA v-tooltip="$ts.directNotes" class="item" to="/my/messages"><i class="fas fa-envelope icon"></i><span v-if="$i.hasUnreadSpecifiedNotes" class="indicator"><i class="fas fa-circle"></i></span></MkA>
+ <MkA v-tooltip="$ts.mentions" class="item" to="/my/mentions"><i class="fas fa-at icon"></i><span v-if="$i.hasUnreadMentions" class="indicator"><i class="fas fa-circle"></i></span></MkA>
+ <MkA v-tooltip="$ts.notifications" class="item" to="/my/notifications"><i class="fas fa-bell icon"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></MkA>
</div>
</header>
<div class="body">
@@ -26,25 +26,25 @@
<MkA to="/timeline/global" class="item" :class="{ active: tl === 'global' }"><i class="fas fa-globe icon"></i>{{ $ts._timelines.global }}</MkA>
</div>
</div>
- <div class="container" v-if="followedChannels">
+ <div v-if="followedChannels" class="container">
<div class="header">{{ $ts.channel }} ({{ $ts.following }})<button class="_button add" @click="addChannel"><i class="fas fa-plus"></i></button></div>
<div class="body">
<MkA v-for="channel in followedChannels" :key="channel.id" :to="`/channels/${ channel.id }`" class="item" :class="{ active: tl === `channel:${ channel.id }`, read: !channel.hasUnreadNote }"><i class="fas fa-satellite-dish icon"></i>{{ channel.name }}</MkA>
</div>
</div>
- <div class="container" v-if="featuredChannels">
+ <div v-if="featuredChannels" class="container">
<div class="header">{{ $ts.channel }}<button class="_button add" @click="addChannel"><i class="fas fa-plus"></i></button></div>
<div class="body">
<MkA v-for="channel in featuredChannels" :key="channel.id" :to="`/channels/${ channel.id }`" class="item" :class="{ active: tl === `channel:${ channel.id }` }"><i class="fas fa-satellite-dish icon"></i>{{ channel.name }}</MkA>
</div>
</div>
- <div class="container" v-if="lists">
+ <div v-if="lists" class="container">
<div class="header">{{ $ts.lists }}<button class="_button add" @click="addList"><i class="fas fa-plus"></i></button></div>
<div class="body">
<MkA v-for="list in lists" :key="list.id" :to="`/my/list/${ list.id }`" class="item" :class="{ active: tl === `list:${ list.id }` }"><i class="fas fa-list-ul icon"></i>{{ list.name }}</MkA>
</div>
</div>
- <div class="container" v-if="antennas">
+ <div v-if="antennas" class="container">
<div class="header">{{ $ts.antennas }}<button class="_button add" @click="addAntenna"><i class="fas fa-plus"></i></button></div>
<div class="body">
<MkA v-for="antenna in antennas" :key="antenna.id" :to="`/my/antenna/${ antenna.id }`" class="item" :class="{ active: tl === `antenna:${ antenna.id }` }"><i class="fas fa-satellite icon"></i>{{ antenna.name }}</MkA>
@@ -64,10 +64,10 @@
</button>
</div>
<div class="right">
- <button class="_button item search" @click="search" v-tooltip="$ts.search">
+ <button v-tooltip="$ts.search" class="_button item search" @click="search">
<i class="fas fa-search icon"></i>
</button>
- <MkA class="item" to="/settings" v-tooltip="$ts.settings"><i class="fas fa-cog icon"></i></MkA>
+ <MkA v-tooltip="$ts.settings" class="item" to="/settings"><i class="fas fa-cog icon"></i></MkA>
</div>
</footer>
</div>
@@ -85,7 +85,7 @@
</router-view>
</main>
- <XSide class="side" ref="side" @open="sideViewOpening = true" @close="sideViewOpening = false"/>
+ <XSide ref="side" class="side" @open="sideViewOpening = true" @close="sideViewOpening = false"/>
<div class="side widgets" :class="{ sideViewOpening }">
<XWidgets/>
</div>
diff --git a/packages/client/src/ui/chat/note-header.vue b/packages/client/src/ui/chat/note-header.vue
index f0c9adee35..0b318ba8f1 100644
--- a/packages/client/src/ui/chat/note-header.vue
+++ b/packages/client/src/ui/chat/note-header.vue
@@ -1,22 +1,22 @@
<template>
<header class="dehvdgxo">
- <MkA class="name" :to="userPage(note.user)" v-user-preview="note.user.id">
+ <MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)">
<MkUserName :user="note.user"/>
</MkA>
- <span class="is-bot" v-if="note.user.isBot">bot</span>
+ <span v-if="note.user.isBot" class="is-bot">bot</span>
<span class="username"><MkAcct :user="note.user"/></span>
- <span class="admin" v-if="note.user.isAdmin"><i class="fas fa-bookmark"></i></span>
- <span class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><i class="far fa-bookmark"></i></span>
+ <span v-if="note.user.isAdmin" class="admin"><i class="fas fa-bookmark"></i></span>
+ <span v-if="!note.user.isAdmin && note.user.isModerator" class="moderator"><i class="far fa-bookmark"></i></span>
<div class="info">
<MkA class="created-at" :to="notePage(note)">
<MkTime :time="note.createdAt"/>
</MkA>
- <span class="visibility" v-if="note.visibility !== 'public'">
+ <span v-if="note.visibility !== 'public'" class="visibility">
<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
</span>
- <span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
+ <span v-if="note.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
</div>
</header>
</template>
diff --git a/packages/client/src/ui/chat/note-preview.vue b/packages/client/src/ui/chat/note-preview.vue
index 2a08a3d7f5..c28591815e 100644
--- a/packages/client/src/ui/chat/note-preview.vue
+++ b/packages/client/src/ui/chat/note-preview.vue
@@ -5,10 +5,10 @@
<XNoteHeader class="header" :note="note" :mini="true"/>
<div class="body">
<p v-if="note.cw != null" class="cw">
- <span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
+ <span v-if="note.cw != ''" class="text">{{ note.cw }}</span>
<XCwButton v-model="showContent" :note="note"/>
</p>
- <div class="content" v-show="note.cw == null || showContent">
+ <div v-show="note.cw == null || showContent" class="content">
<XSubNote-content class="text" :note="note"/>
</div>
</div>
diff --git a/packages/client/src/ui/chat/note.sub.vue b/packages/client/src/ui/chat/note.sub.vue
index b9446753a0..b61b7521a8 100644
--- a/packages/client/src/ui/chat/note.sub.vue
+++ b/packages/client/src/ui/chat/note.sub.vue
@@ -9,7 +9,7 @@
<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
<XCwButton v-model="showContent" :note="note"/>
</p>
- <div class="content" v-show="note.cw == null || showContent">
+ <div v-show="note.cw == null || showContent" class="content">
<XSubNote-content class="text" :note="note"/>
</div>
</div>
diff --git a/packages/client/src/ui/chat/note.vue b/packages/client/src/ui/chat/note.vue
index 412f47e317..512c87a59e 100644
--- a/packages/client/src/ui/chat/note.vue
+++ b/packages/client/src/ui/chat/note.vue
@@ -1,37 +1,37 @@
<template>
<div
- class="vfzoeqcg"
v-if="!muted"
v-show="!isDeleted"
+ v-hotkey="keymap"
+ class="vfzoeqcg"
:tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote, highlighted: appearNote._prId_ || appearNote._featuredId_, operating }"
- v-hotkey="keymap"
>
- <XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
- <div class="info" v-if="pinned"><i class="fas fa-thumbtack"></i> {{ $ts.pinnedNote }}</div>
- <div class="info" v-if="appearNote._prId_"><i class="fas fa-bullhorn"></i> {{ $ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ $ts.hideThisNote }} <i class="fas fa-times"></i></button></div>
- <div class="info" v-if="appearNote._featuredId_"><i class="fas fa-bolt"></i> {{ $ts.featured }}</div>
- <div class="renote" v-if="isRenote">
+ <XSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
+ <div v-if="pinned" class="info"><i class="fas fa-thumbtack"></i> {{ $ts.pinnedNote }}</div>
+ <div v-if="appearNote._prId_" class="info"><i class="fas fa-bullhorn"></i> {{ $ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ $ts.hideThisNote }} <i class="fas fa-times"></i></button></div>
+ <div v-if="appearNote._featuredId_" class="info"><i class="fas fa-bolt"></i> {{ $ts.featured }}</div>
+ <div v-if="isRenote" class="renote">
<MkAvatar class="avatar" :user="note.user"/>
<i class="fas fa-retweet"></i>
<I18n :src="$ts.renotedBy" tag="span">
<template #user>
- <MkA class="name" :to="userPage(note.user)" v-user-preview="note.userId">
+ <MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
<MkUserName :user="note.user"/>
</MkA>
</template>
</I18n>
<div class="info">
- <button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
+ <button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
<MkTime :time="note.createdAt"/>
</button>
- <span class="visibility" v-if="note.visibility !== 'public'">
+ <span v-if="note.visibility !== 'public'" class="visibility">
<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
</span>
- <span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
+ <span v-if="note.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
</div>
</div>
<article class="article" @contextmenu.stop="onContextmenu">
@@ -44,45 +44,45 @@
<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
<XCwButton v-model="showContent" :note="appearNote"/>
</p>
- <div class="content" :class="{ collapsed }" v-show="appearNote.cw == null || showContent">
+ <div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed }">
<div class="text">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
- <MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
+ <MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
- <a class="rp" v-if="appearNote.renote != null">RN:</a>
+ <a v-if="appearNote.renote != null" class="rp">RN:</a>
</div>
- <div class="files" v-if="appearNote.files.length > 0">
+ <div v-if="appearNote.files.length > 0" class="files">
<XMediaList :media-list="appearNote.files"/>
</div>
- <XPoll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/>
- <MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="false" class="url-preview"/>
- <div class="renote" v-if="appearNote.renote"><XNoteSimple :note="appearNote.renote"/></div>
+ <XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
+ <MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
+ <div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
<button v-if="collapsed" class="fade _button" @click="collapsed = false">
<span>{{ $ts.showMore }}</span>
</button>
</div>
<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="fas fa-satellite-dish"></i> {{ appearNote.channel.name }}</MkA>
</div>
- <XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
+ <XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
<footer class="footer _panel">
- <button @click="reply()" class="button _button" v-tooltip="$ts.reply">
+ <button v-tooltip="$ts.reply" class="button _button" @click="reply()">
<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
<template v-else><i class="fas fa-reply"></i></template>
- <p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
+ <p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
</button>
- <button v-if="canRenote" @click="renote()" class="button _button" ref="renoteButton" v-tooltip="$ts.renote">
- <i class="fas fa-retweet"></i><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
+ <button v-if="canRenote" ref="renoteButton" v-tooltip="$ts.renote" class="button _button" @click="renote()">
+ <i class="fas fa-retweet"></i><p v-if="appearNote.renoteCount > 0" class="count">{{ appearNote.renoteCount }}</p>
</button>
<button v-else class="button _button">
<i class="fas fa-ban"></i>
</button>
- <button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton" v-tooltip="$ts.reaction">
+ <button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip="$ts.reaction" class="button _button" @click="react()">
<i class="fas fa-plus"></i>
</button>
- <button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton" v-tooltip="$ts.reaction">
+ <button v-if="appearNote.myReaction != null" ref="reactButton" v-tooltip="$ts.reaction" class="button _button reacted" @click="undoReact(appearNote)">
<i class="fas fa-minus"></i>
</button>
- <button class="button _button" @click="menu()" ref="menuButton">
+ <button ref="menuButton" class="button _button" @click="menu()">
<i class="fas fa-ellipsis-h"></i>
</button>
</footer>
@@ -92,7 +92,7 @@
<div v-else class="muted" @click="muted = false">
<I18n :src="$ts.userSaysSomething" tag="small">
<template #name>
- <MkA class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.userId">
+ <MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
<MkUserName :user="appearNote.user"/>
</MkA>
</template>
diff --git a/packages/client/src/ui/chat/notes.vue b/packages/client/src/ui/chat/notes.vue
index 9103f717e6..51d4afcf54 100644
--- a/packages/client/src/ui/chat/notes.vue
+++ b/packages/client/src/ui/chat/notes.vue
@@ -1,6 +1,6 @@
<template>
<div class="">
- <div class="_fullinfo" v-if="empty">
+ <div v-if="empty" class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ $ts.noNotes }}</div>
</div>
@@ -10,18 +10,18 @@
<MkError v-if="error" @retry="init()"/>
<div v-show="more && reversed" style="margin-bottom: var(--margin);">
- <MkButton style="margin: 0 auto;" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+ <MkButton style="margin: 0 auto;" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</MkButton>
</div>
- <XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :ad="true">
- <XNote :note="note" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
+ <XList ref="notes" v-slot="{ item: note }" :items="notes" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :ad="true">
+ <XNote :key="note._featuredId_ || note._prId_ || note.id" :note="note" @update:note="updated(note, $event)"/>
</XList>
<div v-show="more && !reversed" style="margin-top: var(--margin);">
- <MkButton style="margin: 0 auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+ <MkButton v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" style="margin: 0 auto;" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</MkButton>
diff --git a/packages/client/src/ui/chat/pages/channel.vue b/packages/client/src/ui/chat/pages/channel.vue
index f2488347d1..13c735cd47 100644
--- a/packages/client/src/ui/chat/pages/channel.vue
+++ b/packages/client/src/ui/chat/pages/channel.vue
@@ -1,14 +1,14 @@
<template>
<div v-if="channel" class="hhizbblb">
- <div class="info" v-if="date">
+ <div v-if="date" class="info">
<MkInfo>{{ $ts.showingPastTimeline }} <button class="_textButton clear" @click="timetravel()">{{ $ts.clear }}</button></MkInfo>
</div>
- <div class="tl" ref="body">
- <div class="new" v-if="queue > 0" :style="{ width: width + 'px', bottom: bottom + 'px' }"><button class="_buttonPrimary" @click="goTop()">{{ $ts.newNoteRecived }}</button></div>
- <XNotes class="tl" ref="tl" :pagination="pagination" @queue="queueUpdated" v-follow="true"/>
+ <div ref="body" class="tl">
+ <div v-if="queue > 0" class="new" :style="{ width: width + 'px', bottom: bottom + 'px' }"><button class="_buttonPrimary" @click="goTop()">{{ $ts.newNoteRecived }}</button></div>
+ <XNotes ref="tl" v-follow="true" class="tl" :pagination="pagination" @queue="queueUpdated"/>
</div>
<div class="bottom">
- <div class="typers" v-if="typers.length > 0">
+ <div v-if="typers.length > 0" class="typers">
<I18n :src="$ts.typingUsers" text-tag="span" class="users">
<template #users>
<b v-for="user in typers" :key="user.id" class="user">{{ user.username }}</b>
diff --git a/packages/client/src/ui/chat/pages/timeline.vue b/packages/client/src/ui/chat/pages/timeline.vue
index f4dfdf891e..07e847ad73 100644
--- a/packages/client/src/ui/chat/pages/timeline.vue
+++ b/packages/client/src/ui/chat/pages/timeline.vue
@@ -1,14 +1,14 @@
<template>
<div class="dbiokgaf">
- <div class="info" v-if="date">
+ <div v-if="date" class="info">
<MkInfo>{{ $ts.showingPastTimeline }} <button class="_textButton clear" @click="timetravel()">{{ $ts.clear }}</button></MkInfo>
</div>
<div class="top">
<XPostForm/>
</div>
- <div class="tl" ref="body">
- <div class="new" v-if="queue > 0" :style="{ width: width + 'px', top: top + 'px' }"><button class="_buttonPrimary" @click="goTop()">{{ $ts.newNoteRecived }}</button></div>
- <XNotes class="tl" ref="tl" :pagination="pagination" @queue="queueUpdated"/>
+ <div ref="body" class="tl">
+ <div v-if="queue > 0" class="new" :style="{ width: width + 'px', top: top + 'px' }"><button class="_buttonPrimary" @click="goTop()">{{ $ts.newNoteRecived }}</button></div>
+ <XNotes ref="tl" class="tl" :pagination="pagination" @queue="queueUpdated"/>
</div>
</div>
</template>
diff --git a/packages/client/src/ui/chat/post-form.vue b/packages/client/src/ui/chat/post-form.vue
index dda9563f8d..e22bedf6bd 100644
--- a/packages/client/src/ui/chat/post-form.vue
+++ b/packages/client/src/ui/chat/post-form.vue
@@ -6,7 +6,7 @@
@drop.stop="onDrop"
>
<div class="form">
- <div class="with-quote" v-if="quoteId"><i class="fas fa-quote-left"></i> {{ $ts.quoteAttached }}<button @click="quoteId = null"><i class="fas fa-times"></i></button></div>
+ <div v-if="quoteId" class="with-quote"><i class="fas fa-quote-left"></i> {{ $ts.quoteAttached }}<button @click="quoteId = null"><i class="fas fa-times"></i></button></div>
<div v-if="visibility === 'specified'" class="to-specified">
<span style="margin-right: 8px;">{{ $ts.recipient }}</span>
<div class="visibleUsers">
@@ -14,26 +14,26 @@
<MkAcct :user="u"/>
<button class="_button" @click="removeVisibleUser(u)"><i class="fas fa-times"></i></button>
</span>
- <button @click="addVisibleUser" class="_buttonPrimary"><i class="fas fa-plus fa-fw"></i></button>
+ <button class="_buttonPrimary" @click="addVisibleUser"><i class="fas fa-plus fa-fw"></i></button>
</div>
</div>
- <input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$ts.annotation" @keydown="onKeydown">
- <textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
+ <input v-show="useCw" ref="cw" v-model="cw" class="cw" :placeholder="$ts.annotation" @keydown="onKeydown">
+ <textarea ref="text" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
<footer>
<div class="left">
- <button class="_button" @click="chooseFileFrom" v-tooltip="$ts.attachFile"><i class="fas fa-photo-video"></i></button>
- <button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$ts.poll"><i class="fas fa-poll-h"></i></button>
- <button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$ts.useCw"><i class="fas fa-eye-slash"></i></button>
- <button class="_button" @click="insertMention" v-tooltip="$ts.mention"><i class="fas fa-at"></i></button>
- <button class="_button" @click="insertEmoji" v-tooltip="$ts.emoji"><i class="fas fa-laugh-squint"></i></button>
- <button class="_button" @click="showActions" v-tooltip="$ts.plugin" v-if="postFormActions.length > 0"><i class="fas fa-plug"></i></button>
+ <button v-tooltip="$ts.attachFile" class="_button" @click="chooseFileFrom"><i class="fas fa-photo-video"></i></button>
+ <button v-tooltip="$ts.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><i class="fas fa-poll-h"></i></button>
+ <button v-tooltip="$ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="fas fa-eye-slash"></i></button>
+ <button v-tooltip="$ts.mention" class="_button" @click="insertMention"><i class="fas fa-at"></i></button>
+ <button v-tooltip="$ts.emoji" class="_button" @click="insertEmoji"><i class="fas fa-laugh-squint"></i></button>
+ <button v-if="postFormActions.length > 0" v-tooltip="$ts.plugin" class="_button" @click="showActions"><i class="fas fa-plug"></i></button>
</div>
<div class="right">
<span class="text-count" :class="{ over: textLength > max }">{{ max - textLength }}</span>
- <span class="local-only" v-if="localOnly"><i class="fas fa-biohazard"></i></span>
- <button class="_button visibility" @click="setVisibility" ref="visibilityButton" v-tooltip="$ts.visibility" :disabled="channel != null">
+ <span v-if="localOnly" class="local-only"><i class="fas fa-biohazard"></i></span>
+ <button ref="visibilityButton" v-tooltip="$ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
<span v-if="visibility === 'public'"><i class="fas fa-globe"></i></span>
<span v-if="visibility === 'home'"><i class="fas fa-home"></i></span>
<span v-if="visibility === 'followers'"><i class="fas fa-unlock"></i></span>
diff --git a/packages/client/src/ui/chat/side.vue b/packages/client/src/ui/chat/side.vue
index 73881b23c0..548a46102b 100644
--- a/packages/client/src/ui/chat/side.vue
+++ b/packages/client/src/ui/chat/side.vue
@@ -1,5 +1,5 @@
<template>
-<div class="mrajymqm _narrow_" v-if="component">
+<div v-if="component" class="mrajymqm _narrow_">
<header class="header" @contextmenu.prevent.stop="onContextmenu">
<MkHeader class="title" :info="pageInfo" :center="false"/>
</header>
diff --git a/packages/client/src/ui/chat/sub-note-content.vue b/packages/client/src/ui/chat/sub-note-content.vue
index 9c169ea546..a85096ebc9 100644
--- a/packages/client/src/ui/chat/sub-note-content.vue
+++ b/packages/client/src/ui/chat/sub-note-content.vue
@@ -3,9 +3,9 @@
<div class="body">
<span v-if="note.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
<span v-if="note.deletedAt" style="opacity: 0.5">({{ $ts.deleted }})</span>
- <MkA class="reply" v-if="note.replyId" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
+ <MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
- <MkA class="rp" v-if="note.renoteId" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
+ <MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
</div>
<details v-if="note.files.length > 0">
<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary>
diff --git a/packages/client/src/ui/chat/widgets.vue b/packages/client/src/ui/chat/widgets.vue
index 6b12f9dac9..337d5a7b58 100644
--- a/packages/client/src/ui/chat/widgets.vue
+++ b/packages/client/src/ui/chat/widgets.vue
@@ -2,8 +2,8 @@
<div class="qydbhufi">
<XWidgets :edit="edit" :widgets="widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/>
- <button v-if="edit" @click="edit = false" class="_textButton" style="font-size: 0.9em;">{{ $ts.editWidgetsExit }}</button>
- <button v-else @click="edit = true" class="_textButton" style="font-size: 0.9em;">{{ $ts.editWidgets }}</button>
+ <button v-if="edit" class="_textButton" style="font-size: 0.9em;" @click="edit = false">{{ $ts.editWidgetsExit }}</button>
+ <button v-else class="_textButton" style="font-size: 0.9em;" @click="edit = true">{{ $ts.editWidgets }}</button>
</div>
</template>
diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
index c2e3bbd69b..3563e8a888 100644
--- a/packages/client/src/ui/classic.header.vue
+++ b/packages/client/src/ui/classic.header.vue
@@ -2,30 +2,30 @@
<div class="azykntjl">
<div class="body">
<div class="left">
- <MkA class="item index" active-class="active" to="/" exact v-click-anime v-tooltip="$ts.timeline">
+ <MkA v-click-anime v-tooltip="$ts.timeline" class="item index" active-class="active" to="/" exact>
<i class="fas fa-home fa-fw"></i>
</MkA>
<template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div>
- <component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime v-tooltip="$ts[menuDef[item].title]">
+ <component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime v-tooltip="$ts[menuDef[item].title]" class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
<i class="fa-fw" :class="menuDef[item].icon"></i>
<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
</component>
</template>
<div class="divider"></div>
- <MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime v-tooltip="$ts.controlPanel">
+ <MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip="$ts.controlPanel" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
<i class="fas fa-door-open fa-fw"></i>
</MkA>
- <button class="item _button" @click="more" v-click-anime>
+ <button v-click-anime class="item _button" @click="more">
<i class="fas fa-ellipsis-h fa-fw"></i>
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
</button>
</div>
<div class="right">
- <MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime v-tooltip="$ts.settings">
+ <MkA v-click-anime v-tooltip="$ts.settings" class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
<i class="fas fa-cog fa-fw"></i>
</MkA>
- <button class="item _button account" @click="openAccountMenu" v-click-anime>
+ <button v-click-anime class="item _button account" @click="openAccountMenu">
<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
</button>
<div class="post" @click="post">
diff --git a/packages/client/src/ui/classic.side.vue b/packages/client/src/ui/classic.side.vue
index 38087cebb8..ede658626a 100644
--- a/packages/client/src/ui/classic.side.vue
+++ b/packages/client/src/ui/classic.side.vue
@@ -1,9 +1,9 @@
<template>
-<div class="qvzfzxam _narrow_" v-if="component">
+<div v-if="component" class="qvzfzxam _narrow_">
<div class="container">
<header class="header" @contextmenu.prevent.stop="onContextmenu">
- <button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
- <button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
+ <button v-if="history.length > 0" class="_button" @click="back()"><i class="fas fa-chevron-left"></i></button>
+ <button v-else class="_button" style="pointer-events: none;"><!-- マージンのバランスを取るためのダミー --></button>
<span class="title">{{ pageInfo.title }}</span>
<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
</header>
diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue
index 5e4b6ae28f..cc9d7a9b48 100644
--- a/packages/client/src/ui/classic.sidebar.vue
+++ b/packages/client/src/ui/classic.sidebar.vue
@@ -1,38 +1,38 @@
<template>
<div class="npcljfve" :class="{ iconOnly }">
- <button class="item _button account" @click="openAccountMenu" v-click-anime>
+ <button v-click-anime class="item _button account" @click="openAccountMenu">
<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
</button>
- <div class="post" @click="post" data-cy-open-post-form>
+ <div class="post" data-cy-open-post-form @click="post">
<MkButton class="button" gradate full rounded>
- <i class="fas fa-pencil-alt fa-fw"></i><span class="text" v-if="!iconOnly">{{ $ts.note }}</span>
+ <i class="fas fa-pencil-alt fa-fw"></i><span v-if="!iconOnly" class="text">{{ $ts.note }}</span>
</MkButton>
</div>
<div class="divider"></div>
- <MkA class="item index" active-class="active" to="/" exact v-click-anime>
+ <MkA v-click-anime class="item index" active-class="active" to="/" exact>
<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
</MkA>
<template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div>
- <component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
+ <component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
</component>
</template>
<div class="divider"></div>
- <MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
+ <MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
</MkA>
- <button class="item _button" @click="more" v-click-anime>
+ <button v-click-anime class="item _button" @click="more">
<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
</button>
- <MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
+ <MkA v-click-anime class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
</MkA>
<div class="divider"></div>
<div class="about">
- <MkA class="link" to="/about" v-click-anime>
+ <MkA v-click-anime class="link" to="/about">
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
</MkA>
</div>
diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue
index 5d7c79a0e2..fe533662d0 100644
--- a/packages/client/src/ui/classic.vue
+++ b/packages/client/src/ui/classic.vue
@@ -4,15 +4,15 @@
<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
<template v-if="!isMobile">
- <div class="sidebar" v-if="!showMenuOnTop">
+ <div v-if="!showMenuOnTop" class="sidebar">
<XSidebar/>
</div>
- <div class="widgets left" ref="widgetsLeft" v-else>
- <XWidgets @mounted="attachSticky('widgetsLeft')" :place="'left'"/>
+ <div v-else ref="widgetsLeft" class="widgets left">
+ <XWidgets :place="'left'" @mounted="attachSticky('widgetsLeft')"/>
</div>
</template>
- <main class="main" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
+ <main class="main" :style="{ background: pageInfo?.bg }" @contextmenu.stop="onContextmenu">
<div class="content">
<MkStickyContainer>
<template #header><MkHeader v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo"/></template>
@@ -27,24 +27,24 @@
</div>
</main>
- <div v-if="isDesktop" class="widgets right" ref="widgetsRight">
- <XWidgets @mounted="attachSticky('widgetsRight')" :place="null"/>
+ <div v-if="isDesktop" ref="widgetsRight" class="widgets right">
+ <XWidgets :place="null" @mounted="attachSticky('widgetsRight')"/>
</div>
</div>
- <div class="buttons" v-if="isMobile">
- <button class="button nav _button" @click="showDrawerNav" ref="navButton"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
+ <div v-if="isMobile" class="buttons">
+ <button ref="navButton" class="button nav _button" @click="showDrawerNav"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
<button class="button home _button" @click="$route.name === 'index' ? top() : $router.push('/')"><i class="fas fa-home"></i></button>
<button class="button notifications _button" @click="$router.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
<button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button>
</div>
- <XDrawerSidebar ref="drawerNav" class="sidebar" v-if="isMobile"/>
+ <XDrawerSidebar v-if="isMobile" ref="drawerNav" class="sidebar"/>
<transition name="tray-back">
- <div class="tray-back _modalBg"
- v-if="widgetsShowing"
+ <div v-if="widgetsShowing"
+ class="tray-back _modalBg"
@click="widgetsShowing = false"
@touchstart.passive="widgetsShowing = false"
></div>
@@ -54,7 +54,7 @@
<XWidgets v-if="widgetsShowing" class="tray"/>
</transition>
- <iframe v-if="$store.state.aiChanMode" class="ivnzpscs" ref="live2d" src="https://misskey-dev.github.io/mascot-web/?scale=2&y=1.4"></iframe>
+ <iframe v-if="$store.state.aiChanMode" ref="live2d" class="ivnzpscs" src="https://misskey-dev.github.io/mascot-web/?scale=2&y=1.4"></iframe>
<XCommon/>
</div>
diff --git a/packages/client/src/ui/classic.widgets.vue b/packages/client/src/ui/classic.widgets.vue
index 562c2eeb2c..f42f27e926 100644
--- a/packages/client/src/ui/classic.widgets.vue
+++ b/packages/client/src/ui/classic.widgets.vue
@@ -3,8 +3,8 @@
<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
<MkAd class="a" :prefer="['square']"/>
- <button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
- <button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
+ <button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
+ <button v-else class="_textButton edit" style="font-size: 0.9em;" @click="editMode = true"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
</div>
</template>
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 596d14c5cd..329716664e 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -1,6 +1,6 @@
<template>
-<div class="mk-deck" :class="`${deckStore.reactiveState.columnAlign.value}`" @contextmenu.self.prevent="onContextmenu"
- :style="{ '--deckMargin': deckStore.reactiveState.columnMargin.value + 'px' }"
+<div class="mk-deck" :class="`${deckStore.reactiveState.columnAlign.value}`" :style="{ '--deckMargin': deckStore.reactiveState.columnMargin.value + 'px' }"
+ @contextmenu.self.prevent="onContextmenu"
>
<XSidebar ref="nav"/>
@@ -13,12 +13,12 @@
<DeckColumnCore v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
</section>
<DeckColumnCore v-else
- class="column"
:ref="ids[0]"
:key="ids[0]"
+ class="column"
:column="columns.find(c => c.id === ids[0])"
- @parent-focus="moveFocus(ids[0], $event)"
:style="columns.find(c => c.id === ids[0]).flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0]).width + 'px' }"
+ @parent-focus="moveFocus(ids[0], $event)"
/>
</template>
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index fe112e3039..09d089c528 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -1,11 +1,11 @@
<template>
<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-<section class="dnpfarvg _panel _narrow_" :class="{ paged: isMainColumn, naked, active, isStacked, draghover, dragging, dropready }"
+<section v-hotkey="keymap" class="dnpfarvg _panel _narrow_"
+ :class="{ paged: isMainColumn, naked, active, isStacked, draghover, dragging, dropready }"
+ :style="{ '--deckColumnHeaderHeight': deckStore.reactiveState.columnHeaderHeight.value + 'px' }"
@dragover.prevent.stop="onDragover"
@dragleave="onDragleave"
@drop.prevent.stop="onDrop"
- v-hotkey="keymap"
- :style="{ '--deckColumnHeaderHeight': deckStore.reactiveState.columnHeaderHeight.value + 'px' }"
>
<header :class="{ indicated }"
draggable="true"
@@ -14,7 +14,7 @@
@dragend="onDragend"
@contextmenu.prevent.stop="onContextmenu"
>
- <button class="toggleActive _button" @click="toggleActive" v-if="isStacked && !isMainColumn">
+ <button v-if="isStacked && !isMainColumn" class="toggleActive _button" @click="toggleActive">
<template v-if="active"><i class="fas fa-angle-up"></i></template>
<template v-else><i class="fas fa-angle-down"></i></template>
</button>
@@ -22,9 +22,9 @@
<slot name="action"></slot>
</div>
<span class="header"><slot name="header"></slot></span>
- <button v-if="func" class="menu _button" v-tooltip="func.title" @click.stop="func.handler"><i :class="func.icon || 'fas fa-cog'"></i></button>
+ <button v-if="func" v-tooltip="func.title" class="menu _button" @click.stop="func.handler"><i :class="func.icon || 'fas fa-cog'"></i></button>
</header>
- <div ref="body" v-show="active">
+ <div v-show="active" ref="body">
<slot></slot>
</div>
</section>
diff --git a/packages/client/src/ui/deck/tl-column.vue b/packages/client/src/ui/deck/tl-column.vue
index 8021688334..8b22d7efb9 100644
--- a/packages/client/src/ui/deck/tl-column.vue
+++ b/packages/client/src/ui/deck/tl-column.vue
@@ -8,14 +8,14 @@
<span style="margin-left: 8px;">{{ column.name }}</span>
</template>
- <div class="iwaalbte" v-if="disabled">
+ <div v-if="disabled" class="iwaalbte">
<p>
<i class="fas fa-minus-circle"></i>
{{ $t('disabled-timeline.title') }}
</p>
<p class="desc">{{ $t('disabled-timeline.description') }}</p>
</div>
- <XTimeline v-else-if="column.tl" ref="timeline" :src="column.tl" @after="() => $emit('loaded')" @queue="queueUpdated" @note="onNote" :key="column.tl"/>
+ <XTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl" @after="() => $emit('loaded')" @queue="queueUpdated" @note="onNote"/>
</XColumn>
</template>
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 6d00bb6048..55afc5217f 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -2,7 +2,7 @@
<div class="mk-app" :class="{ wallpaper }">
<XSidebar ref="nav" class="sidebar"/>
- <div class="contents" ref="contents" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
+ <div ref="contents" class="contents" :style="{ background: pageInfo?.bg }" @contextmenu.stop="onContextmenu">
<main ref="main">
<div class="content">
<MkStickyContainer>
@@ -20,14 +20,14 @@
</main>
</div>
- <XSide v-if="isDesktop" class="side" ref="side"/>
+ <XSide v-if="isDesktop" ref="side" class="side"/>
- <div v-if="isDesktop" class="widgets" ref="widgets">
+ <div v-if="isDesktop" ref="widgets" class="widgets">
<XWidgets @mounted="attachSticky"/>
</div>
<div class="buttons" :class="{ navHidden }">
- <button class="button nav _button" @click="showNav" ref="navButton"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
+ <button ref="navButton" class="button nav _button" @click="showNav"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
<button class="button home _button" @click="$route.name === 'index' ? top() : $router.push('/')"><i class="fas fa-home"></i></button>
<button class="button notifications _button" @click="$router.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
@@ -37,8 +37,8 @@
<button class="widgetButton _button" :class="{ navHidden }" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
<transition name="tray-back">
- <div class="tray-back _modalBg"
- v-if="widgetsShowing"
+ <div v-if="widgetsShowing"
+ class="tray-back _modalBg"
@click="widgetsShowing = false"
@touchstart.passive="widgetsShowing = false"
></div>
diff --git a/packages/client/src/ui/universal.widgets.vue b/packages/client/src/ui/universal.widgets.vue
index 37911d6624..fbfafd10ee 100644
--- a/packages/client/src/ui/universal.widgets.vue
+++ b/packages/client/src/ui/universal.widgets.vue
@@ -2,8 +2,8 @@
<div class="efzpzdvf">
<XWidgets :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
- <button v-if="editMode" @click="editMode = false" class="_textButton" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
- <button v-else @click="editMode = true" class="_textButton" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
+ <button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
+ <button v-else class="_textButton" style="font-size: 0.9em;" @click="editMode = true"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
</div>
</template>
diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
index d7098f94b3..af77f9e970 100644
--- a/packages/client/src/ui/visitor/a.vue
+++ b/packages/client/src/ui/visitor/a.vue
@@ -1,9 +1,9 @@
<template>
<div class="mk-app">
- <div class="banner" v-if="$route.path === '/'" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
+ <div v-if="$route.path === '/'" class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
<div>
- <h1 v-if="meta"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
- <div class="about" v-if="meta">
+ <h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
+ <div v-if="meta" class="about">
<div class="desc" v-html="meta.description || $ts.introMisskey"></div>
</div>
<div class="action">
@@ -12,15 +12,15 @@
</div>
</div>
</div>
- <div class="banner-mini" v-else :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
+ <div v-else class="banner-mini" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
<div>
- <h1 v-if="meta"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
+ <h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
</div>
</div>
<div class="main">
- <div class="contents" ref="contents" :class="{ wallpaper }">
- <header class="header" ref="header" v-show="$route.path !== '/'">
+ <div ref="contents" class="contents" :class="{ wallpaper }">
+ <header v-show="$route.path !== '/'" ref="header" class="header">
<XHeader :info="pageInfo"/>
</header>
<main ref="main">
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
index d662187aae..f6ad13d9a0 100644
--- a/packages/client/src/ui/visitor/b.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -2,15 +2,15 @@
<div class="mk-app">
<a v-if="root" href="https://github.com/misskey-dev/misskey" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--panel); color:var(--fg); position: fixed; z-index: 10; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
- <div class="side" v-if="!narrow && !root">
+ <div v-if="!narrow && !root" class="side">
<XKanban class="kanban" full/>
</div>
<div class="main">
- <XKanban class="banner" :powered-by="root" v-if="narrow && !root"/>
+ <XKanban v-if="narrow && !root" class="banner" :powered-by="root"/>
<div class="contents">
- <XHeader class="header" :info="pageInfo" v-if="!root"/>
+ <XHeader v-if="!root" class="header" :info="pageInfo"/>
<main>
<router-view v-slot="{ Component }">
<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
@@ -18,7 +18,7 @@
</transition>
</router-view>
</main>
- <div class="powered-by" v-if="!root">
+ <div v-if="!root" class="powered-by">
<b><MkA to="/">{{ host }}</MkA></b>
<small>Powered by <a href="https://github.com/misskey-dev/misskey" target="_blank">Misskey</a></small>
</div>
@@ -26,8 +26,8 @@
</div>
<transition name="tray-back">
- <div class="menu-back _modalBg"
- v-if="showMenu"
+ <div v-if="showMenu"
+ class="menu-back _modalBg"
@click="showMenu = false"
@touchstart.passive="showMenu = false"
></div>
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
index 5caef1cdd6..c39dc65777 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -1,19 +1,19 @@
<template>
<div class="sqxihjet">
- <div class="wide" v-if="narrow === false">
+ <div v-if="narrow === false" class="wide">
<div class="content">
<MkA to="/" class="link" active-class="active"><i class="fas fa-home icon"></i>{{ $ts.home }}</MkA>
<MkA to="/explore" class="link" active-class="active"><i class="fas fa-hashtag icon"></i>{{ $ts.explore }}</MkA>
<MkA to="/featured" class="link" active-class="active"><i class="fas fa-fire-alt icon"></i>{{ $ts.featured }}</MkA>
<MkA to="/channels" class="link" active-class="active"><i class="fas fa-satellite-dish icon"></i>{{ $ts.channel }}</MkA>
- <div class="page active link" v-if="info">
+ <div v-if="info" class="page active link">
<div class="title">
<i v-if="info.icon" class="icon" :class="info.icon"></i>
<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
<span v-if="info.title" class="text">{{ info.title }}</span>
<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
</div>
- <button class="_button action" v-if="info.action" @click.stop="info.action.handler"><!-- TODO --></button>
+ <button v-if="info.action" class="_button action" @click.stop="info.action.handler"><!-- TODO --></button>
</div>
<div class="right">
<button class="_button search" @click="search()"><i class="fas fa-search icon"></i><span>{{ $ts.search }}</span></button>
@@ -22,17 +22,17 @@
</div>
</div>
</div>
- <div class="narrow" v-else-if="narrow === true">
+ <div v-else-if="narrow === true" class="narrow">
<button class="menu _button" @click="$parent.showMenu = true">
<i class="fas fa-bars icon"></i>
</button>
- <div class="title" v-if="info">
+ <div v-if="info" class="title">
<i v-if="info.icon" class="icon" :class="info.icon"></i>
<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
<span v-if="info.title" class="text">{{ info.title }}</span>
<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
</div>
- <button class="action _button" v-if="info && info.action" @click.stop="info.action.handler">
+ <button v-if="info && info.action" class="action _button" @click.stop="info.action.handler">
<!-- TODO -->
</button>
</div>
diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue
index a57665ea7e..2da4dd40b6 100644
--- a/packages/client/src/ui/visitor/kanban.vue
+++ b/packages/client/src/ui/visitor/kanban.vue
@@ -4,10 +4,10 @@
<div class="contents">
<div class="wrapper">
<h1 v-if="meta" :class="{ full }">
- <MkA to="/" class="link"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></MkA>
+ <MkA to="/" class="link"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></MkA>
</h1>
<template v-if="full">
- <div class="about" v-if="meta">
+ <div v-if="meta" class="about">
<div class="desc" v-html="meta.description || $ts.introMisskey"></div>
</div>
<div class="action">
@@ -16,8 +16,8 @@
</div>
<div class="announcements panel">
<header>{{ $ts.announcements }}</header>
- <MkPagination :pagination="announcements" #default="{items}" class="list">
- <section class="item" v-for="announcement in items" :key="announcement.id">
+ <MkPagination #default="{items}" :pagination="announcements" class="list">
+ <section v-for="announcement in items" :key="announcement.id" class="item">
<div class="title">{{ announcement.title }}</div>
<div class="content">
<Mfm :text="announcement.text"/>
@@ -26,7 +26,7 @@
</section>
</MkPagination>
</div>
- <div class="powered-by" v-if="poweredBy">
+ <div v-if="poweredBy" class="powered-by">
<b><MkA to="/">{{ host }}</MkA></b>
<small>Powered by <a href="https://github.com/misskey-dev/misskey" target="_blank">Misskey</a></small>
</div>
diff --git a/packages/client/src/widgets/activity.vue b/packages/client/src/widgets/activity.vue
index eaac1455ad..d322f4758a 100644
--- a/packages/client/src/widgets/activity.vue
+++ b/packages/client/src/widgets/activity.vue
@@ -1,7 +1,7 @@
<template>
<MkContainer :show-header="props.showHeader" :naked="props.transparent">
<template #header><i class="fas fa-chart-bar"></i>{{ $ts._widgets.activity }}</template>
- <template #func><button @click="toggleView()" class="_button"><i class="fas fa-sort"></i></button></template>
+ <template #func><button class="_button" @click="toggleView()"><i class="fas fa-sort"></i></button></template>
<div>
<MkLoading v-if="fetching"/>
@@ -41,12 +41,12 @@ const widget = define({
});
export default defineComponent({
- extends: widget,
components: {
MkContainer,
XCalendar,
XChart,
},
+ extends: widget,
data() {
return {
fetching: true,
diff --git a/packages/client/src/widgets/aichan.vue b/packages/client/src/widgets/aichan.vue
index 8196bff8fa..891b7454d1 100644
--- a/packages/client/src/widgets/aichan.vue
+++ b/packages/client/src/widgets/aichan.vue
@@ -1,6 +1,6 @@
<template>
<MkContainer :naked="props.transparent" :show-header="false">
- <iframe class="dedjhjmo" ref="live2d" @click="touched" src="https://misskey-dev.github.io/mascot-web/?scale=1.5&y=1.1&eyeY=100"></iframe>
+ <iframe ref="live2d" class="dedjhjmo" src="https://misskey-dev.github.io/mascot-web/?scale=1.5&y=1.1&eyeY=100" @click="touched"></iframe>
</MkContainer>
</template>
@@ -21,10 +21,10 @@ const widget = define({
});
export default defineComponent({
- extends: widget,
components: {
MkContainer,
},
+ extends: widget,
data() {
return {
};
diff --git a/packages/client/src/widgets/aiscript.vue b/packages/client/src/widgets/aiscript.vue
index f2ea5e268a..46c5094ee9 100644
--- a/packages/client/src/widgets/aiscript.vue
+++ b/packages/client/src/widgets/aiscript.vue
@@ -4,9 +4,9 @@
<div class="uylguesu _monospace">
<textarea v-model="props.script" placeholder="(1 + 1)"></textarea>
- <button @click="run" class="_buttonPrimary">RUN</button>
+ <button class="_buttonPrimary" @click="run">RUN</button>
<div class="logs">
- <div v-for="log in logs" class="log" :key="log.id" :class="{ print: log.print }">{{ log.text }}</div>
+ <div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
</div>
</div>
</MkContainer>
@@ -37,10 +37,10 @@ const widget = define({
});
export default defineComponent({
- extends: widget,
components: {
MkContainer
},
+ extends: widget,
data() {
return {
diff --git a/packages/client/src/widgets/clock.vue b/packages/client/src/widgets/clock.vue
index da0cd65c96..6ca7ecd430 100644
--- a/packages/client/src/widgets/clock.vue
+++ b/packages/client/src/widgets/clock.vue
@@ -35,11 +35,11 @@ const widget = define({
});
export default defineComponent({
- extends: widget,
components: {
MkContainer,
MkAnalogClock
},
+ extends: widget,
});
</script>
diff --git a/packages/client/src/widgets/digital-clock.vue b/packages/client/src/widgets/digital-clock.vue
index 9d32e8b9fe..fbf632d2de 100644
--- a/packages/client/src/widgets/digital-clock.vue
+++ b/packages/client/src/widgets/digital-clock.vue
@@ -6,8 +6,8 @@
<span v-text="mm"></span>
<span :style="{ visibility: showColon ? 'visible' : 'hidden' }">:</span>
<span v-text="ss"></span>
- <span :style="{ visibility: showColon ? 'visible' : 'hidden' }" v-if="props.showMs">:</span>
- <span v-text="ms" v-if="props.showMs"></span>
+ <span v-if="props.showMs" :style="{ visibility: showColon ? 'visible' : 'hidden' }">:</span>
+ <span v-if="props.showMs" v-text="ms"></span>
</span>
</div>
</template>
diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue
index 85cfb8b845..736a91c52e 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -4,7 +4,7 @@
<div class="wbrkwalb">
<MkLoading v-if="fetching"/>
- <transition-group tag="div" name="chart" class="instances" v-else>
+ <transition-group v-else tag="div" name="chart" class="instances">
<div v-for="(instance, i) in instances" :key="instance.id" class="instance">
<img v-if="instance.iconUrl" :src="instance.iconUrl" alt=""/>
<div class="body">
@@ -36,10 +36,10 @@ const widget = define({
});
export default defineComponent({
- extends: widget,
components: {
MkContainer, MkMiniChart
},
+ extends: widget,
props: {
foldable: {
type: Boolean,
diff --git a/packages/client/src/widgets/memo.vue b/packages/client/src/widgets/memo.vue
index 100f1b2934..9b51ada220 100644
--- a/packages/client/src/widgets/memo.vue
+++ b/packages/client/src/widgets/memo.vue
@@ -4,7 +4,7 @@
<div class="otgbylcu">
<textarea v-model="text" :placeholder="$ts.placeholder" @input="onChange"></textarea>
- <button @click="saveMemo" :disabled="!changed" class="_buttonPrimary">{{ $ts.save }}</button>
+ <button :disabled="!changed" class="_buttonPrimary" @click="saveMemo">{{ $ts.save }}</button>
</div>
</MkContainer>
</template>
@@ -26,10 +26,10 @@ const widget = define({
});
export default defineComponent({
- extends: widget,
components: {
MkContainer
},
+ extends: widget,
data() {
return {
diff --git a/packages/client/src/widgets/notifications.vue b/packages/client/src/widgets/notifications.vue
index 462f39a339..568705b661 100644
--- a/packages/client/src/widgets/notifications.vue
+++ b/packages/client/src/widgets/notifications.vue
@@ -1,7 +1,7 @@
<template>
<MkContainer :style="`height: ${props.height}px;`" :show-header="props.showHeader" :scrollable="true">
<template #header><i class="fas fa-bell"></i>{{ $ts.notifications }}</template>
- <template #func><button @click="configure()" class="_button"><i class="fas fa-cog"></i></button></template>
+ <template #func><button class="_button" @click="configure()"><i class="fas fa-cog"></i></button></template>
<div>
<XNotifications :include-types="props.includingTypes"/>
@@ -36,12 +36,12 @@ const widget = define({
});
export default defineComponent({
- extends: widget,
components: {
MkContainer,
XNotifications,
},
+ extends: widget,
data() {
return {
diff --git a/packages/client/src/widgets/photos.vue b/packages/client/src/widgets/photos.vue
index 0c919526b0..a91d4f6c49 100644
--- a/packages/client/src/widgets/photos.vue
+++ b/packages/client/src/widgets/photos.vue
@@ -36,10 +36,10 @@ const widget = define({
});
export default defineComponent({
- extends: widget,
components: {
MkContainer,
},
+ extends: widget,
data() {
return {
images: [],
diff --git a/packages/client/src/widgets/post-form.vue b/packages/client/src/widgets/post-form.vue
index 5ecaa67b5a..6de0574cc1 100644
--- a/packages/client/src/widgets/post-form.vue
+++ b/packages/client/src/widgets/post-form.vue
@@ -14,10 +14,10 @@ const widget = define({
});
export default defineComponent({
- extends: widget,
components: {
XPostForm,
},
+ extends: widget,
});
</script>
diff --git a/packages/client/src/widgets/rss.vue b/packages/client/src/widgets/rss.vue
index 235fce574a..b2dc77854e 100644
--- a/packages/client/src/widgets/rss.vue
+++ b/packages/client/src/widgets/rss.vue
@@ -5,7 +5,7 @@
<div class="ekmkgxbj">
<MkLoading v-if="fetching"/>
- <div class="feed" v-else>
+ <div v-else class="feed">
<a v-for="item in items" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a>
</div>
</div>
@@ -33,10 +33,10 @@ const widget = define({
});
export default defineComponent({
- extends: widget,
components: {
MkContainer
},
+ extends: widget,
data() {
return {
items: [],
diff --git a/packages/client/src/widgets/server-metric/index.vue b/packages/client/src/widgets/server-metric/index.vue
index cfe3c15df7..019e16fb33 100644
--- a/packages/client/src/widgets/server-metric/index.vue
+++ b/packages/client/src/widgets/server-metric/index.vue
@@ -1,9 +1,9 @@
<template>
<MkContainer :show-header="props.showHeader" :naked="props.transparent">
<template #header><i class="fas fa-server"></i>{{ $ts._widgets.serverMetric }}</template>
- <template #func><button @click="toggleView()" class="_button"><i class="fas fa-sort"></i></button></template>
+ <template #func><button class="_button" @click="toggleView()"><i class="fas fa-sort"></i></button></template>
- <div class="mkw-serverMetric" v-if="meta">
+ <div v-if="meta" class="mkw-serverMetric">
<XCpuMemory v-if="props.view === 0" :connection="connection" :meta="meta"/>
<XNet v-if="props.view === 1" :connection="connection" :meta="meta"/>
<XCpu v-if="props.view === 2" :connection="connection" :meta="meta"/>
@@ -44,7 +44,6 @@ const widget = define({
});
export default defineComponent({
- extends: widget,
components: {
MkContainer,
XCpuMemory,
@@ -53,6 +52,7 @@ export default defineComponent({
XMemory,
XDisk,
},
+ extends: widget,
data() {
return {
meta: null,
diff --git a/packages/client/src/widgets/timeline.vue b/packages/client/src/widgets/timeline.vue
index 0d0629abe2..aee6a35b1d 100644
--- a/packages/client/src/widgets/timeline.vue
+++ b/packages/client/src/widgets/timeline.vue
@@ -1,7 +1,7 @@
<template>
<MkContainer :show-header="props.showHeader" :style="`height: ${props.height}px;`" :scrollable="true">
<template #header>
- <button @click="choose" class="_button">
+ <button class="_button" @click="choose">
<i v-if="props.src === 'home'" class="fas fa-home"></i>
<i v-else-if="props.src === 'local'" class="fas fa-comments"></i>
<i v-else-if="props.src === 'social'" class="fas fa-share-alt"></i>
@@ -51,11 +51,11 @@ const widget = define({
});
export default defineComponent({
- extends: widget,
components: {
MkContainer,
XTimeline,
},
+ extends: widget,
data() {
return {
diff --git a/packages/client/src/widgets/trends.vue b/packages/client/src/widgets/trends.vue
index dba3392618..ffad93c02b 100644
--- a/packages/client/src/widgets/trends.vue
+++ b/packages/client/src/widgets/trends.vue
@@ -4,7 +4,7 @@
<div class="wbrkwala">
<MkLoading v-if="fetching"/>
- <transition-group tag="div" name="chart" class="tags" v-else>
+ <transition-group v-else tag="div" name="chart" class="tags">
<div v-for="stat in stats" :key="stat.tag">
<div class="tag">
<MkA class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</MkA>
@@ -35,10 +35,10 @@ const widget = define({
});
export default defineComponent({
- extends: widget,
components: {
MkContainer, MkMiniChart
},
+ extends: widget,
data() {
return {
stats: [],