chore: restructuring

.eslintignore

@@ -1,3 +1,2 @@
-src/demo
 demo
 dist

.gitignore

@@ -1,7 +1,4 @@
 .DS_Store
-node_modules
-/dist
-
 
 # local env files
 .env.local
@@ -21,3 +18,10 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+# npm
+node_modules
+
+# output directories
+/demo
+/dist

.prettierrc.js

@@ -1,19 +1,11 @@
 module.exports = {
   arrowParens: 'avoid',
   bracketSpacing: true,
-  // embeddedLanguageFormatting: 'auto',
-  // htmlWhitespaceSensitivity: 'css',
-  // insertPragma: false,
-  // jsxBracketSameLine: false,
-  // jsxSingleQuote: false,
   printWidth: 80,
-  // proseWrap: 'preserve',
-  // quoteProps: 'as-needed',
-  // requirePragma: false,
   semi: false,
   singleQuote: true,
   tabWidth: 2,
-  trailingComma: 'es5',
+  trailingComma: 'none',
   useTabs: false,
-  vueIndentScriptAndStyle: true,
+  vueIndentScriptAndStyle: true
 }

README.md

@@ -58,8 +58,8 @@ 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 'vue-ganttastic'
+  import '@tenrok/vue-ganttastic/dist/vue-ganttastic.css'
 
   export default {
 

lib/components/GGanttBar.vue

@@ -32,7 +32,7 @@
           class="color-indicator"
           :style="{
             background:
-              this.barStyle.background || this.barStyle.backgroundColor,
+              this.barStyle.background || this.barStyle.backgroundColor
           }"
         />
         {{ barStartText }} - {{ barEndText }}
@@ -50,7 +50,7 @@ export default {
   props: {
     bar: { type: Object },
     barContainer: [Object, DOMRect],
-    allBarsInRow: { type: Array },
+    allBarsInRow: { type: Array }
   },
 
   inject: [
@@ -63,7 +63,7 @@ export default {
     'onDragendBar',
     'getMinGapBetweenBars',
     'getTimeUnit',
-    'getTimeFormat',
+    'getTimeFormat'
   ],
 
   data() {
@@ -85,7 +85,7 @@ export default {
         this.ganttChartProps.precision === 'month' ? 'MM-DD' : 'HH:mm',
       timeFormat: this.getTimeFormat(),
       barStartKey: this.ganttChartProps.barStartKey,
-      barEndKey: this.ganttChartProps.barEndKey,
+      barEndKey: this.ganttChartProps.barEndKey
     }
   },
 
@@ -96,7 +96,7 @@ export default {
       },
       set(value) {
         this.bar[this.barStartKey] = value.format(this.timeFormat)
-      },
+      }
     },
 
     barEndMoment: {
@@ -105,20 +105,20 @@ export default {
       },
       set(value) {
         this.bar[this.barEndKey] = value.format(this.timeFormat)
-      },
+      }
     },
 
     barStartText: {
       get() {
         return moment(this.barStartMoment).format(this.timeChildFormat)
-      },
+      }
     },
 
     barEndText: {
       get() {
         let endMoment = moment(this.barEndMoment)
         return endMoment.format(this.timeChildFormat)
-      },
+      }
     },
 
     barConfig() {
@@ -131,7 +131,7 @@ export default {
               this.bar.ganttBarConfig.backgroundColor,
           opacity: this.bar.ganttBarConfig.isShadow
             ? '0.3'
-            : this.bar.ganttBarConfig.opacity,
+            : this.bar.ganttBarConfig.opacity
         }
       }
       return {}
@@ -147,14 +147,14 @@ export default {
         left: `${xStart}px`,
         width: `${xEnd - xStart}px`,
         height: `${this.ganttChartProps.rowHeight - 6}px`,
-        zIndex: this.barConfig.zIndex || (this.isDragging ? 2 : 1),
+        zIndex: this.barConfig.zIndex || (this.isDragging ? 2 : 1)
       }
     },
 
     tooltipStyle() {
       return {
         left: this.barStyle.left,
-        top: `${this.ganttChartProps.rowHeight}px`,
+        top: `${this.ganttChartProps.rowHeight}px`
       }
     },
 
