@expcat/tigercat-vue 0.3.69 → 0.4.0

package/dist/chunk-MB7W46IY.mjs

@@ -0,0 +1,193 @@
+import { init_ImagePreview, ImagePreview_exports } from './chunk-MMQ34S5M.mjs';
+import { __toCommonJS } from './chunk-53M2BTB5.mjs';
+import { defineComponent, ref, inject, onMounted, onBeforeUnmount, computed, h } from 'vue';
+import { classNames, imageBaseClasses, imagePreviewCursorClass, coerceClassValue, toCSSSize, mergeStyleValues, getImageImgClasses, imageErrorClasses, imageErrorIconPath, imageLoadingClasses } from '@expcat/tigercat-core';
+
+var IMAGE_GROUP_INJECTION_KEY = "tiger-image-group";
+var Image = 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 = ref(true);
+    const error = ref(false);
+    const actualSrc = ref(props.lazy ? "" : props.src);
+    const containerRef = ref(null);
+    const previewVisible = ref(false);
+    let observer = null;
+    const group = inject(IMAGE_GROUP_INJECTION_KEY, null);
+    const registeredIndex = ref(-1);
+    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);
+      }
+    });
+    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 = computed(
+      () => classNames(
+        imageBaseClasses,
+        props.preview && imagePreviewCursorClass,
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const containerStyle = computed(() => {
+      const base = {};
+      const w = toCSSSize(props.width);
+      const ht = toCSSSize(props.height);
+      if (w) base.width = w;
+      if (ht) base.height = ht;
+      return mergeStyleValues(attrs.style, props.style, base);
+    });
+    const imgClasses = computed(() => 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() : h("div", { class: imageErrorClasses }, [
+          h(
+            "svg",
+            {
+              class: "w-8 h-8",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor"
+            },
+            [
+              h("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "1.5",
+                d: imageErrorIconPath
+              })
+            ]
+          )
+        ]);
+      } else if (loading.value && !actualSrc.value) {
+        content = slots.placeholder ? slots.placeholder() : h("div", { class: imageLoadingClasses }, [
+          h(
+            "svg",
+            {
+              class: "w-8 h-8",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor"
+            },
+            [
+              h("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "1.5",
+                d: imageErrorIconPath
+              })
+            ]
+          )
+        ]);
+      } else {
+        content = h("img", {
+          src: actualSrc.value,
+          alt: props.alt,
+          class: imgClasses.value,
+          onLoad: handleLoad,
+          onError: handleError
+        });
+      }
+      const previewEl = !group && previewVisible.value && props.src ? (() => {
+        const { ImagePreview } = (init_ImagePreview(), __toCommonJS(ImagePreview_exports));
+        return h(ImagePreview, {
+          visible: previewVisible.value,
+          images: [props.src],
+          currentIndex: 0,
+          "onUpdate:visible": (val) => {
+            previewVisible.value = val;
+            emit("preview-visible-change", val);
+          }
+        });
+      })() : null;
+      return 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;
+
+export { IMAGE_GROUP_INJECTION_KEY, Image, Image_default };

package/dist/chunk-MMQ34S5M.mjs

