nebula/pkg/wa/details.templ

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

package wa

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

// Details show a brief summary and expand to show additional content.
//
// Web Awesome component: <wa-details>

// DetailsProps holds all properties for the wa-details component
type DetailsProps struct {
	// Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
	Open bool `attr:"open"`
	// The summary to show in the header. If you need to display HTML, use the summary slot instead.
	Summary string `attr:"summary"`
	// Groups related details elements. When one opens, others with the same name will close.
	Name string `attr:"name"`
	// Disables the details so it can't be toggled.
	Disabled bool `attr:"disabled"`
	// The element's visual appearance.
	// Valid values: "filled", "outlined", "filled-outlined", "plain"
	Appearance string `attr:"appearance"`
	// The location of the expand/collapse icon.
	// Valid values: "start", "end"
	IconPlacement string `attr:"icon-placement"`

	// Events
	// Emitted when the details opens.
	OnShow string `attr:"x-on:wa-show"`
	// Emitted after the details opens and all animations are complete.
	OnAfterShow string `attr:"x-on:wa-after-show"`
	// Emitted when the details closes.
	OnHide string `attr:"x-on:wa-hide"`
	// Emitted after the details closes and all animations are complete.
	OnAfterHide string `attr:"x-on:wa-after-hide"`

	// Slots contains named slot content
	Slots DetailsSlots

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

// DetailsSlots holds named slot content for the component
type DetailsSlots struct {
	// The details' summary. Alternatively, you can use the summary attribute.
	Summary templ.Component
	// Optional expand icon to use instead of the default. Works best with <wa-icon>.
	ExpandIcon templ.Component
	// Optional collapse icon to use instead of the default. Works best with <wa-icon>.
	CollapseIcon templ.Component
}

// DetailsBuilder provides a fluent API for constructing DetailsProps
type DetailsBuilder struct {
	props DetailsProps
}

// NewDetails creates a new builder for wa-details
func NewDetails() *DetailsBuilder {
	return &DetailsBuilder{}
}

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

// Summary sets the summary attribute
// The summary to show in the header. If you need to display HTML, use the summary slot instead.
func (b *DetailsBuilder) Summary(v string) *DetailsBuilder {
	b.props.Summary = v
	return b
}

// Name sets the name attribute
// Groups related details elements. When one opens, others with the same name will close.
func (b *DetailsBuilder) Name(v string) *DetailsBuilder {
	b.props.Name = v
	return b
}

// Disabled sets the disabled attribute
// Disables the details so it can't be toggled.
func (b *DetailsBuilder) Disabled(v bool) *DetailsBuilder {
	b.props.Disabled = v
	return b
}

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

// IconPlacement sets the icon-placement attribute
// The location of the expand/collapse icon.
func (b *DetailsBuilder) IconPlacement(v string) *DetailsBuilder {
	b.props.IconPlacement = v
	return b
}

// OnShow sets the handler for wa-show event
// Emitted when the details opens.
func (b *DetailsBuilder) OnShow(handler string) *DetailsBuilder {
	b.props.OnShow = handler
	return b
}

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

// OnHide sets the handler for wa-hide event
// Emitted when the details closes.
func (b *DetailsBuilder) OnHide(handler string) *DetailsBuilder {
	b.props.OnHide = handler
	return b
}

// OnAfterHide sets the handler for wa-after-hide event
// Emitted after the details closes and all animations are complete.
func (b *DetailsBuilder) OnAfterHide(handler string) *DetailsBuilder {
	b.props.OnAfterHide = handler
	return b
}

// SummarySlot sets the summary slot content
// The details' summary. Alternatively, you can use the summary attribute.
func (b *DetailsBuilder) SummarySlot(c templ.Component) *DetailsBuilder {
	b.props.Slots.Summary = c
	return b
}

// ExpandIconSlot sets the expand-icon slot content
// Optional expand icon to use instead of the default. Works best with <wa-icon>.
func (b *DetailsBuilder) ExpandIconSlot(c templ.Component) *DetailsBuilder {
	b.props.Slots.ExpandIcon = c
	return b
}

// CollapseIconSlot sets the collapse-icon slot content
// Optional collapse icon to use instead of the default. Works best with <wa-icon>.
func (b *DetailsBuilder) CollapseIconSlot(c templ.Component) *DetailsBuilder {
	b.props.Slots.CollapseIcon = c
	return b
}

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

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

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

// Details renders the wa-details component
templ Details(props DetailsProps) {
	<wa-details
		if props.Open {
			open
		}
		if props.Summary != "" {
			summary={ props.Summary }
		}
		if props.Name != "" {
			name={ props.Name }
		}
		if props.Disabled {
			disabled
		}
		if props.Appearance != "" {
			appearance={ props.Appearance }
		}
		if props.IconPlacement != "" {
			icon-placement={ props.IconPlacement }
		}
		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 }
		}
		{ props.Attrs... }
	>
		if props.Slots.Summary != nil {
			<div slot="summary">
				@props.Slots.Summary
			</div>
		}
		if props.Slots.ExpandIcon != nil {
			<div slot="expand-icon">
				@props.Slots.ExpandIcon
			</div>
		}
		if props.Slots.CollapseIcon != nil {
			<div slot="collapse-icon">
				@props.Slots.CollapseIcon
			</div>
		}
		{ children... }
	</wa-details>
}

// DetailsFunc renders with a builder function for inline configuration
templ DetailsFunc(fn func(*DetailsBuilder)) {
	{{ b := NewDetails(); fn(b) }}
	@Details(b.Props()) {
		{ children... }
	}
}