chore: use inject instead of prop drilling

This commit is contained in:
anatawa12 2024-03-11 00:18:07 +09:00
parent 386f74c395
commit b4dd14eacf
No known key found for this signature in database
GPG Key ID: 9CA909848B8E4EA6
6 changed files with 13 additions and 23 deletions

View File

@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<div class="detail"> <div class="detail">
<div> <div>
<Mfm :text="report.comment" :linkBehavior="'window'"/> <Mfm :text="report.comment"/>
</div> </div>
<hr/> <hr/>
<div>{{ i18n.ts.reporter }}: <MkA :to="`/admin/user/${report.reporter.id}`" class="_link" :behavior="'window'">@{{ report.reporter.username }}</MkA></div> <div>{{ i18n.ts.reporter }}: <MkA :to="`/admin/user/${report.reporter.id}`" class="_link" :behavior="'window'">@{{ report.reporter.username }}</MkA></div>
@ -41,13 +41,16 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { provide, ref } from 'vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import MkSwitch from '@/components/MkSwitch.vue'; import MkSwitch from '@/components/MkSwitch.vue';
import MkKeyValue from '@/components/MkKeyValue.vue'; import MkKeyValue from '@/components/MkKeyValue.vue';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { dateString } from '@/filters/date.js'; import { dateString } from '@/filters/date.js';
import { MkABehavior } from '@/components/global/MkA.vue';
provide<MkABehavior>('linkBehaviour', 'window');
const props = defineProps<{ const props = defineProps<{
report: any; report: any;

View File

@ -6,7 +6,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<component <component
:is="self ? 'MkA' : 'a'" ref="el" style="word-break: break-all;" class="_link" :[attr]="self ? url.substring(local.length) : url" :rel="rel ?? 'nofollow noopener'" :target="target" :is="self ? 'MkA' : 'a'" ref="el" style="word-break: break-all;" class="_link" :[attr]="self ? url.substring(local.length) : url" :rel="rel ?? 'nofollow noopener'" :target="target"
:behavior="props.behavior"
:title="url" :title="url"
> >
<slot></slot> <slot></slot>
@ -19,12 +18,10 @@ import { defineAsyncComponent, ref } from 'vue';
import { url as local } from '@/config.js'; import { url as local } from '@/config.js';
import { useTooltip } from '@/scripts/use-tooltip.js'; import { useTooltip } from '@/scripts/use-tooltip.js';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { MkABehavior } from '@/components/global/MkA.vue';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
url: string; url: string;
rel?: null | string; rel?: null | string;
behavior?: MkABehavior;
}>(), { }>(), {
}); });

View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkA v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe }]" :to="url" :style="{ background: bgCss }" :behavior="behavior"> <MkA v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe }]" :to="url" :style="{ background: bgCss }">
<img :class="$style.icon" :src="avatarUrl" alt=""> <img :class="$style.icon" :src="avatarUrl" alt="">
<span> <span>
<span>@{{ username }}</span> <span>@{{ username }}</span>
@ -21,12 +21,10 @@ import { host as localHost } from '@/config.js';
import { $i } from '@/account.js'; import { $i } from '@/account.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
import { getStaticImageUrl } from '@/scripts/media-proxy.js'; import { getStaticImageUrl } from '@/scripts/media-proxy.js';
import { MkABehavior } from '@/components/global/MkA.vue';
const props = defineProps<{ const props = defineProps<{
username: string; username: string;
host: string; host: string;
behavior?: MkABehavior;
}>(); }>();
const canonical = props.host === localHost ? `@${props.username}` : `@${props.username}@${toUnicode(props.host)}`; const canonical = props.host === localHost ? `@${props.username}` : `@${props.username}@${toUnicode(props.host)}`;

View File

