From 11307d7550155b89afedcf6180fe6ea4f971a9b9 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Mon, 11 Dec 2023 16:00:33 +0600
Subject: [PATCH 1/8] modal

---
 src/components/DxhModal.vue               | 109 ++++++++++++++++++++++
 src/components/__tests__/DxhModal.spec.ts |  67 +++++++++++++
 src/index.ts                              |   7 +-
 3 files changed, 180 insertions(+), 3 deletions(-)
 create mode 100644 src/components/DxhModal.vue
 create mode 100644 src/components/__tests__/DxhModal.spec.ts

diff --git a/src/components/DxhModal.vue b/src/components/DxhModal.vue
new file mode 100644
index 0000000..e8bc5bd
--- /dev/null
+++ b/src/components/DxhModal.vue
@@ -0,0 +1,109 @@
+<template>
+  <div
+    class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 cursor-pointer"
+    @click="handleOutsideClick"
+    data-test="modal-overlay"
+  >
+    <div
+      ref="modalRef"
+      class="bg-white p-6 rounded-md relative cursor-auto"
+      :class="[maxWidth, maxHeight]"
+      :style="{ zIndex }"
+      @keydown.esc="keyboardEsc ? handleCancel : ''"
+      data-test="modal-content"
+    >
+      <div
+        class="absolute top-6 right-4 cursor-pointer"
+        @click="handleCancel"
+        data-test="close-icon"
+      >
+        <slot name="close-icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            class="h-5 w-5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </slot>
+      </div>
+      <div v-if="title" class="text-lg font-bold mb-4" data-test="modal-title">{{ title }}</div>
+      <div class="mb-4" data-test="modal-body">
+        <slot></slot>
+      </div>
+      <div v-if="footer" class="flex space-x-2 justify-end" data-test="modal-footer">
+        <slot name="cancel">
+          <button @click="handleCancel" class="border px-1" data-test="cancel-button">
+            Cancel
+          </button>
+        </slot>
+        <slot name="ok">
+          <button @click="handleOk" class="border px-1" data-test="ok-button">OK</button>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+interface Props {
+  title?: string
+  footer?: boolean
+  maxWidth?: string
+  maxHeight?: string
+  open: boolean
+  keyboardEsc?: boolean
+  zIndex?: number
+  persistent?: boolean
+}
+
+const { title, footer, maxWidth, maxHeight, open, keyboardEsc, zIndex, persistent } =
+  defineProps<Props>()
+const emit = defineEmits(['ok', 'cancel'])
+
+const modalRef = ref<HTMLElement | null>(null)
+
+const handleOutsideClick = (event: MouseEvent) => {
+  if (!persistent && open) {
+    const modalElement = event.target as HTMLElement
+    if (!modalRef.value?.contains(modalElement)) {
+      handleCancel()
+    }
+  }
+}
+
+onMounted(() => {
+  if (keyboardEsc) {
+    document.addEventListener('keydown', handleEscKey)
+  }
+})
+
+onUnmounted(() => {
+  if (keyboardEsc) {
+    document.removeEventListener('keydown', handleEscKey)
+  }
+})
+
+const handleCancel = () => {
+  emit('cancel')
+}
+
+const handleOk = () => {
+  emit('ok')
+}
+
+const handleEscKey = (event: KeyboardEvent) => {
+  if (keyboardEsc && event.key === 'Escape') {
+    handleCancel()
+  }
+}
+</script>
diff --git a/src/components/__tests__/DxhModal.spec.ts b/src/components/__tests__/DxhModal.spec.ts
new file mode 100644
index 0000000..4297510
--- /dev/null
+++ b/src/components/__tests__/DxhModal.spec.ts
@@ -0,0 +1,67 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DxhModal from '@/components/DxhModal.vue'
+
+describe('DxhModal.vue', () => {
+  let wrapper: any
+
+  beforeEach(() => {
+    wrapper = mount(DxhModal, {
+      props: {
+        title: 'Test Modal',
+        footer: true,
+        open: true,
+        keyboardEsc: true,
+        zIndex: 1000,
+        persistent: false
+      }
+    })
+  })
+
+  afterEach(() => {
+    wrapper.unmount()
+  })
+
+  it('renders modal with title and footer', () => {
+    const title = wrapper.find('.text-lg.font-bold.mb-4')
+    const footer = wrapper.find('.flex.space-x-2.justify-end')
+
+    expect(title.exists()).toBe(true)
+    expect(title.text()).toBe('Test Modal')
+    expect(footer.exists()).toBe(true)
+  })
+
+  it('emits cancel event on cancel button click', async () => {
+    const cancelButton = wrapper.find('[data-test="cancel-button"]')
+
+    await cancelButton.trigger('click')
+
+    const cancelEvent = wrapper.emitted('cancel')
+    expect(cancelEvent).toBeTruthy()
+  })
+
+  it('emits ok event on ok button click', async () => {
+    const okButton = wrapper.find('[data-test="ok-button"]')
+
+    await okButton.trigger('click')
+
+    const okEvent = wrapper.emitted('ok')
+    expect(okEvent).toBeTruthy()
+  })
+
+  it('closes modal on outside click', async () => {
+    const modalOverlay = wrapper.find('.bg-black.bg-opacity-50')
+
+    await modalOverlay.trigger('click')
+
+    const cancelEvent = wrapper.emitted('cancel')
+    expect(cancelEvent).toBeTruthy()
+  })
+
+  it('closes modal on pressing ESC key', async () => {
+    await wrapper.trigger('keydown.esc')
+
+    const cancelEvent = wrapper.emitted('cancel')
+    expect(cancelEvent).toBeUndefined()
+  })
+})
diff --git a/src/index.ts b/src/index.ts
index ee2ff8d..16a1a01 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
-import DButton from "./components/DButton.vue"
-import DInput from "./components/DInput.vue"
+import DButton from './components/DButton.vue'
+import DInput from './components/DInput.vue'
+import DxhModal from './components/DxhModal.vue'
 
