feat: change date format and month format on parent component props with default values

README.md

@@ -123,20 +123,24 @@ The following code showcases a simple usage example in a .vue SFC (Single File C
 
 | Prop                     | Type            | Default          | Description                                                         |
 | ------------------------ | --------------- | ---------------- | ------------------------------------------------------------------- |
+| allow-add                | `Boolean`       | `true`           | allow to add new bar on double click                                |
 | bar-config-key           | `String`        | `ganttBarConfig` |                                                                     |
 | 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   |
 | chart-start (_required_) | `String`        | -                | format `YYYY-MM-DD HH:mm`                                           |
 | chart-end (_required_)   | `String`        | -                | format `YYYY-MM-DD HH:mm`                                           |
+| day-format               | `String`        | `ddd DD MMMM`    |                                                                     |
 | grid                     | `Boolean`       | `false`          | hide/show grid                                                      |
 | grid-size                | `Number`        | `30`             | horizontal cell width in pixels                                     |
+| default-bar-length       | `Number`        | `1`              |                                                                     |
 | height                   | `String`        | -                | the total height of the entire Vue-Ganttastic component             |
 | hide-timeaxis            | `Boolean`       | `false`          | hide timeaxis                                                       |
 | highlighted-days         | `Array<String>` | `[]`             | format of day `YYYY-MM-DD`                                          |
 | highlighted-hours        | `Array<Number>` | `[]`             |                                                                     |
 | is-magnetic              | `Boolean`       | -                | magnetic effect                                                     |
 | locale                   | `String`        | `en`             | localization                                                        |
-| may-add                  | `Boolean`       | `true`           | add new bar on double click                                         |
+| min-gap-between-bars     | `Number`        | `0`              |                                                                     |
+| month-format             | `String`        | `MMMM YYYY`      |                                                                     |
 | precision                | `String`        | `month`          | day, month                                                          |
 | push-on-overlap          | `Boolean`       | -                |                                                                     |
 | row-height               | `Number`        | `40`             |                                                                     |

lib/components/GGanttChart.vue

@@ -15,6 +15,8 @@
       :time-format="timeFormat"
       :time-count="timeCount"
       :grid-size="gridSize"
+      :day-format="dayFormat"
+      :month-format="monthFormat"
     />
 
     <div
@@ -76,7 +78,9 @@ export default {
     barConfigKey: { type: String, default: 'ganttBarConfig' },
     barStartKey: { type: String, default: 'start' }, // property name of the bar objects that represents the start datetime
     barEndKey: { type: String, default: 'end' }, // property name of the bar objects that represents the end datetime
-    mayAdd: { type: Boolean, default: true }
+    allowAdd: { type: Boolean, default: true },
+    dayFormat: { type: String, default: 'ddd DD MMMM' },
+    monthFormat: { type: String, default: 'MMMM YYYY' }
   },
 
   data() {

lib/components/GGanttRow.vue

@@ -173,7 +173,7 @@ export default {
     },
 
     onDoubleClick(e) {
-      if (!this.chartProps.mayAdd) return
+      if (!this.chartProps.allowAdd) return
       let barContainer = this.$refs.barContainer.getBoundingClientRect()
       let xPos = e.clientX - barContainer.left
       let timeDiffFromStart = Math.floor(

lib/components/GGanttTimeaxis.vue

@@ -68,16 +68,16 @@ export default {
     precision: { type: String },
     timeFormat: { type: String },
     timeCount: { type: Number },
-    gridSize: { type: Number }
+    gridSize: { type: Number },
+    dayFormat: { type: String },
+    monthFormat: { type: String }
   },
 
   data() {
     return {
       axisPoints: [],
       timemarker: null,
-      hourFontSize: '11px',
+      hourFontSize: '11px'
-      dayFormat: 'ddd DD MMMM',
-      monthFormat: 'MMMM YYYY'
     }
   },
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@tenrok/vue-ganttastic",
-  "version": "0.10.18",
+  "version": "0.10.19",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@tenrok/vue-ganttastic",
-      "version": "0.10.18",
+      "version": "0.10.19",
       "license": "MIT",
       "dependencies": {
         "vue": "^2.6.12"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenrok/vue-ganttastic",
-  "version": "0.10.18",
+  "version": "0.10.19",
   "description": "A simple and customizable Gantt chart component for Vue.js",
   "keywords": [
     "gantt",
@@ -32,7 +32,7 @@
     }
   ],
   "files": [
-    "dist"
+    "dist/vue-ganttastic.*"
   ],
   "main": "dist/vue-ganttastic.common.js",
   "repository": {

src/App.vue

@@ -53,7 +53,7 @@
       :theme="chart2.theme"
       :width="chart2.width"
       :height="chart2.height"
-      :may-add="chart2.mayAdd"
+      :allow-add="chart2.allowAdd"
     >
       <g-gantt-row
         v-for="row in chart2.rows"
@@ -254,7 +254,7 @@ export default {
       theme: 'vue', // 'default', 'vue', 'dark', 'material-blue', 'creamy', 'slumber', 'sky', 'crimson', 'grove', 'fuchsia', 'flare'
       width: '1100px',
       height: '250px',
-      mayAdd: false,
+      allowAdd: false,
       rows: [
         {
           label: 'Row #1',