tg-ganttchart 0.0.8 → 0.0.9

package/src/components/TaskList/ItemColumn.vue

@@ -1,212 +0,0 @@
-<template>
-  <div class="gantt-elastic__task-list-item-column" :style="itemColumnStyle">
-    <div class="gantt-elastic__task-list-item-value-wrapper" :style="wrapperStyle">
-      <slot></slot>
-      <div class="gantt-elastic__task-list-item-value-container" :style="containerStyle">
-        <div
-          v-if="!html"
-          class="gantt-elastic__task-list-item-value"
-          :style="valueStyle"
-          @click="emitEvent('click', $event)"
-          @mouseenter="emitEvent('mouseenter', $event)"
-          @mouseover="emitEvent('mouseover', $event)"
-          @mouseout="emitEvent('mouseout', $event)"
-          @mousemove="emitEvent('mousemove', $event)"
-          @mousedown="emitEvent('mousedown', $event)"
-          @mouseup="emitEvent('mouseup', $event)"
-          @mousewheel="emitEvent('mousewheel', $event)"
-          @touchstart="emitEvent('touchstart', $event)"
-          @touchmove="emitEvent('touchmove', $event)"
-          @touchend="emitEvent('touchend', $event)"
-        >
-          <div v-if="column.expander && taskIcon" class="gantt-elastic__task-list-item-icon" :style="iconStyle">
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-              <path :d="taskIcon" :fill="iconColor" :stroke="iconStroke" stroke-width="0.8"/>
-            </svg>
-          </div>
-          <span class="gantt-elastic__task-list-item-text">{{ value }}</span>
-        </div>
-        <div
-          v-else
-          class="gantt-elastic__task-list-item-value"
-          :style="valueStyle"
-          @click="emitEvent('click', $event)"
-          @mouseenter="emitEvent('mouseenter', $event)"
-          @mouseover="emitEvent('mouseover', $event)"
-          @mouseout="emitEvent('mouseout', $event)"
-          @mousemove="emitEvent('mousemove', $event)"
-          @mousedown="emitEvent('mousedown', $event)"
-          @mouseup="emitEvent('mouseup', $event)"
-          @mousewheel="emitEvent('mousewheel', $event)"
-          @touchstart="emitEvent('touchstart', $event)"
-          @touchmove="emitEvent('touchmove', $event)"
-          @touchend="emitEvent('touchend', $event)"
-        >
-          <div v-if="column.expander && taskIcon" class="gantt-elastic__task-list-item-icon" :style="iconStyle">
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-              <path :d="taskIcon" :fill="iconColor" :stroke="iconStroke" stroke-width="0.8"/>
-            </svg>
-          </div>
-          <span class="gantt-elastic__task-list-item-text" v-html="value"></span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ItemColumn',
-  inject: ['root'],
-  props: ['column', 'task'],
-  data() {
-    return {};
-  },
-  methods: {
-    /**
-     * Emit event
-     *
-     * @param {String} eventName
-     * @param {Event} event
-     */
-    emitEvent(eventName, event) {
-      if (typeof this.column.events !== 'undefined' && typeof this.column.events[eventName] === 'function') {
-        this.column.events[eventName]({ event, data: this.task, column: this.column });
-      }
-      this.root.$emit(`taskList-${this.task.type}-${eventName}`, { event, data: this.task, column: this.column });
-    }
-  },
-  computed: {
-    /**
-     * Should we display html or just text?
-     *
-     * @returns {boolean}
-     */
-    html() {
-      if (typeof this.column.html !== 'undefined' && this.column.html === true) {
-        return true;
-      }
-      return false;
-    },
-
-    /**
-     * Get column value
-     *
-     * @returns {any|string}
-     */
-    value() {
-      if (typeof this.column.value === 'function') {
-        return this.column.value(this.task);
-      }
-      return this.task[this.column.value];
-    },
-
-    itemColumnStyle() {
-      return {
-        ...this.root.style['task-list-item-column'],
-        ...this.column.style['task-list-item-column'],
-        width: this.column.finalWidth + 'px',
-        height: this.column.height + 'px'
-      };
-    },
-
-    wrapperStyle() {
-      return {
-        ...this.root.style['task-list-item-value-wrapper'],
-        ...this.column.style['task-list-item-value-wrapper']
-      };
-    },
-
-    containerStyle() {
-      return {
-        ...this.root.style['task-list-item-value-container'],
-        ...this.column.style['task-list-item-value-container']
-      };
-    },
-
-    valueStyle() {
-      return { ...this.root.style['task-list-item-value'], ...this.column.style['task-list-item-value'] };
-    },
-
-    /**
-     * Get task icon based on task type or custom icon property
-     *
-     * @returns {string|null}
-     */
-    taskIcon() {
-      // Check if task has a custom icon property
-      if (this.task.icon) {
-        return this.task.icon;
-      }
-      
-      // Default icons based on task type - matching the interface
-      const iconMap = {
-        'milestone': 'M7 2 L12 7 L7 12 L2 7 Z', // Purple diamond for milestones
-        'task': 'M3 3 L11 3 L11 11 L3 11 Z', // Blue square for tasks
-        'project': 'M7 2 L12 7 L7 12 L2 7 Z', // Purple diamond for projects
-        'sprint': 'M3 4 L11 4 L11 10 L3 10 Z', // Rectangle for sprints
-        'flag': 'M3 3 L9 3 L9 7 L7 9 L5 7 L5 3 Z M3 3 L3 11 M5 3 L5 11', // Green flag
-        'check': 'M3 3 L11 3 L11 11 L3 11 Z M5 7 L7 9 L9 5', // Blue checkmark in square
-        'epic': 'M7 2 L12 7 L7 12 L2 7 Z' // Purple diamond for epics
-      };
-      
-      // Always return an icon for tasks, default to task icon if type not found
-      return iconMap[this.task.type] || iconMap['task'];
-    },
-
-    /**
-     * Get icon color based on task properties
-     *
-     * @returns {string}
-     */
-    iconColor() {
-      if (this.task.iconColor) {
-        return this.task.iconColor;
-      }
-      
-      // Default colors based on task type - matching chart grid bar colors
-      const colorMap = {
-        'milestone': '#CD5C5C', // Light maroon - matches chart
-        'task': '#3B82F6', // Blue - matches chart
-        'project': '#8B5CF6', // Purple - matches chart
-        'sprint': '#F59E0B', // Orange rectangle
-        'flag': '#10B981', // Green flag
-        'check': '#3B82F6', // Blue checkmark
-        'epic': '#8B5CF6', // Purple - matches chart
-        'story': '#86EFAC', // Light green - matches chart
-        'subtask': '#3B82F6' // Blue - matches chart
-      };
-      
-      return colorMap[this.task.type] || '#6B7280'; // Gray default
-    },
-
-    /**
-     * Get icon stroke color
-     *
-     * @returns {string}
-     */
-    iconStroke() {
-      if (this.task.iconStroke) {
-        return this.task.iconStroke;
-      }
-      return this.iconColor; // Same as fill color
-    },
-
-    /**
-     * Get icon style
-     *
-     * @returns {object}
-     */
-    iconStyle() {
-      return {
-        display: 'flex',
-        alignItems: 'center',
-        marginRight: '6px',
-        flexShrink: 0,
-        width: '14px',
-        height: '14px'
-      };
-    }
-  }
-};
-</script>