@@ -164,7 +164,7 @@ export default {
 
     chartEndMoment() {
       return moment(this.ganttChartProps.chartEnd)
-    },
+    }
   },
 
   methods: {
@@ -213,7 +213,7 @@ export default {
         this.setDragLimitsOfGanttBar(this)
         // initialize the dragging on next mousemove event:
         window.addEventListener('mousemove', this.onFirstMousemove, {
-          once: true,
+          once: true
         })
         // if next mousemove happens after mouse up (if user just presses mouse button down, then up, without moving):
         window.addEventListener(
@@ -569,120 +569,7 @@ export default {
         timeDiffFromStart = duration.asHours()
       }
       return moment(this.chartStartMoment).add(timeDiffFromStart, 'hours')
-    },
+    }
-  },
+  }
 }
 </script>
-
-<style scoped>
-.g-gantt-bar {
-  position: absolute;
-  top: 2px;
-  left: 30px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: white;
-  width: 300px;
-  height: 34px;
-  border-radius: 15px;
-  background: #79869c;
-  overflow: hidden;
-  cursor: move;
-}
-
-.g-gantt-bar-immobile {
-  cursor: unset;
-}
-
-.g-gantt-bar-label {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  padding: 0 14px 0 14px; /* 14px is the width of the handle */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.g-gantt-bar-label > * {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.g-gantt-bar > .g-gantt-bar-handle-left,
-.g-gantt-bar > .g-gantt-bar-handle-right {
-  position: absolute;
-  width: 10px;
-  height: 100%;
-  background: white;
-  opacity: 0.7;
-  border-radius: 40px;
-}
-
-.g-gantt-bar-handle-left {
-  left: 0;
-  cursor: w-resize;
-}
-
-.g-gantt-bar-handle-right {
-  right: 0;
-  cursor: e-resize;
-}
-
-.g-gantt-bar-label img {
-  pointer-events: none;
-}
-
-.g-gantt-tooltip {
-  position: absolute;
-  background: black;
-  color: white;
-  z-index: 3;
-  font-size: 0.7em;
-  padding: 3px;
-  border-radius: 3px;
-  transition: opacity 0.2s;
-  display: flex;
-  align-items: center;
-}
-
-.g-gantt-tooltip:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 10%;
-  width: 0;
-  height: 0;
-  border: 10px solid transparent;
-  border-bottom-color: black;
-  border-top: 0;
-  margin-left: -5px;
-  margin-top: -5px;
-}
-
-.g-gantt-tooltip > .color-indicator {
-  width: 8px;
-  height: 8px;
-  border-radius: 100%;
-  margin-right: 4px;
-}
-
-.fade-enter-active {
-  animation: fade-in 0.3s;
-}
-
-.fade-leave-active {
-  animation: fade-in 0.3s reverse;
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-</style>

lib/components/GGanttChart.vue

@@ -39,18 +39,18 @@
 
 <script>
 import moment from 'moment'
-import GanttasticThemeColors from '@/assets/GanttasticThemeColors.js'
+import GanttasticThemeColors from './GanttasticThemeColors.js'
-import GGanttTimeaxis from '@/components/GGanttTimeaxis.vue'
+import GGanttTimeaxis from './GGanttTimeaxis.vue'
-import GGanttGrid from '@/components/GGanttGrid.vue'
+import GGanttGrid from './GGanttGrid.vue'
-import GGanttRow from '@/components/GGanttRow.vue'
+import GGanttRow from './GGanttRow.vue'
-import GGanttBar from '@/components/GGanttBar.vue'
+import GGanttBar from './GGanttBar.vue'
 
 export default {
   name: 'GGanttChart',
 
   components: {
     GGanttTimeaxis,
-    GGanttGrid,
+    GGanttGrid
   },
 
   props: {
@@ -75,13 +75,13 @@ export default {
     precision: { type: String, default: 'month' }, // 'month', 'day'
     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 },
+    mayAdd: { type: Boolean, default: true }
   },
 
   data() {
     return {
       timemarkerOffset: 0,
-      movedBarsInDrag: new Set(),
+      movedBarsInDrag: new Set()
     }
   },
 
@@ -104,7 +104,7 @@ export default {
 
     themeColors() {
       return GanttasticThemeColors[this.theme] || GanttasticThemeColors.default
-    },
+    }
   },
 
   methods: {
@@ -376,7 +376,7 @@ export default {
           } else if (nextBar.barConfig.bundle) {
             bundleBarsAndGapDist.push({
               bar: nextBar,
-              gapDistance: gapDistanceSoFar,
+              gapDistance: gapDistanceSoFar
             })
           }
           currentBar = nextBar
@@ -398,7 +398,7 @@ export default {
           } else if (nextBar.barConfig.bundle) {
             bundleBarsAndGapDist.push({
               bar: nextBar,
-              gapDistance: gapDistanceSoFar,
+              gapDistance: gapDistanceSoFar
             })
           }
           currentBar = nextBar
@@ -448,7 +448,7 @@ export default {
       } else {
         return null
       }
-    },
+    }
 
     // ------------------------------------------------------------------------
     // ------------------------------------------------------------------------
@@ -478,34 +478,8 @@ export default {
       getMinGapBetweenBars: () => this.minGapBetweenBars,
       getDefaultBarLength: () => this.defaultBarLength,
       getTimeUnit: () => this.timeUnit,
-      getTimeFormat: () => this.timeFormat,
+      getTimeFormat: () => this.timeFormat
     }
-  },
+  }
 }
 </script>
