refactor: Migrate to Vue components

client/js/components/anchor.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+        <p>{{ msg }}</p>
+        <input type="text" v-model="msg" />
+    </div>
+</template>
+
+<script>
+  export default {
+    name: 'anchor',
+    data () {
+      return {
+          msg: 'Welcome to Your Vue.js App'
+      }
+    }
+  }
+</script>

client/js/components/color-picker.vue

@@ -0,0 +1,15 @@
+<template lang="pug">
+  p.control
+    input.input(type='text', placeholder='#F0F0F0', v-model='color')
+</template>
+
+<script>
+  export default {
+    name: 'color-picker',
+    data () {
+      return {
+        color: '000000'
+      }
+    }
+  }
+</script>

client/js/components/copy-path.vue

@@ -1,17 +0,0 @@
-<template>
-    <div>
-        <p>{{ msg }}</p>
-        <input type="text" v-model="msg" />
-    </div>
-</template>
-
-<script>
-    export default {
-        name: 'app',
-        data () {
-            return {
-                msg: 'Welcome to Your Vue.js App'
-            }
-        }
-    }
-</script>

client/js/components/loading-spinner.vue

@@ -0,0 +1,12 @@
+<template lang="pug">
+  i.nav-item#notifload(v-bind:class='{ "is-active": loading }')
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+
+  export default {
+    name: 'loading-spinner',
+    computed: mapState(['loading'])
+  }
+</script>

client/js/components/search.js

@@ -1,87 +0,0 @@
-'use strict'
-
-import $ from 'jquery'
-import _ from 'lodash'
-import Vue from 'vue'
-
-module.exports = (socket) => {
-  if ($('#search-input').length) {
-    $('#search-input').focus()
-
-    $('.searchresults').css('display', 'block')
-
-    var vueHeader = new Vue({
-      el: '#header-container',
-      data: {
-        searchq: '',
-        searchres: [],
-        searchsuggest: [],
-        searchload: 0,
-        searchactive: false,
-        searchmoveidx: 0,
-        searchmovekey: '',
-        searchmovearr: []
-      },
-      watch: {
-        searchq: (val, oldVal) => {
-          vueHeader.searchmoveidx = 0
-          if (val.length >= 3) {
-            vueHeader.searchactive = true
-            vueHeader.searchload++
-            socket.emit('search', { terms: val }, (data) => {
-              vueHeader.searchres = data.match
-              vueHeader.searchsuggest = data.suggest
-              vueHeader.searchmovearr = _.concat([], vueHeader.searchres, vueHeader.searchsuggest)
-              if (vueHeader.searchload > 0) { vueHeader.searchload-- }
-            })
-          } else {
-            vueHeader.searchactive = false
-            vueHeader.searchres = []
-            vueHeader.searchsuggest = []
-            vueHeader.searchmovearr = []
-            vueHeader.searchload = 0
-          }
-        },
-        searchmoveidx: (val, oldVal) => {
-          if (val > 0) {
-            vueHeader.searchmovekey = (vueHeader.searchmovearr[val - 1])
-              ? 'res.' + vueHeader.searchmovearr[val - 1].entryPath
-              : 'sug.' + vueHeader.searchmovearr[val - 1]
-          } else {
-            vueHeader.searchmovekey = ''
-          }
-        }
-      },
-      methods: {
-        useSuggestion: (sug) => {
-          vueHeader.searchq = sug
-        },
-        closeSearch: () => {
-          vueHeader.searchq = ''
-        },
-        moveSelectSearch: () => {
-          if (vueHeader.searchmoveidx < 1) { return }
-          let i = vueHeader.searchmoveidx - 1
-
-          if (vueHeader.searchmovearr[i]) {
-            window.location.assign('/' + vueHeader.searchmovearr[i].entryPath)
-          } else {
-            vueHeader.searchq = vueHeader.searchmovearr[i]
-          }
-        },
-        moveDownSearch: () => {
-          if (vueHeader.searchmoveidx < vueHeader.searchmovearr.length) {
-            vueHeader.searchmoveidx++
-          }
-        },
-        moveUpSearch: () => {
-          if (vueHeader.searchmoveidx > 0) {
-            vueHeader.searchmoveidx--
-          }
-        }
-      }
-    })
-
-    $('main').on('click', vueHeader.closeSearch)
-  }
-}

