sprintify-ui 0.11.32 → 0.11.34

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

@@ -122,7 +122,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         toggle: boolean;
         toggleDefault: boolean;
         width: number;
-        class?: string | string[] | undefined;
+        class?: (import("@/types").BaseTableColumnClassValue | ((row: Row) => import("@/types").BaseTableColumnClassValue)) | undefined;
         headerClass?: string | string[] | undefined;
         to?: ((row: Row) => RouteLocationRaw) | undefined;
         href?: ((row: Row) => string) | undefined;

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/dist/types/components/BaseTableColumn.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { BaseTableColumnData, CollectionItem } from '..';
+import { BaseTableColumnClassValue, BaseTableColumnData, CollectionItem } from '..';
 import { RouteLocationRaw } from 'vue-router';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     label: {
@@ -16,7 +16,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     class: {
         default: string;
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: PropType<BaseTableColumnClassValue | ((row: CollectionItem) => BaseTableColumnClassValue)>;
     };
     headerClass: {
         default: string;
@@ -118,7 +118,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     class: {
         default: string;
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: PropType<BaseTableColumnClassValue | ((row: CollectionItem) => BaseTableColumnClassValue)>;
     };
     headerClass: {
         default: string;
@@ -195,7 +195,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{}>, {
     label: string;
     toggle: boolean;
-    class: string | Record<string, any> | unknown[];
+    class: BaseTableColumnClassValue | ((row: CollectionItem) => BaseTableColumnClassValue);
     onClick: (row: CollectionItem, index: number, column: BaseTableColumnData, colIndex: number, event: MouseEvent) => void;
     href: (row: CollectionItem) => string;
     target: "_blank" | "_self" | "_parent" | "_top";

package/dist/types/types/index.d.ts

@@ -74,6 +74,7 @@ export interface ActionItem {
     actions?: ActionItem[];
 }
 export type Row = Record<string, any>;
+export type BaseTableColumnClassValue = string | string[] | Record<string, any>;
 export interface BaseTableColumnData {
     id: string;
     label: string;
@@ -89,7 +90,7 @@ export interface BaseTableColumnData {
     toggle: boolean;
     toggleDefault: boolean;
     width: number;
-    class?: string | string[];
+    class?: BaseTableColumnClassValue | ((row: Row) => BaseTableColumnClassValue);
     headerClass?: string | string[];
     to?: (row: Row) => RouteLocationRaw;
     href?: (row: Row) => string;

package/package.json

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

package/src/components/BaseDataTableTemplate.vue

@@ -117,7 +117,7 @@
             <BaseTableCell
               v-for="(column, columnIndex) in visibleColumnsInternal"
               :key="column.newKey + index + ':' + columnIndex"
-              :class="[column.class, column.numeric ? 'tabular-nums' : '']"
+              :class="[getColumnClass(row, column), column.numeric ? 'tabular-nums' : '']"
               :align="column.align"
               :style="column.style"
               :to="column.to ? column.to(row) : undefined"
@@ -729,6 +729,14 @@ function rowBindings(row: CollectionItem, index: number) {
   }
 }
 
+function getColumnClass(row: CollectionItem, column: BaseTableColumnData): any {
+  if (typeof column.class === 'function') {
+    return column.class(row);
+  }
+
+  return column.class;
+}
+
 function onCellClick(row: CollectionItem, index: number, column: BaseTableColumnData, columnIndex: number) {
   if (!column.onClick) {
     return undefined;

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/components/BaseTableColumn.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent, h, PropType } from 'vue';
-import { BaseTableColumnData, CollectionItem } from '..';
+import { BaseTableColumnClassValue, BaseTableColumnData, CollectionItem } from '..';
 import { RouteLocationRaw } from 'vue-router';
 
 export default defineComponent({
@@ -21,7 +21,7 @@ export default defineComponent({
     },
     class: {
       default: '',
-      type: [String, Array, Object],
+      type: [String, Array, Object, Function] as PropType<BaseTableColumnClassValue | ((row: CollectionItem) => BaseTableColumnClassValue)>,
     },
     headerClass: {
       default: '',

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;

package/src/types/index.ts

@@ -99,6 +99,7 @@ export interface ActionItem {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Row = Record<string, any>;
+export type BaseTableColumnClassValue = string | string[] | Record<string, any>;
 
 export interface BaseTableColumnData {
   id: string;
@@ -116,7 +117,7 @@ export interface BaseTableColumnData {
   toggle: boolean;
   toggleDefault: boolean;
   width: number;
-  class?: string | string[];
+  class?: BaseTableColumnClassValue | ((row: Row) => BaseTableColumnClassValue);
   headerClass?: string | string[];
   to?: (row: Row) => RouteLocationRaw;
   href?: (row: Row) => string;
@@ -305,4 +306,4 @@ export interface InputConfigProps {
 
 export type { GanttItem, GanttRow };
 
-export type { ToolbarOption };
+export type { ToolbarOption };