@expcat/tigercat-vue 0.3.69 → 0.4.0

package/dist/chunk-K2U3FEL7.js

@@ -0,0 +1,373 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/ImageCropper.ts
+var ImageCropper = vue.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 = vue.ref(null);
+    const imageRef = vue.ref(null);
+    const imageLoaded = vue.ref(false);
+    const displayWidth = vue.ref(0);
+    const displayHeight = vue.ref(0);
+    const cropRect = vue.ref({ x: 0, y: 0, width: 0, height: 0 });
+    const dragMode = vue.ref("none");
+    const activeHandle = vue.ref(null);
+    const dragStartPos = vue.ref({ x: 0, y: 0 });
+    const dragStartRect = vue.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 = tigercatCore.getInitialCropRect(
+          displayWidth.value,
+          displayHeight.value,
+          props.aspectRatio
+        );
+        imageLoaded.value = true;
+        emit("ready");
+      };
+      img.src = props.src;
+    };
+    vue.watch(
+      () => props.src,
+      () => {
+        imageLoaded.value = false;
+        loadImage();
+      }
+    );
+    vue.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 = tigercatCore.moveCropRect(
+            dragStartRect.value,
+            dx,
+            dy,
+            displayWidth.value,
+            displayHeight.value
+          );
+        } else if (dragMode.value === "resize" && activeHandle.value) {
+          cropRect.value = tigercatCore.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 = tigercatCore.moveCropRect(
+            dragStartRect.value,
+            dx,
+            dy,
+            displayWidth.value,
+            displayHeight.value
+          );
+        } else if (dragMode.value === "resize" && activeHandle.value) {
+          cropRect.value = tigercatCore.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 } = tigercatCore.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 = vue.computed(
+      () => tigercatCore.classNames(
+        tigercatCore.imageCropperContainerClasses,
+        props.className,
+        tigercatCore.coerceClassValue(attrs.class)
+      )
+    );
+    const containerStyle = vue.computed(
+      () => tigercatCore.mergeStyleValues(attrs.style, props.style)
+    );
+    return () => {
+      const forwardedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
+      );
+      if (!imageLoaded.value) {
+        return vue.h(
+          "div",
+          {
+            ...forwardedAttrs,
+            ref: containerRef,
+            class: tigercatCore.classNames(containerClasses.value, "flex items-center justify-center"),
+            style: Object.assign({}, containerStyle.value, {
+              minHeight: "200px"
+            }),
+            role: "img",
+            "aria-label": "Loading image for cropping"
+          },
+          [
+            vue.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 = vue.h("img", {
+        src: props.src,
+        class: tigercatCore.imageCropperImgClasses,
+        style: {
+          width: `${displayWidth.value}px`,
+          height: `${displayHeight.value}px`
+        },
+        draggable: false,
+        alt: "Image to crop"
+      });
+      const mask = vue.h(
+        "svg",
+        {
+          class: tigercatCore.imageCropperMaskClasses,
+          width: displayWidth.value,
+          height: displayHeight.value,
+          xmlns: "http://www.w3.org/2000/svg"
+        },
+        [
+          vue.h("defs", null, [
+            vue.h("mask", { id: "crop-mask" }, [
+              vue.h("rect", {
+                width: displayWidth.value,
+                height: displayHeight.value,
+                fill: "white"
+              }),
+              vue.h("rect", {
+                x: cr.x,
+                y: cr.y,
+                width: cr.width,
+                height: cr.height,
+                fill: "black"
+              })
+            ])
+          ]),
+          vue.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 = vue.h("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("div", {
+        class: tigercatCore.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
+        vue.h("div", {
+          class: tigercatCore.imageCropperGuideClasses,
+          style: {
+            left: `${cr.x}px`,
+            top: `${cr.y + cr.height / 3}px`,
+            width: `${cr.width}px`,
+            height: "0px",
+            borderTopWidth: "1px",
+            borderTopStyle: "dashed"
+          }
+        }),
+        vue.h("div", {
+          class: tigercatCore.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
+        vue.h("div", {
+          class: tigercatCore.imageCropperGuideClasses,
+          style: {
+            left: `${cr.x + cr.width / 3}px`,
+            top: `${cr.y}px`,
+            width: "0px",
+            height: `${cr.height}px`,
+            borderLeftWidth: "1px",
+            borderLeftStyle: "dashed"
+          }
+        }),
+        vue.h("div", {
+          class: tigercatCore.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 = 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("div", {
+          class: tigercatCore.getCropperHandleClasses(handle),
+          style: pos,
+          onMousedown: (e) => handleMouseDown(e, "resize", handle),
+          onTouchstart: (e) => handleTouchStart(e, "resize", handle)
+        });
+      });
+      return vue.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;
+
+exports.ImageCropper = ImageCropper;
+exports.ImageCropper_default = ImageCropper_default;

package/dist/chunk-K6HDRMPN.js

@@ -0,0 +1,197 @@
+'use strict';
+
+var chunk7AFJ7TKW_js = require('./chunk-7AFJ7TKW.js');
+var chunkPNKVD2UK_js = require('./chunk-PNKVD2UK.js');
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+var IMAGE_GROUP_INJECTION_KEY = "tiger-image-group";
+var Image = vue.defineComponent({
+  name: "TigerImage",
+  inheritAttrs: false,
+  props: {
+    src: { type: String, default: void 0 },
+    alt: { type: String, default: "" },
+    width: { type: [Number, String], default: void 0 },
+    height: { type: [Number, String], default: void 0 },
+    fit: { type: String, default: "cover" },
+    fallbackSrc: { type: String, default: void 0 },
+    preview: { type: Boolean, default: true },
+    lazy: { type: Boolean, default: false },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["load", "error", "preview-visible-change"],
+  setup(props, { slots, emit, attrs }) {
+    const loading = vue.ref(true);
+    const error = vue.ref(false);
+    const actualSrc = vue.ref(props.lazy ? "" : props.src);
+    const containerRef = vue.ref(null);
+    const previewVisible = vue.ref(false);
+    let observer = null;
+    const group = vue.inject(IMAGE_GROUP_INJECTION_KEY, null);
+    const registeredIndex = vue.ref(-1);
+    vue.onMounted(() => {
+      if (group && props.src) {
+        registeredIndex.value = group.register(props.src);
+      }
+      if (props.lazy && containerRef.value) {
+        observer = new IntersectionObserver(
+          (entries) => {
+            if (entries[0]?.isIntersecting) {
+              actualSrc.value = props.src;
+              observer?.disconnect();
+              observer = null;
+            }
+          },
+          { threshold: 0.01 }
+        );
+        observer.observe(containerRef.value);
+      }
+    });
+    vue.onBeforeUnmount(() => {
+      observer?.disconnect();
+      if (group && props.src) {
+        group.unregister(props.src);
+      }
+    });
+    const handleLoad = () => {
+      loading.value = false;
+      error.value = false;
+      emit("load");
+    };
+    const handleError = () => {
+      loading.value = false;
+      error.value = true;
+      if (props.fallbackSrc && actualSrc.value !== props.fallbackSrc) {
+        actualSrc.value = props.fallbackSrc;
+        error.value = false;
+        loading.value = true;
+      }
+      emit("error");
+    };
+    const handleClick = () => {
+      if (!props.preview) return;
+      if (group) {
+        group.openPreview(registeredIndex.value >= 0 ? registeredIndex.value : 0);
+      } else {
+        previewVisible.value = true;
+        emit("preview-visible-change", true);
+      }
+    };
+    const containerClasses = vue.computed(
+      () => tigercatCore.classNames(
+        tigercatCore.imageBaseClasses,
+        props.preview && tigercatCore.imagePreviewCursorClass,
+        props.className,
+        tigercatCore.coerceClassValue(attrs.class)
+      )
+    );
+    const containerStyle = vue.computed(() => {
+      const base = {};
+      const w = tigercatCore.toCSSSize(props.width);
+      const ht = tigercatCore.toCSSSize(props.height);
+      if (w) base.width = w;
+      if (ht) base.height = ht;
+      return tigercatCore.mergeStyleValues(attrs.style, props.style, base);
+    });
+    const imgClasses = vue.computed(() => tigercatCore.getImageImgClasses(props.fit));
+    return () => {
+      const forwardedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
+      );
+      let content;
+      if (error.value && !props.fallbackSrc) {
+        content = slots.error ? slots.error() : vue.h("div", { class: tigercatCore.imageErrorClasses }, [
+          vue.h(
+            "svg",
+            {
+              class: "w-8 h-8",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor"
+            },
+            [
+              vue.h("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "1.5",
+                d: tigercatCore.imageErrorIconPath
+              })
+            ]
+          )
+        ]);
+      } else if (loading.value && !actualSrc.value) {
+        content = slots.placeholder ? slots.placeholder() : vue.h("div", { class: tigercatCore.imageLoadingClasses }, [
+          vue.h(
+            "svg",
+            {
+              class: "w-8 h-8",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor"
+            },
+            [
+              vue.h("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "1.5",
+                d: tigercatCore.imageErrorIconPath
+              })
+            ]
+          )
+        ]);
+      } else {
+        content = vue.h("img", {
+          src: actualSrc.value,
+          alt: props.alt,
+          class: imgClasses.value,
+          onLoad: handleLoad,
+          onError: handleError
+        });
+      }
+      const previewEl = !group && previewVisible.value && props.src ? (() => {
+        const { ImagePreview } = (chunk7AFJ7TKW_js.init_ImagePreview(), chunkPNKVD2UK_js.__toCommonJS(chunk7AFJ7TKW_js.ImagePreview_exports));
+        return vue.h(ImagePreview, {
+          visible: previewVisible.value,
+          images: [props.src],
+          currentIndex: 0,
+          "onUpdate:visible": (val) => {
+            previewVisible.value = val;
+            emit("preview-visible-change", val);
+          }
+        });
+      })() : null;
+      return vue.h(
+        "div",
+        {
+          ...forwardedAttrs,
+          ref: containerRef,
+          class: containerClasses.value,
+          style: containerStyle.value,
+          role: props.preview ? "button" : void 0,
+          tabindex: props.preview ? 0 : void 0,
+          "aria-label": props.preview ? `Preview ${props.alt || "image"}` : void 0,
+          onClick: handleClick,
+          onKeydown: (e) => {
+            if (props.preview && (e.key === "Enter" || e.key === " ")) {
+              e.preventDefault();
+              handleClick();
+            }
+          }
+        },
+        [content, previewEl]
+      );
+    };
+  }
+});
+var Image_default = Image;
+
+exports.IMAGE_GROUP_INJECTION_KEY = IMAGE_GROUP_INJECTION_KEY;
+exports.Image = Image;
+exports.Image_default = Image_default;

package/dist/chunk-LDCTSE6Y.mjs

@@ -0,0 +1,60 @@
+import { init_ImagePreview, ImagePreview } from './chunk-MMQ34S5M.mjs';
+import { defineComponent, ref, provide, onBeforeUnmount, h } from 'vue';
+
+// src/components/ImageGroup.ts
+init_ImagePreview();
+var IMAGE_GROUP_INJECTION_KEY = "tiger-image-group";
+var ImageGroup = defineComponent({
+  name: "TigerImageGroup",
+  props: {
+    preview: { type: Boolean, default: true }
+  },
+  emits: ["preview-visible-change"],
+  setup(props, { slots, emit }) {
+    const images = ref([]);
+    const previewVisible = ref(false);
+    const previewIndex = ref(0);
+    const context = {
+      register(src) {
+        const idx = images.value.length;
+        images.value.push(src);
+        return idx;
+      },
+      unregister(src) {
+        const idx = images.value.indexOf(src);
+        if (idx > -1) {
+          images.value.splice(idx, 1);
+        }
+      },
+      openPreview(index) {
+        if (!props.preview) return;
+        previewIndex.value = index;
+        previewVisible.value = true;
+        emit("preview-visible-change", true);
+      }
+    };
+    provide(IMAGE_GROUP_INJECTION_KEY, context);
+    onBeforeUnmount(() => {
+      images.value = [];
+    });
+    return () => {
+      const children = slots.default?.();
+      const preview = props.preview ? h(ImagePreview, {
+        visible: previewVisible.value,
+        images: images.value,
+        currentIndex: previewIndex.value,
+        "onUpdate:visible": (val) => {
+          previewVisible.value = val;
+          if (!val) emit("preview-visible-change", false);
+        },
+        "onUpdate:currentIndex": (val) => {
+          previewIndex.value = val;
+        }
+      }) : null;
+      return h("div", { class: "tiger-image-group", role: "group" }, [children, preview]);
+    };
+  }
+});
+var ImageGroup_default = ImageGroup;
+
+export { IMAGE_GROUP_INJECTION_KEY, ImageGroup, ImageGroup_default };

package/dist/chunk-LNWRZKX2.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var chunk7AFJ7TKW_js = require('./chunk-7AFJ7TKW.js');
+var vue = require('vue');
+
+// src/components/ImageGroup.ts
+chunk7AFJ7TKW_js.init_ImagePreview();
+var IMAGE_GROUP_INJECTION_KEY = "tiger-image-group";
+var ImageGroup = vue.defineComponent({
+  name: "TigerImageGroup",
+  props: {
+    preview: { type: Boolean, default: true }
+  },
+  emits: ["preview-visible-change"],
+  setup(props, { slots, emit }) {
+    const images = vue.ref([]);
+    const previewVisible = vue.ref(false);
+    const previewIndex = vue.ref(0);
+    const context = {
+      register(src) {
+        const idx = images.value.length;
+        images.value.push(src);
+        return idx;
+      },
+      unregister(src) {
+        const idx = images.value.indexOf(src);
+        if (idx > -1) {
+          images.value.splice(idx, 1);
+        }
+      },
+      openPreview(index) {
+        if (!props.preview) return;
+        previewIndex.value = index;
+        previewVisible.value = true;
+        emit("preview-visible-change", true);
+      }
+    };
+    vue.provide(IMAGE_GROUP_INJECTION_KEY, context);
+    vue.onBeforeUnmount(() => {
+      images.value = [];
+    });
+    return () => {
+      const children = slots.default?.();
+      const preview = props.preview ? vue.h(chunk7AFJ7TKW_js.ImagePreview, {
+        visible: previewVisible.value,
+        images: images.value,
+        currentIndex: previewIndex.value,
+        "onUpdate:visible": (val) => {
+          previewVisible.value = val;
+          if (!val) emit("preview-visible-change", false);
+        },
+        "onUpdate:currentIndex": (val) => {
+          previewIndex.value = val;
+        }
+      }) : null;
+      return vue.h("div", { class: "tiger-image-group", role: "group" }, [children, preview]);
+    };
+  }
+});
+var ImageGroup_default = ImageGroup;
+
+exports.IMAGE_GROUP_INJECTION_KEY = IMAGE_GROUP_INJECTION_KEY;
+exports.ImageGroup = ImageGroup;
+exports.ImageGroup_default = ImageGroup_default;