natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip: refactor(client): migrate components to composition api

This commit is contained in:
syuilo 2022-01-16 07:47:28 +09:00
parent 9693dfb09d
commit 7cbeef21e1
6 changed files with 214 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
packages/client/src/components/global/a.vue
View File

@ -4,130 +4,113 @@
</a> </a>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { inject } from 'vue';
import * as os from '@/os'; import * as os from '@/os';
import copyToClipboard from '@/scripts/copy-to-clipboard'; import copyToClipboard from '@/scripts/copy-to-clipboard';
import { router } from '@/router'; import { router } from '@/router';
import { url } from '@/config'; import { url } from '@/config';
import { popout } from '@/scripts/popout'; import { popout as popout_ } from '@/scripts/popout';
import { ColdDeviceStorage } from '@/store'; import { i18n } from '@/i18n';
import { defaultStore } from '@/store';
export default defineComponent({ const props = withDefaults(defineProps<{
inject: { to: string;
navHook: { activeClass?: null | string;
default: null behavior?: null | 'window' | 'browser' | 'modalWindow';
}, }>(), {
sideViewHook: { activeClass: null,
default: null behavior: null,
} });
},
props: { const navHook = inject('navHook', null);
to: { const sideViewHook = inject('sideViewHook', null);
type: String,
required: true,
},
activeClass: {
type: String,
required: false,
},
behavior: {
type: String,
required: false,
},
},
computed: { const active = $computed(() => {
active() { if (props.activeClass == null) return false;
if (this.activeClass == null) return false; const resolved = router.resolve(props.to);
const resolved = router.resolve(this.to); if (resolved.path === router.currentRoute.value.path) return true;
if (resolved.path == this.$route.path) return true;
if (resolved.name == null) return false; if (resolved.name == null) return false;
if (this.$route.name == null) return false; if (router.currentRoute.value.name == null) return false;
return resolved.name == this.$route.name; return resolved.name === router.currentRoute.value.name;
} });
},
methods: { function onContextmenu(ev) {
onContextmenu(e) {
if (window.getSelection().toString() !== '') return; if (window.getSelection().toString() !== '') return;
os.contextMenu([{ os.contextMenu([{
type: 'label', type: 'label',
text: this.to, text: props.to,
}, { }, {
icon: 'fas fa-window-maximize', icon: 'fas fa-window-maximize',
text: this.$ts.openInWindow, text: i18n.locale.openInWindow,
action: () => { action: () => {
os.pageWindow(this.to); os.pageWindow(props.to);
} }
}, this.sideViewHook ? { }, sideViewHook ? {
icon: 'fas fa-columns', icon: 'fas fa-columns',
text: this.$ts.openInSideView, text: i18n.locale.openInSideView,
action: () => { action: () => {
this.sideViewHook(this.to); sideViewHook(props.to);
} }
} : undefined, { } : undefined, {
icon: 'fas fa-expand-alt', icon: 'fas fa-expand-alt',
text: this.$ts.showInPage, text: i18n.locale.showInPage,
action: () => { action: () => {
this.$router.push(this.to); router.push(props.to);
} }
}, null, { }, null, {
icon: 'fas fa-external-link-alt', icon: 'fas fa-external-link-alt',
text: this.$ts.openInNewTab, text: i18n.locale.openInNewTab,
action: () => { action: () => {
window.open(this.to, '_blank'); window.open(props.to, '_blank');
} }
}, { }, {
icon: 'fas fa-link', icon: 'fas fa-link',
text: this.$ts.copyLink, text: i18n.locale.copyLink,
action: () => { action: () => {
copyToClipboard(`${url}${this.to}`); copyToClipboard(`${url}${props.to}`);
} }
}], e); }], ev);
}, }
window() { function window() {
os.pageWindow(this.to); os.pageWindow(props.to);
}, }
modalWindow() { function modalWindow() {
os.modalPageWindow(this.to); os.modalPageWindow(props.to);
}, }
popout() { function popout() {
popout(this.to); popout_(props.to);
}, }
nav() { function nav() {
if (this.behavior === 'browser') { if (props.behavior === 'browser') {
location.href = this.to; location.href = props.to;
return; return;
} }
if (this.behavior) { if (props.behavior) {
if (this.behavior === 'window') { if (props.behavior === 'window') {
return this.window(); return window();
} else if (this.behavior === 'modalWindow') { } else if (props.behavior === 'modalWindow') {
return this.modalWindow(); return modalWindow();
} }
} }
if (this.navHook) { if (navHook) {
this.navHook(this.to); navHook(props.to);
} else { } else {
if (this.$store.state.defaultSideView && this.sideViewHook && this.to !== '/') { if (defaultStore.state.defaultSideView && sideViewHook && props.to !== '/') {
return this.sideViewHook(this.to); return sideViewHook(props.to);
} }
if (this.$router.currentRoute.value.path === this.to) { if (router.currentRoute.value.path === props.to) {
window.scroll({ top: 0, behavior: 'smooth' }); window.scroll({ top: 0, behavior: 'smooth' });
} else { } else {
this.$router.push(this.to); router.push(props.to);
} }
} }
} }
}
});
</script> </script>

