From 95318d1b36ff02d832e6edef771320e6dfbe10c6 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Mon, 24 Apr 2023 15:21:05 +1000
Subject: [PATCH] update SMFormFooter to SMButtonRow

---
 resources/js/components/SMFormFooter.vue      | 78 -------------------
 .../dialogs/SMDialogChangePassword.vue        |  1 -
 .../js/components/dialogs/SMDialogConfirm.vue |  6 +-
 resources/js/views/EmailVerify.vue            | 10 +--
 resources/js/views/ForgotPassword.vue         |  6 +-
 resources/js/views/ForgotUsername.vue         |  6 +-
 resources/js/views/ResendEmailVerify.vue      | 10 +--
 resources/js/views/ResetPassword.vue          | 10 +--
 resources/js/views/dashboard/EventEdit.vue    |  6 +-
 resources/js/views/dashboard/PostEdit.vue     |  6 +-
 10 files changed, 30 insertions(+), 109 deletions(-)
 delete mode 100644 resources/js/components/SMFormFooter.vue

diff --git a/resources/js/components/SMFormFooter.vue b/resources/js/components/SMFormFooter.vue
deleted file mode 100644
index 537e4c7..0000000
--- a/resources/js/components/SMFormFooter.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-    <div class="sm-form-footer">
-        <div class="sm-form-footer-column sm-form-footer-column-left">
-            <slot name="left"></slot>
-        </div>
-        <div class="sm-form-footer-column sm-form-footer-column-right">
-            <slot name="right"></slot>
-        </div>
-    </div>
-</template>
-
-<style lang="scss">
-.sm-form-footer {
-    display: flex;
-    flex: 1;
-
-    .sm-form-footer-column {
-        display: flex;
-        align-items: center;
-
-        &.sm-form-footer-column-left,
-        &.sm-form-footer-column-right {
-            a,
-            button {
-                margin-left: map-get($spacer, 1);
-                margin-right: map-get($spacer, 1);
-
-                &:first-of-type {
-                    margin-left: 0;
-                }
-
-                &:last-of-type {
-                    margin-right: 0;
-                }
-            }
-        }
-
-        &.sm-form-footer-column-right {
-            flex: 1;
-            justify-content: flex-end;
-        }
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .sm-form-footer {
-        flex-direction: column-reverse;
-
-        .sm-form-footer-column {
-            &.sm-form-footer-column-left,
-            &.sm-form-footer-column-right {
-                display: flex;
-                flex-direction: column-reverse;
-                justify-content: center;
-
-                & > * {
-                    display: block;
-                    width: 100%;
-                    text-align: center;
-
-                    margin-top: map-get($spacer, 1);
-                    margin-bottom: map-get($spacer, 1);
-                    margin-left: 0 !important;
-                    margin-right: 0 !important;
-                }
-            }
-
-            &.sm-form-footer-column-left {
-                margin-bottom: -#{calc(map-get($spacer, 1) / 2)};
-            }
-
-            &.sm-form-footer-column-right {
-                margin-top: -#{calc(map-get($spacer, 1) / 2)};
-            }
-        }
-    }
-}
-</style>
diff --git a/resources/js/components/dialogs/SMDialogChangePassword.vue b/resources/js/components/dialogs/SMDialogChangePassword.vue
index 63d1224..2f9c221 100644
--- a/resources/js/components/dialogs/SMDialogChangePassword.vue
+++ b/resources/js/components/dialogs/SMDialogChangePassword.vue
@@ -32,7 +32,6 @@ import { useUserStore } from "../../store/UserStore";
 import SMButton from "../SMButton.vue";
 import SMFormCard from "../SMFormCard.vue";
 import SMForm from "../SMForm.vue";
-import SMFormFooter from "../SMFormFooter.vue";
 import SMInput from "../SMInput.vue";
 
 const form: FormObject = reactive(
diff --git a/resources/js/components/dialogs/SMDialogConfirm.vue b/resources/js/components/dialogs/SMDialogConfirm.vue
index 198759e..7d9bae0 100644
--- a/resources/js/components/dialogs/SMDialogConfirm.vue
+++ b/resources/js/components/dialogs/SMDialogConfirm.vue
@@ -2,7 +2,7 @@
     <SMFormCard>
         <h3>{{ props.title }}</h3>
         <p v-html="computedSanitizedText"></p>
-        <SMFormFooter>
+        <SMButtonRow>
             <template #left>
                 <SMButton
                     :type="props.cancel.type"
@@ -15,7 +15,7 @@
                     :label="props.confirm.label"
                     @click="handleClickConfirm()" />
             </template>
-        </SMFormFooter>
+        </SMButtonRow>
     </SMFormCard>
 </template>
 
@@ -26,7 +26,7 @@ import { closeDialog } from "../SMDialog";
 import { useApplicationStore } from "../../store/ApplicationStore";
 import SMButton from "../SMButton.vue";
 import SMFormCard from "../SMFormCard.vue";
-import SMFormFooter from "../SMFormFooter.vue";
+import SMButtonRow from "../SMButtonRow.vue";
 
 const props = defineProps({
     title: {
diff --git a/resources/js/views/EmailVerify.vue b/resources/js/views/EmailVerify.vue
index b3cfd51..8642272 100644
--- a/resources/js/views/EmailVerify.vue
+++ b/resources/js/views/EmailVerify.vue
@@ -13,14 +13,14 @@
                     </p>
                     <SMForm v-model="form" @submit="handleSubmit">
                         <SMInput control="code" />
-                        <SMFormFooter>
+                        <SMButtonRow>
                             <template #right>
                                 <SMButton
                                     type="submit"
                                     label="Verify Code"
                                     icon="arrow-forward-outline" />
                             </template>
-                        </SMFormFooter>
+                        </SMButtonRow>
                     </SMForm>
                 </template>
                 <template v-else>
@@ -28,11 +28,11 @@
                     <p class="text-center">
                         Hurrah, Your email has been verified!
                     </p>
-                    <SMFormFooter>
+                    <SMButtonRow>
                         <template #right>
                             <SMButton :to="{ name: 'login' }" label="Login" />
                         </template>
-                    </SMFormFooter>
+                    </SMButtonRow>
                 </template>
             </SMFormCard>
         </SMRow>
@@ -46,7 +46,7 @@ import { useRoute } from "vue-router";
 import SMButton from "../components/SMButton.vue";
 import SMFormCard from "../components/SMFormCard.vue";
 import SMForm from "../components/SMForm.vue";
-import SMFormFooter from "../components/SMFormFooter.vue";
+import SMButtonRow from "../components/SMButtonRow.vue";
 import SMInput from "../components/SMInput.vue";
 import { api } from "../helpers/api";
 import { Form, FormControl } from "../helpers/form";
diff --git a/resources/js/views/ForgotPassword.vue b/resources/js/views/ForgotPassword.vue
index 102a47c..293c548 100644
--- a/resources/js/views/ForgotPassword.vue
+++ b/resources/js/views/ForgotPassword.vue
@@ -10,7 +10,7 @@
                     </p>
                     <SMForm v-model="form" @submit="handleSubmit">
                         <SMInput control="username" />
-                        <SMFormFooter>
+                        <SMButtonRow>
                             <template #left>
                                 <div class="small">
                                     <span class="pr-1">Remember?</span
@@ -25,7 +25,7 @@
                                     label="Send"
                                     icon="arrow-forward-outline" />
                             </template>
-                        </SMFormFooter>
+                        </SMButtonRow>
                     </SMForm>
                 </template>
                 <template v-else>
@@ -52,7 +52,7 @@ import { useReCaptcha } from "vue-recaptcha-v3";
 import SMButton from "../components/SMButton.vue";
 import SMFormCard from "../components/SMFormCard.vue";
 import SMForm from "../components/SMForm.vue";
-import SMFormFooter from "../components/SMFormFooter.vue";
+import SMButtonRow from "../components/SMButtonRow.vue";
 import SMInput from "../components/SMInput.vue";
 import { api } from "../helpers/api";
 import { Form, FormControl } from "../helpers/form";
diff --git a/resources/js/views/ForgotUsername.vue b/resources/js/views/ForgotUsername.vue
index 72583aa..781324c 100644
--- a/resources/js/views/ForgotUsername.vue
+++ b/resources/js/views/ForgotUsername.vue
@@ -10,7 +10,7 @@
                     </p>
                     <SMForm v-model="form" @submit="handleSubmit">
                         <SMInput control="email" />
-                        <SMFormFooter>
+                        <SMButtonRow>
                             <template #left>
                                 <div class="small">
                                     <span class="pr-1">Remember?</span
@@ -25,7 +25,7 @@
                                     label="Send"
                                     icon="arrow-forward-outline" />
                             </template>
-                        </SMFormFooter>
+                        </SMButtonRow>
                     </SMForm>
                 </template>
                 <template v-else>
@@ -51,7 +51,7 @@ import { useReCaptcha } from "vue-recaptcha-v3";
 import SMButton from "../components/SMButton.vue";
 import SMFormCard from "../components/SMFormCard.vue";
 import SMForm from "../components/SMForm.vue";
-import SMFormFooter from "../components/SMFormFooter.vue";
+import SMButtonRow from "../components/SMButtonRow.vue";
 import SMInput from "../components/SMInput.vue";
 import { api } from "../helpers/api";
 import { Form, FormControl } from "../helpers/form";
diff --git a/resources/js/views/ResendEmailVerify.vue b/resources/js/views/ResendEmailVerify.vue
index e680e06..9dccd6d 100644
--- a/resources/js/views/ResendEmailVerify.vue
+++ b/resources/js/views/ResendEmailVerify.vue
@@ -6,7 +6,7 @@
                     <h1>Resend Verify Email</h1>
                     <SMForm v-model="form" @submit="handleSubmit">
                         <SMInput control="username" />
-                        <SMFormFooter>
+                        <SMButtonRow>
                             <template #left>
                                 <div class="small">
                                     <span class="pr-1">Stuck?</span
@@ -21,7 +21,7 @@
                                     label="Send"
                                     icon="arrow-forward-outline" />
                             </template>
-                        </SMFormFooter>
+                        </SMButtonRow>
                     </SMForm>
                 </template>
                 <template v-else>
@@ -31,11 +31,11 @@
                         to verify your email, you will receive an email with a
                         new verify code.
                     </p>
-                    <SMFormFooter>
+                    <SMButtonRow>
                         <template #right>
                             <SMButton :to="{ name: 'home' }" label="Home" />
                         </template>
-                    </SMFormFooter>
+                    </SMButtonRow>
                 </template>
             </SMFormCard>
         </SMRow>
@@ -48,7 +48,7 @@ import { useReCaptcha } from "vue-recaptcha-v3";
 import SMButton from "../components/SMButton.vue";
 import SMFormCard from "../components/SMFormCard.vue";
 import SMForm from "../components/SMForm.vue";
-import SMFormFooter from "../components/SMFormFooter.vue";
+import SMButtonRow from "../components/SMButtonRow.vue";
 import SMInput from "../components/SMInput.vue";
 import { api } from "../helpers/api";
 import { Form, FormControl } from "../helpers/form";
diff --git a/resources/js/views/ResetPassword.vue b/resources/js/views/ResetPassword.vue
index f23b7f0..32b3d8b 100644
--- a/resources/js/views/ResetPassword.vue
+++ b/resources/js/views/ResetPassword.vue
@@ -7,7 +7,7 @@
                     <SMForm v-model="form" @submit="handleSubmit">
                         <SMInput control="code" />
                         <SMInput control="password" type="password" />
-                        <SMFormFooter>
+                        <SMButtonRow>
                             <template #left>
                                 <div class="small">
                                     <router-link
@@ -22,7 +22,7 @@
                                     label="Reset Password"
                                     icon="arrow-forward-outline" />
                             </template>
-                        </SMFormFooter>
+                        </SMButtonRow>
                     </SMForm>
                 </template>
                 <template v-else>
@@ -30,11 +30,11 @@
                     <p class="text-center">
                         Hurrah, Your password has been changed!
                     </p>
-                    <SMFormFooter>
+                    <SMButtonRow>
                         <template #right>
                             <SMButton :to="{ name: 'login' }" label="Login" />
                         </template>
-                    </SMFormFooter>
+                    </SMButtonRow>
                 </template>
             </SMFormCard>
         </SMRow>
@@ -48,7 +48,7 @@ import { useRoute } from "vue-router";
 import SMButton from "../components/SMButton.vue";
 import SMFormCard from "../components/SMFormCard.vue";
 import SMForm from "../components/SMForm.vue";
-import SMFormFooter from "../components/SMFormFooter.vue";
+import SMButtonRow from "../components/SMButtonRow.vue";
 import SMInput from "../components/SMInput.vue";
 import { api } from "../helpers/api";
 import { Form, FormControl } from "../helpers/form";
diff --git a/resources/js/views/dashboard/EventEdit.vue b/resources/js/views/dashboard/EventEdit.vue
index 3254fdd..3d85b54 100644
--- a/resources/js/views/dashboard/EventEdit.vue
+++ b/resources/js/views/dashboard/EventEdit.vue
@@ -117,11 +117,11 @@
                     </SMColumn>
                 </SMRow>
                 <SMRow>
-                    <SMFormFooter>
+                    <SMButtonRow>
                         <template #right>
                             <SMButton type="submit" label="Save" />
                         </template>
-                    </SMFormFooter>
+                    </SMButtonRow>
                 </SMRow>
             </SMForm>
         </SMContainer>
@@ -133,7 +133,7 @@ import { computed, reactive, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import SMButton from "../../components/SMButton.vue";
 import SMEditor from "../../components/SMEditor.vue";
-import SMFormFooter from "../../components/SMFormFooter.vue";
+import SMButtonRow from "../../components/SMButtonRow.vue";
 import SMInput from "../../components/SMInput.vue";
 import { api } from "../../helpers/api";
 import { SMDate } from "../../helpers/datetime";
diff --git a/resources/js/views/dashboard/PostEdit.vue b/resources/js/views/dashboard/PostEdit.vue
index f4fd855..7a4537c 100644
--- a/resources/js/views/dashboard/PostEdit.vue
+++ b/resources/js/views/dashboard/PostEdit.vue
@@ -53,11 +53,11 @@
                     </SMColumn>
                 </SMRow>
                 <SMRow>
-                    <SMFormFooter>
+                    <SMButtonRow>
                         <template #right>
                             <SMButton type="submit" label="Save" />
                         </template>
-                    </SMFormFooter>
+                    </SMButtonRow>
                 </SMRow>
             </SMForm>
         </template>
@@ -70,7 +70,7 @@ import { useRoute, useRouter } from "vue-router";
 import SMButton from "../../components/SMButton.vue";
 import SMEditor from "../../components/SMEditor.vue";
 import SMForm from "../../components/SMForm.vue";
-import SMFormFooter from "../../components/SMFormFooter.vue";
+import SMButtonRow from "../../components/SMButtonRow.vue";
 import SMInput from "../../components/SMInput.vue";
 import SMInputAttachments from "../../components/SMInputAttachments.vue";
 import { api } from "../../helpers/api";