sprintify-ui 0.2.17 → 0.2.19

package/src/components/BaseGantt.vue

@@ -1,336 +1,336 @@
-<template>
-  <div
-    class="flex"
-    :style="{
-      maxHeight: `${maxHeight}px`,
-    }"
-  >
-    <!-- Sidebar -->
-    <div
-      class="border-r border-slate-300 relative shrink-0"
-      :style="{ minWidth: `${SIDEBAR_WIDTH}px` }"
-    >
-      <!-- Top-left Corner-->
-      <div
-        :style="{
-          height: `${HEADER_HEIGHT}px`,
-          zIndex: 1
-        }"
-        class="border-b relative border-slate-300 bg-white"
-      />
-
-      <!-- Sidebar Items-->
-
-      <ul
-        class=""
-        :style="{
-          transform: `translateY(${scrollY}px)`,
-        }"
-      >
-        <li
-          v-for="row in rowsInternal"
-          :key="row.id"
-          class="border-b border-slate-300 flex last:border-none"
-          :style="{
-            height: `${props.rowHeight}px`,
-          }"
-          @click="$emit('row:click', row)"
-        >
-          <slot
-            name="sidebarItem"
-            :row="row"
-          >
-            <div class="px-2 flex items-center">
-              <p class="font-semibold text-sm">
-                {{ row.name }}
-              </p>
-            </div>
-          </slot>
-        </li>
-      </ul>
-    </div> 
-    
-    <!-- Content -->
-
-    <div
-      ref="contentRef"
-      class="grow flex flex-col relative overflow-hidden"
-    >
-      <!-- Time Scale Header -->
-     
-      <div
-        class="bg-white border-b shrink-0 border-slate-300 w-full"
-        :style="{
-          zIndex: 1,
-          height: HEADER_HEIGHT + 'px',
-          width: `${width}px`,
-          transform: `translateX(${scrollX}px)`,
-        }"
-      >
-        <svg
-          :view-box="`${width} ${HEADER_HEIGHT}`"
-          :width="width"
-          :height="HEADER_HEIGHT"
-        >
-          <g
-            v-for="group in groups"
-            :key="group.x"
-          >
-            <text
-              :x="group.labelX"
-              :y="15"
-              class="text-[12px] font-semibold text-slate-900"
-              fill="currentColor"
-              :text-anchor="group.labelTextAnchor"
-            >
-              {{ group.label }}
-            </text>
-            <line
-              :x1="group.x + group.width"
-              :x2="group.x + group.width"
-              :y1="0"
-              :y2="HEADER_HEIGHT"
-              :stroke="slate[300]"
-            ></line>
-          </g>
-
-          <g
-            v-for="tick in ticks"
-            :key="tick.x"
-            :transform="`translate(${tick.x}, 0)`"
-          >
-            <text
-              :x="tick.align == 'middle' ? tick.width / 2 : 0"
-              :y="33"
-              class="text-[11px] font-normal text-slate-600"
-              fill="currentColor"
-              text-anchor="middle"
-            >
-              {{ tick.label }}
-            </text>
-
-            <line
-              v-if="tick.align == 'middle'"
-              :x1="tick.width"
-              :x2="tick.width"
-              :y1="24"
-              :y2="HEADER_HEIGHT"
-              :stroke="slate[300]"
-            ></line>
-          </g>
-        </svg>
-      </div>
-
-      <div
-        v-if="currentGroup"
-        class="absolute top-0 left-0 inline-flex"
-        :style="{
-          zIndex: 1,
-        }"
-      >
-        <div class="text-xs font-semibold pt-[3px] bg-white px-2">
-          {{ currentGroup.label }}
-        </div>
-        <div class="bg-gradient-to-r from-white to-transparent w-20" />
-      </div>  
-
-      <!-- Gantt Items -->
-
-      <ul
-        ref="itemsRef"
-        class="relative overflow-scroll grow"
-      >
-        <li
-          v-for="row in rowsInternal"
-          :key="row.id"
-          class="border-b relative border-slate-300 last:border-none"
-          :style="{
-            height: `${props.rowHeight}px`,
-            width: `${width}px`,
-          }"
-        >
-          <button
-            v-for="item in row.items"
-            :key="item.id"
-            type="button"
-            class="absolute flex"
-            :style="{
-              transform: `translate(${item.x}px, ${item.y}px)`,
-              height: item.height + 'px',
-              width: item.width + 'px',
-            }"
-            :title="`${item.name} - ${item.start.toFormat('yyyy-MM-dd HH:mm:ss')} - ${item.end.toFormat('yyyy-MM-dd HH:mm:ss')}`"
-            @click="$emit('item:click', item)"
-          >
-            <slot
-              name="item"
-              :item="item"
-            >
-              <div
-                :style="{
-                  backgroundColor: item.color,
-                }"
-                class="flex w-full h-full items-center rounded hover:opacity-80 duration-200"
-              >
-                <p
-                  class="text-white text-xs font-medium px-2 py-1 truncate"
-                  style="text-shadow: 0.5px 0.5px rgba(0,0,0,0.1);"
-                >
-                  {{ item.name }}
-                </p>
-              </div>
-            </slot>
-          </button>
-        </li>
-      </ul>
-
-      <!-- Vertical lines -->
-
-      <div
-        class="absolute left-0 pointer-events-none"
-        :style="{
-          top: `${HEADER_HEIGHT}px`,
-          width: `${width}px`,
-          height: height + 'px',
-          transform: `translateX(${scrollX}px)`,
-        }"
-      >
-        <svg
-          :view-box="`${width} ${height}`"
-          :width="width"
-          :height="height"
-        >
-          <g
-            v-for="group in groups"
-            :key="group.x"
-          >
-            <line
-              :x1="group.x"
-              :x2="group.x"
-              y1="0"
-              :y2="height"
-              stroke="black"
-              :opacity="0.2"
-            ></line>
-          </g>
-          <g
-            v-for="tick in ticks"
-            :key="tick.x"
-          >
-            <line
-              :x1="tick.x"
-              :x2="tick.x"
-              :y1="0"
-              :y2="height"
-              stroke="black"
-              :opacity="0.1"
-            ></line>
-          </g>
-        </svg>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useElementSize, useScroll } from '@vueuse/core';
-import { Format } from '@/services/gantt/format';
-import { FormatConfig, GanttRow, GanttRowFormatted, Group, Tick } from '@/services/gantt/types';
-import { debounce } from 'lodash';
-import { slate } from 'tailwindcss/colors';
-
-const props = withDefaults(defineProps<{
-  rows: GanttRow[],
-  rowHeight?: number,
-  rowPadding?: number,
-  maxHeight?: number,
-}>(), {
-  rowHeight: 40,
-  rowPadding: 4,
-  maxHeight: undefined,
-});
-
-defineEmits([
-  'item:click',
-  'row:click',
-]);
-
-// Config
-
-const SIDEBAR_WIDTH = 120;
-const HEADER_HEIGHT = 40;
-
-// Init
-
-const contentRef = ref<HTMLDivElement | null>(null);
-const contentSize = useElementSize(contentRef);
-
-const width = ref(800);
-const height = ref(100);
-
-const rowsInternal = ref<GanttRowFormatted[]>([]);
-const groups = ref<Group[]>([]);
-const ticks = ref<Tick[]>([]);
-
-const config = computed<FormatConfig>(() => {
-  return {
-    rows: props.rows,
-    minWidth: contentSize.width.value,
-    rowHeight: props.rowHeight,
-    rowPadding: props.rowPadding,
-  };
-});
-
-function init() {
-
-  const format = (new Format(config.value)).handle();
-
-  width.value = format.width;
-  height.value = format.height;
-
-  rowsInternal.value = format.rows;
-
-  groups.value = format.groups;
-  ticks.value = format.ticks;
-}
-
-// Init triggers
-
-const initDebounced = debounce(init, 200);
-
-watch(() => config.value, initDebounced, { deep: true });
-
-// Scroll
-
-const itemsRef = ref<HTMLUListElement | null>(null);
-
-const scrollX = ref(0);
-const scrollY = ref(0);
-
-useScroll(itemsRef, {
-  onScroll: (e: any) => {
-    if (!e.target) return;
-
-    scrollX.value = -e.target.scrollLeft;
-    scrollY.value = -e.target.scrollTop;
-  },
-});
-
-// Current Group
-
-const currentGroup = computed<Group | undefined>(() => {
-
-  const offsetLeft = -scrollX.value;
-
-  return groups.value
-    // Sort by x descending
-    .sort((a, b) => {
-      return b.x - a.x;
-    })
-    .find((group) => {
-      // - 1 to avoid flashing when scrolling
-      return group.x <= offsetLeft && group.x + group.width >= offsetLeft - 1;
-    });
-});
-
-</script>
+<template>
+  <div
+    class="flex"
+    :style="{
+      maxHeight: `${maxHeight}px`,
+    }"
+  >
+    <!-- Sidebar -->
+    <div
+      class="border-r border-slate-300 relative shrink-0"
+      :style="{ minWidth: `${SIDEBAR_WIDTH}px` }"
+    >
+      <!-- Top-left Corner-->
+      <div
+        :style="{
+          height: `${HEADER_HEIGHT}px`,
+          zIndex: 1
+        }"
+        class="border-b relative border-slate-300 bg-white"
+      />
+
+      <!-- Sidebar Items-->
+
+      <ul
+        class=""
+        :style="{
+          transform: `translateY(${scrollY}px)`,
+        }"
+      >
+        <li
+          v-for="row in rowsInternal"
+          :key="row.id"
+          class="border-b border-slate-300 flex last:border-none"
+          :style="{
+            height: `${props.rowHeight}px`,
+          }"
+          @click="$emit('row:click', row)"
+        >
+          <slot
+            name="sidebarItem"
+            :row="row"
+          >
+            <div class="px-2 flex items-center">
+              <p class="font-semibold text-sm">
+                {{ row.name }}
+              </p>
+            </div>
+          </slot>
+        </li>
+      </ul>
+    </div> 
+    
+    <!-- Content -->
+
+    <div
+      ref="contentRef"
+      class="grow flex flex-col relative overflow-hidden"
+    >
+      <!-- Time Scale Header -->
+     
+      <div
+        class="bg-white border-b shrink-0 border-slate-300 w-full"
+        :style="{
+          zIndex: 1,
+          height: HEADER_HEIGHT + 'px',
+          width: `${width}px`,
+          transform: `translateX(${scrollX}px)`,
+        }"
+      >
+        <svg
+          :view-box="`${width} ${HEADER_HEIGHT}`"
+          :width="width"
+          :height="HEADER_HEIGHT"
+        >
+          <g
+            v-for="group in groups"
+            :key="group.x"
+          >
+            <text
+              :x="group.labelX"
+              :y="15"
+              class="text-[12px] font-semibold text-slate-900"
+              fill="currentColor"
+              :text-anchor="group.labelTextAnchor"
+            >
+              {{ group.label }}
+            </text>
+            <line
+              :x1="group.x + group.width"
+              :x2="group.x + group.width"
+              :y1="0"
+              :y2="HEADER_HEIGHT"
+              :stroke="slate[300]"
+            ></line>
+          </g>
+
+          <g
+            v-for="tick in ticks"
+            :key="tick.x"
+            :transform="`translate(${tick.x}, 0)`"
+          >
+            <text
+              :x="tick.align == 'middle' ? tick.width / 2 : 0"
+              :y="33"
+              class="text-[11px] font-normal text-slate-600"
+              fill="currentColor"
+              text-anchor="middle"
+            >
+              {{ tick.label }}
+            </text>
+
+            <line
+              v-if="tick.align == 'middle'"
+              :x1="tick.width"
+              :x2="tick.width"
+              :y1="24"
+              :y2="HEADER_HEIGHT"
+              :stroke="slate[300]"
+            ></line>
+          </g>
+        </svg>
+      </div>
+
+      <div
+        v-if="currentGroup"
+        class="absolute top-0 left-0 inline-flex"
+        :style="{
+          zIndex: 1,
+        }"
+      >
+        <div class="text-xs font-semibold pt-[3px] bg-white px-2">
+          {{ currentGroup.label }}
+        </div>
+        <div class="bg-gradient-to-r from-white to-transparent w-20" />
+      </div>  
+
+      <!-- Gantt Items -->
+
+      <ul
+        ref="itemsRef"
+        class="relative overflow-scroll grow"
+      >
+        <li
+          v-for="row in rowsInternal"
+          :key="row.id"
+          class="border-b relative border-slate-300 last:border-none"
+          :style="{
+            height: `${props.rowHeight}px`,
+            width: `${width}px`,
+          }"
+        >
+          <button
+            v-for="item in row.items"
+            :key="item.id"
+            type="button"
+            class="absolute flex"
+            :style="{
+              transform: `translate(${item.x}px, ${item.y}px)`,
+              height: item.height + 'px',
+              width: item.width + 'px',
+            }"
+            :title="`${item.name} - ${item.start.toFormat('yyyy-MM-dd HH:mm:ss')} - ${item.end.toFormat('yyyy-MM-dd HH:mm:ss')}`"
+            @click="$emit('item:click', item)"
+          >
+            <slot
+              name="item"
+              :item="item"
+            >
+              <div
+                :style="{
+                  backgroundColor: item.color,
+                }"
+                class="flex w-full h-full items-center rounded hover:opacity-80 duration-200"
+              >
+                <p
+                  class="text-white text-xs font-medium px-2 py-1 truncate"
+                  style="text-shadow: 0.5px 0.5px rgba(0,0,0,0.1);"
+                >
+                  {{ item.name }}
+                </p>
+              </div>
+            </slot>
+          </button>
+        </li>
+      </ul>
+
+      <!-- Vertical lines -->
+
+      <div
+        class="absolute left-0 pointer-events-none"
+        :style="{
+          top: `${HEADER_HEIGHT}px`,
+          width: `${width}px`,
+          height: height + 'px',
+          transform: `translateX(${scrollX}px)`,
+        }"
+      >
+        <svg
+          :view-box="`${width} ${height}`"
+          :width="width"
+          :height="height"
+        >
+          <g
+            v-for="group in groups"
+            :key="group.x"
+          >
+            <line
+              :x1="group.x"
+              :x2="group.x"
+              y1="0"
+              :y2="height"
+              stroke="black"
+              :opacity="0.2"
+            ></line>
+          </g>
+          <g
+            v-for="tick in ticks"
+            :key="tick.x"
+          >
+            <line
+              :x1="tick.x"
+              :x2="tick.x"
+              :y1="0"
+              :y2="height"
+              stroke="black"
+              :opacity="0.1"
+            ></line>
+          </g>
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useElementSize, useScroll } from '@vueuse/core';
+import { Format } from '@/services/gantt/format';
+import { FormatConfig, GanttRow, GanttRowFormatted, Group, Tick } from '@/services/gantt/types';
+import { debounce } from 'lodash';
+import { slate } from 'tailwindcss/colors';
+
+const props = withDefaults(defineProps<{
+  rows: GanttRow[],
+  rowHeight?: number,
+  rowPadding?: number,
+  maxHeight?: number,
+}>(), {
+  rowHeight: 40,
+  rowPadding: 4,
+  maxHeight: undefined,
+});
+
+defineEmits([
+  'item:click',
+  'row:click',
+]);
+
+// Config
+
+const SIDEBAR_WIDTH = 120;
+const HEADER_HEIGHT = 40;
+
+// Init
+
+const contentRef = ref<HTMLDivElement | null>(null);
+const contentSize = useElementSize(contentRef);
+
+const width = ref(800);
+const height = ref(100);
+
+const rowsInternal = ref<GanttRowFormatted[]>([]);
+const groups = ref<Group[]>([]);
+const ticks = ref<Tick[]>([]);
+
+const config = computed<FormatConfig>(() => {
+  return {
+    rows: props.rows,
+    minWidth: contentSize.width.value,
+    rowHeight: props.rowHeight,
+    rowPadding: props.rowPadding,
+  };
+});
+
+function init() {
+
+  const format = (new Format(config.value)).handle();
+
+  width.value = format.width;
+  height.value = format.height;
+
+  rowsInternal.value = format.rows;
+
+  groups.value = format.groups;
+  ticks.value = format.ticks;
+}
+
+// Init triggers
+
+const initDebounced = debounce(init, 200);
+
+watch(() => config.value, initDebounced, { deep: true });
+
+// Scroll
+
+const itemsRef = ref<HTMLUListElement | null>(null);
+
+const scrollX = ref(0);
+const scrollY = ref(0);
+
+useScroll(itemsRef, {
+  onScroll: (e: any) => {
+    if (!e.target) return;
+
+    scrollX.value = -e.target.scrollLeft;
+    scrollY.value = -e.target.scrollTop;
+  },
+});
+
+// Current Group
+
+const currentGroup = computed<Group | undefined>(() => {
+
+  const offsetLeft = -scrollX.value;
+
+  return groups.value
+    // Sort by x descending
+    .sort((a, b) => {
+      return b.x - a.x;
+    })
+    .find((group) => {
+      // - 1 to avoid flashing when scrolling
+      return group.x <= offsetLeft && group.x + group.width >= offsetLeft - 1;
+    });
+});
+
+</script>