scanfile/server/web/templui/components/modal/modal.templ

// templui component modal - version: v0.84.0 installed by templui v0.84.0
package modal

import "git.jmbit.de/jmb/scanfile/server/web/templui/utils"

type Props struct {
	ID               string
	Class            string
	Attributes       templ.Attributes
	DisableClickAway bool
	DisableESC       bool
	InitialOpen      bool
}

type TriggerProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
	Disabled   bool
	For        string // ID of the modal to trigger
}

type CloseProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
	For        string // ID of the modal to close (optional, defaults to closest modal)
}

type HeaderProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type BodyProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type FooterProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

templ Modal(props ...Props) {
	{{ var p Props }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	if p.ID == "" {
		{{ p.ID = "modal-" + utils.RandomID() }}
	}
	<div
		id={ p.ID }
		data-modal
		data-open="false"
		class="modal-container fixed inset-0 z-50 items-center justify-center overflow-y-auto opacity-0 transition-opacity duration-300 ease-out hidden"
		aria-labelledby={ p.ID + "-title" }
		role="dialog"
		aria-modal="true"
		if p.DisableClickAway {
			data-disable-click-away="true"
		}
		if p.DisableESC {
			data-disable-esc="true"
		}
		if p.InitialOpen {
			data-initial-open="true"
		}
		{ p.Attributes... }
	>
		<div data-modal-backdrop class="fixed inset-0 bg-background/70 bg-opacity-50" aria-hidden="true"></div>
		<div
			id={ p.ID + "-content" }
			data-modal-content
			class={
				utils.TwMerge(
					"modal-content relative bg-background rounded-lg border text-left overflow-hidden shadow-xl transform transition-all sm:my-8 w-full scale-95 opacity-0", // Base classes + transition start
					"duration-300 ease-out", // Enter duration
					p.Class,
				),
			}
		>
			{ children... }
		</div>
	</div>
}

templ Trigger(props ...TriggerProps) {
	{{ var p TriggerProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<span
		if p.ID != "" {
			id={ p.ID }
		}
		if p.For != "" {
			data-modal-trigger={ p.For }
		}
		data-open="false"
		class={
			utils.TwMerge(
				"group",
				utils.IfElse(p.Disabled, "cursor-not-allowed opacity-50", "cursor-pointer"),
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</span>
}

templ Close(props ...CloseProps) {
	{{ var p CloseProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<span
		if p.ID != "" {
			id={ p.ID }
		}
		if p.For != "" {
			data-modal-close={ p.For }
		} else {
			data-modal-close
		}
		class={ utils.TwMerge("cursor-pointer", p.Class) }
		{ p.Attributes... }
	>
		{ children... }
	</span>
}

templ Header(props ...HeaderProps) {
	{{ var p HeaderProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={ utils.TwMerge("px-4 pt-5 pb-4 sm:p-6 sm:pb-4 text-lg leading-6 font-medium text-foreground", p.Class) }
		{ p.Attributes... }
	>
		<h3 class="text-lg leading-6 font-medium text-foreground" id={ p.ID + "-title" }>
			// Ensure title ID matches aria-labelledby
			{ children... }
		</h3>
	</div>
}

templ Body(props ...BodyProps) {
	{{ var p BodyProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={ utils.TwMerge("px-4 pt-5 pb-4 sm:p-6 sm:pb-4", p.Class) }
		{ p.Attributes... }
	>
		{ children... }
	</div>
}

templ Footer(props ...FooterProps) {
	{{ var p FooterProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={ utils.TwMerge("px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse", p.Class) }
		{ p.Attributes... }
	>
		{ children... }
	</div>
}

templ Script() {
	<script defer src="/assets/js/modal.min.js"></script>
}