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

docs: update to new showcase format for input, modal, radiogroup, select, sheet, slider

Browse Source
This commit is contained in:
axzilla 2024-11-28 11:32:00 +07:00
parent bf79014f9d
commit 0543784665
35 changed files with 545 additions and 515 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
assets/css/output.css
View File

@ -982,6 +982,10 @@ body {
width: 1rem;
}
.w-48 {
width: 12rem;
}
.w-5 {
width: 1.25rem;
}
@ -1002,6 +1006,10 @@ body {
width: 2rem;
}
.w-96 {
width: 24rem;
}
.w-full {
width: 100%;
}
@ -1022,10 +1030,6 @@ body {
max-width: 28rem;
}
.max-w-sm {
max-width: 24rem;
}
.max-w-xl {
max-width: 36rem;
}
@ -1216,10 +1220,6 @@ body {
justify-content: space-between;
}
.gap-1\.5 {
gap: 0.375rem;
}
.gap-2 {
gap: 0.5rem;
}

2
go.mod
View File

@ -1,6 +1,6 @@
module github.com/axzilla/goilerplate
go 1.23.3
go 1.22.4
require (
github.com/Oudwins/tailwind-merge-go v0.2.0

12
internals/ui/modules/example_wrapper.templ
View File

@ -7,11 +7,18 @@ import (
type showcaseWrapperProps struct {
Content templ.Component
Class string
}
templ showcaseWrapper(p showcaseWrapperProps) {
<div class="flex justify-center items-center border rounded-md py-16 px-4">
@p.Content
if p.Class != "" {
<div class={ p.Class }>
@p.Content
</div>
} else {
@p.Content
}
</div>
}
@ -20,6 +27,7 @@ type ExampleWrapperProps struct {
ShowcaseFile templ.Component
PreviewCodeFile string
ComponentCodeFile string
ShowcaseClass string
}
templ ExampleWrapper(p ExampleWrapperProps) {
@ -30,7 +38,7 @@ templ ExampleWrapper(p ExampleWrapperProps) {
{
ID: "preview",
Title: "Preview",
Content: showcaseWrapper(showcaseWrapperProps{Content: p.ShowcaseFile}),
Content: showcaseWrapper(showcaseWrapperProps{Content: p.ShowcaseFile, Class: p.ShowcaseClass}),
},
{
ID: "code",

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

@ -4,34 +4,62 @@ import (
"github.com/axzilla/goilerplate/internals/ui/layouts"
"github.com/axzilla/goilerplate/internals/ui/modules"
"github.com/axzilla/goilerplate/internals/ui/showcase"
"github.com/axzilla/goilerplate/pkg/components"
)
templ Input() {
@layouts.DocsLayout() {
<div class="mb-16">
<h1 class="text-3xl font-bold mb-2">Input</h1>
<p class="mb-4 text-muted-foreground">Displays a form input field or a component that looks like an input field.</p>
</div>
@components.Tabs(components.TabsProps{
Tabs: []components.Tab{
{
ID: "preview",
Title: "Preview",
Content: showcase.InputShowcase(),
},
{
ID: "code",
Title: "Code",
Content: modules.CodeSnippetFromEmbedded("input.templ", "go", showcase.TemplFiles),
},
{
ID: "component",
Title: "Component",
Content: modules.CodeSnippetFromEmbedded("input.templ", "go", components.TemplFiles),
},
},
TabsContainerClass: "md:w-1/2",
})
@modules.PageWrapper(modules.PageWrapperProps{
Name: "Input",
Description: templ.Raw("Displays a form input field or a component that looks like an input field."),
}) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Default",
ShowcaseFile: showcase.InputDefault(),
PreviewCodeFile: "input_default.templ",
ComponentCodeFile: "input.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Placeholder",
ShowcaseFile: showcase.InputWithPlaceholder(),
PreviewCodeFile: "input_with_placeholder.templ",
ComponentCodeFile: "input.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "File",
ShowcaseFile: showcase.InputFile(),
PreviewCodeFile: "input_file.templ",
ComponentCodeFile: "input.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Disabled",
ShowcaseFile: showcase.InputDisabled(),
PreviewCodeFile: "input_disabled.templ",
ComponentCodeFile: "input.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Label",
ShowcaseFile: showcase.InputWithLabel(),
PreviewCodeFile: "input_with_label.templ",
ComponentCodeFile: "input.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Description",
ShowcaseFile: showcase.InputWithDescription(),
PreviewCodeFile: "input_with_description.templ",
ComponentCodeFile: "input.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Error",
ShowcaseFile: showcase.InputWithError(),
PreviewCodeFile: "input_with_error.templ",
ComponentCodeFile: "input.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Advanced",
ShowcaseFile: showcase.InputAdvanced(),
PreviewCodeFile: "input_advanced.templ",
ComponentCodeFile: "input.templ",
})
}
}
}

36
internals/ui/pages/modal.templ
View File

@ -4,37 +4,19 @@ import (
"github.com/axzilla/goilerplate/internals/ui/layouts"
"github.com/axzilla/goilerplate/internals/ui/modules"
"github.com/axzilla/goilerplate/internals/ui/showcase"
"github.com/axzilla/goilerplate/pkg/components"
)
templ Modal() {
@layouts.DocsLayout() {
<div>
<div class="mb-16">
<h1 class="text-3xl font-bold mb-2">Modal</h1>
<p class="mb-4 text-muted-foreground">A modal dialog component for displaying content that requires user interaction.</p>
</div>
@components.Tabs(components.TabsProps{
Tabs: []components.Tab{
{
ID: "preview",
Title: "Preview",
Content: showcase.ModalShowcase(),
},
{
ID: "code",
Title: "Code",
Content: modules.CodeSnippetFromEmbedded("modal.templ", "go", showcase.TemplFiles),
},
{
ID: "component",
Title: "Component",
Content: modules.CodeSnippetFromEmbedded("modal.templ", "go", components.TemplFiles),
},
},
TabsContainerClass: "md:w-1/2",
ContentContainerClass: "w-full",
@modules.PageWrapper(modules.PageWrapperProps{
Name: "Modal",
Description: templ.Raw("A modal dialog component for displaying content that requires user interaction."),
}) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
ShowcaseFile: showcase.Modal(),
PreviewCodeFile: "modal.templ",
ComponentCodeFile: "modal.templ",
})
</div>
}
}
}

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

@ -4,37 +4,19 @@ import (
"github.com/axzilla/goilerplate/internals/ui/layouts"
"github.com/axzilla/goilerplate/internals/ui/modules"
"github.com/axzilla/goilerplate/internals/ui/showcase"
"github.com/axzilla/goilerplate/pkg/components"
)
templ RadioGroup() {
@layouts.DocsLayout() {
<div>
<div class="mb-16">
<h1 class="text-3xl font-bold mb-2">Radio Group</h1>
<p class="mb-4 text-muted-foreground">A set of radio buttons for selecting a single option from a list.</p>
</div>
@components.Tabs(components.TabsProps{
Tabs: []components.Tab{
{
ID: "preview",
Title: "Preview",
Content: showcase.RadioGroupShowcase(),
},
{
ID: "code",
Title: "Code",
Content: modules.CodeSnippetFromEmbedded("radio_group.templ", "go", showcase.TemplFiles),
},
{
ID: "component",
Title: "Component",
Content: modules.CodeSnippetFromEmbedded("radio_group.templ", "go", components.TemplFiles),
},
},
TabsContainerClass: "md:w-1/2",
ContentContainerClass: "w-full",
@modules.PageWrapper(modules.PageWrapperProps{
Name: "Radio Group",
Description: templ.Raw("A set of radio buttons for selecting a single option from a list."),
}) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
ShowcaseFile: showcase.RadioGroup(),
PreviewCodeFile: "radio_group.templ",
ComponentCodeFile: "radio_group.templ",
})
</div>
}
}
}

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

