michael/swift-duct-calc
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Adds multi-select option for selecting rooms in trunk sizing form.

Browse Source
This commit is contained in:
Michael Housh
2026-02-09 11:55:11 -05:00
parent e4ddec0d53
commit 5a7cf4714b
9 changed files with 3401 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -14,4 +14,4 @@ tailwindcss
.env
.env*
default.profraw
./rooms.csv
/rooms.csv

314
Public/css/output.css
View File

@@ -7,9 +7,7 @@
'Noto Color Emoji';
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace;
--color-amber-300: oklch(87.9% 0.169 91.605);
--color-green-400: oklch(79.2% 0.209 151.711);
--color-sky-300: oklch(82.8% 0.111 230.318);
--color-sky-600: oklch(58.8% 0.158 241.966);
--color-violet-600: oklch(54.1% 0.281 293.009);
--color-gray-200: oklch(92.8% 0.006 264.531);
@@ -17,12 +15,12 @@
--color-black: #000;
--color-white: #fff;
--spacing: 0.25rem;
--container-md: 28rem;
--container-lg: 32rem;
--text-xs: 0.75rem;
--text-xs--line-height: calc(1 / 0.75);
--text-sm: 0.875rem;
--text-sm--line-height: calc(1.25 / 0.875);
--text-base: 1rem;
--text-base--line-height: calc(1.5 / 1);
--text-lg: 1.125rem;
--text-lg--line-height: calc(1.75 / 1.125);
--text-xl: 1.25rem;
@@ -41,7 +39,6 @@
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-3xl: 1.5rem;
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1701,6 +1698,9 @@
opacity: 40%;
}
}
.pointer-events-none {
pointer-events: none;
}
.react-day-picker {
@layer daisyui.l1.l2.l3 {
user-select: none;
@@ -4232,18 +4232,12 @@
--toast-y: 0;
}
}
.top-0 {
top: calc(var(--spacing) * 0);
}
.top-2 {
top: calc(var(--spacing) * 2);
}
.top-10 {
top: calc(var(--spacing) * 10);
}
.top-20 {
top: calc(var(--spacing) * 20);
}
.right-2 {
right: calc(var(--spacing) * 2);
}
@@ -4307,21 +4301,12 @@
.bottom-0 {
bottom: calc(var(--spacing) * 0);
}
.-left-10 {
left: calc(var(--spacing) * -10);
}
.-left-15 {
left: calc(var(--spacing) * -15);
}
.-left-20 {
left: calc(var(--spacing) * -20);
}
.left-0 {
left: calc(var(--spacing) * 0);
}
.left-10 {
left: calc(var(--spacing) * 10);
}
.join {
display: inline-flex;
align-items: stretch;
@@ -4711,6 +4696,9 @@
.z-1 {
z-index: 1;
}
.z-50 {
z-index: 50;
}
.tab-content {
@layer daisyui.l1.l2.l3 {
order: var(--tabcontent-order);
@@ -5314,9 +5302,6 @@
}
}
}
.mx-10 {
margin-inline: calc(var(--spacing) * 10);
}
.mx-20 {
margin-inline: calc(var(--spacing) * 20);
}
@@ -5409,9 +5394,6 @@
}
}
}
.my-1 {
margin-block: calc(var(--spacing) * 1);
}
.my-1\.5 {
margin-block: calc(var(--spacing) * 1.5);
}
@@ -5681,9 +5663,6 @@
.-mt-2 {
margin-top: calc(var(--spacing) * -2);
}
.mt-1 {
margin-top: calc(var(--spacing) * 1);
}
.mt-2 {
margin-top: calc(var(--spacing) * 2);
}
@@ -5699,12 +5678,6 @@
.mt-10 {
margin-top: calc(var(--spacing) * 10);
}
.mt-20 {
margin-top: calc(var(--spacing) * 20);
}
.mt-60 {
margin-top: calc(var(--spacing) * 60);
}
.breadcrumbs {
@layer daisyui.l1.l2.l3 {
max-width: 100%;
@@ -5761,6 +5734,9 @@
}
}
}
.mr-2 {
margin-right: calc(var(--spacing) * 2);
}
.fieldset-legend {
@layer daisyui.l1.l2.l3 {
margin-bottom: calc(0.25rem * -1);
@@ -5781,6 +5757,9 @@
font-weight: 600;
}
}
.mb-2 {
margin-bottom: calc(var(--spacing) * 2);
}
.mb-4 {
margin-bottom: calc(var(--spacing) * 4);
}
@@ -6505,6 +6484,33 @@
}
}
}
.\!h-auto {
height: auto !important;
}
.h-3 {
height: calc(var(--spacing) * 3);
}
.h-4 {
height: calc(var(--spacing) * 4);
}
.h-5 {
height: calc(var(--spacing) * 5);
}
.h-6 {
height: calc(var(--spacing) * 6);
}
.h-8 {
height: calc(var(--spacing) * 8);
}
.h-10 {
height: calc(var(--spacing) * 10);
}
.h-12 {
height: calc(var(--spacing) * 12);
}
.h-14 {
height: calc(var(--spacing) * 14);
}
.h-\[1em\] {
height: 1em;
}
@@ -6514,6 +6520,21 @@
.h-full {
height: 100%;
}
.min-h-6 {
min-height: calc(var(--spacing) * 6);
}
.min-h-8 {
min-height: calc(var(--spacing) * 8);
}
.min-h-10 {
min-height: calc(var(--spacing) * 10);
}
.min-h-12 {
min-height: calc(var(--spacing) * 12);
}
.min-h-14 {
min-height: calc(var(--spacing) * 14);
}
.min-h-\[400px\] {
min-height: 400px;
}
@@ -6648,8 +6669,17 @@
width: calc(var(--size-selector, 0.25rem) * 4);
}
}
.w-\[200px\] {
width: 200px;
.w-3 {
width: calc(var(--spacing) * 3);
}
.w-4 {
width: calc(var(--spacing) * 4);
}
.w-5 {
width: calc(var(--spacing) * 5);
}
.w-6 {
width: calc(var(--spacing) * 6);
}
.w-\[250px\] {
width: 250px;
@@ -6663,8 +6693,11 @@
.w-full {
width: 100%;
}
.min-w-\[80\%\] {
min-width: 80%;
.w-px {
width: 1px;
}
.min-w-0 {
min-width: calc(var(--spacing) * 0);
}
.min-w-\[200px\] {
min-width: 200px;
@@ -6684,6 +6717,12 @@
.flex-shrink {
flex-shrink: 1;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.shrink-0 {
flex-shrink: 0;
}
.flex-grow {
flex-grow: 1;
}
@@ -6709,9 +6748,6 @@
.-rotate-45 {
rotate: calc(45deg * -1);
}
.rotate-45 {
rotate: 45deg;
}
.rotate-180 {
rotate: 180deg;
}
@@ -6770,6 +6806,12 @@
}
}
}
.cursor-not-allowed {
cursor: not-allowed;
}
.cursor-pointer {
cursor: pointer;
}
.resize {
resize: both;
}
@@ -6889,12 +6931,12 @@
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-baseline {
align-items: baseline;
}
.items-center {
align-items: center;
}
@@ -6916,12 +6958,18 @@
.justify-start {
justify-content: flex-start;
}
.gap-0 {
gap: calc(var(--spacing) * 0);
}
.gap-1 {
gap: calc(var(--spacing) * 1);
}
.gap-2 {
gap: calc(var(--spacing) * 2);
}
.gap-3 {
gap: calc(var(--spacing) * 3);
}
.gap-4 {
gap: calc(var(--spacing) * 4);
}
@@ -6960,6 +7008,9 @@
margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
}
}
.gap-x-2 {
column-gap: calc(var(--spacing) * 2);
}
.space-x-2 {
:where(& > :not(:last-child)) {
--tw-space-x-reverse: 0;
@@ -7072,6 +7123,9 @@
}
}
}
.rounded {
border-radius: 0.25rem;
}
.rounded-3xl {
border-radius: var(--radius-3xl);
}
@@ -7087,6 +7141,9 @@
.rounded-field {
border-radius: var(--radius-field);
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
.rounded-lg {
border-radius: var(--radius-lg);
}
@@ -7290,10 +7347,6 @@
border-bottom-style: var(--tw-border-style);
border-bottom-width: 6px;
}
.border-b-8 {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 8px;
}
.badge-dash {
@layer daisyui.l1.l2 {
color: var(--badge-color);
@@ -7406,6 +7459,9 @@
.border-accent {
border-color: var(--color-accent);
}
.border-base-300 {
border-color: var(--color-base-300);
}
.border-error {
border-color: var(--color-error);
}
@@ -7415,11 +7471,8 @@
.border-primary {
border-color: var(--color-primary);
}
.border-secondary {
border-color: var(--color-secondary);
}
.border-sky-600 {
border-color: var(--color-sky-600);
.border-success {
border-color: var(--color-success);
}
.menu-active {
:where(:not(ul, details, .menu-title, .btn))& {
@@ -7578,18 +7631,15 @@
.bg-base-300 {
background-color: var(--color-base-300);
}
.bg-current {
background-color: currentcolor;
}
.bg-error {
background-color: var(--color-error);
}
.bg-primary {
background-color: var(--color-primary);
}
.bg-secondary {
background-color: var(--color-secondary);
}
.bg-violet-600 {
background-color: var(--color-violet-600);
}
.divider-accent {
@layer daisyui.l1.l2 {
&:before, &:after {
@@ -7799,18 +7849,12 @@
}
}
}
.mask-contain {
mask-size: contain;
}
.mask-clip-border {
mask-clip: border-box;
}
.mask-clip-content {
mask-clip: content-box;
}
.mask-repeat {
mask-repeat: repeat;
}
.stroke-current {
stroke: currentcolor;
}
.checkbox-lg {
@layer daisyui.l1.l2 {
padding: 0.3125rem;
@@ -7881,9 +7925,24 @@
}
}
}
.\!p-1\.5 {
padding: calc(var(--spacing) * 1.5) !important;
}
.p-1 {
padding: calc(var(--spacing) * 1);
}
.p-1\.5 {
padding: calc(var(--spacing) * 1.5);
}
.p-2 {
padding: calc(var(--spacing) * 2);
}
.p-2\.5 {
padding: calc(var(--spacing) * 2.5);
}
.p-3 {
padding: calc(var(--spacing) * 3);
}
.p-4 {
padding: calc(var(--spacing) * 4);
}
@@ -8007,12 +8066,27 @@
}
}
}
.\!px-0 {
padding-inline: calc(var(--spacing) * 0) !important;
}
.\!px-3 {
padding-inline: calc(var(--spacing) * 3) !important;
}
.px-2 {
padding-inline: calc(var(--spacing) * 2);
}
.px-3 {
padding-inline: calc(var(--spacing) * 3);
}
.px-4 {
padding-inline: calc(var(--spacing) * 4);
}
.px-6 {
padding-inline: calc(var(--spacing) * 6);
}
.py-1 {
padding-block: calc(var(--spacing) * 1);
}
.py-2 {
padding-block: calc(var(--spacing) * 2);
}
@@ -8045,6 +8119,9 @@
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.file-input-lg {
@layer daisyui.l1.l2 {
--size: calc(var(--size-field, 0.25rem) * 12);
@@ -8093,10 +8170,6 @@
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-4xl {
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--text-4xl--line-height));
}
.text-5xl {
font-size: var(--text-5xl);
line-height: var(--tw-leading, var(--text-5xl--line-height));
@@ -8105,6 +8178,10 @@
font-size: var(--text-8xl);
line-height: var(--tw-leading, var(--text-8xl--line-height));
}
.text-base {
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
}
.text-lg {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -8675,9 +8752,6 @@
color: var(--color-warning);
}
}
.text-accent {
color: var(--color-accent);
}
.text-base-content {
color: var(--color-base-content);
}
@@ -8696,9 +8770,6 @@
.text-primary {
color: var(--color-primary);
}
.text-secondary {
color: var(--color-secondary);
}
.text-success {
color: var(--color-success);
}
@@ -8763,9 +8834,18 @@
}
}
}
.opacity-0 {
opacity: 0%;
}
.opacity-30 {
opacity: 30%;
}
.opacity-50 {
opacity: 50%;
}
.opacity-60 {
opacity: 60%;
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -8818,6 +8898,16 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-transform {
transition-property: transform, translate, scale, rotate;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.ease-in-out {
--tw-ease: var(--ease-in-out);
transition-timing-function: var(--ease-in-out);
@@ -9573,6 +9663,44 @@
}
}
}
.hover\:opacity-75 {
&:hover {
@media (hover: hover) {
opacity: 75%;
}
}
}
.hover\:opacity-100 {
&:hover {
@media (hover: hover) {
opacity: 100%;
}
}
}
.focus\:\!bg-transparent {
&:focus {
background-color: transparent !important;
}
}
.focus\:outline-none {
&:focus {
--tw-outline-style: none;
outline-style: none;
}
}
.active\:scale-100 {
&:active {
--tw-scale-x: 100%;
--tw-scale-y: 100%;
--tw-scale-z: 100%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
}
.active\:\!bg-transparent {
&:active {
background-color: transparent !important;
}
}
.data-active\:bg-neutral {
&[data-active] {
background-color: var(--color-neutral);
@@ -9661,11 +9789,6 @@
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.dark\:bg-base-300 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-base-300);
}
}
.is-drawer-close\:mx-auto {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
margin-inline: auto;
@@ -9705,11 +9828,6 @@
overflow: visible;
}
}
.is-drawer-close\:text-error {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
color: var(--color-error);
}
}
.is-drawer-close\:text-green-400 {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
color: var(--color-green-400);
@@ -11297,6 +11415,21 @@
syntax: "*";
inherits: false;
}
@property --tw-scale-x {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-y {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-z {
syntax: "*";
inherits: false;
initial-value: 1;
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
@@ -11352,6 +11485,9 @@
--tw-backdrop-saturate: initial;
--tw-backdrop-sepia: initial;
--tw-ease: initial;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
}
}
}

