teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

refactor: generic components (#868)

Browse source 
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
This commit is contained in:
三咲智子 Kevin Deng 2023-01-08 15:49:32 +08:00 committed by GitHub
parent 5c8f75b9b7
commit b30ebc12f8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 63 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/common/CommonAlert.vue
View file

@ -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>

25
components/common/CommonPaginator.vue
View file

@ -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>

6
components/modal/ModalMediaPreview.vue
View file

@ -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>

2
components/nav/NavFooter.vue
View file

@ -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

2
components/notification/NotificationSubscribePushNotificationError.vue
View file

@ -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>

4
components/publish/PublishWidget.vue
View file

@ -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>

2
components/status/StatusCard.vue
View file

@ -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">

4
components/status/StatusReplyingTo.vue
View file

@ -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 />

2
components/status/StatusSpoiler.vue
View file

@ -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">

2
components/timeline/TimelinePaginator.vue
View file

@ -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()

4
nuxt.config.ts
View file

@ -11,6 +11,10 @@ export default defineNuxtConfig({
typescript: {
tsConfig: {
exclude: ['../service-worker'],
vueCompilerOptions: {
jsxTemplates: true,
experimentalRfc436: true,
},
},
},
modules: [

2
package.json
View file

@ -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": {

67
pnpm-lock.yaml
View file

@ -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