sakura-preview-file 1.0.6 → 1.0.8

package/dist/index.es.js

@@ -1,168 +1,9 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, Fragment, renderList, unref, ref, watchEffect, watch, mergeModels, useModel, renderSlot, normalizeClass, withDirectives, vModelText, toDisplayString, createCommentVNode, reactive, onMounted, toRefs, createVNode, createBlock, isRef, withCtx, nextTick, useTemplateRef, Teleport, provide, resolveDynamicComponent, normalizeProps, guardReactiveProps, vShow } from "vue";
-import { addUnit, isEmpty, FILE_TYPE, getFileType, base64ToFileUrl, blobToBase64, isBase64File, networkFileUrlToLocalFileUrl, numberToFixed, sleep, extend, base64ToFile, generateId, isPdfFile, isWordFile, isImageFile } from "sakura-utils";
+import { unref, ref, computed, watchEffect, watch, getCurrentInstance, defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, mergeModels, useModel, onMounted, onBeforeUnmount, createBlock, Teleport, createVNode, withCtx, normalizeStyle, toDisplayString, createCommentVNode, Fragment, renderList, withDirectives, vModelText, reactive, toRefs, isRef, nextTick, useTemplateRef, provide, resolveDynamicComponent, normalizeProps, guardReactiveProps, vShow, mergeProps, render } from "vue";
+import { isEmpty, FILE_TYPE, getFileType, base64ToFileUrl, blobToBase64, isBase64File, networkFileUrlToLocalFileUrl, numberToFixed, addUnit, sleep, extend, base64ToFile, generateId, isPdfFile, isWordFile, isImageFile } from "sakura-utils";
+import { useThrottleFn, useWindowSize } from "@vueuse/core";
 import VuePdfEmbed from "vue-pdf-embed";
 import "pdfjs-dist";
-import { useThrottleFn, useWindowSize } from "@vueuse/core";
 import { renderAsync } from "docx-preview";
