Initial commit

app/components/datepicker/PickYear.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="columns is-mobile is-multiline mx-0">
+    <span 
+      v-for="(v,i) in years"
+      class="column is-4 has-text-centered hyperlink fs-14" 
+      :class="i===0 || i===11 ? 'has-text-grey-light' : ''" 
+      @click="$emit('year', v)">{{ v }}</span>
+  </div>
+</template>
+<script>
+export default {
+  props: ['year', 'month', 'action'],
+  data() {
+    return {
+      years: []
+    }
+  },
+  created() {
+    this.years = [this.year]
+      for(let i = 1; i < 7; i++) {
+        this.years.push(this.year+i)
+        this.years.push(this.year-i)
+      }
+      this.years.sort(function(a, b) {return a - b;})
+      this.years = this.years.slice(0,12)
+      this.$emit('caption', `${this.years[1]}-${this.years[10]}`)
+  },
+  watch: {
+    action: function(newVal) {
+      if(newVal.name==='next') this.next()
+      if(newVal.name==='previous') this.previous()
+    }
+  },
+  methods: {
+    next() {
+      let year = this.years[this.years.length-1]
+      this.years = []
+      for(let i = 0; i < 12; i++) {
+        this.years.push(year+i)
+      }
+      this.years.sort(function(a, b) {return a - b;})
+      this.years = this.years.slice(0,12)
+      this.$emit('caption', `${this.years[1]}-${this.years[10]}`)
+    },
+    previous() {
+      let year = this.years[0]
+      this.years = []
+      for(let i = 0; i < 12; i++) {
+        this.years.push(year-i)
+      }
+      this.years.sort(function(a, b) {return a - b;})
+      this.years = this.years.slice(0,12)
+      this.$emit('caption', `${this.years[1]}-${this.years[10]}`)
+    }
+  }
+}
+</script>