/**
 * ldesign v0.2.22
 * (c) 2022/12/7 16:21 built by swimly
 * @license MIT
 */

import Vue from 'vue';
import raf from 'raf';
import { removeDom, getAttach } from '../../utils/dom.js';
import popupProps from './props.js';
import 'lodash/isString';
import '../../_chunks/dep-eaa95999.js';
import '../../_chunks/dep-102361be.js';
import '../../utils/easing.js';

function isContentRectChanged(rect1, rect2) {
  if (!rect1 || !rect2) return;
  if (["width", "height", "x", "y"].some(k => rect1[k] !== rect2[k])) return true;
  return false;
}
function observeResize(elm, cb) {
  if (!window?.ResizeObserver || !elm) return;
  let prevContentRect = null;
  const ro = new ResizeObserver(function () {
    let entries = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
    const {
      contentRect
    } = entries[0] || {};
    if (isContentRectChanged(contentRect, prevContentRect)) {
      prevContentRect = contentRect;
      cb(contentRect);
      return;
    }
    if (!prevContentRect) prevContentRect = contentRect;
  });
  ro.observe(elm);
  return function () {
    ro.unobserve(elm);
  };
}
const Trigger = Vue.extend({
  data() {
    return {
      contentRect: null
    };
  },
  mounted() {
    this.$on("hook:destroyed", observeResize(this.$el, ev => {
      this.$emit("resize", ev);
    }));
  },
  render() {
    const h = arguments[0];
    const children = this.$slots.default || [];
    if (children.length > 1 || !children[0]?.tag) return h("span", [children]);
    return children[0];
  }
});
var Container = Vue.extend({
  props: {
    parent: Object,
    visible: Boolean,
    attach: popupProps.attach
  },
  data() {
    return {
      content: null
    };
  },
  mounted() {
    if (this.visible) raf(this.mountContent);
    this.$watch("visible", visible => {
      if (visible) this.mountContent();
    });
  },
  unmounted() {
    this.unmountContent();
  },
  methods: {
    mountContent() {
      this.$createElement;
      if (this.content) return;
      const parent = this;
      const elm = document.createElement("div");
      elm.style.cssText = "position: absolute; top: 0px; left: 0px; width: 100%";
      elm.appendChild(document.createElement("div"));
      this.content = new this.$root.constructor({
        parent,
        render() {
          const h = arguments[0];
          return h("div", [parent.$slots.content]);
        },
        mounted() {
          parent.$emit("contentMounted");
          const content = this.$el.children[0];
          if (content) {
            this.$on("hook:destroyed", observeResize(content, () => {
              parent.$emit("resize");
            }));
          }
        },
        destroyed() {
          parent.content = null;
          removeDom(elm);
        }
      });
      getAttach(this.attach, this.$refs?.triggerRef?.$el).appendChild(elm);
      this.content.$mount(elm.children[0]);
    },
    unmountContent() {
      this.content?.$destroy();
    },
    updateContent() {
      this.content?.$forceUpdate();
    }
  },
  render() {
    const h = arguments[0];
    return h(Trigger, {
      "ref": "triggerRef",
      "on": {
        "resize": () => this.$emit("resize")
      }
    }, [this.$slots.default]);
  }
});

export { Container as default };
//# sourceMappingURL=container.js.map
