@expcat/tigercat-vue 2.1.2 → 2.1.3

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
+                      ]
+                    )
+                  ]);
+                })
+              )
+            ])
+          }
+        )
+      ]
     );
   }
 });

package/dist/{chunk-HS4YQGZQ.mjs → chunk-SZO4WL42.mjs}

@@ -1,5 +1,12 @@
 // src/components/VirtualList.ts
-import { defineComponent, h, ref, computed, onMounted, onUpdated } from "vue";
+import {
+  defineComponent,
+  h,
+  ref,
+  computed,
+  onMounted,
+  onUpdated
+} from "vue";
 import {
   virtualListContainerClasses,
   virtualListInnerClasses,
@@ -7,10 +14,12 @@ import {
   variableSizeStrategy,
   dynamicSizeStrategy,
   classNames,
-  coerceClassValue
+  coerceClassValue,
+  mergeStyleValues
 } from "@expcat/tigercat-core";
 var VirtualList = defineComponent({
   name: "TigerVirtualList",
+  inheritAttrs: false,
   props: {
     itemCount: { type: Number, default: 0 },
     itemHeight: { type: Number, default: 40 },
@@ -25,34 +34,48 @@ var VirtualList = defineComponent({
     },
     height: { type: Number, default: 400 },
     overscan: { type: Number, default: 5 },
-    /** Custom class name (merged with the `class` attribute) */
-    className: { type: String, default: void 0 }
+    getItemKey: {
+      type: Function,
+      default: void 0
+    },
+    ariaLabel: { type: String, default: void 0 },
+    className: { type: String, default: void 0 },
+    role: { type: String, default: "list" }
   },
   emits: ["scroll"],
-  setup(props, { emit, attrs, slots }) {
+  setup(props, { emit, attrs, slots, expose }) {
     const scrollTop = ref(0);
     const measureVersion = ref(0);
     const containerRef = ref(null);
     const itemEls = /* @__PURE__ */ new Map();
-    const isDynamic = computed(
-      () => !props.sizeStrategy && !props.getItemHeight && props.estimatedItemHeight !== void 0
-    );
+    let dynamicHeld = null;
+    let heldEstimated;
     const strategy = computed(() => {
-      if (props.sizeStrategy) return props.sizeStrategy;
+      if (props.sizeStrategy) {
+        dynamicHeld = null;
+        return props.sizeStrategy;
+      }
       if (props.getItemHeight) {
+        dynamicHeld = null;
         return variableSizeStrategy(props.getItemHeight, props.itemCount);
       }
       if (props.estimatedItemHeight !== void 0) {
-        return dynamicSizeStrategy(props.estimatedItemHeight, props.itemCount);
+        if (!dynamicHeld || heldEstimated !== props.estimatedItemHeight) {
+          dynamicHeld = dynamicSizeStrategy(props.estimatedItemHeight, props.itemCount);
+          heldEstimated = props.estimatedItemHeight;
+        }
+        return dynamicHeld;
       }
+      dynamicHeld = null;
       return fixedSizeStrategy(props.itemHeight);
     });
+    const canMeasure = computed(() => typeof strategy.value.updateItemHeight === "function");
     const range = computed(() => {
       void measureVersion.value;
       return strategy.value.getRange(scrollTop.value, props.height, props.itemCount, props.overscan);
     });
-    function measureDynamic() {
-      if (!isDynamic.value) return;
+    function measureVisible() {
+      if (!canMeasure.value) return;
       const strat = strategy.value;
       if (!strat.updateItemHeight) return;
       let changed = false;
@@ -65,31 +88,59 @@ var VirtualList = defineComponent({
       });
       if (changed) measureVersion.value += 1;
     }
-    onMounted(measureDynamic);
-    onUpdated(measureDynamic);
-    function handleScroll() {
-      if (containerRef.value) {
-        scrollTop.value = containerRef.value.scrollTop;
-        emit("scroll", scrollTop.value);
+    onMounted(measureVisible);
+    onUpdated(measureVisible);
+    function applyScrollTop(next) {
+      const offset = Math.max(0, next);
+      if (containerRef.value && containerRef.value.scrollTop !== offset) {
+        containerRef.value.scrollTop = offset;
+      }
+      scrollTop.value = offset;
+      emit("scroll", offset);
+    }
+    const handle = {
+      scrollToIndex(index) {
+        const safe = Number.isFinite(index) ? Math.floor(index) : 0;
+        const clamped = Math.max(0, Math.min(Math.max(props.itemCount - 1, 0), safe));
+        applyScrollTop(strategy.value.getItemOffset(clamped));
+      },
+      scrollToOffset(offset) {
+        applyScrollTop(Number.isFinite(offset) ? offset : 0);
+      },
+      getScrollElement() {
+        return containerRef.value;
       }
+    };
+    expose(handle);
+    function handleScroll() {
+      if (!containerRef.value) return;
+      const st = containerRef.value.scrollTop;
+      scrollTop.value = st;
+      emit("scroll", st);
     }
     return () => {
-      const { startIndex, endIndex, totalHeight } = range.value;
+      const { startIndex, endIndex, totalHeight, offsetTop } = range.value;
       const currentStrategy = strategy.value;
       const items = [];
-      const dynamic = isDynamic.value;
+      const dynamic = canMeasure.value;
+      const asList = props.role === "list";
       if (dynamic) itemEls.clear();
       for (let i = startIndex; i <= endIndex; i++) {
         const itemH = currentStrategy.getItemHeight(i);
         const slotContent = slots.default?.({ index: i });
         const index = i;
+        const key = props.getItemKey ? props.getItemKey(i) : i;
         items.push(
           h(
             "div",
             {
-              key: index,
-              // Auto height in dynamic mode so real content height is measurable.
-              style: dynamic ? { width: "100%" } : { height: `${itemH}px`, width: "100%" },
+              key,
+              ...asList ? {
+                role: "listitem",
+                "aria-setsize": props.itemCount,
+                "aria-posinset": index + 1
+              } : {},
+              style: dynamic ? { width: "100%" } : { height: `${itemH}px`, width: "100%", overflow: "hidden" },
               ref: dynamic ? (el) => {
                 if (el)
                   itemEls.set(index, el.$el ?? el);
@@ -100,17 +151,22 @@ var VirtualList = defineComponent({
           )
         );
       }
-      const offsetTop = startIndex >= 0 ? currentStrategy.getItemOffset(startIndex) : 0;
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+      const namedAriaLabel = props.ariaLabel ?? (typeof restAttrs["aria-label"] === "string" ? restAttrs["aria-label"] : void 0);
       return h(
         "div",
         {
+          ...restAttrs,
           ref: containerRef,
+          role: props.role,
+          tabindex: 0,
+          "aria-label": namedAriaLabel,
           class: classNames(
             virtualListContainerClasses,
             props.className,
-            coerceClassValue(attrs.class)
+            coerceClassValue(attrClass)
           ),
-          style: { height: `${props.height}px` },
+          style: mergeStyleValues(attrStyle, { height: `${props.height}px` }),
           onScroll: handleScroll
         },
         [