@expcat/tigercat-vue 1.1.0 → 1.2.0

package/dist/chunk-BEIPGX74.mjs

@@ -0,0 +1,233 @@
+import {
+  ChartCanvas
+} from "./chunk-W5RZPTFD.mjs";
+
+// src/components/Gantt.ts
+import { computed, defineComponent, h, ref } from "vue";
+import {
+  classNames,
+  computeGanttLayout,
+  ganttAxisTextClasses,
+  ganttDependencyClasses,
+  ganttLabelClasses,
+  ganttProgressClasses,
+  ganttRowClasses,
+  ganttTodayLineClasses,
+  getChartInnerRect,
+  getGanttTaskAriaLabel,
+  getGanttTaskClasses
+} from "@expcat/tigercat-core";
+var Gantt = defineComponent({
+  name: "TigerGantt",
+  props: {
+    data: { type: Array, required: true },
+    width: { type: Number, default: 760 },
+    height: { type: Number, default: 360 },
+    padding: { type: [Number, Object], default: 24 },
+    scale: { type: String, default: "week" },
+    rowHeight: { type: Number, default: 40 },
+    barHeight: { type: Number, default: 18 },
+    taskLabelWidth: { type: Number, default: 140 },
+    timelineHeight: { type: Number, default: 36 },
+    minDate: { type: [String, Number, Date] },
+    maxDate: { type: [String, Number, Date] },
+    minBarWidth: { type: Number, default: 6 },
+    showToday: { type: Boolean, default: false },
+    showProgress: { type: Boolean, default: true },
+    showDependencies: { type: Boolean, default: true },
+    hoverable: { type: Boolean, default: false },
+    selectable: { type: Boolean, default: false },
+    selectedId: {
+      type: [String, Number, null],
+      default: void 0
+    },
+    activeOpacity: { type: Number, default: 1 },
+    inactiveOpacity: { type: Number, default: 0.35 },
+    dateFormatter: {
+      type: Function
+    },
+    colors: { type: Array },
+    title: { type: String },
+    desc: { type: String },
+    ariaLabel: { type: String, default: "Gantt chart" },
+    className: { type: String }
+  },
+  emits: ["update:selectedId", "task-click", "task-hover"],
+  setup(props, { emit }) {
+    const innerSelectedId = ref(null);
+    const hoveredId = ref(null);
+    const resolvedSelectedId = computed(
+      () => props.selectedId === void 0 ? innerSelectedId.value : props.selectedId
+    );
+    const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
+    const layout = computed(
+      () => computeGanttLayout(props.data, {
+        width: innerRect.value.width,
+        rowHeight: props.rowHeight,
+        barHeight: props.barHeight,
+        taskLabelWidth: props.taskLabelWidth,
+        timelineHeight: props.timelineHeight,
+        minDate: props.minDate,
+        maxDate: props.maxDate,
+        minBarWidth: props.minBarWidth,
+        scale: props.scale,
+        colors: props.colors,
+        today: props.showToday ? /* @__PURE__ */ new Date() : void 0,
+        dateFormatter: props.dateFormatter
+      })
+    );
+    const activeId = computed(() => resolvedSelectedId.value ?? hoveredId.value);
+    const selectTask = (task) => {
+      if (props.selectable && !task.task.disabled) {
+        const nextId = resolvedSelectedId.value === task.id ? null : task.id;
+        innerSelectedId.value = nextId;
+        emit("update:selectedId", nextId);
+      }
+      emit("task-click", task.task);
+    };
+    const setHoveredTask = (task) => {
+      if (!props.hoverable) return;
+      hoveredId.value = task?.id ?? null;
+      emit("task-hover", task?.task ?? null);
+    };
+    const getTaskOpacity = (task) => {
+      if (activeId.value === null) return props.activeOpacity;
+      return activeId.value === task.id ? props.activeOpacity : props.inactiveOpacity;
+    };
+    return () => h(
+      ChartCanvas,
+      {
+        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
+      },
+      {
+        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("line", {
+                  x1: tick.x,
+                  x2: tick.x,
+                  y1: 0,
+                  y2: layout.value.height,
+                  stroke: "var(--tiger-border,#e5e7eb)"
+                }),
+                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;
+              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),
+                    role: interactive ? "button" : "group",
+                    tabindex: interactive ? 0 : void 0,
+                    "aria-label": getGanttTaskAriaLabel(task.task),
+                    onMouseenter: () => setHoveredTask(task),
+                    onMouseleave: () => setHoveredTask(null),
+                    onClick: () => selectTask(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
+                  ]
+                )
+              ]);
+            })
+          )
+        ])
+      }
+    );
+  }
+});
+var Gantt_default = Gantt;
+
+export {
+  Gantt,
+  Gantt_default
+};

