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

refactor: update comments for clarity and consistency across component properties

Browse Source
This commit is contained in:
axzilla 2024-12-09 15:02:21 +07:00
parent 6d3359e44d
commit ff82a53f3d
41 changed files with 681 additions and 1270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
assets/css/output.css
View File

@ -637,10 +637,6 @@ body {
visibility: visible;
}
.invisible {
visibility: hidden;
}
.fixed {
position: fixed;
}
@ -1859,11 +1855,6 @@ body {
--tw-ring-offset-color: hsl(var(--background) / 1);
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
@ -2173,22 +2164,6 @@ body {
outline-offset: 2px;
}
.focus\:outline:focus {
outline-style: solid;
}
.focus\:outline-2:focus {
outline-width: 2px;
}
.focus\:outline-offset-2:focus {
outline-offset: 2px;
}
.focus\:outline-ring:focus {
outline-color: hsl(var(--ring) / 1);
}
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@ -2213,10 +2188,6 @@ body {
--tw-ring-offset-width: 2px;
}
.checked\:focus\:outline-primary:focus:checked {
outline-color: hsl(var(--primary) / 1);
}
.focus-visible\:outline-none:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
@ -2247,10 +2218,6 @@ body {
--tw-ring-offset-color: hsl(var(--background) / 1);
}
.active\:outline-offset-0:active {
outline-offset: 0px;
}
.disabled\:pointer-events-none:disabled {
pointer-events: none;
}
@ -2281,10 +2248,6 @@ body {
opacity: 1;
}
.peer:checked ~ .peer-checked\:visible {
visibility: visible;
}
.peer:checked ~ .peer-checked\:bg-primary {
--tw-bg-opacity: 1;
background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));

61
pkg/components/accordion.templ
View File

@ -6,37 +6,19 @@ import (
)
type AccordionItem struct {
// ID is the unique identifier for managing accordion item state
ID string
// Trigger is the content shown in the header/trigger area
// Can be any templ.Component (typically text)
Trigger templ.Component
// Content is the expandable content section
// Can be any templ.Component
Content templ.Component
ID string // Unique identifier for state management
Trigger templ.Component // Header content that toggles section
Content templ.Component // Expandable section content
}
// AccordionProps configures the Accordion component
type AccordionProps struct {
// Items contains the accordion sections
Items []AccordionItem
// Class adds custom CSS classes
Class string
// Attributes for additional HTML attributes and Alpine.js bindings
Attributes templ.Attributes
Items []AccordionItem // Array of accordion sections
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Vertically stacked interactive sections to organize content.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/accordion
//
// Props:
// - Items: Array of accordion sections with ID, trigger and content
// - Class: Additional CSS classes
// - Attributes: Additional HTML attributes (e.g. data-testid)
// Accordion renders a collapsible content container
templ Accordion(props AccordionProps) {
<div
x-data="{
@ -45,7 +27,16 @@ templ Accordion(props AccordionProps) {
this.activeItem = this.activeItem === itemId ? null : itemId;
}
}"
class={ utils.TwMerge("divide-y divide-border rounded-md border", props.Class) }
class={ utils.TwMerge(
// Layout
"divide-y rounded-md",
// Styling
"divide-border border",
// Custom
props.Class,
) }
{ props.Attributes... }
>
for _, item := range props.Items {
@ -54,7 +45,16 @@ templ Accordion(props AccordionProps) {
<button
type="button"
@click={ "toggleItem('" + item.ID + "')" }
class="flex w-full items-center justify-between py-4 px-5 text-left font-medium transition-all hover:underline [&[aria-expanded=true]>svg]:rotate-180"
class={ utils.TwMerge(
// Layout
"flex w-full items-center justify-between py-4 px-5",
// Styling
"text-left font-medium",
// States
"transition-all hover:underline [&[aria-expanded=true]>svg]:rotate-180",
) }
:aria-expanded={ "activeItem === '" + item.ID + "'" }
>
@item.Trigger
@ -65,7 +65,10 @@ templ Accordion(props AccordionProps) {
x-show={ "activeItem === '" + item.ID + "'" }
x-collapse
x-cloak
class="px-5 pb-4 pt-0"
class={ utils.TwMerge(
// Layout
"px-5 pb-4 pt-0",
) }
>
@item.Content
</div>

133
pkg/components/accordion_templ.go
View File

@ -14,37 +14,19 @@ import (
)
type AccordionItem struct {
// ID is the unique identifier for managing accordion item state
ID string
// Trigger is the content shown in the header/trigger area
// Can be any templ.Component (typically text)
Trigger templ.Component
// Content is the expandable content section
// Can be any templ.Component
Content templ.Component
ID string // Unique identifier for state management
Trigger templ.Component // Header content that toggles section
Content templ.Component // Expandable section content
}
// AccordionProps configures the Accordion component
type AccordionProps struct {
// Items contains the accordion sections
Items []AccordionItem
// Class adds custom CSS classes
Class string
// Attributes for additional HTML attributes and Alpine.js bindings
Attributes templ.Attributes
Items []AccordionItem // Array of accordion sections
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Vertically stacked interactive sections to organize content.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/accordion
//
// Props:
// - Items: Array of accordion sections with ID, trigger and content
// - Class: Additional CSS classes
// - Attributes: Additional HTML attributes (e.g. data-testid)
// Accordion renders a collapsible content container
func Accordion(props AccordionProps) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@ -66,12 +48,21 @@ func Accordion(props AccordionProps) templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
var templ_7745c5c3_Var2 = []any{utils.TwMerge("divide-y divide-border rounded-md border", props.Class)}
var templ_7745c5c3_Var2 = []any{utils.TwMerge(
// Layout
"divide-y rounded-md",
// Styling
"divide-border border",
// Custom
props.Class,
)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div x-data=\"{\n\t\t\tactiveItem: null,\n\t\t\ttoggleItem(itemId) {\n\t\t\t\tthis.activeItem = this.activeItem === itemId ? null : itemId;\n\t\t\t}\n\t\t}\" class=\"")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div x-data=\"{ \n activeItem: null,\n toggleItem(itemId) {\n this.activeItem = this.activeItem === itemId ? null : itemId;\n }\n }\" class=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -97,29 +88,60 @@ func Accordion(props AccordionProps) templ.Component {
return templ_7745c5c3_Err
}
for _, item := range props.Items {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"group\"><h3><button type=\"button\" @click=\"")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"group\"><h3>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs("toggleItem('" + item.ID + "')")
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/accordion.templ`, Line: 56, Col: 46}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
var templ_7745c5c3_Var4 = []any{utils.TwMerge(
// Layout
"flex w-full items-center justify-between py-4 px-5",
// Styling
"text-left font-medium",
// States
"transition-all hover:underline [&[aria-expanded=true]>svg]:rotate-180",
)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var4...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"flex w-full items-center justify-between py-4 px-5 text-left font-medium transition-all hover:underline [&amp;[aria-expanded=true]&gt;svg]:rotate-180\" :aria-expanded=\"")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button type=\"button\" @click=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs("activeItem === '" + item.ID + "'")
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs("toggleItem('" + item.ID + "')")
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/accordion.templ`, Line: 47, Col: 46}
}
_, 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=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var4).String())
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/accordion.templ`, Line: 1, Col: 0}
}
_, 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("\" :aria-expanded=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs("activeItem === '" + item.ID + "'")
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/accordion.templ`, Line: 58, Col: 57}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -135,20 +157,45 @@ func Accordion(props AccordionProps) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button></h3><div x-show=\"")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button></h3>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs("activeItem === '" + item.ID + "'")
var templ_7745c5c3_Var8 = []any{utils.TwMerge(
// Layout
"px-5 pb-4 pt-0",
)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var8...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div x-show=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs("activeItem === '" + item.ID + "'")
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/accordion.templ`, Line: 65, Col: 48}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
_, 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("\" x-collapse x-cloak class=\"px-5 pb-4 pt-0\">")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" x-collapse x-cloak class=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var8).String())
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/accordion.templ`, Line: 1, Col: 0}
}
_, 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
}

100
pkg/components/alert.templ
View File

