nebula/pkg/wa/combobox.templ

// Code generated by wa-generator. DO NOT EDIT.
// Source: Web Awesome wa-combobox

package wa

import (
	"github.com/a-h/templ"
)

// Comboboxes combine a text input with a listbox, allowing users to filter and select from predefined options or enter ...
//
// Web Awesome component: <wa-combobox>

// ComboboxProps holds all properties for the wa-combobox component
type ComboboxProps struct {
	// The name of the combobox, submitted as a name/value pair with form data.
	Name string `attr:"name"`
	// The combobox's value. This will be a string for single select or an array for multi-select.
	Value string `attr:"value"`
	// The combobox's size.
	// Valid values: "small", "medium", "large"
	Size string `attr:"size"`
	// Placeholder text to show as a hint when the combobox is empty.
	Placeholder string `attr:"placeholder"`
	// Allows more than one option to be selected.
	Multiple bool `attr:"multiple"`
	// The maximum number of selected options to show when multiple is true. After the maximum, "+n" will be shown to
	MaxOptionsVisible float64 `attr:"max-options-visible"`
	// Disables the combobox control.
	Disabled bool `attr:"disabled"`
	// Adds a clear button when the combobox is not empty.
	WithClear bool `attr:"with-clear"`
	// Indicates whether or not the combobox is open. You can toggle this attribute to show and hide the menu, or you can
	Open bool `attr:"open"`
	// The combobox's visual appearance.
	// Valid values: "filled", "outlined", "filled-outlined"
	Appearance string `attr:"appearance"`
	// Draws a pill-style combobox with rounded edges.
	Pill bool `attr:"pill"`
	// The combobox's label. If you need to display HTML, use the label slot instead.
	Label string `attr:"label"`
	// The preferred placement of the combobox's menu. Note that the actual placement may vary as needed to keep the
	// Valid values: "top", "bottom"
	Placement string `attr:"placement"`
	// The combobox's hint. If you need to display HTML, use the hint slot instead.
	Hint string `attr:"hint"`
	// Used for SSR purposes when a label is slotted in. Will show the label on first render.
	WithLabel bool `attr:"with-label"`
	// Used for SSR purposes when hint is slotted in. Will show the hint on first render.
	WithHint bool `attr:"with-hint"`
	// The combobox's required attribute.
	Required bool `attr:"required"`
	// The autocomplete behavior of the combobox.
	// Valid values: "list", "none"
	Autocomplete string `attr:"autocomplete"`
	// When true, allows the user to enter a value that doesn't match any of the options. Only applies to single-select
	AllowCustomValue bool `attr:"allow-custom-value"`

	// Events
	// Emitted when the control receives input.
	OnInput string `attr:"x-on:input"`
	// Emitted when the control's value changes.
	OnChange string `attr:"x-on:change"`
	// Emitted when the control gains focus.
	OnFocus string `attr:"x-on:focus"`
	// Emitted when the control loses focus.
	OnBlur string `attr:"x-on:blur"`
	// Emitted when the control's value is cleared.
	OnClear string `attr:"x-on:wa-clear"`
	// Emitted when the combobox's menu opens.
	OnShow string `attr:"x-on:wa-show"`
	// Emitted after the combobox's menu opens and all animations are complete.
	OnAfterShow string `attr:"x-on:wa-after-show"`
	// Emitted when the combobox's menu closes.
	OnHide string `attr:"x-on:wa-hide"`
	// Emitted after the combobox's menu closes and all animations are complete.
	OnAfterHide string `attr:"x-on:wa-after-hide"`
	// 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 ComboboxSlots

	// Attrs contains additional HTML attributes
	Attrs templ.Attributes
}

// ComboboxSlots holds named slot content for the component
type ComboboxSlots struct {
	// The input's label. Alternatively, you can use the label attribute.
	Label templ.Component
	// An element, such as <wa-icon>, placed at the start of the combobox.
	Start templ.Component
	// An element, such as <wa-icon>, placed at the end of the combobox.
	End templ.Component
	// An icon to use in lieu of the default clear icon.
	ClearIcon templ.Component
	// The icon to show when the control is expanded and collapsed. Rotates on open and close.
	ExpandIcon templ.Component
	// Text that describes how to use the input. Alternatively, you can use the hint attribute.
	Hint templ.Component
}

