навалил фокуса
This commit is contained in:
1
client/app/components.d.ts
vendored
1
client/app/components.d.ts
vendored
@@ -24,7 +24,6 @@ declare module 'vue' {
|
|||||||
PrimeSelectButton: typeof import('primevue/selectbutton')['default']
|
PrimeSelectButton: typeof import('primevue/selectbutton')['default']
|
||||||
PrimeSlider: typeof import('primevue/slider')['default']
|
PrimeSlider: typeof import('primevue/slider')['default']
|
||||||
PrimeTag: typeof import('primevue/tag')['default']
|
PrimeTag: typeof import('primevue/tag')['default']
|
||||||
PrimeTextarea: typeof import('primevue/textarea')['default']
|
|
||||||
PrimeToast: typeof import('primevue/toast')['default']
|
PrimeToast: typeof import('primevue/toast')['default']
|
||||||
PrimeToggleSwitch: typeof import('primevue/toggleswitch')['default']
|
PrimeToggleSwitch: typeof import('primevue/toggleswitch')['default']
|
||||||
RouterLink: typeof import('vue-router')['RouterLink']
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
|
|||||||
@@ -39,7 +39,7 @@ export const useChat = createGlobalState(() => {
|
|||||||
socket.on('disconnect', () => {
|
socket.on('disconnect', () => {
|
||||||
messages.value = []
|
messages.value = []
|
||||||
})
|
})
|
||||||
}, { immediate: true })
|
}, { immediate: true, flush: 'sync' })
|
||||||
|
|
||||||
function sendMessage(message: ChatClientMessage) {
|
function sendMessage(message: ChatClientMessage) {
|
||||||
if (!signaling.connected.value)
|
if (!signaling.connected.value)
|
||||||
|
|||||||
@@ -48,6 +48,7 @@
|
|||||||
<!-- </PrimeInputGroupAddon> -->
|
<!-- </PrimeInputGroupAddon> -->
|
||||||
|
|
||||||
<PrimeInputText
|
<PrimeInputText
|
||||||
|
ref="input"
|
||||||
v-model="text"
|
v-model="text"
|
||||||
placeholder="Write a message..."
|
placeholder="Write a message..."
|
||||||
fluid
|
fluid
|
||||||
@@ -56,13 +57,14 @@
|
|||||||
@vue:mounted="onInputMounted"
|
@vue:mounted="onInputMounted"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<PrimeButton class="shrink-0" label="Send" severity="contrast" @click="sendMessage" />
|
<PrimeButton class="shrink-0" label="Send" severity="contrast" :disabled="!text" @click="sendMessage" />
|
||||||
</PrimeInputGroup>
|
</PrimeInputGroup>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useEventBus } from '#imports'
|
import { useEventBus } from '#imports'
|
||||||
|
import { onStartTyping, unrefElement, useEventListener } from '@vueuse/core'
|
||||||
import { format } from 'date-fns'
|
import { format } from 'date-fns'
|
||||||
import linkifyStr from 'linkify-string'
|
import linkifyStr from 'linkify-string'
|
||||||
import { useChat } from '~/composables/use-chat'
|
import { useChat } from '~/composables/use-chat'
|
||||||
@@ -78,6 +80,7 @@ const eventBus = useEventBus()
|
|||||||
const { messages } = chat
|
const { messages } = chat
|
||||||
|
|
||||||
const scrollRef = useTemplateRef('scroll')
|
const scrollRef = useTemplateRef('scroll')
|
||||||
|
const inputRef = useTemplateRef('input')
|
||||||
const contentRef = computed(() => scrollRef.value?.$refs.content)
|
const contentRef = computed(() => scrollRef.value?.$refs.content)
|
||||||
|
|
||||||
const text = ref('')
|
const text = ref('')
|
||||||
@@ -118,6 +121,14 @@ function onInputMounted(ref: VNode) {
|
|||||||
ref.el?.focus()
|
ref.el?.focus()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
useEventListener(window, 'focus', async (evt) => {
|
||||||
|
unrefElement(inputRef.value)?.focus()
|
||||||
|
})
|
||||||
|
|
||||||
|
onStartTyping(() => {
|
||||||
|
unrefElement(inputRef.value)?.focus()
|
||||||
|
})
|
||||||
|
|
||||||
const ARRIVED_STATE_THRESHOLD_PIXELS = 1
|
const ARRIVED_STATE_THRESHOLD_PIXELS = 1
|
||||||
async function onNewMessage() {
|
async function onNewMessage() {
|
||||||
if (!contentRef.value)
|
if (!contentRef.value)
|
||||||
|
|||||||
Reference in New Issue
Block a user