WIP Сделала расчет лет

src/components/base/Calendar/CalendarYears.vue

@@ -1,17 +1,107 @@
 <template lang="pug">
-  
+  .w-full
+    .header.pl-3.pr-6.pt-14px.pb-10px.flex.items-center.justify-center
+      q-btn(
+        size="14px"
+        color="dark"
+        flat,
+        :label="internalMonth",
+        no-caps,
+        padding="10px 12px"
+      )
+    .body.py-5.px-6
+      .cell.flex.items-center.justify-center.cursor-pointer.py-3.rounded(
+        v-for="year in internalYearsList",
+        :key="year",
+        :id="year",
+        :class="activeCellClass(year), cellsClass",
+        @click="selectYear(year)",
+      ) {{ year }}
 </template>
 
 <script>
 export default {
   name: "CalendarYears",
-  props: {},
-  data() {
-    return {};
+  props: {
+    internalDate: Object,
+    startYear: Number,
+    endYear: Number,
+    internalMonth: String,
+  },
+  data() {
+    return {
+      previousDate: null,
+    };
+  },
+  computed: {
+    internalValue: {
+      get() {
+        return this.internalDate;
+      },
+      set(value) {
+        this.$emit("update:internalDate", value);
+      },
+    },
+    cellsClass() {
+      let remains = this.internalYearsList.length % 3;
+      if (remains === 2)
+        return {
+          "cell-col-2": true,
+        };
+      if (remains === 1)
+        return {
+          "cell-col-3": true,
+        };
+      return {};
+    },
+    internalYearsList() {
+      let diff = this.endYear - this.startYear,
+        start = this.startYear;
+      return [...Array(diff + 1)].map(() => start++);
+    },
+  },
+  methods: {
+    activeCellClass(year) {
+      return {
+        "active-cell": parseInt(this.internalValue.format("YYYY"), 10) === year,
+      };
+    },
+    selectYear(year) {
+      this.internalValue = this.internalValue.clone().year(year);
+    },
+  },
+  mounted() {
+    this.previousDate = this.internalValue.clone();
   },
-  computed: {},
-  methods: {},
 };
 </script>
 
-<style scoped lang="sass"></style>
+<style scoped lang="sass">
+.header
+  border-bottom: 1px solid var(--border-light-grey-color)
+.body
+  height: 298px
+  display: grid
+  grid-template-columns: repeat(3, 1fr)
+  row-gap: 4px
+  column-gap: 4px
+  overflow-y: auto
+  &::-webkit-scrollbar
+    width: 0
+.cell
+  background-color:  var(--bg-light-grey)
+  color: var(--font-dark-blue-color)
+  &:hover
+    background-color: var(--border-light-grey-color)
+.cell-col-2:first-child
+  grid-column: 2
+.cell-col-2:nth-child(2)
+  grid-column: 3
+.cell-col-3:first-child
+  grid-column: 3
+.active-cell
+  background-color: var(--btn-blue-color)
+  color: var(--default-white)
+  &:hover
+    background-color: var(--btn-blue-color)
+</style>