sprintify-ui 0.10.87 → 0.11.0

package/src/components/BaseGantt.vue

@@ -8,7 +8,7 @@
     <!-- Sidebar -->
     <div
       class="border-r border-slate-300 relative shrink-0"
-      :style="{ minWidth: `${SIDEBAR_WIDTH}px` }"
+      :style="{ width: `${props.sidebarWidth}px` }"
     >
       <!-- Top-left Corner-->
       <div
@@ -30,22 +30,68 @@
         <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)"
+          class="block border-b border-slate-300 last:border-none"
         >
-          <slot
-            name="sidebarItem"
-            :row="row"
+          <div
+            :style="{
+              height: row.height + 'px',
+            }"
+            class="w-full flex overflow-hidden"
           >
-            <div class="px-2 flex items-center">
-              <p class="font-semibold text-sm">
-                {{ row.name }}
-              </p>
+            <button
+              type="button"
+              class="p-1 shrink-0 block"
+              @click="toggleRow(row.id)"
+            >
+              <BaseIcon
+                icon="mdi:chevron-down" 
+                :class="{
+                  'rotate-0': isRowExpanded(row.id),
+                  '-rotate-90': !isRowExpanded(row.id),
+                }"
+                class="transition-transform duration-200"
+              />
+            </button>
+            <div
+              class="w-full overflow-hidden grow"
+              @click="$emit('row:click', row)"
+            >
+              <slot
+                name="sidebarRow"
+                :row="row"
+              >
+                <div class="px-1 py-1 h-full flex items-center">
+                  <p class="font-semibold leading-tight truncate text-xs">
+                    {{ row.name }}
+                  </p>
+                </div>
+              </slot>
+            </div>
+          </div>
+          <template
+            v-if="isRowExpanded(row.id)"
+          >
+            <div
+              v-for="item in row.items"
+              :key="item.id"
+              :style="{
+                height: item.height + 'px'
+              }"
+              class="w-full border-t overflow-hidden"
+              @click="$emit('item:click', item)"
+            >
+              <slot
+                name="sidebarItem"
+                :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">
+                    {{ item.name }}
+                  </p>
+                </div>
+              </slot>
             </div>
-          </slot>
+          </template>
         </li>
       </ul>
     </div> 
@@ -138,49 +184,95 @@
 
       <ul
         ref="itemsRef"
-        class="relative w-full overflow-scroll grow"
+        class="relative block w-full 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`,
           }"
+          class="border-b border-slate-300 w-full"
         >
-          <button
-            v-for="item in row.items"
-            :key="item.id"
-            type="button"
-            class="absolute flex"
+          <div
+            class="block relative"
             :style="{
