mirror of
https://github.com/misskey-dev/misskey.git
synced 2024-12-25 00:49:17 +09:00
refactor(client): use setup syntax
This commit is contained in:
parent
01d07edfe3
commit
4f9b03a997
@ -1,49 +1,32 @@
|
|||||||
char2filePath<template>
|
<template>
|
||||||
<img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt" decoding="async"/>
|
<img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt" decoding="async"/>
|
||||||
<img v-else-if="char && !useOsNativeEmojis" class="mk-emoji" :src="url" :alt="alt" :title="alt" decoding="async"/>
|
<img v-else-if="char && !useOsNativeEmojis" class="mk-emoji" :src="url" :alt="alt" :title="alt" decoding="async"/>
|
||||||
<span v-else-if="char && useOsNativeEmojis">{{ char }}</span>
|
<span v-else-if="char && useOsNativeEmojis">{{ char }}</span>
|
||||||
<span v-else>{{ emoji }}</span>
|
<span v-else>{{ emoji }}</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { computed, defineComponent, ref, watch } from 'vue';
|
import { computed, ref, watch } from 'vue';
|
||||||
|
import { CustomEmoji } from 'misskey-js/built/entities';
|
||||||
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
|
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
|
||||||
import { char2filePath } from '@/scripts/twemoji-base';
|
import { char2filePath } from '@/scripts/twemoji-base';
|
||||||
import { defaultStore } from '@/store';
|
import { defaultStore } from '@/store';
|
||||||
import { instance } from '@/instance';
|
import { instance } from '@/instance';
|
||||||
|
|
||||||
export default defineComponent({
|
const props = defineProps<{
|
||||||
props: {
|
emoji: string;
|
||||||
emoji: {
|
normal?: boolean;
|
||||||
type: String,
|
noStyle?: boolean;
|
||||||
required: true
|
customEmojis?: CustomEmoji[];
|
||||||
},
|
isReaction?: boolean;
|
||||||
normal: {
|
}>();
|
||||||
type: Boolean,
|
|
||||||
required: false,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
noStyle: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
customEmojis: {
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
isReaction: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props) {
|
const isCustom = computed(() => props.emoji.startsWith(':'));
|
||||||
const isCustom = computed(() => props.emoji.startsWith(':'));
|
const char = computed(() => isCustom.value ? null : props.emoji);
|
||||||
const char = computed(() => isCustom.value ? null : props.emoji);
|
const useOsNativeEmojis = computed(() => defaultStore.state.useOsNativeEmojis && !props.isReaction);
|
||||||
const useOsNativeEmojis = computed(() => defaultStore.state.useOsNativeEmojis && !props.isReaction);
|
const ce = computed(() => props.customEmojis ?? instance.emojis ?? []);
|
||||||
const ce = computed(() => props.customEmojis || instance.emojis || []);
|
const customEmoji = computed(() => isCustom.value ? ce.value.find(x => x.name === props.emoji.substr(1, props.emoji.length - 2)) : null);
|
||||||
const customEmoji = computed(() => isCustom.value ? ce.value.find(x => x.name === props.emoji.substr(1, props.emoji.length - 2)) : null);
|
const url = computed(() => {
|
||||||
const url = computed(() => {
|
|
||||||
if (char.value) {
|
if (char.value) {
|
||||||
return char2filePath(char.value);
|
return char2filePath(char.value);
|
||||||
} else {
|
} else {
|
||||||
@ -51,18 +34,8 @@ export default defineComponent({
|
|||||||
? getStaticImageUrl(customEmoji.value.url)
|
? getStaticImageUrl(customEmoji.value.url)
|
||||||
: customEmoji.value.url;
|
: customEmoji.value.url;
|
||||||
}
|
}
|
||||||
});
|
|
||||||
const alt = computed(() => customEmoji.value ? `:${customEmoji.value.name}:` : char.value);
|
|
||||||
|
|
||||||
return {
|
|
||||||
url,
|
|
||||||
char,
|
|
||||||
alt,
|
|
||||||
customEmoji,
|
|
||||||
useOsNativeEmojis,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
const alt = computed(() => customEmoji.value ? `:${customEmoji.value.name}:` : char.value);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
Loading…
Reference in New Issue
Block a user