-export default {DButton, DInput}
\ No newline at end of file
+export default { DButton, DInput, DxhModal }

From e9f42a280eaadb0cde8f8fe86f643247ec74be84 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Tue, 12 Dec 2023 22:01:42 +0600
Subject: [PATCH 2/8] modal

---
 src/App.vue                               | 46 +++++++++++++++++++++--
 src/components/DxhModal.vue               |  9 ++---
 src/components/__tests__/DxhModal.spec.ts |  6 +--
 3 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a0d7a19..a5580c4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,45 @@
 <template>
-  <main>
-    Vue-Tailwind
-  </main>
+  <div>
+    <button @click="openModal">Open Modal</button>
+
+    <DxhModal
+    v-if="isModalOpen"
+      :title="modalTitle"
+      :footer="true"
+      :open="isModalOpen"
+      :keyboardEsc="true"
+      :zIndex="100"
+      :persistent="false"
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
+      <!-- Your modal content goes here -->
+      <p>This is the modal content.</p>
+    </DxhModal>
+  </div>
 </template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import DxhModal from './components/DxhModal.vue';
+
+const isModalOpen = ref(false);
+const modalTitle = ref('');
+
+const openModal = () => {
+  isModalOpen.value = true;
+  modalTitle.value = 'Your Modal Title';
+};
+
+const handleOk = () => {
+  // Handle OK button click
+  isModalOpen.value = false;
+};
+
+const handleCancel = () => {
+  // Handle Cancel button click
+  isModalOpen.value = false;
+};
+</script>
+
+
diff --git a/src/components/DxhModal.vue b/src/components/DxhModal.vue
index e8bc5bd..57e6782 100644
--- a/src/components/DxhModal.vue
+++ b/src/components/DxhModal.vue
@@ -6,9 +6,8 @@
   >
     <div
       ref="modalRef"