-
-<style scoped>
-.g-gantt-chart {
-  position: relative;
-  /* display: flex; */
-  /* flex-direction: column; */
-  overflow: auto;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  padding-bottom: 23px;
-  border: 1px solid #eaeaea;
-  box-sizing: border-box;
-}
-
-.g-gantt-chart >>> * {
-  font-family: Roboto, Verdana;
-}
-
-.g-gantt-rows-container {
-  position: relative;
-}
-</style>

lib/components/GGanttGrid.vue

@@ -13,8 +13,8 @@
         {
           'g-grid-line-highlighted':
             (precision === 'day' && highlightedHours.includes(childPoint)) ||
-            (precision === 'month' && highlightedDays.includes(childPoint)),
+            (precision === 'month' && highlightedDays.includes(childPoint))
-        },
+        }
       ]"
       :style="{ width: `${gridSize}px` }"
     />
@@ -35,7 +35,7 @@ export default {
     highlightedDays: { type: Array, default: () => [] },
     precision: { type: String },
     timeCount: { type: Number },
-    gridSize: { type: Number },
+    gridSize: { type: Number }
   },
 
   computed: {
@@ -56,32 +56,7 @@ export default {
         }
       }
       return res
-    },
+    }
-  },
+  }
 }
 </script>
-
-<style scoped>
-.g-grid-container {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  overflow: hidden;
-}
-
-.g-grid-line {
-  height: 100%;
-  border: 1px solid transparent;
-  border-left: 1px solid #eaeaea;
-  box-sizing: border-box;
-  display: inline-block;
-}
-
-.g-grid-line-last {
-  border-right: 1px solid #eaeaea;
-}
-
-.g-grid-line-highlighted {
-  background: #dcefff;
-}
-</style>

lib/components/GGanttRow.vue

@@ -37,20 +37,20 @@
 </template>
 
 <script>
