primevue/portal/index.mjs

PrimeVue is a premium UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, wh

import { isClient } from '@primeuix/utils/dom';
import { renderSlot, openBlock, createBlock, Teleport, resolveDynamicComponent, createCommentVNode } from 'vue';

var script = {
  name: 'Portal',
  props: {
    appendTo: {
      type: [String, Object],
      "default": 'body'
    },
    disabled: {
      type: Boolean,
      "default": false
    }
  },
  data: function data() {
    return {
      mounted: false
    };
  },
  watch: {
    appendTo: function appendTo() {
      var _this$tracker;
      (_this$tracker = this.tracker) === null || _this$tracker === void 0 || _this$tracker.retarget();
      this.attachRoot();
    },
    disabled: function disabled() {
      this.attachRoot();
    }
  },
  created: function created() {
    var _this$$primevue,
      _this = this;
    this.tracker = (_this$$primevue = this.$primevue) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.isolation) === null || _this$$primevue === void 0 ? void 0 : _this$$primevue.portal(function () {
      return _this.target;
    });
    this.content = function () {
      return _this.tracker.content(_this.$slots);
    };
  },
  mounted: function mounted() {
    this.mounted = isClient();
    this.attachRoot();
  },
  beforeUnmount: function beforeUnmount() {
    var _this$$primevue2;
    (_this$$primevue2 = this.$primevue) === null || _this$$primevue2 === void 0 || (_this$$primevue2 = _this$$primevue2.shadowRoot) === null || _this$$primevue2 === void 0 || _this$$primevue2.detach(this);
  },
  unmounted: function unmounted() {
    var _this$tracker2;
    (_this$tracker2 = this.tracker) === null || _this$tracker2 === void 0 || _this$tracker2.dispose();
  },
  methods: {
    attachRoot: function attachRoot() {
      var _this$$primevue3;
      if (this.mounted && !this.tracker) (_this$$primevue3 = this.$primevue) === null || _this$$primevue3 === void 0 || (_this$$primevue3 = _this$$primevue3.shadowRoot) === null || _this$$primevue3 === void 0 || _this$$primevue3.attach(this, this.inline ? null : this.target);
    }
  },
  computed: {
    inline: function inline() {
      return this.disabled || this.appendTo === 'self';
    },
    target: function target() {
      return typeof this.appendTo === 'string' ? document.querySelector(this.appendTo) : this.appendTo;
    }
  }
};

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return $options.inline ? renderSlot(_ctx.$slots, "default", {}, undefined, undefined, 0) : $data.mounted ? (openBlock(), createBlock(Teleport, {
    key: 1,
    to: $props.appendTo
  }, [_ctx.tracker ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.content), {
    key: 0
  })) : renderSlot(_ctx.$slots, "default", {}, undefined, undefined, 1)], 8, ["to"])) : createCommentVNode("", true);
}

script.render = render;

export { script as default };