demos: show "No result" in mentions demos

This commit is contained in:
Philipp Kühn 2022-01-12 10:22:27 +01:00
parent 7da4373a6a
commit 1dcbefd08b
5 changed files with 66 additions and 45 deletions

View File

@ -54,7 +54,8 @@ export const MentionList = forwardRef((props, ref) => {
return (
<div className="items">
{props.items.map((item, index) => (
{props.items.length
? props.items.map((item, index) => (
<button
className={`item ${index === selectedIndex ? 'is-selected' : ''}`}
key={index}
@ -62,7 +63,9 @@ export const MentionList = forwardRef((props, ref) => {
>
{item}
</button>
))}
))
: <div className="item">No result</div>
}
</div>
)
})

View File

@ -1,5 +1,6 @@
<template>
<div class="items">
<template v-if="items.length">
<button
class="item"
:class="{ 'is-selected': index === selectedIndex }"
@ -9,6 +10,10 @@
>
{{ item }}
</button>
</template>
<div class="item" v-else>
No result
</div>
</div>
</template>

View File

@ -1,5 +1,6 @@
<template>
<div class="items">
<template v-if="items.length">
<button
class="item"
:class="{ 'is-selected': index === selectedIndex }"
@ -7,8 +8,12 @@
:key="index"
@click="selectItem(index)"
>
{{ item.title }}
{{ item }}
</button>
</template>
<div class="item" v-else>
No result
</div>
</div>
</template>

View File

@ -51,7 +51,8 @@ export default forwardRef((props, ref) => {
return (
<div className="items">
{props.items.map((item, index) => (
{props.items.length
? props.items.map((item, index) => (
<button
className={`item ${index === selectedIndex ? 'is-selected' : ''}`}
key={index}
@ -59,7 +60,9 @@ export default forwardRef((props, ref) => {
>
{item}
</button>
))}
))
: <div className="item">No result</div>
}
</div>
)
})

View File

@ -1,5 +1,6 @@
<template>
<div class="items">
<template v-if="items.length">
<button
class="item"
:class="{ 'is-selected': index === selectedIndex }"
@ -9,6 +10,10 @@
>
{{ item }}
</button>
</template>
<div class="item" v-else>
No result
</div>
</div>
</template>