From 1dcbefd08bdbaec2191f2e529a9f92181d8f4a54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20K=C3=BChn?=
 <philippkuehn@MacBook-Pro-von-Philipp.local>
Date: Wed, 12 Jan 2022 10:22:27 +0100
Subject: [PATCH] demos: show "No result" in mentions demos

---
 .../Examples/Community/React/MentionList.jsx  | 21 +++++++++--------
 .../Examples/Community/Vue/MentionList.vue    | 23 +++++++++++--------
 .../Experiments/Commands/Vue/CommandsList.vue | 23 +++++++++++--------
 demos/src/Nodes/Mention/React/MentionList.jsx | 21 +++++++++--------
 demos/src/Nodes/Mention/Vue/MentionList.vue   | 23 +++++++++++--------
 5 files changed, 66 insertions(+), 45 deletions(-)

diff --git a/demos/src/Examples/Community/React/MentionList.jsx b/demos/src/Examples/Community/React/MentionList.jsx
index 40b157f4..e01b9f57 100644
--- a/demos/src/Examples/Community/React/MentionList.jsx
+++ b/demos/src/Examples/Community/React/MentionList.jsx
@@ -54,15 +54,18 @@ export const MentionList = forwardRef((props, ref) => {
 
   return (
     <div className="items">
-      {props.items.map((item, index) => (
-        <button
-          className={`item ${index === selectedIndex ? 'is-selected' : ''}`}
-          key={index}
-          onClick={() => selectItem(index)}
-        >
-          {item}
-        </button>
-      ))}
+      {props.items.length
+        ? props.items.map((item, index) => (
+          <button
+            className={`item ${index === selectedIndex ? 'is-selected' : ''}`}
+            key={index}
+            onClick={() => selectItem(index)}
+          >
+            {item}
+          </button>
+        ))
+        : <div className="item">No result</div>
+      }
     </div>
   )
 })
diff --git a/demos/src/Examples/Community/Vue/MentionList.vue b/demos/src/Examples/Community/Vue/MentionList.vue
index 3a159cb8..387f04bc 100644
--- a/demos/src/Examples/Community/Vue/MentionList.vue
+++ b/demos/src/Examples/Community/Vue/MentionList.vue
@@ -1,14 +1,19 @@
 <template>
   <div class="items">
-    <button
-      class="item"
-      :class="{ 'is-selected': index === selectedIndex }"
-      v-for="(item, index) in items"
-      :key="index"
-      @click="selectItem(index)"
-    >
-      {{ item }}
-    </button>
+    <template v-if="items.length">
+      <button
+        class="item"
+        :class="{ 'is-selected': index === selectedIndex }"
+        v-for="(item, index) in items"
+        :key="index"
+        @click="selectItem(index)"
+      >
+        {{ item }}
+      </button>
+    </template>
+    <div class="item" v-else>
+      No result
+    </div>
   </div>
 </template>
 
diff --git a/demos/src/Experiments/Commands/Vue/CommandsList.vue b/demos/src/Experiments/Commands/Vue/CommandsList.vue
index d904afb6..87ce1178 100644
--- a/demos/src/Experiments/Commands/Vue/CommandsList.vue
+++ b/demos/src/Experiments/Commands/Vue/CommandsList.vue
@@ -1,14 +1,19 @@
 <template>
   <div class="items">
-    <button
-      class="item"
-      :class="{ 'is-selected': index === selectedIndex }"
-      v-for="(item, index) in items"
-      :key="index"
-      @click="selectItem(index)"
-    >
-      {{ item.title }}
-    </button>
+    <template v-if="items.length">
+      <button
+        class="item"
+        :class="{ 'is-selected': index === selectedIndex }"
+        v-for="(item, index) in items"
+        :key="index"
+        @click="selectItem(index)"
+      >
+        {{ item }}
+      </button>
+    </template>
+    <div class="item" v-else>
+      No result
+    </div>
   </div>
 </template>
 
diff --git a/demos/src/Nodes/Mention/React/MentionList.jsx b/demos/src/Nodes/Mention/React/MentionList.jsx
index 0091b63e..2a0be1c2 100644
--- a/demos/src/Nodes/Mention/React/MentionList.jsx
+++ b/demos/src/Nodes/Mention/React/MentionList.jsx
@@ -51,15 +51,18 @@ export default forwardRef((props, ref) => {
 
   return (
     <div className="items">
-      {props.items.map((item, index) => (
-        <button
-          className={`item ${index === selectedIndex ? 'is-selected' : ''}`}
-          key={index}
-          onClick={() => selectItem(index)}
-        >
-          {item}
-        </button>
-      ))}
+      {props.items.length
+        ? props.items.map((item, index) => (
+          <button
+            className={`item ${index === selectedIndex ? 'is-selected' : ''}`}
+            key={index}
+            onClick={() => selectItem(index)}
+          >
+            {item}
+          </button>
+        ))
+        : <div className="item">No result</div>
+      }
     </div>
   )
 })
diff --git a/demos/src/Nodes/Mention/Vue/MentionList.vue b/demos/src/Nodes/Mention/Vue/MentionList.vue
index 3a159cb8..387f04bc 100644
--- a/demos/src/Nodes/Mention/Vue/MentionList.vue
+++ b/demos/src/Nodes/Mention/Vue/MentionList.vue
@@ -1,14 +1,19 @@
 <template>
   <div class="items">
-    <button
-      class="item"
-      :class="{ 'is-selected': index === selectedIndex }"
-      v-for="(item, index) in items"
-      :key="index"
-      @click="selectItem(index)"
-    >
-      {{ item }}
-    </button>
+    <template v-if="items.length">
+      <button
+        class="item"
+        :class="{ 'is-selected': index === selectedIndex }"
+        v-for="(item, index) in items"
+        :key="index"
+        @click="selectItem(index)"
+      >
+        {{ item }}
+      </button>
+    </template>
+    <div class="item" v-else>
+      No result
+    </div>
   </div>
 </template>