refactor: switch to setup-sfc

This commit is contained in:
三咲智子 2022-11-25 15:12:49 +08:00
parent 6ca34cab85
commit bbc8ed5307
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
10 changed files with 55 additions and 41 deletions

View file

@ -59,7 +59,7 @@ function getFieldNameIcon(fieldName: string) {
</NuxtLink>
</div>
<div flex flex-col>
<ContentRich font-bold text-2xl :content="getDisplayName(account)" :emojis="account.emojis" />
<ContentRichSetup font-bold text-2xl :content="getDisplayName(account)" :emojis="account.emojis" />
<p op50>
{{ getAccountHandle(account) }}
</p>

View file

@ -18,7 +18,7 @@ const accountHandle = $(useAccountHandle(account, fullServer))
</NuxtLink>
</div>
<NuxtLink flex flex-col :to="link ? getAccountPath(account) : null">
<ContentRich font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
<ContentRichSetup font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
<p op35 text-sm>
{{ accountHandle }}
</p>

View file

@ -10,6 +10,6 @@ const { link = true } = defineProps<{
<template>
<NuxtLink :to="link ? getAccountPath(account) : undefined" flex gap-1 items-center>
<AccountAvatar :account="account" w-5 h-5 />
<ContentRich :content="getDisplayName(account)" :emojis="account.emojis" />
<ContentRichSetup :content="getDisplayName(account)" :emojis="account.emojis" />
</NuxtLink>
</template>

View file

@ -8,6 +8,6 @@ defineProps<{
<template>
<NuxtLink :to="getAccountPath(account)">
<ContentRich font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
<ContentRichSetup font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
</NuxtLink>
</template>

View file

@ -0,0 +1,19 @@
import type { Emoji } from 'masto'
import { emojisArrayToObject } from '~/composables/utils'
defineOptions({
name: 'ContentRich',
})
const props = defineProps<{
content: string
emojis: Emoji[]
}>()
const emojiObject = emojisArrayToObject(props.emojis || [])
export default () => h(
'div',
{ class: 'rich-content' },
contentToVNode(props.content, emojiObject),
)

View file

@ -1,24 +0,0 @@
import type { Emoji } from 'masto'
import type { PropType } from 'vue'
import { emojisArrayToObject } from '~/composables/utils'
export default defineComponent({
props: {
content: {
type: String,
required: true,
},
emojis: {
type: Array as PropType<Emoji[]>,
},
},
setup(props) {
const emojiObject = emojisArrayToObject(props.emojis || [])
return () => h(
'div',
{ class: 'rich-content' },
contentToVNode(props.content, emojiObject),
)
},
})

View file

@ -11,7 +11,7 @@ const accountHandle = $(useAccountHandle(account))
<template>
<NuxtLink :to="link ? getAccountPath(account) : undefined" flex gap-2 items-center>
<ContentRich font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
<ContentRichSetup font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
<p op35 text-sm>
{{ accountHandle }}
</p>

View file

@ -9,6 +9,6 @@ const { translation } = useTranslation(status)
<template>
<div class="status-body">
<ContentRich :content="translation.visible ? translation.text : status.content" :emojis="status.emojis" />
<ContentRichSetup :content="translation.visible ? translation.text : status.content" :emojis="status.emojis" />
</div>
</template>

View file

@ -25,7 +25,7 @@
"@types/sanitize-html": "^2.6.2",
"@types/wicg-file-system-access": "^2020.9.5",
"@unocss/nuxt": "^0.46.5",
"@vue-macros/nuxt": "^0.0.3",
"@vue-macros/nuxt": "^0.1.1",
"@vueuse/nuxt": "^9.6.0",
"blurhash": "^2.0.4",
"browser-fs-access": "^0.31.1",

View file

@ -12,7 +12,7 @@ specifiers:
'@types/sanitize-html': ^2.6.2
'@types/wicg-file-system-access': ^2020.9.5
'@unocss/nuxt': ^0.46.5
'@vue-macros/nuxt': ^0.0.3
'@vue-macros/nuxt': ^0.1.1
'@vueuse/nuxt': ^9.6.0
blurhash: ^2.0.4
browser-fs-access: ^0.31.1
@ -34,6 +34,7 @@ specifiers:
theme-vitesse: ^0.6.0
typescript: ^4.9.3
ufo: ^1.0.0
vite-plugin-inspect: ^0.7.9
devDependencies:
'@antfu/eslint-config': 0.31.0_hsf322ms6xhhd4b5ne6lb74y4a
@ -47,7 +48,7 @@ devDependencies:
'@types/sanitize-html': 2.6.2
'@types/wicg-file-system-access': 2020.9.5
'@unocss/nuxt': 0.46.5
'@vue-macros/nuxt': 0.0.3_nuxt@3.0.0
'@vue-macros/nuxt': 0.1.1_nuxt@3.0.0
'@vueuse/nuxt': 9.6.0_nuxt@3.0.0
blurhash: 2.0.4
browser-fs-access: 0.31.1
@ -69,6 +70,7 @@ devDependencies:
theme-vitesse: 0.6.0
typescript: 4.9.3
ufo: 1.0.0
vite-plugin-inspect: 0.7.9
packages:
@ -1589,8 +1591,8 @@ packages:
unplugin: 1.0.0
dev: true
/@vue-macros/define-render/1.0.0:
resolution: {integrity: sha512-Szm25QnX65YaNMm/wbP4j2TdMKwkWQSGRU72/kadt1yH4/BzwjcQlQIYIpBxEnbYb3BeQyj0NGL5695E1jGqEg==}
/@vue-macros/define-render/1.0.1:
resolution: {integrity: sha512-B4ttYDZkXqVuciN23WNuVnr6L8dKrxEvz74gaYTXbdybv9jLEYMagSm/nFBLin+32EGYKeZu/D393r2EGAzeNg==}
engines: {node: '>=14.19.0'}
peerDependencies:
vue: ^2.7.0 || ^3.0.0
@ -1638,8 +1640,8 @@ packages:
- webpack
dev: true
/@vue-macros/nuxt/0.0.3_nuxt@3.0.0:
resolution: {integrity: sha512-EYrsuUf3yjqCAdZka5U9xM0lRmWGzdZdpgDkVmzGkIf7o6AdxitD6b44MSbgAkZIYWBspQVD5dehOyriVgcSWA==}
/@vue-macros/nuxt/0.1.1_nuxt@3.0.0:
resolution: {integrity: sha512-ncHA77I4NyzC5hRJVtNlj7vLe6mMNcjKw1qV+FN30h7b9O+cP+6KtyI5GXMmWasts7dR7T8BKDKJJiY9zLo5DA==}
engines: {node: '>=14.19.0'}
peerDependencies:
nuxt: ^3.0.0
@ -1647,7 +1649,7 @@ packages:
'@nuxt/kit': 3.0.0
'@vue-macros/volar': 0.5.4
nuxt: 3.0.0_hsf322ms6xhhd4b5ne6lb74y4a
unplugin-vue-macros: 1.0.1
unplugin-vue-macros: 1.0.2
transitivePeerDependencies:
- '@vueuse/core'
- esbuild
@ -6912,8 +6914,8 @@ packages:
unplugin: 1.0.0
dev: true
/unplugin-vue-macros/1.0.1:
resolution: {integrity: sha512-WRG+KtpQJsYUN8y7w9SO/x5StclNyOAazoJtx4pRDgjypkhXRaRCOyRUm2eClia/XeSltbXIuWV7oGSfGKd4pg==}
/unplugin-vue-macros/1.0.2:
resolution: {integrity: sha512-XstktV1aH88Vn2RXRcxZKUV8ewjFWqbZKHnq8NL4W00MV0z1xOwd1CfNdMCTpYiHl25SWA27TOTNNKYORhizhA==}
engines: {node: '>=14.19.0'}
peerDependencies:
vue: ^2.7.0 || ^3.2.25
@ -6922,7 +6924,7 @@ packages:
'@vue-macros/better-define': 1.0.0
'@vue-macros/define-model': 1.0.0
'@vue-macros/define-props': 0.0.3
'@vue-macros/define-render': 1.0.0
'@vue-macros/define-render': 1.0.1
'@vue-macros/define-slots': 0.0.6
'@vue-macros/hoist-static': 1.0.0
'@vue-macros/named-template': 0.0.6
@ -7090,6 +7092,23 @@ packages:
vscode-uri: 3.0.6
dev: true
/vite-plugin-inspect/0.7.9:
resolution: {integrity: sha512-YBI5/smKxx2gc5MrzQ8n6ztGxdtItoqumJn96d6b57SvC9aSvjMXsvzUgrR/dlVXCnpu755m1TXp3h/TsVOwJA==}
engines: {node: '>=14'}
peerDependencies:
vite: ^3.1.0
dependencies:
'@rollup/pluginutils': 5.0.2
debug: 4.3.4
fs-extra: 10.1.0
kolorist: 1.6.0
sirv: 2.0.2
ufo: 1.0.0
transitivePeerDependencies:
- rollup
- supports-color
dev: true
/vite/3.2.4:
resolution: {integrity: sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw==}
engines: {node: ^14.18.0 || >=16.0.0}