-              transform: `translate(${item.x}px, ${item.y}px)`,
-              height: item.height + 'px',
-              width: item.width + 'px',
+              height: `${row.height}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"
+            <button
+              type="button"
+              class="absolute flex"
+              :style="{
+                transform: `translate(${row.x}px, ${row.y}px)`,
+                height: row.barHeight + 'px',
+                width: row.width + 'px',
+              }"
+              :title="`${row.name} - ${row.start.toFormat('yyyy-MM-dd HH:mm:ss')} - ${row.end.toFormat('yyyy-MM-dd HH:mm:ss')}`"
+              @click="$emit('row:click', row)"
             >
-              <div
+              <slot
+                name="row"
+                :row="row"
+              >
+                <div
+                  :style="{
+                    backgroundColor: 'gray',
+                  }"
+                  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);"
+                  >
+                    {{ row.name }}
+                  </p>
+                </div>
+              </slot>
+            </button>
+          </div>
+          
+          <div v-if="isRowExpanded(row.id)">
+            <div
+              v-for="item in row.items"
+              :key="row.id + '-' + item.id"
+              class="block border-t relative border-slate-200 w-full"
+              :style="{
+                height: `${item.height}px`,
+              }"
+            >
+              <button
+                type="button"
+                class="absolute flex"
                 :style="{
-                  backgroundColor: item.color,
+                  transform: `translate(${item.x}px, ${item.y}px)`,
+                  height: item.barHeight + 'px',
+                  width: item.width + 'px',
                 }"
-                class="flex w-full h-full items-center rounded hover:opacity-80 duration-200"
+                :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)"
               >
-                <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);"
+                <slot
+                  name="item"
+                  :item="item"
                 >
-                  {{ item.name }}
-                </p>
-              </div>
-            </slot>
-          </button>
+                  <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 px-2 py-1 truncate"
+                      style="text-shadow: 0.5px 0.5px rgba(0,0,0,0.1);"
+                    >
+                      {{ item.name }}
+                    </p>
+                  </div>
+                </slot>
+              </button>
+            </div>
+          </div>
         </li>
       </ul>
 
@@ -264,31 +356,55 @@
 <script lang="ts" setup>
 import { useElementSize, useScroll } from '@vueuse/core';
 import { Format } from '@/services/gantt/format';
-import { FormatConfig, GanttRow, GanttRowFormatted, Group, Tick, NowLine } from '@/services/gantt/types';
-import { debounce } from 'lodash';
+import { FormatConfig, GanttRow, GanttRowFormatted, Group, Tick, NowLine, GanttItemFormatted } from '@/services/gantt/types';
+import { cloneDeep, debounce } from 'lodash';
 import { slate } from 'tailwindcss/colors';
+import { VNode } from 'vue';
+
+interface Props {
+  /**
+   * Rows to display in the Gantt chart
+   */
+  rows: GanttRow[];
+  /**
+   * Width of the sidebar in pixels
+   */
+  sidebarWidth?: number;
+  /**
+   * Height of each row in pixels
+   */
+  rowHeight?: number;
+  /**
+   * Maximum height of the Gantt chart in pixels. The chart will be scrollable if the content exceeds this height.
+   */
+  maxHeight?: number;
+  /**
+   * Whether to include a "now" line in the Gantt chart
+   */
+  includeToday?: boolean;
+}
 
-const props = withDefaults(defineProps<{
-  rows: GanttRow[],
-  rowHeight?: number,
-  rowPadding?: number,
-  maxHeight?: number,
-  includeToday?: boolean,
-}>(), {
+const props = withDefaults(defineProps<Props>(), {
+  sidebarWidth: 150,
   rowHeight: 40,
-  rowPadding: 4,
   maxHeight: undefined,
   includeToday: true,
 });
 
-defineEmits([
-  'item:click',
-  'row:click',
-]);
+defineEmits<{
+  (e: 'row:click', row: GanttRowFormatted): void;
+  (e: 'item:click', item: GanttItemFormatted): void;
+}>();
+
+defineSlots<{
+  sidebarRow: (props: { row: GanttRowFormatted }) => VNode[];
+  sidebarItem: (props: { item: GanttItemFormatted }) => VNode[];
+  row: (props: { row: GanttRowFormatted }) => VNode[];
+  item: (props: { item: GanttItemFormatted }) => VNode[];
+}>();
 
 // Config
 
-const SIDEBAR_WIDTH = 120;
 const HEADER_HEIGHT = 40;
 
 // Init
@@ -308,9 +424,9 @@ const nowLine = ref<NowLine | null>(null);
 const config = computed<FormatConfig>(() => {
   return {
     rows: props.rows,
+    sidebarWidth: props.sidebarWidth,
     minWidth: contentSize.width.value,
     rowHeight: props.rowHeight,
-    rowPadding: props.rowPadding,
     includeToday: props.includeToday,
   };
 });
@@ -328,6 +444,8 @@ function init() {
 
   nowLine.value = format.nowLine;
 
+  expandedRows.value = new Set(props.rows.map((r) => r.id));
+
   // Scroll to now line
 
   nextTick(() => {
@@ -370,7 +488,7 @@ const currentGroup = computed<Group | undefined>(() => {
 
   const offsetLeft = -scrollX.value;
 
-  return groups.value
+  return cloneDeep(groups.value)
     // Sort by x descending
     .sort((a, b) => {
       return b.x - a.x;
@@ -381,4 +499,20 @@ const currentGroup = computed<Group | undefined>(() => {
     });
 });
 
+// Toggle items
+
+const expandedRows = ref<Set<string | number>>(new Set());
+
+function toggleRow(rowId: string | number) {
+  if (expandedRows.value.has(rowId)) {
+    expandedRows.value.delete(rowId);
+  } else {
+    expandedRows.value.add(rowId);
+  }
+}
+
+function isRowExpanded(rowId: string | number): boolean {
+  return expandedRows.value.has(rowId);
+}
+
 </script>

package/src/components/BaseHasMany.stories.js

@@ -16,6 +16,11 @@ export default {
     options: options,
     field: "label",
     primaryKey: "value",
+    optionColor: (option) => {
+      if (option.type === "jedi") return "blue";
+      if (option.type === "sith") return "black";
+      return "gray";
+    }
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };

package/src/components/BaseHasMany.vue

@@ -12,6 +12,8 @@
     :size="size"
     :has-error="hasError"
     :max="max"
+    :option-color="optionColor"
+    :option-icon="optionIcon"
     @update:model-value="onUpdate"
   >
     <template #items="itemProps">
@@ -96,6 +98,14 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  optionColor: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
+  optionIcon: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);

package/src/components/BaseHasManyFetch.stories.js

@@ -22,6 +22,18 @@ export default {
       const params = QueryString.stringify({ filter: { id: ids } });
       return `https://faker.witify.io/api/todos?${params}`;
     },
