add lineCap param to circular progress

Author: mikhailChelbaev

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/CircularProgressPreview.swift

@@ -37,17 +37,22 @@ struct CircularProgressPreview: View {
       Form {
         ComponentColorPicker(selection: self.$model.color)
         CaptionFontPicker(selection: self.$model.font)
+        Picker("Line Cap", selection: self.$model.lineCap) {
+          Text("Butt").tag(CircularProgressVM.LineCap.butt)
+          Text("Rounded").tag(CircularProgressVM.LineCap.rounded)
+          Text("Square").tag(CircularProgressVM.LineCap.square)
+        }
         Picker("Line Width", selection: self.$model.lineWidth) {
           Text("Default").tag(Optional<CGFloat>.none)
           Text("2").tag(Optional<CGFloat>.some(2))
           Text("4").tag(Optional<CGFloat>.some(4))
           Text("8").tag(Optional<CGFloat>.some(8))
         }
-        SizePicker(selection: self.$model.size)
         Picker("Shape", selection: self.$model.shape) {
           Text("Circle").tag(CircularProgressVM.Shape.circle)
           Text("Arc").tag(CircularProgressVM.Shape.arc)
         }
+        SizePicker(selection: self.$model.size)
       }
       .onReceive(self.timer) { _ in
         if self.currentValue < self.model.maxValue {

Sources/ComponentsKit/Components/CircularProgress/Models/CircularProgressLineCap.swift

@@ -0,0 +1,44 @@
+import SwiftUI
+import UIKit
+
+extension CircularProgressVM {
+  /// Defines the style of line endings.
+  public enum LineCap {
+    /// The line ends exactly at the endpoint with a flat edge.
+    case butt
+    /// The line ends with a semicircular arc that extends beyond the endpoint, creating a rounded appearance.
+    case rounded
+    /// The line ends with a square cap that extends beyond the endpoint by half the line width, similar to `butt` but with a protruding end.
+    case square
+  }
+}
+
+// MARK: - UIKit Helpers
+
+extension CircularProgressVM.LineCap {
+  var shapeLayerLineCap: CAShapeLayerLineCap {
+    switch self {
+    case .butt:
+      return .butt
+    case .rounded:
+      return .round
+    case .square:
+      return .square
+    }
+  }
+}
+
+// MARK: - SwiftUI Helpers
+
+extension CircularProgressVM.LineCap {
+  var cgLineCap: CGLineCap {
+    switch self {
+    case .butt:
+      return .butt
+    case .rounded:
+      return .round
+    case .square:
+      return .square
+    }
+  }
+}

Sources/ComponentsKit/Components/CircularProgress/Models/CircularProgressShape.swift

@@ -3,7 +3,9 @@ import Foundation
 extension CircularProgressVM {
   /// Defines the shapes for the circular progress component.
   public enum Shape {
+    /// Renders a complete circle to represent the progress.
     case circle
+    /// Renders only a portion of the circle (an arc) to represent progress.
     case arc
   }
 }

Sources/ComponentsKit/Components/CircularProgress/Models/CircularProgressVM.swift

@@ -13,6 +13,9 @@ public struct CircularProgressVM: ComponentVM {
   /// An optional label to display inside the circular progress.
   public var label: String?
 
+  /// The style of line endings.
+  public var lineCap: LineCap = .rounded
+
   /// The width of the circular progress stroke.
   public var lineWidth: CGFloat?
 

Sources/ComponentsKit/Components/CircularProgress/SUCircularProgress.swift

@@ -46,7 +46,7 @@ public struct SUCircularProgress: View {
         self.model.color.background.color,
         style: StrokeStyle(
           lineWidth: self.model.circularLineWidth,
-          lineCap: .round
+          lineCap: self.model.lineCap.cgLineCap
         )
       )
       .frame(
@@ -69,7 +69,7 @@ public struct SUCircularProgress: View {
         self.model.color.main.color,
         style: StrokeStyle(
           lineWidth: self.model.circularLineWidth,
-          lineCap: .round
+          lineCap: self.model.lineCap.cgLineCap
         )
       )
       .frame(

Sources/ComponentsKit/Components/CircularProgress/UKCircularProgress.swift

@@ -182,7 +182,7 @@ extension UKCircularProgress {
     ) {
       layer.fillColor = UIColor.clear.cgColor
       layer.strokeColor = model.color.background.cgColor
-      layer.lineCap = .round
+      layer.lineCap = model.lineCap.shapeLayerLineCap
       layer.lineWidth = model.circularLineWidth
     }
 
@@ -192,7 +192,7 @@ extension UKCircularProgress {
     ) {
       layer.fillColor = UIColor.clear.cgColor
       layer.strokeColor = model.color.main.uiColor.cgColor
-      layer.lineCap = .round
+      layer.lineCap = model.lineCap.shapeLayerLineCap
       layer.lineWidth = model.circularLineWidth
     }