fix sm prefixes

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;
     }
 }

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;

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>

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;

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;
     }
 }