-const index = "";
-const _hoisted_1$7 = ["stroke"];
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  __name: "Circle",
-  props: {
-    size: { default: 50 },
-    color: { default: "#409eff" },
-    duration: { default: 2 }
-  },
-  setup(__props) {
-    const props = __props;
-    const circleStyle = computed(() => {
-      const { size, duration } = props;
-      const style = {
-        "--circle-size": addUnit(size),
-        "--circle-duration": `${duration}s`
-      };
-      return style;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", {
-        class: "circular",
-        viewBox: "0 0 50 50",
-        style: normalizeStyle([circleStyle.value])
-      }, [
-        createElementVNode("circle", {
-          class: "circular__path-inner",
-          cx: "25",
-          cy: "25",
-          r: "20",
-          fill: "none",
-          stroke: __props.color,
-          "stroke-width": "4",
-          "stroke-miterlimit": "10"
-        }, null, 8, _hoisted_1$7)
-      ], 4);
-    };
-  }
-});
-const Circle_vue_vue_type_style_index_0_scoped_51d1fa15_lang = "";
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const Circle = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-51d1fa15"]]);
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  __name: "Dot",
-  props: {
-    gap: { default: 6 },
-    color: { default: "var(--preview-file-primary-color)" },
-    size: { default: 10 },
-    duration: { default: 1.4 }
-  },
-  setup(__props) {
-    const props = __props;
-    const dotStyle = computed(() => {
-      const { size, gap, duration, color } = props;
-      const style = {
-        "--dot-size": addUnit(size),
-        "--dot-duration": `${duration}s`,
-        "--dot-gap": addUnit(gap),
-        "--dot-color": color
-      };
-      return style;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "dot",
-        style: normalizeStyle([dotStyle.value])
-      }, [..._cache[0] || (_cache[0] = [
-        createElementVNode("div", { class: "dot__item" }, null, -1),
-        createElementVNode("div", { class: "dot__item" }, null, -1),
-        createElementVNode("div", { class: "dot__item" }, null, -1)
-      ])], 4);
-    };
-  }
-});
-const Dot_vue_vue_type_style_index_0_scoped_2acd99b5_lang = "";
-const Dot = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-2acd99b5"]]);
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  __name: "Progress",
-  props: {
-    width: { default: 200 },
-    height: { default: 4 },
-    background: { default: "#ebeef5" },
-    radius: {},
-    color: { default: "var(--preview-file-primary-color)" },
-    duration: { default: 2 }
-  },
-  setup(__props) {
-    const props = __props;
-    const progressStyle = computed(() => {
-      const { width, height, color, duration, radius, background } = props;
-      const style = {
-        "--progress-width": addUnit(width),
-        "--progress-height": addUnit(height),
-        "--progress-border-radius": addUnit(radius ? radius : Number(height) / 2),
-        "--progress-background": background,
-        "--progress-duration": `${duration}s`,
-        "--progress-color": color
-      };
-      return style;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "progress",
-        style: normalizeStyle([progressStyle.value])
-      }, [..._cache[0] || (_cache[0] = [
-        createElementVNode("div", { class: "progress__bar" }, null, -1)
-      ])], 4);
-    };
-  }
-});
-const Progress_vue_vue_type_style_index_0_scoped_3a710001_lang = "";
-const Progress = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-3a710001"]]);
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "Cube",
-  props: {
-    size: { default: 40 },
-    color: { default: "var(--preview-file-primary-color)" },
-    duration: { default: 1.3 }
-  },
-  setup(__props) {
-    const props = __props;
-    const cubeStyle = computed(() => {
-      const { size, duration, color } = props;
-      const style = {
-        "--cube-size": addUnit(size),
-        "--cube-color": color,
-        "--cube-duration": `${duration}s`
-      };
-      return style;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "cube",
-        style: normalizeStyle([cubeStyle.value])
-      }, [
-        (openBlock(), createElementBlock(Fragment, null, renderList(9, (v) => {
-          return createElementVNode("div", {
-            key: v,
-            class: "cube__item"
-          });
-        }), 64))
-      ], 4);
-    };
-  }
-});
-const Cube_vue_vue_type_style_index_0_scoped_0e6bb9d0_lang = "";
-const Cube = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-0e6bb9d0"]]);
-const Loading = {
-  Circle,
-  Dot,
-  Progress,
-  Cube
-};
 const defaultNamespace = "sakura";
 const statePrefix = "is-";
 const _bem = (namespace, block, blockSuffix, element, modifier) => {
@@ -381,35 +222,369 @@ const usePreviewFileTools = (fileUrl, pageNum) => {
       transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,
       transformOrigin: "center center"
     };
-  });
-  const resetPdfData = () => {
-    resetMouseState();
-    resetWheelState();
-  };
-  watch(() => pageNum == null ? void 0 : pageNum.value, resetPdfData);
-  const wrapperRef = ref(null);
-  watch(() => fileUrl.value, () => {
-    if (!wrapperRef.value) {
-      return;
-    }
-    wrapperRef.value.scrollTop = 0;
-    resetPdfData();
-  });
-  return {
-    wrapperRef,
-    onWheel,
-    clickMinusScale,
-    clickPlusScale,
-    resetWheelState,
-    scale,
-    scaleText,
-    isMouseDown,
-    onMouseStart,
-    resetMouseState,
-    translateX,
-    translateY,
-    wrapperStyle
-  };
+  });
+  const resetPdfData = () => {
+    resetMouseState();
+    resetWheelState();
+  };
+  watch(() => pageNum == null ? void 0 : pageNum.value, resetPdfData);
+  const wrapperRef = ref(null);
+  watch(() => fileUrl.value, () => {
+    if (!wrapperRef.value) {
+      return;
+    }
+    wrapperRef.value.scrollTop = 0;
+    resetPdfData();
+  });
+  return {
+    wrapperRef,
+    onWheel,
+    clickMinusScale,
+    clickPlusScale,
+    resetWheelState,
+    scale,
+    scaleText,
+    isMouseDown,
+    onMouseStart,
+    resetMouseState,
+    translateX,
+    translateY,
+    wrapperStyle
+  };
+};
+const usePreviewFile = () => {
+  const proxy = getCurrentInstance();
+  return proxy == null ? void 0 : proxy.appContext.config.globalProperties.$previewFile;
+};
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  __name: "Overlay",
+  props: {
+    visible: { type: Boolean }
+  },
+  setup(__props) {
+    const ns = useNamespace("overlay");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          unref(ns).b(),
+          unref(ns).is("active", __props.visible)
+        ])
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass([unref(ns).e("content")]),
+          onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+          }, ["prevent", "stop"]))
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 2)
+      ], 2);
+    };
+  }
+});
+const _hoisted_1$5 = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_2 = ["stroke"];
+const _hoisted_3 = ["stroke"];
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "Close",
+  props: {
+    color: { default: "#fff" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", _hoisted_1$5, [
+        createElementVNode("path", {
+          d: "M7 7L17 17",
+          stroke: __props.color,
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, null, 8, _hoisted_2),
+        createElementVNode("path", {
+          d: "M7 17L17 7",
+          stroke: __props.color,
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, null, 8, _hoisted_3)
+      ]);
+    };
+  }
+});
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "Dialog",
+  props: /* @__PURE__ */ mergeModels({
+    title: {},
+    top: { default: "15vh" },
+    width: { default: "50vw" },
+    background: { default: "white" },
+    radius: { default: 12 },
+    showClose: { type: Boolean, default: true },
+    closeOnClickModal: { type: Boolean, default: true },
+    closeOnPressEscape: { type: Boolean, default: true }
+  }, {
+    "modelValue": {
+      type: Boolean,
+      default: false
+    },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const ns = useNamespace("dialog");
+    const props = __props;
+    const dialogStyle = computed(() => {
+      const { width, top, radius, background } = props;
+      return ns.cssBlockVar("dialog", {
+        width: addUnit(width),
+        top: addUnit(top),
+        "border-radius": addUnit(radius),
+        background: addUnit(background)
+      });
+    });
+    const showDialog = useModel(__props, "modelValue");
+    const handleShowDialog = useThrottleFn(() => {
+      showDialog.value = !showDialog.value;
+    }, 500);
+    const isInit = ref(false);
+    const initWatch = watch(() => showDialog.value, (value) => {
+      if (!isInit.value && value) {
+        isInit.value = true;
+        initWatch.stop();
+      }
+    });
+    const onKeyDown = useThrottleFn((e) => {
+      if (e.key !== "Escape") {
+        return;
+      }
+      if (!showDialog.value) {
+        return;
+      }
+      handleShowDialog();
+    }, 500);
+    onMounted(() => {
+      props.closeOnPressEscape && window.addEventListener("keydown", onKeyDown);
+    });
+    onBeforeUnmount(() => {
+      props.closeOnPressEscape && window.removeEventListener("keydown", onKeyDown);
+    });
+    const overlayClick = () => {
+      props.closeOnClickModal && handleShowDialog();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, { to: "body" }, [
+        createVNode(_sfc_main$f, {
+          visible: showDialog.value,
+          onClick: overlayClick
+        }, {
+          default: withCtx(() => [
+            isInit.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass([
+                unref(ns).b(),
+                unref(ns).is("active", showDialog.value)
+              ]),
+              style: normalizeStyle([dialogStyle.value])
+            }, [
+              _ctx.$slots.header || !unref(isEmpty)(__props.title) ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass([unref(ns).e("header")])
+              }, [
+                __props.title ? (openBlock(), createElementBlock("span", {
+                  key: 0,
+                  class: normalizeClass([unref(ns).e("title")])
+                }, toDisplayString(__props.title), 3)) : createCommentVNode("", true),
+                renderSlot(_ctx.$slots, "header")
+              ], 2)) : createCommentVNode("", true),
+              __props.showClose ? (openBlock(), createElementBlock("div", {
+                key: 1,
+                class: normalizeClass([unref(ns).e("icon")]),
+                onClick: _cache[0] || (_cache[0] = //@ts-ignore
+                (...args) => unref(handleShowDialog) && unref(handleShowDialog)(...args))
+              }, [
+                createVNode(_sfc_main$e, { color: "#909399" })
+              ], 2)) : createCommentVNode("", true),
+              createElementVNode("div", {
+                class: normalizeClass([unref(ns).e("body")])
+              }, [
+                renderSlot(_ctx.$slots, "default")
+              ], 2),
+              _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
+                key: 2,
+                class: normalizeClass([unref(ns).e("footer")])
+              }, [
+                renderSlot(_ctx.$slots, "footer")
+              ], 2)) : createCommentVNode("", true)
+            ], 6)) : createCommentVNode("", true)
+          ]),
+          _: 3
+        }, 8, ["visible"])
+      ]);
+    };
+  }
+});
+const _hoisted_1$4 = ["stroke"];
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  __name: "Circle",
+  props: {
+    size: { default: 50 },
+    color: { default: "#409eff" },
+    duration: { default: 2 }
+  },
+  setup(__props) {
+    const props = __props;
+    const circleStyle = computed(() => {
+      const { size, duration } = props;
+      const style = {
+        "--circle-size": addUnit(size),
+        "--circle-duration": `${duration}s`
+      };
+      return style;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        class: "circular",
+        viewBox: "0 0 50 50",
+        style: normalizeStyle([circleStyle.value])
+      }, [
+        createElementVNode("circle", {
+          class: "circular__path-inner",
+          cx: "25",
+          cy: "25",
+          r: "20",
+          fill: "none",
+          stroke: __props.color,
+          "stroke-width": "4",
+          "stroke-miterlimit": "10"
+        }, null, 8, _hoisted_1$4)
+      ], 4);
+    };
+  }
+});
+const Circle_vue_vue_type_style_index_0_scoped_51d1fa15_lang = "";
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const Circle = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-51d1fa15"]]);
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "Dot",
+  props: {
+    gap: { default: 6 },
+    color: { default: "var(--preview-file-primary-color)" },
+    size: { default: 10 },
+    duration: { default: 1.4 }
+  },
+  setup(__props) {
+    const props = __props;
+    const dotStyle = computed(() => {
+      const { size, gap, duration, color } = props;
+      const style = {
+        "--dot-size": addUnit(size),
+        "--dot-duration": `${duration}s`,
+        "--dot-gap": addUnit(gap),
+        "--dot-color": color
+      };
+      return style;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "dot",
+        style: normalizeStyle([dotStyle.value])
+      }, [..._cache[0] || (_cache[0] = [
+        createElementVNode("div", { class: "dot__item" }, null, -1),
+        createElementVNode("div", { class: "dot__item" }, null, -1),
+        createElementVNode("div", { class: "dot__item" }, null, -1)
+      ])], 4);
+    };
+  }
+});
+const Dot_vue_vue_type_style_index_0_scoped_2acd99b5_lang = "";
+const Dot = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-2acd99b5"]]);
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "Progress",
+  props: {
+    width: { default: 200 },
+    height: { default: 4 },
+    background: { default: "#ebeef5" },
+    radius: {},
+    color: { default: "var(--preview-file-primary-color)" },
+    duration: { default: 2 }
+  },
+  setup(__props) {
+    const props = __props;
+    const progressStyle = computed(() => {
+      const { width, height, color, duration, radius, background } = props;
+      const style = {
+        "--progress-width": addUnit(width),
+        "--progress-height": addUnit(height),
+        "--progress-border-radius": addUnit(radius ? radius : Number(height) / 2),
+        "--progress-background": background,
+        "--progress-duration": `${duration}s`,
+        "--progress-color": color
+      };
+      return style;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "progress",
+        style: normalizeStyle([progressStyle.value])
+      }, [..._cache[0] || (_cache[0] = [
+        createElementVNode("div", { class: "progress__bar" }, null, -1)
+      ])], 4);
+    };
+  }
+});
+const Progress_vue_vue_type_style_index_0_scoped_3a710001_lang = "";
+const Progress = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-3a710001"]]);
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "Cube",
+  props: {
+    size: { default: 40 },
+    color: { default: "var(--preview-file-primary-color)" },
+    duration: { default: 1.3 }
+  },
+  setup(__props) {
+    const props = __props;
+    const cubeStyle = computed(() => {
+      const { size, duration, color } = props;
+      const style = {
+        "--cube-size": addUnit(size),
+        "--cube-color": color,
+        "--cube-duration": `${duration}s`
+      };
+      return style;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "cube",
+        style: normalizeStyle([cubeStyle.value])
+      }, [
+        (openBlock(), createElementBlock(Fragment, null, renderList(9, (v) => {
+          return createElementVNode("div", {
+            key: v,
+            class: "cube__item"
+          });
+        }), 64))
+      ], 4);
+    };
+  }
+});
+const Cube_vue_vue_type_style_index_0_scoped_0e6bb9d0_lang = "";
+const Cube = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-0e6bb9d0"]]);
+const Loading = {
+  Circle,
+  Dot,
+  Progress,
+  Cube
 };
 var EVENT_NAME = /* @__PURE__ */ ((EVENT_NAME2) => {
   EVENT_NAME2["完成"] = "loaded";
@@ -439,6 +614,7 @@ const usePreviewPdf = (state) => {
   const onPageNumChange = () => {
     const { total } = state;
     state.pageNum = Math.max(Math.min(_pageNum.value, total), 1);
+    _pageNum.value = state.pageNum;
   };
   watchEffect(() => {
     _pageNum.value = state.pageNum;
@@ -452,15 +628,7 @@ const usePreviewPdf = (state) => {
     onPageNumChange
   };
 };
-const _hoisted_1$6 = { class: "sakura-file-data__tools" };
-const _hoisted_2$1 = { class: "sakura-file-data__page" };
-const _hoisted_3$1 = { class: "sakura-file-data__text" };
-const _hoisted_4$1 = {
-  key: 1,
-  class: "sakura-file-data__scale"
-};
-const _hoisted_5$1 = { class: "sakura-file-data__scale-text" };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "Tools",
   props: /* @__PURE__ */ mergeModels({
     showTools: { type: Boolean },
@@ -480,23 +648,32 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }),
   emits: /* @__PURE__ */ mergeModels([EVENT_NAME.改变, EVENT_NAME.下一页, EVENT_NAME.上一页, EVENT_NAME.放大, EVENT_NAME.缩小], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
+    const ns = useNamespace("tools");
     const emits = __emit;
     const _pageNum = useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([unref(ns).b()])
+      }, [
         renderSlot(_ctx.$slots, "default"),
         __props.showTools ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           __props.enablePagination ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
             createElementVNode("div", {
-              class: normalizeClass(["sakura-file-data__arrow sakura-file-data__arrow-prev", [__props.prevPageDisabled ? "is-disabled" : ""]]),
+              class: normalizeClass(["sakura-file-data__arrow sakura-file-data__arrow-prev", [
+                unref(ns).e("arrow"),
+                unref(ns).em("arrow", "prev"),
+                unref(ns).is("disabled", __props.prevPageDisabled)
+              ]]),
               onClick: _cache[0] || (_cache[0] = ($event) => emits(unref(EVENT_NAME).上一页))
             }, null, 2),
-            createElementVNode("div", _hoisted_2$1, [
+            createElementVNode("div", {
+              class: normalizeClass([unref(ns).e("page")])
+            }, [
               withDirectives(createElementVNode("input", {
-                class: "sakura-file-data__input",
+                class: normalizeClass([unref(ns).e("input")]),
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _pageNum.value = $event),
                 onBlur: _cache[2] || (_cache[2] = ($event) => emits(unref(EVENT_NAME).改变))
-              }, null, 544), [
+              }, null, 34), [
                 [
                   vModelText,
                   _pageNum.value,
@@ -504,31 +681,47 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
                   { number: true }
                 ]
               ]),
-              createElementVNode("span", _hoisted_3$1, " / " + toDisplayString(__props.total), 1)
-            ]),
+              createElementVNode("span", {
+                class: normalizeClass([unref(ns).e("text")])
+              }, " / " + toDisplayString(__props.total), 3)
+            ], 2),
             createElementVNode("div", {
-              class: normalizeClass(["sakura-file-data__arrow sakura-file-data__arrow-next", [__props.nextPageDisabled ? "is-disabled" : ""]]),
+              class: normalizeClass([
+                unref(ns).e("arrow"),
+                unref(ns).em("arrow", "next"),
+                unref(ns).is("disabled", __props.nextPageDisabled)
+              ]),
               onClick: _cache[3] || (_cache[3] = ($event) => emits(unref(EVENT_NAME).下一页))
             }, null, 2)
           ], 64)) : createCommentVNode("", true),