@@ -0,0 +1,263 @@
+import { __export, __esm } from './chunk-53M2BTB5.mjs';
+import { defineComponent, ref, watch, computed, onMounted, onBeforeUnmount, h, Teleport } from 'vue';
+import { getPreviewNavState, calculateTransform, imagePreviewMaskClasses, imagePreviewImgClasses, imagePreviewCloseBtnClasses, previewCloseIconPath, imagePreviewToolbarClasses, imagePreviewToolbarBtnClasses, zoomOutIconPath, resetIconPath, zoomInIconPath, imagePreviewCounterClasses, classNames, imagePreviewNavBtnClasses, prevIconPath, nextIconPath, imagePreviewWrapperClasses, clampScale } from '@expcat/tigercat-core';
+
+// src/components/ImagePreview.ts
+var ImagePreview_exports = {};
+__export(ImagePreview_exports, {
+  ImagePreview: () => ImagePreview,
+  default: () => ImagePreview_default
+});
+var svgIcon, ImagePreview, ImagePreview_default;
+var init_ImagePreview = __esm({
+  "src/components/ImagePreview.ts"() {
+    svgIcon = (d, cls = "w-5 h-5") => h(
+      "svg",
+      {
+        class: cls,
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor"
+      },
+      [
+        h("path", {
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "stroke-width": "2",
+          d
+        })
+      ]
+    );
+    ImagePreview = defineComponent({
+      name: "TigerImagePreview",
+      inheritAttrs: false,
+      props: {
+        visible: { type: Boolean, default: false },
+        images: { type: Array, default: () => [] },
+        currentIndex: { type: Number, default: 0 },
+        zIndex: { type: Number, default: 1050 },
+        maskClosable: { type: Boolean, default: true },
+        scaleStep: { type: Number, default: 0.5 },
+        minScale: { type: Number, default: 0.25 },
+        maxScale: { type: Number, default: 5 }
+      },
+      emits: ["update:visible", "update:currentIndex", "scale-change"],
+      setup(props, { emit }) {
+        const scale = ref(1);
+        const offsetX = ref(0);
+        const offsetY = ref(0);
+        const index = ref(props.currentIndex);
+        const dragging = ref(false);
+        const dragStart = ref({ x: 0, y: 0, ox: 0, oy: 0 });
+        const resetTransform = () => {
+          scale.value = 1;
+          offsetX.value = 0;
+          offsetY.value = 0;
+        };
+        watch(
+          () => props.currentIndex,
+          (val) => {
+            index.value = val;
+            resetTransform();
+          }
+        );
+        watch(
+          () => props.visible,
+          (val) => {
+            if (val) {
+              resetTransform();
+              index.value = props.currentIndex;
+              document.body.style.overflow = "hidden";
+            } else {
+              document.body.style.overflow = "";
+            }
+          }
+        );
+        const navState = computed(() => getPreviewNavState(index.value, props.images.length));
+        const handleClose = () => {
+          emit("update:visible", false);
+        };
+        const handleZoomIn = () => {
+          scale.value = clampScale(scale.value + props.scaleStep, props.minScale, props.maxScale);
+          emit("scale-change", scale.value);
+        };
+        const handleZoomOut = () => {
+          scale.value = clampScale(scale.value - props.scaleStep, props.minScale, props.maxScale);
+          emit("scale-change", scale.value);
+        };
+        const handleReset = () => {
+          resetTransform();
+          emit("scale-change", 1);
+        };
+        const handlePrev = () => {
+          if (navState.value.hasPrev) {
+            index.value--;
+            resetTransform();
+            emit("update:currentIndex", index.value);
+          }
+        };
+        const handleNext = () => {
+          if (navState.value.hasNext) {
+            index.value++;
+            resetTransform();
+            emit("update:currentIndex", index.value);
+          }
+        };
+        const handleWheel = (e) => {
+          e.preventDefault();
+          const delta = e.deltaY > 0 ? -props.scaleStep : props.scaleStep;
+          scale.value = clampScale(scale.value + delta, props.minScale, props.maxScale);
+          emit("scale-change", scale.value);
+        };
+        const handleMouseDown = (e) => {
+          if (e.button !== 0) return;
+          e.preventDefault();
+          dragging.value = true;
+          dragStart.value = {
+            x: e.clientX,
+            y: e.clientY,
+            ox: offsetX.value,
+            oy: offsetY.value
+          };
+        };
+        const handleMouseMove = (e) => {
+          if (!dragging.value) return;
+          offsetX.value = dragStart.value.ox + (e.clientX - dragStart.value.x);
+          offsetY.value = dragStart.value.oy + (e.clientY - dragStart.value.y);
+        };
+        const handleMouseUp = () => {
+          dragging.value = false;
+        };
+        const handleMaskClick = (e) => {
+          if (props.maskClosable && e.target === e.currentTarget) {
+            handleClose();
+          }
+        };
+        const handleKeyDown = (e) => {
+          if (!props.visible) return;
+          switch (e.key) {
+            case "Escape":
+              handleClose();
+              break;
+            case "ArrowLeft":
+              handlePrev();
+              break;
+            case "ArrowRight":
+              handleNext();
+              break;
+          }
+        };
+        onMounted(() => {
+          document.addEventListener("keydown", handleKeyDown);
+        });
+        onBeforeUnmount(() => {
+          document.removeEventListener("keydown", handleKeyDown);
+          document.body.style.overflow = "";
+        });
+        const transform = computed(() => calculateTransform(scale.value, offsetX.value, offsetY.value));
+        return () => {
+          if (!props.visible || !props.images.length) return null;
+          const currentSrc = props.images[index.value] || props.images[0];
+          const mask = h("div", {
+            class: imagePreviewMaskClasses,
+            "aria-hidden": "true"
+          });
+          const img = h("img", {
+            src: currentSrc,
+            class: imagePreviewImgClasses,
+            style: { transform: transform.value },
+            alt: `Preview image ${index.value + 1}`,
+            draggable: false,
+            onMousedown: handleMouseDown,
+            onMousemove: handleMouseMove,
+            onMouseup: handleMouseUp,
+            onMouseleave: handleMouseUp
+          });
+          const closeBtn = h(
+            "button",
+            {
+              class: imagePreviewCloseBtnClasses,
+              onClick: handleClose,
+              "aria-label": "Close preview",
+              type: "button"
+            },
+            [svgIcon(previewCloseIconPath)]
+          );
+          const toolbar = h("div", { class: imagePreviewToolbarClasses }, [
+            h(
+              "button",
+              {
+                class: imagePreviewToolbarBtnClasses,
+                onClick: handleZoomOut,
+                "aria-label": "Zoom out",
+                type: "button"
+              },
+              [svgIcon(zoomOutIconPath)]
+            ),
+            h(
+              "button",
+              {
+                class: imagePreviewToolbarBtnClasses,
+                onClick: handleReset,
+                "aria-label": "Reset",
+                type: "button"
+              },
+              [svgIcon(resetIconPath)]
+            ),
+            h(
+              "button",
+              {
+                class: imagePreviewToolbarBtnClasses,
+                onClick: handleZoomIn,
+                "aria-label": "Zoom in",
+                type: "button"
+              },
+              [svgIcon(zoomInIconPath)]
+            ),
+            navState.value.counter ? h("span", { class: imagePreviewCounterClasses }, navState.value.counter) : null
+          ]);
+          const prevBtn = props.images.length > 1 ? h(
+            "button",
+            {
+              class: classNames(imagePreviewNavBtnClasses, "left-4"),
+              onClick: handlePrev,
+              disabled: !navState.value.hasPrev,
+              "aria-label": "Previous image",
+              type: "button"
+            },
+            [svgIcon(prevIconPath)]
+          ) : null;
+          const nextBtn = props.images.length > 1 ? h(
+            "button",
+            {
+              class: classNames(imagePreviewNavBtnClasses, "right-4"),
+              onClick: handleNext,
+              disabled: !navState.value.hasNext,
+              "aria-label": "Next image",
+              type: "button"
+            },
+            [svgIcon(nextIconPath)]
+          ) : null;
+          const wrapper = h(
+            "div",
+            {
+              class: imagePreviewWrapperClasses,
+              style: { zIndex: props.zIndex },
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": "Image preview",
+              onClick: handleMaskClick,
+              onWheel: handleWheel
+            },
+            [mask, img, closeBtn, prevBtn, nextBtn, toolbar]
+          );
+          return h(Teleport, { to: "body" }, [wrapper]);
+        };
+      }
+    });
+    ImagePreview_default = ImagePreview;
+  }
+});
+
+export { ImagePreview, ImagePreview_default, ImagePreview_exports, init_ImagePreview };

package/dist/chunk-PNKVD2UK.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+exports.__esm = __esm;
+exports.__export = __export;
+exports.__toCommonJS = __toCommonJS;