@expcat/tigercat-vue 0.3.69 → 0.3.70

package/dist/chunk-53M2BTB5.mjs

@@ -0,0 +1,22 @@
+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);
+
+export { __esm, __export, __toCommonJS };

package/dist/chunk-7AFJ7TKW.js

@@ -0,0 +1,266 @@
+'use strict';
+
+var chunkPNKVD2UK_js = require('./chunk-PNKVD2UK.js');
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/ImagePreview.ts
+var ImagePreview_exports = {};
+chunkPNKVD2UK_js.__export(ImagePreview_exports, {
+  ImagePreview: () => exports.ImagePreview,
+  default: () => exports.ImagePreview_default
+});
+var svgIcon; exports.ImagePreview = void 0; exports.ImagePreview_default = void 0;
+var init_ImagePreview = chunkPNKVD2UK_js.__esm({
+  "src/components/ImagePreview.ts"() {
+    svgIcon = (d, cls = "w-5 h-5") => vue.h(
+      "svg",
+      {
+        class: cls,
+        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": "2",
+          d
+        })
+      ]
+    );
+    exports.ImagePreview = vue.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 = vue.ref(1);
+        const offsetX = vue.ref(0);
+        const offsetY = vue.ref(0);
+        const index = vue.ref(props.currentIndex);
+        const dragging = vue.ref(false);
+        const dragStart = vue.ref({ x: 0, y: 0, ox: 0, oy: 0 });
+        const resetTransform = () => {
+          scale.value = 1;
+          offsetX.value = 0;
+          offsetY.value = 0;
+        };
+        vue.watch(
+          () => props.currentIndex,
+          (val) => {
+            index.value = val;
+            resetTransform();
+          }
+        );
+        vue.watch(
+          () => props.visible,
+          (val) => {
+            if (val) {
+              resetTransform();
+              index.value = props.currentIndex;
+              document.body.style.overflow = "hidden";
+            } else {
+              document.body.style.overflow = "";
+            }
+          }
+        );
+        const navState = vue.computed(() => tigercatCore.getPreviewNavState(index.value, props.images.length));
+        const handleClose = () => {
+          emit("update:visible", false);
+        };
+        const handleZoomIn = () => {
+          scale.value = tigercatCore.clampScale(scale.value + props.scaleStep, props.minScale, props.maxScale);
+          emit("scale-change", scale.value);
+        };
+        const handleZoomOut = () => {
+          scale.value = tigercatCore.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 = tigercatCore.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;
+          }
+        };
+        vue.onMounted(() => {
+          document.addEventListener("keydown", handleKeyDown);
+        });
+        vue.onBeforeUnmount(() => {
+          document.removeEventListener("keydown", handleKeyDown);
+          document.body.style.overflow = "";
+        });
+        const transform = vue.computed(() => tigercatCore.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 = vue.h("div", {
+            class: tigercatCore.imagePreviewMaskClasses,
+            "aria-hidden": "true"
+          });
+          const img = vue.h("img", {
+            src: currentSrc,
+            class: tigercatCore.imagePreviewImgClasses,
+            style: { transform: transform.value },
+            alt: `Preview image ${index.value + 1}`,
+            draggable: false,
+            onMousedown: handleMouseDown,
+            onMousemove: handleMouseMove,
+            onMouseup: handleMouseUp,
+            onMouseleave: handleMouseUp
+          });
+          const closeBtn = vue.h(
+            "button",
+            {
+              class: tigercatCore.imagePreviewCloseBtnClasses,
+              onClick: handleClose,
+              "aria-label": "Close preview",
+              type: "button"
+            },
+            [svgIcon(tigercatCore.previewCloseIconPath)]
+          );
+          const toolbar = vue.h("div", { class: tigercatCore.imagePreviewToolbarClasses }, [
+            vue.h(
+              "button",
+              {
+                class: tigercatCore.imagePreviewToolbarBtnClasses,
+                onClick: handleZoomOut,
+                "aria-label": "Zoom out",
+                type: "button"
+              },
+              [svgIcon(tigercatCore.zoomOutIconPath)]
+            ),
+            vue.h(
+              "button",
+              {
+                class: tigercatCore.imagePreviewToolbarBtnClasses,
+                onClick: handleReset,
+                "aria-label": "Reset",
+                type: "button"
+              },
+              [svgIcon(tigercatCore.resetIconPath)]
+            ),
+            vue.h(
+              "button",
+              {
+                class: tigercatCore.imagePreviewToolbarBtnClasses,
+                onClick: handleZoomIn,
+                "aria-label": "Zoom in",
+                type: "button"
+              },
+              [svgIcon(tigercatCore.zoomInIconPath)]
+            ),
+            navState.value.counter ? vue.h("span", { class: tigercatCore.imagePreviewCounterClasses }, navState.value.counter) : null
+          ]);
+          const prevBtn = props.images.length > 1 ? vue.h(
+            "button",
+            {
+              class: tigercatCore.classNames(tigercatCore.imagePreviewNavBtnClasses, "left-4"),
+              onClick: handlePrev,
+              disabled: !navState.value.hasPrev,
+              "aria-label": "Previous image",
+              type: "button"
+            },
+            [svgIcon(tigercatCore.prevIconPath)]
+          ) : null;
+          const nextBtn = props.images.length > 1 ? vue.h(
+            "button",
+            {
+              class: tigercatCore.classNames(tigercatCore.imagePreviewNavBtnClasses, "right-4"),
+              onClick: handleNext,
+              disabled: !navState.value.hasNext,
+              "aria-label": "Next image",
+              type: "button"
+            },
+            [svgIcon(tigercatCore.nextIconPath)]
+          ) : null;
+          const wrapper = vue.h(
+            "div",
+            {
+              class: tigercatCore.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 vue.h(vue.Teleport, { to: "body" }, [wrapper]);
+        };
+      }
+    });
+    exports.ImagePreview_default = exports.ImagePreview;
+  }
+});
+
+exports.ImagePreview_exports = ImagePreview_exports;
+exports.init_ImagePreview = init_ImagePreview;

