support small

resources/js/components/SMInput.vue

@@ -1,6 +1,6 @@
 <template>
     <SMControl
-        :class="['control-type-input', { 'input-active': active }]"
+        :class="['control-type-input', { 'input-active': active }, props.size]"
         :invalid="feedbackInvalid">
         <div v-if="slots.prepend" class="input-control-prepend">
             <slot name="prepend"></slot>
@@ -199,6 +199,11 @@ const props = defineProps({
         default: null,
         required: false,
     },
+    size: {
+        type: String,
+        default: "",
+        required: false,
+    },
 });
 
 const slots = useSlots();
@@ -628,5 +633,40 @@ const handleMediaSelect = async (event) => {
             }
         }
     }
+
+    &.small {
+        &.input-active {
+            .control-row .control-item .control-label {
+                transform: translate(16px, 6px) scale(0.7);
+            }
+        }
+
+        .control-row {
+            .control-item {
+                .control-label {
+                    transform: translate(16px, 10px) scale(1);
+                }
+
+                .input-control {
+                    padding: 16px 8px 4px 14px;
+                }
+            }
+
+            .input-control-append {
+                .button {
+                    .button-label {
+                        padding: 7px 16px 15px 16px;
+
+                        ion-icon {
+                            height: 16px;
+                            width: 16px;
+                        }
+                    }
+
+                    padding: 0;
+                }
+            }
+        }
+    }
 }
 </style>