@ -14,7 +14,7 @@ export type MkABehavior = 'window' | 'browser' | null;
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from 'vue'; import { computed, inject } from 'vue';
import * as os from '@/os.js'; import * as os from '@/os.js';
import copyToClipboard from '@/scripts/copy-to-clipboard.js'; import copyToClipboard from '@/scripts/copy-to-clipboard.js';
import { url } from '@/config.js'; import { url } from '@/config.js';
@ -30,6 +30,8 @@ const props = withDefaults(defineProps<{
behavior: null, behavior: null,
}); });
const linkBehaviour = props.behavior ?? inject<MkABehavior>('linkBehaviour', null);
const router = useRouter(); const router = useRouter();
const active = computed(() => { const active = computed(() => {
@ -80,16 +82,14 @@ function openWindow() {
} }
function nav(ev: MouseEvent) { function nav(ev: MouseEvent) {
if (props.behavior === 'browser') { if (linkBehaviour === 'browser') {
location.href = props.to; location.href = props.to;
return; return;
} }
if (props.behavior) { if (linkBehaviour === 'window') {
if (props.behavior === 'window') {
return openWindow(); return openWindow();
} }
}
if (ev.shiftKey) { if (ev.shiftKey) {
return openWindow(); return openWindow();

View File

@ -16,7 +16,7 @@ import MkCode from '@/components/MkCode.vue';
import MkCodeInline from '@/components/MkCodeInline.vue'; import MkCodeInline from '@/components/MkCodeInline.vue';
import MkGoogle from '@/components/MkGoogle.vue'; import MkGoogle from '@/components/MkGoogle.vue';
import MkSparkle from '@/components/MkSparkle.vue'; import MkSparkle from '@/components/MkSparkle.vue';
import MkA, {MkABehavior} from '@/components/global/MkA.vue'; import MkA from '@/components/global/MkA.vue';
import { host } from '@/config.js'; import { host } from '@/config.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
import { nyaize as doNyaize } from '@/scripts/nyaize.js'; import { nyaize as doNyaize } from '@/scripts/nyaize.js';
@ -43,7 +43,6 @@ type MfmProps = {
parsedNodes?: mfm.MfmNode[] | null; parsedNodes?: mfm.MfmNode[] | null;
enableEmojiMenu?: boolean; enableEmojiMenu?: boolean;
enableEmojiMenuReaction?: boolean; enableEmojiMenuReaction?: boolean;
linkBehavior?: MkABehavior;
}; };
type MfmEvents = { type MfmEvents = {
@ -343,7 +342,6 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
key: Math.random(), key: Math.random(),
url: token.props.url, url: token.props.url,
rel: 'nofollow noopener', rel: 'nofollow noopener',
behavior: props.linkBehavior,
})]; })];
} }
@ -352,7 +350,6 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
key: Math.random(), key: Math.random(),
url: token.props.url, url: token.props.url,
rel: 'nofollow noopener', rel: 'nofollow noopener',
behavior: props.linkBehavior,
}, genEl(token.children, scale, true))]; }, genEl(token.children, scale, true))];
} }
@ -361,7 +358,6 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
key: Math.random(), key: Math.random(),
host: (token.props.host == null && props.author && props.author.host != null ? props.author.host : token.props.host) ?? host, host: (token.props.host == null && props.author && props.author.host != null ? props.author.host : token.props.host) ?? host,
username: token.props.username, username: token.props.username,
behavior: props.linkBehavior,
})]; })];
} }
@ -370,7 +366,6 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
key: Math.random(), key: Math.random(),
to: isNote ? `/tags/${encodeURIComponent(token.props.hashtag)}` : `/user-tags/${encodeURIComponent(token.props.hashtag)}`, to: isNote ? `/tags/${encodeURIComponent(token.props.hashtag)}` : `/user-tags/${encodeURIComponent(token.props.hashtag)}`,
style: 'color:var(--hashtag);', style: 'color:var(--hashtag);',
behavior: props.linkBehavior,
}, `#${token.props.hashtag}`)]; }, `#${token.props.hashtag}`)];
} }

View File

@ -6,7 +6,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<component <component
:is="self ? 'MkA' : 'a'" ref="el" :class="$style.root" class="_link" :[attr]="self ? props.url.substring(local.length) : props.url" :rel="rel ?? 'nofollow noopener'" :target="target" :is="self ? 'MkA' : 'a'" ref="el" :class="$style.root" class="_link" :[attr]="self ? props.url.substring(local.length) : props.url" :rel="rel ?? 'nofollow noopener'" :target="target"
:behavior = "props.behavior"
@contextmenu.stop="() => {}" @contextmenu.stop="() => {}"
> >
<template v-if="!self"> <template v-if="!self">
@ -31,13 +30,11 @@ import { url as local } from '@/config.js';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { useTooltip } from '@/scripts/use-tooltip.js'; import { useTooltip } from '@/scripts/use-tooltip.js';
import { safeURIDecode } from '@/scripts/safe-uri-decode.js'; import { safeURIDecode } from '@/scripts/safe-uri-decode.js';
import { MkABehavior } from '@/components/global/MkA.vue';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
url: string; url: string;
rel?: string; rel?: string;
showUrlPreview?: boolean; showUrlPreview?: boolean;
behavior?: MkABehavior;
}>(), { }>(), {
showUrlPreview: true, showUrlPreview: true,
}); });