@transsionfe/semi-ui-vue 0.0.1

package/lib/es/components/image/Preview.vue.js

@@ -0,0 +1,276 @@
+import { defineComponent as Y, ref as h, useSlots as T, computed as v, watch as R, reactive as ee, onMounted as re, nextTick as M, onUpdated as te, onBeforeUnmount as ne, createElementBlock as F, openBlock as b, Fragment as p, createElementVNode as se, createVNode as le, normalizeStyle as ie, normalizeClass as oe, renderList as ae, createBlock as ue, resolveDynamicComponent as ce, mergeProps as de, isVNode as L, Comment as he, h as A } from "vue";
+import ve from "classnames";
+import { cssClasses as pe } from "@douyinfe/semi-foundation/image/constants";
+import fe from "@douyinfe/semi-foundation/image/previewFoundation";
+import { providePreviewContext as ge } from "./context.js";
+import me from "./PreviewInner.vue.js";
+import { isEqual as Z, isObject as Ce } from "lodash-es";
+import { getUuidShort as xe } from "@douyinfe/semi-foundation/utils/uuid";
+import { useFoundation as Ie } from "../../_utils/useFoundation.js";
+const ye = ["id"], Ne = /* @__PURE__ */ Y({
+  name: "Preview",
+  __name: "Preview",
+  props: {
+    visible: { type: Boolean, default: !1 },
+    src: { default: () => [] },
+    previewTitle: {},
+    currentIndex: { default: 0 },
+    defaultCurrentIndex: { default: 0 },
+    defaultVisible: { type: Boolean, default: !1 },
+    maskClosable: { type: Boolean, default: !0 },
+    closable: { type: Boolean, default: !0 },
+    zoomStep: {},
+    infinite: { type: Boolean },
+    showTooltip: { type: Boolean },
+    closeOnEsc: { type: Boolean },
+    prevTip: {},
+    nextTip: {},
+    zoomInTip: {},
+    zoomOutTip: {},
+    rotateTip: {},
+    downloadTip: {},
+    adaptiveTip: {},
+    originTip: {},
+    lazyLoad: { type: Boolean, default: !0 },
+    lazyLoadMargin: { default: "0px 100px 100px 0px" },
+    preLoad: { type: Boolean },
+    preLoadGap: {},
+    viewerVisibleDelay: {},
+    disableDownload: { type: Boolean },
+    zIndex: {},
+    children: {},
+    crossOrigin: {},
+    maxZoom: {},
+    minZoom: {},
+    previewCls: {},
+    previewStyle: {},
+    renderLeftIcon: {},
+    renderRightIcon: {},
+    renderCloseIcon: {},
+    renderHeader: {},
+    renderPreviewMenu: {},
+    getPopupContainer: {},
+    onVisibleChange: {},
+    onChange: {},
+    onClose: {},
+    onZoomIn: {},
+    onZoomOut: {},
+    onPrev: {},
+    onNext: {},
+    onRatioChange: {},
+    onRotateLeft: {},
+    onDownload: {},
+    onDownloadError: {},
+    setDownloadName: {},
+    className: {},
+    style: {}
+  },
+  emits: ["visibleChange", "change"],
+  setup($, { expose: q, emit: G }) {
+    const P = pe.PREFIX, s = $, S = G, _ = h(null), d = h(null), B = h(xe({ prefix: "semi-image-preview-group", length: 4 })), u = h({
+      currentIndex: s.currentIndex ?? s.defaultCurrentIndex ?? 0,
+      visible: s.visible ?? s.defaultVisible ?? !1
+    }), m = h([]), z = h([]), C = h([]), N = T(), x = (e) => {
+      const t = [];
+      for (const r of e)
+        if (r) {
+          if (Array.isArray(r))
+            t.push(...x(r));
+          else if (L(r))
+            if (r.type === p) {
+              if (r.children) {
+                const i = Array.isArray(r.children) ? r.children : [r.children];
+                t.push(...x(i));
+              }
+            } else r.type !== he && t.push(r);
+        }
+      return t;
+    }, K = (e) => e ? (e == null ? void 0 : e.isSemiImage) === !0 ? !0 : ((e == null ? void 0 : e.__name) || (e == null ? void 0 : e.name) || (e == null ? void 0 : e.__file)) === "Image" : !1, f = (e, t = 0) => {
+      const r = [], i = [], c = [];
+      let o = t;
+      for (const n of e) {
+        if (!n) {
+          r.push(n);
+          continue;
+        }
+        if (Array.isArray(n)) {
+          const a = f(n, o);
+          r.push(...a.children), i.push(...a.srcList), c.push(...a.titles), o = a.nextIndex;
+          continue;
+        }
+        if (!L(n)) {
+          r.push(n);
+          continue;
+        }
+        if (n.type === p) {
+          if (n.children) {
+            const a = Array.isArray(n.children) ? n.children : [n.children], l = f(a, o);
+            l.children.length > 0 ? (r.push(A(p, {}, l.children)), i.push(...l.srcList), c.push(...l.titles), o = l.nextIndex) : r.push(n);
+          } else
+            r.push(n);
+          continue;
+        }
+        const y = n.type, w = n.props || {};
+        if (K(y)) {
+          const { src: a, preview: l } = w;
+          if (l !== !1) {
+            const g = Ce(l) ? l.src ?? a : a;
+            g && (i.push(g), c.push(l == null ? void 0 : l.previewTitle));
+            const Q = A(y, { ...w, imageID: o++ }, n.children);
+            r.push(Q);
+          } else
+            r.push(n);
+          continue;
+        }
+        if (n.children) {
+          const a = Array.isArray(n.children) ? n.children : [n.children], l = f(a, o);
+          if (l.srcList.length > 0 || l.children.length !== a.length) {
+            const g = A(y, w, l.children);
+            r.push(g), i.push(...l.srcList), c.push(...l.titles), o = l.nextIndex;
+          } else
+            r.push(n);
+        } else
+          r.push(n);
+      }
+      return {
+        children: r,
+        srcList: i,
+        titles: c,
+        nextIndex: o
+      };
+    }, I = v(() => {
+      if (!N.default) return [];
+      try {
+        const e = N.default();
+        return x(Array.isArray(e) ? e : [e]);
+      } catch {
+        return [];
+      }
+    }), E = (e) => e.map((t) => L(t) ? t.key ?? null : null), U = v(() => {
+      const e = I.value, t = f(e, 0);
+      return Z(t.srcList, m.value) || (m.value = t.srcList, z.value = t.titles), t.children;
+    }), V = v(() => [...Array.isArray(s.src) ? s.src : typeof s.src == "string" ? [s.src] : [], ...m.value]), j = v(() => ve(`${P}-preview-group`, s.className)), W = {
+      getProps: () => s,
+      getProp: (e) => s[e],
+      getState: (e) => u.value[e],
+      getStates: () => u.value,
+      setState: (e, t) => {
+        Object.assign(u.value, e), t == null || t();
+      },
+      getContext: () => null,
+      getContexts: () => ({}),
+      getCache: () => null,
+      getCaches: () => ({}),
+      setCache: () => {
+      },
+      stopPropagation: (e) => e == null ? void 0 : e.stopPropagation(),
+      persistEvent: () => {
+      }
+    }, { foundation: D } = Ie(fe, W), O = (e) => {
+      D.handleVisibleChange(e), S("visibleChange", e);
+    }, H = v(() => {
+      const { previewCls: e, previewStyle: t, onVisibleChange: r, onChange: i, ...c } = s;
+      return {
+        ...c,
+        className: e,
+        style: t,
+        onVisibleChange: (n) => {
+          O(n), r && r(n);
+        },
+        onChange: i
+      };
+    }), X = (e) => {
+      D.handleCurrentIndexChange(e), S("change", e);
+    }, k = () => {
+      if (!s.lazyLoad) return;
+      d.value && d.value.disconnect(), d.value = new IntersectionObserver(
+        (t) => {
+          t.forEach((r) => {
+            var o, n;
+            const i = r.target, c = (o = i.dataset) == null ? void 0 : o.src;
+            r.isIntersecting && c && (i.src = c, i.removeAttribute("data-src"), (n = d.value) == null || n.unobserve(i));
+          });
+        },
+        {
+          root: document.querySelector(`#${B.value}`),
+          rootMargin: s.lazyLoadMargin
+        }
+      ), document.querySelectorAll(`.${P}-img`).forEach((t) => {
+        var r;
+        return (r = d.value) == null ? void 0 : r.observe(t);
+      });
+    };
+    R(
+      () => s.currentIndex,
+      (e) => {
+        e !== void 0 && e !== u.value.currentIndex && (u.value.currentIndex = e);
+      }
+    ), R(
+      () => s.visible,
+      (e) => {
+        e !== void 0 && e !== u.value.visible && (u.value.visible = e);
+      }
+    );
+    const J = ee({
+      isGroup: !0,
+      get previewSrc() {
+        return V.value;
+      },
+      get titles() {
+        return z.value;
+      },
+      get currentIndex() {
+        return u.value.currentIndex;
+      },
+      get visible() {
+        return u.value.visible;
+      },
+      get lazyLoad() {
+        return s.lazyLoad;
+      },
+      get previewObserver() {
+        return d.value;
+      },
+      setCurrentIndex: X,
+      handleVisibleChange: O,
+      get setDownloadName() {
+        return s.setDownloadName;
+      }
+    });
+    return ge(J), re(() => {
+      M(() => {
+        const e = I.value;
+        C.value = E(e), k();
+      });
+    }), te(() => {
+      s.lazyLoad && M(() => {
+        const e = I.value, t = E(e);
+        Z(C.value, t) || (C.value = t, k());
+      });
+    }), ne(() => {
+      d.value && (d.value.disconnect(), d.value = null);
+    }), q({
+      previewRef: _
+    }), (e, t) => (b(), F(p, null, [
+      se("div", {
+        id: B.value,
+        class: oe(j.value),
+        style: ie(s.style)
+      }, [
+        (b(!0), F(p, null, ae(U.value, (r, i) => (b(), ue(ce(r), { key: i }))), 128))
+      ], 14, ye),
+      le(me, de({
+        ref_key: "previewRef",
+        ref: _
+      }, H.value, {
+        src: V.value,
+        currentIndex: u.value.currentIndex,
+        visible: u.value.visible
+      }), null, 16, ["src", "currentIndex", "visible"])
+    ], 64));
+  }
+});
+export {
+  Ne as default
+};
+//# sourceMappingURL=Preview.vue.js.map

