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

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

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

type Position string

const (
	PositionTop    Position = "top"
	PositionRight  Position = "right"
	PositionBottom Position = "bottom"
	PositionLeft   Position = "left"
)

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

type ContentProps struct {
	ID          string
	Class       string
	Attributes  templ.Attributes
	Position    Position
	InitialOpen bool
}

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

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

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

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

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

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

templ Content(props ...ContentProps) {
	{{ var p ContentProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	if p.ID == "" {
		{{ p.ID = utils.RandomID() }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class="fixed inset-0 z-50 bg-background/80 backdrop-blur-xs templui-drawer-backdrop hidden"
		data-drawer-backdrop
		data-component="drawer"
		data-open="false"
		if p.InitialOpen {
			data-initial-open="true"
		}
	></div>
	<div
		id={ p.ID + "-content" }
		class={
			utils.TwMerge(
				"fixed z-50 templui-drawer-content hidden",
				p.Class,
				utils.If(p.Position == PositionRight, "inset-y-0 right-0 w-3/4 md:w-1/2 lg:w-1/3"),
				utils.If(p.Position == PositionLeft, "inset-y-0 left-0 w-3/4 md:w-1/2 lg:w-1/3"),
				utils.If(p.Position == PositionTop, "inset-x-0 top-0 h-auto sm:h-1/2"),
				utils.If(p.Position == PositionBottom, "inset-x-0 bottom-0 h-auto sm:h-1/2"),
			),
		}
		data-drawer-content
		data-drawer-position={ string(p.Position) }
		{ p.Attributes... }
	>
		<div
			class={
				utils.TwMerge(
					"h-full overflow-y-auto bg-background p-6 shadow-lg",
					utils.If(p.Position == PositionRight, "border-l"),
					utils.If(p.Position == PositionLeft, "border-r"),
					utils.If(p.Position == PositionBottom, "border-t"),
					utils.If(p.Position == PositionTop, "border-b"),
				),
			}
			data-drawer-inner
		>
			{ children... }
		</div>
	</div>
}

templ Header(props ...HeaderProps) {
	{{ var p HeaderProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={ utils.TwMerge("flex flex-col space-y-1.5 pb-4", p.Class) }
		{ p.Attributes... }
	>
		{ children... }
	</div>
}

templ Title(props ...TitleProps) {
	{{ var p TitleProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<h2
		if p.ID != "" {
			id={ p.ID }
		}
		class={ utils.TwMerge("text-lg font-semibold leading-none tracking-tight", p.Class) }
		{ p.Attributes... }
	>
		{ children... }
	</h2>
}

templ Description(props ...DescriptionProps) {
	{{ var p DescriptionProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<p
		if p.ID != "" {
			id={ p.ID }
		}
		class={ utils.TwMerge("text-sm text-muted-foreground", p.Class) }
		{ p.Attributes... }
	>
		{ children... }
	</p>
}

templ Footer(props ...FooterProps) {
	{{ var p FooterProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={ utils.TwMerge("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 pt-4", p.Class) }
		{ p.Attributes... }
	>
		{ children... }
	</div>
}

templ Close(props ...CloseProps) {
	{{ var p CloseProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<button
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background",
				"transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
				"disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent",
				"hover:text-accent-foreground h-10 px-4 py-2",
				p.Class,
			),
		}
		if p.For != "" {
			data-drawer-close={ p.For }
		} else {
			data-drawer-close
		}
		{ p.Attributes... }
	>
		{ children... }
	</button>
}

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