3090
Public/js/daisy-multiselect.js Normal file
View File

File diff suppressed because it is too large Load Diff

46
Sources/Styleguide/MultiSelect.swift Normal file
View File

@@ -0,0 +1,46 @@
import Elementary
extension HTMLTag {
public enum daisyMultiSelect: HTMLTrait.Paired { public static let name = "daisy-multiselect" }
}
public typealias daisyMultiSelect<Content: HTML> = HTMLElement<HTMLTag.daisyMultiSelect, Content>
extension HTMLTrait.Attributes {
public protocol chipStyle {}
public protocol showSelectAll {}
public protocol showClear {}
public protocol virtualScroll {}
}
extension HTMLAttribute where Tag: HTMLTrait.Attributes.chipStyle {
public static var chipStyle: Self {
HTMLAttribute(name: "chip-style", value: nil)
}
}
extension HTMLAttribute where Tag: HTMLTrait.Attributes.showSelectAll {
public static var showSelectAll: Self {
HTMLAttribute(name: "show-select-all", value: nil)
}
}
extension HTMLAttribute where Tag: HTMLTrait.Attributes.showClear {
public static var showClear: Self {
HTMLAttribute(name: "show-clear", value: nil)
}
}
extension HTMLAttribute where Tag: HTMLTrait.Attributes.virtualScroll {
public static var virtualScroll: Self {
HTMLAttribute(name: "virtual-scroll", value: nil)
}
}
extension HTMLTag.daisyMultiSelect: HTMLTrait.Attributes.required {}
extension HTMLTag.daisyMultiSelect: HTMLTrait.Attributes.disabled {}
extension HTMLTag.daisyMultiSelect: HTMLTrait.Attributes.placeholder {}
extension HTMLTag.daisyMultiSelect: HTMLTrait.Attributes.name {}
extension HTMLTag.daisyMultiSelect: HTMLTrait.Attributes.chipStyle {}
extension HTMLTag.daisyMultiSelect: HTMLTrait.Attributes.showSelectAll {}
extension HTMLTag.daisyMultiSelect: HTMLTrait.Attributes.showClear {}
extension HTMLTag.daisyMultiSelect: HTMLTrait.Attributes.virtualScroll {}

