mirror of
https://github.com/elk-zone/elk.git
synced 2024-11-19 23:40:07 +00:00
feat(editor): show fetching state of name auto complete
This commit is contained in:
parent
8dd91002d7
commit
b475377f64
3 changed files with 16 additions and 5 deletions
|
@ -4,6 +4,7 @@ import type { Account } from 'masto'
|
|||
const { items, command } = defineProps<{
|
||||
items: Account[]
|
||||
command: Function
|
||||
isPending?: boolean
|
||||
}>()
|
||||
|
||||
let selectedIndex = $ref(0)
|
||||
|
@ -41,7 +42,13 @@ defineExpose({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div relative bg-base text-base shadow border="~ base rounded" text-sm py-2 overflow-x-hidden overflow-y-auto max-h-100>
|
||||
<div v-if="isPending || items.length" relative bg-base text-base shadow border="~ base rounded" text-sm py-2 overflow-x-hidden overflow-y-auto max-h-100>
|
||||
<template v-if="isPending">
|
||||
<div flex gap-1 items-center p2 animate-pulse>
|
||||
<div i-ri:loader-2-line animate-spin />
|
||||
<span>Fetching...</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="items.length">
|
||||
<button
|
||||
v-for="(item, index) in items"
|
||||
|
@ -53,8 +60,6 @@ defineExpose({
|
|||
<AccountInfo :account="item" />
|
||||
</button>
|
||||
</template>
|
||||
<div v-else block m0 w-full text-left px2 py1 italic op30>
|
||||
No result
|
||||
</div>
|
||||
</div>
|
||||
<div v-else />
|
||||
</template>
|
||||
|
|
|
@ -48,6 +48,8 @@ export function getDisplayName(account?: Account, options?: { rich?: boolean })
|
|||
}
|
||||
|
||||
export function getShortHandle({ acct }: Account) {
|
||||
if (!acct)
|
||||
return ''
|
||||
return `@${acct.includes('@') ? acct.split('@')[0] : acct}`
|
||||
}
|
||||
|
||||
|
|
|
@ -58,8 +58,12 @@ function createSuggestionRenderer(): SuggestionOptions['render'] {
|
|||
})
|
||||
},
|
||||
|
||||
onBeforeUpdate(props) {
|
||||
component.updateProps({ ...props, isPending: true })
|
||||
},
|
||||
|
||||
onUpdate(props) {
|
||||
component.updateProps(props)
|
||||
component.updateProps({ ...props, isPending: false })
|
||||
|
||||
if (!props.clientRect)
|
||||
return
|
||||
|
|
Loading…
Reference in a new issue