@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/chunk-T4DF24UV.js

@@ -0,0 +1,108 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Skeleton.ts
+var Skeleton = vue.defineComponent({
+  name: "TigerSkeleton",
+  inheritAttrs: false,
+  props: {
+    variant: {
+      type: String,
+      default: "text"
+    },
+    animation: {
+      type: String,
+      default: "pulse"
+    },
+    width: {
+      type: String,
+      default: void 0
+    },
+    height: {
+      type: String,
+      default: void 0
+    },
+    shape: {
+      type: String,
+      default: "circle"
+    },
+    rows: {
+      type: Number,
+      default: 1
+    },
+    paragraph: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { attrs }) {
+    const visualClasses = vue.computed(
+      () => tigercatCore.getSkeletonClasses(props.variant, props.animation, props.shape)
+    );
+    const dimensions = vue.computed(
+      () => tigercatCore.getSkeletonDimensions(props.variant, props.width, props.height)
+    );
+    return () => {
+      const attrsRecord = attrs;
+      const attrsClass = attrsRecord.class;
+      const attrsStyle = attrsRecord.style;
+      const hasAriaLabel = typeof attrsRecord["aria-label"] === "string" || typeof attrsRecord["aria-labelledby"] === "string";
+      const ariaHiddenRaw = attrsRecord["aria-hidden"];
+      const computedAriaHidden = typeof ariaHiddenRaw === "boolean" ? ariaHiddenRaw : hasAriaLabel ? void 0 : true;
+      if (props.variant === "text" && props.rows > 1) {
+        const rows = [];
+        for (let i = 0; i < props.rows; i++) {
+          const rowStyle = {
+            height: dimensions.value.height
+          };
+          if (props.paragraph) {
+            rowStyle.width = tigercatCore.getParagraphRowWidth(i, props.rows);
+          } else if (dimensions.value.width) {
+            rowStyle.width = dimensions.value.width;
+          }
+          rows.push(
+            vue.h("div", {
+              key: i,
+              class: tigercatCore.classNames(visualClasses.value, i < props.rows - 1 && "mb-2"),
+              style: rowStyle
+            })
+          );
+        }
+        return vue.h(
+          "div",
+          {
+            ...attrs,
+            class: tigercatCore.classNames("flex flex-col", props.className, tigercatCore.coerceClassValue(attrsClass)),
+            style: tigercatCore.mergeStyleValues(attrsStyle, props.style),
+            "aria-hidden": computedAriaHidden
+          },
+          rows
+        );
+      }
+      const dim = dimensions.value;
+      return vue.h("div", {
+        ...attrs,
+        class: tigercatCore.classNames(visualClasses.value, props.className, tigercatCore.coerceClassValue(attrsClass)),
+        style: tigercatCore.mergeStyleValues(attrsStyle, props.style, {
+          ...dim.width ? { width: dim.width } : void 0,
+          height: dim.height
+        }),
+        "aria-hidden": computedAriaHidden
+      });
+    };
+  }
+});
+var Skeleton_default = Skeleton;
+
+exports.Skeleton = Skeleton;
+exports.Skeleton_default = Skeleton_default;

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/{chunk-GO3JWOB6.mjs → chunk-TG4PXQKX.mjs}

@@ -1,4 +1,4 @@
-import { BreadcrumbContextKey } from './chunk-LFIZI5Z4.mjs';
+import { BreadcrumbContextKey } from './chunk-U6WHPSWN.mjs';
 import { defineComponent, inject, computed, h } from 'vue';
 import { getBreadcrumbItemClasses, getBreadcrumbLinkClasses, getBreadcrumbSeparatorClasses, getSeparatorContent } from '@expcat/tigercat-core';
 
@@ -67,7 +67,7 @@ var BreadcrumbItem = defineComponent({
       separator: "/"
     });
     const itemClasses = computed(() => {
-      return getBreadcrumbItemClasses(props.current, props.className);
+      return getBreadcrumbItemClasses(props.className);
     });
     const linkClasses = computed(() => {
       return getBreadcrumbLinkClasses(props.current);
@@ -101,7 +101,6 @@ var BreadcrumbItem = defineComponent({
           href: props.href,
           target: props.target,
           rel: computedRel.value,
-          "aria-current": props.current ? "page" : void 0,
           onClick: handleClick
         },
         contentElements