textarea.templ

package popui

import (
	"fmt"
	"github.com/invopop/popui.go/classes"
	"github.com/invopop/popui.go/props"
	"github.com/invopop/popui.go/tailwind"
)

// Textarea provides a multi-line text input element.
//
// If the Label property is provided, a simple label will be rendered above the textarea.
templ Textarea(p ...props.Textarea) {
	{{ prp := props.First(p) }}
	<div class="flex flex-col gap-2 w-full">
		if prp.Label != "" {
			@Label(props.Label{ID: prp.ID}) {
				{ prp.Label }
			}
		}
		<textarea
			id={ prp.ID }
			class={ tailwind.Merge(
					classes.FormField(),
					classes.FormFieldState(!prp.Error.Empty()),
					classes.If(prp.Monospace, "font-mono"),
					prp.Class,
				) }
			rows={ prp.GetRows() }
			if prp.Disabled {
				disabled
			}
			if prp.Autofocus {
				autofocus
			}
			if prp.Readonly {
				readonly
			}
			if prp.Required {
				required
			}
			if prp.Name != "" {
				name={ prp.Name }
			}
			if prp.Placeholder != "" {
				placeholder={ prp.Placeholder }
			}
			{ prp.Attributes... }
		>
			if prp.Value != "" {
				{ prp.Value }
			}
		</textarea>
		if !prp.Error.Empty() {
			@InputError(prp.Error)
		}
	</div>
}

// Contenteditable provides a div with contenteditable set to true.
// It behaves as a Textarea component.
//
// If the Label property is provided, a simple label will be rendered above the contenteditable div.
templ Contenteditable(p ...props.Textarea) {
	{{ prp := props.First(p) }}
	<div class="flex flex-col gap-2 w-full">
		if prp.Label != "" {
			@Label(props.Label{ID: prp.ID}) {
				{ prp.Label }
			}
		}
		<div
			tabindex="0"
			role="textarea"
			contenteditable="true"
			id={ prp.ID }
			style={ "min-height: " + fmt.Sprintf("%d", prp.Rows*34) + "px" }
			class={ tailwind.Merge(
					classes.FormField(),
					"min-h-[80px]",
					classes.FormFieldState(!prp.Error.Empty()),
					prp.Class,
				) }
			{ prp.Attributes... }
		>
			if prp.Value != "" {
				@templ.Raw(prp.Value)
			}
		</div>
		if !prp.Error.Empty() {
			@InputError(prp.Error)
		}
	</div>
}