feat(13-03): port select + form-field components with CSS and helpers (GREEN)
- select_helpers.go: 9 helper functions verbatim from go-backend - select.templ: SelectProps/SelectOption structs, inline JS with __uiSelectInitAll and htmx:afterSwap re-init listener (Pitfall 6) - select.css: .ui-select-control (min-height 44px), .ui-select-menu (max-height 16rem) - form_field.templ: FormFieldProps with Label/For/Field/Error/Hint; conditional regions - form-field.css: .ui-form-field/.ui-form-label/.ui-form-hint/.ui-form-error - tailwind.input.css: add @import for select.css and form-field.css - All 6 TestSelect/TestFormField tests passing; full go test ./... is green
This commit is contained in:
Arthur Belleville
parent
50e3fb0021
commit
52fb77d4f8
6 changed files with 559 additions and 0 deletions
22
backend/internal/web/ui/form-field.css
Normal file
22
backend/internal/web/ui/form-field.css
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
.ui-form-field {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-form-label {
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-form-hint {
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-form-error {
|
||||||
|
color: var(--color-status-danger-foreground);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
26
backend/internal/web/ui/form_field.templ
Normal file
26
backend/internal/web/ui/form_field.templ
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
package ui
|
||||||
|
|
||||||
|
type FormFieldProps struct {
|
||||||
|
Label string
|
||||||
|
For string
|
||||||
|
Field templ.Component
|
||||||
|
Error string
|
||||||
|
Hint string
|
||||||
|
}
|
||||||
|
|
||||||
|
templ FormField(props FormFieldProps) {
|
||||||
|
<div class="ui-form-field">
|
||||||
|
if props.Label != "" {
|
||||||
|
<label for={ props.For } class="ui-form-label">{ props.Label }</label>
|
||||||
|
}
|
||||||
|
if props.Field != nil {
|
||||||
|
@props.Field
|
||||||
|
}
|
||||||
|
if props.Hint != "" {
|
||||||
|
<p class="ui-form-hint">{ props.Hint }</p>
|
||||||
|
}
|
||||||
|
if props.Error != "" {
|
||||||
|
<p class="ui-form-error">{ props.Error }</p>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
154
backend/internal/web/ui/select.css
Normal file
154
backend/internal/web/ui/select.css
Normal file
|
|
@ -0,0 +1,154 @@
|
||||||
|
.ui-select {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select-native {
|
||||||
|
height: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select-control {
|
||||||
|
align-items: center;
|
||||||
|
appearance: none;
|
||||||
|
background: var(--color-surface-default);
|
||||||
|
border: 1px solid var(--color-border-default);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
min-height: 44px;
|
||||||
|
padding: 0.55rem 0.75rem 0.55rem 0.95rem;
|
||||||
|
text-align: left;
|
||||||
|
transition:
|
||||||
|
border-color 0.2s ease,
|
||||||
|
box-shadow 0.2s ease;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select-control:focus-visible {
|
||||||
|
border-color: var(--color-brand-focus);
|
||||||
|
box-shadow: 0 0 0 3px var(--color-focus-ring-strong);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select-control:disabled {
|
||||||
|
color: var(--color-text-faint);
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select-value-wrapper {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.35rem;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select-placeholder {
|
||||||
|
color: var(--color-text-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select-chip {
|
||||||
|
background: var(--color-surface-muted);
|
||||||
|
border-radius: 999px;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
display: inline-flex;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 0.35rem 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select-arrow-zone {
|
||||||
|
align-items: center;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
display: inline-flex;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select-arrow-icon {
|
||||||
|
height: 1rem;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
width: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select.is-open .ui-select-arrow-icon {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select-menu {
|
||||||
|
background: var(--color-surface-default);
|
||||||
|
border: 1px solid var(--color-border-default);
|
||||||
|
border-radius: 0.9rem;
|
||||||
|
box-shadow: var(--shadow-surface-md);
|
||||||
|
display: grid;
|
||||||
|
gap: 0.25rem;
|
||||||
|
left: 0;
|
||||||
|
margin-top: 0.45rem;
|
||||||
|
max-height: 16rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 0.4rem;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 100%;
|
||||||
|
z-index: 30;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select-menu[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select-option {
|
||||||
|
align-items: center;
|
||||||
|
appearance: none;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0.7rem;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
font: inherit;
|
||||||
|
gap: 0.75rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.7rem 0.8rem;
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select-option:hover,
|
||||||
|
.ui-select-option:focus-visible {
|
||||||
|
background: var(--color-surface-muted);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select-option.is-selected {
|
||||||
|
background: var(--color-status-info-soft-bg);
|
||||||
|
color: var(--color-text-brand);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select-option:disabled {
|
||||||
|
color: var(--color-text-faint);
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select-option-text {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select-option-check {
|
||||||
|
color: currentColor;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-select-option.is-selected .ui-select-option-check {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
251
backend/internal/web/ui/select.templ
Normal file
251
backend/internal/web/ui/select.templ
Normal file
|
|
@ -0,0 +1,251 @@
|
||||||
|
package ui
|
||||||
|
|
||||||
|
type SelectOption struct {
|
||||||
|
Value string
|
||||||
|
Label string
|
||||||
|
Disabled bool
|
||||||
|
}
|
||||||
|
|
||||||
|
type SelectProps struct {
|
||||||
|
ID string
|
||||||
|
Name string
|
||||||
|
Placeholder string
|
||||||
|
Value string
|
||||||
|
Values []string
|
||||||
|
Multiple bool
|
||||||
|
Options []SelectOption
|
||||||
|
Attrs templ.Attributes
|
||||||
|
}
|
||||||
|
|
||||||
|
templ Select(props SelectProps) {
|
||||||
|
<div
|
||||||
|
class="ui-select"
|
||||||
|
data-ui-select-root
|
||||||
|
data-ui-select-multiple={ selectBoolData(props.Multiple) }
|
||||||
|
data-placeholder={ selectPlaceholder(props) }
|
||||||
|
data-selected-label={ selectSelectedLabel(props) }
|
||||||
|
>
|
||||||
|
<select
|
||||||
|
id={ selectNativeID(props.ID, props.Name) }
|
||||||
|
name={ props.Name }
|
||||||
|
class="ui-select-native"
|
||||||
|
data-ui-select-native
|
||||||
|
if props.Multiple {
|
||||||
|
multiple
|
||||||
|
}
|
||||||
|
{ props.Attrs... }
|
||||||
|
>
|
||||||
|
if !props.Multiple && selectPlaceholder(props) != "" {
|
||||||
|
<option value="">{ selectPlaceholder(props) }</option>
|
||||||
|
}
|
||||||
|
for _, option := range props.Options {
|
||||||
|
<option
|
||||||
|
value={ option.Value }
|
||||||
|
if option.Disabled {
|
||||||
|
disabled
|
||||||
|
}
|
||||||
|
if selectOptionSelected(props, option.Value) {
|
||||||
|
selected
|
||||||
|
}
|
||||||
|
>{ option.Label }</option>
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
<button
|
||||||
|
id={ inputID(props.ID, props.Name) }
|
||||||
|
type="button"
|
||||||
|
class="ui-select-control"
|
||||||
|
data-ui-select-trigger
|
||||||
|
aria-haspopup="listbox"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-controls={ selectMenuID(props.ID, props.Name) }
|
||||||
|
if selectIsDisabled(props.Attrs) {
|
||||||
|
disabled
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span class="ui-select-value-wrapper" data-ui-select-label>
|
||||||
|
if props.Multiple {
|
||||||
|
if len(selectSelectedLabels(props)) == 0 {
|
||||||
|
<span class="ui-select-placeholder">{ selectPlaceholder(props) }</span>
|
||||||
|
} else {
|
||||||
|
for _, label := range selectSelectedLabels(props) {
|
||||||
|
<span class="ui-select-chip">{ label }</span>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if selectSelectedLabel(props) != "" {
|
||||||
|
{ selectSelectedLabel(props) }
|
||||||
|
} else {
|
||||||
|
<span class="ui-select-placeholder">{ selectPlaceholder(props) }</span>
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
<span class="ui-select-arrow-zone">
|
||||||
|
<svg class="ui-select-arrow-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
|
<path d="m6 9 6 6 6-6"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
id={ selectMenuID(props.ID, props.Name) }
|
||||||
|
class="ui-select-menu"
|
||||||
|
data-ui-select-menu
|
||||||
|
role="listbox"
|
||||||
|
if props.Multiple {
|
||||||
|
aria-multiselectable="true"
|
||||||
|
}
|
||||||
|
hidden
|
||||||
|
>
|
||||||
|
for _, option := range props.Options {
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class={ selectMenuOptionClass(selectOptionSelected(props, option.Value), option.Disabled) }
|
||||||
|
data-ui-select-option
|
||||||
|
data-value={ option.Value }
|
||||||
|
data-label={ option.Label }
|
||||||
|
role="option"
|
||||||
|
aria-selected={ selectBoolData(selectOptionSelected(props, option.Value)) }
|
||||||
|
if option.Disabled {
|
||||||
|
disabled
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span class="ui-select-option-text">{ option.Label }</span>
|
||||||
|
<span class="ui-select-option-check" aria-hidden="true">✓</span>
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
if (!window.__uiSelectInitAll) {
|
||||||
|
window.__uiSelectSetOpen = function (root, open) {
|
||||||
|
var trigger = root.querySelector("[data-ui-select-trigger]");
|
||||||
|
var menu = root.querySelector("[data-ui-select-menu]");
|
||||||
|
if (!trigger || !menu) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
root.classList.toggle("is-open", open);
|
||||||
|
trigger.setAttribute("aria-expanded", open ? "true" : "false");
|
||||||
|
menu.hidden = !open;
|
||||||
|
};
|
||||||
|
|
||||||
|
window.__uiSelectCloseAll = function (exceptRoot) {
|
||||||
|
document.querySelectorAll("[data-ui-select-root].is-open").forEach(function (root) {
|
||||||
|
if (root !== exceptRoot) {
|
||||||
|
window.__uiSelectSetOpen(root, false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
window.__uiSelectSync = function (root) {
|
||||||
|
var nativeSelect = root.querySelector("[data-ui-select-native]");
|
||||||
|
var outlet = root.querySelector("[data-ui-select-label]");
|
||||||
|
var placeholder = root.getAttribute("data-placeholder") || "";
|
||||||
|
var multiple = root.getAttribute("data-ui-select-multiple") === "true";
|
||||||
|
if (!nativeSelect || !outlet) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var labels = Array.from(nativeSelect.options).filter(function (option) {
|
||||||
|
return option.selected && option.value !== "";
|
||||||
|
}).map(function (option) {
|
||||||
|
return option.textContent;
|
||||||
|
});
|
||||||
|
|
||||||
|
root.setAttribute("data-selected-label", labels.join(", "));
|
||||||
|
outlet.innerHTML = "";
|
||||||
|
|
||||||
|
if (labels.length === 0) {
|
||||||
|
var placeholderNode = document.createElement("span");
|
||||||
|
placeholderNode.className = "ui-select-placeholder";
|
||||||
|
placeholderNode.textContent = placeholder;
|
||||||
|
outlet.appendChild(placeholderNode);
|
||||||
|
} else if (multiple) {
|
||||||
|
labels.forEach(function (label) {
|
||||||
|
var chip = document.createElement("span");
|
||||||
|
chip.className = "ui-select-chip";
|
||||||
|
chip.textContent = label;
|
||||||
|
outlet.appendChild(chip);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
outlet.textContent = labels[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
root.querySelectorAll("[data-ui-select-option]").forEach(function (optionButton) {
|
||||||
|
var selected = Array.from(nativeSelect.options).some(function (option) {
|
||||||
|
return option.value === optionButton.getAttribute("data-value") && option.selected;
|
||||||
|
});
|
||||||
|
optionButton.classList.toggle("is-selected", selected);
|
||||||
|
optionButton.setAttribute("aria-selected", selected ? "true" : "false");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
window.__uiSelectToggleValue = function (root, optionButton) {
|
||||||
|
var nativeSelect = root.querySelector("[data-ui-select-native]");
|
||||||
|
var multiple = root.getAttribute("data-ui-select-multiple") === "true";
|
||||||
|
var value = optionButton.getAttribute("data-value");
|
||||||
|
if (!nativeSelect || value === null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
Array.from(nativeSelect.options).forEach(function (option) {
|
||||||
|
if (option.value !== value && !multiple) {
|
||||||
|
option.selected = false;
|
||||||
|
}
|
||||||
|
if (option.value === value) {
|
||||||
|
option.selected = multiple ? !option.selected : true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.__uiSelectSync(root);
|
||||||
|
nativeSelect.dispatchEvent(new Event("change", { bubbles: true }));
|
||||||
|
|
||||||
|
if (!multiple) {
|
||||||
|
window.__uiSelectSetOpen(root, false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.__uiSelectInitAll = function (scope) {
|
||||||
|
(scope || document).querySelectorAll("[data-ui-select-root]").forEach(function (root) {
|
||||||
|
window.__uiSelectSync(root);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener("click", function (event) {
|
||||||
|
var optionButton = event.target.closest("[data-ui-select-option]");
|
||||||
|
if (optionButton) {
|
||||||
|
var optionRoot = optionButton.closest("[data-ui-select-root]");
|
||||||
|
if (optionRoot) {
|
||||||
|
window.__uiSelectToggleValue(optionRoot, optionButton);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var trigger = event.target.closest("[data-ui-select-trigger]");
|
||||||
|
if (trigger) {
|
||||||
|
var root = trigger.closest("[data-ui-select-root]");
|
||||||
|
var shouldOpen = root && !root.classList.contains("is-open");
|
||||||
|
window.__uiSelectCloseAll(root);
|
||||||
|
if (root) {
|
||||||
|
window.__uiSelectSetOpen(root, shouldOpen);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!event.target.closest("[data-ui-select-root]")) {
|
||||||
|
window.__uiSelectCloseAll(null);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("keydown", function (event) {
|
||||||
|
if (event.key === "Escape") {
|
||||||
|
window.__uiSelectCloseAll(null);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("htmx:afterSwap", function (event) {
|
||||||
|
window.__uiSelectInitAll(event.target);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
window.__uiSelectInitAll(document);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
104
backend/internal/web/ui/select_helpers.go
Normal file
104
backend/internal/web/ui/select_helpers.go
Normal file
|
|
@ -0,0 +1,104 @@
|
||||||
|
package ui
|
||||||
|
|
||||||
|
import (
|
||||||
|
"strings"
|
||||||
|
|
||||||
|
"github.com/a-h/templ"
|
||||||
|
)
|
||||||
|
|
||||||
|
func selectPlaceholder(props SelectProps) string {
|
||||||
|
if props.Placeholder != "" {
|
||||||
|
return props.Placeholder
|
||||||
|
}
|
||||||
|
if props.Multiple {
|
||||||
|
return "Select values"
|
||||||
|
}
|
||||||
|
return "Select an option"
|
||||||
|
}
|
||||||
|
|
||||||
|
func selectNativeID(id string, name string) string {
|
||||||
|
baseID := inputID(id, name)
|
||||||
|
if baseID == "" {
|
||||||
|
return "ui-select-native"
|
||||||
|
}
|
||||||
|
return baseID + "-native"
|
||||||
|
}
|
||||||
|
|
||||||
|
func selectMenuID(id string, name string) string {
|
||||||
|
baseID := inputID(id, name)
|
||||||
|
if baseID == "" {
|
||||||
|
return "ui-select-menu"
|
||||||
|
}
|
||||||
|
return baseID + "-menu"
|
||||||
|
}
|
||||||
|
|
||||||
|
func selectBoolData(value bool) string {
|
||||||
|
if value {
|
||||||
|
return "true"
|
||||||
|
}
|
||||||
|
return "false"
|
||||||
|
}
|
||||||
|
|
||||||
|
func selectSelectedValues(props SelectProps) []string {
|
||||||
|
if props.Multiple {
|
||||||
|
return props.Values
|
||||||
|
}
|
||||||
|
if props.Value == "" {
|
||||||
|
return nil
|
||||||
|
}
|
||||||
|
return []string{props.Value}
|
||||||
|
}
|
||||||
|
|
||||||
|
func selectOptionSelected(props SelectProps, value string) bool {
|
||||||
|
for _, selected := range selectSelectedValues(props) {
|
||||||
|
if selected == value {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
func selectSelectedLabels(props SelectProps) []string {
|
||||||
|
var labels []string
|
||||||
|
for _, option := range props.Options {
|
||||||
|
if selectOptionSelected(props, option.Value) {
|
||||||
|
labels = append(labels, option.Label)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return labels
|
||||||
|
}
|
||||||
|
|
||||||
|
func selectSelectedLabel(props SelectProps) string {
|
||||||
|
return strings.Join(selectSelectedLabels(props), ", ")
|
||||||
|
}
|
||||||
|
|
||||||
|
func selectMenuOptionClass(selected bool, disabled bool) string {
|
||||||
|
className := "ui-select-option"
|
||||||
|
if selected {
|
||||||
|
className += " is-selected"
|
||||||
|
}
|
||||||
|
if disabled {
|
||||||
|
className += " is-disabled"
|
||||||
|
}
|
||||||
|
return className
|
||||||
|
}
|
||||||
|
|
||||||
|
func selectIsDisabled(attrs templ.Attributes) bool {
|
||||||
|
if attrs == nil {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
value, ok := attrs["disabled"]
|
||||||
|
if !ok {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
switch typed := value.(type) {
|
||||||
|
case bool:
|
||||||
|
return typed
|
||||||
|
case string:
|
||||||
|
return typed != "" && typed != "false"
|
||||||
|
default:
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -11,3 +11,5 @@
|
||||||
@import "./internal/web/ui/card.css";
|
@import "./internal/web/ui/card.css";
|
||||||
@import "./internal/web/ui/input.css";
|
@import "./internal/web/ui/input.css";
|
||||||
@import "./internal/web/ui/textarea.css";
|
@import "./internal/web/ui/textarea.css";
|
||||||
|
@import "./internal/web/ui/select.css";
|
||||||
|
@import "./internal/web/ui/form-field.css";
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue