66 lines
1.6 KiB
JavaScript
Executable File
66 lines
1.6 KiB
JavaScript
Executable File
import { eq, eqNumber } from 'fp-ts/lib/Eq';
|
|
import { defineComponent, h, Transition as transition, reactive, computed, nextTick } from 'vue';
|
|
import { formatTransition } from '../../composables/transition';
|
|
import { constEmptyArray, removeListItem } from '../../utils/helpers';
|
|
export const eqPopup = eq.contramap(eqNumber, popup => popup.id);
|
|
export const removePopup = removeListItem(eqPopup);
|
|
const z = 999;
|
|
let id = 0;
|
|
|
|
function generatePopup(popup, index) {
|
|
return h('div', {
|
|
key: popup.id,
|
|
style: {
|
|
'z-index': z + index + 1
|
|
}
|
|
}, [h(transition, popup.transition, popup.render)]);
|
|
}
|
|
|
|
const BPopupContainer = defineComponent({
|
|
name: 'b-popup-container',
|
|
|
|
setup() {
|
|
const popups = reactive([]);
|
|
|
|
function showPopup(options) {
|
|
const nid = id++;
|
|
const popup = reactive({
|
|
id: nid,
|
|
render: constEmptyArray,
|
|
transition: formatTransition(options.transition)
|
|
});
|
|
popups.push(popup);
|
|
nextTick().then(() => {
|
|
popup.render = options.render;
|
|
});
|
|
return () => {
|
|
popup.render = constEmptyArray;
|
|
setTimeout(() => {
|
|
const index = popups.findIndex(p => p.id === nid);
|
|
|
|
if (index > 0) {
|
|
popups.splice(index, 1);
|
|
}
|
|
}, 250);
|
|
};
|
|
}
|
|
|
|
const rootZ = computed(() => popups.length ? z : -1);
|
|
return {
|
|
showPopup,
|
|
popups,
|
|
rootZ
|
|
};
|
|
},
|
|
|
|
render() {
|
|
return h('div', {
|
|
style: {
|
|
'z-index': this.rootZ
|
|
}
|
|
}, this.rootZ ? this.popups.map(generatePopup) : undefined);
|
|
}
|
|
|
|
});
|
|
export default BPopupContainer;
|
|
//# sourceMappingURL=BPopupContainer.js.map
|