sprintify-ui 0.2.10 → 0.2.12

package/src/components/BaseGantt.vue

@@ -0,0 +1,333 @@
+<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`,
+          }"
+        >
+          <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 top-0 left-0 pointer-events-none"
+        :style="{
+          width: `${width}px`,
+          height: height + 'px',
+          transform: `translateX(${scrollX}px)`,
+        }"
+      >
+        <svg
+          :view-box="`${width} ${HEADER_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',
+]);
+
+// 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>

package/src/components/BaseNumber.vue

@@ -9,7 +9,7 @@
       leave-to-class="transform scale-90 opacity-0"
     >
       <div
-        v-if="showInvalidInput"
+        v-if="showInvalidInput && invalidInput"
         class="absolute left-0 top-full z-[1]"
       >
         <div
@@ -171,34 +171,50 @@ function convertToNumber(
   value: string | number | null | undefined
 ): number | null {
   if (value === null) return null;
-  let number = parseFloat(value + '');
+  const number = parseFloat(value + '');
   if (Number.isNaN(number)) {
     return null;
   }
+  return number;
+}
+
+function convertToValidNumber(
+  value: string | number | null | undefined
+): number | null {
+  let number = convertToNumber(value);
+
+  if (number === null) return null;
+
   if (hasMax.value) {
     number = Math.min(number, props.max as number);
   }
+
   if (hasMin.value) {
     number = Math.max(number, props.min as number);
   }
+
   return round(number, precision.value);
 }
 
 const valueInternal = ref<null | string | number>(null);
 