package/lib/es/components/image/Preview.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Preview.vue.js","sources":["../../../../src/components/image/Preview.vue"],"sourcesContent":["<template>\n    <div :id=\"previewGroupId\" :class=\"groupCls\" :style=\"props.style\">\n        <template v-for=\"(child, index) in renderedChildren\" :key=\"index\">\n            <component :is=\"child\" />\n        </template>\n    </div>\n    <PreviewInner\n        ref=\"previewRef\"\n        v-bind=\"previewInnerProps\"\n        :src=\"finalSrcList\"\n        :currentIndex=\"state.currentIndex\"\n        :visible=\"state.visible\"\n    />\n</template>\n\n<script setup lang=\"ts\">\nimport {\n    ref,\n    computed,\n    watch,\n    onMounted,\n    onBeforeUnmount,\n    onUpdated,\n    nextTick,\n    VNode,\n    useSlots,\n    Fragment,\n    reactive,\n    isVNode,\n    Comment,\n    h,\n} from 'vue';\nimport cls from 'classnames';\nimport { cssClasses } from '@douyinfe/semi-foundation/image/constants';\nimport PreviewFoundation from '@douyinfe/semi-foundation/image/previewFoundation';\nimport { PreviewProps, PreviewState } from './interface';\nimport { useFoundation } from '../_utils';\nimport { providePreviewContext } from './context';\nimport PreviewInner from './PreviewInner.vue';\nimport { isObject, isEqual, omit } from 'lodash-es';\nimport { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';\n\ndefineOptions({\n    name: 'Preview',\n});\n\nconst prefixCls = cssClasses.PREFIX;\n\nconst props = withDefaults(defineProps<PreviewProps>(), {\n    src: () => [],\n    lazyLoad: true,\n    lazyLoadMargin: '0px 100px 100px 0px',\n    closable: true,\n    maskClosable: true,\n    visible: false,\n    currentIndex: 0,\n    defaultCurrentIndex: 0,\n    defaultVisible: false,\n});\n\nconst emit = defineEmits<{\n    visibleChange: [visible: boolean];\n    change: [index: number];\n}>();\n\n// Refs\nconst previewRef = ref<any>(null);\nconst previewObserver = ref<IntersectionObserver | null>(null);\nconst previewGroupId = ref<string>(getUuidShort({ prefix: 'semi-image-preview-group', length: 4 }));\n\n// State\nconst state = ref<PreviewState>({\n    currentIndex: props.currentIndex ?? props.defaultCurrentIndex ?? 0,\n    visible: props.visible ?? props.defaultVisible ?? false,\n});\n\nconst srcListInChildren = ref<string[]>([]);\nconst titles = ref<VNode[]>([]);\nconst prevChildrenKeys = ref<(string | number | symbol | null)[]>([]);\n\nconst slots = useSlots();\n\n/**\n * 扁平化子节点，处理数组和 Fragment\n */\nconst flattenChildren = (children: any[]): any[] => {\n    const result: any[] = [];\n    for (const child of children) {\n        if (!child) continue;\n        if (Array.isArray(child)) {\n            result.push(...flattenChildren(child));\n        } else if (isVNode(child)) {\n            if (child.type === Fragment) {\n                // Fragment 需要展开其子节点\n                if (child.children) {\n                    const fragmentChildren = Array.isArray(child.children) ? child.children : [child.children];\n                    result.push(...flattenChildren(fragmentChildren));\n                }\n            } else if (child.type !== Comment) {\n                result.push(child);\n            }\n        }\n    }\n    return result;\n};\n\n/**\n * 检查是否是 Image 组件\n * 优先使用 isSemiImage 标识（与 React 版本一致，最稳定）\n */\nconst isImageComponent = (componentType: any): boolean => {\n    if (!componentType) return false;\n    // 优先检查 isSemiImage（与 React 版本的 child.type.isSemiImage 一致）\n    if ((componentType as any)?.isSemiImage === true) {\n        return true;\n    }\n    // 备用检查：组件名称\n    const componentName =\n        (componentType as any)?.__name || (componentType as any)?.name || (componentType as any)?.__file;\n    return componentName === 'Image';\n};\n\n/**\n * 处理子组件，识别 Image 组件并收集预览信息\n * 参考 React 版本的 loopImageIndex 实现，保持逻辑一致性\n */\nconst processChildren = (\n    children: any[],\n    index: number = 0\n): { children: any[]; srcList: string[]; titles: VNode[]; nextIndex: number } => {\n    const processedChildren: any[] = [];\n    const srcList: string[] = [];\n    const titleList: VNode[] = [];\n    let currentIndex = index;\n\n    for (const child of children) {\n        if (!child) {\n            processedChildren.push(child);\n            continue;\n        }\n\n        // 处理数组类型的子节点\n        if (Array.isArray(child)) {\n            const result = processChildren(child, currentIndex);\n            processedChildren.push(...result.children);\n            srcList.push(...result.srcList);\n            titleList.push(...result.titles);\n            currentIndex = result.nextIndex;\n            continue;\n        }\n\n        // 处理 VNode\n        if (!isVNode(child)) {\n            processedChildren.push(child);\n            continue;\n        }\n\n        // 处理 Fragment\n        if (child.type === Fragment) {\n            if (child.children) {\n                const fragmentChildren = Array.isArray(child.children) ? child.children : [child.children];\n                const result = processChildren(fragmentChildren, currentIndex);\n                // 只有当 Fragment 有处理后的子节点时才重新创建 Fragment\n                if (result.children.length > 0) {\n                    processedChildren.push(h(Fragment, {}, result.children));\n                    srcList.push(...result.srcList);\n                    titleList.push(...result.titles);\n                    currentIndex = result.nextIndex;\n                } else {\n                    processedChildren.push(child);\n                }\n            } else {\n                processedChildren.push(child);\n            }\n            continue;\n        }\n\n        const componentType = child.type;\n        const childProps = child.props || {};\n\n        // 检查是否是 Image 组件\n        if (isImageComponent(componentType)) {\n            const { src, preview } = childProps;\n\n            // 只有当 preview 不为 false 时才处理\n            if (preview !== false) {\n                const previewSrc = isObject(preview) ? ((preview as any).src ?? src) : src;\n                if (previewSrc) {\n                    srcList.push(previewSrc);\n                    titleList.push((preview as any)?.previewTitle);\n                }\n                // 克隆 VNode 并添加 imageID（类似 React 的 cloneElement）\n                const clonedChild = h(componentType as any, { ...childProps, imageID: currentIndex++ }, child.children);\n                processedChildren.push(clonedChild);\n            } else {\n                processedChildren.push(child);\n            }\n            continue;\n        }\n\n        // 非 Image 组件：如果有子节点，递归处理\n        if (child.children) {\n            const childChildren = Array.isArray(child.children) ? child.children : [child.children];\n            const result = processChildren(childChildren, currentIndex);\n\n            // 如果子节点被处理过，需要重新创建父组件（类似 React 的 cloneElement）\n            if (result.srcList.length > 0 || result.children.length !== childChildren.length) {\n                const newChild = h(componentType as any, childProps, result.children);\n                processedChildren.push(newChild);\n                srcList.push(...result.srcList);\n                titleList.push(...result.titles);\n                currentIndex = result.nextIndex;\n            } else {\n                processedChildren.push(child);\n            }\n        } else {\n            processedChildren.push(child);\n        }\n    }\n\n    return {\n        children: processedChildren,\n        srcList,\n        titles: titleList,\n        nextIndex: currentIndex,\n    };\n};\n\nconst validChildren = computed(() => {\n    if (!slots.default) return [];\n    try {\n        const children = slots.default();\n        return flattenChildren(Array.isArray(children) ? children : [children]);\n    } catch (e) {\n        return [];\n    }\n});\n\n/**\n * 获取子组件的 keys，用于判断子组件是否变化\n * 参考 React 版本的 componentDidUpdate 逻辑\n */\nconst getChildrenKeys = (children: any[]): (string | number | symbol | null)[] => {\n    return children.map((child) => {\n        if (!isVNode(child)) return null;\n        return child.key ?? null;\n    });\n};\n\nconst renderedChildren = computed(() => {\n    const children = validChildren.value;\n    const result = processChildren(children, 0);\n\n    // 更新 srcList 和 titles\n    if (!isEqual(result.srcList, srcListInChildren.value)) {\n        srcListInChildren.value = result.srcList;\n        titles.value = result.titles;\n    }\n\n    return result.children;\n});\n\nconst finalSrcList = computed(() => {\n    const srcArr = Array.isArray(props.src) ? props.src : typeof props.src === 'string' ? [props.src] : [];\n    return [...srcArr, ...srcListInChildren.value];\n});\n\nconst groupCls = computed(() => {\n    return cls(`${prefixCls}-preview-group`, props.className);\n});\n\nconst adapter = {\n    getProps: () => props,\n    getProp: (key: string) => (props as any)[key],\n    getState: (key: string) => (state.value as any)[key],\n    getStates: () => state.value,\n    setState: (states: Partial<PreviewState>, cb?: () => void) => {\n        Object.assign(state.value, states);\n        cb?.();\n    },\n    getContext: () => null,\n    getContexts: () => ({}),\n    getCache: () => null,\n    getCaches: () => ({}),\n    setCache: () => {},\n    stopPropagation: (e: Event) => e?.stopPropagation(),\n    persistEvent: () => {},\n};\n\nconst { foundation } = useFoundation(PreviewFoundation, adapter);\nconst handleVisibleChange = (newVisible: boolean) => {\n    foundation.handleVisibleChange(newVisible);\n    emit('visibleChange', newVisible);\n};\n\nconst previewInnerProps = computed(() => {\n    const { previewCls, previewStyle, onVisibleChange, onChange, ...restProps } = props;\n    const handleVisibleChangeWrapper = (visible: boolean) => {\n        handleVisibleChange(visible);\n        if (onVisibleChange) {\n            onVisibleChange(visible);\n        }\n    };\n    return {\n        ...restProps,\n        className: previewCls,\n        style: previewStyle,\n        onVisibleChange: handleVisibleChangeWrapper,\n        onChange: onChange,\n    };\n});\n\nconst handleCurrentIndexChange = (index: number) => {\n    foundation.handleCurrentIndexChange(index);\n    emit('change', index);\n};\n\n/**\n * 初始化或更新图片懒加载观察器\n * 参考 React 版本的 observerImages 实现\n */\nconst observerImages = () => {\n    if (!props.lazyLoad) return;\n\n    // 如果观察器已存在，先断开连接\n    if (previewObserver.value) {\n        previewObserver.value.disconnect();\n    }\n\n    // 创建新的观察器\n    previewObserver.value = new IntersectionObserver(\n        (entries) => {\n            entries.forEach((item) => {\n                const target = item.target as HTMLElement;\n                const src = target.dataset?.src;\n                if (item.isIntersecting && src) {\n                    (target as HTMLImageElement).src = src;\n                    target.removeAttribute('data-src');\n                    previewObserver.value?.unobserve(target);\n                }\n            });\n        },\n        {\n            root: document.querySelector(`#${previewGroupId.value}`),\n            rootMargin: props.lazyLoadMargin,\n        }\n    );\n\n    // 观察所有图片元素\n    const allImgElements = document.querySelectorAll(`.${prefixCls}-img`);\n    allImgElements.forEach((item) => previewObserver.value?.observe(item));\n};\n\n/**\n * 监听 currentIndex 变化\n * 参考 React 版本的 getDerivedStateFromProps\n * 只有当 props 中明确包含 currentIndex 时才更新（受控组件）\n *\n * 注意：Vue 3 的 props 是 Proxy 对象，'in' 操作符可以正常工作\n * 但为了更准确，我们同时检查值是否与当前状态不同\n */\nwatch(\n    () => props.currentIndex,\n    (newIndex) => {\n        // 检查是否是受控组件：props 中包含 currentIndex 且值发生变化\n        // 与 React 版本的 \"currentIndex\" in props 逻辑一致\n        if (newIndex !== undefined && newIndex !== state.value.currentIndex) {\n            state.value.currentIndex = newIndex;\n        }\n    }\n);\n\n/**\n * 监听 visible 变化\n * 参考 React 版本的 getDerivedStateFromProps\n * 只有当 props 中明确包含 visible 时才更新（受控组件）\n */\nwatch(\n    () => props.visible,\n    (newVisible) => {\n        // 检查是否是受控组件：props 中包含 visible 且值发生变化\n        // 与 React 版本的 \"visible\" in props 逻辑一致\n        if (newVisible !== undefined && newVisible !== state.value.visible) {\n            state.value.visible = newVisible;\n        }\n    }\n);\n\nconst previewContextValue = reactive({\n    isGroup: true,\n    get previewSrc() {\n        return finalSrcList.value;\n    },\n    get titles() {\n        return titles.value;\n    },\n    get currentIndex() {\n        return state.value.currentIndex;\n    },\n    get visible() {\n        return state.value.visible;\n    },\n    get lazyLoad() {\n        return props.lazyLoad;\n    },\n    get previewObserver() {\n        return previewObserver.value;\n    },\n    setCurrentIndex: handleCurrentIndexChange,\n    handleVisibleChange: handleVisibleChange,\n    get setDownloadName() {\n        return props.setDownloadName;\n    },\n});\n\nprovidePreviewContext(previewContextValue);\n\nonMounted(() => {\n    nextTick(() => {\n        // 记录初始子组件的 keys\n        const children = validChildren.value;\n        prevChildrenKeys.value = getChildrenKeys(children);\n        observerImages();\n    });\n});\n\nonUpdated(() => {\n    // 参考 React 版本的 componentDidUpdate 逻辑\n    // 只在懒加载启用且子组件 keys 变化时才更新观察器，避免重复观察\n    if (props.lazyLoad) {\n        nextTick(() => {\n            const children = validChildren.value;\n            const currChildrenKeys = getChildrenKeys(children);\n\n            // 只有当子组件的 keys 发生变化时才重新观察\n            if (!isEqual(prevChildrenKeys.value, currChildrenKeys)) {\n                prevChildrenKeys.value = currChildrenKeys;\n                observerImages();\n            }\n        });\n    }\n});\n\nonBeforeUnmount(() => {\n    if (previewObserver.value) {\n        previewObserver.value.disconnect();\n        previewObserver.value = null;\n    }\n});\n\ndefineExpose({\n    previewRef,\n});\n</script>\n"],"names":["prefixCls","cssClasses","props","__props","emit","__emit","previewRef","ref","previewObserver","previewGroupId","getUuidShort","state","srcListInChildren","titles","prevChildrenKeys","slots","useSlots","flattenChildren","children","result","child","isVNode","Fragment","fragmentChildren","Comment","isImageComponent","componentType","processChildren","index","processedChildren","srcList","titleList","currentIndex","h","childProps","src","preview","previewSrc","isObject","clonedChild","childChildren","newChild","validChildren","computed","getChildrenKeys","renderedChildren","isEqual","finalSrcList","groupCls","cls","adapter","key","states","cb","foundation","useFoundation","PreviewFoundation","handleVisibleChange","newVisible","previewInnerProps","previewCls","previewStyle","onVisibleChange","onChange","restProps","visible","handleCurrentIndexChange","observerImages","entries","item","target","_a","_b","watch","newIndex","previewContextValue","reactive","providePreviewContext","onMounted","nextTick","onUpdated","currChildrenKeys","onBeforeUnmount","__expose","_createElementVNode","_normalizeStyle","_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_createVNode","PreviewInner","_mergeProps"],"mappings":"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"}

