refactor: generic components (#868)
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>zio/stable
三咲智子 Kevin Deng
GitHub
parent
5c8f75b9b7
commit
b30ebc12f8
|
|
@ -20,7 +20,7 @@ function close() {
|
|||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
<button text-xl hover:text-primary bg-hover-overflow w-1.4em h-1.4em @click="close()">
|
||||
<button text-xl hover:text-primary bg-hover-overflow w="1.4em" h="1.4em" @click="close()">
|
||||
<div i-ri:close-line />
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<script setup lang="ts">
|
||||
<script setup lang="ts" generic="T extends any, O extends any">
|
||||
// @ts-expect-error missing types
|
||||
import { DynamicScroller } from 'vue-virtual-scroller'
|
||||
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
|
||||
|
|
@ -12,20 +12,23 @@ const {
|
|||
eventType = 'update',
|
||||
preprocess,
|
||||
} = defineProps<{
|
||||
paginator: Paginator<any[], any>
|
||||
keyProp?: string
|
||||
paginator: Paginator<T[], O>
|
||||
keyProp?: keyof T
|
||||
virtualScroller?: boolean
|
||||
stream?: Promise<WsEvents>
|
||||
eventType?: 'notification' | 'update'
|
||||
preprocess?: (items: any[]) => any[]
|
||||
preprocess?: (items: T[]) => any[]
|
||||
}>()
|
||||
|
||||
defineSlots<{
|
||||
default: {
|
||||
item: any
|
||||
item: T
|
||||
active?: boolean
|
||||
older?: any
|
||||
newer?: any // newer is undefined when index === 0
|
||||
older?: T
|
||||
newer?: T // newer is undefined when index === 0
|
||||
}
|
||||
items: {
|
||||
items: T[]
|
||||
}
|
||||
updater: {
|
||||
number: number
|
||||
|
|
@ -35,6 +38,8 @@ defineSlots<{
|
|||
done: {}
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, stream, eventType, preprocess)
|
||||
</script>
|
||||
|
||||
|
|
@ -62,7 +67,7 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
|
|||
<template v-else>
|
||||
<slot
|
||||
v-for="item, index of items"
|
||||
:key="item[keyProp]"
|
||||
:key="(item as any)[keyProp]"
|
||||
:item="item"
|
||||
:older="items[index + 1]"
|
||||
:newer="items[index - 1]"
|
||||
|
|
@ -75,11 +80,11 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
|
|||
</slot>
|
||||
<slot v-else-if="state === 'done'" name="done">
|
||||
<div p5 text-secondary italic text-center>
|
||||
{{ $t('common.end_of_list') }}
|
||||
{{ t('common.end_of_list') }}
|
||||
</div>
|
||||
</slot>
|
||||
<div v-else-if="state === 'error'" p5 text-secondary>
|
||||
{{ $t('common.error') }}: {{ error }}
|
||||
{{ t('common.error') }}: {{ error }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -40,14 +40,14 @@ onUnmounted(() => locked.value = false)
|
|||
<div relative h-full w-full flex pt-12 w-100vh @click="onClick">
|
||||
<button
|
||||
v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')"
|
||||
hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20" absolute top="1/2" right-1 z5
|
||||
hover:bg="black/40" dark:bg="white/30" dark-hover:bg="white/20" absolute top="1/2" right-1 z5
|
||||
:title="$t('action.next')" @click="next"
|
||||
>
|
||||
<div i-ri:arrow-right-s-line text-white />
|
||||
</button>
|
||||
<button
|
||||
v-if="hasPrev" pointer-events-auto btn-action-icon bg="black/20" aria-label="action.next"
|
||||
hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20" absolute top="1/2" left-1 z5
|
||||
hover:bg="black/40" dark:bg="white/30" dark:hover-bg="white/20" absolute top="1/2" left-1 z5
|
||||
:title="$t('action.prev')" @click="prev"
|
||||
>
|
||||
<div i-ri:arrow-left-s-line text-white />
|
||||
|
|
@ -60,7 +60,7 @@ onUnmounted(() => locked.value = false)
|
|||
<div absolute top-0 w-full flex justify-between>
|
||||
<button
|
||||
btn-action-icon bg="black/30" aria-label="action.close" hover:bg="black/40" dark:bg="white/30"
|
||||
dark:hover:bg="white/20" pointer-events-auto shrink-0 @click="emit('close')"
|
||||
dark:hover-bg="white/20" pointer-events-auto shrink-0 @click="emit('close')"
|
||||
>
|
||||
<div i-ri:close-line text-white />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ function toggleDark() {
|
|||
<footer p4 text-sm text-secondary-light flex="~ col">
|
||||
<div flex="~ gap2" items-center mb4>
|
||||
<CommonTooltip :content="$t('nav.toggle_theme')">
|
||||
<button flex i-ri:sun-line dark:i-ri:moon-line text-lg :aria-label="$t('nav.toggle_theme')" @click="toggleDark()" />
|
||||
<button flex i-ri:sun-line dark-i-ri:moon-line text-lg :aria-label="$t('nav.toggle_theme')" @click="toggleDark()" />
|
||||
</CommonTooltip>
|
||||
<CommonTooltip :content="$t('nav.zen_mode')">
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ const { modelValue } = defineModel<{
|
|||
:aria-label="$t('settings.notifications.push_notifications.subscription_error.clear_error')"
|
||||
@click="modelValue = false"
|
||||
>
|
||||
<span aria-hidden="true" w-1.75em h-1.75em i-ri:close-line />
|
||||
<span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -253,7 +253,7 @@ defineExpose({
|
|||
:aria-label="$t('action.clear_upload_failed')"
|
||||
@click="failed = []"
|
||||
>
|
||||
<span aria-hidden="true" w-1.75em h-1.75em i-ri:close-line />
|
||||
<span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</head>
|
||||
|
|
@ -315,7 +315,7 @@ defineExpose({
|
|||
|
||||
<div flex-auto />
|
||||
|
||||
<div dir="ltr" pointer-events-none pe-1 pt-2 text-sm tabular-nums text-secondary flex gap-0.5 :class="{ 'text-rose-500': characterCount > characterLimit }">
|
||||
<div dir="ltr" pointer-events-none pe-1 pt-2 text-sm tabular-nums text-secondary flex gap="0.5" :class="{ 'text-rose-500': characterCount > characterLimit }">
|
||||
{{ characterCount ?? 0 }}<span text-secondary-light>/</span><span text-secondary-light>{{ characterLimit }}</span>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ const isDM = $computed(() => status.visibility === 'direct')
|
|||
<div v-if="newer && !directReply" w-auto h-1px bg-border />
|
||||
<div flex justify-between>
|
||||
<slot name="meta">
|
||||
<div v-if="rebloggedBy && !collapseRebloggedBy" relative text-secondary ws-nowrap flex="~" items-center pt1 pb0.5 px-1px bg-base>
|
||||
<div v-if="rebloggedBy && !collapseRebloggedBy" relative text-secondary ws-nowrap flex="~" items-center p="t-1 b-0.5 x-1px" bg-base>
|
||||
<div i-ri:repeat-fill me-46px text-primary w-16px h-16px />
|
||||
<div absolute top-1 ms-24px w-32px h-32px rounded-full>
|
||||
<AccountHoverWrapper :account="rebloggedBy">
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@ const account = isSelf ? computed(() => status.account) : useAccountById(status.
|
|||
<template v-if="account">
|
||||
<div i-ri:reply-fill :class="collapsed ? '' : 'scale-x-[-1]'" text-secondary-light />
|
||||
<template v-if="!collapsed">
|
||||
<AccountAvatar v-if="isSelf || simplified || status.inReplyToAccountId === currentUser?.account.id" :account="account" :link="false" w-5 h-5 mx-0.5 />
|
||||
<AccountInlineInfo v-else :account="account" :link="false" mx-0.5 />
|
||||
<AccountAvatar v-if="isSelf || simplified || status.inReplyToAccountId === currentUser?.account.id" :account="account" :link="false" w-5 h-5 mx="0.5" />
|
||||
<AccountInlineInfo v-else :account="account" :link="false" mx="0.5" />
|
||||
</template>
|
||||
</template>
|
||||
<div i-ri:question-answer-line text-secondary-light text-lg />
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ watchEffect(() => {
|
|||
|
||||
<template>
|
||||
<div v-if="enabled" flex flex-col items-start>
|
||||
<div class="content-rich" px-4 pb-2.5 text-center text-secondary w-full border="~ base" border-0 border-b-dotted border-b-3 mt-2>
|
||||
<div class="content-rich" p="x-4 b-2.5" text-center text-secondary w-full border="~ base" border-0 border-b-dotted border-b-3 mt-2>
|
||||
<slot name="spoiler" />
|
||||
</div>
|
||||
<div flex="~ gap-1 center" w-full mt="-4.5">
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const { paginator, stream, account } = defineProps<{
|
|||
stream?: Promise<WsEvents>
|
||||
context?: mastodon.v2.FilterContext
|
||||
account?: mastodon.v1.Account
|
||||
preprocess?: (items: any[]) => any[]
|
||||
preprocess?: (items: mastodon.v1.Status[]) => mastodon.v1.Status[]
|
||||
}>()
|
||||
|
||||
const { formatNumber } = useHumanReadableNumber()
|
||||
|
|
|
|||
|
|
@ -11,6 +11,10 @@ export default defineNuxtConfig({
|
|||
typescript: {
|
||||
tsConfig: {
|
||||
exclude: ['../service-worker'],
|
||||
vueCompilerOptions: {
|
||||
jsxTemplates: true,
|
||||
experimentalRfc436: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
modules: [
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@
|
|||
"vite-plugin-inspect": "^0.7.11",
|
||||
"vite-plugin-pwa": "^0.14.1",
|
||||
"vitest": "^0.26.2",
|
||||
"vue-tsc": "^1.0.16",
|
||||
"vue-tsc": "^1.0.22",
|
||||
"workbox-window": "^6.5.4"
|
||||
},
|
||||
"simple-git-hooks": {
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ specifiers:
|
|||
vite-plugin-pwa: ^0.14.1
|
||||
vitest: ^0.26.2
|
||||
vue-advanced-cropper: ^2.8.6
|
||||
vue-tsc: ^1.0.16
|
||||
vue-tsc: ^1.0.22
|
||||
vue-virtual-scroller: 2.0.0-beta.7
|
||||
workbox-window: ^6.5.4
|
||||
|
||||
|
|
@ -147,7 +147,7 @@ devDependencies:
|
|||
'@types/wicg-file-system-access': 2020.9.5
|
||||
'@unocss/nuxt': 0.48.0
|
||||
'@vitejs/plugin-vue': 3.2.0
|
||||
'@vue-macros/nuxt': 0.2.8_3nbxte3dhogb6b7pemmre2vo4m
|
||||
'@vue-macros/nuxt': 0.2.8_neamklg3mofeje4gmdzjdymjki
|
||||
'@vueuse/math': 9.10.0
|
||||
'@vueuse/nuxt': 9.9.0_nuxt@3.0.0
|
||||
bumpp: 8.2.1
|
||||
|
|
@ -171,7 +171,7 @@ devDependencies:
|
|||
vite-plugin-inspect: 0.7.11
|
||||
vite-plugin-pwa: 0.14.1_workbox-window@6.5.4
|
||||
vitest: 0.26.2_jsdom@20.0.3
|
||||
vue-tsc: 1.0.16_typescript@4.9.4
|
||||
vue-tsc: 1.0.22_typescript@4.9.4
|
||||
workbox-window: 6.5.4
|
||||
|
||||
packages:
|
||||
|
|
@ -3191,14 +3191,6 @@ packages:
|
|||
vue: 3.2.45
|
||||
dev: true
|
||||
|
||||
/@volar/language-core/1.0.16:
|
||||
resolution: {integrity: sha512-IGnOxWTs4DZ81TDcmxBAkCBxs97hUblwcjpBsTx/pOGGaSSDQRJPn0wL8NYTybEObU0i7lhEpKZ+0vJfdIy1Kg==}
|
||||
dependencies:
|
||||
'@volar/source-map': 1.0.16
|
||||
'@vue/reactivity': 3.2.45
|
||||
muggle-string: 0.1.0
|
||||
dev: true
|
||||
|
||||
/@volar/language-core/1.0.22:
|
||||
resolution: {integrity: sha512-hiJeCOqxNdtG/04FRGLGI9H9DVz2l6cTqPDBzwqplHXAWfMxjzUaGUrn9sfTG7YMFNZUgK4EYxJnRfhqdtbSFQ==}
|
||||
dependencies:
|
||||
|
|
@ -3206,42 +3198,36 @@ packages:
|
|||
muggle-string: 0.1.0
|
||||
dev: true
|
||||
|
||||
/@volar/source-map/1.0.16:
|
||||
resolution: {integrity: sha512-PKjzmQcg8QOGC/1V9tmGh2jcy6bKLhkW5bGidElSr83iDbCzLvldt2/La/QlDxaRCHYLT0MeyuGJBZIChB1dYQ==}
|
||||
dependencies:
|
||||
muggle-string: 0.1.0
|
||||
dev: true
|
||||
|
||||
/@volar/source-map/1.0.22:
|
||||
resolution: {integrity: sha512-cv4gypHSP4MWVR82ed/+1IpI6794qAl0Q0+KJ+VGMVF8rVugsiF9QbyMCgjel9wNRsssQsazzsf6txOR9vHQiw==}
|
||||
dependencies:
|
||||
muggle-string: 0.1.0
|
||||
dev: true
|
||||
|
||||
/@volar/typescript/1.0.16:
|
||||
resolution: {integrity: sha512-Yov+n4oO3iYnuMt9QJAFpJabfTRCzc7KvjlAwBaSuZy+Gc/f9611MgtqAh5/SIGmltFN8dXn1Ijno8ro8I4lyw==}
|
||||
/@volar/typescript/1.0.22:
|
||||
resolution: {integrity: sha512-VPyEicealSD4gqlE5/UQ1j3ietsO6Hfat40KtUEh/K+XEZ7h02b1KgFV64YEuBkBOaZ5hgvRW/WXKtQgXCl7Iw==}
|
||||
dependencies:
|
||||
'@volar/language-core': 1.0.16
|
||||
'@volar/language-core': 1.0.22
|
||||
dev: true
|
||||
|
||||
/@volar/vue-language-core/1.0.16:
|
||||
resolution: {integrity: sha512-sQ/aW1Vuiyy4OQuh2lthyYicruM3qh9VSk/aDh8/bFvM8GoohHZqVpMN3LYldEJ9eT/rN6u4xmYP54vc/EjX4Q==}
|
||||
/@volar/vue-language-core/1.0.22:
|
||||
resolution: {integrity: sha512-Ki0G/ZdBj2/GLw+/VVH3n9XR/JL6krMIth02EekFn6JV4PGN3mNxbvoh6lOPSDZLR6biOU5nJPnnjpKy8nuXhw==}
|
||||
dependencies:
|
||||
'@volar/language-core': 1.0.16
|
||||
'@volar/source-map': 1.0.16
|
||||
'@volar/language-core': 1.0.22
|
||||
'@volar/source-map': 1.0.22
|
||||
'@vue/compiler-dom': 3.2.45
|
||||
'@vue/compiler-sfc': 3.2.45
|
||||
'@vue/reactivity': 3.2.45
|
||||
'@vue/shared': 3.2.45
|
||||
minimatch: 5.1.1
|
||||
minimatch: 5.1.2
|
||||
vue-template-compiler: 2.7.14
|
||||
dev: true
|
||||
|
||||
/@volar/vue-typescript/1.0.16:
|
||||
resolution: {integrity: sha512-M018Ulg/o2FVktAdlr5b/z4K69bYzekxNUA1o39y5Ur6CObc/o+5eDCCS7gIYijWnx9iNKkSQpWWWblJFv7kHQ==}
|
||||
/@volar/vue-typescript/1.0.22:
|
||||
resolution: {integrity: sha512-2T1o5z86PAev31OMtVOv/qp4P3ZVl9ln/2KTmykQE8Fh4A5F+868MW4nf5J7XQ6RNyx7RH9LhzgjvbqJpAfiYw==}
|
||||
dependencies:
|
||||
'@volar/typescript': 1.0.16
|
||||
'@volar/vue-language-core': 1.0.16
|
||||
'@volar/typescript': 1.0.22
|
||||
'@volar/vue-language-core': 1.0.22
|
||||
dev: true
|
||||
|
||||
/@vue-macros/api/0.2.3:
|
||||
|
|
@ -3365,7 +3351,7 @@ packages:
|
|||
- vue
|
||||
dev: true
|
||||
|
||||
/@vue-macros/nuxt/0.2.8_3nbxte3dhogb6b7pemmre2vo4m:
|
||||
/@vue-macros/nuxt/0.2.8_neamklg3mofeje4gmdzjdymjki:
|
||||
resolution: {integrity: sha512-vOMPTGNzBx+pmeZa3nJWRgN9CHYW700EZWVcAMQHrLjgh7vV+JqsA667hoBNnJPjmEBwSe8EzYbc1LFqEZoTZQ==}
|
||||
engines: {node: '>=14.19.0'}
|
||||
peerDependencies:
|
||||
|
|
@ -3373,7 +3359,7 @@ packages:
|
|||
dependencies:
|
||||
'@nuxt/kit': 3.0.0
|
||||
'@vue-macros/short-vmodel': 1.0.2
|
||||
'@vue-macros/volar': 0.5.9_vue-tsc@1.0.16
|
||||
'@vue-macros/volar': 0.5.9_vue-tsc@1.0.22
|
||||
nuxt: 3.0.0_lzzuuodtsqwxnvqeq4g4likcqa
|
||||
unplugin-vue-macros: 1.3.0_@vueuse+core@9.9.0
|
||||
transitivePeerDependencies:
|
||||
|
|
@ -3460,7 +3446,7 @@ packages:
|
|||
- vue
|
||||
dev: true
|
||||
|
||||
/@vue-macros/volar/0.5.9_vue-tsc@1.0.16:
|
||||
/@vue-macros/volar/0.5.9_vue-tsc@1.0.22:
|
||||
resolution: {integrity: sha512-SBjgofdn55fDXkPEGwAmjEeUwrupYqC9ZXH+iHMeawQfUwS2BrcvsUHkMnZiAMW0eQPcmwQr2dUJYMswkbp7cw==}
|
||||
peerDependencies:
|
||||
vue-tsc: ^1.0.9
|
||||
|
|
@ -3473,7 +3459,7 @@ packages:
|
|||
'@vue-macros/define-props': 0.1.2
|
||||
'@vue-macros/short-vmodel': 1.0.2
|
||||
muggle-string: 0.2.1
|
||||
vue-tsc: 1.0.16_typescript@4.9.4
|
||||
vue-tsc: 1.0.22_typescript@4.9.4
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
- vue
|
||||
|
|
@ -7277,6 +7263,13 @@ packages:
|
|||
brace-expansion: 2.0.1
|
||||
dev: true
|
||||
|
||||
/minimatch/5.1.2:
|
||||
resolution: {integrity: sha512-bNH9mmM9qsJ2X4r2Nat1B//1dJVcn3+iBLa3IgqJ7EbGaDNepL9QSHOxN4ng33s52VMMhhIfgCYDk3C4ZmlDAg==}
|
||||
engines: {node: '>=10'}
|
||||
dependencies:
|
||||
brace-expansion: 2.0.1
|
||||
dev: true
|
||||
|
||||
/minimist/1.2.7:
|
||||
resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==}
|
||||
|
||||
|
|
@ -10323,14 +10316,14 @@ packages:
|
|||
he: 1.2.0
|
||||
dev: true
|
||||
|
||||
/vue-tsc/1.0.16_typescript@4.9.4:
|
||||
resolution: {integrity: sha512-yZaiJBbcKR1rSLhiF9KryAFH7R63po+N/invr2EAHGXxMzZksE5j1zyQKvrYiqK47ZHLAlCR+re/PHqWp/UzTg==}
|
||||
/vue-tsc/1.0.22_typescript@4.9.4:
|
||||
resolution: {integrity: sha512-xSxwgWR3czhv7sLKHWu6lzj9Xq6AtsCURVL45AY4TLGFszv2L2YlMgygXvqslyCM5bz9cyoIKSaZnzHqHTHjzA==}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
typescript: '*'
|
||||
dependencies:
|
||||
'@volar/vue-language-core': 1.0.16
|
||||
'@volar/vue-typescript': 1.0.16
|
||||
'@volar/vue-language-core': 1.0.22
|
||||
'@volar/vue-typescript': 1.0.22
|
||||
typescript: 4.9.4
|
||||
dev: true
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue