@expcat/tigercat-vue 0.3.69 → 0.3.70

package/dist/chunk-T77L326M.mjs

@@ -0,0 +1,370 @@
+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
+var ImageCropper = defineComponent({
+  name: "TigerImageCropper",
+  inheritAttrs: false,
+  props: {
+    src: { type: String, required: true },
+    aspectRatio: { type: Number, default: void 0 },
+    minWidth: { type: Number, default: 20 },
+    minHeight: { type: Number, default: 20 },
+    outputType: {
+      type: String,
+      default: "image/png"
+    },
+    quality: { type: Number, default: 0.92 },
+    guides: { type: Boolean, default: true },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["crop-change", "ready"],
+  setup(props, { emit, attrs, expose }) {
+    const containerRef = ref(null);
+    const imageRef = ref(null);
+    const imageLoaded = ref(false);
+    const displayWidth = ref(0);
+    const displayHeight = ref(0);
+    const cropRect = ref({ x: 0, y: 0, width: 0, height: 0 });
+    const dragMode = ref("none");
+    const activeHandle = ref(null);
+    const dragStartPos = ref({ x: 0, y: 0 });
+    const dragStartRect = ref({ x: 0, y: 0, width: 0, height: 0 });
+    const loadImage = () => {
+      const img = new window.Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        imageRef.value = img;
+        if (containerRef.value) {
+          const containerW = containerRef.value.clientWidth;
+          const containerH = containerRef.value.clientHeight || 400;
+          const ratio = Math.min(containerW / img.naturalWidth, containerH / img.naturalHeight, 1);
+          displayWidth.value = img.naturalWidth * ratio;
+          displayHeight.value = img.naturalHeight * ratio;
+        } else {
+          displayWidth.value = img.naturalWidth;
+          displayHeight.value = img.naturalHeight;
+        }
+        cropRect.value = getInitialCropRect(
+          displayWidth.value,
+          displayHeight.value,
+          props.aspectRatio
+        );
+        imageLoaded.value = true;
+        emit("ready");
+      };
+      img.src = props.src;
+    };
+    watch(
+      () => props.src,
+      () => {
+        imageLoaded.value = false;
+        loadImage();
+      }
+    );
+    onMounted(() => {
+      loadImage();
+    });
+    const handleMouseDown = (e, mode, handle) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragMode.value = mode;
+      activeHandle.value = handle || null;
+      dragStartPos.value = { x: e.clientX, y: e.clientY };
+      dragStartRect.value = { ...cropRect.value };
+      const onMouseMove = (ev) => {
+        const dx = ev.clientX - dragStartPos.value.x;
+        const dy = ev.clientY - dragStartPos.value.y;
+        if (dragMode.value === "move") {
+          cropRect.value = moveCropRect(
+            dragStartRect.value,
+            dx,
+            dy,
+            displayWidth.value,
+            displayHeight.value
+          );
+        } else if (dragMode.value === "resize" && activeHandle.value) {
+          cropRect.value = resizeCropRect(
+            dragStartRect.value,
+            activeHandle.value,
+            dx,
+            dy,
+            displayWidth.value,
+            displayHeight.value,
+            props.aspectRatio,
+            props.minWidth,
+            props.minHeight
+          );
+        }
+        emit("crop-change", cropRect.value);
+      };
+      const onMouseUp = () => {
+        dragMode.value = "none";
+        activeHandle.value = null;
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    };
+    const handleTouchStart = (e, mode, handle) => {
+      if (e.touches.length !== 1) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const touch = e.touches[0];
+      dragMode.value = mode;
+      activeHandle.value = handle || null;
+      dragStartPos.value = { x: touch.clientX, y: touch.clientY };
+      dragStartRect.value = { ...cropRect.value };
+      const onTouchMove = (ev) => {
+        if (ev.touches.length !== 1) return;
+        const t = ev.touches[0];
+        const dx = t.clientX - dragStartPos.value.x;
+        const dy = t.clientY - dragStartPos.value.y;
+        if (dragMode.value === "move") {
+          cropRect.value = moveCropRect(
+            dragStartRect.value,
+            dx,
+            dy,
+            displayWidth.value,
+            displayHeight.value
+          );
+        } else if (dragMode.value === "resize" && activeHandle.value) {
+          cropRect.value = resizeCropRect(
+            dragStartRect.value,
+            activeHandle.value,
+            dx,
+            dy,
+            displayWidth.value,
+            displayHeight.value,
+            props.aspectRatio,
+            props.minWidth,
+            props.minHeight
+          );
+        }
+        emit("crop-change", cropRect.value);
+      };
+      const onTouchEnd = () => {
+        dragMode.value = "none";
+        activeHandle.value = null;
+        document.removeEventListener("touchmove", onTouchMove);
+        document.removeEventListener("touchend", onTouchEnd);
+      };
+      document.addEventListener("touchmove", onTouchMove, { passive: false });
+      document.addEventListener("touchend", onTouchEnd);
+    };
+    const getCropResult = () => {
+      return new Promise((resolve, reject) => {
+        if (!imageRef.value) {
+          reject(new Error("Image not loaded"));
+          return;
+        }
+        const { canvas, dataUrl } = cropCanvas(
+          imageRef.value,
+          cropRect.value,
+          displayWidth.value,
+          displayHeight.value,
+          props.outputType,
+          props.quality
+        );
+        canvas.toBlob(
+          (blob) => {
+            if (blob) {
+              resolve({ canvas, blob, dataUrl, cropRect: { ...cropRect.value } });
+            } else {
+              reject(new Error("Failed to create blob"));
+            }
+          },
+          props.outputType,
+          props.quality
+        );
+      });
+    };
+    expose({ getCropResult });
+    const containerClasses = computed(
+      () => classNames(
+        imageCropperContainerClasses,
+        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")
+      );
+      if (!imageLoaded.value) {
+        return h(
+          "div",
+          {
+            ...forwardedAttrs,
+            ref: containerRef,
+            class: classNames(containerClasses.value, "flex items-center justify-center"),
+            style: Object.assign({}, containerStyle.value, {
+              minHeight: "200px"
+            }),
+            role: "img",
+            "aria-label": "Loading image for cropping"
+          },
+          [
+            h("div", {
+              class: "w-8 h-8 border-2 border-white/30 border-t-white rounded-full animate-spin"
+            })
+          ]
+        );
+      }
+      const cr = cropRect.value;
+      const img = h("img", {
+        src: props.src,
+        class: imageCropperImgClasses,
+        style: {
+          width: `${displayWidth.value}px`,
+          height: `${displayHeight.value}px`
+        },
+        draggable: false,
+        alt: "Image to crop"
+      });
+      const mask = h(
+        "svg",
+        {
+          class: imageCropperMaskClasses,
+          width: displayWidth.value,
+          height: displayHeight.value,
+          xmlns: "http://www.w3.org/2000/svg"
+        },
+        [
+          h("defs", null, [
+            h("mask", { id: "crop-mask" }, [
+              h("rect", {
+                width: displayWidth.value,
+                height: displayHeight.value,
+                fill: "white"
+              }),
+              h("rect", {
+                x: cr.x,
+                y: cr.y,
+                width: cr.width,
+                height: cr.height,
+                fill: "black"
+              })
+            ])
+          ]),
+          h("rect", {
+            width: displayWidth.value,
+            height: displayHeight.value,
+            fill: "var(--tiger-image-cropper-mask, rgba(0,0,0,0.55))",
+            mask: "url(#crop-mask)"
+          })
+        ]
+      );
+      const selection = h("div", {
+        class: imageCropperSelectionClasses,
+        style: {
+          left: `${cr.x}px`,
+          top: `${cr.y}px`,
+          width: `${cr.width}px`,
+          height: `${cr.height}px`
+        }
+      });
+      const dragArea = h("div", {
+        class: imageCropperDragAreaClasses,
+        style: {
+          left: `${cr.x}px`,
+          top: `${cr.y}px`,
+          width: `${cr.width}px`,
+          height: `${cr.height}px`
+        },
+        onMousedown: (e) => handleMouseDown(e, "move"),
+        onTouchstart: (e) => handleTouchStart(e, "move")
+      });
+      const guideLines = props.guides ? [
+        // Horizontal lines
+        h("div", {
+          class: imageCropperGuideClasses,
+          style: {
+            left: `${cr.x}px`,
+            top: `${cr.y + cr.height / 3}px`,
+            width: `${cr.width}px`,
+            height: "0px",
+            borderTopWidth: "1px",
+            borderTopStyle: "dashed"
+          }
+        }),
+        h("div", {
+          class: imageCropperGuideClasses,
+          style: {
+            left: `${cr.x}px`,
+            top: `${cr.y + cr.height * 2 / 3}px`,
+            width: `${cr.width}px`,
+            height: "0px",
+            borderTopWidth: "1px",
+            borderTopStyle: "dashed"
+          }
+        }),
+        // Vertical lines
+        h("div", {
+          class: imageCropperGuideClasses,
+          style: {
+            left: `${cr.x + cr.width / 3}px`,
+            top: `${cr.y}px`,
+            width: "0px",
+            height: `${cr.height}px`,
+            borderLeftWidth: "1px",
+            borderLeftStyle: "dashed"
+          }
+        }),
+        h("div", {
+          class: imageCropperGuideClasses,
+          style: {
+            left: `${cr.x + cr.width * 2 / 3}px`,
+            top: `${cr.y}px`,
+            width: "0px",
+            height: `${cr.height}px`,
+            borderLeftWidth: "1px",
+            borderLeftStyle: "dashed"
+          }
+        })
+      ] : [];
+      const handles = CROP_HANDLES.map((handle) => {
+        const pos = {};
+        if (handle.includes("n")) pos.top = `${cr.y}px`;
+        if (handle.includes("s")) pos.top = `${cr.y + cr.height}px`;
+        if (handle === "e" || handle === "w") pos.top = `${cr.y + cr.height / 2}px`;
+        if (handle.includes("w")) pos.left = `${cr.x}px`;
+        if (handle.includes("e")) pos.left = `${cr.x + cr.width}px`;
+        if (handle === "n" || handle === "s") pos.left = `${cr.x + cr.width / 2}px`;
+        return h("div", {
+          class: getCropperHandleClasses(handle),
+          style: pos,
+          onMousedown: (e) => handleMouseDown(e, "resize", handle),
+          onTouchstart: (e) => handleTouchStart(e, "resize", handle)
+        });
+      });
+      return h(
+        "div",
+        {
+          ...forwardedAttrs,
+          ref: containerRef,
+          class: containerClasses.value,
+          style: Object.assign({}, containerStyle.value, {
+            width: `${displayWidth.value}px`,
+            height: `${displayHeight.value}px`
+          }),
+          role: "application",
+          "aria-label": "Image cropper",
+          "aria-roledescription": "image cropper"
+        },
+        [img, mask, selection, dragArea, ...guideLines, ...handles]
+      );
+    };
+  }
+});
+var ImageCropper_default = ImageCropper;
+
+export { ImageCropper, ImageCropper_default };

