@expcat/tigercat-vue 1.1.0 → 1.2.0

package/dist/chunk-SCSGLSPY.mjs

@@ -0,0 +1,393 @@
+// src/components/ImageAnnotation.ts
+import { computed, defineComponent, h, onMounted, ref, watch } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  createImageAnnotationBox,
+  createImageAnnotationPath,
+  defaultImageAnnotationTools,
+  getImageAnnotationCenter,
+  getImageAnnotationPathData,
+  getImageAnnotationPointFromClient,
+  getImageAnnotationShapeAriaLabel,
+  getImageAnnotationStrokeColor,
+  getImageAnnotationToolButtonClasses,
+  getImageAnnotationToolLabel,
+  imageAnnotationContainerClasses,
+  imageAnnotationDeleteButtonClasses,
+  imageAnnotationImageClasses,
+  imageAnnotationLabelClasses,
+  imageAnnotationOverlayClasses,
+  imageAnnotationReadonlyOverlayClasses,
+  imageAnnotationStageClasses,
+  imageAnnotationToolbarClasses,
+  mergeStyleValues,
+  shouldCommitImageAnnotationBox
+} from "@expcat/tigercat-core";
+var ImageAnnotation = defineComponent({
+  name: "TigerImageAnnotation",
+  inheritAttrs: false,
+  props: {
+    src: { type: String, required: true },
+    alt: { type: String, default: "Image to annotate" },
+    modelValue: { type: Array, default: void 0 },
+    defaultValue: {
+      type: Array,
+      default: () => []
+    },
+    selectedId: { type: String, default: void 0 },
+    defaultSelectedId: { type: String, default: void 0 },
+    tool: { type: String, default: void 0 },
+    defaultTool: { type: String, default: "select" },
+    tools: {
+      type: Array,
+      default: () => defaultImageAnnotationTools
+    },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    minSize: { type: Number, default: 0.01 },
+    strokeWidth: { type: Number, default: 2 },
+    showLabels: { type: Boolean, default: true },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "change", "select", "tool-change", "ready"],
+  setup(props, { attrs, emit }) {
+    const containerRef = ref(null);
+    const overlayRef = ref(null);
+    const idSeed = ref(0);
+    const imageLoaded = ref(false);
+    const displayWidth = ref(0);
+    const displayHeight = ref(0);
+    const innerAnnotations = ref(props.defaultValue);
+    const innerSelectedId = ref(props.defaultSelectedId);
+    const innerTool = ref(props.defaultTool);
+    const draft = ref(null);
+    const drawing = ref(null);
+    const annotations = computed(() => props.modelValue ?? innerAnnotations.value);
+    const activeSelectedId = computed(() => props.selectedId ?? innerSelectedId.value);
+    const activeTool = computed(() => props.tool ?? innerTool.value);
+    const canEdit = computed(() => !props.disabled && !props.readonly);
+    const loadImage = () => {
+      imageLoaded.value = false;
+      draft.value = null;
+      if (typeof window === "undefined" || typeof window.Image !== "function") return;
+      const img = new window.Image();
+      img.onload = () => {
+        const naturalWidth = img.naturalWidth || 1;
+        const naturalHeight = img.naturalHeight || 1;
+        const containerWidth = containerRef.value?.clientWidth || naturalWidth;
+        const containerHeight = containerRef.value?.clientHeight || naturalHeight;
+        const ratio = Math.min(containerWidth / naturalWidth, containerHeight / naturalHeight, 1);
+        displayWidth.value = naturalWidth * ratio;
+        displayHeight.value = naturalHeight * ratio;
+        imageLoaded.value = true;
+        emit("ready");
+      };
+      img.src = props.src;
+    };
+    onMounted(loadImage);
+    watch(() => props.src, loadImage);
+    const commitAnnotations = (next, meta) => {
+      if (props.modelValue === void 0) innerAnnotations.value = next;
+      emit("update:modelValue", next);
+      emit("change", next, meta);
+    };
+    const selectAnnotation = (annotation) => {
+      if (props.selectedId === void 0) innerSelectedId.value = annotation?.id;
+      emit("select", annotation);
+    };
+    const setActiveTool = (nextTool) => {
+      draft.value = null;
+      drawing.value = null;
+      if (props.tool === void 0) innerTool.value = nextTool;
+      emit("tool-change", nextTool);
+    };
+    const createId = (shape) => {
+      idSeed.value += 1;
+      return `${shape}-${idSeed.value}`;
+    };
+    const getPointFromEvent = (event) => {
+      const bounds = overlayRef.value?.getBoundingClientRect();
+      if (!bounds) return { x: 0, y: 0 };
+      return getImageAnnotationPointFromClient(event.clientX, event.clientY, bounds);
+    };
+    const commitAnnotation = (annotation) => {
+      commitAnnotations([...annotations.value, annotation], { type: "add", annotation });
+      selectAnnotation(annotation);
+    };
+    const commitPolygon = () => {
+      if (!drawing.value || drawing.value.tool !== "polygon" || drawing.value.points.length < 3) {
+        return;
+      }
+      const annotation = createImageAnnotationPath(
+        "polygon",
+        createId("polygon"),
+        drawing.value.points
+      );
+      drawing.value = null;
+      draft.value = null;
+      commitAnnotation(annotation);
+    };
+    const handleStageMouseDown = (event) => {
+      if (!canEdit.value || activeTool.value === "select" || activeTool.value === "polygon") return;
+      const point = getPointFromEvent(event);
+      drawing.value = { tool: activeTool.value, start: point, points: [point] };
+      const handleMouseMove = (moveEvent) => {
+        if (!drawing.value) return;
+        const nextPoint = getPointFromEvent(moveEvent);
+        if (drawing.value.tool === "rectangle" || drawing.value.tool === "ellipse") {
+          draft.value = createImageAnnotationBox(
+            drawing.value.tool,
+            "draft",
+            drawing.value.start,
+            nextPoint
+          );
+          return;
+        }
+        const nextPoints = [...drawing.value.points, nextPoint];
+        drawing.value = { ...drawing.value, points: nextPoints };
+        draft.value = createImageAnnotationPath("freehand", "draft", nextPoints);
+      };
+      const handleMouseUp = (upEvent) => {
+        const current = drawing.value;
+        drawing.value = null;
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        if (!current) return;
+        const end = getPointFromEvent(upEvent);
+        if (current.tool === "rectangle" || current.tool === "ellipse") {
+          const annotation = createImageAnnotationBox(
+            current.tool,
+            createId(current.tool),
+            current.start,
+            end
+          );
+          draft.value = null;
+          if (shouldCommitImageAnnotationBox(annotation, props.minSize))
+            commitAnnotation(annotation);
+          return;
+        }
+        const points = [...current.points, end];
+        draft.value = null;
+        if (points.length >= 2) {
+          commitAnnotation(createImageAnnotationPath("freehand", createId("freehand"), points));
+        }
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    };
+    const handleStageClick = (event) => {
+      if (!canEdit.value || activeTool.value !== "polygon") return;
+      const point = getPointFromEvent(event);
+      const points = drawing.value?.tool === "polygon" ? [...drawing.value.points, point] : [point];
+      drawing.value = { tool: "polygon", start: points[0], points };
+      draft.value = createImageAnnotationPath("polygon", "draft", points);
+    };
+    const removeSelectedAnnotation = () => {
+      if (!canEdit.value || !activeSelectedId.value) return;
+      const removed = annotations.value.find(
+        (annotation) => annotation.id === activeSelectedId.value
+      );
+      const next = annotations.value.filter(
+        (annotation) => annotation.id !== activeSelectedId.value
+      );
+      commitAnnotations(next, { type: "remove", annotation: removed });
+      selectAnnotation(null);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        drawing.value = null;
+        draft.value = null;
+        return;
+      }
+      if (event.key === "Enter") {
+        commitPolygon();
+        return;
+      }
+      if (event.key === "Delete" || event.key === "Backspace") {
+        event.preventDefault();
+        removeSelectedAnnotation();
+      }
+    };
+    const renderAnnotation = (annotation, isDraft = false) => {
+      const selected = !isDraft && annotation.id === activeSelectedId.value;
+      const stroke = getImageAnnotationStrokeColor(annotation);
+      const fillOpacity = annotation.type === "freehand" ? 0 : selected ? 0.18 : 0.1;
+      const commonProps = {
+        stroke,
+        strokeWidth: selected ? props.strokeWidth + 1 : props.strokeWidth,
+        fill: stroke,
+        fillOpacity,
+        role: "button",
+        tabindex: isDraft ? -1 : 0,
+        "aria-label": getImageAnnotationShapeAriaLabel(annotation),
+        class: classNames(!isDraft && "cursor-pointer focus:outline-none"),
+        onClick: (event) => {
+          if (isDraft) return;
+          event.stopPropagation();
+          selectAnnotation(annotation);
+        }
+      };
+      if (annotation.type === "rectangle") {
+        return h("rect", {
+          ...commonProps,
+          key: annotation.id,
+          x: annotation.x * displayWidth.value,
+          y: annotation.y * displayHeight.value,
+          width: annotation.width * displayWidth.value,
+          height: annotation.height * displayHeight.value
+        });
+      }
+      if (annotation.type === "ellipse") {
+        return h("ellipse", {
+          ...commonProps,
+          key: annotation.id,
+          cx: (annotation.x + annotation.width / 2) * displayWidth.value,
+          cy: (annotation.y + annotation.height / 2) * displayHeight.value,
+          rx: annotation.width * displayWidth.value / 2,
+          ry: annotation.height * displayHeight.value / 2
+        });
+      }
+      const pathAnnotation = annotation;
+      return h("path", {
+        ...commonProps,
+        key: annotation.id,
+        d: getImageAnnotationPathData(pathAnnotation, displayWidth.value, displayHeight.value),
+        fillOpacity: pathAnnotation.type === "polygon" ? fillOpacity : 0
+      });
+    };
+    const containerClasses = computed(
+      () => classNames(
+        imageAnnotationContainerClasses,
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const containerStyle = computed(
+      () => mergeStyleValues(attrs.style, props.style)
+    );
+    return () => {
+      const forwardedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
+      );
+      const toolbar = h(
+        "div",
+        { class: imageAnnotationToolbarClasses, "aria-label": "Annotation tools" },
+        [
+          ...props.tools.map(
+            (item) => h(
+              "button",
+              {
+                key: item,
+                type: "button",
+                class: getImageAnnotationToolButtonClasses(activeTool.value === item),
+                disabled: props.disabled || props.readonly,
+                "aria-pressed": activeTool.value === item,
+                onClick: () => setActiveTool(item)
+              },
+              getImageAnnotationToolLabel(item)
+            )
+          ),
+          h(
+            "button",
+            {
+              type: "button",
+              class: imageAnnotationDeleteButtonClasses,
+              disabled: !canEdit.value || !activeSelectedId.value,
+              onClick: removeSelectedAnnotation
+            },
+            "Delete"
+          )
+        ]
+      );
+      const stageChildren = !imageLoaded.value ? [
+        h("div", { class: "flex min-h-[200px] min-w-[240px] items-center justify-center" }, [
+          h("div", {
+            class: "h-8 w-8 animate-spin rounded-full border-2 border-[var(--tiger-border,#d1d5db)] border-t-[var(--tiger-primary,#2563eb)]"
+          })
+        ])
+      ] : [
+        h("img", {
+          src: props.src,
+          alt: props.alt,
+          class: imageAnnotationImageClasses,
+          style: { width: `${displayWidth.value}px`, height: `${displayHeight.value}px` },
+          draggable: false
+        }),
+        h(
+          "svg",
+          {
+            ref: overlayRef,
+            class: classNames(
+              imageAnnotationOverlayClasses,
+              (!canEdit.value || activeTool.value === "select") && imageAnnotationReadonlyOverlayClasses
+            ),
+            width: displayWidth.value,
+            height: displayHeight.value,
+            viewBox: `0 0 ${displayWidth.value} ${displayHeight.value}`,
+            "aria-label": "Image annotation canvas",
+            onMousedown: handleStageMouseDown,
+            onClick: handleStageClick,
+            onDblclick: commitPolygon
+          },
+          [
+            ...annotations.value.map((annotation) => renderAnnotation(annotation)),
+            ...draft.value ? [renderAnnotation(draft.value, true)] : [],
+            ...props.showLabels ? annotations.value.filter((annotation) => annotation.label).map((annotation) => {
+              const center = getImageAnnotationCenter(
+                annotation,
+                displayWidth.value,
+                displayHeight.value
+              );
+              return h(
+                "text",
+                {
+                  key: `${annotation.id}-label`,
+                  x: center.x,
+                  y: center.y,
+                  textAnchor: "middle",
+                  dominantBaseline: "middle",
+                  class: imageAnnotationLabelClasses
+                },
+                annotation.label
+              );
+            }) : []
+          ]
+        )
+      ];
+      return h(
+        "div",
+        {
+          ...forwardedAttrs,
+          class: containerClasses.value,
+          style: containerStyle.value,
+          onKeydown: handleKeyDown
+        },
+        [
+          toolbar,
+          h(
+            "div",
+            {
+              ref: containerRef,
+              class: imageAnnotationStageClasses,
+              style: imageLoaded.value ? { width: `${displayWidth.value}px` } : void 0,
+              role: imageLoaded.value ? "application" : "img",
+              "aria-label": imageLoaded.value ? "Image annotation editor" : "Loading image for annotation"
+            },
+            stageChildren
+          )
+        ]
+      );
+    };
+  }
+});
+var ImageAnnotation_default = ImageAnnotation;
+
+export {
+  ImageAnnotation,
+  ImageAnnotation_default
+};

package/dist/{chunk-WLRLKW2W.mjs → chunk-SEDENBOO.mjs}

@@ -1,7 +1,28 @@
-import { defineComponent, ref, watch, onMounted, onBeforeUnmount, h } from 'vue';
-import { createDefaultTransform, createPanState, createPinchState, imageViewerCounterClasses, imageViewerCloseBtnClasses, imageViewerIcons, classNames, imageViewerNavBtnClasses, getImageTransformStyle, imageViewerImgClasses, imageViewerToolbarBtnClasses, imageViewerToolbarClasses, imageViewerBackdropClasses, coerceClassValue, movePinch, movePan, startPinch, startPan, applyWheelZoom, clampZoom, normalizeRotation } from '@expcat/tigercat-core';
-
 // src/components/ImageViewer.ts
+import { defineComponent, h, ref, watch, onMounted, onBeforeUnmount } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  imageViewerBackdropClasses,
+  imageViewerImgClasses,
+  imageViewerToolbarClasses,
+  imageViewerToolbarBtnClasses,
+  imageViewerNavBtnClasses,
+  imageViewerCloseBtnClasses,
+  imageViewerCounterClasses,
+  imageViewerIcons,
+  clampZoom,
+  normalizeRotation,
+  createDefaultTransform,
+  getImageTransformStyle,
+  applyWheelZoom,
+  createPanState,
+  startPan,
+  movePan,
+  createPinchState,
+  startPinch,
+  movePinch
+} from "@expcat/tigercat-core";
 function createSvgIcon(pathD, label) {
   return h(
     "svg",
@@ -134,7 +155,12 @@ var ImageViewer = defineComponent({
     const handleMouseDown = (e) => {
       if (e.button !== 0) return;
       e.preventDefault();
-      panState = startPan(e.clientX, e.clientY, transform.value.translateX, transform.value.translateY);
+      panState = startPan(
+        e.clientX,
+        e.clientY,
+        transform.value.translateX,
+        transform.value.translateY
+      );
     };
     const handleMouseMove = (e) => {
       if (!panState.isPanning) return;
@@ -342,4 +368,7 @@ var ImageViewer = defineComponent({
 });
 var ImageViewer_default = ImageViewer;
 
-export { ImageViewer, ImageViewer_default };
+export {
+  ImageViewer,
+  ImageViewer_default
+};

package/dist/{chunk-UCDB56MB.mjs → chunk-SGRUGYQ6.mjs}

@@ -1,7 +1,34 @@
-import { defineComponent, inject, computed, ref, watch, h, getCurrentInstance, provide, Fragment } from 'vue';
-import { isKeyActive, getTabItemClasses, classNames, getTabPaneClasses, tabCloseButtonClasses, closeIconViewBox, closeIconPathD, getTabsContainerClasses, getTabNavClasses, getTabNavListClasses, getTabNavListStyle, getTabIndicatorStyle, getTabIndicatorClasses, tabAddButtonClasses, tabContentBaseClasses } from '@expcat/tigercat-core';
-
 // src/components/Tabs.ts
+import {
+  defineComponent,
+  computed,
+  ref,
+  watch,
+  provide,
+  inject,
+  h,
+  Fragment,
+  getCurrentInstance
+} from "vue";
+import {
+  classNames,
+  closeIconPathD,
+  closeIconViewBox,
+  getTabsContainerClasses,
+  getTabItemClasses,
+  getTabNavClasses,
+  getTabNavListClasses,
+  getTabNavListStyle,
+  getTabPaneClasses,
+  getTabIndicatorClasses,
+  getTabIndicatorStyle,
+  getGestureTouchPoint,
+  resolveSwipeGesture,
+  isKeyActive,
+  tabAddButtonClasses,
+  tabCloseButtonClasses,
+  tabContentBaseClasses
+} from "@expcat/tigercat-core";
 var TabsContextKey = /* @__PURE__ */ Symbol("TabsContext");
 var TabPane = defineComponent({
   name: "TigerTabPane",
@@ -307,6 +334,14 @@ var Tabs = defineComponent({
       type: Boolean,
       default: false
     },
+    /**
+     * Whether horizontal touch swipes switch tabs.
+     * @default true
+     */
+    swipeable: {
+      type: Boolean,
+      default: true
+    },
     /**
      * Additional CSS classes
      */
@@ -327,6 +362,7 @@ var Tabs = defineComponent({
     const instance = getCurrentInstance();
     const idBase = `tiger-tabs-${instance?.uid ?? "0"}`;
     const internalActiveKey = ref(props.defaultActiveKey);
+    const swipeStart = ref(null);
     const currentActiveKey = computed(() => {
       return props.activeKey !== void 0 ? props.activeKey : internalActiveKey.value;
     });
@@ -343,6 +379,29 @@ var Tabs = defineComponent({
       event.stopPropagation();
       emit("edit", { targetKey: key, action: "remove" });
     };
+    const activateAdjacentTab = (direction, enabledTabKeys) => {
+      if (enabledTabKeys.length <= 1) return;
+      const currentIndex = enabledTabKeys.indexOf(currentActiveKey.value ?? enabledTabKeys[0]);
+      const baseIndex = currentIndex >= 0 ? currentIndex : 0;
+      const nextKey = enabledTabKeys[(baseIndex + direction + enabledTabKeys.length) % enabledTabKeys.length];
+      handleTabClick(nextKey);
+    };
+    const handleContentTouchStart = (event) => {
+      if (!props.swipeable || event.touches.length !== 1) return;
+      swipeStart.value = getGestureTouchPoint(event.touches, event.timeStamp);
+    };
+    const handleContentTouchEnd = (event, enabledTabKeys) => {
+      if (!props.swipeable || !swipeStart.value || event.changedTouches.length !== 1) return;
+      const endPoint = getGestureTouchPoint(event.changedTouches, event.timeStamp);
+      const swipe = resolveSwipeGesture(swipeStart.value, endPoint, {
+        minDistance: 48,
+        maxCrossAxisRatio: 0.75
+      });
+      swipeStart.value = null;
+      if (!swipe) return;
+      if (swipe.direction === "left") activateAdjacentTab(1, enabledTabKeys);
+      if (swipe.direction === "right") activateAdjacentTab(-1, enabledTabKeys);
+    };
     const containerClasses = computed(() => {
       return classNames(getTabsContainerClasses(props.tabPosition), props.className);
     });
@@ -374,6 +433,9 @@ var Tabs = defineComponent({
       get lazy() {
         return props.lazy;
       },
+      get swipeable() {
+        return props.swipeable;
+      },
       idBase,
       handleTabClick,
       handleTabClose
@@ -394,6 +456,7 @@ var Tabs = defineComponent({
       const tabItems = [];
       const tabPanes = [];
       const tabKeys = [];
+      const enabledTabKeys = [];
       let firstTabKey;
       const validChildren = [];
       for (const child of children) {
@@ -407,6 +470,9 @@ var Tabs = defineComponent({
         }
         if (typeof k === "string" || typeof k === "number") {
           tabKeys.push(k);
+          if (childProps.disabled !== true) {
+            enabledTabKeys.push(k);
+          }
         }
         const tabPaneType = typeof child.type === "string" || typeof child.type === "object" ? child.type : "div";
         validChildren.push({ type: tabPaneType, props: childProps, children: child.children });
@@ -472,7 +538,18 @@ var Tabs = defineComponent({
           )
         ]
       );
-      const tabContent = h("div", { class: tabContentBaseClasses }, tabPanes);
+      const tabContent = h(
+        "div",
+        {
+          class: tabContentBaseClasses,
+          onTouchstart: handleContentTouchStart,
+          onTouchend: (event) => handleContentTouchEnd(event, enabledTabKeys),
+          onTouchcancel: () => {
+            swipeStart.value = null;
+          }
+        },
+        tabPanes
+      );
       return h(
         "div",
         { class: containerClasses.value, style: props.style },
@@ -483,4 +560,9 @@ var Tabs = defineComponent({
 });
 var Tabs_default = Tabs;
 
-export { TabPane, Tabs, TabsContextKey, Tabs_default };
+export {
+  TabsContextKey,
+  TabPane,
+  Tabs,
+  Tabs_default
+};