@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-4JH6QUWR.mjs

@@ -0,0 +1,408 @@
+import {
+  IMAGE_GROUP_INJECTION_KEY
+} from "./chunk-P7TCGBAE.mjs";
+import {
+  ImagePreview
+} from "./chunk-NVL4UWPJ.mjs";
+import {
+  usePopup
+} from "./chunk-OZZKYZD6.mjs";
+import {
+  renderVueOverlayTeleport
+} from "./chunk-VFRB5L7W.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Image.ts
+import {
+  defineComponent,
+  h,
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  inject,
+  useId
+} from "vue";
+import {
+  applyImageLoadError,
+  applyImageLoadSuccess,
+  classNames,
+  coerceClassValue,
+  createImageLoadState,
+  formatImagePreviewAriaLabel,
+  getImageImgClasses,
+  getImageLabels,
+  imageBaseClasses,
+  imageErrorClasses,
+  imageErrorIconPath,
+  imageFrameClasses,
+  imageLoadingClasses,
+  imageLoadingOverlayClasses,
+  imageLoadingSpinnerClasses,
+  imageLoadingSpinnerPath,
+  imagePreviewCursorClass,
+  imagePreviewHostClasses,
+  isImageHoverPreviewEnabled,
+  mergeStyleValues,
+  resetImageLoadState,
+  resolveImageHoverPlacement,
+  resolveImagePreviewEnabled,
+  resolveImagePreviewSrc,
+  toCSSSize
+} from "@expcat/tigercat-core";
+function invokeListener(handler, event) {
+  if (typeof handler === "function") {
+    handler(event);
+    return;
+  }
+  if (Array.isArray(handler)) {
+    for (const fn of handler) {
+      if (typeof fn === "function") fn(event);
+    }
+  }
+}
+function renderErrorIcon() {
+  return 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
+      })
+    ]
+  );
+}
+function renderLoadingSpinner() {
+  return h(
+    "svg",
+    {
+      class: imageLoadingSpinnerClasses,
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      "aria-hidden": true
+    },
+    [
+      h("circle", {
+        class: "opacity-25",
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: "currentColor",
+        "stroke-width": "4",
+        fill: "none"
+      }),
+      h("path", {
+        class: "opacity-75",
+        fill: "currentColor",
+        d: imageLoadingSpinnerPath
+      })
+    ]
+  );
+}
+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 },
+    previewTrigger: {
+      type: String,
+      default: "click"
+    },
+    lazy: { type: Boolean, default: false },
+    srcSet: { type: String, default: void 0 },
+    sizes: { type: String, default: void 0 },
+    crossOrigin: {
+      type: String,
+      default: void 0
+    },
+    decoding: { type: String, default: void 0 },
+    referrerPolicy: { type: String, default: void 0 },
+    fetchPriority: { type: String, default: void 0 },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["load", "error", "preview-open-change", "click", "keydown", "focus", "blur"],
+  setup(props, { slots, emit, attrs, expose }) {
+    const config = useTigerConfig();
+    const loadState = ref(createImageLoadState(props.src, props.lazy));
+    const containerRef = ref(null);
+    const imgRef = ref(null);
+    const previewVisible = ref(false);
+    const inView = ref(!props.lazy);
+    let observer = null;
+    const instanceId = `tiger-image-${useId()}`;
+    const group = inject(IMAGE_GROUP_INJECTION_KEY, null);
+    const previewEnabled = computed(() => resolveImagePreviewEnabled(props.preview, group?.preview));
+    const hoverPreviewEnabled = computed(
+      () => isImageHoverPreviewEnabled(previewEnabled.value, props.previewTrigger, Boolean(group))
+    );
+    const clickPreviewEnabled = computed(() => previewEnabled.value);
+    const hoverPlacement = computed(() => resolveImageHoverPlacement(config.value.direction));
+    const floatingPopupProps = {
+      get trigger() {
+        return "hover";
+      },
+      get placement() {
+        return hoverPlacement.value;
+      },
+      get offset() {
+        return 12;
+      },
+      get disabled() {
+        return !hoverPreviewEnabled.value;
+      }
+    };
+    const {
+      currentVisible: hoverVisible,
+      triggerRef: hoverTriggerRef,
+      floatingRef: hoverFloatingRef,
+      floatingStyles: hoverFloatingStyles,
+      floatingClasses: hoverFloatingClasses,
+      positioned: hoverPositioned,
+      overlayTarget: hoverOverlayTarget,
+      setVisible: setHoverVisible,
+      triggerHandlers: hoverTriggerHandlers
+    } = usePopup({
+      props: floatingPopupProps,
+      emit: () => {
+      }
+    });
+    const setContainerRef = (el) => {
+      containerRef.value = el;
+      hoverTriggerRef.value = el;
+    };
+    const disconnectObserver = () => {
+      observer?.disconnect();
+      observer = null;
+    };
+    const observeLazy = () => {
+      disconnectObserver();
+      if (!props.lazy || inView.value || !containerRef.value) return;
+      observer = new IntersectionObserver(
+        (entries) => {
+          if (!entries[0]?.isIntersecting) return;
+          inView.value = true;
+          loadState.value = resetImageLoadState(props.src, true, true);
+          disconnectObserver();
+        },
+        { threshold: 0.01 }
+      );
+      observer.observe(containerRef.value);
+    };
+    watch(
+      () => [props.src, props.lazy],
+      () => {
+        if (!props.lazy) {
+          inView.value = true;
+          loadState.value = resetImageLoadState(props.src, false, true);
+          disconnectObserver();
+          return;
+        }
+        loadState.value = resetImageLoadState(props.src, true, inView.value);
+        if (!inView.value) observeLazy();
+      }
+    );
+    watch(
+      () => [group, props.src, props.alt],
+      () => {
+        if (!group) return;
+        if (!props.src) {
+          group.unregister(instanceId);
+          return;
+        }
+        group.register({ id: instanceId, src: props.src, alt: props.alt });
+      },
+      { immediate: true }
+    );
+    watch(containerRef, () => {
+      if (props.lazy && !inView.value) observeLazy();
+    });
+    onMounted(() => {
+      if (props.lazy && !inView.value) observeLazy();
+    });
+    onBeforeUnmount(() => {
+      disconnectObserver();
+      group?.unregister(instanceId);
+    });
+    expose({
+      img: imgRef
+    });
+    const handleLoad = (event) => {
+      loadState.value = applyImageLoadSuccess(loadState.value);
+      emit("load", event);
+    };
+    const handleError = (event) => {
+      loadState.value = applyImageLoadError(loadState.value, props.fallbackSrc);
+      emit("error", event);
+    };
+    const handleClick = (event) => {
+      invokeListener(attrs.onClick, event);
+      emit("click", event);
+      if (event.defaultPrevented || !clickPreviewEnabled.value) return;
+      if (group) {
+        group.openPreview(instanceId);
+        return;
+      }
+      previewVisible.value = true;
+      emit("preview-open-change", true);
+    };
+    const handleKeydown = (event) => {
+      invokeListener(attrs.onKeydown, event);
+      emit("keydown", event);
+    };
+    const handleFocus = (event) => {
+      invokeListener(attrs.onFocus, event);
+      emit("focus", event);
+      if (hoverPreviewEnabled.value) setHoverVisible(true);
+    };
+    const handleBlur = (event) => {
+      invokeListener(attrs.onBlur, event);
+      emit("blur", event);
+      if (hoverPreviewEnabled.value) setHoverVisible(false);
+    };
+    const containerClasses = computed(
+      () => classNames(
+        previewEnabled.value ? imagePreviewHostClasses : imageBaseClasses,
+        previewEnabled.value && 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 ?? "cover"));
+    return () => {
+      const forwardedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(
+          ([key]) => key !== "class" && key !== "style" && key !== "onClick" && key !== "onKeydown" && key !== "onFocus" && key !== "onBlur" && key !== "onFocusin" && key !== "onFocusout"
+        )
+      );
+      const labels = getImageLabels(config.value.locale);
+      const previewSrc = resolveImagePreviewSrc(loadState.value, props.src);
+      const previewName = formatImagePreviewAriaLabel(
+        labels.previewAriaLabel,
+        props.alt,
+        labels.previewFallbackAlt
+      );
+      const loadingPlaceholder = slots.placeholder ? slots.placeholder() : [
+        h(
+          "div",
+          {
+            class: loadState.value.actualSrc ? imageLoadingOverlayClasses : imageLoadingClasses
+          },
+          [renderLoadingSpinner()]
+        )
+      ];
+      const errorPlaceholder = slots.error ? slots.error() : [h("div", { class: imageErrorClasses }, [renderErrorIcon()])];
+      let content;
+      if (loadState.value.error) {
+        content = errorPlaceholder;
+      } else if (!loadState.value.actualSrc) {
+        content = loadingPlaceholder;
+      } else {
+        content = [
+          h("img", {
+            ref: imgRef,
+            src: loadState.value.actualSrc,
+            alt: previewEnabled.value ? "" : props.alt,
+            class: imgClasses.value,
+            srcset: props.srcSet,
+            sizes: props.sizes,
+            crossorigin: props.crossOrigin,
+            decoding: props.decoding,
+            referrerpolicy: props.referrerPolicy,
+            fetchpriority: props.fetchPriority,
+            onLoad: handleLoad,
+            onError: handleError
+          }),
+          loadState.value.loading ? loadingPlaceholder : null
+        ];
+      }
+      const previewEl = !group && previewVisible.value && previewSrc ? h(ImagePreview, {
+        open: previewVisible.value,
+        images: [{ src: previewSrc, alt: props.alt }],
+        currentIndex: 0,
+        "onUpdate:open": (val) => {
+          previewVisible.value = val;
+          emit("preview-open-change", val);
+        }
+      }) : null;
+      const hoverPreviewEl = hoverPreviewEnabled.value && hoverVisible.value && previewSrc ? renderVueOverlayTeleport(
+        h(
+          "div",
+          {
+            ref: hoverFloatingRef,
+            style: hoverFloatingStyles.value,
+            "data-positioned": hoverPositioned.value,
+            "aria-hidden": true,
+            class: classNames(
+              hoverFloatingClasses.value,
+              "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] p-1 shadow-lg"
+            )
+          },
+          [
+            h("img", {
+              src: previewSrc,
+              alt: "",
+              class: "block max-w-[16rem] max-h-[16rem] object-contain"
+            })
+          ]
+        ),
+        hoverOverlayTarget.value
+      ) : null;
+      const hostTag = previewEnabled.value ? "button" : "div";
+      const inner = previewEnabled.value ? h("span", { class: imageFrameClasses }, content) : content;
+      return h(
+        hostTag,
+        {
+          ...forwardedAttrs,
+          ref: setContainerRef,
+          class: containerClasses.value,
+          style: containerStyle.value,
+          type: previewEnabled.value ? "button" : void 0,
+          "aria-label": previewEnabled.value ? previewName : void 0,
+          ...hoverPreviewEnabled.value ? hoverTriggerHandlers.value : {},
+          onClick: handleClick,
+          onKeydown: handleKeydown,
+          onFocus: handleFocus,
+          onBlur: handleBlur
+        },
+        [inner, previewEl, hoverPreviewEl]
+      );
+    };
+  }
+});
+var Image_default = Image;
+
+export {
+  Image,
+  Image_default
+};