5
Sources/ViewController/Live.swift
View File

@@ -17,7 +17,7 @@ extension ViewController.Request {
@Dependency(\.pdfClient) var pdfClient
switch route {
case .home:
case .home:
return await view {
HomeView()
}
@@ -104,7 +104,7 @@ extension ViewController.Request {
let inner = await inner()
let theme = await self.theme
return MainPage(displayFooter: displayFooter, theme: theme) {
return MainPage(displayFooter: displayFooter, theme: theme ?? .default) {
inner
}
}
@@ -605,6 +605,7 @@ extension SiteRoute.View.ProjectRoute.DuctSizingRoute {
try await database.trunkSizes.delete(id)
}
case .submit(let form):
request.logger.debug("Trunk Form: \(form)")
return await view(on: request, projectID: projectID) {
_ = try await database.trunkSizes.create(
form.toCreate(logger: request.logger)

44
Sources/ViewController/Views/DuctSizing/TrunkSizeForm.swift
View File

@@ -39,6 +39,7 @@ struct TrunkSizeForm: HTML, Sendable {
}
var body: some HTML {
script(.src("/js/daisy-multiselect.js")) {}
ModalForm(id: Self.id(container), dismiss: dismiss) {
h1(.class("text-lg font-bold mb-4")) { "Trunk / Runout Size" }
form(
@@ -77,40 +78,33 @@ struct TrunkSizeForm: HTML, Sendable {
.type(.text),
.name("name"),
.value(trunk?.name),
.placeholder("Trunk-1 (Optional)")
.placeholder("Trunk-1"),
.required
)
div {
h2(.class("label font-bold col-span-3 mb-6")) { "Associated Supply Runs" }
div(
.class(
"""
grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 justify-center items-center gap-4
"""
)
daisyMultiSelect(
.class("z-50 bg-base-200"),
.placeholder("Select rooms"),
.name("rooms"),
.chipStyle,
.showSelectAll,
.showClear,
.required,
.virtualScroll
) {
for room in rooms {
div(.class("block grow")) {
div(.class("grid grid-cols-1 space-y-1")) {
div(.class("flex justify-center")) {
p(.class("label")) { room.roomName }
}
div(.class("flex justify-center")) {
input(
.class("checkbox"),
.type(.checkbox),
.name("rooms"),
.value("\(room.roomID)_\(room.roomRegister)")
)
.attributes(
.checked,
when: trunk == nil ? false : trunk!.rooms.hasRoom(room)
)
}
}
option(.value("\(room.roomID)_\(room.roomRegister)")) {
room.roomName
}
.attributes(
.selected,
when: trunk == nil ? false : trunk!.rooms.hasRoom(room)
)
}
}
}
SubmitButton()

3
Sources/ViewController/Views/Home.swift
View File

@@ -43,7 +43,7 @@ struct HomeView: HTML, Sendable {
header
a(
.class("btn btn-ghost text-md text-primary font-bold italic"),
.href("https://git.housh.dev/michael/swift-manual-d"),
.href("https://git.housh.dev/michael/swift-duct-calc"),
.target(.blank)
) {
"Open source residential duct design program"
@@ -70,6 +70,7 @@ struct HomeView: HTML, Sendable {
}
}
}
}
div(.class("grid grid-cols-1 md:grid-cols-2 gap-4 mx-20 my-6")) {

3
Sources/ViewController/Views/MainPage.swift
View File

@@ -52,6 +52,7 @@ public struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable
script(.src("https://unpkg.com/htmx.org@2.0.8")) {}
script(.src("/js/htmx-download.js")) {}
script(.src("/js/main.js")) {}
script(.src("https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4")) {}
link(.rel(.stylesheet), .href("/css/output.css"))
link(.rel(.stylesheet), .href("/css/htmx.css"))
link(
@@ -104,7 +105,7 @@ public struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable
}
a(
.class("btn btn-ghost"),
.href("https://git.housh.dev/michael/swift-manual-d/src/branch/main/LICENSE"),
.href("https://git.housh.dev/michael/swift-duct-calc/src/branch/main/LICENSE"),
.target(.blank)
) {
"Openly licensed via CC-BY-NC-SA 4.0"

26
Sources/ViewController/Views/Project/ProjectView.swift
View File

@@ -190,25 +190,25 @@ extension ProjectView {
div(.class("flex items-center justify-center")) {
SVG(icon)
}
.attributes(.class("is-drawer-close:text-green-400"), when: isComplete)
.attributes(.class("is-drawer-close:text-error"), when: !isComplete && !hideIsComplete)
.attributes(.class("text-green-400"), when: isComplete)
.attributes(.class("text-error"), when: !isComplete && !hideIsComplete)
div(.class("flex items-center justify-center")) {
span { title }
}
}
if !hideIsComplete {
div(.class("flex grow justify-end items-end is-drawer-close:hidden")) {
if isComplete {
SVG(.badgeCheck)
} else {
SVG(.ban)
}
}
.attributes(.class("text-green-400"), when: isComplete)
.attributes(.class("text-error"), when: !isComplete)
}
// if !hideIsComplete {
// div(.class("flex grow justify-end items-end is-drawer-close:hidden")) {
// if isComplete {
// SVG(.badgeCheck)
// } else {
// SVG(.ban)
// }
// }
// .attributes(.class("text-green-400"), when: isComplete)
// .attributes(.class("text-error"), when: !isComplete)
// }
}
}
}