modal dialog component

components/Modal.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+  /*
+    pre-requisites.. Tailwind + DaisyUI
+
+    setup...
+    import { ModalType } from '~~/components/modal.type';
+    const myCoolModal = ref<ModalType>();
+
+    myCoolModal.value!.open();
+
+    template...
+    <Modal ref="myCoolModal" showCancel @closeOk="doSomethingUsefulOnClose()">
+      <h3 class="font-bold text-xl">Modal Title</h3>
+      <p class="py-4">Some kind of text</p>
+    </Modal>
+  */
+  import { ref } from 'vue';
+
+  // component property that controls the visibility of the modal
+  const modalIsVisible = ref(false);
+
+  // props for which buttons to show
+  interface Props {
+    showOk?: boolean
+    showCancel?: boolean
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    showOk: true,
+    showCancel: false,
+  })
+
+  // open event (exposed to parent)
+  const open = () => {
+    modalIsVisible.value = true;
+  }
+  defineExpose({ open });
+
+  // close events emitted on modal close
+  const emit = defineEmits(['closeOk', 'closeCancel']);
+  const closeOk = () => {
+    emit('closeOk');
+    modalIsVisible.value = false;
+  }
+  const closeCancel = () => {
+    emit('closeCancel');
+    modalIsVisible.value = false;
+  }
+</script>
+
+<template>
+  <!-- the input controls the visibility of the modal (css shenanigans) the v-model allows me to control it in turn from the wrapper component -->
+  <input type="checkbox" id="my-modal" class="modal-toggle" v-model="modalIsVisible" />
+  <div class="modal">
+    <div class="modal-box">
+      <slot />
+      <div class="flex justify-end space-x-2">
+        <!-- I decided not to use the 'for' directives which do the close in css so I can control the emission of events explicitly -->
+        <div class="modal-action" v-if="showOk">
+          <label class="btn btn-success" @click="closeOk()">Ok</label>
+        </div>
+        <div class="modal-action" v-if="showCancel">
+          <label class="btn btn-error" @click="closeCancel()">Cancel</label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

components/modal.type.ts

@@ -0,0 +1,4 @@
+import { Modal } from '#components';
+
+// seems pretty stoopid that I need to do this in a seperate file but it seems to work
+export type ModalType = typeof Modal extends new () => infer T ? T : never;