@ -2,26 +2,70 @@ package components
import "github.com/axzilla/goilerplate/pkg/utils"
// AlertVariant defines the available alert styles
type AlertVariant string
const (
// DefaultAlert shows standard informational styling
AlertVariantDefault AlertVariant = "default"
// DestructiveAlert shows error/warning styling
AlertVariantDestructive AlertVariant = "destructive"
)
type AlertProps struct {
// Variant controls the alert styling (default or destructive)
Variant AlertVariant
// Class adds custom CSS classes
Class string
Variant AlertVariant // Visual style variant
Class string // Additional CSS classes
}
// Alert renders a status message component
templ Alert(props AlertProps) {
<div
class={ utils.TwMerge(
// Layout
"relative w-full p-4",
"[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4",
"[&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
// Styling
"rounded-lg border",
getAlertVariantClasses(props.Variant),
// Custom
props.Class,
) }
role="alert"
>
{ children... }
</div>
}
// AlertTitle renders the heading section
templ AlertTitle() {
<h5
class={ utils.TwMerge(
// Layout
"mb-1",
// Styling
"font-medium leading-none tracking-tight",
) }
>
{ children... }
</h5>
}
// AlertDescription renders the body content
templ AlertDescription() {
<div
class={ utils.TwMerge(
// Layout
"[&_p]:leading-relaxed",
// Styling
"text-sm",
) }
>
{ children... }
</div>
}
// getAlertVariantClasses maps variants to their CSS classes
func getAlertVariantClasses(variant AlertVariant) string {
switch variant {
case AlertVariantDestructive:
@ -30,39 +74,3 @@ func getAlertVariantClasses(variant AlertVariant) string {
return "border-border text-foreground"
}
}
// Status message that displays contextual feedback or notifications.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/alert
//
// Props:
// - Variant: Visual style (DefaultAlert or DestructiveAlert)
// - Class: Additional CSS classes
templ Alert(props AlertProps) {
<div
class={
utils.TwMerge(
"relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
getAlertVariantClasses(props.Variant),
props.Class,
),
}
role="alert"
>
{ children... }
</div>
}
// AlertTitle renders the title of the alert.
templ AlertTitle() {
<h5 class="mb-1 font-medium leading-none tracking-tight">
{ children... }
</h5>
}
// AlertDescription renders the description of the alert.
templ AlertDescription() {
<div class="text-sm [&_p]:leading-relaxed">
{ children... }
</div>
}

118
pkg/components/alert_templ.go
View File

@ -10,42 +10,19 @@ import templruntime "github.com/a-h/templ/runtime"
import "github.com/axzilla/goilerplate/pkg/utils"
// AlertVariant defines the available alert styles
type AlertVariant string
const (
// DefaultAlert shows standard informational styling
AlertVariantDefault AlertVariant = "default"
// DestructiveAlert shows error/warning styling
AlertVariantDestructive AlertVariant = "destructive"
)
type AlertProps struct {
// Variant controls the alert styling (default or destructive)
Variant AlertVariant
// Class adds custom CSS classes
Class string
Variant AlertVariant // Visual style variant
Class string // Additional CSS classes
}
// getAlertVariantClasses maps variants to their CSS classes
func getAlertVariantClasses(variant AlertVariant) string {
switch variant {
case AlertVariantDestructive:
return "border-destructive text-destructive"
default:
return "border-border text-foreground"
}
}
// Status message that displays contextual feedback or notifications.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/alert
//
// Props:
// - Variant: Visual style (DefaultAlert or DestructiveAlert)
// - Class: Additional CSS classes
// Alert renders a status message component
func Alert(props AlertProps) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@ -67,13 +44,19 @@ func Alert(props AlertProps) templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
var templ_7745c5c3_Var2 = []any{
utils.TwMerge(
"relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
var templ_7745c5c3_Var2 = []any{utils.TwMerge(
// Layout
"relative w-full p-4",
"[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4",
"[&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
// Styling
"rounded-lg border",
getAlertVariantClasses(props.Variant),
// Custom
props.Class,
),
}
)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
@ -107,7 +90,7 @@ func Alert(props AlertProps) templ.Component {
})
}
// AlertTitle renders the title of the alert.
// AlertTitle renders the heading section
func AlertTitle() templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@ -129,7 +112,31 @@ func AlertTitle() templ.Component {
templ_7745c5c3_Var4 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h5 class=\"mb-1 font-medium leading-none tracking-tight\">")
var templ_7745c5c3_Var5 = []any{utils.TwMerge(
// Layout
"mb-1",
// Styling
"font-medium leading-none tracking-tight",
)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var5...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h5 class=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var5).String())
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/alert.templ`, Line: 1, Col: 0}
}
_, 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
}
@ -145,7 +152,7 @@ func AlertTitle() templ.Component {
})
}
// AlertDescription renders the description of the alert.
// AlertDescription renders the body content
func AlertDescription() templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@ -162,16 +169,40 @@ func AlertDescription() templ.Component {
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var5 := templ.GetChildren(ctx)
if templ_7745c5c3_Var5 == nil {
templ_7745c5c3_Var5 = templ.NopComponent
templ_7745c5c3_Var7 := templ.GetChildren(ctx)
if templ_7745c5c3_Var7 == nil {
templ_7745c5c3_Var7 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"text-sm [&amp;_p]:leading-relaxed\">")
var templ_7745c5c3_Var8 = []any{utils.TwMerge(
// Layout
"[&_p]:leading-relaxed",
// Styling
"text-sm",
)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var8...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ_7745c5c3_Var5.Render(ctx, templ_7745c5c3_Buffer)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var8).String())
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/alert.templ`, Line: 1, Col: 0}
}
_, 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("\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ_7745c5c3_Var7.Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -183,4 +214,13 @@ func AlertDescription() templ.Component {
})
}
func getAlertVariantClasses(variant AlertVariant) string {
switch variant {
case AlertVariantDestructive:
return "border-destructive text-destructive"
default:
return "border-border text-foreground"
}
}
var _ = templruntime.GeneratedTemplate

108
pkg/components/avatar.templ
View File