package/lib/es/components/image/PreviewFooter.vue.js

@@ -0,0 +1,202 @@
+import { defineComponent as E, ref as j, computed as m, createElementBlock as v, openBlock as l, normalizeClass as W, createBlock as w, resolveDynamicComponent as C, Fragment as X, renderList as q, h as t } from "vue";
+import P from "classnames";
+import { cssClasses as G } from "@douyinfe/semi-foundation/image/constants";
+import H from "@douyinfe/semi-foundation/image/previewFooterFoundation";
+import r from "../tooltip/Tooltip.vue.js";
+import x from "../divider/Divider.vue.js";
+import J from "../slider/Slider.vue.js";
+import { throttle as K } from "lodash-es";
+import { useFoundation as Q } from "../../_utils/useFoundation.js";
+import U from "../icons/icons/IconChevronLeft.js";
+import Y from "../icons/icons/IconChevronRight.js";
+import oo from "../icons/icons/IconMinus.js";
+import eo from "../icons/icons/IconPlus.js";
+import to from "../icons/icons/IconRealSizeStroked.js";
+import no from "../icons/icons/IconWindowAdaptionStroked.js";
+import ao from "../icons/icons/IconRotate.js";
+import io from "../icons/icons/IconDownload.js";
+const To = /* @__PURE__ */ E({
+  name: "PreviewFooter",
+  __name: "PreviewFooter",
+  props: {
+    curPage: {},
+    totalNum: {},
+    disabledPrev: { type: Boolean },
+    disabledNext: { type: Boolean },
+    disableDownload: { type: Boolean, default: !1 },
+    className: {},
+    zoom: {},
+    ratio: {},
+    prevTip: {},
+    nextTip: {},
+    zoomInTip: {},
+    zoomOutTip: {},
+    rotateTip: {},
+    downloadTip: {},
+    adaptiveTip: {},
+    originTip: {},
+    showTooltip: { type: Boolean, default: !1 },
+    zIndex: {},
+    onZoomIn: {},
+    onZoomOut: {},
+    onPrev: {},
+    onNext: {},
+    onAdjustRatio: {},
+    onRotate: {},
+    onDownload: {},
+    renderPreviewMenu: {},
+    max: { default: 500 },
+    min: { default: 10 },
+    step: { default: 10 }
+  },
+  emits: ["prev", "next", "zoomIn", "zoomOut", "rotate", "adjustRatio", "download"],
+  setup(u, { expose: b, emit: I }) {
+    const a = `${G.PREFIX}-preview-footer`, o = u, i = I, c = j(null), k = {
+      getProps: () => o,
+      getProp: (e) => o[e],
+      getState: () => null,
+      getStates: () => ({}),
+      setState: () => {
+      },
+      getContext: () => null,
+      getContexts: () => ({}),
+      getCache: () => null,
+      getCaches: () => ({}),
+      setCache: () => {
+      },
+      stopPropagation: (e) => e == null ? void 0 : e.stopPropagation(),
+      persistEvent: () => {
+      }
+    }, { foundation: s } = Q(H, k), p = () => {
+      s.changeSliderValue("minus");
+    }, f = () => {
+      s.changeSliderValue("plus");
+    }, g = () => {
+      s.handleRotate("left"), i("rotate", "left");
+    }, T = () => {
+      s.handleRotate("right"), i("rotate", "right");
+    }, z = K((e) => {
+      const n = Array.isArray(e) ? e[0] : e;
+      s.handleValueChange(n);
+    }, 50), d = () => {
+      s.handleRatioClick();
+    }, R = () => {
+      const e = t(U, {
+        size: "large",
+        class: o.disabledPrev ? `${a}-disabled` : "",
+        onClick: o.disabledPrev ? void 0 : () => i("prev")
+      });
+      return o.showTooltip ? t(r, { content: o.prevTip || "上一张" }, { default: () => e }) : e;
+    }, y = () => {
+      const e = t(Y, {
+        size: "large",
+        class: o.disabledNext ? `${a}-disabled` : "",
+        onClick: o.disabledNext ? void 0 : () => i("next")
+      });
+      return o.showTooltip ? t(r, { content: o.nextTip || "下一张" }, { default: () => e }) : e;
+    }, $ = () => {
+      const e = o.zoom === o.min, n = t(oo, {
+        size: "large",
+        class: e ? `${a}-disabled` : "",
+        onClick: e ? void 0 : p
+      });
+      return o.showTooltip ? t(r, { content: o.zoomOutTip || "缩小" }, { default: () => n }) : n;
+    }, N = () => {
+      const e = o.zoom === o.max, n = t(eo, {
+        size: "large",
+        class: e ? `${a}-disabled` : "",
+        onClick: e ? void 0 : f
+      });
+      return o.showTooltip ? t(r, { content: o.zoomInTip || "放大" }, { default: () => n }) : n;
+    }, M = () => {
+      const e = o.ratio === "adaptation" ? t(to, { size: "large", class: `${a}-gap`, onClick: d }) : t(no, {
+        size: "large",
+        class: `${a}-gap`,
+        onClick: d
+      }), n = o.ratio === "adaptation" ? o.originTip || "原始尺寸" : o.adaptiveTip || "适应窗口";
+      return o.showTooltip ? t(r, { content: n }, { default: () => e }) : e;
+    }, S = () => {
+      const e = t(ao, {
+        size: "large",
+        onClick: g
+      });
+      return o.showTooltip ? t(r, { content: o.rotateTip || "旋转" }, { default: () => e }) : e;
+    }, D = () => {
+      const e = t(io, {
+        size: "large",
+        class: P(`${a}-gap`, {
+          [`${a}-disabled`]: o.disableDownload
+        }),
+        onClick: o.disableDownload ? void 0 : () => i("download")
+      });
+      return o.showTooltip ? t(r, { content: o.downloadTip || "下载" }, { default: () => e }) : e;
+    }, F = () => t("div", { class: `${a}-page`, key: "info" }, `${o.curPage}/${o.totalNum}`), _ = () => t(J, {
+      key: "slider",
+      value: o.zoom,
+      min: o.min,
+      max: o.max,
+      step: o.step,
+      tipFormatter: (e) => {
+        const n = Array.isArray(e) ? e[0] : e;
+        return typeof n == "number" ? `${n}%` : String(n || "");
+      },
+      tooltipVisible: o.showTooltip ? void 0 : !1,
+      onChange: z
+    }), h = () => [
+      R(),
+      F(),
+      y(),
+      $(),
+      _(),
+      N(),
+      M(),
+      S(),
+      D()
+    ], Z = () => {
+      const e = h();
+      return e.splice(3, 0, t(x, { layout: "vertical", key: "divider-first" })), e.splice(8, 0, t(x, { layout: "vertical", key: "divider-second" })), e;
+    }, B = m(() => Z()), O = m(() => {
+      if (!o.renderPreviewMenu) return null;
+      const e = {
+        min: o.min,
+        max: o.max,
+        step: o.step,
+        curPage: o.curPage,
+        totalNum: o.totalNum,
+        zoom: o.zoom,
+        ratio: o.ratio,
+        disabledPrev: o.disabledPrev,
+        disabledNext: o.disabledNext,
+        disableDownload: o.disableDownload,
+        disableZoomIn: o.zoom === o.max,
+        disableZoomOut: o.zoom === o.min,
+        onDownload: () => i("download"),
+        onNext: () => i("next"),
+        onPrev: () => i("prev"),
+        onZoomIn: () => f(),
+        onZoomOut: () => p(),
+        onRatioClick: d,
+        onRotateLeft: g,
+        onRotateRight: T,
+        menuItems: h()
+      };
+      return o.renderPreviewMenu(e);
+    }), A = m(() => P(a, `${a}-wrapper`, o.className, {
+      [`${a}-content`]: !o.renderPreviewMenu
+    }));
+    return b({
+      footerRef: c,
+      $el: c
+    }), (e, n) => (l(), v("section", {
+      ref_key: "footerRef",
+      ref: c,
+      class: W(A.value)
+    }, [
+      u.renderPreviewMenu ? (l(), w(C(O.value), { key: 0 })) : (l(!0), v(X, { key: 1 }, q(B.value, (V, L) => (l(), w(C(V), { key: L }))), 128))
+    ], 2));
+  }
+});
+export {
+  To as default
+};
+//# sourceMappingURL=PreviewFooter.vue.js.map

