improve button

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/ButtonPreview.swift

@@ -6,7 +6,7 @@ struct ButtonPreview: View {
   @State private var model = ButtonVM {
     $0.title = "Button"
   }
-
+  
   var body: some View {
     VStack {
       PreviewWrapper(title: "UIKit") {
@@ -23,8 +23,22 @@ struct ButtonPreview: View {
           Text("Custom: 20px").tag(ComponentRadius.custom(20))
         }
         ButtonFontPicker(selection: self.$model.font)
-        Toggle("Enabled", isOn: self.$model.isEnabled)
+        if !self.model.isLoading {
+          Toggle("Enabled", isOn: self.$model.isEnabled)
+        }
         Toggle("Full Width", isOn: self.$model.isFullWidth)
+        Picker("Image Source", selection: self.$model.imageSrc) {
+          Text("SF Symbol").tag(ButtonVM.ImageSource.sfSymbol("camera.fill"))
+          Text("Local").tag(ButtonVM.ImageSource.local("avatar_placeholder"))
+          Text("None").tag(Optional<ButtonVM.ImageSource>.none)
+        }
+        if self.model.imageSrc != nil {
+          Picker("Image Location", selection: self.$model.imageLocation) {
+            Text("Leading").tag(ButtonVM.ImageLocation.leading)
+            Text("Trailing").tag(ButtonVM.ImageLocation.trailing)
+          }
+        }
+        Toggle("Loading", isOn: self.$model.isLoading)
         SizePicker(selection: self.$model.size)
         Picker("Style", selection: self.$model.style) {
           Text("Filled").tag(ButtonStyle.filled)
@@ -34,6 +48,16 @@ struct ButtonPreview: View {
           Text("Bordered with medium border").tag(ButtonStyle.bordered(.medium))
           Text("Bordered with large border").tag(ButtonStyle.bordered(.large))
         }
+        .onChange(of: self.model.imageLocation) { _ in
+          if self.model.isLoading {
+            self.model.isLoading = false
+          }
+        }
+        .onChange(of: self.model.imageSrc) { _ in
+          if self.model.isLoading {
+            self.model.isLoading = false
+          }
+        }
       }
     }
   }

Sources/ComponentsKit/Components/Button/Models/ButtonVM.swift

@@ -1,3 +1,4 @@
+import SwiftUI
 import UIKit
 
 /// A model that defines the appearance properties for a button component.
@@ -43,21 +44,57 @@ public struct ButtonVM: ComponentVM {
   /// Defaults to `.filled`.
   public var style: ButtonStyle = .filled
 
+  /// The loading VM used for the loading indicator.
+  ///
+  /// If not provided, a default loading view model is used.
+  public var loadingVM: LoadingVM?
+
+  /// A Boolean value indicating whether the button is currently in a loading state.
+  ///
+  /// Defaults to `false`.
+  public var isLoading: Bool = false
+
+  /// The source of the image to be displayed.
+  public var imageSrc: ImageSource?
+
+  /// The position of the image relative to the button's title.
+  ///
+  /// Defaults to `.leading`.
+  public var imageLocation: ImageLocation = .leading
+
+  /// The spacing between the button's title and its image or loading indicator.
+  ///
+  /// Defaults to `8.0`.
+  public var contentSpacing: CGFloat = 8.0
+
   /// Initializes a new instance of `ButtonVM` with default values.
   public init() {}
 }
 
 // MARK: Shared Helpers
 
 extension ButtonVM {
+  private var isInteractive: Bool {
+    self.isEnabled && !self.isLoading
+  }
+
+  var preferredLoadingVM: LoadingVM {
+    return self.loadingVM ?? .init {
+      $0.color = .init(
+        main: foregroundColor,
+        contrast: self.color?.main ?? .background
+      )
+      $0.size = .small
+    }
+  }
   var backgroundColor: UniversalColor? {
     switch self.style {
     case .filled:
       let color = self.color?.main ?? .content2
-      return color.enabled(self.isEnabled)
+      return color.enabled(self.isInteractive)
     case .light:
       let color = self.color?.background ?? .content1
-      return color.enabled(self.isEnabled)
+      return color.enabled(self.isInteractive)
     case .plain, .bordered:
       return nil
     }
@@ -69,7 +106,7 @@ extension ButtonVM {
     case .plain, .light, .bordered:
       self.color?.main ?? .foreground
     }
-    return color.enabled(self.isEnabled)
+    return color.enabled(self.isInteractive)
   }
   var borderWidth: CGFloat {
     switch self.style {
@@ -85,7 +122,7 @@ extension ButtonVM {
       return nil
     case .bordered:
       if let color {
-        return color.main.enabled(self.isEnabled)
+        return color.main.enabled(self.isInteractive)
       } else {
         return .divider
       }
@@ -121,6 +158,18 @@ extension ButtonVM {
   }
 }
 
+extension ButtonVM {
+  public enum ImageSource: Hashable {
+    case sfSymbol(String)
+    case local(String, bundle: Bundle? = nil)
+  }
+
+  public enum ImageLocation {
+    case leading
+    case trailing
+  }
+}
+
 // MARK: UIKit Helpers
 
 extension ButtonVM {
@@ -148,10 +197,34 @@ extension ButtonVM {
   }
 }
 
+extension ButtonVM {
+  public var uiImage: UIImage? {
+    guard let imageSrc = self.imageSrc else { return nil }
+    switch imageSrc {
+    case .sfSymbol(let name):
+      return UIImage(systemName: name)?.withRenderingMode(.alwaysTemplate)
+    case .local(let name, let bundle):
+      return UIImage(named: name, in: bundle, compatibleWith: nil)?.withRenderingMode(.alwaysTemplate)
+    }
+  }
+}
+
 // MARK: SwiftUI Helpers
 
 extension ButtonVM {
   var width: CGFloat? {
     return self.isFullWidth ? 10_000 : nil
   }
 }
+
+extension ButtonVM {
+  var buttonImage: Image? {
+    guard let imageSrc = self.imageSrc else { return nil }
+    switch imageSrc {
+    case .sfSymbol(let name):
+      return Image(systemName: name).renderingMode(.template)
+    case .local(let name, let bundle):
+      return Image(name, bundle: bundle).renderingMode(.template)
+    }
+  }
+}

Sources/ComponentsKit/Components/Button/SUButton.swift

@@ -29,25 +29,46 @@ public struct SUButton: View {
   // MARK: Body
 
   public var body: some View {
-    Button(self.model.title, action: self.action)
-      .buttonStyle(CustomButtonStyle(model: self.model))
-      .simultaneousGesture(DragGesture(minimumDistance: 0.0)
-        .onChanged { _ in
-          self.isPressed = true
-        }
-        .onEnded { _ in
-          self.isPressed = false
-        }
-      )
-      .disabled(!self.model.isEnabled)
-      .scaleEffect(
-        self.isPressed ? self.model.animationScale.value : 1,
-        anchor: .center
-      )
+    Button(action: self.action) {
+      HStack(spacing: self.model.contentSpacing) {
+        self.content()
+      }
+      .frame(maxWidth: self.model.width)
+      .frame(height: self.model.height)
+    }
+    .buttonStyle(CustomButtonStyle(model: self.model))
+    .simultaneousGesture(DragGesture(minimumDistance: 0.0)
+      .onChanged { _ in
+        self.isPressed = true
+      }
+      .onEnded { _ in
+        self.isPressed = false
+      }
+    )
+    .disabled(!self.model.isEnabled || self.model.isLoading)
+    .scaleEffect(
+      self.isPressed ? self.model.animationScale.value : 1,
+      anchor: .center
+    )
   }
-}
 
-// MARK: - Helpers
+  @ViewBuilder
+  private func content() -> some View {
+    switch (self.model.isLoading, self.model.buttonImage, self.model.imageLocation) {
+    case (true, _, _):
+      SULoading(model: self.model.preferredLoadingVM)
+      Text(self.model.title)
+    case (false, let image?, .leading):
+      image
+      Text(self.model.title)
+    case (false, let image?, .trailing):
+      Text(self.model.title)
+      image
+    default:
+      Text(self.model.title)
+    }
+  }
+}
 
 private struct CustomButtonStyle: SwiftUI.ButtonStyle {
   let model: ButtonVM

Sources/ComponentsKit/Components/Button/UKButton.swift

@@ -32,6 +32,15 @@ open class UKButton: UIView, UKComponent {
   /// A label that displays the title from the model.
   public var titleLabel = UILabel()
 
+  /// A loader view, created with the preferred loading VM from the model.
+  public let loaderView: UKLoading
+
+  /// A stack view that arranges the loader and title label.
+  private let stackView = UIStackView()
+
+  /// A image view for displaying the image from the model.
+  public let imageView: UIImageView = UIImageView()
+
   // MARK: UIView Properties
 
   open override var intrinsicContentSize: CGSize {
@@ -50,6 +59,7 @@ open class UKButton: UIView, UKComponent {
   ) {
     self.model = model
     self.action = action
+    self.loaderView = UKLoading(model: model.preferredLoadingVM)
     super.init(frame: .zero)
 
     self.setup()
@@ -64,7 +74,7 @@ open class UKButton: UIView, UKComponent {
   // MARK: Setup
 
   private func setup() {
-    self.addSubview(self.titleLabel)
+    self.addSubview(self.stackView)
 
     if #available(iOS 17.0, *) {
       self.registerForTraitChanges([UITraitUserInterfaceStyle.self]) { (view: Self, _: UITraitCollection) in
@@ -78,12 +88,23 @@ open class UKButton: UIView, UKComponent {
   private func style() {
     Self.Style.mainView(self, model: self.model)
     Self.Style.titleLabel(self.titleLabel, model: self.model)
+    Self.Style.configureStackView(
+      self.stackView,
+      model: self.model,
+      loaderView: self.loaderView,
+      titleLabel: self.titleLabel,
+      imageView: self.imageView
+    )
+
+    self.loaderView.model = self.model.preferredLoadingVM
+
+    self.loaderView.isHidden = !self.model.isLoading
   }
 
   // MARK: Layout
 
   private func layout() {
-    self.titleLabel.center()
+    self.stackView.center()
   }
 
   open override func layoutSubviews() {
@@ -99,15 +120,21 @@ open class UKButton: UIView, UKComponent {
 
     self.style()
 
-    if self.model.shouldUpdateSize(oldModel) {
+    self.imageView.image = self.model.uiImage
+    self.imageView.tintColor = self.model.foregroundColor.uiColor
+
+    if self.model.shouldUpdateSize(oldModel)
+        || self.model.isLoading != oldModel.isLoading
+        || self.model.imageSrc != oldModel.imageSrc
+        || self.model.imageLocation != oldModel.imageLocation {
       self.invalidateIntrinsicContentSize()
     }
   }
 
   // MARK: UIView methods
 
   open override func sizeThatFits(_ size: CGSize) -> CGSize {
-    let contentSize = self.titleLabel.sizeThatFits(size)
+    let contentSize = self.stackView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
     let preferredSize = self.model.preferredSize(
       for: contentSize,
       parentWidth: self.superview?.bounds.width
@@ -183,5 +210,40 @@ extension UKButton {
       label.font = model.preferredFont.uiFont
       label.textColor = model.foregroundColor.uiColor
     }
+    static func configureStackView(
+      _ stackView: UIStackView,
+      model: Model,
+      loaderView: UKLoading,
+      titleLabel: UILabel,
+      imageView: UIImageView
+    ) {
+      stackView.axis = .horizontal
+      stackView.alignment = .center
+      stackView.spacing = model.contentSpacing
+
+      for subview in stackView.arrangedSubviews {
+        stackView.removeArrangedSubview(subview)
+        subview.removeFromSuperview()
+      }
+
+      if model.isLoading {
+        stackView.addArrangedSubview(loaderView)
+        stackView.addArrangedSubview(titleLabel)
+        return
+      }
+
+      if model.imageSrc != nil {
+        switch model.imageLocation {
+        case .leading:
+          stackView.addArrangedSubview(imageView)
+          stackView.addArrangedSubview(titleLabel)
+        case .trailing:
+          stackView.addArrangedSubview(titleLabel)
+          stackView.addArrangedSubview(imageView)
+        }
+      } else {
+        stackView.addArrangedSubview(titleLabel)
+      }
+    }
   }
 }