@expcat/tigercat-vue 1.0.7 → 1.2.0

package/dist/chunk-VXULMOIW.js

@@ -0,0 +1,374 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/components/ImageViewer.ts
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+function createSvgIcon(pathD, label) {
+  return _vue.h.call(void 0, 
+    "svg",
+    {
+      class: "w-5 h-5",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "aria-label": label
+    },
+    [_vue.h.call(void 0, "path", { d: pathD })]
+  );
+}
+var ImageViewer = _vue.defineComponent.call(void 0, {
+  name: "TigerImageViewer",
+  inheritAttrs: false,
+  props: {
+    images: {
+      type: Array,
+      required: true
+    },
+    open: {
+      type: Boolean,
+      default: false
+    },
+    currentIndex: {
+      type: Number,
+      default: 0
+    },
+    zoomable: {
+      type: Boolean,
+      default: true
+    },
+    rotatable: {
+      type: Boolean,
+      default: true
+    },
+    showNav: {
+      type: Boolean,
+      default: true
+    },
+    showCounter: {
+      type: Boolean,
+      default: true
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    minZoom: {
+      type: Number,
+      default: 0.5
+    },
+    maxZoom: {
+      type: Number,
+      default: 3
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["update:open", "update:currentIndex", "close"],
+  setup(props, { emit, attrs }) {
+    const index = _vue.ref.call(void 0, props.currentIndex);
+    const transform = _vue.ref.call(void 0, _tigercatcore.createDefaultTransform.call(void 0, ));
+    let panState = _tigercatcore.createPanState.call(void 0, );
+    let pinchState = _tigercatcore.createPinchState.call(void 0, );
+    _vue.watch.call(void 0, 
+      () => props.currentIndex,
+      (val) => {
+        index.value = val;
+      }
+    );
+    function resetTransform() {
+      transform.value = _tigercatcore.createDefaultTransform.call(void 0, );
+      panState = _tigercatcore.createPanState.call(void 0, );
+      pinchState = _tigercatcore.createPinchState.call(void 0, );
+    }
+    const handleClose = () => {
+      emit("update:open", false);
+      emit("close");
+    };
+    const handlePrev = () => {
+      index.value = (index.value - 1 + props.images.length) % props.images.length;
+      resetTransform();
+      emit("update:currentIndex", index.value);
+    };
+    const handleNext = () => {
+      index.value = (index.value + 1) % props.images.length;
+      resetTransform();
+      emit("update:currentIndex", index.value);
+    };
+    const handleZoomIn = () => {
+      transform.value = {
+        ...transform.value,
+        scale: _tigercatcore.clampZoom.call(void 0, transform.value.scale + 0.25, props.minZoom, props.maxZoom)
+      };
+    };
+    const handleZoomOut = () => {
+      transform.value = {
+        ...transform.value,
+        scale: _tigercatcore.clampZoom.call(void 0, transform.value.scale - 0.25, props.minZoom, props.maxZoom)
+      };
+    };
+    const handleRotateLeft = () => {
+      transform.value = {
+        ...transform.value,
+        rotation: _tigercatcore.normalizeRotation.call(void 0, transform.value.rotation - 90)
+      };
+    };
+    const handleRotateRight = () => {
+      transform.value = {
+        ...transform.value,
+        rotation: _tigercatcore.normalizeRotation.call(void 0, transform.value.rotation + 90)
+      };
+    };
+    const handleWheel = (e) => {
+      if (!props.zoomable) return;
+      e.preventDefault();
+      const newScale = _tigercatcore.applyWheelZoom.call(void 0, transform.value.scale, e.deltaY, {
+        minZoom: props.minZoom,
+        maxZoom: props.maxZoom
+      });
+      transform.value = { ...transform.value, scale: newScale };
+    };
+    const handleMouseDown = (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      panState = _tigercatcore.startPan.call(void 0, 
+        e.clientX,
+        e.clientY,
+        transform.value.translateX,
+        transform.value.translateY
+      );
+    };
+    const handleMouseMove = (e) => {
+      if (!panState.isPanning) return;
+      const result = _tigercatcore.movePan.call(void 0, panState, e.clientX, e.clientY);
+      transform.value = { ...transform.value, ...result };
+    };
+    const handleMouseUp = () => {
+      panState = _tigercatcore.createPanState.call(void 0, );
+    };
+    const handleTouchStart = (e) => {
+      if (e.touches.length === 2 && props.zoomable) {
+        e.preventDefault();
+        pinchState = _tigercatcore.startPinch.call(void 0, e.touches[0], e.touches[1], transform.value.scale);
+      } else if (e.touches.length === 1) {
+        panState = _tigercatcore.startPan.call(void 0, 
+          e.touches[0].clientX,
+          e.touches[0].clientY,
+          transform.value.translateX,
+          transform.value.translateY
+        );
+      }
+    };
+    const handleTouchMove = (e) => {
+      if (e.touches.length === 2 && pinchState.isPinching) {
+        e.preventDefault();
+        const newScale = _tigercatcore.movePinch.call(void 0, 
+          pinchState,
+          e.touches[0],
+          e.touches[1],
+          props.minZoom,
+          props.maxZoom
+        );
+        transform.value = { ...transform.value, scale: newScale };
+      } else if (e.touches.length === 1 && panState.isPanning) {
+        const result = _tigercatcore.movePan.call(void 0, panState, e.touches[0].clientX, e.touches[0].clientY);
+        transform.value = { ...transform.value, ...result };
+      }
+    };
+    const handleTouchEnd = () => {
+      pinchState = _tigercatcore.createPinchState.call(void 0, );
+      panState = _tigercatcore.createPanState.call(void 0, );
+    };
+    const handleKeydown = (e) => {
+      if (!props.open) return;
+      switch (e.key) {
+        case "Escape":
+          handleClose();
+          break;
+        case "ArrowLeft":
+          handlePrev();
+          break;
+        case "ArrowRight":
+          handleNext();
+          break;
+      }
+    };
+    _vue.onMounted.call(void 0, () => {
+      document.addEventListener("keydown", handleKeydown);
+    });
+    _vue.onBeforeUnmount.call(void 0, () => {
+      document.removeEventListener("keydown", handleKeydown);
+    });
+    return () => {
+      if (!props.open || props.images.length === 0) return null;
+      const children = [];
+      if (props.showCounter && props.images.length > 1) {
+        children.push(
+          _vue.h.call(void 0, 
+            "div",
+            { class: _tigercatcore.imageViewerCounterClasses },
+            `${index.value + 1} / ${props.images.length}`
+          )
+        );
+      }
+      children.push(
+        _vue.h.call(void 0, 
+          "button",
+          {
+            class: _tigercatcore.imageViewerCloseBtnClasses,
+            onClick: handleClose,
+            "aria-label": "Close",
+            type: "button"
+          },
+          createSvgIcon(_tigercatcore.imageViewerIcons.close, "Close")
+        )
+      );
+      if (props.showNav && props.images.length > 1) {
+        children.push(
+          _vue.h.call(void 0, 
+            "button",
+            {
+              class: _tigercatcore.classNames.call(void 0, _tigercatcore.imageViewerNavBtnClasses, "left-4"),
+              onClick: handlePrev,
+              "aria-label": "Previous image",
+              type: "button"
+            },
+            createSvgIcon(_tigercatcore.imageViewerIcons.prev, "Previous")
+          ),
+          _vue.h.call(void 0, 
+            "button",
+            {
+              class: _tigercatcore.classNames.call(void 0, _tigercatcore.imageViewerNavBtnClasses, "right-4"),
+              onClick: handleNext,
+              "aria-label": "Next image",
+              type: "button"
+            },
+            createSvgIcon(_tigercatcore.imageViewerIcons.next, "Next")
+          )
+        );
+      }
+      children.push(
+        _vue.h.call(void 0, "img", {
+          class: _tigercatcore.imageViewerImgClasses,
+          src: props.images[index.value],
+          alt: `Image ${index.value + 1}`,
+          style: {
+            transform: _tigercatcore.getImageTransformStyle.call(void 0, transform.value)
+          },
+          draggable: false,
+          onWheel: handleWheel,
+          onMousedown: handleMouseDown,
+          onMousemove: handleMouseMove,
+          onMouseup: handleMouseUp,
+          onMouseleave: handleMouseUp,
+          onTouchstart: handleTouchStart,
+          onTouchmove: handleTouchMove,
+          onTouchend: handleTouchEnd,
+          onTouchcancel: handleTouchEnd
+        })
+      );
+      const toolbarButtons = [];
+      if (props.zoomable) {
+        toolbarButtons.push(
+          _vue.h.call(void 0, 
+            "button",
+            {
+              class: _tigercatcore.imageViewerToolbarBtnClasses,
+              onClick: handleZoomOut,
+              "aria-label": "Zoom out",
+              type: "button"
+            },
+            createSvgIcon(_tigercatcore.imageViewerIcons.zoomOut, "Zoom out")
+          ),
+          _vue.h.call(void 0, 
+            "button",
+            {
+              class: _tigercatcore.imageViewerToolbarBtnClasses,
+              onClick: handleZoomIn,
+              "aria-label": "Zoom in",
+              type: "button"
+            },
+            createSvgIcon(_tigercatcore.imageViewerIcons.zoomIn, "Zoom in")
+          )
+        );
+      }
+      if (props.rotatable) {
+        toolbarButtons.push(
+          _vue.h.call(void 0, 
+            "button",
+            {
+              class: _tigercatcore.imageViewerToolbarBtnClasses,
+              onClick: handleRotateLeft,
+              "aria-label": "Rotate left",
+              type: "button"
+            },
+            createSvgIcon(_tigercatcore.imageViewerIcons.rotateLeft, "Rotate left")
+          ),
+          _vue.h.call(void 0, 
+            "button",
+            {
+              class: _tigercatcore.imageViewerToolbarBtnClasses,
+              onClick: handleRotateRight,
+              "aria-label": "Rotate right",
+              type: "button"
+            },
+            createSvgIcon(_tigercatcore.imageViewerIcons.rotateRight, "Rotate right")
+          )
+        );
+      }
+      if (toolbarButtons.length > 0) {
+        children.push(_vue.h.call(void 0, "div", { class: _tigercatcore.imageViewerToolbarClasses }, toolbarButtons));
+      }
+      return _vue.h.call(void 0, 
+        "div",
+        {
+          ...attrs,
+          class: _tigercatcore.classNames.call(void 0, 
+            _tigercatcore.imageViewerBackdropClasses,
+            props.className,
+            _tigercatcore.coerceClassValue.call(void 0, attrs.class)
+          ),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Image viewer",
+          onClick: (e) => {
+            if (props.maskClosable && e.target === e.currentTarget) {
+              handleClose();
+            }
+          }
+        },
+        children
+      );
+    };
+  }
+});
+var ImageViewer_default = ImageViewer;
+
+
+
+
+exports.ImageViewer = ImageViewer; exports.ImageViewer_default = ImageViewer_default;

package/dist/{chunk-BUTNEKFD.js → chunk-W55GCQ2D.js}

@@ -1,12 +1,31 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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 chunk6DP7XE77_js = require('./chunk-6DP7XE77.js');
-var chunkPNKVD2UK_js = require('./chunk-PNKVD2UK.js');
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
+var _chunkX6FG4RPFjs = require('./chunk-X6FG4RPF.js');
 
+// src/components/Image.ts
+
+
+
+
+
+
+
+
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
 var IMAGE_GROUP_INJECTION_KEY = "tiger-image-group";
-var Image = vue.defineComponent({
+var Image = _vue.defineComponent.call(void 0, {
   name: "TigerImage",
   inheritAttrs: false,
   props: {
@@ -24,26 +43,26 @@ var Image = vue.defineComponent({
       default: void 0
     }
   },
-  emits: ["load", "error", "preview-open-change", "preview-visible-change"],
+  emits: ["load", "error", "preview-open-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);
+    const loading = _vue.ref.call(void 0, true);
+    const error = _vue.ref.call(void 0, false);
+    const actualSrc = _vue.ref.call(void 0, props.lazy ? "" : props.src);
+    const containerRef = _vue.ref.call(void 0, null);
+    const previewVisible = _vue.ref.call(void 0, false);
     let observer = null;
-    const group = vue.inject(IMAGE_GROUP_INJECTION_KEY, null);
-    const registeredIndex = vue.ref(-1);
-    vue.onMounted(() => {
+    const group = _vue.inject.call(void 0, IMAGE_GROUP_INJECTION_KEY, null);
+    const registeredIndex = _vue.ref.call(void 0, -1);
+    _vue.onMounted.call(void 0, () => {
       if (group && props.src) {
         registeredIndex.value = group.register(props.src);
       }
       if (props.lazy && containerRef.value) {
         observer = new IntersectionObserver(
           (entries) => {
-            if (entries[0]?.isIntersecting) {
+            if (_optionalChain([entries, 'access', _ => _[0], 'optionalAccess', _2 => _2.isIntersecting])) {
               actualSrc.value = props.src;
-              observer?.disconnect();
+              _optionalChain([observer, 'optionalAccess', _3 => _3.disconnect, 'call', _4 => _4()]);
               observer = null;
             }
           },
@@ -52,8 +71,8 @@ var Image = vue.defineComponent({
         observer.observe(containerRef.value);
       }
     });
-    vue.onBeforeUnmount(() => {
-      observer?.disconnect();
+    _vue.onBeforeUnmount.call(void 0, () => {
+      _optionalChain([observer, 'optionalAccess', _5 => _5.disconnect, 'call', _6 => _6()]);
       if (group && props.src) {
         group.unregister(props.src);
       }
@@ -79,34 +98,34 @@ var Image = vue.defineComponent({
         group.openPreview(registeredIndex.value >= 0 ? registeredIndex.value : 0);
       } else {
         previewVisible.value = true;
-        emit("preview-visible-change", true);
+        emit("preview-open-change", true);
       }
     };
-    const containerClasses = vue.computed(
-      () => tigercatCore.classNames(
-        tigercatCore.imageBaseClasses,
-        props.preview && tigercatCore.imagePreviewCursorClass,
+    const containerClasses = _vue.computed.call(void 0, 
+      () => _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.imageBaseClasses,
+        props.preview && _tigercatcore.imagePreviewCursorClass,
         props.className,
-        tigercatCore.coerceClassValue(attrs.class)
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
       )
     );
-    const containerStyle = vue.computed(() => {
+    const containerStyle = _vue.computed.call(void 0, () => {
       const base = {};
-      const w = tigercatCore.toCSSSize(props.width);
-      const ht = tigercatCore.toCSSSize(props.height);
+      const w = _tigercatcore.toCSSSize.call(void 0, props.width);
+      const ht = _tigercatcore.toCSSSize.call(void 0, props.height);
       if (w) base.width = w;
       if (ht) base.height = ht;
-      return tigercatCore.mergeStyleValues(attrs.style, props.style, base);
+      return _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style, base);
     });
-    const imgClasses = vue.computed(() => tigercatCore.getImageImgClasses(props.fit));
+    const imgClasses = _vue.computed.call(void 0, () => _tigercatcore.getImageImgClasses.call(void 0, 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(
+        content = slots.error ? slots.error() : _vue.h.call(void 0, "div", { class: _tigercatcore.imageErrorClasses }, [
+          _vue.h.call(void 0, 
             "svg",
             {
               class: "w-8 h-8",
@@ -116,18 +135,18 @@ var Image = vue.defineComponent({
               stroke: "currentColor"
             },
             [
-              vue.h("path", {
+              _vue.h.call(void 0, "path", {
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 "stroke-width": "1.5",
-                d: tigercatCore.imageErrorIconPath
+                d: _tigercatcore.imageErrorIconPath
               })
             ]
           )
         ]);
       } else if (loading.value && !actualSrc.value) {
-        content = slots.placeholder ? slots.placeholder() : vue.h("div", { class: tigercatCore.imageLoadingClasses }, [
-          vue.h(
+        content = slots.placeholder ? slots.placeholder() : _vue.h.call(void 0, "div", { class: _tigercatcore.imageLoadingClasses }, [
+          _vue.h.call(void 0, 
             "svg",
             {
               class: "w-8 h-8",
@@ -137,17 +156,17 @@ var Image = vue.defineComponent({
               stroke: "currentColor"
             },
             [
-              vue.h("path", {
+              _vue.h.call(void 0, "path", {
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 "stroke-width": "1.5",
-                d: tigercatCore.imageErrorIconPath
+                d: _tigercatcore.imageErrorIconPath
               })
             ]
           )
         ]);
       } else {
-        content = vue.h("img", {
+        content = _vue.h.call(void 0, "img", {
           src: actualSrc.value,
           alt: props.alt,
           class: imgClasses.value,
@@ -155,20 +174,16 @@ var Image = vue.defineComponent({
           onError: handleError
         });
       }
-      const previewEl = !group && previewVisible.value && props.src ? (() => {
-        const { ImagePreview } = (chunk6DP7XE77_js.init_ImagePreview(), chunkPNKVD2UK_js.__toCommonJS(chunk6DP7XE77_js.ImagePreview_exports));
-        return vue.h(ImagePreview, {
-          open: previewVisible.value,
-          images: [props.src],
-          currentIndex: 0,
-          "onUpdate:open": (val) => {
-            previewVisible.value = val;
-            emit("preview-open-change", val);
-            emit("preview-visible-change", val);
-          }
-        });
-      })() : null;
-      return vue.h(
+      const previewEl = !group && previewVisible.value && props.src ? _vue.h.call(void 0, _chunkX6FG4RPFjs.ImagePreview, {
+        open: previewVisible.value,
+        images: [props.src],
+        currentIndex: 0,
+        "onUpdate:open": (val) => {
+          previewVisible.value = val;
+          emit("preview-open-change", val);
+        }
+      }) : null;
+      return _vue.h.call(void 0, 
         "div",
         {
           ...forwardedAttrs,
@@ -193,6 +208,8 @@ var Image = vue.defineComponent({
 });
 var Image_default = Image;
 
-exports.IMAGE_GROUP_INJECTION_KEY = IMAGE_GROUP_INJECTION_KEY;
-exports.Image = Image;
-exports.Image_default = Image_default;
+
+
+
+
+exports.IMAGE_GROUP_INJECTION_KEY = IMAGE_GROUP_INJECTION_KEY; exports.Image = Image; exports.Image_default = Image_default;