@zhsz/cool-design-dv/lib/packages/dv-page/Page.vue.js

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const vue$1 = require("@iconify/vue");
const index = require("../../symbols/index.js");
const lodashEs = require("lodash-es");
const bom = require("../../utils/bom.js");
const resizeEvent = require("../../utils/resize-event.js");
const util = require("../../utils/util.js");
const useConfig = require("../../hooks/useConfig.js");
require("./style.css");
const _hoisted_1 = {
  key: 0,
  class: "my-dv-page__fullscreen"
};
const __default__ = vue.defineComponent({
  name: "DvPage"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: {
    lock: { type: Boolean },
    scale: { type: Boolean, default: true },
    width: { default: 1920 },
    height: { default: 1080 },
    activeIndex: { default: 0 },
    target: { type: [String, Function], default: () => document.body },
    fit: { type: Boolean },
    fullscreen: { type: Boolean },
    layout: { default: "horizontal" },
    config: {}
  },
  setup(__props) {
    const WRAPPER_CLASS_NAME = "my-dv-page__wrapper";
    const props = __props;
    const { settings } = useConfig.useConfig(props.config);
    const dvPage = vue.ref();
    const proxyResize = vue.ref();
    const screens = vue.ref([]);
    const screenActiveIndex = vue.computed(() => {
      return props.activeIndex;
    });
    const _uid = vue.ref(util.uid());
    const widthScale = vue.ref(1);
    const heightScale = vue.ref(1);
    const isFullScreen = vue.ref(false);
    const warpper = vue.ref();
    const styles = vue.computed(() => {
      return props.fit ? {
        width: "100%",
        height: "100%",
        transform: "translateX(-50%) translateY(-50%)"
      } : {
        width: `${props.width}px`,
        height: `${props.height}px`,
        transform: `scaleX(${widthScale.value}) scaleY(${heightScale.value}) translateX(-50%) translateY(-50%)`
      };
    });
    function getTarget() {
      let target;
      switch (typeof props.target) {
        case "string":
          target = props.target === "parent" ? dvPage.value.parentNode : document.querySelector(props.target);
          break;
        case "function":
          target = props.target();
          break;
        default:
          target = props.target;
          break;
      }
      return target || document.body;
    }
    function resize() {
      if (!props.scale || props.fit) {
        widthScale.value = 1;
        heightScale.value = 1;
        return;
      }
      const { clientWidth, clientHeight } = warpper.value || {};
      if (!clientWidth || !clientHeight)
        return;
      if (props.lock) {
        if (props.layout === "horizontal") {
          heightScale.value = widthScale.value = clientWidth / props.width;
        } else {
          heightScale.value = widthScale.value = clientHeight / props.height;
        }
      } else {
        widthScale.value = clientWidth / props.width;
        heightScale.value = clientHeight / props.height;
      }
    }
    function fullScreen() {
      const el = getTarget();
      bom.fullScreen(el);
      isFullScreen.value = true;
    }
    function exitFullScreen() {
      bom.exitFullScreen();
      isFullScreen.value = false;
    }
    vue.onMounted(() => {
      warpper.value = getTarget();
      bom.addClass(warpper.value, WRAPPER_CLASS_NAME + _uid.value);
      proxyResize.value = lodashEs.debounce(resize, 100);
      resizeEvent.addResizeListener(warpper.value, proxyResize.value);
      resize();
      isFullScreen.value = props.fullscreen ? bom.isFullScreen() : false;
    });
    vue.onBeforeUnmount(() => {
      proxyResize.value && resizeEvent.removeResizeListener(warpper.value, proxyResize.value);
      bom.removeClass(warpper.value, WRAPPER_CLASS_NAME + _uid.value);
    });
    vue.watch(
      () => props,
      () => {
        resize();
      },
      {
        deep: true,
        immediate: true
      }
    );
    vue.provide(index.dvPageSymbols, {
      widthScale,
      heightScale,
      settings,
      screens,
      screenActiveIndex
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        class: "my-dv-page",
        style: vue.normalizeStyle(styles.value),
        ref_key: "dvPage",
        ref: dvPage
      }, [
        vue.renderSlot(_ctx.$slots, "default"),
        _ctx.fullscreen ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
          isFullScreen.value ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
            key: 0,
            icon: "ion:power",
            title: "取消全屏",
            onClick: exitFullScreen
          })) : (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
            key: 1,
            icon: "icon-park-outline:full-screen",
            title: "全屏",
            onClick: fullScreen
          }))
        ])) : vue.createCommentVNode("", true)
      ], 4);
    };
  }
});
exports.default = _sfc_main;