package/src/components/TaskList/TaskList.vue

@@ -1,45 +0,0 @@
-
-<template>
-  <div
-    class="gantt-elastic__task-list-wrapper"
-    ref="taskListWrapper"
-    :style="{ ...root.style['task-list-wrapper'], width: '100%', height: '100%' }"
-    v-show="root.state.options.taskList.display"
-  >
-    <div class="gantt-elastic__task-list" :style="{ ...root.style['task-list'] }" ref="taskList">
-      <task-list-header></task-list-header>
-      <div
-        class="gantt-elastic__task-list-items"
-        ref="taskListItems"
-        :style="{ ...root.style['task-list-items'], height: root.state.options.rowsHeight + 'px' }"
-      >
-        <task-list-item v-for="task in root.visibleTasks" :key="task.id" :task="task"></task-list-item>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import TaskListHeader from './TaskListHeader.vue';
-import TaskListItem from './TaskListItem.vue';
-export default {
-  name: 'TaskList',
-  components: {
-    TaskListHeader,
-    TaskListItem
-  },
-  inject: ['root'],
-  data() {
-    return {};
-  },
-
-  /**
-   * Mounted
-   */
-  mounted() {
-    this.root.state.refs.taskListWrapper = this.$refs.taskListWrapper;
-    this.root.state.refs.taskList = this.$refs.taskList;
-    this.root.state.refs.taskListItems = this.$refs.taskListItems;
-  }
-};
-</script>

