feat(publish): increase input height when focused

This commit is contained in:
三咲智子 2022-11-24 23:01:45 +08:00
parent 8283521092
commit 55aed591de
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
2 changed files with 11 additions and 1 deletions

View file

@ -13,6 +13,6 @@ import { isPreviewHelpOpen, isPublishDialogOpen, isSigninDialogOpen, isUserSwitc
<HelpPreview /> <HelpPreview />
</ModalDialog> </ModalDialog>
<ModalDialog v-model="isPublishDialogOpen"> <ModalDialog v-model="isPublishDialogOpen">
<PublishWidget draft-key="dialog" min-w-180 p6 /> <PublishWidget draft-key="dialog" expanded min-w-180 p6 />
</ModalDialog> </ModalDialog>
</template> </template>

View file

@ -6,12 +6,15 @@ const {
draftKey, draftKey,
placeholder = 'What is on your mind?', placeholder = 'What is on your mind?',
inReplyToId, inReplyToId,
expanded: _expanded = false,
} = defineProps<{ } = defineProps<{
draftKey: string draftKey: string
placeholder?: string placeholder?: string
inReplyToId?: string inReplyToId?: string
expanded?: boolean
}>() }>()
const expanded = $ref(_expanded)
let isSending = $ref(false) let isSending = $ref(false)
let { draft } = $(useDraft(draftKey, inReplyToId)) let { draft } = $(useDraft(draftKey, inReplyToId))
@ -123,9 +126,16 @@ onUnmounted(() => {
<textarea <textarea
v-model="draft.params.status" v-model="draft.params.status"
:placeholder="placeholder" :placeholder="placeholder"
h-80px
:class="expanded ? '!h-200px' : ''"
p2 border-rounded w-full bg-transparent p2 border-rounded w-full bg-transparent
transition="height"
outline-none border="~ base" outline-none border="~ base"
@paste="handlePaste" @paste="handlePaste"
@focus="expanded = true"
@keydown.esc="expanded = false"
@keydown.ctrl.enter="publish"
@keydown.meta.enter="publish"
/> />
<div flex="~ col gap-2" max-h-50vh overflow-auto> <div flex="~ col gap-2" max-h-50vh overflow-auto>