+    optionColor: (option) => {
+      if (option.type === "work") return "green";
+      if (option.type === "personal") return "blue";
+      if (option.type === "family") return "purple";
+      return "gray";
+    },
+    optionIcon: (option) => {
+      if (option.type === "work") return "heroicons-solid:briefcase";
+      if (option.type === "personal") return "heroicons-solid:user-circle";
+      if (option.type === "family") return "heroicons-solid:home";
+      return "heroicons-solid:tag";
+    }
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };

package/src/components/BaseTagAutocomplete.stories.js

@@ -22,6 +22,11 @@ export default {
     labelKey: "label",
     valueKey: "value",
     options: options,
+    optionColor: (option) => {
+      if (option.type === "jedi") return "blue";
+      if (option.type === "sith") return "black";
+      return "gray";
+    }
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };

package/src/components/BaseTagAutocomplete.vue

@@ -17,8 +17,30 @@
         >
           <div
             :title="selection.label"
-            class="truncate"
+            class="truncate flex gap-2 items-center"
           >
+            <div
+              v-if="optionIcon && selection.option"
+              class="shrink-0"
+            >
+              <BaseIcon
+                :icon="optionIcon(selection.option)"
+                class="shrink-0"
+                :color="optionColor ? optionColor(selection.option) : 'gray'"
+              />
+            </div>
+            <div
+              v-else-if="optionColor && selection.option"
+              class="shrink-0"
+            >
+              <div
+                class="shrink-0 rounded-full h-2.5 w-2.5"
+                :style="{
+                  backgroundColor: optionColor(selection.option),
+                }"
+              />
+            </div>
+
             {{ selection.label }}
           </div>
 
@@ -70,6 +92,8 @@
           :loading="loading"
           :loading-bottom="loadingBottom"
           tw-drawer="p-1"
+          :option-color="optionColor"
+          :option-icon="optionIcon"
           :keywords="keywords"
           @select="onSelect"
           @scroll-bottom="emit('scrollBottom')"
@@ -112,6 +136,7 @@ import { t } from '@/i18n';
 import { Size, sizes } from '@/utils/sizes';
 import { autoUpdate, flip, offset, useFloating } from '@floating-ui/vue';
 import { useElementBounding } from '@vueuse/core';
+import { BaseIcon } from '.';
 
 const snackbars = useSnackbarsStore();
 
