init go project
This commit is contained in:
juancwu
commit
5dde43e409
85 changed files with 16720 additions and 0 deletions
158
internal/ui/components/datepicker/datepicker.templ
Normal file
158
internal/ui/components/datepicker/datepicker.templ
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
// templui component datepicker - version: v0.101.0 installed by templui v0.101.0
|
||||
// 📚 Documentation: https://templui.io/docs/components/date-picker
|
||||
package datepicker
|
||||
|
||||
import (
|
||||
"git.juancwu.dev/juancwu/budgething/internal/ui/components/button"
|
||||
"git.juancwu.dev/juancwu/budgething/internal/ui/components/calendar"
|
||||
"git.juancwu.dev/juancwu/budgething/internal/ui/components/card"
|
||||
"git.juancwu.dev/juancwu/budgething/internal/ui/components/icon"
|
||||
"git.juancwu.dev/juancwu/budgething/internal/ui/components/popover"
|
||||
"git.juancwu.dev/juancwu/budgething/internal/utils"
|
||||
"time"
|
||||
)
|
||||
|
||||
type Format string
|
||||
type LocaleTag string
|
||||
|
||||
const (
|
||||
FormatLOCALE_SHORT Format = "locale-short" // Locale-specific short format (e.g., MM/DD/YY or DD.MM.YY)
|
||||
FormatLOCALE_MEDIUM Format = "locale-medium" // Locale-specific medium format (e.g., Jan 5, 2024 or 5. Jan. 2024)
|
||||
FormatLOCALE_LONG Format = "locale-long" // Locale-specific long format (e.g., January 5, 2024 or 5. Januar 2024)
|
||||
FormatLOCALE_FULL Format = "locale-full" // Locale-specific full format (e.g., Monday, January 5, 2024 or Montag, 5. Januar 2024)
|
||||
)
|
||||
|
||||
// Common Locale (BCP 47)
|
||||
var (
|
||||
LocaleDefaultTag = LocaleTag("en-US")
|
||||
LocaleTagChinese = LocaleTag("zh-CN")
|
||||
LocaleTagFrench = LocaleTag("fr-FR")
|
||||
LocaleTagGerman = LocaleTag("de-DE")
|
||||
LocaleTagItalian = LocaleTag("it-IT")
|
||||
LocaleTagJapanese = LocaleTag("ja-JP")
|
||||
LocaleTagPortuguese = LocaleTag("pt-PT")
|
||||
LocaleTagSpanish = LocaleTag("es-ES")
|
||||
)
|
||||
|
||||
type Props struct {
|
||||
ID string
|
||||
Class string
|
||||
Attributes templ.Attributes
|
||||
Name string
|
||||
Value time.Time
|
||||
Form string
|
||||
Format Format // Controls the display format using Intl dateStyle options.
|
||||
LocaleTag LocaleTag // BCP 47 Locale Tag (e.g., "en-US", "es-ES"). Determines language and regional format defaults.
|
||||
StartOfWeek *calendar.Day // Optional: 0-6 [Sun-Sat] (Default: 1).
|
||||
Placeholder string
|
||||
Disabled bool
|
||||
HasError bool
|
||||
}
|
||||
|
||||
templ DatePicker(props ...Props) {
|
||||
{{
|
||||
var p Props
|
||||
if len(props) > 0 {
|
||||
p = props[0]
|
||||
}
|
||||
if p.ID == "" {
|
||||
p.ID = utils.RandomID()
|
||||
}
|
||||
if p.Name == "" {
|
||||
p.Name = p.ID
|
||||
}
|
||||
if p.Placeholder == "" {
|
||||
p.Placeholder = "Select a date"
|
||||
}
|
||||
if p.LocaleTag == "" {
|
||||
p.LocaleTag = LocaleDefaultTag
|
||||
}
|
||||
if p.Format == "" {
|
||||
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")
|
||||
}
|
||||
}}
|
||||
<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,
|
||||
"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{Size: 16})
|
||||
</span>
|
||||
}
|
||||
}
|
||||
@popover.Content(popover.ContentProps{
|
||||
ID: contentID,
|
||||
Placement: popover.PlacementBottomStart,
|
||||
Class: "p-0",
|
||||
}) {
|
||||
@card.Card(card.Props{
|
||||
Class: "border-0 shadow-none",
|
||||
}) {
|
||||
@card.Content(card.ContentProps{
|
||||
Class: "p-3",
|
||||
}) {
|
||||
@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
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
templ Script() {
|
||||
<script defer nonce={ templ.GetNonce(ctx) } src={ "/assets/js/datepicker.min.js?v=" + utils.ScriptVersion }></script>
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue