feat(vue3/modal): added new slot for custom footers

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>

packages/vue3/src/components/Modal/Modal.vue

@@ -1,15 +1,19 @@
 <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',
   confirmLabel: 'Save',
   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;