@expcat/tigercat-vue 2.1.0 → 2.1.2

package/dist/{chunk-EHGFW5GX.mjs → chunk-6JAAXPBW.mjs}

@@ -1,6 +1,6 @@
 import {
   useChartInteraction
-} from "./chunk-PE5OA4YG.mjs";
+} from "./chunk-FHUGOSEY.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";
@@ -9,7 +9,7 @@ import {
 } from "./chunk-SPFL55TF.mjs";
 import {
   ChartCanvas
-} from "./chunk-W5RZPTFD.mjs";
+} from "./chunk-SNNT64HK.mjs";
 import {
   ChartLegend
 } from "./chunk-V443QIJM.mjs";
@@ -76,6 +76,7 @@ var TreeMapChart = defineComponent({
       wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
+      showTooltip: computed(() => props.showTooltip),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
       selectedIndexProp: () => props.selectedIndex,
@@ -219,7 +220,7 @@ var TreeMapChart = defineComponent({
           }
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {
+      const tooltip = props.showTooltip ? h(ChartTooltip, {
         content: tooltipContent.value,
         open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,

package/dist/{chunk-JHMT5Q6P.mjs → chunk-6NYC7EY2.mjs}

@@ -1,6 +1,9 @@
+import {
+  useResponsiveChartSize
+} from "./chunk-UEGNXN5B.mjs";
 import {
   useChartInteraction
-} from "./chunk-PE5OA4YG.mjs";
+} from "./chunk-FHUGOSEY.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";
@@ -12,7 +15,7 @@ import {
 } from "./chunk-ZWVA7HT3.mjs";
 import {
   ChartCanvas
-} from "./chunk-W5RZPTFD.mjs";
+} from "./chunk-SNNT64HK.mjs";
 import {
   ChartGrid
 } from "./chunk-MI6TL3CQ.mjs";
@@ -29,7 +32,6 @@ import {
   createLinePath,
   createPointScale,
   getChartElementOpacity,
-  getChartInnerRect,
   getStableChartGradientPrefix,
   getNumberExtent,
   linePointTransitionClasses,
@@ -255,7 +257,12 @@ var LineChart = defineComponent({
     const hoveredPointInfo = ref(null);
     const tooltipPosition = ref({ x: 0, y: 0 });
     const gradientPrefix = getStableChartGradientPrefix("line", useId());
-    const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
+    const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+      () => props.width,
+      () => props.height,
+      () => props.padding,
+      () => props.responsive
+    );
     const resolvedSeries = computed(
       () => resolveSeriesData(props.series, props.data, {
         color: props.lineColor,
@@ -273,6 +280,7 @@ var LineChart = defineComponent({
       wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
+      showTooltip: computed(() => props.showTooltip),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
       selectedIndexProp: () => props.selectedIndex,
@@ -368,19 +376,23 @@ var LineChart = defineComponent({
     const handlePointMouseEnter = (seriesIndex, pointIndex, event) => {
       hoveredPointInfo.value = { seriesIndex, pointIndex };
       tooltipPosition.value = { x: event.clientX, y: event.clientY };
-      emit(
-        "point-hover",
-        seriesIndex,
-        pointIndex,
-        resolvedSeries.value[seriesIndex]?.data[pointIndex]
-      );
+      if (props.hoverable) {
+        emit(
+          "point-hover",
+          seriesIndex,
+          pointIndex,
+          resolvedSeries.value[seriesIndex]?.data[pointIndex]
+        );
+      }
     };
     const handlePointMouseMove = (event) => {
       tooltipPosition.value = { x: event.clientX, y: event.clientY };
     };
     const handlePointMouseLeave = () => {
       hoveredPointInfo.value = null;
-      emit("point-hover", null, null, null);
+      if (props.hoverable) {
+        emit("point-hover", null, null, null);
+      }
     };
     const showPointTooltipFromElement = (el, seriesIndex, pointIndex) => {
       if (!props.hoverable) return;
@@ -411,6 +423,7 @@ var LineChart = defineComponent({
     };
     return () => {
       const pointClickable = props.selectable || typeof instance?.vnode.props?.onPointClick === "function";
+      const trackPointHover = props.showTooltip || props.hoverable;
       const chart = h(
         ChartCanvas,
         {
@@ -420,7 +433,8 @@ var LineChart = defineComponent({
           responsive: props.responsive,
           title: props.title,
           desc: props.desc,
-          className: classNames(props.className)
+          className: classNames(props.className),
+          onResolvedSizeChange
         },
         {
           default: () => [
@@ -627,9 +641,9 @@ var LineChart = defineComponent({
                         tabindex: pointInteractive ? 0 : void 0,
                         "data-point-index": point.pointIndex,
                         "data-series-key": sd.seriesKey,
-                        onMouseenter: props.hoverable ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
-                        onMousemove: props.hoverable ? handlePointMouseMove : void 0,
-                        onMouseleave: props.hoverable ? handlePointMouseLeave : void 0,
+                        onMouseenter: trackPointHover ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
+                        onMousemove: trackPointHover ? handlePointMouseMove : void 0,
+                        onMouseleave: trackPointHover ? handlePointMouseLeave : void 0,
                         onClick: pointClickable ? (e) => {
                           e.stopPropagation();
                           handlePointClick(sd.seriesIndex, point.pointIndex);

package/dist/{chunk-6BDDX2R4.mjs → chunk-73Z7N7VG.mjs}

@@ -99,10 +99,7 @@ var Radio = defineComponent({
     });
     const isInGroup = computed(() => !!groupContext.value);
     const actualSize = computed(() => props.size || groupContext.value?.size || "md");
-    const actualDisabled = computed(() => {
-      if (props.disabled !== void 0) return props.disabled;
-      return groupContext.value?.disabled || false;
-    });
+    const actualDisabled = computed(() => props.disabled || groupContext.value?.disabled || false);
     const actualName = computed(() => props.name || groupContext.value?.name);
     const isChecked = computed(() => {
       if (isCheckedControlled.value) return props.modelValue;

package/dist/{chunk-F3ZVVVYD.mjs → chunk-7C7SG3SS.mjs}

@@ -63,7 +63,10 @@ var MaskInput = defineComponent({
     readonly: Boolean,
     /** Whether to show a clear button when the input has value */
     clearable: Boolean,
-    /** Input name attribute */
+    /**
+     * Input name attribute. When set, a hidden input with this name submits the
+     * raw (unmasked) value; the visible field displays the mask and has no name.
+     */
     name: String,
     /** Input id attribute */
     id: String,
@@ -200,7 +203,6 @@ var MaskInput = defineComponent({
           placeholder: props.placeholder,
           disabled: props.disabled,
           readonly: props.readonly,
-          name: props.name,
           id: props.id,
           autocomplete: props.autoComplete,
           autofocus: props.autoFocus,
@@ -214,11 +216,21 @@ var MaskInput = defineComponent({
           onBlur: handleBlur
         })
       ];
+      if (props.name) {
+        children.push(
+          h("input", {
+            key: "hidden",
+            type: "hidden",
+            name: props.name,
+            value: rawValue.value
+          })
+        );
+      }
       if (activeError) {
         children.push(
           h(
             "div",
-            { id: errorMsgId, class: getInputErrorClasses(props.size) },
+            { id: errorMsgId, class: getInputErrorClasses(props.size), "aria-live": "polite" },
             effectiveErrorMessage.value
           )
         );

package/dist/{chunk-CHEXI7MO.mjs → chunk-7TJE7OYH.mjs}

@@ -1,6 +1,6 @@
 import {
   useChartInteraction
-} from "./chunk-PE5OA4YG.mjs";
+} from "./chunk-FHUGOSEY.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";
@@ -9,7 +9,7 @@ import {
 } from "./chunk-SPFL55TF.mjs";
 import {
   ChartCanvas
-} from "./chunk-W5RZPTFD.mjs";
+} from "./chunk-SNNT64HK.mjs";
 import {
   ChartLegend
 } from "./chunk-V443QIJM.mjs";
@@ -188,6 +188,7 @@ var PieChart = defineComponent({
       wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
+      showTooltip: computed(() => props.showTooltip),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
       selectedIndexProp: () => props.selectedIndex,
@@ -392,7 +393,7 @@ var PieChart = defineComponent({
           }
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {
+      const tooltip = props.showTooltip ? h(ChartTooltip, {
         content: tooltipContent.value,
         open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,

package/dist/{chunk-EGIMTTZA.mjs → chunk-BOHE5URZ.mjs}

@@ -30,11 +30,14 @@ import {
   kanbanSwimlaneCollapsedClasses,
   kanbanAddColumnClasses,
   filterColumns,
+  filterCards,
   groupBySwimlane,
   getColumnCardCount,
   moveCard,
+  mapVisibleCardIndexToSource,
   reorderColumns,
   isWipExceeded,
+  appendDefaultTaskBoardCard,
   createTaskBoardDragController,
   createDefaultDragSnapshot
 } from "@expcat/tigercat-core";
@@ -139,10 +142,22 @@ var TaskBoard = defineComponent({
       innerColumns.value = next;
       emit("update:columns", next);
     };
+    const addCardToColumn = (columnId) => {
+      emit("card-add", columnId);
+      if (props.onCardAdd == null) {
+        updateColumns(appendDefaultTaskBoardCard(currentColumns.value, columnId));
+      }
+    };
     const dragSnap = ref(createDefaultDragSnapshot());
     const boardRef = ref(null);
     const applyCardMove = async (cardId, fromColumnId, toColumnId, toIdx) => {
-      const result = moveCard(currentColumns.value, cardId, fromColumnId, toColumnId, toIdx, {
+      const sourceCol = currentColumns.value.find((c) => c.id === toColumnId);
+      const mappedIdx = sourceCol == null ? toIdx : mapVisibleCardIndexToSource(
+        sourceCol.cards,
+        filterCards(sourceCol.cards, props.filterText || ""),
+        toIdx
+      );
+      const result = moveCard(currentColumns.value, cardId, fromColumnId, toColumnId, mappedIdx, {
         enforceWipLimit: props.enforceWipLimit
       });
       if (!result) return;
@@ -395,12 +410,12 @@ var TaskBoard = defineComponent({
           role: "button",
           tabindex: 0,
           onClick: () => {
-            emit("card-add", column.id);
+            addCardToColumn(column.id);
           },
           onKeydown: (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              emit("card-add", column.id);
+              addCardToColumn(column.id);
             }
           }
         },

package/dist/{chunk-5RIHHZF6.mjs → chunk-BQK7LH2L.mjs}

@@ -271,6 +271,7 @@ var InputNumber = defineComponent({
     });
     onBeforeUnmount(() => repeatController.stop());
     return () => {
+      const { class: _attrClass, style: attrStyle, ...restAttrs } = attrs;
       const children = [];
       if (props.controls && props.controlsPosition === "both") {
         children.push(
@@ -307,6 +308,7 @@ var InputNumber = defineComponent({
       }
       children.push(
         h("input", {
+          ...restAttrs,
           ref: inputRef,
           type: "text",
           inputmode: "decimal",
@@ -423,7 +425,8 @@ var InputNumber = defineComponent({
       return h(
         "div",
         {
-          class: wrapperClasses.value
+          class: wrapperClasses.value,
+          style: attrStyle
         },
         children
       );

package/dist/{chunk-E6EZHSGY.mjs → chunk-BSOLH6R5.mjs}

@@ -26,7 +26,6 @@ var QRCode = defineComponent({
     size: { type: Number, default: 128 },
     color: { type: String, default: "#000000" },
     bgColor: { type: String, default: "#ffffff" },
-    level: { type: String, default: "M" },
     status: { type: String, default: "active" },
     className: { type: String, default: void 0 },
     locale: { type: Object, default: void 0 }

package/dist/{chunk-RSM6FOWX.mjs → chunk-CCC3S6LK.mjs}

@@ -227,12 +227,15 @@ var FormWizard = defineComponent({
       setCurrent(target);
     };
     const handleStepChange = async (nextIndex) => {
-      if (nextIndex === currentIndex.value || props.steps[nextIndex]?.disabled) return;
-      if (nextIndex > currentIndex.value) {
+      if (nextIndex === currentIndex.value) return;
+      const direction = nextIndex > currentIndex.value ? 1 : -1;
+      if (direction === 1) {
         const ok = await runBeforeNext();
         if (!ok) return;
       }
-      setCurrent(nextIndex);
+      const target = findNextUnskipped(nextIndex, direction);
+      if (target === currentIndex.value) return;
+      setCurrent(target);
     };
     const renderContent = () => {
       if (!currentStep.value) {

package/dist/{chunk-U75YXWSA.mjs → chunk-CLTRADS7.mjs}

@@ -1,9 +1,12 @@
 import {
   TaskBoard
-} from "./chunk-EGIMTTZA.mjs";
+} from "./chunk-BOHE5URZ.mjs";
 
 // src/components/Kanban.ts
-import { defineComponent, h } from "vue";
+import { defineComponent, h, ref } from "vue";
+import {
+  appendDefaultTaskBoardCard
+} from "@expcat/tigercat-core";
 var Kanban = defineComponent({
   name: "TigerKanban",
   inheritAttrs: false,
@@ -59,7 +62,14 @@ var Kanban = defineComponent({
   },
   emits: ["card-move", "column-move", "update:columns", "card-add", "column-add"],
   setup(props, { emit, attrs, slots }) {
+    const pendingColumns = ref(void 0);
     const handleCardAdd = (colId) => {
+      if (props.onCardAdd == null) {
+        const source = props.columns ?? pendingColumns.value ?? props.defaultColumns;
+        const next = appendDefaultTaskBoardCard(source, colId);
+        pendingColumns.value = next;
+        emit("update:columns", next);
+      }
       props.onCardAdd?.(colId);
       emit("card-add", colId);
     };
@@ -67,14 +77,13 @@ var Kanban = defineComponent({
       TaskBoard,
       {
         ...attrs,
-        columns: props.columns,
+        columns: props.columns !== void 0 ? props.columns : pendingColumns.value,
         defaultColumns: props.defaultColumns,
         draggable: props.draggable,
         columnDraggable: props.columnDraggable,
         enforceWipLimit: props.enforceWipLimit,
         beforeCardMove: props.beforeCardMove,
         beforeColumnMove: props.beforeColumnMove,
-        // Only set onCardAdd when needed — its presence affects button visibility
         onCardAdd: props.allowAddCard || props.onCardAdd ? handleCardAdd : void 0,
         filterText: props.filterText,
         hiddenColumns: props.hiddenColumns,
@@ -88,7 +97,10 @@ var Kanban = defineComponent({
         style: props.style,
         "onCard-move": (e) => emit("card-move", e),
         "onColumn-move": (e) => emit("column-move", e),
-        "onUpdate:columns": (cols) => emit("update:columns", cols),
+        "onUpdate:columns": (cols) => {
+          pendingColumns.value = cols;
+          emit("update:columns", cols);
+        },
         "onColumn-add": () => emit("column-add")
       },
       slots

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

@@ -1,13 +1,16 @@
 import {
   ChartCanvas
-} from "./chunk-W5RZPTFD.mjs";
+} from "./chunk-SNNT64HK.mjs";
 
 // src/components/Gantt.ts
-import { computed, defineComponent, h, ref } from "vue";
+import { computed, defineComponent, h, onBeforeUnmount, ref } from "vue";
 import {
+  applyGanttTaskDateOverlay,
   classNames,
+  clampGanttDragDeltaX,
   computeGanttLayout,
   ganttAxisTextClasses,
+  ganttDateValuesEqual,
   ganttDependencyClasses,
   ganttLabelClasses,
   ganttProgressClasses,
@@ -15,8 +18,11 @@ import {
   ganttTodayLineClasses,
   getChartInnerRect,
   getGanttTaskAriaLabel,
-  getGanttTaskClasses
+  getGanttTaskClasses,
+  isBrowser,
+  moveGanttTaskByPx
 } from "@expcat/tigercat-core";
+var GANTT_BAR_CLICK_PX = 4;
 var Gantt = defineComponent({
   name: "TigerGantt",
   props: {
@@ -52,16 +58,22 @@ var Gantt = defineComponent({
     ariaLabel: { type: String, default: "Gantt chart" },
     className: { type: String }
   },
-  emits: ["update:selectedId", "task-click", "task-hover"],
+  emits: ["update:selectedId", "task-click", "task-hover", "task-change", "update:data"],
   setup(props, { emit }) {
     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;
+    let suppressClick = false;
     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 layout = computed(
-      () => computeGanttLayout(props.data, {
+      () => computeGanttLayout(resolvedData.value, {
         width: innerRect.value.width,
         rowHeight: props.rowHeight,
         barHeight: props.barHeight,
@@ -94,6 +106,140 @@ var Gantt = defineComponent({
       if (activeId.value === null) return props.activeOpacity;
       return activeId.value === task.id ? props.activeOpacity : props.inactiveOpacity;
     };
+    const pointerScale = (event) => {
+      const target = event.currentTarget;
+      const svg = target instanceof SVGElement ? target.ownerSVGElement ?? target.closest("svg") : target instanceof Element ? target.closest("svg") : null;
+      const clientWidth = svg?.clientWidth ?? 0;
+      if (!(clientWidth > 0)) return 1;
+      const viewBoxWidth = svg?.viewBox?.baseVal?.width;
+      const resolvedViewBox = typeof viewBoxWidth === "number" && viewBoxWidth > 0 ? viewBoxWidth : props.width;
+      return resolvedViewBox / clientWidth;
+    };
+    const captureBarPointer = (target, pointerId) => {
+      if (!(target instanceof Element) || typeof target.setPointerCapture !== "function") return;
+      try {
+        target.setPointerCapture(pointerId);
+      } catch {
+      }
+    };
+    const releaseBarPointer = (target, pointerId) => {
+      if (!target || typeof target.releasePointerCapture !== "function") return;
+      try {
+        target.releasePointerCapture(pointerId);
+      } catch {
+      }
+    };
+    const moveBarDrag = (event) => {
+      const session = dragSession.value;
+      if (!session || event.pointerId !== session.pointerId) return;
+      const rawDelta = (event.clientX - session.startClientX) * session.scale;
+      const deltaX = clampGanttDragDeltaX(
+        rawDelta,
+        session.barX,
+        session.barWidth,
+        session.taskLabelWidth,
+        session.layoutWidth
+      );
+      session.deltaX = deltaX;
+      dragPreview.value = { id: session.task.id, deltaX };
+    };
+    const finishBarDrag = (event) => {
+      const session = dragSession.value;
+      if (!session || event.pointerId !== session.pointerId) return;
+      moveBarDrag(event);
+      const deltaX = session.deltaX;
+      dragSession.value = null;
+      dragPreview.value = null;
+      detachDocumentPointerListeners();
+      releaseBarPointer(session.captureTarget, session.pointerId);
+      suppressClick = true;
+      if (Math.abs(deltaX) < GANTT_BAR_CLICK_PX) {
+        selectTask(session.task);
+        return;
+      }
+      const nextTask = moveGanttTaskByPx(session.sourceTask, deltaX, {
+        minMs: session.minMs,
+        maxMs: session.maxMs,
+        timelineWidth: session.timelineWidth
+      });
+      if (ganttDateValuesEqual(nextTask.start, session.sourceTask.start) && ganttDateValuesEqual(nextTask.end, session.sourceTask.end)) {
+        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);
+      emit("task-change", nextTask);
+      emit("update:data", nextData);
+    };
+    const handleDocumentPointerMove = (event) => {
+      moveBarDrag(event);
+    };
+    const handleDocumentPointerEnd = (event) => {
+      finishBarDrag(event);
+    };
+    const attachDocumentPointerListeners = () => {
+      if (documentPointerListening || !isBrowser()) return;
+      document.addEventListener("pointermove", handleDocumentPointerMove);
+      document.addEventListener("pointerup", handleDocumentPointerEnd);
+      document.addEventListener("pointercancel", handleDocumentPointerEnd);
+      documentPointerListening = true;
+    };
+    const detachDocumentPointerListeners = () => {
+      if (!documentPointerListening || !isBrowser()) return;
+      document.removeEventListener("pointermove", handleDocumentPointerMove);
+      document.removeEventListener("pointerup", handleDocumentPointerEnd);
+      document.removeEventListener("pointercancel", handleDocumentPointerEnd);
+      documentPointerListening = false;
+    };
+    const startBarDrag = (event, task) => {
+      if (task.task.disabled || dragSession.value) return;
+      if (event.button !== void 0 && event.button !== 0) return;
+      event.preventDefault();
+      const current = layout.value;
+      const captureTarget = event.currentTarget instanceof Element ? event.currentTarget : null;
+      dragSession.value = {
+        pointerId: event.pointerId,
+        startClientX: event.clientX,
+        scale: pointerScale(event),
+        task,
+        sourceTask: task.task,
+        barX: task.x,
+        barWidth: task.width,
+        taskLabelWidth: props.taskLabelWidth,
+        layoutWidth: current.width,
+        minMs: current.minMs,
+        maxMs: current.maxMs,
+        timelineWidth: current.timelineWidth,
+        deltaX: 0,
+        captureTarget
+      };
+      dragPreview.value = { id: task.id, deltaX: 0 };
+      captureBarPointer(event.currentTarget, event.pointerId);
+      attachDocumentPointerListeners();
+    };
+    const handleBarClick = (event, task) => {
+      if (suppressClick) {
+        suppressClick = false;
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      selectTask(task);
+    };
+    onBeforeUnmount(() => {
+      detachDocumentPointerListeners();
+      dragSession.value = null;
+      dragPreview.value = null;
+    });
     return () => h(
       ChartCanvas,
       {
@@ -169,6 +315,9 @@ var Gantt = defineComponent({
             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",
@@ -182,13 +331,19 @@ var Gantt = defineComponent({
                 h(
                   "g",
                   {
-                    class: getGanttTaskClasses(interactive, selected),
+                    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),
-                    onClick: () => selectTask(task),
+                    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();

package/dist/{chunk-KBJANUZZ.mjs → chunk-E523VGZP.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-SPFL55TF.mjs";
 import {
   ChartCanvas
-} from "./chunk-W5RZPTFD.mjs";
+} from "./chunk-SNNT64HK.mjs";
 
 // src/components/GaugeChart.ts
 import { defineComponent, computed, h, ref, watch, onBeforeUnmount, useId } from "vue";