From b538eb19296e90588392ccc9f65dabc53548fca6 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Wed, 22 Feb 2023 20:22:29 +1000
Subject: [PATCH] fix sm prefixes

---
 resources/js/components/SMColumn.vue | 12 ++++++------
 resources/js/components/SMDialog.vue |  6 +++---
 resources/js/components/SMForm.vue   |  8 --------
 resources/js/components/SMInput.vue  |  4 ++++
 resources/js/components/SMRow.vue    | 12 ++++++++----
 5 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/resources/js/components/SMColumn.vue b/resources/js/components/SMColumn.vue
index e5623ff..6fc50ab 100644
--- a/resources/js/components/SMColumn.vue
+++ b/resources/js/components/SMColumn.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        :class="['column', { 'flex-fill': fill && width == '' }]"
+        :class="['sm-column', { 'flex-fill': fill && width == '' }]"
         :style="styles">
         <slot></slot>
     </div>
@@ -28,13 +28,13 @@ if (props.width != "") {
 </script>
 
 <style lang="scss">
-.column {
+.sm-column {
     display: flex;
     margin: map-get($spacer, 2);
     flex-direction: column;
 }
 
-.row .row .column {
+.sm-row .sm-row .sm-column {
     &:first-of-type {
         margin-left: 0;
     }
@@ -44,13 +44,13 @@ if (props.width != "") {
     }
 }
 
-.dialog .column {
+.sm-dialog .sm-column {
     margin-top: 0;
     margin-bottom: 0;
 }
 
 @media screen and (max-width: 768px) {
-    .column {
+    .sm-column {
         flex-basis: auto !important;
         width: 100%;
 
@@ -60,7 +60,7 @@ if (props.width != "") {
 }
 
 @media screen and (max-width: 640px) {
-    .column {
+    .sm-column {
         flex-direction: column;
     }
 }
diff --git a/resources/js/components/SMDialog.vue b/resources/js/components/SMDialog.vue
index e8da213..12a71d5 100644
--- a/resources/js/components/SMDialog.vue
+++ b/resources/js/components/SMDialog.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         :class="[
-            'dialog',
+            'sm-dialog',
             { 'dialog-narrow': narrow },
             { 'dialog-full': full },
             { 'dialog-noshadow': noShadow },
@@ -46,7 +46,7 @@ defineProps({
 </script>
 
 <style lang="scss">
-.dialog {
+.sm-dialog {
     flex-direction: column;
     margin: 0 auto;
     background-color: #eee;
@@ -109,7 +109,7 @@ defineProps({
 }
 
 @media only screen and (max-width: 640px) {
-    .dialog {
+    .sm-dialog {
         padding: map-get($spacer, 5) map-get($spacer, 4) map-get($spacer, 4)
             map-get($spacer, 4);
         min-width: auto;
diff --git a/resources/js/components/SMForm.vue b/resources/js/components/SMForm.vue
index 739df22..a5f6edd 100644
--- a/resources/js/components/SMForm.vue
+++ b/resources/js/components/SMForm.vue
@@ -32,11 +32,3 @@ const handleSubmit = function () {
 
 provide("form", props.modelValue);
 </script>
-
-<style lang="scss">
-.sm-form-columns {
-    .sm-input-group {
-        margin-bottom: 0;
-    }
-}
-</style>
diff --git a/resources/js/components/SMInput.vue b/resources/js/components/SMInput.vue
index ac58016..94997e9 100644
--- a/resources/js/components/SMInput.vue
+++ b/resources/js/components/SMInput.vue
@@ -272,6 +272,10 @@ const inline = computed(() => {
 </script>
 
 <style lang="scss">
+.sm-column > .sm-input-group {
+    margin-bottom: 0;
+}
+
 .sm-input-group {
     position: relative;
     display: flex;
diff --git a/resources/js/components/SMRow.vue b/resources/js/components/SMRow.vue
index adebc08..5074fc8 100644
--- a/resources/js/components/SMRow.vue
+++ b/resources/js/components/SMRow.vue
@@ -1,6 +1,10 @@
 <template>
     <div
-        :class="['row', { 'row-break-lg': breakLarge }, { 'flex-fill': fill }]">
+        :class="[
+            'sm-row',
+            { 'row-break-lg': breakLarge },
+            { 'flex-fill': fill },
+        ]">
         <slot></slot>
     </div>
 </template>
@@ -21,7 +25,7 @@ defineProps({
 </script>
 
 <style lang="scss">
-.row {
+.sm-row {
     display: flex;
     flex-direction: row;
     margin: 0 auto;
@@ -31,13 +35,13 @@ defineProps({
 }
 
 @media screen and (max-width: 992px) {
-    .row.row-break-lg {
+    .sm-row.row-break-lg {
         flex-direction: column;
     }
 }
 
 @media screen and (max-width: 768px) {
-    .row {
+    .sm-row {
         flex-direction: column;
     }
 }