v5.0.0 update

2025-10-28 20:21:10 -04:00 · 2021-11-30 18:58:19 +05:30
parent d332712c22
commit 082d5cacf2
1253 changed files with 88309 additions and 71741 deletions
--- a/resources/scripts/components/base/BaseModal.vue
+++ b/resources/scripts/components/base/BaseModal.vue
@ -0,0 +1,143 @@
+<template>
+  <Teleport to="body">
+    <TransitionRoot appear as="template" :show="show">
+      <Dialog
+        as="div"
+        static
+        class="fixed inset-0 z-20 overflow-y-auto"
+        :open="show"
+        @close="$emit('close')"
+      >
+        <div
+          class="
+            flex
+            items-end
+            justify-center
+            min-h-screen min-h-screen-ios
+            px-4
+            text-center
+            sm:block sm:px-2
+          "
+        >
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0"
+            enter-to="opacity-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100"
+            leave-to="opacity-0"
+          >
+            <DialogOverlay
+              class="fixed inset-0 transition-opacity bg-gray-700 bg-opacity-25"
+            />
+          </TransitionChild>
+
+          <!-- This element is to trick the browser into centering the modal contents. -->
+          <span
+            class="
+              hidden
+              sm:inline-block sm:align-middle sm:h-screen sm:h-screen-ios
+            "
+            aria-hidden="true"
+            >&#8203;</span
+          >
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <div
+              :class="`inline-block
+              align-middle
+              bg-white
+              rounded-lg
+              text-left
+              overflow-hidden
+              shadow-xl
+              transform
+              transition-all
+              my-4
+              ${modalSize}
+              sm:w-full
+              border-t-8 border-solid rounded shadow-xl  border-primary-500`"
+            >
+              <div
+                v-if="hasHeaderSlot"
+                class="
+                  flex
+                  items-center
+                  justify-between
+                  px-6
+                  py-4
+                  text-lg
+                  font-medium
+                  text-black
+                  border-b border-gray-200 border-solid
+                "
+              >
+                <slot name="header" />
+              </div>
+
+              <slot />
+
+              <slot name="footer" />
+            </div>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+  </Teleport>
+</template>
+
+<script setup>
+import { useModalStore } from '@/scripts/stores/modal'
+import { computed, watchEffect, useSlots } from 'vue'
+import {
+  Dialog,
+  DialogOverlay,
+  TransitionChild,
+  TransitionRoot,
+} from '@headlessui/vue'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+})
+const slots = useSlots()
+
+const emit = defineEmits(['close', 'open'])
+
+const modalStore = useModalStore()
+
+watchEffect(() => {
+  if (props.show) {
+    emit('open', props.show)
+  }
+})
+
+const modalSize = computed(() => {
+  const size = modalStore.size
+  switch (size) {
+    case 'sm':
+      return 'sm:max-w-2xl w-full'
+    case 'md':
+      return 'sm:max-w-4xl w-full'
+    case 'lg':
+      return 'sm:max-w-6xl w-full'
+
+    default:
+      return 'sm:max-w-2xl w-full'
+  }
+})
+
+const hasHeaderSlot = computed(() => {
+  return !!slots.header
+})
+</script>