@ -4,39 +4,42 @@ import (
"github.com/axzilla/goilerplate/internals/ui/layouts"
"github.com/axzilla/goilerplate/internals/ui/modules"
"github.com/axzilla/goilerplate/internals/ui/showcase"
"github.com/axzilla/goilerplate/pkg/components"
)
templ Select() {
@layouts.DocsLayout() {
<div>
<div class="mb-16">
<h1 class="text-3xl font-bold mb-2">Select</h1>
<p class="mb-4 text-muted-foreground">
A dropdown menu for selecting a single value from a list of options.
</p>
</div>
@components.Tabs(components.TabsProps{
Tabs: []components.Tab{
{
ID: "preview",
Title: "Preview",
Content: showcase.SelectShowcase(),
},
{
ID: "code",
Title: "Code",
Content: modules.CodeSnippetFromEmbedded("select.templ", "go", showcase.TemplFiles),
},
{
ID: "component",
Title: "Component",
Content: modules.CodeSnippetFromEmbedded("select.templ", "go", components.TemplFiles),
},
},
TabsContainerClass: "md:w-1/2",
ContentContainerClass: "w-full",
@modules.PageWrapper(modules.PageWrapperProps{
Name: "Select",
Description: templ.Raw("A dropdown menu for selecting a single value from a list of options."),
}) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Default",
ShowcaseFile: showcase.SelectDefault(),
ShowcaseClass: "w-48",
PreviewCodeFile: "select_default.templ",
ComponentCodeFile: "select.templ",
})
</div>
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Placeholder",
ShowcaseFile: showcase.SelectWithPlaceholder(),
ShowcaseClass: "w-48",
PreviewCodeFile: "select_with_placeholder.templ",
ComponentCodeFile: "select.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Selected Value",
ShowcaseFile: showcase.SelectSelectedValue(),
ShowcaseClass: "w-48",
PreviewCodeFile: "select_selected_value.templ",
ComponentCodeFile: "select.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Disabled",
ShowcaseFile: showcase.SelectDisabled(),
ShowcaseClass: "w-48",
PreviewCodeFile: "select_disabled.templ",
ComponentCodeFile: "select.templ",
})
}
}
}

