demos: show "No result" in mentions demos

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>
   )
 })

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>
 

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>
 

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>
   )
 })

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>