package/dist/components/ActivityFeed.js

@@ -2,22 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunkEBTLMVDJ_js = require('../chunk-EBTLMVDJ.js');
+var chunkNGW5UMAN_js = require('../chunk-NGW5UMAN.js');
 require('../chunk-27T3QDSF.js');
-require('../chunk-ZED7TU62.js');
 require('../chunk-DN5GU5PC.js');
+require('../chunk-ZED7TU62.js');
 require('../chunk-2KDSHEZT.js');
 require('../chunk-DUQ7Q2GO.js');
 require('../chunk-WEFQCJAG.js');
 require('../chunk-WPIDP6IG.js');
+require('../chunk-PNKVD2UK.js');
 
 
 
 Object.defineProperty(exports, "ActivityFeed", {
   enumerable: true,
-  get: function () { return chunkEBTLMVDJ_js.ActivityFeed; }
+  get: function () { return chunkNGW5UMAN_js.ActivityFeed; }
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function () { return chunkEBTLMVDJ_js.ActivityFeed_default; }
+  get: function () { return chunkNGW5UMAN_js.ActivityFeed_default; }
 });

package/dist/components/ActivityFeed.mjs

@@ -1,8 +1,9 @@
-export { ActivityFeed, ActivityFeed_default as default } from '../chunk-RVEEEDJQ.mjs';
+export { ActivityFeed, ActivityFeed_default as default } from '../chunk-D7VMY6WX.mjs';
 import '../chunk-LBGTABIU.mjs';
