zf-dbs 1.0.0 → 2.0.0

package/dist/chunks/{8_X11dDX.mjs → Ck0Cdfr_.mjs}

@@ -1,4 +1,4 @@
-import { Z as e } from "./CIg5yiwu.mjs";
+import { Z as e } from "./DbOTUn3A.mjs";
 const t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   ZfScaleContainer: e,

package/dist/chunks/DbOTUn3A.mjs

@@ -0,0 +1,133 @@
+import { defineComponent as v, ref as c, onMounted as w, onBeforeUnmount as $, computed as x, openBlock as _, createElementBlock as b, createElementVNode as E, normalizeStyle as F, unref as S, renderSlot as z, nextTick as O } from "vue";
+import { _ as y } from "./CHgC5LLL.mjs";
+const M = /* @__PURE__ */ v({
+  __name: "zf-scale-container",
+  props: {
+    width: { default: void 0 },
+    height: { default: void 0 },
+    mode: { default: "aspectFit" }
+  },
+  setup(f) {
+    const t = f, r = c(null), a = c(0), i = c(0);
+    let s = !1;
+    const o = () => {
+      s || (s = !0, O(() => {
+        a.value = r.value?.clientWidth || 0, i.value = r.value?.clientHeight || 0, s = !1;
+      }));
+    };
+    w(() => {
+      window.addEventListener("resize", o), o();
+    }), $(() => {
+      window.removeEventListener("resize", o);
+    });
+    const m = {
+      // 自适应模式
+      adaptive(e) {
+        const n = a.value / t.width, l = i.value / t.height, h = e ?? a.value < i.value, p = h ? n : l, d = h ? t.width : a.value / l, u = h ? i.value / n : t.height;
+        return d < t.width || u < t.height ? Math.abs(n - l) > 0.2 ? this.aspectFit() : this.scaleToFill() : {
+          width: `${d}px`,
+          height: `${u}px`,
+          transform: `scale(${p}, ${p}) translate(-50%, -50%)`,
+          transformOrigin: "0 0",
+          position: "absolute",
+          top: "50%",
+          left: "50%"
+        };
+      },
+      adaptiveX() {
+        return this.adaptive(!1);
+      },
+      adaptiveY() {
+        return this.adaptive(!0);
+      },
+      // 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满元素
+      scaleToFill() {
+        const e = a.value / t.width, n = i.value / t.height;
+        return {
+          width: `${t.width}px`,
+          height: `${t.height}px`,
+          transform: `scale(${e}, ${n})`,
+          transformOrigin: "0 0"
+        };
+      },
+      // 保持纵横比缩放模式
+      aspectFit() {
+        const e = Math.min(a.value / t.width, i.value / t.height);
+        return {
+          width: `${t.width}px`,
+          height: `${t.height}px`,
+          transform: `scale(${e}, ${e}) translate(-50%, -50%)`,
+          transformOrigin: "0 0",
+          position: "absolute",
+          top: "50%",
+          left: "50%"
+        };
+      },
+      // 保持纵横比缩放模式
+      aspectFill() {
+        const e = Math.max(a.value / t.width, i.value / t.height);
+        return {
+          width: `${t.width}px`,
+          height: `${t.height}px`,
+          transform: `scale(${e}, ${e}) translate(-50%, -50%)`,
+          transformOrigin: "0 0",
+          position: "absolute",
+          top: "50%",
+          left: "50%"
+        };
+      },
+      // 宽度不变，高度自动变化，保持原图宽高比不变，只保证图片的宽度能完全显示出来。
+      widthFix() {
+        const e = a.value / t.width;
+        return {
+          width: `${t.width}px`,
+          height: `${t.height}px`,
+          transform: `scale(${e}, ${e}) translate(-50%, -50%)`,
+          transformOrigin: "0 0",
+          position: "absolute",
+          top: "50%",
+          left: "50%"
+        };
+      },
+      // 高度不变，宽度自动变化，保持原图宽高比不变，只保证图片的高度能完全显示出来。
+      heightFix() {
+        const e = i.value / t.height;
+        return {
+          width: `${t.width}px`,
+          height: `${t.height}px`,
+          transform: `scale(${e}, ${e}) translate(-50%, -50%)`,
+          transformOrigin: "0 0",
+          position: "absolute",
+          top: "50%",
+          left: "50%"
+        };
+      },
+      // 裁剪模式，不缩放图片，只显示图片的中间区域。
+      center() {
+        return {
+          width: `${t.width}px`,
+          height: `${t.height}px`,
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)"
+        };
+      }
+    }, g = x(() => m[t.mode]?.() ?? {});
+    return (e, n) => (_(), b("div", {
+      ref_key: "containerElement",
+      ref: r,
+      class: "zf-scale-container"
+    }, [
+      E("div", {
+        class: "zf-scale-wrapper",
+        style: F(S(g))
+      }, [
+        z(e.$slots, "default", {}, void 0, !0)
+      ], 4)
+    ], 512));
+  }
+}), L = /* @__PURE__ */ y(M, [["__scopeId", "data-v-21eb743f"]]);
+export {
+  L as Z
+};