package/dist/chunk-GNKXBRXH.js

@@ -0,0 +1,189 @@
+'use strict';
+
+var chunkW36SYMVH_js = require('./chunk-W36SYMVH.js');
+var chunkK2U3FEL7_js = require('./chunk-K2U3FEL7.js');
+var chunkDELTFEEJ_js = require('./chunk-DELTFEEJ.js');
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+var CropUpload = vue.defineComponent({
+  name: "TigerCropUpload",
+  inheritAttrs: false,
+  props: {
+    accept: { type: String, default: "image/*" },
+    disabled: { type: Boolean, default: false },
+    maxSize: { type: Number, default: void 0 },
+    cropperProps: {
+      type: Object,
+      default: void 0
+    },
+    modalTitle: { type: String, default: "\u88C1\u526A\u56FE\u7247" },
+    modalWidth: { type: Number, default: 520 },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["crop-complete", "error"],
+  setup(props, { slots, emit, attrs }) {
+    const fileInputRef = vue.ref(null);
+    const modalVisible = vue.ref(false);
+    const imageSrc = vue.ref("");
+    const cropperRef = vue.ref(null);
+    const cropping = vue.ref(false);
+    const handleTriggerClick = () => {
+      if (props.disabled) return;
+      fileInputRef.value?.click();
+    };
+    const handleFileChange = (e) => {
+      const input = e.target;
+      const file = input.files?.[0];
+      if (!file) return;
+      if (props.maxSize && file.size > props.maxSize) {
+        emit("error", new Error(`File size exceeds maximum of ${props.maxSize} bytes`));
+        input.value = "";
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (ev) => {
+        imageSrc.value = ev.target?.result;
+        modalVisible.value = true;
+      };
+      reader.readAsDataURL(file);
+      input.value = "";
+    };
+    const handleConfirm = async () => {
+      if (!cropperRef.value) return;
+      cropping.value = true;
+      try {
+        const result = await cropperRef.value.getCropResult();
+        emit("crop-complete", result);
+        modalVisible.value = false;
+      } catch (err) {
+        emit("error", err);
+      } finally {
+        cropping.value = false;
+      }
+    };
+    const handleCancel = () => {
+      modalVisible.value = false;
+      imageSrc.value = "";
+    };
+    const triggerClasses = vue.computed(
+      () => tigercatCore.classNames(
+        props.disabled ? tigercatCore.cropUploadTriggerDisabledClasses : tigercatCore.cropUploadTriggerClasses,
+        props.className,
+        tigercatCore.coerceClassValue(attrs.class)
+      )
+    );
+    const triggerStyle = vue.computed(
+      () => tigercatCore.mergeStyleValues(attrs.style, props.style)
+    );
+    return () => {
+      const forwardedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
+      );
+      const fileInput = vue.h("input", {
+        ref: fileInputRef,
+        type: "file",
+        accept: props.accept,
+        style: { display: "none" },
+        onChange: handleFileChange
+      });
+      const trigger = slots.default ? vue.h(
+        "div",
+        {
+          ...forwardedAttrs,
+          class: triggerClasses.value,
+          style: triggerStyle.value,
+          onClick: handleTriggerClick,
+          role: "button",
+          tabindex: props.disabled ? -1 : 0,
+          "aria-label": "Select image to crop and upload",
+          "aria-disabled": props.disabled ? "true" : void 0,
+          onKeydown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleTriggerClick();
+            }
+          }
+        },
+        slots.default()
+      ) : vue.h(
+        "div",
+        {
+          ...forwardedAttrs,
+          class: triggerClasses.value,
+          style: triggerStyle.value,
+          onClick: handleTriggerClick,
+          role: "button",
+          tabindex: props.disabled ? -1 : 0,
+          "aria-label": "Select image to crop and upload",
+          "aria-disabled": props.disabled ? "true" : void 0,
+          onKeydown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleTriggerClick();
+            }
+          }
+        },
+        [
+          vue.h(
+            "svg",
+            {
+              class: "w-5 h-5",
+              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": "2",
+                d: tigercatCore.uploadPlusIconPath
+              })
+            ]
+          ),
+          vue.h("span", null, "\u9009\u62E9\u56FE\u7247")
+        ]
+      );
+      const modal = vue.h(
+        chunkW36SYMVH_js.Modal,
+        {
+          visible: modalVisible.value,
+          size: "lg",
+          title: props.modalTitle,
+          closable: true,
+          maskClosable: false,
+          showDefaultFooter: false,
+          "onUpdate:visible": (val) => {
+            if (!val) handleCancel();
+          }
+        },
+        {
+          default: () => imageSrc.value ? vue.h(chunkK2U3FEL7_js.ImageCropper, {
+            ref: cropperRef,
+            src: imageSrc.value,
+            ...props.cropperProps
+          }) : null,
+          footer: ({ cancel }) => vue.h("div", { class: tigercatCore.modalFooterClasses }, [
+            vue.h(chunkDELTFEEJ_js.Button, { variant: "secondary", onClick: handleCancel }, { default: () => "\u53D6\u6D88" }),
+            vue.h(
+              chunkDELTFEEJ_js.Button,
+              { onClick: handleConfirm, loading: cropping.value },
+              { default: () => "\u786E\u8BA4\u88C1\u526A" }
+            )
+          ])
+        }
+      );
+      return vue.h("div", { class: "tiger-crop-upload inline-block" }, [fileInput, trigger, modal]);
+    };
+  }
+});
+var CropUpload_default = CropUpload;
+
+exports.CropUpload = CropUpload;
+exports.CropUpload_default = CropUpload_default;

