feat: Search Menu Auto Completion

Author: ChristianKienle

.vscode/settings.json

@@ -4,7 +4,12 @@
     "javascript",
     "vue"
   ],
-  "debug.node.autoAttach": "on",
+  "vetur.grammar.customBlocks": {
+    "docs": "md",
+    "tip": "md",
+    "title": "md"
+  },
+  "debug.node.autoAttach": "off",
   "eslint.alwaysShowStatus": true,
   "eslint.enable": true,
   "eslint.packageManager": "yarn",

babel.config.js

@@ -9,7 +9,7 @@ if (process.env.VUE_CLI_BUILD_TARGET === "app") {
     presets: ["@vue/app"]
   };
   return;
-};
+}
 
 const uiPresets = [
   [
@@ -23,5 +23,6 @@ const uiPresets = [
 ];
 const presets = mode === "prod" ? uiPresets : appPresets;
 module.exports = {
-  presets
+  presets,
+  plugins: ["@babel/plugin-syntax-dynamic-import"]
 };

cypress.json

@@ -0,0 +1,3 @@
+{
+  "pluginsFile": "tests/e2e/plugins/index.js"
+}

demo/Overview.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <ul>
+      <li>
+        <router-link to="/pages/popover-default">Popover Default</router-link>
+      </li>
+      <li>
+        <router-link to="/pages/combobox-default">
+          Combobox
+        </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>

demo/index.js

@@ -0,0 +1,20 @@
+import Vue from "vue";
+import router from "./router";
+import VueRouter from "vue-router";
+import FundamentalVue from "./../src/index";
+import FullscreenLayout from "./layouts/FullscreenLayout.vue";
+import "./main.scss";
+
+Vue.use(VueRouter);
+Vue.use(FundamentalVue, {
+  log: {
+    welcome: true,
+    registerComponent: true
+  }
+});
+
+new Vue({
+  router,
+  el: "#app",
+  render: h => h(FullscreenLayout)
+});

demo/layouts/FullscreenLayout.vue

@@ -0,0 +1,9 @@
+<template>
+  <router-view />
+</template>
+
+<script>
+export default {
+  name: "FullscreenLayout"
+};
+</script>

demo/main.scss

@@ -0,0 +1,5 @@
+$fd-support-css-var-fallback: false;
+$fd-icons-path : "./../node_modules/fiori-fundamentals/scss/icons/";
+$fd-scss-font-path : "./../node_modules/fiori-fundamentals/scss/fonts/";
+
+@import "./../node_modules/fiori-fundamentals/scss/all";

demo/pages/combobox-default.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <p id="selected-value">{{ value || "none" }}</p>
+    <fd-combobox v-model="value" placeholder="Pick your Fruit of the day">
+      <fd-menu-item id="item-1" value="Apple-v">Apple</fd-menu-item>
+      <fd-menu-item id="item-2" value="Banana-v">Banana</fd-menu-item>
+      <fd-menu-item id="item-3" value="Cherry-v">Cherry</fd-menu-item>
+    </fd-combobox>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return { value: null };
+  }
+};
+</script>

demo/pages/popover-default.vue

@@ -0,0 +1,17 @@
+<template>
+  <div style="width: 1000px; height: 1000px; padding: 100px;">
+    <fd-popover>
+      <template #control="{toggle}">
+        <FdButton @click="toggle">Toggle</FdButton>
+      </template>
+      <template #default>
+        <div>content</div>
+      </template>
+    </fd-popover>
+  </div>
+</template>
+
+<script>
+export default {
+};
+</script>

demo/router.js

@@ -0,0 +1,19 @@
+import VueRouter from "vue-router";
+
+export default new VueRouter({
+  mode: "history",
+  routes: [
+    {
+      path: "/",
+      component: () => import("./Overview.vue")
+    },
+    {
+      path: "/pages/popover-default",
+      component: () => import("./pages/popover-default.vue")
+    },
+    {
+      path: "/pages/combobox-default",
+      component: () => import("./pages/combobox-default.vue")
+    }
+  ]
+});