package/lib/es/components/image/PreviewFooter.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewFooter.vue.js","sources":["../../../../src/components/image/PreviewFooter.vue"],"sourcesContent":["<template>\n    <section ref=\"footerRef\" :class=\"menuCls\">\n        <template v-if=\"renderPreviewMenu\">\n            <component :is=\"customMenu\" />\n        </template>\n        <template v-else>\n            <template v-for=\"(item, index) in defaultMenu\" :key=\"index\">\n                <component :is=\"item\" />\n            </template>\n        </template>\n    </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, h, VNode, ref, Fragment } from 'vue';\nimport cls from 'classnames';\nimport { cssClasses } from '@douyinfe/semi-foundation/image/constants';\nimport PreviewFooterFoundation, { PreviewFooterAdapter } from '@douyinfe/semi-foundation/image/previewFooterFoundation';\nimport { FooterProps, MenuProps, RatioType } from './interface';\nimport { useFoundation } from '../_utils';\nimport {\n    IconChevronLeft,\n    IconChevronRight,\n    IconMinus,\n    IconPlus,\n    IconRotate,\n    IconDownload,\n    IconWindowAdaptionStroked,\n    IconRealSizeStroked,\n} from '../icons';\nimport Tooltip from '../tooltip/Tooltip.vue';\nimport Divider from '../divider/Divider.vue';\nimport Slider from '../slider/Slider.vue';\nimport { throttle } from 'lodash-es';\n\ndefineOptions({\n    name: 'PreviewFooter',\n});\n\nconst prefixCls = cssClasses.PREFIX;\nconst footerPrefixCls = `${prefixCls}-preview-footer`;\n\nconst props = withDefaults(defineProps<FooterProps>(), {\n    min: 10,\n    max: 500,\n    step: 10,\n    showTooltip: false,\n    disableDownload: false,\n});\n\nconst emit = defineEmits<{\n    prev: [];\n    next: [];\n    zoomIn: [zoom: number];\n    zoomOut: [zoom: number];\n    rotate: [direction: string];\n    adjustRatio: [type: RatioType];\n    download: [];\n}>();\n\nconst footerRef = ref<HTMLElement | null>(null);\n\nconst adapter: PreviewFooterAdapter<FooterProps> = {\n    getProps: () => props,\n    getProp: (key: string) => (props as any)[key],\n    getState: () => null,\n    getStates: () => ({}),\n    setState: () => {},\n    getContext: () => null,\n    getContexts: () => ({}),\n    getCache: () => null,\n    getCaches: () => ({}),\n    setCache: () => {},\n    stopPropagation: (e: Event) => e?.stopPropagation(),\n    persistEvent: () => {},\n};\n\nconst { foundation } = useFoundation(PreviewFooterFoundation, adapter);\nconst handleMinusClick = () => {\n    foundation.changeSliderValue('minus');\n};\n\nconst handlePlusClick = () => {\n    foundation.changeSliderValue('plus');\n};\n\nconst handleRotateLeft = () => {\n    foundation.handleRotate('left');\n    emit('rotate', 'left');\n};\n\nconst handleRotateRight = () => {\n    foundation.handleRotate('right');\n    emit('rotate', 'right');\n};\n\nconst handleSlideChange = throttle((value: number | number[]) => {\n    const numValue = Array.isArray(value) ? value[0] : value;\n    foundation.handleValueChange(numValue);\n}, 50);\n\nconst handleRatioClick = () => {\n    foundation.handleRatioClick();\n};\n\nconst getIconChevronLeft = () => {\n    const icon = h(IconChevronLeft, {\n        size: 'large',\n        class: props.disabledPrev ? `${footerPrefixCls}-disabled` : '',\n        onClick: !props.disabledPrev ? () => emit('prev') : undefined,\n    });\n    return props.showTooltip ? h(Tooltip, { content: props.prevTip || '上一张' }, { default: () => icon }) : icon;\n};\n\nconst getIconChevronRight = () => {\n    const icon = h(IconChevronRight, {\n        size: 'large',\n        class: props.disabledNext ? `${footerPrefixCls}-disabled` : '',\n        onClick: !props.disabledNext ? () => emit('next') : undefined,\n    });\n    return props.showTooltip ? h(Tooltip, { content: props.nextTip || '下一张' }, { default: () => icon }) : icon;\n};\n\nconst getIconMinus = () => {\n    const disabledZoomOut = props.zoom === props.min;\n    const icon = h(IconMinus, {\n        size: 'large',\n        class: disabledZoomOut ? `${footerPrefixCls}-disabled` : '',\n        onClick: !disabledZoomOut ? handleMinusClick : undefined,\n    });\n    return props.showTooltip ? h(Tooltip, { content: props.zoomOutTip || '缩小' }, { default: () => icon }) : icon;\n};\n\nconst getIconPlus = () => {\n    const disabledZoomIn = props.zoom === props.max;\n    const icon = h(IconPlus, {\n        size: 'large',\n        class: disabledZoomIn ? `${footerPrefixCls}-disabled` : '',\n        onClick: !disabledZoomIn ? handlePlusClick : undefined,\n    });\n    return props.showTooltip ? h(Tooltip, { content: props.zoomInTip || '放大' }, { default: () => icon }) : icon;\n};\n\nconst getIconRatio = () => {\n    const icon =\n        props.ratio === 'adaptation'\n            ? h(IconRealSizeStroked, { size: 'large', class: `${footerPrefixCls}-gap`, onClick: handleRatioClick })\n            : h(IconWindowAdaptionStroked, {\n                  size: 'large',\n                  class: `${footerPrefixCls}-gap`,\n                  onClick: handleRatioClick,\n              });\n    const content = props.ratio === 'adaptation' ? props.originTip || '原始尺寸' : props.adaptiveTip || '适应窗口';\n    return props.showTooltip ? h(Tooltip, { content }, { default: () => icon }) : icon;\n};\n\nconst getIconRotate = () => {\n    const icon = h(IconRotate, {\n        size: 'large',\n        onClick: handleRotateLeft,\n    });\n    return props.showTooltip ? h(Tooltip, { content: props.rotateTip || '旋转' }, { default: () => icon }) : icon;\n};\n\nconst getIconDownload = () => {\n    const icon = h(IconDownload, {\n        size: 'large',\n        class: cls(`${footerPrefixCls}-gap`, {\n            [`${footerPrefixCls}-disabled`]: props.disableDownload,\n        }),\n        onClick: !props.disableDownload ? () => emit('download') : undefined,\n    });\n    return props.showTooltip ? h(Tooltip, { content: props.downloadTip || '下载' }, { default: () => icon }) : icon;\n};\n\nconst getNumberInfo = () => {\n    return h('div', { class: `${footerPrefixCls}-page`, key: 'info' }, `${props.curPage}/${props.totalNum}`);\n};\n\nconst getSlider = () => {\n    return h(Slider, {\n        key: 'slider',\n        value: props.zoom,\n        min: props.min,\n        max: props.max,\n        step: props.step,\n        tipFormatter: (v: string | number | boolean | null | (string | number | boolean | null)[]) => {\n            const numValue = Array.isArray(v) ? v[0] : v;\n            return typeof numValue === 'number' ? `${numValue}%` : String(numValue || '');\n        },\n        tooltipVisible: props.showTooltip ? undefined : false,\n        onChange: handleSlideChange,\n    });\n};\n\nconst getMenu = () => [\n    getIconChevronLeft(),\n    getNumberInfo(),\n    getIconChevronRight(),\n    getIconMinus(),\n    getSlider(),\n    getIconPlus(),\n    getIconRatio(),\n    getIconRotate(),\n    getIconDownload(),\n];\n\nconst getFooterMenu = () => {\n    const menuItems = getMenu();\n    menuItems.splice(3, 0, h(Divider, { layout: 'vertical', key: 'divider-first' }));\n    menuItems.splice(8, 0, h(Divider, { layout: 'vertical', key: 'divider-second' }));\n    return menuItems;\n};\n\nconst defaultMenu = computed(() => {\n    return getFooterMenu();\n});\n\nconst customMenu = computed(() => {\n    if (!props.renderPreviewMenu) return null;\n    const menuProps: MenuProps = {\n        min: props.min,\n        max: props.max,\n        step: props.step,\n        curPage: props.curPage,\n        totalNum: props.totalNum,\n        zoom: props.zoom,\n        ratio: props.ratio,\n        disabledPrev: props.disabledPrev,\n        disabledNext: props.disabledNext,\n        disableDownload: props.disableDownload,\n        disableZoomIn: props.zoom === props.max,\n        disableZoomOut: props.zoom === props.min,\n        onDownload: () => emit('download'),\n        onNext: () => emit('next'),\n        onPrev: () => emit('prev'),\n        onZoomIn: () => handlePlusClick(),\n        onZoomOut: () => handleMinusClick(),\n        onRatioClick: handleRatioClick,\n        onRotateLeft: handleRotateLeft,\n        onRotateRight: handleRotateRight,\n        menuItems: getMenu() as any,\n    };\n    return props.renderPreviewMenu!(menuProps);\n});\n\nconst menuCls = computed(() => {\n    return cls(footerPrefixCls, `${footerPrefixCls}-wrapper`, props.className, {\n        [`${footerPrefixCls}-content`]: !props.renderPreviewMenu,\n    });\n});\n\ndefineExpose({\n    footerRef: footerRef,\n    $el: footerRef,\n});\n</script>\n"],"names":["footerPrefixCls","cssClasses","props","__props","emit","__emit","footerRef","ref","adapter","key","foundation","useFoundation","PreviewFooterFoundation","handleMinusClick","handlePlusClick","handleRotateLeft","handleRotateRight","handleSlideChange","throttle","value","numValue","handleRatioClick","getIconChevronLeft","icon","h","IconChevronLeft","Tooltip","getIconChevronRight","IconChevronRight","getIconMinus","disabledZoomOut","IconMinus","getIconPlus","disabledZoomIn","IconPlus","getIconRatio","IconRealSizeStroked","IconWindowAdaptionStroked","content","getIconRotate","IconRotate","getIconDownload","IconDownload","cls","getNumberInfo","getSlider","Slider","v","getMenu","getFooterMenu","menuItems","Divider","defaultMenu","computed","customMenu","menuProps","menuCls","__expose","_createElementBlock","_openBlock","_createBlock","_resolveDynamicComponent","_Fragment","_renderList","item","index"],"mappings":"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"}

