@@ -19,7 +19,7 @@
:style="{
background:
index % 2 === 0 ? themeColors.primary : themeColors.secondary,
- color: themeColors.text,
+ color: themeColors.text
}"
>
@@ -34,7 +34,7 @@
width: `${gridSize}px`,
background:
index % 2 === 0 ? themeColors.primary : themeColors.secondary,
- color: themeColors.text,
+ color: themeColors.text
}"
>
{{
@@ -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)
- },
- },
+ }
+ }
}
-
-
diff --git a/src/assets/GanttasticThemeColors.js b/lib/components/GanttasticThemeColors.js
similarity index 100%
rename from src/assets/GanttasticThemeColors.js
rename to lib/components/GanttasticThemeColors.js
diff --git a/lib/index.js b/lib/index.js
new file mode 100644
index 0000000..f310d0f
--- /dev/null
+++ b/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 }
diff --git a/lib/scss/vue-ganttastic.scss b/lib/scss/vue-ganttastic.scss
new file mode 100644
index 0000000..d240333
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/package.json b/package.json
index 8f336b2..41d5bad 100644
--- a/package.json
+++ b/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",
- "build": "vue-cli-service build --target lib --name vue-ganttastic src/lib.js",
+ "serve": "vue-cli-service serve --open",
+ "build": "vue-cli-service build --target lib --name vue-ganttastic lib/index.js",
"lint": "vue-cli-service lint"
},
"dependencies": {
diff --git a/src/demo/App.vue b/src/App.vue
similarity index 85%
rename from src/demo/App.vue
rename to src/App.vue
index 8f0f657..ed87a04 100644
--- a/src/demo/App.vue
+++ b/src/App.vue
@@ -69,14 +69,7 @@
+
+
diff --git a/src/lib.js b/src/lib.js
deleted file mode 100644
index 1b73044..0000000
--- a/src/lib.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import GGanttChart from '@/components/GGanttChart.vue'
-import GGanttRow from '@/components/GGanttRow.vue'
-
-export { GGanttChart, GGanttRow }
diff --git a/src/main.js b/src/main.js
index 9885af3..7e9a906 100644
--- a/src/main.js
+++ b/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')
diff --git a/vue.config.js b/vue.config.js
index 04934cf..7a6d7fe 100644
--- a/vue.config.js
+++ b/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/',
- css: { extract: false },
+ outputDir: isBuildLib ? 'dist' : 'demo',
+ css: { extract: true },
productionSourceMap: false,
chainWebpack: config => {
if (process.env.VUE_CLI_BUILD_TARGET === 'lib') {
config.externals({
...config.get('externals'),
- moment: 'moment',
+ moment: 'moment'
})
}
- },
+ }
}