@@ -193,6 +218,14 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+  optionColor: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
+  optionIcon: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
 });
 
 const emit = defineEmits([

package/src/components/BaseTagAutocompleteFetch.stories.js

@@ -16,6 +16,12 @@ export default {
     url: "https://faker.witify.io/api/todos",
     labelKey: "name",
     valueKey: "id",
+    optionColor: (option) => {
+      if (option.type === "work") return "green";
+      if (option.type === "personal") return "blue";
+      if (option.type === "family") return "purple";
+      return "gray";
+    },
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };

package/src/services/gantt/format.ts

@@ -1,6 +1,9 @@
 import { DateTime } from "luxon";
 import { FormatConfig, GanttItem, GanttItemFormatted, GanttRow, GanttRowFormatted, NowLine } from "./types";
 import { Timescale } from "./timescale";
+import { sum } from "lodash";
+
+const PADDING_Y_ROW = 4;
 
 export class Format {
 
@@ -35,22 +38,36 @@ export class Format {
             row.items.forEach((item) => {
 
                 const x = (item.start.toMillis() - min.toMillis()) * millisecondToPixel;
-                const y = this.config.rowPadding;
+                const y = PADDING_Y_ROW;
                 const width = item.milliseconds * millisecondToPixel;
-                const height = this.config.rowHeight - (this.config.rowPadding * 2);
+                const height = item.height - PADDING_Y_ROW * 2;
 
                 item.x = x;
                 item.y = y;
                 item.width = width;
-                item.height = height;
+                item.barHeight = height;
             });
+
+            const x = Math.min(...row.items.map((item) => item.x));
+            const y = PADDING_Y_ROW;
+            const height = row.height - (PADDING_Y_ROW * 2);
+            const width = Math.max(...row.items.map((item) => item.x + item.width)) - x;
+            const start = DateTime.min(...row.items.map((item) => item.start)) as DateTime;
+            const end = DateTime.max(...row.items.map((item) => item.end)) as DateTime;
+
+            row.x = x;
+            row.y = y;
+            row.barHeight = height;
+            row.width = width;
+            row.start = start;
+            row.end = end;
         });
 
         const today = DateTime.local().startOf(timescale.scale.tick.step);
 
         let nowLine = null;
 
-        if (today >= min && today <= max) {
+        if (today >= min && today <= max && this.config.includeToday) {
             nowLine = {
                 x: (today.toMillis() - min.toMillis()) * millisecondToPixel,
             } as NowLine;
@@ -61,7 +78,7 @@ export class Format {
             min,
             max,
             millisecondToPixel,
-            height: this.config.rowHeight * this.rows.length,
+            height: sum(rowsFormatted.map((r) => r.height + sum(r.items.map((i) => i.height)))),
             width: timescale.width,
             groups: timescale.groups,
             ticks: timescale.ticks,
@@ -85,7 +102,13 @@ export class Format {
             name: row.name,
             meta: row.meta,
             items: itemsFormatted,
-        };
+            height: row.height ?? this.config.rowHeight,
+            width: 0,
+            start: DateTime.now(),
+            end: DateTime.now(),
+            x: 0,
+            y: 0,
+        } as GanttRowFormatted;
     }
 
     formatGanttItem(item: GanttItem): GanttItemFormatted {
@@ -104,7 +127,7 @@ export class Format {
             x: 0,
             y: 0,
             width: 0,
-            height: 0,
+            height: item.height ?? this.config.rowHeight,
         } as GanttItemFormatted;
     }
 

package/src/services/gantt/types.ts

@@ -4,6 +4,7 @@ export interface GanttItem {
     id: number | string;
     start: string;
     end: string;
+    height?: number;
     name: string;
     meta?: Record<string, unknown>;
     color: string;
@@ -14,34 +15,43 @@ export interface GanttRow {
     name: string;
     meta?: Record<string, unknown>;
     items: GanttItem[];
+    height?: number;
 }
 
 export interface GanttRowFormatted {
     id: number | string;
     name: string;
-    meta?: Record<string, unknown>;
     items: GanttItemFormatted[];
+    height: number;
+    barHeight: number;
+    width: number;
+    start: DateTime;
+    end: DateTime;
+    x: number;
+    y: number;
+    meta?: Record<string, unknown>;
 }
 
 export interface GanttItemFormatted {
     id: number | string;
-    start: DateTime;
-    end: DateTime;
     name: string;
-    meta?: Record<string, unknown>;
     color: string;
-    milliseconds: number;
+    height: number;
+    barHeight: number;
+    width: number;
+    start: DateTime;
+    end: DateTime;
     x: number;
     y: number;
-    width: number;
-    height: number;
+    milliseconds: number;
+    meta?: Record<string, unknown>;
 }
 
 export interface FormatConfig {
     rows: GanttRow[];
+    sidebarWidth: number;
     minWidth: number;
     rowHeight: number;
-    rowPadding: number;
     includeToday: boolean;
 }