tg-ganttchart 0.0.7 → 0.0.8

package/src/components/style.js

@@ -0,0 +1,308 @@
+
+export default function getStyle(fontSize = '12px', fontFamily = 'Arial, sans-serif') {
+  return {
+    fontSize,
+    fontFamily,
+    'main-view': {
+      background: '#FFFFFF'
+    },
+    'main-container-wrapper': {
+      overflow: 'hidden',
+      'border-top': '1px solid #eee',
+      'border-bottom': '1px solid #eee'
+    },
+    'main-container': {
+      float: 'left',
+      'max-width': '100%'
+    },
+    'main-view-container': {},
+    container: {
+      display: 'flex',
+      'max-width': '100%',
+      height: '100%'
+    },
+    'calendar-wrapper': {
+      'user-select': 'none'
+    },
+    calendar: {
+      width: '100%',
+      background: '#f3f5f7',
+      display: 'block'
+    },
+    'calendar-row': {
+      display: 'flex',
+      'justify-content': 'space-evenly'
+    },
+    'calendar-row--month': {},
+    'calendar-row--day': {},
+    'calendar-row--hour': {
+      'border-bottom': '1px solid #eee'
+    },
+    'calendar-row-rect': {
+      background: 'transparent',
+      display: 'flex'
+    },
+    'calendar-row-rect--month': {},
+    'calendar-row-rect--day': {},
+    'calendar-row-rect--hour': {},
+    'calendar-row-rect-child': {
+      display: 'block',
+      'border-right-width': '1px', // Calendar
+      'border-right-color': '#dadada',
+      'border-right-style': 'solid',
+      position: 'relative'
+    },
+    'calendar-row-rect-child--month': {},
+    'calendar-row-rect-child--day': { 'text-align': 'center' },
+    'calendar-row-rect-child--hour': { 'text-align': 'center' },
+    'calendar-row-text': {
+      'font-family': fontFamily, // GanttElastic
+      'font-size': fontSize, //GanttElastic
+      color: '#606060',
+      display: 'inline-block',
+      position: 'relative'
+    },
+    'calendar-row-text--month': {},
+    'calendar-row-text--day': {},
+    'calendar-row-text--hour': {},
+    'task-list-wrapper': {},
+    'task-list': { background: 'transparent', 'border-color': '#eee' },
+    'task-list-header': {
+      display: 'flex',
+      'user-select': 'none',
+      'vertical-align': 'middle',
+      'border-bottom': '1px solid #eee',
+      'border-left': '1px solid #eee'
+    },
+    'task-list-header-column': {
+      'border-left': '1px solid #00000050',
+      'box-sizing': 'border-box',
+      display: 'flex',
+      background: '#f3f5f7',
+      'border-color': 'transparent'
+    },
+    'task-list-expander-wrapper': {
+      display: 'inline-flex',
+      'flex-shrink': '0',
+      'box-sizing': 'border-box',
+      margin: '0 0 0 10px'
+    },
+    'task-list-expander-content': {
+      display: 'inline-flex',
+      cursor: 'pointer',
+      margin: 'auto 0px',
+      'box-sizing': 'border-box',
+      'user-select': 'none'
+    },
+    'task-list-expander-line': {
+      fill: 'transparent',
+      stroke: '#000000',
+      'stroke-width': '1',
+      'stroke-linecap': 'round'
+    },
+    'task-list-expander-border': {
+      fill: '#ffffffa0',
+      stroke: '#000000A0'
+    },
+    'chart-expander-wrapper': {
+      display: 'block',
+      'line-height': '1',
+      'box-sizing': 'border-box',
+      margin: '0'
+    },
+    'chart-expander-content': {
+      display: 'inline-flex',
+      cursor: 'pointer',
+      margin: 'auto 0px',
+      'box-sizing': 'border-box',
+      'user-select': 'none'
+    },
+    'chart-expander-line': {
+      fill: 'transparent',
+      stroke: '#000000',
+      'stroke-width': '1',
+      'stroke-linecap': 'round'
+    },
+    'chart-expander-border': {
+      fill: '#ffffffa0',
+      stroke: '#000000A0'
+    },
+    'task-list-container': {},
+    'task-list-header-label': {
+      overflow: 'hidden',
+      'text-overflow': 'ellipsis',
+      'font-family': fontFamily,
+      'font-size': fontSize,
+      'box-sizing': 'border-box',
+      margin: 'auto 6px',
+      'flex-grow': '1',
+      'vertical-align': 'middle'
+    },
+    'task-list-header-resizer-wrapper': {
+      background: 'transparent',
+      height: '100%',
+      width: '6px',
+      cursor: 'col-resize',
+      display: 'inline-flex',
+      'vertical-align': 'center'
+    },
+    'task-list-header-resizer': { margin: 'auto 0px' },
+    'task-list-header-resizer-dot': {
+      width: '3px',
+      height: '3px',
+      background: '#ddd',
+      'border-radius': '100%',
+      margin: '4px 0px'
+    },
+    'task-list-items': {
+      overflow: 'hidden'
+    },
+    'task-list-item': {
+      'border-top': '1px solid #eee',
+      'border-right': '1px solid #eee',
+      'box-sizing': 'border-box',
+      display: 'flex',
+      background: 'transparent'
+    },
+    'task-list-item-column': {
+      display: 'inline-flex',
+      'flex-shrink': '0',
+      'border-left': '1px solid #00000050',
+      'box-sizing': 'border-box',
+      'border-color': '#eee'
+    },
+    'task-list-item-value-wrapper': {
+      overflow: 'hidden',
+      display: 'flex',
+      width: '100%'
+    },
+    'task-list-item-value-container': {
+      margin: 'auto 0px',
+      overflow: 'hidden'
+    },
+    'task-list-item-value': {
+      display: 'block',
+      'flex-shrink': '100',
+      'font-family': fontFamily,
+      'font-size': fontSize,
+      'margin-top': 'auto',
+      'margin-bottom': 'auto',
+      'margin-left': '6px', // TaskList
+      'margin-right': '6px',
+      overflow: 'hidden',
+      'text-overflow': 'ellipsis',
+      'line-height': '1.5em',
+      'word-break': 'keep-all',
+      'white-space': 'nowrap',
+      color: '#606060',
+      background: '#FFFFFF'
+    },
+    'grid-lines': {},
+    'grid-line-horizontal': {
+      stroke: '#00000010',
+      'stroke-width': 1
+    },
+    'grid-line-vertical': {
+      stroke: '#00000010',
+      'stroke-width': 1
+    },
+    'grid-line-time': {
+      stroke: '#FF000080',
+      'stroke-width': 1
+    },
+    chart: {
+      'user-select': 'none',
+      overflow: 'hidden'
+    },
+    'chart-calendar-container': {
+      'user-select': 'none',
+      overflow: 'hidden',
+      'max-width': '100%',
+      'border-right': '1px solid #eee'
+    },
+    'chart-graph-container': {
+      'user-select': 'none',
+      overflow: 'hidden',
+      'max-width': '100%',
+      'border-right': '1px solid #eee'
+    },
+    'chart-area': {},
+    'chart-graph': {
+      overflow: 'hidden'
+    },
+    'chart-row-text-wrapper': {},
+    'chart-row-text': {
+      background: '#ffffffa0',
+      'border-radius': '10px',
+      'font-family': fontFamily,
+      'font-size': fontSize,
+      'font-weight': 'normal',
+      color: '#000000a0',
+      height: '100%',
+      display: 'inline-block'
+    },
+    'chart-row-text-content': {
+      padding: '0px 6px'
+    },
+    'chart-row-text-content--text': {},
+    'chart-row-text-content--html': {},
+    'chart-row-wrapper': {},
+    'chart-row-bar-wrapper': {},
+    'chart-row-bar': {},
+    'chart-row-bar-polygon': {
+      stroke: '#E74C3C',
+      'stroke-width': 1,
+      fill: '#F75C4C'
+    },
+    'chart-row-project-wrapper': {},
+    'chart-row-project': {},
+    'chart-row-project-polygon': {},
+    'chart-row-milestone-wrapper': {},
+    'chart-row-milestone': {},
+    'chart-row-milestone-polygon': {},
+    'chart-row-task-wrapper': {},
+    'chart-row-task': {},
+    'chart-row-task-polygon': {},
+    'chart-row-progress-bar-wrapper': {},
+    'chart-row-progress-bar': {},
+    'chart-row-progress-bar-line': {
+      stroke: '#ffffff25',
+      'stroke-width': 20
+    },
+    'chart-row-progress-bar-solid': {
+      fill: '#0EAC51',
+      height: '20%'
+    },
+    'chart-row-progress-bar-pattern': {
+      fill: 'url(#diagonalHatch)',
+      transform: 'translateY(0.1) scaleY(0.8)'
+    },
+    'chart-row-progress-bar-outline': {
+      stroke: '#E74C3C',
+      'stroke-width': 1
+    },
+    'chart-dependency-lines-wrapper': {},
+    'chart-dependency-lines-path': {
+      fill: 'transparent',
+      stroke: '#FFa00090',
+      'stroke-width': 2
+    },
+    'chart-scroll-container': {},
+    'chart-scroll-container--horizontal': {
+      overflow: 'auto',
+      'max-width': '100%'
+    },
+    'chart-scroll-container--vertical': {
+      'overflow-y': 'auto',
+      'overflow-x': 'hidden',
+      'max-height': '100%',
+      float: 'right'
+    },
+    'chart-days-highlight-rect': {
+      fill: '#f3f5f780'
+    },
+    'slot-header-beforeOptions': {
+      display: 'inline-block'
+    }
+  };
+}

package/src/index.js

@@ -0,0 +1,12 @@
+
+import ganttChart from './components/GanttElastic.vue';
+export default {
+    install(app, options = {}) {
+        app.component('tg-ganttchart', ganttChart);
+     },
+};
+// if (typeof window !== 'undefined' && window.Vue) {
+//     window.Vue.use(TgList);
+//   }
+
+export { ganttChart };

package/src/main.js

@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+new Vue({
+    render: h => h(App),
+}).$mount('#app');