-import GGanttBar from '@/components/GGanttBar.vue'
+import GGanttBar from './GGanttBar.vue'
 import moment from 'moment'
 
 export default {
   name: 'GGanttRow',
 
   components: {
-    GGanttBar,
+    GGanttBar
   },
 
   props: {
     label: { type: String, default: 'Row' },
     bars: { type: Array, default: () => [] },
-    highlightOnHover: { type: Boolean },
+    highlightOnHover: { type: Boolean }
   },
 
   inject: [
@@ -60,14 +60,14 @@ export default {
     'getChartEnd',
     'getDefaultBarLength',
     'getTimeUnit',
-    'getTimeFormat',
+    'getTimeFormat'
   ],
 
   data() {
     return {
       barContainer: {},
       timeUnit: this.getTimeUnit(),
-      timeFormat: this.getTimeFormat(),
+      timeFormat: this.getTimeFormat()
     }
   },
 
@@ -77,9 +77,9 @@ export default {
         width: `${this.$parent.rowLabelWidth}px`,
         // height: `${this.$parent.rowHeight}px`,
         background: this.$parent.themeColors.ternary,
-        color: this.$parent.themeColors.text,
+        color: this.$parent.themeColors.text
       }
-    },
+    }
   },
 
   mounted() {
@@ -163,50 +163,13 @@ export default {
       if (this.$refs.barContainer) {
         this.barContainer = this.$refs.barContainer.getBoundingClientRect()
       }
-    },
+    }
   },
 
   watch: {
     '$parent.rowLabelWidth': function () {
       this.barContainer = this.$refs.barContainer.getBoundingClientRect()
-    },
+    }
-  },
+  }
 }
 </script>
-
-<style scoped>
-.g-gantt-row {
-  display: flex;
-  width: 100%;
-  height: 40px;
-  transition: background-color 0.2s;
-}
-
-.g-gantt-row > .g-gantt-row-label {
-  display: flex;
-  /* justify-content: center; */
-  align-items: center;
-  background: #e8e8e8;
-  color: #424242;
-  font-size: 0.9em;
-  z-index: 3;
-  font-weight: bold;
-  left: 0;
-  position: sticky;
-  padding: 0 10px;
-  box-sizing: border-box;
-}
-
-.g-gantt-row > .g-gantt-row-label > * {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.g-gantt-row > .g-gantt-row-bars-container {
-  position: relative;
-  /* border-top: 1px solid #eaeaea; */
-  border-bottom: 1px solid #eaeaea;
-  flex: 1;
-}
-</style>

lib/components/GGanttTimeaxis.vue

@@ -8,7 +8,7 @@
       class="g-timeaxis-empty-space"
       :style="{
         minWidth: `${rowLabelWidth}px`,
-        background: themeColors.secondary,
+        background: themeColors.secondary
       }"
     />
     <div class="g-timeaxis-days">
@@ -19,7 +19,7 @@
         :style="{
           background:
             index % 2 === 0 ? themeColors.primary : themeColors.secondary,
-          color: themeColors.text,
+          color: themeColors.text
         }"
       >
         <div v-html="pointFormatted(point) || '&nbsp;'"></div>
@@ -34,7 +34,7 @@
               width: `${gridSize}px`,
               background:
                 index % 2 === 0 ? themeColors.primary : themeColors.secondary,
