ivue-material-plus
Version:
A high quality UI components Library with Vue.js
128 lines (125 loc) • 2.8 kB
JavaScript
import { defineComponent, nextTick } from 'vue';
import { createPopper } from '@popperjs/core';
var Popper = defineComponent({
emits: [
"on-popper-show",
"on-popper-hide",
"on-created",
"update:modelValue"
],
props: {
reference: {
type: Object
},
popper: {
type: Object
},
placement: {
type: String,
default: "bottom"
},
offset: {
default: [0, 0]
},
modelValue: {
type: Boolean,
default: false
},
transition: String,
options: {
type: Object,
default() {
return {
modifiers: [
{
name: "computeStyles",
options: {
gpuAcceleration: false
}
},
{
name: "preventOverflow",
options: {
rootBoundary: "viewport"
}
}
]
};
}
}
},
updated() {
nextTick(() => {
this.updatePopper();
});
},
beforeUnmount() {
if (this.popperJS) {
this.popperJS.destroy();
}
},
methods: {
createPopper() {
if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.placement)) {
return;
}
const options = this.options;
const popper = this.popper || this.$refs.popper;
const reference = this.reference || this.$refs.reference;
if (!popper || !reference)
return;
if (this.popperJS && this.popperJS.hasOwnProperty("destroy")) {
this.popperJS.destroy();
}
options.placement = this.placement;
if (!options.modifiers[3]) {
options.modifiers[3] = {
name: "offset",
options: {
offset: this.offset
}
};
}
options.onFirstUpdate = () => {
nextTick(() => {
this.updatePopper();
});
this.$emit("on-created", this);
};
this.popperJS = createPopper(reference, popper, options);
},
updatePopper() {
this.popperJS ? this.popperJS.update() : this.createPopper();
},
popperDestroy() {
if (this.visible) {
return;
}
this.popperJS.destroy();
this.popperJS = null;
}
},
watch: {
modelValue: {
immediate: true,
handler(val) {
this.visible = val;
this.$emit("update:modelValue", val);
}
},
visible(value) {
if (value) {
if (this.handleIndexIncrease) {
this.handleIndexIncrease();
}
this.updatePopper();
this.$emit("on-popper-show");
} else {
this.$emit("on-popper-hide");
}
this.$emit("update:modelValue", value);
}
}
});
export { Popper as default };
//# sourceMappingURL=popper.mjs.map