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

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

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

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

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

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

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

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

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

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

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