-              color: themeColors.text,
+              color: themeColors.text
             }"
           >
             <span :style="{ fontSize: hourFontSize }">{{
@@ -68,7 +68,7 @@ export default {
     precision: { type: String },
     timeFormat: { type: String },
     timeCount: { type: Number },
-    gridSize: { type: Number },
+    gridSize: { type: Number }
   },
 
   data() {
@@ -78,7 +78,7 @@ export default {
       timemarker: null,
       hourFontSize: '11px',
       dayFormat: 'DD MMMM',
-      monthFormat: 'MMMM YYYY',
+      monthFormat: 'MMMM YYYY'
     }
   },
 
@@ -88,7 +88,7 @@ export default {
     },
     chartEnd() {
       this.initAxis()
-    },
+    }
   },
 
   mounted() {
@@ -160,13 +160,13 @@ export default {
       let axisMonthObject = {
         widthPercentage: widthPercentage,
         value: moment(datetime, 'YYYY-MM'),
-        childPoints: [],
+        childPoints: []
       }
       let startDay = datetimeMoment.date()
       for (let i = 0; i <= endDay - startDay; i++) {
         let day = {
           text: datetimeMoment.format('D'),
-          fullDatetime: datetimeMoment.format(this.timeFormat),
+          fullDatetime: datetimeMoment.format(this.timeFormat)
         }
         axisMonthObject.childPoints.push(day)
         datetimeMoment.add(1, 'day')
@@ -179,13 +179,13 @@ export default {
       let axisDayObject = {
         widthPercentage: widthPercentage,
         value: moment(datetime, 'YYYY-MM-DD'), // ISO 8601
-        childPoints: [],
+        childPoints: []
       }
       let startHour = datetimeMoment.hour()
       for (let i = 0; i <= endHour - startHour; i++) {
         let hour = {
           text: datetimeMoment.format('HH'),
-          fullDatetime: datetimeMoment.format(this.timeFormat),
+          fullDatetime: datetimeMoment.format(this.timeFormat)
         }
         axisDayObject.childPoints.push(hour)
         datetimeMoment.add(1, 'hour')
@@ -239,91 +239,7 @@ export default {
       //   ? moment(point.value).locale(this.locale).format(this.dayFormat)
       //   : ''
       return moment(point.value).locale(this.locale).format(this.dayFormat)
-    },
+    }
-  },
+  }
 }
 </script>
-
-<style scoped>
-.g-timeaxis,
-.g-timeaxis-days,
-.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);
-}
-
-.g-timeaxis > .g-timeaxis-empty-space {
-  min-height: 100%;
-  background: #f5f5f5;
-  z-index: 5;
-  left: 0;
-  position: sticky;
-}
-
-.g-timeaxis > .g-timeaxis-days {
-  position: relative;
-  height: 100%;
-}
-
-.g-timeaxis-day {
-  height: 100%;
-  flex-direction: column;
-  background: #e0e0e0;
-}
-
-.g-timeaxis-day:nth-child(odd) {
-  background: #e8e8e8;
-}
-
-.g-timeaxis-day > div:nth-child(1) {
-  /* day text */
-  height: 50%;
-  justify-content: space-around;
-  font-weight: bold;
-  align-items: center;
-}
-
-.g-timeaxis-day > div:nth-child(2) {
-  /* hours of a day */
-  align-items: flex-end;
-  height: 50%;
-  justify-content: space-between;
-  background: #f5f5f5;
-  padding-top: 2px;
-  color: #212121;
-}
-
-.g-timeaxis-hour {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  flex-direction: column;
-  opacity: 0.5;
-}
-
-.g-timeaxis-hour-pin {
-  width: 1px;
-  height: 8px;
-}
-
-.g-timeaxis-marker {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 3px;
-  background: black;
-}
-</style>

lib/index.js

