juancwu/budgit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: update templ and templui

Browse source
This commit is contained in:
juancwu 2026-04-12 16:07:06 +00:00
commit 61eaa268ab
89 changed files with 25776 additions and 8231 deletions
Download patch file Download diff file Expand all files Collapse all files

154
internal/ui/components/datepicker/datepicker.templ
View file

@ -1,4 +1,4 @@
// templui component datepicker - version: v1.2.0 installed by templui v1.2.0
// templui component datepicker - version: v1.9.5 installed by templui v1.9.5
// 📚 Documentation: https://templui.io/docs/components/date-picker
package datepicker
@ -47,8 +47,6 @@ type Props struct {
Placeholder string
Disabled bool
HasError bool
Required bool
Clearable bool
}
templ DatePicker(props ...Props) {
@ -73,99 +71,79 @@ templ DatePicker(props ...Props) {
p.Format = FormatLOCALE_MEDIUM
}
var contentID = p.ID + "-content"
var valuePtr *time.Time
var initialSelectedISO string
if !p.Value.IsZero() {
valuePtr = &p.Value
initialSelectedISO = p.Value.Format("2006-01-02")
}
var required = "false"
if p.Required {
required = "true"
}
}}
<div class="relative inline-block w-full">
<input
type="hidden"
name={ p.Name }
value={ initialSelectedISO }
if p.Form != "" {
form={ p.Form }
}
id={ p.ID + "-hidden" }
data-tui-datepicker-hidden-input
/>
@popover.Trigger(popover.TriggerProps{For: contentID}) {
@button.Button(button.Props{
ID: p.ID,
Variant: button.VariantOutline,
Class: utils.TwMerge(
// Base styles matching input
"w-full h-9 px-3 py-1 text-base md:text-sm",
"flex items-center justify-between",
"rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] outline-none",
// Dark mode background
"dark:bg-input/30",
// Selection styles
"selection:bg-primary selection:text-primary-foreground",
// Focus styles
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
// Error/Invalid styles
"aria-invalid:ring-destructive/20 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40",
utils.If(p.HasError, "border-destructive ring-destructive/20 dark:ring-destructive/40"),
p.Class,
),
Disabled: p.Disabled,
Attributes: utils.MergeAttributes(p.Attributes, templ.Attributes{
"data-tui-datepicker": "true",
"data-tui-datepicker-display-format": string(p.Format),
"data-tui-datepicker-locale-tag": string(p.LocaleTag),
"data-tui-datepicker-placeholder": p.Placeholder,
"data-tui-datepicker-required": required,
"aria-invalid": utils.If(p.HasError, "true"),
}),
}) {
if p.Placeholder != "" {
<span data-tui-datepicker-display class={ "text-left grow text-muted-foreground" }>
{ p.Placeholder }
<div class="relative inline-block w-full" data-tui-datepicker-root>
@popover.Root() {
<input
type="hidden"
name={ p.Name }
value={ initialSelectedISO }
if p.Form != "" {
form={ p.Form }
}
data-tui-datepicker-hidden-input
/>
@popover.Trigger() {
@button.Button(button.Props{
ID: p.ID,
Variant: button.VariantOutline,
Class: utils.TwMerge(
// Base styles matching input
"w-full h-9 px-3 py-1 text-base md:text-sm",
"flex items-center justify-between",
"rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] outline-none",
// Dark mode background
"dark:bg-input/30",
// Selection styles
"selection:bg-primary selection:text-primary-foreground",
// Focus styles
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
// Error/Invalid styles
"aria-invalid:ring-destructive/20 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40",
utils.If(p.HasError, "border-destructive ring-destructive/20 dark:ring-destructive/40"),
p.Class,
),
Disabled: p.Disabled,
Attributes: utils.MergeAttributes(p.Attributes, templ.Attributes{
"data-tui-datepicker": "true",
"data-tui-datepicker-display-format": string(p.Format),
"data-tui-datepicker-locale-tag": string(p.LocaleTag),
"data-tui-datepicker-placeholder": p.Placeholder,
"aria-invalid": utils.If(p.HasError, "true"),
}),
}) {
if p.Placeholder != "" {
<span data-tui-datepicker-display class={ "text-left grow text-muted-foreground" }>
{ p.Placeholder }
</span>
}
<span class="text-muted-foreground flex items-center ml-2">
@icon.Calendar(icon.Props{Class: "size-4"})
</span>
}
<span class="text-muted-foreground flex items-center ml-2">
@icon.Calendar(icon.Props{Size: 16})
</span>
}
}
@popover.Content(popover.ContentProps{
ID: contentID,
Placement: popover.PlacementBottomStart,
Class: "p-0",
}) {
@card.Card(card.Props{
Class: "border-0 shadow-none",
@popover.Content(popover.ContentProps{
Placement: popover.PlacementBottomStart,
Class: "p-0",
}) {
@card.Content(card.ContentProps{
Class: "p-3",
@card.Card(card.Props{
Class: "border-0 shadow-none",
}) {
@calendar.Calendar(calendar.Props{
ID: p.ID + "-calendar-instance", // Pass ID for calendar instance
LocaleTag: calendar.LocaleTag(p.LocaleTag), // Pass locale tag to calendar
StartOfWeek: p.StartOfWeek, // Pass start of week to calendar
Value: valuePtr, // Pass pointer to value
RenderHiddenInput: false, // Don't render hidden input inside popover
})
if p.Clearable {
@button.Button(button.Props{
ID: p.ID + "-clear-button",
Class: "mt-4 w-full",
Variant: button.VariantOutline,
Attributes: templ.Attributes{
"data-tui-datepicker-clear": "true",
},
}) {
Clear
}
@card.Content(card.ContentProps{
Class: "p-3",
}) {
@calendar.Calendar(calendar.Props{
LocaleTag: calendar.LocaleTag(p.LocaleTag),
StartOfWeek: p.StartOfWeek,
Value: valuePtr,
HideHiddenInput: true,
})
}
}
}
@ -173,6 +151,12 @@ templ DatePicker(props ...Props) {
</div>
}
var scriptOnce = templ.NewOnceHandle()
templ Script() {
<script defer nonce={ templ.GetNonce(ctx) } src={ utils.ScriptURL("/assets/js/datepicker.js") }></script>
@scriptOnce.Once() {
@calendar.Script()
@popover.Script()
@utils.ComponentScript("datepicker")
}
}