zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 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
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()