36
internals/ui/pages/sheet.templ
View File

@ -4,37 +4,19 @@ import (
"github.com/axzilla/goilerplate/internals/ui/layouts"
"github.com/axzilla/goilerplate/internals/ui/modules"
"github.com/axzilla/goilerplate/internals/ui/showcase"
"github.com/axzilla/goilerplate/pkg/components"
)
templ Sheet() {
@layouts.DocsLayout() {
<div>
<div class="mb-16">
<h1 class="text-3xl font-bold mb-2">Sheet</h1>
<p class="mb-4 text-muted-foreground">Extends the Dialog component to display content that complements the main content of the screen.</p>
</div>
@components.Tabs(components.TabsProps{
Tabs: []components.Tab{
{
ID: "preview",
Title: "Preview",
Content: showcase.SheetShowcase(),
},
{
ID: "code",
Title: "Code",
Content: modules.CodeSnippetFromEmbedded("sheet.templ", "go", showcase.TemplFiles),
},
{
ID: "component",
Title: "Component",
Content: modules.CodeSnippetFromEmbedded("sheet.templ", "go", components.TemplFiles),
},
},
TabsContainerClass: "md:w-1/2",
ContentContainerClass: "w-full",
@modules.PageWrapper(modules.PageWrapperProps{
Name: "Sheet",
Description: templ.Raw("Extends the Dialog component to display content that complements the main content of the screen."),
}) {
@modules.ExampleWrapper(modules.ExampleWrapperProps{
ShowcaseFile: showcase.Sheet(),
PreviewCodeFile: "sheet.templ",
ComponentCodeFile: "sheet.templ",
})
</div>
}
}
}

74
internals/ui/pages/slider.templ
View File

@ -4,37 +4,57 @@ import (
"github.com/axzilla/goilerplate/internals/ui/layouts"
"github.com/axzilla/goilerplate/internals/ui/modules"
"github.com/axzilla/goilerplate/internals/ui/showcase"
"github.com/axzilla/goilerplate/pkg/components"
)
templ Slider() {
@layouts.DocsLayout() {
<div>
<div class="mb-16">
<h1 class="text-3xl font-bold mb-2">Slider</h1>
<p class="mb-4 text-muted-foreground">An input where the user selects a value from within a given range.</p>
</div>
@components.Tabs(components.TabsProps{
Tabs: []components.Tab{
{
ID: "preview",
Title: "Preview",
Content: showcase.SliderShowcase(),
},
{
ID: "code",
Title: "Code",
Content: modules.CodeSnippetFromEmbedded("slider.templ", "go", showcase.TemplFiles),
},
{
ID: "component",
Title: "Component",
Content: modules.CodeSnippetFromEmbedded("slider.templ", "go", components.TemplFiles),
},
},
TabsContainerClass: "md:w-1/2",
ContentContainerClass: "w-full",
@modules.PageWrapper(modules.PageWrapperProps{
Name: "Slider",
Description: templ.Raw("An input where the user selects a value from within a given range."),
}) {
// default, with value, with label, with steps, with label and value, disabled
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Default",
ShowcaseFile: showcase.SliderDefault(),
ShowcaseClass: "w-96",
PreviewCodeFile: "slider_default.templ",
ComponentCodeFile: "sheet.templ",
})
</div>
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Value",
ShowcaseFile: showcase.SliderWithValue(),
ShowcaseClass: "w-96",
PreviewCodeFile: "slider_with_value.templ",
ComponentCodeFile: "sheet.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Label",
ShowcaseFile: showcase.SliderWithLabel(),
ShowcaseClass: "w-96",
PreviewCodeFile: "slider_with_label.templ",
ComponentCodeFile: "sheet.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Steps",
ShowcaseFile: showcase.SliderWithSteps(),
ShowcaseClass: "w-96",
PreviewCodeFile: "slider_with_steps.templ",
ComponentCodeFile: "sheet.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "With Label and Value",
ShowcaseFile: showcase.SliderWithLabelAndValue(),
ShowcaseClass: "w-96",
PreviewCodeFile: "slider_with_label_and_value.templ",
ComponentCodeFile: "sheet.templ",
})
@modules.ExampleWrapper(modules.ExampleWrapperProps{
SectionName: "Disabled",
ShowcaseFile: showcase.SliderDisabled(),
ShowcaseClass: "w-96",
PreviewCodeFile: "slider_disabled.templ",
ComponentCodeFile: "sheet.templ",
})
}
}
}

