qidian-vue-ui 1.5.2 → 1.5.3

package/dist/components/file-viewer/index.css

@@ -1,18 +1,18 @@
-.qd-file-viewer[data-v-d9e97271],
-.qd-file-viewer__content[data-v-d9e97271] {
+.qd-file-viewer[data-v-a1dee402],
+.qd-file-viewer__content[data-v-a1dee402] {
   width: 100%;
   height: 100%;
 }
-.qd-file-viewer--image[data-v-d9e97271] {
+.qd-file-viewer--image[data-v-a1dee402] {
   transform: translate3d(0, 0, 0);
 }
-.qd-file-viewer--image[data-v-d9e97271] .t-image-viewer__trigger {
+.qd-file-viewer--image[data-v-a1dee402] .t-image-viewer__trigger {
   display: none;
 }
-.qd-file-viewer--image[data-v-d9e97271] .t-image-viewer__modal-box,
-.qd-file-viewer--image[data-v-d9e97271] .t-image-viewer-preview-image {
+.qd-file-viewer--image[data-v-a1dee402] .t-image-viewer__modal-box,
+.qd-file-viewer--image[data-v-a1dee402] .t-image-viewer-preview-image {
   animation: none;
 }
-.qd-file-viewer--image[data-v-d9e97271] .t-image-viewer__modal-mask {
+.qd-file-viewer--image[data-v-a1dee402] .t-image-viewer__modal-mask {
   transition: none;
 }

package/dist/components/file-viewer/index.vue.mjs

@@ -2,7 +2,7 @@ import './index.css'
 import _sfc_main from "./index.vue2.mjs";
 /* empty css            */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const QdFileViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d9e97271"]]);
+const QdFileViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a1dee402"]]);
 export {
   QdFileViewer as default
 };

package/dist/components/file-viewer/index.vue2.mjs

@@ -4,7 +4,6 @@ import { allRenderers } from "@file-viewer/preset-all";
 import { FileViewer } from "@file-viewer/vue3";
 import { ImageViewer } from "tdesign-vue-next";
 import { isImage } from "../../utils/tools.mjs";
-import { useConfig } from "../config-provider/useConfig.mjs";
 import { useTheme } from "../../hooks/useTheme.mjs";
 import QdOfficePdf from "../office/pdf/index.vue.mjs";
 import merge from "../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/merge.mjs";
@@ -20,9 +19,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const tdTheme = useTheme();
-    const { t } = useConfig("wrapper");
+    const SVG_PLACEHOLDER_PNG = (() => {
+      if (typeof document === "undefined") return "";
+      const canvas = document.createElement("canvas");
+      canvas.width = 800;
+      canvas.height = 600;
+      return canvas.toDataURL("image/png");
+    })();
     const rootRef = ref();
     const imageViewerVisible = ref(false);
+    const svgReady = ref(false);
     const isPdf = computed(() => {
       const { file, src } = props;
       if (file) {
@@ -35,6 +41,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return false;
     });
+    const isSvg = computed(() => {
+      const { file, src } = props;
+      if (file) {
+        if ("type" in file && file.type === "image/svg+xml") return true;
+        if ("name" in file && file.name.endsWith(".svg")) return true;
+      }
+      if (src) {
+        const pathname = new URL(src, "https://x").pathname;
+        if (pathname.endsWith(".svg")) return true;
+      }
+      return false;
+    });
     const fileType = computed(() => {
       const { file, src } = props;
       if (file && "type" in file && file.type) return file.type;
@@ -48,23 +66,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (src) return src;
       return void 0;
     });
-    const imageViewerImages = computed(
-      () => imageViewerSource.value ? [imageViewerSource.value] : []
-    );
+    const imageViewerImages = computed(() => {
+      const source = imageViewerSource.value;
+      if (!source) return [];
+      if (isSvg.value) {
+        return svgReady.value ? [{ mainImage: source, thumbnail: source, isSvg: true }] : [SVG_PLACEHOLDER_PNG];
+      }
+      return [source];
+    });
     const useImageViewer = computed(() => isImageFile.value && !!imageViewerSource.value);
     const resolvedAttach = computed(() => {
       if (rootRef.value) return () => rootRef.value;
       return "body";
     });
     watch(
-      useImageViewer,
-      (val) => {
-        if (!val) {
+      [useImageViewer, imageViewerSource],
+      () => {
+        if (!useImageViewer.value) {
           imageViewerVisible.value = false;
+          svgReady.value = false;
           return;
         }
+        svgReady.value = false;
         nextTick(() => {
           imageViewerVisible.value = true;
+          nextTick(() => {
+            svgReady.value = true;
+          });
         });
       },
       { immediate: true }

package/dist/components/multi-file-viewer/index.vue.mjs

@@ -32,6 +32,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const imageViewerIndex = ref(0);
     const { t } = useConfig("multiFileViewer");
     const { t: wrapperT } = useConfig("wrapper");
+    const SVG_PLACEHOLDER_PNG = (() => {
+      if (typeof document === "undefined") return "";
+      const canvas = document.createElement("canvas");
+      canvas.width = 800;
+      canvas.height = 600;
+      return canvas.toDataURL("image/png");
+    })();
+    const svgReady = ref(false);
     const mergedProps = computed(() => ({
       ...props,
       ...runtimeOverrides.value
@@ -64,7 +72,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     const useImageViewer = computed(() => allFilesAreImages.value && !fileViewerOnly.value);
     const imageViewerImages = computed(
-      () => (mergedProps.value.files ?? []).map((item) => resolveImageViewerSource(item) ?? "")
+      () => (mergedProps.value.files ?? []).map((item) => {
+        const source = resolveImageViewerSource(item);
+        if (isSvgItem(item) && source) {
+          return svgReady.value ? { mainImage: source, thumbnail: source, isSvg: true } : SVG_PLACEHOLDER_PNG;
+        }
+        return source ?? "";
+      })
     );
     const resolvedAttach = computed(() => mergedProps.value.attach ?? wrapperT("attach") ?? "body");
     const isDialog = computed(() => mergedProps.value.wrapper !== false && !useImageViewer.value);
@@ -92,6 +106,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (item.src) return item.src;
       return void 0;
     }
+    function isSvgItem(item) {
+      const file = item.file;
+      if (file) {
+        if ("type" in file && file.type === "image/svg+xml") return true;
+        if ("name" in file && file.name.endsWith(".svg")) return true;
+      }
+      if (item.src) {
+        const pathname = new URL(item.src, "https://x").pathname;
+        if (pathname.endsWith(".svg")) return true;
+      }
+      return false;
+    }
     function normalizeIndex(index, files) {
       if (!files?.length) return 0;
       if (index === void 0 || index < 0 || index >= files.length) return 0;
@@ -121,9 +147,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       activeIndex.value = normalizeIndex(mergedProps.value.index, mergedProps.value.files);
       if (useImageViewer.value) {
         imageViewerIndex.value = activeIndex.value;
+        svgReady.value = false;
         imageViewerVisible.value = false;
         nextTick(() => {
           imageViewerVisible.value = true;
+          nextTick(() => {
+            svgReady.value = true;
+          });
         });
         return;
       }
@@ -131,6 +161,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       nextTick(() => dialogRef.value?.show());
     }
     function hide() {
+      svgReady.value = false;
       if (imageViewerVisible.value) imageViewerVisible.value = false;
       if (!isDialog.value) return;
       dialogRef.value?.hide();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qidian-vue-ui",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "基于 TDesign 的 QiDian Vue UI 组件库",
   "author": "qidian",
   "license": "MIT",