-import '../chunk-4YHOD7LT.mjs';
 import '../chunk-Q6OYCTQO.mjs';
+import '../chunk-4YHOD7LT.mjs';
 import '../chunk-3G4VPV4D.mjs';
 import '../chunk-6V7XCCXN.mjs';
 import '../chunk-YXN3YY5Y.mjs';
 import '../chunk-COCECPMG.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/Alert.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunkSKV2HHBC_js = require('../chunk-SKV2HHBC.js');
 require('../chunk-OOKS4KMK.js');
+require('../chunk-PNKVD2UK.js');
 
 
 

package/dist/components/Alert.mjs

@@ -1,2 +1,3 @@
 export { Alert, Alert_default as default } from '../chunk-J5J4UYGP.mjs';
 import '../chunk-7RRA3TIG.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/Anchor.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunkR77ZKZ5F_js = require('../chunk-R77ZKZ5F.js');
+require('../chunk-PNKVD2UK.js');
 
 
 

package/dist/components/Anchor.mjs

@@ -1 +1,2 @@
 export { Anchor, AnchorContextKey, Anchor_default as default } from '../chunk-LRHJZP2C.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/AnchorLink.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunkEBQ4WSQS_js = require('../chunk-EBQ4WSQS.js');
 require('../chunk-R77ZKZ5F.js');
