refactor(publish): extract pickers

This commit is contained in:
三咲智子 2023-01-04 18:41:19 +08:00
parent 9677f742c8
commit 73fe063a8f
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
3 changed files with 64 additions and 45 deletions

View file

@ -44,16 +44,17 @@ const hideEmojiPicker = () => {
</script> </script>
<template> <template>
<CommonTooltip content="Add emojis">
<VDropdown <VDropdown
auto-boundary-max-size auto-boundary-max-size
@apply-show="openEmojiPicker()" @apply-show="openEmojiPicker()"
@apply-hide="hideEmojiPicker()" @apply-hide="hideEmojiPicker()"
> >
<button btn-action-icon :title="$t('tooltip.emoji')"> <slot />
<div i-ri:emotion-line />
</button>
<template #popper> <template #popper>
<div ref="el" min-w-10 min-h-10 /> <div ref="el" min-w-10 min-h-10 />
</template> </template>
</VDropdown> </VDropdown>
</CommonTooltip>
</template> </template>

View file

@ -0,0 +1,38 @@
<script setup lang="ts">
import { statusVisibilities } from '~/composables/masto/icons'
const { editing } = defineProps<{
editing?: boolean
}>()
let { modelValue } = $defineModel<{
modelValue: string
}>()
const currentVisibility = $computed(() =>
statusVisibilities.find(v => v.value === modelValue) || statusVisibilities[0],
)
const chooseVisibility = (visibility: string) => {
modelValue = visibility
}
</script>
<template>
<CommonTooltip placement="top" :content="editing ? $t(`visibility.${currentVisibility.value}`) : $t('tooltip.change_content_visibility')">
<CommonDropdown placement="bottom">
<slot :visibility="currentVisibility" />
<template #popper>
<CommonDropdownItem
v-for="visibility in statusVisibilities"
:key="visibility.value"
:icon="visibility.icon"
:text="$t(`visibility.${visibility.value}`)"
:description="$t(`visibility.${visibility.value}_desc`)"
:checked="visibility.value === modelValue"
@click="chooseVisibility(visibility.value)"
/>
</template>
</CommonDropdown>
</CommonTooltip>
</template>

View file

@ -3,7 +3,6 @@ import type { Attachment, CreateStatusParams, Status, StatusVisibility } from 'm
import { fileOpen } from 'browser-fs-access' import { fileOpen } from 'browser-fs-access'
import { useDropZone } from '@vueuse/core' import { useDropZone } from '@vueuse/core'
import { EditorContent } from '@tiptap/vue-3' import { EditorContent } from '@tiptap/vue-3'
import { statusVisibilities } from '~/composables/masto/icons'
import type { Draft } from '~/types' import type { Draft } from '~/types'
type FileUploadError = [filename: string, message: string] type FileUploadError = [filename: string, message: string]
@ -54,10 +53,6 @@ const { editor } = useTiptap({
onPaste: handlePaste, onPaste: handlePaste,
}) })
const currentVisibility = $computed(() => {
return statusVisibilities.find(v => v.value === draft.params.visibility) || statusVisibilities[0]
})
let isUploading = $ref<boolean>(false) let isUploading = $ref<boolean>(false)
let isExceedingAttachmentLimit = $ref<boolean>(false) let isExceedingAttachmentLimit = $ref<boolean>(false)
let failed = $ref<FileUploadError[]>([]) let failed = $ref<FileUploadError[]>([])
@ -132,10 +127,6 @@ function removeAttachment(index: number) {
draft.attachments.splice(index, 1) draft.attachments.splice(index, 1)
} }
function chooseVisibility(visibility: StatusVisibility) {
draft.params.visibility = visibility
}
async function publish() { async function publish() {
const payload = { const payload = {
...draft.params, ...draft.params,
@ -291,16 +282,20 @@ defineExpose({
<PublishEmojiPicker <PublishEmojiPicker
@select="insertEmoji" @select="insertEmoji"
@select-custom="insertCustomEmoji" @select-custom="insertCustomEmoji"
/> >
<button btn-action-icon :title="$t('tooltip.emoji')">
<div i-ri:emotion-line />
</button>
</PublishEmojiPicker>
<CommonTooltip placement="bottom" :content="$t('tooltip.add_media')"> <CommonTooltip placement="top" :content="$t('tooltip.add_media')">
<button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments"> <button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
<div i-ri:image-add-line /> <div i-ri:image-add-line />
</button> </button>
</CommonTooltip> </CommonTooltip>
<template v-if="editor"> <template v-if="editor">
<CommonTooltip placement="bottom" :content="$t('tooltip.toggle_code_block')"> <CommonTooltip placement="top" :content="$t('tooltip.toggle_code_block')">
<button <button
btn-action-icon btn-action-icon
:aria-label="$t('tooltip.toggle_code_block')" :aria-label="$t('tooltip.toggle_code_block')"
@ -318,7 +313,7 @@ defineExpose({
{{ editor?.storage.characterCount.characters() }}<span text-secondary-light>/</span><span text-secondary-light>{{ characterLimit }}</span> {{ editor?.storage.characterCount.characters() }}<span text-secondary-light>/</span><span text-secondary-light>{{ characterLimit }}</span>
</div> </div>
<CommonTooltip placement="bottom" :content="$t('tooltip.add_content_warning')"> <CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')">
<button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive"> <button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive">
<div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange /> <div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
<div v-else i-ri:alarm-warning-line /> <div v-else i-ri:alarm-warning-line />
@ -338,29 +333,14 @@ defineExpose({
</CommonDropdown> </CommonDropdown>
</CommonTooltip> </CommonTooltip>
<CommonTooltip placement="bottom" :content="draft.editingStatus ? $t(`visibility.${currentVisibility.value}`) : $t('tooltip.change_content_visibility')"> <PublishVisibilityPicker v-model="draft.params.visibility" :editing="!!draft.editingStatus">
<CommonDropdown> <template #default="{ visibility }">
<button :disabled="!!draft.editingStatus" :aria-label="$t('tooltip.change_content_visibility')" btn-action-icon :class="{ 'w-12': !draft.editingStatus }"> <button :disabled="!!draft.editingStatus" :aria-label="$t('tooltip.change_content_visibility')" btn-action-icon :class="{ 'w-12': !draft.editingStatus }">
<div :class="currentVisibility.icon" /> <div :class="visibility.icon" />
<div v-if="!draft.editingStatus" i-ri:arrow-down-s-line text-sm text-secondary me--1 /> <div v-if="!draft.editingStatus" i-ri:arrow-down-s-line text-sm text-secondary me--1 />
</button> </button>
<template #popper>
<CommonDropdownItem
v-for="visibility in statusVisibilities"
:key="visibility.value"
:icon="visibility.icon"
:checked="visibility.value === draft.params.visibility"
@click="chooseVisibility(visibility.value)"
>
{{ $t(`visibility.${visibility.value}`) }}
<template #description>
{{ $t(`visibility.${visibility.value}_desc`) }}
</template> </template>
</CommonDropdownItem> </PublishVisibilityPicker>
</template>
</CommonDropdown>
</CommonTooltip>
<button <button
btn-solid rounded-full text-sm w-full md:w-fit btn-solid rounded-full text-sm w-full md:w-fit