135 lines
3.9 KiB
Text
135 lines
3.9 KiB
Text
// templui component popover - version: v1.2.0 installed by templui v1.2.0
|
|
// 📚 Documentation: https://templui.io/docs/components/popover
|
|
package popover
|
|
|
|
import (
|
|
"git.juancwu.dev/juancwu/budgit/internal/utils"
|
|
"strconv"
|
|
)
|
|
|
|
type Placement string
|
|
|
|
const (
|
|
PlacementTop Placement = "top"
|
|
PlacementTopStart Placement = "top-start"
|
|
PlacementTopEnd Placement = "top-end"
|
|
PlacementRight Placement = "right"
|
|
PlacementRightStart Placement = "right-start"
|
|
PlacementRightEnd Placement = "right-end"
|
|
PlacementBottom Placement = "bottom"
|
|
PlacementBottomStart Placement = "bottom-start"
|
|
PlacementBottomEnd Placement = "bottom-end"
|
|
PlacementLeft Placement = "left"
|
|
PlacementLeftStart Placement = "left-start"
|
|
PlacementLeftEnd Placement = "left-end"
|
|
)
|
|
|
|
type TriggerType string
|
|
|
|
const (
|
|
TriggerTypeHover TriggerType = "hover"
|
|
TriggerTypeClick TriggerType = "click"
|
|
)
|
|
|
|
type TriggerProps struct {
|
|
ID string
|
|
Class string
|
|
Attributes templ.Attributes
|
|
For string
|
|
TriggerType TriggerType
|
|
}
|
|
|
|
type ContentProps struct {
|
|
ID string
|
|
Class string
|
|
Attributes templ.Attributes
|
|
Placement Placement
|
|
Offset int
|
|
DisableClickAway bool
|
|
DisableESC bool
|
|
ShowArrow bool
|
|
HoverDelay int
|
|
HoverOutDelay int
|
|
MatchWidth bool
|
|
Exclusive bool
|
|
}
|
|
|
|
templ Trigger(props ...TriggerProps) {
|
|
{{ var p TriggerProps }}
|
|
if len(props) > 0 {
|
|
{{ p = props[0] }}
|
|
}
|
|
if p.TriggerType == "" {
|
|
{{ p.TriggerType = TriggerTypeClick }}
|
|
}
|
|
<span
|
|
if p.ID != "" {
|
|
id={ p.ID }
|
|
}
|
|
class={ utils.TwMerge("group cursor-pointer", p.Class) }
|
|
if p.For != "" {
|
|
data-tui-popover-trigger={ p.For }
|
|
}
|
|
data-tui-popover-open="false"
|
|
data-tui-popover-type={ string(p.TriggerType) }
|
|
{ p.Attributes... }
|
|
>
|
|
{ children... }
|
|
</span>
|
|
}
|
|
|
|
templ Content(props ...ContentProps) {
|
|
{{ var p ContentProps }}
|
|
if len(props) > 0 {
|
|
{{ p = props[0] }}
|
|
}
|
|
if p.Placement == "" {
|
|
{{ p.Placement = PlacementBottom }}
|
|
}
|
|
if p.Offset == 0 {
|
|
if p.ShowArrow {
|
|
{{ p.Offset = 8 }}
|
|
} else {
|
|
{{ p.Offset = 4 }}
|
|
}
|
|
}
|
|
<div
|
|
id={ p.ID }
|
|
data-tui-popover-id={ p.ID }
|
|
data-tui-popover-open="false"
|
|
data-tui-popover-placement={ string(p.Placement) }
|
|
data-tui-popover-offset={ strconv.Itoa(p.Offset) }
|
|
data-tui-popover-disable-clickaway={ strconv.FormatBool(p.DisableClickAway) }
|
|
data-tui-popover-disable-esc={ strconv.FormatBool(p.DisableESC) }
|
|
data-tui-popover-show-arrow={ strconv.FormatBool(p.ShowArrow) }
|
|
data-tui-popover-hover-delay={ strconv.Itoa(p.HoverDelay) }
|
|
data-tui-popover-hover-out-delay={ strconv.Itoa(p.HoverOutDelay) }
|
|
data-tui-popover-exclusive={ strconv.FormatBool(p.Exclusive) }
|
|
if p.MatchWidth {
|
|
data-tui-popover-match-width="true"
|
|
}
|
|
class={ utils.TwMerge(
|
|
"bg-popover rounded-lg border text-popover-foreground text-sm shadow-lg pointer-events-auto absolute z-[9999] hidden top-0 left-0",
|
|
p.Class,
|
|
) }
|
|
{ p.Attributes... }
|
|
>
|
|
<div class="w-full overflow-hidden">
|
|
{ children... }
|
|
</div>
|
|
if p.ShowArrow {
|
|
<div
|
|
data-tui-popover-arrow
|
|
class="absolute h-2.5 w-2.5 rotate-45 bg-popover border border-border
|
|
data-[tui-popover-placement^=top]:-bottom-[5px] data-[tui-popover-placement^=top]:border-t-transparent data-[tui-popover-placement^=top]:border-l-transparent
|
|
data-[tui-popover-placement^=bottom]:-top-[5px] data-[tui-popover-placement^=bottom]:border-b-transparent data-[tui-popover-placement^=bottom]:border-r-transparent
|
|
data-[tui-popover-placement^=left]:-right-[5px] data-[tui-popover-placement^=left]:border-l-transparent data-[tui-popover-placement^=left]:border-b-transparent
|
|
data-[tui-popover-placement^=right]:-left-[5px] data-[tui-popover-placement^=right]:border-r-transparent data-[tui-popover-placement^=right]:border-t-transparent"
|
|
></div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
templ Script() {
|
|
<script defer nonce={ templ.GetNonce(ctx) } src={ utils.ScriptURL("/assets/js/popover.min.js") }></script>
|
|
}
|