@expcat/tigercat-vue 1.0.7 → 1.2.0

package/dist/{chunk-T77L326M.mjs → chunk-DEJKRMMU.mjs}

@@ -1,7 +1,22 @@
-import { defineComponent, ref, watch, onMounted, computed, h } from 'vue';
-import { classNames, imageCropperContainerClasses, coerceClassValue, mergeStyleValues, imageCropperImgClasses, imageCropperMaskClasses, imageCropperSelectionClasses, imageCropperDragAreaClasses, imageCropperGuideClasses, CROP_HANDLES, getCropperHandleClasses, getInitialCropRect, cropCanvas, moveCropRect, resizeCropRect } from '@expcat/tigercat-core';
-
 // src/components/ImageCropper.ts
+import { defineComponent, h, ref, computed, watch, onMounted } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  imageCropperContainerClasses,
+  imageCropperImgClasses,
+  imageCropperMaskClasses,
+  imageCropperSelectionClasses,
+  imageCropperGuideClasses,
+  imageCropperDragAreaClasses,
+  getCropperHandleClasses,
+  CROP_HANDLES,
+  getInitialCropRect,
+  resizeCropRect,
+  moveCropRect,
+  cropCanvas
+} from "@expcat/tigercat-core";
 var ImageCropper = defineComponent({
   name: "TigerImageCropper",
   inheritAttrs: false,
@@ -157,6 +172,51 @@ var ImageCropper = defineComponent({
       document.addEventListener("touchmove", onTouchMove, { passive: false });
       document.addEventListener("touchend", onTouchEnd);
     };
+    const updateCropRect = (nextRect) => {
+      cropRect.value = nextRect;
+      emit("crop-change", cropRect.value);
+    };
+    const getKeyboardDelta = (e) => {
+      const step = e.shiftKey ? 10 : 1;
+      switch (e.key) {
+        case "ArrowLeft":
+          return { dx: -step, dy: 0 };
+        case "ArrowRight":
+          return { dx: step, dy: 0 };
+        case "ArrowUp":
+          return { dx: 0, dy: -step };
+        case "ArrowDown":
+          return { dx: 0, dy: step };
+        default:
+          return null;
+      }
+    };
+    const handleMoveKeyDown = (e) => {
+      const delta = getKeyboardDelta(e);
+      if (!delta) return;
+      e.preventDefault();
+      updateCropRect(
+        moveCropRect(cropRect.value, delta.dx, delta.dy, displayWidth.value, displayHeight.value)
+      );
+    };
+    const handleResizeKeyDown = (e, handle) => {
+      const delta = getKeyboardDelta(e);
+      if (!delta) return;
+      e.preventDefault();
+      updateCropRect(
+        resizeCropRect(
+          cropRect.value,
+          handle,
+          delta.dx,
+          delta.dy,
+          displayWidth.value,
+          displayHeight.value,
+          props.aspectRatio,
+          props.minWidth,
+          props.minHeight
+        )
+      );
+    };
     const getCropResult = () => {
       return new Promise((resolve, reject) => {
         if (!imageRef.value) {
@@ -280,13 +340,18 @@ var ImageCropper = defineComponent({
           width: `${cr.width}px`,
           height: `${cr.height}px`
         },
+        role: "button",
+        tabindex: 0,
+        "aria-label": "Move crop area",
         onMousedown: (e) => handleMouseDown(e, "move"),
-        onTouchstart: (e) => handleTouchStart(e, "move")
+        onTouchstart: (e) => handleTouchStart(e, "move"),
+        onKeydown: handleMoveKeyDown
       });
       const guideLines = props.guides ? [
         // Horizontal lines
         h("div", {
           class: imageCropperGuideClasses,
+          "data-guide": "true",
           style: {
             left: `${cr.x}px`,
             top: `${cr.y + cr.height / 3}px`,
@@ -298,6 +363,7 @@ var ImageCropper = defineComponent({
         }),
         h("div", {
           class: imageCropperGuideClasses,
+          "data-guide": "true",
           style: {
             left: `${cr.x}px`,
             top: `${cr.y + cr.height * 2 / 3}px`,
@@ -310,6 +376,7 @@ var ImageCropper = defineComponent({
         // Vertical lines
         h("div", {
           class: imageCropperGuideClasses,
+          "data-guide": "true",
           style: {
             left: `${cr.x + cr.width / 3}px`,
             top: `${cr.y}px`,
@@ -321,6 +388,7 @@ var ImageCropper = defineComponent({
         }),
         h("div", {
           class: imageCropperGuideClasses,
+          "data-guide": "true",
           style: {
             left: `${cr.x + cr.width * 2 / 3}px`,
             top: `${cr.y}px`,
@@ -342,8 +410,12 @@ var ImageCropper = defineComponent({
         return h("div", {
           class: getCropperHandleClasses(handle),
           style: pos,
+          role: "button",
+          tabindex: 0,
+          "aria-label": `Resize crop area ${handle}`,
           onMousedown: (e) => handleMouseDown(e, "resize", handle),
-          onTouchstart: (e) => handleTouchStart(e, "resize", handle)
+          onTouchstart: (e) => handleTouchStart(e, "resize", handle),
+          onKeydown: (e) => handleResizeKeyDown(e, handle)
         });
       });
       return h(
@@ -367,4 +439,7 @@ var ImageCropper = defineComponent({
 });
 var ImageCropper_default = ImageCropper;
 
-export { ImageCropper, ImageCropper_default };
+export {
+  ImageCropper,
+  ImageCropper_default
+};

package/dist/{chunk-XYYZAQ6Z.mjs → chunk-DIQGHFAT.mjs}

@@ -1,7 +1,6 @@
-import { defineComponent, computed, h } from 'vue';
-import { classNames, getSwitchClasses, getSwitchThumbClasses } from '@expcat/tigercat-core';
-
 // src/components/Switch.ts
+import { defineComponent, computed, h } from "vue";
+import { getSwitchClasses, getSwitchThumbClasses } from "@expcat/tigercat-core";
 var Switch = defineComponent({
   name: "TigerSwitch",
   inheritAttrs: false,
@@ -49,7 +48,7 @@ var Switch = defineComponent({
   },
   setup(props, { emit, attrs }) {
     const switchClasses = computed(
-      () => classNames(getSwitchClasses(props.size, props.checked, props.disabled), props.className)
+      () => getSwitchClasses(props.size, props.checked, props.disabled, props.className, attrs.class)
     );
     const thumbClasses = computed(() => getSwitchThumbClasses(props.size, props.checked));
     const emitChange = () => {
@@ -73,7 +72,7 @@ var Switch = defineComponent({
         role: "switch",
         "aria-checked": props.checked,
         "aria-disabled": props.disabled ? "true" : void 0,
-        class: [switchClasses.value, attrs.class],
+        class: switchClasses.value,
         style: props.style,
         disabled: props.disabled,
         tabindex: props.disabled ? -1 : attrs.tabindex,
@@ -91,4 +90,7 @@ var Switch = defineComponent({
 });
 var Switch_default = Switch;
 
-export { Switch, Switch_default };
+export {
+  Switch,
+  Switch_default
+};

package/dist/{chunk-S276SM7L.mjs → chunk-DMV26JNR.mjs}

@@ -1,7 +1,16 @@
-import { defineComponent, ref, computed, onBeforeUnmount, h } from 'vue';
-import { defaultResizeHandles, classNames, resizableBaseClasses, coerceClassValue, getResizableHandleClasses, calculateResizeDelta, applyAspectRatio, clampDimensions } from '@expcat/tigercat-core';
-
 // src/components/Resizable.ts
+import { defineComponent, h, ref, computed, onBeforeUnmount } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  resizableBaseClasses,
+  getResizableHandleClasses,
+  calculateResizeDelta,
+  clampDimensions,
+  applyAspectRatio,
+  defaultResizeHandles,
+  createDocumentDragSession
+} from "@expcat/tigercat-core";
 var Resizable = defineComponent({
   name: "TigerResizable",
   props: {
@@ -36,6 +45,7 @@ var Resizable = defineComponent({
     const startMouseY = ref(0);
     const startWidth = ref(0);
     const startHeight = ref(0);
+    let dragSession = null;
     const containerClasses = computed(
       () => classNames(
         resizableBaseClasses,
@@ -50,9 +60,14 @@ var Resizable = defineComponent({
       if (height.value != null) s.height = `${height.value}px`;
       return s;
     });
+    const cleanupDragSession = () => {
+      dragSession?.dispose();
+      dragSession = null;
+    };
     const onMouseDown = (handle, e) => {
       if (props.disabled) return;
       e.preventDefault();
+      cleanupDragSession();
       draggingHandle.value = handle;
       startMouseX.value = e.clientX;
       startMouseY.value = e.clientY;
@@ -65,15 +80,27 @@ var Resizable = defineComponent({
         deltaX: 0,
         deltaY: 0
       });
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp);
+      dragSession = createDocumentDragSession({
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: e.currentTarget?.ownerDocument,
+        onMove: ({ currentX, currentY }) => {
+          applyResize(currentX, currentY, (event) => emit("resize", event));
+        },
+        onEnd: ({ currentX, currentY }) => {
+          applyResize(currentX, currentY, (event) => emit("resize-end", event));
+          draggingHandle.value = null;
+          dragSession = null;
+        }
+      });
     };
-    const onMouseMove = (e) => {
-      if (!draggingHandle.value) return;
-      const mouseDeltaX = e.clientX - startMouseX.value;
-      const mouseDeltaY = e.clientY - startMouseY.value;
+    const applyResize = (currentX, currentY, notify) => {
+      const handle = draggingHandle.value;
+      if (!handle) return;
+      const mouseDeltaX = currentX - startMouseX.value;
+      const mouseDeltaY = currentY - startMouseY.value;
       const { deltaWidth, deltaHeight } = calculateResizeDelta(
-        draggingHandle.value,
+        handle,
         mouseDeltaX,
         mouseDeltaY,
         props.axis
@@ -95,31 +122,16 @@ var Resizable = defineComponent({
       );
       width.value = clamped.width;
       height.value = clamped.height;
-      emit("resize", {
+      notify({
         width: clamped.width,
         height: clamped.height,
-        handle: draggingHandle.value,
+        handle,
         deltaX: clamped.width - startWidth.value,
         deltaY: clamped.height - startHeight.value
       });
     };
-    const onMouseUp = () => {
-      if (draggingHandle.value) {
-        emit("resize-end", {
-          width: width.value ?? 0,
-          height: height.value ?? 0,
-          handle: draggingHandle.value,
-          deltaX: (width.value ?? 0) - startWidth.value,
-          deltaY: (height.value ?? 0) - startHeight.value
-        });
-      }
-      draggingHandle.value = null;
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
-    };
     onBeforeUnmount(() => {
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
+      cleanupDragSession();
     });
     return () => {
       const handleNodes = props.handles.map(
@@ -143,4 +155,7 @@ var Resizable = defineComponent({
 });
 var Resizable_default = Resizable;
 
-export { Resizable, Resizable_default };
+export {
+  Resizable,
+  Resizable_default
+};