94
packages/client/src/components/global/avatar.vue
View File

@ -1,74 +1,54 @@
<template> <template>
<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"> <span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: $store.state.squareAvatars }" :style="{ color }" :title="acct(user)" @click="onClick">
<img class="inner" :src="url" decoding="async"/> <img class="inner" :src="url" decoding="async"/>
<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/> <MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
</span> </span>
<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"> <MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: $store.state.squareAvatars }" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target">
<img class="inner" :src="url" decoding="async"/> <img class="inner" :src="url" decoding="async"/>
<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/> <MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
</MkA> </MkA>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { onMounted, watch } from 'vue';
import * as misskey from 'misskey-js';
import { getStaticImageUrl } from '@/scripts/get-static-image-url'; import { getStaticImageUrl } from '@/scripts/get-static-image-url';
import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash'; import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
import { acct, userPage } from '@/filters/user'; import { acct, userPage } from '@/filters/user';
import MkUserOnlineIndicator from '@/components/user-online-indicator.vue'; import MkUserOnlineIndicator from '@/components/user-online-indicator.vue';
import { defaultStore } from '@/store';
export default defineComponent({ const props = withDefaults(defineProps<{
components: { user: misskey.entities.User;
MkUserOnlineIndicator target?: string | null;
}, disableLink?: boolean;
props: { disablePreview?: boolean;
user: { showIndicator?: boolean;
type: Object, }>(), {
required: true target: null,
}, disableLink: false,
target: { disablePreview: false,
required: false, showIndicator: false,
default: null });
},
disableLink: { const emit = defineEmits<{
required: false, (e: 'click', ev: MouseEvent): void;
default: false }>();
},
disablePreview: { const url = defaultStore.state.disableShowingAnimatedImages
required: false, ? getStaticImageUrl(props.user.avatarUrl)
default: false : props.user.avatarUrl;
},
showIndicator: { function onClick(ev: MouseEvent) {
required: false, emit('click', ev);
default: false }
}
}, let color = $ref();
emits: ['click'],
computed: { watch(() => props.user.avatarBlurhash, () => {
cat(): boolean { color = extractAvgColorFromBlurhash(props.user.avatarBlurhash);
return this.user.isCat; }, {
}, immediate: true,
url(): string {
return this.$store.state.disableShowingAnimatedImages
? getStaticImageUrl(this.user.avatarUrl)
: this.user.avatarUrl;
},
},
watch: {
'user.avatarBlurhash'() {
if (this.$el == null) return;
this.$el.style.color = extractAvgColorFromBlurhash(this.user.avatarBlurhash);
}
},
mounted() {
this.$el.style.color = extractAvgColorFromBlurhash(this.user.avatarBlurhash);
},
methods: {
onClick(e) {
this.$emit('click', e);
},
acct,
userPage
}
}); });
</script> </script>

30
packages/client/src/components/global/loading.vue
View File

@ -4,27 +4,17 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { } from 'vue';
export default defineComponent({ const props = withDefaults(defineProps<{
props: { inline?: boolean;
inline: { colored?: boolean;
type: Boolean, mini?: boolean;
required: false, }>(), {
default: false inline: false,
}, colored: true,
colored: { mini: false,
type: Boolean,
required: false,
default: true
},
mini: {
type: Boolean,
required: false,
default: false
},
}
}); });
</script> </script>

22
packages/client/src/components/global/misskey-flavored-markdown.vue
View File

@ -1,15 +1,23 @@
<template> <template>
<mfm-core v-bind="$attrs" class="havbbuyv" :class="{ nowrap: $attrs['nowrap'] }"/> <MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :customEmojis="customEmojis" :isNote="isNote" class="havbbuyv" :class="{ nowrap }"/>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { } from 'vue';
import MfmCore from '@/components/mfm'; import MfmCore from '@/components/mfm';
export default defineComponent({ const props = withDefaults(defineProps<{
components: { text: string;
MfmCore plain?: boolean;
} nowrap?: boolean;
author?: any;
customEmojis?: any;
isNote?: boolean;
}>(), {
plain: false,
nowrap: false,
author: null,
isNote: true,
}); });
</script> </script>

114
packages/client/src/components/global/time.vue
View File

