merge upstream
This commit is contained in:
Hazelnoot
commit
d8908ef2d8
1065 changed files with 32953 additions and 20092 deletions
|
|
@ -5,9 +5,9 @@
|
|||
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
import { expect, userEvent, within } from '@storybook/test';
|
||||
import { StoryObj } from '@storybook/vue3';
|
||||
import type { StoryObj } from '@storybook/vue3';
|
||||
import MkA from './MkA.vue';
|
||||
import { tick } from '@/scripts/test-utils.js';
|
||||
import { tick } from '@/utility/test-utils.js';
|
||||
export const Default = {
|
||||
render(args) {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@ export type MkABehavior = 'window' | 'browser' | null;
|
|||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, inject, shallowRef } from 'vue';
|
||||
import * as os from '@/os.js';
|
||||
import { copyToClipboard } from '@/scripts/copy-to-clipboard.js';
|
||||
import { computed, inject, useTemplateRef } from 'vue';
|
||||
import { url } from '@@/js/config.js';
|
||||
import * as os from '@/os.js';
|
||||
import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { useRouter } from '@/router/supplier.js';
|
||||
import { useRouter } from '@/router.js';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
to: string;
|
||||
|
|
@ -32,7 +32,7 @@ const props = withDefaults(defineProps<{
|
|||
|
||||
const behavior = props.behavior ?? inject<MkABehavior>('linkNavigationBehavior', null);
|
||||
|
||||
const el = shallowRef<HTMLElement>();
|
||||
const el = useTemplateRef('el');
|
||||
|
||||
defineExpose({ $el: el });
|
||||
|
||||
|
|
@ -87,7 +87,7 @@ function openWindow() {
|
|||
|
||||
function nav(ev: MouseEvent) {
|
||||
if (behavior === 'browser') {
|
||||
location.href = props.to;
|
||||
window.location.href = props.to;
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*/
|
||||
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
import { StoryObj } from '@storybook/vue3';
|
||||
import type { StoryObj } from '@storybook/vue3';
|
||||
import { userDetailed } from '../../../.storybook/fakes.js';
|
||||
import MkAcct from './MkAcct.vue';
|
||||
export const Default = {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template>
|
||||
<span>
|
||||
<span>@{{ user.username }}</span>
|
||||
<span v-if="user.host || detail || defaultStore.state.showFullAcct" style="opacity: 0.5;">@{{ user.host || host }}</span>
|
||||
<span v-if="user.host || detail" style="opacity: 0.5;">@{{ user.host || host }}</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
|
|
@ -14,7 +14,6 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
import * as Misskey from 'misskey-js';
|
||||
import { toUnicode } from 'punycode.js';
|
||||
import { host as hostRaw } from '@@/js/config.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
|
||||
defineProps<{
|
||||
user: Misskey.entities.UserLite;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
import { expect, userEvent, waitFor, within } from '@storybook/test';
|
||||
import { StoryObj } from '@storybook/vue3';
|
||||
import type { StoryObj } from '@storybook/vue3';
|
||||
import MkAd from './MkAd.vue';
|
||||
import { i18n } from '@/i18n.js';
|
||||
|
||||
|
|
|
|||
|
|
@ -45,9 +45,10 @@ import { url as local, host } from '@@/js/config.js';
|
|||
import { i18n } from '@/i18n.js';
|
||||
import { instance } from '@/instance.js';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import { store } from '@/store.js';
|
||||
import * as os from '@/os.js';
|
||||
import { $i } from '@/account.js';
|
||||
import { $i } from '@/i.js';
|
||||
import { prefer } from '@/preferences.js';
|
||||
|
||||
type Ad = (typeof instance)['ads'][number];
|
||||
|
||||
|
|
@ -66,7 +67,7 @@ const choseAd = (): Ad | null => {
|
|||
return props.specify;
|
||||
}
|
||||
|
||||
const allAds = instance.ads.map(ad => defaultStore.state.mutedAds.includes(ad.id) ? {
|
||||
const allAds = instance.ads.map(ad => store.s.mutedAds.includes(ad.id) ? {
|
||||
...ad,
|
||||
ratio: 0,
|
||||
} : ad);
|
||||
|
|
@ -107,12 +108,12 @@ const chosen = ref(choseAd());
|
|||
|
||||
const self = computed(() => chosen.value?.url.startsWith(local));
|
||||
|
||||
const shouldHide = ref(!defaultStore.state.forceShowAds && $i && $i.policies.canHideAds && (props.specify == null));
|
||||
const shouldHide = ref(!prefer.s.forceShowAds && $i && $i.policies.canHideAds && (props.specify == null));
|
||||
|
||||
function reduceFrequency(): void {
|
||||
if (chosen.value == null) return;
|
||||
if (defaultStore.state.mutedAds.includes(chosen.value.id)) return;
|
||||
defaultStore.push('mutedAds', chosen.value.id);
|
||||
if (store.s.mutedAds.includes(chosen.value.id)) return;
|
||||
store.push('mutedAds', chosen.value.id);
|
||||
os.success();
|
||||
chosen.value = choseAd();
|
||||
showMenu.value = false;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*/
|
||||
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
import { StoryObj } from '@storybook/vue3';
|
||||
import type { StoryObj } from '@storybook/vue3';
|
||||
import { userDetailed } from '../../../.storybook/fakes.js';
|
||||
import MkAvatar from './MkAvatar.vue';
|
||||
const common = {
|
||||
|
|
|
|||
|
|
@ -35,6 +35,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
zIndex: getDecorationZIndex(decoration),
|
||||
}"
|
||||
alt=""
|
||||
draggable="false"
|
||||
style="-webkit-user-drag: none;"
|
||||
>
|
||||
</template>
|
||||
</component>
|
||||
|
|
@ -46,14 +48,13 @@ import * as Misskey from 'misskey-js';
|
|||
import { extractAvgColorFromBlurhash } from '@@/js/extract-avg-color-from-blurhash.js';
|
||||
import MkImgWithBlurhash from '../MkImgWithBlurhash.vue';
|
||||
import MkA from './MkA.vue';
|
||||
import { getStaticImageUrl } from '@/scripts/media-proxy.js';
|
||||
import { getStaticImageUrl } from '@/utility/media-proxy.js';
|
||||
import { acct, userPage } from '@/filters/user.js';
|
||||
import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import { prefer } from '@/preferences.js';
|
||||
|
||||
const animation = ref(defaultStore.state.animation);
|
||||
const squareAvatars = ref(defaultStore.state.squareAvatars);
|
||||
const useBlurEffect = ref(defaultStore.state.useBlurEffect);
|
||||
const animation = ref(prefer.s.animation);
|
||||
const squareAvatars = ref(prefer.s.squareAvatars);
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
user: Misskey.entities.User;
|
||||
|
|
@ -76,7 +77,7 @@ const emit = defineEmits<{
|
|||
(ev: 'click', v: MouseEvent): void;
|
||||
}>();
|
||||
|
||||
const showDecoration = props.forceShowDecoration || defaultStore.state.showAvatarDecorations;
|
||||
const showDecoration = props.forceShowDecoration || prefer.s.showAvatarDecorations;
|
||||
|
||||
const bound = computed(() => props.link
|
||||
? { to: userPage(props.user), target: props.target }
|
||||
|
|
@ -84,7 +85,7 @@ const bound = computed(() => props.link
|
|||
|
||||
const url = computed(() => {
|
||||
if (props.user.avatarUrl == null) return null;
|
||||
if (defaultStore.state.disableShowingAnimatedImages || defaultStore.state.dataSaver.avatar) return getStaticImageUrl(props.user.avatarUrl);
|
||||
if (prefer.s.disableShowingAnimatedImages || prefer.s.dataSaver.avatar) return getStaticImageUrl(props.user.avatarUrl);
|
||||
return props.user.avatarUrl;
|
||||
});
|
||||
|
||||
|
|
@ -94,7 +95,7 @@ function onClick(ev: MouseEvent): void {
|
|||
}
|
||||
|
||||
function getDecorationUrl(decoration: Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'>) {
|
||||
if (defaultStore.state.disableShowingAnimatedImages || defaultStore.state.dataSaver.avatar) return getStaticImageUrl(decoration.url);
|
||||
if (prefer.s.disableShowingAnimatedImages || prefer.s.dataSaver.avatar) return getStaticImageUrl(decoration.url);
|
||||
return decoration.url;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*/
|
||||
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
import { StoryObj } from '@storybook/vue3';
|
||||
import type { StoryObj } from '@storybook/vue3';
|
||||
import MkCondensedLine from './MkCondensedLine.vue';
|
||||
export const Default = {
|
||||
render(args) {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*/
|
||||
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
import { StoryObj } from '@storybook/vue3';
|
||||
import type { StoryObj } from '@storybook/vue3';
|
||||
import MkCustomEmoji from './MkCustomEmoji.vue';
|
||||
export const Default = {
|
||||
render(args) {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
:class="[$style.root, { [$style.normal]: normal, [$style.noStyle]: noStyle }]"
|
||||
src="/client-assets/dummy.png"
|
||||
:title="alt"
|
||||
draggable="false"
|
||||
style="-webkit-user-drag: none;"
|
||||
/>
|
||||
<span v-else-if="errored">:{{ customEmojiName }}:</span>
|
||||
<img
|
||||
|
|
@ -18,6 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
:alt="alt"
|
||||
:title="alt"
|
||||
decoding="async"
|
||||
draggable="false"
|
||||
@error="errored = true"
|
||||
@load="errored = false"
|
||||
@click="onClick"
|
||||
|
|
@ -27,16 +30,16 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<script lang="ts" setup>
|
||||
import { computed, defineAsyncComponent, inject, ref } from 'vue';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
import { getProxiedImageUrl, getStaticImageUrl } from '@/scripts/media-proxy.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import { getProxiedImageUrl, getStaticImageUrl } from '@/utility/media-proxy.js';
|
||||
import { customEmojisMap } from '@/custom-emojis.js';
|
||||
import * as os from '@/os.js';
|
||||
import { misskeyApi, misskeyApiGet } from '@/scripts/misskey-api.js';
|
||||
import { copyToClipboard } from '@/scripts/copy-to-clipboard.js';
|
||||
import * as sound from '@/scripts/sound.js';
|
||||
import { misskeyApi, misskeyApiGet } from '@/utility/misskey-api.js';
|
||||
import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
|
||||
import * as sound from '@/utility/sound.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import MkCustomEmojiDetailedDialog from '@/components/MkCustomEmojiDetailedDialog.vue';
|
||||
import { $i } from '@/account.js';
|
||||
import { $i } from '@/i.js';
|
||||
import { prefer } from '@/preferences.js';
|
||||
|
||||
const props = defineProps<{
|
||||
name: string;
|
||||
|
|
@ -77,7 +80,7 @@ const url = computed(() => {
|
|||
false,
|
||||
true,
|
||||
);
|
||||
return defaultStore.reactiveState.disableShowingAnimatedImages.value
|
||||
return prefer.s.disableShowingAnimatedImages
|
||||
? getStaticImageUrl(proxied)
|
||||
: proxied;
|
||||
});
|
||||
|
|
@ -99,7 +102,6 @@ function onClick(ev: MouseEvent) {
|
|||
icon: 'ti ti-copy',
|
||||
action: () => {
|
||||
copyToClipboard(`:${props.name}:`);
|
||||
os.success();
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -159,6 +161,7 @@ async function edit(name: string) {
|
|||
.root {
|
||||
height: 2em;
|
||||
vertical-align: middle;
|
||||
-webkit-user-drag: none;
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*/
|
||||
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
import { StoryObj } from '@storybook/vue3';
|
||||
import type { StoryObj } from '@storybook/vue3';
|
||||
import isChromatic from 'chromatic/isChromatic';
|
||||
import MkEllipsis from './MkEllipsis.vue';
|
||||
export const Default = {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*/
|
||||
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
import { StoryObj } from '@storybook/vue3';
|
||||
import type { StoryObj } from '@storybook/vue3';
|
||||
import MkEmoji from './MkEmoji.vue';
|
||||
export const Default = {
|
||||
render(args) {
|
||||
|
|
|
|||
|
|
@ -12,12 +12,12 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
import { computed, inject } from 'vue';
|
||||
import { colorizeEmoji, getEmojiName } from '@@/js/emojilist.js';
|
||||
import { char2fluentEmojiFilePath, char2twemojiFilePath, char2tossfaceFilePath } from '@@/js/emoji-base.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import * as os from '@/os.js';
|
||||
import { copyToClipboard } from '@/scripts/copy-to-clipboard.js';
|
||||
import * as sound from '@/scripts/sound.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
import * as os from '@/os.js';
|
||||
import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
|
||||
import * as sound from '@/utility/sound.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { prefer } from '@/preferences.js';
|
||||
|
||||
const props = defineProps<{
|
||||
emoji: string;
|
||||
|
|
@ -27,9 +27,9 @@ const props = defineProps<{
|
|||
|
||||
const react = inject<((name: string) => void) | null>('react', null);
|
||||
|
||||
const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : defaultStore.state.emojiStyle === 'tossface' ? char2tossfaceFilePath : char2fluentEmojiFilePath;
|
||||
const char2path = prefer.s.emojiStyle === 'twemoji' ? char2twemojiFilePath : prefer.s.emojiStyle === 'tossface' ? char2tossfaceFilePath : char2fluentEmojiFilePath;
|
||||
|
||||
const useOsNativeEmojis = computed(() => defaultStore.state.emojiStyle === 'native');
|
||||
const useOsNativeEmojis = computed(() => prefer.s.emojiStyle === 'native');
|
||||
const url = computed(() => char2path(props.emoji));
|
||||
const colorizedNativeEmoji = computed(() => colorizeEmoji(props.emoji));
|
||||
|
||||
|
|
@ -52,7 +52,6 @@ function onClick(ev: MouseEvent) {
|
|||
icon: 'ti ti-copy',
|
||||
action: () => {
|
||||
copyToClipboard(props.emoji);
|
||||
os.success();
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { expect, waitFor } from '@storybook/test';
|
||||
import { StoryObj } from '@storybook/vue3';
|
||||
import type { StoryObj } from '@storybook/vue3';
|
||||
import MkError from './MkError.vue';
|
||||
export const Default = {
|
||||
render(args) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import { Meta } from '@storybook/vue3';
|
||||
import type { Meta } from '@storybook/vue3';
|
||||
import MkError from './MkError.vue';
|
||||
|
||||
export const argTypes = {
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" appear>
|
||||
<Transition :name="prefer.s.animation ? '_transition_zoom' : ''" appear>
|
||||
<div :class="$style.root">
|
||||
<img :class="$style.img" :src="serverErrorImageUrl" class="_ghost"/>
|
||||
<img :class="$style.img" :src="serverErrorImageUrl" draggable="false"/>
|
||||
<p :class="$style.text"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</p>
|
||||
<MkButton :class="$style.button" @click="() => emit('retry')">{{ i18n.ts.retry }}</MkButton>
|
||||
</div>
|
||||
|
|
@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<script lang="ts" setup>
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import { prefer } from '@/preferences.js';
|
||||
import { serverErrorImageUrl } from '@/instance.js';
|
||||
|
||||
const emit = defineEmits<{
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div :class="[$style.spacer, defaultStore.reactiveState.darkMode.value ? $style.dark : $style.light]"></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defaultStore } from '@/store.js';
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.spacer {
|
||||
box-sizing: border-box;
|
||||
padding: 32px;
|
||||
margin: 0 auto;
|
||||
height: 300px;
|
||||
background-clip: content-box;
|
||||
background-size: auto auto;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
|
||||
&.light {
|
||||
background-image: repeating-linear-gradient(135deg, transparent, transparent 16px, #00000010 16px, #00000010 20px );
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background-image: repeating-linear-gradient(135deg, transparent, transparent 16px, #FFFFFF16 16px, #FFFFFF16 20px );
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -11,9 +11,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, onMounted, onActivated, onBeforeUnmount, ref, shallowRef } from 'vue';
|
||||
import { nextTick, onMounted, onActivated, onBeforeUnmount, ref, useTemplateRef } from 'vue';
|
||||
|
||||
const rootEl = shallowRef<HTMLDivElement>();
|
||||
const rootEl = useTemplateRef('rootEl');
|
||||
const showing = ref(false);
|
||||
|
||||
const emit = defineEmits<{
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*/
|
||||
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
import { StoryObj } from '@storybook/vue3';
|
||||
import type { StoryObj } from '@storybook/vue3';
|
||||
import isChromatic from 'chromatic/isChromatic';
|
||||
import MkLoading from './MkLoading.vue';
|
||||
export const Default = {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
* SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import { StoryObj } from '@storybook/vue3';
|
||||
|
||||
import type { StoryObj } from '@storybook/vue3';
|
||||
import { expect, within } from '@storybook/test';
|
||||
import MkMfm from './MkMfm.js';
|
||||
export const Default = {
|
||||
|
|
|
|||
|
|
@ -3,10 +3,12 @@
|
|||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import { VNode, h, defineAsyncComponent, SetupContext } from 'vue';
|
||||
import * as mfm from '@transfem-org/sfm-js';
|
||||
import { h, defineAsyncComponent } from 'vue';
|
||||
import * as mfm from 'mfm-js';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { host } from '@@/js/config.js';
|
||||
import type { VNode, SetupContext } from 'vue';
|
||||
import type { MkABehavior } from '@/components/global/MkA.vue';
|
||||
import CkFollowMouse from '../CkFollowMouse.vue';
|
||||
import MkUrl from '@/components/global/MkUrl.vue';
|
||||
import MkTime from '@/components/global/MkTime.vue';
|
||||
|
|
@ -18,8 +20,8 @@ import MkCode from '@/components/MkCode.vue';
|
|||
import MkCodeInline from '@/components/MkCodeInline.vue';
|
||||
import MkGoogle from '@/components/MkGoogle.vue';
|
||||
import MkSparkle from '@/components/MkSparkle.vue';
|
||||
import MkA, { MkABehavior } from '@/components/global/MkA.vue';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import MkA from '@/components/global/MkA.vue';
|
||||
import { prefer } from '@/preferences.js';
|
||||
|
||||
function safeParseFloat(str: unknown): number | null {
|
||||
if (typeof str !== 'string' || str === '') return null;
|
||||
|
|
@ -76,13 +78,12 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
|
|||
return t.match(/^\-?[0-9.]+s$/) ? t : null;
|
||||
};
|
||||
|
||||
const useAnim = defaultStore.state.advancedMfm && defaultStore.state.animatedMfm ? true : props.isAnim ? true : false;
|
||||
|
||||
const validColor = (c: unknown): string | null => {
|
||||
if (typeof c !== 'string') return null;
|
||||
return c.match(/^[0-9a-f]{3,6}$/i) ? c : null;
|
||||
};
|
||||
|
||||
const useAnim = prefer.s.advancedMfm && prefer.s.animatedMfm;
|
||||
const isBlock = props.isBlock ?? false;
|
||||
|
||||
const SkFormula = defineAsyncComponent(() => import('@/components/SkFormula.vue'));
|
||||
|
|
@ -192,17 +193,17 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
|
|||
}
|
||||
case 'x2': {
|
||||
return h('span', {
|
||||
class: defaultStore.state.advancedMfm ? 'mfm-x2' : '',
|
||||
class: prefer.s.advancedMfm ? 'mfm-x2' : '',
|
||||
}, genEl(token.children, scale * 2));
|
||||
}
|
||||
case 'x3': {
|
||||
return h('span', {
|
||||
class: defaultStore.state.advancedMfm ? 'mfm-x3' : '',
|
||||
class: prefer.s.advancedMfm ? 'mfm-x3' : '',
|
||||
}, genEl(token.children, scale * 3));
|
||||
}
|
||||
case 'x4': {
|
||||
return h('span', {
|
||||
class: defaultStore.state.advancedMfm ? 'mfm-x4' : '',
|
||||
class: prefer.s.advancedMfm ? 'mfm-x4' : '',
|
||||
}, genEl(token.children, scale * 4));
|
||||
}
|
||||
case 'font': {
|
||||
|
|
@ -282,7 +283,7 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
|
|||
}, genEl(token.children, scale));
|
||||
}
|
||||
case 'position': {
|
||||
if (!defaultStore.state.advancedMfm) break;
|
||||
if (!prefer.s.advancedMfm) break;
|
||||
const x = safeParseFloat(token.props.args.x) ?? 0;
|
||||
const y = safeParseFloat(token.props.args.y) ?? 0;
|
||||
style = `transform: translateX(${x}em) translateY(${y}em);`;
|
||||
|
|
@ -305,7 +306,7 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
|
|||
break;
|
||||
}
|
||||
case 'scale': {
|
||||
if (!defaultStore.state.advancedMfm) {
|
||||
if (!prefer.s.advancedMfm) {
|
||||
style = '';
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
import { waitFor } from '@storybook/test';
|
||||
import { StoryObj } from '@storybook/vue3';
|
||||
import type { StoryObj } from '@storybook/vue3';
|
||||
import MkPageHeader from './MkPageHeader.vue';
|
||||
export const Empty = {
|
||||
render(args) {
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="$style.tabsInner">
|
||||
<button
|
||||
v-for="t in tabs" :ref="(el) => tabRefs[t.key] = (el as HTMLElement)" v-tooltip.noDelay="t.title"
|
||||
class="_button" :class="[$style.tab, { [$style.active]: t.key != null && t.key === props.tab, [$style.animate]: defaultStore.reactiveState.animation.value }]"
|
||||
class="_button" :class="[$style.tab, { [$style.active]: t.key != null && t.key === props.tab, [$style.animate]: prefer.s.animation }]"
|
||||
@mousedown="(ev) => onTabMousedown(t, ev)" @click="(ev) => onTabClick(t, ev)"
|
||||
>
|
||||
<div :class="$style.tabInner">
|
||||
<i v-if="t.icon" :class="[$style.tabIcon, t.icon]"></i>
|
||||
<div
|
||||
v-if="!t.iconOnly || (!defaultStore.reactiveState.animation.value && t.key === tab)"
|
||||
v-if="!t.iconOnly || (!prefer.s.animation && t.key === tab)"
|
||||
:class="$style.tabTitle"
|
||||
>
|
||||
{{ t.title }}
|
||||
|
|
@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
<div
|
||||
ref="tabHighlightEl"
|
||||
:class="[$style.tabHighlight, { [$style.animate]: defaultStore.reactiveState.animation.value }]"
|
||||
:class="[$style.tabHighlight, { [$style.animate]: prefer.s.animation }]"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -41,20 +41,20 @@ export type Tab = {
|
|||
onClick?: (ev: MouseEvent) => void;
|
||||
} & (
|
||||
| {
|
||||
iconOnly?: false;
|
||||
title: string;
|
||||
icon?: string;
|
||||
}
|
||||
iconOnly?: false;
|
||||
title: string;
|
||||
icon?: string;
|
||||
}
|
||||
| {
|
||||
iconOnly: true;
|
||||
icon: string;
|
||||
}
|
||||
iconOnly: true;
|
||||
icon: string;
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, onMounted, onUnmounted, shallowRef, watch } from 'vue';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import { nextTick, onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
|
||||
import { prefer } from '@/preferences.js';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
tabs?: Tab[];
|
||||
|
|
@ -69,9 +69,9 @@ const emit = defineEmits<{
|
|||
(ev: 'tabClick', key: string);
|
||||
}>();
|
||||
|
||||
const el = shallowRef<HTMLElement | null>(null);
|
||||
const el = useTemplateRef('el');
|
||||
const tabHighlightEl = useTemplateRef('tabHighlightEl');
|
||||
const tabRefs: Record<string, HTMLElement | null> = {};
|
||||
const tabHighlightEl = shallowRef<HTMLElement | null>(null);
|
||||
|
||||
function onTabMousedown(tab: Tab, ev: MouseEvent): void {
|
||||
// ユーザビリティの観点からmousedown時にはonClickは呼ばない
|
||||
|
|
@ -170,7 +170,7 @@ onMounted(() => {
|
|||
|
||||
if (props.rootEl) {
|
||||
ro2 = new ResizeObserver((entries, observer) => {
|
||||
if (document.body.contains(el.value as HTMLElement)) {
|
||||
if (window.document.body.contains(el.value as HTMLElement)) {
|
||||
nextTick(() => renderTab());
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -50,15 +50,17 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, ref, inject, shallowRef, computed } from 'vue';
|
||||
import { onMounted, onUnmounted, ref, inject, useTemplateRef, computed } from 'vue';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import XTabs, { Tab } from './MkPageHeader.tabs.vue';
|
||||
import { scrollToTop } from '@@/js/scroll.js';
|
||||
import { globalEvents } from '@/events.js';
|
||||
import { injectReactiveMetadata } from '@/scripts/page-metadata.js';
|
||||
import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
|
||||
import XTabs from './MkPageHeader.tabs.vue';
|
||||
import type { Tab } from './MkPageHeader.tabs.vue';
|
||||
import type { PageHeaderItem } from '@/types/page-header.js';
|
||||
import type { PageMetadata } from '@/scripts/page-metadata.js';
|
||||
import type { PageMetadata } from '@/page.js';
|
||||
import { globalEvents } from '@/events.js';
|
||||
import { openAccountMenu as openAccountMenu_ } from '@/accounts.js';
|
||||
import { $i } from '@/i.js';
|
||||
import { DI } from '@/di.js';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
overridePageMetadata?: PageMetadata;
|
||||
|
|
@ -79,13 +81,15 @@ const emit = defineEmits<{
|
|||
|
||||
const displayBackButton = props.displayBackButton && history.state.key !== 'index' && history.length > 1 && inject('shouldBackButton', true);
|
||||
|
||||
const injectedPageMetadata = injectReactiveMetadata();
|
||||
const viewId = inject(DI.viewId);
|
||||
const viewTransitionName = computed(() => `${viewId}---pageHeader`);
|
||||
const injectedPageMetadata = inject(DI.pageMetadata);
|
||||
const pageMetadata = computed(() => props.overridePageMetadata ?? injectedPageMetadata.value);
|
||||
|
||||
const hideTitle = computed(() => inject('shouldOmitHeaderTitle', false) || props.hideTitle);
|
||||
const thin_ = props.thin || inject('shouldHeaderThin', false);
|
||||
|
||||
const el = shallowRef<HTMLElement | undefined>(undefined);
|
||||
const el = useTemplateRef('el');
|
||||
const bg = ref<string | undefined>(undefined);
|
||||
const narrow = ref(false);
|
||||
const hasTabs = computed(() => props.tabs.length > 0);
|
||||
|
|
@ -120,7 +124,7 @@ function goBack(): void {
|
|||
|
||||
const calcBg = () => {
|
||||
const rawBg = 'var(--MI_THEME-bg)';
|
||||
const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
|
||||
const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(window.document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
|
||||
tinyBg.setAlpha(0.85);
|
||||
bg.value = tinyBg.toRgbString();
|
||||
};
|
||||
|
|
@ -129,12 +133,12 @@ let ro: ResizeObserver | null;
|
|||
|
||||
onMounted(() => {
|
||||
calcBg();
|
||||
globalEvents.on('themeChanged', calcBg);
|
||||
globalEvents.on('themeChanging', calcBg);
|
||||
|
||||
if (el.value && el.value.parentElement) {
|
||||
narrow.value = el.value.parentElement.offsetWidth < 500;
|
||||
ro = new ResizeObserver((entries, observer) => {
|
||||
if (el.value && el.value.parentElement && document.body.contains(el.value as HTMLElement)) {
|
||||
if (el.value && el.value.parentElement && window.document.body.contains(el.value as HTMLElement)) {
|
||||
narrow.value = el.value.parentElement.offsetWidth < 500;
|
||||
}
|
||||
});
|
||||
|
|
@ -143,7 +147,7 @@ onMounted(() => {
|
|||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
globalEvents.off('themeChanged', calcBg);
|
||||
globalEvents.off('themeChanging', calcBg);
|
||||
if (ro) ro.disconnect();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -154,6 +158,7 @@ onUnmounted(() => {
|
|||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
border-bottom: solid 0.5px var(--MI_THEME-divider);
|
||||
width: 100%;
|
||||
view-transition-name: v-bind(viewTransitionName);
|
||||
}
|
||||
|
||||
.upper,
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<script lang="ts" setup>
|
||||
import { inject } from 'vue';
|
||||
import { deviceKind } from '@/scripts/device-kind.js';
|
||||
import { deviceKind } from '@/utility/device-kind.js';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
contentMax?: number | null;
|
||||
|
|
|
|||
|
|
@ -22,9 +22,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, provide, inject, Ref, ref, watch, useTemplateRef } from 'vue';
|
||||
|
||||
import { CURRENT_STICKY_BOTTOM, CURRENT_STICKY_TOP } from '@@/js/const.js';
|
||||
import { onMounted, onUnmounted, provide, inject, ref, watch, useTemplateRef } from 'vue';
|
||||
import { DI } from '@/di.js';
|
||||
|
||||
const rootEl = useTemplateRef('rootEl');
|
||||
const headerEl = useTemplateRef('headerEl');
|
||||
|
|
@ -32,13 +31,13 @@ const footerEl = useTemplateRef('footerEl');
|
|||
|
||||
const headerHeight = ref<string | undefined>();
|
||||
const childStickyTop = ref(0);
|
||||
const parentStickyTop = inject<Ref<number>>(CURRENT_STICKY_TOP, ref(0));
|
||||
provide(CURRENT_STICKY_TOP, childStickyTop);
|
||||
const parentStickyTop = inject(DI.currentStickyTop, ref(0));
|
||||
provide(DI.currentStickyTop, childStickyTop);
|
||||
|
||||
const footerHeight = ref<string | undefined>();
|
||||
const childStickyBottom = ref(0);
|
||||
const parentStickyBottom = inject<Ref<number>>(CURRENT_STICKY_BOTTOM, ref(0));
|
||||
provide(CURRENT_STICKY_BOTTOM, childStickyBottom);
|
||||
const parentStickyBottom = inject(DI.currentStickyBottom, ref(0));
|
||||
provide(DI.currentStickyBottom, childStickyBottom);
|
||||
|
||||
const calc = () => {
|
||||
// コンポーネントが表示されてないけどKeepAliveで残ってる場合などは null になる
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
import { expect } from '@storybook/test';
|
||||
import { StoryObj } from '@storybook/vue3';
|
||||
import type { StoryObj } from '@storybook/vue3';
|
||||
import MkTime from './MkTime.vue';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { dateTimeFormat } from '@@/js/intl-const.js';
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
import { expect, userEvent, waitFor, within } from '@storybook/test';
|
||||
import { StoryObj } from '@storybook/vue3';
|
||||
import type { StoryObj } from '@storybook/vue3';
|
||||
import { HttpResponse, http } from 'msw';
|
||||
import { commonHandlers } from '../../../.storybook/mocks.js';
|
||||
import MkUrl from './MkUrl.vue';
|
||||
|
|
|
|||
|
|
@ -31,9 +31,9 @@ import { defineAsyncComponent, ref } from 'vue';
|
|||
import { toUnicode as decodePunycode } from 'punycode.js';
|
||||
import { url as local } from '@@/js/config.js';
|
||||
import * as os from '@/os.js';
|
||||
import { useTooltip } from '@/scripts/use-tooltip.js';
|
||||
import { useTooltip } from '@/use/use-tooltip.js';
|
||||
import { isEnabledUrlPreview } from '@/instance.js';
|
||||
import { MkABehavior } from '@/components/global/MkA.vue';
|
||||
import type { MkABehavior } from '@/components/global/MkA.vue';
|
||||
import { warningExternalWebsite } from '@/scripts/warning-external-website.js';
|
||||
|
||||
function safeURIDecode(str: string): string {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
import { expect } from '@storybook/test';
|
||||
import { StoryObj } from '@storybook/vue3';
|
||||
import type { StoryObj } from '@storybook/vue3';
|
||||
import { userDetailed } from '../../../.storybook/fakes.js';
|
||||
import MkUserName from './MkUserName.vue';
|
||||
export const Default = {
|
||||
|
|
|
|||
60
packages/frontend/src/components/global/NestedRouterView.vue
Normal file
60
packages/frontend/src/components/global/NestedRouterView.vue
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<Suspense :timeout="0">
|
||||
<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
|
||||
|
||||
<template #fallback>
|
||||
<MkLoading/>
|
||||
</template>
|
||||
</Suspense>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { inject, provide, ref, shallowRef } from 'vue';
|
||||
import type { Router } from '@/router.js';
|
||||
import type { PathResolvedResult } from '@/lib/nirax.js';
|
||||
import MkLoadingPage from '@/pages/_loading_.vue';
|
||||
import { DI } from '@/di.js';
|
||||
|
||||
const props = defineProps<{
|
||||
router?: Router;
|
||||
}>();
|
||||
|
||||
const router = props.router ?? inject(DI.router);
|
||||
|
||||
if (router == null) {
|
||||
throw new Error('no router provided');
|
||||
}
|
||||
|
||||
const currentDepth = inject(DI.routerCurrentDepth, 0);
|
||||
provide(DI.routerCurrentDepth, currentDepth + 1);
|
||||
|
||||
function resolveNested(current: PathResolvedResult, d = 0): PathResolvedResult | null {
|
||||
if (d === currentDepth) {
|
||||
return current;
|
||||
} else {
|
||||
if (current.child) {
|
||||
return resolveNested(current.child, d + 1);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const current = resolveNested(router.current)!;
|
||||
const currentPageComponent = shallowRef('component' in current.route ? current.route.component : MkLoadingPage);
|
||||
const currentPageProps = ref(current.props);
|
||||
const key = ref(router.getCurrentFullPath());
|
||||
|
||||
router.useListener('change', ({ resolved }) => {
|
||||
const current = resolveNested(resolved);
|
||||
if (current == null || 'redirect' in current.route) return;
|
||||
currentPageComponent.value = current.route.component;
|
||||
currentPageProps.value = current.props;
|
||||
key.value = router.getCurrentFullPath();
|
||||
});
|
||||
</script>
|
||||
21
packages/frontend/src/components/global/PageWithAnimBg.vue
Normal file
21
packages/frontend/src/components/global/PageWithAnimBg.vue
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<MkAnimBg style="position: absolute;"/>
|
||||
<div class="_pageScrollable" style="position: absolute; top: 0; width: 100%; height: 100%;">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import MkAnimBg from '@/components/MkAnimBg.vue';
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
||||
</style>
|
||||
44
packages/frontend/src/components/global/PageWithHeader.vue
Normal file
44
packages/frontend/src/components/global/PageWithHeader.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div :class="[$style.root, reversed ? '_pageScrollableReversed' : '_pageScrollable']">
|
||||
<MkStickyContainer>
|
||||
<template #header><MkPageHeader v-model:tab="tab" :actions="actions" :tabs="tabs"/></template>
|
||||
<div :class="$style.body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<template #footer><slot name="footer"></slot></template>
|
||||
</MkStickyContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { PageHeaderItem } from '@/types/page-header.js';
|
||||
import type { Tab } from './MkPageHeader.tabs.vue';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
tabs?: Tab[];
|
||||
actions?: PageHeaderItem[] | null;
|
||||
thin?: boolean;
|
||||
hideTitle?: boolean;
|
||||
displayMyAvatar?: boolean;
|
||||
reversed?: boolean;
|
||||
}>(), {
|
||||
tabs: () => ([] as Tab[]),
|
||||
});
|
||||
|
||||
const tab = defineModel<string>('tab');
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
|
||||
}
|
||||
|
||||
.body {
|
||||
min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,98 +4,108 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<KeepAlive
|
||||
:max="defaultStore.state.numberOfPageCache"
|
||||
:exclude="pageCacheController"
|
||||
>
|
||||
<Suspense :timeout="0">
|
||||
<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
|
||||
<div ref="rootEl" class="_pageContainer" :class="$style.root">
|
||||
<KeepAlive :max="prefer.s.numberOfPageCache">
|
||||
<Suspense :timeout="0">
|
||||
<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
|
||||
|
||||
<template #fallback>
|
||||
<MkLoading/>
|
||||
</template>
|
||||
</Suspense>
|
||||
</KeepAlive>
|
||||
<template #fallback>
|
||||
<MkLoading/>
|
||||
</template>
|
||||
</Suspense>
|
||||
</KeepAlive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { inject, onBeforeUnmount, provide, ref, shallowRef, computed, nextTick } from 'vue';
|
||||
import { IRouter, Resolved, RouteDef } from '@/nirax.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import { globalEvents } from '@/events.js';
|
||||
import { inject, nextTick, onMounted, provide, ref, shallowRef, useTemplateRef } from 'vue';
|
||||
import type { Router } from '@/router.js';
|
||||
import { prefer } from '@/preferences.js';
|
||||
import MkLoadingPage from '@/pages/_loading_.vue';
|
||||
import { DI } from '@/di.js';
|
||||
import { randomId } from '@/utility/random-id.js';
|
||||
import { deepEqual } from '@/utility/deep-equal.js';
|
||||
|
||||
const props = defineProps<{
|
||||
router?: IRouter;
|
||||
nested?: boolean;
|
||||
router?: Router;
|
||||
}>();
|
||||
|
||||
const router = props.router ?? inject('router');
|
||||
const router = props.router ?? inject(DI.router);
|
||||
|
||||
if (router == null) {
|
||||
throw new Error('no router provided');
|
||||
}
|
||||
|
||||
const currentDepth = inject('routerCurrentDepth', 0);
|
||||
provide('routerCurrentDepth', currentDepth + 1);
|
||||
const viewId = randomId();
|
||||
provide(DI.viewId, viewId);
|
||||
|
||||
function resolveNested(current: Resolved, d = 0): Resolved | null {
|
||||
if (!props.nested) return current;
|
||||
const currentDepth = inject(DI.routerCurrentDepth, 0);
|
||||
provide(DI.routerCurrentDepth, currentDepth + 1);
|
||||
|
||||
if (d === currentDepth) {
|
||||
return current;
|
||||
} else {
|
||||
if (current.child) {
|
||||
return resolveNested(current.child, d + 1);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
const rootEl = useTemplateRef('rootEl');
|
||||
onMounted(() => {
|
||||
rootEl.value.style.viewTransitionName = viewId; // view-transition-nameにcss varが使えないっぽいため直接代入
|
||||
});
|
||||
|
||||
// view-transition-newなどの<pt-name-selector>にはcss varが使えず、v-bindできないため直接スタイルを生成
|
||||
const viewTransitionStylesTag = window.document.createElement('style');
|
||||
viewTransitionStylesTag.textContent = `
|
||||
@keyframes ${viewId}-old {
|
||||
to { transform: scale(0.95); opacity: 0; }
|
||||
}
|
||||
|
||||
const current = resolveNested(router.current)!;
|
||||
@keyframes ${viewId}-new {
|
||||
from { transform: scale(0.95); opacity: 0; }
|
||||
}
|
||||
|
||||
::view-transition-old(${viewId}) {
|
||||
animation-duration: 0.2s;
|
||||
animation-name: ${viewId}-old;
|
||||
}
|
||||
|
||||
::view-transition-new(${viewId}) {
|
||||
animation-duration: 0.2s;
|
||||
animation-name: ${viewId}-new;
|
||||
}
|
||||
`;
|
||||
|
||||
window.document.head.appendChild(viewTransitionStylesTag);
|
||||
|
||||
const current = router.current!;
|
||||
const currentPageComponent = shallowRef('component' in current.route ? current.route.component : MkLoadingPage);
|
||||
const currentPageProps = ref(current.props);
|
||||
const key = ref(router.getCurrentKey() + JSON.stringify(Object.fromEntries(current.props)));
|
||||
let currentRoutePath = current.route.path;
|
||||
const key = ref(router.getCurrentFullPath());
|
||||
|
||||
function onChange({ resolved, key: newKey }) {
|
||||
const current = resolveNested(resolved);
|
||||
if (current == null || 'redirect' in current.route) return;
|
||||
currentPageComponent.value = current.route.component;
|
||||
currentPageProps.value = current.props;
|
||||
key.value = newKey + JSON.stringify(Object.fromEntries(current.props));
|
||||
router.useListener('change', ({ resolved }) => {
|
||||
if (resolved == null || 'redirect' in resolved.route) return;
|
||||
if (resolved.route.path === currentRoutePath && deepEqual(resolved.props, currentPageProps.value)) return;
|
||||
|
||||
nextTick(() => {
|
||||
// ページ遷移完了後に再びキャッシュを有効化
|
||||
if (clearCacheRequested.value) {
|
||||
clearCacheRequested.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
function _() {
|
||||
currentPageComponent.value = resolved.route.component;
|
||||
currentPageProps.value = resolved.props;
|
||||
key.value = router.getCurrentFullPath();
|
||||
currentRoutePath = resolved.route.path;
|
||||
}
|
||||
|
||||
router.addListener('change', onChange);
|
||||
|
||||
// #region キャッシュ制御
|
||||
|
||||
/**
|
||||
* キャッシュクリアが有効になったら、全キャッシュをクリアする
|
||||
*
|
||||
* keepAlive側にwatcherがあるのですぐ消えるとはおもうけど、念のためページ遷移完了まではキャッシュを無効化しておく。
|
||||
* キャッシュ有効時向けにexcludeを使いたい場合は、pageCacheControllerに並列に突っ込むのではなく、下に追記すること
|
||||
*/
|
||||
const pageCacheController = computed(() => clearCacheRequested.value ? /.*/ : undefined);
|
||||
const clearCacheRequested = ref(false);
|
||||
|
||||
globalEvents.on('requestClearPageCache', () => {
|
||||
if (_DEV_) console.log('clear page cache requested');
|
||||
if (!clearCacheRequested.value) {
|
||||
clearCacheRequested.value = true;
|
||||
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||
if (prefer.s.animation && window.document.startViewTransition) {
|
||||
window.document.startViewTransition(() => new Promise((res) => {
|
||||
_();
|
||||
nextTick(() => {
|
||||
res();
|
||||
//setTimeout(res, 100);
|
||||
});
|
||||
}));
|
||||
} else {
|
||||
_();
|
||||
}
|
||||
});
|
||||
|
||||
// #endregion
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
router.removeListener('change', onChange);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
height: 100%;
|
||||
background-color: var(--MI_THEME-bg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
14
packages/frontend/src/components/global/SearchKeyword.vue
Normal file
14
packages/frontend/src/components/global/SearchKeyword.vue
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<slot></slot>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
</style>
|
||||
14
packages/frontend/src/components/global/SearchLabel.vue
Normal file
14
packages/frontend/src/components/global/SearchLabel.vue
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<slot></slot>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
</style>
|
||||
116
packages/frontend/src/components/global/SearchMarker.vue
Normal file
116
packages/frontend/src/components/global/SearchMarker.vue
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div ref="root" :class="[$style.root, { [$style.highlighted]: highlighted }]">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
onActivated,
|
||||
onDeactivated,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
watch,
|
||||
computed,
|
||||
ref,
|
||||
useTemplateRef,
|
||||
inject,
|
||||
} from 'vue';
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
markerId?: string;
|
||||
label?: string;
|
||||
icon?: string;
|
||||
keywords?: string[];
|
||||
children?: string[];
|
||||
inlining?: string[];
|
||||
}>();
|
||||
|
||||
const rootEl = useTemplateRef('root');
|
||||
const rootElMutationObserver = new MutationObserver(() => {
|
||||
checkChildren();
|
||||
});
|
||||
const injectedSearchMarkerId = inject<Ref<string | null> | null>('inAppSearchMarkerId', null);
|
||||
const searchMarkerId = computed(() => injectedSearchMarkerId?.value ?? window.location.hash.slice(1));
|
||||
const highlighted = ref(props.markerId === searchMarkerId.value);
|
||||
|
||||
function checkChildren() {
|
||||
if (props.children?.includes(searchMarkerId.value)) {
|
||||
const el = window.document.querySelector(`[data-in-app-search-marker-id="${searchMarkerId.value}"]`);
|
||||
highlighted.value = el == null;
|
||||
}
|
||||
}
|
||||
|
||||
watch([
|
||||
searchMarkerId,
|
||||
() => props.children,
|
||||
], () => {
|
||||
if (props.children != null && props.children.length > 0) {
|
||||
checkChildren();
|
||||
}
|
||||
}, { flush: 'post' });
|
||||
|
||||
function init() {
|
||||
checkChildren();
|
||||
|
||||
if (highlighted.value) {
|
||||
rootEl.value?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center',
|
||||
});
|
||||
}
|
||||
|
||||
if (rootEl.value != null) {
|
||||
rootElMutationObserver.observe(rootEl.value, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
rootElMutationObserver.disconnect();
|
||||
}
|
||||
|
||||
onMounted(init);
|
||||
onActivated(init);
|
||||
onDeactivated(dispose);
|
||||
onBeforeUnmount(dispose);
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.highlighted {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: -8px;
|
||||
width: calc(100% + 16px);
|
||||
height: calc(100% + 16px);
|
||||
border-radius: 6px;
|
||||
animation: blink 1s 3.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% {
|
||||
background: color(from var(--MI_THEME-accent) srgb r g b / 0.05);
|
||||
border: 1px solid color(from var(--MI_THEME-accent) srgb r g b / 0.7);
|
||||
}
|
||||
50% {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
243
packages/frontend/src/components/global/StackingRouterView.vue
Normal file
243
packages/frontend/src/components/global/StackingRouterView.vue
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<TransitionGroup
|
||||
:enterActiveClass="prefer.s.animation ? $style.transition_x_enterActive : ''"
|
||||
:leaveActiveClass="prefer.s.animation ? $style.transition_x_leaveActive : ''"
|
||||
:enterFromClass="prefer.s.animation ? $style.transition_x_enterFrom : ''"
|
||||
:leaveToClass="prefer.s.animation ? $style.transition_x_leaveTo : ''"
|
||||
:moveClass="prefer.s.animation ? $style.transition_x_move : ''"
|
||||
:duration="200"
|
||||
tag="div" :class="$style.tabs"
|
||||
>
|
||||
<div v-for="(tab, i) in tabs" :key="tab.fullPath" :class="$style.tab" :style="{ '--i': i - 1 }">
|
||||
<div v-if="i > 0" :class="$style.tabBg" @click="back()"></div>
|
||||
<div :class="$style.tabFg" @click.stop="back()">
|
||||
<div v-if="i > 0" :class="$style.tabMenu">
|
||||
<svg :class="$style.tabMenuShape" viewBox="0 0 24 16">
|
||||
<g transform="matrix(2.04108e-17,-0.333333,0.222222,1.36072e-17,21.3333,15.9989)">
|
||||
<path d="M23.997,-42C47.903,-23.457 47.997,12 47.997,12L-0.003,12L-0.003,-96C-0.003,-96 0.091,-60.543 23.997,-42Z" style="fill:var(--MI_THEME-panel);"/>
|
||||
</g>
|
||||
</svg>
|
||||
<button :class="$style.tabMenuButton" class="_button" @click.stop="mount"><i class="ti ti-rectangle"></i></button>
|
||||
<button :class="$style.tabMenuButton" class="_button" @click.stop="back"><i class="ti ti-x"></i></button>
|
||||
</div>
|
||||
<div v-if="i > 0" :class="$style.tabBorder"></div>
|
||||
<div :class="$style.tabContent" class="_pageContainer" @click.stop="">
|
||||
<Suspense :timeout="0">
|
||||
<component :is="tab.component" v-bind="Object.fromEntries(tab.props)"/>
|
||||
|
||||
<template #fallback>
|
||||
<MkLoading/>
|
||||
</template>
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { inject, provide, shallowRef } from 'vue';
|
||||
import type { Router } from '@/router.js';
|
||||
import { prefer } from '@/preferences.js';
|
||||
import MkLoadingPage from '@/pages/_loading_.vue';
|
||||
import { DI } from '@/di.js';
|
||||
import { deepEqual } from '@/utility/deep-equal.js';
|
||||
|
||||
const props = defineProps<{
|
||||
router?: Router;
|
||||
}>();
|
||||
|
||||
const router = props.router ?? inject(DI.router);
|
||||
|
||||
if (router == null) {
|
||||
throw new Error('no router provided');
|
||||
}
|
||||
|
||||
const currentDepth = inject(DI.routerCurrentDepth, 0);
|
||||
provide(DI.routerCurrentDepth, currentDepth + 1);
|
||||
|
||||
const tabs = shallowRef([{
|
||||
fullPath: router.getCurrentFullPath(),
|
||||
routePath: router.current.route.path,
|
||||
component: 'component' in router.current.route ? router.current.route.component : MkLoadingPage,
|
||||
props: router.current.props,
|
||||
}]);
|
||||
|
||||
function mount() {
|
||||
const currentTab = tabs.value[tabs.value.length - 1];
|
||||
tabs.value = [currentTab];
|
||||
}
|
||||
|
||||
function back() {
|
||||
const prev = tabs.value[tabs.value.length - 2];
|
||||
tabs.value = [...tabs.value.slice(0, tabs.value.length - 1)];
|
||||
router.replace(prev.fullPath);
|
||||
}
|
||||
|
||||
router.useListener('change', ({ resolved }) => {
|
||||
const currentTab = tabs.value[tabs.value.length - 1];
|
||||
const routePath = resolved.route.path;
|
||||
if (resolved == null || 'redirect' in resolved.route) return;
|
||||
if (resolved.route.path === currentTab.routePath && deepEqual(resolved.props, currentTab.props)) return;
|
||||
const fullPath = router.getCurrentFullPath();
|
||||
|
||||
if (tabs.value.some(tab => tab.routePath === routePath && deepEqual(resolved.props, tab.props))) {
|
||||
const newTabs = [];
|
||||
for (const tab of tabs.value) {
|
||||
newTabs.push(tab);
|
||||
|
||||
if (tab.routePath === routePath && deepEqual(resolved.props, tab.props)) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
tabs.value = newTabs;
|
||||
return;
|
||||
}
|
||||
|
||||
tabs.value = tabs.value.length >= prefer.s.numberOfPageCache ? [
|
||||
...tabs.value.slice(1),
|
||||
{
|
||||
fullPath: fullPath,
|
||||
routePath,
|
||||
component: resolved.route.component,
|
||||
props: resolved.props,
|
||||
},
|
||||
] : [...tabs.value, {
|
||||
fullPath: fullPath,
|
||||
routePath,
|
||||
component: resolved.route.component,
|
||||
props: resolved.props,
|
||||
}];
|
||||
});
|
||||
|
||||
router.useListener('replace', ({ fullPath }) => {
|
||||
const currentTab = tabs.value[tabs.value.length - 1];
|
||||
currentTab.fullPath = fullPath;
|
||||
tabs.value = [...tabs.value.slice(0, tabs.value.length - 1), currentTab];
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.transition_x_move,
|
||||
.transition_x_enterActive,
|
||||
.transition_x_leaveActive {
|
||||
.tabBg {
|
||||
transition: opacity 0.2s cubic-bezier(0,.5,.5,1), transform 0.2s cubic-bezier(0,.5,.5,1) !important;
|
||||
}
|
||||
|
||||
.tabFg {
|
||||
transition: opacity 0.2s cubic-bezier(0,.5,.5,1), transform 0.2s cubic-bezier(0,.5,.5,1) !important;
|
||||
}
|
||||
}
|
||||
.transition_x_enterFrom,
|
||||
.transition_x_leaveTo {
|
||||
.tabBg {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tabFg {
|
||||
opacity: 0;
|
||||
transform: translateY(100px);
|
||||
}
|
||||
}
|
||||
.transition_x_leaveActive {
|
||||
.tabFg {
|
||||
//position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab {
|
||||
overflow: clip;
|
||||
|
||||
&:first-child {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.tabFg {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tabContent {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.tabBg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #0003;
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(3px));
|
||||
backdrop-filter: var(--MI-blur, blur(3px));
|
||||
}
|
||||
|
||||
.tabFg {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - (10px + (20px * var(--i))));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tabContent {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--MI_THEME-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabMenu {
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
padding: 0 4px;
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
|
||||
.tabMenuShape {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: -100%;
|
||||
height: calc(100% + 1px);
|
||||
width: 129%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tabBorder {
|
||||
height: 6px;
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
|
||||
.tabMenuButton {
|
||||
padding: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue