H0llyW00dzZ/templui
H0llyW00dzZ/templui
1
0
Fork 0
mirror of https://github.com/axzilla/templui.git synced 2025-02-21 00:32:58 +00:00
Code

feat: support setting form component states via attributes and Go props

Browse Source
This commit is contained in:
axzilla 2024-11-29 16:54:53 +07:00
parent fcd2d7eb97
commit 08eba291ff
38 changed files with 595 additions and 355 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
assets/css/output.css
View File

@ -792,10 +792,6 @@ body {
margin-bottom: 2rem;
}
.ml-1 {
margin-left: 0.25rem;
}
.ml-auto {
margin-left: auto;
}
@ -852,10 +848,6 @@ body {
display: none;
}
.aspect-square {
aspect-ratio: 1 / 1;
}
.size-3 {
width: 0.75rem;
height: 0.75rem;
@ -978,10 +970,6 @@ body {
width: 1rem;
}
.w-48 {
width: 12rem;
}
.w-5 {
width: 1.25rem;
}
@ -998,6 +986,10 @@ body {
width: 1.75rem;
}
.w-72 {
width: 18rem;
}
.w-8 {
width: 2rem;
}
@ -1212,6 +1204,10 @@ body {
justify-content: space-between;
}
.gap-1 {
gap: 0.25rem;
}
.gap-2 {
gap: 0.5rem;
}
@ -1384,10 +1380,6 @@ body {
border-color: hsl(var(--primary) / var(--tw-border-opacity));
}
.border-transparent {
border-color: transparent;
}
.bg-\[--theme-primary\] {
background-color: var(--theme-primary);
}
@ -1450,10 +1442,6 @@ body {
background-color: hsl(var(--primary) / var(--tw-bg-opacity));
}
.bg-primary\/90 {
background-color: hsl(var(--primary) / 0.9);
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@ -1513,11 +1501,6 @@ body {
padding: 1.5rem;
}
.px-0\.5 {
padding-left: 0.125rem;
padding-right: 0.125rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
@ -1659,10 +1642,6 @@ body {
font-weight: 500;
}
.font-normal {
font-weight: 400;
}
.font-semibold {
font-weight: 600;
}
@ -1748,11 +1727,6 @@ body {
color: hsl(var(--muted-foreground) / var(--tw-text-opacity));
}
.text-popover-foreground {
--tw-text-opacity: 1;
color: hsl(var(--popover-foreground) / var(--tw-text-opacity));
}
.text-primary {
--tw-text-opacity: 1;
color: hsl(var(--primary) / var(--tw-text-opacity));
@ -1763,6 +1737,11 @@ body {
color: hsl(var(--primary-foreground) / var(--tw-text-opacity));
}
.text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-secondary-foreground {
--tw-text-opacity: 1;
color: hsl(var(--secondary-foreground) / var(--tw-text-opacity));
@ -1785,11 +1764,6 @@ body {
text-underline-offset: 4px;
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
opacity: 0;
}
@ -1802,18 +1776,18 @@ body {
opacity: 0.8;
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@ -1914,10 +1888,6 @@ body {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@ -2297,6 +2267,10 @@ body {
background-color: hsl(var(--secondary) / var(--tw-bg-opacity));
}
.peer:disabled ~ .peer-disabled\:pointer-events-none {
pointer-events: none;
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
cursor: not-allowed;
}

18
internals/ui/pages/button.templ
View File

@ -25,9 +25,21 @@ templ Button() {
ComponentCodeFile: "button.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "States",
ShowcaseFile: showcase.ButtonStates(),
PreviewCodeFile: "button_states.templ",
SectionName: "Full Width",
ShowcaseFile: showcase.ButtonFullwidth(),
PreviewCodeFile: "button_fullwidth.templ",
ComponentCodeFile: "button.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Click",
ShowcaseFile: showcase.ButtonWithClick(),
PreviewCodeFile: "button_with_click.templ",
ComponentCodeFile: "button.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Disabled",
ShowcaseFile: showcase.ButtonDisabled(),
PreviewCodeFile: "button_disabled.templ",
ComponentCodeFile: "button.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{

6
internals/ui/pages/input.templ
View File

@ -24,6 +24,12 @@ templ Input() {
PreviewCodeFile: "input_with_placeholder.templ",
ComponentCodeFile: "input.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Values",
ShowcaseFile: showcase.InputWithValues(),
PreviewCodeFile: "input_with_values.templ",
ComponentCodeFile: "input.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "File",
ShowcaseFile: showcase.InputFile(),

11
internals/ui/pages/radio_group.templ
View File

@ -13,8 +13,15 @@ templ RadioGroup() {
Description: templ.Raw("A set of radio buttons for selecting a single option from a list."),
}) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
ShowcaseFile: showcase.RadioGroup(),
PreviewCodeFile: "radio_group.templ",
SectionName: "Using Props",
ShowcaseFile: showcase.RadioGroupProps(),
PreviewCodeFile: "radio_group_props.templ",
ComponentCodeFile: "radio_group.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Using Attributes",
ShowcaseFile: showcase.RadioGroupAttributes(),
PreviewCodeFile: "radio_group_attributes.templ",
ComponentCodeFile: "radio_group.templ",
})
}

8
internals/ui/pages/select.templ
View File

@ -15,28 +15,28 @@ templ Select() {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Default",
ShowcaseFile: showcase.SelectDefault(),
ShowcaseClass: "w-48",
ShowcaseClass: "w-72",
PreviewCodeFile: "select_default.templ",
ComponentCodeFile: "select.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Placeholder",
ShowcaseFile: showcase.SelectWithPlaceholder(),
ShowcaseClass: "w-48",
ShowcaseClass: "w-72",
PreviewCodeFile: "select_with_placeholder.templ",
ComponentCodeFile: "select.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Selected Value",
ShowcaseFile: showcase.SelectSelectedValue(),
ShowcaseClass: "w-48",
ShowcaseClass: "w-72",
PreviewCodeFile: "select_selected_value.templ",
ComponentCodeFile: "select.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Disabled",
ShowcaseFile: showcase.SelectDisabled(),
ShowcaseClass: "w-48",
ShowcaseClass: "w-72",
PreviewCodeFile: "select_disabled.templ",
ComponentCodeFile: "select.templ",
})

8
internals/ui/pages/textarea.templ
View File

@ -19,6 +19,14 @@ templ Textarea() {
PreviewCodeFile: "textarea_default.templ",
ComponentCodeFile: "textarea.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Value",
ShowcaseFile: showcase.TextareaWithValue(),
ShowcaseClass: "w-96",
PreviewCodeFile: "textarea_with_value.templ",
ComponentCodeFile: "textarea.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Rows",
ShowcaseFile: showcase.TextareaWithRows(),

10
internals/ui/showcase/button_disabled.templ Normal file
View File

@ -0,0 +1,10 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ ButtonDisabled() {
<div class="flex flex-wrap gap-2">
@components.Button(components.ButtonProps{Text: "Disabled using props", Disabled: true})
@components.Button(components.ButtonProps{Text: "Disabled using attributes", Attributes: templ.Attributes{"disabled": "true"}})
</div>
}

10
internals/ui/showcase/button_fullwidth.templ Normal file
View File

@ -0,0 +1,10 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ ButtonFullwidth() {
<div class="flex w-full flex-wrap gap-2">
@components.Button(components.ButtonProps{Text: "Full Width using prop", FullWidth: true})
@components.Button(components.ButtonProps{Text: "Full Width using class", Class: "w-full"})
</div>
}

2
internals/ui/showcase/button_sizes.templ
View File

@ -7,8 +7,8 @@ import (
templ ButtonSizes() {
<div class="flex flex-wrap items-center gap-2">
@components.Button(components.ButtonProps{Text: "Default"})
@components.Button(components.ButtonProps{Text: "Small", Size: components.ButtonSizeSm})
@components.Button(components.ButtonProps{Text: "Default"})
@components.Button(components.ButtonProps{Text: "Large", Size: components.ButtonSizeLg})
@components.Button(components.ButtonProps{Size: components.ButtonSizeIcon, IconLeft: icons.Rocket(icons.IconProps{Size: "16"})})
</div>

16
internals/ui/showcase/button_states.templ
View File

@ -1,16 +0,0 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ ButtonStates() {
<div class="flex flex-wrap gap-2">
@components.Button(components.ButtonProps{Text: "Default"})
// Alpine.js example
@components.Button(components.ButtonProps{Text: "With Click", Attributes: templ.Attributes{"@click": "alert('Hey Dude!')"}})
// Vanilla JS example
// @components.Button(components.ButtonProps{Text: "With Click", Attributes: templ.Attributes{"onclick": "alert('Hey Dude!')"}})
@components.Button(components.ButtonProps{Text: "Disabled", Disabled: true})
// @components.Button(components.ButtonProps{Text: "Disabled", Disabled: "true"})
@components.Button(components.ButtonProps{Text: "Full Width", Class: "w-full"})
</div>
}

10
internals/ui/showcase/button_with_click.templ Normal file
View File

@ -0,0 +1,10 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ ButtonWithClick() {
<div class="flex flex-wrap gap-2">
@components.Button(components.ButtonProps{Text: "With Alpine.js", Attributes: templ.Attributes{"@click": "alert('Hey Dude!')"}})
@components.Button(components.ButtonProps{Text: "With Vanilla JS", Attributes: templ.Attributes{"onclick": "alert('Hey Dude!')"}})
</div>
}

23
internals/ui/showcase/checkbox_checked.templ
View File

@ -3,11 +3,20 @@ package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ CheckboxChecked() {
@components.Checkbox(components.CheckboxProps{
ID: "checked-checkbox",
Name: "newsletter",
Value: "subscribe",
Label: "Receive newsletter",
Attributes: templ.Attributes{"checked": "true"},
})
<div class="flex flex-col gap-4">
@components.Checkbox(components.CheckboxProps{
ID: "checked-checkbox",
Name: "newsletter",
Value: "subscribe",
Label: "Checked using props",
Checked: true,
})
@components.Checkbox(components.CheckboxProps{
ID: "checked-checkbox",
Name: "newsletter",
Value: "subscribe",
Label: "Checked using attributes",
Attributes: templ.Attributes{"checked": "true"},
})
</div>
}

23
internals/ui/showcase/checkbox_disabled.templ
View File

@ -3,11 +3,20 @@ package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ CheckboxDisabled() {
@components.Checkbox(components.CheckboxProps{
ID: "disabled-checked-checkbox",
Name: "disabled-checked",
Value: "disabled-checked",
Label: "Disabled checked option",
Attributes: templ.Attributes{"disabled": "true"},
})
<div class="flex flex-col gap-4">
@components.Checkbox(components.CheckboxProps{
ID: "disabled-checkbox",
Name: "disabled-checkbox",
Value: "disabled-checkbox",
Label: "Disabled using props",
Disabled: true,
})
@components.Checkbox(components.CheckboxProps{
ID: "disabled-checkbox",
Name: "disabled-checkbox",
Value: "disabled-checkbox",
Label: "Disabled using attributes",
Attributes: templ.Attributes{"disabled": "true"},
})
</div>
}

19
internals/ui/showcase/input_disabled.templ
View File

@ -3,9 +3,18 @@ package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ InputDisabled() {
@components.Input(components.InputProps{
Type: "email",
Placeholder: "e.g. john@doe.com",
Attributes: templ.Attributes{"disabled": "true"},
})
<div class="flex flex-col gap-4">
@components.Input(components.InputProps{
Type: "email",
Label: "Disabled using props",
Placeholder: "e.g. john@doe.com",
Disabled: true,
})
@components.Input(components.InputProps{
Type: "email",
Label: "Disabled using attributes",
Placeholder: "e.g. john@doe.com",
Attributes: templ.Attributes{"disabled": "true"},
})
</div>
}

20
internals/ui/showcase/input_with_values.templ Normal file
View File

@ -0,0 +1,20 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ InputWithValues() {
<div class="flex flex-col gap-4">
@components.Input(components.InputProps{
Type: "email",
Placeholder: "Enter text",
Value: "Value using props",
})
@components.Input(components.InputProps{
Type: "email",
Placeholder: "Enter text",
Attributes: templ.Attributes{
"value": "Value using attributes",
},
})
</div>
}

8
internals/ui/showcase/radio_group.templ → internals/ui/showcase/radio_group_attributes.templ
View File

@ -2,26 +2,26 @@ package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ RadioGroup() {
templ RadioGroupAttributes() {
@components.RadioGroup(components.RadioGroupProps{}) {
@components.RadioGroupItem(components.RadioGroupItemProps{
Value: "default",
ID: "r1",
Name: "view-mode",
Name: "atrrs",
Label: templ.Raw("Default"),
Attributes: templ.Attributes{"checked": true},
})
@components.RadioGroupItem(components.RadioGroupItemProps{
Value: "comfortable",
ID: "r2",
Name: "view-mode",
Name: "atrrs",
Label: templ.Raw("Disabled"),
Attributes: templ.Attributes{"disabled": true},
})
@components.RadioGroupItem(components.RadioGroupItemProps{
Value: "compact",
ID: "r3",
Name: "view-mode",
Name: "atrrs",
Label: templ.Raw("Compact"),
})
}

28
internals/ui/showcase/radio_group_props.templ Normal file
View File

@ -0,0 +1,28 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ RadioGroupProps() {
@components.RadioGroup(components.RadioGroupProps{}) {
@components.RadioGroupItem(components.RadioGroupItemProps{
Value: "default",
ID: "r1",
Name: "props",
Label: templ.Raw("Default"),
Checked: true,
})
@components.RadioGroupItem(components.RadioGroupItemProps{
Value: "comfortable",
ID: "r2",
Name: "props",
Label: templ.Raw("Disabled"),
Disabled: true,
})
@components.RadioGroupItem(components.RadioGroupItemProps{
Value: "compact",
ID: "r3",
Name: "props",
Label: templ.Raw("Compact"),
})
}
}

32
internals/ui/showcase/select_disabled.templ
View File

@ -3,14 +3,26 @@ package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ SelectDisabled() {
@components.Select(components.SelectProps{
ID: "disabled",
Name: "disabled",
Placeholder: "Select is disabled",
Attributes: templ.Attributes{":disabled": "true"},
Options: []components.SelectOption{
{Label: "Option 1", Value: "1"},
{Label: "Option 2", Value: "2"},
},
})
<div class="flex flex-col gap-4">
@components.Select(components.SelectProps{
ID: "disabled",
Name: "disabled",
Placeholder: "Disabled using props",
Disabled: true,
Options: []components.SelectOption{
{Label: "Option 1", Value: "1"},
{Label: "Option 2", Value: "2"},
},
})
@components.Select(components.SelectProps{
ID: "disabled",
Name: "disabled",
Placeholder: "Disabled using attributes",
Attributes: templ.Attributes{":disabled": "true"},
Options: []components.SelectOption{
{Label: "Option 1", Value: "1"},
{Label: "Option 2", Value: "2"},
},
})
</div>
}

35
internals/ui/showcase/select_selected_value.templ
View File

@ -3,15 +3,28 @@ package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ SelectSelectedValue() {
@components.Select(components.SelectProps{
ID: "selected",
Name: "selected",
Placeholder: "Select a fruit",
Options: []components.SelectOption{
{Label: "Apple", Value: "apple"},
{Label: "Banana", Value: "banana"},
{Label: "Orange", Value: "orange", Attributes: templ.Attributes{"selected": true}},
{Label: "Mango", Value: "mango"},
},
})
<div class="flex flex-col gap-4">
@components.Select(components.SelectProps{
ID: "selected",
Name: "selected",
Placeholder: "Selected by props",
Options: []components.SelectOption{
{Label: "Apple", Value: "apple"},
{Label: "Banana", Value: "banana", Selected: true},
{Label: "Orange", Value: "orange"},
{Label: "Mango", Value: "mango"},
},
})
@components.Select(components.SelectProps{
ID: "selected",
Name: "selected",
Placeholder: "Selected by attributes",
Options: []components.SelectOption{
{Label: "Apple", Value: "apple"},
{Label: "Banana", Value: "banana"},
{Label: "Orange", Value: "orange", Attributes: templ.Attributes{"selected": true}},
{Label: "Mango", Value: "mango"},
},
})
</div>
}

22
internals/ui/showcase/textarea_disabled.templ
View File

@ -3,12 +3,18 @@ package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ TextareaDisabled() {
@components.Textarea(components.TextareaProps{
ID: "disabled",
Name: "disabled",
Label: "Disabled Textarea",
Value: "This textarea is disabled",
Rows: 3,
Attributes: templ.Attributes{"disabled": "true"},
})
<div class="flex flex-col gap-4">
@components.Textarea(components.TextareaProps{
ID: "disabled",
Name: "disabled",
Value: "Disabled using attributes",
Attributes: templ.Attributes{"disabled": "true"},
})
@components.Textarea(components.TextareaProps{
ID: "disabled",
Name: "disabled",
Value: "Disabled using props",
Disabled: true,
})
</div>
}

20
internals/ui/showcase/textarea_with_value.templ Normal file
View File

@ -0,0 +1,20 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ TextareaWithValue() {
<div class="flex flex-col gap-4">
@components.Textarea(components.TextareaProps{
ID: "disabled",
Name: "disabled",
Value: "Value using props",
})
<div x-data="{ message: 'Value using attributes', }">
@components.Textarea(components.TextareaProps{
ID: "disabled",
Name: "disabled",
Attributes: templ.Attributes{":value": "message"},
})
</div>
</div>
}

20
internals/ui/showcase/toggle_checked.templ
View File

@ -3,10 +3,18 @@ package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ ToggleChecked() {
@components.Toggle(components.ToggleProps{
ID: "toggle-checked",
Name: "toggle-checked",
LabelRight: "Checked Toggle",
Attributes: templ.Attributes{"x-bind:checked": "true"},
})
<div class="flex flex-col gap-4">
@components.Toggle(components.ToggleProps{
ID: "toggle-checked",
Name: "toggle-checked",
LabelRight: "Checked using props",
Checked: true,
})
@components.Toggle(components.ToggleProps{
ID: "toggle-checked",
Name: "toggle-checked",
LabelRight: "Checked using attributes",
Attributes: templ.Attributes{"x-bind:checked": "true"},
})
</div>
}

20
internals/ui/showcase/toggle_disabled.templ
View File

@ -3,10 +3,18 @@ package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ ToggleDisabled() {
@components.Toggle(components.ToggleProps{
ID: "toggle-disabled",
Name: "toggle-disabled",
LabelRight: "Disabled Toggle",
Attributes: templ.Attributes{"disabled": "true"},
})
<div class="flex flex-col gap-4">
@components.Toggle(components.ToggleProps{
ID: "toggle-disabled",
Name: "toggle-disabled",
LabelRight: "Disabled using props",
Disabled: true,
})
@components.Toggle(components.ToggleProps{
ID: "toggle-disabled",
Name: "toggle-disabled",
LabelRight: "Disabled using attributes",
Attributes: templ.Attributes{"disabled": "true"},
})
</div>
}

22
pkg/components/button.templ
View File

@ -49,8 +49,8 @@ type ButtonProps struct {
// Target controls link opening behavior
Target string
// Disabled controls interactive state (bool or JS expression)
Disabled any
// Disabled sets the button to an inactive state
Disabled bool
// Type sets the button type attribute
Type string
@ -137,13 +137,8 @@ templ Button(props ButtonProps) {
props.Class,
),
}
if props.Disabled != nil {
if disabledBool, ok := props.Disabled.(bool); ok && disabledBool {
aria-disabled="true"
}
if disabledStr, ok := props.Disabled.(string); ok {
:aria-disabled={ disabledStr }
}
if props.Disabled == true {
disabled
}
{ props.Attributes... }
>
@ -166,14 +161,7 @@ templ Button(props ButtonProps) {
if props.Type != "" {
type={ props.Type }
}
if props.Disabled != nil {
if disabledBool, ok := props.Disabled.(bool); ok {
disabled?={ disabledBool }
}
if disabledStr, ok := props.Disabled.(string); ok {
:disabled={ disabledStr }
}
}
disabled?={ props.Disabled }
{ props.Attributes... }
>
{ children... }

96
pkg/components/button_templ.go
View File

@ -57,8 +57,8 @@ type ButtonProps struct {
// Target controls link opening behavior
Target string
// Disabled controls interactive state (bool or JS expression)
Disabled any
// Disabled sets the button to an inactive state
Disabled bool
// Type sets the button type attribute
Type string
@ -205,31 +205,10 @@ func Button(props ButtonProps) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if props.Disabled != nil {
if disabledBool, ok := props.Disabled.(bool); ok && disabledBool {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" aria-disabled=\"true\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
if disabledStr, ok := props.Disabled.(string); ok {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" :aria-disabled=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(disabledStr)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/button.templ`, Line: 145, Col: 33}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if props.Disabled == true {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" disabled")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, props.Attributes)
@ -253,7 +232,7 @@ func Button(props ButtonProps) templ.Component {
return templ_7745c5c3_Err
}
} else {
var templ_7745c5c3_Var7 = []any{
var templ_7745c5c3_Var6 = []any{
utils.TwMerge(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors",
"focus-visible:outline-none focus-visible:ring-2 focus-ring-ring focus-visible:ring-offset-2",
@ -264,7 +243,7 @@ func Button(props ButtonProps) templ.Component {
props.Class,
),
}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var7...)
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var6...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -272,12 +251,12 @@ func Button(props ButtonProps) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var7).String())
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var6).String())
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/button.templ`, Line: 1, Col: 0}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -290,12 +269,12 @@ func Button(props ButtonProps) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(props.Type)
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(props.Type)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/button.templ`, Line: 167, Col: 21}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/button.templ`, Line: 162, Col: 21}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -304,33 +283,10 @@ func Button(props ButtonProps) templ.Component {
return templ_7745c5c3_Err
}
}
if props.Disabled != nil {
if disabledBool, ok := props.Disabled.(bool); ok {
if disabledBool {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" disabled")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
}
if disabledStr, ok := props.Disabled.(string); ok {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" :disabled=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(disabledStr)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/button.templ`, Line: 174, Col: 28}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if props.Disabled {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" disabled")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, props.Attributes)
@ -375,9 +331,9 @@ func renderButtonContent(props ButtonProps) templ.Component {
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var11 := templ.GetChildren(ctx)
if templ_7745c5c3_Var11 == nil {
templ_7745c5c3_Var11 = templ.NopComponent
templ_7745c5c3_Var9 := templ.GetChildren(ctx)
if templ_7745c5c3_Var9 == nil {
templ_7745c5c3_Var9 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<span class=\"flex gap-2 items-center\">")
@ -390,12 +346,12 @@ func renderButtonContent(props ButtonProps) templ.Component {
return templ_7745c5c3_Err
}
}
var templ_7745c5c3_Var12 string
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(props.Text)
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(props.Text)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/button.templ`, Line: 191, Col: 14}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/button.templ`, Line: 179, Col: 14}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

8
pkg/components/checkbox.templ
View File

@ -22,6 +22,12 @@ type CheckboxProps struct {
// Class adds custom CSS classes
Class string
// Disabled sets the checkbox to disabled state
Disabled bool
// Checked sets the checkbox to checked state
Checked bool
// Attributes for additional HTML attributes and Alpine.js bindings
Attributes templ.Attributes
}
@ -48,6 +54,8 @@ templ Checkbox(props CheckboxProps) {
>
<div class="relative flex items-center">
<input
checked?={ props.Checked }
disabled?={ props.Disabled }
id={ props.ID }
name={ props.Name }
value={ props.Value }

34
pkg/components/checkbox_templ.go
View File

@ -30,6 +30,12 @@ type CheckboxProps struct {
// Class adds custom CSS classes
Class string
// Disabled sets the checkbox to disabled state
Disabled bool
// Checked sets the checkbox to checked state
Checked bool
// Attributes for additional HTML attributes and Alpine.js bindings
Attributes templ.Attributes
}
@ -82,7 +88,7 @@ func Checkbox(props CheckboxProps) templ.Component {
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(props.ID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/checkbox.templ`, Line: 41, Col: 16}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/checkbox.templ`, Line: 47, Col: 16}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
@ -101,14 +107,30 @@ func Checkbox(props CheckboxProps) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><div class=\"relative flex items-center\"><input id=\"")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><div class=\"relative flex items-center\"><input")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if props.Checked {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" checked")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
if props.Disabled {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" disabled")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" id=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(props.ID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/checkbox.templ`, Line: 51, Col: 17}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/checkbox.templ`, Line: 59, Col: 17}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
@ -121,7 +143,7 @@ func Checkbox(props CheckboxProps) templ.Component {
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(props.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/checkbox.templ`, Line: 52, Col: 21}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/checkbox.templ`, Line: 60, Col: 21}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
@ -134,7 +156,7 @@ func Checkbox(props CheckboxProps) templ.Component {
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(props.Value)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/checkbox.templ`, Line: 53, Col: 23}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/checkbox.templ`, Line: 61, Col: 23}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
@ -168,7 +190,7 @@ func Checkbox(props CheckboxProps) templ.Component {
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(props.Label)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/checkbox.templ`, Line: 75, Col: 22}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/checkbox.templ`, Line: 83, Col: 22}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {

8
pkg/components/input.templ
View File

@ -42,6 +42,9 @@ type InputProps struct {
// Label displays text above input
Label string
// Disabled sets the input to disabled state
Disabled bool
// Description shows helper text below input
Description string
@ -88,8 +91,11 @@ templ Input(props InputProps) {
<input
type={ string(props.Type) }
placeholder={ props.Placeholder }
disabled?={ props.Disabled }
name={ props.Name }
value={ props.Value }
if props.Value != "" {
value={ props.Value }
}
id={ props.ID }
class={
utils.TwMerge("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background",

63
pkg/components/input_templ.go
View File

@ -50,6 +50,9 @@ type InputProps struct {
// Label displays text above input
Label string
// Disabled sets the input to disabled state
Disabled bool
// Description shows helper text below input
Description string
@ -121,7 +124,7 @@ func Input(props InputProps) templ.Component {
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(props.ID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 81, Col: 18}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 84, Col: 18}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
@ -147,7 +150,7 @@ func Input(props InputProps) templ.Component {
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(props.Label)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 85, Col: 17}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 88, Col: 17}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
@ -177,7 +180,7 @@ func Input(props InputProps) templ.Component {
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(string(props.Type))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 89, Col: 28}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 92, Col: 28}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
@ -190,46 +193,66 @@ func Input(props InputProps) templ.Component {
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(props.Placeholder)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 90, Col: 34}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 93, Col: 34}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if props.Disabled {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" disabled")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" name=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(props.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 91, Col: 20}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 95, Col: 20}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" value=\"")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(props.Value)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 92, Col: 22}
if props.Value != "" {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" value=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(props.Value)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 97, Col: 23}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" id=\"")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" id=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var11 string
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(props.ID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 93, Col: 16}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 99, Col: 16}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
if templ_7745c5c3_Err != nil {
@ -260,7 +283,7 @@ func Input(props InputProps) templ.Component {
var templ_7745c5c3_Var13 string
templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(props.FileAccept)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 103, Col: 29}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 109, Col: 29}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
if templ_7745c5c3_Err != nil {
@ -287,7 +310,7 @@ func Input(props InputProps) templ.Component {
var templ_7745c5c3_Var14 string
templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(props.Description)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 108, Col: 67}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 114, Col: 67}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
if templ_7745c5c3_Err != nil {
@ -306,7 +329,7 @@ func Input(props InputProps) templ.Component {
var templ_7745c5c3_Var15 string
templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(props.Error)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 111, Col: 64}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 117, Col: 64}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
if templ_7745c5c3_Err != nil {

8
pkg/components/radio_group.templ
View File

@ -26,6 +26,12 @@ type RadioGroupItemProps struct {
// Label displays text next to radio button
Label templ.Component
// Disabled sets the radio button to disabled
Disabled bool
// Checked sets the radio button to checked
Checked bool
// Class adds custom CSS classes
Class string
@ -75,6 +81,8 @@ templ RadioGroupItem(props RadioGroupItemProps) {
id={ props.ID }
name={ props.Name }
value={ props.Value }
checked?={ props.Checked }
disabled?={ props.Disabled }
class="before:content[''] relative h-4 w-4 appearance-none rounded-full
border border-2 border-primary
checked:border-primary checked:bg-primary

34
pkg/components/radio_group_templ.go
View File

@ -34,6 +34,12 @@ type RadioGroupItemProps struct {
// Label displays text next to radio button
Label templ.Component
// Disabled sets the radio button to disabled
Disabled bool
// Checked sets the radio button to checked
Checked bool
// Class adds custom CSS classes
Class string
@ -159,7 +165,7 @@ func RadioGroupItem(props RadioGroupItemProps) templ.Component {
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(props.ID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/radio_group.templ`, Line: 65, Col: 16}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/radio_group.templ`, Line: 71, Col: 16}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
@ -185,7 +191,7 @@ func RadioGroupItem(props RadioGroupItemProps) templ.Component {
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(props.ID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/radio_group.templ`, Line: 75, Col: 16}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/radio_group.templ`, Line: 81, Col: 16}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
@ -198,7 +204,7 @@ func RadioGroupItem(props RadioGroupItemProps) templ.Component {
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(props.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/radio_group.templ`, Line: 76, Col: 20}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/radio_group.templ`, Line: 82, Col: 20}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil {
@ -211,13 +217,29 @@ func RadioGroupItem(props RadioGroupItemProps) templ.Component {
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(props.Value)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/radio_group.templ`, Line: 77, Col: 22}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/radio_group.templ`, Line: 83, Col: 22}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"before:content[&#39;&#39;] relative h-4 w-4 appearance-none rounded-full \n border border-2 border-primary \n checked:border-primary checked:bg-primary\n before:absolute before:left-1/2 before:top-1/2 \n before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2 \n before:rounded-full before:bg-background\n checked:before:visible\n focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring \n focus-visible:ring-offset-2 focus-visible:ring-offset-background\n disabled:cursor-not-allowed\"")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if props.Checked {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" checked")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
if props.Disabled {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" disabled")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"before:content[&#39;&#39;] relative h-4 w-4 appearance-none rounded-full \n border border-2 border-primary \n checked:border-primary checked:bg-primary\n before:absolute before:left-1/2 before:top-1/2 \n before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2 \n before:rounded-full before:bg-background\n checked:before:visible\n focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring \n focus-visible:ring-offset-2 focus-visible:ring-offset-background\n disabled:cursor-not-allowed\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -242,7 +264,7 @@ func RadioGroupItem(props RadioGroupItemProps) templ.Component {
var templ_7745c5c3_Var11 string
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(props.Value)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/radio_group.templ`, Line: 93, Col: 22}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/radio_group.templ`, Line: 101, Col: 22}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
if templ_7745c5c3_Err != nil {

6
pkg/components/select.templ
View File

@ -14,6 +14,8 @@ type SelectProps struct {
Placeholder string
// Options defines available choices
Options []SelectOption
// Disabled sets the checkbox to disabled state
Disabled bool
// Class adds custom CSS classes
Class string
// Attributes for additional HTML attributes and Alpine.js bindings
@ -25,6 +27,8 @@ type SelectOption struct {
Label string
// Value sets the option's form value
Value string
// Selected sets the option as default
Selected bool
// Attributes for disabled state or other HTML attributes
Attributes templ.Attributes
}
@ -55,6 +59,7 @@ templ Select(props SelectProps) {
<select
id={ props.ID }
name={ props.Name }
disabled?={ props.Disabled }
class="peer h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 text-sm
ring-offset-background placeholder:text-muted-foreground
focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
@ -67,6 +72,7 @@ templ Select(props SelectProps) {
for _, option := range props.Options {
<option
value={ option.Value }
selected?={ option.Selected }
{ option.Attributes... }
>
{ option.Label }

32
pkg/components/select_templ.go
View File

@ -22,6 +22,8 @@ type SelectProps struct {
Placeholder string
// Options defines available choices
Options []SelectOption
// Disabled sets the checkbox to disabled state
Disabled bool
// Class adds custom CSS classes
Class string
// Attributes for additional HTML attributes and Alpine.js bindings
@ -33,6 +35,8 @@ type SelectOption struct {
Label string
// Value sets the option's form value
Value string
// Selected sets the option as default
Selected bool
// Attributes for disabled state or other HTML attributes
Attributes templ.Attributes
}
@ -102,7 +106,7 @@ func Select(props SelectProps) templ.Component {
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(props.ID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 56, Col: 16}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 60, Col: 16}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
@ -115,13 +119,23 @@ func Select(props SelectProps) templ.Component {
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(props.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 57, Col: 20}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 61, Col: 20}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"peer h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 text-sm\n ring-offset-background placeholder:text-muted-foreground\n focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\n disabled:cursor-not-allowed disabled:opacity-50\"")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if props.Disabled {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" disabled")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"peer h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 text-sm\n ring-offset-background placeholder:text-muted-foreground\n focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\n disabled:cursor-not-allowed disabled:opacity-50\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -141,7 +155,7 @@ func Select(props SelectProps) templ.Component {
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(props.Placeholder)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 65, Col: 65}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 70, Col: 65}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
@ -160,7 +174,7 @@ func Select(props SelectProps) templ.Component {
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(option.Value)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 69, Col: 25}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 74, Col: 25}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
@ -170,6 +184,12 @@ func Select(props SelectProps) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if option.Selected {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" selected")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, option.Attributes)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
@ -181,7 +201,7 @@ func Select(props SelectProps) templ.Component {
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(option.Label)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 72, Col: 19}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 78, Col: 19}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {

11
pkg/components/textarea.templ
View File

@ -30,6 +30,9 @@ type TextareaProps struct {
// Rows sets visible text lines height
Rows int
// Disabled prevents user input
Disabled bool
// Class adds custom CSS classes
Class string
@ -70,8 +73,8 @@ templ Textarea(props TextareaProps) {
<textarea
id={ props.ID }
name={ props.Name }
value={ props.Value }
placeholder={ props.Placeholder }
disabled?={ props.Disabled }
if props.Rows != 0 {
rows={ strconv.Itoa(props.Rows) }
}
@ -88,7 +91,11 @@ templ Textarea(props TextareaProps) {
@input="resize()"
}
{ props.Attributes... }
></textarea>
>
if props.Value != "" {
{ props.Value }
}
</textarea>
if props.Description != "" {
<p class="text-sm text-muted-foreground">{ props.Description }</p>
}

73
pkg/components/textarea_templ.go
View File

@ -38,6 +38,9 @@ type TextareaProps struct {
// Rows sets visible text lines height
Rows int
// Disabled prevents user input
Disabled bool
// Class adds custom CSS classes
Class string
@ -103,7 +106,7 @@ func Textarea(props TextareaProps) templ.Component {
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(props.ID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 63, Col: 18}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 66, Col: 18}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
@ -129,7 +132,7 @@ func Textarea(props TextareaProps) templ.Component {
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(props.Label)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 67, Col: 17}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 70, Col: 17}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
@ -158,7 +161,7 @@ func Textarea(props TextareaProps) templ.Component {
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(props.ID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 71, Col: 16}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 74, Col: 16}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
@ -171,35 +174,22 @@ func Textarea(props TextareaProps) templ.Component {
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(props.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 72, Col: 20}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 75, Col: 20}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" value=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(props.Value)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 73, Col: 22}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" placeholder=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(props.Placeholder)
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(props.Placeholder)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 74, Col: 34}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 76, Col: 34}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -207,17 +197,23 @@ func Textarea(props TextareaProps) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if props.Disabled {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" disabled")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
if props.Rows != 0 {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" rows=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var11 string
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(props.Rows))
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(props.Rows))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 76, Col: 35}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 79, Col: 35}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -230,12 +226,12 @@ func Textarea(props TextareaProps) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var12 string
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var6).String())
var templ_7745c5c3_Var11 string
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var6).String())
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 1, Col: 0}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -253,7 +249,22 @@ func Textarea(props TextareaProps) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("></textarea> ")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if props.Value != "" {
var templ_7745c5c3_Var12 string
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(props.Value)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 96, Col: 17}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</textarea> ")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -265,7 +276,7 @@ func Textarea(props TextareaProps) templ.Component {
var templ_7745c5c3_Var13 string
templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(props.Description)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 93, Col: 63}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 100, Col: 63}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
if templ_7745c5c3_Err != nil {
@ -284,7 +295,7 @@ func Textarea(props TextareaProps) templ.Component {
var templ_7745c5c3_Var14 string
templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(props.Error)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 96, Col: 64}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 103, Col: 64}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
if templ_7745c5c3_Err != nil {

8
pkg/components/toggle.templ
View File

@ -13,6 +13,12 @@ type ToggleProps struct {
// LabelRight displays text after toggle
LabelRight string
// Disabled sets the toggle to disabled state
Disabled bool
// Checked sets the toggle to checked state
Checked bool
// Class adds custom CSS classes
Class string
@ -40,6 +46,8 @@ type ToggleProps struct {
templ Toggle(props ToggleProps) {
<label for={ props.ID } class="inline-flex cursor-pointer items-center gap-2">
<input
checked?={ props.Checked }
disabled?={ props.Disabled }
id={ props.ID }
type="checkbox"
name={ props.Name }

34
pkg/components/toggle_templ.go
View File

@ -21,6 +21,12 @@ type ToggleProps struct {
// LabelRight displays text after toggle
LabelRight string
// Disabled sets the toggle to disabled state
Disabled bool
// Checked sets the toggle to checked state
Checked bool
// Class adds custom CSS classes
Class string
@ -73,20 +79,36 @@ func Toggle(props ToggleProps) templ.Component {
var templ_7745c5c3_Var2 string
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(props.ID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 41, Col: 22}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 47, Col: 22}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"inline-flex cursor-pointer items-center gap-2\"><input id=\"")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"inline-flex cursor-pointer items-center gap-2\"><input")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if props.Checked {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" checked")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
if props.Disabled {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" disabled")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" id=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(props.ID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 43, Col: 16}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 51, Col: 16}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
@ -99,7 +121,7 @@ func Toggle(props ToggleProps) templ.Component {
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(props.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 45, Col: 20}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 53, Col: 20}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
@ -125,7 +147,7 @@ func Toggle(props ToggleProps) templ.Component {
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(props.LabelLeft)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 52, Col: 21}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 60, Col: 21}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
@ -148,7 +170,7 @@ func Toggle(props ToggleProps) templ.Component {
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(props.LabelRight)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 61, Col: 22}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 69, Col: 22}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {

72
pkg/styles/goilerplate.css
View File

@ -747,12 +747,8 @@ body {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.ml-1 {
margin-left: 0.25rem;
.mb-4 {
margin-bottom: 1rem;
}
.ml-auto {
@ -799,10 +795,6 @@ body {
display: none;
}
.aspect-square {
aspect-ratio: 1 / 1;
}
.size-3 {
width: 0.75rem;
height: 0.75rem;
@ -1040,6 +1032,10 @@ body {
justify-content: space-between;
}
.gap-1 {
gap: 0.25rem;
}
.gap-2 {
gap: 0.5rem;
}
@ -1159,10 +1155,6 @@ body {
border-color: hsl(var(--primary) / var(--tw-border-opacity));
}
.border-transparent {
border-color: transparent;
}
.bg-background {
--tw-bg-opacity: 1;
background-color: hsl(var(--background) / var(--tw-bg-opacity));
@ -1212,10 +1204,6 @@ body {
background-color: hsl(var(--primary) / var(--tw-bg-opacity));
}
.bg-primary\/90 {
background-color: hsl(var(--primary) / 0.9);
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@ -1247,11 +1235,6 @@ body {
padding: 1.5rem;
}
.px-0\.5 {
padding-left: 0.125rem;
padding-right: 0.125rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
@ -1342,18 +1325,10 @@ body {
line-height: 1rem;
}
.font-bold {
font-weight: 700;
}
.font-medium {
font-weight: 500;
}
.font-normal {
font-weight: 400;
}
.font-semibold {
font-weight: 600;
}
@ -1404,11 +1379,6 @@ body {
color: hsl(var(--muted-foreground) / var(--tw-text-opacity));
}
.text-popover-foreground {
--tw-text-opacity: 1;
color: hsl(var(--popover-foreground) / var(--tw-text-opacity));
}
.text-primary {
--tw-text-opacity: 1;
color: hsl(var(--primary) / var(--tw-text-opacity));
@ -1419,6 +1389,11 @@ body {
color: hsl(var(--primary-foreground) / var(--tw-text-opacity));
}
.text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-secondary-foreground {
--tw-text-opacity: 1;
color: hsl(var(--secondary-foreground) / var(--tw-text-opacity));
@ -1432,11 +1407,6 @@ body {
text-underline-offset: 4px;
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
opacity: 0;
}
@ -1445,18 +1415,18 @@ body {
opacity: 1;
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@ -1553,10 +1523,6 @@ body {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@ -1865,6 +1831,10 @@ body {
background-color: hsl(var(--secondary) / var(--tw-bg-opacity));
}
.peer:disabled ~ .peer-disabled\:pointer-events-none {
pointer-events: none;
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
cursor: not-allowed;
}