diff --git a/Sources/HTMLKitComponents/Actions/SubmitAction.swift b/Sources/HTMLKitComponents/Actions/SubmitAction.swift index 96ee6128..b96c25b3 100644 --- a/Sources/HTMLKitComponents/Actions/SubmitAction.swift +++ b/Sources/HTMLKitComponents/Actions/SubmitAction.swift @@ -4,19 +4,19 @@ public struct SubmitAction: Action { public func validate(_ target: String, _ validators: [Validator]) -> SubmitAction { - var newSelf = self + var copy = self if !validators.isEmpty { let result = validators.map { "{\"field\":\"\($0.field)\",\"rule\":\"\($0.rule)\"}" } - newSelf.actions.append("$('#\(target.escape())').validate('[\(result.joined(separator: ","))]');") + copy.actions.append("$('#\(target.escape())').validate('[\(result.joined(separator: ","))]');") - return newSelf + return copy } - newSelf.actions.append("$('#\(target.escape())').validate('[]');") + copy.actions.append("$('#\(target.escape())').validate('[]');") - return newSelf + return copy } } diff --git a/Sources/HTMLKitComponents/Actions/ViewAction.swift b/Sources/HTMLKitComponents/Actions/ViewAction.swift index 1fe0c661..c87f87ad 100644 --- a/Sources/HTMLKitComponents/Actions/ViewAction.swift +++ b/Sources/HTMLKitComponents/Actions/ViewAction.swift @@ -9,10 +9,10 @@ public struct ViewAction: Action { /// - Returns: The action public func show(_ target: String) -> ViewAction { - var newSelf = self - newSelf.actions.append("$('#\(target.escape())').show();") + var copy = self + copy.actions.append("$('#\(target.escape())').show();") - return newSelf + return copy } /// Hide a target based on a event. @@ -22,10 +22,10 @@ public struct ViewAction: Action { /// - Returns: The action public func hide(_ target: String) -> ViewAction { - var newSelf = self - newSelf.actions.append("$('#\(target.escape())').hide();") + var copy = self + copy.actions.append("$('#\(target.escape())').hide();") - return newSelf + return copy } /// Play an animation based on a event. @@ -35,10 +35,10 @@ public struct ViewAction: Action { /// - Returns: The action public func animate(_ target: String) -> ViewAction { - var newSelf = self - newSelf.actions.append("$('#\(target.escape())').animate();") + var copy = self + copy.actions.append("$('#\(target.escape())').animate();") - return newSelf + return copy } /// Open a target based on a event. @@ -48,10 +48,10 @@ public struct ViewAction: Action { /// - Returns: The action public func open(_ target: String) -> ViewAction { - var newSelf = self - newSelf.actions.append("$('#\(target.escape())').open();") + var copy = self + copy.actions.append("$('#\(target.escape())').open();") - return newSelf + return copy } /// Close a target based on a event. @@ -61,9 +61,9 @@ public struct ViewAction: Action { /// - Returns: The action public func close(_ target: String) -> ViewAction { - var newSelf = self - newSelf.actions.append("$('#\(target.escape())').close();") + var copy = self + copy.actions.append("$('#\(target.escape())').close();") - return newSelf + return copy } } diff --git a/Sources/HTMLKitComponents/Components/Alert.swift b/Sources/HTMLKitComponents/Components/Alert.swift index f0588209..c7cdeafe 100644 --- a/Sources/HTMLKitComponents/Components/Alert.swift +++ b/Sources/HTMLKitComponents/Components/Alert.swift @@ -15,7 +15,7 @@ public struct Alert: View, Identifiable, Modifiable { internal var id: String? /// The body content of the alert - internal var content: [Content] + internal let content: [Content] /// The class names for the alert. internal var classes: [String] @@ -59,10 +59,15 @@ extension Alert: ViewModifier { return self.mutate(zindex: index.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> Alert { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> Alert { + return self.mutate(backgroundcolor: color.value) + } + public func hidden(_ condition: Bool = true) -> Alert { if condition { @@ -80,16 +85,17 @@ extension Alert: ViewModifier { return self.mutate(padding: length.value, insets: insets) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> Alert { return self.mutate(bordershape: shape.value) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Alert { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Alert { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight?, alignment: Tokens.FrameAlignment?) -> Alert { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet, length: Tokens.MarginLength) -> Alert { diff --git a/Sources/HTMLKitComponents/Components/BarMark.swift b/Sources/HTMLKitComponents/Components/BarMark.swift index 3132252e..29595136 100644 --- a/Sources/HTMLKitComponents/Components/BarMark.swift +++ b/Sources/HTMLKitComponents/Components/BarMark.swift @@ -15,10 +15,10 @@ import HTMLKit public struct BarMark: View, Modifiable { /// The value of the mark. - internal var value: Int + internal let value: Int /// The title of the mark. - internal var label: String + internal let label: String /// The class names of the bar mark. internal var classes: [String] @@ -54,6 +54,6 @@ public struct BarMark: View, Modifiable { /// /// - Returns: The mark public func foregroundColor(_ color: Tokens.ForegroundColor) -> BarMark { - return self.mutate(class: "foreground:\(color.value)") + return self.mutate(classes: "foreground:\(color.value)") } } diff --git a/Sources/HTMLKitComponents/Components/Button.swift b/Sources/HTMLKitComponents/Components/Button.swift index e65290ef..11d8046d 100644 --- a/Sources/HTMLKitComponents/Components/Button.swift +++ b/Sources/HTMLKitComponents/Components/Button.swift @@ -16,10 +16,10 @@ public struct Button: View, Modifiable, Actionable { internal var id: String? /// The role of the button. - internal var role: HTMLKit.Values.Button + internal let role: HTMLKit.Values.Button /// The body content of the button. - internal var content: [Content] + internal let content: [Content] /// The class names for the button. internal var classes: [String] @@ -118,10 +118,15 @@ extension Button: PressEvent { extension Button: ViewModifier { + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> Button { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> Button { + return self.mutate(backgroundcolor: color.value) + } + public func opacity(_ value: Tokens.OpacityValue) -> Button { return self.mutate(opacity: value.value) } @@ -147,16 +152,17 @@ extension Button: ViewModifier { return self.mutate(padding: length.value, insets: insets) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> Button { return self.mutate(bordershape: shape.value) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Button { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Button { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Button { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet, length: Tokens.MarginLength = .small) -> Button { diff --git a/Sources/HTMLKitComponents/Components/Card.swift b/Sources/HTMLKitComponents/Components/Card.swift index fea0e07d..4d015b6d 100644 --- a/Sources/HTMLKitComponents/Components/Card.swift +++ b/Sources/HTMLKitComponents/Components/Card.swift @@ -19,10 +19,10 @@ public struct Card: View, Modifiable, Identifiable { internal var id: String? /// The header content of the card. - internal var header: [Content]? + internal let header: [Content]? /// The body content of the card. - internal var content: [Content] + internal let content: [Content] /// The class names for the card. internal var classes: [String] @@ -32,6 +32,7 @@ public struct Card: View, Modifiable, Identifiable { /// - Parameter content: The card's content public init(@ContentBuilder content: () -> [Content]) { + self.header = nil self.content = content() self.classes = ["card"] } @@ -95,10 +96,15 @@ extension Card: ViewModifier { return self.mutate(zindex: index.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> Card { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> Card { + return self.mutate(backgroundcolor: color.value) + } + public func hidden(_ condition: Bool = true) -> Card { if condition { @@ -116,16 +122,17 @@ extension Card: ViewModifier { return self.mutate(padding: length.value, insets: insets) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> Card { return self.mutate(bordershape: shape.value) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Card { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Card { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Card { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Card { diff --git a/Sources/HTMLKitComponents/Components/Carousel.swift b/Sources/HTMLKitComponents/Components/Carousel.swift index ec918d47..e51a49a4 100644 --- a/Sources/HTMLKitComponents/Components/Carousel.swift +++ b/Sources/HTMLKitComponents/Components/Carousel.swift @@ -98,24 +98,30 @@ extension Carousel: ViewModifier { return self.mutate(padding: length.value, insets: insets) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Carousel { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Carousel { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> Carousel { return self.mutate(bordershape: shape.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> Carousel { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> Carousel { + return self.mutate(backgroundcolor: color.value) + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> Carousel { return self.mutate(scheme: scheme.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Carousel { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Carousel { diff --git a/Sources/HTMLKitComponents/Components/Chart.swift b/Sources/HTMLKitComponents/Components/Chart.swift index 0e3a6550..fe137f1c 100644 --- a/Sources/HTMLKitComponents/Components/Chart.swift +++ b/Sources/HTMLKitComponents/Components/Chart.swift @@ -43,6 +43,6 @@ public struct Chart: View, Modifiable { /// /// - Returns: The chart public func innerRadius(_ color: Tokens.InnerRadius) -> Chart { - return self.mutate(class: "radius:\(color.value)") + return self.mutate(classes: "radius:\(color.value)") } } diff --git a/Sources/HTMLKitComponents/Components/CheckField.swift b/Sources/HTMLKitComponents/Components/CheckField.swift index 0c45b5cc..8719779a 100644 --- a/Sources/HTMLKitComponents/Components/CheckField.swift +++ b/Sources/HTMLKitComponents/Components/CheckField.swift @@ -27,7 +27,7 @@ public struct CheckField: View, Modifiable, Selectable, Identifiable { internal var isSelected: Bool /// The body content of the field. - internal var content: Content + internal let content: Content /// The class names for the field. internal var classes: [String] @@ -130,24 +130,30 @@ extension CheckField: ViewModifier { return self.mutate(padding: length.value, insets: insets) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> CheckField { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> CheckField { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> CheckField { return self.mutate(bordershape: shape.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> CheckField { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> CheckField { + return self.mutate(backgroundcolor: color.value) + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> CheckField { return self.mutate(scheme: scheme.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> CheckField { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> CheckField { diff --git a/Sources/HTMLKitComponents/Components/DatePicker.swift b/Sources/HTMLKitComponents/Components/DatePicker.swift index 592e2c32..be061f61 100644 --- a/Sources/HTMLKitComponents/Components/DatePicker.swift +++ b/Sources/HTMLKitComponents/Components/DatePicker.swift @@ -2,10 +2,10 @@ import HTMLKit /// A view that represents a date picker. /// -/// Use `DatePicker` to pick a date from a calendar +/// Use `DatePicker` to pick a date from a calendar. /// /// ```swift -/// DatePicker(name: "lorem") +/// DatePicker(name: "lorem", prompt: "Lorem ipsum", value: "Lorem ipsum") /// ``` public struct DatePicker: View, Modifiable, Identifiable { @@ -15,6 +15,9 @@ public struct DatePicker: View, Modifiable, Identifiable { /// The name of the picker. internal let name: String + /// The content hint for the field. + internal let prompt: PromptType? + /// The content of the picker. internal let value: String? @@ -25,13 +28,30 @@ public struct DatePicker: View, Modifiable, Identifiable { internal var events: [String]? /// Create a date picker. - /// + /// /// - Parameters: /// - name: The name to assign to the field. + /// - prompt: The prompt to guide the user. /// - value: The date to edit within the field. - public init(name: String, value: String? = nil) { + @_disfavoredOverload + public init(name: String, prompt: String? = nil, value: String? = nil) { self.name = name + self.prompt = prompt.map(PromptType.string(_:)) + self.value = value + self.classes = ["datepicker"] + } + + /// Create a date picker. + /// + /// - Parameters: + /// - name: The name to assign to the field. + /// - prompt: The prompt to guide the user. + /// - value: The date to edit within the field. + public init(name: String, prompt: LocalizedStringKey? = nil, value: String? = nil) { + + self.name = name + self.prompt = prompt.map(PromptType.value(_:)) self.value = value self.classes = ["datepicker"] } @@ -45,6 +65,9 @@ public struct DatePicker: View, Modifiable, Identifiable { .modify(unwrap: value) { $0.value($1) } + .modify(unwrap: prompt) { + $0.placeholder($1) + } self.calendar } .class(classes.joined(separator: " ")) @@ -63,15 +86,13 @@ public struct DatePicker: View, Modifiable, Identifiable { } .points("10 2 4 8 10 14") } - .viewBox("0 0 16 16") + .viewBox(x: 0, y: 0, width: 16, height: 16) .namespace("http://www.w3.org/2000/svg") .fill("currentColor") - .strokeWidth(2) - .strokeLineCap(.round) - .strokeLineJoin(.round) + .stroke("currentColor", width: 2, cap: .round, join: .round) } .type(.button) - .value("previous") + .value(verbatim: "previous") } ListItem { Bold { @@ -85,15 +106,13 @@ public struct DatePicker: View, Modifiable, Identifiable { } .points("6 2 12 8 6 14") } - .viewBox("0 0 16 16") + .viewBox(x: 0, y: 0, width: 16, height: 16) .namespace("http://www.w3.org/2000/svg") .fill("currentColor") - .strokeWidth(2) - .strokeLineCap(.round) - .strokeLineJoin(.round) + .stroke("currentColor", width: 2, cap: .round, join: .round) } .type(.button) - .value("next") + .value(verbatim: "next") } } .class("calendar-navigation") @@ -168,24 +187,30 @@ extension DatePicker: ViewModifier { return self.mutate(padding: length.value, insets: insets) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> DatePicker { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> DatePicker { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> DatePicker { return self.mutate(bordershape: shape.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> DatePicker { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> DatePicker { + return self.mutate(backgroundcolor: color.value) + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> DatePicker { return self.mutate(scheme: scheme.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> DatePicker { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> DatePicker { diff --git a/Sources/HTMLKitComponents/Components/Disclosure.swift b/Sources/HTMLKitComponents/Components/Disclosure.swift index 5e8d9380..998d4bc0 100644 --- a/Sources/HTMLKitComponents/Components/Disclosure.swift +++ b/Sources/HTMLKitComponents/Components/Disclosure.swift @@ -62,7 +62,7 @@ public struct Disclosure: View, Modifiable { } .draw("M7.28,2.241C6.987,1.957 6.987,1.497 7.28,1.213C7.573,0.929 8.048,0.929 8.341,1.213L14.811,7.486C15.103,7.77 15.103,8.23 14.811,8.514L8.28,14.787C7.987,15.071 7.512,15.071 7.22,14.787C6.927,14.503 6.927,14.043 7.22,13.759L13.22,8L7.28,2.241Z") } - .viewBox("0 0 20 16") + .viewBox(x: 0, y: 0, width: 20, height: 16) .namespace("http://www.w3.org/2000/svg") .class("state-indicator") } diff --git a/Sources/HTMLKitComponents/Components/Divider.swift b/Sources/HTMLKitComponents/Components/Divider.swift index 7ba1d6e5..75afcfc7 100644 --- a/Sources/HTMLKitComponents/Components/Divider.swift +++ b/Sources/HTMLKitComponents/Components/Divider.swift @@ -10,7 +10,7 @@ import HTMLKit public struct Divider: View { /// The class names for the divider. - internal var classes: [String] + internal var classes: [String] /// Create a divider. public init() { diff --git a/Sources/HTMLKitComponents/Components/Dropdown.swift b/Sources/HTMLKitComponents/Components/Dropdown.swift index 1c62d680..93f01a0c 100644 --- a/Sources/HTMLKitComponents/Components/Dropdown.swift +++ b/Sources/HTMLKitComponents/Components/Dropdown.swift @@ -24,10 +24,10 @@ public struct Dropdown: View, Modifiable, Identifiable { internal var id: String? /// The label content for the dropdown. - internal var label: [Content] + internal let label: [Content] /// The body content of the dropdown. - internal var content: [Content] + internal let content: [Content] /// The class names for the dropdown. internal var classes: [String] @@ -94,24 +94,30 @@ extension Dropdown: ViewModifier { return self.mutate(padding: length.value, insets: insets) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> Dropdown { return self.mutate(bordershape: shape.value) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Dropdown { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Dropdown { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> Dropdown { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> Dropdown { + return self.mutate(backgroundcolor: color.value) + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> Dropdown { return self.mutate(scheme: scheme.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Dropdown { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Dropdown { diff --git a/Sources/HTMLKitComponents/Components/FieldLabel.swift b/Sources/HTMLKitComponents/Components/FieldLabel.swift index 83b011ab..39862879 100644 --- a/Sources/HTMLKitComponents/Components/FieldLabel.swift +++ b/Sources/HTMLKitComponents/Components/FieldLabel.swift @@ -15,7 +15,7 @@ public struct FieldLabel: View { internal let id: String /// The body content of the label. - internal var content: [Content] + internal let content: [Content] /// The class names for the label. internal var classes: [String] diff --git a/Sources/HTMLKitComponents/Components/FileDialog.swift b/Sources/HTMLKitComponents/Components/FileDialog.swift index 18048647..b44cd066 100644 --- a/Sources/HTMLKitComponents/Components/FileDialog.swift +++ b/Sources/HTMLKitComponents/Components/FileDialog.swift @@ -89,24 +89,30 @@ extension FileDialog: ViewModifier { return self.mutate(padding: length.value, insets: insets) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> FileDialog { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> FileDialog { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> FileDialog { return self.mutate(bordershape: shape.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> FileDialog { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> FileDialog { + return self.mutate(backgroundcolor: color.value) + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> FileDialog { return self.mutate(scheme: scheme.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> FileDialog { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> FileDialog { diff --git a/Sources/HTMLKitComponents/Components/Form.swift b/Sources/HTMLKitComponents/Components/Form.swift index 774304fd..daf25046 100644 --- a/Sources/HTMLKitComponents/Components/Form.swift +++ b/Sources/HTMLKitComponents/Components/Form.swift @@ -21,13 +21,13 @@ public struct Form: View, Actionable { internal var id: String? /// The form method of the submission. - internal var method: HTMLKit.Values.Method + internal let method: HTMLKit.Values.Method /// The encoding strategy for the submission. - internal var encoding: HTMLKit.Values.Encoding + internal let encoding: HTMLKit.Values.Encoding /// The body content of the form. - internal var content: [FormElement] + internal let content: [FormElement] /// The class names for the form. internal var classes: [String] diff --git a/Sources/HTMLKitComponents/Components/Grid.swift b/Sources/HTMLKitComponents/Components/Grid.swift index 53176076..0b4ea7e3 100644 --- a/Sources/HTMLKitComponents/Components/Grid.swift +++ b/Sources/HTMLKitComponents/Components/Grid.swift @@ -28,7 +28,7 @@ public struct Grid: View, Modifiable, Actionable { internal var id: String? /// The body content of the grid. - internal var content: [Content] + internal let content: [Content] /// The class names for the grid. internal var classes: [String] @@ -112,10 +112,15 @@ extension Grid: MouseEvent { extension Grid: ViewModifier { + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> Grid { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> Grid { + return self.mutate(backgroundcolor: color.value) + } + public func opacity(_ value: Tokens.OpacityValue) -> Grid { return self.mutate(opacity: value.value) } @@ -141,16 +146,17 @@ extension Grid: ViewModifier { return self.mutate(padding: length.value, insets: insets) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> Grid { return self.mutate(bordershape: shape.value) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Grid { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Grid { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Grid { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Grid { diff --git a/Sources/HTMLKitComponents/Components/Grouping.swift b/Sources/HTMLKitComponents/Components/Grouping.swift index 8d4a9cde..485ee89e 100644 --- a/Sources/HTMLKitComponents/Components/Grouping.swift +++ b/Sources/HTMLKitComponents/Components/Grouping.swift @@ -20,7 +20,7 @@ public struct Grouping: View, Modifiable, Identifiable { internal var id: String? /// The body content of the grouping. - internal var content: [Content] + internal let content: [Content] /// The class names for the grouping. internal var classes: [String] @@ -54,19 +54,19 @@ public struct Grouping: View, Modifiable, Identifiable { /// - Returns: The grouping public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Grouping { - var newSelf = self + var copy = self if let height { - newSelf.classes.append("height:\(height.value)") + copy.classes.append("height:\(height.value)") } if let alignment { - newSelf.classes.append("frame-alignment:\(alignment.value)") + copy.classes.append("frame-alignment:\(alignment.value)") } - newSelf.classes.append("width:\(width.value)") + copy.classes.append("width:\(width.value)") - return newSelf + return copy } /// Set the identifier for the grouping. @@ -82,7 +82,7 @@ public struct Grouping: View, Modifiable, Identifiable { extension Grouping: TextModifier { public func font(_ family: Tokens.FontFamily) -> Grouping { - return mutate(fontfamily: family.value) + return self.mutate(fontfamily: family.value) } public func textStyle(_ style: Tokens.TextStyle) -> Grouping { @@ -162,6 +162,6 @@ extension Grouping: TextModifier { } public func shadow(_ radius: Tokens.BlurRadius, color: Tokens.ShadowColor = .black) -> Grouping { - return mutate(shadow: radius.value, color: color.value) + return self.mutate(shadow: radius.value, color: color.value) } } diff --git a/Sources/HTMLKitComponents/Components/HStack.swift b/Sources/HTMLKitComponents/Components/HStack.swift index 45990c47..900f2c13 100644 --- a/Sources/HTMLKitComponents/Components/HStack.swift +++ b/Sources/HTMLKitComponents/Components/HStack.swift @@ -18,7 +18,7 @@ public struct HStack: View, Actionable, Modifiable { internal var id: String? /// The body content of the stack. - internal var content: [Content] + internal let content: [Content] /// The class names for the stack. internal var classes: [String] @@ -76,14 +76,14 @@ public struct HStack: View, Actionable, Modifiable { /// /// - Returns: The stack public func shadow(_ radius: Tokens.BlurRadius = .small, color: Tokens.ShadowColor = .black) -> HStack { - return self.mutate(classes: ["shadow:\(radius.value)", "shadow:\(color.value)"]) + return self.mutate(classes: "shadow:\(radius.value)", "shadow:\(color.value)") } /// Clip the content for the stack. /// /// - Returns: The stack public func clipped() -> HStack { - return self.mutate(class: "overflow:clip") + return self.mutate(classes: "overflow:clip") } } @@ -100,9 +100,14 @@ extension HStack: MouseEvent { extension HStack: ViewModifier { + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> HStack { return self.mutate(backgroundcolor: color.value) } + + public func background(_ color: Tokens.BackgroundColor) -> HStack { + return self.mutate(backgroundcolor: color.value) + } public func opacity(_ value: Tokens.OpacityValue) -> HStack { return self.mutate(opacity: value.value) @@ -129,16 +134,17 @@ extension HStack: ViewModifier { return self.mutate(padding: length.value, insets: insets) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> HStack { return self.mutate(bordershape: shape.value) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> HStack { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> HStack { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> HStack { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> HStack { diff --git a/Sources/HTMLKitComponents/Components/Image.swift b/Sources/HTMLKitComponents/Components/Image.swift index 262b0a78..b804d5d6 100644 --- a/Sources/HTMLKitComponents/Components/Image.swift +++ b/Sources/HTMLKitComponents/Components/Image.swift @@ -90,10 +90,15 @@ extension Image: ImageModifier { extension Image: ViewModifier { + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> Image { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> Image { + return self.mutate(backgroundcolor: color.value) + } + public func zIndex(_ index: Tokens.PositionIndex) -> Image { return self.mutate(zindex: index.value) } @@ -119,16 +124,17 @@ extension Image: ViewModifier { return self.mutate(padding: length.value, insets: insets) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> Image { return self.mutate(bordershape: shape.value) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Image { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Image { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Image { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Image { @@ -139,26 +145,26 @@ extension Image: ViewModifier { extension Image: GraphicsModifier { public func blur(_ level: Tokens.BlurLevel) -> Image { - return mutate(blur: level.value) + return self.mutate(blur: level.value) } public func grayscale(_ depth: Tokens.GrayscaleDepth) -> Image { - return mutate(grayscale: depth.value) + return self.mutate(grayscale: depth.value) } public func brightness(_ level: Tokens.BrightnessLevel) -> Image { - return mutate(brightness: level.value) + return self.mutate(brightness: level.value) } public func saturation(_ level: Tokens.SaturationLevel) -> Image { - return mutate(saturation: level.value) + return self.mutate(saturation: level.value) } public func contrast(_ level: Tokens.ContrastLevel) -> Image { - return mutate(contrast: level.value) + return self.mutate(contrast: level.value) } public func shadow(_ radius: Tokens.BlurRadius = .small, color: Tokens.ShadowColor = .black) -> Image { - return mutate(shadow: radius.value, color: color.value) + return self.mutate(shadow: radius.value, color: color.value) } } diff --git a/Sources/HTMLKitComponents/Components/Link.swift b/Sources/HTMLKitComponents/Components/Link.swift index 4f576be2..eff73b80 100644 --- a/Sources/HTMLKitComponents/Components/Link.swift +++ b/Sources/HTMLKitComponents/Components/Link.swift @@ -24,7 +24,7 @@ public struct Link: View, Modifiable, Identifiable { internal let destination: String /// The body content of the link. - internal var content: [Content] + internal let content: [Content] /// The class names for the link. internal var classes: [String] @@ -85,7 +85,7 @@ public struct Link: View, Modifiable, Identifiable { extension Link: TextModifier { public func font(_ family: Tokens.FontFamily) -> Link { - return mutate(fontfamily: family.value) + return self.mutate(fontfamily: family.value) } public func textStyle(_ style: Tokens.TextStyle) -> Link { @@ -165,16 +165,21 @@ extension Link: TextModifier { } public func shadow(_ radius: Tokens.BlurRadius, color: Tokens.ShadowColor = .black) -> Link { - return mutate(shadow: radius.value, color: color.value) + return self.mutate(shadow: radius.value, color: color.value) } } extension Link: ViewModifier { + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> Link { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> Link { + return self.mutate(backgroundcolor: color.value) + } + public func opacity(_ value: Tokens.OpacityValue) -> Link { return self.mutate(opacity: value.value) } @@ -200,16 +205,17 @@ extension Link: ViewModifier { return self.mutate(padding: length.value, insets: insets) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> Link { return self.mutate(bordershape: shape.value) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Link { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Link { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Link { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Link { diff --git a/Sources/HTMLKitComponents/Components/LinkButton.swift b/Sources/HTMLKitComponents/Components/LinkButton.swift index b0a7593d..6a0a56c1 100644 --- a/Sources/HTMLKitComponents/Components/LinkButton.swift +++ b/Sources/HTMLKitComponents/Components/LinkButton.swift @@ -22,7 +22,7 @@ public struct LinkButton: View, Modifiable, Identifiable { internal let destination: String /// The body content of the button. - internal var content: [Content] + internal let content: [Content] /// The class names for the button. internal var classes: [String] @@ -130,10 +130,15 @@ extension LinkButton: ButtonModifier { extension LinkButton: ViewModifier { + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> LinkButton { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> LinkButton { + return self.mutate(backgroundcolor: color.value) + } + public func opacity(_ value: Tokens.OpacityValue) -> LinkButton { return self.mutate(opacity: value.value) } @@ -159,16 +164,17 @@ extension LinkButton: ViewModifier { return self.mutate(padding: length.value, insets: insets) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> LinkButton { return self.mutate(bordershape: shape.value) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> LinkButton { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> LinkButton { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> LinkButton { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> LinkButton { diff --git a/Sources/HTMLKitComponents/Components/List.swift b/Sources/HTMLKitComponents/Components/List.swift index 4bcdf010..97521c50 100644 --- a/Sources/HTMLKitComponents/Components/List.swift +++ b/Sources/HTMLKitComponents/Components/List.swift @@ -20,7 +20,7 @@ public struct List: View, Modifiable, Actionable { internal var id: String? /// The body content of the list. - internal var content: [ListElement] + internal let content: [ListElement] /// The class names for the list. internal var classes: [String] @@ -65,11 +65,7 @@ public struct List: View, Modifiable, Actionable { /// /// - Returns: The list public func listStyle(_ style: Tokens.ListStyle) -> List { - - var newSelf = self - newSelf.classes.append("style:\(style.value)") - - return newSelf + return self.mutate(classes: "style:\(style.value)") } /// Set the style for the list. @@ -87,7 +83,7 @@ public struct List: View, Modifiable, Actionable { /// /// - Returns: The list public func listSpacing(_ size: Tokens.ListSpace) -> List { - return mutate(class: "spacing:\(size.value)") + return self.mutate(classes: "spacing:\(size.value)") } /// Set the identifier for the list. @@ -113,10 +109,15 @@ extension List: MouseEvent { extension List: ViewModifier { + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> List { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> List { + return self.mutate(backgroundcolor: color.value) + } + public func opacity(_ value: Tokens.OpacityValue) -> List { return self.mutate(opacity: value.value) } @@ -142,16 +143,17 @@ extension List: ViewModifier { return self.mutate(padding: length.value, insets: insets) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> List { return self.mutate(bordershape: shape.value) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> List { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> List { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> List { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> List { diff --git a/Sources/HTMLKitComponents/Components/Modal.swift b/Sources/HTMLKitComponents/Components/Modal.swift index ed3124c4..6f42f513 100644 --- a/Sources/HTMLKitComponents/Components/Modal.swift +++ b/Sources/HTMLKitComponents/Components/Modal.swift @@ -19,7 +19,7 @@ public struct Modal: View, Modifiable, Actionable { internal var id: String? /// The body content of the modal. - internal var content: [Content] + internal let content: [Content] /// The class names for the modal. internal var classes: [String] @@ -93,24 +93,30 @@ extension Modal: ViewModifier { return self.mutate(padding: length.value, insets: insets) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Modal { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Modal { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> Modal { return self.mutate(bordershape: shape.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> Modal { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> Modal { + return self.mutate(backgroundcolor: color.value) + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> Modal { return self.mutate(scheme: scheme.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Modal { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Modal { diff --git a/Sources/HTMLKitComponents/Components/Navigation.swift b/Sources/HTMLKitComponents/Components/Navigation.swift index d24806fa..b1d2bec9 100644 --- a/Sources/HTMLKitComponents/Components/Navigation.swift +++ b/Sources/HTMLKitComponents/Components/Navigation.swift @@ -51,11 +51,7 @@ public struct Navigation: View, Modifiable, Identifiable { /// /// - Returns: The navigation public func navigationStyle(_ style: Tokens.NavigationStyle) -> Navigation { - - var newSelf = self - newSelf.classes.append("style:\(style.value)") - - return newSelf + return self.mutate(classes: "style:\(style.value)") } /// Set the style for the navigation. @@ -79,10 +75,15 @@ public struct Navigation: View, Modifiable, Identifiable { extension Navigation: ViewModifier { + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> Navigation { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> Navigation { + return self.mutate(backgroundcolor: color.value) + } + public func opacity(_ value: Tokens.OpacityValue) -> Navigation { return self.mutate(opacity: value.value) } @@ -108,16 +109,17 @@ extension Navigation: ViewModifier { return self.mutate(padding: length.value, insets: insets) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> Navigation { return self.mutate(bordershape: shape.value) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Navigation { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Navigation { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Navigation { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Navigation { diff --git a/Sources/HTMLKitComponents/Components/Pane.swift b/Sources/HTMLKitComponents/Components/Pane.swift index 1974019a..2b90b547 100644 --- a/Sources/HTMLKitComponents/Components/Pane.swift +++ b/Sources/HTMLKitComponents/Components/Pane.swift @@ -24,13 +24,13 @@ public struct Pane: View, Modifiable { internal var id: String? /// The body content of the pane. - internal var content: [Content] + internal let content: [Content] /// The class names for the pane. internal var classes: [String] /// The label content of the pane. - internal var label: [Content] + internal let label: [Content] /// A badge indicator for the pane. internal var badge: Int? @@ -64,10 +64,10 @@ public struct Pane: View, Modifiable { /// - Returns: The pane public func tag(_ value: String) -> Pane { - var newSelf = self - newSelf.id = value + var copy = self + copy.id = value - return newSelf + return copy } /// Show a badge within the pane's tab. @@ -77,9 +77,9 @@ public struct Pane: View, Modifiable { /// - Returns: The pane public func badge(_ value: Int) -> Pane { - var newSelf = self - newSelf.badge = value + var copy = self + copy.badge = value - return newSelf + return copy } } diff --git a/Sources/HTMLKitComponents/Components/Picker.swift b/Sources/HTMLKitComponents/Components/Picker.swift index 9b925707..f5f842b8 100644 --- a/Sources/HTMLKitComponents/Components/Picker.swift +++ b/Sources/HTMLKitComponents/Components/Picker.swift @@ -1,8 +1,8 @@ import HTMLKit -/// A view that represents a option picker. +/// A view that represents an option picker. /// -/// Use `Picker` to +/// Use `Picker` to pick an option. /// /// ```swift /// Picker(name: "lorem", selection: "ipsum") { diff --git a/Sources/HTMLKitComponents/Components/Progress.swift b/Sources/HTMLKitComponents/Components/Progress.swift index 7910cd6c..60e1d178 100644 --- a/Sources/HTMLKitComponents/Components/Progress.swift +++ b/Sources/HTMLKitComponents/Components/Progress.swift @@ -20,7 +20,7 @@ public struct Progress: View, Modifiable, Identifiable { internal let value: String /// The body content of the progress. - internal var content: [Content] + internal let content: [Content] /// The class names for the progress. internal var classes: [String] @@ -75,7 +75,7 @@ public struct Progress: View, Modifiable, Identifiable { /// /// - Returns: The progress public func progressStyle(_ style: Tokens.ProgressStyle) -> Progress { - return self.mutate(class: "style:\(style.value)") + return self.mutate(classes: "style:\(style.value)") } /// Set a tint color for the progress. @@ -84,6 +84,6 @@ public struct Progress: View, Modifiable, Identifiable { /// /// - Returns: The progress public func tint(_ color: Tokens.TintColor) -> Progress { - return self.mutate(class: "tint:\(color.value)") + return self.mutate(classes: "tint:\(color.value)") } } diff --git a/Sources/HTMLKitComponents/Components/RadioSelect.swift b/Sources/HTMLKitComponents/Components/RadioSelect.swift index 170dc56d..3980d25d 100644 --- a/Sources/HTMLKitComponents/Components/RadioSelect.swift +++ b/Sources/HTMLKitComponents/Components/RadioSelect.swift @@ -130,24 +130,30 @@ extension RadioSelect: ViewModifier { return self.mutate(padding: length.value, insets: insets) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> RadioSelect { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> RadioSelect { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> RadioSelect { return self.mutate(bordershape: shape.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> RadioSelect { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> RadioSelect { + return self.mutate(backgroundcolor: color.value) + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> RadioSelect { return self.mutate(scheme: scheme.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> RadioSelect { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> RadioSelect { diff --git a/Sources/HTMLKitComponents/Components/Scroll.swift b/Sources/HTMLKitComponents/Components/Scroll.swift index dc9b8668..30b9894a 100644 --- a/Sources/HTMLKitComponents/Components/Scroll.swift +++ b/Sources/HTMLKitComponents/Components/Scroll.swift @@ -27,7 +27,7 @@ import HTMLKit public struct Scroll: View { /// The body content of the scroll. - internal var content: [Content] + internal let content: [Content] /// The class names for the scroll. internal var classes: [String] diff --git a/Sources/HTMLKitComponents/Components/SearchField.swift b/Sources/HTMLKitComponents/Components/SearchField.swift index 24ac4879..1e8dfec4 100644 --- a/Sources/HTMLKitComponents/Components/SearchField.swift +++ b/Sources/HTMLKitComponents/Components/SearchField.swift @@ -121,24 +121,30 @@ extension SearchField: ViewModifier { return self.mutate(padding: length.value, insets: insets) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> SearchField { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> SearchField { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> SearchField { return self.mutate(bordershape: shape.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> SearchField { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> SearchField { + return self.mutate(backgroundcolor: color.value) + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> SearchField { return self.mutate(scheme: scheme.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> SearchField { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> SearchField { diff --git a/Sources/HTMLKitComponents/Components/SectorMark.swift b/Sources/HTMLKitComponents/Components/SectorMark.swift index c9e935db..243f4b9a 100644 --- a/Sources/HTMLKitComponents/Components/SectorMark.swift +++ b/Sources/HTMLKitComponents/Components/SectorMark.swift @@ -15,10 +15,10 @@ import HTMLKit public struct SectorMark: View, Modifiable { /// The value of the mark. - internal var value: Int + internal let value: Int /// The title of the mark. - internal var label: String + internal let label: String /// The class names of the sector mark. internal var classes: [String] @@ -50,6 +50,6 @@ public struct SectorMark: View, Modifiable { /// /// - Returns: The mark public func foregroundColor(_ color: Tokens.ForegroundColor) -> SectorMark { - return self.mutate(class: "foreground:\(color.value)") + return self.mutate(classes: "foreground:\(color.value)") } } diff --git a/Sources/HTMLKitComponents/Components/SecureField.swift b/Sources/HTMLKitComponents/Components/SecureField.swift index 83d01069..425e9ff9 100644 --- a/Sources/HTMLKitComponents/Components/SecureField.swift +++ b/Sources/HTMLKitComponents/Components/SecureField.swift @@ -121,24 +121,29 @@ extension SecureField: ViewModifier { return self.mutate(padding: length.value, insets: insets) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> SecureField { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> SecureField { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } public func borderShape(_ shape: Tokens.BorderShape) -> SecureField { return self.mutate(bordershape: shape.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> SecureField { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> SecureField { + return self.mutate(backgroundcolor: color.value) + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> SecureField { return self.mutate(scheme: scheme.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> SecureField { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> SecureField { diff --git a/Sources/HTMLKitComponents/Components/SelectField.swift b/Sources/HTMLKitComponents/Components/SelectField.swift index 048eed74..957ea83c 100644 --- a/Sources/HTMLKitComponents/Components/SelectField.swift +++ b/Sources/HTMLKitComponents/Components/SelectField.swift @@ -27,7 +27,7 @@ public struct SelectField: View, Modifiable, Identifiable { internal let selection: String? /// The body content of the field. - internal var content: [Selectable] + internal let content: [Selectable] /// The class names for the field. internal var classes: [String] @@ -172,24 +172,30 @@ extension SelectField: ViewModifier { return self.mutate(padding: length.value, insets: insets) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> SelectField { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> SelectField { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> SelectField { return self.mutate(bordershape: shape.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> SelectField { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> SelectField { + return self.mutate(backgroundcolor: color.value) + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> SelectField { return self.mutate(scheme: scheme.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> SelectField { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> SelectField { diff --git a/Sources/HTMLKitComponents/Components/Slide.swift b/Sources/HTMLKitComponents/Components/Slide.swift index 28ac3ff5..5284cb44 100644 --- a/Sources/HTMLKitComponents/Components/Slide.swift +++ b/Sources/HTMLKitComponents/Components/Slide.swift @@ -17,12 +17,12 @@ public struct Slide: View, Identifiable, Modifiable { /// The unique identifier of the slide. internal var id: String? + /// The class names for the slide. + internal let content: [Content] + /// The body content of the slide. internal var classes: [String] - /// The class names for the slide. - internal var content: [Content] - /// Create a slide. /// /// - Parameter content: The slide's content. @@ -75,24 +75,30 @@ extension Slide: ViewModifier { return self.mutate(padding: length.value, insets: insets) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Slide { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Slide { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> Slide { return self.mutate(bordershape: shape.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> Slide { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> Slide { + return self.mutate(backgroundcolor: color.value) + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> Slide { return self.mutate(scheme: scheme.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Slide { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Slide { diff --git a/Sources/HTMLKitComponents/Components/Slider.swift b/Sources/HTMLKitComponents/Components/Slider.swift index 2480ebc7..5b30451e 100644 --- a/Sources/HTMLKitComponents/Components/Slider.swift +++ b/Sources/HTMLKitComponents/Components/Slider.swift @@ -89,24 +89,30 @@ extension Slider: ViewModifier { return self.mutate(padding: length.value, insets: insets) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Slider { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Slider { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> Slider { return self.mutate(bordershape: shape.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> Slider { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> Slider { + return self.mutate(backgroundcolor: color.value) + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> Slider { return self.mutate(scheme: scheme.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Slider { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Slider { diff --git a/Sources/HTMLKitComponents/Components/Snippet.swift b/Sources/HTMLKitComponents/Components/Snippet.swift index b4f47304..29f56753 100644 --- a/Sources/HTMLKitComponents/Components/Snippet.swift +++ b/Sources/HTMLKitComponents/Components/Snippet.swift @@ -17,7 +17,7 @@ public struct Snippet: View, Modifiable, Identifiable { internal var id: String? /// The body content of the snippet. - internal var content: String + internal let content: String /// The class names for the snippet. internal var classes: [String] @@ -74,10 +74,15 @@ extension Snippet: ViewModifier { return self.mutate(zindex: index.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> Snippet { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> Snippet { + return self.mutate(backgroundcolor: color.value) + } + public func hidden(_ condition: Bool = true) -> Snippet { if condition { @@ -95,16 +100,17 @@ extension Snippet: ViewModifier { return self.mutate(padding: length.value, insets: insets) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> Snippet { return self.mutate(bordershape: shape.value) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Snippet { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Snippet { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Snippet { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Snippet { diff --git a/Sources/HTMLKitComponents/Components/Symbol.swift b/Sources/HTMLKitComponents/Components/Symbol.swift index 75596d05..3b172c5a 100644 --- a/Sources/HTMLKitComponents/Components/Symbol.swift +++ b/Sources/HTMLKitComponents/Components/Symbol.swift @@ -241,7 +241,7 @@ public struct Symbol: View, Modifiable { Vector { content } - .viewBox("0 0 20 16") + .viewBox(x: 0, y: 0, width: 20, height: 16) .class(classes.joined(separator: " ")) } @@ -251,11 +251,7 @@ public struct Symbol: View, Modifiable { /// /// - Returns: The symbol public func fontSize(_ size: Tokens.FontSize) -> Symbol { - - var newSelf = self - newSelf.classes.append("size:\(size.value)") - - return newSelf + return self.mutate(classes: "size:\(size.value)") } /// Fill the foreground of the symbol. @@ -264,11 +260,7 @@ public struct Symbol: View, Modifiable { /// /// - Returns: The symbol public func foregroundColor(_ color: Tokens.ForegroundColor) -> Symbol { - - var newSelf = self - newSelf.classes.append("foreground:\(color.value)") - - return newSelf + return self.mutate(classes: "foreground:\(color.value)") } /// Set the drop shadow for the symbol. @@ -279,7 +271,7 @@ public struct Symbol: View, Modifiable { /// /// - Returns: The symbol public func shadow(_ radius: Tokens.BlurRadius, color: Tokens.ShadowColor = .black) -> Symbol { - return mutate(classes: ["shadow:\(radius.value)", "shadow:\(color.value)"]) + return self.mutate(classes: "shadow:\(radius.value)", "shadow:\(color.value)") } } diff --git a/Sources/HTMLKitComponents/Components/Tabs.swift b/Sources/HTMLKitComponents/Components/Tabs.swift index 1782f691..c2ecc3f3 100644 --- a/Sources/HTMLKitComponents/Components/Tabs.swift +++ b/Sources/HTMLKitComponents/Components/Tabs.swift @@ -34,7 +34,7 @@ public struct Tabs: View, Identifiable, Modifiable { internal var id: String? /// The panes of the tabs. - internal var content: [Pane] + internal let content: [Pane] /// The class names of the tabs. internal var classes: [String] @@ -104,10 +104,15 @@ extension Tabs: ViewModifier { return self.mutate(zindex: index.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> Tabs { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> Tabs { + return self.mutate(backgroundcolor: color.value) + } + public func hidden(_ condition: Bool = true) -> Tabs { if condition { @@ -125,16 +130,17 @@ extension Tabs: ViewModifier { return self.mutate(padding: length.value, insets: insets) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> Tabs { return self.mutate(bordershape: shape.value) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Tabs { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Tabs { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight?, alignment: Tokens.FrameAlignment?) -> Tabs { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet, length: Tokens.MarginLength) -> Tabs { diff --git a/Sources/HTMLKitComponents/Components/Text.swift b/Sources/HTMLKitComponents/Components/Text.swift index 59d40aa2..d69d225a 100644 --- a/Sources/HTMLKitComponents/Components/Text.swift +++ b/Sources/HTMLKitComponents/Components/Text.swift @@ -15,7 +15,7 @@ public struct Text: View, Actionable, Modifiable { internal var id: String? /// The body content of the text. - internal var content: [Content] + internal let content: [Content] /// The class names for the text. internal var classes: [String] @@ -99,7 +99,7 @@ extension Text: PressEvent { extension Text: TextModifier { public func font(_ family: Tokens.FontFamily) -> Text { - return mutate(fontfamily: family.value) + return self.mutate(fontfamily: family.value) } public func textStyle(_ style: Tokens.TextStyle) -> Text { @@ -179,16 +179,21 @@ extension Text: TextModifier { } public func shadow(_ radius: Tokens.BlurRadius, color: Tokens.ShadowColor = .black) -> Text { - return mutate(shadow: radius.value, color: color.value) + return self.mutate(shadow: radius.value, color: color.value) } } extension Text: ViewModifier { + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> Text { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> Text { + return self.mutate(backgroundcolor: color.value) + } + public func opacity(_ value: Tokens.OpacityValue) -> Text { return self.mutate(opacity: value.value) } @@ -214,16 +219,17 @@ extension Text: ViewModifier { return self.mutate(padding: length.value, insets: insets) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> Text { return self.mutate(bordershape: shape.value) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Text { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Text { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Text { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Text { diff --git a/Sources/HTMLKitComponents/Components/TextEditor.swift b/Sources/HTMLKitComponents/Components/TextEditor.swift index 58981634..61c0da5f 100644 --- a/Sources/HTMLKitComponents/Components/TextEditor.swift +++ b/Sources/HTMLKitComponents/Components/TextEditor.swift @@ -23,7 +23,7 @@ public struct TextEditor: View, Modifiable, Identifiable { internal var rows: Int = 3 /// The body content of the editor. - internal var content: [String] + internal let content: [String] /// The class names for the editor. internal var classes: [String] @@ -82,10 +82,10 @@ public struct TextEditor: View, Modifiable, Identifiable { /// - Returns: The editor public func lineLimit(_ value: Int) -> TextEditor { - var newSelf = self - newSelf.rows = value + var copy = self + copy.rows = value - return newSelf + return copy } /// Set the identifier for the editor. @@ -137,24 +137,30 @@ extension TextEditor: ViewModifier { return self.mutate(padding: length.value, insets: insets) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> TextEditor { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> TextEditor { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> TextEditor { return self.mutate(bordershape: shape.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> TextEditor { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> TextEditor { + return self.mutate(backgroundcolor: color.value) + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> TextEditor { return self.mutate(scheme: scheme.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> TextEditor { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> TextEditor { diff --git a/Sources/HTMLKitComponents/Components/TextField.swift b/Sources/HTMLKitComponents/Components/TextField.swift index cc5831ea..201046d5 100644 --- a/Sources/HTMLKitComponents/Components/TextField.swift +++ b/Sources/HTMLKitComponents/Components/TextField.swift @@ -130,24 +130,30 @@ extension TextField: ViewModifier { return self.mutate(padding: length.value, insets: insets) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> TextField { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> TextField { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> TextField { return self.mutate(bordershape: shape.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> TextField { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> TextField { + return self.mutate(backgroundcolor: color.value) + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> TextField { return self.mutate(scheme: scheme.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> TextField { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> TextField { diff --git a/Sources/HTMLKitComponents/Components/TextPad.swift b/Sources/HTMLKitComponents/Components/TextPad.swift index 06d64eaf..570661bf 100644 --- a/Sources/HTMLKitComponents/Components/TextPad.swift +++ b/Sources/HTMLKitComponents/Components/TextPad.swift @@ -24,7 +24,7 @@ public struct TextPad: View, Modifiable, Identifiable { internal var rows: Int = 3 /// The body content of the pad. - internal var content: [String] + internal let content: [String] /// The class names of the pad. internal var classes: [String] @@ -72,7 +72,7 @@ public struct TextPad: View, Modifiable, Identifiable { .draw("M15.5,6.5C16.328,6.5 17,7.172 17,8C17,8.828 16.328,9.5 15.5,9.5C14.672,9.5 14,8.828 14,8C14,7.172 14.672,6.5 15.5,6.5ZM10,6.5C10.828,6.5 11.5,7.172 11.5,8C11.5,8.828 10.828,9.5 10,9.5C9.172,9.5 8.5,8.828 8.5,8C8.5,7.172 9.172,6.5 10,6.5ZM4.5,6.5C5.328,6.5 6,7.172 6,8C6,8.828 5.328,9.5 4.5,9.5C3.672,9.5 3,8.828 3,8C3,7.172 3.672,6.5 4.5,6.5Z") } .namespace("http://www.w3.org/2000/svg") - .viewBox("0 0 20 16") + .viewBox(x: 0, y: 0, width: 20, height: 16) } UnorderedList { ListItem { @@ -86,7 +86,7 @@ public struct TextPad: View, Modifiable, Identifiable { .draw("M4.25,14.25L4.25,1.75C4.25,1.336 4.586,1 5,1L10.769,1C12.646,1 14.212,2.659 14.212,4.75C14.212,5.686 13.898,6.785 13.383,7.438C14.746,7.929 15.75,9.576 15.75,11.25C15.75,13.341 14.184,15 12.308,15L5,15C4.586,15 4.25,14.664 4.25,14.25ZM10.769,2.5L5.75,2.5C5.75,2.5 5.75,7.25 5.75,7.25L10.769,7.25C11.865,7.25 12.712,5.971 12.712,4.75C12.712,3.529 11.865,2.5 10.769,2.5ZM14.25,11.25C14.25,10.029 13.403,8.75 12.308,8.75L5.75,8.75C5.75,8.75 5.75,13.5 5.75,13.5L12.308,13.5C13.403,13.5 14.25,12.471 14.25,11.25Z") } .namespace("http://www.w3.org/2000/svg") - .viewBox("0 0 20 16") + .viewBox(x: 0, y: 0, width: 20, height: 16) } .type(.button) .class("toolbar-tool") @@ -107,7 +107,7 @@ public struct TextPad: View, Modifiable, Identifiable { .draw("M8.989,15L4,15C3.586,15 3.25,14.664 3.25,14.25C3.25,13.836 3.586,13.5 4,13.5L8.36,13.5L10.12,2.5L6,2.5C5.586,2.5 5.25,2.164 5.25,1.75C5.25,1.336 5.586,1 6,1C6,1 11.003,1 11.011,1L16,1C16.414,1 16.75,1.336 16.75,1.75C16.75,2.164 16.414,2.5 16,2.5L11.64,2.5L9.88,13.5L14,13.5C14.414,13.5 14.75,13.836 14.75,14.25C14.75,14.664 14.414,15 14,15C14,15 8.997,15 8.989,15Z") } .namespace("http://www.w3.org/2000/svg") - .viewBox("0 0 20 16") + .viewBox(x: 0, y: 0, width: 20, height: 16) } .type(.button) .class("toolbar-tool") @@ -128,7 +128,7 @@ public struct TextPad: View, Modifiable, Identifiable { .draw("M6.068,7C5.894,6.829 5.745,6.646 5.621,6.45C5.305,5.95 5.148,5.39 5.148,4.771C5.148,4.09 5.341,3.454 5.727,2.862C6.113,2.27 6.678,1.821 7.42,1.514C8.162,1.208 8.987,1.054 9.894,1.054C10.894,1.054 11.775,1.215 12.539,1.537C13.302,1.859 13.89,2.333 14.301,2.959C14.711,3.584 14.932,4.292 14.963,5.083L13.252,5.212C13.16,4.36 12.849,3.716 12.318,3.28C11.788,2.845 11.004,2.627 9.968,2.627C8.888,2.627 8.102,2.825 7.608,3.221C7.115,3.616 6.868,4.093 6.868,4.651C6.868,5.136 7.043,5.534 7.392,5.847C7.736,6.16 8.632,6.48 10.083,6.808C10.373,6.874 10.644,6.938 10.898,7L6.068,7ZM14.776,9C14.787,9.014 14.797,9.029 14.806,9.044C15.181,9.599 15.368,10.238 15.368,10.962C15.368,11.679 15.162,12.355 14.751,12.99C14.34,13.625 13.75,14.118 12.98,14.471C12.211,14.824 11.345,15 10.382,15C9.161,15 8.139,14.822 7.314,14.466C6.489,14.111 5.842,13.576 5.373,12.861C4.904,12.147 4.657,11.339 4.632,10.437L6.316,10.29C6.396,10.965 6.581,11.518 6.872,11.951C7.164,12.383 7.616,12.732 8.229,12.999C8.842,13.266 9.532,13.399 10.299,13.399C10.98,13.399 11.581,13.298 12.102,13.096C12.623,12.893 13.011,12.616 13.266,12.263C13.52,11.911 13.647,11.526 13.647,11.109C13.647,10.686 13.525,10.316 13.279,10C13.034,9.685 12.629,9.419 12.065,9.205C11.922,9.149 11.709,9.081 11.428,9L14.776,9ZM17,7.277L17,8.777L3,8.777L3,7.277L17,7.277Z") } .namespace("http://www.w3.org/2000/svg") - .viewBox("0 0 20 16") + .viewBox(x: 0, y: 0, width: 20, height: 16) } .type(.button) .class("toolbar-tool") @@ -149,7 +149,7 @@ public struct TextPad: View, Modifiable, Identifiable { .draw("M10.025,11.51C9.368,11.335 8.747,10.99 8.232,10.475L7.525,9.768C5.964,8.207 5.964,5.672 7.525,4.111L10.354,1.282C11.915,-0.279 14.449,-0.279 16.01,1.282L16.718,1.99C18.279,3.551 18.279,6.085 16.718,7.646L13.933,10.431C14.165,9.703 14.207,8.928 14.06,8.183L15.303,6.939C16.474,5.769 16.474,3.867 15.303,2.697C14.133,1.526 12.231,1.526 11.061,2.697L8.939,4.818C7.769,5.989 7.769,7.89 8.939,9.061C9.581,9.703 10.443,9.993 11.283,9.931C11.162,10.258 10.97,10.565 10.707,10.828L10.025,11.51ZM9.975,4.49C10.632,4.665 11.253,5.01 11.768,5.525L12.475,6.232C14.036,7.793 14.036,10.328 12.475,11.889L9.646,14.718C8.085,16.279 5.551,16.279 3.99,14.718L3.282,14.01C1.721,12.449 1.721,9.915 3.282,8.354L6.067,5.569C5.835,6.297 5.793,7.072 5.94,7.817L4.697,9.061C3.526,10.231 3.526,12.133 4.697,13.303C5.867,14.474 7.769,14.474 8.939,13.303L11.061,11.182C12.231,10.011 12.231,8.11 11.061,6.939C10.419,6.297 9.557,6.007 8.717,6.069C8.838,5.742 9.03,5.435 9.293,5.172L9.975,4.49Z") } .namespace("http://www.w3.org/2000/svg") - .viewBox("0 0 20 16") + .viewBox(x: 0, y: 0, width: 20, height: 16) } .type(.button) .class("toolbar-tool") @@ -170,7 +170,7 @@ public struct TextPad: View, Modifiable, Identifiable { .draw("M11.829,2.171C11.57,1.848 11.623,1.376 11.946,1.117C12.269,0.859 12.741,0.911 13,1.234L17.546,7.532C17.765,7.805 17.765,8.195 17.546,8.469L13.171,14.883C12.913,15.206 12.44,15.259 12.117,15C11.794,14.741 11.741,14.269 12,13.946C12,13.946 16,8 16,8L11.829,2.171ZM8.288,13.946C8.547,14.269 8.495,14.741 8.171,15C7.848,15.259 7.376,15.206 7.117,14.883L2.454,8.469C2.235,8.195 2.235,7.805 2.454,7.532L6.946,1.351C7.204,1.028 7.677,0.976 8,1.234C8.323,1.493 8.376,1.965 8.117,2.288C8.117,2.288 4,8 4,8L8.288,13.946Z") } .namespace("http://www.w3.org/2000/svg") - .viewBox("0 0 20 16") + .viewBox(x: 0, y: 0, width: 20, height: 16) } .type(.button) .class("toolbar-tool") @@ -195,7 +195,7 @@ public struct TextPad: View, Modifiable, Identifiable { .draw("M4.25,14.25L4.25,1.75C4.25,1.336 4.586,1 5,1L10.769,1C12.646,1 14.212,2.659 14.212,4.75C14.212,5.686 13.898,6.785 13.383,7.438C14.746,7.929 15.75,9.576 15.75,11.25C15.75,13.341 14.184,15 12.308,15L5,15C4.586,15 4.25,14.664 4.25,14.25ZM10.769,2.5L5.75,2.5C5.75,2.5 5.75,7.25 5.75,7.25L10.769,7.25C11.865,7.25 12.712,5.971 12.712,4.75C12.712,3.529 11.865,2.5 10.769,2.5ZM14.25,11.25C14.25,10.029 13.403,8.75 12.308,8.75L5.75,8.75C5.75,8.75 5.75,13.5 5.75,13.5L12.308,13.5C13.403,13.5 14.25,12.471 14.25,11.25Z") } .namespace("http://www.w3.org/2000/svg") - .viewBox("0 0 20 16") + .viewBox(x: 0, y: 0, width: 20, height: 16) } .type(.button) .class("toolbar-tool") @@ -216,7 +216,7 @@ public struct TextPad: View, Modifiable, Identifiable { .draw("M8.989,15L4,15C3.586,15 3.25,14.664 3.25,14.25C3.25,13.836 3.586,13.5 4,13.5L8.36,13.5L10.12,2.5L6,2.5C5.586,2.5 5.25,2.164 5.25,1.75C5.25,1.336 5.586,1 6,1C6,1 11.003,1 11.011,1L16,1C16.414,1 16.75,1.336 16.75,1.75C16.75,2.164 16.414,2.5 16,2.5L11.64,2.5L9.88,13.5L14,13.5C14.414,13.5 14.75,13.836 14.75,14.25C14.75,14.664 14.414,15 14,15C14,15 8.997,15 8.989,15Z") } .namespace("http://www.w3.org/2000/svg") - .viewBox("0 0 20 16") + .viewBox(x: 0, y: 0, width: 20, height: 16) } .type(.button) .class("toolbar-tool") @@ -237,7 +237,7 @@ public struct TextPad: View, Modifiable, Identifiable { .draw("M6.068,7C5.894,6.829 5.745,6.646 5.621,6.45C5.305,5.95 5.148,5.39 5.148,4.771C5.148,4.09 5.341,3.454 5.727,2.862C6.113,2.27 6.678,1.821 7.42,1.514C8.162,1.208 8.987,1.054 9.894,1.054C10.894,1.054 11.775,1.215 12.539,1.537C13.302,1.859 13.89,2.333 14.301,2.959C14.711,3.584 14.932,4.292 14.963,5.083L13.252,5.212C13.16,4.36 12.849,3.716 12.318,3.28C11.788,2.845 11.004,2.627 9.968,2.627C8.888,2.627 8.102,2.825 7.608,3.221C7.115,3.616 6.868,4.093 6.868,4.651C6.868,5.136 7.043,5.534 7.392,5.847C7.736,6.16 8.632,6.48 10.083,6.808C10.373,6.874 10.644,6.938 10.898,7L6.068,7ZM14.776,9C14.787,9.014 14.797,9.029 14.806,9.044C15.181,9.599 15.368,10.238 15.368,10.962C15.368,11.679 15.162,12.355 14.751,12.99C14.34,13.625 13.75,14.118 12.98,14.471C12.211,14.824 11.345,15 10.382,15C9.161,15 8.139,14.822 7.314,14.466C6.489,14.111 5.842,13.576 5.373,12.861C4.904,12.147 4.657,11.339 4.632,10.437L6.316,10.29C6.396,10.965 6.581,11.518 6.872,11.951C7.164,12.383 7.616,12.732 8.229,12.999C8.842,13.266 9.532,13.399 10.299,13.399C10.98,13.399 11.581,13.298 12.102,13.096C12.623,12.893 13.011,12.616 13.266,12.263C13.52,11.911 13.647,11.526 13.647,11.109C13.647,10.686 13.525,10.316 13.279,10C13.034,9.685 12.629,9.419 12.065,9.205C11.922,9.149 11.709,9.081 11.428,9L14.776,9ZM17,7.277L17,8.777L3,8.777L3,7.277L17,7.277Z") } .namespace("http://www.w3.org/2000/svg") - .viewBox("0 0 20 16") + .viewBox(x: 0, y: 0, width: 20, height: 16) } .type(.button) .class("toolbar-tool") @@ -258,7 +258,7 @@ public struct TextPad: View, Modifiable, Identifiable { .draw("M10.025,11.51C9.368,11.335 8.747,10.99 8.232,10.475L7.525,9.768C5.964,8.207 5.964,5.672 7.525,4.111L10.354,1.282C11.915,-0.279 14.449,-0.279 16.01,1.282L16.718,1.99C18.279,3.551 18.279,6.085 16.718,7.646L13.933,10.431C14.165,9.703 14.207,8.928 14.06,8.183L15.303,6.939C16.474,5.769 16.474,3.867 15.303,2.697C14.133,1.526 12.231,1.526 11.061,2.697L8.939,4.818C7.769,5.989 7.769,7.89 8.939,9.061C9.581,9.703 10.443,9.993 11.283,9.931C11.162,10.258 10.97,10.565 10.707,10.828L10.025,11.51ZM9.975,4.49C10.632,4.665 11.253,5.01 11.768,5.525L12.475,6.232C14.036,7.793 14.036,10.328 12.475,11.889L9.646,14.718C8.085,16.279 5.551,16.279 3.99,14.718L3.282,14.01C1.721,12.449 1.721,9.915 3.282,8.354L6.067,5.569C5.835,6.297 5.793,7.072 5.94,7.817L4.697,9.061C3.526,10.231 3.526,12.133 4.697,13.303C5.867,14.474 7.769,14.474 8.939,13.303L11.061,11.182C12.231,10.011 12.231,8.11 11.061,6.939C10.419,6.297 9.557,6.007 8.717,6.069C8.838,5.742 9.03,5.435 9.293,5.172L9.975,4.49Z") } .namespace("http://www.w3.org/2000/svg") - .viewBox("0 0 20 16") + .viewBox(x: 0, y: 0, width: 20, height: 16) } .type(.button) .class("toolbar-tool") @@ -279,7 +279,7 @@ public struct TextPad: View, Modifiable, Identifiable { .draw("M11.829,2.171C11.57,1.848 11.623,1.376 11.946,1.117C12.269,0.859 12.741,0.911 13,1.234L17.546,7.532C17.765,7.805 17.765,8.195 17.546,8.469L13.171,14.883C12.913,15.206 12.44,15.259 12.117,15C11.794,14.741 11.741,14.269 12,13.946C12,13.946 16,8 16,8L11.829,2.171ZM8.288,13.946C8.547,14.269 8.495,14.741 8.171,15C7.848,15.259 7.376,15.206 7.117,14.883L2.454,8.469C2.235,8.195 2.235,7.805 2.454,7.532L6.946,1.351C7.204,1.028 7.677,0.976 8,1.234C8.323,1.493 8.376,1.965 8.117,2.288C8.117,2.288 4,8 4,8L8.288,13.946Z") } .namespace("http://www.w3.org/2000/svg") - .viewBox("0 0 20 16") + .viewBox(x: 0, y: 0, width: 20, height: 16) } .type(.button) .class("toolbar-tool") @@ -303,7 +303,7 @@ public struct TextPad: View, Modifiable, Identifiable { .draw("M5.825,6.444L9.783,9.009C10.13,9.234 10.23,9.699 10.004,10.046C9.779,10.394 9.314,10.493 8.967,10.268L2.967,6.379C2.755,6.242 2.627,6.007 2.625,5.755C2.623,5.502 2.749,5.266 2.959,5.126L8.959,1.126C9.303,0.896 9.769,0.99 9.999,1.334C10.229,1.678 10.135,2.144 9.791,2.374L5.936,4.944L12.375,4.944C15.135,4.944 17.375,7.185 17.375,9.944C17.375,12.704 15.135,14.944 12.375,14.944L10.142,14.944C9.939,14.944 9.743,14.863 9.6,14.719C9.456,14.576 9.375,14.38 9.375,14.177C9.375,13.982 9.452,13.796 9.589,13.659C9.727,13.521 9.913,13.444 10.107,13.444L12.375,13.444C14.307,13.444 15.875,11.876 15.875,9.944C15.875,8.012 14.307,6.444 12.375,6.444L5.825,6.444Z") } .namespace("http://www.w3.org/2000/svg") - .viewBox("0 0 20 16") + .viewBox(x: 0, y: 0, width: 20, height: 16) } .type(.button) .class("toolbar-tool state:disabled") @@ -324,7 +324,7 @@ public struct TextPad: View, Modifiable, Identifiable { .draw("M14.175,6.444L10.217,9.009C9.87,9.234 9.77,9.699 9.996,10.046C10.221,10.394 10.686,10.493 11.033,10.268L17.033,6.379C17.245,6.242 17.373,6.007 17.375,5.755C17.377,5.502 17.251,5.266 17.041,5.126L11.041,1.126C10.697,0.896 10.231,0.99 10.001,1.334C9.771,1.678 9.865,2.144 10.209,2.374L14.064,4.944L7.625,4.944C4.865,4.944 2.625,7.185 2.625,9.944C2.625,12.704 4.865,14.944 7.625,14.944L9.858,14.944C10.061,14.944 10.257,14.863 10.4,14.719C10.544,14.576 10.625,14.38 10.625,14.177C10.625,13.982 10.548,13.796 10.411,13.659C10.273,13.521 10.087,13.444 9.893,13.444L7.625,13.444C5.693,13.444 4.125,11.876 4.125,9.944C4.125,8.012 5.693,6.444 7.625,6.444L14.175,6.444Z") } .namespace("http://www.w3.org/2000/svg") - .viewBox("0 0 20 16") + .viewBox(x: 0, y: 0, width: 20, height: 16) } .type(.button) .class("toolbar-tool state:disabled") @@ -361,10 +361,10 @@ public struct TextPad: View, Modifiable, Identifiable { /// - Returns: The pad public func lineLimit(_ value: Int) -> TextPad { - var newSelf = self - newSelf.rows = value + var copy = self + copy.rows = value - return newSelf + return copy } /// Set the identifier for the pad. @@ -416,24 +416,30 @@ extension TextPad: ViewModifier { return self.mutate(padding: length.value, insets: insets) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> TextPad { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> TextPad { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> TextPad { return self.mutate(bordershape: shape.value) } + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> TextPad { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> TextPad { + return self.mutate(backgroundcolor: color.value) + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> TextPad { return self.mutate(scheme: scheme.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> TextPad { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> TextPad { diff --git a/Sources/HTMLKitComponents/Components/VStack.swift b/Sources/HTMLKitComponents/Components/VStack.swift index 3106c662..5b5e00f5 100644 --- a/Sources/HTMLKitComponents/Components/VStack.swift +++ b/Sources/HTMLKitComponents/Components/VStack.swift @@ -22,7 +22,7 @@ public struct VStack: View, Actionable, Modifiable { internal var id: String? /// The body content of the stack. - internal var content: [Content] + internal let content: [Content] /// The class names for the stack. internal var classes: [String] @@ -80,14 +80,14 @@ public struct VStack: View, Actionable, Modifiable { /// /// - Returns: The stack public func shadow(_ radius: Tokens.BlurRadius = .small, color: Tokens.ShadowColor = .black) -> VStack { - return self.mutate(classes: ["shadow:\(radius.value)", "shadow:\(color.value)"]) + return self.mutate(classes: "shadow:\(radius.value)", "shadow:\(color.value)") } /// Clip the content for the stack. /// /// - Returns: The stack public func clipped() -> VStack { - return self.mutate(class: "overflow:clip") + return self.mutate(classes: "overflow:clip") } } @@ -104,9 +104,14 @@ extension VStack: MouseEvent { extension VStack: ViewModifier { + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> VStack { return self.mutate(backgroundcolor: color.value) } + + public func background(_ color: Tokens.BackgroundColor) -> VStack { + return self.mutate(backgroundcolor: color.value) + } public func opacity(_ value: Tokens.OpacityValue) -> VStack { return self.mutate(opacity: value.value) @@ -133,16 +138,17 @@ extension VStack: ViewModifier { return self.mutate(padding: length.value, insets: insets) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> VStack { return self.mutate(bordershape: shape.value) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> VStack { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> VStack { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> VStack { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> VStack { diff --git a/Sources/HTMLKitComponents/Components/Video.swift b/Sources/HTMLKitComponents/Components/Video.swift index 290c2bd2..a8b7f155 100644 --- a/Sources/HTMLKitComponents/Components/Video.swift +++ b/Sources/HTMLKitComponents/Components/Video.swift @@ -60,10 +60,15 @@ public struct Video: View, Modifiable, Identifiable { extension Video: ViewModifier { + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> Video { return self.mutate(backgroundcolor: color.value) } + public func background(_ color: Tokens.BackgroundColor) -> Video { + return self.mutate(backgroundcolor: color.value) + } + public func zIndex(_ index: Tokens.PositionIndex) -> Video { return self.mutate(zindex: index.value) } @@ -89,16 +94,17 @@ extension Video: ViewModifier { return self.mutate(padding: length.value, insets: insets) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> Video { return self.mutate(bordershape: shape.value) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Video { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Video { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Video { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Video { diff --git a/Sources/HTMLKitComponents/Components/ZStack.swift b/Sources/HTMLKitComponents/Components/ZStack.swift index f4f650ea..01946f4f 100644 --- a/Sources/HTMLKitComponents/Components/ZStack.swift +++ b/Sources/HTMLKitComponents/Components/ZStack.swift @@ -17,13 +17,13 @@ public struct ZStack: View, Actionable, Modifiable { internal var id: String? /// The body content of the stack. - internal var content: [Content] + internal let content: [Content] /// The class names for the stack. internal var classes: [String] /// The event handlers on the stack. - var events: [String]? + internal var events: [String]? /// Create a stack. /// @@ -66,14 +66,14 @@ public struct ZStack: View, Actionable, Modifiable { /// /// - Returns: The stack public func shadow(_ radius: Tokens.BlurRadius = .small, color: Tokens.ShadowColor = .black) -> ZStack { - return self.mutate(classes: ["shadow:\(radius.value)", "shadow:\(color.value)"]) + return self.mutate(classes: "shadow:\(radius.value)", "shadow:\(color.value)") } /// Clip the content for the stack. /// /// - Returns: The stack public func clipped() -> ZStack { - return self.mutate(class: "overflow:clip") + return self.mutate(classes: "overflow:clip") } } @@ -90,9 +90,14 @@ extension ZStack: MouseEvent { extension ZStack: ViewModifier { + @available(*, deprecated, message: "Use the background(_:) modifier instead.") public func backgroundColor(_ color: Tokens.BackgroundColor) -> ZStack { return self.mutate(backgroundcolor: color.value) } + + public func background(_ color: Tokens.BackgroundColor) -> ZStack { + return self.mutate(backgroundcolor: color.value) + } public func opacity(_ value: Tokens.OpacityValue) -> ZStack { return self.mutate(opacity: value.value) @@ -119,16 +124,17 @@ extension ZStack: ViewModifier { return self.mutate(padding: length.value, insets: insets) } + @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.") public func borderShape(_ shape: Tokens.BorderShape) -> ZStack { return self.mutate(bordershape: shape.value) } - public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> ZStack { - return self.mutate(border: color.value, width: width.value) + public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> ZStack { + return self.mutate(border: color.value, width: width.value, shape: shape?.value) } public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> ZStack { - return mutate(frame: width.value, height: height?.value, alignment: alignment?.value) + return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> ZStack { diff --git a/Sources/HTMLKitComponents/Events/DragEvent.swift b/Sources/HTMLKitComponents/Events/DragEvent.swift index c5d75d54..254e5137 100644 --- a/Sources/HTMLKitComponents/Events/DragEvent.swift +++ b/Sources/HTMLKitComponents/Events/DragEvent.swift @@ -16,7 +16,7 @@ extension DragEvent where Self: Actionable { internal func mutate(dragevent actions: [Action]) -> Self { guard let identifier = self.id else { - fatalError("Initiative identifier unkown.") + fatalError("Initiative identifier unknown.") } let event = """ @@ -25,13 +25,13 @@ extension DragEvent where Self: Actionable { }); """ - return self.mutate(event: event) + return self.mutate(events: event) } internal func mutate(dropevent actions: [Action]) -> Self { guard let identifier = self.id else { - fatalError("Initiative identifier unkown.") + fatalError("Initiative identifier unknown.") } let event = """ @@ -40,6 +40,6 @@ extension DragEvent where Self: Actionable { }); """ - return self.mutate(event: event) + return self.mutate(events: event) } } diff --git a/Sources/HTMLKitComponents/Events/FormEvent.swift b/Sources/HTMLKitComponents/Events/FormEvent.swift index 398ef9b9..958683b2 100644 --- a/Sources/HTMLKitComponents/Events/FormEvent.swift +++ b/Sources/HTMLKitComponents/Events/FormEvent.swift @@ -22,7 +22,7 @@ extension FormEvent where Self: Actionable { } guard let identifier = self.id else { - fatalError("Initiative identifier unkown.") + fatalError("Initiative identifier unknown.") } let event = """ @@ -32,6 +32,6 @@ extension FormEvent where Self: Actionable { },\(validation)); """ - return self.mutate(event: event) + return self.mutate(events: event) } } diff --git a/Sources/HTMLKitComponents/Events/MouseEvent.swift b/Sources/HTMLKitComponents/Events/MouseEvent.swift index 6cefc095..88a45e45 100644 --- a/Sources/HTMLKitComponents/Events/MouseEvent.swift +++ b/Sources/HTMLKitComponents/Events/MouseEvent.swift @@ -16,7 +16,7 @@ extension MouseEvent where Self: Actionable { internal func mutate(hoverevent actions: [Action]) -> Self { guard let identifier = self.id else { - fatalError("Initiative identifier unkown.") + fatalError("Initiative identifier unknown.") } let event = """ @@ -25,13 +25,13 @@ extension MouseEvent where Self: Actionable { }); """ - return self.mutate(event: event) + return self.mutate(events: event) } internal func mutate(leaveevent actions: [Action]) -> Self { guard let identifier = self.id else { - fatalError("Initiative identifier unkown.") + fatalError("Initiative identifier unknown.") } let event = """ @@ -40,6 +40,6 @@ extension MouseEvent where Self: Actionable { }); """ - return self.mutate(event: event) + return self.mutate(events: event) } } diff --git a/Sources/HTMLKitComponents/Events/PressEvent.swift b/Sources/HTMLKitComponents/Events/PressEvent.swift index 6845c154..a436b833 100644 --- a/Sources/HTMLKitComponents/Events/PressEvent.swift +++ b/Sources/HTMLKitComponents/Events/PressEvent.swift @@ -19,7 +19,7 @@ extension PressEvent where Self: Actionable { internal func mutate(clickevent actions: [Action]) -> Self { guard let identifier = self.id else { - fatalError("Initiative identifier unkown.") + fatalError("Initiative identifier unknown.") } let event = """ @@ -28,13 +28,13 @@ extension PressEvent where Self: Actionable { }); """ - return self.mutate(event: event) + return self.mutate(events: event) } internal func mutate(tapevent actions: [Action]) -> Self { guard let identifier = self.id else { - fatalError("Initiative identifier unkown.") + fatalError("Initiative identifier unknown.") } let event = """ @@ -43,13 +43,13 @@ extension PressEvent where Self: Actionable { }); """ - return self.mutate(event: event) + return self.mutate(events: event) } internal func mutate(pressevent actions: [Action]) -> Self { guard let identifier = self.id else { - fatalError("Initiative identifier unkown.") + fatalError("Initiative identifier unknown.") } let event = """ @@ -58,6 +58,6 @@ extension PressEvent where Self: Actionable { }); """ - return self.mutate(event: event) + return self.mutate(events: event) } } diff --git a/Sources/HTMLKitComponents/Extensions/Components+Image.swift b/Sources/HTMLKitComponents/Extensions/Components+Image.swift index f3d1b4dd..8e85230d 100644 --- a/Sources/HTMLKitComponents/Extensions/Components+Image.swift +++ b/Sources/HTMLKitComponents/Extensions/Components+Image.swift @@ -7,7 +7,7 @@ extension HTMLKit.Image { /// - Parameter value: A container holding the concrete source type. /// /// - Returns: The image - public func source(_ value: DynamicType) -> HTMLKit.Image { + internal func source(_ value: DynamicType) -> HTMLKit.Image { switch value { case .string(let string): @@ -26,7 +26,7 @@ extension HTMLKit.Video { /// - Parameter value: A container holding the concrete source type. /// /// - Returns: The video - public func source(_ value: DynamicType) -> HTMLKit.Video { + internal func source(_ value: DynamicType) -> HTMLKit.Video { switch value { case .string(let string): diff --git a/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift b/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift index a55ac69b..cef225a8 100644 --- a/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift @@ -33,14 +33,14 @@ public protocol ButtonModifier { extension ButtonModifier where Self: Modifiable { internal func mutate(controlsize value: String) -> Self { - return self.mutate(class: "size:\(value)") + return self.mutate(classes: "size:\(value)") } internal func mutate(buttonstyle value: String) -> Self { - return self.mutate(class: "style:\(value)") + return self.mutate(classes: "style:\(value)") } internal func mutate(buttonstate value: String) -> Self { - return self.mutate(class: "state:\(value)") + return self.mutate(classes: "state:\(value)") } } diff --git a/Sources/HTMLKitComponents/Modifiers/GraphicsModifier.swift b/Sources/HTMLKitComponents/Modifiers/GraphicsModifier.swift index 2d781788..08eb2e12 100644 --- a/Sources/HTMLKitComponents/Modifiers/GraphicsModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/GraphicsModifier.swift @@ -49,26 +49,26 @@ public protocol GraphicsModifier { extension GraphicsModifier where Self: Modifiable { internal func mutate(blur value: String) -> Self { - return self.mutate(class: "blur:\(value)") + return self.mutate(classes: "blur:\(value)") } internal func mutate(grayscale value: String) -> Self { - return self.mutate(class: "grayscale:\(value)") + return self.mutate(classes: "grayscale:\(value)") } internal func mutate(brightness value: String) -> Self { - return self.mutate(class: "brightness:\(value)") + return self.mutate(classes: "brightness:\(value)") } internal func mutate(saturation value: String) -> Self { - return self.mutate(class: "saturation:\(value)") + return self.mutate(classes: "saturation:\(value)") } internal func mutate(contrast value: String) -> Self { - return self.mutate(class: "contrast:\(value)") + return self.mutate(classes: "contrast:\(value)") } internal func mutate(shadow radius: String, color: String) -> Self { - return mutate(classes: ["shadow:\(radius)", "shadow:\(color)"]) + return self.mutate(classes: "shadow:\(radius)", "shadow:\(color)") } } diff --git a/Sources/HTMLKitComponents/Modifiers/ImageModifier.swift b/Sources/HTMLKitComponents/Modifiers/ImageModifier.swift index 2fe9bb76..43a735f6 100644 --- a/Sources/HTMLKitComponents/Modifiers/ImageModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/ImageModifier.swift @@ -38,24 +38,18 @@ public protocol ImageModifier { extension ImageModifier where Self: Modifiable { internal func mutate(objectfit value: String) -> Self { - return self.mutate(class: "fit:\(value)") + return self.mutate(classes: "fit:\(value)") } internal func mutate(imagescale value: String) -> Self { - return self.mutate(class: "scale:\(value)") + return self.mutate(classes: "scale:\(value)") } internal func mutate(clipshape value: String) -> Self { - return self.mutate(class: "shape:\(value)") + return self.mutate(classes: "shape:\(value)") } internal func mutate(aspectratio ratio: String, fit: String) -> Self { - - var classes: [String] = [] - - classes.append("aspect:\(ratio)") - classes.append("fit:\(fit)") - - return self.mutate(classes: classes) + return self.mutate(classes: "aspect:\(ratio)", "fit:\(fit)") } } diff --git a/Sources/HTMLKitComponents/Modifiers/InputModifier.swift b/Sources/HTMLKitComponents/Modifiers/InputModifier.swift index f5ecfc80..b525fb4c 100644 --- a/Sources/HTMLKitComponents/Modifiers/InputModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/InputModifier.swift @@ -19,10 +19,10 @@ public protocol InputModifier { extension InputModifier where Self: Modifiable { internal func mutate(inputstate value: String) -> Self { - return self.mutate(class: "state:\(value)") + return self.mutate(classes: "state:\(value)") } internal func mutate(focuscolor value: String) -> Self { - return self.mutate(class: "focus:\(value)") + return self.mutate(classes: "focus:\(value)") } } diff --git a/Sources/HTMLKitComponents/Modifiers/TextModifier.swift b/Sources/HTMLKitComponents/Modifiers/TextModifier.swift index b1db904b..0005a097 100644 --- a/Sources/HTMLKitComponents/Modifiers/TextModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/TextModifier.swift @@ -119,46 +119,46 @@ public protocol TextModifier { extension TextModifier where Self: Modifiable { internal func mutate(fontfamily value: String) -> Self { - return self.mutate(class: "font:\(value)") + return self.mutate(classes: "font:\(value)") } internal func mutate(textstyle value: String) -> Self { - return self.mutate(class: "style:\(value)") + return self.mutate(classes: "style:\(value)") } internal func mutate(foregroundcolor value: String) -> Self { - return self.mutate(class: "foreground:\(value)") + return self.mutate(classes: "foreground:\(value)") } internal func mutate(fontsize value: String) -> Self { - return self.mutate(class: "size:\(value)") + return self.mutate(classes: "size:\(value)") } internal func mutate(fontweight value: String) -> Self { - return self.mutate(class: "weight:\(value)") + return self.mutate(classes: "weight:\(value)") } internal func mutate(textcase value: String) -> Self { - return self.mutate(class: "case:\(value)") + return self.mutate(classes: "case:\(value)") } internal func mutate(fontstyle value: String) -> Self { - return self.mutate(class: "style:\(value)") + return self.mutate(classes: "style:\(value)") } internal func mutate(textdecoration value: String) -> Self { - return self.mutate(class: "decoration:\(value)") + return self.mutate(classes: "decoration:\(value)") } internal func mutate(lineheight value: String) -> Self { - return self.mutate(class: "height:\(value)") + return self.mutate(classes: "height:\(value)") } internal func mutate(linelimit value: String) -> Self { - return self.mutate(class: "limit:\(value)") + return self.mutate(classes: "limit:\(value)") } internal func mutate(shadow radius: String, color: String) -> Self { - return mutate(classes: ["shadow:\(radius)", "shadow:\(color)"]) + return self.mutate(classes: "shadow:\(radius)", "shadow:\(color)") } } diff --git a/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift b/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift index 872b4cb5..a695ae70 100644 --- a/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift @@ -20,7 +20,7 @@ public protocol ViewModifier { /// - Parameter color: The color to use for the background. /// /// - Returns: The view - func backgroundColor(_ color: Tokens.BackgroundColor) -> Self + func background(_ color: Tokens.BackgroundColor) -> Self /// Hide the view. /// @@ -45,21 +45,15 @@ public protocol ViewModifier { /// - Returns: The view func padding(insets: EdgeSet, length: Tokens.PaddingLength) -> Self - /// Set the shape for the view. - /// - /// - Parameter shape: The border shape to use for the view. - /// - /// - Returns: The view - func borderShape(_ shape: Tokens.BorderShape) -> Self - /// Set the border for the view. /// /// - Parameters: /// - color: The color to fill the border with. /// - width: The thickness to apply to the border. + /// - shape: The border shape to use for the view. /// /// - Returns: The view - func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth) -> Self + func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth, shape: Tokens.BorderShape?) -> Self /// Set the frame for the view. /// @@ -84,27 +78,27 @@ public protocol ViewModifier { extension ViewModifier where Self: Modifiable { internal func mutate(opacity value: String) -> Self { - return self.mutate(class: "opacity:\(value)") + return self.mutate(classes: "opacity:\(value)") } internal func mutate(zindex value: String) -> Self { - return self.mutate(class: "zindex:\(value)") + return self.mutate(classes: "zindex:\(value)") } internal func mutate(backgroundcolor value: String) -> Self { - return self.mutate(class: "background:\(value)") + return self.mutate(classes: "background:\(value)") } internal func mutate(viewstate value: String) -> Self { - return self.mutate(class: "state:\(value)") + return self.mutate(classes: "state:\(value)") } internal func mutate(scheme value: String) -> Self { - return self.mutate(class: "scheme:\(value)") + return self.mutate(classes: "scheme:\(value)") } internal func mutate(padding value: String) -> Self { - return self.mutate(class: "padding:\(value)") + return self.mutate(classes: "padding:\(value)") } internal func mutate(padding value: String, insets: EdgeSet) -> Self { @@ -145,11 +139,16 @@ extension ViewModifier where Self: Modifiable { } internal func mutate(bordershape value: String) -> Self { - return self.mutate(class: "shape:\(value)") + return self.mutate(classes: "shape:\(value)") } - internal func mutate(border color: String, width: String) -> Self { - return self.mutate(classes: ["border:\(color)", "border:\(width)"]) + internal func mutate(border color: String, width: String, shape: String? = nil) -> Self { + + if let shape = shape { + return self.mutate(classes: "border:\(color)", "border:\(width)", "shape:\(shape)") + } + + return self.mutate(classes: "border:\(color)", "border:\(width)") } internal func mutate(frame width: String, height: String? = nil, alignment: String? = nil) -> Self { diff --git a/Sources/HTMLKitComponents/Primitives/DynamicType.swift b/Sources/HTMLKitComponents/Primitives/DynamicType.swift index 36500556..d33174bd 100644 --- a/Sources/HTMLKitComponents/Primitives/DynamicType.swift +++ b/Sources/HTMLKitComponents/Primitives/DynamicType.swift @@ -1,21 +1,11 @@ import HTMLKit /// An enum that represents a dynamic source type. -public enum DynamicType { +internal enum DynamicType { - /// Holds a environment value + /// Holds a environment value. case value(EnvironmentValue) /// Holds a string case string(String) } - -/// An enum that represents a dynamic prompt type. -internal enum PromptType { - - /// Holds a key for the localized string. - case value(LocalizedStringKey) - - /// Holds a string. - case string(String) -} diff --git a/Sources/HTMLKitComponents/Primitives/PromptType.swift b/Sources/HTMLKitComponents/Primitives/PromptType.swift new file mode 100644 index 00000000..0434ad6f --- /dev/null +++ b/Sources/HTMLKitComponents/Primitives/PromptType.swift @@ -0,0 +1,11 @@ +import HTMLKit + +/// An enum that represents a dynamic prompt type. +internal enum PromptType { + + /// Holds a key for the localized string. + case value(LocalizedStringKey) + + /// Holds a string. + case string(String) +} diff --git a/Sources/HTMLKitComponents/Properties/Actionable.swift b/Sources/HTMLKitComponents/Properties/Actionable.swift index 73c94932..e7529dfd 100644 --- a/Sources/HTMLKitComponents/Properties/Actionable.swift +++ b/Sources/HTMLKitComponents/Properties/Actionable.swift @@ -7,37 +7,37 @@ internal protocol Actionable: Identifiable { extension Actionable { - internal func mutate(event: String) -> Self { + internal func mutate(events: [String]) -> Self { - var newSelf = self + var copy = self - if var events = newSelf.events { + if var events = copy.events { - events.append(event) + events.append(contentsOf: events) - newSelf.events = events + copy.events = events } else { - newSelf.events = [event] + copy.events = events } - return newSelf + return copy } - internal func mutate(events: [String]) -> Self { + internal func mutate(events: String...) -> Self { - var newSelf = self + var copy = self - if var events = newSelf.events { + if var events = copy.events { events.append(contentsOf: events) - newSelf.events = events + copy.events = events } else { - newSelf.events = events + copy.events = events } - return newSelf + return copy } } diff --git a/Sources/HTMLKitComponents/Properties/Identifiable.swift b/Sources/HTMLKitComponents/Properties/Identifiable.swift index 4de2366b..376c036c 100644 --- a/Sources/HTMLKitComponents/Properties/Identifiable.swift +++ b/Sources/HTMLKitComponents/Properties/Identifiable.swift @@ -14,9 +14,9 @@ extension Identifiable { /// - Returns: The component internal func mutate(id: String) -> Self { - var newSelf = self - newSelf.id = id + var copy = self + copy.id = id - return newSelf + return copy } } diff --git a/Sources/HTMLKitComponents/Properties/Modifiable.swift b/Sources/HTMLKitComponents/Properties/Modifiable.swift index cf087fef..68f18b6b 100644 --- a/Sources/HTMLKitComponents/Properties/Modifiable.swift +++ b/Sources/HTMLKitComponents/Properties/Modifiable.swift @@ -7,19 +7,19 @@ internal protocol Modifiable { extension Modifiable { - internal func mutate(`class`: String) -> Self { + internal func mutate(classes: [String]) -> Self { - var newSelf = self - newSelf.classes.append(`class`) + var copy = self + copy.classes.append(contentsOf: classes) - return newSelf + return copy } - internal func mutate(classes: [String]) -> Self { + internal func mutate(classes: String...) -> Self { - var newSelf = self - newSelf.classes.append(contentsOf: classes) + var copy = self + copy.classes.append(contentsOf: classes) - return newSelf + return copy } } diff --git a/Sources/HTMLKitComponents/Properties/Selectable.swift b/Sources/HTMLKitComponents/Properties/Selectable.swift index 0452b630..049f181b 100644 --- a/Sources/HTMLKitComponents/Properties/Selectable.swift +++ b/Sources/HTMLKitComponents/Properties/Selectable.swift @@ -17,17 +17,17 @@ extension Selectable { internal func selected(_ condition: Bool) -> Self { - var newSelf = self - newSelf.isSelected = condition + var copy = self + copy.isSelected = condition - return newSelf + return copy } internal func tag(_ name: String) -> Self { - var newSelf = self - newSelf.name = name + var copy = self + copy.name = name - return newSelf + return copy } } diff --git a/Sources/HTMLKitComponents/Resources/css/buttons/button.css b/Sources/HTMLKitComponents/Resources/css/buttons/button.css index d4f1d25f..d1076085 100644 --- a/Sources/HTMLKitComponents/Resources/css/buttons/button.css +++ b/Sources/HTMLKitComponents/Resources/css/buttons/button.css @@ -1,22 +1,5 @@ -/* - The stylesheet for the button component. - - default: - block padding: 8px - inline padding: 16px - font size: 16px - font weight: normal - line height: 1.5 - foreground color: #FFFFFF - border width: 1px - border color: #DFE3E7 - border radius: 0 - background color: #FFFFFF - - darkmode: - foreground color: #FFFFFF - border color: #484F56 - background color: #22262a +/** + * The rulesets for the button component. */ .button { diff --git a/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css b/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css index cba3615d..09ef8c34 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css @@ -1,14 +1,5 @@ -/* - The rulesets for the checkfield component. - - defaults: - border width: 1px; - border color: #DFE3E7 - background color: #FFFFFF - - darkmode: - border color: #484F56 - background color: #FFFFFF +/** + * The rulesets for the checkfield component. */ .checkfield { diff --git a/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css b/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css index 543ed139..ab01f3da 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css @@ -1,24 +1,5 @@ -/* - The rulesets for the datepicker component. - - default: - block padding: 8px - inline padding: 16px - font size: - font weigth: normal - line height: 1.5 - foreground color: #000000 - border width: 1px - border color: #DFE3E7 - border radius: 0 - focus color: #0080FF - background color: #FFFFFF - - darkmode: - foreground color: #FFFFFF - border color: #484F56 - focus color: #0080FF - background color: #22262A +/** + * The rulesets for the datepicker component. */ .datepicker { @@ -50,6 +31,7 @@ padding-block-end: var(--paddingBlockEnd); padding-inline-start: var(--paddingInlineStart); padding-inline-end: var(--paddingInlineEnd); + font-family: system-ui; font-size: var(--fontSize); font-weight: var(--fontWeight); line-height: var(--lineHeight); diff --git a/Sources/HTMLKitComponents/Resources/css/forms/filedialog.css b/Sources/HTMLKitComponents/Resources/css/forms/filedialog.css index 36c3e529..a2574b4d 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/filedialog.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/filedialog.css @@ -1,24 +1,5 @@ -/* - The rulesets for the filedialog component. - - default: - block padding: 8px - inline padding: 16px - font size: - font weigth: normal - line height: 1.5 - foreground color: #000000 - border width: 1px - border color: #DFE3E7 - border radius: 0 - focus color: #0080FF - background color: #FFFFFF - - darkmode: - foreground color: #FFFFFF - border color: #484F56 - focus color: #0080FF - background color: #22262A +/** + * The rulesets for the filedialog component. */ .filedialog { @@ -45,6 +26,7 @@ padding-block-end: var(--paddingBlockEnd); padding-inline-start: var(--paddingInlineStart); padding-inline-end: var(--paddingInlineEnd); + font-family: system-ui; font-size: var(--fontSize); font-weight: var(--fontWeight); line-height: var(--lineHeight); diff --git a/Sources/HTMLKitComponents/Resources/css/forms/picker.css b/Sources/HTMLKitComponents/Resources/css/forms/picker.css index 0d810ece..4ce7bb93 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/picker.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/picker.css @@ -1,3 +1,7 @@ +/** + * The rulesets for the picker component. + */ + .picker { position: relative; display: block; diff --git a/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css b/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css index 878b5da5..da218488 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css @@ -1,16 +1,5 @@ -/* - The rulesets for the radioselect component. - - defaults: - border width: 1px; - border color: #DFE3E7 - focus color: #0080FF - background color: #FFFFFF - - darkmode: - border color: #484F56 - focus color: #0080FF - background color: #FFFFFF +/** + * The rulesets for the radioselect component. */ .radioselect { diff --git a/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css b/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css index 927c77ee..d3fedefa 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css @@ -1,24 +1,5 @@ -/* - The rulesets for the searchfield component. - - default: - block padding: 8px - inline padding: 16px - font size: - font weigth: normal - line height: 1.5 - foreground color: #000000 - border width: 1px - border color: #DFE3E7 - border radius: 0 - focus color: #0080FF - background color: #FFFFFF - - darkmode: - foreground color: #FFFFFF - border color: #484F56 - focus color: #0080FF - background color: #22262A +/** + * The rulesets for the searchfield component. */ .searchfield { @@ -44,6 +25,7 @@ padding-block-end: var(--paddingBlockEnd); padding-inline-start: var(--paddingInlineStart); padding-inline-end: var(--paddingInlineEnd); + font-family: system-ui; font-size: var(--fontSize); font-weight: var(--fontWeight); line-height: var(--lineHeight); diff --git a/Sources/HTMLKitComponents/Resources/css/forms/securefield.css b/Sources/HTMLKitComponents/Resources/css/forms/securefield.css index 9cb75446..aa706aad 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/securefield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/securefield.css @@ -1,24 +1,5 @@ -/* - The rulesets for the securefield component. - - default: - block padding: 8px - inline padding: 16px - font size: - font weigth: normal - line height: 1.5 - foreground color: #000000 - border width: 1px - border color: #DFE3E7 - border radius: 0 - focus color: #0080FF - background color: #FFFFFF - - darkmode: - foreground color: #FFFFFF - border color: #484F56 - focus color: #0080FF - background color: #22262A +/** + * The rulesets for the securefield component. */ .securefield { @@ -44,6 +25,7 @@ padding-block-end: var(--paddingBlockEnd); padding-inline-start: var(--paddingInlineStart); padding-inline-end: var(--paddingInlineEnd); + font-family: system-ui; font-size: var(--fontSize); font-weight: var(--fontWeight); line-height: var(--lineHeight); diff --git a/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css b/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css index 85d66d54..89fdc4ae 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css @@ -1,24 +1,5 @@ -/* - The rulesets for the selectfield component. - - default: - block padding: 8px - inline padding: 16px - font size: - font weigth: normal - line height: 1.5 - foreground color: #000000 - border width: 1px - border color: #DFE3E7 - border radius: 0 - focus color: #0080FF - background color: #FFFFFF - - darkmode: - foreground color: #FFFFFF - border color: #484F56 - focus color: #0080FF - background color: #22262A +/** + * The rulesets for the selectfield component. */ .selectfield { @@ -50,6 +31,7 @@ padding-block-end: var(--paddingBlockEnd); padding-inline-start: var(--paddingInlineStart); padding-inline-end: var(--paddingInlineEnd); + font-family: system-ui; font-size: var(--fontSize); font-weight: var(--fontWeight); line-height: var(--lineHeight); diff --git a/Sources/HTMLKitComponents/Resources/css/forms/slider.css b/Sources/HTMLKitComponents/Resources/css/forms/slider.css index ec4a6e9e..e6688b79 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/slider.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/slider.css @@ -1,16 +1,5 @@ -/* - The rulesets for the slider component. - - defaults: - border width: 1px; - border color: #DFE3E7 - focus color: #0080FF - background color: #FFFFFF - - darkmode: - border color: #484F56 - focus color: #0080FF - background color: #FFFFFF +/** + * The rulesets for the slider component. */ .slider { diff --git a/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css b/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css index 3825c8b9..02cf6df4 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css @@ -1,24 +1,5 @@ -/* - The rulesets for the texteditor component. - - default: - block padding: 8px - inline padding: 16px - font size: - font weigth: normal - line height: 1.5 - foreground color: #000000 - border width: 1px - border color: #DFE3E7 - border radius: 0 - focus color: #0080FF - background color: #FFFFFF - - darkmode: - foreground color: #FFFFFF - border color: #484F56 - focus color: #0080FF - background color: #22262A +/** + * The rulesets for the texteditor component. */ .texteditor { @@ -44,6 +25,7 @@ padding-block-end: var(--paddingBlockEnd); padding-inline-start: var(--paddingInlineStart); padding-inline-end: var(--paddingInlineEnd); + font-family: system-ui; font-size: var(--fontSize); font-weight: var(--fontWeight); line-height: var(--lineHeight); diff --git a/Sources/HTMLKitComponents/Resources/css/forms/textfield.css b/Sources/HTMLKitComponents/Resources/css/forms/textfield.css index 0cfdb95c..9c52a272 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/textfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/textfield.css @@ -1,24 +1,5 @@ -/* - The rulesets for the textfield component. - - default: - block padding: 8px - inline padding: 16px - font size: - font weigth: normal - line height: 1.5 - foreground color: #000000 - border width: 1px - border color: #DFE3E7 - border radius: 0 - focus color: #0080FF - background color: #FFFFFF - - darkmode: - foreground color: #FFFFFF - border color: #484F56 - focus color: #0080FF - background color: #22262A +/** + * The rulesets for the textfield component. */ .textfield { @@ -44,6 +25,7 @@ padding-block-end: var(--paddingBlockEnd); padding-inline-start: var(--paddingInlineStart); padding-inline-end: var(--paddingInlineEnd); + font-family: system-ui; font-size: var(--fontSize); font-weight: var(--fontWeight); line-height: var(--lineHeight); diff --git a/Sources/HTMLKitComponents/Resources/css/forms/textpad.css b/Sources/HTMLKitComponents/Resources/css/forms/textpad.css index 1d386bdc..5e20fb57 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/textpad.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/textpad.css @@ -1,24 +1,5 @@ -/* - The rulesets for the textpad component. - - default: - block padding: 8px - inline padding: 16px - font size: - font weigth: normal - line height: 1.5 - foreground color: #000000 - border width: 1px - border color: #DFE3E7 - border radius: 0 - focus color: #0080FF - background color: #FFFFFF - - darkmode: - foreground color: #FFFFFF - border color: #484F56 - focus color: #0080FF - background color: #22262A +/** + * The rulesets for the textpad component. */ .textpad { @@ -232,6 +213,7 @@ padding-block-end: var(--paddingBlockEnd); padding-inline-start: var(--paddingInlineStart); padding-inline-end: var(--paddingInlineEnd); + font-family: system-ui; font-size: var(--fontSize); font-weight: var(--fontWeight); line-height: var(--lineHeight); diff --git a/Sources/HTMLKitComponents/Resources/css/globals.css b/Sources/HTMLKitComponents/Resources/css/globals.css index c5304c51..b808e8f4 100644 --- a/Sources/HTMLKitComponents/Resources/css/globals.css +++ b/Sources/HTMLKitComponents/Resources/css/globals.css @@ -1,35 +1,9 @@ +/** + * The rulesets for the globals. + */ + :root { - - /* - The variables for the typography. - - font family: system-ui...; (font-stack) - */ - --fontFamily: system-ui, sans-serif; - - /* - The variables for the colors. - - black color: #000000 - white color: #FFFFFF - blue color: #4098D7 - brown color: #BF7140 - cyan color: #38BEC9 - green color: #57AE5B - indigo color: #647ACB - mint color: #91E697 - pink color: #DA4A91 - purple color: #724BB7 - red color: #D64545 - teal color: #3EBD93 - orange color: #E67635 - yellow color: #F7D070 - gray color: #9E9E9E - silver color: #F7F7F7 - accent color: #007FFF - */ - --redColor: 0, 64%, 55%; --orangeColor: 22, 78%, 55%; --yellowColor: 43, 89%, 70%; @@ -53,36 +27,7 @@ --systemFocusColor: 210, 100%, 50%; } -/* - dark version - */ - .scheme\:dark { - - color-scheme: dark; - - /* - The variables for the colors. - - black color: #000000 - white color: #FFFFFF - blue color: #4098D7 - brown color: #BF7140 - cyan color: #38BEC9 - green color: #57AE5B - indigo color: #647ACB - mint color: #91E697 - pink color: #DA4A91 - purple color: #724BB7 - red color: #D64545 - teal color: #3EBD93 - orange color: #E67635 - yellow color: #F7D070 - gray color: #9E9E9E - silver color: #F7F7F7 - accent color: #007FFF - */ - --redColor: 0, 74%, 45%; --orangeColor: 22, 88%, 45%; --yellowColor: 43, 99%, 60%; @@ -104,6 +49,8 @@ --systemBorderColor: 210, 9%, 31%; --systemTextColor: 0, 0%, 100%; --systemFocusColor: 210, 100%, 50%; + + color-scheme: dark; } *, diff --git a/Sources/HTMLKitComponents/Resources/css/helpers/grouping.css b/Sources/HTMLKitComponents/Resources/css/helpers/grouping.css index 0a253367..face4f8c 100644 --- a/Sources/HTMLKitComponents/Resources/css/helpers/grouping.css +++ b/Sources/HTMLKitComponents/Resources/css/helpers/grouping.css @@ -1,5 +1,5 @@ -/* - The stylesheet for the grouping component. +/** + * The rulesets for the grouping component. */ .grouping { diff --git a/Sources/HTMLKitComponents/Resources/css/layout/grid.css b/Sources/HTMLKitComponents/Resources/css/layout/grid.css index 97fbbaf8..01339432 100644 --- a/Sources/HTMLKitComponents/Resources/css/layout/grid.css +++ b/Sources/HTMLKitComponents/Resources/css/layout/grid.css @@ -1,5 +1,5 @@ -/* - The stylesheet for the grid component. +/** + * The rulesets for the grid component. */ .grid { diff --git a/Sources/HTMLKitComponents/Resources/css/layout/list.css b/Sources/HTMLKitComponents/Resources/css/layout/list.css index c5bbcc01..60904306 100644 --- a/Sources/HTMLKitComponents/Resources/css/layout/list.css +++ b/Sources/HTMLKitComponents/Resources/css/layout/list.css @@ -1,5 +1,5 @@ -/* - The rulesets for the list component. +/** + * The rulesets for the list component. */ .list { diff --git a/Sources/HTMLKitComponents/Resources/css/layout/stack.css b/Sources/HTMLKitComponents/Resources/css/layout/stack.css index 46fa51ed..1b475121 100644 --- a/Sources/HTMLKitComponents/Resources/css/layout/stack.css +++ b/Sources/HTMLKitComponents/Resources/css/layout/stack.css @@ -1,5 +1,5 @@ -/* - The rulsets for the horizontal stack component. +/** + * The rulesets for the horizontal stack component. */ .hstack { @@ -99,8 +99,8 @@ box-shadow: 0 5px 5px -5px hsla(var(--shadowColor), 0.3), 0 6px 6px -6px hsla(var(--shadowColor), 0.3); } -/* - The rulesets for the vertical stack component. +/** + * The rulesets for the vertical stack component. */ .vstack { @@ -182,8 +182,8 @@ box-shadow: 0 5px 5px -5px hsla(var(--shadowColor), 0.3), 0 6px 6px -6px hsla(var(--shadowColor), 0.3); } -/* - The rulesets for the z-axis stack component. +/** + * The rulesets for the overlay stack component. */ .zstack { diff --git a/Sources/HTMLKitComponents/Resources/css/typography/link.css b/Sources/HTMLKitComponents/Resources/css/typography/link.css index 217b1059..8ac0d412 100644 --- a/Sources/HTMLKitComponents/Resources/css/typography/link.css +++ b/Sources/HTMLKitComponents/Resources/css/typography/link.css @@ -1,5 +1,5 @@ -/* - The rulsets for the link component. +/** + * The rulesets for the link component. */ .link { diff --git a/Sources/HTMLKitComponents/Resources/css/typography/symbol.css b/Sources/HTMLKitComponents/Resources/css/typography/symbol.css index 84f4e312..63346f26 100644 --- a/Sources/HTMLKitComponents/Resources/css/typography/symbol.css +++ b/Sources/HTMLKitComponents/Resources/css/typography/symbol.css @@ -1,13 +1,5 @@ -/* - The stylesheet for the symbol component. - - default: - font size: 16px - line height: 1.5 - foreground color: #000000 - - darkmode: - foreground color: #FFFFFF +/** + * The rulesets for the symbol component. */ .symbol { diff --git a/Sources/HTMLKitComponents/Resources/css/typography/text.css b/Sources/HTMLKitComponents/Resources/css/typography/text.css index 4cf308b5..6ec3345d 100644 --- a/Sources/HTMLKitComponents/Resources/css/typography/text.css +++ b/Sources/HTMLKitComponents/Resources/css/typography/text.css @@ -1,9 +1,5 @@ -/* - The rulesets for the text component. - - font size: 16px - line height: 1.5 - font weight: normal +/** + * The rulesets for the text component. */ .text { diff --git a/Sources/HTMLKitComponents/Resources/css/views/alert.css b/Sources/HTMLKitComponents/Resources/css/views/alert.css index 28e21d8a..9258da6b 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/alert.css +++ b/Sources/HTMLKitComponents/Resources/css/views/alert.css @@ -1,5 +1,5 @@ -/* - The stylesheet for the tabs component. +/** + * The rulesets for the tabs component. */ .alert { diff --git a/Sources/HTMLKitComponents/Resources/css/views/card.css b/Sources/HTMLKitComponents/Resources/css/views/card.css index 489a91f7..985d907e 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/card.css +++ b/Sources/HTMLKitComponents/Resources/css/views/card.css @@ -1,17 +1,5 @@ -/* - The stylesheet for the card component. - - default: - block padding: 12px - inline padding: 16px - border width: 1px; - border color: #DFE3E7 - border radius: 0 - background color: #FFFFFF - - darkmode: - border color: #484F56 - background color: #22262A +/** + * The rulesets for the card component. */ .card { diff --git a/Sources/HTMLKitComponents/Resources/css/views/carousel.css b/Sources/HTMLKitComponents/Resources/css/views/carousel.css index 739b8cab..96d130c4 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/carousel.css +++ b/Sources/HTMLKitComponents/Resources/css/views/carousel.css @@ -1,5 +1,5 @@ -/* - The stylesheet for the carousel component. +/** + * The rulesets for the carousel component. */ .carousel { @@ -41,10 +41,14 @@ block-size: 50px; } +/** + * The rulesets for the slide component. + */ + .slide { --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; - + position: relative; display: flex; block-size: inherit; @@ -52,17 +56,17 @@ background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); } -/* - indicator component +/** + * The rulesets for the indicator component. */ .indicator { --borderRadius: 5px; - --borderColor: var(--systemBackgroundColor); + --borderColor: var(--systemBorderColor); --borderOpacity: 1.0; - --backgroundColor: var(--systemBackgroundColor); + --backgroundColor: var(--systemBorderColor); --backgroundOpacity: 1.0; - + position: relative; display: inline-block; inline-size: 40px; diff --git a/Sources/HTMLKitComponents/Resources/css/views/chart.css b/Sources/HTMLKitComponents/Resources/css/views/chart.css index f3202e3b..e5aaecce 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/chart.css +++ b/Sources/HTMLKitComponents/Resources/css/views/chart.css @@ -1,5 +1,5 @@ -/* - The stylesheet for the chart component. +/** + * The rulesets for the chart component. */ .chart { diff --git a/Sources/HTMLKitComponents/Resources/css/views/disclosure.css b/Sources/HTMLKitComponents/Resources/css/views/disclosure.css index 5cd533b4..36f28d03 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/disclosure.css +++ b/Sources/HTMLKitComponents/Resources/css/views/disclosure.css @@ -1,3 +1,7 @@ +/** + * The rulesets for the disclosure component. + */ + .disclosure { position: relative; inline-size: 100%; diff --git a/Sources/HTMLKitComponents/Resources/css/views/divider.css b/Sources/HTMLKitComponents/Resources/css/views/divider.css index 7fc04b31..9392705a 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/divider.css +++ b/Sources/HTMLKitComponents/Resources/css/views/divider.css @@ -1,11 +1,5 @@ -/* - The stylesheet for the divider component. - - default: - background color: #000000 - - darkmode: - background color: #FFFFFF +/** + * The rulesets for the divider component. */ .divider { diff --git a/Sources/HTMLKitComponents/Resources/css/views/dropdown.css b/Sources/HTMLKitComponents/Resources/css/views/dropdown.css index a72d5f6b..9148febc 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/dropdown.css +++ b/Sources/HTMLKitComponents/Resources/css/views/dropdown.css @@ -1,22 +1,5 @@ -/* - The stylesheet for the dropdown component. - - default: - block padding: 8px - inline padding: 16px - font size: 16px - font weight: normal - line height: 1.5 - foreground color: #000000 - border width: 1px - border color: #DFE3E7 - border radius: 0 - background color: #FFFFFF - - darkmode: - foreground color: #FFFFFF - border color: #484F56 - background color: #22262a +/** + * The rulesets for the dropdown component. */ .dropdown { @@ -32,7 +15,6 @@ --borderColor: var(--systemBorderColor); --borderRadius: 0; --borderOpacity: 1.0; - --foregroundColor: var(--systemTextColor); --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; diff --git a/Sources/HTMLKitComponents/Resources/css/views/form.css b/Sources/HTMLKitComponents/Resources/css/views/form.css index f9542961..ba0aa867 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/form.css +++ b/Sources/HTMLKitComponents/Resources/css/views/form.css @@ -1,29 +1,9 @@ -/* - The rulsets for the form component. +/** + * The rulesets for the form component. */ .form { display: block; width: 100%; height: auto; -} - -/* - The rulesets for the label component. - - --labelMarginBlockStart: 1.25rem (20px) - --labelMarginBlockEnd: 0.625rem (10px) - */ - -.label { - --foregroundColor: var(--systemTextColor); - - display: inline-block; - margin-block-start: 1.25rem; - margin-block-end: 0.625rem; - font-family: system-ui; - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - color: hsla(var(--foregroundColor), 1.0); -} +} \ No newline at end of file diff --git a/Sources/HTMLKitComponents/Resources/css/views/image.css b/Sources/HTMLKitComponents/Resources/css/views/image.css index 4eec2136..88548cec 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/image.css +++ b/Sources/HTMLKitComponents/Resources/css/views/image.css @@ -1,12 +1,5 @@ -/* - The rulesets for the image component. - - default: - inline size: 100% - border width: 0 - border-radius: 0 - - darkmode: +/** + * The rulesets for the image component. */ .image { diff --git a/Sources/HTMLKitComponents/Resources/css/views/label.css b/Sources/HTMLKitComponents/Resources/css/views/label.css new file mode 100644 index 00000000..b6d8f8c7 --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/css/views/label.css @@ -0,0 +1,16 @@ +/** + * The rulesets for the label component. + */ + +.label { + --foregroundColor: var(--systemTextColor); + + display: inline-block; + margin-block-start: 1.25rem; + margin-block-end: 0.625rem; + font-family: system-ui; + font-size: var(--fontSize); + font-weight: var(--fontWeight); + line-height: var(--lineHeight); + color: hsla(var(--foregroundColor), 1.0); +} diff --git a/Sources/HTMLKitComponents/Resources/css/views/modal.css b/Sources/HTMLKitComponents/Resources/css/views/modal.css index e72bb54f..bb9c9b06 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/modal.css +++ b/Sources/HTMLKitComponents/Resources/css/views/modal.css @@ -1,17 +1,5 @@ -/* - The stylesheet for the modal component. - - default: - block padding: 12px - inline padding: 16px - border width: 1px; - border color: #DFE3E7 - border radius: 0 - background color: #FFFFFF - - darkmode: - border color: #484F56 - background color: #22262A +/** + * The rulesets for the modal component. */ .modal { diff --git a/Sources/HTMLKitComponents/Resources/css/views/navigation.css b/Sources/HTMLKitComponents/Resources/css/views/navigation.css index 8f41ee56..a49716f7 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/navigation.css +++ b/Sources/HTMLKitComponents/Resources/css/views/navigation.css @@ -1,5 +1,5 @@ -/* - The stylesheet for the navigation component. +/** + * The rulesets for the navigation component. */ .navigation { diff --git a/Sources/HTMLKitComponents/Resources/css/views/progress.css b/Sources/HTMLKitComponents/Resources/css/views/progress.css index 11b6a05f..10cf7767 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/progress.css +++ b/Sources/HTMLKitComponents/Resources/css/views/progress.css @@ -1,3 +1,7 @@ +/** + * The rulesets for the progress component. + */ + .progress { --borderWidth: 1px; --borderColor: var(--systemBorderColor); diff --git a/Sources/HTMLKitComponents/Resources/css/views/scroll.css b/Sources/HTMLKitComponents/Resources/css/views/scroll.css index 843314e8..3f218208 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/scroll.css +++ b/Sources/HTMLKitComponents/Resources/css/views/scroll.css @@ -1,5 +1,5 @@ -/* - The stylesheet for the scrollview component. +/** + * The stylesheet for the scroll component. */ .scroll { @@ -26,6 +26,6 @@ scrollbar-width: none; } -.scroll.indicators\:false::-webkit-scrollbar { +.scroll.indicators\:false::-webkit-scrollbar { display: none; } diff --git a/Sources/HTMLKitComponents/Resources/css/views/snippet.css b/Sources/HTMLKitComponents/Resources/css/views/snippet.css index 2ad1585e..f5437374 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/snippet.css +++ b/Sources/HTMLKitComponents/Resources/css/views/snippet.css @@ -1,32 +1,36 @@ -/* - The stylesheet for the snippet component. - - default: - inline padding: 16px - font size: 16px - font weight: normal - line height: 1.5; - foreground color: #000000 - - darkmode: - foreground color: #FFFFFF +/** + * The rulesets for the snippet component. */ .snippet { --paddingInlineStart: 1.0em; --paddingInlineEnd: 1.0em; + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; --fontSize: 1.0rem; --fontWeight: 400; --lineHeight: 1.5; --foregroundColor: var(--systemTextColor); - --backgroundColor: 0, 0%, 0%; - --backgroundOpacity: 0.0; - + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderRadius: 0; + --borderOpacity: 1.0; + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; + position: relative; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); display: block; inline-size: 100%; block-size: auto; counter-reset: line; + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); overflow-inline: auto; } diff --git a/Sources/HTMLKitComponents/Resources/css/views/tabs.css b/Sources/HTMLKitComponents/Resources/css/views/tabs.css index 4ad57fd3..2fd38593 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/tabs.css +++ b/Sources/HTMLKitComponents/Resources/css/views/tabs.css @@ -1,5 +1,5 @@ -/* - The stylesheet for the tabs component. +/** + * The rulesets for the snippet component. */ .tabs { diff --git a/Sources/HTMLKitComponents/Resources/css/views/video.css b/Sources/HTMLKitComponents/Resources/css/views/video.css index 15493fdc..be83487b 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/video.css +++ b/Sources/HTMLKitComponents/Resources/css/views/video.css @@ -1,3 +1,7 @@ +/** + * The rulesets for the video component. + */ + .video { --inlineSize: 100%; --borderWidth: 0; diff --git a/Sources/HTMLKitComponents/Resources/js/components/buttons/dropdown.js b/Sources/HTMLKitComponents/Resources/js/components/buttons/dropdown.js index 0ab8ac3f..94102200 100644 --- a/Sources/HTMLKitComponents/Resources/js/components/buttons/dropdown.js +++ b/Sources/HTMLKitComponents/Resources/js/components/buttons/dropdown.js @@ -1,7 +1,14 @@ (function() { 'use strict'; - + + /** + * Initiates the dropdown object. + * + * @constructor + * + * @param element + */ const Dropdown = function (element) { this.element = element; @@ -10,9 +17,9 @@ this.initiateListener(); }; - - /* - Initiates the listeners + + /** + * Initiates the listeners. */ Dropdown.prototype.initiateListener = function () { @@ -29,9 +36,9 @@ } }); }; - - /* - Shows the dropdown list + + /** + * Shows the dropdown list. */ Dropdown.prototype.showDropdownList = function () { @@ -48,9 +55,9 @@ this.dropdownlist.classList.add('state:visible'); }; - - /* - Hides the dropdown list + + /** + * Hides the dropdown list. */ Dropdown.prototype.hideDropdownList = function () { this.dropdownlist.classList.remove('state:visible'); diff --git a/Sources/HTMLKitComponents/Resources/js/components/forms/progress.js b/Sources/HTMLKitComponents/Resources/js/components/forms/progress.js index 5c1ddf04..04eb3ab7 100644 --- a/Sources/HTMLKitComponents/Resources/js/components/forms/progress.js +++ b/Sources/HTMLKitComponents/Resources/js/components/forms/progress.js @@ -4,6 +4,10 @@ /** * Initiates the progress object. + * + * @constructor + * + * @param element */ const Progress = function (element) { diff --git a/Sources/HTMLKitComponents/Resources/js/components/forms/selectfield.js b/Sources/HTMLKitComponents/Resources/js/components/forms/selectfield.js index 08bc07ce..4b91e0fb 100644 --- a/Sources/HTMLKitComponents/Resources/js/components/forms/selectfield.js +++ b/Sources/HTMLKitComponents/Resources/js/components/forms/selectfield.js @@ -1,7 +1,14 @@ (function() { 'use strict'; - + + /** + * Initiates the selectfield object. + * + * @constructor + * + * @param element + */ const Selectfield = function (element) { this.element = element; @@ -11,9 +18,9 @@ this.initiateListener(); }; - - /* - Initiates the listeners + + /** + * Initiates the listener. */ Selectfield.prototype.initiateListener = function () { @@ -71,9 +78,9 @@ } } }; - - /* - Clears the checked state of the checkfield other as the target + + /** + * Clears the checked state of the checkfield other as the target. */ Selectfield.prototype.clearInputs = function (target) { @@ -84,16 +91,16 @@ } } }; - - /* - Sets the value for the textfield + + /** + * Sets the value for the textfield. */ Selectfield.prototype.setInputValue = function (value) { this.textfield.value = value; }; - - /* - Shows the option list + + /** + * Shows the option list. */ Selectfield.prototype.showOptionList = function () { @@ -106,9 +113,9 @@ this.optionlist.classList.add('state:visible'); }; - - /* - Hides the option list + + /** + * Hides the option list. */ Selectfield.prototype.hideOptionList = function () { diff --git a/Sources/HTMLKitComponents/Resources/js/components/forms/textpad.js b/Sources/HTMLKitComponents/Resources/js/components/forms/textpad.js index b60b7607..4ee75311 100644 --- a/Sources/HTMLKitComponents/Resources/js/components/forms/textpad.js +++ b/Sources/HTMLKitComponents/Resources/js/components/forms/textpad.js @@ -1,9 +1,13 @@ (function() { 'use strict'; - + /** * Initiates the textpad object. + * + * @constructor + * + * @param element */ const Textpad = function (element) { diff --git a/Sources/HTMLKitComponents/Resources/js/components/views/alert.js b/Sources/HTMLKitComponents/Resources/js/components/views/alert.js index c0942dae..8bfeee55 100644 --- a/Sources/HTMLKitComponents/Resources/js/components/views/alert.js +++ b/Sources/HTMLKitComponents/Resources/js/components/views/alert.js @@ -4,8 +4,12 @@ /** * Initiates the alert object. + * + * @constructor + * + * @param element */ - const Alert = function (element, position) { + const Alert = function (element) { this.element = element; diff --git a/Sources/HTMLKitComponents/Resources/js/components/views/carousel.js b/Sources/HTMLKitComponents/Resources/js/components/views/carousel.js index 85346eab..9d258248 100644 --- a/Sources/HTMLKitComponents/Resources/js/components/views/carousel.js +++ b/Sources/HTMLKitComponents/Resources/js/components/views/carousel.js @@ -4,6 +4,10 @@ /** * Initiates the carousel object. + * + * @constructor + * + * @param element */ const Carousel = function (element) { diff --git a/Sources/HTMLKitComponents/Resources/js/components/views/chart.js b/Sources/HTMLKitComponents/Resources/js/components/views/chart.js index f2081ab2..6881d57b 100644 --- a/Sources/HTMLKitComponents/Resources/js/components/views/chart.js +++ b/Sources/HTMLKitComponents/Resources/js/components/views/chart.js @@ -4,6 +4,10 @@ /** * Initiates the chart object. + * + * @constructor + * + * @param element */ const Chart = function (element) { diff --git a/Sources/HTMLKitComponents/Resources/js/components/views/datepicker.js b/Sources/HTMLKitComponents/Resources/js/components/views/datepicker.js index 81f28d55..a7672724 100644 --- a/Sources/HTMLKitComponents/Resources/js/components/views/datepicker.js +++ b/Sources/HTMLKitComponents/Resources/js/components/views/datepicker.js @@ -2,6 +2,13 @@ 'use strict'; + /** + * Initiates the date picker object. + * + * @constructor + * + * @param element + */ const Datepicker = function (element) { this.element = element; @@ -19,10 +26,10 @@ this.initiateListener(); }; - - /* - Initiates the listeners. - */ + + /** + * Initiates the listeners. + */ Datepicker.prototype.initiateListener = function () { const self = this; @@ -78,10 +85,10 @@ } }); }; - - /* - Recreates the calendar by the selection. - */ + + /** + * Recreates the calendar by the selection. + */ Datepicker.prototype.createCalendar = function () { let calendar = ''; @@ -98,26 +105,26 @@ this.calendar.innerHTML = calendar; }; - - /* - Updates the calendar details. - */ + + /** + * Updates the calendar details. + */ Datepicker.prototype.setCalendarDetail = function (year, month) { const months= ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; this.detail.innerHTML = months[month] + ' ' + year; }; - - /* - Sets the input value. + + /** + * Sets the value for the datefield. */ Datepicker.prototype.setInputValue = function (value) { this.datefield.value = value; }; - - /* - Shows the picker. + + /** + * Shows the picker. */ Datepicker.prototype.showPicker = function () { @@ -130,16 +137,16 @@ this.picker.classList.add('state:visible'); }; - - /* - Hides the picker. + + /** + * Hides the picker. */ Datepicker.prototype.hidePicker = function () { this.picker.classList.remove('state:visible'); }; - - /* - Browses onto the previous month. + + /** + * Browses onto the previous month. */ Datepicker.prototype.browsePrevious = function() { @@ -154,9 +161,9 @@ this.createCalendar(); }; - - /* - Browses onto the next month. + + /** + * Browses onto the next month. */ Datepicker.prototype.browseNext = function() { @@ -171,13 +178,17 @@ this.createCalendar(); }; - - /// Calculates the weekday for the first of the month. + + /** + * Calculates the weekday for the first of the month. + */ function getFirstOfMonth(year, month) { return new Date(year, month, 1).getDay(); } - - /// Calculates the total days of the month. + + /** + * Calculates the total days of the month. + */ function getLastOfMonth(year, month) { return new Date(year, month, 0).getDate(); } diff --git a/Sources/HTMLKitComponents/Resources/js/components/views/disclosure.js b/Sources/HTMLKitComponents/Resources/js/components/views/disclosure.js index dc62f8a8..5deda473 100644 --- a/Sources/HTMLKitComponents/Resources/js/components/views/disclosure.js +++ b/Sources/HTMLKitComponents/Resources/js/components/views/disclosure.js @@ -4,6 +4,10 @@ /** * Initiates the disclosure object. + * + * @constructor + * + * @param element */ const Disclosure = function (element) { diff --git a/Sources/HTMLKitComponents/Resources/js/components/views/navigation.js b/Sources/HTMLKitComponents/Resources/js/components/views/navigation.js index fdf2f670..ab41fc58 100644 --- a/Sources/HTMLKitComponents/Resources/js/components/views/navigation.js +++ b/Sources/HTMLKitComponents/Resources/js/components/views/navigation.js @@ -2,6 +2,13 @@ 'use strict'; + /** + * Initiates the navigation object. + * + * @constructor + * + * @param element + */ const Navigation = function (element) { this.element = element; @@ -11,7 +18,10 @@ this.styleMenu(); } }; - + + /** + * Styles the menu. + */ Navigation.prototype.styleMenu = function () { for (const link of this.links) { @@ -33,6 +43,9 @@ } }; + /** + * Toggles the current navigation entry. + */ Navigation.prototype.toggleState = function (target) { target.classList.add('state:active'); }; diff --git a/Sources/HTMLKitComponents/Resources/js/components/views/tabs.js b/Sources/HTMLKitComponents/Resources/js/components/views/tabs.js index 9aa971e5..e7bb8bf3 100644 --- a/Sources/HTMLKitComponents/Resources/js/components/views/tabs.js +++ b/Sources/HTMLKitComponents/Resources/js/components/views/tabs.js @@ -4,6 +4,10 @@ /** * Initiates the tab object. + * + * @constructor + * + * @param element */ const Tab = function(element) { diff --git a/Sources/HTMLKitComponents/Resources/js/components/views/video.js b/Sources/HTMLKitComponents/Resources/js/components/views/video.js index 9c0666f6..926e1bff 100644 --- a/Sources/HTMLKitComponents/Resources/js/components/views/video.js +++ b/Sources/HTMLKitComponents/Resources/js/components/views/video.js @@ -4,6 +4,10 @@ /** * Initiates the video object. + * + * @constructor + * + * @param element */ const Video = function(element) { diff --git a/Sources/HTMLKitComponents/Resources/js/interactions/all.js b/Sources/HTMLKitComponents/Resources/js/interactions/all.js index dd9a5fea..bce39deb 100644 --- a/Sources/HTMLKitComponents/Resources/js/interactions/all.js +++ b/Sources/HTMLKitComponents/Resources/js/interactions/all.js @@ -7,80 +7,80 @@ var $ = (function () { this.elems = document.querySelectorAll(selector); }; - /* - Peforms when the pointer enters the target area. + /** + * Performs when the pointer enters the target area. */ Self.prototype.onHover = function (callback) { this.elems[0].addEventListener('mouseenter', callback); }; - /* - Peforms when the pointer leaves the target area. + /** + * Performs when the pointer leaves the target area. */ Self.prototype.onLeave = function (callback) { this.elems[0].addEventListener('mouseleave', callback); }; - /* - Performs when the target value changes. + /** + * Performs when the target value changes. */ Self.prototype.onChange = function (callback) { this.elems[0].addEventListener('change', callback); }; - /* - Performs when the target is clicked. + /** + * Performs when the target is clicked. */ Self.prototype.onClick = function (callback) { this.elems[0].addEventListener('click', callback); }; - /* - Performs when the target is touched. + /** + * Performs when the target is touched. */ Self.prototype.onTapGesture = function (callback) { this.elems[0].addEventListener('touchend', callback); }; - /* - Performs when the target is touched. + /** + * Performs when the target is touched. */ Self.prototype.onLongPressGesture = function (callback) { this.elems[0].addEventListener('touchstart', callback); }; - /* - Performs when the target is dragged. + /** + * Performs when the target is dragged. */ Self.prototype.onDrag = function (callback) { this.elems[0].addEventListener('drag', callback); }; - /* - Performs when the target is dropped. + /** + * Performs when the target is dropped. */ Self.prototype.onDrop = function (callback) { this.elems[0].addEventListener('drop', callback); }; - /* - Performs when the target is focused. + /** + * Performs when the target is focused. */ Self.prototype.onFocus = function (callback) { this.elems[0].addEventListener('focus', callback); }; - /* - Performs when the target is submitted. + /** + * Performs when the target is submitted. */ Self.prototype.onSubmit = function (callback, validate) { @@ -91,8 +91,8 @@ var $ = (function () { this.elems[0].addEventListener('submit', callback); }; - /* - Shows the target. + /** + * Shows the target. */ Self.prototype.show = function() { @@ -101,40 +101,40 @@ var $ = (function () { this.elems[0].classList.add('state:visible'); }; - /* - Hides the target. + /** + * Hides the target. */ Self.prototype.hide = function() { this.elems[0].classList.add('state:hidden'); }; - /* - Animates the target. + /** + * Animates the target. */ Self.prototype.animate = function({params}, speed) { this.elems[0].animate({params}, speed); }; - /* - Opens the dialog. + /** + * Opens the dialog. */ Self.prototype.open = function() { this.elems[0].showModal(); }; - /* - Closes the dialog. + /** + * Closes the dialog. */ Self.prototype.close = function() { this.elems[0].close(); }; - /* - Validates a form. + /** + * Validates a form. */ Self.prototype.validate = function(validators) { diff --git a/Tests/HTMLKitComponentsTests/ComponentTests.swift b/Tests/HTMLKitComponentsTests/ComponentTests.swift index 2cb94ad3..0d51cff6 100644 --- a/Tests/HTMLKitComponentsTests/ComponentTests.swift +++ b/Tests/HTMLKitComponentsTests/ComponentTests.swift @@ -150,7 +150,7 @@ final class ComponentTests: XCTestCase {