nebula/pkg/wa/popup.templ

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

package wa

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

// Popup is a utility that lets you declaratively anchor "popup" containers to another element.
//
// Web Awesome component: <wa-popup>

// PopupProps holds all properties for the wa-popup component
type PopupProps struct {
	// The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
	Anchor string `attr:"anchor"`
	// Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn
	Active bool `attr:"active"`
	// The preferred placement of the popup. Note that the actual placement will vary as configured to keep the
	// Valid values: "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"
	Placement string `attr:"placement"`
	// The bounding box to use for flipping, shifting, and auto-sizing.
	// Valid values: "viewport", "scroll"
	Boundary string `attr:"boundary"`
	// The distance in pixels from which to offset the panel away from its anchor.
	Distance float64 `attr:"distance"`
	// The distance in pixels from which to offset the panel along its anchor.
	Skidding float64 `attr:"skidding"`
	// Attaches an arrow to the popup. The arrow's size and color can be customized using the --arrow-size and
	Arrow bool `attr:"arrow"`
	// The placement of the arrow. The default is anchor, which will align the arrow as close to the center of the
	// Valid values: "start", "end", "center", "anchor"
	ArrowPlacement string `attr:"arrow-placement"`
	// The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,
	ArrowPadding float64 `attr:"arrow-padding"`
	// When set, placement of the popup will flip to the opposite site to keep it in view. You can use
	Flip bool `attr:"flip"`
	// If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a
	FlipFallbackPlacements string `attr:"flip-fallback-placements"`
	// When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether
	// Valid values: "best-fit", "initial"
	FlipFallbackStrategy string `attr:"flip-fallback-strategy"`
	// The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By
	FlipBoundary string `attr:"flipBoundary"`
	// The amount of padding, in pixels, to exceed before the flip behavior will occur.
	FlipPadding float64 `attr:"flip-padding"`
	// Moves the popup along the axis to keep it in view when clipped.
	Shift bool `attr:"shift"`
	// The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By
	ShiftBoundary string `attr:"shiftBoundary"`
	// The amount of padding, in pixels, to exceed before the shift behavior will occur.
	ShiftPadding float64 `attr:"shift-padding"`
	// When set, this will cause the popup to automatically resize itself to prevent it from overflowing.
	// Valid values: "horizontal", "vertical", "both"
	AutoSize string `attr:"auto-size"`
	// Syncs the popup's width or height to that of the anchor element.
	// Valid values: "width", "height", "both"
	Sync string `attr:"sync"`
	// The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By
	AutoSizeBoundary string `attr:"autoSizeBoundary"`
	// The amount of padding, in pixels, to exceed before the auto-size behavior will occur.
	AutoSizePadding float64 `attr:"auto-size-padding"`
	// When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the
	HoverBridge bool `attr:"hover-bridge"`

	// Events
	// Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your list...
	OnReposition string `attr:"x-on:wa-reposition"`

	// Slots contains named slot content
	Slots PopupSlots

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

// PopupSlots holds named slot content for the component
type PopupSlots struct {
	// The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the anchor attribute...
	Anchor templ.Component
}

// PopupBuilder provides a fluent API for constructing PopupProps
type PopupBuilder struct {
	props PopupProps
}

// NewPopup creates a new builder for wa-popup
func NewPopup() *PopupBuilder {
	return &PopupBuilder{}
}

// Anchor sets the anchor attribute
// The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
func (b *PopupBuilder) Anchor(v string) *PopupBuilder {
	b.props.Anchor = v
	return b
}

// Active sets the active attribute
// Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn
func (b *PopupBuilder) Active(v bool) *PopupBuilder {
	b.props.Active = v
	return b
}

// Placement sets the placement attribute
// The preferred placement of the popup. Note that the actual placement will vary as configured to keep the
func (b *PopupBuilder) Placement(v string) *PopupBuilder {
	b.props.Placement = v
	return b
}

// Boundary sets the boundary attribute
// The bounding box to use for flipping, shifting, and auto-sizing.
func (b *PopupBuilder) Boundary(v string) *PopupBuilder {
	b.props.Boundary = v
	return b
}

// Distance sets the distance attribute
// The distance in pixels from which to offset the panel away from its anchor.
func (b *PopupBuilder) Distance(v float64) *PopupBuilder {
	b.props.Distance = v
	return b
}

// Skidding sets the skidding attribute
// The distance in pixels from which to offset the panel along its anchor.
func (b *PopupBuilder) Skidding(v float64) *PopupBuilder {
	b.props.Skidding = v
	return b
}

// Arrow sets the arrow attribute
// Attaches an arrow to the popup. The arrow's size and color can be customized using the --arrow-size and
func (b *PopupBuilder) Arrow(v bool) *PopupBuilder {
	b.props.Arrow = v
	return b
}

// ArrowPlacement sets the arrow-placement attribute
// The placement of the arrow. The default is anchor, which will align the arrow as close to the center of the
func (b *PopupBuilder) ArrowPlacement(v string) *PopupBuilder {
	b.props.ArrowPlacement = v
	return b
}

// ArrowPadding sets the arrow-padding attribute
// The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,
func (b *PopupBuilder) ArrowPadding(v float64) *PopupBuilder {
	b.props.ArrowPadding = v
	return b
}

// Flip sets the flip attribute
// When set, placement of the popup will flip to the opposite site to keep it in view. You can use
func (b *PopupBuilder) Flip(v bool) *PopupBuilder {
	b.props.Flip = v
	return b
}

// FlipFallbackPlacements sets the flip-fallback-placements attribute
// If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a
func (b *PopupBuilder) FlipFallbackPlacements(v string) *PopupBuilder {
	b.props.FlipFallbackPlacements = v
	return b
}

// FlipFallbackStrategy sets the flip-fallback-strategy attribute
// When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether
func (b *PopupBuilder) FlipFallbackStrategy(v string) *PopupBuilder {
	b.props.FlipFallbackStrategy = v
	return b
}

// FlipBoundary sets the flipBoundary attribute
// The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By
func (b *PopupBuilder) FlipBoundary(v string) *PopupBuilder {
	b.props.FlipBoundary = v
	return b
}

// FlipPadding sets the flip-padding attribute
// The amount of padding, in pixels, to exceed before the flip behavior will occur.
func (b *PopupBuilder) FlipPadding(v float64) *PopupBuilder {
	b.props.FlipPadding = v
	return b
}

// Shift sets the shift attribute
// Moves the popup along the axis to keep it in view when clipped.
func (b *PopupBuilder) Shift(v bool) *PopupBuilder {
	b.props.Shift = v
	return b
}

// ShiftBoundary sets the shiftBoundary attribute
// The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By
func (b *PopupBuilder) ShiftBoundary(v string) *PopupBuilder {
	b.props.ShiftBoundary = v
	return b
}

// ShiftPadding sets the shift-padding attribute
// The amount of padding, in pixels, to exceed before the shift behavior will occur.
func (b *PopupBuilder) ShiftPadding(v float64) *PopupBuilder {
	b.props.ShiftPadding = v
	return b
}

// AutoSize sets the auto-size attribute
// When set, this will cause the popup to automatically resize itself to prevent it from overflowing.
func (b *PopupBuilder) AutoSize(v string) *PopupBuilder {
	b.props.AutoSize = v
	return b
}

// Sync sets the sync attribute
// Syncs the popup's width or height to that of the anchor element.
func (b *PopupBuilder) Sync(v string) *PopupBuilder {
	b.props.Sync = v
	return b
}

// AutoSizeBoundary sets the autoSizeBoundary attribute
// The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By
func (b *PopupBuilder) AutoSizeBoundary(v string) *PopupBuilder {
	b.props.AutoSizeBoundary = v
	return b
}

// AutoSizePadding sets the auto-size-padding attribute
// The amount of padding, in pixels, to exceed before the auto-size behavior will occur.
func (b *PopupBuilder) AutoSizePadding(v float64) *PopupBuilder {
	b.props.AutoSizePadding = v
	return b
}

// HoverBridge sets the hover-bridge attribute
// When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the
func (b *PopupBuilder) HoverBridge(v bool) *PopupBuilder {
	b.props.HoverBridge = v
	return b
}

// OnReposition sets the handler for wa-reposition event
// Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your list...
func (b *PopupBuilder) OnReposition(handler string) *PopupBuilder {
	b.props.OnReposition = handler
	return b
}

// AnchorSlot sets the anchor slot content
// The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the anchor attribute...
func (b *PopupBuilder) AnchorSlot(c templ.Component) *PopupBuilder {
	b.props.Slots.Anchor = c
	return b
}

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

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

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

// Popup renders the wa-popup component
templ Popup(props PopupProps) {
	<wa-popup
		if props.Anchor != "" {
			anchor={ props.Anchor }
		}
		if props.Active {
			active
		}
		if props.Placement != "" {
			placement={ props.Placement }
		}
		if props.Boundary != "" {
			boundary={ props.Boundary }
		}
		if props.Distance != 0 {
			distance={ templ.Sprintf("%v", props.Distance) }
		}
		if props.Skidding != 0 {
			skidding={ templ.Sprintf("%v", props.Skidding) }
		}
		if props.Arrow {
			arrow
		}
		if props.ArrowPlacement != "" {
			arrow-placement={ props.ArrowPlacement }
		}
		if props.ArrowPadding != 0 {
			arrow-padding={ templ.Sprintf("%v", props.ArrowPadding) }
		}
		if props.Flip {
			flip
		}
		if props.FlipFallbackPlacements != "" {
			flip-fallback-placements={ props.FlipFallbackPlacements }
		}
		if props.FlipFallbackStrategy != "" {
			flip-fallback-strategy={ props.FlipFallbackStrategy }
		}
		if props.FlipBoundary != "" {
			flipBoundary={ props.FlipBoundary }
		}
		if props.FlipPadding != 0 {
			flip-padding={ templ.Sprintf("%v", props.FlipPadding) }
		}
		if props.Shift {
			shift
		}
		if props.ShiftBoundary != "" {
			shiftBoundary={ props.ShiftBoundary }
		}
		if props.ShiftPadding != 0 {
			shift-padding={ templ.Sprintf("%v", props.ShiftPadding) }
		}
		if props.AutoSize != "" {
			auto-size={ props.AutoSize }
		}
		if props.Sync != "" {
			sync={ props.Sync }
		}
		if props.AutoSizeBoundary != "" {
			autoSizeBoundary={ props.AutoSizeBoundary }
		}
		if props.AutoSizePadding != 0 {
			auto-size-padding={ templ.Sprintf("%v", props.AutoSizePadding) }
		}
		if props.HoverBridge {
			hover-bridge
		}
		if props.OnReposition != "" {
			x-on:wa-reposition={ props.OnReposition }
		}
		{ props.Attrs... }
	>
		if props.Slots.Anchor != nil {
			<div slot="anchor">
				@props.Slots.Anchor
			</div>
		}
		{ children... }
	</wa-popup>
}

// PopupFunc renders with a builder function for inline configuration
templ PopupFunc(fn func(*PopupBuilder)) {
	{{ b := NewPopup(); fn(b) }}
	@Popup(b.Props()) {
		{ children... }
	}
}