+require('../chunk-PNKVD2UK.js');
 
 
 

package/dist/components/AnchorLink.mjs

@@ -1,2 +1,3 @@
 export { AnchorLink, AnchorLink_default as default } from '../chunk-BMW2Z3G3.mjs';
 import '../chunk-LRHJZP2C.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/AreaChart.js

@@ -10,6 +10,7 @@ require('../chunk-BKTQ6RWR.js');
 require('../chunk-HBFFINAI.js');
 require('../chunk-EPE6OOV7.js');
 require('../chunk-5PXTMXXS.js');
+require('../chunk-PNKVD2UK.js');
 
 
 

package/dist/components/AreaChart.mjs

@@ -6,3 +6,4 @@ import '../chunk-F5HOHSFH.mjs';
 import '../chunk-2ZUEXCVJ.mjs';
 import '../chunk-FXGIIFGN.mjs';
 import '../chunk-ZWVA7HT3.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/Avatar.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunkWPIDP6IG_js = require('../chunk-WPIDP6IG.js');
+require('../chunk-PNKVD2UK.js');
 
 
 

package/dist/components/Avatar.mjs

@@ -1 +1,2 @@
 export { Avatar, Avatar_default as default } from '../chunk-COCECPMG.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/BackTop.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunkUUGAOKYR_js = require('../chunk-UUGAOKYR.js');
+require('../chunk-PNKVD2UK.js');
 
 
 

package/dist/components/BackTop.mjs

@@ -1 +1,2 @@
 export { BackTop, BackTop_default as default } from '../chunk-URYEEQD7.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/Badge.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunkPQMZ3YN3_js = require('../chunk-PQMZ3YN3.js');
+require('../chunk-PNKVD2UK.js');
 
 
 

package/dist/components/Badge.mjs

@@ -1 +1,2 @@
 export { Badge, Badge_default as default } from '../chunk-HVVPFQW2.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/BarChart.js

@@ -10,6 +10,7 @@ require('../chunk-BKTQ6RWR.js');
 require('../chunk-HBFFINAI.js');
 require('../chunk-EPE6OOV7.js');
 require('../chunk-5PXTMXXS.js');
+require('../chunk-PNKVD2UK.js');
 
 
 

