Merge pull request #5 from cargovova/dev

fixed year mode bugs

.github/workflows/actions.yml

@@ -14,7 +14,7 @@ jobs:
 
       - name: install, lint, test
         run: |
-          npm ci
+          npm i
           npm run lint
           npm run test:unit
 

CONTRIBUTING.md

@@ -8,11 +8,11 @@ Hi! I'm really excited that you are interested in contributing to vue-hm-calenda
 
 ## Pull Request Guidelines
 
-- The `master` branch is just a snapshot of the latest stable release. All development should be done in dedicated branches. **Do not submit PRs against the `master` branch.**
+1. Create branch for a feature.
+2. Create PR to `master` branch.
+- The master branch is protected! All commits must be made to a non-protected branch and submitted via a pull request before they can be merged into a branch that matches this rule.
 
-- Checkout a topic branch from the relevant branch, e.g. `dev`, and merge back against that branch.
-
-- Work in the `src` folder and **DO NOT** checkin `dist` in the commits.
+- Work in the `src` folder and **DO NOT** checkin `dist` and `dev` in the commits.
 
 ### Commonly used NPM scripts
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-hm-calendar",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "It is a Vue component to create a calendar heatmap",
   "main": "dist/vue-hm-calendar.ssr.js",
   "browser": "dist/vue-hm-calendar.esm.js",

src/components/Year.vue

@@ -1,8 +1,8 @@
 <template>
   <div style="display: inline-block; display: flex; flex-direction: row">
     <div v-if="!hideWeekNames">
-      <div :style="'height: ' + (cellSize || '1rem')"></div>
-      <div v-for="(name, i) in monthNames" :key="i">
+      <div v-if="!hideHeader" :style="'height: ' + (cellSize || '1rem')"></div>
+      <div v-for="(name, i) in dayOfWeekNames" :key="i">
         <div style="padding: 0.125rem">
           <div :style="'height: ' + (cellSize || '1rem')">{{ name }}</div>
         </div>
@@ -78,7 +78,7 @@ export default {
       }
       return firstDay
     },
-    monthNames() {
+    dayOfWeekNames() {
       const names = []
       let index = 0
       switch (this.firstWeekDay) {
@@ -123,14 +123,11 @@ export default {
           }
           if (i === 0 && j < this.firstDay) {
             dayOptions.date = null
+          } else if (date > this.lastYearDay.dayOfYear()) {
+            break
           } else if (date === selectedDayOfYear) {
             dayOptions.style = `${this.calcColor(eventsCount)} border: 1px solid black; border-radius: 4px;`
             date++
-          } else if (date === this.lastYearDay.dayOfYear()) {
-            dayOptions.style = this.calcColor(eventsCount)
-            date++
-          } else if (date > this.lastYearDay.dayOfYear()) {
-            break
           } else if (date > selectedDayOfYear) {
             dayOptions.style = this.calcColor(eventsCount, true)
             date++