-          __props.enableScale ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+          __props.enableScale ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass([unref(ns).e("scale")])
+          }, [
             createElementVNode("div", {
-              class: "sakura-file-data__icon sakura-file-data__minus",
+              class: normalizeClass([
+                unref(ns).e("icon"),
+                unref(ns).e("minus")
+              ]),
               onClick: _cache[4] || (_cache[4] = ($event) => emits(unref(EVENT_NAME).缩小))
-            }),
-            createElementVNode("span", _hoisted_5$1, toDisplayString(__props.scaleText), 1),
+            }, null, 2),
+            createElementVNode("span", {
+              class: normalizeClass([unref(ns).e("scale-text")])
+            }, toDisplayString(__props.scaleText), 3),
             createElementVNode("div", {
-              class: "sakura-file-data__icon sakura-file-data__plus",
+              class: normalizeClass([
+                unref(ns).e("icon"),
+                unref(ns).e("plus")
+              ]),
               onClick: _cache[5] || (_cache[5] = ($event) => emits(unref(EVENT_NAME).放大))
-            })
-          ])) : createCommentVNode("", true)
+            }, null, 2)
+          ], 2)) : createCommentVNode("", true)
         ], 64)) : createCommentVNode("", true)
-      ]);
+      ], 2);
     };
   }
 });
