mirror of
https://github.com/tenrok/vue-ganttastic.git
synced 2026-06-11 17:02:25 +03:00
chore: restructuring
This commit is contained in:
@@ -1,3 +1,2 @@
|
||||
src/demo
|
||||
demo
|
||||
dist
|
||||
|
||||
+7
-3
@@ -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
|
||||
|
||||
+2
-10
@@ -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
|
||||
}
|
||||
|
||||
@@ -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 'vue-ganttastic'
|
||||
import { GGanttChart, GGanttRow } from '@tenrok/vue-ganttastic'
|
||||
import '@tenrok/vue-ganttastic/dist/vue-ganttastic.css'
|
||||
|
||||
export default {
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -39,18 +39,18 @@
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import GanttasticThemeColors from '@/assets/GanttasticThemeColors.js'
|
||||
import GGanttTimeaxis from '@/components/GGanttTimeaxis.vue'
|
||||
import GGanttGrid from '@/components/GGanttGrid.vue'
|
||||
import GGanttRow from '@/components/GGanttRow.vue'
|
||||
import GGanttBar from '@/components/GGanttBar.vue'
|
||||
import GanttasticThemeColors from './GanttasticThemeColors.js'
|
||||
import GGanttTimeaxis from './GGanttTimeaxis.vue'
|
||||
import GGanttGrid from './GGanttGrid.vue'
|
||||
import GGanttRow from './GGanttRow.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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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) || ' '"></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>
|
||||
@@ -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 }
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
+3
-3
@@ -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": {
|
||||
|
||||
@@ -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>
|
||||
@@ -1,4 +0,0 @@
|
||||
import GGanttChart from '@/components/GGanttChart.vue'
|
||||
import GGanttRow from '@/components/GGanttRow.vue'
|
||||
|
||||
export { GGanttChart, GGanttRow }
|
||||
+6
-2
@@ -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')
|
||||
|
||||
+7
-4
@@ -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'
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user