xdesign-vue-next/cjs/popup/container.js

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
var vue = require('vue');
var popup_props = require('./props.js');
var hooks_useResizeObserver = require('../hooks/useResizeObserver.js');
var isArray = require('lodash/isArray');
var utils_dom = require('../utils/dom.js');
require('../_chunks/dep-8d10b59f.js');
require('lodash/isString');
require('lodash/isFunction');
require('../utils/easing.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);

function _isSlot(s) {
  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
}
function filterEmpty() {
  var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  var vnodes = [];
  children.forEach(function (child) {
    if (isArray__default["default"](child)) {
      vnodes.push.apply(vnodes, _toConsumableArray__default["default"](child));
    } else if (child.type === vue.Fragment) {
      vnodes.push.apply(vnodes, _toConsumableArray__default["default"](filterEmpty(child.children)));
    } else {
      vnodes.push(child);
    }
  });
  return vnodes.filter(function (c) {
    return !(c && (c.type === vue.Comment || c.type === vue.Fragment && c.children.length === 0 || c.type === vue.Text && c.children.trim() === ""));
  });
}
function isRectChanged(rect1, rect2) {
  if (!rect1 && !rect2) return false;
  if (!rect1 || !rect2) return true;
  if (["width", "height", "x", "y"].some(function (k) {
    return rect1[k] !== rect2[k];
  })) {
    return true;
  }
  return false;
}
function useElement(getter) {
  var instance = vue.getCurrentInstance();
  var el = vue.ref();
  vue.onMounted(function () {
    el.value = getter(instance);
  });
  vue.onUpdated(function () {
    var newEl = getter(instance);
    if (el.value !== newEl) {
      el.value = newEl;
    }
  });
  return el;
}
var Trigger = vue.defineComponent({
  name: "XPopupTrigger",
  props: {
    forwardRef: Function
  },
  emits: ["resize"],
  setup: function setup(props2, _ref) {
    var emit = _ref.emit,
      slots = _ref.slots;
    var el = useElement(function (vm) {
      var containerNode = vm.parent.vnode;
      return containerNode.el.nextElementSibling;
    });
    var contentRect = vue.ref();
    vue.watch(el, function () {
      var _props2$forwardRef;
      (_props2$forwardRef = props2.forwardRef) === null || _props2$forwardRef === void 0 ? void 0 : _props2$forwardRef.call(props2, el.value);
    });
    hooks_useResizeObserver["default"](el, function (_ref2) {
      var _ref3 = _slicedToArray__default["default"](_ref2, 1),
        newContentRect = _ref3[0].contentRect;
      contentRect.value = newContentRect;
    });
    vue.watch(contentRect, function (newRect, oldRect) {
      if (isRectChanged(newRect, oldRect)) {
        emit("resize");
      }
    });
    return function () {
      var _slots$default, _children$;
      var children = filterEmpty((_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots));
      if (children.length > 1 || ((_children$ = children[0]) === null || _children$ === void 0 ? void 0 : _children$.type) === vue.Text) {
        return vue.createVNode("span", null, [children]);
      }
      return children[0];
    };
  }
});
var Content = vue.defineComponent({
  name: "XPopupContent",
  emits: ["resize"],
  setup: function setup(props2, _ref4) {
    var emit = _ref4.emit,
      slots = _ref4.slots;
    var contentEl = useElement(function (vm) {
      return vm.vnode.el.children[0];
    });
    hooks_useResizeObserver["default"](contentEl, function () {
      emit("resize");
    });
    return function () {
      return vue.createVNode("div", {
        "style": "position: absolute; top: 0px; left: 0px; width: 100%"
      }, [slots["default"]()]);
    };
  }
});
var Container = vue.defineComponent({
  name: "XPopupContainer",
  inheritAttrs: false,
  props: {
    parent: Object,
    visible: Boolean,
    attach: popup_props["default"].attach,
    forwardRef: Function
  },
  emits: ["resize", "contentMounted"],
  setup: function setup(props2, _ref5) {
    var emit = _ref5.emit,
      attrs = _ref5.attrs,
      slots = _ref5.slots,
      expose = _ref5.expose;
    var triggerEl = vue.ref();
    var mountContent = vue.ref(false);
    function emitResize() {
      emit("resize");
    }
    vue.onMounted(function () {
      requestAnimationFrame(function () {
        mountContent.value = props2.visible;
      });
    });
    vue.watch(function () {
      return props2.visible;
    }, function (visible) {
      if (visible) {
        mountContent.value = props2.visible;
      }
    });
    expose({
      unmountContent: function unmountContent() {
        mountContent.value = false;
      }
    });
    return function () {
      var _slot;
      var getElement = function getElement() {
        return utils_dom.getSSRAttach() || utils_dom.getAttach(props2.attach, triggerEl.value);
      };
      return vue.createVNode(vue.Fragment, null, [vue.createVNode(Trigger, {
        "class": attrs["class"],
        "forwardRef": function forwardRef(el) {
          props2.forwardRef(el);
          triggerEl.value = el;
        },
        "onResize": emitResize
      }, _isSlot(_slot = slots["default"]()) ? _slot : {
        "default": function _default() {
          return [_slot];
        }
      }), mountContent.value && vue.createVNode(vue.Teleport, {
        "disabled": !getElement(),
        "to": getElement()
      }, {
        "default": function _default() {
          return [vue.createVNode(Content, {
            "onResize": emitResize,
            "onVnodeMounted": function onVnodeMounted() {
              return emit("contentMounted");
            }
          }, {
            "default": function _default() {
              return [slots.content && slots.content()];
            }
          })];
        }
      })]);
    };
  }
});

exports["default"] = Container;
//# sourceMappingURL=container.js.map