-const _hoisted_1$5 = { class: "sakura-file-data" };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "Pdf",
   props: /* @__PURE__ */ mergeModels({
     enablePagination: { type: Boolean, default: true },
@@ -545,6 +738,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }),
   emits: /* @__PURE__ */ mergeModels([EVENT_NAME.完成], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
+    const ns = useNamespace("file-data");
     const props = __props;
     const emits = __emit;
     const pdfLoading = useModel(__props, "modelValue");
@@ -595,10 +789,15 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const { fileUrl } = toRefs(props);
     const { onWheel, clickMinusScale, clickPlusScale, isMouseDown, scaleText, onMouseStart, wrapperStyle } = usePreviewFileTools(fileUrl, pageNum);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          unref(ns).b(),
+          unref(ns).is("drag", unref(isMouseDown))
+        ])
+      }, [
         createElementVNode("div", {
           ref: "wrapperRef",
-          class: normalizeClass(["sakura-file-data__wrapper", [unref(isMouseDown) ? "is-drag" : ""]]),
+          class: normalizeClass([unref(ns).e("wrapper")]),
           onMousedown: _cache[0] || (_cache[0] = ($event) => __props.enableMove && unref(onMouseStart)($event)),
           onWheel: _cache[1] || (_cache[1] = ($event) => __props.enableScale && unref(onWheel)($event))
         }, [
@@ -606,7 +805,6 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             style: normalizeStyle([unref(wrapperStyle)])
           }, [
             createVNode(unref(VuePdfEmbed), {
-              class: "pdf",
               source: pdfSource.value,
               page: __props.enablePagination ? state.pageNum : void 0,
               scale: 1,
@@ -616,7 +814,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             }, null, 8, ["source", "page"])
           ], 4)
         ], 34),
