refactor: switch to setup-sfc
This commit is contained in:
parent
6ca34cab85
commit
bbc8ed5307
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
19
components/content/ContentRich.setup.ts
Normal file
19
components/content/ContentRich.setup.ts
Normal 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),
|
||||
)
|
|
@ -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),
|
||||
)
|
||||
},
|
||||
})
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in a new issue