package/lib/es/components/image/PreviewHeader.vue.js

@@ -0,0 +1,66 @@
+import { defineComponent as N, ref as b, computed as r, h as i, createElementBlock as d, openBlock as n, normalizeClass as u, createElementVNode as k, createCommentVNode as f, normalizeStyle as H, createBlock as p, resolveDynamicComponent as C } from "vue";
+import P from "classnames";
+import { cssClasses as B } from "@douyinfe/semi-foundation/image/constants";
+import { usePreviewContext as R } from "./context.js";
+import S from "../icons/icons/IconClose.js";
+const g = /* @__PURE__ */ N({
+  name: "PreviewHeader",
+  __name: "PreviewHeader",
+  props: {
+    closable: { type: Boolean, default: !0 },
+    renderHeader: {},
+    title: {},
+    titleStyle: {},
+    className: {},
+    onClose: {},
+    renderCloseIcon: {}
+  },
+  emits: ["close"],
+  setup(l, { expose: v, emit: y }) {
+    const s = `${B.PREFIX}-preview-header`, t = l, I = y, o = R(), c = b(null), h = r(() => P(s, t.className)), a = r(() => o && o.titles && typeof o.currentIndex == "number" ? o.titles[o.currentIndex] : t.title), m = r(() => {
+      if (t.renderHeader) {
+        const e = t.renderHeader(a.value);
+        return e && typeof e == "object" && "type" in e ? e : i("span", e || "");
+      }
+      return a.value ? i("span", a.value) : null;
+    }), x = r(() => {
+      if (t.renderCloseIcon) {
+        const e = typeof t.renderCloseIcon == "function" ? t.renderCloseIcon() : t.renderCloseIcon;
+        if (e && typeof e == "object" && "type" in e)
+          return e;
+        console.warn(
+          "[Semi ImagePreview] RenderCloseIcon should be a valid vue element or a function that returns a vue element"
+        );
+      }
+      return i(S);
+    }), w = (e) => {
+      I("close", e);
+    };
+    return v({
+      headerRef: c,
+      $el: c
+    }), (e, $) => (n(), d("section", {
+      ref_key: "headerRef",
+      ref: c,
+      class: u(h.value)
+    }, [
+      k("section", {
+        class: u(`${s}-title`),
+        style: H(l.titleStyle)
+      }, [
+        m.value ? (n(), p(C(m.value), { key: 0 })) : f("", !0)
+      ], 6),
+      l.closable ? (n(), d("section", {
+        key: 0,
+        class: u(`${s}-close`),
+        onMouseup: w
+      }, [
+        (n(), p(C(x.value)))
+      ], 34)) : f("", !0)
+    ], 2));
+  }
+});
+export {
+  g as default
+};
+//# sourceMappingURL=PreviewHeader.vue.js.map

