-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
axzilla
committed
Oct 12, 2024
1 parent
6663361
commit bc54e1c
Showing
7 changed files
with
522 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| package pages | ||
|
|
||
| import ( | ||
| "github.com/axzilla/goilerplate/internals/ui/layouts" | ||
| "github.com/axzilla/goilerplate/internals/ui/showcase" | ||
| "github.com/axzilla/goilerplate/pkg/components" | ||
| ) | ||
|
|
||
| templ Checkbox() { | ||
| @layouts.DocsLayout() { | ||
| <div> | ||
| <div class="mb-16"> | ||
| <h1 class="text-3xl font-bold mb-2">Checkbox</h1> | ||
| <p class="mb-4 text-muted-foreground">A control that allows the user to toggle between checked and not checked.</p> | ||
| </div> | ||
| @components.Tabs(components.TabsProps{ | ||
| Tabs: []components.Tab{ | ||
| { | ||
| ID: "preview", | ||
| Title: "Preview", | ||
| Content: showcase.CheckboxShowcase(), | ||
| }, | ||
| { | ||
| ID: "code", | ||
| Title: "Code", | ||
| Content: CodeSnippetFromEmbedded("checkbox.templ", "go", showcase.TemplFiles), | ||
| }, | ||
| { | ||
| ID: "component", | ||
| Title: "Component", | ||
| Content: CodeSnippetFromEmbedded("checkbox.templ", "go", components.TemplFiles), | ||
| }, | ||
| }, | ||
| TabsContainerClass: "md:w-1/2", | ||
| ContentContainerClass: "w-full", | ||
| }) | ||
| </div> | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| package showcase | ||
|
|
||
| import "github.com/axzilla/goilerplate/pkg/components" | ||
|
|
||
| templ CheckboxShowcase() { | ||
| <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 Checkbox</h2> | ||
| @components.Checkbox(components.CheckboxProps{ | ||
| ID: "default-checkbox", | ||
| Name: "default", | ||
| Value: "default", | ||
| Label: "Accept terms and conditions", | ||
| }) | ||
| </div> | ||
| <div class="mb-8"> | ||
| <h2 class="font-semibold mb-2">Checked Checkbox</h2> | ||
| @components.Checkbox(components.CheckboxProps{ | ||
| ID: "checked-checkbox", | ||
| Name: "newsletter", | ||
| Value: "subscribe", | ||
| Label: "Receive newsletter", | ||
| Checked: true, | ||
| }) | ||
| </div> | ||
| <div class="mb-8"> | ||
| <h2 class="font-semibold mb-2">Disabled Checkbox</h2> | ||
| @components.Checkbox(components.CheckboxProps{ | ||
| ID: "disabled-checkbox", | ||
| Name: "disabled", | ||
| Value: "disabled", | ||
| Label: "Disabled option", | ||
| Disabled: true, | ||
| }) | ||
| </div> | ||
| <div class="mb-8"> | ||
| <h2 class="font-semibold mb-2">Disabled Checked Checkbox</h2> | ||
| @components.Checkbox(components.CheckboxProps{ | ||
| ID: "disabled-checked-checkbox", | ||
| Name: "disabled-checked", | ||
| Value: "disabled-checked", | ||
| Label: "Disabled checked option", | ||
| Checked: true, | ||
| Disabled: true, | ||
| }) | ||
| </div> | ||
| <div class="mb-8"> | ||
| <h2 class="font-semibold mb-2">Checkbox with Dynamic Checked State</h2> | ||
| @components.Checkbox(components.CheckboxProps{ | ||
| ID: "dynamic-checkbox", | ||
| Name: "dynamic", | ||
| Value: "dynamic", | ||
| Label: "Dynamic checkbox", | ||
| Checked: "dynamicState", | ||
| }) | ||
| </div> | ||
| <div class="mb-8"> | ||
| <h2 class="font-semibold mb-2">Checkbox without Label</h2> | ||
| @components.Checkbox(components.CheckboxProps{ | ||
| ID: "no-label-checkbox", | ||
| Name: "no-label", | ||
| Value: "no-label", | ||
| }) | ||
| </div> | ||
| </div> | ||
| </div> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| package components | ||
|
|
||
| // CheckboxProps defines the properties for the Checkbox component. | ||
| type CheckboxProps struct { | ||
| // ID is the unique identifier for the checkbox input. | ||
| ID string | ||
|
|
||
| // Name is the name attribute for the checkbox input. | ||
| Name string | ||
|
|
||
| // Value is the value attribute for the checkbox input. | ||
| Value string | ||
|
|
||
| // Label is the text label associated with the checkbox. | ||
| // If empty, no label will be rendered. | ||
| Label string | ||
|
|
||
| // Checked can be either a bool or a string. | ||
| // If bool, it directly controls the checked state. | ||
| // If string, it's treated as a JavaScript expression for dynamic checking. | ||
| Checked any | ||
|
|
||
| // Disabled can be either a bool or a string. | ||
| // If bool, it directly controls the disabled state. | ||
| // If string, it's treated as a JavaScript expression for dynamic disabling. | ||
| Disabled any | ||
|
|
||
| // Class specifies additional CSS classes to apply to the checkbox input. | ||
| Class string | ||
|
|
||
| // Attributes allows passing additional HTML attributes to the checkbox input element. | ||
| Attributes templ.Attributes | ||
| } | ||
|
|
||
| // Checkbox renders a checkbox input element with an optional label. | ||
| // | ||
| // Usage: | ||
| // | ||
| // @components.Checkbox(components.CheckboxProps{ | ||
| // ID: "terms", | ||
| // Name: "terms", | ||
| // Value: "accepted", | ||
| // Label: "I accept the terms and conditions", | ||
| // Checked: true, | ||
| // }) | ||
| // | ||
| // Props: | ||
| // - ID: The unique identifier for the checkbox. Required. | ||
| // - Name: The name attribute for the checkbox. Default: "" (empty string) | ||
| // - Value: The value attribute for the checkbox. Default: "" (empty string) | ||
| // - Label: The text label for the checkbox. If empty, no label is rendered. | ||
| // - Checked: Controls the checked state. Can be bool or string. Default: nil | ||
| // - Disabled: Controls the disabled state. Can be bool or string. Default: nil | ||
| // - Class: Additional CSS classes for the checkbox input. Default: "" (empty string) | ||
| // - Attributes: Additional HTML attributes for the checkbox input. Default: nil | ||
| templ Checkbox(props CheckboxProps) { | ||
| <div class="flex items-center"> | ||
| <input | ||
| type="checkbox" | ||
| id={ props.ID } | ||
| name={ props.Name } | ||
| value={ props.Value } | ||
| if props.Disabled != nil { | ||
| if disabledBool, ok := props.Disabled.(bool); ok { | ||
| disabled?={ disabledBool } | ||
| } | ||
| if disabledStr, ok := props.Disabled.(string); ok { | ||
| :disabled={ disabledStr } | ||
| } | ||
| } | ||
| if props.Checked != nil { | ||
| if checkedBool, ok := props.Checked.(bool); ok { | ||
| checked?={ checkedBool } | ||
| } | ||
| if checkedStr, ok := props.Checked.(string); ok { | ||
| :checked={ checkedStr } | ||
| } | ||
| } | ||
| class={ "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", | ||
| "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", | ||
| props.Class } | ||
| { props.Attributes... } | ||
| /> | ||
| if props.Label != "" { | ||
| <label | ||
| for={ props.ID } | ||
| class={ "ml-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", | ||
| templ.KV("text-muted-foreground", props.Disabled) } | ||
| > | ||
| { props.Label } | ||
| </label> | ||
| } | ||
| </div> | ||
| } |
Oops, something went wrong.