package/dist/chunk-BEIZXMHW.js

@@ -0,0 +1,470 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunk5436FG3Bjs = require('./chunk-5436FG3B.js');
+
+
+
+
+
+var _chunkJDCVS4SJjs = require('./chunk-JDCVS4SJ.js');
+
+// src/components/Modal.ts
+
+
+
+
+
+
+
+
+
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var modalIdCounter = 0;
+var createModalId = () => `tiger-modal-${++modalIdCounter}`;
+var Modal = _vue.defineComponent.call(void 0, {
+  name: "TigerModal",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Whether the modal is open
+     * @default false
+     */
+    open: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Modal size
+     * @default 'md'
+     */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Custom width (overrides size)
+     */
+    width: {
+      type: [String, Number],
+      default: void 0
+    },
+    /**
+     * Modal title
+     */
+    title: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Whether to show the close button
+     * @default true
+     */
+    closable: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether to show the mask (overlay)
+     * @default true
+     */
+    mask: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether clicking the mask should close the modal
+     * @default true
+     */
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the modal should be centered vertically
+     * @default false
+     */
+    centered: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether to render as a mobile bottom sheet below the md breakpoint
+     * @default false
+     */
+    mobileSheet: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether to destroy the modal content when closed
+     * @default false
+     */
+    destroyOnClose: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * z-index of the modal
+     * @default 1000
+     */
+    zIndex: {
+      type: Number,
+      default: 1e3
+    },
+    /**
+     * Custom class name
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Custom inline style
+     */
+    style: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Close button aria-label
+     * @default 'Close'
+     */
+    closeAriaLabel: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Default OK button text (used in default footer)
+     * @default '确定'
+     */
+    okText: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Default Cancel button text (used in default footer)
+     * @default '取消'
+     */
+    cancelText: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Locale overrides for common texts
+     */
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Whether to render a default footer when no `footer` slot is provided
+     * @default false
+     */
+    showDefaultFooter: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Disable teleport (useful for testing)
+     * @default false
+     * @internal
+     */
+    disableTeleport: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether the modal is draggable by its header
+     * @default false
+     */
+    draggable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:open", "close", "cancel", "ok"],
+  setup(props, { slots, emit, attrs }) {
+    const instanceId = _vue.ref.call(void 0, createModalId());
+    const hasBeenOpened = _vue.ref.call(void 0, props.open);
+    const dialogRef = _vue.ref.call(void 0, null);
+    const closeButtonRef = _vue.ref.call(void 0, null);
+    const previousActiveElement = _vue.ref.call(void 0, null);
+    let touchStartPoint = null;
+    let touchCurrentPoint = null;
+    const dragOffset = _vue.ref.call(void 0, { x: 0, y: 0 });
+    const isDragging = _vue.ref.call(void 0, false);
+    const dragStart = _vue.ref.call(void 0, { x: 0, y: 0 });
+    const handleDragMouseDown = (e) => {
+      if (!props.draggable) return;
+      isDragging.value = true;
+      dragStart.value = { x: e.clientX - dragOffset.value.x, y: e.clientY - dragOffset.value.y };
+      const onMouseMove = (ev) => {
+        dragOffset.value = { x: ev.clientX - dragStart.value.x, y: ev.clientY - dragStart.value.y };
+      };
+      const onMouseUp = () => {
+        isDragging.value = false;
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    };
+    const titleId = _vue.computed.call(void 0, () => `${instanceId.value}-title`);
+    const shouldRender = _vue.computed.call(void 0, () => {
+      if (props.open) return true;
+      if (props.destroyOnClose) return false;
+      return hasBeenOpened.value;
+    });
+    const handleClose = () => {
+      emit("update:open", false);
+      emit("cancel");
+    };
+    const handleOk = () => {
+      emit("ok");
+      emit("update:open", false);
+    };
+    const handleMaskClick = (event) => {
+      if (_tigercatcore.shouldCloseOnMaskClick.call(void 0, event, props.maskClosable)) {
+        handleClose();
+      }
+    };
+    const resetTouchGesture = () => {
+      touchStartPoint = null;
+      touchCurrentPoint = null;
+    };
+    const handleTouchStart = (event) => {
+      if (!props.open || !props.mobileSheet) return;
+      const point = _tigercatcore.getGestureTouchPoint.call(void 0, event.touches);
+      touchStartPoint = point;
+      touchCurrentPoint = point;
+    };
+    const handleTouchMove = (event) => {
+      if (!touchStartPoint) return;
+      const point = _tigercatcore.getGestureTouchPoint.call(void 0, event.touches);
+      if (point) {
+        touchCurrentPoint = point;
+      }
+    };
+    const handleTouchEnd = (event) => {
+      const gesture = _tigercatcore.resolveSwipeGesture.call(void 0, 
+        touchStartPoint,
+        _nullishCoalesce(_tigercatcore.getGestureTouchPoint.call(void 0, event.changedTouches), () => ( touchCurrentPoint)),
+        { minDistance: 48, minVelocity: 0.15 }
+      );
+      resetTouchGesture();
+      if (props.mobileSheet && _tigercatcore.isModalSheetSwipeCloseGesture.call(void 0, gesture)) {
+        handleClose();
+      }
+    };
+    const overlayOpen = _vue.computed.call(void 0, () => props.open);
+    let cleanupEscape;
+    _chunkJDCVS4SJjs.useVueBodyScrollLock.call(void 0, overlayOpen);
+    _chunkJDCVS4SJjs.useVueFocusTrap.call(void 0, { enabled: overlayOpen, containerRef: dialogRef });
+    _vue.onMounted.call(void 0, () => {
+      cleanupEscape = _chunkJDCVS4SJjs.useVueEscapeKey.call(void 0, { enabled: overlayOpen, onEscape: handleClose });
+    });
+    _vue.onBeforeUnmount.call(void 0, () => {
+      _optionalChain([cleanupEscape, 'optionalCall', _ => _()]);
+    });
+    _vue.watch.call(void 0, 
+      () => props.open,
+      async (nextVisible) => {
+        if (nextVisible) {
+          hasBeenOpened.value = true;
+          const active = document.activeElement;
+          previousActiveElement.value = active instanceof HTMLElement ? active : null;
+          await _vue.nextTick.call(void 0, );
+          const el = _nullishCoalesce(closeButtonRef.value, () => ( dialogRef.value));
+          _optionalChain([el, 'optionalAccess', _2 => _2.focus, 'optionalCall', _3 => _3()]);
+        } else {
+          emit("close");
+          _optionalChain([previousActiveElement, 'access', _4 => _4.value, 'optionalAccess', _5 => _5.focus, 'optionalCall', _6 => _6()]);
+          dragOffset.value = { x: 0, y: 0 };
+        }
+      }
+    );
+    const contentClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.getModalContentClasses.call(void 0, props.size, props.className, props.mobileSheet);
+    });
+    const containerClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.getModalContainerClasses.call(void 0, props.centered);
+    });
+    const CloseIcon = _vue.h.call(void 0, 
+      "svg",
+      {
+        class: "h-5 w-5",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: _tigercatcore.closeIconViewBox,
+        stroke: "currentColor"
+      },
+      [
+        _vue.h.call(void 0, "path", {
+          "stroke-linecap": _tigercatcore.closeIconPathStrokeLinecap,
+          "stroke-linejoin": _tigercatcore.closeIconPathStrokeLinejoin,
+          "stroke-width": _tigercatcore.closeIconPathStrokeWidth,
+          d: _tigercatcore.closeIconPathD
+        })
+      ]
+    );
+    return () => {
+      if (!shouldRender.value) {
+        return null;
+      }
+      const forwardedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
+      );
+      const ariaLabelledbyFromAttrs = typeof attrs["aria-labelledby"] === "string" ? attrs["aria-labelledby"] : void 0;
+      const ariaLabelledby = _nullishCoalesce(ariaLabelledbyFromAttrs, () => ( (props.title || slots.title ? titleId.value : void 0)));
+      const mergedClass = _tigercatcore.classNames.call(void 0, contentClasses.value, _tigercatcore.coerceClassValue.call(void 0, attrs.class));
+      const widthStyle = props.width ? {
+        width: typeof props.width === "number" ? `${props.width}px` : props.width,
+        maxWidth: "100%"
+      } : void 0;
+      const mergedStyle = _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style, widthStyle);
+      const dragStyle = props.draggable && (dragOffset.value.x !== 0 || dragOffset.value.y !== 0) ? { transform: `translate(${dragOffset.value.x}px, ${dragOffset.value.y}px)` } : void 0;
+      const finalStyle = _tigercatcore.mergeStyleValues.call(void 0, mergedStyle, dragStyle);
+      const header = props.title || slots.title || props.closable ? _vue.h.call(void 0, 
+        "div",
+        {
+          class: _tigercatcore.modalHeaderClasses,
+          onMousedown: props.draggable ? handleDragMouseDown : void 0,
+          style: props.draggable ? "cursor: grab; user-select: none" : void 0
+        },
+        [
+          props.title || slots.title ? _vue.h.call(void 0, 
+            "h3",
+            {
+              id: titleId.value,
+              class: _tigercatcore.modalTitleClasses
+            },
+            slots.title ? slots.title() : props.title
+          ) : null,
+          props.closable ? _vue.h.call(void 0, 
+            "button",
+            {
+              type: "button",
+              class: _tigercatcore.modalCloseButtonClasses,
+              onClick: handleClose,
+              "aria-label": _tigercatcore.resolveLocaleText.call(void 0, 
+                "Close",
+                props.closeAriaLabel,
+                _optionalChain([props, 'access', _7 => _7.locale, 'optionalAccess', _8 => _8.modal, 'optionalAccess', _9 => _9.closeAriaLabel]),
+                _optionalChain([props, 'access', _10 => _10.locale, 'optionalAccess', _11 => _11.common, 'optionalAccess', _12 => _12.closeText])
+              ),
+              ref: closeButtonRef
+            },
+            CloseIcon
+          ) : null
+        ]
+      ) : null;
+      const body = slots.default ? _vue.h.call(void 0, "div", { class: _tigercatcore.modalBodyClasses }, slots.default()) : null;
+      const footer = slots.footer ? _vue.h.call(void 0, 
+        "div",
+        { class: _tigercatcore.modalFooterClasses, "data-tiger-modal-footer": "" },
+        slots.footer({ ok: handleOk, cancel: handleClose })
+      ) : props.showDefaultFooter ? _vue.h.call(void 0, "div", { class: _tigercatcore.modalFooterClasses, "data-tiger-modal-footer": "" }, [
+        _vue.h.call(void 0, 
+          _chunk5436FG3Bjs.Button,
+          { variant: "secondary", onClick: handleClose },
+          {
+            default: () => _tigercatcore.resolveLocaleText.call(void 0, 
+              "\u53D6\u6D88",
+              props.cancelText,
+              _optionalChain([props, 'access', _13 => _13.locale, 'optionalAccess', _14 => _14.modal, 'optionalAccess', _15 => _15.cancelText]),
+              _optionalChain([props, 'access', _16 => _16.locale, 'optionalAccess', _17 => _17.common, 'optionalAccess', _18 => _18.cancelText])
+            )
+          }
+        ),
+        _vue.h.call(void 0, 
+          _chunk5436FG3Bjs.Button,
+          { onClick: handleOk },
+          {
+            default: () => _tigercatcore.resolveLocaleText.call(void 0, 
+              "\u786E\u5B9A",
+              props.okText,
+              _optionalChain([props, 'access', _19 => _19.locale, 'optionalAccess', _20 => _20.modal, 'optionalAccess', _21 => _21.okText]),
+              _optionalChain([props, 'access', _22 => _22.locale, 'optionalAccess', _23 => _23.common, 'optionalAccess', _24 => _24.okText])
+            )
+          }
+        )
+      ]) : null;
+      const renderedWrapper = _vue.h.call(void 0, 
+        "div",
+        {
+          class: _tigercatcore.modalWrapperClasses,
+          style: { zIndex: props.zIndex },
+          hidden: !props.open,
+          "aria-hidden": !props.open ? "true" : void 0,
+          "data-tiger-modal-root": ""
+        },
+        [
+          props.mask && _vue.h.call(void 0, "div", {
+            class: _tigercatcore.modalMaskClasses,
+            "aria-hidden": "true",
+            "data-tiger-modal-mask": ""
+          }),
+          _vue.h.call(void 0, 
+            "div",
+            {
+              class: containerClasses.value,
+              onClick: handleMaskClick
+            },
+            [
+              _vue.h.call(void 0, 
+                "div",
+                {
+                  ...forwardedAttrs,
+                  class: mergedClass,
+                  style: finalStyle,
+                  role: "dialog",
+                  "aria-modal": "true",
+                  "aria-labelledby": ariaLabelledby,
+                  tabindex: -1,
+                  ref: dialogRef,
+                  onTouchstart: handleTouchStart,
+                  onTouchmove: handleTouchMove,
+                  onTouchend: handleTouchEnd,
+                  onTouchcancel: resetTouchGesture,
+                  "data-tiger-modal": ""
+                },
+                [header, body, footer]
+              )
+            ]
+          )
+        ]
+      );
+      return _chunkJDCVS4SJjs.renderVueBodyTeleport.call(void 0, [renderedWrapper], props.disableTeleport);
+    };
+  }
+});
+var Modal_default = Modal;
+
+
+
+
+exports.Modal = Modal; exports.Modal_default = Modal_default;