Restore clickaway and typeahead functionality

package.json

@@ -42,7 +42,6 @@
     "rangetouch": "0.0.9",
     "sinon": "^1.17.2",
     "vue": "^2.0.0-alpha.6",
-    "vue-clickaway": "^1.1.1",
     "vue-hot-reload-api": "^1.3.2",
     "vue-resource": "^0.7.0",
     "vueify": "^9.1.0",

resources/assets/js/app.vue

@@ -36,7 +36,7 @@
     import { event, showOverlay, hideOverlay, loadMainView, forceReloadWindow } from './utils';
     import { sharedStore, queueStore, songStore, userStore, preferenceStore as preferences } from './stores';
     import { playback, ls } from './services';
-    import focusDirective from './directives/focus';
+    import { focusDirective, clickawayDirective } from './directives';
 
     export default {
         components: { siteHeader, siteFooter, mainWrapper, overlay, loginForm, editSongsForm },
@@ -196,6 +196,7 @@
 
     // …and the global directives
     Vue.directive('koel-focus', focusDirective);
+    Vue.directive('koel-clickaway',clickawayDirective);
 </script>
 
 <style lang="sass">

resources/assets/js/components/modals/edit-songs-form.vue

@@ -35,14 +35,14 @@
                                 <typeahead
                                     :items="artistState.artists"
                                     :options="artistTypeaheadOptions"
-                                    :value.sync="formData.artistName"></typeahead>
+                                    v-model="formData.artistName"></typeahead>
                             </div>
                             <div class="form-row">
                                 <label>Album</label>
                                 <typeahead
                                     :items="albumState.albums"
                                     :options="albumTypeaheadOptions"
-                                    :value.sync="formData.albumName"></typeahead>
+                                    v-model="formData.albumName"></typeahead>
                             </div>
                             <div class="form-row">
                                 <label class="small">

resources/assets/js/components/shared/add-to-menu.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="add-to-playlist" v-show="showing">
+    <div class="add-to" v-show="showing" v-koel-clickaway="close">
         <p>Add {{ songs.length | pluralize('song') }} to</p>
 
         <ul>
@@ -81,11 +81,8 @@
                 this.close();
             },
 
-            /**
-             * Override the method from "songMenuMethods" mixin for this own logic.
-             */
             close() {
-                event.emit('add-to-menu:close');
+                this.$parent.closeAddToMenu();
             },
         },
     };
@@ -95,7 +92,7 @@
     @import "../../../sass/partials/_vars.scss";
     @import "../../../sass/partials/_mixins.scss";
 
-    .add-to-playlist {
+    .add-to {
         @include context-menu();
 
         position: absolute;

resources/assets/js/components/shared/typeahead.vue

@@ -2,13 +2,14 @@
     <div>
         <input type="text"
             :placeholder="options.placeholder || 'No change'"
-            v-model="value"
+            v-model="mutatedValue"
             @keydown.down.prevent="down"
             @keydown.up.prevent="up"
             @keydown.enter.prevent.stop="enter"
             @keydown.tab="enter"
             @keyup="keyup"
             @click="showingResult = true"
+            v-koel-clickaway="hideResults"
         >
         <ul class="result" v-show="showingResult">
             <li v-for="item in displayedItems" @click.prevent="resultClick($event)">
@@ -29,6 +30,7 @@
             return {
                 filter: '',
                 showingResult: false,
+                mutatedValue: this.value,
             };
         },
 
@@ -100,7 +102,7 @@
                     return;
                 }
 
-                this.filter = this.value;
+                this.filter = this.mutatedValue;
                 this.showingResult = true;
             },
 
@@ -113,7 +115,10 @@
             },
 
             apply() {
-                this.value = $(this.$el).find('.result li.selected').text() || this.value;
+                this.mutatedValue = $(this.$el).find('.result li.selected').text().trim() || this.mutatedValue;
+                // In Vue 2.0, we can use v-model on custom components like this.
+                // $emit an 'input' event in this format, and we're set.
+                this.$emit('input', { target: { value: this.mutatedValue } });
             },
 
             /**
@@ -134,6 +139,10 @@
                     elem.scrollIntoView(alignTop);
                 }
             },
+
+            hideResults() {
+                this.showingResult = false;
+            },
         },
     };
 </script>

resources/assets/js/directives/focus.js

@@ -3,7 +3,7 @@ import Vue from 'vue';
 /**
  * A simple directive to set focus into an input field when it's shown.
  */
-export default {
+export const focusDirective = {
     update(el, { value }) {
         if (!value) {
             return;

resources/assets/js/mixins/has-song-list.js

@@ -54,14 +54,9 @@ export default {
         updateMeta(meta) {
             this.meta = assign(this.meta, meta);
         },
-    },
 
-    created() {
+        closeAddToMenu() {
-        event.on({
+            this.showingAddToMenu = false;
-            /**
+        },
-             * Listen to add-to-menu:close event to set showingAddToMenu to false (and subsequently close the menu).
-             */
-            'add-to-menu:close': () => this.showingAddToMenu = false,
-        });
     },
 };