From 55aed591defea30d9366fda62c8a00f39347d90a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Thu, 24 Nov 2022 23:01:45 +0800
Subject: [PATCH] feat(publish): increase input height when focused

---
 components/modal/ModalContainer.vue  |  2 +-
 components/publish/PublishWidget.vue | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/modal/ModalContainer.vue b/components/modal/ModalContainer.vue
index 9d55262a..46b3803c 100644
--- a/components/modal/ModalContainer.vue
+++ b/components/modal/ModalContainer.vue
@@ -13,6 +13,6 @@ import { isPreviewHelpOpen, isPublishDialogOpen, isSigninDialogOpen, isUserSwitc
     <HelpPreview />
   </ModalDialog>
   <ModalDialog v-model="isPublishDialogOpen">
-    <PublishWidget draft-key="dialog" min-w-180 p6 />
+    <PublishWidget draft-key="dialog" expanded min-w-180 p6 />
   </ModalDialog>
 </template>
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 3b5ff869..f2cee2c4 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -6,12 +6,15 @@ const {
   draftKey,
   placeholder = 'What is on your mind?',
   inReplyToId,
+  expanded: _expanded = false,
 } = defineProps<{
   draftKey: string
   placeholder?: string
   inReplyToId?: string
+  expanded?: boolean
 }>()
 
+const expanded = $ref(_expanded)
 let isSending = $ref(false)
 let { draft } = $(useDraft(draftKey, inReplyToId))
 
@@ -123,9 +126,16 @@ onUnmounted(() => {
         <textarea
           v-model="draft.params.status"
           :placeholder="placeholder"
+          h-80px
+          :class="expanded ? '!h-200px' : ''"
           p2 border-rounded w-full bg-transparent
+          transition="height"
           outline-none border="~ base"
           @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>