sprintify-ui 0.11.33 → 0.11.34

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

@@ -25,6 +25,18 @@ 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;
+    /**
+     * Start with every row collapsed (items hidden) by default.
+     */
+    rowsCollapsedByDefault?: boolean;
+    /**
+     * Show row bar labels rendered outside the bar.
+     */
+    showRowBarLabels?: boolean;
+    /**
+     * Show item bar labels rendered outside the bar.
+     */
+    showItemBarLabels?: boolean;
     /**
      * Relationships between items, drawn as arrows from one item to another.
      */
@@ -55,6 +67,9 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
     sidebarWidth: number;
     rowHeight: number;
     includeToday: boolean;
+    rowsCollapsedByDefault: boolean;
+    showRowBarLabels: boolean;
+    showItemBarLabels: boolean;
     relationships: GanttRelationship[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.33",
+  "version": "0.11.34",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseGantt.stories.js

@@ -46,7 +46,6 @@ for (let i = 0; i < 10; i++) {
     id: i + 1,
     name: `Project sdf sdfg sdf gsdf gsdf gsdf g sdf sdf sdfg dsfg dsfg ${i + 1}`,
     items: items,
-    height: 30,
   });
 }
 
@@ -55,7 +54,7 @@ export default {
   component: BaseGantt,
   args: {
     rows,
-    maxHeight: 300,
+    maxHeight: 400,
   },
 };
 

package/src/components/BaseGantt.vue

@@ -62,7 +62,7 @@
                 :row="row"
               >
                 <div class="px-1 py-1 h-full flex items-center">
-                  <p class="font-semibold leading-tight truncate text-xs">
+                  <p class="font-medium leading-tight truncate text-[13px]">
                     {{ row.name }}
                   </p>
                 </div>
@@ -86,7 +86,7 @@
                 :item="item"
               >
                 <div class="pr-1 pl-4 py-1 h-full flex items-center">
-                  <p class="leading-tight truncate text-slate-600 text-xs">
+                  <p class="leading-tight truncate text-slate-600 text-[13px]">
                     {{ item.name }}
                   </p>
                 </div>
@@ -204,7 +204,7 @@
           >
             <button
               type="button"
-              class="absolute flex"
+              class="absolute flex overflow-visible"
               :style="{
                 transform: `translate(${row.x}px, ${row.y}px)`,
                 height: row.barHeight + 'px',
@@ -218,19 +218,19 @@
                 :row="row"
               >
                 <div
-                  :style="{
-                    backgroundColor: 'gray',
-                  }"
-                  class="flex w-full h-full items-center rounded hover:opacity-80 duration-200"
+                  class="relative w-full h-full hover:opacity-80 duration-200 text-slate-500"
                 >
-                  <p
-                    class="text-white text-xs px-2 py-1 truncate"
-                    style="text-shadow: 0.5px 0.5px rgba(0,0,0,0.1);"
-                  >
-                    {{ row.name }}
-                  </p>
+                  <div class="absolute left-0 right-0 top-1/2 -translate-y-1/2 border-t-2 border-current" />
+                  <div class="absolute left-0 top-1/2 -translate-y-1/2 h-3 border-l-2 border-current" />
+                  <div class="absolute right-0 top-1/2 -translate-y-1/2 h-3 border-r-2 border-current" />
                 </div>
               </slot>
+              <p
+                v-if="props.showRowBarLabels"
+                class="absolute left-full ml-2 top-1/2 -translate-y-1/2 text-[13px] leading-tight font-semibold text-slate-900 whitespace-nowrap max-w-[320px] truncate"
+              >
+                {{ row.name }}
+              </p>
             </button>
           </div>
           
@@ -245,7 +245,7 @@
             >
               <button
                 type="button"
-                class="absolute flex"
+                class="absolute flex overflow-visible"
                 :style="{
                   transform: `translate(${item.x}px, ${item.y}px)`,
                   height: item.barHeight + 'px',
@@ -263,15 +263,14 @@
                       backgroundColor: item.color,
                     }"
                     class="flex w-full h-full items-center rounded hover:opacity-80 duration-200"
-                  >
-                    <p
-                      class="text-white text-xs px-2 py-1 truncate"
-                      style="text-shadow: 0.5px 0.5px rgba(0,0,0,0.1);"
-                    >
-                      {{ item.name }}
-                    </p>
-                  </div>
+                  />
                 </slot>
+                <p
+                  v-if="props.showItemBarLabels"
+                  class="absolute left-full ml-2 top-1/2 -translate-y-1/2 text-[13px] leading-tight text-slate-700 whitespace-nowrap max-w-[320px] truncate"
+                >
+                  {{ item.name }}
+                </p>
               </button>
             </div>
           </div>
@@ -427,6 +426,18 @@ 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;
+  /**
+   * Start with every row collapsed (items hidden) by default.
+   */
+  rowsCollapsedByDefault?: boolean;
+  /**
+   * Show row bar labels rendered outside the bar.
+   */
+  showRowBarLabels?: boolean;
+  /**
+   * Show item bar labels rendered outside the bar.
+   */
+  showItemBarLabels?: boolean;
   /**
    * Relationships between items, drawn as arrows from one item to another.
    */
@@ -438,6 +449,9 @@ const props = withDefaults(defineProps<Props>(), {
   rowHeight: 40,
   maxHeight: undefined,
   includeToday: true,
+  rowsCollapsedByDefault: false,
+  showRowBarLabels: true,
+  showItemBarLabels: true,
   relationships: () => [],
 });
 
@@ -494,7 +508,9 @@ function init() {
 
   nowLine.value = format.nowLine;
 
-  expandedRows.value = new Set(props.rows.map((r) => r.id));
+  expandedRows.value = props.rowsCollapsedByDefault
+    ? new Set<string | number>()
+    : new Set(props.rows.map((r) => r.id));
 
   // Scroll to now line
 

package/src/services/gantt/format.ts

@@ -4,6 +4,7 @@ import { Timescale } from "./timescale";
 import { sum } from "lodash";
 
 const PADDING_Y_ROW = 4;
+const ITEM_LABEL_TIMELINE_PADDING_X = 800;
 
 export class Format {
 
@@ -23,8 +24,18 @@ export class Format {
         // Get min and max
         let { min, max } = this.getMinMax(rowsFormatted);
 
-        // Get timescale
-        const timescale = (new Timescale(this.config.minWidth, min, max)).handle();
+        // Get baseline timescale before expanding the visible range for outside item labels.
+        const baselineTimescale = (new Timescale(this.config.minWidth, min, max)).handle();
+
+        const timelinePaddingMilliseconds = baselineTimescale.millisecondToPixel > 0
+            ? ITEM_LABEL_TIMELINE_PADDING_X / baselineTimescale.millisecondToPixel
+            : 0;
+
+        const paddedMin = baselineTimescale.min.minus({ milliseconds: timelinePaddingMilliseconds });
+        const paddedMax = baselineTimescale.max.plus({ milliseconds: timelinePaddingMilliseconds });
+
+        // Rebuild timescale with left/right timeline padding so labels can render outside bars by default.
+        const timescale = (new Timescale(this.config.minWidth, paddedMin, paddedMax)).handle();
 
         // Padded min and max
         min = timescale.min;