74
internals/ui/showcase/input.templ
View File

@ -1,74 +0,0 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ InputShowcase() {
<div class="flex justify-center items-center border rounded-md py-16 px-4">
<div>
<div class="mb-8">
<h2 class="font-semibold mb-2">Default</h2>
@components.Input(components.InputProps{
Type: "email",
})
</div>
<div class="mb-8">
<h2 class="font-semibold mb-2">With Placeholder</h2>
@components.Input(components.InputProps{
Type: "email",
Placeholder: "e.g. john@doe.com",
})
</div>
<div class="mb-8">
<h2 class="font-semibold mb-2">File</h2>
<div class="grid w-full max-w-sm items-center gap-1.5">
@components.Input(components.InputProps{
Type: "file",
})
</div>
</div>
<div class="mb-8">
<h2 class="font-semibold mb-2">Disabled</h2>
@components.Input(components.InputProps{
Type: "email",
Attributes: templ.Attributes{"disabled": "true"},
})
</div>
<div class="mb-8">
<h2 class="font-semibold mb-2">With Label</h2>
<div class="grid w-full max-w-sm items-center gap-1.5">
@components.Input(components.InputProps{
ID: "email",
Type: "email",
Label: "Email",
})
</div>
</div>
<div class="mb-8">
<h2 class="font-semibold mb-2">With Description</h2>
@components.Input(components.InputProps{
ID: "email",
Type: "email",
Description: "This is your accounts email address.",
})
</div>
<div class="mb-8">
<h2 class="font-semibold mb-2">With Error</h2>
@components.Input(components.InputProps{
ID: "username",
Error: "Username must be more then 2 characters",
})
</div>
<div class="mb-8">
<h2 class="font-semibold mb-2">Advanced</h2>
@components.Input(components.InputProps{
ID: "username",
Label: "Username",
Placeholder: "e.g. john123",
Description: "This is your public display name.",
Value: "",
Error: "Username must be more then 2 characters",
})
</div>
</div>
</div>
}

14
internals/ui/showcase/input_advanced.templ Normal file
View File

@ -0,0 +1,14 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ InputAdvanced() {
@components.Input(components.InputProps{
ID: "username",
Label: "Username",
Placeholder: "e.g. john123",
Description: "This is your public display name.",
Value: "",
Error: "Username must be more then 2 characters",
})
}

9
internals/ui/showcase/input_default.templ Normal file
View File

@ -0,0 +1,9 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ InputDefault() {
@components.Input(components.InputProps{
Type: "email",
})
}

11
internals/ui/showcase/input_disabled.templ Normal file
View File

@ -0,0 +1,11 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ InputDisabled() {
@components.Input(components.InputProps{
Type: "email",
Placeholder: "e.g. john@doe.com",
Attributes: templ.Attributes{"disabled": "true"},
})
}

9
internals/ui/showcase/input_file.templ Normal file
View File