package/src/components/TaskList/TaskListHeader.vue

@@ -1,143 +0,0 @@
-<template>
-  <div
-    class="gantt-elastic__task-list-header"
-    :style="headerStyle"
-  >
-    <div
-      class="gantt-elastic__task-list-header-column"
-      v-for="column in root.getTaskListColumns"
-      :key="column._id"
-      :style="columnStyle(column)"
-    >
-      <task-list-expander
-        v-if="column.expander"
-        :tasks="collapsible"
-        :options="root.state.options.taskList.expander"
-      ></task-list-expander>
-      <div 
-        class="gantt-elastic__task-list-header-label"
-        :style="headerLabelStyle(column)"
-        :column="column"
-        @mouseup="resizerMouseUp"
-      >
-        {{ column.label }}
-      </div>
-      <div
-        class="gantt-elastic__task-list-header-resizer-wrapper"
-        :style="resizerWrapperStyle(column)"
-        :column="column"
-        @mousedown="resizerMouseDown($event, column)"
-      >
-        <div class="gantt-elastic__task-list-header-resizer" :style="resizerStyle(column)">
-          <div
-            class="gantt-elastic__task-list-header-resizer-dot"
-            v-for="dot in 3"
-            :key="dot"
-            :style="resizerDotStyle(column)"
-          ></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import TaskListExpander from '../Expander.vue';
-
-export default {
-  name: 'TaskListHeader',
-  components: {
-    TaskListExpander
-  },
-  inject: ['root'],
-  data() {
-    return {
-      resizer: {
-        moving: false,
-        x: 0
-      }
-    };
-  },
-  computed: {
-    collapsible() {
-      return this.root.state.tasks.filter(task => task.allChildren.length > 0);
-    },
-    headerStyle() {
-      return {
-        ...this.root.style['task-list-header'],
-        height: `${this.root.state.options.calendar.height}px`,
-        marginBottom: `${this.root.state.options.calendar.gap}px`
-      };
-    }
-  },
-  methods: {
-    columnStyle(column) {
-      return {
-        ...this.root.style['task-list-header-column'],
-        ...column.style['task-list-header-column'],
-        width: `${column.finalWidth}px`
-      };
-    },
-    headerLabelStyle(column) {
-      return {
-        ...this.root.style['task-list-header-label'],
-        ...column.style['task-list-header-label']
-      };
-    },
-    resizerWrapperStyle(column) {
-      return {
-        ...this.root.style['task-list-header-resizer-wrapper'],
-        ...column.style['task-list-header-resizer-wrapper']
-      };
-    },
-    resizerStyle(column) {
-      return {
-        ...this.root.style['task-list-header-resizer'],
-        ...column.style['task-list-header-resizer']
-      };
-    },
-    resizerDotStyle(column) {
-      return {
-        ...this.root.style['task-list-header-resizer-dot'],
-        ...column.style['task-list-header-resizer-dot']
-      };
-    },
-    resizerMouseDown(event, column) {
-      if (!this.resizer.moving) {
-        this.resizer.moving = column;
-        this.resizer.x = event.clientX;
-        this.resizer.initialWidth = column.width;
-        this.root.$emit('taskList-column-width-change-start', this.resizer.moving);
-      }
-    },
-    resizerMouseMove(event) {
-      if (this.resizer.moving) {
-        const lastWidth = this.resizer.moving.width;
-        this.resizer.moving.width = this.resizer.initialWidth + event.clientX - this.resizer.x;
-        if (this.resizer.moving.width < this.root.state.options.taskList.minWidth) {
-          this.resizer.moving.width = this.root.state.options.taskList.minWidth;
-        }
-        if (lastWidth !== this.resizer.moving.width) {
-          this.root.$emit('taskList-column-width-change', this.resizer.moving);
-        }
-      }
-    },
-    resizerMouseUp() {
-      if (this.resizer.moving) {
-        this.root.$emit('taskList-column-width-change-stop', this.resizer.moving);
-        this.resizer.moving = false;
-      }
-    }
-  },
-  created() {
-    document.addEventListener('mouseup', this.resizerMouseUp);
-    document.addEventListener('mousemove', this.resizerMouseMove);
-    this.root.$on('main-view-mousemove', this.resizerMouseMove);
-    this.root.$on('main-view-mouseup', this.resizerMouseUp);
-  },
-  // beforeDestroy() {
-  //   document.removeEventListener('mouseup', this.resizerMouseUp);
-  //   document.removeEventListener('mousemove', this.resizerMouseMove);
-  // }
-};
-</script>

