nebula/pkg/wa/tab-group.templ

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

package wa

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

// Tab groups organize content into a container that shows one section at a time.
//
// Web Awesome component: <wa-tab-group>

// TabGroupProps holds all properties for the wa-tab-group component
type TabGroupProps struct {
	// Sets the active tab.
	Active string `attr:"active"`
	// The placement of the tabs.
	// Valid values: "top", "bottom", "start", "end"
	Placement string `attr:"placement"`
	// When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
	// Valid values: "auto", "manual"
	Activation string `attr:"activation"`
	// Disables the scroll arrows that appear when tabs overflow.
	WithoutScrollControls bool `attr:"without-scroll-controls"`

	// Events
	// Emitted when a tab is shown.
	OnTabShow string `attr:"x-on:wa-tab-show"`
	// Emitted when a tab is hidden.
	OnTabHide string `attr:"x-on:wa-tab-hide"`

	// Slots contains named slot content
	Slots TabGroupSlots

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

// TabGroupSlots holds named slot content for the component
type TabGroupSlots struct {
	// Used for grouping tabs in the tab group. Must be <wa-tab> elements. Note that <wa-tab> will set this slot on itself a...
	Nav templ.Component
}

// TabGroupBuilder provides a fluent API for constructing TabGroupProps
type TabGroupBuilder struct {
	props TabGroupProps
}

// NewTabGroup creates a new builder for wa-tab-group
func NewTabGroup() *TabGroupBuilder {
	return &TabGroupBuilder{}
}

// Active sets the active attribute
// Sets the active tab.
func (b *TabGroupBuilder) Active(v string) *TabGroupBuilder {
	b.props.Active = v
	return b
}

// Placement sets the placement attribute
// The placement of the tabs.
func (b *TabGroupBuilder) Placement(v string) *TabGroupBuilder {
	b.props.Placement = v
	return b
}

// Activation sets the activation attribute
// When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
func (b *TabGroupBuilder) Activation(v string) *TabGroupBuilder {
	b.props.Activation = v
	return b
}

// WithoutScrollControls sets the without-scroll-controls attribute
// Disables the scroll arrows that appear when tabs overflow.
func (b *TabGroupBuilder) WithoutScrollControls(v bool) *TabGroupBuilder {
	b.props.WithoutScrollControls = v
	return b
}

// OnTabShow sets the handler for wa-tab-show event
// Emitted when a tab is shown.
func (b *TabGroupBuilder) OnTabShow(handler string) *TabGroupBuilder {
	b.props.OnTabShow = handler
	return b
}

// OnTabHide sets the handler for wa-tab-hide event
// Emitted when a tab is hidden.
func (b *TabGroupBuilder) OnTabHide(handler string) *TabGroupBuilder {
	b.props.OnTabHide = handler
	return b
}

// NavSlot sets the nav slot content
// Used for grouping tabs in the tab group. Must be <wa-tab> elements. Note that <wa-tab> will set this slot on itself a...
func (b *TabGroupBuilder) NavSlot(c templ.Component) *TabGroupBuilder {
	b.props.Slots.Nav = c
	return b
}

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

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

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

// TabGroup renders the wa-tab-group component
templ TabGroup(props TabGroupProps) {
	<wa-tab-group
		if props.Active != "" {
			active={ props.Active }
		}
		if props.Placement != "" {
			placement={ props.Placement }
		}
		if props.Activation != "" {
			activation={ props.Activation }
		}
		if props.WithoutScrollControls {
			without-scroll-controls
		}
		if props.OnTabShow != "" {
			x-on:wa-tab-show={ props.OnTabShow }
		}
		if props.OnTabHide != "" {
			x-on:wa-tab-hide={ props.OnTabHide }
		}
		{ props.Attrs... }
	>
		if props.Slots.Nav != nil {
			<div slot="nav">
				@props.Slots.Nav
			</div>
		}
		{ children... }
	</wa-tab-group>
}

// TabGroupFunc renders with a builder function for inline configuration
templ TabGroupFunc(fn func(*TabGroupBuilder)) {
	{{ b := NewTabGroup(); fn(b) }}
	@TabGroup(b.Props()) {
		{ children... }
	}
}