@expcat/tigercat-vue 1.5.0 → 2.0.0-preview.1

package/dist/chunk-ANQRW442.js

@@ -1,468 +0,0 @@
-"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 _chunkIXTYS3EKjs = require('./chunk-IXTYS3EK.js');
-
-// src/components/ImageCropper.ts
-
-
-
-
-
-
-
-
-var _vue = require('vue');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var _tigercatcore = require('@expcat/tigercat-core');
-var ImageCropper = _vue.defineComponent.call(void 0, {
-  name: "TigerImageCropper",
-  inheritAttrs: false,
-  props: {
-    locale: {
-      type: Object,
-      default: void 0
-    },
-    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 instance = _vue.getCurrentInstance.call(void 0, );
-    const maskId = `tiger-crop-mask-${_nullishCoalesce(_optionalChain([instance, 'optionalAccess', _ => _.uid]), () => ( "0"))}`;
-    const config = _chunkIXTYS3EKjs.useTigerConfig.call(void 0, );
-    const mergedLocale = _vue.computed.call(void 0, () => _tigercatcore.mergeTigerLocale.call(void 0, config.value.locale, props.locale));
-    const labels = _vue.computed.call(void 0, () => _tigercatcore.getImageEditorLabels.call(void 0, mergedLocale.value));
-    const containerRef = _vue.ref.call(void 0, null);
-    const imageRef = _vue.ref.call(void 0, null);
-    const imageLoaded = _vue.ref.call(void 0, false);
-    const displayWidth = _vue.ref.call(void 0, 0);
-    const displayHeight = _vue.ref.call(void 0, 0);
-    const cropRect = _vue.ref.call(void 0, { x: 0, y: 0, width: 0, height: 0 });
-    const dragMode = _vue.ref.call(void 0, "none");
-    const activeHandle = _vue.ref.call(void 0, null);
-    const dragStartPos = _vue.ref.call(void 0, { x: 0, y: 0 });
-    const dragStartRect = _vue.ref.call(void 0, { 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 = _tigercatcore.getInitialCropRect.call(void 0, 
-          displayWidth.value,
-          displayHeight.value,
-          props.aspectRatio
-        );
-        imageLoaded.value = true;
-        emit("ready");
-      };
-      img.src = props.src;
-    };
-    _vue.watch.call(void 0, 
-      () => props.src,
-      () => {
-        imageLoaded.value = false;
-        loadImage();
-      }
-    );
-    _vue.onMounted.call(void 0, () => {
-      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 = _tigercatcore.moveCropRect.call(void 0, 
-            dragStartRect.value,
-            dx,
-            dy,
-            displayWidth.value,
-            displayHeight.value
-          );
-        } else if (dragMode.value === "resize" && activeHandle.value) {
-          cropRect.value = _tigercatcore.resizeCropRect.call(void 0, 
-            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 = _tigercatcore.moveCropRect.call(void 0, 
-            dragStartRect.value,
-            dx,
-            dy,
-            displayWidth.value,
-            displayHeight.value
-          );
-        } else if (dragMode.value === "resize" && activeHandle.value) {
-          cropRect.value = _tigercatcore.resizeCropRect.call(void 0, 
-            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 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(
-        _tigercatcore.moveCropRect.call(void 0, cropRect.value, delta.dx, delta.dy, displayWidth.value, displayHeight.value)
-      );
-    };
-    const handleResizeKeyDown = (e, handle) => {
-      const delta = getKeyboardDelta(e);
-      if (!delta) return;
-      e.preventDefault();
-      updateCropRect(
-        _tigercatcore.resizeCropRect.call(void 0, 
-          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) {
-          reject(new Error("Image not loaded"));
-          return;
-        }
-        const { canvas, dataUrl } = _tigercatcore.cropCanvas.call(void 0, 
-          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 = _vue.computed.call(void 0, 
-      () => _tigercatcore.classNames.call(void 0, 
-        _tigercatcore.imageCropperContainerClasses,
-        props.className,
-        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
-      )
-    );
-    const containerStyle = _vue.computed.call(void 0, 
-      () => _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style)
-    );
-    return () => {
-      const forwardedAttrs = Object.fromEntries(
-        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
-      );
-      if (!imageLoaded.value) {
-        return _vue.h.call(void 0, 
-          "div",
-          {
-            ...forwardedAttrs,
-            ref: containerRef,
-            class: _tigercatcore.classNames.call(void 0, containerClasses.value, "flex items-center justify-center"),
-            style: Object.assign({}, containerStyle.value, {
-              minHeight: "200px"
-            }),
-            role: "img",
-            "aria-label": labels.value.loadingCropImageAriaLabel
-          },
-          [
-            _vue.h.call(void 0, "div", {
-              class: "w-8 h-8 border-2 border-white/30 border-t-white rounded-full animate-spin"
-            })
-          ]
-        );
-      }
-      const cr = cropRect.value;
-      const img = _vue.h.call(void 0, "img", {
-        src: props.src,
-        class: _tigercatcore.imageCropperImgClasses,
-        style: {
-          width: `${displayWidth.value}px`,
-          height: `${displayHeight.value}px`
-        },
-        draggable: false,
-        alt: labels.value.imageToCropAriaLabel
-      });
-      const mask = _vue.h.call(void 0, 
-        "svg",
-        {
-          class: _tigercatcore.imageCropperMaskClasses,
-          width: displayWidth.value,
-          height: displayHeight.value,
-          xmlns: "http://www.w3.org/2000/svg"
-        },
-        [
-          _vue.h.call(void 0, "defs", null, [
-            _vue.h.call(void 0, "mask", { id: maskId }, [
-              _vue.h.call(void 0, "rect", {
-                width: displayWidth.value,
-                height: displayHeight.value,
-                fill: "white"
-              }),
-              _vue.h.call(void 0, "rect", {
-                x: cr.x,
-                y: cr.y,
-                width: cr.width,
-                height: cr.height,
-                fill: "black"
-              })
-            ])
-          ]),
-          _vue.h.call(void 0, "rect", {
-            width: displayWidth.value,
-            height: displayHeight.value,
-            fill: "var(--tiger-image-cropper-mask, rgba(0,0,0,0.55))",
-            mask: `url(#${maskId})`
-          })
-        ]
-      );
-      const selection = _vue.h.call(void 0, "div", {
-        class: _tigercatcore.imageCropperSelectionClasses,
-        style: {
-          left: `${cr.x}px`,
-          top: `${cr.y}px`,
-          width: `${cr.width}px`,
-          height: `${cr.height}px`
-        }
-      });
-      const dragArea = _vue.h.call(void 0, "div", {
-        class: _tigercatcore.imageCropperDragAreaClasses,
-        style: {
-          left: `${cr.x}px`,
-          top: `${cr.y}px`,
-          width: `${cr.width}px`,
-          height: `${cr.height}px`
-        },
-        role: "button",
-        tabindex: 0,
-        "aria-label": labels.value.moveCropAreaAriaLabel,
-        onMousedown: (e) => handleMouseDown(e, "move"),
-        onTouchstart: (e) => handleTouchStart(e, "move"),
-        onKeydown: handleMoveKeyDown
-      });
-      const guideLines = props.guides ? [
-        // Horizontal lines
-        _vue.h.call(void 0, "div", {
-          class: _tigercatcore.imageCropperGuideClasses,
-          "data-guide": "true",
-          style: {
-            left: `${cr.x}px`,
-            top: `${cr.y + cr.height / 3}px`,
-            width: `${cr.width}px`,
-            height: "0px",
-            borderTopWidth: "1px",
-            borderTopStyle: "dashed"
-          }
-        }),
-        _vue.h.call(void 0, "div", {
-          class: _tigercatcore.imageCropperGuideClasses,
-          "data-guide": "true",
-          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
-        _vue.h.call(void 0, "div", {
-          class: _tigercatcore.imageCropperGuideClasses,
-          "data-guide": "true",
-          style: {
-            left: `${cr.x + cr.width / 3}px`,
-            top: `${cr.y}px`,
-            width: "0px",
-            height: `${cr.height}px`,
-            borderLeftWidth: "1px",
-            borderLeftStyle: "dashed"
-          }
-        }),
-        _vue.h.call(void 0, "div", {
-          class: _tigercatcore.imageCropperGuideClasses,
-          "data-guide": "true",
-          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 = _tigercatcore.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 _vue.h.call(void 0, "div", {
-          class: _tigercatcore.getCropperHandleClasses.call(void 0, handle),
-          style: pos,
-          role: "button",
-          tabindex: 0,
-          "aria-label": labels.value.resizeCropAreaAriaLabel.replace("{handle}", handle),
-          onMousedown: (e) => handleMouseDown(e, "resize", handle),
-          onTouchstart: (e) => handleTouchStart(e, "resize", handle),
-          onKeydown: (e) => handleResizeKeyDown(e, handle)
-        });
-      });
-      return _vue.h.call(void 0, 
-        "div",
-        {
-          ...forwardedAttrs,
-          ref: containerRef,
-          class: containerClasses.value,
-          style: Object.assign({}, containerStyle.value, {
-            width: `${displayWidth.value}px`,
-            height: `${displayHeight.value}px`
-          }),
-          role: "application",
-          "aria-label": labels.value.cropperDialogAriaLabel,
-          "aria-roledescription": "image cropper"
-        },
-        [img, mask, selection, dragArea, ...guideLines, ...handles]
-      );
-    };
-  }
-});
-var ImageCropper_default = ImageCropper;
-
-
-
-
-exports.ImageCropper = ImageCropper; exports.ImageCropper_default = ImageCropper_default;