// ComboboxBuilder provides a fluent API for constructing ComboboxProps
type ComboboxBuilder struct {
	props ComboboxProps
}

// NewCombobox creates a new builder for wa-combobox
func NewCombobox() *ComboboxBuilder {
	return &ComboboxBuilder{}
}

// Name sets the name attribute
// The name of the combobox, submitted as a name/value pair with form data.
func (b *ComboboxBuilder) Name(v string) *ComboboxBuilder {
	b.props.Name = v
	return b
}

// Value sets the value attribute
// The combobox's value. This will be a string for single select or an array for multi-select.
func (b *ComboboxBuilder) Value(v string) *ComboboxBuilder {
	b.props.Value = v
	return b
}

// Size sets the size attribute
// The combobox's size.
func (b *ComboboxBuilder) Size(v string) *ComboboxBuilder {
	b.props.Size = v
	return b
}

// Placeholder sets the placeholder attribute
// Placeholder text to show as a hint when the combobox is empty.
func (b *ComboboxBuilder) Placeholder(v string) *ComboboxBuilder {
	b.props.Placeholder = v
	return b
}

// Multiple sets the multiple attribute
// Allows more than one option to be selected.
func (b *ComboboxBuilder) Multiple(v bool) *ComboboxBuilder {
	b.props.Multiple = v
	return b
}

// MaxOptionsVisible sets the max-options-visible attribute
// The maximum number of selected options to show when multiple is true. After the maximum, "+n" will be shown to
func (b *ComboboxBuilder) MaxOptionsVisible(v float64) *ComboboxBuilder {
	b.props.MaxOptionsVisible = v
	return b
}

// Disabled sets the disabled attribute
// Disables the combobox control.
func (b *ComboboxBuilder) Disabled(v bool) *ComboboxBuilder {
	b.props.Disabled = v
	return b
}

// WithClear sets the with-clear attribute
// Adds a clear button when the combobox is not empty.
func (b *ComboboxBuilder) WithClear(v bool) *ComboboxBuilder {
	b.props.WithClear = v
	return b
}

// Open sets the open attribute
// Indicates whether or not the combobox is open. You can toggle this attribute to show and hide the menu, or you can
func (b *ComboboxBuilder) Open(v bool) *ComboboxBuilder {
	b.props.Open = v
	return b
}

// Appearance sets the appearance attribute
// The combobox's visual appearance.
func (b *ComboboxBuilder) Appearance(v string) *ComboboxBuilder {
	b.props.Appearance = v
	return b
}

// Pill sets the pill attribute
// Draws a pill-style combobox with rounded edges.
func (b *ComboboxBuilder) Pill(v bool) *ComboboxBuilder {
	b.props.Pill = v
	return b
}

// Label sets the label attribute
// The combobox's label. If you need to display HTML, use the label slot instead.
func (b *ComboboxBuilder) Label(v string) *ComboboxBuilder {
	b.props.Label = v
	return b
}

// Placement sets the placement attribute
// The preferred placement of the combobox's menu. Note that the actual placement may vary as needed to keep the
func (b *ComboboxBuilder) Placement(v string) *ComboboxBuilder {
	b.props.Placement = v
	return b
}

// Hint sets the hint attribute
// The combobox's hint. If you need to display HTML, use the hint slot instead.
func (b *ComboboxBuilder) Hint(v string) *ComboboxBuilder {
	b.props.Hint = v
	return b
}

// WithLabel sets the with-label attribute
// Used for SSR purposes when a label is slotted in. Will show the label on first render.
func (b *ComboboxBuilder) WithLabel(v bool) *ComboboxBuilder {
	b.props.WithLabel = v
	return b
}

// WithHint sets the with-hint attribute
// Used for SSR purposes when hint is slotted in. Will show the hint on first render.
func (b *ComboboxBuilder) WithHint(v bool) *ComboboxBuilder {
	b.props.WithHint = v
	return b
}

