hack

components/i/search/Ask.vue

@@ -17,6 +17,8 @@
                 :padded="false"
                 variant="none"
                 maxlength="2000"
+                @focus="handleInputFocus"
+                @blur="handleInputBlur"
             />
             <div class="flex flex-shrink-0 gap-2">
                 <UButton
@@ -52,14 +54,23 @@ const props = defineProps({
     }
 })
 const emits = defineEmits(['ask', 'stop'])
-const cardUI = {
-    body: {
-        padding: '',
-        base: 'flex items-end has-[textarea[rows="1"]]:items-center pl-4 pr-1 py-1 gap-2'
-    },
-    base: 'transition-[width] w-3/5 has-[textarea:focus]:w-full has-[button:focus]:w-full',
-    rounded: 'rounded has-[textarea[rows="1"]]:rounded-full'
-}
+const isFocus = ref(false)
+const cardUI = computed(() => {
+    const base = {
+        body: {
+            padding: '',
+            base: 'flex items-end has-[textarea[rows="1"]]:items-center pl-4 pr-1 py-1 gap-2'
+        },
+        // base: 'transition-[width] w-3/5 has-[textarea:focus]:w-full has-[button:focus]:w-full',
+        rounded: 'rounded has-[textarea[rows="1"]]:rounded-full'
+    }
+    if (isFocus.value) {
+        base.base = 'transition-[width] w-full'
+    } else {
+        base.base = 'transition-[width] w-3/5'
+    }
+    return base
+})
 defineShortcuts({
     meta_enter: {
         usingInput: 'queryInput',
@@ -96,4 +107,12 @@ function handleAsk () {
     handleBlur()
 }
 const queryInput = ref(null)
+function handleInputFocus () {
+    isFocus.value = true
+}
+function handleInputBlur () {
+    setTimeout(() => {
+        isFocus.value = false
+    }, 100)
+}
 </script>