-        __props.enablePagination || __props.enableScale || __props.showTools ? (openBlock(), createBlock(_sfc_main$7, {
+        __props.enablePagination || __props.enableScale || __props.showTools ? (openBlock(), createBlock(_sfc_main$8, {
           key: 0,
           modelValue: unref(_pageNum),
           "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(_pageNum) ? _pageNum.value = $event : null),
@@ -639,12 +837,11 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 8, ["modelValue", "total", "prev-page-disabled", "next-page-disabled", "scale-text", "show-tools", "enable-pagination", "enable-scale", "enable-move", "onChange", "onNext", "onPrev", "onZoomIn", "onZoomOut"])) : createCommentVNode("", true)
-      ]);
+      ], 2);
     };
   }
 });
-const _hoisted_1$4 = { class: "sakura-file-data" };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "Word",
   props: /* @__PURE__ */ mergeModels({
     enablePagination: { type: Boolean },
@@ -663,6 +860,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }),
   emits: /* @__PURE__ */ mergeModels([EVENT_NAME.完成], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
+    const ns = useNamespace("file-data");
     const props = __props;
     const wordLoading = useModel(__props, "modelValue");
     const generateWordFile = async () => {
@@ -716,10 +914,16 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const { fileUrl } = toRefs(props);
     const { onWheel, clickMinusScale, clickPlusScale, isMouseDown, scaleText, onMouseStart, wrapperStyle } = usePreviewFileTools(fileUrl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          unref(ns).b(),
+          unref(ns).is("drag", unref(isMouseDown)),
+          unref(ns).is("enable-wrapper", __props.enableWrapper)
+        ])
+      }, [
         createElementVNode("div", {
           ref: "wrapperRef",
-          class: normalizeClass(["sakura-file-data__wrapper", [unref(isMouseDown) ? "is-drag" : "", __props.enableWrapper ? "is-enable-wrapper" : ""]]),
+          class: normalizeClass([unref(ns).e("wrapper")]),
           onMousedown: _cache[0] || (_cache[0] = ($event) => __props.enableMove && unref(onMouseStart)($event)),
           onWheel: _cache[1] || (_cache[1] = ($event) => __props.enableScale && unref(onWheel)($event))
         }, [
@@ -729,7 +933,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             style: normalizeStyle([unref(wrapperStyle)])
           }, null, 4)
         ], 34),
