402 lines
11 KiB
Plaintext
402 lines
11 KiB
Plaintext
// Code generated by wa-generator. DO NOT EDIT.
|
|
// Source: Web Awesome wa-color-picker
|
|
|
|
package wa
|
|
|
|
import (
|
|
"github.com/a-h/templ"
|
|
)
|
|
|
|
// Color pickers allow the user to select a color.
|
|
//
|
|
// Web Awesome component: <wa-color-picker>
|
|
|
|
// ColorPickerProps holds all properties for the wa-color-picker component
|
|
type ColorPickerProps struct {
|
|
// The default value of the form control. Primarily used for resetting the form control.
|
|
Value string `attr:"value"`
|
|
//
|
|
WithLabel bool `attr:"with-label"`
|
|
//
|
|
WithHint bool `attr:"with-hint"`
|
|
// The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to
|
|
Label string `attr:"label"`
|
|
// The color picker's hint. If you need to display HTML, use the hint slot instead.
|
|
Hint string `attr:"hint"`
|
|
// The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color
|
|
// Valid values: "hex", "rgb", "hsl", "hsv"
|
|
Format string `attr:"format"`
|
|
// Determines the size of the color picker's trigger
|
|
// Valid values: "small", "medium", "large"
|
|
Size string `attr:"size"`
|
|
// Removes the button that lets users toggle between format.
|
|
WithoutFormatToggle bool `attr:"without-format-toggle"`
|
|
// The name of the form control, submitted as a name/value pair with form data.
|
|
Name string `attr:"name"`
|
|
// Disables the color picker.
|
|
Disabled bool `attr:"disabled"`
|
|
// Indicates whether or not the popup is open. You can toggle this attribute to show and hide the popup, or you
|
|
Open bool `attr:"open"`
|
|
// Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.
|
|
Opacity bool `attr:"opacity"`
|
|
// By default, values are lowercase. With this attribute, values will be uppercase instead.
|
|
Uppercase bool `attr:"uppercase"`
|
|
// One or more predefined color swatches to display as presets in the color picker. Can include any format the color
|
|
Swatches string `attr:"swatches"`
|
|
// Makes the color picker a required field.
|
|
Required bool `attr:"required"`
|
|
|
|
// Events
|
|
// Emitted when the color picker's value changes.
|
|
OnChange string `attr:"x-on:change"`
|
|
// Emitted when the color picker receives input.
|
|
OnInput string `attr:"x-on:input"`
|
|
//
|
|
OnShow string `attr:"x-on:wa-show"`
|
|
//
|
|
OnAfterShow string `attr:"x-on:wa-after-show"`
|
|
//
|
|
OnHide string `attr:"x-on:wa-hide"`
|
|
//
|
|
OnAfterHide string `attr:"x-on:wa-after-hide"`
|
|
// Emitted when the color picker loses focus.
|
|
OnBlur string `attr:"x-on:blur"`
|
|
// Emitted when the color picker receives focus.
|
|
OnFocus string `attr:"x-on:focus"`
|
|
// Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
OnInvalid string `attr:"x-on:wa-invalid"`
|
|
|
|
// Slots contains named slot content
|
|
Slots ColorPickerSlots
|
|
|
|
// Attrs contains additional HTML attributes
|
|
Attrs templ.Attributes
|
|
}
|
|
|
|
// ColorPickerSlots holds named slot content for the component
|
|
type ColorPickerSlots struct {
|
|
// The color picker's form label. Alternatively, you can use the label attribute.
|
|
Label templ.Component
|
|
// The color picker's form hint. Alternatively, you can use the hint attribute.
|
|
Hint templ.Component
|
|
}
|
|
|
|
// ColorPickerBuilder provides a fluent API for constructing ColorPickerProps
|
|
type ColorPickerBuilder struct {
|
|
props ColorPickerProps
|
|
}
|
|
|
|
// NewColorPicker creates a new builder for wa-color-picker
|
|
func NewColorPicker() *ColorPickerBuilder {
|
|
return &ColorPickerBuilder{}
|
|
}
|
|
|
|
// Value sets the value attribute
|
|
// The default value of the form control. Primarily used for resetting the form control.
|
|
func (b *ColorPickerBuilder) Value(v string) *ColorPickerBuilder {
|
|
b.props.Value = v
|
|
return b
|
|
}
|
|
|
|
// WithLabel sets the with-label attribute
|
|
func (b *ColorPickerBuilder) WithLabel(v bool) *ColorPickerBuilder {
|
|
b.props.WithLabel = v
|
|
return b
|
|
}
|
|
|
|
// WithHint sets the with-hint attribute
|
|
func (b *ColorPickerBuilder) WithHint(v bool) *ColorPickerBuilder {
|
|
b.props.WithHint = v
|
|
return b
|
|
}
|
|
|
|
// Label sets the label attribute
|
|
// The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to
|
|
func (b *ColorPickerBuilder) Label(v string) *ColorPickerBuilder {
|
|
b.props.Label = v
|
|
return b
|
|
}
|
|
|
|
// Hint sets the hint attribute
|
|
// The color picker's hint. If you need to display HTML, use the hint slot instead.
|
|
func (b *ColorPickerBuilder) Hint(v string) *ColorPickerBuilder {
|
|
b.props.Hint = v
|
|
return b
|
|
}
|
|
|
|
// Format sets the format attribute
|
|
// The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color
|
|
func (b *ColorPickerBuilder) Format(v string) *ColorPickerBuilder {
|
|
b.props.Format = v
|
|
return b
|
|
}
|
|
|
|
// Size sets the size attribute
|
|
// Determines the size of the color picker's trigger
|
|
func (b *ColorPickerBuilder) Size(v string) *ColorPickerBuilder {
|
|
b.props.Size = v
|
|
return b
|
|
}
|
|
|
|
// WithoutFormatToggle sets the without-format-toggle attribute
|
|
// Removes the button that lets users toggle between format.
|
|
func (b *ColorPickerBuilder) WithoutFormatToggle(v bool) *ColorPickerBuilder {
|
|
b.props.WithoutFormatToggle = v
|
|
return b
|
|
}
|
|
|
|
// Name sets the name attribute
|
|
// The name of the form control, submitted as a name/value pair with form data.
|
|
func (b *ColorPickerBuilder) Name(v string) *ColorPickerBuilder {
|
|
b.props.Name = v
|
|
return b
|
|
}
|
|
|
|
// Disabled sets the disabled attribute
|
|
// Disables the color picker.
|
|
func (b *ColorPickerBuilder) Disabled(v bool) *ColorPickerBuilder {
|
|
b.props.Disabled = v
|
|
return b
|
|
}
|
|
|
|
// Open sets the open attribute
|
|
// Indicates whether or not the popup is open. You can toggle this attribute to show and hide the popup, or you
|
|
func (b *ColorPickerBuilder) Open(v bool) *ColorPickerBuilder {
|
|
b.props.Open = v
|
|
return b
|
|
}
|
|
|
|
// Opacity sets the opacity attribute
|
|
// Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.
|
|
func (b *ColorPickerBuilder) Opacity(v bool) *ColorPickerBuilder {
|
|
b.props.Opacity = v
|
|
return b
|
|
}
|
|
|
|
// Uppercase sets the uppercase attribute
|
|
// By default, values are lowercase. With this attribute, values will be uppercase instead.
|
|
func (b *ColorPickerBuilder) Uppercase(v bool) *ColorPickerBuilder {
|
|
b.props.Uppercase = v
|
|
return b
|
|
}
|
|
|
|
// Swatches sets the swatches attribute
|
|
// One or more predefined color swatches to display as presets in the color picker. Can include any format the color
|
|
func (b *ColorPickerBuilder) Swatches(v string) *ColorPickerBuilder {
|
|
b.props.Swatches = v
|
|
return b
|
|
}
|
|
|
|
// Required sets the required attribute
|
|
// Makes the color picker a required field.
|
|
func (b *ColorPickerBuilder) Required(v bool) *ColorPickerBuilder {
|
|
b.props.Required = v
|
|
return b
|
|
}
|
|
|
|
// OnChange sets the handler for change event
|
|
// Emitted when the color picker's value changes.
|
|
func (b *ColorPickerBuilder) OnChange(handler string) *ColorPickerBuilder {
|
|
b.props.OnChange = handler
|
|
return b
|
|
}
|
|
|
|
// OnInput sets the handler for input event
|
|
// Emitted when the color picker receives input.
|
|
func (b *ColorPickerBuilder) OnInput(handler string) *ColorPickerBuilder {
|
|
b.props.OnInput = handler
|
|
return b
|
|
}
|
|
|
|
// OnShow sets the handler for wa-show event
|
|
//
|
|
func (b *ColorPickerBuilder) OnShow(handler string) *ColorPickerBuilder {
|
|
b.props.OnShow = handler
|
|
return b
|
|
}
|
|
|
|
// OnAfterShow sets the handler for wa-after-show event
|
|
//
|
|
func (b *ColorPickerBuilder) OnAfterShow(handler string) *ColorPickerBuilder {
|
|
b.props.OnAfterShow = handler
|
|
return b
|
|
}
|
|
|
|
// OnHide sets the handler for wa-hide event
|
|
//
|
|
func (b *ColorPickerBuilder) OnHide(handler string) *ColorPickerBuilder {
|
|
b.props.OnHide = handler
|
|
return b
|
|
}
|
|
|
|
// OnAfterHide sets the handler for wa-after-hide event
|
|
//
|
|
func (b *ColorPickerBuilder) OnAfterHide(handler string) *ColorPickerBuilder {
|
|
b.props.OnAfterHide = handler
|
|
return b
|
|
}
|
|
|
|
// OnBlur sets the handler for blur event
|
|
// Emitted when the color picker loses focus.
|
|
func (b *ColorPickerBuilder) OnBlur(handler string) *ColorPickerBuilder {
|
|
b.props.OnBlur = handler
|
|
return b
|
|
}
|
|
|
|
// OnFocus sets the handler for focus event
|
|
// Emitted when the color picker receives focus.
|
|
func (b *ColorPickerBuilder) OnFocus(handler string) *ColorPickerBuilder {
|
|
b.props.OnFocus = handler
|
|
return b
|
|
}
|
|
|
|
// OnInvalid sets the handler for wa-invalid event
|
|
// Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
func (b *ColorPickerBuilder) OnInvalid(handler string) *ColorPickerBuilder {
|
|
b.props.OnInvalid = handler
|
|
return b
|
|
}
|
|
|
|
// LabelSlot sets the label slot content
|
|
// The color picker's form label. Alternatively, you can use the label attribute.
|
|
func (b *ColorPickerBuilder) LabelSlot(c templ.Component) *ColorPickerBuilder {
|
|
b.props.Slots.Label = c
|
|
return b
|
|
}
|
|
|
|
// HintSlot sets the hint slot content
|
|
// The color picker's form hint. Alternatively, you can use the hint attribute.
|
|
func (b *ColorPickerBuilder) HintSlot(c templ.Component) *ColorPickerBuilder {
|
|
b.props.Slots.Hint = c
|
|
return b
|
|
}
|
|
|
|
// Attr adds a custom HTML attribute
|
|
func (b *ColorPickerBuilder) Attr(name, value string) *ColorPickerBuilder {
|
|
if b.props.Attrs == nil {
|
|
b.props.Attrs = templ.Attributes{}
|
|
}
|
|
b.props.Attrs[name] = value
|
|
return b
|
|
}
|
|
|
|
// Attrs merges multiple attributes
|
|
func (b *ColorPickerBuilder) Attrs(attrs templ.Attributes) *ColorPickerBuilder {
|
|
if b.props.Attrs == nil {
|
|
b.props.Attrs = templ.Attributes{}
|
|
}
|
|
for k, v := range attrs {
|
|
b.props.Attrs[k] = v
|
|
}
|
|
return b
|
|
}
|
|
|
|
// Props returns the built properties
|
|
func (b *ColorPickerBuilder) Props() ColorPickerProps {
|
|
return b.props
|
|
}
|
|
|
|
// Build returns the props (alias for Props for semantic clarity)
|
|
func (b *ColorPickerBuilder) Build() ColorPickerProps {
|
|
return b.props
|
|
}
|
|
|
|
// ColorPicker renders the wa-color-picker component
|
|
templ ColorPicker(props ColorPickerProps) {
|
|
<wa-color-picker
|
|
if props.Value != "" {
|
|
value={ props.Value }
|
|
}
|
|
if props.WithLabel {
|
|
with-label
|
|
}
|
|
if props.WithHint {
|
|
with-hint
|
|
}
|
|
if props.Label != "" {
|
|
label={ props.Label }
|
|
}
|
|
if props.Hint != "" {
|
|
hint={ props.Hint }
|
|
}
|
|
if props.Format != "" {
|
|
format={ props.Format }
|
|
}
|
|
if props.Size != "" {
|
|
size={ props.Size }
|
|
}
|
|
if props.WithoutFormatToggle {
|
|
without-format-toggle
|
|
}
|
|
if props.Name != "" {
|
|
name={ props.Name }
|
|
}
|
|
if props.Disabled {
|
|
disabled
|
|
}
|
|
if props.Open {
|
|
open
|
|
}
|
|
if props.Opacity {
|
|
opacity
|
|
}
|
|
if props.Uppercase {
|
|
uppercase
|
|
}
|
|
if props.Swatches != "" {
|
|
swatches={ props.Swatches }
|
|
}
|
|
if props.Required {
|
|
required
|
|
}
|
|
if props.OnChange != "" {
|
|
x-on:change={ props.OnChange }
|
|
}
|
|
if props.OnInput != "" {
|
|
x-on:input={ props.OnInput }
|
|
}
|
|
if props.OnShow != "" {
|
|
x-on:wa-show={ props.OnShow }
|
|
}
|
|
if props.OnAfterShow != "" {
|
|
x-on:wa-after-show={ props.OnAfterShow }
|
|
}
|
|
if props.OnHide != "" {
|
|
x-on:wa-hide={ props.OnHide }
|
|
}
|
|
if props.OnAfterHide != "" {
|
|
x-on:wa-after-hide={ props.OnAfterHide }
|
|
}
|
|
if props.OnBlur != "" {
|
|
x-on:blur={ props.OnBlur }
|
|
}
|
|
if props.OnFocus != "" {
|
|
x-on:focus={ props.OnFocus }
|
|
}
|
|
if props.OnInvalid != "" {
|
|
x-on:wa-invalid={ props.OnInvalid }
|
|
}
|
|
{ props.Attrs... }
|
|
>
|
|
if props.Slots.Label != nil {
|
|
<div slot="label">
|
|
@props.Slots.Label
|
|
</div>
|
|
}
|
|
if props.Slots.Hint != nil {
|
|
<div slot="hint">
|
|
@props.Slots.Hint
|
|
</div>
|
|
}
|
|
{ children... }
|
|
</wa-color-picker>
|
|
}
|
|
|
|
// ColorPickerFunc renders with a builder function for inline configuration
|
|
templ ColorPickerFunc(fn func(*ColorPickerBuilder)) {
|
|
{{ b := NewColorPicker(); fn(b) }}
|
|
@ColorPicker(b.Props()) {
|
|
{ children... }
|
|
}
|
|
}
|