chore: format

.eslintrc.js

@@ -1,17 +1,20 @@
+const isProduction = process.env.NODE_ENV === 'production'
+
 module.exports = {
   root: true,
   env: {
     node: true
   },
-  'extends': [
+  extends: [
     'plugin:vue/essential',
-    'eslint:recommended'
+    'eslint:recommended',
+    'plugin:prettier/recommended'
   ],
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: '@babel/eslint-parser'
   },
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-console': isProduction ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': isProduction ? 'warn' : 'off'
   }
 }

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/workflows/deploy.yml

@@ -0,0 +1,31 @@
+name: Deploy to GH Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@master
+        with:
+          persist-credentials: false
+
+      - name: Install 🔧
+        run: npm install
+
+      - name: Build 🏗️
+        run: npm run demo:build
+        env:
+          NODE_ENV: production
+
+      - name: Deploy to GH Pages 🚀
+        if: ${{ github.event_name != 'pull_request' }}
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: demo

.gitignore

@@ -1,27 +1,17 @@
-.DS_Store
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
 
-# local env files
+### VisualStudioCode Patch ###
-.env.local
+# Ignore all local history of files
-.env.*.local
+**/.history
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
 
 # npm
 node_modules
 
-# output directories
+# Output directories
 /demo
 /dist

.npmrc

@@ -0,0 +1,2 @@
+registry=https://registry.npmjs.org/
+@tenrok:registry=https://registry.npmjs.org/

.prettierrc.js

@@ -1,11 +1,12 @@
+// https://prettier.io/docs/en/options.html
+
 module.exports = {
   arrowParens: 'avoid',
   bracketSpacing: true,
-  printWidth: 80,
+  printWidth: 120,
   semi: false,
   singleQuote: true,
   tabWidth: 2,
   trailingComma: 'none',
-  useTabs: false,
+  useTabs: false
-  vueIndentScriptAndStyle: true
 }

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+	"recommendations": ["editorconfig.editorconfig", "esbenp.prettier-vscode"]
+}

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",
+  "editor.fontLigatures": true,
+  "editor.fontWeight": "400",
+  "editor.foldingStrategy": "indentation",
+  "editor.formatOnSave": true,
+  "editor.rulers": [120],
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

README.md

@@ -1,10 +1,15 @@
 # Vue-Ganttastic
 
