@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/{chunk-DRLQCY7R.mjs → chunk-SJ6Z7IMD.mjs}

@@ -1,12 +1,15 @@
 import {
   ChartCanvas
-} from "./chunk-SNNT64HK.mjs";
+} from "./chunk-6K5BLE4Q.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/Gantt.ts
 import { computed, defineComponent, h, onBeforeUnmount, ref } from "vue";
 import {
-  applyGanttTaskDateOverlay,
   classNames,
+  coerceClassValue,
   clampGanttDragDeltaX,
   computeGanttLayout,
   ganttAxisTextClasses,
@@ -16,7 +19,10 @@ import {
   ganttProgressClasses,
   ganttRowClasses,
   ganttTodayLineClasses,
-  getChartInnerRect,
+  getCartesianChartShellClasses,
+  getChartLabels,
+  mergeTigerLocale,
+  normalizeChartPadding,
   getGanttTaskAriaLabel,
   getGanttTaskClasses,
   isBrowser,
@@ -25,6 +31,7 @@ import {
 var GANTT_BAR_CLICK_PX = 4;
 var Gantt = defineComponent({
   name: "TigerGantt",
+  inheritAttrs: false,
   props: {
     data: { type: Array, required: true },
     width: { type: Number, default: 760 },
@@ -48,21 +55,26 @@ var Gantt = defineComponent({
       default: void 0
     },
     activeOpacity: { type: Number, default: 1 },
-    inactiveOpacity: { type: Number, default: 0.35 },
+    inactiveOpacity: { type: Number, default: 0.25 },
+    draggable: { type: Boolean, default: false },
     dateFormatter: {
       type: Function
     },
+    weekStartsOn: { type: Number },
     colors: { type: Array },
     title: { type: String },
     desc: { type: String },
-    ariaLabel: { type: String, default: "Gantt chart" },
-    className: { type: String }
+    ariaLabel: { type: String },
+    className: { type: String },
+    onTaskClick: { type: Function },
+    onTaskChange: { type: Function }
   },
   emits: ["update:selectedId", "task-click", "task-hover", "task-change", "update:data"],
-  setup(props, { emit }) {
+  setup(props, { emit, attrs }) {
+    const config = useTigerConfig();
+    const labels = computed(() => getChartLabels(mergeTigerLocale(config.value.locale)));
     const innerSelectedId = ref(null);
     const hoveredId = ref(null);
-    const dateOverlay = ref(/* @__PURE__ */ new Map());
     const dragSession = ref(null);
     const dragPreview = ref(null);
     let documentPointerListening = false;
@@ -70,11 +82,11 @@ var Gantt = defineComponent({
     const resolvedSelectedId = computed(
       () => props.selectedId === void 0 ? innerSelectedId.value : props.selectedId
     );
-    const resolvedData = computed(() => applyGanttTaskDateOverlay(props.data, dateOverlay.value));
-    const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
+    const canDrag = computed(() => props.draggable || typeof props.onTaskChange === "function");
+    const resolvedPadding = computed(() => normalizeChartPadding(props.padding));
     const layout = computed(
-      () => computeGanttLayout(resolvedData.value, {
-        width: innerRect.value.width,
+      () => computeGanttLayout(props.data, {
+        width: Math.max(0, props.width - resolvedPadding.value.left - resolvedPadding.value.right),
         rowHeight: props.rowHeight,
         barHeight: props.barHeight,
         taskLabelWidth: props.taskLabelWidth,
@@ -85,16 +97,31 @@ var Gantt = defineComponent({
         scale: props.scale,
         colors: props.colors,
         today: props.showToday ? /* @__PURE__ */ new Date() : void 0,
-        dateFormatter: props.dateFormatter
+        dateFormatter: props.dateFormatter,
+        weekStartsOn: props.weekStartsOn
       })
     );
+    const plotWidth = computed(
+      () => Math.max(
+        props.width,
+        layout.value.width + resolvedPadding.value.left + resolvedPadding.value.right
+      )
+    );
+    const plotHeight = computed(
+      () => Math.max(
+        props.height,
+        layout.value.height + resolvedPadding.value.top + resolvedPadding.value.bottom
+      )
+    );
     const activeId = computed(() => resolvedSelectedId.value ?? hoveredId.value);
     const selectTask = (task) => {
-      if (props.selectable && !task.task.disabled) {
+      if (task.task.disabled) return;
+      if (props.selectable) {
         const nextId = resolvedSelectedId.value === task.id ? null : task.id;
-        innerSelectedId.value = nextId;
+        if (props.selectedId === void 0) innerSelectedId.value = nextId;
         emit("update:selectedId", nextId);
       }
+      props.onTaskClick?.(task.task);
       emit("task-click", task.task);
     };
     const setHoveredTask = (task) => {
@@ -166,17 +193,8 @@ var Gantt = defineComponent({
         selectTask(session.task);
         return;
       }
-      const incoming = props.data.find((item) => item.id === nextTask.id);
-      const previous = dateOverlay.value.get(nextTask.id);
-      const nextOverlay = new Map(dateOverlay.value);
-      nextOverlay.set(nextTask.id, {
-        start: nextTask.start,
-        end: nextTask.end,
-        baseStart: previous?.baseStart ?? incoming?.start ?? session.sourceTask.start,
-        baseEnd: previous?.baseEnd ?? incoming?.end ?? session.sourceTask.end
-      });
-      dateOverlay.value = nextOverlay;
-      const nextData = applyGanttTaskDateOverlay(props.data, nextOverlay);
+      const nextData = props.data.map((item) => item.id === nextTask.id ? nextTask : item);
+      props.onTaskChange?.(nextTask);
       emit("task-change", nextTask);
       emit("update:data", nextData);
     };
@@ -201,7 +219,7 @@ var Gantt = defineComponent({
       documentPointerListening = false;
     };
     const startBarDrag = (event, task) => {
-      if (task.task.disabled || dragSession.value) return;
+      if (!canDrag.value || task.task.disabled || dragSession.value) return;
       if (event.button !== void 0 && event.button !== 0) return;
       event.preventDefault();
       const current = layout.value;
@@ -241,142 +259,151 @@ var Gantt = defineComponent({
       dragPreview.value = null;
     });
     return () => h(
-      ChartCanvas,
+      "div",
       {
-        width: props.width,
-        height: props.height,
-        padding: props.padding,
-        title: props.title,
-        desc: props.desc,
-        className: classNames(props.className),
-        role: "img",
-        "aria-label": props.ariaLabel
+        class: getCartesianChartShellClasses({
+          showLegend: false,
+          className: classNames(coerceClassValue(attrs.class), props.className)
+        })
       },
-      {
-        default: () => h("g", { "data-series-type": "gantt" }, [
-          h("g", { "data-gantt-axis": "true" }, [
-            h("line", {
-              x1: props.taskLabelWidth,
-              x2: layout.value.width,
-              y1: props.timelineHeight - 1,
-              y2: props.timelineHeight - 1,
-              stroke: "var(--tiger-border,#d1d5db)"
-            }),
-            ...layout.value.ticks.map(
-              (tick) => h("g", { key: `${tick.label}-${tick.x}` }, [
+      [
+        h(
+          ChartCanvas,
+          {
+            width: plotWidth.value,
+            height: plotHeight.value,
+            padding: props.padding,
+            title: props.title,
+            desc: props.desc,
+            "aria-label": props.ariaLabel ?? (props.title ? void 0 : labels.value.ganttAriaLabel)
+          },
+          {
+            default: () => h("g", { "data-series-type": "gantt" }, [
+              h("g", { "data-gantt-axis": "true" }, [
                 h("line", {
-                  x1: tick.x,
-                  x2: tick.x,
-                  y1: 0,
-                  y2: layout.value.height,
-                  stroke: "var(--tiger-border,#e5e7eb)"
+                  x1: props.taskLabelWidth,
+                  x2: layout.value.width,
+                  y1: props.timelineHeight - 1,
+                  y2: props.timelineHeight - 1,
+                  stroke: "var(--tiger-border,#d1d5db)"
                 }),
-                h("text", { x: tick.x + 4, y: 16, class: ganttAxisTextClasses }, tick.label)
-              ])
-            )
-          ]),
-          h(
-            "g",
-            { "data-gantt-rows": "true" },
-            layout.value.tasks.map(
-              (task) => h("rect", {
-                key: `row-${task.id}`,
-                x: 0,
-                y: props.timelineHeight + task.index * props.rowHeight,
-                width: layout.value.width,
-                height: props.rowHeight,
-                class: task.index % 2 === 0 ? ganttRowClasses : void 0,
-                opacity: task.index % 2 === 0 ? 0.75 : 0
-              })
-            )
-          ),
-          props.showToday && layout.value.todayX !== null ? h("line", {
-            x1: layout.value.todayX,
-            x2: layout.value.todayX,
-            y1: 0,
-            y2: layout.value.height,
-            class: ganttTodayLineClasses,
-            "data-gantt-today": "true"
-          }) : void 0,
-          props.showDependencies ? h(
-            "g",
-            { "data-gantt-dependencies": "true" },
-            layout.value.dependencies.map(
-              (dependency) => h("path", {
-                key: `${dependency.sourceId}-${dependency.targetId}`,
-                d: dependency.path,
-                class: ganttDependencyClasses
-              })
-            )
-          ) : void 0,
-          h(
-            "g",
-            { "data-gantt-tasks": "true" },
-            layout.value.tasks.map((task) => {
-              const selected = resolvedSelectedId.value === task.id;
-              const interactive = (props.hoverable || props.selectable) && !task.task.disabled;
-              const movable = !task.task.disabled;
-              const grabbing = dragPreview.value?.id === task.id;
-              const previewDeltaX = grabbing ? dragPreview.value?.deltaX ?? 0 : 0;
-              return h("g", { key: task.id, opacity: getTaskOpacity(task) }, [
-                h(
-                  "text",
-                  {
-                    x: 0,
-                    y: task.y + task.height / 2 + 4,
-                    class: ganttLabelClasses
-                  },
-                  task.task.label
-                ),
-                h(
-                  "g",
-                  {
-                    class: getGanttTaskClasses(interactive, selected, movable, grabbing),
-                    role: interactive ? "button" : "group",
-                    tabindex: interactive ? 0 : void 0,
-                    "aria-label": getGanttTaskAriaLabel(task.task),
-                    "data-gantt-task-id": task.id,
-                    transform: previewDeltaX !== 0 ? `translate(${previewDeltaX} 0)` : void 0,
-                    onMouseenter: () => setHoveredTask(task),
-                    onMouseleave: () => setHoveredTask(null),
-                    onPointerdown: (event) => startBarDrag(event, task),
-                    onPointermove: (event) => moveBarDrag(event),
-                    onPointerup: (event) => finishBarDrag(event),
-                    onPointercancel: (event) => finishBarDrag(event),
-                    onClick: (event) => handleBarClick(event, task),
-                    onKeydown: (event) => {
-                      if (event.key === "Enter" || event.key === " ") {
-                        event.preventDefault();
-                        selectTask(task);
-                      }
-                    }
-                  },
-                  [
-                    h("rect", {
-                      x: task.x,
-                      y: task.y,
-                      width: task.width,
-                      height: task.height,
-                      rx: 4,
-                      fill: task.color,
-                      stroke: selected ? "var(--tiger-text,#111827)" : void 0,
-                      strokeWidth: selected ? 2 : void 0
+                ...layout.value.ticks.map(
+                  (tick) => h("g", { key: `${tick.label}-${tick.x}` }, [
+                    h("line", {
+                      x1: tick.x,
+                      x2: tick.x,
+                      y1: 0,
+                      y2: layout.value.height,
+                      stroke: "var(--tiger-border,#e5e7eb)"
                     }),
-                    props.showProgress && task.progressWidth > 0 ? h("rect", {
-                      x: task.x,
-                      y: task.y,
-                      width: task.progressWidth,
-                      height: task.height,
-                      rx: 4,
-                      class: ganttProgressClasses
-                    }) : void 0
-                  ]
+                    h("text", { x: tick.x + 4, y: 16, class: ganttAxisTextClasses }, tick.label)
+                  ])
                 )
-              ]);
-            })
-          )
-        ])
-      }
+              ]),
+              h(
+                "g",
+                { "data-gantt-rows": "true" },
+                layout.value.tasks.map(
+                  (task) => h("rect", {
+                    key: `row-${task.id}`,
+                    x: 0,
+                    y: props.timelineHeight + task.index * props.rowHeight,
+                    width: layout.value.width,
+                    height: props.rowHeight,
+                    class: task.index % 2 === 0 ? ganttRowClasses : void 0,
+                    opacity: task.index % 2 === 0 ? 0.75 : 0
+                  })
+                )
+              ),
+              props.showToday && layout.value.todayX !== null ? h("line", {
+                x1: layout.value.todayX,
+                x2: layout.value.todayX,
+                y1: 0,
+                y2: layout.value.height,
+                class: ganttTodayLineClasses,
+                "data-gantt-today": "true"
+              }) : void 0,
+              props.showDependencies ? h(
+                "g",
+                { "data-gantt-dependencies": "true" },
+                layout.value.dependencies.map(
+                  (dependency) => h("path", {
+                    key: `${dependency.sourceId}-${dependency.targetId}`,
+                    d: dependency.path,
+                    class: ganttDependencyClasses
+                  })
+                )
+              ) : void 0,
+              h(
+                "g",
+                { "data-gantt-tasks": "true" },
+                layout.value.tasks.map((task) => {
+                  const selected = resolvedSelectedId.value === task.id;
+                  const interactive = (props.hoverable || props.selectable || typeof props.onTaskClick === "function") && !task.task.disabled;
+                  const movable = canDrag.value && !task.task.disabled;
+                  const grabbing = dragPreview.value?.id === task.id;
+                  const previewDeltaX = grabbing ? dragPreview.value?.deltaX ?? 0 : 0;
+                  return h("g", { key: task.id, opacity: getTaskOpacity(task) }, [
+                    h(
+                      "text",
+                      {
+                        x: 0,
+                        y: task.y + task.height / 2 + 4,
+                        class: ganttLabelClasses
+                      },
+                      task.task.label
+                    ),
+                    h(
+                      "g",
+                      {
+                        class: getGanttTaskClasses(interactive, selected, movable, grabbing),
+                        role: interactive ? "button" : "group",
+                        tabindex: interactive ? 0 : void 0,
+                        "aria-label": getGanttTaskAriaLabel(task.task),
+                        "data-gantt-task-id": task.id,
+                        transform: previewDeltaX !== 0 ? `translate(${previewDeltaX} 0)` : void 0,
+                        onMouseenter: () => setHoveredTask(task),
+                        onMouseleave: () => setHoveredTask(null),
+                        onPointerdown: (event) => startBarDrag(event, task),
+                        onPointermove: (event) => moveBarDrag(event),
+                        onPointerup: (event) => finishBarDrag(event),
+                        onPointercancel: (event) => finishBarDrag(event),
+                        onClick: (event) => handleBarClick(event, task),
+                        onKeydown: (event) => {
+                          if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault();
+                            selectTask(task);
+                          }
+                        }
+                      },
+                      [
+                        h("rect", {
+                          x: task.x,
+                          y: task.y,
+                          width: task.width,
+                          height: task.height,
+                          rx: 4,
+                          fill: task.color,
+                          stroke: selected ? "var(--tiger-text,#111827)" : void 0,
+                          strokeWidth: selected ? 2 : void 0
+                        }),
+                        props.showProgress && task.progressWidth > 0 ? h("rect", {
+                          x: task.x,
+                          y: task.y,
+                          width: task.progressWidth,
+                          height: task.height,
+                          rx: 4,
+                          class: ganttProgressClasses
+                        }) : void 0
+                      ]
+                    )
+                  ]);
+                })
+              )
+            ])
+          }
+        )
+      ]
     );
   }
 });