chore: use inject instead of prop drilling
This commit is contained in:
parent
386f74c395
commit
b4dd14eacf
|
@ -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;
|
||||||
|
|
|
@ -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;
|
|
||||||
}>(), {
|
}>(), {
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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)}`;
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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}`)];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue