From 869d4fbc789a5fb3456158b30a497ae2ec3ee82a Mon Sep 17 00:00:00 2001
From: Ayoub Chaaoui <chaaoui.ayoub@youcan.shop>
Date: Tue, 19 Nov 2024 22:24:21 +0100
Subject: [PATCH 1/7] feat(vue3/modal): added new slot for custom footers

---
 packages/vue3/src/_dev/App.vue               | 37 +++++++++++++++++---
 packages/vue3/src/components/Modal/Modal.vue | 35 ++++++++++++------
 2 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/packages/vue3/src/_dev/App.vue b/packages/vue3/src/_dev/App.vue
index 127dae2d..55a77fab 100644
--- a/packages/vue3/src/_dev/App.vue
+++ b/packages/vue3/src/_dev/App.vue
@@ -1,15 +1,40 @@
 <script setup lang="ts">
 import 'uno.css';
 import '../assets/main.css';
-import { ref } from 'vue';
-import SingleDateInput from '~/components/DateInput/SingleDateInput.vue';
+import { reactive } from 'vue';
+import Modal from '~/components/Modal/Modal.vue';
+import PrimaryButton from '~/components/Button/PrimaryButton.vue';
 
-const date = ref();
+const state = reactive({
+  showModal : false,
+  isLoading : false,
+});
+
+const clicked = async () => {
+  state.isLoading = true;
+  state.showModal = true;
+
+  (await new Promise(r => setTimeout(r, 1000)))
+  state.isLoading = false
+  state.showModal = false
+};
 </script>
 
 <template>
   <div class="container">
-    <SingleDateInput v-model="date" />
+    <Modal v-model:visible="state.showModal" title="Edit profile">
+      <p class="content">
+        The quick brown fox jumps over the lazy dog.
+      </p>
+      <template #footer>
+        <div class="footer">
+          <PrimaryButton :disabled="state.isLoading" @click="clicked">Click me</PrimaryButton>
+        </div>
+      </template>
+    </Modal>
+    <PrimaryButton @click="state.showModal = true;">
+      <span>Open Modal</span>
+    </PrimaryButton>
   </div>
 </template>
 
@@ -23,4 +48,8 @@ const date = ref();
   height: 100vh;
   gap: 40px;
 }
+.footer {
+  display: flex;
+  justify-content: end;
+}
 </style>
diff --git a/packages/vue3/src/components/Modal/Modal.vue b/packages/vue3/src/components/Modal/Modal.vue
index d2c8bded..8740341f 100644
--- a/packages/vue3/src/components/Modal/Modal.vue
+++ b/packages/vue3/src/components/Modal/Modal.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, ref, useSlots, watchEffect } from 'vue';
 import type { ModalProps } from '~/types';
 import Overlay from '~/components/Overlay/Overlay.vue';
 import { PrimaryButton, SecondaryButton, TertiaryButton } from '~/components';