@ -1,73 +1,57 @@
<template> <template>
<time :title="absolute"> <time :title="absolute">
<template v-if="mode == 'relative'">{{ relative }}</template> <template v-if="mode === 'relative'">{{ relative }}</template>
<template v-else-if="mode == 'absolute'">{{ absolute }}</template> <template v-else-if="mode === 'absolute'">{{ absolute }}</template>
<template v-else-if="mode == 'detail'">{{ absolute }} ({{ relative }})</template> <template v-else-if="mode === 'detail'">{{ absolute }} ({{ relative }})</template>
</time> </time>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { onUnmounted } from 'vue';
import { i18n } from '@/i18n';
export default defineComponent({ const props = withDefaults(defineProps<{
props: { time: Date | string;
time: { mode?: 'relative' | 'absolute' | 'detail';
type: [Date, String], }>(), {
required: true mode: 'relative',
},
mode: {
type: String,
default: 'relative'
}
},
data() {
return {
tickId: null,
now: new Date()
};
},
computed: {
_time(): Date {
return typeof this.time == 'string' ? new Date(this.time) : this.time;
},
absolute(): string {
return this._time.toLocaleString();
},
relative(): string {
const time = this._time;
const ago = (this.now.getTime() - time.getTime()) / 1000/*ms*/;
return (
ago >= 31536000 ? this.$t('_ago.yearsAgo', { n: (~~(ago / 31536000)).toString() }) :
ago >= 2592000 ? this.$t('_ago.monthsAgo', { n: (~~(ago / 2592000)).toString() }) :
ago >= 604800 ? this.$t('_ago.weeksAgo', { n: (~~(ago / 604800)).toString() }) :
ago >= 86400 ? this.$t('_ago.daysAgo', { n: (~~(ago / 86400)).toString() }) :
ago >= 3600 ? this.$t('_ago.hoursAgo', { n: (~~(ago / 3600)).toString() }) :
ago >= 60 ? this.$t('_ago.minutesAgo', { n: (~~(ago / 60)).toString() }) :
ago >= 10 ? this.$t('_ago.secondsAgo', { n: (~~(ago % 60)).toString() }) :
ago >= -1 ? this.$ts._ago.justNow :
ago < -1 ? this.$ts._ago.future :
this.$ts._ago.unknown);
}
},
created() {
if (this.mode == 'relative' || this.mode == 'detail') {
this.tickId = window.requestAnimationFrame(this.tick);
}
},
unmounted() {
if (this.mode === 'relative' || this.mode === 'detail') {
window.clearTimeout(this.tickId);
}
},
methods: {
tick() {
// TODO: パフォーマンス向上のため、このコンポーネントが画面内に表示されている場合のみ更新する
this.now = new Date();
this.tickId = setTimeout(() => {
window.requestAnimationFrame(this.tick);
}, 10000);
}
}
}); });
const _time = typeof props.time == 'string' ? new Date(props.time) : props.time;
const absolute = _time.toLocaleString();
let now = $ref(new Date());
const relative = $computed(() => {
const ago = (now.getTime() - _time.getTime()) / 1000/*ms*/;
return (
ago >= 31536000 ? i18n.t('_ago.yearsAgo', { n: (~~(ago / 31536000)).toString() }) :
ago >= 2592000 ? i18n.t('_ago.monthsAgo', { n: (~~(ago / 2592000)).toString() }) :
ago >= 604800 ? i18n.t('_ago.weeksAgo', { n: (~~(ago / 604800)).toString() }) :
ago >= 86400 ? i18n.t('_ago.daysAgo', { n: (~~(ago / 86400)).toString() }) :
ago >= 3600 ? i18n.t('_ago.hoursAgo', { n: (~~(ago / 3600)).toString() }) :
ago >= 60 ? i18n.t('_ago.minutesAgo', { n: (~~(ago / 60)).toString() }) :
ago >= 10 ? i18n.t('_ago.secondsAgo', { n: (~~(ago % 60)).toString() }) :
ago >= -1 ? i18n.locale._ago.justNow :
ago < -1 ? i18n.locale._ago.future :
i18n.locale._ago.unknown);
});
function tick() {
// TODO: パフォーマンス向上のため、このコンポーネントが画面内に表示されている場合のみ更新する
now = new Date();
tickId = window.setTimeout(() => {
window.requestAnimationFrame(tick);
}, 10000);
}
let tickId: number;
if (props.mode === 'relative' || props.mode === 'detail') {
tickId = window.requestAnimationFrame(tick);
onUnmounted(() => {
window.clearTimeout(tickId);
});
}
</script> </script>

21
packages/client/src/components/global/user-name.vue
View File

@ -2,19 +2,14 @@
<Mfm :text="user.name || user.username" :plain="true" :nowrap="nowrap" :custom-emojis="user.emojis"/> <Mfm :text="user.name || user.username" :plain="true" :nowrap="nowrap" :custom-emojis="user.emojis"/>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { } from 'vue';
import * as misskey from 'misskey-js';
export default defineComponent({ const props = withDefaults(defineProps<{
props: { user: misskey.entities.User;
user: { nowrap?: boolean;
type: Object, }>(), {
required: true nowrap: true,
},
nowrap: {
type: Boolean,
default: true
},
}
}); });
</script> </script>