fangguo-component 1.2.5 → 1.2.6

package/dist/{ViewImgPopover-BtFnYval.js → ViewImgPopover-koNFPgjR.js}

@@ -36,7 +36,8 @@ import { V as ViewImgErrorFallback, F as FgViewImg, u as useViewImgDefaults } fr
 import { h as hasPlatformImageResizeParams, m as montageImgUrl } from "./montageImgUrl-B9ZmJ7TF.js";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
 const HOVER_POPOVER_PADDING = 10;
-const HOVER_POPOVER_MAX_HEIGHT = 400;
+const DEFAULT_HOVER_BOX_WIDTH = 400;
+const DEFAULT_HOVER_BOX_HEIGHT = 380;
 const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
   inheritAttrs: false
 }), {
@@ -62,7 +63,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     maxScale: {},
     showProgress: { type: Boolean },
     toolbarBgColor: {},
-    backgroundColor: {},
+    hoverBackgroundColor: {},
+    hoverBoxWidth: {},
+    hoverBoxHeight: {},
     toolbarIconColor: {},
     simpleExtraTools: {},
     renderExtraTools: {},
@@ -118,6 +121,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
         return ((_a = props.fallbackColor) == null ? void 0 : _a.trim()) || ((_b = props.loadingIconColor) == null ? void 0 : _b.trim()) || viewImgDefaults.loadingIconColor || "";
       }
     );
+    const resolvedHoverBackgroundColor = computed(() => {
+      var _a;
+      return ((_a = props.hoverBackgroundColor) == null ? void 0 : _a.trim()) || "";
+    });
     const shouldEnableReferencePreview = computed(() => {
       var _a;
       return props.preview || !!((_a = props.previewSrcList) == null ? void 0 : _a.length);
@@ -133,7 +140,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
         showPreviewIcon: _spi,
         showHoverOnError: _shoe,
         loadingIconColor: _lic,
-        fallbackColor: _fc
+        fallbackColor: _fc,
+        hoverBackgroundColor: _hbc,
+        hoverBoxWidth: _hbw,
+        hoverBoxHeight: _hbh
       } = _a, rest = __objRest(_a, [
         "hoverSrc",
         "previewSrc",
@@ -144,7 +154,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
         "showPreviewIcon",
         "showHoverOnError",
         "loadingIconColor",
-        "fallbackColor"
+        "fallbackColor",
+        "hoverBackgroundColor",
+        "hoverBoxWidth",
+        "hoverBoxHeight"
       ]);
       return __spreadProps(__spreadValues({}, rest), {
         fallbackColor: resolvedFallbackColor.value,
@@ -152,7 +165,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
       });
     });
     const referenceViewImgBind = computed(() => {
-      const _a = attrs, { class: _class, style: _style } = _a, rest = __objRest(_a, ["class", "style"]);
+      const _a = attrs, {
+        class: _class,
+        style: _style,
+        backgroundColor: _backgroundColor,
+        "background-color": _backgroundColorKebab
+      } = _a, rest = __objRest(_a, [
+        "class",
+        "style",
+        "backgroundColor",
+        "background-color"
+      ]);
       return __spreadValues(__spreadValues({}, rest), viewImgProps.value);
     });
     const handlePreviewIconClick = () => {
@@ -165,9 +188,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
       if (typeof extra === "string") return extra;
       return __spreadValues(__spreadValues({}, base), extra);
     };
-    const HOVER_POPOVER_MAX_HEIGHT_CSS = `${HOVER_POPOVER_MAX_HEIGHT}px`;
-    const HOVER_IMAGE_MAX_HEIGHT_CSS = `${HOVER_POPOVER_MAX_HEIGHT - HOVER_POPOVER_PADDING * 2}px`;
     const DEFAULT_HOVER_IMG_SIZE = { h: 420 };