@@ -0,0 +1,19 @@
+import GGanttChart from './components/GGanttChart.vue'
+import GGanttRow from './components/GGanttRow.vue'
+import './scss/vue-ganttastic.scss'
+
+const VueGanttastic = { GGanttChart, GGanttRow }
+
+const install = Vue => {
+  Object.keys(VueGanttastic).forEach(name => {
+    Vue.component(name, VueGanttastic[name])
+  })
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default VueGanttastic
+
+export { GGanttChart, GGanttRow }

lib/scss/vue-ganttastic.scss

@@ -0,0 +1,274 @@
+.g-gantt-chart {
+  position: relative;
+  /* display: flex; */
+  /* flex-direction: column; */
+  overflow: auto;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  padding-bottom: 23px;
+  border: 1px solid #eaeaea;
+  box-sizing: border-box;
+}
+
+.g-gantt-chart >>> * {
+  font-family: Roboto, Verdana;
+}
+
+.g-timeaxis,
+.g-timeaxis-days,
+.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);
+}
+
+.g-timeaxis > .g-timeaxis-empty-space {
+  min-height: 100%;
+  background: #f5f5f5;
+  z-index: 5;
+  left: 0;
+  position: sticky;
+}
+
+.g-timeaxis > .g-timeaxis-days {
+  position: relative;
+  height: 100%;
+}
+
+.g-timeaxis-day {
+  height: 100%;
+  flex-direction: column;
+  background: #e0e0e0;
+}
+
+.g-timeaxis-day:nth-child(odd) {
+  background: #e8e8e8;
+}
+
+.g-timeaxis-day > div:nth-child(1) {
+  /* day text */
+  height: 50%;
+  justify-content: space-around;
+  font-weight: bold;
+  align-items: center;
+}
+
+.g-timeaxis-day > div:nth-child(2) {
+  /* hours of a day */
+  align-items: flex-end;
+  height: 50%;
+  justify-content: space-between;
+  background: #f5f5f5;
+  padding-top: 2px;
+  color: #212121;
+}
+
+.g-timeaxis-hour {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-direction: column;
+  opacity: 0.5;
+}
+
+.g-timeaxis-hour-pin {
+  width: 1px;
+  height: 8px;
+}
+
+.g-timeaxis-marker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 3px;
+  background: black;
+}
+
+.g-gantt-rows-container {
+  position: relative;
+}
+
+.g-grid-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.g-grid-line {
+  height: 100%;
+  border: 1px solid transparent;
+  border-left: 1px solid #eaeaea;
+  box-sizing: border-box;
+  display: inline-block;
+}
+
+.g-grid-line-last {
+  border-right: 1px solid #eaeaea;
+}
+
+.g-grid-line-highlighted {
+  background: #dcefff;
+}
+
+.g-gantt-row {
+  display: flex;
+  width: 100%;
+  height: 40px;
+  transition: background-color 0.2s;
+}
+
+.g-gantt-row > .g-gantt-row-label {
+  display: flex;
+  /* justify-content: center; */
+  align-items: center;
+  background: #e8e8e8;
+  color: #424242;
+  font-size: 0.9em;
+  z-index: 3;
+  font-weight: bold;
+  left: 0;
+  position: sticky;
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+
+.g-gantt-row > .g-gantt-row-label > * {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.g-gantt-row > .g-gantt-row-bars-container {
+  position: relative;
+  /* border-top: 1px solid #eaeaea; */
+  border-bottom: 1px solid #eaeaea;
+  flex: 1;
+}
+
+.g-gantt-bar {
+  position: absolute;
+  top: 2px;
+  left: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: white;
+  width: 300px;
+  height: 34px;
+  border-radius: 15px;
+  background: #79869c;
+  overflow: hidden;
+  cursor: move;
+}
+
+.g-gantt-bar-immobile {
+  cursor: unset;
+}
+
+.g-gantt-bar-label {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 14px 0 14px; /* 14px is the width of the handle */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.g-gantt-bar-label > * {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.g-gantt-bar > .g-gantt-bar-handle-left,
+.g-gantt-bar > .g-gantt-bar-handle-right {
+  position: absolute;
+  width: 10px;
+  height: 100%;
+  background: white;
+  opacity: 0.7;
+  border-radius: 40px;
+}
+
+.g-gantt-bar-handle-left {
+  left: 0;
+  cursor: w-resize;
+}
+
+.g-gantt-bar-handle-right {
+  right: 0;
+  cursor: e-resize;
+}
+
+.g-gantt-bar-label img {
+  pointer-events: none;
+}
+
+.g-gantt-tooltip {
+  position: absolute;
+  background: black;
+  color: white;
+  z-index: 3;
+  font-size: 0.7em;
+  padding: 3px;
+  border-radius: 3px;
+  transition: opacity 0.2s;
+  display: flex;
+  align-items: center;
+}
+
+.g-gantt-tooltip:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 10%;
+  width: 0;
+  height: 0;
+  border: 10px solid transparent;
+  border-bottom-color: black;
+  border-top: 0;
+  margin-left: -5px;
+  margin-top: -5px;
+}
+
+.g-gantt-tooltip > .color-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+  margin-right: 4px;
+}
+
+.fade-enter-active {
+  animation: fade-in 0.3s;
+}
+
+.fade-leave-active {
+  animation: fade-in 0.3s reverse;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenrok/vue-ganttastic",
-  "version": "0.10.11",
+  "version": "0.10.12",
   "description": "A simple and customizable Gantt chart component for Vue.js",
   "keywords": [
     "gantt",
@@ -40,8 +40,8 @@
     "url": "git+https://github.com/tenrok/vue-ganttastic.git"
   },
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --open",
-    "build": "vue-cli-service build --target lib --name vue-ganttastic src/lib.js",
+    "build": "vue-cli-service build --target lib --name vue-ganttastic lib/index.js",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

src/App.vue

@@ -69,14 +69,7 @@
 </template>
 
 <script>
-import GGanttChart from '@/components/GGanttChart.vue'
-import GGanttRow from '@/components/GGanttRow.vue'
-
 export default {
-  components: {
-    GGanttChart,
-    GGanttRow,
-  },
   data: () => ({
     chart1: {
       chartStart: '2020-03-02 00:00',
@@ -104,8 +97,8 @@ export default {
                 color: 'white',
                 backgroundColor: '#404040',
                 opacity: 0.5,
-                immobile: true,
+                immobile: true
-              },
+              }
             },
             {
               myStart: '2020-03-03 04:00',
@@ -114,10 +107,10 @@ export default {
               ganttBarConfig: {
                 color: 'white',
                 backgroundColor: '#2e74a3',
-                bundle: 'blueBundle',
+                bundle: 'blueBundle'
-              },
+              }
-            },
+            }
-          ],
+          ]
         },
         {
           label: 'Row #2',
@@ -129,8 +122,8 @@ export default {
               ganttBarConfig: {
                 color: 'white',
                 backgroundColor: '#de3b26',
-                bundle: 'redBundle',
+                bundle: 'redBundle'
-              },
+              }
             },
             {
               myStart: '2020-03-03 04:00',
@@ -139,16 +132,16 @@ export default {
               ganttBarConfig: {
                 color: 'white',
                 backgroundColor: '#2e74a3',
-                bundle: 'blueBundle',
+                bundle: 'blueBundle'
-              },
+              }
             },
             {
               myStart: '2020-03-03 18:00',
               myEnd: '2020-03-03 22:00',
               label: 'Bar',
-              ganttBarConfig: { color: 'white', backgroundColor: '#aa34a3' },
+              ganttBarConfig: { color: 'white', backgroundColor: '#aa34a3' }
-            },
+            }
-          ],
+          ]
         },
         {
           label: 'Row #3',
@@ -160,8 +153,8 @@ export default {
               ganttBarConfig: {
                 color: 'white',
                 backgroundColor: '#de3b26',
-                bundle: 'redBundle',
+                bundle: 'redBundle'
-              },
+              }
             },
             {
               myStart: '2020-03-02 22:30',
@@ -170,8 +163,8 @@ export default {
               ganttBarConfig: {
                 color: 'white',
                 backgroundColor: '#a23def',
-                handles: true,
+                handles: true
-              },
+              }
             },
             {
               myStart: '2020-03-02 01:00',
@@ -181,8 +174,8 @@ export default {
                 color: 'white',
                 backgroundColor: '#5effad',
                 pushOnOverlap: false,
-                zIndex: 2,
+                zIndex: 2
-              },
+              }
             },
             {
               myStart: '2020-03-03 14:00',
@@ -191,10 +184,10 @@ export default {
               ganttBarConfig: {
                 color: 'white',
                 background:
-                  'repeating-linear-gradient(45deg,#de7359,#de7359 10px,#ffc803 10px,#ffc803 20px)',
+                  'repeating-linear-gradient(45deg,#de7359,#de7359 10px,#ffc803 10px,#ffc803 20px)'
-              },
+              }
-            },
+            }
-          ],
+          ]
         },
         {
           label: 'Row #4',
@@ -206,8 +199,8 @@ export default {
               ganttBarConfig: {
                 color: 'white',
                 backgroundColor: '#d18aaf',
-                handles: true,
+                handles: true
-              },
+              }
             },
             {
               myStart: '2020-03-02 00:30',
@@ -216,12 +209,12 @@ export default {
               ganttBarConfig: {
                 color: 'white',
                 backgroundColor: '#f2840f',
-                borderRadius: 0,
+                borderRadius: 0
-              },
+              }
-            },
+            }
-          ],
+          ]
-        },
+        }
-      ],
+      ]
     },
     chart2: {
       chartStart: '2020-03-01 00:00',
@@ -240,7 +233,7 @@ export default {
         '2020-03-08',
         '2020-03-15',
         '2020-03-22',
-        '2020-03-29',
+        '2020-03-29'
       ],
       selectedTheme: 'vue', // 'default', 'vue', 'dark', 'material-blue', 'creamy', 'slumber', 'sky', 'crimson', 'grove', 'fuchsia', 'flare'
       width: '1100px',
@@ -257,10 +250,10 @@ export default {
               ganttBarConfig: {
                 color: 'white',
                 backgroundColor: '#2e74a3',
-                bundle: 'blueBundle',
+                bundle: 'blueBundle'
-              },
+              }
-            },
+            }
-          ],
+          ]
         },
         {
           label: 'Row #2',
@@ -272,8 +265,8 @@ export default {
               ganttBarConfig: {
                 color: 'white',
                 backgroundColor: '#2e74a3',
-                bundle: 'blueBundle',
+                bundle: 'blueBundle'
-              },
+              }
             },
             {
               start: '2020-03-24 00:00',
@@ -281,10 +274,10 @@ export default {
               label: 'Bar',
               ganttBarConfig: {
                 color: 'white',
-                backgroundColor: '#de3b26',
+                backgroundColor: '#de3b26'
-              },
+              }
-            },
+            }
-          ],
+          ]
         },
         {
           label: 'Row #3',
@@ -295,41 +288,43 @@ export default {
               label: 'Bar',
               ganttBarConfig: {
                 color: 'white',
-                backgroundColor: '#408e2f',
+                backgroundColor: '#408e2f'
-              },
+              }
-            },
+            }
-          ],
+          ]
         },
         {
           label:
             'Lorem ipsum dolor sit amet. Vel odit debitis qui aliquam sequi et reprehenderit Quis. Et ipsam enim aut culpa quia sed maiores veniam in consequuntur accusantium.',
-          bars: [],
+          bars: []
         },
         {
           label: 'Row #5',
-          bars: [],
+          bars: []
         },
         {
           label: 'Row #6',
-          bars: [],
+          bars: []
         },
         {
           label: 'Row #7',
-          bars: [],
+          bars: []
         },
         {
           label: 'Row #8',
-          bars: [],
+          bars: []
-        },
+        }
-      ],
+      ]
-    },
+    }
   }),
 
   methods: {
     onDragend(e) {
       let { event, bar } = e
       console.log('onDragend', { event: event.type, bar })
-    },
+    }
-  },
+  }
 }
 </script>
+
+<style lang="scss" src="../lib/scss/vue-ganttastic.scss"></style>

src/lib.js

@@ -1,4 +0,0 @@
-import GGanttChart from '@/components/GGanttChart.vue'
-import GGanttRow from '@/components/GGanttRow.vue'
-
-export { GGanttChart, GGanttRow }

src/main.js

@@ -1,8 +1,12 @@
 import Vue from 'vue'
-import App from './demo/App.vue'
+import App from './App.vue'
+import { GGanttChart, GGanttRow } from '../lib'
+
+Vue.component('GGanttChart', GGanttChart)
+Vue.component('GGanttRow', GGanttRow)
 
 Vue.config.productionTip = false
 
 new Vue({
-  render: h => h(App),
+  render: h => h(App)
 }).$mount('#app')

vue.config.js

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