From 4cc129aad6bd63a3653e8713d0a7cbdeb220608c Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Thu, 26 Jan 2023 11:49:10 +1000
Subject: [PATCH] added block option

---
 resources/js/components/SMButton.vue | 35 +++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/SMButton.vue b/resources/js/components/SMButton.vue
index a90f6fe..0e3428e 100644
--- a/resources/js/components/SMButton.vue
+++ b/resources/js/components/SMButton.vue
@@ -3,7 +3,12 @@
         v-if="href.length > 0 || typeof to == 'string'"
         :href="href"
         :disabled="disabled"
-        :class="['button', 'prevent-select', classType]"
+        :class="[
+            'button',
+            'prevent-select',
+            classType,
+            { 'button-block': block },
+        ]"
         :type="buttonType">
         {{ label }}
         <font-awesome-icon v-if="icon" :icon="icon" />
@@ -11,7 +16,12 @@
     <button
         v-else-if="to == null"
         :disabled="disabled"
-        :class="['button', 'prevent-select', classType]"
+        :class="[
+            'button',
+            'prevent-select',
+            classType,
+            { 'button-block': block },
+        ]"
         :type="buttonType">
         {{ label }}
         <font-awesome-icon v-if="icon" :icon="icon" />
@@ -20,7 +30,12 @@
         v-else
         :to="to"
         :disabled="disabled"
-        :class="['button', 'prevent-select', classType]">
+        :class="[
+            'button',
+            'prevent-select',
+            classType,
+            { 'button-block': block },
+        ]">
         {{ label }}
         <font-awesome-icon v-if="icon" :icon="icon" />
     </router-link>
@@ -51,8 +66,22 @@ const props = defineProps({
         default: false,
         required: false,
     },
+    block: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
 });
 
 const buttonType = props.type == "submit" ? "submit" : "button";
 const classType = props.type == "submit" ? "primary" : props.type;
 </script>
+
+<style lang="scss">
+.button {
+    &.button-block {
+        display: block;
+        width: 100%;
+    }
+}
+</style>