sprintify-ui 0.11.16 → 0.11.19

package/dist/types/components/BaseGantt.vue.d.ts

@@ -1,4 +1,4 @@
-import { GanttRow, GanttRowFormatted, GanttItemFormatted } from '@/services/gantt/types';
+import { GanttRow, GanttRowFormatted, GanttItemFormatted, GanttRelationship } from '@/services/gantt/types';
 import { VNode } from 'vue';
 interface Props {
     /**
@@ -25,6 +25,10 @@ interface Props {
      * Flatten the Gantt chart by removing the hierarchy of rows and displaying all items in a single list. This is useful when there's only one level of rows and you want to maximize the vertical space.
      */
     flatten?: boolean;
+    /**
+     * Relationships between items, drawn as arrows from one item to another.
+     */
+    relationships?: GanttRelationship[];
 }
 type __VLS_Slots = {
     sidebarRow: (props: {
@@ -51,6 +55,7 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
     sidebarWidth: number;
     rowHeight: number;
     includeToday: boolean;
+    relationships: GanttRelationship[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/types/components/BaseTooltip.vue.d.ts

@@ -1,8 +1,8 @@
 import { UseFloatingOptions } from '@floating-ui/vue';
 type __VLS_Props = {
+    as?: string;
     visible?: boolean;
     text?: string | null | undefined;
-    class?: string[] | string | null | undefined;
     floatingOptions?: UseFloatingOptions;
     /**
      * Whether the tooltip content is interactive or not.
@@ -13,16 +13,16 @@ type __VLS_Props = {
     dark?: boolean;
     offset?: number;
 };
-declare var __VLS_1: {}, __VLS_11: {};
+declare var __VLS_7: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_7) => any;
 } & {
-    tooltip?: (props: typeof __VLS_11) => any;
+    tooltip?: (props: typeof __VLS_17) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     dark: boolean;
-    class: string | string[] | null;
     text: string | null;
+    as: string;
     visible: boolean;
     floatingOptions: UseFloatingOptions;
     interactive: boolean;

package/dist/types/services/gantt/types.d.ts

@@ -80,3 +80,7 @@ export interface Scale {
 export interface NowLine {
     x: number;
 }
+export interface GanttRelationship {
+    fromId: number | string;
+    toId: number | string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.16",
+  "version": "0.11.19",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/BaseGantt.mdx

@@ -1,20 +1,53 @@
 import { Canvas, Meta, Primary, Controls, Story } from '@storybook/addon-docs/blocks';
- 
+
 import * as BaseGanttStories from './BaseGantt.stories';
- 
+
 <Meta of={BaseGanttStories} />
- 
+
 # BaseGantt
 
 ## Introduction
- 
-This is the BaseGantt component used to display Gantt charts. It allows you to visualize tasks or events over a timeline.
+
+A Gantt chart component for visualizing tasks and events over a timeline. Supports hierarchical rows with nested items, relationship arrows between items, a resizable sidebar, a "now" line, and fully customizable rendering via slots.
 
 <Primary />
 
-## API
+## Relationships
+
+Use the `relationships` prop to draw arrows between items. Each relationship connects a source item to a target item by their IDs.
+
+<Canvas of={BaseGanttStories.Relationships} />
+
+## Slots
+
+| Slot          | Props                              | Description                                                  |
+|---------------|------------------------------------|--------------------------------------------------------------|
+| row           | `{ row: GanttRowFormatted }`       | Custom rendering for a row bar on the chart                  |
+| item          | `{ item: GanttItemFormatted }`     | Custom rendering for an item bar on the chart                |
+| sidebarRow    | `{ row: GanttRowFormatted }`       | Custom rendering for a row entry in the sidebar              |
+| sidebarItem   | `{ item: GanttItemFormatted }`     | Custom rendering for an item entry in the sidebar            |
+
+<Canvas of={BaseGanttStories.SlotItem} />
+<Canvas of={BaseGanttStories.SlotSidebarSlots} />
+
+## Events
+
+| Event        | Payload                | Description                          |
+|--------------|------------------------|--------------------------------------|
+| row:click    | `GanttRowFormatted`    | Emitted when a row bar is clicked    |
+| item:click   | `GanttItemFormatted`   | Emitted when an item bar is clicked  |
+
+## Props
+
+<Controls />
 
-### GanttRow
+## Types
+
+### Input types
+
+These types are used when passing data to the component.
+
+#### GanttRow
 
 | Prop      | Type                        | Description                                      |
 |-----------|-----------------------------|--------------------------------------------------|
@@ -22,58 +55,60 @@ This is the BaseGantt component used to display Gantt charts. It allows you to v
 | name      | string                      | Name of the row                                  |
 | meta      | Object?                     | Optional metadata for the row                    |
 | items     | GanttItem[]                 | Array of items (tasks/events) in the row         |
-| height    | number?                     | Optional custom height for the row. If not provided, props.rowHeight will be used. |
+| height    | number?                     | Optional custom height for the row. If not provided, `rowHeight` prop will be used. |
 
-### GanttItem
+#### GanttItem
 
 | Prop      | Type                        | Description                                      |
 |-----------|-----------------------------|--------------------------------------------------|
 | id        | number \| string            | Unique identifier for the item                   |
 | start     | string                      | Start date/time (ISO string)                     |
 | end       | string                      | End date/time (ISO string)                       |
-| height    | number?                     | Optional custom height for the item. If not provided, props.rowHeight will be used. |
+| height    | number?                     | Optional custom height for the item. If not provided, `rowHeight` prop will be used. |
 | name      | string                      | Name of the item                                 |
 | meta      | Object?                     | Optional metadata for the item                   |
 | color     | string                      | Color used to display the item                   |
 
-### GanttRowFormatted
-
-Once the rows have been formatted for rendering, the GanttRowFormatted type is used.
+#### GanttRelationship
 
 | Prop      | Type                        | Description                                      |
 |-----------|-----------------------------|--------------------------------------------------|
-| id        | number \| string            | Unique identifier for the row                    |
-| name      | string                      | Name of the row                                  |
-| items     | GanttItemFormatted[]        | Array of formatted items (tasks/events) in the row         |
-| height    | number                     | The rendered height of the row |
-| barHeight | number                     | The height of the bars in the row |
-| width    | number                     | The width of the bar in pixels |
-| start   | DateTime                     | The DateTime start of the bar |
-| end     | DateTime                     | The DateTime end of the bar |
-| x      | number                     | The x position of the bar in pixels |
-| y      | number                     | The y position of the bar in pixels |
-| meta      | Object?                     | Optional metadata for the row                    |
+| fromId    | number \| string            | ID of the source item (where the arrow starts)   |
+| toId      | number \| string            | ID of the target item (where the arrow ends)     |
 
-### GanttItemFormatted
+### Formatted types
 
-Once the items have been formatted for rendering, the GanttItemFormatted type is used.
+These types are provided to slot consumers and event handlers after the component has processed the input data for rendering.
+
+#### GanttRowFormatted
 
 | Prop      | Type                        | Description                                      |
 |-----------|-----------------------------|--------------------------------------------------|
-| id        | number \| string            | Unique identifier for the item                   |
-| name     | string                      | Name of the item                                 |
-| color   | string                     | The color of the item |
-| height   | number                     | The rendered height of the item |
-| barHeight | number                     | The height of the bar in the item |
-| width    | number                     | The width of the item in pixels |
-| start     | DateTime                     | The DateTime start of the item                      |
-| end       | DateTime                     | The DateTime end of the item                        |
-| x     | number                     | The x position of the item in pixels               | 
-| y     | number                     | The y position of the item in pixels               |
-| milliseconds | number                  | The duration of the item in milliseconds          |
-| meta      | Object?                     | Optional metadata for the item                   |
+| id        | number \| string            | Unique identifier for the row                    |
+| name      | string                      | Name of the row                                  |
+| items     | GanttItemFormatted[]        | Array of formatted items in the row              |
+| height    | number                      | The rendered height of the row                   |
+| barHeight | number                      | The height of the bars in the row                |
+| width     | number                      | The width of the bar in pixels                   |
+| start     | DateTime                    | The DateTime start of the bar                    |
+| end       | DateTime                    | The DateTime end of the bar                      |
+| x         | number                      | The x position of the bar in pixels              |
+| y         | number                      | The y position of the bar in pixels              |
+| meta      | Object?                     | Optional metadata for the row                    |
 
+#### GanttItemFormatted
 
-## Props
- 
-<Controls />
+| Prop         | Type                     | Description                                      |
+|--------------|--------------------------|--------------------------------------------------|
+| id           | number \| string         | Unique identifier for the item                   |
+| name         | string                   | Name of the item                                 |
+| color        | string                   | The color of the item                            |
+| height       | number                   | The rendered height of the item                  |
+| barHeight    | number                   | The height of the bar in the item                |
+| width        | number                   | The width of the item in pixels                  |
+| start        | DateTime                 | The DateTime start of the item                   |
+| end          | DateTime                 | The DateTime end of the item                     |
+| x            | number                   | The x position of the item in pixels             |
+| y            | number                   | The y position of the item in pixels             |
+| milliseconds | number                   | The duration of the item in milliseconds         |
+| meta         | Object?                  | Optional metadata for the item                   |

package/src/components/BaseGantt.stories.js

@@ -157,4 +157,78 @@ const SlotSidebarSlotsTemplate = (args) => ({
 });
 
 export const SlotSidebarSlots = SlotSidebarSlotsTemplate.bind({});
-SlotSidebarSlots.args = {};
+SlotSidebarSlots.args = {};
+
+// Relationships story with unique item IDs
+
+const relationshipRows = [];
+
+let itemId = 1;
+
+for (let i = 0; i < 5; i++) {
+  const items = [];
+
+  for (let j = 0; j < 2; j++) {
+    const start = DateTime.now()
+      .minus({ days: 30 })
+      .plus({ days: (i * 15) + (j * 20) });
+
+    const end = start.plus({ days: 15 });
+
+    const colors = ["blue", "green", "red", "indigo", "purple"];
+    const color = defaultColors[colors[i % colors.length]][500];
+
+    items.push({
+      id: itemId++,
+      name: `Task ${items.length + 1} of Project ${i + 1}`,
+      start: start.toISO(),
+      end: end.toISO(),
+      color: color,
+    });
+  }
+
+  relationshipRows.push({
+    id: i + 1,
+    name: `Project ${i + 1}`,
+    items: items,
+    height: 30,
+  });
+}
+
+const relationships = [
+  { fromId: 1, toId: 3 },
+  { fromId: 3, toId: 5 },
+  { fromId: 2, toId: 6 },
+  { fromId: 5, toId: 9 },
+];
+
+const RelationshipsTemplate = (args) => ({
+  components: {
+    BaseCard,
+    BaseGantt,
+  },
+  setup() {
+    function onItemClick(item) {
+      alert(`Item "${item.name}" clicked`);
+    }
+
+    function onRowClick(item) {
+      alert(`Row "${item.name}" clicked`);
+    }
+
+    return { args, onItemClick, onRowClick };
+  },
+  template: `
+  <BaseCard clipped>
+    <BaseGantt v-bind="args" @item:click="onItemClick" @row:click="onRowClick">
+    </BaseGantt>
+  </BaseCard>
+  `,
+});
+
+export const Relationships = RelationshipsTemplate.bind({});
+Relationships.args = {
+  rows: relationshipRows,
+  relationships,
+  maxHeight: 500,
+};

package/src/components/BaseGantt.vue

@@ -276,6 +276,45 @@
             </div>
           </div>
         </li>
+
+        <!-- Relationship arrows -->
+
+        <svg
+          v-if="relationshipPaths.length"
+          class="absolute top-0 left-0 pointer-events-none"
+          :viewBox="`0 0 ${width} ${height}`"
+          :width="width"
+          :height="height"
+        >
+          <defs>
+            <marker
+              id="gantt-arrowhead"
+              markerWidth="8"
+              markerHeight="6"
+              refX="8"
+              refY="3"
+              orient="auto"
+            >
+              <polygon
+                points="0 0, 8 3, 0 6"
+                fill="black"
+              ></polygon>
+            </marker>
+          </defs>
+          <g
+            v-for="rel in relationshipPaths"
+            :key="rel.id"
+            opacity="0.3"
+          >
+            <path
+              :d="rel.path"
+              fill="none"
+              stroke="black"
+              stroke-width="1.5"
+              marker-end="url(#gantt-arrowhead)"
+            ></path>
+          </g>
+        </svg>
       </ul>
 
       <!-- Vertical lines -->
@@ -346,7 +385,7 @@
             y1="0"
             :y2="height"
             stroke="red"
-            stroke-width="2"
+            stroke-width="1.5"
             style="filter: drop-shadow(0px 0px 2px rgb(0 0 0 / 0.1));"
           ></line>
         </svg>
@@ -358,7 +397,7 @@
 <script lang="ts" setup>
 import { useElementSize, useScroll } from '@vueuse/core';
 import { Format } from '@/services/gantt/format';
-import { FormatConfig, GanttRow, GanttRowFormatted, Group, Tick, NowLine, GanttItemFormatted } from '@/services/gantt/types';
+import { FormatConfig, GanttRow, GanttRowFormatted, Group, Tick, NowLine, GanttItemFormatted, GanttRelationship } from '@/services/gantt/types';
 import { cloneDeep, debounce } from 'lodash';
 import { slate } from 'tailwindcss/colors';
 import { VNode } from 'vue';
@@ -388,6 +427,10 @@ interface Props {
    * Flatten the Gantt chart by removing the hierarchy of rows and displaying all items in a single list. This is useful when there's only one level of rows and you want to maximize the vertical space.
    */
   flatten?: boolean;
+  /**
+   * Relationships between items, drawn as arrows from one item to another.
+   */
+  relationships?: GanttRelationship[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -395,6 +438,7 @@ const props = withDefaults(defineProps<Props>(), {
   rowHeight: 40,
   maxHeight: undefined,
   includeToday: true,
+  relationships: () => [],
 });
 
 defineEmits<{
@@ -521,4 +565,52 @@ function isRowExpanded(rowId: string | number): boolean {
   return expandedRows.value.has(rowId);
 }
 
+// Relationship arrows
+
+const relationshipPaths = computed(() => {
+  if (!props.relationships.length || !rowsInternal.value.length) return [];
+
+  const positions = new Map<string | number, { x: number; centerY: number; width: number }>();
+  let cumulativeY = 0;
+
+  for (const row of rowsInternal.value) {
+    if (!props.flatten) {
+      cumulativeY += row.height;
+    }
+
+    if (isRowExpanded(row.id)) {
+      for (const item of row.items) {
+        positions.set(item.id, {
+          x: item.x,
+          centerY: cumulativeY + item.y + item.barHeight / 2,
+          width: item.width,
+        });
+        cumulativeY += item.height;
+      }
+    }
+  }
+
+  return props.relationships
+    .map((rel) => {
+      const from = positions.get(rel.fromId);
+      const to = positions.get(rel.toId);
+      if (!from || !to) return null;
+
+      const startX = from.x + from.width;
+      const startY = from.centerY;
+      const endX = to.x;
+      const endY = to.centerY;
+
+      const TAIL_LENGTH = 20;
+      const curveEndX = endX - TAIL_LENGTH;
+      const dx = Math.abs(curveEndX - startX);
+      const offset = Math.max(20, dx * 0.3);
+
+      const path = `M ${startX} ${startY} C ${startX + offset} ${startY}, ${curveEndX - offset} ${endY}, ${curveEndX} ${endY} L ${endX} ${endY}`;
+
+      return { path, id: `${rel.fromId}-${rel.toId}` };
+    })
+    .filter((r): r is { path: string; id: string } => r !== null);
+});
+
 </script>

package/src/components/BaseTooltip.stories.js

@@ -22,7 +22,7 @@ const Template = (args) => ({
   template: `
     <BaseCard>
         <BaseCardRow size=sm>
-        <BaseTooltip class="inline-block" v-bind="args">
+        <BaseTooltip class="inline-block" title="test" v-bind="args">
             <div>Hover me, the tooltip show appear outside the BaseCard</div>
         </BaseTooltip>
         </BaseCardRow>

package/src/components/BaseTooltip.vue

@@ -1,43 +1,43 @@
 <template>
-  <div
+  <component
+    :is="as"
     ref="targetRef"
-    :class="classInternal"
   >
     <slot />
-  </div>
-  <Teleport
-    v-if="visible"
-    to="body"
-  >
-    <div
-      ref="tooltipRef"
-      class="fixed top-0 left-0 z-tooltip"
-      :class="[!interactive ? 'pointer-events-none' : '']"
-      :style="floatingStyles"
+    <Teleport
+      v-if="visible"
+      to="body"
     >
-      <transition
-        enter-active-class="transition duration-200 ease-out"
-        enter-from-class="transform scale-90 opacity-0"
-        enter-to-class="transform scale-100 opacity-100"
-        leave-active-class="transition duration-75 ease-in"
-        leave-from-class="transform scale-100 opacity-100"
-        leave-to-class="transform scale-90 opacity-0"
+      <div
+        ref="tooltipRef"
+        class="fixed top-0 left-0 z-tooltip"
+        :class="[!interactive ? 'pointer-events-none' : '']"
+        :style="floatingStyles"
       >
-        <slot
-          v-if="showTooltip"
-          name="tooltip"
+        <transition
+          enter-active-class="transition duration-200 ease-out"
+          enter-from-class="transform scale-90 opacity-0"
+          enter-to-class="transform scale-100 opacity-100"
+          leave-active-class="transition duration-75 ease-in"
+          leave-from-class="transform scale-100 opacity-100"
+          leave-to-class="transform scale-90 opacity-0"
         >
-          <div
-            class="text-xs max-w-xs leading-snug rounded-md pt-1.5 pb-2 px-3"
-            :class="[
-              dark ? 'bg-slate-900 text-white' : 'bg-white text-slate-900 ring-1 ring-black ring-opacity-10 shadow-md',
-            ]"
-            v-html="text"
-          />
-        </slot>
-      </transition>
-    </div>
-  </Teleport>
+          <slot
+            v-if="showTooltip"
+            name="tooltip"
+          >
+            <div
+              class="text-xs max-w-xs leading-snug rounded-md pt-1.5 pb-2 px-3"
+              :class="[
+                dark ? 'bg-slate-900 text-white' : 'bg-white text-slate-900 ring-1 ring-black ring-opacity-10 shadow-md',
+              ]"
+              v-html="text"
+            />
+          </slot>
+        </transition>
+      </div>
+    </Teleport>
+  </component>
 </template>
 
 <script lang="ts" setup>
@@ -45,14 +45,10 @@ import { useTooltip } from '@/composables/tooltip';
 import { unrefElement } from '@vueuse/core';
 import { UseFloatingOptions } from '@floating-ui/vue';
 
-defineOptions({
-  inheritAttrs: false,
-});
-
 const props = withDefaults(defineProps<{
+  as?: string,
   visible?: boolean,
   text?: string | null | undefined;
-  class?: string[] | string | null | undefined;
   floatingOptions?: UseFloatingOptions,
   /**
    * Whether the tooltip content is interactive or not.
@@ -63,9 +59,9 @@ const props = withDefaults(defineProps<{
   dark?: boolean,
   offset?: number,
 }>(), {
+  as: 'div',
   visible: true,
   text: null,
-  class: null,
   floatingOptions() {
     return {
       placement: 'top-start',
@@ -85,10 +81,4 @@ const tooltipRef = ref<HTMLElement | null>(null)
 
 const { floatingStyles, showTooltip } = useTooltip(targetInternal, tooltipRef, props.interactive, props.delay, props.floatingOptions, props.offset);
 
-const classInternal = computed(() => {
-  return [
-    props.class,
-  ];
-});
-
 </script>

package/src/services/gantt/types.ts

@@ -89,3 +89,8 @@ export interface Scale {
 export interface NowLine {
     x: number;
 }
+
+export interface GanttRelationship {
+    fromId: number | string;
+    toId: number | string;
+}