package/dist/components/BarChart.mjs

@@ -6,3 +6,4 @@ import '../chunk-F5HOHSFH.mjs';
 import '../chunk-2ZUEXCVJ.mjs';
 import '../chunk-FXGIIFGN.mjs';
 import '../chunk-ZWVA7HT3.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/Breadcrumb.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunkVTLTKTCK_js = require('../chunk-VTLTKTCK.js');
+require('../chunk-PNKVD2UK.js');
 
 
 

package/dist/components/Breadcrumb.mjs

@@ -1 +1,2 @@
 export { Breadcrumb, BreadcrumbContextKey, Breadcrumb_default as default } from '../chunk-U6WHPSWN.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/BreadcrumbItem.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunkPCGHIFIJ_js = require('../chunk-PCGHIFIJ.js');
 require('../chunk-VTLTKTCK.js');
+require('../chunk-PNKVD2UK.js');
 
 
 

package/dist/components/BreadcrumbItem.mjs

@@ -1,2 +1,3 @@
 export { BreadcrumbItem, BreadcrumbItem_default as default } from '../chunk-TG4PXQKX.mjs';
 import '../chunk-U6WHPSWN.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/Button.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunkDELTFEEJ_js = require('../chunk-DELTFEEJ.js');
+require('../chunk-PNKVD2UK.js');
 
 
 

package/dist/components/Button.mjs

@@ -1 +1,2 @@
 export { Button, Button_default as default } from '../chunk-D6MR5YRE.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/Card.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunkWEFQCJAG_js = require('../chunk-WEFQCJAG.js');
+require('../chunk-PNKVD2UK.js');
 
 
 

package/dist/components/Card.mjs

@@ -1 +1,2 @@
 export { Card, Card_default as default } from '../chunk-YXN3YY5Y.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/Carousel.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunkXV5DEK27_js = require('../chunk-XV5DEK27.js');
+require('../chunk-PNKVD2UK.js');
 
 
 

package/dist/components/Carousel.mjs

@@ -1 +1,2 @@
 export { Carousel, Carousel_default as default } from '../chunk-FDYZ7NTQ.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/ChartAxis.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunk5PXTMXXS_js = require('../chunk-5PXTMXXS.js');
+require('../chunk-PNKVD2UK.js');
 
 
 

package/dist/components/ChartAxis.mjs

@@ -1 +1,2 @@
 export { ChartAxis, ChartAxis_default as default } from '../chunk-ZWVA7HT3.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/ChartCanvas.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunkFCV4ML6I_js = require('../chunk-FCV4ML6I.js');
+require('../chunk-PNKVD2UK.js');
 
 
 

package/dist/components/ChartCanvas.mjs

@@ -1 +1,2 @@
 export { ChartCanvas, ChartCanvas_default as default } from '../chunk-5WHLXWWT.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/ChartGrid.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunk57MJTNDL_js = require('../chunk-57MJTNDL.js');
+require('../chunk-PNKVD2UK.js');
 
 
 

package/dist/components/ChartGrid.mjs

@@ -1 +1,2 @@
 export { ChartGrid, ChartGrid_default as default } from '../chunk-MI6TL3CQ.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/ChartLegend.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunkBKTQ6RWR_js = require('../chunk-BKTQ6RWR.js');
+require('../chunk-PNKVD2UK.js');
 
 
 

package/dist/components/ChartLegend.mjs

@@ -1 +1,2 @@
 export { ChartLegend, ChartLegend_default as default } from '../chunk-F5HOHSFH.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/ChartSeries.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunkHBFFINAI_js = require('../chunk-HBFFINAI.js');
+require('../chunk-PNKVD2UK.js');
 
 
 

package/dist/components/ChartSeries.mjs

@@ -1 +1,2 @@
 export { ChartSeries, ChartSeries_default as default } from '../chunk-2ZUEXCVJ.mjs';
+import '../chunk-53M2BTB5.mjs';

package/dist/components/ChartTooltip.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunkEPE6OOV7_js = require('../chunk-EPE6OOV7.js');
+require('../chunk-PNKVD2UK.js');