+    const formatCssSize = (size) => typeof size === "number" ? `${size}px` : size;
+    const resolvedHoverBoxWidth = computed(() => {
+      var _a, _b;
+      const width = (_b = props.hoverBoxWidth) != null ? _b : (_a = props.hoverPopoverProps) == null ? void 0 : _a.width;
+      return width != null ? width : DEFAULT_HOVER_BOX_WIDTH;
+    });
+    const resolvedHoverBoxHeightCss = computed(
+      () => {
+        var _a;
+        return formatCssSize((_a = props.hoverBoxHeight) != null ? _a : DEFAULT_HOVER_BOX_HEIGHT);
+      }
+    );
+    const resolvedHoverPopoverMaxHeight = computed(
+      () => `calc(${resolvedHoverBoxHeightCss.value} + ${HOVER_POPOVER_PADDING * 2}px)`
+    );
     const defaultSlotPayload = computed(() => {
       var _a, _b;
       return {
@@ -188,17 +224,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     );
     const hoverPopoverPropsMerged = computed(() => {
       var _a;
-      const _b = (_a = props.hoverPopoverProps) != null ? _a : {}, { popperStyle: userPopperStyle, popperClass: userPopperClass } = _b, restHoverPopoverProps = __objRest(_b, ["popperStyle", "popperClass"]);
+      const _b = (_a = props.hoverPopoverProps) != null ? _a : {}, {
+        width: _userWidth,
+        popperStyle: userPopperStyle,
+        popperClass: userPopperClass
+      } = _b, restHoverPopoverProps = __objRest(_b, [
+        "width",
+        "popperStyle",
+        "popperClass"
+      ]);
       const popperClass = [userPopperClass, "fg-view-img-popover"].filter(Boolean).join(" ");
       return __spreadValues({
         placement: "right",
         trigger: "hover",
-        width: 400,
+        width: resolvedHoverBoxWidth.value,
         teleported: true,
         popperClass,
         popperStyle: mergePopperStyle(
           {
-            maxHeight: HOVER_POPOVER_MAX_HEIGHT_CSS,
+            maxHeight: resolvedHoverPopoverMaxHeight.value,
             overflow: "hidden",
             padding: `${HOVER_POPOVER_PADDING}px`,
             boxSizing: "border-box"
@@ -263,7 +307,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     });
     const hoverImgStyle = computed(() => ({
       width: "100%",
-      height: HOVER_IMAGE_MAX_HEIGHT_CSS
+      height: resolvedHoverBoxHeightCss.value,
+      backgroundColor: resolvedHoverBackgroundColor.value || void 0
+    }));
+    const hoverWatermarkStyle = computed(() => ({
+      width: "100%",
+      height: resolvedHoverBoxHeightCss.value,
+      maxHeight: resolvedHoverBoxHeightCss.value
     }));
     return (_ctx, _cache) => {
       const _component_el_watermark = ElWatermark;
@@ -334,6 +384,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                 ], 4)) : (openBlock(), createBlock(_component_el_watermark, {
                   key: 1,
                   class: "fg-view-img-popover__watermark",
+                  style: normalizeStyle(hoverWatermarkStyle.value),
                   content: [resolvedWaterMarkTitle.value],
                   gap: [10, 10],
                   font: { fontSize: 16, color: "rgba(0, 0, 0, 0.3)" }
@@ -356,7 +407,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                     ], 4)
                   ]),
                   _: 3
-                }, 8, ["content"]))
+                }, 8, ["style", "content"]))
               ], 64)) : !__props.isShowWatermark ? (openBlock(), createBlock(FgViewImg, {
                 key: 1,
                 class: "fg-view-img-popover__hover-image",
@@ -395,6 +446,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
               ]), 1032, ["src", "style", "fallback-color", "error-text", "loading"])) : (openBlock(), createBlock(_component_el_watermark, {
                 key: 2,
                 class: "fg-view-img-popover__watermark",
+                style: normalizeStyle(hoverWatermarkStyle.value),
                 content: [resolvedWaterMarkTitle.value],
                 gap: [10, 10],
                 font: { fontSize: 16, color: "rgba(0, 0, 0, 0.3)" }
@@ -437,7 +489,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                   ]), 1032, ["src", "style", "fallback-color", "error-text", "loading"])
                 ]),
                 _: 3
