115 lines
3 KiB
Text
115 lines
3 KiB
Text
// templui component textarea - version: main installed by templui v0.71.0
|
|
package textarea
|
|
|
|
import (
|
|
"git.jmbit.de/jmb/scanfile/server/web/templui/utils"
|
|
"strconv"
|
|
)
|
|
|
|
type Props struct {
|
|
ID string
|
|
Class string
|
|
Attributes templ.Attributes
|
|
Name string
|
|
Value string
|
|
Placeholder string
|
|
Rows int
|
|
AutoResize bool
|
|
Disabled bool
|
|
Required bool
|
|
}
|
|
|
|
templ Textarea(props ...Props) {
|
|
@Script()
|
|
{{ var p Props }}
|
|
if len(props) > 0 {
|
|
{{ p = props[0] }}
|
|
}
|
|
if p.ID == "" {
|
|
{{ p.ID = utils.RandomID() }}
|
|
}
|
|
<textarea
|
|
id={ p.ID }
|
|
data-textarea
|
|
if p.Name != "" {
|
|
name={ p.Name }
|
|
}
|
|
if p.Placeholder != "" {
|
|
placeholder={ p.Placeholder }
|
|
}
|
|
if p.Rows > 0 {
|
|
rows={ strconv.Itoa(p.Rows) }
|
|
}
|
|
disabled?={ p.Disabled }
|
|
required?={ p.Required }
|
|
if p.AutoResize {
|
|
data-auto-resize="true"
|
|
}
|
|
class={
|
|
utils.TwMerge(
|
|
"flex w-full px-3 py-2",
|
|
"min-h-[80px]", // Default min-height (adjust if needed)
|
|
"rounded-md border border-input bg-background text-sm",
|
|
"ring-offset-background",
|
|
"placeholder:text-muted-foreground",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
// Add overflow-hidden only if auto-resizing to prevent scrollbar flicker
|
|
utils.If(p.AutoResize, "overflow-hidden resize-none"),
|
|
p.Class,
|
|
),
|
|
}
|
|
{ p.Attributes... }
|
|
>{ p.Value }</textarea>
|
|
}
|
|
|
|
var handle = templ.NewOnceHandle()
|
|
|
|
templ Script() {
|
|
@handle.Once() {
|
|
<script defer nonce={ templ.GetNonce(ctx) }>
|
|
(function() { // IIFE
|
|
function initTextarea(textarea) {
|
|
if (textarea.hasAttribute('data-initialized')) return;
|
|
|
|
textarea.setAttribute('data-initialized', 'true');
|
|
|
|
const autoResize = textarea.dataset.autoResize === 'true';
|
|
if (!autoResize) return;
|
|
|
|
const computedStyle = window.getComputedStyle(textarea);
|
|
const initialMinHeight = computedStyle.minHeight;
|
|
|
|
function resize() {
|
|
textarea.style.height = initialMinHeight;
|
|
textarea.style.height = `${textarea.scrollHeight}px`;
|
|
}
|
|
|
|
resize();
|
|
textarea.addEventListener('input', resize);
|
|
}
|
|
|
|
function initAllComponents(root = document) {
|
|
if (root instanceof Element && root.matches('textarea[data-textarea]')) {
|
|
initTextarea(root);
|
|
}
|
|
for (const textarea of root.querySelectorAll('textarea[data-textarea]:not([data-initialized])')) {
|
|
initTextarea(textarea);
|
|
}
|
|
}
|
|
|
|
const handleHtmxSwap = (event) => {
|
|
const target = event.detail.target || event.detail.elt;
|
|
if (target instanceof Element) {
|
|
requestAnimationFrame(() => initAllComponents(target));
|
|
}
|
|
};
|
|
|
|
initAllComponents();
|
|
document.addEventListener('DOMContentLoaded', () => initAllComponents());
|
|
document.body.addEventListener('htmx:afterSwap', handleHtmxSwap);
|
|
document.body.addEventListener('htmx:oobAfterSwap', handleHtmxSwap);
|
|
})(); // End of IIFE
|
|
</script>
|
|
}
|
|
}
|