Files
drop-base/components/ModalStack.vue
2025-01-28 15:18:04 +11:00

33 lines
811 B
Vue

<template>
<component
v-for="(modal, modalIdx) in stack"
:is="modal.component"
:z-height="(modalIdx + 1) * 50"
:loading="modal.loading"
:data="modal.data"
@event="(event: string) => handleCallback(modalIdx, event)"
/>
<div id="modalstack" />
</template>
<script setup lang="ts">
const stack = useModalStack();
async function handleCallback(modalIdx: number, event: string) {
const modal = stack.value[modalIdx];
console.log(modal);
const close = () => {
stack.value.splice(modalIdx, 1);
};
// Gets unwrapped when we call from the DOM
// I kinda hate this but it's how Vue works so....
(modal.loading as unknown as boolean) = true;
try {
await modal.callback(event, close);
} finally {
(modal.loading as unknown as boolean) = false;
}
}
</script>