@ -6,40 +6,64 @@ import (
"strings"
)
// AvatarSize defines the available avatar dimensions
type AvatarSize string
const (
// AvatarSizeSmall renders a small avatar (32x32px)
AvatarSizeSmall AvatarSize = "small"
// AvatarSizeMedium renders a medium avatar (48x48px)
AvatarSizeMedium AvatarSize = "medium"
// AvatarSizeLarge renders a large avatar (64x64px)
AvatarSizeLarge AvatarSize = "large"
)
type AvatarProps struct {
// ImageSrc is the URL for the avatar image
// If empty, initials will be shown instead
ImageSrc string
// Name is used to generate initials when no image is provided
Name string
// Size controls the avatar dimensions (small, medium, large)
Size AvatarSize
// Class adds custom CSS classes
Class string
// Attributes for additional HTML attributes
Attributes templ.Attributes
ImageSrc string // URL of avatar image
Name string // Name for generating initials
Size AvatarSize // Size variant
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// AvatarInitials generates a 1-2 character initial from the given name
func AvatarInitials(name string) string {
// Avatar renders a user avatar image or initials
templ Avatar(props AvatarProps) {
<div
class={ utils.TwMerge(
// Layout
"inline-flex items-center justify-center",
avatarSizeClasses(props.Size),
// Styling
"rounded-full bg-muted",
// Custom
props.Class,
) }
{ props.Attributes... }
>
if props.ImageSrc != "" {
<img
src={ props.ImageSrc }
alt={ fmt.Sprintf("%s's avatar", props.Name) }
class={ utils.TwMerge(
// Layout
"w-full h-full",
// Styling
"rounded-full object-cover",
) }
/>
} else {
<span
class={ utils.TwMerge(
// Styling
"font-medium text-muted-foreground",
) }
>
{ avatarInitials(props.Name) }
</span>
}
</div>
}
func avatarInitials(name string) string {
parts := strings.Fields(name)
initials := ""
for i, part := range parts {
@ -53,8 +77,7 @@ func AvatarInitials(name string) string {
return strings.ToUpper(initials)
}
// AvatarSizeClasses maps sizes to their corresponding CSS classes
func AvatarSizeClasses(size AvatarSize) string {
func avatarSizeClasses(size AvatarSize) string {
switch size {
case AvatarSizeSmall:
return "w-8 h-8 text-xs"
@ -64,38 +87,3 @@ func AvatarSizeClasses(size AvatarSize) string {
return "w-12 h-12 text-base"
}
}
// Visual representation of a user through images or initials.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/avatar
//
// Props:
// - ImageSrc: URL for the avatar image
// - Name: Text to generate initials from when no image is provided
// - Size: Avatar dimensions (small, medium, large)
// - Class: Additional CSS classes
// - Attributes: Additional HTML attributes
templ Avatar(props AvatarProps) {
<div
class={
utils.TwMerge(
"inline-flex items-center justify-center rounded-full bg-muted",
AvatarSizeClasses(props.Size),
props.Class,
),
}
{ props.Attributes... }
>
if props.ImageSrc != "" {
<img
src={ props.ImageSrc }
alt={ fmt.Sprintf("%s's avatar", props.Name) }
class="w-full h-full object-cover rounded-full"
/>
} else {
<span class="font-medium text-muted-foreground">
{ AvatarInitials(props.Name) }
</span>
}
</div>
}

178
pkg/components/avatar_templ.go
View File

@ -14,75 +14,23 @@ import (
"strings"
)
// AvatarSize defines the available avatar dimensions
type AvatarSize string
const (
// AvatarSizeSmall renders a small avatar (32x32px)
AvatarSizeSmall AvatarSize = "small"
// AvatarSizeMedium renders a medium avatar (48x48px)
AvatarSizeMedium AvatarSize = "medium"
// AvatarSizeLarge renders a large avatar (64x64px)
AvatarSizeLarge AvatarSize = "large"
)
type AvatarProps struct {
// ImageSrc is the URL for the avatar image
// If empty, initials will be shown instead
ImageSrc string
// Name is used to generate initials when no image is provided
Name string
// Size controls the avatar dimensions (small, medium, large)
Size AvatarSize
// Class adds custom CSS classes
Class string
// Attributes for additional HTML attributes
Attributes templ.Attributes
ImageSrc string // URL of avatar image
Name string // Name for generating initials
Size AvatarSize // Size variant
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// AvatarInitials generates a 1-2 character initial from the given name
func AvatarInitials(name string) string {
parts := strings.Fields(name)
initials := ""
for i, part := range parts {
if i > 1 {
break
}
if len(part) > 0 {
initials += string(part[0])
}
}
return strings.ToUpper(initials)
}
// AvatarSizeClasses maps sizes to their corresponding CSS classes
func AvatarSizeClasses(size AvatarSize) string {
switch size {
case AvatarSizeSmall:
return "w-8 h-8 text-xs"
case AvatarSizeLarge:
return "w-16 h-16 text-xl"
default:
return "w-12 h-12 text-base"
}
}
// Visual representation of a user through images or initials.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/avatar
//
// Props:
// - ImageSrc: URL for the avatar image
// - Name: Text to generate initials from when no image is provided
// - Size: Avatar dimensions (small, medium, large)
// - Class: Additional CSS classes
// - Attributes: Additional HTML attributes
// Avatar renders a user avatar image or initials
func Avatar(props AvatarProps) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@ -104,13 +52,17 @@ func Avatar(props AvatarProps) templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
var templ_7745c5c3_Var2 = []any{
utils.TwMerge(
"inline-flex items-center justify-center rounded-full bg-muted",
AvatarSizeClasses(props.Size),
var templ_7745c5c3_Var2 = []any{utils.TwMerge(
// Layout
"inline-flex items-center justify-center",
avatarSizeClasses(props.Size),
// Styling
"rounded-full bg-muted",
// Custom
props.Class,
),
}
)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
@ -141,16 +93,27 @@ func Avatar(props AvatarProps) templ.Component {
return templ_7745c5c3_Err
}
if props.ImageSrc != "" {
var templ_7745c5c3_Var4 = []any{utils.TwMerge(
// Layout
"w-full h-full",
// Styling
"rounded-full object-cover",
)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var4...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<img src=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(props.ImageSrc)
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(props.ImageSrc)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/avatar.templ`, Line: 91, Col: 24}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/avatar.templ`, Line: 43, Col: 24}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -158,30 +121,64 @@ func Avatar(props AvatarProps) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%s's avatar", props.Name))
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%s's avatar", props.Name))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/avatar.templ`, Line: 92, Col: 48}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/avatar.templ`, Line: 44, Col: 48}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
_, 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("\" class=\"w-full h-full object-cover rounded-full\">")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var4).String())
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/avatar.templ`, Line: 1, Col: 0}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
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
}
} else {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<span class=\"font-medium text-muted-foreground\">")
var templ_7745c5c3_Var8 = []any{utils.TwMerge(
// Styling
"font-medium text-muted-foreground",
)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var8...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(AvatarInitials(props.Name))
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<span class=\"")
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/avatar.templ`, Line: 97, Col: 32}
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var8).String())
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/avatar.templ`, Line: 1, Col: 0}
}
_, 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("\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(avatarInitials(props.Name))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/avatar.templ`, Line: 60, Col: 32}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -198,4 +195,29 @@ func Avatar(props AvatarProps) templ.Component {
})
}
func avatarInitials(name string) string {
parts := strings.Fields(name)
initials := ""
for i, part := range parts {
if i > 1 {
break
}
if len(part) > 0 {
initials += string(part[0])
}
}
return strings.ToUpper(initials)
}
func avatarSizeClasses(size AvatarSize) string {
switch size {
case AvatarSizeSmall:
return "w-8 h-8 text-xs"
case AvatarSizeLarge:
return "w-16 h-16 text-xl"
default:
return "w-12 h-12 text-base"
}
}
var _ = templruntime.GeneratedTemplate

91
pkg/components/button.templ
View File

@ -5,67 +5,39 @@ import (
"strings"
)
// ButtonVariant defines the available button styles
type ButtonVariant string
// ButtonSize defines the available button dimensions
type ButtonSize string
const (
// Button style variants
ButtonVariantDefault ButtonVariant = "default" // Primary action button
ButtonVariantDestructive ButtonVariant = "destructive" // Dangerous/warning action
ButtonVariantOutline ButtonVariant = "outline" // Bordered button
ButtonVariantSecondary ButtonVariant = "secondary" // Less prominent action
ButtonVariantGhost ButtonVariant = "ghost" // Minimal styling
ButtonVariantLink ButtonVariant = "link" // Appears as a text link
ButtonVariantDefault ButtonVariant = "default"
ButtonVariantDestructive ButtonVariant = "destructive"
ButtonVariantOutline ButtonVariant = "outline"
ButtonVariantSecondary ButtonVariant = "secondary"
ButtonVariantGhost ButtonVariant = "ghost"
ButtonVariantLink ButtonVariant = "link"
// Button sizes
ButtonSizeMd ButtonSize = "md" // Standard size
ButtonSizeSm ButtonSize = "sm" // Compact size
ButtonSizeLg ButtonSize = "lg" // Large size
ButtonSizeIcon ButtonSize = "icon" // Square icon button
ButtonSizeMd ButtonSize = "md"
ButtonSizeSm ButtonSize = "sm"
ButtonSizeLg ButtonSize = "lg"
ButtonSizeIcon ButtonSize = "icon"
)
type ButtonProps struct {
// Class adds custom CSS classes
Class string
// Text contains the button label
Text string
// Variant controls the button styling
Variant ButtonVariant
// Size controls button dimensions
Size ButtonSize
// FullWidth makes button expand to container width
FullWidth bool
// Href turns the button into a link
Href string
// Target controls link opening behavior
Target string
// Disabled sets the button to an inactive state
Disabled bool
// Type sets the button type attribute
Type string
// Attributes for additional HTML attributes
Attributes templ.Attributes
// IconLeft displays an icon before text
IconLeft templ.Component
// IconRight displays an icon after text
IconRight templ.Component
Class string // Additional CSS classes
Text string // Button label text
Variant ButtonVariant // Visual style (default, destructive, outline, secondary, ghost, link)
Size ButtonSize // Button dimensions (md, sm, lg, icon)
FullWidth bool // Expand to fill container
Href string // Optional URL for link buttons
Target string // Link target attribute (default: _self)
Disabled bool // Interactivity state
Type string // Button type attribute
IconLeft templ.Component // Icon component before text
IconRight templ.Component // Icon component after text
Attributes templ.Attributes // Additional HTML attributes
}
// variantClasses maps variants to their CSS classes
func (b ButtonProps) variantClasses() string {
switch b.Variant {
case ButtonVariantDestructive:
@ -83,7 +55,6 @@ func (b ButtonProps) variantClasses() string {
}
}
// sizeClasses maps sizes to their CSS classes
func (b ButtonProps) sizeClasses() string {
switch b.Size {
case ButtonSizeSm:
@ -97,7 +68,6 @@ func (b ButtonProps) sizeClasses() string {
}
}
// modifierClasses generates additional utility classes
func (b ButtonProps) modifierClasses() string {
classes := []string{}
if b.FullWidth {
@ -107,22 +77,6 @@ func (b ButtonProps) modifierClasses() string {
}
// Interactive element that triggers actions when clicked.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/button
//
// Props:
// - Class: Additional CSS classes
// - Text: Button label text
// - Variant: Visual style (default, destructive, outline, etc)
// - Size: Button dimensions (sm, md, lg, icon)
// - FullWidth: Expand to fill container
// - Href: Optional URL for link buttons
// - Target: Link target attribute
// - Disabled: Interactivity state
// - Type: Button type attribute
// - Attributes: Additional HTML attributes
// - IconLeft: Icon component before text
// - IconRight: Icon component after text
templ Button(props ButtonProps) {
if props.Href != "" {
<a
@ -171,7 +125,6 @@ templ Button(props ButtonProps) {
}
}
// renderButtonContent arranges button text and icons
templ renderButtonContent(props ButtonProps) {
<span class="flex gap-2 items-center">
if props.IconLeft != nil {

97
pkg/components/button_templ.go
View File

@ -13,67 +13,39 @@ import (
"strings"
)
// ButtonVariant defines the available button styles
type ButtonVariant string
// ButtonSize defines the available button dimensions
type ButtonSize string
const (
// Button style variants
ButtonVariantDefault ButtonVariant = "default" // Primary action button
ButtonVariantDestructive ButtonVariant = "destructive" // Dangerous/warning action
ButtonVariantOutline ButtonVariant = "outline" // Bordered button
ButtonVariantSecondary ButtonVariant = "secondary" // Less prominent action
ButtonVariantGhost ButtonVariant = "ghost" // Minimal styling
ButtonVariantLink ButtonVariant = "link" // Appears as a text link
ButtonVariantDefault ButtonVariant = "default"
ButtonVariantDestructive ButtonVariant = "destructive"
ButtonVariantOutline ButtonVariant = "outline"
ButtonVariantSecondary ButtonVariant = "secondary"
ButtonVariantGhost ButtonVariant = "ghost"
ButtonVariantLink ButtonVariant = "link"
// Button sizes
ButtonSizeMd ButtonSize = "md" // Standard size
ButtonSizeSm ButtonSize = "sm" // Compact size
ButtonSizeLg ButtonSize = "lg" // Large size
ButtonSizeIcon ButtonSize = "icon" // Square icon button
ButtonSizeMd ButtonSize = "md"
ButtonSizeSm ButtonSize = "sm"
ButtonSizeLg ButtonSize = "lg"
ButtonSizeIcon ButtonSize = "icon"
)
type ButtonProps struct {
// Class adds custom CSS classes
Class string
// Text contains the button label
Text string
// Variant controls the button styling
Variant ButtonVariant
// Size controls button dimensions
Size ButtonSize
// FullWidth makes button expand to container width
FullWidth bool
// Href turns the button into a link
Href string
// Target controls link opening behavior
Target string
// Disabled sets the button to an inactive state
Disabled bool
// Type sets the button type attribute
Type string
// Attributes for additional HTML attributes
Attributes templ.Attributes
// IconLeft displays an icon before text
IconLeft templ.Component
// IconRight displays an icon after text
IconRight templ.Component
Class string // Additional CSS classes
Text string // Button label text
Variant ButtonVariant // Visual style (default, destructive, outline, secondary, ghost, link)
Size ButtonSize // Button dimensions (md, sm, lg, icon)
FullWidth bool // Expand to fill container
Href string // Optional URL for link buttons
Target string // Link target attribute (default: _self)
Disabled bool // Interactivity state
Type string // Button type attribute
IconLeft templ.Component // Icon component before text
IconRight templ.Component // Icon component after text
Attributes templ.Attributes // Additional HTML attributes
}
// variantClasses maps variants to their CSS classes
func (b ButtonProps) variantClasses() string {
switch b.Variant {
case ButtonVariantDestructive:
@ -91,7 +63,6 @@ func (b ButtonProps) variantClasses() string {
}
}
// sizeClasses maps sizes to their CSS classes
func (b ButtonProps) sizeClasses() string {
switch b.Size {
case ButtonSizeSm:
@ -105,7 +76,6 @@ func (b ButtonProps) sizeClasses() string {
}
}
// modifierClasses generates additional utility classes
func (b ButtonProps) modifierClasses() string {
classes := []string{}
if b.FullWidth {
@ -115,22 +85,6 @@ func (b ButtonProps) modifierClasses() string {
}
// Interactive element that triggers actions when clicked.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/button
//
// Props:
// - Class: Additional CSS classes
// - Text: Button label text
// - Variant: Visual style (default, destructive, outline, etc)
// - Size: Button dimensions (sm, md, lg, icon)
// - FullWidth: Expand to fill container
// - Href: Optional URL for link buttons
// - Target: Link target attribute
// - Disabled: Interactivity state
// - Type: Button type attribute
// - Attributes: Additional HTML attributes
// - IconLeft: Icon component before text
// - IconRight: Icon component after text
func Button(props ButtonProps) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@ -183,7 +137,7 @@ func Button(props ButtonProps) templ.Component {
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(props.Target)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/button.templ`, Line: 130, Col: 24}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/button.templ`, Line: 84, Col: 24}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
@ -273,7 +227,7 @@ func Button(props ButtonProps) templ.Component {
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: 163, Col: 21}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/button.templ`, Line: 117, Col: 21}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
@ -315,7 +269,6 @@ func Button(props ButtonProps) templ.Component {
})
}
// renderButtonContent arranges button text and icons
func renderButtonContent(props ButtonProps) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@ -350,7 +303,7 @@ func renderButtonContent(props ButtonProps) templ.Component {
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: 180, Col: 14}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/button.templ`, Line: 133, Col: 14}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {

50
pkg/components/card.templ
View File

@ -2,7 +2,6 @@ package components
import "github.com/axzilla/goilerplate/pkg/utils"
// CardImagePosition defines where the image should be placed in the card
type CardImagePosition string
const (
@ -13,27 +12,12 @@ const (
)
type CardProps struct {
// Class specifies additional CSS classes to apply to the card.
// Default: "" (empty string)
Class string
// Attributes allows passing additional HTML attributes to the card element.
// Default: nil
Attributes templ.Attributes
// Horizontal enables horizontal layout for side images
// Default: false
Horizontal bool
Horizontal bool // Enables horizontal layout for side images
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Container for organizing related content and actions.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/card
//
// Props:
// - Class: Additional CSS classes to apply to the card. Default: "" (empty string)
// - Attributes: Additional HTML attributes to apply to the card element. Default: nil
// - Horizontal: Enables horizontal layout for side images. Default: false
templ Card(props CardProps) {
<div
class={
@ -50,27 +34,15 @@ templ Card(props CardProps) {
}
type CardImageProps struct {
// Src is the source URL of the image
Src string
// Alt is the alternative text for the image
Alt string
// Class allows adding custom classes to the image container
Class string
// AspectRatio sets the aspect ratio of the image (e.g., "16/9", "4/3", "1/1")
AspectRatio string
// Position determines the position of the image in the card
Position CardImagePosition
// Width sets the width for side images (e.g., "1/3", "1/2")
Width string
Src string // Image URL
Alt string // Image alt text
Class string // Additional CSS classes
AspectRatio string // Aspect ratio for image
Position CardImagePosition // Image position
Width string // Image width
}
// getImageWidth returns the appropriate width class
func getImageWidth(width string) string {
func imageWidth(width string) string {
if width == "" {
return "w-1/3"
}
@ -92,7 +64,7 @@ templ CardImage(props CardImageProps) {
templ.KV("rounded-r-lg", props.Position == CardImageRight),
// Width for side images
templ.KV("shrink-0", props.Position == CardImageLeft || props.Position == CardImageRight),
templ.KV(getImageWidth(props.Width), props.Position == CardImageLeft || props.Position == CardImageRight),
templ.KV(imageWidth(props.Width), props.Position == CardImageLeft || props.Position == CardImageRight),
}
if props.AspectRatio != "" {
style={ "aspect-ratio: " + props.AspectRatio }

56
pkg/components/card_templ.go
View File

@ -10,7 +10,6 @@ import templruntime "github.com/a-h/templ/runtime"
import "github.com/axzilla/goilerplate/pkg/utils"
// CardImagePosition defines where the image should be placed in the card
type CardImagePosition string
const (
@ -21,27 +20,12 @@ const (
)
type CardProps struct {
// Class specifies additional CSS classes to apply to the card.
// Default: "" (empty string)
Class string
// Attributes allows passing additional HTML attributes to the card element.
// Default: nil
Attributes templ.Attributes
// Horizontal enables horizontal layout for side images
// Default: false
Horizontal bool
Horizontal bool // Enables horizontal layout for side images
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Container for organizing related content and actions.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/card
//
// Props:
// - Class: Additional CSS classes to apply to the card. Default: "" (empty string)
// - Attributes: Additional HTML attributes to apply to the card element. Default: nil
// - Horizontal: Enables horizontal layout for side images. Default: false
func Card(props CardProps) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@ -112,27 +96,15 @@ func Card(props CardProps) templ.Component {
}
type CardImageProps struct {
// Src is the source URL of the image
Src string
// Alt is the alternative text for the image
Alt string
// Class allows adding custom classes to the image container
Class string
// AspectRatio sets the aspect ratio of the image (e.g., "16/9", "4/3", "1/1")
AspectRatio string
// Position determines the position of the image in the card
Position CardImagePosition
// Width sets the width for side images (e.g., "1/3", "1/2")
Width string
Src string // Image URL
Alt string // Image alt text
Class string // Additional CSS classes
AspectRatio string // Aspect ratio for image
Position CardImagePosition // Image position
Width string // Image width
}
// getImageWidth returns the appropriate width class
func getImageWidth(width string) string {
func imageWidth(width string) string {
if width == "" {
return "w-1/3"
}
@ -173,7 +145,7 @@ func CardImage(props CardImageProps) templ.Component {
templ.KV("rounded-r-lg", props.Position == CardImageRight),
// Width for side images
templ.KV("shrink-0", props.Position == CardImageLeft || props.Position == CardImageRight),
templ.KV(getImageWidth(props.Width), props.Position == CardImageLeft || props.Position == CardImageRight),
templ.KV(imageWidth(props.Width), props.Position == CardImageLeft || props.Position == CardImageRight),
}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var5...)
if templ_7745c5c3_Err != nil {
@ -204,7 +176,7 @@ func CardImage(props CardImageProps) templ.Component {
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs("aspect-ratio: " + props.AspectRatio)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/card.templ`, Line: 98, Col: 47}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/card.templ`, Line: 70, Col: 47}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
@ -222,7 +194,7 @@ func CardImage(props CardImageProps) templ.Component {
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(props.Src)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/card.templ`, Line: 102, Col: 18}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/card.templ`, Line: 74, Col: 18}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
@ -235,7 +207,7 @@ func CardImage(props CardImageProps) templ.Component {
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(props.Alt)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/card.templ`, Line: 103, Col: 18}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/card.templ`, Line: 75, Col: 18}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil {

71
pkg/components/checkbox.bak.templ
View File

@ -1,71 +0,0 @@
package components
import "github.com/axzilla/goilerplate/pkg/icons"
type CheckboxBakProps struct {
// ID uniquely identifies the checkbox input
ID string
// Name sets the form field name
Name string
// Value sets the checkbox value
Value string
// Label displays text next to checkbox
// Empty string hides the label
Label string
// 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
}
// Control that allows selecting multiple options from a list.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/checkbox
//
// Props:
// - ID: Unique identifier for the input
// - Name: Form field name
// - Value: Checkbox value
// - Label: Optional text label
// - Class: Additional CSS classes
// - Attributes: Additional HTML attributes
templ CheckboxBak(props CheckboxProps) {
<div class="peer relative flex items-center">
<input
checked?={ props.Checked }
disabled?={ props.Disabled }
id={ props.ID }
name={ props.Name }
value={ props.Value }
type="checkbox"
class="peer before:content[''] disabled:opacity-50 relative size-4 cursor-pointer appearance-none overflow-hidden
rounded-sm border border-2 border-primary
bg-background before:absolute before:inset-0
checked:before:bg-primary
focus:outline focus:outline-2 focus:outline-offset-2
focus:outline-ring checked:focus:outline-primary
active:outline-offset-0
disabled:cursor-not-allowed
transition-colors"
{ props.Attributes... }
/>
<div
class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3
-translate-x-1/2 -translate-y-1/2 text-primary-foreground
peer-checked:visible"
>
@icons.Check(icons.IconProps{Size: "12"})
</div>
</div>
}

151
pkg/components/checkbox.bak_templ.go
View File

@ -1,151 +0,0 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.2.793
package components
//lint:file-ignore SA4006 This context is only used if a nested component is present.
import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
import "github.com/axzilla/goilerplate/pkg/icons"
type CheckboxBakProps struct {
// ID uniquely identifies the checkbox input
ID string
// Name sets the form field name
Name string
// Value sets the checkbox value
Value string
// Label displays text next to checkbox
// Empty string hides the label
Label string
// 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
}
// Control that allows selecting multiple options from a list.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/checkbox
//
// Props:
// - ID: Unique identifier for the input
// - Name: Form field name
// - Value: Checkbox value
// - Label: Optional text label
// - Class: Additional CSS classes
// - Attributes: Additional HTML attributes
func CheckboxBak(props CheckboxProps) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
if templ_7745c5c3_Var1 == nil {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"peer 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_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/checkbox.bak.templ`, Line: 48, Col: 16}
}
_, 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("\" name=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(props.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/checkbox.bak.templ`, Line: 49, Col: 20}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
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_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(props.Value)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/checkbox.bak.templ`, Line: 50, Col: 22}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" type=\"checkbox\" class=\"peer before:content[&#39;&#39;] disabled:opacity-50 relative size-4 cursor-pointer appearance-none overflow-hidden \n rounded-sm border border-2 border-primary\n bg-background before:absolute before:inset-0 \n checked:before:bg-primary\n focus:outline focus:outline-2 focus:outline-offset-2 \n focus:outline-ring checked:focus:outline-primary \n active:outline-offset-0 \n disabled:cursor-not-allowed\n transition-colors\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, props.Attributes)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("><div class=\"pointer-events-none invisible absolute left-1/2 top-1/2 size-3 \n -translate-x-1/2 -translate-y-1/2 text-primary-foreground \n peer-checked:visible\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = icons.Check(icons.IconProps{Size: "12"}).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return templ_7745c5c3_Err
})
}
var _ = templruntime.GeneratedTemplate

2
pkg/components/checkbox.templ
View File

@ -14,7 +14,7 @@ type CheckboxProps struct {
Checked bool // Selected state
Icon templ.Component // Custom check icon
Class string // Additional CSS classes
Attributes templ.Attributes // Extra HTML/Alpine attributes
Attributes templ.Attributes // Additional HTML attributes
}
// Checkbox renders a styled checkbox input with customizable icon

2
pkg/components/checkbox_templ.go
View File

@ -22,7 +22,7 @@ type CheckboxProps struct {
Checked bool // Selected state
Icon templ.Component // Custom check icon
Class string // Additional CSS classes
Attributes templ.Attributes // Extra HTML/Alpine attributes
Attributes templ.Attributes // Additional HTML attributes
}
// Checkbox renders a styled checkbox input with customizable icon

10
pkg/components/datepicker.templ
View File

@ -77,7 +77,6 @@ var (
}
)
// Pre-defined datepicker configurations
var (
// DatePickerISO provides ISO format with default locale
DatePickerISO = DatepickerConfig{
@ -118,8 +117,7 @@ func NewDatepickerConfig(format DateFormat, locale DateLocale) DatepickerConfig
}
}
// GetGoFormat returns the Go time format string for the current configuration
func (c DatepickerConfig) GetGoFormat() string {
func (c DatepickerConfig) getGoFormat() string {
if format, ok := dateFormatMapping[c.Format]; ok {
return format
}
@ -143,7 +141,7 @@ type DatepickerProps struct {
Disabled bool // Prevents interaction
HasError bool // Error state styling
Class string // Additional CSS classes
Attributes templ.Attributes // Extra HTML/Alpine attributes
Attributes templ.Attributes // Additional HTML attributes
}
// Datepicker renders a date selection input with calendar popup
@ -154,7 +152,7 @@ templ Datepicker(props DatepickerProps) {
<div
class={ utils.TwMerge("relative", props.Class) }
if props.Value != (time.Time{}) {
data-value={ props.Value.Format(props.Config.GetGoFormat()) }
data-value={ props.Value.Format(props.Config.getGoFormat()) }
}
data-format={ string(props.Config.Format) }
data-monthnames={ templ.JSONString(props.Config.Locale.MonthNames) }
@ -274,7 +272,7 @@ templ Datepicker(props DatepickerProps) {
@Input(InputProps{
ID: props.ID,
Name: props.Name,
Value: props.Value.Format(props.Config.GetGoFormat()),
Value: props.Value.Format(props.Config.getGoFormat()),
Placeholder: props.Placeholder,
Disabled: props.Disabled,
Class: utils.TwMerge(props.Class, "peer"),

20
pkg/components/datepicker_templ.go
View File

@ -85,7 +85,6 @@ var (
}
)
// Pre-defined datepicker configurations
var (
// DatePickerISO provides ISO format with default locale
DatePickerISO = DatepickerConfig{
@ -126,8 +125,7 @@ func NewDatepickerConfig(format DateFormat, locale DateLocale) DatepickerConfig
}
}
// GetGoFormat returns the Go time format string for the current configuration
func (c DatepickerConfig) GetGoFormat() string {
func (c DatepickerConfig) getGoFormat() string {
if format, ok := dateFormatMapping[c.Format]; ok {
return format
}
@ -151,7 +149,7 @@ type DatepickerProps struct {
Disabled bool // Prevents interaction
HasError bool // Error state styling
Class string // Additional CSS classes
Attributes templ.Attributes // Extra HTML/Alpine attributes
Attributes templ.Attributes // Additional HTML attributes
}
// Datepicker renders a date selection input with calendar popup
@ -207,9 +205,9 @@ func Datepicker(props DatepickerProps) templ.Component {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(props.Value.Format(props.Config.GetGoFormat()))
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(props.Value.Format(props.Config.getGoFormat()))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 157, Col: 62}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 155, Col: 62}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
@ -227,7 +225,7 @@ func Datepicker(props DatepickerProps) templ.Component {
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(string(props.Config.Format))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 159, Col: 43}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 157, Col: 43}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
@ -240,7 +238,7 @@ func Datepicker(props DatepickerProps) templ.Component {
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(templ.JSONString(props.Config.Locale.MonthNames))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 160, Col: 68}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 158, Col: 68}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
@ -253,7 +251,7 @@ func Datepicker(props DatepickerProps) templ.Component {
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(templ.JSONString(props.Config.Locale.DayNames))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 161, Col: 64}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 159, Col: 64}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
@ -266,7 +264,7 @@ func Datepicker(props DatepickerProps) 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/datepicker.templ`, Line: 162, Col: 26}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 160, Col: 26}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
@ -279,7 +277,7 @@ func Datepicker(props DatepickerProps) templ.Component {
templ_7745c5c3_Err = Input(InputProps{
ID: props.ID,
Name: props.Name,
Value: props.Value.Format(props.Config.GetGoFormat()),
Value: props.Value.Format(props.Config.getGoFormat()),
Placeholder: props.Placeholder,
Disabled: props.Disabled,
Class: utils.TwMerge(props.Class, "peer"),

73
pkg/components/dropdown_menu.templ
View File

@ -8,50 +8,25 @@ import (
)
type DropdownMenuItem struct {
// Label displays text for the menu item
Label string
// Value for non-link menu items
Value string
// Href makes item a navigation link
Href string
// Target controls link opening behavior
Target string
// IconLeft displays icon before label
IconLeft templ.Component
// IconRight displays icon after label
IconRight templ.Component
// SubItems creates nested submenu
SubItems []DropdownMenuItem
// Disabled controls interactive state
Disabled bool
// Attributes for additional HTML attributes
Attributes templ.Attributes
Label string // Display text
Value string // Optional value
Href string // Optional link URL
Target string // Optional link target
IconLeft templ.Component // Optional icon on the left
IconRight templ.Component // Optional icon on the right
SubItems []DropdownMenuItem // Nested submenu items
Disabled bool // Disables the item
Attributes templ.Attributes // Additional HTML attributesß
}
type DropdownMenuProps struct {
// Items defines the menu structure
Items []DropdownMenuItem
// Trigger overrides default button trigger
Trigger templ.Component
// Class adds custom CSS classes
Class string
// Position sets preferred menu placement (left, right, top, bottom)
Position string
Items []DropdownMenuItem // Menu items
Trigger templ.Component // Custom trigger element
Class string // Additional CSS classes
Position string // Preferred placement
}
// ModifierClasses generates state-based CSS classes
func (d DropdownMenuItem) ModifierClasses() string {
func (d DropdownMenuItem) modifierClasses() string {
classes := []string{}
if d.Disabled {
classes = append(classes, "text-muted-foreground cursor-not-allowed")
@ -61,8 +36,6 @@ func (d DropdownMenuItem) ModifierClasses() string {
return strings.Join(classes, " ")
}
// renderMenuItem handles recursive menu item rendering
// Supports regular items, links, and nested submenus up to 3 levels
templ renderMenuItem(item DropdownMenuItem, index int, depth int) {
if len(item.SubItems) > 0 {
<div class="relative group">
@ -70,7 +43,7 @@ templ renderMenuItem(item DropdownMenuItem, index int, depth int) {
class={
utils.TwMerge(
"w-full text-left flex items-center justify-between px-4 py-2 text-sm",
item.ModifierClasses(),
item.modifierClasses(),
),
}
role="menuitem"
@ -108,7 +81,7 @@ templ renderMenuItem(item DropdownMenuItem, index int, depth int) {
href={ templ.SafeURL(item.Href) }
target={ item.Target }
class={
"block px-4 py-2 text-sm flex items-center",
"px-4 py-2 text-sm flex items-center",
templ.KV("text-foreground hover:bg-accent hover:text-accent-foreground", !item.Disabled),
templ.KV("text-muted-foreground cursor-not-allowed", item.Disabled),
}
@ -156,20 +129,6 @@ templ renderMenuItem(item DropdownMenuItem, index int, depth int) {
}
// Floating menu for displaying a list of actions or options.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/dropdown-menu
//
// Props:
// - Items: Menu structure and content
// - Trigger: Custom trigger element (optional)
// - Class: Additional CSS classes
// - Position: Preferred placement
//
// Features:
// - Nested submenus (up to 3 levels)
// - Automatic position adjustment
// - Keyboard navigation
// - ARIA support
templ DropdownMenu(props DropdownMenuProps) {
<div
x-data="{

89
pkg/components/dropdown_menu_templ.go
View File

@ -16,50 +16,25 @@ import (
)
type DropdownMenuItem struct {
// Label displays text for the menu item
Label string
// Value for non-link menu items
Value string
// Href makes item a navigation link
Href string
// Target controls link opening behavior
Target string
// IconLeft displays icon before label
IconLeft templ.Component
// IconRight displays icon after label
IconRight templ.Component
// SubItems creates nested submenu
SubItems []DropdownMenuItem
// Disabled controls interactive state
Disabled bool
// Attributes for additional HTML attributes
Attributes templ.Attributes
Label string // Display text
Value string // Optional value
Href string // Optional link URL
Target string // Optional link target
IconLeft templ.Component // Optional icon on the left
IconRight templ.Component // Optional icon on the right
SubItems []DropdownMenuItem // Nested submenu items
Disabled bool // Disables the item
Attributes templ.Attributes // Additional HTML attributesß
}
type DropdownMenuProps struct {
// Items defines the menu structure
Items []DropdownMenuItem
// Trigger overrides default button trigger
Trigger templ.Component
// Class adds custom CSS classes
Class string
// Position sets preferred menu placement (left, right, top, bottom)
Position string
Items []DropdownMenuItem // Menu items
Trigger templ.Component // Custom trigger element
Class string // Additional CSS classes
Position string // Preferred placement
}
// ModifierClasses generates state-based CSS classes
func (d DropdownMenuItem) ModifierClasses() string {
func (d DropdownMenuItem) modifierClasses() string {
classes := []string{}
if d.Disabled {
classes = append(classes, "text-muted-foreground cursor-not-allowed")
@ -69,8 +44,6 @@ func (d DropdownMenuItem) ModifierClasses() string {
return strings.Join(classes, " ")
}
// renderMenuItem handles recursive menu item rendering
// Supports regular items, links, and nested submenus up to 3 levels
func renderMenuItem(item DropdownMenuItem, index int, depth int) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@ -100,7 +73,7 @@ func renderMenuItem(item DropdownMenuItem, index int, depth int) templ.Component
var templ_7745c5c3_Var2 = []any{
utils.TwMerge(
"w-full text-left flex items-center justify-between px-4 py-2 text-sm",
item.ModifierClasses(),
item.modifierClasses(),
),
}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
@ -127,7 +100,7 @@ func renderMenuItem(item DropdownMenuItem, index int, depth int) templ.Component
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("menu-item-%d", index))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/dropdown_menu.templ`, Line: 78, Col: 43}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/dropdown_menu.templ`, Line: 51, Col: 43}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
@ -160,7 +133,7 @@ func renderMenuItem(item DropdownMenuItem, index int, depth int) templ.Component
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(item.Label)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/dropdown_menu.templ`, Line: 88, Col: 17}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/dropdown_menu.templ`, Line: 61, Col: 17}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
@ -207,7 +180,7 @@ func renderMenuItem(item DropdownMenuItem, index int, depth int) templ.Component
}
} else if item.Href != "" {
var templ_7745c5c3_Var6 = []any{
"block px-4 py-2 text-sm flex items-center",
"px-4 py-2 text-sm flex items-center",
templ.KV("text-foreground hover:bg-accent hover:text-accent-foreground", !item.Disabled),
templ.KV("text-muted-foreground cursor-not-allowed", item.Disabled),
}
@ -231,7 +204,7 @@ func renderMenuItem(item DropdownMenuItem, index int, depth int) templ.Component
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(item.Target)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/dropdown_menu.templ`, Line: 109, Col: 23}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/dropdown_menu.templ`, Line: 82, Col: 23}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
@ -257,7 +230,7 @@ func renderMenuItem(item DropdownMenuItem, index int, depth int) templ.Component
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("menu-item-%d", index))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/dropdown_menu.templ`, Line: 117, Col: 42}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/dropdown_menu.templ`, Line: 90, Col: 42}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {
@ -284,7 +257,7 @@ func renderMenuItem(item DropdownMenuItem, index int, depth int) templ.Component
var templ_7745c5c3_Var11 string
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(item.Label)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/dropdown_menu.templ`, Line: 124, Col: 16}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/dropdown_menu.templ`, Line: 97, Col: 16}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
if templ_7745c5c3_Err != nil {
@ -342,7 +315,7 @@ func renderMenuItem(item DropdownMenuItem, index int, depth int) templ.Component
var templ_7745c5c3_Var14 string
templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("menu-item-%d", index))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/dropdown_menu.templ`, Line: 141, Col: 42}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/dropdown_menu.templ`, Line: 114, Col: 42}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
if templ_7745c5c3_Err != nil {
@ -375,7 +348,7 @@ func renderMenuItem(item DropdownMenuItem, index int, depth int) templ.Component
var templ_7745c5c3_Var15 string
templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(item.Label)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/dropdown_menu.templ`, Line: 149, Col: 16}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/dropdown_menu.templ`, Line: 122, Col: 16}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
if templ_7745c5c3_Err != nil {
@ -401,20 +374,6 @@ func renderMenuItem(item DropdownMenuItem, index int, depth int) templ.Component
}
// Floating menu for displaying a list of actions or options.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/dropdown-menu
//
// Props:
// - Items: Menu structure and content
// - Trigger: Custom trigger element (optional)
// - Class: Additional CSS classes
// - Position: Preferred placement
//
// Features:
// - Nested submenus (up to 3 levels)
// - Automatic position adjustment
// - Keyboard navigation
// - ARIA support
func DropdownMenu(props DropdownMenuProps) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@ -461,7 +420,7 @@ func DropdownMenu(props DropdownMenuProps) templ.Component {
var templ_7745c5c3_Var19 string
templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(props.Position)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/dropdown_menu.templ`, Line: 200, Col: 32}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/dropdown_menu.templ`, Line: 159, Col: 32}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
if templ_7745c5c3_Err != nil {

12
pkg/components/form.templ
View File

@ -2,10 +2,9 @@ package components
import "github.com/axzilla/goilerplate/pkg/utils"
// FormItemProps represents a form container's properties
type FormItemProps struct {
ID string // Optional container ID
Class string // Custom classes
Class string // Additional CSS classes
}
// FormItem wraps form elements in a vertical layout
@ -22,12 +21,11 @@ templ FormItemFlex(props FormItemProps) {
</div>
}
// FormLabelProps represents label properties
type FormLabelProps struct {
For string // Target form element ID
Text string // Label text
Class string // Custom classes
DisabledClass string // Classes applied when input is disabled
Class string // Additional CSS classes
DisabledClass string // Additional CSS classes when the form element is disabled
}
// FormLabel renders a form label
@ -42,7 +40,7 @@ templ FormLabel(props FormLabelProps) {
// FormDescriptionProps represents helper text properties
type FormDescriptionProps struct {
Class string // Custom classes
Class string // Additional CSS classes
}
// FormDescription renders helper text below form elements
@ -56,7 +54,7 @@ templ FormDescription(props FormDescriptionProps) {
type FormMessageProps struct {
Type string // error, success, warning, info
Message string // Message text
Class string // Custom classes
Class string // Additional CSS classes
}
// FormMessage renders feedback messages

14
pkg/components/form_templ.go
View File

@ -10,10 +10,9 @@ import templruntime "github.com/a-h/templ/runtime"
import "github.com/axzilla/goilerplate/pkg/utils"
// FormItemProps represents a form container's properties
type FormItemProps struct {
ID string // Optional container ID
Class string // Custom classes
Class string // Additional CSS classes
}
// FormItem wraps form elements in a vertical layout
@ -128,12 +127,11 @@ func FormItemFlex(props FormItemProps) templ.Component {
})
}
// FormLabelProps represents label properties
type FormLabelProps struct {
For string // Target form element ID
Text string // Label text
Class string // Custom classes
DisabledClass string // Classes applied when input is disabled
Class string // Additional CSS classes
DisabledClass string // Additional CSS classes when the form element is disabled
}
// FormLabel renders a form label
@ -173,7 +171,7 @@ func FormLabel(props FormLabelProps) templ.Component {
// FormDescriptionProps represents helper text properties
type FormDescriptionProps struct {
Class string // Custom classes
Class string // Additional CSS classes
}
// FormDescription renders helper text below form elements
@ -236,7 +234,7 @@ func FormDescription(props FormDescriptionProps) templ.Component {
type FormMessageProps struct {
Type string // error, success, warning, info
Message string // Message text
Class string // Custom classes
Class string // Additional CSS classes
}
// FormMessage renders feedback messages
@ -292,7 +290,7 @@ func FormMessage(props FormMessageProps) templ.Component {
var templ_7745c5c3_Var14 string
templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(props.Message)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/form.templ`, Line: 73, Col: 17}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/form.templ`, Line: 71, Col: 17}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
if templ_7745c5c3_Err != nil {

6
pkg/components/input.templ
View File

@ -2,7 +2,6 @@ package components
import "github.com/axzilla/goilerplate/pkg/utils"
// InputType defines the type of input field
type InputType string
const (
@ -18,7 +17,6 @@ const (
InputTypeFile InputType = "file"
)
// InputProps configures the Input component
type InputProps struct {
Type InputType // Input field type
Placeholder string // Helper text shown when empty
@ -27,10 +25,10 @@ type InputProps struct {
ID string // DOM identifier
Disabled bool // Prevents interaction
Readonly bool // Allows selection only
Class string // Additional CSS classes
FileAccept string // Allowed file types
HasError bool // Error state styling
Attributes templ.Attributes // Extra HTML/Alpine attributes
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Input renders a styled form input field

20
pkg/components/input_templ.go
View File

@ -10,7 +10,6 @@ import templruntime "github.com/a-h/templ/runtime"
import "github.com/axzilla/goilerplate/pkg/utils"
// InputType defines the type of input field
type InputType string
const (
@ -26,7 +25,6 @@ const (
InputTypeFile InputType = "file"
)
// InputProps configures the Input component
type InputProps struct {
Type InputType // Input field type
Placeholder string // Helper text shown when empty
@ -35,10 +33,10 @@ type InputProps struct {
ID string // DOM identifier
Disabled bool // Prevents interaction
Readonly bool // Allows selection only
Class string // Additional CSS classes
FileAccept string // Allowed file types
HasError bool // Error state styling
Attributes templ.Attributes // Extra HTML/Alpine attributes
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Input renders a styled form input field
@ -95,7 +93,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: 39, Col: 18}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 37, Col: 18}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
@ -108,7 +106,7 @@ func Input(props InputProps) templ.Component {
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, 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: 40, Col: 27}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 38, Col: 27}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
@ -121,7 +119,7 @@ func Input(props InputProps) templ.Component {
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, 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: 41, Col: 33}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 39, Col: 33}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
@ -150,7 +148,7 @@ func Input(props InputProps) 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/input.templ`, Line: 44, Col: 19}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 42, Col: 19}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
@ -168,7 +166,7 @@ func Input(props InputProps) 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/input.templ`, Line: 46, Col: 22}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 44, Col: 22}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
@ -186,7 +184,7 @@ func Input(props InputProps) 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/input.templ`, Line: 48, Col: 15}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 46, Col: 15}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
@ -217,7 +215,7 @@ func Input(props InputProps) templ.Component {
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, 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: 71, Col: 28}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/input.templ`, Line: 69, Col: 28}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {

5
pkg/components/label.templ
View File

@ -1,13 +1,12 @@
package components
// LabelProps represents label properties
type LabelProps struct {
ID string // Optional label ID
For string // Target input ID
Text string // Label text
Error string // Error message
Class string // Custom classes
DisabledClass string // Classes applied when input is disabled
Class string // Additional CSS classes
DisabledClass string // Additional CSS classes when the input is disabled
}
// Label renders a form label with error and disabled states

13
pkg/components/label_templ.go
View File

@ -8,14 +8,13 @@ package components
import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
// LabelProps represents label properties
type LabelProps struct {
ID string // Optional label ID
For string // Target input ID
Text string // Label text
Error string // Error message
Class string // Custom classes
DisabledClass string // Classes applied when input is disabled
Class string // Additional CSS classes
DisabledClass string // Additional CSS classes when the input is disabled
}
// Label renders a form label with error and disabled states
@ -61,7 +60,7 @@ func Label(props LabelProps) 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/label.templ`, Line: 16, Col: 15}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/label.templ`, Line: 15, Col: 15}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
@ -74,7 +73,7 @@ func Label(props LabelProps) templ.Component {
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(props.For)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/label.templ`, Line: 17, Col: 17}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/label.templ`, Line: 16, Col: 17}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
@ -105,7 +104,7 @@ func Label(props LabelProps) templ.Component {
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(props.DisabledClass)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/label.templ`, Line: 29, Col: 44}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/label.templ`, Line: 28, Col: 44}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
@ -128,7 +127,7 @@ func Label(props LabelProps) templ.Component {
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(props.Text)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/label.templ`, Line: 35, Col: 14}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/label.templ`, Line: 34, Col: 14}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {

13
pkg/components/modal.templ
View File

@ -3,20 +3,11 @@ package components
import "github.com/axzilla/goilerplate/pkg/utils"
type ModalProps struct {
// ID uniquely identifies the modal for open/close control
ID string
// Class adds custom CSS classes
Class string
ID string // Unique identifier for control
Class string // Additional CSS classes
}
// Dialog overlay that requires user attention or interaction.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/modal
//
// Props:
// - ID: Unique identifier for control
// - Class: Additional CSS classes
templ Modal(props ModalProps) {
<div
x-data="{ open: false }"

19
pkg/components/modal_templ.go
View File

@ -11,20 +11,11 @@ import templruntime "github.com/a-h/templ/runtime"
import "github.com/axzilla/goilerplate/pkg/utils"
type ModalProps struct {
// ID uniquely identifies the modal for open/close control
ID string
// Class adds custom CSS classes
Class string
ID string // Unique identifier for control
Class string // Additional CSS classes
}
// Dialog overlay that requires user attention or interaction.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/modal
//
// Props:
// - ID: Unique identifier for control
// - Class: Additional CSS classes
func Modal(props ModalProps) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@ -53,7 +44,7 @@ func Modal(props ModalProps) 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/modal.templ`, Line: 25, Col: 26}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/modal.templ`, Line: 16, Col: 26}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
if templ_7745c5c3_Err != nil {
@ -131,7 +122,7 @@ func ModalTrigger(id string) templ.Component {
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(id)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/modal.templ`, Line: 56, Col: 20}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/modal.templ`, Line: 47, Col: 20}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
@ -183,7 +174,7 @@ func ModalClose(id string) templ.Component {
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(id)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/modal.templ`, Line: 67, Col: 20}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/modal.templ`, Line: 58, Col: 20}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {

3
pkg/components/radio.templ
View File

@ -2,7 +2,6 @@ package components
import "github.com/axzilla/goilerplate/pkg/utils"
// RadioProps configures the Radio component
type RadioProps struct {
Value string // Radio button value
Name string // Form field name
@ -10,7 +9,7 @@ type RadioProps struct {
Disabled bool // Prevents interaction
Checked bool // Selected state
Class string // Additional CSS classes
Attributes templ.Attributes // Extra HTML/Alpine attributes
Attributes templ.Attributes // Additional HTML attributes
}
// Radio renders a styled radio input button

11
pkg/components/radio_templ.go
View File

@ -10,7 +10,6 @@ import templruntime "github.com/a-h/templ/runtime"
import "github.com/axzilla/goilerplate/pkg/utils"
// RadioProps configures the Radio component
type RadioProps struct {
Value string // Radio button value
Name string // Form field name
@ -18,7 +17,7 @@ type RadioProps struct {
Disabled bool // Prevents interaction
Checked bool // Selected state
Class string // Additional CSS classes
Attributes templ.Attributes // Extra HTML/Alpine attributes
Attributes templ.Attributes // Additional HTML attributes
}
// Radio renders a styled radio input button
@ -77,7 +76,7 @@ func Radio(props RadioProps) 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/radio.templ`, Line: 19, Col: 18}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/radio.templ`, Line: 18, Col: 18}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
@ -90,7 +89,7 @@ func Radio(props RadioProps) 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/radio.templ`, Line: 21, Col: 15}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/radio.templ`, Line: 20, Col: 15}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
@ -103,7 +102,7 @@ func Radio(props RadioProps) 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/radio.templ`, Line: 22, Col: 19}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/radio.templ`, Line: 21, Col: 19}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
@ -116,7 +115,7 @@ func Radio(props RadioProps) templ.Component {
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(props.Value)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/radio.templ`, Line: 23, Col: 21}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/radio.templ`, Line: 22, Col: 21}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {

6
pkg/components/select.templ
View File

@ -5,7 +5,6 @@ import (
"github.com/axzilla/goilerplate/pkg/utils"
)
// SelectProps configures the Select component
type SelectProps struct {
ID string // DOM identifier
Name string // Form field name
@ -14,15 +13,14 @@ type SelectProps struct {
Disabled bool // Prevents interaction
HasError bool // Error state styling
Class string // Additional CSS classes
Attributes templ.Attributes // Extra HTML/Alpine attributes
Attributes templ.Attributes // Additional HTML attributes
}
// SelectOption configures a single select option
type SelectOption struct {
Label string // Display text
Value string // Form value
Selected bool // Default selection
Attributes templ.Attributes // Extra HTML attributes
Attributes templ.Attributes // Additional HTML attributes
}
// Select renders a styled dropdown selection input

18
pkg/components/select_templ.go
View File

@ -13,7 +13,6 @@ import (
"github.com/axzilla/goilerplate/pkg/utils"
)
// SelectProps configures the Select component
type SelectProps struct {
ID string // DOM identifier
Name string // Form field name
@ -22,15 +21,14 @@ type SelectProps struct {
Disabled bool // Prevents interaction
HasError bool // Error state styling
Class string // Additional CSS classes
Attributes templ.Attributes // Extra HTML/Alpine attributes
Attributes templ.Attributes // Additional HTML attributes
}
// SelectOption configures a single select option
type SelectOption struct {
Label string // Display text
Value string // Form value
Selected bool // Default selection
Attributes templ.Attributes // Extra HTML attributes
Attributes templ.Attributes // Additional HTML attributes
}
// Select renders a styled dropdown selection input
@ -106,7 +104,7 @@ func Select(props SelectProps) templ.Component {
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/select.templ`, Line: 32, Col: 19}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 30, Col: 19}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
@ -119,7 +117,7 @@ func Select(props SelectProps) 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/select.templ`, Line: 33, Col: 16}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 31, Col: 16}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
@ -132,7 +130,7 @@ func Select(props SelectProps) templ.Component {
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, 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: 34, Col: 20}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 32, Col: 20}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
@ -181,7 +179,7 @@ func Select(props SelectProps) templ.Component {
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/select.templ`, Line: 57, Col: 65}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 55, Col: 65}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil {
@ -200,7 +198,7 @@ func Select(props SelectProps) templ.Component {
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, 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: 61, Col: 25}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 59, Col: 25}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {
@ -227,7 +225,7 @@ func Select(props SelectProps) templ.Component {
var templ_7745c5c3_Var11 string
templ_7745c5c3_Var11, 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: 65, Col: 19}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 63, Col: 19}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
if templ_7745c5c3_Err != nil {

34
pkg/components/sheet.templ
View File

@ -1,25 +1,18 @@
package components
// SheetSide defines the slide-in direction
type SheetSide string
const (
// Sheet appearance directions
SheetSideTop SheetSide = "top" // Slides down from top
SheetSideRight SheetSide = "right" // Slides in from right
SheetSideBottom SheetSide = "bottom" // Slides up from bottom
SheetSideLeft SheetSide = "left" // Slides in from left
SheetSideTop SheetSide = "top"
SheetSideRight SheetSide = "right"
SheetSideBottom SheetSide = "bottom"
SheetSideLeft SheetSide = "left"
)
type SheetProps struct {
// Title displays in sheet header
Title string
// Description shows below title
Description string
// Side controls slide-in direction
Side SheetSide
Title string // Header text
Description string // Subheading text
Side SheetSide // Slide-in direction
}
// SheetRoot initializes Alpine.js state and event handlers
@ -44,19 +37,6 @@ templ SheetRoot() {
}
// Side-anchored panel that slides in from screen edges.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/sheet
//
// Props:
// - Title: Header text
// - Description: Subheading text
// - Side: Slide-in direction
//
// Features:
// - Responsive sizing
// - Animated transitions
// - Backdrop blur
// - ESC key closing
templ Sheet(props SheetProps) {
<!-- Backdrop -->
<div

42
pkg/components/sheet_templ.go
View File

@ -8,26 +8,19 @@ package components
import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
// SheetSide defines the slide-in direction
type SheetSide string
const (
// Sheet appearance directions
SheetSideTop SheetSide = "top" // Slides down from top
SheetSideRight SheetSide = "right" // Slides in from right
SheetSideBottom SheetSide = "bottom" // Slides up from bottom
SheetSideLeft SheetSide = "left" // Slides in from left
SheetSideTop SheetSide = "top"
SheetSideRight SheetSide = "right"
SheetSideBottom SheetSide = "bottom"
SheetSideLeft SheetSide = "left"
)
type SheetProps struct {
// Title displays in sheet header
Title string
// Description shows below title
Description string
// Side controls slide-in direction
Side SheetSide
Title string // Header text
Description string // Subheading text
Side SheetSide // Slide-in direction
}
// SheetRoot initializes Alpine.js state and event handlers
@ -70,19 +63,6 @@ func SheetRoot() templ.Component {
}
// Side-anchored panel that slides in from screen edges.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/sheet
//
// Props:
// - Title: Header text
// - Description: Subheading text
// - Side: Slide-in direction
//
// Features:
// - Responsive sizing
// - Animated transitions
// - Backdrop blur
// - ESC key closing
func Sheet(props SheetProps) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@ -165,7 +145,7 @@ func Sheet(props SheetProps) templ.Component {
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(props.Title)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/sheet.templ`, Line: 118, Col: 51}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/sheet.templ`, Line: 98, Col: 51}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
@ -178,7 +158,7 @@ func Sheet(props SheetProps) templ.Component {
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(props.Description)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/sheet.templ`, Line: 119, Col: 64}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/sheet.templ`, Line: 99, Col: 64}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
@ -230,7 +210,7 @@ func SheetTrigger(text string, side SheetSide) templ.Component {
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs("open('" + string(side) + "')")
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/sheet.templ`, Line: 132, Col: 41}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/sheet.templ`, Line: 112, Col: 41}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
@ -303,7 +283,7 @@ func SheetClose(text string) templ.Component {
var templ_7745c5c3_Var12 string
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(text)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/sheet.templ`, Line: 148, Col: 8}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/sheet.templ`, Line: 128, Col: 8}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
if templ_7745c5c3_Err != nil {

63
pkg/components/slider.templ
View File

@ -6,60 +6,21 @@ import (
)
type SliderProps struct {
// ID is the unique identifier for the slider
ID string
// Name is the name attribute for the slider
Name string
// Min sets the minimum value (default: 0)
Min int
// Max sets the maximum value (default: 100)
Max int
// Step defines the increment between values (default: 1)
Step int
// Value sets the initial value
Value int
// Label displays a label above the slider
Label string
// ShowValue toggles the value display
ShowValue bool
// ValueFormat adds a suffix to the value (e.g. "%", "°C")
ValueFormat string
// Class adds custom CSS classes
Class string
// Disabled makes the slider non-interactive
Disabled bool
// Attributes for additional HTML attributes and Alpine.js bindings
Attributes templ.Attributes
ID string // Unique identifier for the slider
Name string // Input name attribute
Min int // Minimum value
Max int // Maximum value
Step int // Value increment
Value int // Initial value
Label string // Optional label text
ShowValue bool // Show current value
ValueFormat string // Optional format suffix
Disabled bool // Disables the slider
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Control for selecting a numeric value within a range.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/slider
//
// Props:
// - ID: Unique identifier for the slider
// - Name: Input name attribute
// - Min: Minimum value (default: 0)
// - Max: Maximum value (default: 100)
// - Step: Value increment (default: 1)
// - Value: Initial value
// - Label: Optional label text
// - ShowValue: Show current value
// - ValueFormat: Optional format suffix (e.g. "%", "°C")
// - Class: Additional CSS classes
// - Disabled: Disables the slider
// - Attributes: Additional HTML attributes (e.g. x-model for binding)
templ Slider(props SliderProps) {
<div
class="space-y-2"

83
pkg/components/slider_templ.go
View File

@ -14,60 +14,21 @@ import (
)
type SliderProps struct {
// ID is the unique identifier for the slider
ID string
// Name is the name attribute for the slider
Name string
// Min sets the minimum value (default: 0)
Min int
// Max sets the maximum value (default: 100)
Max int
// Step defines the increment between values (default: 1)
Step int
// Value sets the initial value
Value int
// Label displays a label above the slider
Label string
// ShowValue toggles the value display
ShowValue bool
// ValueFormat adds a suffix to the value (e.g. "%", "°C")
ValueFormat string
// Class adds custom CSS classes
Class string
// Disabled makes the slider non-interactive
Disabled bool
// Attributes for additional HTML attributes and Alpine.js bindings
Attributes templ.Attributes
ID string // Unique identifier for the slider
Name string // Input name attribute
Min int // Minimum value
Max int // Maximum value
Step int // Value increment
Value int // Initial value
Label string // Optional label text
ShowValue bool // Show current value
ValueFormat string // Optional format suffix
Disabled bool // Disables the slider
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Control for selecting a numeric value within a range.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/slider
//
// Props:
// - ID: Unique identifier for the slider
// - Name: Input name attribute
// - Min: Minimum value (default: 0)
// - Max: Maximum value (default: 100)
// - Step: Value increment (default: 1)
// - Value: Initial value
// - Label: Optional label text
// - ShowValue: Show current value
// - ValueFormat: Optional format suffix (e.g. "%", "°C")
// - Class: Additional CSS classes
// - Disabled: Disables the slider
// - Attributes: Additional HTML attributes (e.g. x-model for binding)
func Slider(props SliderProps) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@ -96,7 +57,7 @@ func Slider(props SliderProps) templ.Component {
var templ_7745c5c3_Var2 string
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("{ value: %d }", props.Value))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/slider.templ`, Line: 66, Col: 52}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/slider.templ`, Line: 27, Col: 52}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
if templ_7745c5c3_Err != nil {
@ -119,7 +80,7 @@ func Slider(props SliderProps) 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/slider.templ`, Line: 71, Col: 26}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/slider.templ`, Line: 32, Col: 26}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
@ -132,7 +93,7 @@ func Slider(props SliderProps) templ.Component {
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(props.Label)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/slider.templ`, Line: 72, Col: 19}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/slider.templ`, Line: 33, Col: 19}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
@ -152,7 +113,7 @@ func Slider(props SliderProps) templ.Component {
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(props.ValueFormat)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/slider.templ`, Line: 79, Col: 26}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/slider.templ`, Line: 40, Col: 26}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
@ -192,7 +153,7 @@ func Slider(props SliderProps) 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/slider.templ`, Line: 88, Col: 16}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/slider.templ`, Line: 49, Col: 16}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
@ -205,7 +166,7 @@ func Slider(props SliderProps) 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/slider.templ`, Line: 89, Col: 20}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/slider.templ`, Line: 50, Col: 20}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
@ -223,7 +184,7 @@ func Slider(props SliderProps) templ.Component {
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", props.Value))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/slider.templ`, Line: 91, Col: 42}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/slider.templ`, Line: 52, Col: 42}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil {
@ -242,7 +203,7 @@ func Slider(props SliderProps) templ.Component {
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", props.Min))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/slider.templ`, Line: 94, Col: 38}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/slider.templ`, Line: 55, Col: 38}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {
@ -261,7 +222,7 @@ func Slider(props SliderProps) templ.Component {
var templ_7745c5c3_Var11 string
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", props.Max))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/slider.templ`, Line: 97, Col: 38}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/slider.templ`, Line: 58, Col: 38}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
if templ_7745c5c3_Err != nil {
@ -280,7 +241,7 @@ func Slider(props SliderProps) templ.Component {
var templ_7745c5c3_Var12 string
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", props.Step))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/slider.templ`, Line: 100, Col: 40}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/slider.templ`, Line: 61, Col: 40}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
if templ_7745c5c3_Err != nil {

37
pkg/components/tabs.templ
View File

@ -1,41 +1,18 @@
package components
type Tab struct {
// ID uniquely identifies the tab
ID string
// Title displays in tab button
Title string
// Content renders when tab is active
Content templ.Component
ID string // Unique identifier for the tab
Title string // Tab title
Content templ.Component // Tab content
}
type TabsProps struct {
// Tabs defines the tabs structure and content
Tabs []Tab
// TabsContainerClass adds classes to tabs header
TabsContainerClass string
// ContentContainerClass adds classes to content area
ContentContainerClass string
Tabs []Tab // List of tabs
TabsContainerClass string // Additional CSS classes for the tabs container
ContentContainerClass string // Additional CSS classes for the content container
}
// TNavigation interface that organizes content into sections.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/tabs
//
// Props:
// - Tabs: Tab definitions and content
// - TabsContainerClass: Additional classes for header
// - ContentContainerClass: Additional classes for content
//
// Features:
// - Animated tab switching
// - Keyboard navigation
// - Responsive layout
// - ARIA support
// Navigation interface that organizes content into sections.
templ Tabs(props TabsProps) {
<div
x-data="{

39
pkg/components/tabs_templ.go
View File

@ -9,41 +9,18 @@ import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
type Tab struct {
// ID uniquely identifies the tab
ID string
// Title displays in tab button
Title string
// Content renders when tab is active
Content templ.Component
ID string // Unique identifier for the tab
Title string // Tab title
Content templ.Component // Tab content
}
type TabsProps struct {
// Tabs defines the tabs structure and content
Tabs []Tab
// TabsContainerClass adds classes to tabs header
TabsContainerClass string
// ContentContainerClass adds classes to content area
ContentContainerClass string
Tabs []Tab // List of tabs
TabsContainerClass string // Additional CSS classes for the tabs container
ContentContainerClass string // Additional CSS classes for the content container
}
// TNavigation interface that organizes content into sections.
//
// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/tabs
//
// Props:
// - Tabs: Tab definitions and content
// - TabsContainerClass: Additional classes for header
// - ContentContainerClass: Additional classes for content
//
// Features:
// - Animated tab switching
// - Keyboard navigation
// - Responsive layout
// - ARIA support
// Navigation interface that organizes content into sections.
func Tabs(props TabsProps) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@ -101,7 +78,7 @@ func Tabs(props TabsProps) templ.Component {
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(tab.Title)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/tabs.templ`, Line: 76, Col: 16}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/tabs.templ`, Line: 53, Col: 16}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {

5
pkg/components/textarea.templ
View File

@ -5,7 +5,6 @@ import (
"strconv"
)
// TextareaProps configures the Textarea component
type TextareaProps struct {
ID string // DOM identifier
Name string // Form field name
@ -13,9 +12,9 @@ type TextareaProps struct {
Placeholder string // Helper text shown when empty
Rows int // Visible lines of text
Disabled bool // Prevents interaction
Class string // Additional CSS classes
AutoResize bool // Enables dynamic resizing
Attributes templ.Attributes // Extra HTML/Alpine attributes
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Textarea renders a multi-line text input field

17
pkg/components/textarea_templ.go
View File

@ -13,7 +13,6 @@ import (
"strconv"
)
// TextareaProps configures the Textarea component
type TextareaProps struct {
ID string // DOM identifier
Name string // Form field name
@ -21,9 +20,9 @@ type TextareaProps struct {
Placeholder string // Helper text shown when empty
Rows int // Visible lines of text
Disabled bool // Prevents interaction
Class string // Additional CSS classes
AutoResize bool // Enables dynamic resizing
Attributes templ.Attributes // Extra HTML/Alpine attributes
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Textarea renders a multi-line text input field
@ -78,7 +77,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: 24, Col: 18}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 23, Col: 18}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
@ -91,7 +90,7 @@ func Textarea(props TextareaProps) 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/textarea.templ`, Line: 25, Col: 15}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 24, Col: 15}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
@ -104,7 +103,7 @@ func Textarea(props TextareaProps) 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/textarea.templ`, Line: 26, Col: 19}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 25, Col: 19}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
@ -117,7 +116,7 @@ func Textarea(props TextareaProps) 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/textarea.templ`, Line: 27, Col: 33}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 26, Col: 33}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
@ -141,7 +140,7 @@ func Textarea(props TextareaProps) templ.Component {
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, 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: 30, Col: 34}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 29, Col: 34}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
@ -187,7 +186,7 @@ func Textarea(props TextareaProps) templ.Component {
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: 59, Col: 16}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/textarea.templ`, Line: 58, Col: 16}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil {

3
pkg/components/toggle.templ
View File

@ -2,14 +2,13 @@ package components
import "github.com/axzilla/goilerplate/pkg/utils"
// ToggleProps configures the Toggle component
type ToggleProps struct {
ID string // DOM identifier
Name string // Form field name
Disabled bool // Prevents interaction
Checked bool // Toggled state
Class string // Additional CSS classes
Attributes templ.Attributes // Extra HTML/Alpine attributes
Attributes templ.Attributes // Additional HTML attributes
}
// Toggle renders a styled switch input

11
pkg/components/toggle_templ.go
View File

@ -10,14 +10,13 @@ import templruntime "github.com/a-h/templ/runtime"
import "github.com/axzilla/goilerplate/pkg/utils"
// ToggleProps configures the Toggle component
type ToggleProps struct {
ID string // DOM identifier
Name string // Form field name
Disabled bool // Prevents interaction
Checked bool // Toggled state
Class string // Additional CSS classes
Attributes templ.Attributes // Extra HTML/Alpine attributes
Attributes templ.Attributes // Additional HTML attributes
}
// Toggle renders a styled switch input
@ -52,7 +51,7 @@ 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: 20, Col: 22}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 19, Col: 22}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
if templ_7745c5c3_Err != nil {
@ -65,7 +64,7 @@ func Toggle(props ToggleProps) 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/toggle.templ`, Line: 22, Col: 19}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 21, Col: 19}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
@ -94,7 +93,7 @@ func Toggle(props ToggleProps) 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/toggle.templ`, Line: 25, Col: 16}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 24, Col: 16}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
@ -107,7 +106,7 @@ func Toggle(props ToggleProps) 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/toggle.templ`, Line: 27, Col: 20}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 26, Col: 20}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {