ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

demos: show "No result" in mentions demos

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

21
demos/src/Examples/Community/React/MentionList.jsx
View File

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

23
demos/src/Examples/Community/Vue/MentionList.vue
View File

@@ -1,14 +1,19 @@
<template> <template>
<div class="items"> <div class="items">
<button <template v-if="items.length">
class="item" <button
:class="{ 'is-selected': index === selectedIndex }" class="item"
v-for="(item, index) in items" :class="{ 'is-selected': index === selectedIndex }"
:key="index" v-for="(item, index) in items"
@click="selectItem(index)" :key="index"
> @click="selectItem(index)"
{{ item }} >
</button> {{ item }}
</button>
</template>
<div class="item" v-else>
No result
</div>
</div> </div>
</template> </template>

23
demos/src/Experiments/Commands/Vue/CommandsList.vue
View File

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

21
demos/src/Nodes/Mention/React/MentionList.jsx
View File

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

23
demos/src/Nodes/Mention/Vue/MentionList.vue
View File

@@ -1,14 +1,19 @@
<template> <template>
<div class="items"> <div class="items">
<button <template v-if="items.length">
class="item" <button
:class="{ 'is-selected': index === selectedIndex }" class="item"
v-for="(item, index) in items" :class="{ 'is-selected': index === selectedIndex }"
:key="index" v-for="(item, index) in items"
@click="selectItem(index)" :key="index"
> @click="selectItem(index)"
{{ item }} >
</button> {{ item }}
</button>
</template>
<div class="item" v-else>
No result
</div>
</div> </div>
</template> </template>