feat: Fixes Search Input and Combobox + makes them better

Author: ChristianKienle

.gitignore

@@ -98,3 +98,4 @@ node_modules
 /ui/.vscode
 /server/.vscode
 /docs/.vscode
+/ui/coverage

docs/package.json

@@ -30,7 +30,7 @@
     "chai": "^4.2.0",
     "eslint": "^5.13.0",
     "eslint-plugin-vue": "^5.2.1",
-    "fiori-fundamentals": "^1.4.3",
+    "fiori-fundamentals": "^1.4.9",
     "highlight.js": "^9.14.2",
     "html-loader": "^0.5.5",
     "markdown-loader": "^5.0.0",

docs/src/api/_baseline.json

@@ -1557,39 +1557,44 @@
       "componentName": "FdCombobox"
     },
     "FdSearchInput": {
-      "slots": {},
+      "slots": {
+        "empty": {
+          "name": "empty",
+          "description": "Content that is rendered in case there are no matching completions."
+        }
+      },
       "events": {
-        "autoComplete": {
-          "name": "autoComplete",
-          "description": "Trigerred when the value in the SearchInput is changed. \n NOTE: This event will get trigerred only if there are children components in the suggestion."
+        "update": {
+          "name": "update",
+          "description": "Trigerred when the value in the search input changed."
         },
-        "search": {
-          "name": "search",
-          "description": "Triggered when the search button is clicked or enter is pressed from the keyboard."
+        "change": {
+          "name": "change",
+          "description": "Trigerred when the value in the search input was confirmed."
         }
       },
       "mixins": [],
       "props": {
-        "value": {
-          "name": "value",
-          "description": "Value set in the Search Input",
+        "predicate": {
+          "name": "predicate",
+          "description": "Value of the enclosed search input element.",
           "required": false,
           "types": ["String"],
-          "defaultValue": ""
+          "defaultValue": null
         },
         "placeholder": {
           "name": "placeholder",
-          "description": "Placeholder in case the SearchInput is empty",
+          "description": "Placeholder in case predicate is empty",
           "required": false,
           "types": ["String"],
           "defaultValue": ""
         },
-        "ariaLabel": {
-          "name": "ariaLabel",
-          "description": "Aria Label",
+        "completions": {
+          "name": "completions",
+          "description": "Array of strings used for auto completion.",
           "required": false,
-          "types": ["String"],
-          "defaultValue": "Search Input"
+          "types": ["Array"],
+          "defaultValue": "empty array"
         },
         "compact": {
           "name": "compact",

docs/src/pages/Combobox/0-default.vue

@@ -1,5 +1,13 @@
 <title>Default Combobox</title>
-<tip>`FdCombobox` supports `v-model` and thus you can easily create bi-directional bindings.</tip>
+<tip>
+`FdCombobox` supports `v-model` and thus you can easily create bi-directional bindings.
+
+---
+
+**Important**
+
+All `FdMenuItem`s need an associated `value` – otherwise `v-model` will not work.
+</tip>
 
 <template>
   <div>
@@ -8,9 +16,9 @@
       <span class="favorite-fruit-current">{{ fruit || "none" }}</span>
     </div>
     <FdCombobox v-model="fruit" placeholder="Pick your Fruit of the day">
-      <FdMenuItem @click="fruit = 'Apple'">Apple</FdMenuItem>
-      <FdMenuItem @click="fruit = 'Banana'">Banana</FdMenuItem>
-      <FdMenuItem @click="fruit = 'Cherry'">Cherry</FdMenuItem>
+      <FdMenuItem value="Apple">Apple</FdMenuItem>
+      <FdMenuItem value="Banana">Banana</FdMenuItem>
+      <FdMenuItem value="Cherry">Cherry</FdMenuItem>
     </FdCombobox>
   </div>
 </template>

docs/src/pages/Combobox/1-sizes.vue

@@ -6,9 +6,9 @@
       v-model="fruit"
       placeholder="Pick your Fruit of the day (default size)"
     >
-      <FdMenuItem @click="fruit = 'Apple'">Apple</FdMenuItem>
-      <FdMenuItem @click="fruit = 'Banana'">Banana</FdMenuItem>
-      <FdMenuItem @click="fruit = 'Cherry'">Cherry</FdMenuItem>
+      <FdMenuItem value="Apple">Apple</FdMenuItem>
+      <FdMenuItem value="Banana">Banana</FdMenuItem>
+      <FdMenuItem value="Cherry">Cherry</FdMenuItem>
     </FdCombobox>
 
     <br /><br />
@@ -18,9 +18,9 @@
       compact
       placeholder="Pick your Fruit of the day (compact size)"
     >
-      <FdMenuItem @click="fruit = 'Apple'">Apple</FdMenuItem>
-      <FdMenuItem @click="fruit = 'Banana'">Banana</FdMenuItem>
-      <FdMenuItem @click="fruit = 'Cherry'">Cherry</FdMenuItem>
+      <FdMenuItem value="Apple">Apple</FdMenuItem>
+      <FdMenuItem value="Banana">Banana</FdMenuItem>
+      <FdMenuItem value="Cherry">Cherry</FdMenuItem>
     </FdCombobox>
   </div>
 </template>

docs/src/pages/Popover/4-no-content.vue

@@ -0,0 +1,8 @@
+<title>Popover without Content</title>
+<tip>Sometimes it is useful to have a Popover that renders a trigger but no body.</tip>
+
+<template>
+  <div>
+    <FdPopover title="Show (is not showing anything)" />
+  </div>
+</template>

docs/src/pages/Search Input/1-Search.vue

@@ -1,23 +1,19 @@
 <title>Search Input</title>
-
+<docs>`FdSearchInput` supports `v-model`: The *model value* is simply the currently entered predicate/query/value.</docs>
+<tip>
+Currently `FdSearchInput` always renderes an empty state even when no auto compleiton is used. This issue will be addressed in the near future.
+</tip>
 <template>
   <div>
-    <p>Search Query: '{{ query }}'</p>
-    <FdSearchInput
-      v-model="query"
-      placeholder="Enter Search Query"
-      @search="onSearch"
-    />
+    <p>
+      Predicate: <code>{{ predicate }}</code>
+    </p>
+    <FdSearchInput v-model="predicate" placeholder="Search" />
   </div>
 </template>
 
 <script>
 export default {
-  methods: {
-    onSearch(txt) {
-      this.query = txt;
-    }
-  },
-  data: () => ({ query: "Apples and Oranges" })
+  data: () => ({ predicate: "Apples and Oranges" })
 };
 </script>

docs/src/pages/Search Input/2-SearchSuggest.vue

@@ -1,44 +1,21 @@
 <title>Search Input with Auto Complete</title>
+<docs>Use the `completions`-prop in order to pass an array of strings to `FdSearchInput`. `FdSearchInput` will then render a completion list that is automatically filtered.</docs>
 
 <template>
   <div>
-    <p>Search Query: '{{ query }}'</p>
+    <p>
+      Predicate: <code>{{ predicate }}</code>
+    </p>
     <FdSearchInput
-      v-model="query"
-      placeholder="Enter Search Query"
-      @search="search"
-      @autoComplete="autoComplete"
-      :enableSuggest="true"
-    >
-      <FdMenuItem
-        v-for="item in data"
-        :key="item.key"
-        @click="searchvalue = item.text"
-        >{{ item.text }}</FdMenuItem
-      >
-    </FdSearchInput>
+      v-model="predicate"
+      placeholder="Search"
+      :completions="['Apple', 'Peach', 'Banana']"
+    />
   </div>
 </template>
 
 <script>
 export default {
-  methods: {
-    search(query) {
-      this.query = query;
-    },
-    autoComplete(event) {}
-  },
-  data() {
-    return {
-      query: "",
-      data: [
-        { key: 1, text: "apple" },
-        { key: 2, text: "mango" },
-        { key: 3, text: "grapes" },
-        { key: 4, text: "banana" },
-        { key: 5, text: "orange" }
-      ]
-    };
-  }
+  data: () => ({ predicate: "" })
 };
 </script>

docs/src/pages/Search Input/index.ts

@@ -4,6 +4,6 @@ export const plugin: ExampleCollectionFunction = () => {
   return {
     status: "experimental",
     icon: "search",
-    related: ["FdSearchInput", "FdMenuItem"]
+    related: ["FdSearchInput"]
   };
 };