-              }, 8, ["content"]))
+              }, 8, ["style", "content"]))
             ], 64)) : createCommentVNode("", true)
           ]),
           _: 3
@@ -457,7 +509,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     };
   }
 }));
-const ViewImgPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fe90e338"]]);
+const ViewImgPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0c64a317"]]);
 export {
   ViewImgPopover as V
 };

package/dist/ViewImgPopover.css

@@ -1,12 +1,12 @@
 @charset "UTF-8";
 /* :where 降低默认宽高优先级，避免压过外部 Tailwind 等工具类（如 w-[200px]） */
-:where(.fg-view-img-popover__reference[data-v-fe90e338]) {
+:where(.fg-view-img-popover__reference[data-v-0c64a317]) {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
 }
-.fg-view-img-popover__preview-icon[data-v-fe90e338] {
+.fg-view-img-popover__preview-icon[data-v-0c64a317] {
   position: absolute;
   top: 4px;
   right: 4px;
@@ -18,21 +18,21 @@
   color: var(--el-text-color-primary);
   cursor: pointer;
 }
-.fg-view-img-popover__preview-icon[data-v-fe90e338]:hover {
+.fg-view-img-popover__preview-icon[data-v-0c64a317]:hover {
   color: var(--el-color-primary);
 }
-.fg-view-img-popover__hover-image[data-v-fe90e338] {
+.fg-view-img-popover__hover-image[data-v-0c64a317] {
   display: block;
   vertical-align: top;
   background: #7f7f7f;
 }
-.fg-view-img-popover__hover-image[data-v-fe90e338] .fg-view-img__inner {
+.fg-view-img-popover__hover-image[data-v-0c64a317] .fg-view-img__inner {
   width: 100%;
   height: 100%;
   object-fit: contain;
 }
-.fg-view-img-popover__hover-image[data-v-fe90e338] .fg-view-img__placeholder,
-.fg-view-img-popover__hover-image[data-v-fe90e338] .fg-view-img__error {
+.fg-view-img-popover__hover-image[data-v-0c64a317] .fg-view-img__placeholder,
+.fg-view-img-popover__hover-image[data-v-0c64a317] .fg-view-img__error {
   position: absolute;
   inset: 0;
   display: flex;
@@ -41,7 +41,7 @@
   background: #f5f7fa;
   line-height: 1.4;
 }
-.fg-view-img-popover__hover-error[data-v-fe90e338] {
+.fg-view-img-popover__hover-error[data-v-0c64a317] {
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/components/index.js

@@ -32,7 +32,7 @@ import { S as S2 } from "../SelectTree-BHvvkiQi.js";
 import { S as S3 } from "../SvgIcon-DIg0upEk.js";
 import { T } from "../TextCopy-lpbeqOUI.js";
 import { F, V, c as c2, r as r2, u } from "../ViewImg-CLRjYOUN.js";
-import { V as V2 } from "../ViewImgPopover-BtFnYval.js";
+import { V as V2 } from "../ViewImgPopover-koNFPgjR.js";
 import { I, P, g as g2, u as u2, a as a2 } from "../imgViewerStore-Ajm-L7R5.js";
 import { V as V3 } from "../VirtualTable-Cm_L7q9W.js";
 export {

package/dist/components/viewImgPopover/ViewImgPopover.vue.d.ts

@@ -2,6 +2,7 @@ import { VNode } from 'vue';
 import { ImgSizeOptions } from '../../tools/imgUrl';
 import { OriginalToolbarItem, SimpleCustomTool, PreviewShowPayload, PreviewSideNav } from '../viewImgPreview/types';
 type ObjectFit = "fill" | "contain" | "cover" | "none" | "scale-down" | "";
+type CssSize = string | number;
 type __VLS_Props = {
     /** 图片地址 */
     src?: string;
@@ -43,8 +44,12 @@ type __VLS_Props = {
     showProgress?: boolean;
     /** 预览工具栏背景色 */
     toolbarBgColor?: string;
-    /** 兼容旧字段，等同 `toolbarBgColor` */
-    backgroundColor?: string;
+    /** 悬停 Popover 大图背景色 */
+    hoverBackgroundColor?: string;
+    /** 悬停 Popover 大图盒子宽度；默认保持当前 400 */
+    hoverBoxWidth?: CssSize;
+    /** 悬停 Popover 大图盒子高度；默认保持当前 380px */
+    hoverBoxHeight?: CssSize;
     /** 预览工具栏图标/文字颜色 */
     toolbarIconColor?: string;
     /** 预览工具栏自定义工具 */

package/dist/components/viewImgPopover/index.js

@@ -1,4 +1,4 @@
-import { V } from "../../ViewImgPopover-BtFnYval.js";
+import { V } from "../../ViewImgPopover-koNFPgjR.js";
 export {
   V as FgViewImgPopover
 };

package/dist/{index-wDrpgKQT.js → index-CNW8PtZ1.js}

@@ -32,7 +32,7 @@ import { S as SelectTree } from "./SelectTree-BHvvkiQi.js";
 import { S as SvgIcon } from "./SvgIcon-DIg0upEk.js";
 import { T as TextCopy } from "./TextCopy-lpbeqOUI.js";
 import { F as FgViewImg, V as ViewImgErrorFallback, c as configureViewImgDefaults, r as resetViewImgDefaults, u as useViewImgDefaults } from "./ViewImg-CLRjYOUN.js";
-import { V as ViewImgPopover } from "./ViewImgPopover-BtFnYval.js";
+import { V as ViewImgPopover } from "./ViewImgPopover-koNFPgjR.js";
 import { I as ImgViewerStore, P as PREVIEW_BASE_Z_INDEX, g as getDialogZindex, u as useImgViewerState, a as useImgViewerStore } from "./imgViewerStore-Ajm-L7R5.js";
 import { V as VirtualTable } from "./VirtualTable-Cm_L7q9W.js";
 const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({

package/dist/index.js

@@ -14,7 +14,7 @@ var __spreadValues = (a10, b4) => {
     }
   return a10;
 };
-import { c as components } from "./index-wDrpgKQT.js";
+import { c as components } from "./index-CNW8PtZ1.js";
 import { t as tools } from "./index-DsfY1yqo.js";
 import { d as directives } from "./index-CSMWzzp0.js";
 import { h as hooks } from "./index-DfQiknXJ.js";
@@ -55,7 +55,7 @@ import { S as S2 } from "./SelectTree-BHvvkiQi.js";
 import { S as S3 } from "./SvgIcon-DIg0upEk.js";
 import { T } from "./TextCopy-lpbeqOUI.js";
 import { F, V, c as c2, r as r3, u } from "./ViewImg-CLRjYOUN.js";
-import { V as V2 } from "./ViewImgPopover-BtFnYval.js";
+import { V as V2 } from "./ViewImgPopover-koNFPgjR.js";
 import { I, P, g as g3, u as u2, a as a3 } from "./imgViewerStore-Ajm-L7R5.js";
 import { V as V3 } from "./VirtualTable-Cm_L7q9W.js";
 import { a as a4, b as b3, c as c3, d as d3, e as e3, f as f3, g as g4, h as h3, i as i3, j as j3, k as k3, l as l4, m as m2, n as n2, o as o2, p, q, r as r4, s as s2, t as t2, u as u3, v, w, x, y, z, A, B as B2, C as C4, D as D4, E as E2, F as F2, G, H as H3, I as I2, J, K, L as L3, M as M3, N as N2, O, P as P2, Q, R, S as S4, T as T2, U, V as V4, W, X, Y, Z, _ as _17, $, a0, a1, a2 as a22, a3 as a32, a4 as a42, a5, a6, a7, a8, a9, aa, ab, ac, ad, ae, af, ag, ah, ai, aj, ak, al, am, an, ao, ap, aq, ar, as } from "./common-D0EYVGB2.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fangguo-component",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "",
   "type": "module",
   "main": "dist/index.js",