// Required sets the required attribute
// The combobox's required attribute.
func (b *ComboboxBuilder) Required(v bool) *ComboboxBuilder {
	b.props.Required = v
	return b
}

// Autocomplete sets the autocomplete attribute
// The autocomplete behavior of the combobox.
func (b *ComboboxBuilder) Autocomplete(v string) *ComboboxBuilder {
	b.props.Autocomplete = v
	return b
}

// AllowCustomValue sets the allow-custom-value attribute
// When true, allows the user to enter a value that doesn't match any of the options. Only applies to single-select
func (b *ComboboxBuilder) AllowCustomValue(v bool) *ComboboxBuilder {
	b.props.AllowCustomValue = v
	return b
}

// OnInput sets the handler for input event
// Emitted when the control receives input.
func (b *ComboboxBuilder) OnInput(handler string) *ComboboxBuilder {
	b.props.OnInput = handler
	return b
}

// OnChange sets the handler for change event
// Emitted when the control's value changes.
func (b *ComboboxBuilder) OnChange(handler string) *ComboboxBuilder {
	b.props.OnChange = handler
	return b
}

// OnFocus sets the handler for focus event
// Emitted when the control gains focus.
func (b *ComboboxBuilder) OnFocus(handler string) *ComboboxBuilder {
	b.props.OnFocus = handler
	return b
}

// OnBlur sets the handler for blur event
// Emitted when the control loses focus.
func (b *ComboboxBuilder) OnBlur(handler string) *ComboboxBuilder {
	b.props.OnBlur = handler
	return b
}

// OnClear sets the handler for wa-clear event
// Emitted when the control's value is cleared.
func (b *ComboboxBuilder) OnClear(handler string) *ComboboxBuilder {
	b.props.OnClear = handler
	return b
}

// OnShow sets the handler for wa-show event
// Emitted when the combobox's menu opens.
func (b *ComboboxBuilder) OnShow(handler string) *ComboboxBuilder {
	b.props.OnShow = handler
	return b
}

// OnAfterShow sets the handler for wa-after-show event
// Emitted after the combobox's menu opens and all animations are complete.
func (b *ComboboxBuilder) OnAfterShow(handler string) *ComboboxBuilder {
	b.props.OnAfterShow = handler
	return b
}

// OnHide sets the handler for wa-hide event
// Emitted when the combobox's menu closes.
func (b *ComboboxBuilder) OnHide(handler string) *ComboboxBuilder {
	b.props.OnHide = handler
	return b
}

// OnAfterHide sets the handler for wa-after-hide event
// Emitted after the combobox's menu closes and all animations are complete.
func (b *ComboboxBuilder) OnAfterHide(handler string) *ComboboxBuilder {
	b.props.OnAfterHide = 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 *ComboboxBuilder) OnInvalid(handler string) *ComboboxBuilder {
	b.props.OnInvalid = handler
	return b
}

// LabelSlot sets the label slot content
// The input's label. Alternatively, you can use the label attribute.
func (b *ComboboxBuilder) LabelSlot(c templ.Component) *ComboboxBuilder {
	b.props.Slots.Label = c
	return b
}

// StartSlot sets the start slot content
// An element, such as <wa-icon>, placed at the start of the combobox.
func (b *ComboboxBuilder) StartSlot(c templ.Component) *ComboboxBuilder {
	b.props.Slots.Start = c
	return b
}

// EndSlot sets the end slot content
// An element, such as <wa-icon>, placed at the end of the combobox.
func (b *ComboboxBuilder) EndSlot(c templ.Component) *ComboboxBuilder {
	b.props.Slots.End = c
	return b
}

// ClearIconSlot sets the clear-icon slot content
// An icon to use in lieu of the default clear icon.
func (b *ComboboxBuilder) ClearIconSlot(c templ.Component) *ComboboxBuilder {
	b.props.Slots.ClearIcon = c
	return b
}