@ -0,0 +1,9 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ InputFile() {
@components.Input(components.InputProps{
Type: "file",
})
}

11
internals/ui/showcase/input_with_description.templ Normal file
View File

@ -0,0 +1,11 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ InputWithDescription() {
@components.Input(components.InputProps{
ID: "email",
Type: "email",
Description: "This is your accounts email address.",
})
}

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

@ -0,0 +1,10 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ InputWithError() {
@components.Input(components.InputProps{
ID: "username",
Error: "Username must be more then 2 characters",
})
}

11
internals/ui/showcase/input_with_label.templ Normal file
View File

@ -0,0 +1,11 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ InputWithLabel() {
@components.Input(components.InputProps{
ID: "email",
Type: "email",
Label: "Email",
})
}

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

@ -0,0 +1,10 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ InputWithPlaceholder() {
@components.Input(components.InputProps{
Type: "email",
Placeholder: "e.g. john@doe.com",
})
}

54
internals/ui/showcase/modal.templ
View File

@ -2,35 +2,31 @@ package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ ModalShowcase() {
<div class="flex justify-center items-center border rounded-md py-16 px-4">
<div>
@components.ModalTrigger("default-modal") {
@components.Button(components.ButtonProps{Text: "Open Modal"})
}
@components.Modal(components.ModalProps{ID: "default-modal", Class: "max-w-md"}) {
@components.ModalHeader() {
Are you absolutely sure?
templ Modal() {
@components.ModalTrigger("default-modal") {
@components.Button(components.ButtonProps{Text: "Open Modal"})
}
@components.Modal(components.ModalProps{ID: "default-modal", Class: "max-w-md"}) {
@components.ModalHeader() {
Are you absolutely sure?
}
@components.ModalBody() {
This action cannot be undone. This will permanently delete your account and remove your data from our servers.
}
@components.ModalFooter() {
<div class="flex gap-2">
@components.ModalClose("default-modal") {
@components.Button(components.ButtonProps{
Text: "Cancel",
})
}
@components.ModalBody() {
This action cannot be undone. This will permanently delete your account and remove your data from our servers.
@components.ModalClose("default-modal") {
@components.Button(components.ButtonProps{
Text: "Continue",
Variant: components.ButtonVariantSecondary,
})
}
@components.ModalFooter() {
<div class="flex gap-2">
@components.ModalClose("default-modal") {
@components.Button(components.ButtonProps{
Text: "Cancel",
})
}
@components.ModalClose("default-modal") {
@components.Button(components.ButtonProps{
Text: "Continue",
Variant: components.ButtonVariantSecondary,
})
}
</div>
}
}
</div>
</div>
</div>
}
}
}

48
internals/ui/showcase/radio_group.templ
View File

@ -2,29 +2,27 @@ package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ RadioGroupShowcase() {
<div class="flex justify-center items-center border rounded-md py-16 px-4">
@components.RadioGroup(components.RadioGroupProps{}) {
@components.RadioGroupItem(components.RadioGroupItemProps{
Value: "default",
ID: "r1",
Name: "view-mode",
Label: templ.Raw("Default"),
Attributes: templ.Attributes{"checked": true},
})
@components.RadioGroupItem(components.RadioGroupItemProps{
Value: "comfortable",
ID: "r2",
Name: "view-mode",
Label: templ.Raw("Disabled"),
Attributes: templ.Attributes{"disabled": true},
})
@components.RadioGroupItem(components.RadioGroupItemProps{
Value: "compact",
ID: "r3",
Name: "view-mode",
Label: templ.Raw("Compact"),
})
}
</div>
templ RadioGroup() {
@components.RadioGroup(components.RadioGroupProps{}) {
@components.RadioGroupItem(components.RadioGroupItemProps{
Value: "default",
ID: "r1",
Name: "view-mode",
Label: templ.Raw("Default"),
Attributes: templ.Attributes{"checked": true},
})
@components.RadioGroupItem(components.RadioGroupItemProps{
Value: "comfortable",
ID: "r2",
Name: "view-mode",
Label: templ.Raw("Disabled"),
Attributes: templ.Attributes{"disabled": true},
})
@components.RadioGroupItem(components.RadioGroupItemProps{
Value: "compact",
ID: "r3",
Name: "view-mode",
Label: templ.Raw("Compact"),
})
}
}

66
internals/ui/showcase/select.templ
View File

@ -1,66 +0,0 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
var xxx = "banana"
templ SelectShowcase() {
<div class="flex justify-center items-center border rounded-md py-16 px-4">
<div class="w-full max-w-xs space-y-8">
<div>
<h2 class="font-semibold mb-4">Default Select</h2>
@components.Select(components.SelectProps{
ID: "fruit",
Name: "fruit",
Options: []components.SelectOption{
{Label: "Apple", Value: "apple"},
{Label: "Banana", Value: "banana"},
{Label: "Orange", Value: "orange"},
{Label: "Mango", Value: "mango"},
},
})
</div>
<div>
<h2 class="font-semibold mb-4">With Placeholder</h2>
@components.Select(components.SelectProps{
ID: "fruit",
Name: "fruit",
Placeholder: "Select a fruit",
Options: []components.SelectOption{
{Label: "Apple", Value: "apple"},
{Label: "Banana", Value: "banana"},
{Label: "Orange", Value: "orange"},
{Label: "Mango", Value: "mango"},
},
})
</div>
<div>
<h2 class="font-semibold mb-4">Selected Value</h2>
@components.Select(components.SelectProps{
ID: "selected",
Name: "selected",
Placeholder: "Select a fruit",
Options: []components.SelectOption{
{Label: "Apple", Value: "apple"},
{Label: "Banana", Value: "banana"},
{Label: "Orange", Value: "orange", Attributes: templ.Attributes{"selected": true}},
{Label: "Mango", Value: "mango"},
},
})
</div>
<div>
<h2 class="font-semibold mb-4">Disabled Select</h2>
@components.Select(components.SelectProps{
ID: "disabled",
Name: "disabled",
Placeholder: "Select is disabled",
Attributes: templ.Attributes{":disabled": "true"},
Options: []components.SelectOption{
{Label: "Option 1", Value: "1"},
{Label: "Option 2", Value: "2"},
},
})
</div>
</div>
</div>
}

16
internals/ui/showcase/select_default.templ Normal file
View File

@ -0,0 +1,16 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ SelectDefault() {
@components.Select(components.SelectProps{
ID: "fruit",
Name: "fruit",
Options: []components.SelectOption{
{Label: "Apple", Value: "apple"},
{Label: "Banana", Value: "banana"},
{Label: "Orange", Value: "orange"},
{Label: "Mango", Value: "mango"},
},
})
}

16
internals/ui/showcase/select_disabled.templ Normal file
View File

@ -0,0 +1,16 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ SelectDisabled() {
@components.Select(components.SelectProps{
ID: "disabled",
Name: "disabled",
Placeholder: "Select is disabled",
Attributes: templ.Attributes{":disabled": "true"},
Options: []components.SelectOption{
{Label: "Option 1", Value: "1"},
{Label: "Option 2", Value: "2"},
},
})
}

17
internals/ui/showcase/select_selected_value.templ Normal file
View File

@ -0,0 +1,17 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ SelectSelectedValue() {
@components.Select(components.SelectProps{
ID: "selected",
Name: "selected",
Placeholder: "Select a fruit",
Options: []components.SelectOption{
{Label: "Apple", Value: "apple"},
{Label: "Banana", Value: "banana"},
{Label: "Orange", Value: "orange", Attributes: templ.Attributes{"selected": true}},
{Label: "Mango", Value: "mango"},
},
})
}

17
internals/ui/showcase/select_with_placeholder.templ Normal file
View File

@ -0,0 +1,17 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ SelectWithPlaceholder() {
@components.Select(components.SelectProps{
ID: "fruit",
Name: "fruit",
Placeholder: "Select a fruit",
Options: []components.SelectOption{
{Label: "Apple", Value: "apple"},
{Label: "Banana", Value: "banana"},
{Label: "Orange", Value: "orange"},
{Label: "Mango", Value: "mango"},
},
})
}

38
internals/ui/showcase/sheet.templ
View File

@ -9,27 +9,25 @@ var sides = []components.SheetSide{
components.SheetSideBottom,
}
templ SheetShowcase() {
<div class="flex justify-center items-center border rounded-md py-16 px-4">
<div class="flex gap-2">
for _, side := range sides {
@components.SheetRoot() {
@components.Sheet(components.SheetProps{
Side: side,
}) {
<div class="py-4">
<h3 class="mb-2 text-lg font-medium">Sheet Content</h3>
<p>This is the main content of the sheet. You can put any components or text here.</p>
</div>
<div class="mt-4">
@components.SheetClose("Close")
</div>
}
@components.SheetTrigger(string(side), side) {
@components.Button(components.ButtonProps{Text: string(side)})
}
templ Sheet() {
<div class="flex gap-2">
for _, side := range sides {
@components.SheetRoot() {
@components.Sheet(components.SheetProps{
Side: side,
}) {
<div class="py-4">
<h3 class="mb-2 text-lg font-medium">Sheet Content</h3>
<p>This is the main content of the sheet. You can put any components or text here.</p>
</div>
<div class="mt-4">
@components.SheetClose("Close")
</div>
}
@components.SheetTrigger(string(side), side) {
@components.Button(components.ButtonProps{Text: string(side)})
}
}
</div>
}
</div>
}

84
internals/ui/showcase/slider.templ
View File

@ -1,84 +0,0 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ SliderShowcase() {
<div class="flex justify-center items-center border rounded-md py-16 px-4">
<div class="space-y-8 w-full max-w-lg">
<div>
<h2 class="font-semibold mb-4">Default Slider</h2>
@components.Slider(components.SliderProps{
ID: "default",
Name: "default",
})
</div>
<div>
<h2 class="font-semibold mb-4">With Label</h2>
@components.Slider(components.SliderProps{
ID: "with-label",
Name: "with-label",
Label: "Volume",
Value: 65,
Min: 0,
Max: 100,
Step: 1,
})
</div>
<div>
<h2 class="font-semibold mb-4">With Value</h2>
@components.Slider(components.SliderProps{
ID: "with-label",
Name: "with-label",
Value: 75,
Min: 0,
Max: 100,
Step: 1,
ShowValue: true,
ValueFormat: "%",
})
</div>
<div>
<h2 class="font-semibold mb-4">With Label and Value</h2>
@components.Slider(components.SliderProps{
ID: "temperature",
Name: "temperature",
Label: "Temperature",
Value: 23,
Min: -20,
Max: 40,
Step: 1,
ShowValue: true,
ValueFormat: "°C",
})
</div>
<div>
<h2 class="font-semibold mb-4">Steps</h2>
@components.Slider(components.SliderProps{
ID: "steps",
Name: "steps",
Label: "Zoom Level",
Value: 100,
Min: 0,
Max: 200,
Step: 25,
ShowValue: true,
ValueFormat: "%",
})
</div>
<div>
<h2 class="font-semibold mb-4">Disabled</h2>
@components.Slider(components.SliderProps{
ID: "disabled",
Name: "disabled",
Label: "Disabled Slider",
Value: 20,
Min: -20,
Max: 200,
Step: 20,
Disabled: true,
ShowValue: true,
})
</div>
</div>
</div>
}

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

@ -0,0 +1,10 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ SliderDefault() {
@components.Slider(components.SliderProps{
ID: "default",
Name: "default",
})
}

17
internals/ui/showcase/slider_disabled.templ Normal file
View File

@ -0,0 +1,17 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ SliderDisabled() {
@components.Slider(components.SliderProps{
ID: "disabled",
Name: "disabled",
Label: "Disabled Slider",
Value: 20,
Min: -20,
Max: 200,
Step: 20,
Disabled: true,
ShowValue: true,
})
}

15
internals/ui/showcase/slider_with_label.templ Normal file
View File

@ -0,0 +1,15 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ SliderWithLabel() {
@components.Slider(components.SliderProps{
ID: "with-label",
Name: "with-label",
Label: "Volume",
Value: 65,
Min: 0,
Max: 100,
Step: 1,
})
}

17
internals/ui/showcase/slider_with_label_and_value.templ Normal file
View File

@ -0,0 +1,17 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ SliderWithLabelAndValue() {
@components.Slider(components.SliderProps{
ID: "temperature",
Name: "temperature",
Label: "Temperature",
Value: 23,
Min: -20,
Max: 40,
Step: 1,
ShowValue: true,
ValueFormat: "°C",
})
}

17
internals/ui/showcase/slider_with_steps.templ Normal file
View File

@ -0,0 +1,17 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ SliderWithSteps() {
@components.Slider(components.SliderProps{
ID: "steps",
Name: "steps",
Label: "Zoom Level",
Value: 100,
Min: 0,
Max: 200,
Step: 25,
ShowValue: true,
ValueFormat: "%",
})
}

16
internals/ui/showcase/slider_with_value.templ Normal file
View File

@ -0,0 +1,16 @@
package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ SliderWithValue() {
@components.Slider(components.SliderProps{
ID: "with-label",
Name: "with-label",
Value: 75,
Min: 0,
Max: 100,
Step: 1,
ShowValue: true,
ValueFormat: "%",
})
}

23
pkg/components/select.templ
View File

@ -1,25 +1,21 @@
// pkg/components/select.templ
package components
import "github.com/axzilla/goilerplate/pkg/icons"
import (
"github.com/axzilla/goilerplate/pkg/icons"
"github.com/axzilla/goilerplate/pkg/utils"
)
type SelectProps struct {
// ID uniquely identifies the select input
ID string
// Name sets the form field name
Name string
// Placeholder shows text when no option selected
Placeholder string
// Options defines available choices
Options []SelectOption
// Class adds custom CSS classes
Class string
// Attributes for additional HTML attributes and Alpine.js bindings
Attributes templ.Attributes
}
@ -27,10 +23,8 @@ type SelectProps struct {
type SelectOption struct {
// Label displays text in dropdown
Label string
// Value sets the option's form value
Value string
// Attributes for disabled state or other HTML attributes
Attributes templ.Attributes
}
@ -52,11 +46,16 @@ type SelectOption struct {
// - Alpine.js integration
// - Custom styling via Tailwind
templ Select(props SelectProps) {
<div class="relative">
<div
class={ utils.TwMerge(
"relative w-full", // Make it full width by default
props.Class, // Allow custom classes to override
) }
>
<select
id={ props.ID }
name={ props.Name }
class="peer h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 text-sm
class="peer h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 text-sm
ring-offset-background placeholder:text-muted-foreground
focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
disabled:cursor-not-allowed disabled:opacity-50"

79
pkg/components/select_templ.go
View File

@ -1,8 +1,6 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.2.793
// pkg/components/select.templ
package components
//lint:file-ignore SA4006 This context is only used if a nested component is present.
@ -10,24 +8,22 @@ package components
import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
import "github.com/axzilla/goilerplate/pkg/icons"
import (
"github.com/axzilla/goilerplate/pkg/icons"
"github.com/axzilla/goilerplate/pkg/utils"
)
type SelectProps struct {
// ID uniquely identifies the select input
ID string
// Name sets the form field name
Name string
// Placeholder shows text when no option selected
Placeholder string
// Options defines available choices
Options []SelectOption
// Class adds custom CSS classes
Class string
// Attributes for additional HTML attributes and Alpine.js bindings
Attributes templ.Attributes
}
@ -35,10 +31,8 @@ type SelectProps struct {
type SelectOption struct {
// Label displays text in dropdown
Label string
// Value sets the option's form value
Value string
// Attributes for disabled state or other HTML attributes
Attributes templ.Attributes
}
@ -80,16 +74,37 @@ func Select(props SelectProps) templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"relative\"><select id=\"")
var templ_7745c5c3_Var2 = []any{utils.TwMerge(
"relative w-full", // Make it full width by default
props.Class, // Allow custom classes to override
)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var2 string
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(props.ID)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"")
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 57, Col: 16}
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 1, Col: 0}
}
_, 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("\"><select id=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(props.ID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 56, Col: 16}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -97,16 +112,16 @@ func Select(props SelectProps) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(props.Name)
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(props.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 58, Col: 20}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 57, Col: 20}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"peer h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 text-sm \n ring-offset-background placeholder:text-muted-foreground\n focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\n disabled:cursor-not-allowed disabled:opacity-50\"")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"peer h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 text-sm\n ring-offset-background placeholder:text-muted-foreground\n focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\n disabled:cursor-not-allowed disabled:opacity-50\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -123,12 +138,12 @@ func Select(props SelectProps) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(props.Placeholder)
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(props.Placeholder)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 66, Col: 65}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 65, Col: 65}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -142,12 +157,12 @@ func Select(props SelectProps) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(option.Value)
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(option.Value)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 70, Col: 25}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 69, Col: 25}
}
_, 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
}
@ -163,12 +178,12 @@ func Select(props SelectProps) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(option.Label)
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(option.Label)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 73, Col: 19}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/select.templ`, Line: 72, Col: 19}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}