chore: small changes

README.md

@@ -115,11 +115,9 @@ The following code showcases a simple usage example in a .vue SFC (Single File C
 </style>
 ```
 
-## Setup
+## Props
 
-### Parameters
-
-| Props(Parameter)         | Type            | Default   | Description                                                         |
+| Prop                     | Type            | Default   | Description                                                         |
 | ------------------------ | --------------- | --------- | ------------------------------------------------------------------- |
 | bar-start-key            | `String`        | `start`   | property name of the bar objects that represents the start datetime |
 | bar-end-key              | `String`        | `end`     | property name of the bar objects that represents the end datetime   |

lib/components/GGanttRow.vue

@@ -107,6 +107,24 @@ export default {
     }
   },
 
+  watch: {
+    'chartProps.chartStart'() {
+      this.barContainer = this.$refs.barContainer.getBoundingClientRect()
+    },
+
+    'chartProps.chartEnd'() {
+      this.barContainer = this.$refs.barContainer.getBoundingClientRect()
+    },
+
+    'chartProps.rowLabelWidth'() {
+      this.barContainer = this.$refs.barContainer.getBoundingClientRect()
+    },
+
+    'chartProps.gridSize'() {
+      this.barContainer = this.$refs.barContainer.getBoundingClientRect()
+    }
+  },
+
   mounted() {
     this.barContainer = this.$refs.barContainer.getBoundingClientRect()
     window.addEventListener('resize', this.onWindowResize)
@@ -183,16 +201,6 @@ export default {
         this.barContainer = this.$refs.barContainer.getBoundingClientRect()
       }
     }
-  },
-
-  watch: {
-    'chartProps.rowLabelWidth': function () {
-      this.barContainer = this.$refs.barContainer.getBoundingClientRect()
-    },
-
-    'chartProps.gridSize': function () {
-      this.barContainer = this.$refs.barContainer.getBoundingClientRect()
-    }
   }
 }
 </script>

lib/components/GGanttTimeaxis.vue

@@ -77,7 +77,7 @@ export default {
       childPointCount: null,
       timemarker: null,
       hourFontSize: '11px',
-      dayFormat: 'DD MMMM',
+      dayFormat: 'ddd DD MMMM',
       monthFormat: 'MMMM YYYY'
     }
   },

lib/scss/vue-ganttastic.scss

@@ -1,7 +1,5 @@
 .g-gantt-chart {
   position: relative;
-  /* display: flex; */
-  /* flex-direction: column; */
   overflow: auto;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -23,15 +21,11 @@
 .g-timeaxis-day,
 .g-timeaxis-day > div {
   display: flex;
-  /* overflow: hidden; */
 }
 
 .g-timeaxis {
   position: sticky;
   top: 0;
-  /* width: 100%; */
-  /* height: 8%; */
-  /* min-height: 75px; */
   background: white;
   z-index: 4;
   box-shadow: 0px 1px 3px 2px rgba(50, 50, 50, 0.5);
@@ -132,11 +126,11 @@
   width: 100%;
   height: 40px;
   transition: background-color 0.2s;
+  position: relative;
 }
 
 .g-gantt-row > .g-gantt-row-label {
   display: flex;
-  /* justify-content: center; */
   align-items: center;
   background: #e8e8e8;
   color: #424242;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenrok/vue-ganttastic",
-  "version": "0.10.14",
+  "version": "0.10.15",
   "description": "A simple and customizable Gantt chart component for Vue.js",
   "keywords": [
     "gantt",