-![screenshot](https://user-images.githubusercontent.com/4740535/143231164-88cd538f-f4ff-4fc6-8cb0-a25f4bab465c.png)
+[![Version](https://img.shields.io/npm/v/@tenrok/vue-ganttastic.svg)](https://www.npmjs.com/package/@tenrok/vue-ganttastic)
+[![License](https://img.shields.io/npm/l/@tenrok/vue-ganttastic.svg)](https://github.com/tenrok/vue-ganttastic/blob/main/LICENSE)
+[![Vue.js](https://img.shields.io/badge/vue-2.7.14-brightgreen.svg?logo=vue.js)](https://github.com/vuejs/vue)
+[![GitHub last commit](https://img.shields.io/github/last-commit/tenrok/vue-ganttastic.svg)](https://github.com/tenrok/vue-ganttastic)
+[![Downloads](https://img.shields.io/npm/dm/@tenrok/vue-ganttastic.svg)](https://npmcharts.com/compare/@tenrok/vue-ganttastic?minimal=true)
+[![Demo](https://img.shields.io/badge/demo-demo-blue.svg)](https://tenrok.github.io/vue-ganttastic/)
 
 A simple and easy-to-use Gantt chart component for Vue.js
 
-[Demo](http://vue-ganttastic.vercel.app/)
+![screenshot](https://user-images.githubusercontent.com/4740535/143231164-88cd538f-f4ff-4fc6-8cb0-a25f4bab465c.png)
 
 ## Installation
 
@@ -31,6 +36,7 @@ For more detailed information, such as how to style the bars or additional confi
 
 The following code showcases a simple usage example in a .vue SFC (Single File Component)
 
+<!-- prettier-ignore -->
 ```html
 <template>
   ...
@@ -58,54 +64,54 @@ The following code showcases a simple usage example in a .vue SFC (Single File C
 </template>
 
 <script>
-  import { GGanttChart, GGanttRow } from '@tenrok/vue-ganttastic'
+import { GGanttChart, GGanttRow } from '@tenrok/vue-ganttastic'
 
-  export default {
+export default {
 
-    ...
+  ...
 
-    components: {
+  components: {
-      GGanttChart,
+    GGanttChart,
-      GGanttRow
+    GGanttRow
-    },
+  },
 
-    data() {
+  data() {
-      return {
+    return {
-        myChartStart: "2020-03-01 00:00",
+      myChartStart: "2020-03-01 00:00",
-        myChartEnd: "2020-03-03 00:00",
+      myChartEnd: "2020-03-03 00:00",
-        rows: [
+      rows: [
-          {
+        {
-            label: "My row #1",
+          label: "My row #1",
-            labelStyle: {
+          labelStyle: {
-              justifyContent: "end"
+            justifyContent: "end"
-            },
-            bars: [
-              {
-                myStart: "2020-03-01 12:10",
-                myEnd: "2020-03-01 16:35"
-              }
-            ]
           },
-          {
+          bars: [
-            label: "My row #2",
+            {
-            bars: [
+              myStart: "2020-03-01 12:10",
-              {
+              myEnd: "2020-03-01 16:35"
-                myStart: "2020-03-02 01:00",
+            }
-                myEnd: "2020-03-02 12:00"
+          ]
-              },
+        },
-              {
+        {
-                myStart: "2020-03-02 13:00",
+          label: "My row #2",
-                myEnd: "2020-03-02 22:00"
+          bars: [
-              }
+            {
-            ]
+              myStart: "2020-03-02 01:00",
-          }
+              myEnd: "2020-03-02 12:00"
-        ]
+            },
-      }
+            {
+              myStart: "2020-03-02 13:00",
+              myEnd: "2020-03-02 22:00"
+            }
+          ]
+        }
+      ]
     }
-
-    ...
-
   }
+
+  ...
+
+}
 </script>
 
 <style lang="scss">

babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
+  presets: ['@vue/cli-plugin-babel/preset']
-    '@vue/cli-plugin-babel/preset'
-  ]
 }

lib/components/GGanttBar.vue

@@ -35,8 +35,7 @@
         <div
           class="color-indicator"
           :style="{
-            background:
+            background: this.barStyle.background || this.barStyle.backgroundColor
-              this.barStyle.background || this.barStyle.backgroundColor
           }"
         />
         <div>
@@ -59,10 +58,7 @@ String.prototype.formatUnicorn =
     if (arguments.length) {
       const notSeenInNature = '#$%#$%' // or whatever
       const t = typeof arguments[0]
-      let args =
+      let args = 'string' === t || 'number' === t ? Array.prototype.slice.call(arguments) : arguments[0]
-        'string' === t || 'number' === t
-          ? Array.prototype.slice.call(arguments)
-          : arguments[0]
       for (let key in args) {
         let rv = String(args[key]).replace('{', notSeenInNature)
         str = str.replace(new RegExp('\\{' + key + '\\}', 'gi'), rv)
@@ -123,9 +119,7 @@ export default {
     },
 
     timeChildFormat() {
-      return this.chartProps.precision === 'month'
+      return this.chartProps.precision === 'month' ? 'DD.MM.YYYY' : 'DD.MM.YYYY HH:mm'
-        ? 'DD.MM.YYYY'
-        : 'DD.MM.YYYY HH:mm'
     },
 
     barConfigKey() {
@@ -184,12 +178,8 @@ export default {
     },
 
     barDurationText() {
-      const duration = moment.duration(
+      const duration = moment.duration(this.barEndMoment.diff(this.barStartMoment))
-        this.barEndMoment.diff(this.barStartMoment)
+      return `${Math.floor(duration.as('d'))} ${moment.utc(duration.as('ms')).format('HH:mm')}`
-      )
-      return `${Math.floor(duration.as('d'))} ${moment
-        .utc(duration.as('ms'))
-        .format('HH:mm')}`
     },
 
     barConfig() {
@@ -198,11 +188,8 @@ export default {
           ...this.localBar[this.barConfigKey],
           background: this.localBar[this.barConfigKey].isShadow
             ? 'grey'
-            : this.localBar[this.barConfigKey].background ||
+            : this.localBar[this.barConfigKey].background || this.localBar[this.barConfigKey].backgroundColor,
-              this.localBar[this.barConfigKey].backgroundColor,
+          opacity: this.localBar[this.barConfigKey].isShadow ? '0.3' : this.localBar[this.barConfigKey].opacity
-          opacity: this.localBar[this.barConfigKey].isShadow
-            ? '0.3'
-            : this.localBar[this.barConfigKey].opacity
         }
       }
       return {}
@@ -268,23 +255,17 @@ export default {
     },
 
     onContextmenu(e) {
-      const time = this.mapPositionToTime(
+      const time = this.mapPositionToTime(e.clientX - this.barContainer.left).format(this.timeFormat)
-        e.clientX - this.barContainer.left
-      ).format(this.timeFormat)
       this.onBarEvent({ event: e, type: e.type, time }, this)
     },
 
     onClick(e) {
-      const time = this.mapPositionToTime(
+      const time = this.mapPositionToTime(e.clientX - this.barContainer.left).format(this.timeFormat)
-        e.clientX - this.barContainer.left
-      ).format(this.timeFormat)
       this.onBarEvent({ event: e, type: e.type, time }, this)
     },
 
     onDblclick(e) {
-      const time = this.mapPositionToTime(
+      const time = this.mapPositionToTime(e.clientX - this.barContainer.left).format(this.timeFormat)
-        e.clientX - this.barContainer.left
-      ).format(this.timeFormat)
       this.onBarEvent({ event: e, type: e.type, time }, this)
     },
 
@@ -301,15 +282,11 @@ export default {
           once: true
         })
         // if next mousemove happens after mouse up (if user just presses mouse button down, then up, without moving):
-        window.addEventListener(
+        window.addEventListener('mouseup', () => window.removeEventListener('mousemove', this.onFirstMousemove), {
-          'mouseup',
+          once: true
-          () => window.removeEventListener('mousemove', this.onFirstMousemove),
+        })
-          { once: true }
-        )
       }
-      const time = this.mapPositionToTime(
+      const time = this.mapPositionToTime(e.clientX - this.barContainer.left).format(this.timeFormat)
-        e.clientX - this.barContainer.left
-      ).format(this.timeFormat)
       this.onBarEvent({ event: e, type: e.type, time }, this)
     },
 
@@ -358,11 +335,7 @@ export default {
       const chart = e.target.closest('.g-gantt-chart')
       if (!chart) return
       let barWidth = this.$refs['g-bar'].getBoundingClientRect().width
-      let newXStart =
+      let newXStart = chart.scrollLeft + e.clientX - this.barContainer.left - this.cursorOffsetX
-        chart.scrollLeft +
-        e.clientX -
-        this.barContainer.left -
-        this.cursorOffsetX
       let newXEnd = newXStart + barWidth
       if (this.isPosOutOfDragRange(newXStart, newXEnd)) {
         return
@@ -378,10 +351,7 @@ export default {
       if (!chart) return
       let newXStart = chart.scrollLeft + e.clientX - this.barContainer.left
       let newStartMoment = this.mapPositionToTime(newXStart)
-      if (
+      if (this.barEndMoment.diff(newStartMoment, this.timeUnit) < 1 || this.isPosOutOfDragRange(newXStart, null)) {
-        this.barEndMoment.diff(newStartMoment, this.timeUnit) < 1 ||
-        this.isPosOutOfDragRange(newXStart, null)
-      ) {
         return
       }
       this.barStartMoment = newStartMoment
@@ -393,10 +363,7 @@ export default {
       if (!chart) return
       let newXEnd = chart.scrollLeft + e.clientX - this.barContainer.left
       let newEndMoment = this.mapPositionToTime(newXEnd)
-      if (
+      if (newEndMoment.isSameOrBefore(this.barStartMoment, this.timeUnit) || this.isPosOutOfDragRange(null, newXEnd)) {
-        newEndMoment.isSameOrBefore(this.barStartMoment, this.timeUnit) ||
-        this.isPosOutOfDragRange(null, newXEnd)
-      ) {
         return
       }
       this.barEndMoment = newEndMoment
@@ -410,18 +377,10 @@ export default {
       if (newXEnd > this.barContainer.width) {
         return true
       }
-      if (
+      if (newXStart && this.dragLimitLeft !== null && newXStart < this.dragLimitLeft + this.minGapBetweenBars) {
-        newXStart &&
-        this.dragLimitLeft !== null &&
-        newXStart < this.dragLimitLeft + this.minGapBetweenBars
-      ) {
         return true
       }
-      if (
+      if (newXEnd && this.dragLimitRight !== null && newXEnd > this.dragLimitRight - this.minGapBetweenBars) {
-        newXEnd &&
-        this.dragLimitRight !== null &&
-        newXEnd > this.dragLimitRight - this.minGapBetweenBars
-      ) {
         return true
       }
 
@@ -434,25 +393,14 @@ export default {
       //   return true
       // }
 
-      if (
+      if (!this.chartProps.pushOnOverlap || this.barConfig.pushOnOverlap === false) {
-        !this.chartProps.pushOnOverlap ||
-        this.barConfig.pushOnOverlap === false
-      ) {
         return false
       }
 
-      const isSqueezeToLeft =
+      const isSqueezeToLeft = newXStart && moment(this.localBar[this.barStartKey]).isBefore(this.barStartBeforeDrag)
-        newXStart &&
+      const isSqueezeToRight = newXEnd && moment(this.localBar[this.barEndKey]).isAfter(this.barEndBeforeDrag)
-        moment(this.localBar[this.barStartKey]).isBefore(
-          this.barStartBeforeDrag
-        )
-      const isSqueezeToRight =
-        newXEnd &&
-        moment(this.localBar[this.barEndKey]).isAfter(this.barEndBeforeDrag)
 
-      const currentIndex = this.allBarsInRow.findIndex(
+      const currentIndex = this.allBarsInRow.findIndex(bar => bar == this.localBar)
-        bar => bar == this.localBar
-      )
 
       let otherBars = []
       if (isSqueezeToRight) {
@@ -514,10 +462,7 @@ export default {
     },
 
     manageOverlapping() {
-      if (
+      if (!this.chartProps.pushOnOverlap || this.barConfig.pushOnOverlap === false) {
-        !this.chartProps.pushOnOverlap ||
-        this.barConfig.pushOnOverlap === false
-      ) {
         return
       }
       let currentBar = this.localBar
@@ -530,12 +475,7 @@ export default {
         let overlapEndMoment = moment(overlapBar[this.barEndKey])
         switch (overlapType) {
           case 'left':
-            minuteDiff =
+            minuteDiff = overlapEndMoment.diff(currentStartMoment, this.timeChildKey, true) + this.minGapBetweenBars
-              overlapEndMoment.diff(
-                currentStartMoment,
-                this.timeChildKey,
-                true
-              ) + this.minGapBetweenBars
             overlapBar[this.barEndKey] = currentStartMoment
               .subtract(this.minGapBetweenBars, this.timeChildKey, true)
               .format(this.timeFormat)
@@ -544,12 +484,7 @@ export default {
               .format(this.timeFormat)
             break
           case 'right':
-            minuteDiff =
+            minuteDiff = currentEndMoment.diff(overlapStartMoment, this.timeChildKey, true) + this.minGapBetweenBars
-              currentEndMoment.diff(
-                overlapStartMoment,
-                this.timeChildKey,
-                true
-              ) + this.minGapBetweenBars
             overlapBar[this.barStartKey] = currentEndMoment
               .add(this.minGapBetweenBars, this.timeChildKey, true)
               .format(this.timeFormat)
@@ -559,9 +494,7 @@ export default {
             break
           default:
             // eslint-disable-next-line
-            console.warn(
+            console.warn('One bar is inside of the other one! This should never occur while push-on-overlap is active!')
-              'One bar is inside of the other one! This should never occur while push-on-overlap is active!'
-            )
             return
         }
         this.moveBarsFromBundleOfPushedBar(overlapBar, minuteDiff, overlapType)
@@ -575,36 +508,20 @@ export default {
       let barEndMoment = moment(bar[this.barEndKey])
       let overlapLeft, overlapRight, overlapInBetween
       let overlapBar = this.allBarsInRow.find(otherBar => {
-        if (
+        if (otherBar === bar || (otherBar[this.barConfigKey] && otherBar[this.barConfigKey].pushOnOverlap === false)) {
-          otherBar === bar ||
-          (otherBar[this.barConfigKey] &&
-            otherBar[this.barConfigKey].pushOnOverlap === false)
-        ) {
           return false
         }
         let otherBarStartMoment = moment(otherBar[this.barStartKey])
         let otherBarEndMoment = moment(otherBar[this.barEndKey])
 
-        overlapLeft = barStartMoment.isBetween(
+        overlapLeft = barStartMoment.isBetween(otherBarStartMoment, otherBarEndMoment)
-          otherBarStartMoment,
+        overlapRight = barEndMoment.isBetween(otherBarStartMoment, otherBarEndMoment)
-          otherBarEndMoment
-        )
-        overlapRight = barEndMoment.isBetween(
-          otherBarStartMoment,
-          otherBarEndMoment
-        )
         overlapInBetween =
           otherBarStartMoment.isBetween(barStartMoment, barEndMoment) ||
           otherBarEndMoment.isBetween(barStartMoment, barEndMoment)
         return overlapLeft || overlapRight || overlapInBetween
       })
-      let overlapType = overlapLeft
+      let overlapType = overlapLeft ? 'left' : overlapRight ? 'right' : overlapInBetween ? 'between' : null
-        ? 'left'
-        : overlapRight
-        ? 'right'
-        : overlapInBetween
-        ? 'between'
-        : null
       return { overlapBar, overlapType }
     },
 
@@ -613,28 +530,12 @@ export default {
     moveBarByChildPointsAndPush(childPointCount, direction) {
       switch (direction) {
         case 'left':
-          this.barStartMoment = moment(this.barStartMoment).subtract(
+          this.barStartMoment = moment(this.barStartMoment).subtract(childPointCount, this.timeChildKey, true)
-            childPointCount,
+          this.barEndMoment = moment(this.barEndMoment).subtract(childPointCount, this.timeChildKey, true)
-            this.timeChildKey,
-            true
-          )
-          this.barEndMoment = moment(this.barEndMoment).subtract(
-            childPointCount,
-            this.timeChildKey,
-            true
-          )
           break
         case 'right':
-          this.barStartMoment = moment(this.barStartMoment).add(
+          this.barStartMoment = moment(this.barStartMoment).add(childPointCount, this.timeChildKey, true)
-            childPointCount,
+          this.barEndMoment = moment(this.barEndMoment).add(childPointCount, this.timeChildKey, true)
-            this.timeChildKey,
-            true
-          )
-          this.barEndMoment = moment(this.barEndMoment).add(
-            childPointCount,
-            this.timeChildKey,
-            true
-          )
           break
         default:
           // eslint-disable-next-line
@@ -648,11 +549,7 @@ export default {
     /* ------- MAPPING POSITION TO TIME (AND VICE VERSA) ------- */
     /* --------------------------------------------------------- */
     mapTimeToPosition(time) {
-      let timeDiffFromStart = moment(time).diff(
+      let timeDiffFromStart = moment(time).diff(this.chartStartMoment, this.timeUnit, true)
-        this.chartStartMoment,
-        this.timeUnit,
-        true
-      )
       let pos = (timeDiffFromStart / this.timeCount) * this.barContainer.width
       return pos
     },

lib/components/GGanttChart.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
+  <div class="g-gantt-chart-container" :data-theme="theme" :style="{ width, height }">
-    class="g-gantt-chart-container"
-    :data-theme="theme"
-    :style="{ width, height }"
-  >
     <div class="g-gantt-chart">
       <g-gantt-timeaxis
         v-if="!hideTimeaxis"
@@ -20,10 +16,7 @@
         :month-format="monthFormat"
       />
 
-      <div
+      <div class="g-gantt-rows-container" :style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }">
-        class="g-gantt-rows-container"
-        :style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }"
-      >
         <g-gantt-grid
           v-if="grid"
           :chart-start="chartStart"
@@ -107,22 +100,16 @@ export default {
     timeCount() {
       let momentChartStart = moment(this.chartStart)
       let momentChartEnd = moment(this.chartEnd)
-      return Math.floor(
+      return Math.floor(momentChartEnd.diff(momentChartStart, this.timeUnit, true))
-        momentChartEnd.diff(momentChartStart, this.timeUnit, true)
-      )
     }
   },
 
   methods: {
     getGanttBarChildrenList() {
       let ganttBarChildren = []
-      let ganttRowChildrenList = this.$children.filter(
+      let ganttRowChildrenList = this.$children.filter(childComp => childComp.$options.name === GGanttRow.name)
-        childComp => childComp.$options.name === GGanttRow.name
-      )
       ganttRowChildrenList.forEach(row => {
-        let ganttBarChildrenOfRow = row.$children.filter(
+        let ganttBarChildrenOfRow = row.$children.filter(childComp => childComp.$options.name === GGanttBar.name)
-          childComp => childComp.$options.name === GGanttBar.name
-        )
         ganttBarChildren.push(...ganttBarChildrenOfRow)
       })
       return ganttBarChildren
@@ -132,23 +119,15 @@ export default {
       if (bundleId === undefined || bundleId === null) {
         return []
       }
-      return this.getGanttBarChildrenList().filter(
+      return this.getGanttBarChildrenList().filter(ganttBarChild => ganttBarChild.barConfig.bundle === bundleId)
-        ganttBarChild => ganttBarChild.barConfig.bundle === bundleId
-      )
     },
 
     initDragOfBarsFromBundle(gGanttBar, e) {
       gGanttBar.initDrag(e)
       this.movedBarsInDrag.add(gGanttBar.bar)
-      if (
+      if (gGanttBar.barConfig.bundle !== null && gGanttBar.barConfig.bundle !== undefined) {
-        gGanttBar.barConfig.bundle !== null &&
-        gGanttBar.barConfig.bundle !== undefined
-      ) {
         this.getGanttBarChildrenList().forEach(ganttBarChild => {
-          if (
+          if (ganttBarChild.barConfig.bundle === gGanttBar.barConfig.bundle && ganttBarChild !== gGanttBar) {
-            ganttBarChild.barConfig.bundle === gGanttBar.barConfig.bundle &&
-            ganttBarChild !== gGanttBar
-          ) {
             ganttBarChild.initDrag(e)
             this.movedBarsInDrag.add(ganttBarChild.bar)
           }
@@ -158,17 +137,12 @@ export default {
 
     moveBarsFromBundleOfPushedBar(pushedBar, minuteDiff, overlapType) {
       this.movedBarsInDrag.add(pushedBar)
-      let bundleId = pushedBar[this.barConfigKey]
+      let bundleId = pushedBar[this.barConfigKey] ? pushedBar[this.barConfigKey].bundle : null
-        ? pushedBar[this.barConfigKey].bundle
-        : null
       if (bundleId === undefined || bundleId === null) {
         return
       }
       this.getGanttBarChildrenList().forEach(ganttBarChild => {
-        if (
+        if (ganttBarChild.barConfig.bundle === bundleId && ganttBarChild.bar !== pushedBar) {
-          ganttBarChild.barConfig.bundle === bundleId &&
-          ganttBarChild.bar !== pushedBar
-        ) {
           ganttBarChild.moveBarByChildPointsAndPush(minuteDiff, overlapType)
           this.movedBarsInDrag.add(ganttBarChild.bar)
         }
@@ -176,10 +150,7 @@ export default {
     },
 
     shouldSnapBackBar(ganttBar) {
-      if (
+      if (this.snapBackOnOverlap && ganttBar.barConfig.pushOnOverlap !== false) {
-        this.snapBackOnOverlap &&
-        ganttBar.barConfig.pushOnOverlap !== false
-      ) {
         let { overlapBar } = ganttBar.getOverlapBarAndType(ganttBar.bar)
         return !!overlapBar
       }
@@ -188,10 +159,7 @@ export default {
 
     snapBackBundleIfNeeded(ganttBar) {
       let barsFromBundle = this.getBarsFromBundle(ganttBar.barConfig.bundle)
-      if (
+      if (this.shouldSnapBackBar(ganttBar) || barsFromBundle.some(gBar => this.shouldSnapBackBar(gBar))) {
-        this.shouldSnapBackBar(ganttBar) ||
-        barsFromBundle.some(gBar => this.shouldSnapBackBar(gBar))
-      ) {
         ganttBar.snapBack()
         barsFromBundle.forEach(gBar => gBar.snapBack())
         return true
@@ -214,77 +182,45 @@ export default {
           if (this.precision === 'month') {
             if (left && bar == ganttBar.bar) {
               if (moment(bar[this.barStartKey]).hours() < 12) {
-                bar[this.barStartKey] = moment(bar[this.barStartKey])
+                bar[this.barStartKey] = moment(bar[this.barStartKey]).hours(0).format()
-                  .hours(0)
-                  .format()
               } else {
-                bar[this.barStartKey] = moment(bar[this.barStartKey])
+                bar[this.barStartKey] = moment(bar[this.barStartKey]).hours(24).format()
-                  .hours(24)
-                  .format()
               }
             } else if (right && bar == ganttBar.bar) {
               if (moment(bar[this.barEndKey]).hours() < 12) {
-                bar[this.barEndKey] = moment(bar[this.barEndKey])
+                bar[this.barEndKey] = moment(bar[this.barEndKey]).hours(0).format()
-                  .hours(0)
-                  .format()
               } else {
-                bar[this.barEndKey] = moment(bar[this.barEndKey])
+                bar[this.barEndKey] = moment(bar[this.barEndKey]).hours(24).format()
-                  .hours(24)
-                  .format()
               }
             } else {
               if (moment(bar[this.barStartKey]).hours() < 12) {
-                bar[this.barStartKey] = moment(bar[this.barStartKey])
+                bar[this.barStartKey] = moment(bar[this.barStartKey]).hours(0).format()
-                  .hours(0)
+                bar[this.barEndKey] = moment(bar[this.barEndKey]).hours(0).format()
-                  .format()
-                bar[this.barEndKey] = moment(bar[this.barEndKey])
-                  .hours(0)
-                  .format()
               } else {
-                bar[this.barStartKey] = moment(bar[this.barStartKey])
+                bar[this.barStartKey] = moment(bar[this.barStartKey]).hours(24).format()
-                  .hours(24)
+                bar[this.barEndKey] = moment(bar[this.barEndKey]).hours(24).format()
-                  .format()
-                bar[this.barEndKey] = moment(bar[this.barEndKey])
-                  .hours(24)
-                  .format()
               }
             }
           } else {
             if (left && bar == ganttBar.bar) {
               if (moment(bar[this.barStartKey]).minutes() < 30) {
-                bar[this.barStartKey] = moment(bar[this.barStartKey])
+                bar[this.barStartKey] = moment(bar[this.barStartKey]).minutes(0).format()
-                  .minutes(0)
-                  .format()
               } else {
-                bar[this.barStartKey] = moment(bar[this.barStartKey])
+                bar[this.barStartKey] = moment(bar[this.barStartKey]).minutes(60).format()
-                  .minutes(60)
-                  .format()
               }
             } else if (right && bar == ganttBar.bar) {
               if (moment(bar[this.barEndKey]).minutes() < 30) {
-                bar[this.barEndKey] = moment(bar[this.barEndKey])
+                bar[this.barEndKey] = moment(bar[this.barEndKey]).minutes(0).format()
-                  .minutes(0)
-                  .format()
               } else {
-                bar[this.barEndKey] = moment(bar[this.barEndKey])
+                bar[this.barEndKey] = moment(bar[this.barEndKey]).minutes(60).format()
-                  .minutes(60)
-                  .format()
               }
             } else {
               if (moment(bar[this.barStartKey]).minutes() < 30) {
-                bar[this.barStartKey] = moment(bar[this.barStartKey])
+                bar[this.barStartKey] = moment(bar[this.barStartKey]).minutes(0).format()
-                  .minutes(0)
+                bar[this.barEndKey] = moment(bar[this.barEndKey]).minutes(0).format()
-                  .format()
-                bar[this.barEndKey] = moment(bar[this.barEndKey])
-                  .minutes(0)
-                  .format()
               } else {
-                bar[this.barStartKey] = moment(bar[this.barStartKey])
+                bar[this.barStartKey] = moment(bar[this.barStartKey]).minutes(60).format()
-                  .minutes(60)
+                bar[this.barEndKey] = moment(bar[this.barEndKey]).minutes(60).format()
-                  .format()
-                bar[this.barEndKey] = moment(bar[this.barEndKey])
-                  .minutes(60)
-                  .format()
               }
             }
           }
@@ -306,29 +242,20 @@ export default {
         return
       }
       for (let side of ['left', 'right']) {
-        let [totalGapDistance, bundleBarsOnPath] =
+        let [totalGapDistance, bundleBarsOnPath] = this.countGapDistanceToNextImmobileBar(bar, null, side, false)
-          this.countGapDistanceToNextImmobileBar(bar, null, side, false)
         for (let i = 0; i < bundleBarsOnPath.length; i++) {
           let barFromBundle = bundleBarsOnPath[i].bar
           let gapDist = bundleBarsOnPath[i].gapDistance
-          let otherBarsFromBundle = this.getBarsFromBundle(
+          let otherBarsFromBundle = this.getBarsFromBundle(barFromBundle.barConfig.bundle).filter(
-            barFromBundle.barConfig.bundle
+            otherBar => otherBar !== barFromBundle
-          ).filter(otherBar => otherBar !== barFromBundle)
+          )
           otherBarsFromBundle.forEach(otherBar => {
-            let [newGapDistance, newBundleBars] =
+            let [newGapDistance, newBundleBars] = this.countGapDistanceToNextImmobileBar(otherBar, gapDist, side)
-              this.countGapDistanceToNextImmobileBar(otherBar, gapDist, side)
+            if (newGapDistance !== null && (newGapDistance < totalGapDistance || !totalGapDistance)) {
-            if (
-              newGapDistance !== null &&
-              (newGapDistance < totalGapDistance || !totalGapDistance)
-            ) {
               totalGapDistance = newGapDistance
             }
             newBundleBars.forEach(newBundleBar => {
-              if (
+              if (!bundleBarsOnPath.find(barAndGap => barAndGap.bar === newBundleBar.bar)) {
-                !bundleBarsOnPath.find(
-                  barAndGap => barAndGap.bar === newBundleBar.bar
-                )
-              ) {
                 bundleBarsOnPath.push(newBundleBar)
               }
             })
@@ -337,16 +264,11 @@ export default {
         if (totalGapDistance != null && side === 'left') {
           bar.dragLimitLeft = bar.$refs['g-bar'].offsetLeft - totalGapDistance
         } else if (totalGapDistance != null && side === 'right') {
-          bar.dragLimitRight =
+          bar.dragLimitRight = bar.$refs['g-bar'].offsetLeft + bar.$refs['g-bar'].offsetWidth + totalGapDistance
-            bar.$refs['g-bar'].offsetLeft +
-            bar.$refs['g-bar'].offsetWidth +
-            totalGapDistance
         }
       }
       // all bars from the bundle of the clicked bar need to have the same drag limit:
-      let barsFromBundleOfClickedBar = this.getBarsFromBundle(
+      let barsFromBundleOfClickedBar = this.getBarsFromBundle(bar.barConfig.bundle)
-        bar.barConfig.bundle
-      )
       barsFromBundleOfClickedBar.forEach(barFromBundle => {
         barFromBundle.dragLimitLeft = bar.dragLimitLeft
         barFromBundle.dragLimitRight = bar.dragLimitRight
@@ -356,29 +278,16 @@ export default {
     // returns the gap distance to the next immobile bar
     // in the row where the given bar (parameter) is (added to gapDistanceSoFar)
     // and a list of all bars on that path that belong to a bundle
-    countGapDistanceToNextImmobileBar(
+    countGapDistanceToNextImmobileBar(bar, gapDistanceSoFar, side = 'left', ignoreShadows = true) {
-      bar,
+      let bundleBarsAndGapDist = bar.barConfig.bundle ? [{ bar, gapDistance: gapDistanceSoFar }] : []
-      gapDistanceSoFar,
-      side = 'left',
-      ignoreShadows = true
-    ) {
-      let bundleBarsAndGapDist = bar.barConfig.bundle
-        ? [{ bar, gapDistance: gapDistanceSoFar }]
-        : []
       let currentBar = bar
       let nextBar = this.getNextGanttBar(currentBar, side)
       // left side:
       if (side === 'left') {
         while (nextBar) {
-          let nextBarOffsetRight =
+          let nextBarOffsetRight = nextBar.$refs['g-bar'].offsetLeft + nextBar.$refs['g-bar'].offsetWidth
-            nextBar.$refs['g-bar'].offsetLeft +
+          gapDistanceSoFar += currentBar.$refs['g-bar'].offsetLeft - nextBarOffsetRight
-            nextBar.$refs['g-bar'].offsetWidth
+          if (nextBar.barConfig.immobile || (nextBar.barConfig.isShadow && !ignoreShadows)) {
-          gapDistanceSoFar +=
-            currentBar.$refs['g-bar'].offsetLeft - nextBarOffsetRight
-          if (
-            nextBar.barConfig.immobile ||
-            (nextBar.barConfig.isShadow && !ignoreShadows)
-          ) {
             return [gapDistanceSoFar, bundleBarsAndGapDist]
           } else if (nextBar.barConfig.bundle) {
             bundleBarsAndGapDist.push({
@@ -392,15 +301,9 @@ export default {
       }
       if (side === 'right') {
         while (nextBar) {
-          let currentBarOffsetRight =
+          let currentBarOffsetRight = currentBar.$refs['g-bar'].offsetLeft + currentBar.$refs['g-bar'].offsetWidth
-            currentBar.$refs['g-bar'].offsetLeft +
+          gapDistanceSoFar += nextBar.$refs['g-bar'].offsetLeft - currentBarOffsetRight
-            currentBar.$refs['g-bar'].offsetWidth
+          if (nextBar.barConfig.immobile || (nextBar.barConfig.isShadow && !ignoreShadows)) {
-          gapDistanceSoFar +=
-            nextBar.$refs['g-bar'].offsetLeft - currentBarOffsetRight
-          if (
-            nextBar.barConfig.immobile ||
-            (nextBar.barConfig.isShadow && !ignoreShadows)
-          ) {
             return [gapDistanceSoFar, bundleBarsAndGapDist]
           } else if (nextBar.barConfig.bundle) {
             bundleBarsAndGapDist.push({
@@ -440,12 +343,8 @@ export default {
       }
       if (allBarsLeftOrRight.length > 0) {
         return allBarsLeftOrRight.reduce((bar1, bar2) => {
-          let bar1Dist = Math.abs(
+          let bar1Dist = Math.abs(bar1.$refs['g-bar'].offsetLeft - bar.$refs['g-bar'].offsetLeft)
-            bar1.$refs['g-bar'].offsetLeft - bar.$refs['g-bar'].offsetLeft
+          let bar2Dist = Math.abs(bar2.$refs['g-bar'].offsetLeft - bar.$refs['g-bar'].offsetLeft)
-          )
-          let bar2Dist = Math.abs(
-            bar2.$refs['g-bar'].offsetLeft - bar.$refs['g-bar'].offsetLeft
-          )
           return bar1Dist < bar2Dist ? bar1 : bar2
         }, allBarsLeftOrRight[0])
       } else {
@@ -464,15 +363,12 @@ export default {
     return {
       getTimeCount: () => this.timeCount,
       getChartProps: () => this.$props,
-      initDragOfBarsFromBundle: (bundleId, e) =>
+      initDragOfBarsFromBundle: (bundleId, e) => this.initDragOfBarsFromBundle(bundleId, e),
-        this.initDragOfBarsFromBundle(bundleId, e),
       moveBarsFromBundleOfPushedBar: (bar, minuteDiff, overlapType) =>
         this.moveBarsFromBundleOfPushedBar(bar, minuteDiff, overlapType),
-      setDragLimitsOfGanttBar: ganttBar =>
+      setDragLimitsOfGanttBar: ganttBar => this.setDragLimitsOfGanttBar(ganttBar),
-        this.setDragLimitsOfGanttBar(ganttBar),
       onBarEvent: (e, ganttBar) => this.onBarEvent(e, ganttBar),
-      onDragendBar: (e, ganttBar, action) =>
+      onDragendBar: (e, ganttBar, action) => this.onDragendBar(e, ganttBar, action),
-        this.onDragendBar(e, ganttBar, action),
       getTimeUnit: () => this.timeUnit,
       getTimeFormat: () => this.timeFormat
     }

lib/components/GGanttGrid.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <div class="g-gantt-grid" :style="{ left: `${rowLabelWidth}px`, width: `${timeCount * gridSize}px` }">
-    class="g-gantt-grid"
-    :style="{ left: `${rowLabelWidth}px`, width: `${timeCount * gridSize}px` }"
-  >
     <div
       v-for="(childPoint, index) in allChildPoints"
       :key="index"
@@ -58,16 +55,10 @@ export default {
     isHighlighted(point) {
       switch (this.precision) {
         case 'day':
-          if (
+          if (this.highlightedDays.includes(moment(point, 'YYYY-MM-DD').format('YYYY-MM-DD'))) {
-            this.highlightedDays.includes(
-              moment(point, 'YYYY-MM-DD').format('YYYY-MM-DD')
-            )
-          ) {
             return true
           } else {
-            return this.highlightedHours.includes(
+            return this.highlightedHours.includes(moment(point, 'YYYY-MM-DD H').get('hour'))
-              moment(point, 'YYYY-MM-DD H').get('hour')
-            )
           }
         case 'month':
           return this.highlightedDays.includes(point)

lib/components/GGanttRow.vue

@@ -1,10 +1,5 @@
 <template>
-  <div
+  <div ref="g-row" class="g-gantt-row" :style="{ height: `${chartProps.rowHeight}px` }" v-on="$listeners">
-    ref="g-row"
-    class="g-gantt-row"
-    :style="{ height: `${chartProps.rowHeight}px` }"
-    v-on="$listeners"
-  >
     <div class="g-gantt-row__label" :style="rowLabelStyle">
       <span :title="label">
         <slot name="label">{{ label }}</slot>
@@ -151,10 +146,7 @@ export default {
       const timeDiffFromStart = (xPos / barContainer.width) * this.timeCount
       const time = moment(this.chartStart).add(timeDiffFromStart, this.timeUnit)
       const bar = this.localBars.find(bar =>
-        time.isBetween(
+        time.isBetween(bar[this.chartProps.barStartKey], bar[this.chartProps.barEndKey])
-          bar[this.chartProps.barStartKey],
-          bar[this.chartProps.barEndKey]
-        )
       )
       this.$emit('drop', { event: e, bar, time: time.format(this.timeFormat) })
     },
@@ -163,22 +155,16 @@ export default {
       if (!this.chartProps.allowAdd) return
       let barContainer = this.$refs.barContainer.getBoundingClientRect()
       let xPos = e.clientX - barContainer.left
-      let timeDiffFromStart = Math.floor(
+      let timeDiffFromStart = Math.floor((xPos / barContainer.width) * this.timeCount)
-        (xPos / barContainer.width) * this.timeCount
-      )
       let time = moment(this.chartStart).add(timeDiffFromStart, this.timeUnit)
       let bar = {}
       bar[this.chartProps.barStartKey] = time.format()
-      bar[this.chartProps.barEndKey] = time
+      bar[this.chartProps.barEndKey] = time.add(this.defaultBarLength, this.timeUnit).format()
-        .add(this.defaultBarLength, this.timeUnit)
-        .format()
 
       bar[this.barConfigKey] = { handles: true }
       this.localBars.push(bar)
       this.localBars.sort((first, second) =>
-        moment(first[this.chartProps.barStartKey]).diff(
+        moment(first[this.chartProps.barStartKey]).diff(second[this.chartProps.barStartKey])
-          second[this.chartProps.barStartKey]
-        )
       )
     },
 

lib/components/GGanttTimeaxis.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
+  <div ref="g-timeaxis" class="g-gantt-timeaxis" :style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }">
-    ref="g-timeaxis"
-    class="g-gantt-timeaxis"
-    :style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }"
-  >
     <div
       class="g-gantt-timeaxis__empty-space"
       :style="{
@@ -11,11 +7,7 @@
       }"
     />
     <div class="g-gantt-timeaxis__days">
-      <div
+      <div v-for="point in axisPoints" :key="point.text" class="g-gantt-timeaxis__day">
-        v-for="point in axisPoints"
-        :key="point.text"
-        class="g-gantt-timeaxis__day"
-      >
         <div v-html="pointFormatted(point) || '&nbsp;'"></div>
         <div class="g-gantt-timeaxis__hours">
           <div
@@ -24,9 +16,7 @@
             class="g-gantt-timeaxis__hour"
             :style="{ width: `${gridSize}px` }"
           >
-            <span :style="{ fontSize: hourFontSize }">{{
+            <span :style="{ fontSize: hourFontSize }">{{ childPoint.text }}</span>
-              childPoint.text
-            }}</span>
             <div class="g-gantt-timeaxis__hour-pin" />
           </div>
         </div>
@@ -93,9 +83,7 @@ export default {
 
   methods: {
     initAxis() {
-      this.precision === 'day'
+      this.precision === 'day' ? this.initAxisDaysAndHours() : this.initAxisMonthsAndDays()
-        ? this.initAxisDaysAndHours()
-        : this.initAxisMonthsAndDays()
     },
 
     initAxisMonthsAndDays() {
@@ -103,16 +91,10 @@ export default {
       let end = moment(this.chartEnd)
       this.axisPoints = []
       while (start.isBefore(end)) {
-        let dayCountOfMonth = start.isSame(end, 'month')
+        let dayCountOfMonth = start.isSame(end, 'month') ? end.date() - 1 : start.daysInMonth() - start.date() + 1
-          ? end.date() - 1
-          : start.daysInMonth() - start.date() + 1
         let widthPercentage = (dayCountOfMonth / this.timeCount) * 100
-        let endDay = start.isSame(end, 'month')
+        let endDay = start.isSame(end, 'month') ? end.date() - 1 : start.daysInMonth()
-          ? end.date() - 1
+        this.axisPoints.push(this.getAxisMonthObject(start, widthPercentage, endDay))
-          : start.daysInMonth()
-        this.axisPoints.push(
-          this.getAxisMonthObject(start, widthPercentage, endDay)
-        )
         start.add(1, 'month').date(1).hour(0)
       }
     },
@@ -122,14 +104,10 @@ export default {
       let end = moment(this.chartEnd)
       this.axisPoints = []
       while (start.isBefore(end)) {
-        let hourCountOfDay = start.isSame(end, 'day')
+        let hourCountOfDay = start.isSame(end, 'day') ? end.hour() : 24 - start.hour()
-          ? end.hour()
-          : 24 - start.hour()
         let widthPercentage = (hourCountOfDay / this.timeCount) * 100
         let endHour = start.isSame(end, 'day') ? end.hour() - 1 : 23 // -1 because the last hour is not included e.g if chartEnd=04:00 the last interval we display is between 03 and 04
-        this.axisPoints.push(
+        this.axisPoints.push(this.getAxisDayObject(start, widthPercentage, endHour))
-          this.getAxisDayObject(start, widthPercentage, endHour)
-        )
         start.add(1, 'day').hour(0)
       }
     },
@@ -175,25 +153,15 @@ export default {
     moveTimemarker(event) {
       const chart = this.timemarker.closest('.g-gantt-chart')
       if (!chart) return
-      let pos =
+      let pos = chart.scrollLeft + event.clientX - this.timemarkerOffset - this.horizontalAxisContainer.left
-        chart.scrollLeft +
+      if (pos > this.horizontalAxisContainer.width) pos = this.horizontalAxisContainer.width
-        event.clientX -
-        this.timemarkerOffset -
-        this.horizontalAxisContainer.left
-      if (pos > this.horizontalAxisContainer.width)
-        pos = this.horizontalAxisContainer.width
       this.timemarker.style.left = `${pos}px`
     },
 
     onWindowResize() {
       if (!this.$refs['g-timeaxis']) return
-      this.horizontalAxisContainer =
+      this.horizontalAxisContainer = this.$refs['g-timeaxis'].getBoundingClientRect()
-        this.$refs['g-timeaxis'].getBoundingClientRect()
+      this.hourFontSize = Math.min(9.5, 0.75 * (this.horizontalAxisContainer.width / this.timeCount)) + 'px'
-      this.hourFontSize =
-        Math.min(
-          9.5,
-          0.75 * (this.horizontalAxisContainer.width / this.timeCount)
-        ) + 'px'
     },
 
     pointFormatted(point) {

lib/scss/index.scss

@@ -1,4 +1,4 @@
-@use "sass:meta";
+@use 'sass:meta';
 
 // default
 @import './variables';

package.json

@@ -15,6 +15,10 @@
   "bugs": {
     "url": "https://github.com/tenrok/vue-ganttastic/issues"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tenrok/vue-ganttastic.git"
+  },
   "license": "MIT",
   "author": {
     "name": "Marko Zunic",
@@ -31,32 +35,31 @@
       "url": "https://github.com/solodyagin"
     }
   ],
+  "main": "dist/vue-ganttastic.common.js",
   "files": [
     "dist/vue-ganttastic.*"
   ],
-  "main": "dist/vue-ganttastic.common.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/tenrok/vue-ganttastic.git"
-  },
   "scripts": {
-    "serve": "vue-cli-service serve --open",
+    "build": "vue-cli-service build --target lib --name vue-ganttastic lib/index.js",
     "demo:build": "vue-cli-service build",
-    "lib:build": "vue-cli-service build --target lib --name vue-ganttastic lib/index.js",
+    "lint": "vue-cli-service lint --fix",
-    "lint": "vue-cli-service lint"
+    "serve": "vue-cli-service serve --open"
   },
   "dependencies": {
     "vue": "^2.7.14"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.19",
+    "@babel/eslint-parser": "^7.22.15",
-    "@vue/cli-plugin-eslint": "~4.5.19",
+    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-service": "~4.5.19",
+    "@vue/cli-plugin-eslint": "~5.0.8",
-    "babel-eslint": "^10.1.0",
+    "@vue/cli-service": "~5.0.8",
-    "eslint": "^6.7.2",
+    "eslint": "^8.51.0",
-    "eslint-plugin-vue": "^9.16.1",
+    "eslint-config-prettier": "^8.6.0",
-    "sass": "^1.69.1",
+    "eslint-plugin-prettier": "^4.2.1",
-    "sass-loader": "^10.4.1",
+    "eslint-plugin-vue": "^9.17.0",
+    "prettier": "^2.8.8",
+    "sass": "^1.69.2",
+    "sass-loader": "^13.3.2",
     "vue-template-compiler": "^2.7.14"
   },
   "peerDependencies": {

src/App.vue

@@ -224,8 +224,7 @@ export default {
               tooltip: 'Bar tooltip',
               config: {
                 color: 'white',
-                background:
+                background: 'repeating-linear-gradient(45deg, #de7359, #de7359 10px, #ffc803 10px, #ffc803 20px)'
-                  'repeating-linear-gradient(45deg, #de7359, #de7359 10px, #ffc803 10px, #ffc803 20px)'
               }
             }
           ]
@@ -271,13 +270,7 @@ export default {
       rowLabelWidth: 300,
       hideTimeaxis: false,
       highlightOnHover: true,
-      highlightedDays: [
+      highlightedDays: ['2020-03-01', '2020-03-08', '2020-03-15', '2020-03-22', '2020-03-29'],
-        '2020-03-01',
-        '2020-03-08',
-        '2020-03-15',
-        '2020-03-22',
-        '2020-03-29'
-      ],
       width: '90vw',
       height: '250px',
       allowAdd: false,
@@ -339,8 +332,7 @@ export default {
             }
           ],
           style: {
-            background:
+            background: 'linear-gradient(-45deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 52%)',
-              'linear-gradient(-45deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 52%)',
             backgroundSize: '1em 1em'
           }
         },

vetur.config.js

@@ -2,7 +2,7 @@
 /** @type {import('vls').VeturConfig} */
 module.exports = {
   settings: {
-    'vetur.ignoreProjectWarning': true,
+    'vetur.ignoreProjectWarning': true
   },
-  projects: ['./'],
+  projects: ['./']
 }

vue.config.js

@@ -1,9 +1,12 @@
+const isProduction = process.env.NODE_ENV === 'production'
 const isBuildLib =
   (process.env.npm_lifecycle_script || '').indexOf('--target lib') > 0
 
 module.exports = {
-  publicPath: '',
+  publicPath: isProduction ? '/vue-ganttastic/' : '',
+
   outputDir: isBuildLib ? 'dist' : 'demo',
+
   css: {
     loaderOptions: {
       sass: {
@@ -12,9 +15,11 @@ module.exports = {
     },
     extract: true
   },
+
   productionSourceMap: false,
+
   chainWebpack: config => {
-    if (process.env.VUE_CLI_BUILD_TARGET === 'lib') {
+    if (isBuildLib) {
       config.externals({
         ...config.get('externals'),
         moment: 'moment'