tg-ganttchart 0.0.7 → 0.0.8

package/src/style.js

@@ -0,0 +1,398 @@
+
+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',
+      'border-right-color': '#E5E7EB',
+      'border-right-style': 'solid',
+      position: 'relative',
+      'box-sizing': 'border-box'
+    },
+    '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',
+      'text-align': 'center',
+      'white-space': 'nowrap',
+      'overflow': 'hidden',
+      'text-overflow': 'ellipsis',
+      'max-width': '100%',
+      'width': '100%',
+      'box-sizing': 'border-box'
+    },
+    'calendar-row-text--month': {},
+    'calendar-row-text--day': {},
+    'calendar-row-text--hour': {},
+    'calendar-row-text--quarter': {},
+    'calendar-row-text--week': {},
+    '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'
+    },
+    'task-list-expander-arrow': {
+      fill: 'none',
+      stroke: '#999999',
+      'stroke-width': '2',
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round'
+    },
+    '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'
+    },
+    'chart-expander-arrow': {
+      fill: 'none',
+      stroke: '#999999',
+      'stroke-width': '2',
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round'
+    },
+    '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: 'flex',
+      'align-items': 'center',
+      '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'
+    },
+    'task-list-item-content': {
+      'display': 'flex',
+      'align-items': 'center',
+      'width': '100%',
+      'min-width': '0'
+    },
+    'task-list-item-icon': {
+      'display': 'flex',
+      'align-items': 'center',
+      'margin-right': '6px',
+      'flex-shrink': '0',
+      'width': '14px',
+      'height': '14px'
+    },
+    'task-list-item-text': {
+      'flex': '1',
+      'min-width': '0',
+      'overflow': 'hidden',
+      'text-overflow': 'ellipsis',
+      'white-space': 'nowrap'
+    },
+    'grid-lines': {},
+    'grid-line-horizontal': {
+      stroke: '#F3F4F6',
+      'stroke-width': 1
+    },
+    'grid-line-vertical': {
+      stroke: '#E5E7EB',
+      '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 #E5E7EB',
+      'position': 'relative',
+      'z-index': 1
+    },
+    'chart-graph-container': {
+      'user-select': 'none',
+      overflow: 'hidden',
+      'max-width': '100%',
+      'border-right': '1px solid #E5E7EB',
+      'position': 'relative',
+      'z-index': 0
+    },
+    'chart-area': {},
+    'chart-graph': {
+      overflow: 'hidden'
+    },
+    'chart-row-text-wrapper': {},
+    'chart-row-text': {
+      background: '#ffffff',
+      'border-radius': '4px',
+      'font-family': fontFamily,
+      'font-size': '11px',
+      'font-weight': '500',
+      color: '#374151',
+      height: '100%',
+      display: 'inline-block',
+      'box-shadow': '0 1px 3px rgba(0, 0, 0, 0.1)',
+      'border': '1px solid #E5E7EB'
+    },
+    'chart-row-text-content': {
+      padding: '2px 8px',
+      'white-space': 'nowrap',
+      'overflow': 'hidden',
+      'text-overflow': 'ellipsis',
+      'max-width': '120px'
+    },
+    '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-epic-wrapper': {},
+    'chart-row-epic': {},
+    'chart-row-epic-polygon': {
+      stroke: '#8B5CF6',
+      'stroke-width': 2,
+      fill: '#8B5CF6',
+      'fill-opacity': 0.9
+    },
+    'chart-row-subtask-wrapper': {},
+    'chart-row-subtask': {},
+    'chart-row-subtask-polygon': {
+      stroke: '#3B82F6',
+      'stroke-width': 1,
+      fill: '#3B82F6',
+      'fill-opacity': 0.9
+    },
+    'chart-row-story-wrapper': {},
+    'chart-row-story': {},
+    'chart-row-story-polygon': {
+      stroke: '#86EFAC',
+      'stroke-width': 1,
+      fill: '#86EFAC',
+      'fill-opacity': 0.9
+    },
+    'chart-row-milestone-wrapper': {},
+    'chart-row-milestone': {},
+    'chart-row-milestone-polygon': {
+      stroke: '#CD5C5C',
+      'stroke-width': 2,
+      fill: '#CD5C5C',
+      'fill-opacity': 0.9
+    },
+    'chart-row-task-wrapper': {},
+    'chart-row-task': {},
+    'chart-row-task-polygon': {
+      stroke: '#3B82F6',
+      'stroke-width': 1,
+      fill: '#3B82F6',
+      'fill-opacity': 0.9
+    },
+    '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/vue.config.js

@@ -0,0 +1,42 @@
+const path = require('path');
+const Dotenv = require('dotenv-webpack');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const isBundleAnalyze = false; 
+module.exports = {
+  lintOnSave: false,
+  filenameHashing: false,
+  configureWebpack: {    
+    entry:'./src/index.js',
+    resolve: {
+      extensions: ['.js', '.vue'],
+      alias: {
+        'vue$': 'vue/dist/vue.esm.js',
+        '@': path.resolve(__dirname, 'src')
+      }
+    },
+    output: {
+      filename:(format)=>`index.${format}.js`,
+      path: path.resolve(__dirname, 'dist'),       
+     },
+    performance:{
+        hints: false,
+        maxEntrypointSize: 512000,
+        maxAssetSize: 512000
+    },
+    plugins: [
+      new Dotenv(),
+      ...isBundleAnalyze ? [ new BundleAnalyzerPlugin() ] : []
+    ],
+    module: {
+      rules: [
+        {
+          test: /\.mjs$/,
+          include: /node_modules/,
+          type: "javascript/auto",
+          use: [],
+        }
+      ] 
+    }   
+  },
+};
+

package/dist/demo.html

@@ -1 +0,0 @@
-<!doctype html><meta charset="utf-8"><title>tgganttchart demo</title><script src="./tgganttchart.umd.js"></script><link rel="stylesheet" href="./tgganttchart.css"><script>console.log(tgganttchart)</script>