Skip to content

Commit e4c7b1c

Browse files
coenttbcoenttb
committed
feat: add new HTML components and CSS enhancements
- Add AlignItems and VerticalAlign CSS properties - Add Input component for form handling - Add TranslatedString component for internationalization - Export PointFreeHTMLTranslating and Translating modules - Fix PageModule formatting and improve code structure - Update HTMLComponents.Paragraph namespace usage - Update package dependencies for Swift 6.0
1 parent 46a3a71 commit e4c7b1c

File tree

11 files changed

+1010
-33
lines changed

11 files changed

+1010
-33
lines changed

‎Package.swift‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,9 @@ let package = Package(
9494
.htmlComponents,
9595
.htmlMarkdown,
9696
.htmlTheme,
97-
.dependencies
97+
.dependencies,
98+
.htmlTranslating,
99+
.translating
98100
]
99101
),
100102
.target(

‎Package@swift-6.0.swift‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,8 @@ let package = Package(
9595
.htmlComponents,
9696
.htmlMarkdown,
9797
.htmlTheme,
98-
.dependencies
98+
.dependencies,
99+
.translating
99100
]
100101
),
101102
.target(

‎Sources/HTML/CSS Enhancements/AlignItems.swift‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
//
2+
// File.swift
3+
// swift-html
4+
//
5+
// Created by Coen ten Thije Boonkkamp on 01/09/2025.
6+
//
7+
8+
import Foundation
9+
import HTMLCSSPointFreeHTML
10+
11+
extension AlignItems {
12+
public static let leading: Self = .start
13+
public static let trailing: Self = .end
14+
public static let center: Self = .center(nil)
15+
}
16+

‎Sources/HTML/CSS Enhancements/VerticalAlign.swift‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
//
2+
// File.swift
3+
// swift-html
4+
//
5+
// Created by Coen ten Thije Boonkkamp on 01/09/2025.
6+
//
7+
8+
import Foundation
9+
import HTMLCSSPointFreeHTML
10+
11+
extension VerticalAlign {
12+
public static let center: Self = .middle
13+
}
14+

‎Sources/HTML/HTML Enhancements/HTMLElement typealias.swift‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ public typealias area = HTMLElementTypes.Area
7070
/// ```swift
7171
/// article {
7272
/// heading2 { "Blog Post Title" }
73-
/// paragraph { "Content goes here..." }
73+
/// HTMLComponents.Paragraph { "Content goes here..." }
7474
/// }
7575
/// ```
7676
public typealias article = HTMLElementTypes.Article
@@ -83,7 +83,7 @@ public typealias article = HTMLElementTypes.Article
8383
/// Example:
8484
/// ```swift
8585
/// aside {
86-
/// paragraph { "This is supplementary information that enhances the main content." }
86+
/// HTMLComponents.Paragraph { "This is supplementary information that enhances the main content." }
8787
/// }
8888
/// ```
8989
public typealias aside = HTMLElementTypes.Aside
@@ -135,7 +135,7 @@ public typealias base = HTMLElementTypes.Base
135135
/// ```swift
136136
/// body {
137137
/// heading1 { "Welcome to My Website" }
138-
/// paragraph { "This is the content of my webpage." }
138+
/// HTMLComponents.Paragraph { "This is the content of my webpage." }
139139
/// }
140140
/// ```
141141
public typealias body = HTMLElementTypes.Body

‎Sources/HTMLComponents/Paragraph.swift‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import HTML
44
public struct Paragraph<Content: HTML>: HTML {
55
let size: Size
66
@HTMLBuilder let content: Content
7-
public init(_ size: Size = .regular, @HTMLBuilder content: () -> Content) {
7+
public init(
8+
_ size: Size = .regular,
9+
@HTMLBuilder content: () -> Content
10+
) {
811
self.size = size
912
self.content = content()
1013
}

‎Sources/HTMLWebsite/Input.swift‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
//
2+
// File.swift
3+
// coenttb-web
4+
//
5+
// Created by Coen ten Thije Boonkkamp on 03/09/2024.
6+
//
7+
8+
import HTML
9+
10+
public struct Input<CodingKey: RawRepresentable>: HTML where CodingKey.RawValue == String {
11+
12+
public let codingKey: CodingKey
13+
public let disabled: Disabled?
14+
public let form: HTMLAttributeTypes.Form.ID?
15+
public let type: HTMLElementTypes.Input.Variant
16+
public var style: Input.Style = .default
17+
18+
public init(
19+
codingKey: CodingKey,
20+
disabled: Disabled? = nil,
21+
form: HTMLAttributeTypes.Form.ID? = nil,
22+
type: HTMLElementTypes.Input.Variant
23+
) {
24+
self.codingKey = codingKey
25+
self.disabled = disabled
26+
self.form = form
27+
self.type = type
28+
}
29+
30+
public var body: some HTML {
31+
style.transform(
32+
input.init(
33+
name: .init(codingKey.rawValue),
34+
disabled: disabled,
35+
form: form,
36+
type: type
37+
)
38+
39+
.id(codingKey.rawValue)
40+
)
41+
}
42+
}
43+
44+
extension Input {
45+
public enum Style {
46+
case `default`
47+
case outlined
48+
case filled
49+
case minimal
50+
case error
51+
case success
52+
53+
@HTMLBuilder
54+
public func transform (_ html: some HTML)-> some HTML {
55+
switch self {
56+
case .default:
57+
html
58+
.padding(vertical: .px(14), horizontal: .px(10))
59+
.border(width: .px(1), color: .gray900.withDarkColor(.gray100))
60+
.backgroundColor(.white.withDarkColor(.black))
61+
.color(.text.secondary)
62+
.borderRadius(.px(5))
63+
64+
case .outlined:
65+
html
66+
.padding(vertical: .px(14), horizontal: .px(10))
67+
.border(width: .px(2), color: .blue500.withDarkColor(.blue400))
68+
.backgroundColor(.transparent)
69+
.color(.text.primary)
70+
.borderRadius(.px(5))
71+
72+
case .filled:
73+
html
74+
.padding(vertical: .px(14), horizontal: .px(10))
75+
.border(.none)
76+
.backgroundColor(.gray100.withDarkColor(.gray800))
77+
.color(.text.primary)
78+
.borderRadius(.px(5))
79+
80+
case .minimal:
81+
html
82+
.padding(vertical: .px(8), horizontal: .px(4))
83+
.border(.none)
84+
.backgroundColor(.transparent)
85+
.color(.text.primary)
86+
.borderBottom(.init(.px(5), .solid))
87+
// .borderBottomColor(.color(.gray400.withDarkColor(.gray600)))
88+
89+
case .error:
90+
html
91+
.padding(vertical: .px(14), horizontal: .px(10))
92+
.border(width: .px(1), color: .red500.withDarkColor(.red400))
93+
.backgroundColor(Color.red100.withDarkColor(.red900))
94+
.color(.text.primary)
95+
.borderRadius(.px(5))
96+
97+
case .success:
98+
html
99+
.padding(vertical: .px(14), horizontal: .px(10))
100+
.border(width: .px(1), color: .green500.withDarkColor(.green400))
101+
.backgroundColor(.green100.withDarkColor(.green900))
102+
.color(.text.primary)
103+
.borderRadius(.px(5))
104+
}
105+
}
106+
}
107+
}
108+
109+
110+
extension Input {
111+
public func style(_ style: Style) -> Self {
112+
var copy = self
113+
copy.style = style
114+
return copy
115+
}
116+
}

‎Sources/HTMLWebsite/PageModule.swift‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,16 @@ public struct PageModule<Title: HTML, Content: HTML>: HTML {
1616
self.content = content()
1717
}
1818

19-
// public init(
20-
// title: String,
21-
// seeAllURL: String? = nil,
22-
// theme: PageModule.Theme,
23-
// @HTMLBuilder content: () -> Content
24-
// ) where Title == Header<HTMLText> {
25-
// self.title = Header(3) { HTMLText(title) }
26-
// self.theme = theme
27-
// self.content = content()
28-
// }
19+
// public init(
20+
// title: String,
21+
// seeAllURL: String? = nil,
22+
// theme: PageModule.Theme,
23+
// @HTMLBuilder content: () -> Content
24+
// ) where Title == Header<HTMLText> {
25+
// self.title = Header(3) { HTMLText(title) }
26+
// self.theme = theme
27+
// self.content = content()
28+
// }
2929

3030
public init(
3131
theme: PageModule.Theme,
@@ -88,22 +88,22 @@ public struct PageModuleSeeAllTitle<Title: HTML>: HTML {
8888

8989

9090
public var body: some HTML {
91-
div {
92-
title
93-
Link(
94-
href: .init(seeAllURL)) {
95-
"\'(String.see_all.capitalizingFirstLetter().description) →"
96-
}
97-
98-
}
99-
.width(.percent(100))
100-
.flexContainer(
101-
direction: .row,
102-
wrap: .nowrap,
103-
justification: .spaceBetween,
104-
itemAlignment: .center
105-
)
106-
.flexItem(basis: .percent(100))
91+
div {
92+
title
93+
Link(
94+
href: .init(seeAllURL)) {
95+
"\'(String.see_all.capitalizingFirstLetter().description) →"
96+
}
97+
98+
}
99+
.width(.percent(100))
100+
.flexContainer(
101+
direction: .row,
102+
wrap: .nowrap,
103+
justification: .spaceBetween,
104+
itemAlignment: .center
105+
)
106+
.flexItem(basis: .percent(100))
107107
}
108108
}
109109

0 commit comments

Comments
 (0)