-      class="bg-white p-6 rounded-md relative cursor-auto"
-      :class="[maxWidth, maxHeight]"
-      :style="{ zIndex }"
+      class="bg-white p-6 rounded-md relative cursor-auto min-w-[250px]"
+      :style="{ zIndex, maxWidth: `${maxWidth}px`, maxHeight: `${maxHeight}px` }"
       @keydown.esc="keyboardEsc ? handleCancel : ''"
       data-test="modal-content"
     >
@@ -34,8 +33,8 @@
           </svg>
         </slot>
       </div>
-      <div v-if="title" class="text-lg font-bold mb-4" data-test="modal-title">{{ title }}</div>
-      <div class="mb-4" data-test="modal-body">
+      <div v-if="title" class="text-lg font-bold mr-6" data-test="modal-title">{{ title }}</div>
+      <div class="my-4" data-test="modal-body">
         <slot></slot>
       </div>
       <div v-if="footer" class="flex space-x-2 justify-end" data-test="modal-footer">
diff --git a/src/components/__tests__/DxhModal.spec.ts b/src/components/__tests__/DxhModal.spec.ts
index 4297510..e89758c 100644
--- a/src/components/__tests__/DxhModal.spec.ts
+++ b/src/components/__tests__/DxhModal.spec.ts
@@ -23,8 +23,8 @@ describe('DxhModal.vue', () => {
   })
 
   it('renders modal with title and footer', () => {
-    const title = wrapper.find('.text-lg.font-bold.mb-4')
-    const footer = wrapper.find('.flex.space-x-2.justify-end')
+    const title = wrapper.find('[data-test="modal-title"]')
+    const footer = wrapper.find('[data-test="modal-footer"]')
 
     expect(title.exists()).toBe(true)
     expect(title.text()).toBe('Test Modal')
@@ -50,7 +50,7 @@ describe('DxhModal.vue', () => {
   })
 
   it('closes modal on outside click', async () => {
-    const modalOverlay = wrapper.find('.bg-black.bg-opacity-50')
+    const modalOverlay = wrapper.find('[data-test="modal-overlay"]')
 
     await modalOverlay.trigger('click')
 

From 6d5a1f7c08ff383c94f2e59ef6df6ea186f0fc23 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Tue, 12 Dec 2023 22:05:01 +0600
Subject: [PATCH 3/8] modal

---
 src/App.vue | 48 ++++--------------------------------------------
 1 file changed, 4 insertions(+), 44 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a5580c4..46362c7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,45 +1,5 @@
 <template>
-  <div>
-    <button @click="openModal">Open Modal</button>
-
-    <DxhModal
-    v-if="isModalOpen"
-      :title="modalTitle"
-      :footer="true"
-      :open="isModalOpen"
-      :keyboardEsc="true"
-      :zIndex="100"
-      :persistent="false"
-      @ok="handleOk"
-      @cancel="handleCancel"
-    >
-      <!-- Your modal content goes here -->
-      <p>This is the modal content.</p>
-    </DxhModal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import DxhModal from './components/DxhModal.vue';
-
-const isModalOpen = ref(false);
-const modalTitle = ref('');
-
-const openModal = () => {
-  isModalOpen.value = true;
-  modalTitle.value = 'Your Modal Title';
-};
-
-const handleOk = () => {
-  // Handle OK button click
-  isModalOpen.value = false;
-};
-
-const handleCancel = () => {
-  // Handle Cancel button click
-  isModalOpen.value = false;
-};
-</script>
-
-
+  <main>
+    Vue-Tailwind
+  </main>
+</template>
\ No newline at end of file

From 16c37de8bec9f63acce8490e0cd6f7188b07f292 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 13 Dec 2023 11:45:20 +0600
Subject: [PATCH 4/8] close

---
 src/components/DxhModal.vue               | 20 ++++++++++++--------
 src/components/__tests__/DxhModal.spec.ts |  4 ++--
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/DxhModal.vue b/src/components/DxhModal.vue
index 57e6782..76498cd 100644
--- a/src/components/DxhModal.vue
+++ b/src/components/DxhModal.vue
@@ -8,15 +8,15 @@
       ref="modalRef"
       class="bg-white p-6 rounded-md relative cursor-auto min-w-[250px]"
       :style="{ zIndex, maxWidth: `${maxWidth}px`, maxHeight: `${maxHeight}px` }"
-      @keydown.esc="keyboardEsc ? handleCancel : ''"
+      @keydown.esc="keyboardEsc ? handleClose : ''"
       data-test="modal-content"
     >
       <div
         class="absolute top-6 right-4 cursor-pointer"
-        @click="handleCancel"
+        @click="handleClose"
         data-test="close-icon"
       >
-        <slot name="close-icon">
+        <slot name="close">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -38,12 +38,12 @@
         <slot></slot>
       </div>
       <div v-if="footer" class="flex space-x-2 justify-end" data-test="modal-footer">
-        <slot name="cancel">
+        <slot name="cancel" :onClick="handleCancel">
           <button @click="handleCancel" class="border px-1" data-test="cancel-button">
             Cancel
           </button>
         </slot>
-        <slot name="ok">
+        <slot name="ok" :onClick="handleOk">
           <button @click="handleOk" class="border px-1" data-test="ok-button">OK</button>
         </slot>
       </div>
@@ -67,7 +67,7 @@ interface Props {
 
 const { title, footer, maxWidth, maxHeight, open, keyboardEsc, zIndex, persistent } =
   defineProps<Props>()
-const emit = defineEmits(['ok', 'cancel'])
+const emit = defineEmits(['ok', 'cancel', 'close'])
 
 const modalRef = ref<HTMLElement | null>(null)
 
@@ -75,7 +75,7 @@ const handleOutsideClick = (event: MouseEvent) => {
   if (!persistent && open) {
     const modalElement = event.target as HTMLElement
     if (!modalRef.value?.contains(modalElement)) {
-      handleCancel()
+      handleClose()
     }
   }
 }
@@ -92,6 +92,10 @@ onUnmounted(() => {
   }
 })
 
+const handleClose = () => {
+  emit('close')
+}
+
 const handleCancel = () => {
   emit('cancel')
 }
@@ -102,7 +106,7 @@ const handleOk = () => {
 
 const handleEscKey = (event: KeyboardEvent) => {
   if (keyboardEsc && event.key === 'Escape') {
-    handleCancel()
+    handleClose()
   }
 }
 </script>
diff --git a/src/components/__tests__/DxhModal.spec.ts b/src/components/__tests__/DxhModal.spec.ts
index e89758c..613970b 100644
--- a/src/components/__tests__/DxhModal.spec.ts
+++ b/src/components/__tests__/DxhModal.spec.ts
@@ -54,14 +54,14 @@ describe('DxhModal.vue', () => {
 
     await modalOverlay.trigger('click')
 
-    const cancelEvent = wrapper.emitted('cancel')
+    const cancelEvent = wrapper.emitted('close')
     expect(cancelEvent).toBeTruthy()
   })
 
   it('closes modal on pressing ESC key', async () => {
     await wrapper.trigger('keydown.esc')
 
-    const cancelEvent = wrapper.emitted('cancel')
+    const cancelEvent = wrapper.emitted('close')
     expect(cancelEvent).toBeUndefined()
   })
 })

From 486c95c16e7f33b90c001a99341198acbcd8ea4d Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 13 Dec 2023 11:47:12 +0600
Subject: [PATCH 5/8] close

---
 src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 46362c7..a0d7a19 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,4 +2,4 @@
   <main>
     Vue-Tailwind
   </main>
-</template>
\ No newline at end of file
+</template>

From 0888f5f04a863d623a44f7c920daf7b617424ead Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 13 Dec 2023 11:56:16 +0600
Subject: [PATCH 6/8] close

---
 src/components/DxhModal.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/DxhModal.vue b/src/components/DxhModal.vue
index 76498cd..54b3deb 100644
--- a/src/components/DxhModal.vue
+++ b/src/components/DxhModal.vue
@@ -13,10 +13,9 @@
     >
       <div
         class="absolute top-6 right-4 cursor-pointer"
-        @click="handleClose"
         data-test="close-icon"
       >
-        <slot name="close">
+        <slot name="close" :onClick="handleClose">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"

From c4d24ae2b928b5e738e1042f220ef8d2f47bd796 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 13 Dec 2023 12:38:03 +0600
Subject: [PATCH 7/8] modal

---
 src/App.vue                 | 2 +-
 src/components/DxhModal.vue | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a0d7a19..46362c7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,4 +2,4 @@
   <main>
     Vue-Tailwind
   </main>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/components/DxhModal.vue b/src/components/DxhModal.vue
index 54b3deb..82a441c 100644
--- a/src/components/DxhModal.vue
+++ b/src/components/DxhModal.vue
@@ -15,7 +15,7 @@
         class="absolute top-6 right-4 cursor-pointer"
         data-test="close-icon"
       >
-        <slot name="close" :onClick="handleClose">
+        <slot name="close" :onClose="handleClose">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -37,12 +37,12 @@
         <slot></slot>
       </div>
       <div v-if="footer" class="flex space-x-2 justify-end" data-test="modal-footer">
-        <slot name="cancel" :onClick="handleCancel">
+        <slot name="cancel" :onCancel="handleCancel">
           <button @click="handleCancel" class="border px-1" data-test="cancel-button">
             Cancel
           </button>
         </slot>
-        <slot name="ok" :onClick="handleOk">
+        <slot name="ok" :onOk="handleOk">
           <button @click="handleOk" class="border px-1" data-test="ok-button">OK</button>
         </slot>
       </div>

From e01a44a5c7f3b7ec6bd7834f30c59eb627728edd Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 13 Dec 2023 13:01:32 +0600
Subject: [PATCH 8/8] modal

---
 src/App.vue                 | 48 +++++++++++++++++++++++++++++++++----
 src/components/DxhModal.vue |  1 +
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 46362c7..c616e77 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,45 @@
 <template>
-  <main>
-    Vue-Tailwind
-  </main>
-</template>
\ No newline at end of file
+  <div>
+    <button @click="openModal">Open Modal</button>
+
+    <DxhModal
+      v-if="isModalOpen"
+      :title="modalTitle"
+      :footer="true"
+      :maxWidth="'500px'"
+      :maxHeight="'300px'"
+      :open="isModalOpen"
+      :keyboardEsc="true"
+      :zIndex="1"
+      :persistent="false"
+      @ok="handleOk"
+      @cancel="handleCancel"
+      @close="isModalOpen = false"
+    >
+      <!-- Your modal content goes here -->
+      <p>This is the modal content.</p>
+    </DxhModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import DxhModal from '@/components/DxhModal.vue'
+
+const isModalOpen = ref(false)
+const modalTitle = ref('Sample Modal')
+
+const openModal = () => {
+  isModalOpen.value = true
+}
+
+const handleOk = () => {
+  // Handle OK button click
+  isModalOpen.value = false
+}
+
+const handleCancel = () => {
+  // Handle Cancel button click
+  isModalOpen.value = false
+}
+</script>
diff --git a/src/components/DxhModal.vue b/src/components/DxhModal.vue
index 82a441c..5bcaf5b 100644
--- a/src/components/DxhModal.vue
+++ b/src/components/DxhModal.vue
@@ -22,6 +22,7 @@
             viewBox="0 0 24 24"
             stroke="currentColor"
             class="h-5 w-5"
+            @click="handleClose"
           >
             <path
               stroke-linecap="round"