-const realValueInternal = computed<number | null>(() => {
+const valueInternalNumber = computed<number | null>(() => {
   return convertToNumber(valueInternal.value);
 });
 
+const valueInternalValidNumber = computed<number | null>(() => {
+  return convertToValidNumber(valueInternal.value);
+});
+
 const realValueInternalAsString = computed<string>(() => {
-  if (realValueInternal.value === null) return '';
-  return realValueInternal.value.toLocaleString('fullwide', {
+  if (valueInternalValidNumber.value === null) return '';
+  return valueInternalValidNumber.value.toLocaleString('fullwide', {
     useGrouping: false,
   });
 });
 
 const invalidInput = computed(() => {
-  if (realValueInternal.value == null && valueInternal.value == '') {
+  if (valueInternalValidNumber.value == null && valueInternal.value == '') {
     return false;
   }
 
@@ -206,13 +222,13 @@ const invalidInput = computed(() => {
 });
 
 const tooBig = computed(() => {
-  if (realValueInternal.value === null) return false;
-  return hasMax.value && realValueInternal.value > (props.max as number);
+  if (valueInternalNumber.value === null) return false;
+  return hasMax.value && valueInternalNumber.value > (props.max as number);
 });
 
 const tooSmall = computed(() => {
-  if (realValueInternal.value === null) return false;
-  return hasMin.value && realValueInternal.value < (props.min as number);
+  if (valueInternalNumber.value === null) return false;
+  return hasMin.value && valueInternalNumber.value < (props.min as number);
 });
 
 const tooPrecise = computed(() => {
@@ -224,10 +240,8 @@ const tooPrecise = computed(() => {
   return parts[1].length > precision.value;
 });
 
-valueInternal.value = convertToNumber(props.modelValue);
-
-if (valueInternal.value != props.modelValue) {
-  emitUpdate(realValueInternal.value);
+if (convertToValidNumber(props.modelValue) != props.modelValue) {
+  emitUpdate(valueInternalValidNumber.value);
 }
 
 let timeoutId = undefined as undefined | number;
@@ -247,7 +261,7 @@ function onInput(event: any) {
 
   valueInternal.value = value;
 
-  emitUpdate(realValueInternal.value);
+  emitUpdate(valueInternalValidNumber.value);
 
   nextTick(() => {
     showHideInvalidOnInput();
@@ -306,46 +320,46 @@ function updateInternalValueToRealValue() {
   if (!props.autoFix) {
     return;
   }
-  if (realValueInternal.value === null) {
+  if (valueInternalValidNumber.value === null) {
     valueInternal.value = '';
     return;
   }
   valueInternal.value = round(
-    realValueInternal.value ?? defaultValue.value,
+    valueInternalValidNumber.value ?? defaultValue.value,
     precision.value
   );
 }
 
 function increment() {
   if (props.disabled) return;
-  if (realValueInternal.value === null) {
+  if (valueInternalValidNumber.value === null) {
     valueInternal.value = defaultValue.value;
   } else {
     const newValue = round(
-      realValueInternal.value + stepNormalized.value,
+      valueInternalValidNumber.value + stepNormalized.value,
       precision.value
     );
     if (!hasMax.value || newValue <= (props.max as number)) {
       valueInternal.value = newValue;
     }
   }
-  emitUpdate(realValueInternal.value);
+  emitUpdate(valueInternalValidNumber.value);
 }
 
 function decrement() {
   if (props.disabled) return;
-  if (realValueInternal.value === null) {
+  if (valueInternalValidNumber.value === null) {
     valueInternal.value = defaultValue.value;
   } else {
     const newValue = round(
-      realValueInternal.value - stepNormalized.value,
+      valueInternalValidNumber.value - stepNormalized.value,
       precision.value
     );
     if (!hasMin.value || newValue >= (props.min as number)) {
       valueInternal.value = newValue;
     }
   }
-  emitUpdate(realValueInternal.value);
+  emitUpdate(valueInternalValidNumber.value);
 }
 
 const borderColor = computed(() => {

package/src/services/gantt/format.ts

@@ -0,0 +1,113 @@
+import { DateTime } from "luxon";
+import { FormatConfig, GanttItem, GanttItemFormatted, GanttRow, GanttRowFormatted } from "./types";
+import { minBy } from "lodash";
+import { Timescale } from "./timescale";
+
+export class Format {
+
+    private rows: GanttRow[];
+    private config: FormatConfig;
+
+    constructor(config: FormatConfig) {
+        this.rows = config.rows;
+        this.config = config;
+    }
+
+    public handle() {
+
+        // Format rows
+        const rowsFormatted = this.formatGanttRows();
+
+        // Get min and max
+        let { min, max } = this.getMinMax(rowsFormatted);
+
+        // Get timescale
+        const timescale = (new Timescale(this.config.minWidth, min, max)).handle();
+
+        // Padded min and max
+        min = timescale.min;
+        max = timescale.max;
+
+        const millisecondToPixel = timescale.millisecondToPixel;
+
+        // Set x, y, width and height
+
+        rowsFormatted.forEach((row) => {
+            row.items.forEach((item) => {
+
+                const x = (item.start.toMillis() - min.toMillis()) * millisecondToPixel;
+                const y = this.config.rowPadding;
+                const width = item.milliseconds * millisecondToPixel;
+                const height = this.config.rowHeight - (this.config.rowPadding * 2);
+
+                item.x = x;
+                item.y = y;
+                item.width = width;
+                item.height = height;
+            });
+        });
+
+        return {
+            rows: rowsFormatted,
+            min,
+            max,
+            millisecondToPixel,
+            height: this.config.rowHeight * this.rows.length,
+            width: timescale.width,
+            groups: timescale.groups,
+            ticks: timescale.ticks,
+        };
+    }
+
+    formatGanttRows(): GanttRowFormatted[] {
+        return this.rows.map((row) => {
+            return this.formatGanttRow(row);
+        }) as GanttRowFormatted[];
+    }
+
+    formatGanttRow(row: GanttRow): GanttRowFormatted {
+        const itemsFormatted = row.items.map((item) => {
+            return this.formatGanttItem(item);
+        });
+
+        return {
+            id: row.id,
+            name: row.name,
+            meta: row.meta,
+            items: itemsFormatted,
+        };
+    }
+
+    formatGanttItem(item: GanttItem): GanttItemFormatted {
+        const start = DateTime.fromISO(item.start);
+        const end = DateTime.fromISO(item.end);
+        const milliseconds = end.diff(start, "milliseconds").milliseconds;
+
+        return {
+            id: item.id,
+            name: item.name,
+            meta: item.meta,
+            color: item.color,
+            start,
+            end,
+            milliseconds,
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+        } as GanttItemFormatted;
+    }
+
+    getMinMax(rowsFormatted: GanttRowFormatted[]) {
+        const flatItems = rowsFormatted.flatMap((row) => row.items);
+        const flatDateTimes = flatItems.flatMap((item) => [item.start, item.end]);
+
+        const min = minBy(flatDateTimes, (dateTime) => dateTime.toMillis())?.toMillis() || 0;
+        const max = Math.max(...flatDateTimes.map((dateTime) => dateTime.toMillis()));
+
+        const minDateTime = DateTime.fromMillis(min);
+        const maxDateTime = DateTime.fromMillis(max);
+
+        return { min: minDateTime, max: maxDateTime };
+    }
+}