add TitlePosition param to InputFieldVM and implement in SUInputField

Author: mikhailChelbaev

Sources/ComponentsKit/Components/InputField/Models/InputFieldTitlePosition.swift

@@ -0,0 +1,8 @@
+import Foundation
+
+extension InputFieldVM {
+  public enum TitlePosition {
+    case inside
+    case outside
+  }
+}

Sources/ComponentsKit/Components/InputField/Models/InputFieldVM.swift

@@ -67,6 +67,8 @@ public struct InputFieldVM: ComponentVM {
   /// The title displayed on the input field.
   public var title: String?
 
+  public var titlePosition: TitlePosition = .inside
+
   /// Initializes a new instance of `InputFieldVM` with default values.
   public init() {}
 }
@@ -104,7 +106,16 @@ extension InputFieldVM {
     }
   }
   var spacing: CGFloat {
-    return self.title.isNotNilAndEmpty ? 12 : 0
+    guard self.title.isNotNilAndEmpty else {
+      return 0
+    }
+
+    switch self.titlePosition {
+    case .inside:
+      return 12
+    case .outside:
+      return 8
+    }
   }
   var backgroundColor: UniversalColor {
     return self.color?.background ?? .content1

Sources/ComponentsKit/Components/InputField/SUInputField.swift

@@ -49,46 +49,53 @@ public struct SUInputField<FocusValue: Hashable>: View {
   // MARK: Body
 
   public var body: some View {
-    HStack(spacing: self.model.spacing) {
-      if let title = self.model.attributedTitle {
+    VStack(alignment: .leading, spacing: self.model.spacing) {
+      if let title = self.model.attributedTitle,
+         self.model.titlePosition == .outside {
         Text(title)
-          .font(self.model.preferredFont.font)
       }
 
-      Group {
-        if self.model.isSecureInput {
-          SecureField(text: self.$text, label: {
-            Text(self.model.placeholder ?? "")
-              .foregroundStyle(self.model.placeholderColor.color)
-          })
-        } else {
-          TextField(text: self.$text, label: {
-            Text(self.model.placeholder ?? "")
-              .foregroundStyle(self.model.placeholderColor.color)
-          })
+      HStack(spacing: self.model.spacing) {
+        if let title = self.model.attributedTitle,
+           self.model.titlePosition == .inside {
+          Text(title)
         }
+
+        Group {
+          if self.model.isSecureInput {
+            SecureField(text: self.$text, label: {
+              Text(self.model.placeholder ?? "")
+                .foregroundStyle(self.model.placeholderColor.color)
+            })
+          } else {
+            TextField(text: self.$text, label: {
+              Text(self.model.placeholder ?? "")
+                .foregroundStyle(self.model.placeholderColor.color)
+            })
+          }
+        }
+        .tint(self.model.tintColor.color)
+        .font(self.model.preferredFont.font)
+        .foregroundStyle(self.model.foregroundColor.color)
+        .applyFocus(globalFocus: self.globalFocus, localFocus: self.localFocus)
+        .disabled(!self.model.isEnabled)
+        .keyboardType(self.model.keyboardType)
+        .submitLabel(self.model.submitType.submitLabel)
+        .autocorrectionDisabled(!self.model.isAutocorrectionEnabled)
+        .textInputAutocapitalization(self.model.autocapitalization.textInputAutocapitalization)
       }
-      .tint(self.model.tintColor.color)
-      .font(self.model.preferredFont.font)
-      .foregroundStyle(self.model.foregroundColor.color)
-      .applyFocus(globalFocus: self.globalFocus, localFocus: self.localFocus)
-      .disabled(!self.model.isEnabled)
-      .keyboardType(self.model.keyboardType)
-      .submitLabel(self.model.submitType.submitLabel)
-      .autocorrectionDisabled(!self.model.isAutocorrectionEnabled)
-      .textInputAutocapitalization(self.model.autocapitalization.textInputAutocapitalization)
-    }
-    .padding(.horizontal, self.model.horizontalPadding)
-    .frame(height: self.model.height)
-    .background(self.model.backgroundColor.color)
-    .onTapGesture {
-      self.globalFocus?.wrappedValue = self.localFocus
-    }
-    .clipShape(
-      RoundedRectangle(
-        cornerRadius: self.model.cornerRadius.value()
+      .padding(.horizontal, self.model.horizontalPadding)
+      .frame(height: self.model.height)
+      .background(self.model.backgroundColor.color)
+      .onTapGesture {
+        self.globalFocus?.wrappedValue = self.localFocus
+      }
+      .clipShape(
+        RoundedRectangle(
+          cornerRadius: self.model.cornerRadius.value()
+        )
       )
-    )
+    }
   }
 }