package/lib/es/components/image/PreviewHeader.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewHeader.vue.js","sources":["../../../../src/components/image/PreviewHeader.vue"],"sourcesContent":["<template>\n    <section ref=\"headerRef\" :class=\"headerCls\">\n        <section :class=\"`${prefixCls}-title`\" :style=\"titleStyle\">\n            <component :is=\"titleNode\" v-if=\"titleNode\" />\n        </section>\n        <section v-if=\"closable\" :class=\"`${prefixCls}-close`\" @mouseup=\"handleClose\">\n            <component :is=\"closeIconNode\" />\n        </section>\n    </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, h, VNode, ref } from 'vue';\nimport cls from 'classnames';\nimport { cssClasses } from '@douyinfe/semi-foundation/image/constants';\nimport { HeaderProps } from './interface';\nimport { usePreviewContext } from './context';\nimport { IconClose } from '../icons';\n\ndefineOptions({\n    name: 'PreviewHeader',\n});\n\nconst prefixCls = `${cssClasses.PREFIX}-preview-header`;\n\nconst props = withDefaults(defineProps<HeaderProps>(), {\n    closable: true,\n});\n\nconst emit = defineEmits<{\n    close: [e: MouseEvent];\n}>();\n\nconst previewContext = usePreviewContext();\n\nconst headerRef = ref<HTMLElement | null>(null);\n\nconst headerCls = computed(() => {\n    return cls(prefixCls, props.className);\n});\n\nconst title = computed(() => {\n    if (previewContext && previewContext.titles && typeof previewContext.currentIndex === 'number') {\n        return previewContext.titles[previewContext.currentIndex];\n    }\n    return props.title;\n});\n\nconst titleNode = computed(() => {\n    if (props.renderHeader) {\n        const rendered = props.renderHeader(title.value);\n        if (rendered && typeof rendered === 'object' && 'type' in rendered) {\n            return rendered;\n        }\n        return h('span', rendered || '');\n    }\n    return title.value ? h('span', title.value) : null;\n});\n\nconst closeIconNode = computed(() => {\n    if (props.renderCloseIcon) {\n        const icon = typeof props.renderCloseIcon === 'function' ? props.renderCloseIcon() : props.renderCloseIcon;\n        if (icon && typeof icon === 'object' && 'type' in icon) {\n            return icon;\n        }\n        console.warn(\n            '[Semi ImagePreview] RenderCloseIcon should be a valid vue element or a function that returns a vue element'\n        );\n    }\n    return h(IconClose);\n});\n\nconst handleClose = (e: MouseEvent) => {\n    emit('close', e);\n};\n\ndefineExpose({\n    headerRef: headerRef,\n    $el: headerRef,\n});\n</script>\n"],"names":["prefixCls","cssClasses","props","__props","emit","__emit","previewContext","usePreviewContext","headerRef","ref","headerCls","computed","cls","title","titleNode","rendered","h","closeIconNode","icon","IconClose","handleClose","__expose","_createElementBlock","_createElementVNode","_openBlock","_createBlock","_resolveDynamicComponent"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBA,UAAMA,IAAY,GAAGC,EAAW,MAAM,mBAEhCC,IAAQC,GAIRC,IAAOC,GAIPC,IAAiBC,EAAA,GAEjBC,IAAYC,EAAwB,IAAI,GAExCC,IAAYC,EAAS,MAChBC,EAAIZ,GAAWE,EAAM,SAAS,CACxC,GAEKW,IAAQF,EAAS,MACfL,KAAkBA,EAAe,UAAU,OAAOA,EAAe,gBAAiB,WAC3EA,EAAe,OAAOA,EAAe,YAAY,IAErDJ,EAAM,KAChB,GAEKY,IAAYH,EAAS,MAAM;AAC7B,UAAIT,EAAM,cAAc;AACpB,cAAMa,IAAWb,EAAM,aAAaW,EAAM,KAAK;AAC/C,eAAIE,KAAY,OAAOA,KAAa,YAAY,UAAUA,IAC/CA,IAEJC,EAAE,QAAQD,KAAY,EAAE;AAAA,MACnC;AACA,aAAOF,EAAM,QAAQG,EAAE,QAAQH,EAAM,KAAK,IAAI;AAAA,IAClD,CAAC,GAEKI,IAAgBN,EAAS,MAAM;AACjC,UAAIT,EAAM,iBAAiB;AACvB,cAAMgB,IAAO,OAAOhB,EAAM,mBAAoB,aAAaA,EAAM,oBAAoBA,EAAM;AAC3F,YAAIgB,KAAQ,OAAOA,KAAS,YAAY,UAAUA;AAC9C,iBAAOA;AAEX,gBAAQ;AAAA,UACJ;AAAA,QAAA;AAAA,MAER;AACA,aAAOF,EAAEG,CAAS;AAAA,IACtB,CAAC,GAEKC,IAAc,CAAC,MAAkB;AACnC,MAAAhB,EAAK,SAAS,CAAC;AAAA,IACnB;AAEA,WAAAiB,EAAa;AAAA,MACT,WAAAb;AAAA,MACA,KAAKA;AAAA,IAAA,CACR,mBA9EGc,EAOU,WAAA;AAAA,eAPG;AAAA,MAAJ,KAAId;AAAA,MAAa,SAAOE,EAAA,KAAS;AAAA,IAAA;MACtCa,EAEU,WAAA;AAAA,QAFA,YAAUvB,CAAS,QAAA;AAAA,QAAW,SAAOG,EAAA,UAAU;AAAA,MAAA;QACpBW,EAAA,SAAjCU,EAAA,GAAAC,EAA8CC,EAA9BZ,EAAA,KAAS,GAAA,EAAA,KAAA,EAAA,CAAA;;MAEdX,EAAA,iBAAfmB,EAEU,WAAA;AAAA;QAFgB,YAAUtB,CAAS,QAAA;AAAA,QAAW,WAASoB;AAAA,MAAA;SAC7DI,KAAAC,EAAiCC,EAAjBT,EAAA,KAAa,CAAA;AAAA,MAAA;;;;"}