// ExpandIconSlot sets the expand-icon slot content
// The icon to show when the control is expanded and collapsed. Rotates on open and close.
func (b *ComboboxBuilder) ExpandIconSlot(c templ.Component) *ComboboxBuilder {
	b.props.Slots.ExpandIcon = c
	return b
}

// HintSlot sets the hint slot content
// Text that describes how to use the input. Alternatively, you can use the hint attribute.
func (b *ComboboxBuilder) HintSlot(c templ.Component) *ComboboxBuilder {
	b.props.Slots.Hint = c
	return b
}

// Attr adds a custom HTML attribute
func (b *ComboboxBuilder) Attr(name, value string) *ComboboxBuilder {
	if b.props.Attrs == nil {
		b.props.Attrs = templ.Attributes{}
	}
	b.props.Attrs[name] = value
	return b
}

// Attrs merges multiple attributes
func (b *ComboboxBuilder) Attrs(attrs templ.Attributes) *ComboboxBuilder {
	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 *ComboboxBuilder) Props() ComboboxProps {
	return b.props
}

// Build returns the props (alias for Props for semantic clarity)
func (b *ComboboxBuilder) Build() ComboboxProps {
	return b.props
}

// Combobox renders the wa-combobox component
templ Combobox(props ComboboxProps) {
	<wa-combobox
		if props.Name != "" {
			name={ props.Name }
		}
		if props.Value != "" {
			value={ props.Value }
		}
		if props.Size != "" {
			size={ props.Size }
		}
		if props.Placeholder != "" {
			placeholder={ props.Placeholder }
		}
		if props.Multiple {
			multiple
		}
		if props.MaxOptionsVisible != 0 {
			max-options-visible={ templ.Sprintf("%v", props.MaxOptionsVisible) }
		}
		if props.Disabled {
			disabled
		}
		if props.WithClear {
			with-clear
		}
		if props.Open {
			open
		}
		if props.Appearance != "" {
			appearance={ props.Appearance }
		}
		if props.Pill {
			pill
		}
		if props.Label != "" {
			label={ props.Label }
		}
		if props.Placement != "" {
			placement={ props.Placement }
		}
		if props.Hint != "" {
			hint={ props.Hint }
		}
		if props.WithLabel {
			with-label
		}
		if props.WithHint {
			with-hint
		}
		if props.Required {
			required
		}
		if props.Autocomplete != "" {
			autocomplete={ props.Autocomplete }
		}
		if props.AllowCustomValue {
			allow-custom-value
		}
		if props.OnInput != "" {
			x-on:input={ props.OnInput }
		}
		if props.OnChange != "" {
			x-on:change={ props.OnChange }
		}
		if props.OnFocus != "" {
			x-on:focus={ props.OnFocus }
		}
		if props.OnBlur != "" {
			x-on:blur={ props.OnBlur }
		}
		if props.OnClear != "" {
			x-on:wa-clear={ props.OnClear }
		}
		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.OnInvalid != "" {
			x-on:wa-invalid={ props.OnInvalid }
		}
		{ props.Attrs... }
	>
		if props.Slots.Label != nil {
			<div slot="label">
				@props.Slots.Label
			</div>
		}
		if props.Slots.Start != nil {
			<div slot="start">
				@props.Slots.Start
			</div>
		}
		if props.Slots.End != nil {
			<div slot="end">
				@props.Slots.End
			</div>
		}
		if props.Slots.ClearIcon != nil {
			<div slot="clear-icon">
				@props.Slots.ClearIcon
			</div>
		}
		if props.Slots.ExpandIcon != nil {
			<div slot="expand-icon">
				@props.Slots.ExpandIcon
			</div>
		}
		if props.Slots.Hint != nil {
			<div slot="hint">
				@props.Slots.Hint
			</div>
		}
		{ children... }
	</wa-combobox>
}

// ComboboxFunc renders with a builder function for inline configuration
templ ComboboxFunc(fn func(*ComboboxBuilder)) {
	{{ b := NewCombobox(); fn(b) }}
	@Combobox(b.Props()) {
		{ children... }
	}
}