Added new "click-bar" event.

Minor bug fix: if no mousemove event happened between a mousedown and a mouseup, bar would still be dragged

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-ganttastic",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "description": "A simple and customizable Gantt chart component for Vue.js",
   "repository": {
     "type": "git",
@@ -26,11 +26,11 @@
   "author": "Marko Zunic",
   "license": "MIT",
   "devDependencies": {
-    "bili": "^4.8.1",
-    "rollup-plugin-vue": "^5.1.6",
+    "bili": "^4.10.0",
+    "rollup-plugin-vue": "^5.1.9",
     "vue-template-compiler": "^2.6.11"
   },
   "dependencies": {
-    "moment": "^2.24.0"
+    "moment": "^2.26.0"
   }
 }

src/GGanttBar.vue

@@ -7,6 +7,7 @@
       @mouseenter.stop="onMouseenter($event)"
       @mouseleave.stop ="onMouseleave($event)"
       @mousedown.stop="onMousedown($event)"
+      @click.stop="onClick($event)"
       @dblclick="onDblclick($event)"
       @contextmenu="onContextmenu($event)"
     >
@@ -157,6 +158,14 @@ export default {
       this.onBarEvent(e, this)
     },
 
+    onClick(e){
+      this.onBarEvent(e, this)
+    },
+
+    onDblclick(e) {
+      this.onBarEvent(e, this)
+    },
+
     onMousedown(e){
       e.preventDefault()
       if(e.button === 2 || this.barConfig.immobile){
@@ -165,6 +174,11 @@ export default {
       this.setDragLimitsOfGanttBar(this)
       // initialize the dragging on next mousemove event:
       window.addEventListener("mousemove", this.onFirstMousemove, {once: true})
+      // if next mousemove happens after mouse up (if user just presses mouse button down, then up, without moving):
+      window.addEventListener("mouseup",
+        () => window.removeEventListener("mousemove", this.onFirstMousemove), 
+        {once: true}
+      )
       this.onBarEvent(e, this)
     },
 

src/Playground.vue

@@ -6,7 +6,7 @@
         :chart-end="chartEnd"
         :grid="grid"
         :hide-timeaxis="hideTimeaxis"
-        :push-on-overlap="false"
+        :push-on-overlap="true"
         snap-back-on-overlap
         :highlighted-hours="highlightedHours"
         :row-label-width="`${rowLabelWidth}%`"
@@ -14,9 +14,6 @@
         :theme="selectedTheme"
       >
         <template v-for="row in rowList">
-          <div style="width: 100%; padding: 5px; background: white;" :key="`div${row.label}`">
-            test
-          </div>
           <g-gantt-row 
             :key="row.label"
             :label="row.label"