From 34979f27adec49b1d8f0f1d3b62e1f4bf9830217 Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sun, 25 Feb 2024 20:44:52 +0100 Subject: [PATCH] Update the components (#143) * Fix border radius of the checkfield component * Fix datepicker, selectfield and dropdown content respecting document bounds * Fix some css * Add a prompt parameter to the selectfield component * Fix some css * Add new symbols and change the initializer * Fix failing test * Fix missing prompt on textpad component * Remove the listrow component * Add system colors * Fix content size of the dropdown component * Move the option for content spacing to the stack initializer * Revise the scroll component * Move the option for content spacing to the grid initializer * Fix some bits * Fix failing tests * Add auto as unit to the margin length * Add text alignment * Refactor some bits Remove the internal initialiser since they have never been used * Distinguish text case and text decoration * Fix foreground color on symbols * Add a font style to the image component for the alternate text * Remove overflow restriction of the card header * Add the experimental feature to configure the component style with swift instead of css * Remove the button modifier from the dropdown component The dropdown doesnt act as a button anymore, therefore it should lose the modifier * Correct some comments * Rename button size to control size to distinguishe it a bit more * Revise the colors Remove the secondary color and rename the primary to accent, also fix others * Add a parameter for the view height to the frame modifier * Fix failing test * Add a frame alignment wich acts a self alignment for flex items * Add styling for specific components when they are grouped * Add a font family modifier * Fix button appearance * Add more style configurations --- .../HTMLKitComponents/Components/Button.swift | 45 +- .../HTMLKitComponents/Components/Card.swift | 17 +- .../Components/Carousel.swift | 27 +- .../Components/Divider.swift | 5 - .../Components/Dropdown.swift | 37 +- .../HTMLKitComponents/Components/Form.swift | 216 +---- .../HTMLKitComponents/Components/Grid.swift | 36 +- .../Components/Grouping.swift | 50 +- .../HTMLKitComponents/Components/Image.swift | 16 +- .../HTMLKitComponents/Components/Link.swift | 43 +- .../HTMLKitComponents/Components/List.swift | 121 +-- .../HTMLKitComponents/Components/Modal.swift | 17 +- .../Components/Navigation.swift | 17 +- .../{ScrollView.swift => Scroll.swift} | 15 +- .../Components/Snippet.swift | 16 +- .../HTMLKitComponents/Components/Stack.swift | 75 +- .../HTMLKitComponents/Components/Symbol.swift | 203 ++++- .../HTMLKitComponents/Components/Text.swift | 49 +- .../Modifiers/ButtonModifier.swift | 7 +- .../Modifiers/TextModifier.swift | 26 +- .../Modifiers/ViewModifier.swift | 14 +- Sources/HTMLKitComponents/Options.swift | 6 +- .../Primitives/Configurations.swift | 340 ++++++++ .../Primitives/DynamicType.swift | 7 - .../Properties/Identifiable.swift | 1 - .../Properties/Modifiable.swift | 1 - .../Resources/css/buttons/button.css | 38 +- .../Resources/css/forms/checkfield.css | 32 +- .../Resources/css/forms/datepicker.css | 41 +- .../Resources/css/forms/filedialog.css | 8 +- .../Resources/css/forms/radioselect.css | 29 +- .../Resources/css/forms/searchfield.css | 15 +- .../Resources/css/forms/securefield.css | 15 +- .../Resources/css/forms/selectfield.css | 25 +- .../Resources/css/forms/slider.css | 9 +- .../Resources/css/forms/texteditor.css | 15 +- .../Resources/css/forms/textfield.css | 15 +- .../Resources/css/forms/textpad.css | 15 +- .../Resources/css/globals.css | 213 ++--- .../Resources/css/helpers/grouping.css | 22 + .../Resources/css/layout/grid.css | 56 +- .../Resources/css/layout/list.css | 8 +- .../Resources/css/layout/stack.css | 83 +- .../Resources/css/typography/link.css | 25 +- .../Resources/css/typography/symbol.css | 6 +- .../Resources/css/typography/text.css | 37 +- .../Resources/css/views/card.css | 11 +- .../Resources/css/views/carousel.css | 24 +- .../Resources/css/views/divider.css | 6 +- .../Resources/css/views/dropdown.css | 55 +- .../Resources/css/views/form.css | 7 +- .../Resources/css/views/image.css | 1 + .../Resources/css/views/modal.css | 10 +- .../Resources/css/views/navigation.css | 10 +- .../Resources/css/views/scroll.css | 31 + .../Resources/css/views/scrollview.css | 29 - .../Resources/css/views/snippet.css | 6 +- .../js/components/buttons/dropdown.js | 18 +- .../js/components/forms/selectfield.js | 11 +- .../Resources/js/components/forms/textpad.js | 4 +- .../Resources/js/components/views/carousel.js | 10 +- .../js/components/views/datepicker.js | 25 +- .../Resources/symbols/bell.svg | 3 + .../Resources/symbols/chevron.down.svg | 3 + .../Resources/symbols/chevron.left.svg | 3 + .../Resources/symbols/chevron.right.svg | 3 + .../Resources/symbols/chevron.up.svg | 3 + .../Resources/symbols/ellipsis.horizontal.svg | 3 + .../Resources/symbols/ellipsis.vertical.svg | 3 + .../Resources/symbols/eye.svg | 3 + .../Resources/symbols/filter.svg | 3 + .../Resources/symbols/flask.svg | 3 + .../Resources/symbols/key.svg | 3 + .../Resources/symbols/lightbulb.svg | 3 + .../Resources/symbols/pencil.svg | 3 + .../Resources/symbols/refresh.svg | 3 + .../Resources/symbols/trash.svg | 3 + Sources/HTMLKitComponents/Tokens.swift | 770 +++++++++--------- Sources/HTMLKitComponents/Validator.swift | 4 - .../ComponentTests.swift | 25 +- .../InteractionTests.swift | 10 +- .../LocalizationTests.swift | 2 +- .../ModifierTests.swift | 66 +- .../SecurityTests.swift | 2 +- 84 files changed, 1782 insertions(+), 1514 deletions(-) rename Sources/HTMLKitComponents/Components/{ScrollView.swift => Scroll.swift} (60%) create mode 100644 Sources/HTMLKitComponents/Primitives/Configurations.swift create mode 100644 Sources/HTMLKitComponents/Resources/css/views/scroll.css delete mode 100644 Sources/HTMLKitComponents/Resources/css/views/scrollview.css create mode 100644 Sources/HTMLKitComponents/Resources/symbols/bell.svg create mode 100644 Sources/HTMLKitComponents/Resources/symbols/chevron.down.svg create mode 100644 Sources/HTMLKitComponents/Resources/symbols/chevron.left.svg create mode 100644 Sources/HTMLKitComponents/Resources/symbols/chevron.right.svg create mode 100644 Sources/HTMLKitComponents/Resources/symbols/chevron.up.svg create mode 100644 Sources/HTMLKitComponents/Resources/symbols/ellipsis.horizontal.svg create mode 100644 Sources/HTMLKitComponents/Resources/symbols/ellipsis.vertical.svg create mode 100644 Sources/HTMLKitComponents/Resources/symbols/eye.svg create mode 100644 Sources/HTMLKitComponents/Resources/symbols/filter.svg create mode 100644 Sources/HTMLKitComponents/Resources/symbols/flask.svg create mode 100644 Sources/HTMLKitComponents/Resources/symbols/key.svg create mode 100644 Sources/HTMLKitComponents/Resources/symbols/lightbulb.svg create mode 100644 Sources/HTMLKitComponents/Resources/symbols/pencil.svg create mode 100644 Sources/HTMLKitComponents/Resources/symbols/refresh.svg create mode 100644 Sources/HTMLKitComponents/Resources/symbols/trash.svg diff --git a/Sources/HTMLKitComponents/Components/Button.swift b/Sources/HTMLKitComponents/Components/Button.swift index c018cddd..816dd024 100644 --- a/Sources/HTMLKitComponents/Components/Button.swift +++ b/Sources/HTMLKitComponents/Components/Button.swift @@ -30,16 +30,6 @@ public struct Button: View, Modifiable, Actionable { self.classes = ["button"] } - /// Creates a action button. - internal init(role: HTMLKit.Values.Button, content: [Content], classes: [String], events: [String]?, id: String?) { - - self.role = role - self.content = content - self.classes = classes - self.events = events - self.id = id - } - public var body: Content { HTMLKit.Button { self.content @@ -63,14 +53,18 @@ public struct Button: View, Modifiable, Actionable { extension Button: ButtonModifier { - public func buttonSize(_ size: Tokens.ButtonSize) -> Button { - return self.mutate(buttonsize: size.value) + public func controlSize(_ size: Tokens.ControlSize) -> Button { + return self.mutate(controlsize: size.value) } public func buttonStyle(_ style: Tokens.ButtonStyle) -> Button { return self.mutate(buttonstyle: style.value) } + public func buttonStyle(_ style: ButtonConfiguration) -> Button { + return self.mutate(classes: style.configuration) + } + public func disabled() -> Button { return self.mutate(buttonstate: Tokens.ViewState.disabled.value) } @@ -143,8 +137,8 @@ extension Button: ViewModifier { return self.mutate(bordercolor: color.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Button { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet, length: Tokens.MarginLength = .small) -> Button { @@ -189,17 +183,6 @@ public struct LinkButton: View, Modifiable, Identifiable { self.classes = ["button"] } - /// Creates a action button. - internal init(destination: String, target: HTMLKit.Values.Target, content: [Content], classes: [String], events: [String]?, id: String?) { - - self.destination = destination - self.target = target - self.content = content - self.classes = classes - self.events = events - self.id = id - } - public var body: Content { Anchor { self.content @@ -220,13 +203,17 @@ public struct LinkButton: View, Modifiable, Identifiable { extension LinkButton: ButtonModifier { - public func buttonSize(_ size: Tokens.ButtonSize) -> LinkButton { - return self.mutate(buttonsize: size.value) + public func controlSize(_ size: Tokens.ControlSize) -> LinkButton { + return self.mutate(controlsize: size.value) } public func buttonStyle(_ style: Tokens.ButtonStyle) -> LinkButton { return self.mutate(buttonstyle: style.value) } + + public func buttonStyle(_ style: ButtonConfiguration) -> LinkButton { + return self.mutate(classes: style.configuration) + } public func disabled() -> LinkButton { return self.mutate(buttonstate: Tokens.ViewState.disabled.value) @@ -285,8 +272,8 @@ extension LinkButton: ViewModifier { return self.mutate(bordercolor: color.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> LinkButton { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> LinkButton { diff --git a/Sources/HTMLKitComponents/Components/Card.swift b/Sources/HTMLKitComponents/Components/Card.swift index 7df07863..6703b3ca 100644 --- a/Sources/HTMLKitComponents/Components/Card.swift +++ b/Sources/HTMLKitComponents/Components/Card.swift @@ -35,15 +35,6 @@ public struct Card: View, Modifiable, Identifiable { self.classes = ["card"] } - /// Creates a card. - internal init(header: [Content]?, content: [Content], classes: [String], id: String?) { - - self.header = header - self.content = content - self.classes = classes - self.id = id - } - public var body: Content { Division { Division { @@ -64,6 +55,10 @@ public struct Card: View, Modifiable, Identifiable { public func tag(_ value: String) -> Card { return self.mutate(id: value) } + + public func cardStyle(_ style: CardConfiguration) -> Card { + return self.mutate(classes: style.configuration) + } } extension Card: ViewModifier { @@ -109,8 +104,8 @@ extension Card: ViewModifier { return self.mutate(bordercolor: color.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Card { - return mutate(frame: width.value, offset: offset?.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) } 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 f117d7d2..9a9acbca 100644 --- a/Sources/HTMLKitComponents/Components/Carousel.swift +++ b/Sources/HTMLKitComponents/Components/Carousel.swift @@ -23,14 +23,6 @@ public struct Carousel: View, Identifiable, Modifiable { self.classes = ["carousel"] } - /// Creates a carousel. - internal init(content: [Identifiable], classes: [String], id: String?) { - - self.content = content - self.classes = classes - self.id = id - } - public var body: Content { Division { Division { @@ -58,6 +50,10 @@ public struct Carousel: View, Identifiable, Modifiable { public func tag(_ value: String) -> Carousel { return self.mutate(id: value) } + + public func carouselStyle(_ style: CarouselConfiguration) -> Carousel { + return self.mutate(classes: style.configuration) + } } extension Carousel: ViewModifier { @@ -103,8 +99,8 @@ extension Carousel: ViewModifier { return self.mutate(scheme: scheme.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Carousel { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Carousel { @@ -126,13 +122,6 @@ public struct Slide: View, Identifiable, Modifiable { self.classes = ["slide"] } - internal init(id: String?, content: [Content], classes: [String]) { - - self.id = id - self.content = content - self.classes = classes - } - public var body: Content { Division { content @@ -191,8 +180,8 @@ extension Slide: ViewModifier { return self.mutate(scheme: scheme.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Slide { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Slide { diff --git a/Sources/HTMLKitComponents/Components/Divider.swift b/Sources/HTMLKitComponents/Components/Divider.swift index f40e6428..5e450af2 100644 --- a/Sources/HTMLKitComponents/Components/Divider.swift +++ b/Sources/HTMLKitComponents/Components/Divider.swift @@ -16,11 +16,6 @@ public struct Divider: View { self.classes = ["divider"] } - /// Creates a divider. - internal init(classes: [String]) { - self.classes = classes - } - public var body: Content { HorizontalRule() .class(classes.joined(separator: " ")) diff --git a/Sources/HTMLKitComponents/Components/Dropdown.swift b/Sources/HTMLKitComponents/Components/Dropdown.swift index 767f73e4..5597916d 100644 --- a/Sources/HTMLKitComponents/Components/Dropdown.swift +++ b/Sources/HTMLKitComponents/Components/Dropdown.swift @@ -27,15 +27,6 @@ public struct Dropdown: View, Modifiable, Identifiable { self.classes = ["dropdown"] } - /// Creates a dropdown. - internal init(label: [Content], content: [Content], classes: [String], id: String?) { - - self.label = label - self.content = content - self.classes = classes - self.id = id - } - public var body: Content { Division { Division { @@ -58,30 +49,6 @@ public struct Dropdown: View, Modifiable, Identifiable { } } -extension Dropdown: ButtonModifier { - - public func buttonSize(_ size: Tokens.ButtonSize) -> Dropdown { - return self.mutate(buttonsize: size.value) - } - - public func buttonStyle(_ style: Tokens.ButtonStyle) -> Dropdown { - return self.mutate(buttonstyle: style.value) - } - - public func disabled() -> Dropdown { - return self.mutate(buttonstate: Tokens.ViewState.disabled.value) - } - - public func disabled(_ condition: Bool) -> Dropdown { - - if condition { - return self.mutate(buttonstate: Tokens.ViewState.disabled.value) - } - - return self - } -} - extension Dropdown: ViewModifier { public func opacity(_ value: Tokens.OpacityValue) -> Dropdown { @@ -125,8 +92,8 @@ extension Dropdown: ViewModifier { return self.mutate(scheme: scheme.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Dropdown { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Dropdown { diff --git a/Sources/HTMLKitComponents/Components/Form.swift b/Sources/HTMLKitComponents/Components/Form.swift index c4a1ca14..1234e17a 100644 --- a/Sources/HTMLKitComponents/Components/Form.swift +++ b/Sources/HTMLKitComponents/Components/Form.swift @@ -33,17 +33,6 @@ public struct Form: View, Actionable { self.classes = ["form"] } - /// Creates a form. - internal init(method: Values.Method, encoding: Values.Encoding, content: [FormElement], classes: [String], events: [String]?, id: String?) { - - self.method = method - self.encoding = encoding - self.content = content - self.classes = classes - self.events = events - self.id = id - } - public var body: Content { HTMLKit.Form { content @@ -96,15 +85,6 @@ public struct FieldLabel: View { self.classes = ["label"] } - /// Creates a field label. - internal init(for id: String, content: [Content], classes: [String], events: [String]?) { - - self.id = id - self.content = content - self.classes = classes - self.events = events - } - public var body: Content { Label { content @@ -143,17 +123,6 @@ public struct TextField: View, Modifiable, Identifiable { self.classes = ["textfield"] } - /// Creates a text field. - internal init(name: String, prompt: String?, value: String?, classes: [String], events: [String]?, id: String?) { - - self.name = name - self.prompt = prompt - self.value = value - self.classes = classes - self.events = events - self.id = id - } - public var body: Content { Input() .type(.text) @@ -173,6 +142,10 @@ public struct TextField: View, Modifiable, Identifiable { public func tag(_ value: String) -> TextField { return self.mutate(id: value) } + + public func fieldStyle(_ style: FieldConfiguration) -> TextField { + return self.mutate(classes: style.configuration) + } } extension TextField: InputModifier { @@ -234,8 +207,8 @@ extension TextField: ViewModifier { return self.mutate(scheme: scheme.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> TextField { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> TextField { @@ -275,18 +248,6 @@ public struct TextEditor: View, Modifiable, Identifiable { self.classes = ["texteditor"] } - /// Creates a text editor. - internal init(name: String, prompt: String?, rows: Int, content: [String], classes: [String], events: [String]?, id: String?) { - - self.name = name - self.prompt = prompt - self.rows = rows - self.content = content - self.classes = classes - self.events = events - self.id = id - } - public var body: Content { TextArea { content @@ -375,8 +336,8 @@ extension TextEditor: ViewModifier { return self.mutate(scheme: scheme.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> TextEditor { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> TextEditor { @@ -452,17 +413,6 @@ public struct CheckField: View, Modifiable, Selectable, Identifiable { self.classes = ["checkfield"] } - /// Creates a check field. - internal init(id: String?, name: String?, value: String, isSelected: Bool, content: String, classes: [String]) { - - self.id = id - self.name = name - self.value = value - self.isSelected = isSelected - self.content = content - self.classes = classes - } - public var body: Content { Division { Input() @@ -550,8 +500,8 @@ extension CheckField: ViewModifier { return self.mutate(scheme: scheme.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> CheckField { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> CheckField { @@ -589,17 +539,6 @@ public struct RadioSelect: View, Modifiable, Selectable, Identifiable { self.classes = ["radioselect"] } - /// Creates a radio select. - internal init(id: String?, name: String?, value: String, isSelected: Bool, content: String, classes: [String]) { - - self.id = id - self.name = name - self.value = value - self.isSelected = isSelected - self.content = content - self.classes = classes - } - public var body: Content { Division { Input() @@ -687,8 +626,8 @@ extension RadioSelect: ViewModifier { return self.mutate(scheme: scheme.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> RadioSelect { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> RadioSelect { @@ -704,6 +643,9 @@ public struct SelectField: View, Modifiable, Identifiable { /// The identifier of the field. internal let name: String + /// The placeholder for the field value. + internal let prompt: String? + internal let selection: String? /// The content of the field. @@ -716,30 +658,23 @@ public struct SelectField: View, Modifiable, Identifiable { internal var events: [String]? /// Creates a select field. - public init(name: String, selection: String? = nil, @ContentBuilder content: () -> [Selectable]) { + public init(name: String, prompt: String? = nil, selection: String? = nil, @ContentBuilder content: () -> [Selectable]) { self.name = name + self.prompt = prompt self.selection = selection self.content = content() self.classes = ["selectfield"] } - /// Creates a select field. - internal init(name: String, selection: String?, content: [Selectable], classes: [String], events: [String]?, id: String?) { - - self.name = name - self.selection = selection - self.content = content - self.classes = classes - self.events = events - self.id = id - } - public var body: Content { Division { Input() .type(.text) .class("selectfield-textfield") + .modify(unwrap: prompt) { + $0.placeholder($1) + } Division { for item in content { item.selected(item.value == selection) @@ -818,8 +753,8 @@ extension SelectField: ViewModifier { return self.mutate(scheme: scheme.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> SelectField { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> SelectField { @@ -856,17 +791,6 @@ public struct SecureField: View, Modifiable, Identifiable { self.classes = ["securefield"] } - /// Creates a password field. - internal init(name: String, prompt: String?, value: String?, classes: [String], events: [String]?, id: String?) { - - self.name = name - self.prompt = prompt - self.value = value - self.classes = classes - self.events = events - self.id = id - } - public var body: Content { Input() .type(.password) @@ -947,8 +871,8 @@ extension SecureField: ViewModifier { return self.mutate(scheme: scheme.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> SecureField { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> SecureField { @@ -977,15 +901,6 @@ public struct Slider: View, Modifiable, Identifiable { self.classes = ["slider"] } - /// Creates a slider. - internal init(name: String, classes: [String], events: [String]?, id: String?) { - - self.name = name - self.classes = classes - self.events = events - self.id = id - } - public var body: Content { Input() .type(.range) @@ -1060,8 +975,8 @@ extension Slider: ViewModifier { return self.mutate(scheme: scheme.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Slider { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Slider { @@ -1094,16 +1009,6 @@ public struct DatePicker: View, Modifiable, Identifiable { self.classes = ["datepicker"] } - /// Creates a date picker. - internal init(name: String, value: String?, classes: [String], events: [String]?, id: String?) { - - self.name = name - self.value = value - self.classes = classes - self.events = events - self.id = id - } - public var body: Content { Division { Input() @@ -1256,8 +1161,8 @@ extension DatePicker: ViewModifier { return self.mutate(scheme: scheme.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> DatePicker { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> DatePicker { @@ -1294,17 +1199,6 @@ public struct SearchField: View, Modifiable, Identifiable { self.classes = ["searchfield"] } - /// Creates a search field. - internal init(name: String, prompt: String?, value: String?, classes: [String], events: [String]?, id: String?) { - - self.name = name - self.prompt = prompt - self.value = value - self.classes = classes - self.events = events - self.id = id - } - public var body: Content { Input() .type(.search) @@ -1385,8 +1279,8 @@ extension SearchField: ViewModifier { return self.mutate(scheme: scheme.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> SearchField { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> SearchField { @@ -1421,17 +1315,6 @@ public struct Progress: View, Identifiable { self.classes = ["progress"] } - /// Creates a progress bar. - internal init(maximum: Float, value: String, content: [Content], classes: [String], events: [String]?, id: String?) { - - self.maximum = maximum - self.value = value - self.content = content - self.classes = classes - self.events = events - self.id = id - } - public var body: Content { HTMLKit.Progress { content @@ -1478,17 +1361,6 @@ public struct TextPad: View, Modifiable, Identifiable { self.classes = ["textpad"] } - /// Creates a textpad. - internal init(name: String, prompt: String?, rows: Int, content: [String], classes: [String], id: String?) { - - self.name = name - self.prompt = prompt - self.rows = rows - self.content = content - self.classes = classes - self.id = id - } - public var body: Content { Division { UnorderedList { @@ -1517,19 +1389,19 @@ public struct TextPad: View, Modifiable, Identifiable { } .class("toolbar-tool command:strikethrough") ListItem { - Symbol(system: "text.alignleft") + Symbol(system: .text(.left)) } .class("toolbar-tool") ListItem { - Symbol(system: "text.aligncenter") + Symbol(system: .text(.center)) } .class("toolbar-tool") ListItem { - Symbol(system: "text.alignright") + Symbol(system: .text(.right)) } .class("toolbar-tool") ListItem { - Symbol(system: "text.alignjustify") + Symbol(system: .text(.justify)) } .class("toolbar-tool") } @@ -1540,6 +1412,9 @@ public struct TextPad: View, Modifiable, Identifiable { .name(name) .rows(rows) .class("textpad-content") + .modify(unwrap: prompt) { + $0.placeholder($1) + } } .class(classes.joined(separator: " ")) .modify(unwrap: id) { @@ -1620,8 +1495,8 @@ extension TextPad: ViewModifier { return self.mutate(scheme: scheme.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> TextPad { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> TextPad { @@ -1650,15 +1525,6 @@ public struct FileDialog: View, Modifiable, Identifiable { self.classes = ["filedialog"] } - /// Creates a search field. - internal init(name: String, classes: [String], events: [String]?, id: String?) { - - self.name = name - self.classes = classes - self.events = events - self.id = id - } - public var body: Content { Input() .type(.file) @@ -1733,8 +1599,8 @@ extension FileDialog: ViewModifier { return self.mutate(scheme: scheme.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> FileDialog { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> FileDialog { diff --git a/Sources/HTMLKitComponents/Components/Grid.swift b/Sources/HTMLKitComponents/Components/Grid.swift index 93da189c..217729ef 100644 --- a/Sources/HTMLKitComponents/Components/Grid.swift +++ b/Sources/HTMLKitComponents/Components/Grid.swift @@ -19,19 +19,30 @@ public struct Grid: View, Modifiable, Actionable { internal var events: [String]? /// Creates a collection. - public init(ratio: Tokens.GridRatio = .fit, @ContentBuilder content: () -> [Content]) { + public init(ratio: Tokens.GridRatio = .fit, spacing: Tokens.ContentSpace? = nil, @ContentBuilder content: () -> [Content]) { self.content = content() self.classes = ["grid", "ratio:\(ratio.value)"] + + if let spacing { + self.classes.append("horizontal-spacing:\(spacing.value)") + self.classes.append("vertical-spacing:\(spacing.value)") + } } /// Creates a collection. - internal init(content: [Content], classes: [String], events: [String]?, id: String?) { + public init(ratio: Tokens.GridRatio = .fit, horizontalSpacing: Tokens.ContentSpace? = nil, verticalSpacing: Tokens.ContentSpace? = nil, @ContentBuilder content: () -> [Content]) { + + self.content = content() + self.classes = ["grid", "ratio:\(ratio.value)"] + + if let horizontalSpacing { + self.classes.append("horizontal-spacing:\(horizontalSpacing.value)") + } - self.content = content - self.classes = classes - self.events = events - self.id = id + if let verticalSpacing { + self.classes.append("vertical-spacing:\(verticalSpacing.value)") + } } public var body: Content { @@ -49,15 +60,6 @@ public struct Grid: View, Modifiable, Actionable { } } - /// Sets the space of the content. - public func contentSpace(_ value: Tokens.ContentSpace) -> Grid { - - var newSelf = self - newSelf.classes.append("space:\(value.value)") - - return newSelf - } - public func tag(_ value: String) -> Grid { return self.mutate(id: value) } @@ -117,8 +119,8 @@ extension Grid: ViewModifier { return self.mutate(bordercolor: color.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Grid { - return mutate(frame: width.value, offset: offset?.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) } 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 9d401db2..c41f9806 100644 --- a/Sources/HTMLKitComponents/Components/Grouping.swift +++ b/Sources/HTMLKitComponents/Components/Grouping.swift @@ -22,14 +22,6 @@ public struct Grouping: View, Modifiable, Identifiable { self.content = content() self.classes = ["grouping"] } - - /// Creates a group. - internal init(content: [Content], classes: [String], id: String?) { - - self.content = content - self.classes = classes - self.id = id - } public var body: Content { Division { @@ -41,15 +33,19 @@ public struct Grouping: View, Modifiable, Identifiable { } } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Grouping { + public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Grouping { var newSelf = self - if let offset { - newSelf.classes.append("offset:\(offset.value)") + if let height { + newSelf.classes.append("height:\(height.value)") + } + + if let alignment { + newSelf.classes.append("frame-alignment:\(alignment.value)") } - newSelf.classes.append("size:\(width.value)") + newSelf.classes.append("width:\(width.value)") return newSelf } @@ -59,10 +55,18 @@ public struct Grouping: View, Modifiable, Identifiable { } } -extension Grouping: TextModifier { +extension Grouping: TextModifier { - public func font(_ style: Tokens.TextStyle) -> Grouping { - return self.mutate(font: style.value) + public func font(_ family: Tokens.FontFamily) -> Grouping { + return mutate(fontfamily: family.value) + } + + public func textStyle(_ style: Tokens.TextStyle) -> Grouping { + return self.mutate(textstyle: style.value) + } + + public func textStyle(_ style: TextConfiguration) -> Grouping { + return self.mutate(classes: style.configuration) } public func foregroundColor(_ color: Tokens.ForegroundColor) -> Grouping { @@ -77,8 +81,12 @@ extension Grouping: TextModifier { return self.mutate(fontweight: weight.value) } - public func fontTransformation(_ transformation: Tokens.TextTransformation) -> Grouping { - return self.mutate(fonttransformation: transformation.value) + public func textCase(_ case: Tokens.TextCase) -> Grouping { + return self.mutate(textcase: `case`.value) + } + + public func textDecoration(_ decoration: Tokens.TextDecoration) -> Grouping { + return self.mutate(textdecoration: decoration.value) } public func fontStyle(_ style: Tokens.FontStyle) -> Grouping { @@ -112,26 +120,26 @@ extension Grouping: TextModifier { } public func underline() -> Grouping { - return self.mutate(fontdecoration: Tokens.TextDecoration.underline.value) + return self.mutate(textdecoration: Tokens.TextDecoration.underline.value) } public func underline(_ condition: Bool) -> Grouping { if condition { - return self.mutate(fontdecoration: Tokens.TextDecoration.underline.value) + return self.mutate(textdecoration: Tokens.TextDecoration.underline.value) } return self } public func strikethrough() -> Grouping { - return self.mutate(fontdecoration: Tokens.TextDecoration.strikeThrough.value) + return self.mutate(textdecoration: Tokens.TextDecoration.strikeThrough.value) } public func strikethrough(_ condition: Bool) -> Grouping { if condition { - return self.mutate(fontdecoration: Tokens.TextDecoration.strikeThrough.value) + return self.mutate(textdecoration: Tokens.TextDecoration.strikeThrough.value) } return self diff --git a/Sources/HTMLKitComponents/Components/Image.swift b/Sources/HTMLKitComponents/Components/Image.swift index 4010cfe5..baa18a8f 100644 --- a/Sources/HTMLKitComponents/Components/Image.swift +++ b/Sources/HTMLKitComponents/Components/Image.swift @@ -29,14 +29,6 @@ public struct Image: View, Modifiable, Identifiable { self.classes = ["image"] } - /// Creates a image view. - internal init(source: String, classes: [String], id: String?) { - - self.source = .string(source) - self.classes = classes - self.id = id - } - public var body: Content { HTMLKit.Image() .source(source) @@ -50,6 +42,10 @@ public struct Image: View, Modifiable, Identifiable { public func tag(_ value: String) -> Image { return self.mutate(id: value) } + + public func imageStyle(_ style: ImageConfiguration) -> Image { + return self.mutate(classes: style.configuration) + } } extension Image: ImageModifier { @@ -118,8 +114,8 @@ extension Image: ViewModifier { return self.mutate(bordercolor: color.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Image { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Image { diff --git a/Sources/HTMLKitComponents/Components/Link.swift b/Sources/HTMLKitComponents/Components/Link.swift index d43f616c..27779783 100644 --- a/Sources/HTMLKitComponents/Components/Link.swift +++ b/Sources/HTMLKitComponents/Components/Link.swift @@ -44,17 +44,6 @@ public struct Link: View, Modifiable, Identifiable { self.classes = ["link"] } - /// Creates a link. - internal init(destination: String, target: HTMLKit.Values.Target, content: [Content], classes: [String], events: [String]?, id: String?) { - - self.destination = destination - self.target = target - self.content = content - self.classes = classes - self.events = events - self.id = id - } - public var body: Content { Anchor { content @@ -74,8 +63,16 @@ public struct Link: View, Modifiable, Identifiable { extension Link: TextModifier { - public func font(_ style: Tokens.TextStyle) -> Link { - return self.mutate(font: style.value) + public func font(_ family: Tokens.FontFamily) -> Link { + return mutate(fontfamily: family.value) + } + + public func textStyle(_ style: Tokens.TextStyle) -> Link { + return self.mutate(textstyle: style.value) + } + + public func textStyle(_ style: TextConfiguration) -> Link { + return self.mutate(classes: style.configuration) } public func foregroundColor(_ color: Tokens.ForegroundColor) -> Link { @@ -90,14 +87,18 @@ extension Link: TextModifier { return self.mutate(fontweight: weight.value) } - public func fontTransformation(_ transformation: Tokens.TextTransformation) -> Link { - return self.mutate(fonttransformation: transformation.value) + public func textCase(_ case: Tokens.TextCase) -> Link { + return self.mutate(textcase: `case`.value) } public func fontStyle(_ style: Tokens.FontStyle) -> Link { return self.mutate(fontstyle: style.value) } + public func textDecoration(_ decoration: Tokens.TextDecoration) -> Link { + return self.mutate(textdecoration: decoration.value) + } + public func bold() -> Link { return self.mutate(fontweight: Tokens.FontWeight.bold.value) } @@ -125,26 +126,26 @@ extension Link: TextModifier { } public func underline() -> Link { - return self.mutate(fontdecoration: Tokens.TextDecoration.underline.value) + return self.mutate(textdecoration: Tokens.TextDecoration.underline.value) } public func underline(_ condition: Bool) -> Link { if condition { - return self.mutate(fontdecoration: Tokens.TextDecoration.underline.value) + return self.mutate(textdecoration: Tokens.TextDecoration.underline.value) } return self } public func strikethrough() -> Link { - return self.mutate(fontdecoration: Tokens.TextDecoration.strikeThrough.value) + return self.mutate(textdecoration: Tokens.TextDecoration.strikeThrough.value) } public func strikethrough(_ condition: Bool) -> Link { if condition { - return self.mutate(fontdecoration: Tokens.TextDecoration.strikeThrough.value) + return self.mutate(textdecoration: Tokens.TextDecoration.strikeThrough.value) } return self @@ -202,8 +203,8 @@ extension Link: ViewModifier { return self.mutate(bordercolor: color.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Link { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Link { diff --git a/Sources/HTMLKitComponents/Components/List.swift b/Sources/HTMLKitComponents/Components/List.swift index d5cdd36d..9c54d480 100644 --- a/Sources/HTMLKitComponents/Components/List.swift +++ b/Sources/HTMLKitComponents/Components/List.swift @@ -25,18 +25,14 @@ public struct List: View, Modifiable, Actionable { self.classes = ["list", "direction:\(direction.value)"] } - /// Creates a list. - internal init(content: [ListElement], classes: [String], events: [String]?, id: String?) { - - self.content = content - self.classes = classes - self.events = events - self.id = id - } - public var body: Content { UnorderedList { - content + for item in content { + ListItem { + item + } + .class("list-row") + } } .class(classes.joined(separator: " ")) .modify(unwrap: id) { @@ -58,6 +54,10 @@ public struct List: View, Modifiable, Actionable { return newSelf } + public func listStyle(_ style: ListConfiguration) -> List { + return self.mutate(classes: style.configuration) + } + public func tag(_ value: String) -> List { return self.mutate(id: value) } @@ -117,108 +117,11 @@ extension List: ViewModifier { return self.mutate(bordercolor: color.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> List { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> List { return self.mutate(margin: length.value, insets: insets) } } - -/// A component that represents a list item. -public struct ListRow: View, Modifiable, Actionable { - - public var id: String? - - /// The content of the row. - internal var content: [Content] - - /// The classes of the row. - internal var classes: [String] - - internal var events: [String]? - - /// Creates a list row. - public init(@ContentBuilder content: () -> [Content]) { - - self.content = content() - self.classes = ["list-row"] - } - - /// Creates a list row. - internal init(content: [Content], classes: [String], events: [String]?, id: String?) { - - self.content = content - self.classes = classes - self.events = events - self.id = id - } - - public var body: Content { - ListItem { - content - } - .class(classes.joined(separator: " ")) - .modify(unwrap: id) { - $0.id($1) - } - if let events = self.events { - Script { - events - } - } - } - - public func padding(insets: EdgeSet, length: Tokens.PaddingLength) -> ListRow { - - var classes: [String] = [] - - if !insets.contains(.all) { - - if insets.contains(.top) { - classes.append("padding-top:\(length)") - } - - if insets.contains(.bottom) { - classes.append("padding-bottom:\(length)") - } - - if insets.contains(.leading) { - classes.append("padding-leading:\(length)") - } - - if insets.contains(.trailing) { - classes.append("padding-trailing:\(length)") - } - - if insets.contains(.horizontal) { - classes.append("padding-inline:\(length)") - } - - if insets.contains(.vertical) { - classes.append("padding-block:\(length)") - } - - } else { - classes.append("padding:\(length)") - } - - return self.mutate(classes: classes) - } - - public func tag(_ value: String) -> ListRow { - return self.mutate(id: value) - } -} - -extension ListRow: MouseEvent { - - public func onHover(@ActionBuilder action: (ViewAction) -> [Action]) -> ListRow { - return self.mutate(hoverevent: action(.init())) - } - - public func onLeave(@ActionBuilder action: (ViewAction) -> [Action]) -> ListRow { - return self.mutate(leaveevent: action(.init())) - } -} diff --git a/Sources/HTMLKitComponents/Components/Modal.swift b/Sources/HTMLKitComponents/Components/Modal.swift index 67aae330..7977d0fe 100644 --- a/Sources/HTMLKitComponents/Components/Modal.swift +++ b/Sources/HTMLKitComponents/Components/Modal.swift @@ -26,15 +26,6 @@ public struct Modal: View, Modifiable, Actionable { self.classes = ["modal"] } - /// Createsa model. - internal init(content: [Content], classes: [String], events: [String]?, id: String?) { - - self.content = content - self.classes = classes - self.events = events - self.id = id - } - public var body: Content { Dialog { content @@ -53,6 +44,10 @@ public struct Modal: View, Modifiable, Actionable { public func tag(_ value: String) -> Modal { return self.mutate(id: value) } + + public func modalStyle(_ style: ModalConfiguration) -> Modal { + return self.mutate(classes: style.configuration) + } } extension Modal: ViewModifier { @@ -98,8 +93,8 @@ extension Modal: ViewModifier { return self.mutate(scheme: scheme.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Modal { - return mutate(frame: width.value, offset: offset?.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) } 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 640d4985..151628ca 100644 --- a/Sources/HTMLKitComponents/Components/Navigation.swift +++ b/Sources/HTMLKitComponents/Components/Navigation.swift @@ -14,13 +14,6 @@ public struct Navigation: View, Modifiable, Identifiable { self.classes = ["navigation"] } - internal init(content: [BodyElement], classes: [String], id: String?) { - - self.content = content - self.classes = classes - self.id = id - } - public var body: Content { HTMLKit.Navigation { content @@ -35,11 +28,15 @@ public struct Navigation: View, Modifiable, Identifiable { public func navigationStyle(_ style: Tokens.NavigationStyle) -> Navigation { var newSelf = self - newSelf.classes.append("style:\(style)") + newSelf.classes.append("style:\(style.value)") return newSelf } + public func navigationStyle(_ style: NavigationConfiguration) -> Navigation { + return self.mutate(classes: style.configuration) + } + public func tag(_ value: String) -> Navigation { return self.mutate(id: value) } @@ -88,8 +85,8 @@ extension Navigation: ViewModifier { return self.mutate(bordercolor: color.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Navigation { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Navigation { diff --git a/Sources/HTMLKitComponents/Components/ScrollView.swift b/Sources/HTMLKitComponents/Components/Scroll.swift similarity index 60% rename from Sources/HTMLKitComponents/Components/ScrollView.swift rename to Sources/HTMLKitComponents/Components/Scroll.swift index ea1c9dd0..9b6bef7d 100644 --- a/Sources/HTMLKitComponents/Components/ScrollView.swift +++ b/Sources/HTMLKitComponents/Components/Scroll.swift @@ -6,7 +6,7 @@ import HTMLKit /// A component that displays content in its scrollable area. -public struct ScrollView: View { +public struct Scroll: View { /// The content of the scrollview. internal var content: [Content] @@ -15,17 +15,14 @@ public struct ScrollView: View { internal var classes: [String] /// Creates a scrollview. - public init(direction: Tokens.FlowDirection, @ContentBuilder content: () -> [Content]) { + public init(showIndicators: Bool = true, @ContentBuilder content: () -> [Content]) { self.content = content() - self.classes = ["scrollview", "direction:\(direction.value)"] - } - - /// Creates a scrollview - internal init(content: [Content], classes: [String]) { + self.classes = ["scroll"] - self.content = content - self.classes = classes + if showIndicators != true { + self.classes.append("indicators:false") + } } public var body: Content { diff --git a/Sources/HTMLKitComponents/Components/Snippet.swift b/Sources/HTMLKitComponents/Components/Snippet.swift index 2b17da5b..09e7c973 100644 --- a/Sources/HTMLKitComponents/Components/Snippet.swift +++ b/Sources/HTMLKitComponents/Components/Snippet.swift @@ -31,14 +31,6 @@ public struct Snippet: View, Modifiable, Identifiable { self.classes = ["snippet", "highlight:\(highlight.value)"] } - /// Creates a snippet. - internal init(content: [Content], classes: [String], id: String?) { - - self.content = content - self.classes = classes - self.id = id - } - public var body: Content { PreformattedText { content @@ -52,6 +44,10 @@ public struct Snippet: View, Modifiable, Identifiable { public func tag(_ value: String) -> Snippet { return self.mutate(id: value) } + + public func snippetStyle(_ style: SnippetConfiguration) -> Snippet { + return self.mutate(classes: style.configuration) + } } extension Snippet: ViewModifier { @@ -97,8 +93,8 @@ extension Snippet: ViewModifier { return self.mutate(bordercolor: color.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Snippet { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Snippet { diff --git a/Sources/HTMLKitComponents/Components/Stack.swift b/Sources/HTMLKitComponents/Components/Stack.swift index c09cce86..7bfb32fd 100644 --- a/Sources/HTMLKitComponents/Components/Stack.swift +++ b/Sources/HTMLKitComponents/Components/Stack.swift @@ -19,21 +19,18 @@ public struct HStack: View, Actionable, Modifiable { /// The events of the text. internal var events: [String]? - + /// Creates a horizontal stack. - public init(alignment: Tokens.VerticalAlignment = .center, @ContentBuilder content: () -> [Content]) { + public init(alignment: Tokens.VerticalAlignment = .center, spacing: Tokens.ContentSpace? = nil, @ContentBuilder content: () -> [Content]) { self.content = content() - self.classes = ["hstack", "alignment:\(alignment.value)"] - } - - /// Creates a horizontal stack. - internal init(content: [Content], classes: [String], events: [String]?, id: String?) { - self.content = content - self.classes = classes - self.events = events - self.id = id + if let spacing { + self.classes = ["hstack", "vertical-alignment:\(alignment.value)", "spacing:\(spacing.value)"] + + } else { + self.classes = ["hstack", "vertical-alignment:\(alignment.value)"] + } } public var body: Content { @@ -51,15 +48,6 @@ public struct HStack: View, Actionable, Modifiable { } } - /// Sets the space of the content. - public func contentSpace(_ value: Tokens.ContentSpace) -> HStack { - - var newSelf = self - newSelf.classes.append("space:\(value.value)") - - return newSelf - } - public func tag(_ value: String) -> HStack { return self.mutate(id: value) } @@ -119,8 +107,8 @@ extension HStack: ViewModifier { return self.mutate(bordercolor: color.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> HStack { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> HStack { @@ -142,19 +130,16 @@ public struct VStack: View, Actionable, Modifiable { var events: [String]? /// Creates a vertical stack. - public init(alignment: Tokens.HorizontalAlignment = .leading, @ContentBuilder content: () -> [Content]) { + public init(alignment: Tokens.HorizontalAlignment = .leading, spacing: Tokens.ContentSpace? = nil, @ContentBuilder content: () -> [Content]) { self.content = content() - self.classes = ["vstack", "alignment:\(alignment.value)"] - } - - /// Creates a vertical stack. - internal init(content: [Content], classes: [String], events: [String]?, id: String?) { - self.content = content - self.classes = classes - self.events = events - self.id = id + if let spacing { + self.classes = ["vstack", "horizontal-alignment:\(alignment.value)", "spacing:\(spacing.value)"] + + } else { + self.classes = ["vstack", "horizontal-alignment:\(alignment.value)"] + } } public var body: Content { @@ -172,15 +157,6 @@ public struct VStack: View, Actionable, Modifiable { } } - /// Sets the space of the content. - public func contentSpace(_ value: Tokens.ContentSpace) -> VStack { - - var newSelf = self - newSelf.classes.append("space:\(value.value)") - - return newSelf - } - public func tag(_ value: String) -> VStack { return self.mutate(id: value) } @@ -240,8 +216,8 @@ extension VStack: ViewModifier { return self.mutate(bordercolor: color.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> VStack { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> VStack { @@ -269,15 +245,6 @@ public struct ZStack: View, Actionable, Modifiable { self.classes = ["zstack"] } - /// Creates a stack. - internal init(content: [Content], classes: [String], events: [String]?, id: String?) { - - self.content = content - self.classes = classes - self.events = events - self.id = id - } - public var body: Content { Division { content @@ -352,8 +319,8 @@ extension ZStack: ViewModifier { return self.mutate(bordercolor: color.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> ZStack { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> ZStack { diff --git a/Sources/HTMLKitComponents/Components/Symbol.swift b/Sources/HTMLKitComponents/Components/Symbol.swift index 62a023b8..f0b0e4db 100644 --- a/Sources/HTMLKitComponents/Components/Symbol.swift +++ b/Sources/HTMLKitComponents/Components/Symbol.swift @@ -14,6 +14,196 @@ import FoundationXML /// A component that displays symbols. public struct Symbol: View, Modifiable { + public enum ChartVariants { + case pie + } + + public enum ChevronVariants: String { + case left + case right + case down + case up + } + + public enum SidebarVariants: String { + case left + case right + case split + } + + public enum TextVariants: String { + case left + case right + case justify + case center + } + + public enum EllipsisVariants: String { + case horizontal + case vertical + } + + public enum WindowVariants: String { + case maximize + case minimize + } + + public enum SymbolNames { + + case bell + case bookmark + case calendar + case chart(ChartVariants) + case chevron(ChevronVariants) + case clock + case cloud + case ellipsis(EllipsisVariants) + case envelope + case eye + case file + case filter + case flask + case folder + case house + case key + case lifepreserver + case lightbulb + case location + case lock + case pencil + case person + case photo + case refresh + case sidebar(SidebarVariants) + case scope + case target + case text(TextVariants) + case trash + case tresor + + public var rawValue: String { + + switch self { + case .bell: + return "bell" + + case .bookmark: + return "bookmark" + + case .calendar: + return "calendar" + + case .chart(.pie): + return "chart.pie" + + case .chevron(.left): + return "chevron.left" + + case .chevron(.right): + return "chevron.right" + + case .chevron(.down): + return "chevron.down" + + case .chevron(.up): + return "chevron.up" + + case .clock: + return "clock" + + case .cloud: + return "cloud" + + case .ellipsis(.horizontal): + return "ellipsis.horizontal" + + case .ellipsis(.vertical): + return "ellipsis.vertical" + + case .envelope: + return "envelope" + + case .eye: + return "eye" + + case .file: + return "file" + + case .filter: + return "filter" + + case .flask: + return "flask" + + case .folder: + return "folder" + + case .house: + return "house" + + case .key: + return "key" + + case .lifepreserver: + return "lifepreserver" + + case .lightbulb: + return "lightbulb" + + case .location: + return "location" + + case .lock: + return "lock" + + case .pencil: + return "pencil" + + case .person: + return "person" + + case .photo: + return "photo" + + case .refresh: + return "refresh" + + case .sidebar(.left): + return "sidebar.left" + + case .sidebar(.right): + return "sidebar.right" + + case .sidebar(.split): + return "square.split" + + case .scope: + return "scope" + + case .target: + return "target" + + case .text(.left): + return "text.alignleft" + + case .text(.right): + return "text.alignright" + + case .text(.center): + return "text.aligncenter" + + case .text(.justify): + return "text.alignjustify" + + case .trash: + return "trash" + + case .tresor: + return "tresor" + } + } + } + /// The content of the symbol. internal let content: [VectorElement] @@ -21,9 +211,9 @@ public struct Symbol: View, Modifiable { internal var classes: [String] /// Retrieves a symbol. - public init(system name: String) { + public init(system name: SymbolNames) { - if let url = Bundle.module.url(forResource: name, withExtension: "svg") { + if let url = Bundle.module.url(forResource: name.rawValue, withExtension: "svg") { if let content = try? Symbol.load(contentsOfFile: url) { self.content = content @@ -39,13 +229,6 @@ public struct Symbol: View, Modifiable { self.classes = ["symbol"] } - /// Creates a symbol. - internal init(content: [VectorElement], classes: [String]) { - - self.content = content - self.classes = classes - } - public var body: Content { Vector { content @@ -65,7 +248,7 @@ public struct Symbol: View, Modifiable { public func foregroundColor(_ color: Tokens.ForegroundColor) -> Symbol { var newSelf = self - newSelf.classes.append("color:\(color.value)") + newSelf.classes.append("foreground:\(color.value)") return newSelf } diff --git a/Sources/HTMLKitComponents/Components/Text.swift b/Sources/HTMLKitComponents/Components/Text.swift index 088de96f..4b15dfad 100644 --- a/Sources/HTMLKitComponents/Components/Text.swift +++ b/Sources/HTMLKitComponents/Components/Text.swift @@ -19,25 +19,16 @@ public struct Text: View, Actionable, Modifiable { internal var events: [String]? /// Creates a text. - public init(@ContentBuilder content: () -> [Content]) { + public init(alignment: Tokens.TextAlignment = .leading, @ContentBuilder content: () -> [Content]) { self.content = content() - self.classes = ["text"] + self.classes = ["text", "alignment:\(alignment.value)"] } - public init(_ localizedStringKey: String) { + public init(_ localizedStringKey: String, alignment: Tokens.TextAlignment = .leading) { self.content = [LocalizedStringKey(key: localizedStringKey)] - self.classes = ["text"] - } - - /// Creates a text. - internal init(content: [Content], classes: [String], events: [String]?, id: String?) { - - self.content = content - self.classes = classes - self.events = events - self.id = id + self.classes = ["text", "alignment:\(alignment.value)"] } public var body: Content { @@ -87,9 +78,17 @@ extension Text: PressEvent { } extension Text: TextModifier { + + public func font(_ family: Tokens.FontFamily) -> Text { + return mutate(fontfamily: family.value) + } - public func font(_ style: Tokens.TextStyle) -> Text { - return self.mutate(font: style.value) + public func textStyle(_ style: Tokens.TextStyle) -> Text { + return self.mutate(textstyle: style.value) + } + + public func textStyle(_ style: TextConfiguration) -> Text { + return self.mutate(classes: style.configuration) } public func foregroundColor(_ color: Tokens.ForegroundColor) -> Text { @@ -104,14 +103,18 @@ extension Text: TextModifier { return self.mutate(fontweight: weight.value) } - public func fontTransformation(_ transformation: Tokens.TextTransformation) -> Text { - return self.mutate(fonttransformation: transformation.value) + public func textCase(_ case: Tokens.TextCase) -> Text { + return self.mutate(textcase: `case`.value) } public func fontStyle(_ style: Tokens.FontStyle) -> Text { return self.mutate(fontstyle: style.value) } + public func textDecoration(_ decoration: Tokens.TextDecoration) -> Text { + return self.mutate(textdecoration: decoration.value) + } + public func bold() -> Text { return self.mutate(fontweight: Tokens.FontWeight.bold.value) } @@ -139,26 +142,26 @@ extension Text: TextModifier { } public func underline() -> Text { - return self.mutate(fontdecoration: Tokens.TextDecoration.underline.value) + return self.mutate(textdecoration: Tokens.TextDecoration.underline.value) } public func underline(_ condition: Bool) -> Text { if condition { - return self.mutate(fontdecoration: Tokens.TextDecoration.underline.value) + return self.mutate(textdecoration: Tokens.TextDecoration.underline.value) } return self } public func strikethrough() -> Text { - return self.mutate(fontdecoration: Tokens.TextDecoration.strikeThrough.value) + return self.mutate(textdecoration: Tokens.TextDecoration.strikeThrough.value) } public func strikethrough(_ condition: Bool) -> Text { if condition { - return self.mutate(fontdecoration: Tokens.TextDecoration.strikeThrough.value) + return self.mutate(textdecoration: Tokens.TextDecoration.strikeThrough.value) } return self @@ -216,8 +219,8 @@ extension Text: ViewModifier { return self.mutate(bordercolor: color.value) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Text { - return mutate(frame: width.value, offset: offset?.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) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Text { diff --git a/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift b/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift index 22cc4621..cef372b5 100644 --- a/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift @@ -7,11 +7,14 @@ public protocol ButtonModifier { /// Sets the size of the button. - func buttonSize(_ size: Tokens.ButtonSize) -> Self + func controlSize(_ size: Tokens.ControlSize) -> Self /// Sets the style of the button. func buttonStyle(_ style: Tokens.ButtonStyle) -> Self + /// Sets the style of the button. + func buttonStyle(_ style: ButtonConfiguration) -> Self + /// Sets the state of the view. func disabled() -> Self @@ -21,7 +24,7 @@ public protocol ButtonModifier { extension ButtonModifier where Self: Modifiable { - internal func mutate(buttonsize value: String) -> Self { + internal func mutate(controlsize value: String) -> Self { return self.mutate(class: "size:\(value)") } diff --git a/Sources/HTMLKitComponents/Modifiers/TextModifier.swift b/Sources/HTMLKitComponents/Modifiers/TextModifier.swift index 07da7563..ae215088 100644 --- a/Sources/HTMLKitComponents/Modifiers/TextModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/TextModifier.swift @@ -6,8 +6,13 @@ /// A type that describes the modifier of a text component. public protocol TextModifier { + func font(_ family: Tokens.FontFamily) -> Self + + /// Sets the style of the text. + func textStyle(_ style: Tokens.TextStyle) -> Self + /// Sets the style of the text. - func font(_ style: Tokens.TextStyle) -> Self + func textStyle(_ style: TextConfiguration) -> Self /// Sets the foreground color of the text. func foregroundColor(_ color: Tokens.ForegroundColor) -> Self @@ -19,11 +24,14 @@ public protocol TextModifier { func fontWeight(_ weight: Tokens.FontWeight) -> Self /// Sets the transformation for the text. - func fontTransformation(_ transformation: Tokens.TextTransformation) -> Self + func textCase(_ case: Tokens.TextCase) -> Self /// Sets the style of the font. func fontStyle(_ style: Tokens.FontStyle) -> Self + /// Sets the decoration for the text. + func textDecoration(_ decoration: Tokens.TextDecoration) -> Self + /// Applies a bold font weight to the text. func bold() -> Self @@ -53,12 +61,16 @@ public protocol TextModifier { extension TextModifier where Self: Modifiable { - internal func mutate(font value: String) -> Self { + internal func mutate(fontfamily value: String) -> Self { + return self.mutate(class: "font:\(value)") + } + + internal func mutate(textstyle value: String) -> Self { return self.mutate(class: "style:\(value)") } internal func mutate(foregroundcolor value: String) -> Self { - return self.mutate(class: "color:\(value)") + return self.mutate(class: "foreground:\(value)") } internal func mutate(fontsize value: String) -> Self { @@ -69,15 +81,15 @@ extension TextModifier where Self: Modifiable { return self.mutate(class: "weight:\(value)") } - internal func mutate(fonttransformation value: String) -> Self { - return self.mutate(class: "transformation:\(value)") + internal func mutate(textcase value: String) -> Self { + return self.mutate(class: "case:\(value)") } internal func mutate(fontstyle value: String) -> Self { return self.mutate(class: "style:\(value)") } - internal func mutate(fontdecoration value: String) -> Self { + internal func mutate(textdecoration value: String) -> Self { return self.mutate(class: "decoration:\(value)") } diff --git a/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift b/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift index 45058fe6..9f22a6e2 100644 --- a/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift @@ -32,7 +32,7 @@ public protocol ViewModifier { /// Sets the border color of the input func borderColor(_ color: Tokens.BorderColor) -> Self - func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset?) -> Self + func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight?, alignment: Tokens.FrameAlignment?) -> Self /// Sets the padding for the vertical box. func margin(insets: EdgeSet, length: Tokens.MarginLength) -> Self @@ -109,15 +109,19 @@ extension ViewModifier where Self: Modifiable { return self.mutate(class: "border:\(value)") } - internal func mutate(frame width: String, offset: String? = nil) -> Self { + internal func mutate(frame width: String, height: String? = nil, alignment: String? = nil) -> Self { var classes: [String] = [] - if let offset { - classes.append("offset:\(offset)") + if let height { + classes.append("height:\(height)") } - classes.append("size:\(width)") + if let alignment { + classes.append("frame-alignment:\(alignment)") + } + + classes.append("width:\(width)") return self.mutate(classes: classes) } diff --git a/Sources/HTMLKitComponents/Options.swift b/Sources/HTMLKitComponents/Options.swift index bd1cc521..5c271726 100644 --- a/Sources/HTMLKitComponents/Options.swift +++ b/Sources/HTMLKitComponents/Options.swift @@ -10,9 +10,9 @@ public struct EdgeSet: OptionSet { public static let top = EdgeSet(rawValue: 1 << 0) public static let bottom = EdgeSet(rawValue: 1 << 1) public static let leading = EdgeSet(rawValue: 1 << 2) - public static let trailing = EdgeSet(rawValue: 2 << 3) - public static let horizontal = EdgeSet(rawValue: 3 << 4) - public static let vertical = EdgeSet(rawValue: 4 << 5) + public static let trailing = EdgeSet(rawValue: 1 << 3) + public static let horizontal = EdgeSet(rawValue: 1 << 4) + public static let vertical = EdgeSet(rawValue: 1 << 5) public static let all: EdgeSet = [.top, .bottom, .leading, .trailing] diff --git a/Sources/HTMLKitComponents/Primitives/Configurations.swift b/Sources/HTMLKitComponents/Primitives/Configurations.swift new file mode 100644 index 00000000..dedc3b24 --- /dev/null +++ b/Sources/HTMLKitComponents/Primitives/Configurations.swift @@ -0,0 +1,340 @@ +public protocol ButtonConfiguration { + + var borderColor: Tokens.BorderColor? { get set } + + var borderShape: Tokens.BorderShape? { get set } + + var backgroundColor: Tokens.BackgroundColor? { get set } + + var foregroundColor: Tokens.ForegroundColor? { get set } +} + +extension ButtonConfiguration { + + internal var configuration: [String] { + + var configuration: [String] = [] + + if let borderColor = self.borderColor { + configuration.append("border:\(borderColor.value)") + } + + if let borderShape = self.borderShape { + configuration.append("shape:\(borderShape.value)") + } + + if let backgroundColor = self.backgroundColor { + configuration.append("background:\(backgroundColor.value)") + } + + if let foregroundColor = self.foregroundColor { + configuration.append("foreground:\(foregroundColor)") + } + + return configuration + } +} + +public protocol CardConfiguration { + + var borderColor: Tokens.BorderColor? { get set } + + var borderShape: Tokens.BorderShape? { get set } + + var backgroundColor: Tokens.BackgroundColor? { get set } + + var foregroundColor: Tokens.ForegroundColor? { get set } +} + +extension CardConfiguration { + + internal var configuration: [String] { + + var configuration: [String] = [] + + if let borderColor = self.borderColor { + configuration.append("border:\(borderColor.value)") + } + + if let borderShape = self.borderShape { + configuration.append("shape:\(borderShape.value)") + } + + if let backgroundColor = self.backgroundColor { + configuration.append("background:\(backgroundColor.value)") + } + + if let foregroundColor = self.foregroundColor { + configuration.append("foreground:\(foregroundColor)") + } + + return configuration + } +} + +public protocol FieldConfiguration { + + var borderColor: Tokens.BorderColor? { get set } + + var borderShape: Tokens.BorderShape? { get set } + + var backgroundColor: Tokens.BackgroundColor? { get set } + + var foregroundColor: Tokens.ForegroundColor? { get set } + + var focusColor: Tokens.FocusColor? { get set } +} + +extension FieldConfiguration { + + internal var configuration: [String] { + + var configuration: [String] = [] + + if let borderColor = self.borderColor { + configuration.append("border:\(borderColor.value)") + } + + if let borderShape = self.borderShape { + configuration.append("shape:\(borderShape.value)") + } + + if let backgroundColor = self.backgroundColor { + configuration.append("background:\(backgroundColor.value)") + } + + if let foregroundColor = self.foregroundColor { + configuration.append("foreground:\(foregroundColor)") + } + + if let focusColor = self.focusColor { + configuration.append("focus:\(focusColor)") + } + + return configuration + } +} + +public protocol TextConfiguration { + + var fontFamily: Tokens.FontFamily? { get set } + + var fontSize: Tokens.FontSize? { get set } + + var fontWeight: Tokens.FontWeight? { get set } + + var foregroundColor: Tokens.ForegroundColor? { get set } +} + + +extension TextConfiguration { + + internal var configuration: [String] { + + var configuration: [String] = [] + + if let fontFamily = self.fontFamily { + configuration.append("font:\(fontFamily.value)") + } + + if let fontSize = self.fontSize { + configuration.append("size:\(fontSize.value)") + } + + if let fontWeight = self.fontWeight { + configuration.append("weight:\(fontWeight.value)") + } + + if let foregroundColor = self.foregroundColor { + configuration.append("foreground:\(foregroundColor.value)") + } + + return configuration + } +} + +public protocol ModalConfiguration { + + var borderColor: Tokens.BorderColor? { get set } + + var borderShape: Tokens.BorderShape? { get set } + + var backgroundColor: Tokens.BackgroundColor? { get set } +} + +extension ModalConfiguration { + + internal var configuration: [String] { + + var configuration: [String] = [] + + if let borderColor = self.borderColor { + configuration.append("border:\(borderColor.value)") + } + + if let borderShape = self.borderShape { + configuration.append("shape:\(borderShape.value)") + } + + if let backgroundColor = self.backgroundColor { + configuration.append("background:\(backgroundColor.value)") + } + + return configuration + } +} + +public protocol ImageConfiguration { + + var borderColor: Tokens.BorderColor? { get set } + + var borderShape: Tokens.BorderShape? { get set } + + var backgroundColor: Tokens.BackgroundColor? { get set } +} + +extension ImageConfiguration { + + internal var configuration: [String] { + + var configuration: [String] = [] + + if let borderColor = self.borderColor { + configuration.append("border:\(borderColor.value)") + } + + if let borderShape = self.borderShape { + configuration.append("shape:\(borderShape.value)") + } + + if let backgroundColor = self.backgroundColor { + configuration.append("background:\(backgroundColor.value)") + } + + return configuration + } +} + +public protocol SnippetConfiguration { + + var borderColor: Tokens.BorderColor? { get set } + + var borderShape: Tokens.BorderShape? { get set } + + var backgroundColor: Tokens.BackgroundColor? { get set } +} + +extension SnippetConfiguration { + + internal var configuration: [String] { + + var configuration: [String] = [] + + if let borderColor = self.borderColor { + configuration.append("border:\(borderColor.value)") + } + + if let borderShape = self.borderShape { + configuration.append("shape:\(borderShape.value)") + } + + if let backgroundColor = self.backgroundColor { + configuration.append("background:\(backgroundColor.value)") + } + + return configuration + } +} + +public protocol CarouselConfiguration { + + var borderColor: Tokens.BorderColor? { get set } + + var borderShape: Tokens.BorderShape? { get set } + + var backgroundColor: Tokens.BackgroundColor? { get set } +} + +extension CarouselConfiguration { + + internal var configuration: [String] { + + var configuration: [String] = [] + + if let borderColor = self.borderColor { + configuration.append("border:\(borderColor.value)") + } + + if let borderShape = self.borderShape { + configuration.append("shape:\(borderShape.value)") + } + + if let backgroundColor = self.backgroundColor { + configuration.append("background:\(backgroundColor.value)") + } + + return configuration + } +} + +public protocol NavigationConfiguration { + + var borderColor: Tokens.BorderColor? { get set } + + var borderShape: Tokens.BorderShape? { get set } + + var backgroundColor: Tokens.BackgroundColor? { get set } +} + +extension NavigationConfiguration { + + internal var configuration: [String] { + + var configuration: [String] = [] + + if let borderColor = self.borderColor { + configuration.append("border:\(borderColor.value)") + } + + if let borderShape = self.borderShape { + configuration.append("shape:\(borderShape.value)") + } + + if let backgroundColor = self.backgroundColor { + configuration.append("background:\(backgroundColor.value)") + } + + return configuration + } +} + +public protocol ListConfiguration { + + var borderColor: Tokens.BorderColor? { get set } + + var borderShape: Tokens.BorderShape? { get set } + + var backgroundColor: Tokens.BackgroundColor? { get set } +} + +extension ListConfiguration { + + internal var configuration: [String] { + + var configuration: [String] = [] + + if let borderColor = self.borderColor { + configuration.append("border:\(borderColor.value)") + } + + if let borderShape = self.borderShape { + configuration.append("shape:\(borderShape.value)") + } + + if let backgroundColor = self.backgroundColor { + configuration.append("background:\(backgroundColor.value)") + } + + return configuration + } +} diff --git a/Sources/HTMLKitComponents/Primitives/DynamicType.swift b/Sources/HTMLKitComponents/Primitives/DynamicType.swift index 58f38d97..dadd7cd2 100644 --- a/Sources/HTMLKitComponents/Primitives/DynamicType.swift +++ b/Sources/HTMLKitComponents/Primitives/DynamicType.swift @@ -1,10 +1,3 @@ -// -// File.swift -// -// -// Created by Mattes Mohr on 15.07.23. -// - import HTMLKit public enum DynamicType { diff --git a/Sources/HTMLKitComponents/Properties/Identifiable.swift b/Sources/HTMLKitComponents/Properties/Identifiable.swift index c69f1a9c..e8fb92a1 100644 --- a/Sources/HTMLKitComponents/Properties/Identifiable.swift +++ b/Sources/HTMLKitComponents/Properties/Identifiable.swift @@ -1,4 +1,3 @@ - /// A type that describes a component with an identifier. public protocol Identifiable { diff --git a/Sources/HTMLKitComponents/Properties/Modifiable.swift b/Sources/HTMLKitComponents/Properties/Modifiable.swift index 67d57fc3..01d9c90d 100644 --- a/Sources/HTMLKitComponents/Properties/Modifiable.swift +++ b/Sources/HTMLKitComponents/Properties/Modifiable.swift @@ -1,4 +1,3 @@ - /// A type that describes a component with classes. internal protocol Modifiable { diff --git a/Sources/HTMLKitComponents/Resources/css/buttons/button.css b/Sources/HTMLKitComponents/Resources/css/buttons/button.css index 79c465b7..d4f1d25f 100644 --- a/Sources/HTMLKitComponents/Resources/css/buttons/button.css +++ b/Sources/HTMLKitComponents/Resources/css/buttons/button.css @@ -29,11 +29,11 @@ --fontWeight: 400; --lineHeight: 1.5; --borderWidth: 1px; - --borderColor: 210, 9%, 31%; + --borderColor: var(--systemBorderColor); --borderRadius: 0; --borderOpacity: 1.0; - --foregroundColor: 0, 0%, 100%; - --backgroundColor: 210, 11%, 15%; + --foregroundColor: var(--systemTextColor); + --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; position: relative; @@ -68,21 +68,15 @@ } .button.style\:primary { - --foregroundColor: var(--whiteColor); - --backgroundColor: var(--primaryColor); - --borderColor: var(--primaryColor); -} - -.button.style\:secondary { - --foregroundColor: var(--whiteColor); - --backgroundColor: var(--secondaryColor); - --borderColor: var(--secondaryColor); + --foregroundColor: var(--whiteColor) !important; + --backgroundColor: var(--accentColor) !important; + --borderColor: var(--accentColor) !important; } .button.style\:outline { - --foregroundColor: var(--secondaryColor); - --backgroundOpacity: 0.0; - --borderColor: var(--secondaryColor); + --foregroundColor: var(--systemTextColor) !important; + --backgroundOpacity: 0.0 !important; + --borderColor: var(--systemBorderColor) !important; } .button.size\:full { @@ -101,16 +95,6 @@ --inlineSize: 25%; } -.button > .symbol + .text { - margin-inline-start: 0.938em; -} - -.button > .text + .symbol { - margin-inline-start: 0.938em; -} - -.scheme\:dark .button, .button.scheme\:dark { - --foregroundColor: 0, 0%, 100%; - --borderColor: 210, 9%, 31%; - --backgroundColor: 210, 11%, 15%; +.button > .symbol { + height: 24px; /* temporary fix */ } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css b/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css index ccb64623..cba3615d 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css @@ -16,6 +16,14 @@ --paddingBlockEnd: 0.5rem; --paddingInlineStart: 1.0rem; --paddingInlineEnd: 1.0rem; + --foregroundColor: var(--systemTextColor); + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderOpacity: 1.0; + --borderRadius: 0; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; position: relative; display: flex; @@ -28,14 +36,6 @@ } .checkinput { - --borderWidth: 1px; - --borderColor: 210, 14%, 89%; - --borderOpacity: 1.0; - --controlColor: 0, 0%, 0%; - --focusColor: 210, 100%, 50%; - --backgroundColor: 0, 0%, 100%; - --backgroundOpacity: 1.0; - position: relative; display: inline-grid; place-content: center; @@ -46,12 +46,17 @@ 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)); -webkit-appearance: none; -moz-appearance: none; appearance: none; } +.checkinput:checked { + --backgroundColor: var(--accentColor) !important; +} + .checkinput:focus { --borderColor: var(--focusColor) !important; @@ -63,7 +68,8 @@ content: ""; block-size: 0.625rem; inline-size: 0.625rem; - background-color: hsla(var(--controlColor), 1.0); + border-radius: 1px; + background-color: hsla(var(--whiteColor), 1.0); transform: scale(0); } @@ -73,12 +79,6 @@ .checkinput + label { font-family: system-ui; + color: hsla(var(--foregroundColor), 1.0); margin-inline-start: 1.25rem; } - -.scheme\:dark .checkfield, .checkfield.scheme\:dark { - --borderColor: 210, 9%, 31%; - --backgroundColor: 210, 11%, 15%; - --controlColor: 0, 0%, 100%; - --focusColor: 210, 100%, 50%; -} diff --git a/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css b/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css index 75654d22..543ed139 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css @@ -29,16 +29,18 @@ --fontSize: 1.0rem; --fontWeight: normal; --lineHeight: 1.5; - --foregroundColor: 0, 0%, 0%; + --foregroundColor: var(--systemTextColor); --borderWidth: 1px; - --borderColor: 210, 14%, 89%; + --borderColor: var(--systemBorderColor); --borderRadius: 0; --borderOpacity: 1.0; - --focusColor: 210, 100%, 50%; - --backgroundColor: 0, 0%, 100%; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; position: relative; + display: block; + inline-size: 100%; } .datepicker-datefield { @@ -80,9 +82,10 @@ .datepicker-calendar { position: absolute; z-index: 1; - display: none; + display: block; width: 100%; margin-block: 0.75rem; + padding: 0.5rem; font-family: system-ui; font-size: var(--fontSize); font-weight: var(--fontWeight); @@ -91,7 +94,15 @@ border-width: var(--borderWidth); border-style: solid; border-color: hsla(var(--borderColor), 1.0); + border-radius: var(--borderRadius); background-color: hsla(var(--backgroundColor), 1.0); + visibility: hidden; + overflow: hidden; +} + +.datepicker-calendar.position\:bottom { + bottom: 0; + margin-block: 3.375rem !important; } .calendar-navigation { @@ -103,7 +114,6 @@ padding-inline-start: var(--paddingInlineStart); padding-inline-end: var(--paddingInlineEnd); list-style-type: none; - } .calendar-navigation button { @@ -113,16 +123,16 @@ font-size: var(--fontSize); font-weight: var(--fontWeight); line-height: var(--lineHeight); - color: var(--foregroundColor); + color: hsla(var(--foregroundColor), 1.0); border: none; background-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; + cursor: pointer; } .calendar-navigation button > svg { - width: 1rem; height: 1rem; pointer-events: none; @@ -139,9 +149,8 @@ .calendar-week > li { padding: 0.5rem; - color: var(--primaryColor); + font-weight: bold; text-align: center; - text-decoration: uppercase; } .calendar-days { @@ -160,14 +169,6 @@ } .calendar-days > li:hover:has(time) { - color: var(--whiteColor); - background-color: var(--primaryColor); -} - - -.scheme\:dark .datepicker, .datepicker.scheme\:dark { - --foregroundColor: 0, 0%, 100%; - --borderColor: 210, 9%, 31%; - --focusColor: 210, 100%, 50%; - --backgroundColor: 210, 11%, 15%; + border-radius: var(--borderRadius); + background-color: hsla(var(--borderColor), 0.5); } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/filedialog.css b/Sources/HTMLKitComponents/Resources/css/forms/filedialog.css index 60429176..36c3e529 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/filedialog.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/filedialog.css @@ -29,13 +29,13 @@ --fontSize: 1.0rem; --fontWeight: 400; --lineHeight: 1.5; - --foregroundColor: 0, 0%, 0%; + --foregroundColor: var(--systemTextColor); --borderWidth: 1px; - --borderColor: 210, 14%, 89%; + --borderColor: var(--systemBorderColor); --borderRadius: 0; --borderOpacity: 1.0; - --focusColor: 210, 100%, 50%; - --backgroundColor: 0, 0%, 100%; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; position: relative; diff --git a/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css b/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css index c3299b29..878b5da5 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css @@ -18,6 +18,13 @@ --paddingBlockEnd: 0.5rem; --paddingInlineStart: 1.0rem; --paddingInlineEnd: 1.0rem; + --foregroundColor: var(--systemTextColor); + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderOpacity: 1.0; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; position: relative; display: flex; @@ -30,14 +37,6 @@ } .radioinput { - --borderWidth: 1px; - --borderColor: 210, 14%, 89%; - --borderOpacity: 1.0; - --controlColor: 0, 0%, 0%; - --focusColor: 210, 100%, 50%; - --backgroundColor: 0, 0%, 100%; - --backgroundOpacity: 1.0; - position: relative; display: inline-grid; place-content: center; @@ -55,6 +54,10 @@ appearance: none; } +.radioinput:checked { + --backgroundColor: var(--accentColor) !important; +} + .radioinput:focus { --borderColor: var(--focusColor) !important; @@ -67,7 +70,7 @@ block-size: 0.625rem; inline-size: 0.625rem; border-radius: 50%; - background-color: hsla(var(--controlColor), 1.0); + background-color: hsla(var(--whiteColor), 1.0); transform: scale(0); } @@ -77,12 +80,6 @@ .radioinput + label { font-family: system-ui; + color: hsla(var(--foregroundColor), 1.0); margin-inline-start: 1.25rem; } - -.scheme\:dark .radioselect, .radioselect.scheme\:dark { - --borderColor: 210, 9%, 31%; - --controlColor: 0, 0%, 100%; - --focusColor: 210, 100%, 50%; - --backgroundColor: 210, 11%, 15%; -} diff --git a/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css b/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css index 283ecbd5..927c77ee 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css @@ -29,13 +29,13 @@ --fontSize: 1.0rem; --fontWeight: 400; --lineHeight: 1.5; - --foregroundColor: 0, 0%, 0%; + --foregroundColor: var(--systemTextColor); --borderWidth: 1px; - --borderColor: 210, 14%, 89%; + --borderColor: var(--systemBorderColor); --borderRadius: 0; --borderOpacity: 1.0; - --focusColor: 210, 100%, 50%; - --backgroundColor: 0, 0%, 100%; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; display: block; @@ -68,10 +68,3 @@ .searchfield:invalid { --borderColor: var(--redColor); } - -.scheme\:dark .searchfield, .searchfield.scheme\:dark { - --foregroundColor: 0, 0%, 100%; - --borderColor: 210, 9%, 31%; - --focusColor: 210, 100%, 50%; - --backgroundColor: 210, 11%, 15%; -} diff --git a/Sources/HTMLKitComponents/Resources/css/forms/securefield.css b/Sources/HTMLKitComponents/Resources/css/forms/securefield.css index f9e80ca0..9cb75446 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/securefield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/securefield.css @@ -29,13 +29,13 @@ --fontSize: 1.0rem; --fontWeight: normal; --lineHeight: 1.5; - --foregroundColor: 0, 0%, 0%; + --foregroundColor: var(--systemTextColor); --borderWidth: 1px; - --borderColor: 210, 14%, 89%; + --borderColor: var(--systemBorderColor); --borderRadius: 0; --borderOpacity: 1.0; - --focusColor: 210, 100%, 50%; - --backgroundColor: 0, 0%, 100%; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; display: block; @@ -68,10 +68,3 @@ .securefield:invalid { --borderColor: var(--redColor); } - -.scheme\:dark .securefield, .securefield.scheme\:dark { - --foregroundColor: 0, 0%, 100%; - --borderColor: 210, 9%, 31%; - --focusColor: 210, 100%, 50%; - --backgroundColor: 210, 11%, 15%; -} diff --git a/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css b/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css index f08b7856..85d66d54 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css @@ -29,13 +29,13 @@ --fontSize: 1.0rem; --fontWeight: 400; --lineHeight: 1.5; - --foregroundColor: 0, 0%, 0%; + --foregroundColor: var(--systemTextColor); --borderWidth: 1px; - --borderColor: 210, 14%, 89%; + --borderColor: var(--systemBorderColor); --borderRadius: 0; --borderOpacity: 1.0; - --focusColor: 210, 100%, 50%; - --backgroundColor: 0, 0%, 100%; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; position: relative; @@ -78,19 +78,24 @@ .selectfield-optionlist { position: absolute; z-index: 1; - display: none; + display: block; width: 100%; margin-block: 0.75rem; + color: hsla(var(--foregroundColor), 1.0); border-width: var(--borderWidth); border-style: solid; border-color: hsla(var(--borderColor), 1.0); + border-radius: var(--borderRadius); background-color: hsla(var(--backgroundColor), 1.0); list-style-type: none; + visibility: hidden; +} + +.selectfield-optionlist.position\:bottom { + bottom: 0; + margin-block: 3.375rem !important; } -.scheme\:dark .selectfield, .selectfield.scheme\:dark { - --foregroundColor: 0, 0%, 100%; - --borderColor: 210, 9%, 31%; - --focusColor: 210, 100%, 50%; - --backgroundColor: 210, 11%, 15%; +.selectfield-optionlist > .radioselect:hover, .selectfield-optionlist > .checkfield:hover { + background-color: hsla(var(--borderColor), 0.5); } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/slider.css b/Sources/HTMLKitComponents/Resources/css/forms/slider.css index e82019f3..ec4a6e9e 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/slider.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/slider.css @@ -15,11 +15,11 @@ .slider { --borderWidth: 1px; - --borderColor: 210, 14%, 89%; + --borderColor: var(--systemBorderColor); --borderOpacity: 1.0; --controlColor: 0, 0%, 0%; - --focusColor: 210, 100%, 50%; - --backgroundColor: 0, 0%, 100%; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; display: block; @@ -63,8 +63,5 @@ } .scheme\:dark .slider, .slider.scheme\:dark { - --borderColor: 210, 9%, 31%; --controlColor: 0, 0%, 100%; - --focusColor: 210, 100%, 50%; - --backgroundColor: 210, 11%, 15%; } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css b/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css index fc3cbc64..3825c8b9 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css @@ -29,13 +29,13 @@ --fontSize: 1.0rem; --fontWeight: 400; --lineHeight: 1.5; - --foregroundColor: 0, 0%, 0%; + --foregroundColor: var(--systemTextColor); --borderWidth: 1px; - --borderColor: 210, 14%, 89%; + --borderColor: var(--systemBorderColor); --borderRadius: 0; --borderOpacity: 1.0; - --focusColor: 210, 100%, 50%; - --backgroundColor: 0, 0%, 100%; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; display: block; @@ -69,10 +69,3 @@ .texteditor:invalid { --borderColor: var(--redColor); } - -.scheme\:dark .texteditor, .texteditor.scheme\:dark { - --foregroundColor: 0, 0%, 100%; - --borderColor: 210, 9%, 31%; - --focusColor: 210, 100%, 50%; - --backgroundColor: 210, 11%, 15%; -} diff --git a/Sources/HTMLKitComponents/Resources/css/forms/textfield.css b/Sources/HTMLKitComponents/Resources/css/forms/textfield.css index d690136d..0cfdb95c 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/textfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/textfield.css @@ -29,13 +29,13 @@ --fontSize: 1.0rem; --fontWeight: 400; --lineHeight: 1.5; - --foregroundColor: 0, 0%, 0%; + --foregroundColor: var(--systemTextColor); --borderWidth: 1px; - --borderColor: 210, 14%, 89%; + --borderColor: var(--systemBorderColor); --borderRadius: 0; --borderOpacity: 1.0; - --focusColor: 210, 100%, 50%; - --backgroundColor: 0, 0%, 100%; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; display: block; @@ -68,10 +68,3 @@ .textfield:invalid { --borderColor: var(--redColor); } - -.scheme\:dark .textfield, .textfield.scheme\:dark { - --foregroundColor: 0, 0%, 100%; - --borderColor: 210, 9%, 31%; - --focusColor: 210, 9%, 31%; - --backgroundColor: 210, 11%, 15%; -} diff --git a/Sources/HTMLKitComponents/Resources/css/forms/textpad.css b/Sources/HTMLKitComponents/Resources/css/forms/textpad.css index df1f989c..7474a424 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/textpad.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/textpad.css @@ -29,13 +29,13 @@ --fontSize: 1.0rem; --fontWeight: 400; --lineHeight: 1.5; - --foregroundColor: 0, 0%, 0%; + --foregroundColor: var(--systemTextColor); --borderWidth: 1px; - --borderColor: 210, 14%, 89%; + --borderColor: var(--systemBorderColor); --borderRadius: 0; --borderOpacity: 1.0; - --focusColor: 210, 100%, 50%; - --backgroundColor: 0, 0%, 100%; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; display: flex; @@ -98,10 +98,3 @@ background-color: transparent; resize: none; } - -.scheme\:dark .textpad, .textpad.scheme\:dark { - --foregroundColor: 0, 0%, 100%; - --borderColor: 210, 9%, 31%; - --focusColor: 210, 100%, 50%; - --backgroundColor: 210, 11%, 15%; -} diff --git a/Sources/HTMLKitComponents/Resources/css/globals.css b/Sources/HTMLKitComponents/Resources/css/globals.css index c3231413..a039b486 100644 --- a/Sources/HTMLKitComponents/Resources/css/globals.css +++ b/Sources/HTMLKitComponents/Resources/css/globals.css @@ -6,7 +6,7 @@ font family: system-ui...; (font-stack) */ - --fontFamily: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --fontFamily: system-ui, sans-serif; /* The variables for the colors. @@ -27,8 +27,7 @@ yellow color: #F7D070 gray color: #9E9E9E silver color: #F7F7F7 - primary color: #007FFF - secondary color: #132F4E + accent color: #007FFF */ --redColor: 0, 64%, 55%; @@ -47,8 +46,11 @@ --grayColor: 0, 0%, 62%; --blackColor: 0, 0%, 0%; --whiteColor: 0, 0%, 100%; - --primaryColor: 210, 100%, 50%; - --secondaryColor: 211, 60%, 19%; + --accentColor: 210, 100%, 50%; + --systemBackgroundColor: 0, 0%, 100%; + --systemBorderColor: 210, 14%, 89%; + --systemTextColor: 0, 0%, 0%; + --systemFocusColor: 210, 100%, 50%; } /* @@ -78,13 +80,12 @@ yellow color: #F7D070 gray color: #9E9E9E silver color: #F7F7F7 - primary color: #007FFF - secondary color: #132F4E + accent color: #007FFF */ --redColor: 0, 74%, 45%; --orangeColor: 22, 88%, 45%; - --yellowColor: 3, 99%, 60%; + --yellowColor: 43, 99%, 60%; --greenColor: 123, 45%, 41%; --mintColor: 124, 73%, 64%; --tealColor: 160, 61%, 39%,; @@ -98,8 +99,15 @@ --grayColor: 25, 4%, 47%; --blackColor: 30, 7%, 23%; --whiteColor: 0, 0%, 100%; - --primaryColor: 210, 100%, 50%; - --secondaryColor: 211, 60%, 19%; + --accentColor: 210, 100%, 50%; + --systemBackgroundColor: 210, 11%, 15%; + --systemBorderColor: 210, 9%, 31%; + --systemTextColor: 0, 0%, 100%; + --systemFocusColor: 210, 100%, 50%; +} + +* { + font: inherit; } *, @@ -189,8 +197,9 @@ video { */ .state\:active { - --borderColor: var(--primaryColor) !important; - --backgroundColor: var(--primaryColor) !important; + --borderColor: var(--accentColor) !important; + --backgroundColor: var(--accentColor) !important; + --foregroundColor: var(--whiteColor) !important; } .state\:disabled { @@ -198,90 +207,89 @@ video { } .state\:hidden { - display: none !important; + visibility: hidden !important; } .state\:visible { - display: block !important; + visibility: visible !important; } /* foreground */ -.color\:black { +.foreground\:black { --foregroundColor: var(--blackColor) !important; } -.color\:blue { +.foreground\:blue { --foregroundColor: var(--blueColor) !important; } -.color\:brown { +.foreground\:brown { --foregroundColor: var(--brownColor) !important; } -.color\:cyan { +.foreground\:cyan { --foregroundColor: var(--cyanColor) !important; } -.color\:gray { +.foreground\:gray { --foregroundColor: var(--grayColor) !important; } -.color\:green { +.foreground\:green { --foregroundColor: var(--greenColor) !important; } -.color\:indigo { +.foreground\:indigo { --foregroundColor: var(--indigoColor) !important; } -.color\:mint { +.foreground\:mint { --foregroundColor: var(--mintColor) !important; } -.color\:orange { +.foreground\:orange { --foregroundColor: var(--orangeColor) !important; } -.color\:pink { +.foreground\:pink { --foregroundColor: var(--pinkColor) !important; } -.color\:purple { +.foreground\:purple { --foregroundColor: var(--purpleColor) !important; } -.color\:red { +.foreground\:red { --foregroundColor: var(--redColor) !important; } -.color\:teal { +.foreground\:teal { --foregroundColor: var(--tealColor) !important; } -.color\:white { +.foreground\:white { --foregroundColor: var(--whiteColor) !important; } -.color\:yellow { +.foreground\:yellow { --foregroundColor: var(--yellowColor) !important; } -.color\:silver { +.foreground\:silver { --foregroundColor: var(--silverColor) !important; } -.color\:primary { - --foregroundColor: var(--primaryColor) !important; +.foreground\:accent { + --foregroundColor: var(--accentColor) !important; } -.color\:secondary { - --foregroundColor: var(--secondaryColor) !important; +.foreground\:system { + --foregroundColor: var(--systemTextColor) !important; } - /* borders */ @@ -382,15 +390,15 @@ video { --borderOpacity: 1.0 !important; } -.border\:primary { +.border\:accent { --borderWidth: 1px !important; - --borderColor: var(--primaryColor) !important; + --borderColor: var(--accentColor) !important; --borderOpacity: 1.0 !important; } -.border\:secondary { +.border\:system { --borderWidth: 1px !important; - --borderColor: var(--secondaryColor) !important; + --borderColor: var(--systemBorderColor) !important; --borderOpacity: 1.0 !important; } @@ -482,13 +490,13 @@ video { --backgroundOpacity: 1.0 !important; } -.background\:primary { - --backgroundColor: var(--primaryColor) !important; +.background\:accent { + --backgroundColor: var(--accentColor) !important; --backgroundOpacity: 1.0 !important; } -.background\:secondary { - --backgroundColor: var(--secondaryColor) !important; +.background\:system { + --backgroundColor: var(--systemBackgroundColor) !important; --backgroundOpacity: 1.0 !important; } @@ -564,12 +572,12 @@ video { --focusColor: var(--silverColor) !important; } -.focus\:primary { - --focusColor: var(--primaryColor) !important; +.focus\:accent { + --focusColor: var(--accentColor) !important; } -.focus\:secondary { - --focusColor: var(--secondaryColor) !important; +.focus\:system { + --focusColor: var(--systemFocusColor) !important; } /* @@ -679,6 +687,11 @@ video { margin */ +.margin\:auto { + margin-inline: auto !important; + margin-block: auto !important; +} + .margin\:large { margin-inline: 2.25rem !important; margin-block: 2.25rem !important; @@ -694,6 +707,11 @@ video { margin-block: 1rem !important; } +.margin-inline\:auto { + margin-inline-start: auto !important; + margin-inline-end: auto !important; +} + .margin-inline\:large { margin-inline-start: 2.25rem !important; margin-inline-end: 2.25rem !important; @@ -709,6 +727,11 @@ video { margin-inline-end: 1rem !important; } +.margin-block\:auto { + margin-block-start: auto !important; + margin-block-end: auto !important; +} + .margin-block\:large { margin-block-start: 2.25rem !important; margin-block-end: 2.25rem !important; @@ -724,6 +747,10 @@ video { margin-block-end: 1rem !important; } +.margin-top\:auto { + margin-block-start: auto !important; +} + .margin-top\:large { margin-block-start: 2.25rem !important; } @@ -736,6 +763,10 @@ video { margin-block-start: 1rem !important; } +.margin-bottom\:auto { + margin-block-end: auto !important; +} + .margin-bottom\:large { margin-block-end: 2.25rem !important; } @@ -748,6 +779,10 @@ video { margin-block-end: 1rem !important; } +.margin-leading\:auto { + margin-inline-start: auto !important; +} + .margin-leading\:large { margin-inline-start: 2.25rem !important; } @@ -760,8 +795,12 @@ video { margin-inline-start: 1rem !important; } +.margin-trailing\:auto { + margin-inline-end: auto !important; +} + .margin-trailing\:large { - margin-inline-end 2.25rem !important; + margin-inline-end: 2.25rem !important; } .margin-trailing\:medium { @@ -792,134 +831,108 @@ video { sizes */ -.size\:one { +.width\:one { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 8.3333333333%; } -.size\:two { +.width\:two { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 16.6666666667%; } -.size\:three { +.width\:three { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 25%; } -.size\:four { +.width\:four { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 33.3333333333%; } -.size\:five { +.width\:five { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 41.6666666667%; } -.size\:six { +.width\:six { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 50%; } -.size\:seven { +.width\:seven { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 58.3333333333%; } -.size\:eight { +.width\:eight { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 66.6666666667%; } -.size\:nine { +.width\:nine { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 75%; } -.size\:ten { +.width\:ten { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 83.3333333333%; } -.size\:eleven { +.width\:eleven { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 91.6666666667%; } -.size\:twelve { +.width\:twelve { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 100%; } -/* - offset - */ - -.offset\:one { - margin-inline-start: 8.3333333333%; -} - -.offset\:two { - margin-inline-start: 16.6666666667%; -} - -.offset\:three { - margin-inline-start: 25%; -} - -.offset\:four { - margin-inline-start: 33.3333333333%; -} - -.offset\:five { - margin-inline-start: 41.6666666667%; -} - -.offset\:six { - margin-inline-start: 50%; -} - -.offset\:seven { - margin-inline-start: 58.3333333333%; -} - -.offset\:eight { - margin-inline-start: 66.6666666667%; +.width\:minimum { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: auto; } -.offset\:nine { - margin-inline-start: 75%; +.width\:maximum { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: max-content; } -.offset\:ten { - margin-inline-start: 83.3333333333%; +.height\:minimum { + height: auto; } -.offset\:eleven { - margin-inline-start: 91.6666666667%; +.height\:maximum { + height: max-content; } diff --git a/Sources/HTMLKitComponents/Resources/css/helpers/grouping.css b/Sources/HTMLKitComponents/Resources/css/helpers/grouping.css index 729a244f..0a253367 100644 --- a/Sources/HTMLKitComponents/Resources/css/helpers/grouping.css +++ b/Sources/HTMLKitComponents/Resources/css/helpers/grouping.css @@ -7,3 +7,25 @@ flex-direction: row; align-items: center; } + +.grouping > .button:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0; +} + +.grouping > .button:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left: 0; +} + +.grouping:has(.image) { + flex-direction: row-reverse; + justify-content: start; +} + +.grouping > .image:not(:first-child) { + margin-right: -10%; +} + diff --git a/Sources/HTMLKitComponents/Resources/css/layout/grid.css b/Sources/HTMLKitComponents/Resources/css/layout/grid.css index fa9b0778..97fbbaf8 100644 --- a/Sources/HTMLKitComponents/Resources/css/layout/grid.css +++ b/Sources/HTMLKitComponents/Resources/css/layout/grid.css @@ -40,50 +40,66 @@ grid-template-columns: repeat(5, minmax(0, 1fr)); } -.grid.ratio\:six { +.grid.ratio\:sixth { grid-template-columns: repeat(6, minmax(0, 1fr)); } -.grid.alignment\:top { - align-items: start; +.grid.vertical-spacing\:around { + align-content: space-around; } -.grid.alignment\:center { - align-items: center; +.grid.vertical-spacing\:between { + align-content: space-between; } -.grid.alignment\:bottom { - align-items: end; +.grid.vertical-spacing\:evenly { + align-content: space-evenly; } -.grid.alignment\:baseline { - align-items: baseline; +.grid.vertical-spacing\:large { + row-gap: 2.25rem; } -.grid.space\:around { +.grid.vertical-spacing\:medium { + row-gap: 1.5rem; +} + +.grid.vertical-spacing\:small { + row-gap: 1rem; +} + +.grid.horizontal-spacing\:around { justify-content: space-around; } -.grid.space\:between { +.grid.horizontal-spacing\:between { justify-content: space-between; } -.grid.space\:evenly { +.grid.horizontal-spacing\:evenly { justify-content: space-evenly; } -.grid.space\:center { - justify-content: center; +.grid.horizontal-spacing\:large { + column-gap: 2.25rem; +} + +.grid.horizontal-spacing\:medium { + column-gap: 1.5rem; +} + +.grid.horizontal-spacing\:small { + column-gap: 1rem; } -.grid.space\:large { - gap: 2.25rem; +.grid > .frame-alignment\:leading { + align-self: start; } -.grid.space\:medium { - gap: 1.5rem; +.grid > .frame-alignment\:center { + align-self: center; } -.grid.space\:small { - gap: 1rem; +.grid > .frame-alignment\:trailing { + align-self: end; } diff --git a/Sources/HTMLKitComponents/Resources/css/layout/list.css b/Sources/HTMLKitComponents/Resources/css/layout/list.css index c299dd03..d12fdae2 100644 --- a/Sources/HTMLKitComponents/Resources/css/layout/list.css +++ b/Sources/HTMLKitComponents/Resources/css/layout/list.css @@ -7,6 +7,9 @@ --paddingBlockEnd: 0; --paddingInlineStart: 0; --paddingInlineEnd: 0; + --foregroundColor: var(--systemTextColor); + --borderColor: var(--systemBorderColor); + --borderOpacity: 1.0; --backgroundColor: 0, 0%, 0%; --backgroundOpacity: 0.0; @@ -35,7 +38,6 @@ --paddingInlineStart: 0; --paddingInlineEnd: 0; - inline-size: 100%; padding-block-start: var(--paddingBlockStart); padding-block-end: var(--paddingBlockEnd); padding-inline-start: var(--paddingInlineStart); @@ -45,11 +47,11 @@ .list.direction\:horizontal.style\:listgroup > .list-row:is(:not(:last-child)) { border-right: 1px; border-right-style: solid; - border-right-color: hsla(210, 14%, 89%, 1.0); + border-right-color: hsla(var(--borderColor), var(--borderOpacity)); } .list.direction\:vertical.style\:listgroup > .list-row:is(:not(:last-child)) { border-bottom: 1px; border-bottom-style: solid; - border-bottom-color: hsla(210, 14%, 89%, 1.0); + border-bottom-color: hsla(var(--borderColor), var(--borderOpacity)); } diff --git a/Sources/HTMLKitComponents/Resources/css/layout/stack.css b/Sources/HTMLKitComponents/Resources/css/layout/stack.css index 4a7e32e1..448e094d 100644 --- a/Sources/HTMLKitComponents/Resources/css/layout/stack.css +++ b/Sources/HTMLKitComponents/Resources/css/layout/stack.css @@ -22,47 +22,68 @@ background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); } -.hstack.alignment\:top { +.hstack.vertical-alignment\:top { align-items: flex-start; } -.hstack.alignment\:center { +.hstack.vertical-alignment\:center { align-items: center; } -.hstack.alignment\:bottom { +.hstack.vertical-alignment\:bottom { align-items: flex-end; } -.hstack.alignment\:baseline { +.hstack.vertical-alignment\:baseline { align-items: baseline; } -.hstack.space\:around { +.hstack.horizontal-alignment\:leading { + margin-inline-end: auto !important; +} + +.hstack.horizontal-alignment\:center { + margin-inline-start: auto !important; + margin-inline-end: auto !important; +} + +.hstack.horizontal-alignment\:trailing { + margin-inline-start: auto !important; +} + +.hstack > .frame-alignment\:leading { + align-self: flex-start; +} + +.hstack > .frame-alignment\:center { + align-self: center; +} + +.hstack > .frame-alignment\:trailing { + align-self: flex-end; +} + +.hstack.spacing\:around { justify-content: space-around; } -.hstack.space\:between { +.hstack.spacing\:between { justify-content: space-between; } -.hstack.space\:evenly { +.hstack.spacing\:evenly { justify-content: space-evenly; } -.hstack.space\:center { - justify-content: center; -} - -.hstack.space\:large { +.hstack.spacing\:large { gap: 2.25rem; } -.hstack.space\:medium { +.hstack.spacing\:medium { gap: 1.5rem; } -.hstack.space\:small { +.hstack.spacing\:small { gap: 1rem; } @@ -89,43 +110,51 @@ background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); } -.vstack.alignment\:leading { +.vstack.horizontal-alignment\:leading { align-items: flex-start; } -.vstack.alignment\:center { +.vstack.horizontal-alignment\:center { align-items: center; } -.vstack.alignment\:trailing { +.vstack.horizontal-alignment\:trailing { align-items: flex-end; } -.vstack.space\:around { +.vstack > .frame-alignment\:leading { + align-self: flex-start; +} + +.vstack > .frame-alignment\:center { + align-self: center; +} + +.vstack > .frame-alignment\:trailing { + align-self: flex-end; +} + +.vstack.spacing\:around { justify-content: space-around; } -.vstack.space\:between { +.vstack.spacing\:between { justify-content: space-between; } -.vstack.space\:evenly { +.vstack.spacing\:evenly { justify-content: space-evenly; } -.vstack.space\:center { - justify-content: center; -} - -.vstack.space\:large { +.vstack.spacing\:large { gap: 2.25rem; } -.vstack.space\:medium { +.vstack.spacing\:medium { gap: 1.5rem; } -.vstack.space\:small { +.vstack.spacing\:small { gap: 1rem; } diff --git a/Sources/HTMLKitComponents/Resources/css/typography/link.css b/Sources/HTMLKitComponents/Resources/css/typography/link.css index 1d2a45e0..998c7349 100644 --- a/Sources/HTMLKitComponents/Resources/css/typography/link.css +++ b/Sources/HTMLKitComponents/Resources/css/typography/link.css @@ -72,31 +72,31 @@ --fontWeight: 950; } -.link.transformation\:uppercase { +.link.case\:uppercase { text-transform: uppercase; } -.link.transformation\:lowercase { +.link.case\:lowercase { text-transform: lowercase; } -.link.transformation\:capitalize { +.link.case\:capitalize { text-transform: capitalize; } -.link.transformation\:underline { +.link.decoration\:underline { text-decoration: underline; } -.link.transformation\:overline { +.link.decoration\:overline { text-decoration: overline; } -.link.transformation\:strikethrough { +.link.decoration\:strikethrough { text-decoration: line-through; } -.link.transformation\:none { +.link.decoration\:none { text-decoration: none; } @@ -191,5 +191,14 @@ overflow: hidden; } -.scheme\:dark .link, .link.scheme\:dark { +.link.font\:arial { + --fontFamily: Arial; +} + +.link.font\:helvetica { + --fontFamily: Helvetica; +} + +.link.font\:verdana { + --fontFamily: Verdana; } diff --git a/Sources/HTMLKitComponents/Resources/css/typography/symbol.css b/Sources/HTMLKitComponents/Resources/css/typography/symbol.css index fc1132c4..1afd0fe5 100644 --- a/Sources/HTMLKitComponents/Resources/css/typography/symbol.css +++ b/Sources/HTMLKitComponents/Resources/css/typography/symbol.css @@ -20,6 +20,7 @@ fill: hsla(var(--foregroundColor), 1.0); font-size: var(--fontSize); line-height: var(--lineHeight); + vertical-align: middle; } .symbol.size\:tiny { @@ -47,9 +48,10 @@ --lineHeight: 2.25; } -.scheme\:dark .symbol, .symbol.scheme\:dark { +.symbol + .text { + margin-inline-start: 0.75rem; } -.symbol + .text { +.text + .symbol { margin-inline-start: 0.75rem; } diff --git a/Sources/HTMLKitComponents/Resources/css/typography/text.css b/Sources/HTMLKitComponents/Resources/css/typography/text.css index d8304029..232e8d2b 100644 --- a/Sources/HTMLKitComponents/Resources/css/typography/text.css +++ b/Sources/HTMLKitComponents/Resources/css/typography/text.css @@ -75,31 +75,31 @@ --fontWeight: 950; } -.text.transformation\:uppercase { +.text.case\:uppercase { text-transform: uppercase; } -.text.transformation\:lowercase { +.text.case\:lowercase { text-transform: lowercase; } -.text.transformation\:capitalize { +.text.case\:capitalize { text-transform: capitalize; } -.text.transformation\:underline { +.text.decoration\:underline { text-decoration: underline; } -.text.transformation\:overline { +.text.decoration\:overline { text-decoration: overline; } -.text.transformation\:strikethrough { +.text.decoration\:strikethrough { text-decoration: line-through; } -.text.transformation\:none { +.text.decoration\:none { text-decoration: none; } @@ -194,5 +194,26 @@ overflow: hidden; } -.scheme\:dark .text, .text.scheme\:dark { +.text.alignment\:leading { + text-align: start; +} + +.text.alignment\:center { + text-align: center; +} + +.text.alignment\:trailing { + text-align: end; +} + +.text.font\:arial { + --fontFamily: Arial; +} + +.text.font\:helvetica { + --fontFamily: Helvetica; +} + +.text.font\:verdana { + --fontFamily: Verdana; } diff --git a/Sources/HTMLKitComponents/Resources/css/views/card.css b/Sources/HTMLKitComponents/Resources/css/views/card.css index 3b361ada..489a91f7 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/card.css +++ b/Sources/HTMLKitComponents/Resources/css/views/card.css @@ -19,11 +19,12 @@ --paddingInlineEnd: 1.0rem; --paddingBlockStart: 0.5rem; --paddingBlockEnd: 0.5rem; + --foregroundColor: var(--systemTextColor); --borderWidth: 1px; - --borderColor: 210, 14%, 89%; + --borderColor: var(--systemBorderColor); --borderRadius: 0; --borderOpacity: 1.0; - --backgroundColor: 0, 0%, 100%; + --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; position: relative; @@ -39,7 +40,6 @@ .card .card-header { border-start-start-radius: var(--borderRadius); border-start-end-radius: var(--borderRadius); - overflow: hidden; } .card .card-body { @@ -50,8 +50,3 @@ border-end-start-radius: var(--borderRadius); border-end-end-radius: var(--borderRadius); } - -.scheme\:dark .card, .card.scheme\:dark { - --borderColor: 210, 9%, 31%; - --backgroundColor: 210, 11%, 15%; -} diff --git a/Sources/HTMLKitComponents/Resources/css/views/carousel.css b/Sources/HTMLKitComponents/Resources/css/views/carousel.css index bd11b624..7ef66e07 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/carousel.css +++ b/Sources/HTMLKitComponents/Resources/css/views/carousel.css @@ -4,10 +4,10 @@ .carousel { --borderWidth: 1px; - --borderColor: 210, 14%, 89%; + --borderColor: var(--systemBorderColor); --borderRadius: 0; --borderOpacity: 1.0; - --backgroundColor: 0, 0%, 100%; + --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; display: flex; @@ -41,13 +41,8 @@ block-size: 50px; } -.scheme\:dark .carousel, .carousel.scheme\:dark { - --borderColor: 210, 9%, 31%; - --backgroundColor: 210, 11%, 15%; -} - .slide { - --backgroundColor: 0, 0%, 100%; + --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; position: relative; @@ -63,9 +58,9 @@ .indicator { --borderRadius: 5px; - --borderColor: 210, 14%, 89%; + --borderColor: var(--systemBackgroundColor); --borderOpacity: 1.0; - --backgroundColor: 210, 14%, 89%; + --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; position: relative; @@ -81,11 +76,6 @@ } .indicator:hover { - --borderColor: var(--primaryColor); - --backgroundColor: var(--primaryColor); -} - -.scheme\:dark .indicator, .indicator.scheme\:dark { - --borderColor: 210, 9%, 31%; - --backgroundColor: 210, 11%, 15%; + --borderColor: var(--accentColor); + --backgroundColor: var(--accentColor); } diff --git a/Sources/HTMLKitComponents/Resources/css/views/divider.css b/Sources/HTMLKitComponents/Resources/css/views/divider.css index 161d2b8c..7fc04b31 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/divider.css +++ b/Sources/HTMLKitComponents/Resources/css/views/divider.css @@ -9,7 +9,7 @@ */ .divider { - --backgroundColor: 210, 14%, 89%; + --backgroundColor: var(--systemBorderColor); --backgroundOpacity: 1.0; position: relative; @@ -19,7 +19,3 @@ border-width: 0; background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); } - -.scheme\:dark .divider, .divider.scheme\:dark { - --backgroundColor: 210, 9%, 31%; -} diff --git a/Sources/HTMLKitComponents/Resources/css/views/dropdown.css b/Sources/HTMLKitComponents/Resources/css/views/dropdown.css index ed21c905..a72d5f6b 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/dropdown.css +++ b/Sources/HTMLKitComponents/Resources/css/views/dropdown.css @@ -24,22 +24,25 @@ --paddingBlockEnd: 0.5rem; --paddingInlineStart: 1.0rem; --paddingInlineEnd: 1.0rem; - --inlineSize: fit-content(); --fontSize: 1.0rem; --fontWeight: 400; --lineHeight: 1.5; + --foregroundColor: var(--systemTextColor); --borderWidth: 1px; - --borderColor: 210, 14%, 89%; + --borderColor: var(--systemBorderColor); --borderRadius: 0; --borderOpacity: 1.0; - --foregroundColor: 0, 0%, 0%; - --backgroundColor: 0, 0%, 100%; + --foregroundColor: var(--systemTextColor); + --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; position: relative; + display: inline-block; } .dropdown-label { + display: inline-flex; + align-items: center; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -49,20 +52,28 @@ .dropdown .dropdown-content { position: absolute; z-index: 1; - display: none; + display: block; margin-block: 0.5rem; - padding-block: 0.5rem; - inline-size: calc(var(--inlineSize) * 1.5); + inline-size: max-content; border-width: var(--borderWidth); border-style: solid; border-color: hsla(var(--borderColor), 1.0); border-radius: var(--borderRadius); background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); overflow: hidden; + visibility: hidden; +} + +.dropdown-content.position\:right { + right: 0; +} + +.dropdown-content.position\:bottom { + bottom: 0; } .dropdown-content > .list > .list-row:hover { - background-color: hsla(var(--borderColor), 1.0); + background-color: hsla(var(--borderColor), 0.5); } .dropdown-content > .list > .list-row > .link { @@ -80,26 +91,14 @@ cursor: pointer; } -.dropdown-content > .list > .divider { - --backgroundColor: var(--borderColor) !important; -} - -.dropdown.size\:full { - --inlineSize: 100%; -} - -.dropdown.size\:large { - --inlineSize: 75%; -} - -.dropdown.size\:medium { - --inlineSize: 50%; +.dropdown-content > .list > .list-row > .grouping { + display: flex; + align-items: center; + padding-block: 0.5rem; + padding-inline: 1.0rem; + cursor: pointer; } -.scheme\:dark .dropdown, .dropdown.scheme\:dark { - --foregroundColor: 0, 0%, 100%; - --borderColor: 210, 9%, 31%; - --backgroundColor: 210, 11%, 15%; +.dropdown-content > .list > .divider { + --backgroundColor: var(--borderColor) !important; } - - diff --git a/Sources/HTMLKitComponents/Resources/css/views/form.css b/Sources/HTMLKitComponents/Resources/css/views/form.css index 6dbdb033..f9542961 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/form.css +++ b/Sources/HTMLKitComponents/Resources/css/views/form.css @@ -16,7 +16,7 @@ */ .label { - --foregroundColor: 0, 0%, 0%; + --foregroundColor: var(--systemTextColor); display: inline-block; margin-block-start: 1.25rem; @@ -27,8 +27,3 @@ line-height: var(--lineHeight); color: hsla(var(--foregroundColor), 1.0); } - -.scheme\:dark .label, .label.scheme\:dark { - --foregroundColor: 0, 0%, 100%; -} - diff --git a/Sources/HTMLKitComponents/Resources/css/views/image.css b/Sources/HTMLKitComponents/Resources/css/views/image.css index e37e180f..8f09472b 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/image.css +++ b/Sources/HTMLKitComponents/Resources/css/views/image.css @@ -26,6 +26,7 @@ border-color: hsla(var(--borderColor), var(--borderOpacity)); border-radius: var(--borderRadius); background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + font-style: italic; } .image.aspect\:equal { diff --git a/Sources/HTMLKitComponents/Resources/css/views/modal.css b/Sources/HTMLKitComponents/Resources/css/views/modal.css index 6da7dd88..e72bb54f 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/modal.css +++ b/Sources/HTMLKitComponents/Resources/css/views/modal.css @@ -19,11 +19,12 @@ --paddingBlockEnd: 0.75rem; --paddingInlineStart: 1.0rem; --paddingInlineEnd: 1.0rem; + --foregroundColor: var(--systemTextColor); --borderWidth: 1px; - --borderColor: 210, 14%, 89%; + --borderColor: var(--systemBorderColor); --borderRadius: 0; --borderOpacity: 1.0; - --backgroundColor: 0, 0%, 100%; + --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; margin: auto; @@ -38,8 +39,3 @@ background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); box-shadow: 0 15px 35px hsla(0,0%, 0%, 0.2); } - -.scheme\:dark .modal, .modal.scheme\:dark { - --borderColor: 210, 9%, 31%; - --backgroundColor: 210, 11%, 15%; -} diff --git a/Sources/HTMLKitComponents/Resources/css/views/navigation.css b/Sources/HTMLKitComponents/Resources/css/views/navigation.css index 8db7cdf7..55608be8 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/navigation.css +++ b/Sources/HTMLKitComponents/Resources/css/views/navigation.css @@ -32,15 +32,15 @@ .navigation > .list .list-row .link.state\:active { border-radius: 5px; - background-color: hsla(var(--primaryColor), 1.0) !important; + background-color: hsla(var(--accentColor), 1.0) !important; } .navigation.style\:pagination { --borderWidth: 1px; - --borderColor: 210, 14%, 89%; + --borderColor: var(--systemBorderColor); --borderRadius: 0; --borderOpacity: 1.0; - --backgroundColor: 0, 0%, 100%; + --backgroundColor: var(--systemBackgroundColor); --backgroundOpacity: 1.0; } @@ -54,11 +54,11 @@ .navigation.style\:pagination > .list.direction\:horizontal .list-row:is(:not(:last-child)) { border-right: 1px; border-right-style: solid; - border-right-color: hsla(210, 14%, 89%, 1.0); + border-right-color: hsla(var(--borderColor), var(--borderOpacity)); } .navigation.style\:pagination > .list.direction\:vertical .list-row:is(:not(:last-child)) { border-bottom: 1px; border-bottom-style: solid; - border-bottom-color: hsla(210, 14%, 89%, 1.0); + border-right-color: hsla(var(--borderColor), var(--borderOpacity)); } diff --git a/Sources/HTMLKitComponents/Resources/css/views/scroll.css b/Sources/HTMLKitComponents/Resources/css/views/scroll.css new file mode 100644 index 00000000..843314e8 --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/css/views/scroll.css @@ -0,0 +1,31 @@ +/* + The stylesheet for the scrollview component. + */ + +.scroll { + position: relative; + padding-inline: 1px; /* temporary fix */ + padding-block: 1px; /* temporary fix */ +} + +.scroll:has(> .hstack) { + max-inline-size: 100%; + overflow-x: auto; + overflow-y: hidden; + overscroll-behavior-inline: contain; +} + +.scroll:has(> .vstack) { + max-block-size: 100%; + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior-block: contain; +} + +.scroll.indicators\:false { + scrollbar-width: none; +} + +.scroll.indicators\:false::-webkit-scrollbar { + display: none; +} diff --git a/Sources/HTMLKitComponents/Resources/css/views/scrollview.css b/Sources/HTMLKitComponents/Resources/css/views/scrollview.css deleted file mode 100644 index f9119440..00000000 --- a/Sources/HTMLKitComponents/Resources/css/views/scrollview.css +++ /dev/null @@ -1,29 +0,0 @@ -/* - The stylesheet for the scrollview component. - */ - -.scrollview { - display: grid; -} - -.scrollview::-webkit-scrollbar { - display: none; -} - -.scrollview.direction\:horizontal { - grid-auto-flow: column; - grid-auto-columns: min-content; - max-width: 100%; - overflow-x: auto; - overflow-y: hidden; - overscroll-behavior-inline: contain; -} - -.scrollview.direction\:vertical { - grid-auto-flow: row; - grid-auto-rows: min-content; - max-height: 100%; - overflow-x: hidden; - overflow-y: auto; - overscroll-behavior-y: contain; -} diff --git a/Sources/HTMLKitComponents/Resources/css/views/snippet.css b/Sources/HTMLKitComponents/Resources/css/views/snippet.css index 5dfd50bb..2ad1585e 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/snippet.css +++ b/Sources/HTMLKitComponents/Resources/css/views/snippet.css @@ -18,7 +18,7 @@ --fontSize: 1.0rem; --fontWeight: 400; --lineHeight: 1.5; - --foregroundColor: 0, 0%, 0%; + --foregroundColor: var(--systemTextColor); --backgroundColor: 0, 0%, 0%; --backgroundOpacity: 0.0; @@ -52,7 +52,3 @@ color: hsla(var(--foregroundColor), 1.0); -webkit-user-select: none; } - -.scheme\:dark .snippet, .snippet.scheme\:dark { - --foregroundColor: 0, 0%, 100%; -} diff --git a/Sources/HTMLKitComponents/Resources/js/components/buttons/dropdown.js b/Sources/HTMLKitComponents/Resources/js/components/buttons/dropdown.js index 118ad235..34cebb37 100644 --- a/Sources/HTMLKitComponents/Resources/js/components/buttons/dropdown.js +++ b/Sources/HTMLKitComponents/Resources/js/components/buttons/dropdown.js @@ -22,7 +22,7 @@ window.addEventListener('click', function (event) { - if(!self.element.contains(event.target)) { + if (!self.element.contains(event.target)) { self.hideDropdownList(); } }); @@ -32,6 +32,18 @@ Shows the dropdown list */ Dropdown.prototype.showDropdownList = function () { + + var windowBound = document.body.getBoundingClientRect(); + var elementBound = this.dropdownlist.getBoundingClientRect(); + + if (windowBound.width < elementBound.right) { + this.dropdownlist.classList.add('position:right'); + } + + if (windowBound.height < elementBound.bottom) { + this.dropdownlist.classList.add('position:bottom'); + } + this.dropdownlist.classList.add('state:visible'); }; @@ -44,9 +56,9 @@ var dropdown = document.getElementsByClassName('dropdown'); - if(dropdown.length > 0) { + if (dropdown.length > 0) { - for(var i = 0; i < dropdown.length; i++) { + for (var i = 0; i < dropdown.length; i++) { (function(i) { new Dropdown(dropdown[i]); diff --git a/Sources/HTMLKitComponents/Resources/js/components/forms/selectfield.js b/Sources/HTMLKitComponents/Resources/js/components/forms/selectfield.js index a1fa0fe7..7ace8f7e 100644 --- a/Sources/HTMLKitComponents/Resources/js/components/forms/selectfield.js +++ b/Sources/HTMLKitComponents/Resources/js/components/forms/selectfield.js @@ -23,7 +23,7 @@ window.addEventListener('click', function (event) { - if(!self.element.contains(event.target)) { + if (!self.element.contains(event.target)) { self.hideOptionList(); } }); @@ -95,6 +95,13 @@ */ Selectfield.prototype.showOptionList = function () { + var windowBound = document.body.getBoundingClientRect(); + var elementBound = this.optionlist.getBoundingClientRect(); + + if (windowBound.height < elementBound.bottom) { + this.optionlist.classList.add('position:bottom'); + } + this.optionlist.classList.add('state:visible'); }; @@ -108,7 +115,7 @@ var selectfield = document.getElementsByClassName('selectfield'); - if(selectfield.length > 0) { + if (selectfield.length > 0) { for (var i = 0; i < selectfield.length; i++) { diff --git a/Sources/HTMLKitComponents/Resources/js/components/forms/textpad.js b/Sources/HTMLKitComponents/Resources/js/components/forms/textpad.js index 826d25e2..edf02160 100644 --- a/Sources/HTMLKitComponents/Resources/js/components/forms/textpad.js +++ b/Sources/HTMLKitComponents/Resources/js/components/forms/textpad.js @@ -51,9 +51,9 @@ var textpad = document.getElementsByClassName('textpad'); - if(textpad.length > 0) { + if (textpad.length > 0) { - for(var i = 0; i < textpad.length; i++) { + for (var i = 0; i < textpad.length; i++) { (function(i) { new Textpad(textpad[i]); diff --git a/Sources/HTMLKitComponents/Resources/js/components/views/carousel.js b/Sources/HTMLKitComponents/Resources/js/components/views/carousel.js index 72d25d4d..d84f860b 100644 --- a/Sources/HTMLKitComponents/Resources/js/components/views/carousel.js +++ b/Sources/HTMLKitComponents/Resources/js/components/views/carousel.js @@ -44,12 +44,13 @@ } else { position = 0; } + }, 7000); }; Carousel.prototype.getPosition = function (name) { - for(var position = 0; position < this.slides.children.length; position++) { + for (var position = 0; position < this.slides.children.length; position++) { if (this.slides.children[position].id == name) { return position; @@ -59,7 +60,7 @@ Carousel.prototype.toggleState = function (position) { - for(let indicator of this.indication.children) { + for (let indicator of this.indication.children) { indicator.classList.remove('state:active'); } @@ -79,14 +80,13 @@ var carousel = document.getElementsByClassName('carousel'); - if(carousel.length > 0) { + if (carousel.length > 0) { - for(var i = 0; i < carousel.length; i++) { + for (var i = 0; i < carousel.length; i++) { (function(i) { new Carousel(carousel[i]); })(i); } } - }()); diff --git a/Sources/HTMLKitComponents/Resources/js/components/views/datepicker.js b/Sources/HTMLKitComponents/Resources/js/components/views/datepicker.js index ad6d8e2f..bee60def 100644 --- a/Sources/HTMLKitComponents/Resources/js/components/views/datepicker.js +++ b/Sources/HTMLKitComponents/Resources/js/components/views/datepicker.js @@ -37,9 +37,9 @@ event.preventDefault(); - if(event.target.tagName == 'BUTTON') { + if (event.target.tagName == 'BUTTON') { - switch(event.target.value) { + switch (event.target.value) { case 'previous': @@ -61,14 +61,14 @@ event.preventDefault(); - if(event.target.tagName == 'LI') { + if (event.target.tagName == 'LI') { self.setInputValue(event.target.firstChild.dateTime); self.hidePicker(); } - if(event.target.tagName == 'TIME') { + if (event.target.tagName == 'TIME') { self.setInputValue(event.target.dateTime); @@ -84,11 +84,11 @@ var calendar = ''; - for(var j = 0; j < getFirstOfMonth(this.year, this.month); j++) { + for (var j = 0; j < getFirstOfMonth(this.year, this.month); j++) { calendar = calendar + '
  • '; } - for(var i = 1; i < getLastOfMonth(this.year, this.month) + 1; i++) { + for (var i = 1; i < getLastOfMonth(this.year, this.month) + 1; i++) { calendar = calendar + '
    • '; } @@ -118,6 +118,14 @@ Shows the picker. */ Datepicker.prototype.showPicker = function () { + + var windowBound = document.body.getBoundingClientRect(); + var elementBound = this.picker.getBoundingClientRect(); + + if (windowBound.height < elementBound.bottom) { + this.picker.classList.add('position:bottom'); + } + this.picker.classList.add('state:visible'); }; @@ -174,14 +182,13 @@ var datepicker = document.getElementsByClassName('datepicker'); - if(datepicker.length > 0) { + if (datepicker.length > 0) { - for(var i = 0; i < datepicker.length; i++) { + for (var i = 0; i < datepicker.length; i++) { (function(i) { new Datepicker(datepicker[i]); })(i); } } - }()); diff --git a/Sources/HTMLKitComponents/Resources/symbols/bell.svg b/Sources/HTMLKitComponents/Resources/symbols/bell.svg new file mode 100644 index 00000000..3be7b4ca --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/symbols/bell.svg @@ -0,0 +1,3 @@ + + + diff --git a/Sources/HTMLKitComponents/Resources/symbols/chevron.down.svg b/Sources/HTMLKitComponents/Resources/symbols/chevron.down.svg new file mode 100644 index 00000000..77a6df20 --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/symbols/chevron.down.svg @@ -0,0 +1,3 @@ + + + diff --git a/Sources/HTMLKitComponents/Resources/symbols/chevron.left.svg b/Sources/HTMLKitComponents/Resources/symbols/chevron.left.svg new file mode 100644 index 00000000..3414fe94 --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/symbols/chevron.left.svg @@ -0,0 +1,3 @@ + + + diff --git a/Sources/HTMLKitComponents/Resources/symbols/chevron.right.svg b/Sources/HTMLKitComponents/Resources/symbols/chevron.right.svg new file mode 100644 index 00000000..065b4ee6 --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/symbols/chevron.right.svg @@ -0,0 +1,3 @@ + + + diff --git a/Sources/HTMLKitComponents/Resources/symbols/chevron.up.svg b/Sources/HTMLKitComponents/Resources/symbols/chevron.up.svg new file mode 100644 index 00000000..57ee3baf --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/symbols/chevron.up.svg @@ -0,0 +1,3 @@ + + + diff --git a/Sources/HTMLKitComponents/Resources/symbols/ellipsis.horizontal.svg b/Sources/HTMLKitComponents/Resources/symbols/ellipsis.horizontal.svg new file mode 100644 index 00000000..f235e7e0 --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/symbols/ellipsis.horizontal.svg @@ -0,0 +1,3 @@ + + + diff --git a/Sources/HTMLKitComponents/Resources/symbols/ellipsis.vertical.svg b/Sources/HTMLKitComponents/Resources/symbols/ellipsis.vertical.svg new file mode 100644 index 00000000..cfc6101e --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/symbols/ellipsis.vertical.svg @@ -0,0 +1,3 @@ + + + diff --git a/Sources/HTMLKitComponents/Resources/symbols/eye.svg b/Sources/HTMLKitComponents/Resources/symbols/eye.svg new file mode 100644 index 00000000..2fd2df75 --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/symbols/eye.svg @@ -0,0 +1,3 @@ + + + diff --git a/Sources/HTMLKitComponents/Resources/symbols/filter.svg b/Sources/HTMLKitComponents/Resources/symbols/filter.svg new file mode 100644 index 00000000..6ca4c072 --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/symbols/filter.svg @@ -0,0 +1,3 @@ + + + diff --git a/Sources/HTMLKitComponents/Resources/symbols/flask.svg b/Sources/HTMLKitComponents/Resources/symbols/flask.svg new file mode 100644 index 00000000..ca3381b1 --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/symbols/flask.svg @@ -0,0 +1,3 @@ + + + diff --git a/Sources/HTMLKitComponents/Resources/symbols/key.svg b/Sources/HTMLKitComponents/Resources/symbols/key.svg new file mode 100644 index 00000000..29d1fac3 --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/symbols/key.svg @@ -0,0 +1,3 @@ + + + diff --git a/Sources/HTMLKitComponents/Resources/symbols/lightbulb.svg b/Sources/HTMLKitComponents/Resources/symbols/lightbulb.svg new file mode 100644 index 00000000..32f73f02 --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/symbols/lightbulb.svg @@ -0,0 +1,3 @@ + + + diff --git a/Sources/HTMLKitComponents/Resources/symbols/pencil.svg b/Sources/HTMLKitComponents/Resources/symbols/pencil.svg new file mode 100644 index 00000000..d83d04d2 --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/symbols/pencil.svg @@ -0,0 +1,3 @@ + + + diff --git a/Sources/HTMLKitComponents/Resources/symbols/refresh.svg b/Sources/HTMLKitComponents/Resources/symbols/refresh.svg new file mode 100644 index 00000000..9033ef18 --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/symbols/refresh.svg @@ -0,0 +1,3 @@ + + + diff --git a/Sources/HTMLKitComponents/Resources/symbols/trash.svg b/Sources/HTMLKitComponents/Resources/symbols/trash.svg new file mode 100644 index 00000000..5018e5e8 --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/symbols/trash.svg @@ -0,0 +1,3 @@ + + + diff --git a/Sources/HTMLKitComponents/Tokens.swift b/Sources/HTMLKitComponents/Tokens.swift index 3abbc1c7..dee7e618 100644 --- a/Sources/HTMLKitComponents/Tokens.swift +++ b/Sources/HTMLKitComponents/Tokens.swift @@ -11,13 +11,13 @@ public enum Tokens { /// Aligns the elements vertically. case vertical - /// Aligns the elements horizontally. case horizontal - + /// Aligns the elements along a custom direction. case custom(String) var value: String { + switch self { case .vertical: return "vertical" @@ -34,27 +34,26 @@ public enum Tokens { /// A alignment for text along the horizontal axis. public enum TextAlignment { - /// Aligns the text left. - case left - + /// Aligns the text on the left. + case leading /// Aligns the text in the middle. case center - - /// Aligns the text right. - case right - + /// Aligns the text on the right. + case trailing + /// Sets the text to a custom alignment. case custom(String) var value: String { + switch self { - case .left: - return "left" + case .leading: + return "leading" case .center: return "center" - case .right: - return "right" + case .trailing: + return "trailing" case .custom(let string): return string @@ -63,47 +62,41 @@ public enum Tokens { } /// A size for column. - public enum ColumnSize { + public enum ViewWidth { - /// Sets the size to 8.3 %. + /// Sets the width of the view to 8.3 % of the parent view. case one - - /// Sets the size to 16.67 %. + /// Sets the width of the view to 16.67 % of the parent view. case two - - /// Sets the size to 25 %. + /// Sets the width of the view to 25 % of the parent view. case three - - /// Sets the size to 33.3 %. + /// Sets the width of the view to 33.3 % of the parent view. case four - - /// Sets the size to 41.67 %. + /// Sets the width of the view to 41.67 % of the parent view. case five - - /// Sets the size to 50 %. + /// Sets the width of the view to 50 % of the parent view. case six - - /// Sets the size to 58.3 %. + /// Sets the width of the view to 58.3 % of the parent view. case seven - - /// Sets the size to 66.67 %. + /// Sets the width of the view to 66.67 % of the parent view. case eight - - /// Sets the size to 75 %. + /// Sets the width of the view to 75 % of the parent view. case nine - - /// Sets the size to 83.3%. + /// Sets the width of the view to 83.3% of the parent view. case ten - - /// Sets the size to 91.67 %. + /// Sets the width of the view to 91.67 % of the parent view. case eleven - - /// Sets the size to 100 %. + /// Sets the width of the view to 100 % of the parent view. case twelve - + /// Sets the width of view to the intrinsic preferred width. + case maximum + /// Sets the width of the view to the intrinsic minimum width. + case minimum + /// Sets the view to a custom width. case custom(String) var value: String { + switch self { case .one: return "one" @@ -140,73 +133,90 @@ public enum Tokens { case .twelve: return "twelve" + + case .minimum: + return "minimum" + + case .maximum: + return "maximum" case .custom(let string): return string } } } + + public enum ViewHeight { + + /// Sets the width of the view to 8.3 % of the parent view. + case minimum + /// Sets the width of the view to 16.67 % of the parent view. + case maximum + /// Sets the view to a custom width. + case custom(String) + + var value: String { + + switch self { + case .minimum: + return "minimum" + + case .maximum: + return "maximum" + + case .custom(let string): + return string + } + } + } + /// A color for text. public enum ForegroundColor { - /// Changes the border color to black. + /// Changes the foreground color to #000000 . case black - - /// Changes the border color to white. + /// Changes the foreground color to #FFFFFF. case white - - /// Changes the border color to blue. + /// Changes the foreground color to #4098D7. case blue - - /// Changes the border color to brown. + /// Changes the foreground color to #BF7140. case brown - - /// Changes the border color to cyan. + /// Changes the foreground color to #38BEC9. case cyan - - /// Changes the border color to green. + /// Changes the foreground color to #57AE5B. case green - - /// Changes the border color to indigo. + /// Changes the foreground color to #647ACB. case indigo - - /// Changes the border color to mint. + /// Changes the foreground color to #91E697. case mint - - /// Changes the border color to pink. + /// Changes the foreground color to #DA4A91. case pink - - /// Changes the border color to purple. + /// Changes the foreground color to #724BB7. case purple - - /// Changes the border color to red. + /// Changes the foreground color to #D64545. case red - - /// Changes the border color to teal. + /// Changes the foreground color to #3EBD93. case teal - - /// Changes the border color to ornage. + /// Changes the foreground color to #E67635. case orange - - /// Changes the border color to yellow. + /// Changes the foreground color to #F7D070. case yellow - - /// Changes the border color to gray. + /// Changes the foreground color to #9E9E9E. case gray - - /// Changes the border color to silver. + /// Changes the foreground color to #F7F7F7. case silver - - case primary - - case secondary - + /// Changes the foreground color to #007FFF. + case accent + /// Changes the foreground opacity to 0.0. case transparent - + /// Changes the foreground color to #DFE3E7. + case system + /// Changes the foreground color to a custom value. case custom(String) var value: String { + switch self { case .black: return "black" @@ -256,14 +266,14 @@ public enum Tokens { case .silver: return "silver" - case .primary: - return "primary" - - case .secondary: - return "secondary" + case .accent: + return "accent" case .transparent: return "transparent" + + case .system: + return "system" case .custom(let string): return string @@ -274,24 +284,21 @@ public enum Tokens { /// A size for text. public enum FontSize { - /// Changes the size to small. + /// Changes the size of the font to 0.67 rem. case tiny - - /// Changes the size to small. + /// Changes the size of the font to 0.83 rem. case small - - /// Changes the size to medium. + /// Changes the size of the font to 1.17 rem. case medium - - /// Changes the size to large. + /// Changes the size of the font to 1.5 rem. case large - - /// Changes the size to extra large. + /// Changes the size of the font to 2 rem. case extralarge - + /// Changes the size of the font to a custom value. case custom(String) var value: String { + switch self { case .tiny: return "tiny" @@ -315,20 +322,19 @@ public enum Tokens { } /// A transformation for the text. - public enum TextTransformation { + public enum TextCase { /// Converts all characters to uppercase. case uppercase - /// Converts all characters to lowercase. case lowercase - /// Capitalizes the first letter of each word. case capitalize - + /// Sets the transformation to a custom value. case custom(String) var value: String { + switch self { case .uppercase: return "uppercase" @@ -350,34 +356,27 @@ public enum Tokens { /// Sets the weight to 100. case thin - /// Sets the weight to 200. case ultraLight - /// Sets the weight to 300. case light - /// Sets the weight to 400. case regular - /// Sets the weight to 500. case medium - /// Sets the weight to 600. case semibold - /// Sets the weight to 700. case bold - /// Sets the weight to 900. case heavy - /// Sets the weight to 950. case black - + /// Sets the weight to custom value. case custom(String) var value: String { + switch self { case .thin: return "thin" @@ -415,17 +414,17 @@ public enum Tokens { /// A decoration for text. public enum TextDecoration { + /// Underlines the text. case underline - + /// Overlines the text. case overline - + /// Adds a line through the text. case strikeThrough - - case none - + /// Sets the decoration of the text to a custom value. case custom(String) var value: String { + switch self { case .underline: return "underline" @@ -435,9 +434,6 @@ public enum Tokens { case .strikeThrough: return "strikethrough" - - case .none: - return "none" case .custom(let string): return string @@ -445,15 +441,18 @@ public enum Tokens { } } + /// A style for a font public enum FontStyle { + /// Displays the text as italic. case italic - + /// Displays the text as oblique. case oblique - + /// Displays the text as a custom style. case custom(String) var value: String { + switch self { case .italic: return "italic" @@ -467,65 +466,52 @@ public enum Tokens { } } + /// A background color for a view. public enum BackgroundColor { - /// Changes the border color to black. + /// Changes the background color to #000000 . case black - - /// Changes the border color to white. + /// Changes the background color to #FFFFFF. case white - - /// Changes the border color to blue. + /// Changes the background color to #4098D7. case blue - - /// Changes the border color to brown. + /// Changes the background color to #BF7140. case brown - - /// Changes the border color to cyan. + /// Changes the background color to #38BEC9. case cyan - - /// Changes the border color to green. + /// Changes the background color to #57AE5B. case green - - /// Changes the border color to indigo. + /// Changes the background color to #647ACB. case indigo - - /// Changes the border color to mint. + /// Changes the background color to #91E697. case mint - - /// Changes the border color to pink. + /// Changes the background color to #DA4A91. case pink - - /// Changes the border color to purple. + /// Changes the background color to #724BB7. case purple - - /// Changes the border color to red. + /// Changes the background color to #D64545. case red - - /// Changes the border color to teal. + /// Changes the background color to #3EBD93. case teal - - /// Changes the border color to ornage. + /// Changes the background color to #E67635. case orange - - /// Changes the border color to yellow. + /// Changes the background color to #F7D070. case yellow - - /// Changes the border color to gray. + /// Changes the background color to #9E9E9E. case gray - - /// Changes the border color to silver. + /// Changes the background color to #F7F7F7. case silver - - case primary - - case secondary - + /// Changes the background color to #007FFF. + case accent + /// Changes the background opacity to 0.0. case transparent - + /// Changes the background color to #DFE3E7. + case system + /// Changes the background to a custom color. case custom(String) var value: String { + switch self { case .black: return "black" @@ -575,14 +561,14 @@ public enum Tokens { case .silver: return "silver" - case .primary: - return "primary" - - case .secondary: - return "secondary" + case .accent: + return "accent" case .transparent: return "transparent" + + case .system: + return "system" case .custom(let string): return string @@ -595,21 +581,18 @@ public enum Tokens { /// Resizes the content to fit within the parent. case contain - /// Resizes the content to fill the parent. The overflow will be clipped. case cover - /// Resizes the content to fill the parent. If necessary it will be streched or squished. case fill - case scaleDown - /// Does not resize. case none - + /// Resizes to the content to a custom value. case custom(String) var value: String { + switch self { case .contain: return "contain" @@ -632,15 +615,18 @@ public enum Tokens { } } + /// A views opacity. public enum OpacityValue { + /// Sets the opacity value to 1.0. case intransparent - + /// Sets the opacity value to 0.0. case transparent - + /// Sets the opacity value to a custom value. case custom(String) var value: String { + switch self { case .intransparent: return "intransparent" @@ -654,93 +640,20 @@ public enum Tokens { } } - /// A offset for a column. - public enum ColumnOffset { - - /// Sets the offset to 8.3 %. - case one - - /// Sets the offset to 16.67 %. - case two - - /// Sets the offset to 25 %. - case three - - /// Sets the offset to 33.33 %. - case four - - /// Sets the offset to 41.67 %. - case five - - /// Sets the offset to 50 %. - case six - - /// Sets the offset to 58.3 %. - case seven - - /// Sets the offset to 66.7 %. - case eight - - /// Sets the offset to 75 %. - case nine - - /// Sets the offset to 83.3 %. - case ten - - /// Sets the offset to 91.67 %. - case eleven - - case custom(String) - - var value: String { - switch self { - case .one: - return "one" - - case .two: - return "two" - - case .three: - return "three" - - case .four: - return "four" - - case .five: - return "five" - - case .six: - return "six" - - case .seven: - return "seven" - - case .eight: - return "eight" - - case .nine: - return "nine" - - case .ten: - return "ten" - - case .eleven: - return "eleven" - - case .custom(let string): - return string - } - } - } - + /// A size for an image view. public enum ImageScale { + /// Sets the inline size of the image to 3.125 rem. case small + /// Sets the inline size of the image to 12.5 rem. case medium + /// Sets the inline size of the image to 25 rem. case large + /// Sets the inline size of the image to a custom value. case custom(String) var value: String { + switch self { case .small: return "small" @@ -757,13 +670,16 @@ public enum Tokens { } } + /// A shape for a view. public enum ClipShape { + /// Transforms the shape of the view into a circle. case circle - + /// Transforms the shape of the view along the custom value. case custom(String) var value: String { + switch self { case .circle: return "circle" @@ -779,22 +695,19 @@ public enum Tokens { /// Sets the stack order to 1. case one - /// Sets the stack order to 2. case two - /// Sets the stack order to 3. case three - /// Sets the stack order to 4. case four - /// Sets the stack order to 5. case five - + /// Sets the stack order to a custom value. case custom(String) var value: String { + switch self { case .one: return "one" @@ -820,33 +733,27 @@ public enum Tokens { /// A style for text. public enum TextStyle { - /// Formats the text as title. + /// Changes the appearance of the text to title. case title - - /// Formats the text as headline. + /// Changes the appearance of the text to headline. case headline - - /// Formats the text as subheadline. + /// Changes the appearance of the text to subheadline. case subheadline - - /// Formats the text as body. + /// Changes the appearance of the text to body. case body - - /// Formats the text as callout. + /// Changes the appearance of the text to body. case callout - - /// Formats the text as caption. + /// Changes the appearance of the text to a caption. case caption - - /// Formats the text as footnote. + /// Changes the appearance of the text to a footnote. case footnote - - /// Formats the text as code. + /// Changes the appearance of the text to a code. case code - + /// Changes the text to a custom appearance. case custom(String) var value: String { + switch self { case .title: return "title" @@ -881,21 +788,19 @@ public enum Tokens { /// A alignment along the vertically axis. public enum VerticalAlignment { - /// Aligns at the top. + /// Aligns the content at the top. case top - - /// Aligns in the middle. + /// Aligns the content in the middle. case center - - /// Aligns at the bottom. + /// Aligns the content at the bottom. case bottom - - /// Aligns with the parent's baseline. + /// Aligns the content with the parent's baseline. case baseline - + /// Aligns the content along a custom value. case custom(String) var value: String { + switch self { case .top: return "top" @@ -918,18 +823,17 @@ public enum Tokens { /// A alignment along the horizontal axis. public enum HorizontalAlignment { - /// Aligns left. + /// Aligns the content on the left. case leading - - /// Aligns center. + /// Aligns the content in the middle. case center - - /// Aligns right. + /// Aligns the content on the right. case trailing - + /// Aligns the content along a custom value. case custom(String) var value: String { + switch self { case .leading: return "leading" @@ -946,18 +850,26 @@ public enum Tokens { } } + /// A space for content. public enum ContentSpace { + /// Distributes the content evenly. case around + /// Content is evenly distributed along the line. case between + /// Sets the content space equally. case evenly - case center + /// Sets the content space in between to 2.25 rem. case large + /// Sets the content space in between to 1.5 rem. case medium + /// Sets the content space in between to 1 rem. case small + /// Sets the content space to a custom value. case custom(String) var value: String { + switch self { case .around: return "around" @@ -968,9 +880,6 @@ public enum Tokens { case .evenly: return "evenly" - case .center: - return "center" - case .large: return "large" @@ -986,16 +895,22 @@ public enum Tokens { } } + /// A syntax highlight for code. public enum SyntaxHighlight { + /// Sets the syntax highlight to plaintext. case plaintext + /// Sets the syntax highlight to HTML. case html + /// Sets the syntax highlight to CSS. case css + /// Sets the syntax highlight to Javascript. case javascript - + /// Sets the syntax highlight to a custom value. case custom(String) var value: String { + switch self { case .plaintext: return "plaintext" @@ -1018,20 +933,19 @@ public enum Tokens { /// A style for button. public enum ButtonStyle { + /// Changes the button appearance to the primary style. case primary - case secondary + /// Changes the button appearance to the seconary style. case outline - + /// Changes the button to a custom appearance. case custom(String) var value: String { + switch self { case .primary: return "primary" - case .secondary: - return "secondary" - case .outline: return "outline" @@ -1044,12 +958,17 @@ public enum Tokens { /// A shape of the button. public enum BorderShape { + /// Changes the border radius to 0.313 rem. case smallrounded + /// Changes the border radius to 0.625 rem. case largerounded + /// Changes the border radius to 1.563 rem. case fullrounded + /// Changes the border radius to a custom value. case custom(String) var value: String { + switch self { case .smallrounded: return "smallrounded" @@ -1067,23 +986,21 @@ public enum Tokens { } /// A size of a button. - public enum ButtonSize { + public enum ControlSize { /// Sets the size to 100 %. case full - /// Sets the size to 75 %. case large - /// Sets the size to 50 %. case medium - /// Sets the size to 25 %. case small - + /// Sets the size to a custom value. case custom(String) var value: String { + switch self { case .full: return "full" @@ -1107,27 +1024,22 @@ public enum Tokens { public enum GridRatio { case fit - /// Sets the ratio to 15%. case sixth - /// Sets the ratio to 20 %. case fifth - /// Sets the ratio to 25 %. case quarter - /// Sets the ratio to 33 %. case third - /// Sets the ratio to 50 %. case half - + /// Sets the ratio for the grid to a custom value. case custom(String) var value: String { + switch self { - case .fit: return "fit" @@ -1155,11 +1067,13 @@ public enum Tokens { /// A style for a list. public enum ListStyle { + /// Changes the appearance of the list to a list group. case listgroup - + /// Changes the list to a custom appearance. case custom(String) var value: String { + switch self { case .listgroup: return "listgroup" @@ -1173,21 +1087,19 @@ public enum Tokens { /// A state for the view. public enum ViewState { - /// Sets the state to active. + /// Shows the view as active view. case active - - /// Sets the state to disabled. + /// Disables the view. case disabled - - /// Sets the state to hidden. + /// Hides the view. case hidden - - /// Sets the state to visible. + /// Shows the view. case visible - + /// Sets the view state to a custom value. case custom(String) var value: String { + switch self { case .active: return "active" @@ -1207,65 +1119,52 @@ public enum Tokens { } } + /// A color for the border. public enum BorderColor { - /// Changes the border color to black. + /// Changes the border color to #000000 . case black - - /// Changes the border color to white. + /// Changes the border color to #FFFFFF. case white - - /// Changes the border color to blue. + /// Changes the border color to #4098D7. case blue - - /// Changes the border color to brown. + /// Changes the border color to #BF7140. case brown - - /// Changes the border color to cyan. + /// Changes the border color to #38BEC9. case cyan - - /// Changes the border color to green. + /// Changes the border color to #57AE5B. case green - - /// Changes the border color to indigo. + /// Changes the border color to #647ACB. case indigo - - /// Changes the border color to mint. + /// Changes the border color to #91E697. case mint - - /// Changes the border color to pink. + /// Changes the border color to #DA4A91. case pink - - /// Changes the border color to purple. + /// Changes the border color to #724BB7. case purple - - /// Changes the border color to red. + /// Changes the border color to #D64545. case red - - /// Changes the border color to teal. + /// Changes the border color to #3EBD93. case teal - - /// Changes the border color to ornage. + /// Changes the border color to #E67635. case orange - - /// Changes the border color to yellow. + /// Changes the border color to #F7D070. case yellow - - /// Changes the border color to gray. + /// Changes the border color to #9E9E9E. case gray - - /// Changes the border color to silver. + /// Changes the border color to #F7F7F7. case silver - - case primary - - case secondary - + /// Changes the border color to #007FFF. + case accent + /// Changes the border opacity to 0.0. case transparent - + /// Changes the border color to #DFE3E7. + case system + /// Changes the border to a custom color. case custom(String) var value: String { + switch self { case .black: return "black" @@ -1315,14 +1214,14 @@ public enum Tokens { case .silver: return "silver" - case .primary: - return "primary" - - case .secondary: - return "secondary" + case .accent: + return "accent" case .transparent: return "transparent" + + case .system: + return "system" case .custom(let string): return string @@ -1330,65 +1229,52 @@ public enum Tokens { } } + /// A color for the focus. public enum FocusColor { - /// Changes the border color to black. + /// Changes the foreground color to #000000 . case black - - /// Changes the border color to white. + /// Changes the foreground color to #FFFFFF. case white - - /// Changes the border color to blue. + /// Changes the foreground color to #4098D7. case blue - - /// Changes the border color to brown. + /// Changes the foreground color to #BF7140. case brown - - /// Changes the border color to cyan. + /// Changes the foreground color to #38BEC9. case cyan - - /// Changes the border color to green. + /// Changes the foreground color to #57AE5B. case green - - /// Changes the border color to indigo. + /// Changes the foreground color to #647ACB. case indigo - - /// Changes the border color to mint. + /// Changes the foreground color to #91E697. case mint - - /// Changes the border color to pink. + /// Changes the foreground color to #DA4A91. case pink - - /// Changes the border color to purple. + /// Changes the foreground color to #724BB7. case purple - - /// Changes the border color to red. + /// Changes the foreground color to #D64545. case red - - /// Changes the border color to teal. + /// Changes the foreground color to #3EBD93. case teal - - /// Changes the border color to ornage. + /// Changes the foreground color to #E67635. case orange - - /// Changes the border color to yellow. + /// Changes the foreground color to #F7D070. case yellow - - /// Changes the border color to gray. + /// Changes the foreground color to #9E9E9E. case gray - - /// Changes the border color to silver. + /// Changes the foreground color to #F7F7F7. case silver - - case primary - - case secondary - + /// Changes the foreground color to #007FFF. + case accent + /// Changes the foreground opacity to 0.0. case transparent - + /// Changes the foreground color to #DFE3E7. + case system + /// Changes the foreground to a custom color. case custom(String) var value: String { + switch self { case .black: return "black" @@ -1438,14 +1324,14 @@ public enum Tokens { case .silver: return "silver" - case .primary: - return "primary" - - case .secondary: - return "secondary" + case .accent: + return "accent" case .transparent: return "transparent" + + case .system: + return "system" case .custom(let string): return string @@ -1453,15 +1339,18 @@ public enum Tokens { } } + /// A color scheme for the application. public enum ColorScheme { /// Changes the color scheme to dark. case dark /// Changes the color scheme to light. case light + /// Changes the color scheme to a custom value. case custom(String) var value: String { + switch self { case .dark: return "dark" @@ -1477,12 +1366,17 @@ public enum Tokens { public enum PaddingLength { + /// Changes the padding size of the view to 1 rem. case small + /// Changes the padding size of the view to 1.5 rem. case medium + /// Changes the padding size of the view to 2.25 rem. case large + /// Changes the padding size to a custom value. case custom(String) var value: String { + switch self { case .small: return "small" @@ -1500,13 +1394,19 @@ public enum Tokens { } public enum MarginLength { - + /// Changes the margin size of the view to 1 rem. case small + /// Changes the margin size of the view to 1.5 rem. case medium + /// Changes the margin size of the view to 2.25 rem. case large + /// Changes the margin size to auto. + case auto + /// Changes the margin size to a custom value. case custom(String) var value: String { + switch self { case .small: return "small" @@ -1517,19 +1417,27 @@ public enum Tokens { case .large: return "large" + case .auto: + return "auto" + case .custom(let string): return string } } } + /// A ratio for images. public enum AspectRatio { + /// Sets the aspect ratio to 1/1. case equal + /// Sets the aspect ratio to 2/1. case unequal + /// Sets the aspect ratio to a custom ratio. case custom(String) var value: String { + switch self { case .equal: return "equal" @@ -1543,14 +1451,19 @@ public enum Tokens { } } + /// A style for navigations. public enum NavigationStyle { case plain + /// Changes the appearance of the navigation to pagination. case pagination + /// Changes the appearance of the navigation to menu. case menu + /// Changes the navigation to a custom appearance. case custom(String) var value: String { + switch self { case .plain: return "plain" @@ -1567,14 +1480,20 @@ public enum Tokens { } } + /// A height for text lines. public enum LineHeight { + /// Sets the height of the line to 1.0. case small + /// Sets the height of the line to 1.75. case medium + /// Sets the height of the line to 2.25. case large + /// Setst the height of the line to a custom value. case custom(String) var value: String { + switch self { case .small: return "small" @@ -1591,14 +1510,20 @@ public enum Tokens { } } + /// A line limit for texts. public enum LineLimit { + /// Sets the line limit to 1. case one + /// Sets the line limit to 2. case two + /// Sets the line limit to 3. case three + /// Sets the line limit to a custom value. case custom(String) var value: String { + switch self { case .one: return "one" @@ -1614,4 +1539,63 @@ public enum Tokens { } } } + + /// A alignment for the frame + public enum FrameAlignment { + + /// Aligns the frame on the left side. + case leading + /// Aligns the frame in the middle. + case center + /// Aligns the frame on the right side. + case trailing + /// Aligns the frame to a custom alignment. + case custom(String) + + var value: String { + + switch self { + case .leading: + return "leading" + + case .center: + return "center" + + case .trailing: + return "trailing" + + case .custom(let string): + return string + } + } + } + + /// A font family for text. + public enum FontFamily { + + /// Sets the font of the text to Arial. + case arial + /// Sets the font of the text to Helvetica. + case helvetica + /// Sets the font of the text to Verdana. + case verdana + case custom(String) + + var value: String { + + switch self { + case .arial: + return "arial" + + case .helvetica: + return "helvetica" + + case .verdana: + return "verdana" + + case .custom(let string): + return string + } + } + } } diff --git a/Sources/HTMLKitComponents/Validator.swift b/Sources/HTMLKitComponents/Validator.swift index 6b74e4b3..fe3d7fc0 100644 --- a/Sources/HTMLKitComponents/Validator.swift +++ b/Sources/HTMLKitComponents/Validator.swift @@ -12,16 +12,12 @@ public struct Validator: Encodable { /// The field must have a value. case value = "value" - /// The field must have a valid email format. case email = "email" - /// The field must have a valid number format. case number = "number" - /// The field must have a valid date format. case date = "date" - /// The field must have a valid url format. case url = "url" } diff --git a/Tests/HTMLKitComponentsTests/ComponentTests.swift b/Tests/HTMLKitComponentsTests/ComponentTests.swift index d8db5bc3..69ba0e22 100644 --- a/Tests/HTMLKitComponentsTests/ComponentTests.swift +++ b/Tests/HTMLKitComponentsTests/ComponentTests.swift @@ -306,19 +306,6 @@ final class ComponentTests: XCTestCase { ) } - func testListRow() throws { - - let view = TestView { - ListRow {} - } - - XCTAssertEqual(try renderer.render(view: view), - """ -
  • - """ - ) - } - func testLink() throws { let view = TestView { @@ -342,7 +329,7 @@ final class ComponentTests: XCTestCase { XCTAssertEqual(try renderer.render(view: view), """ -
    +
    """ ) } @@ -355,7 +342,7 @@ final class ComponentTests: XCTestCase { XCTAssertEqual(try renderer.render(view: view), """ -
    +
    """ ) } @@ -383,7 +370,7 @@ final class ComponentTests: XCTestCase { XCTAssertEqual(try renderer.render(view: view), """ -

    Text

    +

    Text

    """ ) } @@ -496,12 +483,12 @@ final class ComponentTests: XCTestCase { func testScrollView() throws { let view = TestView { - ScrollView(direction: .horizontal) {} + Scroll(showIndicators: false) {} } XCTAssertEqual(try renderer.render(view: view), """ -
    +
    """ ) } @@ -509,7 +496,7 @@ final class ComponentTests: XCTestCase { func testSymbol() throws { let view = TestView { - Symbol(system: "folder") + Symbol(system: .folder) } XCTAssertEqual(try renderer.render(view: view), diff --git a/Tests/HTMLKitComponentsTests/InteractionTests.swift b/Tests/HTMLKitComponentsTests/InteractionTests.swift index 3e9a03e3..f2890c10 100644 --- a/Tests/HTMLKitComponentsTests/InteractionTests.swift +++ b/Tests/HTMLKitComponentsTests/InteractionTests.swift @@ -25,7 +25,7 @@ final class InteractionTests: XCTestCase { XCTAssertEqual(try renderer.render(view: view), """ -

    Example

    \ +

    Example

    \