feat(vue3): improve vue3 support

package.json

@@ -68,11 +68,12 @@
     }
   },
   "peerDependencies": {
-    "vue": ">= 2.5.0"
+    "vue": ">= 3.0.0"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^3.2.16",
     "@storybook/vue": "3.2.15",
+    "@vitejs/plugin-vue": "^1.10.1",
     "@vue/test-utils": "1.0.0-beta.25",
     "babel-core": "6.26.0",
     "babel-eslint": "^8.0.2",
@@ -98,27 +99,10 @@
     "jest-serializer-vue": "^2.0.2",
     "kcd-scripts": "0.27.1",
     "prettier": "1.14.3",
-    "rollup": "^0.56.2",
-    "rollup-plugin-buble": "^0.19.2",
-    "rollup-plugin-commonjs": "^8.3.0",
-    "rollup-plugin-filesize": "^1.0.1",
-    "rollup-plugin-json": "^2.1.1",
-    "rollup-plugin-node-resolve": "^3.0.3",
-    "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-uglify": "^3.0.0",
-    "rollup-plugin-vue": "3.0.0",
-    "rollup-watch": "^4.3.1",
     "sinon": "4.1.2",
-    "vue": "2.5.18",
-    "vue-jest": "2.6.0",
-    "vue-loader": "14.2.2",
-    "vue-server-renderer": "2.5.18",
-    "vue-template-compiler": "2.5.18",
-    "vue-template-es2015-compiler": "1.8.2",
-    "webpack": "4.28.3",
-    "webpack-cli": "^3.2.0",
-    "webpack-dev-server": "3.1.14",
-    "webpack-merge": "4.2.1"
+    "vite": "^2.6.14",
+    "vue": "^3.2.23",
+    "vue-jest": "2.6.0"
   },
   "jest": {
     "moduleFileExtensions": [

src/Autosuggest.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="componentAttrIdAutosuggest">
+  <div :id="componentAttrIdAutosuggest" :class="$props.class" :style="$props.style">
     <slot name="before-input" /><div
       role="combobox"
       :aria-expanded="isOpen ? 'true' : 'false'"
@@ -16,7 +16,6 @@
       :aria-controls="`${componentAttrIdAutosuggest}-${componentAttrPrefix}__results`"
       @input="inputHandler"
       @keydown="handleKeyStroke"
-      v-on="listeners"
     ></div><slot name="after-input" />
     <div
       :id="`${componentAttrIdAutosuggest}-${componentAttrPrefix}__results`"
@@ -200,7 +199,11 @@ export default {
       type: String,
       required: false,
       default: "autosuggest"
-    }
+    },
+
+    // do not fallthrough, class and style
+    class: null,
+    style: null
   },
   data() {
     return {
@@ -227,29 +230,30 @@ export default {
     internal_inputProps() {
       return {
         ...this.defaultInputProps,
-        ...this.inputProps
+        ...this.inputProps,
+        ...this.listeners
       }
     },
     listeners() {
       // console.log({...this.$attrs})
       return {
         // ...this.$attrs,
-        input: e => {
+        onInput: e => {
           // Don't do anything native here, since we have inputHandler
           return
         },
         /**
          * Wrap native click handler to allow for added behavior
          */
-        click: () => {
+        onClick: () => {
           /* eslint-disable-next-line vue/no-side-effects-in-computed-properties */
           this.loading = false;
           this.$attrs.click && this.$attrs.click(this.currentItem);
           this.$nextTick(() => {
             this.ensureItemVisible(this.currentItem, this.currentIndex);
           })
         },
-        selected: () => {
+        onSelected: () => {
           /**
            * Determine which onSelected to fire. This can be either from inside
            * a section's object, from the `@selected` event
@@ -265,7 +269,8 @@ export default {
             );
           } else if (this.sectionConfigs["default"].onSelected) {
             this.sectionConfigs["default"].onSelected(null, this.searchInputOriginal);
-          } else if (this.$attrs.selected) {
+          } else if (this.onSelected) {
+            // NOTE `this.onSelected` and `this.$emit('selected', ...)` are equivalent in vue3
             this.$emit('selected', this.currentItem, this.currentIndex);
           }
           this.setChangeItem(null)
@@ -499,7 +504,7 @@ export default {
             }
 
             this.loading = true;
-            this.listeners.selected(this.didSelectFromOptions);
+            this.listeners.onSelected(this.didSelectFromOptions);
             break;
           case 27: // Escape
             /**
@@ -644,7 +649,7 @@ export default {
       this.loading = true;
       this.didSelectFromOptions = true;
       this.setChangeItem(this.getItemByIndex(this.currentIndex), true);
-      this.listeners.selected(true);
+      this.listeners.onSelected(true);
     },
     /**
      * Sets the current index of the highlighted object, useful for aria

src/parts/DefaultSection.js

@@ -1,6 +1,6 @@
-import { h } from 'vue'
+import { h, defineComponent, Fragment  } from 'vue'
 
-const DefaultSection = {
+const DefaultSection = defineComponent({
   name: "default-section",
   props: {
     /** @type ResultSection */
@@ -58,7 +58,9 @@ const DefaultSection = {
     const before = slots.beforeSection && slots.beforeSection({
       section: this.section,
       className: beforeClassName
-    }) || []
+    })
+    // Skip fragments without children, this can be for example `<slot>` or empty `<template>`
+    .filter(x=>x.type !== Fragment && x.children.length === 0) || []
 
     return h(
       "ul",
@@ -112,6 +114,6 @@ const DefaultSection = {
       ]
     );
   }
-};
+});
 
 export default DefaultSection;

vite.config.js

@@ -0,0 +1,21 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: "src/vue-autosuggest.js",
+      name: "VueAutosuggest",
+      fileName: format => (format === "umd" ? "vue-autosuggest.js" : "vue-autosuggest.esm.js"),
+      formats: ["umd", "es"]
+    },
+    rollupOptions: {
+      output: {
+        exports: "named",
+        name: "VueAutosuggest"
+      },
+      external: ["vue"]
+    }
+  },
+  plugins: [vue({})]
+});