@meve/ui/es/teleport/index.js

Argon design system components library

import Vue from 'vue';
import { createNamespace } from '../utils/create';
import { props } from './props';

var _createNamespace = createNamespace('teleport'),
    namespace = _createNamespace.namespace,
    createComponent = _createNamespace.createComponent;

var TeleportPlugin = createComponent({
  props: props,
  data: function data() {
    return {
      el: null,
      instance: null
    };
  },
  watch: {
    disabled: function disabled() {
      this.transfer();
    },
    to: function to() {
      this.transfer();
    }
  },
  methods: {
    create: function create() {
      var _this = this;

      var h = this.$createElement;
      this.instance = new (Vue.extend({
        render: function render() {
          return h("div", [_this.slots()]);
        }
      }))();
      this.instance.$parent = this;
      this.el = this.instance.$mount().$el;
    },
    transfer: function transfer() {
      var container = this.disabled ? this.$refs.teleport : document.querySelector(this.to);
      var parentNode = this.el.parentNode;

      if (parentNode === container) {
        return;
      }

      parentNode == null ? void 0 : parentNode.removeChild(this.el);
      container.appendChild(this.el);
    }
  },
  updated: function updated() {
    this.instance.$forceUpdate();
  },
  mounted: function mounted() {
    this.create();
    this.transfer();
  },
  deactivated: function deactivated() {
    var _this$el$parentNode;

    (_this$el$parentNode = this.el.parentNode) == null ? void 0 : _this$el$parentNode.removeChild(this.el);
  },
  activated: function activated() {
    this.transfer();
  },
  beforeDestroy: function beforeDestroy() {
    var _this$el$parentNode2;

    this.instance.$destroy();
    (_this$el$parentNode2 = this.el.parentNode) == null ? void 0 : _this$el$parentNode2.removeChild(this.el);
  },
  render: function render() {
    var h = arguments[0];
    return h("div", {
      "ref": "teleport",
      "class": namespace()
    });
  }
});
export var _TeleportComponent = TeleportPlugin;
export default TeleportPlugin;