From c562d6ef7cf4f817f31020094f2ac7fa161b7eec Mon Sep 17 00:00:00 2001 From: Sergey Solodyagin Date: Tue, 19 Oct 2021 14:39:10 +0300 Subject: [PATCH] chore: restructuring --- .eslintignore | 1 - .gitignore | 10 +- .prettierrc.js | 12 +- README.md | 4 +- {src => lib}/components/GGanttBar.vue | 143 +-------- {src => lib}/components/GGanttChart.vue | 54 +--- {src => lib}/components/GGanttGrid.vue | 35 +-- {src => lib}/components/GGanttRow.vue | 57 +--- {src => lib}/components/GGanttTimeaxis.vue | 108 +------ .../components}/GanttasticThemeColors.js | 0 lib/index.js | 19 ++ lib/scss/vue-ganttastic.scss | 274 ++++++++++++++++++ package.json | 6 +- src/{demo => }/App.vue | 121 ++++---- src/lib.js | 4 - src/main.js | 8 +- vue.config.js | 11 +- 17 files changed, 434 insertions(+), 433 deletions(-) rename {src => lib}/components/GGanttBar.vue (89%) rename {src => lib}/components/GGanttChart.vue (94%) rename {src => lib}/components/GGanttGrid.vue (77%) rename {src => lib}/components/GGanttRow.vue (82%) rename {src => lib}/components/GGanttTimeaxis.vue (79%) rename {src/assets => lib/components}/GanttasticThemeColors.js (100%) create mode 100644 lib/index.js create mode 100644 lib/scss/vue-ganttastic.scss rename src/{demo => }/App.vue (85%) delete mode 100644 src/lib.js diff --git a/.eslintignore b/.eslintignore index 0f0afa3..5df41e2 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,2 @@ -src/demo demo dist diff --git a/.gitignore b/.gitignore index 403adbc..ef726f3 100644 --- a/.gitignore +++ b/.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 diff --git a/.prettierrc.js b/.prettierrc.js index 980fef1..f1080ec 100644 --- a/.prettierrc.js +++ b/.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 } diff --git a/README.md b/README.md index c6484a9..cd225da 100644 --- a/README.md +++ b/README.md @@ -58,8 +58,8 @@ The following code showcases a simple usage example in a .vue SFC (Single File C - - diff --git a/src/components/GGanttChart.vue b/lib/components/GGanttChart.vue similarity index 94% rename from src/components/GGanttChart.vue rename to lib/components/GGanttChart.vue index 6021ff1..e04745b 100644 --- a/src/components/GGanttChart.vue +++ b/lib/components/GGanttChart.vue @@ -39,18 +39,18 @@ - - diff --git a/src/components/GGanttGrid.vue b/lib/components/GGanttGrid.vue similarity index 77% rename from src/components/GGanttGrid.vue rename to lib/components/GGanttGrid.vue index e2a50d3..fae9ac2 100644 --- a/src/components/GGanttGrid.vue +++ b/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 - }, - }, + } + } } - - diff --git a/src/components/GGanttRow.vue b/lib/components/GGanttRow.vue similarity index 82% rename from src/components/GGanttRow.vue rename to lib/components/GGanttRow.vue index a46da80..940d702 100644 --- a/src/components/GGanttRow.vue +++ b/lib/components/GGanttRow.vue @@ -37,20 +37,20 @@ - - diff --git a/src/components/GGanttTimeaxis.vue b/lib/components/GGanttTimeaxis.vue similarity index 79% rename from src/components/GGanttTimeaxis.vue rename to lib/components/GGanttTimeaxis.vue index dc95269..c2bc7e7 100644 --- a/src/components/GGanttTimeaxis.vue +++ b/lib/components/GGanttTimeaxis.vue @@ -8,7 +8,7 @@ class="g-timeaxis-empty-space" :style="{ minWidth: `${rowLabelWidth}px`, - background: themeColors.secondary, + background: themeColors.secondary }" />
@@ -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' }) } - }, + } }