mirror of
https://github.com/tenrok/vue-ganttastic.git
synced 2026-06-09 09:12:24 +03:00
chore: now "rowLabelWidth" is number
feat: added prop "gridSize"
This commit is contained in:
-19
@@ -1,19 +0,0 @@
|
||||
{
|
||||
// "arrowParens": "always",
|
||||
"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",
|
||||
"useTabs": false,
|
||||
"vueIndentScriptAndStyle": true
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
module.exports = {
|
||||
arrowParens: 'always',
|
||||
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',
|
||||
useTabs: false,
|
||||
vueIndentScriptAndStyle: true,
|
||||
}
|
||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@tenrok/vue-ganttastic",
|
||||
"version": "0.10.2",
|
||||
"version": "0.10.6",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@tenrok/vue-ganttastic",
|
||||
"version": "0.10.2",
|
||||
"version": "0.10.6",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"vue": "^2.6.14"
|
||||
|
||||
+29
-28
@@ -1,17 +1,26 @@
|
||||
{
|
||||
"name": "@tenrok/vue-ganttastic",
|
||||
"version": "0.10.2",
|
||||
"version": "0.10.6",
|
||||
"description": "A simple and customizable Gantt chart component for Vue.js",
|
||||
"keywords": [
|
||||
"gantt",
|
||||
"chart",
|
||||
"bar",
|
||||
"diagram",
|
||||
"vue",
|
||||
"vuejs",
|
||||
"ganttastic"
|
||||
],
|
||||
"homepage": "https://github.com/tenrok/vue-ganttastic#readme",
|
||||
"bugs": {
|
||||
"url": "https://github.com/tenrok/vue-ganttastic/issues"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": {
|
||||
"name": "Marko Zunic",
|
||||
"email": "marko.zunic06@gmail.com",
|
||||
"url": "https://github.com/InfectoOne/vue-ganttastic"
|
||||
},
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/tenrok/vue-ganttastic.git"
|
||||
},
|
||||
"contributors": [
|
||||
{
|
||||
"name": "Yicone Wong",
|
||||
@@ -22,23 +31,22 @@
|
||||
"url": "https://github.com/solodyagin"
|
||||
}
|
||||
],
|
||||
"main": "./dist/index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build": "bili"
|
||||
},
|
||||
"files": [
|
||||
"dist/*"
|
||||
],
|
||||
"keywords": [
|
||||
"gantt",
|
||||
"chart",
|
||||
"bar",
|
||||
"diagram",
|
||||
"vue",
|
||||
"vuejs",
|
||||
"ganttastic"
|
||||
],
|
||||
"main": "./dist/index.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/tenrok/vue-ganttastic.git"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build": "bili --plugin.vue",
|
||||
"serve": "vue serve ./src/Playground.vue"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.6.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"bili": "^4.10.0",
|
||||
"rollup-plugin-vue": "^5.1.9",
|
||||
@@ -46,12 +54,5 @@
|
||||
},
|
||||
"peerDependencies": {
|
||||
"moment": "^2.26.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.6.14"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/tenrok/vue-ganttastic/issues"
|
||||
},
|
||||
"homepage": "https://github.com/tenrok/vue-ganttastic#readme"
|
||||
}
|
||||
}
|
||||
|
||||
+7
-8
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="['g-gantt-bar', { 'g-gantt-bar-immobile': barConfig.immobile }]"
|
||||
ref="g-gantt-bar"
|
||||
:class="['g-gantt-bar', { 'g-gantt-bar-immobile': barConfig.immobile }]"
|
||||
:style="barStyle"
|
||||
@mouseenter.stop="onMouseenter($event)"
|
||||
@mouseleave.stop="onMouseleave($event)"
|
||||
@@ -35,9 +35,7 @@
|
||||
this.barStyle.background || this.barStyle.backgroundColor,
|
||||
}"
|
||||
/>
|
||||
{{ barStartText }}
|
||||
-
|
||||
{{ barEndText }}
|
||||
{{ barStartText }} - {{ barEndText }}
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
@@ -75,11 +73,9 @@ export default {
|
||||
dragLimitLeft: null,
|
||||
dragLimitRight: null,
|
||||
isDragging: false,
|
||||
isMainBarOfDrag: false, // is this the bar that was clicked on when starting to drag
|
||||
// or is it dragged along some other bar from the same bundle
|
||||
isMainBarOfDrag: false, // is this the bar that was clicked on when starting to drag or is it dragged along some other bar from the same bundle
|
||||
cursorOffsetX: 0,
|
||||
mousemoveCallback: null, // gets initialized when starting to drag
|
||||
// possible values: drag, dragByHandleLeft, dragByHandleRight,
|
||||
mousemoveCallback: null, // gets initialized when starting to drag, possible values: drag, dragByHandleLeft, dragByHandleRight,
|
||||
barStartBeforeDrag: null,
|
||||
barEndBeforeDrag: null,
|
||||
timeUnit: this.getTimeUnit(),
|
||||
@@ -102,6 +98,7 @@ export default {
|
||||
this.bar[this.barStartKey] = value.format(this.timeFormat)
|
||||
},
|
||||
},
|
||||
|
||||
barEndMoment: {
|
||||
get() {
|
||||
return moment(this.bar[this.barEndKey])
|
||||
@@ -110,6 +107,7 @@ export default {
|
||||
this.bar[this.barEndKey] = value.format(this.timeFormat)
|
||||
},
|
||||
},
|
||||
|
||||
barStartText: {
|
||||
get() {
|
||||
return moment(this.barStartMoment).format(this.timeChildFormat)
|
||||
@@ -210,6 +208,7 @@ export default {
|
||||
if (e.button === 2) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.barConfig.immobile && !this.barConfig.isShadow) {
|
||||
this.setDragLimitsOfGanttBar(this)
|
||||
// initialize the dragging on next mousemove event:
|
||||
|
||||
+5
-6
@@ -14,6 +14,7 @@
|
||||
:precision="precision"
|
||||
:time-format="timeFormat"
|
||||
:time-count="timeCount"
|
||||
:grid-size="gridSize"
|
||||
/>
|
||||
|
||||
<g-gantt-grid
|
||||
@@ -24,15 +25,12 @@
|
||||
:highlighted-hours="highlightedHours"
|
||||
:precision="precision"
|
||||
:time-count="timeCount"
|
||||
:grid-size="gridSize"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="g-gantt-rows-container"
|
||||
:style="{
|
||||
width: `${
|
||||
timeCount * 30 + parseInt(rowLabelWidth.replace('px', ''))
|
||||
}px`,
|
||||
}"
|
||||
:style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }"
|
||||
>
|
||||
<slot />
|
||||
<!-- the g-gantt-row components go here -->
|
||||
@@ -60,11 +58,12 @@ export default {
|
||||
chartStart: { type: String },
|
||||
chartEnd: { type: String },
|
||||
hideTimeaxis: { type: Boolean },
|
||||
rowLabelWidth: { type: String, default: '200px' },
|
||||
rowLabelWidth: { type: Number, default: 200 },
|
||||
rowHeight: { type: Number, default: 40 },
|
||||
locale: { type: String, default: 'en' },
|
||||
theme: { type: String },
|
||||
grid: { type: Boolean },
|
||||
gridSize: { type: Number, default: 30 },
|
||||
highlightedHours: { type: Array, default: () => [] },
|
||||
width: { type: String, default: '100%' }, // the total width of the entire ganttastic component in %
|
||||
pushOnOverlap: { type: Boolean },
|
||||
|
||||
+22
-20
@@ -1,21 +1,20 @@
|
||||
<template>
|
||||
<div
|
||||
class="g-grid-container"
|
||||
:style="{
|
||||
left: rowLabelWidth,
|
||||
width: `${timeCount * 30}px`,
|
||||
}"
|
||||
:style="{ left: `${rowLabelWidth}px`, width: `${timeCount * gridSize}px` }"
|
||||
>
|
||||
<div
|
||||
v-for="(childPoint, index) in allChildPoints"
|
||||
:key="index"
|
||||
:class="[
|
||||
'g-grid-line',
|
||||
{ 'g-grid-line-last': index === allChildPoints.length - 1 },
|
||||
{
|
||||
'g-grid-line-highlighted':
|
||||
precision === 'day' && highlightedHours.includes(childPoint),
|
||||
},
|
||||
]"
|
||||
:style="{ width: `${gridSize}px` }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -29,26 +28,27 @@ export default {
|
||||
props: {
|
||||
chartStart: { type: String },
|
||||
chartEnd: { type: String },
|
||||
rowLabelWidth: { type: String },
|
||||
rowLabelWidth: { type: Number },
|
||||
highlightedHours: { type: Array, default: () => [] },
|
||||
precision: { type: String },
|
||||
timeCount: { type: Number },
|
||||
gridSize: { type: Number },
|
||||
},
|
||||
|
||||
computed: {
|
||||
allChildPoints() {
|
||||
let momentChartStart = moment(this.chartStart)
|
||||
let momentChartEnd = moment(this.chartEnd)
|
||||
let start = moment(this.chartStart)
|
||||
let end = moment(this.chartEnd)
|
||||
let res = []
|
||||
while (momentChartStart.isSameOrBefore(momentChartEnd)) {
|
||||
while (start.isBefore(end)) {
|
||||
switch (this.precision) {
|
||||
case 'day':
|
||||
res.push(momentChartStart.date())
|
||||
momentChartStart.add(1, 'hour')
|
||||
res.push(start.hour())
|
||||
start.add(1, 'hour')
|
||||
break
|
||||
case 'month':
|
||||
res.push(momentChartStart.date())
|
||||
momentChartStart.add(1, 'day')
|
||||
res.push(start.date())
|
||||
start.add(1, 'day').hour(23)
|
||||
break
|
||||
}
|
||||
}
|
||||
@@ -62,21 +62,23 @@ export default {
|
||||
.g-grid-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
/* left: 30%; must correspond to width of row title */
|
||||
/* width: 70%; */
|
||||
height: calc(100% - 23px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.g-grid-line {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #eaeaea;
|
||||
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: #90caf9;
|
||||
box-shadow: 0px 0px 0px 1px #90caf9;
|
||||
background: #dcefff;
|
||||
}
|
||||
</style>
|
||||
|
||||
+23
-28
@@ -6,14 +6,13 @@
|
||||
v-on="$listeners"
|
||||
>
|
||||
<div class="g-gantt-row-label" :style="rowLabelStyle">
|
||||
<slot name="label">
|
||||
{{ label }}
|
||||
</slot>
|
||||
<span :title="label">
|
||||
<slot name="label">{{ label }}</slot>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="g-gantt-row-bars-container"
|
||||
ref="barContainer"
|
||||
:style="barsContainerStyle"
|
||||
@dragover="onDragover($event)"
|
||||
@dragleave="onDragleave($event)"
|
||||
@drop="onDrop($event)"
|
||||
@@ -51,11 +50,10 @@ export default {
|
||||
props: {
|
||||
label: { type: String, default: 'Row' },
|
||||
bars: { type: Array, default: () => [] },
|
||||
highlightOnHover: Boolean,
|
||||
highlightOnHover: { type: Boolean },
|
||||
},
|
||||
|
||||
inject: [
|
||||
'ganttChartProps',
|
||||
'getThemeColors',
|
||||
'getTimeCount',
|
||||
'getChartStart',
|
||||
@@ -76,20 +74,12 @@ export default {
|
||||
computed: {
|
||||
rowLabelStyle() {
|
||||
return {
|
||||
width: this.ganttChartProps.rowLabelWidth,
|
||||
height: this.ganttChartProps.rowHeight,
|
||||
width: `${this.$parent.rowLabelWidth}px`,
|
||||
// height: `${this.$parent.rowHeight}px`,
|
||||
background: this.$parent.themeColors.ternary,
|
||||
color: this.$parent.themeColors.text,
|
||||
}
|
||||
},
|
||||
|
||||
barsContainerStyle() {
|
||||
return {
|
||||
width: `${
|
||||
100 /*- this.ganttChartProps.rowLabelWidth.replace('%', '')*/
|
||||
}%`,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
@@ -124,8 +114,8 @@ export default {
|
||||
)
|
||||
let bar = this.bars.find((bar) =>
|
||||
time.isBetween(
|
||||
bar[this.ganttChartProps.barStartKey],
|
||||
bar[this.ganttChartProps.barEndKey]
|
||||
bar[this.$parent.barStartKey],
|
||||
bar[this.$parent.barEndKey]
|
||||
)
|
||||
)
|
||||
this.$emit('drop', { event: e, bar, time: time.format(this.timeFormat) })
|
||||
@@ -142,16 +132,16 @@ export default {
|
||||
this.timeUnit
|
||||
)
|
||||
let bar = {}
|
||||
bar[this.ganttChartProps.barStartKey] = time.format()
|
||||
bar[this.ganttChartProps.barEndKey] = time
|
||||
bar[this.$parent.barStartKey] = time.format()
|
||||
bar[this.$parent.barEndKey] = time
|
||||
.add(this.getDefaultBarLength(), this.timeUnit)
|
||||
.format()
|
||||
|
||||
bar.ganttBarConfig = { handles: true }
|
||||
this.bars.push(bar)
|
||||
this.bars.sort((first, second) =>
|
||||
moment(first[this.ganttChartProps.barStartKey]).diff(
|
||||
second[this.ganttChartProps.barStartKey]
|
||||
moment(first[this.$parent.barStartKey]).diff(
|
||||
second[this.$parent.barStartKey]
|
||||
)
|
||||
)
|
||||
},
|
||||
@@ -176,7 +166,7 @@ export default {
|
||||
},
|
||||
|
||||
watch: {
|
||||
'ganttChartProps.rowLabelWidth': function () {
|
||||
'$parent.rowLabelWidth': function () {
|
||||
this.barContainer = this.$refs.barContainer.getBoundingClientRect()
|
||||
},
|
||||
},
|
||||
@@ -193,23 +183,28 @@ export default {
|
||||
|
||||
.g-gantt-row > .g-gantt-row-label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
/* justify-content: center; */
|
||||
align-items: center;
|
||||
/* width: 20%; */
|
||||
background: #e8e8e8;
|
||||
color: #424242;
|
||||
font-size: 0.9em;
|
||||
z-index: 3;
|
||||
overflow: hidden;
|
||||
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;
|
||||
/* width: 70%; */
|
||||
/* border-top: 1px solid #eaeaea; */
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
+17
-18
@@ -2,13 +2,14 @@
|
||||
<div
|
||||
ref="g-timeaxis"
|
||||
class="g-timeaxis"
|
||||
:style="{
|
||||
width: `${timeCount * 30 + parseInt(rowLabelWidth.replace('px', ''))}px`,
|
||||
}"
|
||||
:style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }"
|
||||
>
|
||||
<div
|
||||
class="g-timeaxis-empty-space"
|
||||
:style="{ minWidth: rowLabelWidth, background: themeColors.secondary }"
|
||||
:style="{
|
||||
minWidth: `${rowLabelWidth}px`,
|
||||
background: themeColors.secondary,
|
||||
}"
|
||||
/>
|
||||
<div class="g-timeaxis-days">
|
||||
<div
|
||||
@@ -30,7 +31,7 @@
|
||||
:key="childPoint.fullDatetime"
|
||||
class="g-timeaxis-hour"
|
||||
:style="{
|
||||
width: '30px',
|
||||
width: `${gridSize}px`,
|
||||
background:
|
||||
index % 2 === 0 ? themeColors.primary : themeColors.secondary,
|
||||
color: themeColors.text,
|
||||
@@ -60,13 +61,14 @@ export default {
|
||||
props: {
|
||||
chartStart: { type: String },
|
||||
chartEnd: { type: String },
|
||||
rowLabelWidth: { type: String },
|
||||
rowLabelWidth: { type: Number },
|
||||
timemarkerOffset: { type: Number, default: 0 },
|
||||
locale: { type: String },
|
||||
themeColors: { type: Object },
|
||||
precision: { type: String },
|
||||
timeFormat: { type: String },
|
||||
timeCount: { type: Number },
|
||||
gridSize: { type: Number },
|
||||
},
|
||||
|
||||
data() {
|
||||
@@ -192,12 +194,14 @@ export default {
|
||||
moveTimemarker(event) {
|
||||
const chart = this.timemarker.closest('.g-gantt-chart')
|
||||
if (!chart) return
|
||||
this.timemarker.style.left =
|
||||
let pos =
|
||||
chart.scrollLeft +
|
||||
event.clientX -
|
||||
this.timemarkerOffset -
|
||||
this.horizontalAxisContainer.left +
|
||||
'px'
|
||||
this.horizontalAxisContainer.left
|
||||
if (pos > this.horizontalAxisContainer.width)
|
||||
pos = this.horizontalAxisContainer.width
|
||||
this.timemarker.style.left = `${pos}px`
|
||||
},
|
||||
|
||||
onWindowResize() {
|
||||
@@ -222,10 +226,9 @@ export default {
|
||||
|
||||
monthFormatted(point) {
|
||||
// do not display month text if the month is smaller than x%
|
||||
// return point.widthPercentage >= (1 / 32) * 100
|
||||
// ? moment().locale(this.locale).localeData().months(point.value)
|
||||
// : ''
|
||||
return moment(point.value).locale(this.locale).format(this.monthFormat)
|
||||
return point.widthPercentage >= (3 / 32) * 100
|
||||
? moment(point.value).locale(this.locale).format(this.monthFormat)
|
||||
: ''
|
||||
},
|
||||
|
||||
dayFormatted(point) {
|
||||
@@ -260,7 +263,6 @@ export default {
|
||||
}
|
||||
|
||||
.g-timeaxis > .g-timeaxis-empty-space {
|
||||
/* width: 20%; this has to be as wide as .ganttRowTitle in VGanttastic.css */
|
||||
min-height: 100%;
|
||||
background: #f5f5f5;
|
||||
z-index: 5;
|
||||
@@ -270,7 +272,6 @@ export default {
|
||||
|
||||
.g-timeaxis > .g-timeaxis-days {
|
||||
position: relative;
|
||||
/* width: 80%; */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -308,7 +309,6 @@ export default {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
opacity: 0.5;
|
||||
/* width: 100%; */
|
||||
}
|
||||
|
||||
.g-timeaxis-hour-pin {
|
||||
@@ -324,5 +324,4 @@ export default {
|
||||
width: 3px;
|
||||
background: black;
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>
|
||||
@@ -1,103 +1,102 @@
|
||||
export default {
|
||||
|
||||
"default": {
|
||||
primary: "#eeeeee",
|
||||
secondary: "#E0E0E0",
|
||||
ternary: "#F5F5F5",
|
||||
hoverHighlight: "rgba(204, 216, 219, 0.5)",
|
||||
text: "#404040",
|
||||
background: "white"
|
||||
},
|
||||
|
||||
"creamy": {
|
||||
primary:"#ffe8d9",
|
||||
secondary: "#fcdcc5",
|
||||
ternary:"#fff6f0",
|
||||
hoverHighlight: "rgba(230, 221, 202, 0.5)",
|
||||
text: "#542d05",
|
||||
background: "white"
|
||||
default: {
|
||||
primary: '#eeeeee',
|
||||
secondary: '#E0E0E0',
|
||||
ternary: '#F5F5F5',
|
||||
hoverHighlight: 'rgba(204, 216, 219, 0.5)',
|
||||
text: '#404040',
|
||||
background: 'white'
|
||||
},
|
||||
|
||||
"crimson":{
|
||||
primary:"#a82039",
|
||||
secondary: "#c41238",
|
||||
ternary:"#db4f56",
|
||||
hoverHighlight: "rgba(196, 141, 141, 0.5)",
|
||||
text: "white",
|
||||
background: "white"
|
||||
creamy: {
|
||||
primary: '#ffe8d9',
|
||||
secondary: '#fcdcc5',
|
||||
ternary: '#fff6f0',
|
||||
hoverHighlight: 'rgba(230, 221, 202, 0.5)',
|
||||
text: '#542d05',
|
||||
background: 'white'
|
||||
},
|
||||
|
||||
"dark": {
|
||||
primary:"#404040",
|
||||
secondary: "#303030",
|
||||
ternary:"#353535",
|
||||
hoverHighlight: "rgba(159, 160, 161, 0.5)",
|
||||
text: "white",
|
||||
background: "#525252",
|
||||
toast: "#1f1f1f"
|
||||
crimson: {
|
||||
primary: '#a82039',
|
||||
secondary: '#c41238',
|
||||
ternary: '#db4f56',
|
||||
hoverHighlight: 'rgba(196, 141, 141, 0.5)',
|
||||
text: 'white',
|
||||
background: 'white'
|
||||
},
|
||||
|
||||
"flare": {
|
||||
primary:"#e08a38",
|
||||
secondary: "#e67912",
|
||||
ternary:"#5e5145",
|
||||
hoverHighlight: "rgba(196, 141, 141, 0.5)",
|
||||
text: "white",
|
||||
background: "white"
|
||||
dark: {
|
||||
primary: '#404040',
|
||||
secondary: '#303030',
|
||||
ternary: '#353535',
|
||||
hoverHighlight: 'rgba(159, 160, 161, 0.5)',
|
||||
text: 'white',
|
||||
background: '#525252',
|
||||
toast: '#1f1f1f'
|
||||
},
|
||||
|
||||
"fuchsia": {
|
||||
primary:"#de1d5a",
|
||||
secondary: "#b50b41",
|
||||
ternary:"#ff7da6",
|
||||
hoverHighlight: "rgba(196, 141, 141, 0.5)",
|
||||
text: "white",
|
||||
background: "white"
|
||||
flare: {
|
||||
primary: '#e08a38',
|
||||
secondary: '#e67912',
|
||||
ternary: '#5e5145',
|
||||
hoverHighlight: 'rgba(196, 141, 141, 0.5)',
|
||||
text: 'white',
|
||||
background: 'white'
|
||||
},
|
||||
|
||||
"grove": {
|
||||
primary:"#3d9960",
|
||||
secondary: "#288542",
|
||||
ternary:"#72b585",
|
||||
hoverHighlight: "rgba(160, 219, 171, 0.5)",
|
||||
text: "white",
|
||||
background: "white"
|
||||
fuchsia: {
|
||||
primary: '#de1d5a',
|
||||
secondary: '#b50b41',
|
||||
ternary: '#ff7da6',
|
||||
hoverHighlight: 'rgba(196, 141, 141, 0.5)',
|
||||
text: 'white',
|
||||
background: 'white'
|
||||
},
|
||||
|
||||
"material-blue": {
|
||||
primary:"#0D47A1",
|
||||
secondary: "#1565C0",
|
||||
ternary:"#42a5f5",
|
||||
hoverHighlight: "rgba(110, 165, 196, 0.5)",
|
||||
text: "white",
|
||||
background: "white"
|
||||
grove: {
|
||||
primary: '#3d9960',
|
||||
secondary: '#288542',
|
||||
ternary: '#72b585',
|
||||
hoverHighlight: 'rgba(160, 219, 171, 0.5)',
|
||||
text: 'white',
|
||||
background: 'white'
|
||||
},
|
||||
|
||||
"sky": {
|
||||
primary:"#b5e3ff",
|
||||
secondary: "#a1d6f7",
|
||||
ternary:"#d6f7ff",
|
||||
hoverHighlight: "rgba(193, 202, 214, 0.5)",
|
||||
text: "#022c47",
|
||||
background: "white"
|
||||
'material-blue': {
|
||||
primary: '#0D47A1',
|
||||
secondary: '#1565C0',
|
||||
ternary: '#42a5f5',
|
||||
hoverHighlight: 'rgba(110, 165, 196, 0.5)',
|
||||
text: 'white',
|
||||
background: 'white'
|
||||
},
|
||||
|
||||
"slumber":{
|
||||
primary:"#2c2e36",
|
||||
secondary: "#2f3447",
|
||||
ternary:"#35394d",
|
||||
hoverHighlight: "rgba(179, 162, 127, 0.5)",
|
||||
text: "#ffe0b3",
|
||||
background: "#38383b",
|
||||
toast:"#1f1f1f"
|
||||
sky: {
|
||||
primary: '#b5e3ff',
|
||||
secondary: '#a1d6f7',
|
||||
ternary: '#d6f7ff',
|
||||
hoverHighlight: 'rgba(193, 202, 214, 0.5)',
|
||||
text: '#022c47',
|
||||
background: 'white'
|
||||
},
|
||||
|
||||
"vue": {
|
||||
primary:"#258a5d",
|
||||
secondary: "#41B883",
|
||||
ternary:"#35495E",
|
||||
hoverHighlight: "rgba(160, 219, 171, 0.5)",
|
||||
text: "white",
|
||||
background: "white"
|
||||
slumber: {
|
||||
primary: '#2c2e36',
|
||||
secondary: '#2f3447',
|
||||
ternary: '#35394d',
|
||||
hoverHighlight: 'rgba(179, 162, 127, 0.5)',
|
||||
text: '#ffe0b3',
|
||||
background: '#38383b',
|
||||
toast: '#1f1f1f'
|
||||
},
|
||||
|
||||
vue: {
|
||||
primary: '#258a5d',
|
||||
secondary: '#41B883',
|
||||
ternary: '#35495E',
|
||||
hoverHighlight: 'rgba(160, 219, 171, 0.5)',
|
||||
text: 'white',
|
||||
background: 'white'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+16
-18
@@ -5,6 +5,7 @@
|
||||
:chart-start="chartStart"
|
||||
:chart-end="chartEnd"
|
||||
:grid="grid"
|
||||
:grid-size="gridSize"
|
||||
:hide-timeaxis="hideTimeaxis"
|
||||
:push-on-overlap="pushOnOverlap"
|
||||
snap-back-on-overlap
|
||||
@@ -18,18 +19,17 @@
|
||||
barEndKey="myEnd"
|
||||
@dragend-bar="onDragend($event)"
|
||||
>
|
||||
<template v-for="row in rowList">
|
||||
<g-gantt-row
|
||||
:key="row.label"
|
||||
:label="row.label"
|
||||
:bars="row.barList"
|
||||
:highlight-on-hover="highlightOnHover"
|
||||
>
|
||||
<template #bar-label="{ bar }">
|
||||
<span>{{ bar.label }}</span>
|
||||
</template>
|
||||
</g-gantt-row>
|
||||
</template>
|
||||
<g-gantt-row
|
||||
v-for="row in rowList"
|
||||
:key="row.label"
|
||||
:label="row.label"
|
||||
:bars="row.barList"
|
||||
:highlight-on-hover="highlightOnHover"
|
||||
>
|
||||
<template #bar-label="{ bar }">
|
||||
<span>{{ bar.label }}</span>
|
||||
</template>
|
||||
</g-gantt-row>
|
||||
</g-gantt-chart>
|
||||
</div>
|
||||
</template>
|
||||
@@ -46,15 +46,16 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
chartStart: '2020-03-02 00:00',
|
||||
chartEnd: '2020-03-31 10:00',
|
||||
chartEnd: '2020-03-10 10:00',
|
||||
precision: 'day',
|
||||
pushOnOverlap: true,
|
||||
isMagnetic: true,
|
||||
grid: true,
|
||||
gridSize: 50,
|
||||
rowHeight: 40,
|
||||
rowLabelWidth: '200px',
|
||||
rowLabelWidth: 200,
|
||||
hideTimeaxis: false,
|
||||
highlightOnHover: false,
|
||||
highlightOnHover: true,
|
||||
hours: [...Array(24).keys()],
|
||||
highlightedHours: [10, 12],
|
||||
showContextmenu: false,
|
||||
@@ -220,6 +221,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user