UI-505 : Modal > Allow the user to define their own modal footer [vue3]

packages/vue3/src/_dev/App.vue

@@ -1,15 +1,42 @@
 <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(resolve => setTimeout(resolve, 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 +50,9 @@ const date = ref();
   height: 100vh;
   gap: 40px;
 }
+
+.footer {
+  display: flex;
+  justify-content: end;
+}
 </style>

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

@@ -11,9 +11,16 @@ const props = withDefaults(defineProps<ModalProps>(), {
 });
 
 const emit = defineEmits(['update:visible', 'onConfirm']);
+
+const slots = defineSlots<{
+  default(): any
+  footer?(): any
+}>();
+
 const close = () => {
   emit('update:visible', false);
 };
+
 const handleKeypress = (event: KeyboardEvent) => {
   if (props.visible && event.key === 'Escape') {
     close();
@@ -45,15 +52,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="!!slots.footer">
+          <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 +96,7 @@ onUnmounted(() => {
 }
 
 .modal .header,
-.modal .footer {
+.modal .footer-content {
   display: flex;
   flex-direction: row-reverse;
   align-items: center;