+import { watch } from 'fs';
 
 const props = withDefaults(defineProps<ModalProps>(), {
   title: 'Customer address',
@@ -10,6 +11,9 @@ const props = withDefaults(defineProps<ModalProps>(), {
   cancelLabel: 'Cancel',
 });
 
+const confirmLabel = ref(props.confirmLabel);
+const cancelLabel = ref(props.cancelLabel);
+
 const emit = defineEmits(['update:visible', 'onConfirm']);
 const close = () => {
   emit('update:visible', false);
@@ -27,6 +31,10 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('keydown', handleKeypress);
 });
+
+const slots = useSlots();
+const showCustomFooter = !!slots.footer;
+
 </script>
 
 <template>
@@ -45,15 +53,20 @@ onUnmounted(() => {
         <slot />
       </div>
       <div class="footer">
-        <PrimaryButton v-if="!cancelOnly" @click="emit('onConfirm')">
-          <template v-if="confirmIcon" #icon>
-            <i :class="confirmIcon" />
-          </template>
-          <span>{{ confirmLabel }}</span>
-        </PrimaryButton>
-        <SecondaryButton @click="close">
-          <span>{{ cancelLabel }}</span>
-        </SecondaryButton>
+        <div v-if="showCustomFooter">
+          <slot name="footer" />
+        </div>
+        <div v-else class="footer-content">
+          <PrimaryButton v-if="!cancelOnly" @click="emit('onConfirm')">
+            <template v-if="confirmIcon" #icon>
+              <i :class="confirmIcon" />
+            </template>
+            <span>{{ confirmLabel }}</span>
+          </PrimaryButton>
+          <SecondaryButton @click="close">
+            <span>{{ cancelLabel }}</span>
+          </SecondaryButton>
+        </div>
       </div>
     </div>
   </Transition>
@@ -84,7 +97,7 @@ onUnmounted(() => {
 }
 
 .modal .header,
-.modal .footer {
+.modal .footer-content {
   display: flex;
   flex-direction: row-reverse;
   align-items: center;

From 8d14eff0eb945c2ce510c9a37442009e8587e744 Mon Sep 17 00:00:00 2001
From: Ayoub Chaaoui <chaaoui.ayoub@youcan.shop>
Date: Tue, 19 Nov 2024 22:28:27 +0100
Subject: [PATCH 2/7] chore(vue3/modal): lint files

---
 packages/vue3/src/_dev/App.vue               | 15 +++++++++------
 packages/vue3/src/components/Modal/Modal.vue |  6 ++----
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/vue3/src/_dev/App.vue b/packages/vue3/src/_dev/App.vue
index 55a77fab..eaae299c 100644
--- a/packages/vue3/src/_dev/App.vue
+++ b/packages/vue3/src/_dev/App.vue
@@ -6,17 +6,17 @@ import Modal from '~/components/Modal/Modal.vue';
 import PrimaryButton from '~/components/Button/PrimaryButton.vue';
 
 const state = reactive({
-  showModal : false,
-  isLoading : false,
+  showModal: false,
+  isLoading: false,
 });
 
 const clicked = async () => {
   state.isLoading = true;
   state.showModal = true;
 
-  (await new Promise(r => setTimeout(r, 1000)))
-  state.isLoading = false
-  state.showModal = false
+  (await new Promise(resolve => setTimeout(resolve, 1000)));
+  state.isLoading = false;
+  state.showModal = false;
 };
 </script>
 
@@ -28,7 +28,9 @@ const clicked = async () => {
       </p>
       <template #footer>
         <div class="footer">
-          <PrimaryButton :disabled="state.isLoading" @click="clicked">Click me</PrimaryButton>
+          <PrimaryButton :disabled="state.isLoading" @click="clicked">
+            Click me
+          </PrimaryButton>
         </div>
       </template>
     </Modal>
@@ -48,6 +50,7 @@ const clicked = async () => {
   height: 100vh;
   gap: 40px;
 }
+
 .footer {
   display: flex;
   justify-content: end;
diff --git a/packages/vue3/src/components/Modal/Modal.vue b/packages/vue3/src/components/Modal/Modal.vue
index 8740341f..21d2917f 100644
--- a/packages/vue3/src/components/Modal/Modal.vue
+++ b/packages/vue3/src/components/Modal/Modal.vue
@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, useSlots, watchEffect } from 'vue';
+import { onMounted, onUnmounted, ref, useSlots } from 'vue';
 import type { ModalProps } from '~/types';
 import Overlay from '~/components/Overlay/Overlay.vue';
 import { PrimaryButton, SecondaryButton, TertiaryButton } from '~/components';
-import { watch } from 'fs';
 
 const props = withDefaults(defineProps<ModalProps>(), {
   title: 'Customer address',
@@ -11,10 +10,10 @@ const props = withDefaults(defineProps<ModalProps>(), {
   cancelLabel: 'Cancel',
 });
 
+const emit = defineEmits(['update:visible', 'onConfirm']);
 const confirmLabel = ref(props.confirmLabel);
 const cancelLabel = ref(props.cancelLabel);
 
-const emit = defineEmits(['update:visible', 'onConfirm']);
 const close = () => {
   emit('update:visible', false);
 };
@@ -34,7 +33,6 @@ onUnmounted(() => {
 
 const slots = useSlots();
 const showCustomFooter = !!slots.footer;
-
 </script>
 
 <template>

From 34866f0ef58f8f5bb3488b243c2b38e55966d24f Mon Sep 17 00:00:00 2001
From: Ayoub Chaaoui <chaaoui.ayoub@youcan.shop>
Date: Tue, 19 Nov 2024 22:46:03 +0100
Subject: [PATCH 3/7] refactor(vue3/modal): start using defineSlots mcaro

---
 packages/vue3/src/components/Modal/Modal.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/vue3/src/components/Modal/Modal.vue b/packages/vue3/src/components/Modal/Modal.vue
index 21d2917f..fd6562a7 100644
--- a/packages/vue3/src/components/Modal/Modal.vue
+++ b/packages/vue3/src/components/Modal/Modal.vue
@@ -10,13 +10,20 @@ const props = withDefaults(defineProps<ModalProps>(), {
   cancelLabel: 'Cancel',
 });
 
+const slots = defineSlots<{
+  default(): any
+  footer?(): any
+}>()
+
 const emit = defineEmits(['update:visible', 'onConfirm']);
+
 const confirmLabel = ref(props.confirmLabel);
 const cancelLabel = ref(props.cancelLabel);
 
 const close = () => {
   emit('update:visible', false);
 };
+
 const handleKeypress = (event: KeyboardEvent) => {
   if (props.visible && event.key === 'Escape') {
     close();
@@ -30,9 +37,6 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('keydown', handleKeypress);
 });
-
-const slots = useSlots();
-const showCustomFooter = !!slots.footer;
 </script>
 
 <template>
@@ -51,7 +55,7 @@ const showCustomFooter = !!slots.footer;
         <slot />
       </div>
       <div class="footer">
-        <div v-if="showCustomFooter">
+        <div v-if="!!slots.footer">
           <slot name="footer" />
         </div>
         <div v-else class="footer-content">

From 095eb43790b1441e3c615cced90ba7b0dab7fdb7 Mon Sep 17 00:00:00 2001
From: Ayoub Chaaoui <chaaoui.ayoub@youcan.shop>
Date: Tue, 19 Nov 2024 22:49:47 +0100
Subject: [PATCH 4/7] chore(vue3/modal): lint

---
 packages/vue3/src/components/Modal/Modal.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/vue3/src/components/Modal/Modal.vue b/packages/vue3/src/components/Modal/Modal.vue
index fd6562a7..d670d013 100644
--- a/packages/vue3/src/components/Modal/Modal.vue
+++ b/packages/vue3/src/components/Modal/Modal.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, useSlots } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import type { ModalProps } from '~/types';
 import Overlay from '~/components/Overlay/Overlay.vue';
 import { PrimaryButton, SecondaryButton, TertiaryButton } from '~/components';
@@ -9,13 +9,11 @@ const props = withDefaults(defineProps<ModalProps>(), {
   confirmLabel: 'Save',
   cancelLabel: 'Cancel',
 });
-
+const emit = defineEmits(['update:visible', 'onConfirm']);
 const slots = defineSlots<{
   default(): any
   footer?(): any
-}>()
-
-const emit = defineEmits(['update:visible', 'onConfirm']);
+}>();
 
 const confirmLabel = ref(props.confirmLabel);
 const cancelLabel = ref(props.cancelLabel);

From a50680d9de4d2170bfd6f23e91a728e684bcf713 Mon Sep 17 00:00:00 2001
From: Ayoub Chaaoui <chaaoui.ayoub@youcan.shop>
Date: Tue, 19 Nov 2024 22:59:58 +0100
Subject: [PATCH 5/7] refactor(vue3/modal): added some newlines and removed
 unused props

---
 packages/vue3/src/components/Modal/Modal.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/vue3/src/components/Modal/Modal.vue b/packages/vue3/src/components/Modal/Modal.vue
index d670d013..dce7034a 100644
--- a/packages/vue3/src/components/Modal/Modal.vue
+++ b/packages/vue3/src/components/Modal/Modal.vue
@@ -9,15 +9,14 @@ const props = withDefaults(defineProps<ModalProps>(), {
   confirmLabel: 'Save',
   cancelLabel: 'Cancel',
 });
+
 const emit = defineEmits(['update:visible', 'onConfirm']);
+
 const slots = defineSlots<{
   default(): any
   footer?(): any
 }>();
 
-const confirmLabel = ref(props.confirmLabel);
-const cancelLabel = ref(props.cancelLabel);
-
 const close = () => {
   emit('update:visible', false);
 };

From cfe1279398974b190cf7bd6f4125f34db58c20a3 Mon Sep 17 00:00:00 2001
From: Ayoub Chaaoui <chaaoui.ayoub@youcan.shop>
Date: Tue, 19 Nov 2024 23:00:41 +0100
Subject: [PATCH 6/7] chore(vue3/modal): lint

---
 packages/vue3/src/components/Modal/Modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue3/src/components/Modal/Modal.vue b/packages/vue3/src/components/Modal/Modal.vue
index dce7034a..73fd8dd3 100644
--- a/packages/vue3/src/components/Modal/Modal.vue
+++ b/packages/vue3/src/components/Modal/Modal.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted } from 'vue';
 import type { ModalProps } from '~/types';
 import Overlay from '~/components/Overlay/Overlay.vue';
 import { PrimaryButton, SecondaryButton, TertiaryButton } from '~/components';

From 4423478828714e8edcf968d7d5a5f2baf9c0c94a Mon Sep 17 00:00:00 2001
From: Ayoub Chaaoui <chaaoui.ayoub@youcan.shop>
Date: Wed, 20 Nov 2024 09:38:00 +0100
Subject: [PATCH 7/7] refactor(vue3/modal): removed defineSlots

---
 packages/vue3/src/components/Modal/Modal.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/vue3/src/components/Modal/Modal.vue b/packages/vue3/src/components/Modal/Modal.vue
index 73fd8dd3..267bef1c 100644
--- a/packages/vue3/src/components/Modal/Modal.vue
+++ b/packages/vue3/src/components/Modal/Modal.vue
@@ -12,11 +12,6 @@ const props = withDefaults(defineProps<ModalProps>(), {
 
 const emit = defineEmits(['update:visible', 'onConfirm']);
 
-const slots = defineSlots<{
-  default(): any
-  footer?(): any
-}>();
-
 const close = () => {
   emit('update:visible', false);
 };
@@ -52,7 +47,7 @@ onUnmounted(() => {
         <slot />
       </div>
       <div class="footer">
-        <div v-if="!!slots.footer">
+        <div v-if="$slots.footer">
           <slot name="footer" />
         </div>
         <div v-else class="footer-content">