client/js/components/search.vue

@@ -0,0 +1,101 @@
+<template lang="pug">
+  .nav-item
+    p.control(v-bind:class='{ "is-loading": searchload > 0 }')
+      input.input#search-input(type='text', v-model='searchq', autofocus, @keyup.esc='closeSearch', @keyup.down='moveDownSearch', @keyup.up='moveUpSearch', @keyup.enter='moveSelectSearch', debounce='400', v-bind:placeholder='$t("search.placeholder")')
+
+    transition(name='searchresults')
+      .searchresults(v-show='searchactive', v-cloak)
+        p.searchresults-label {{ $t('search.results') }}
+        ul.searchresults-list
+          li(v-if='searchres.length === 0')
+            a: em {{ $t('search.nomatch') }}
+          li(v-for='sres in searchres', v-bind:class='{ "is-active": searchmovekey === "res." + sres.entryPath }')
+            a(v-bind:href='"/" + sres.entryPath') {{ sres.title }}
+        p.searchresults-label(v-if='searchsuggest.length > 0') {{ $t('search.didyoumean') }}
+        ul.searchresults-list(v-if='searchsuggest.length > 0')
+          li(v-for='sug in searchsuggest', v-bind:class='{ "is-active": searchmovekey === "sug." + sug }')
+            a(v-on:click='useSuggestion(sug)') {{ sug }}
+</template>
+
+<script>
+  import * as _ from 'lodash'
+  import * as $ from 'jquery'
+
+  export default {
+    data () {
+      return {
+        searchq: '',
+        searchres: [],
+        searchsuggest: [],
+        searchload: 0,
+        searchactive: false,
+        searchmoveidx: 0,
+        searchmovekey: '',
+        searchmovearr: []
+      }
+    },
+    watch: {
+      searchq: function (val, oldVal) {
+        let self = this
+        self.searchmoveidx = 0
+        if (val.length >= 3) {
+          self.searchactive = true
+          self.searchload++
+          socket.emit('search', { terms: val }, (data) => {
+            self.searchres = data.match
+            self.searchsuggest = data.suggest
+            self.searchmovearr = _.concat([], self.searchres, self.searchsuggest)
+            if (self.searchload > 0) { self.searchload-- }
+          })
+        } else {
+          self.searchactive = false
+          self.searchres = []
+          self.searchsuggest = []
+          self.searchmovearr = []
+          self.searchload = 0
+        }
+      },
+      searchmoveidx: function (val, oldVal) {
+        if (val > 0) {
+          this.searchmovekey = (this.searchmovearr[val - 1])
+            ? 'res.' + this.searchmovearr[val - 1].entryPath
+            : 'sug.' + this.searchmovearr[val - 1]
+        } else {
+          this.searchmovekey = ''
+        }
+      }
+    },
+    methods: {
+      useSuggestion: function (sug) {
+        this.searchq = sug
+      },
+      closeSearch: function() {
+        this.searchq = ''
+      },
+      moveSelectSearch: function () {
+        if (this.searchmoveidx < 1) { return }
+        let i = this.searchmoveidx - 1
+
+        if (this.searchmovearr[i]) {
+          window.location.assign('/' + this.searchmovearr[i].entryPath)
+        } else {
+          this.searchq = this.searchmovearr[i]
+        }
+      },
+      moveDownSearch: function () {
+        if (this.searchmoveidx < this.searchmovearr.length) {
+          this.searchmoveidx++
+        }
+      },
+      moveUpSearch: function () {
+        if (this.searchmoveidx > 0) {
+          this.searchmoveidx--
+        }
+      }
+    },
+    mounted: function () {
+      let self = this
+      $('main').on('click', self.closeSearch)
+    }
+  }
+</script>