package/src/components/TaskList/TaskListItem.vue

@@ -1,35 +0,0 @@
-
-<template>
-  <div class="gantt-elastic__task-list-item" :style="{ ...root.style['task-list-item'] }">
-    <item-column v-for="column in columns" :key="column._id" :column="column" :task="task">
-      <task-list-expander
-        v-if="column.expander"
-        :tasks="[task]"
-        :options="root.state.options.taskList.expander"
-        type="taskList"
-      ></task-list-expander>
-    </item-column>
-  </div>
-</template>
-<script>
-import TaskListExpander from '../Expander.vue';
-import ItemColumn from './ItemColumn.vue';
-
-export default {
-  name: 'TaskListItem',
-  components: {
-    TaskListExpander,
-    ItemColumn
-  },
-  inject: ['root'],
-  props: ['task'],
-  data() {
-    return {};
-  },
-  computed: {
-    columns() {
-      return this.root.state.options.taskList.columns;
-    }
-  }
-};
-</script>

package/src/components/bundle.js

@@ -1,28 +0,0 @@
-
-import Vue from 'vue';
-import { mergeDeep } from '../GanttElastic.vue';
-import GanttElasticStandalone from '../GanttElastic.standalone.vue';
-
-window.GanttElastic = {
-  component: GanttElasticStandalone,
-  mount(config) {
-    const ready = typeof config.ready === 'function' ? config.ready : () => { };
-    const cfg = mergeDeep({}, config);
-    if (typeof cfg.dynamicStyle === 'undefined') {
-      cfg.dynamicStyle = {};
-    }
-    const ganttElastic = { ...GanttElasticStandalone };
-    for (let prop in cfg) {
-      if (['el', 'ready'].includes(prop)) {
-        continue;
-      }
-      if (typeof ganttElastic[prop] !== 'undefined') {
-        ganttElastic[prop] = { ...ganttElastic[prop], ...cfg[prop] };
-        continue;
-      }
-      ganttElastic[prop] = cfg[prop];
-    }
-    return new Vue(ganttElastic).$on('gantt-elastic-ready', ready).$mount(cfg.el);
-  }
-};
-export default GanttElasticStandalone;