package/dist/chunk-HTMTOXUO.mjs

@@ -0,0 +1,186 @@
+import { Modal } from './chunk-P47EXOAW.mjs';
+import { ImageCropper } from './chunk-T77L326M.mjs';
+import { Button } from './chunk-D6MR5YRE.mjs';
+import { defineComponent, ref, computed, h } from 'vue';
+import { classNames, cropUploadTriggerDisabledClasses, cropUploadTriggerClasses, coerceClassValue, mergeStyleValues, uploadPlusIconPath, modalFooterClasses } from '@expcat/tigercat-core';
+
+var CropUpload = defineComponent({
+  name: "TigerCropUpload",
+  inheritAttrs: false,
+  props: {
+    accept: { type: String, default: "image/*" },
+    disabled: { type: Boolean, default: false },
+    maxSize: { type: Number, default: void 0 },
+    cropperProps: {
+      type: Object,
+      default: void 0
+    },
+    modalTitle: { type: String, default: "\u88C1\u526A\u56FE\u7247" },
+    modalWidth: { type: Number, default: 520 },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["crop-complete", "error"],
+  setup(props, { slots, emit, attrs }) {
+    const fileInputRef = ref(null);
+    const modalVisible = ref(false);
+    const imageSrc = ref("");
+    const cropperRef = ref(null);
+    const cropping = ref(false);
+    const handleTriggerClick = () => {
+      if (props.disabled) return;
+      fileInputRef.value?.click();
+    };
+    const handleFileChange = (e) => {
+      const input = e.target;
+      const file = input.files?.[0];
+      if (!file) return;
+      if (props.maxSize && file.size > props.maxSize) {
+        emit("error", new Error(`File size exceeds maximum of ${props.maxSize} bytes`));
+        input.value = "";
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (ev) => {
+        imageSrc.value = ev.target?.result;
+        modalVisible.value = true;
+      };
+      reader.readAsDataURL(file);
+      input.value = "";
+    };
+    const handleConfirm = async () => {
+      if (!cropperRef.value) return;
+      cropping.value = true;
+      try {
+        const result = await cropperRef.value.getCropResult();
+        emit("crop-complete", result);
+        modalVisible.value = false;
+      } catch (err) {
+        emit("error", err);
+      } finally {
+        cropping.value = false;
+      }
+    };
+    const handleCancel = () => {
+      modalVisible.value = false;
+      imageSrc.value = "";
+    };
+    const triggerClasses = computed(
+      () => classNames(
+        props.disabled ? cropUploadTriggerDisabledClasses : cropUploadTriggerClasses,
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const triggerStyle = computed(
+      () => mergeStyleValues(attrs.style, props.style)
+    );
+    return () => {
+      const forwardedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
+      );
+      const fileInput = h("input", {
+        ref: fileInputRef,
+        type: "file",
+        accept: props.accept,
+        style: { display: "none" },
+        onChange: handleFileChange
+      });
+      const trigger = slots.default ? h(
+        "div",
+        {
+          ...forwardedAttrs,
+          class: triggerClasses.value,
+          style: triggerStyle.value,
+          onClick: handleTriggerClick,
+          role: "button",
+          tabindex: props.disabled ? -1 : 0,
+          "aria-label": "Select image to crop and upload",
+          "aria-disabled": props.disabled ? "true" : void 0,
+          onKeydown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleTriggerClick();
+            }
+          }
+        },
+        slots.default()
+      ) : h(
+        "div",
+        {
+          ...forwardedAttrs,
+          class: triggerClasses.value,
+          style: triggerStyle.value,
+          onClick: handleTriggerClick,
+          role: "button",
+          tabindex: props.disabled ? -1 : 0,
+          "aria-label": "Select image to crop and upload",
+          "aria-disabled": props.disabled ? "true" : void 0,
+          onKeydown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleTriggerClick();
+            }
+          }
+        },
+        [
+          h(
+            "svg",
+            {
+              class: "w-5 h-5",
+              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: uploadPlusIconPath
+              })
+            ]
+          ),
+          h("span", null, "\u9009\u62E9\u56FE\u7247")
+        ]
+      );
+      const modal = h(
+        Modal,
+        {
+          visible: modalVisible.value,
+          size: "lg",
+          title: props.modalTitle,
+          closable: true,
+          maskClosable: false,
+          showDefaultFooter: false,
+          "onUpdate:visible": (val) => {
+            if (!val) handleCancel();
+          }
+        },
+        {
+          default: () => imageSrc.value ? h(ImageCropper, {
+            ref: cropperRef,
+            src: imageSrc.value,
+            ...props.cropperProps
+          }) : null,
+          footer: ({ cancel }) => h("div", { class: modalFooterClasses }, [
+            h(Button, { variant: "secondary", onClick: handleCancel }, { default: () => "\u53D6\u6D88" }),
+            h(
+              Button,
+              { onClick: handleConfirm, loading: cropping.value },
+              { default: () => "\u786E\u8BA4\u88C1\u526A" }
+            )
+          ])
+        }
+      );
+      return h("div", { class: "tiger-crop-upload inline-block" }, [fileInput, trigger, modal]);
+    };
+  }
+});
+var CropUpload_default = CropUpload;
+
+export { CropUpload, CropUpload_default };