Migrate to Vue3 (#6587)

* Update reaction.vue

* fix  bug

* wip

* wip

* wjio

* wip

* Revert "wip"

This reverts commit e427f2160adf4e8a4147006e25a89854edab0033.

* wip

* wip

* wip

* Update init.ts

* Update drive-window.vue

* wip

* wip

* Use PascalCase for components

* Use PascalCase for components

* update dep

* wip

* wip

* wip

* Update init.ts

* wip

* Update paging.ts

* Update test.vue

* watch deep

* wip

* lint

* wip

* wip

* wip

* wip

* wiop

* wip

* Update webpack.config.ts

* alllow null poll

* wip

* wip

* wip

* wiop

* UI redesign & refactor (#6714)

* wip

* wip

* wip

* wip

* wip

* Update drive.vue

* Update word-mute.vue

* wip

* wip

* wip

* clean up

* wip

* Update default.vue

* wip

* Update notes.vue

* Update mfm.ts

* Update index.home.vue

* Update post-form.vue

* Update post-form-attaches.vue

* wip

* Update post-form.vue

* Update sidebar.vue

* wip

* wip

* Update index.vue

* wip

* Update default.vue

* Update index.vue

* Update index.vue

* wip

* Update post-form-attaches.vue

* Update note.vue

* wip

* clean up

* Update notes.vue

* wip

* wip

* Update ja-JP.yml

* wip

* wip

* Update index.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update default.vue

* wip

* Update _dark.json5

* wip

* wip

* wip

* clean up

* wip

* wip

* Update index.vue

* Update test.vue

* wip

* wip

* fix

* wip

* wip

* wip

* wip

* clena yop

* wip

* wip

* Update store.ts

* Update messaging-room.vue

* Update default.widgets.vue

* fix

* wip

* wip

* Update modal.vue

* wip

* Update os.ts

* Update os.ts

* Update deck.vue

* Update init.ts

* wip

* Update ja-JP.yml

* v-sizeは単にwindowのresizeを監視するだけで良いかもしれない

* Update modal.vue

* wip

* Update tooltip.ts

* wip

* wip

* wip

* wip

* wip

* Update image-viewer.vue

* wip

* wip

* Update style.scss

* Update style.scss

* Update visitor.vue

* wip

* Update init.ts

* Update init.ts

* wip

* wip

* Update visitor.vue

* Update visitor.vue

* Update visitor.vue

* Update visitor.vue

* wip

* wip

* Update modal.vue

* Update header.vue

* Update menu.vue

* Update about.vue

* Update about-misskey.vue

* wip

* wip

* Update visitor.vue

* Update tooltip.ts

* wip

* Update drive.vue

* wip

* Update style.scss

* Update header.vue

* wip

* wip

* Update users.user.vue

* Update announcements.vue

* wip

* wip

* wip

* Update emojis.vue

* wip

* Update emojis.vue

* Update style.scss

* Update users.vue

* wip

* Update style.scss

* wip

* Update welcome.entrance.vue

* Update radio.vue

* Update size.ts

* Update emoji-edit-dialog.vue

* wip

* Update emojis.vue

* wip

* Update emojis.vue

* Update emojis.vue

* Update emojis.vue

* wip

* wip

* wip

* wip

* Update file-dialog.vue

* wip

* wip

* Update token-generate-window.vue

* Update notification-setting-window.vue

* wip

* wip

* Update _error_.vue

* Update ja-JP.yml

* wip

* wip

* Update store.ts

* Update emojis.vue

* Update emojis.vue

* Update emojis.vue

* Update announcements.vue

* Update store.ts

* wip

* Update page-editor.vue

* wip

* wip

* Update modal.vue

* wip

* Update select-file.ts

* Update timeline.vue

* Update emojis.vue

* Update os.ts

* wip

* Update user-select.vue

* Update mfm.ts

* Update get-file-info.ts

* Update drive.vue

* Update init.ts

* Update mfm.ts

* wip

* wip

* Update window.vue

* Update note.vue

* wip

* wip

* Update user-info.vue

* wip

* wip

* wip

* wip

* wip

* Update header.vue

* Update header.vue

* wip

* Update explore.vue

* wip

* wip

* wip

* Update webpack.config.ts

* wip

* wip

* wip

* wip

* wip

* wip

* Update autocomplete.ts

* wip

* wip

* wip

* Update toast.vue

* wip

* Update post-form-dialog.vue

* wip

* wip

* wip

* wip

* wip

* Update users.vue

* wip

* Update explore.vue

* wip

* wip

* wip

* Update package.json

* wip

* Update icon-dialog.vue

* wip

* wip

* Update user-preview.ts

* wip

* wip

* wip

* wip

* wip

* Update instance.vue

* Update user-name.vue

* Update federation.vue

* Update instance.vue

* wip

* wip

* Update tag.vue

* wip

* wip

* wip

* wip

* wip

* Update instance.vue

* wip

* Update os.ts

* Update os.ts

* wip

* wip

* wip

* Update router.ts

* wip

* Update init.ts

* Update note.vue

* Update messages.vue

* wip

* wip

* wip

* wip

* wip

* google

* wip

* wip

* wip

* wip

* Update theme-editor.vue

* wip

* wip

* Update room.vue

* Update channel-editor.vue

* wip

* Update window.vue

* Update window.vue

* wip

* Update window.vue

* Update window.vue

* wip

* Update menu.vue

* wip

* wip

* wip

* wip

* Update messaging-room.vue

* wip

* Update post-form.vue

* Update default.widgets.vue

* Update window.vue

* wip

1 files changed, 149 insertions, 0 deletions

diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue
new file mode 100644
index 0000000000..32207d5dca
--- /dev/null
+++ b/src/client/ui/_common_/header.vue
@@ -0,0 +1,149 @@
+<template>
+<div class="fdidabkb">
+	<transition :name="$store.state.device.animation ? 'header' : ''" mode="out-in" appear>
+		<button class="_button back" v-if="withBack && canBack" @click="back()"><Fa :icon="faChevronLeft"/></button>
+	</transition>
+	<template v-if="info">
+		<div class="titleContainer">
+			<div class="title" v-for="header in info.header" :key="header.id" :class="{ _button: header.onClick, selected: header.selected }" @click="header.onClick" v-tooltip="header.tooltip">
+				<Fa v-if="header.icon" :icon="header.icon" :key="header.icon" class="icon"/>
+				<MkAvatar v-else-if="header.avatar" class="avatar" :user="header.avatar" :disable-preview="true"/>
+				<span v-if="header.title" class="text">{{ header.title }}</span>
+				<MkUserName v-else-if="header.userName" :user="header.userName" :nowrap="false" class="text"/>
+			</div>
+		</div>
+		<button class="_button action" v-if="info.action" @click="info.action.handler"><Fa :icon="info.action.icon" :key="info.action.icon"/></button>
+	</template>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+
+export default defineComponent({
+	props: {
+		info: {
+			required: true
+		},
+		withBack: {
+			type: Boolean,
+			required: false,
+			default: true,
+		},
+	},
+
+	data() {
+		return {
+			canBack: false,
+			height: 0,
+			faChevronLeft
+		};
+	},
+
+	watch: {
+		$route(to, from) {
+			this.canBack = (window.history.length > 0 && !['index'].includes(to.name));
+		},
+	},
+
+	mounted() {
+		this.height = this.$el.parentElement.offsetHeight + 'px';
+		new ResizeObserver((entries, observer) => {
+			this.height = this.$el.parentElement.offsetHeight + 'px';
+		}).observe(this.$el);
+	},
+
+	methods: {
+		back() {
+			if (this.canBack) this.$router.back();
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped vars="{ height }">
+.fdidabkb {
+	text-align: center;
+
+	> .back {
+		height: var(--height);
+		width: var(--height);
+	}
+
+	> .action {
+		height: var(--height);
+		width: var(--height);
+	}
+
+	> .titleContainer {
+		width: calc(100% - (var(--height) * 2));
+
+		> .title {
+			height: var(--height);
+
+			> .avatar {
+				$size: 32px;
+				margin: calc((var(--height) - #{$size}) / 2) 8px calc((var(--height) - #{$size}) / 2) 0;
+				pointer-events: none;
+			}
+		}
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+.fdidabkb {
+	> .back {
+		position: absolute;
+		z-index: 1;
+		top: 0;
+		left: 0;
+	}
+
+	> .action {
+		position: absolute;
+		z-index: 1;
+		top: 0;
+		right: 0;
+	}
+
+	> .titleContainer {
+		margin: 0 auto;
+		overflow: auto;
+		white-space: nowrap;
+
+		> .title {
+			display: inline-block;
+			vertical-align: bottom;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			padding: 0 16px;
+
+			> .icon + .text {
+				margin-left: 8px;
+			}
+
+			> .avatar {
+				$size: 32px;
+				display: inline-block;
+				width: $size;
+				height: $size;
+				vertical-align: bottom;
+			}
+
+			&._button {
+				&:hover {
+					color: var(--fgHighlighted);
+				}
+			}
+
+			&.selected {
+				box-shadow: 0 -2px 0 0 var(--accent) inset;
+				color: var(--fgHighlighted);
+			}
+		}
+	}
+}
+</style>