-        __props.enablePagination || __props.enableScale || __props.showTools ? (openBlock(), createBlock(_sfc_main$7, {
+        __props.enablePagination || __props.enableScale || __props.showTools ? (openBlock(), createBlock(_sfc_main$8, {
           key: 0,
           "scale-text": unref(scaleText),
           "show-tools": __props.showTools,
@@ -743,17 +947,17 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 8, ["scale-text", "show-tools", "enable-scale", "enable-move", "onZoomIn", "onZoomOut"])) : createCommentVNode("", true)
-      ]);
+      ], 2);
     };
   }
 });
-const _sfc_main$4 = {};
+const _sfc_main$5 = {};
 const _hoisted_1$3 = {
   width: "24",
   height: "24",
   fill: "none"
 };
-function _sfc_render$2(_ctx, _cache) {
+function _sfc_render$1(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1$3, [..._cache[0] || (_cache[0] = [
     createElementVNode("circle", {
       cx: "10.5",
@@ -773,8 +977,8 @@ function _sfc_render$2(_ctx, _cache) {
     }, null, -1)
   ])]);
 }
-const ZoomIn = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$2]]);
-const _sfc_main$3 = {};
+const ZoomIn = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$1]]);
+const _sfc_main$4 = {};
 const _hoisted_1$2 = {
   width: "24",
   height: "24",
@@ -782,7 +986,7 @@ const _hoisted_1$2 = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function _sfc_render$1(_ctx, _cache) {
+function _sfc_render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1$2, [..._cache[0] || (_cache[0] = [
     createElementVNode("circle", {
       cx: "10.5",
@@ -809,44 +1013,111 @@ function _sfc_render$1(_ctx, _cache) {
     }, null, -1)
   ])]);
 }
-const ZoomOut = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$1]]);
-const _sfc_main$2 = {};
-const _hoisted_1$1 = {
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-};
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [
-    createElementVNode("path", {
-      d: "M7 7L17 17",
-      stroke: "#fff",
-      "stroke-width": "2",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
-    }, null, -1),
-    createElementVNode("path", {
-      d: "M7 17L17 7",
-      stroke: "#fff",
-      "stroke-width": "2",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
-    }, null, -1)
-  ])]);
-}
-const Close = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
-const _hoisted_1 = { class: "sakura-file-data" };
-const _hoisted_2 = { class: "sakura-file-data__wrapper is-image" };
-const _hoisted_3 = ["src"];
-const _hoisted_4 = { class: "sakura-preview__image--data" };
-const _hoisted_5 = ["src"];
-const _hoisted_6 = {
-  key: 0,
-  class: "sakura-preview__image--tools"
-};
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const ZoomOut = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render]]);
+const _hoisted_1$1 = ["src"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "Preview",
+  props: /* @__PURE__ */ mergeModels({
+    imageWidth: {},
+    imageHeight: {},
+    fileUrl: {},
+    enableMove: { type: Boolean },
+    enableScale: { type: Boolean }
+  }, {
+    "modelValue": {
+      type: Boolean,
+      default: false
+    },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const ns = useNamespace("preview-image");
+    const { width, height } = useWindowSize();
+    const showPreviewImage = useModel(__props, "modelValue");
+    const handleShowPreviewImage = () => {
+      showPreviewImage.value = !showPreviewImage.value;
+    };
+    const props = __props;
+    const { imageHeight, imageWidth, fileUrl } = toRefs(props);
+    const dialogImageStyle = computed(() => {
+      if (imageWidth.value > width.value) {
+        return {
+          width: "auto",
+          height: addUnit(height.value)
+        };
+      }
+      return {
+        width: addUnit(imageWidth.value),
+        height: addUnit(imageHeight.value)
+      };
+    });
+    const {
+      onWheel,
+      onMouseStart,
+      isMouseDown,
+      clickMinusScale,
+      clickPlusScale,
+      wrapperStyle,
+      resetMouseState,
+      resetWheelState
+    } = usePreviewFileTools(fileUrl);
+    const resetData = () => {
+      resetMouseState();
+      resetWheelState();
+    };
+    watch(() => showPreviewImage.value, (value) => {
+      value && resetData();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$d), {
+        modelValue: showPreviewImage.value,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => showPreviewImage.value = $event),
+        background: "transparent",
+        "show-close": false
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", {
+            ref: "wrapperRef",
+            class: normalizeClass([
+              unref(ns).b(),
+              unref(ns).is("drag", unref(isMouseDown))
+            ]),
+            onMousedown: _cache[0] || (_cache[0] = ($event) => __props.enableMove && unref(onMouseStart)($event)),
+            onWheel: _cache[1] || (_cache[1] = ($event) => __props.enableScale && unref(onWheel)($event))
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass([unref(ns).e("data")])
+            }, [
+              createElementVNode("img", {
+                class: normalizeClass([unref(ns).e("dot-move")]),
+                src: unref(fileUrl),
+                style: normalizeStyle([dialogImageStyle.value, unref(wrapperStyle)]),
+                alt: ""
+              }, null, 14, _hoisted_1$1)
+            ], 2),
+            createElementVNode("div", {
+              class: normalizeClass([unref(ns).e("close")]),
+              onClick: handleShowPreviewImage
+            }, [
+              createVNode(_sfc_main$e)
+            ], 2),
+            __props.enableScale ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass([unref(ns).e("tools")])
+            }, [
+              createVNode(ZoomOut, { onClick: unref(clickMinusScale) }, null, 8, ["onClick"]),
+              createVNode(ZoomIn, { onClick: unref(clickPlusScale) }, null, 8, ["onClick"])
+            ], 2)) : createCommentVNode("", true)
+          ], 34)
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+const _hoisted_1 = ["src"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "Image",
   props: /* @__PURE__ */ mergeModels({
     enablePagination: { type: Boolean },
@@ -863,102 +1134,65 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props) {
+    const ns = useNamespace("file-data");
     const props = __props;
     const pdfLoading = useModel(__props, "modelValue");
     const onImageLoad = () => {
       pdfLoading.value = false;
     };
-    const { width, height } = useWindowSize();
     const imageWidth = ref(0);
     const imageHeight = ref(0);
     const loadImageSize = async () => {
-      const fileUrl2 = props.fileUrl;
+      const fileUrl = props.fileUrl;
       imageWidth.value = 0;
       imageHeight.value = 0;
       const image = new Image();
-      image.src = fileUrl2;
+      image.src = fileUrl;
       image.onload = () => {
         imageWidth.value = image.width;
         imageHeight.value = image.height;
       };
     };
     onMounted(loadImageSize);
-    const dialogImageStyle = computed(() => {
-      if (imageWidth.value > width.value) {
-        return {
-          width: "auto",
-          height: addUnit(height.value)
-        };
-      }
-      return {
-        width: addUnit(imageWidth.value),
-        height: addUnit(imageHeight.value)
-      };
-    });
-    const { fileUrl } = toRefs(props);
-    const {
-      onWheel,
-      onMouseStart,
-      isMouseDown,
-      clickMinusScale,
-      clickPlusScale,
-      wrapperStyle
-    } = usePreviewFileTools(fileUrl);
     const visible = ref(false);
     const handleVisible = () => {
       visible.value = !visible.value;
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", _hoisted_1, [
-          createElementVNode("div", _hoisted_2, [
+        createElementVNode("div", {
+          class: normalizeClass([
+            unref(ns).b(),
+            unref(ns).is("image")
+          ])
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass([unref(ns).e("wrapper")])
+          }, [
             createElementVNode("img", {
-              class: "sakura-file-data__image",
-              src: unref(fileUrl),
+              class: normalizeClass([unref(ns).e("image")]),
+              src: __props.fileUrl,
               alt: "",
               onLoad: onImageLoad,
               onClick: handleVisible
-            }, null, 40, _hoisted_3)
-          ])
-        ]),
-        (openBlock(), createBlock(Teleport, { to: "body" }, [
-          createElementVNode("div", {
-            class: normalizeClass(["sakura-preview-dialog", [visible.value ? "is-visible" : ""]])
-          }, [
-            _cache[2] || (_cache[2] = createElementVNode("div", { class: "sakura-preview__image--mark" }, null, -1)),
-            createElementVNode("div", {
-              ref: "wrapperRef",
-              class: normalizeClass(["sakura-preview__image", [unref(isMouseDown) ? "is-drag" : ""]]),
-              onMousedown: _cache[0] || (_cache[0] = ($event) => __props.enableMove && unref(onMouseStart)($event)),
-              onWheel: _cache[1] || (_cache[1] = ($event) => __props.enableScale && unref(onWheel)($event))
-            }, [
-              createElementVNode("div", _hoisted_4, [
-                createElementVNode("img", {
-                  class: "dot-move",
-                  src: unref(fileUrl),
-                  style: normalizeStyle([dialogImageStyle.value, unref(wrapperStyle)]),
-                  alt: ""
-                }, null, 12, _hoisted_5)
-              ]),
-              createElementVNode("div", {
-                class: "sakura-preview__image--close",
-                onClick: handleVisible
-              }, [
-                createVNode(Close)
-              ]),
-              __props.enableScale ? (openBlock(), createElementBlock("div", _hoisted_6, [
-                createVNode(ZoomIn, { onClick: unref(clickPlusScale) }, null, 8, ["onClick"]),
-                createVNode(ZoomOut, { onClick: unref(clickMinusScale) }, null, 8, ["onClick"])
-              ])) : createCommentVNode("", true)
-            ], 34)
+            }, null, 42, _hoisted_1)
           ], 2)
-        ]))
+        ], 2),
+        createVNode(_sfc_main$3, {
+          modelValue: visible.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
+          "file-url": __props.fileUrl,
+          "enable-move": __props.enableMove,
+          "enable-scale": __props.enableScale,
+          "image-width": imageWidth.value,
+          "image-height": imageHeight.value
+        }, null, 8, ["modelValue", "file-url", "enable-move", "enable-scale", "image-width", "image-height"])
       ], 64);
     };
   }
 });
 const PreviewFileContextKey = Symbol("PreviewFile");
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "preview-file",
   props: {
     width: { default: "100%" },
@@ -1014,7 +1248,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           key: 0,
           class: normalizeClass([unref(ns).e("wrapper")])
         }, [
-          unref(isPdfFile)(unref(fileType)) ? (openBlock(), createBlock(_sfc_main$6, {
+          unref(isPdfFile)(unref(fileType)) ? (openBlock(), createBlock(_sfc_main$7, {
             key: 0,
             modelValue: loading.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => loading.value = $event),
@@ -1032,7 +1266,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           }, 8, ["modelValue", "file-url", "show-tools", "enable-pagination", "enable-scale", "enable-move"])) : createCommentVNode("", true),
-          unref(isWordFile)(unref(fileType)) ? (openBlock(), createBlock(_sfc_main$5, {
+          unref(isWordFile)(unref(fileType)) ? (openBlock(), createBlock(_sfc_main$6, {
             key: 1,
             modelValue: loading.value,
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => loading.value = $event),
@@ -1042,7 +1276,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "enable-scale": __props.enableScale,
             "enable-move": __props.enableMove,
             "is-local-file": __props.convertToLocalFileUrl
-          }, null, 8, ["modelValue", "file-url", "show-tools", "enable-pagination", "enable-scale", "enable-move", "is-local-file"])) : unref(isImageFile)(unref(fileType)) ? (openBlock(), createBlock(_sfc_main$1, {
+          }, null, 8, ["modelValue", "file-url", "show-tools", "enable-pagination", "enable-scale", "enable-move", "is-local-file"])) : unref(isImageFile)(unref(fileType)) ? (openBlock(), createBlock(_sfc_main$2, {
             key: 2,
             modelValue: loading.value,
             "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => loading.value = $event),
@@ -1070,11 +1304,101 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-_sfc_main.install = (app) => {
-  app.component("PreviewFile", _sfc_main);
-  app.component("Loading", Loading);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "preview-file-dialog",
+  setup(__props, { expose: __expose }) {
+    const getState = () => {
+      return {
+        width: 749,
+        height: "80vh",
+        src: "",
+        convertToLocalFileUrl: false,
+        enablePagination: true,
+        enableMove: true,
+        enableScale: true,
+        loadingType: "progress",
+        themeColor: "#245EFF",
+        top: "5vh"
+      };
+    };
+    const state = reactive(getState());
+    const { fileUrl, fileType } = useFileState(state);
+    const previewFileTitle = computed(() => {
+      const { title } = state;
+      if (!isEmpty(title)) {
+        return title;
+      }
+      if (isPdfFile(fileType.value)) {
+        return "pdf";
+      }
+      if (isWordFile(fileType.value)) {
+        return "word";
+      }
+      return "image";
+    });
+    const visible = ref(false);
+    const previewFile = (_fileUrl, title, params = {}) => {
+      extend(state, getState(), {
+        ...params,
+        title,
+        src: _fileUrl
+      });
+      visible.value = true;
+    };
+    __expose({
+      previewFile
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$d), {
+        modelValue: visible.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
+        top: state.top,
+        title: previewFileTitle.value,
+        width: state.width
+      }, {
+        default: withCtx(() => [
+          visible.value ? (openBlock(), createBlock(_sfc_main$1, mergeProps({ key: 0 }, state, {
+            src: unref(fileUrl),
+            width: "100%"
+          }), null, 16, ["src"])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["modelValue", "top", "title", "width"]);
+    };
+  }
+});
+const checkElementIsExist = (id, container = "body") => {
+  if (document.querySelector(`#${id}`)) {
+    return true;
+  }
+  try {
+    const div = document.createElement("div");
+    div.id = id;
+    const containerEl = document.querySelector(container);
+    containerEl.append(div);
+    return true;
+  } catch {
+    return false;
+  }
+};
+function install(vm) {
+  const vnode = createVNode(_sfc_main);
+  checkElementIsExist("sakura-preview-file");
+  render(vnode, document.querySelector("#sakura-preview-file"));
+  vm.config.globalProperties.$previewFile = (fileUrl, title = "", params) => {
+    var _a, _b;
+    return ((_a = vnode.component) == null ? void 0 : _a.exposed) && ((_b = vnode.component) == null ? void 0 : _b.exposed.previewFile(fileUrl, title, params));
+  };
+}
+const index$1 = "";
+const index = {
+  install
 };
 export {
+  _sfc_main$d as Dialog,
   Loading,
-  _sfc_main as default
+  _sfc_main$1 as PreviewFile,
+  _sfc_main as PreviewFileDialog,
+  index as default,
+  usePreviewFile
 };