Modal Component

src/js/components/library/Modal.vue

@@ -0,0 +1,65 @@
+<template>
+	<TransitionRoot
+		:show="$store.modal.activeModalId === modalId"
+		as="template"
+		enter="duration-200 ease-out"
+		enterFrom="opacity-0"
+		enterTo="opacity-100"
+		leave="duration-200 ease-in"
+		leaveFrom="opacity-100"
+		leaveTo="opacity-0"
+	>
+		<Dialog
+			@close="$store.modal.closeModal"
+			class="relative z-50"
+			:unmount="false"
+		>
+			<div
+				class="modal-background fixed inset-0 flex w-screen items-center justify-center bg-black/30"
+				aria-hidden="true"
+			/>
+			<div
+				class="modal-container fixed inset-0 flex w-screen items-center justify-center"
+			>
+				<DialogPanel
+					:class="`${
+						hasOverscroll ? 'overflow-y-scroll' : ''
+					} modal-content w-[600px] h-auto relative bg-white`"
+				>
+					<slot>
+						<div class="modal-body">
+							<div class="px-s8 py-s10 border-t-2 border-gray-200 group">
+								<DialogTitle>Title</DialogTitle>
+								<DialogDescription> Description </DialogDescription>
+								<p>Other Body content</p>
+							</div>
+						</div>
+					</slot>
+					<button
+						class="absolute top-s8 right-s8 px-s2"
+						@click="$store.modal.closeModal"
+						type="button"
+						aria-label="Close modal"
+					>
+						x
+					</button>
+				</DialogPanel>
+			</div>
+		</Dialog>
+	</TransitionRoot>
+</template>
+
+<script setup>
+import { Dialog, DialogPanel } from '@headlessui/vue'
+
+const props = defineProps({
+	hasOverscroll: {
+		type: Boolean,
+		default: true,
+	},
+	modalId: {
+		type: String,
+		default: '',
+	},
+})
+</script>

src/js/main.js

@@ -1,5 +1,6 @@
 import 'vite/modulepreload-polyfill'
-import { createApp, defineAsyncComponent } from 'vue'
+import { createApp, defineAsyncComponent, reactive, toRefs } from 'vue'
+import { TransitionRoot, DialogDescription, DialogTitle } from '@headlessui/vue'
 
 /* Import CSS, which gets bundled _separately_ from JS  */
 import '@src/css/main.pcss'
@@ -11,6 +12,20 @@ const eagerComponents = import.meta.glob(
 )
 const lazyComponents = import.meta.glob('./components/**/*.lazy.vue')
 
+const headlessUiComponents = { TransitionRoot, DialogDescription, DialogTitle }
+
+const store = reactive({
+	modal: {
+		closeModal: () => {
+			store.modal.activeModalId = null
+		},
+		openModal: (id) => {
+			store.modal.activeModalId = id
+		},
+		activeModalId: null,
+	},
+})
+
 /* Create Vue */
 const app = createApp({
 	delimiters: ['${', '}'],
@@ -34,6 +49,13 @@ Object.entries(lazyComponents).forEach(([path, module]) => {
 	app.component(componentName, componentDefinition)
 })
 
+//register imported components
+Object.entries(headlessUiComponents).forEach(([key, definition]) => {
+	app.component(key, definition)
+})
+
+app.config.globalProperties.$store = store
+
 /* Mount Vue to #app element */
 app.mount('#app')