@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
131 lines (130 loc) • 3.71 kB
JavaScript
import o from "vue";
let d = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", u = (n = 21) => {
let e = "", t = n | 0;
for (; t--; )
e += d[Math.random() * 64 | 0];
return e;
};
function r(n) {
"@babel/helpers - typeof";
return typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? r = function(e) {
return typeof e;
} : r = function(e) {
return e && typeof Symbol == "function" && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
}, r(n);
}
var a = {
selector: "vue-portal-target-".concat(u())
}, s = function(e) {
return a.selector = e;
}, i = typeof window < "u" && (typeof document > "u" ? "undefined" : r(document)) !== void 0, l = o.extend({
// as an abstract component, it doesn't appear in
// the $parent chain of components.
// which means the next parent of any component rendered inside of this oen
// will be the parent from which is was sent
// @ts-expect-error
abstract: !0,
name: "PortalOutlet",
props: ["nodes", "tag"],
data: function(e) {
return {
updatedNodes: e.nodes
};
},
render: function(e) {
var t = this.updatedNodes && this.updatedNodes();
return t ? t.length === 1 && !t[0].text ? t : e(this.tag || "DIV", t) : e();
},
destroyed: function() {
var e = this.$el;
e && e.parentNode.removeChild(e);
}
}), f = o.extend({
name: "VueSimplePortal",
props: {
disabled: {
type: Boolean
},
prepend: {
type: Boolean
},
selector: {
type: String,
default: function() {
return "#".concat(a.selector);
}
},
tag: {
type: String,
default: "DIV"
}
},
render: function(e) {
if (this.disabled) {
var t = this.$scopedSlots && this.$scopedSlots.default();
return t ? t.length < 2 && !t[0].text ? t : e(this.tag, t) : e();
}
return e();
},
created: function() {
this.getTargetEl() || this.insertTargetEl();
},
updated: function() {
var e = this;
this.$nextTick(function() {
!e.disabled && e.slotFn !== e.$scopedSlots.default && (e.container.updatedNodes = e.$scopedSlots.default), e.slotFn = e.$scopedSlots.default;
});
},
beforeDestroy: function() {
this.unmount();
},
watch: {
disabled: {
immediate: !0,
handler: function(e) {
e ? this.unmount() : this.$nextTick(this.mount);
}
}
},
methods: {
// This returns the element into which the content should be mounted.
getTargetEl: function() {
if (i)
return document.querySelector(this.selector);
},
insertTargetEl: function() {
if (i) {
var e = document.querySelector("body"), t = document.createElement(this.tag);
t.id = this.selector.substring(1), e.appendChild(t);
}
},
mount: function() {
if (i) {
var e = this.getTargetEl(), t = document.createElement("DIV");
this.prepend && e.firstChild ? e.insertBefore(t, e.firstChild) : e.appendChild(t), this.container = new l({
el: t,
parent: this,
propsData: {
tag: this.tag,
nodes: this.$scopedSlots.default
}
});
}
},
unmount: function() {
this.container && (this.container.$destroy(), delete this.container);
}
}
});
function c(n) {
var e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
n.component(e.name || "portal", f), e.defaultSelector && s(e.defaultSelector);
}
typeof window < "u" && window.Vue && window.Vue === o && o.use(c);
export {
f as Portal,
a as config,
c as default,
s as setSelector
};
//# sourceMappingURL=vue-simple-portal.js.map