yahee-components 0.0.87 → 0.0.89

package/es/scale-screen/scale-screen.vue.js

@@ -1,130 +1,23 @@
-import { defineComponent as z, reactive as k, ref as v, watch as T, onMounted as L, nextTick as S, onUnmounted as _, createElementBlock as j, openBlock as B, createElementVNode as b, normalizeStyle as x, renderSlot as E } from "vue";
-const M = { class: "yahee-scale-screen" }, O = /* @__PURE__ */ z({
-  __name: "scale-screen",
-  props: {
-    width: {
-      type: [String, Number],
-      default: 1920
-    },
-    height: {
-      type: [String, Number],
-      default: 1080
-    },
-    fullScreen: {
-      type: Boolean,
-      default: !1
-    },
-    autoScale: {
-      type: [Object, Boolean],
-      default: !0
-    },
-    delay: {
-      type: Number,
-      default: 500
-    },
-    boxStyle: {
-      type: Object,
-      default: () => ({})
-    },
-    wrapperStyle: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(h) {
-    function W(i, l) {
-      let o;
-      return function(...a) {
-        o && clearTimeout(o), o = setTimeout(
-          () => {
-            typeof i == "function" && i.apply(null, a), clearTimeout(o);
-          },
-          l > 0 ? l : 100
-        );
-      };
-    }
-    const n = h, e = k({
-      width: 0,
-      height: 0,
-      originalWidth: 0,
-      originalHeight: 0,
-      observer: null
-    }), g = {
-      box: {
-        overflow: "hidden",
-        backgroundSize: "100% 100%",
-        background: "#000",
-        width: "100vw",
-        height: "100vh"
-      },
-      wrapper: {
-        transitionProperty: "all",
-        transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
-        transitionDuration: "500ms",
-        position: "relative",
-        overflow: "hidden",
-        zIndex: 100,
-        transformOrigin: "left top"
-      }
-    }, t = v(), d = v();
-    T(
-      () => n.autoScale,
-      async (i) => {
-        i ? (u(), w()) : (m(), H());
-      }
-    );
-    const f = () => new Promise((i) => {
-      d.value.scrollLeft = 0, d.value.scrollTop = 0, S(() => {
-        var l, o;
-        n.width && n.height ? (e.width = n.width, e.height = n.height) : (e.width = (l = t.value) == null ? void 0 : l.clientWidth, e.height = (o = t.value) == null ? void 0 : o.clientHeight), (!e.originalHeight || !e.originalWidth) && (e.originalWidth = window.screen.width, e.originalHeight = window.screen.height), i();
-      });
-    }), p = () => {
-      e.width && e.height ? (t.value.style.width = `${e.width}px`, t.value.style.height = `${e.height}px`) : (t.value.style.width = `${e.originalWidth}px`, t.value.style.height = `${e.originalHeight}px`);
-    }, H = () => {
-      t.value && (t.value.style.transform = "", t.value.style.margin = "");
-    }, $ = (i) => {
-      if (!n.autoScale)
-        return;
-      const l = t.value.clientWidth, o = t.value.clientHeight, a = document.body.clientWidth, c = document.body.clientHeight;
-      t.value.style.transform = `scale(${i},${i})`;
-      let r = Math.max((a - l * i) / 2, 0), s = Math.max((c - o * i) / 2, 0);
-      typeof n.autoScale == "object" && (!n.autoScale.x && (r = 0), !n.autoScale.y && (s = 0)), t.value.style.margin = `${s}px ${r}px`;
-    }, y = () => {
-      const i = document.body.clientWidth, l = document.body.clientHeight, o = e.width || e.originalWidth, a = e.height || e.originalHeight, c = i / +o, r = l / +a;
-      if (n.fullScreen)
-        return t.value.style.transform = `scale(${c},${r})`, !1;
-      const s = Math.min(c, r);
-      $(s);
-    }, u = W(async () => {
-      await f(), p(), y();
-    }, n.delay), m = () => {
-      window.removeEventListener("resize", u);
-    }, w = () => {
-      window.addEventListener("resize", u);
-    };
-    return L(() => {
-      S(async () => {
-        await f(), p(), y(), w();
-      });
-    }), _(() => {
-      m();
-    }), (i, l) => (B(), j("div", M, [
-      b("section", {
-        style: x({ ...g.box, ...h.boxStyle }),
-        ref_key: "box",
-        ref: d
+import s from "./scale-screen.vue2.js";
+import { createElementBlock as n, openBlock as l, createElementVNode as o, normalizeStyle as t, renderSlot as a } from "vue";
+import m from "../_virtual/_plugin-vue_export-helper.js";
+const p = { class: "yahee-scale-screen" };
+function f(c, i, e, r, _, d) {
+  return l(), n("div", p, [
+    o("section", {
+      style: t({ ...r.styles.box, ...e.boxStyle }),
+      ref: "box"
+    }, [
+      o("div", {
+        style: t({ ...r.styles.wrapper, ...e.wrapperStyle }),
+        ref: "screenWrapper"
       }, [
-        b("div", {
-          style: x({ ...g.wrapper, ...h.wrapperStyle }),
-          ref_key: "screenWrapper",
-          ref: t
-        }, [
-          E(i.$slots, "default")
-        ], 4)
+        a(c.$slots, "default")
       ], 4)
-    ]));
-  }
-});
+    ], 4)
+  ]);
+}
+const b = /* @__PURE__ */ m(s, [["render", f], ["__file", "E:/工作/项目代码/common_componentsweb/packages/components/src/scale-screen/scale-screen.vue"]]);
 export {
-  O as default
+  b as default
 };

package/es/scale-screen/scale-screen.vue2.js

@@ -1,4 +1,127 @@
-import f from "./scale-screen.vue.js";
+import { defineComponent as z, reactive as O, ref as S, watch as M, onMounted as T, nextTick as x, onUnmounted as j } from "vue";
+const k = /* @__PURE__ */ z({
+  __name: "scale-screen",
+  props: {
+    width: {
+      type: [String, Number],
+      default: 1920
+    },
+    height: {
+      type: [String, Number],
+      default: 1080
+    },
+    fullScreen: {
+      type: Boolean,
+      default: !1
+    },
+    autoScale: {
+      type: [Object, Boolean],
+      default: !0
+    },
+    delay: {
+      type: Number,
+      default: 500
+    },
+    boxStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    wrapperStyle: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(W, { expose: H }) {
+    H();
+    function m(i, o) {
+      let r;
+      return function(...l) {
+        r && clearTimeout(r), r = setTimeout(
+          () => {
+            typeof i == "function" && i.apply(null, l), clearTimeout(r);
+          },
+          o > 0 ? o : 100
+        );
+      };
+    }
+    const n = W, e = O({
+      width: 0,
+      height: 0,
+      originalWidth: 0,
+      originalHeight: 0,
+      observer: null
+    }), _ = {
+      box: {
+        overflow: "hidden",
+        backgroundSize: "100% 100%",
+        background: "#000",
+        width: "100vw",
+        height: "100vh"
+      },
+      wrapper: {
+        transitionProperty: "all",
+        transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+        transitionDuration: "500ms",
+        position: "relative",
+        overflow: "hidden",
+        zIndex: 100,
+        transformOrigin: "left top"
+      }
+    }, t = S(), h = S();
+    M(
+      () => n.autoScale,
+      async (i) => {
+        i ? (a(), y()) : (f(), v());
+      }
+    );
+    const d = () => new Promise((i) => {
+      h.value.scrollLeft = 0, h.value.scrollTop = 0, x(() => {
+        var o, r;
+        n.width && n.height ? (e.width = n.width, e.height = n.height) : (e.width = (o = t.value) == null ? void 0 : o.clientWidth, e.height = (r = t.value) == null ? void 0 : r.clientHeight), (!e.originalHeight || !e.originalWidth) && (e.originalWidth = window.screen.width, e.originalHeight = window.screen.height), i();
+      });
+    }), g = () => {
+      e.width && e.height ? (t.value.style.width = `${e.width}px`, t.value.style.height = `${e.height}px`) : (t.value.style.width = `${e.originalWidth}px`, t.value.style.height = `${e.originalHeight}px`);
+    }, v = () => {
+      t.value && (t.value.style.transform = "", t.value.style.margin = "");
+    }, w = (i) => {
+      if (!n.autoScale)
+        return;
+      const o = t.value.clientWidth, r = t.value.clientHeight, l = document.body.clientWidth, s = document.body.clientHeight;
+      t.value.style.transform = `scale(${i},${i})`;
+      let c = Math.max((l - o * i) / 2, 0), u = Math.max((s - r * i) / 2, 0);
+      typeof n.autoScale == "object" && (!n.autoScale.x && (c = 0), !n.autoScale.y && (u = 0)), t.value.style.margin = `${u}px ${c}px`;
+    }, p = () => {
+      const i = document.body.clientWidth, o = document.body.clientHeight, r = e.width || e.originalWidth, l = e.height || e.originalHeight, s = i / +r, c = o / +l;
+      if (n.fullScreen)
+        return t.value.style.transform = `scale(${s},${c})`, !1;
+      const u = Math.min(s, c);
+      w(u);
+    }, a = m(async () => {
+      await d(), g(), p();
+    }, n.delay), $ = () => {
+      (e.observer = new MutationObserver(() => {
+        a();
+      })).observe(t.value, {
+        attributes: !0,
+        attributeFilter: ["style"],
+        attributeOldValue: !0
+      });
+    }, f = () => {
+      window.removeEventListener("resize", a);
+    }, y = () => {
+      window.addEventListener("resize", a);
+    };
+    T(() => {
+      x(async () => {
+        await d(), g(), p(), y();
+      });
+    }), j(() => {
+      f();
+    });
+    const b = { debounce: m, props: n, state: e, styles: _, screenWrapper: t, box: h, initSize: d, updateSize: g, clearScreenWrapperStyle: v, autoScale: w, updateScale: p, onResize: a, initMutationObserver: $, clearListener: f, addListener: y };
+    return Object.defineProperty(b, "__isScriptSetup", { enumerable: !1, value: !0 }), b;
+  }
+});
 export {
-  f as default
+  k as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "yahee-components",
   "private": false,
-  "version": "0.0.87",
+  "version": "0.0.89",
   "description": "深圳前海亚讯前端组件库",
   "main": "lib",
   "module": "es",