feat: initial commit
This commit is contained in:
Lukas Werner
@@ -0,0 +1,151 @@
|
||||
// templui component button - version: v0.93.0 installed by templui v0.93.0
|
||||
package button
|
||||
|
||||
import (
|
||||
"git.hafen.run/lukas/timeshare/utils"
|
||||
"strings"
|
||||
)
|
||||
|
||||
type Variant string
|
||||
type Size string
|
||||
type Type string
|
||||
|
||||
const (
|
||||
VariantDefault Variant = "default"
|
||||
VariantDestructive Variant = "destructive"
|
||||
VariantOutline Variant = "outline"
|
||||
VariantSecondary Variant = "secondary"
|
||||
VariantGhost Variant = "ghost"
|
||||
VariantLink Variant = "link"
|
||||
)
|
||||
|
||||
const (
|
||||
TypeButton Type = "button"
|
||||
TypeReset Type = "reset"
|
||||
TypeSubmit Type = "submit"
|
||||
)
|
||||
|
||||
const (
|
||||
SizeDefault Size = "default"
|
||||
SizeSm Size = "sm"
|
||||
SizeLg Size = "lg"
|
||||
SizeIcon Size = "icon"
|
||||
)
|
||||
|
||||
type Props struct {
|
||||
ID string
|
||||
Class string
|
||||
Attributes templ.Attributes
|
||||
Variant Variant
|
||||
Size Size
|
||||
FullWidth bool
|
||||
Href string
|
||||
Target string
|
||||
Disabled bool
|
||||
Type Type
|
||||
Form string
|
||||
}
|
||||
|
||||
templ Button(props ...Props) {
|
||||
{{ var p Props }}
|
||||
if len(props) > 0 {
|
||||
{{ p = props[0] }}
|
||||
}
|
||||
if p.Type == "" {
|
||||
{{ p.Type = TypeButton }}
|
||||
}
|
||||
if p.Href != "" && !p.Disabled {
|
||||
<a
|
||||
if p.ID != "" {
|
||||
id={ p.ID }
|
||||
}
|
||||
href={ templ.SafeURL(p.Href) }
|
||||
if p.Target != "" {
|
||||
target={ p.Target }
|
||||
}
|
||||
class={
|
||||
utils.TwMerge(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all",
|
||||
"disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
|
||||
"outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
"cursor-pointer",
|
||||
p.variantClasses(),
|
||||
p.sizeClasses(),
|
||||
p.modifierClasses(),
|
||||
p.Class,
|
||||
),
|
||||
}
|
||||
{ p.Attributes... }
|
||||
>
|
||||
{ children... }
|
||||
</a>
|
||||
} else {
|
||||
<button
|
||||
if p.ID != "" {
|
||||
id={ p.ID }
|
||||
}
|
||||
class={
|
||||
utils.TwMerge(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all",
|
||||
"disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
|
||||
"outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
"cursor-pointer",
|
||||
p.variantClasses(),
|
||||
p.sizeClasses(),
|
||||
p.modifierClasses(),
|
||||
p.Class,
|
||||
),
|
||||
}
|
||||
if p.Type != "" {
|
||||
type={ string(p.Type) }
|
||||
}
|
||||
if p.Form != "" {
|
||||
form={ p.Form }
|
||||
}
|
||||
disabled?={ p.Disabled }
|
||||
{ p.Attributes... }
|
||||
>
|
||||
{ children... }
|
||||
</button>
|
||||
}
|
||||
}
|
||||
|
||||
func (b Props) variantClasses() string {
|
||||
switch b.Variant {
|
||||
case VariantDestructive:
|
||||
return "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
|
||||
case VariantOutline:
|
||||
return "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
|
||||
case VariantSecondary:
|
||||
return "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80"
|
||||
case VariantGhost:
|
||||
return "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
|
||||
case VariantLink:
|
||||
return "text-primary underline-offset-4 hover:underline"
|
||||
default:
|
||||
return "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
|
||||
}
|
||||
}
|
||||
|
||||
func (b Props) sizeClasses() string {
|
||||
switch b.Size {
|
||||
case SizeSm:
|
||||
return "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"
|
||||
case SizeLg:
|
||||
return "h-10 rounded-md px-6 has-[>svg]:px-4"
|
||||
case SizeIcon:
|
||||
return "size-9"
|
||||
default: // SizeDefault
|
||||
return "h-9 px-4 py-2 has-[>svg]:px-3"
|
||||
}
|
||||
}
|
||||
|
||||
func (b Props) modifierClasses() string {
|
||||
classes := []string{}
|
||||
if b.FullWidth {
|
||||
classes = append(classes, "w-full")
|
||||
}
|
||||
return strings.Join(classes, " ")
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
// templui component icon - version: v0.94.0 installed by templui v0.94.0
|
||||
package icon
|
||||
|
||||
import (
|
||||
"context"
|
||||
"fmt"
|
||||
"io"
|
||||
"sync"
|
||||
|
||||
"github.com/a-h/templ"
|
||||
)
|
||||
|
||||
// iconContents caches the fully generated SVG strings for icons that have been used,
|
||||
// keyed by a composite key of name and props to handle different stylings.
|
||||
var (
|
||||
iconContents = make(map[string]string)
|
||||
iconMutex sync.RWMutex
|
||||
)
|
||||
|
||||
// Props defines the properties that can be set for an icon.
|
||||
type Props struct {
|
||||
Size int
|
||||
Color string
|
||||
Fill string
|
||||
Stroke string
|
||||
StrokeWidth string // Stroke Width of Icon, Usage: "2.5"
|
||||
Class string
|
||||
}
|
||||
|
||||
// Icon returns a function that generates a templ.Component for the specified icon name.
|
||||
func Icon(name string) func(...Props) templ.Component {
|
||||
return func(props ...Props) templ.Component {
|
||||
var p Props
|
||||
if len(props) > 0 {
|
||||
p = props[0]
|
||||
}
|
||||
|
||||
// Create a unique key for the cache based on icon name and all relevant props.
|
||||
// This ensures different stylings of the same icon are cached separately.
|
||||
cacheKey := fmt.Sprintf("%s|s:%d|c:%s|f:%s|sk:%s|sw:%s|cl:%s",
|
||||
name, p.Size, p.Color, p.Fill, p.Stroke, p.StrokeWidth, p.Class)
|
||||
|
||||
return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
|
||||
iconMutex.RLock()
|
||||
svg, cached := iconContents[cacheKey]
|
||||
iconMutex.RUnlock()
|
||||
|
||||
if cached {
|
||||
_, err = w.Write([]byte(svg))
|
||||
return err
|
||||
}
|
||||
|
||||
// Not cached, generate it
|
||||
// The actual generation now happens once and is cached.
|
||||
generatedSvg, err := generateSVG(name, p) // p (Props) is passed to generateSVG
|
||||
if err != nil {
|
||||
// Provide more context in the error message
|
||||
return fmt.Errorf("failed to generate svg for icon '%s' with props %+v: %w", name, p, err)
|
||||
}
|
||||
|
||||
iconMutex.Lock()
|
||||
iconContents[cacheKey] = generatedSvg
|
||||
iconMutex.Unlock()
|
||||
|
||||
_, err = w.Write([]byte(generatedSvg))
|
||||
return err
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// generateSVG creates an SVG string for the specified icon with the given properties.
|
||||
// This function is called when an icon-prop combination is not yet in the cache.
|
||||
func generateSVG(name string, props Props) (string, error) {
|
||||
// Get the raw, inner SVG content for the icon name from our internal data map.
|
||||
content, err := getIconContent(name) // This now reads from internalSvgData
|
||||
if err != nil {
|
||||
return "", err // Error from getIconContent already includes icon name
|
||||
}
|
||||
|
||||
size := props.Size
|
||||
if size <= 0 {
|
||||
size = 24 // Default size
|
||||
}
|
||||
|
||||
fill := props.Fill
|
||||
if fill == "" {
|
||||
fill = "none" // Default fill
|
||||
}
|
||||
|
||||
stroke := props.Stroke
|
||||
if stroke == "" {
|
||||
stroke = props.Color // Fallback to Color if Stroke is not set
|
||||
}
|
||||
if stroke == "" {
|
||||
stroke = "currentColor" // Default stroke color
|
||||
}
|
||||
|
||||
strokeWidth := props.StrokeWidth
|
||||
if strokeWidth == "" {
|
||||
strokeWidth = "2" // Default stroke width
|
||||
}
|
||||
|
||||
// Construct the final SVG string.
|
||||
// The data-lucide attribute helps identify these as Lucide icons if needed.
|
||||
return fmt.Sprintf("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"%d\" height=\"%d\" viewBox=\"0 0 24 24\" fill=\"%s\" stroke=\"%s\" stroke-width=\"%s\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"%s\" data-lucide=\"icon\">%s</svg>",
|
||||
size, size, fill, stroke, strokeWidth, props.Class, content), nil
|
||||
}
|
||||
|
||||
// getIconContent retrieves the raw inner SVG content for a given icon name.
|
||||
// It reads from the pre-generated internalSvgData map from icon_data.go.
|
||||
func getIconContent(name string) (string, error) {
|
||||
content, exists := internalSvgData[name]
|
||||
if !exists {
|
||||
return "", fmt.Errorf("icon '%s' not found in internalSvgData map", name)
|
||||
}
|
||||
return content, nil
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,42 @@
|
||||
// templui component label - version: v0.93.0 installed by templui v0.93.0
|
||||
package label
|
||||
|
||||
import "git.hafen.run/lukas/timeshare/utils"
|
||||
|
||||
type Props struct {
|
||||
ID string
|
||||
Class string
|
||||
Attributes templ.Attributes
|
||||
For string
|
||||
Error string
|
||||
}
|
||||
|
||||
templ Label(props ...Props) {
|
||||
{{ var p Props }}
|
||||
if len(props) > 0 {
|
||||
{{ p = props[0] }}
|
||||
}
|
||||
<label
|
||||
if p.ID != "" {
|
||||
id={ p.ID }
|
||||
}
|
||||
if p.For != "" {
|
||||
for={ p.For }
|
||||
}
|
||||
class={
|
||||
utils.TwMerge(
|
||||
"text-sm font-medium leading-none inline-block",
|
||||
utils.If(len(p.Error) > 0, "text-destructive"),
|
||||
p.Class,
|
||||
),
|
||||
}
|
||||
data-tui-label-disabled-style="opacity-50 cursor-not-allowed"
|
||||
{ p.Attributes... }
|
||||
>
|
||||
{ children... }
|
||||
</label>
|
||||
}
|
||||
|
||||
templ Script() {
|
||||
<script defer nonce={ templ.GetNonce(ctx) } src="/assets/js/label.min.js"></script>
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
// templui component radio - version: v0.93.0 installed by templui v0.93.0
|
||||
package radio
|
||||
|
||||
import "git.hafen.run/lukas/timeshare/utils"
|
||||
|
||||
type Props struct {
|
||||
ID string
|
||||
Class string
|
||||
Attributes templ.Attributes
|
||||
Name string
|
||||
Value string
|
||||
Form string
|
||||
Disabled bool
|
||||
Required bool
|
||||
Checked bool
|
||||
}
|
||||
|
||||
templ Radio(props ...Props) {
|
||||
{{ var p Props }}
|
||||
if len(props) > 0 {
|
||||
{{ p = props[0] }}
|
||||
}
|
||||
<input
|
||||
type="radio"
|
||||
if p.ID != "" {
|
||||
id={ p.ID }
|
||||
}
|
||||
if p.Name != "" {
|
||||
name={ p.Name }
|
||||
}
|
||||
if p.Value != "" {
|
||||
value={ p.Value }
|
||||
}
|
||||
if p.Form != "" {
|
||||
form={ p.Form }
|
||||
}
|
||||
checked?={ p.Checked }
|
||||
disabled?={ p.Disabled }
|
||||
required?={ p.Required }
|
||||
class={
|
||||
utils.TwMerge(
|
||||
"relative h-4 w-4",
|
||||
"before:absolute before:left-1/2 before:top-1/2",
|
||||
"before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2",
|
||||
"appearance-none rounded-full",
|
||||
"border-2 border-primary",
|
||||
"before:content[''] before:rounded-full before:bg-background",
|
||||
"checked:border-primary checked:bg-primary",
|
||||
"checked:before:visible",
|
||||
"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
|
||||
"focus-visible:ring-offset-2 focus-visible:ring-offset-background",
|
||||
"disabled:cursor-not-allowed",
|
||||
p.Class,
|
||||
),
|
||||
}
|
||||
{ p.Attributes... }
|
||||
/>
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
// templui component toast - version: v0.94.0 installed by templui v0.94.0
|
||||
package toast
|
||||
|
||||
import (
|
||||
"git.hafen.run/lukas/timeshare/components/button"
|
||||
"git.hafen.run/lukas/timeshare/components/icon"
|
||||
"git.hafen.run/lukas/timeshare/utils"
|
||||
"strconv"
|
||||
)
|
||||
|
||||
type Variant string
|
||||
type Position string
|
||||
|
||||
const (
|
||||
VariantDefault Variant = "default"
|
||||
VariantSuccess Variant = "success"
|
||||
VariantError Variant = "error"
|
||||
VariantWarning Variant = "warning"
|
||||
VariantInfo Variant = "info"
|
||||
)
|
||||
|
||||
const (
|
||||
PositionTopRight Position = "top-right"
|
||||
PositionTopLeft Position = "top-left"
|
||||
PositionTopCenter Position = "top-center"
|
||||
PositionBottomRight Position = "bottom-right"
|
||||
PositionBottomLeft Position = "bottom-left"
|
||||
PositionBottomCenter Position = "bottom-center"
|
||||
)
|
||||
|
||||
type Props struct {
|
||||
ID string
|
||||
Class string
|
||||
Attributes templ.Attributes
|
||||
Title string
|
||||
Description string
|
||||
Variant Variant
|
||||
Position Position
|
||||
Duration int
|
||||
Dismissible bool
|
||||
ShowIndicator bool
|
||||
Icon bool
|
||||
}
|
||||
|
||||
templ Toast(props ...Props) {
|
||||
{{ var p Props }}
|
||||
if len(props) > 0 {
|
||||
{{ p = props[0] }}
|
||||
}
|
||||
if p.ID == "" {
|
||||
{{ p.ID = utils.RandomID() }}
|
||||
}
|
||||
// Set defaults
|
||||
if p.Variant == "" {
|
||||
{{ p.Variant = VariantDefault }}
|
||||
}
|
||||
if p.Position == "" {
|
||||
{{ p.Position = PositionBottomRight }}
|
||||
}
|
||||
if p.Duration == 0 {
|
||||
{{ p.Duration = 3000 }}
|
||||
}
|
||||
<div
|
||||
id={ p.ID }
|
||||
data-tui-toast
|
||||
data-tui-toast-duration={ strconv.Itoa(p.Duration) }
|
||||
data-position={ string(p.Position) }
|
||||
data-variant={ string(p.Variant) }
|
||||
class={ utils.TwMerge(
|
||||
// Base styles
|
||||
"z-50 fixed pointer-events-auto p-4 w-full md:max-w-[420px]",
|
||||
// Animation
|
||||
"animate-in fade-in slide-in-from-bottom-4 duration-300",
|
||||
// Position-based styles using data attributes
|
||||
"data-[position=top-right]:top-0 data-[position=top-right]:right-0",
|
||||
"data-[position=top-left]:top-0 data-[position=top-left]:left-0",
|
||||
"data-[position=top-center]:top-0 data-[position=top-center]:left-1/2 data-[position=top-center]:-translate-x-1/2",
|
||||
"data-[position=bottom-right]:bottom-0 data-[position=bottom-right]:right-0",
|
||||
"data-[position=bottom-left]:bottom-0 data-[position=bottom-left]:left-0",
|
||||
"data-[position=bottom-center]:bottom-0 data-[position=bottom-center]:left-1/2 data-[position=bottom-center]:-translate-x-1/2",
|
||||
// Slide direction based on position
|
||||
"data-[position*=top]:slide-in-from-top-4",
|
||||
"data-[position*=bottom]:slide-in-from-bottom-4",
|
||||
p.Class,
|
||||
) }
|
||||
{ p.Attributes... }
|
||||
>
|
||||
<div class="w-full bg-popover text-popover-foreground rounded-lg shadow-xs border pt-5 pb-4 px-4 flex items-center justify-center relative overflow-hidden group">
|
||||
// Progress indicator
|
||||
if p.ShowIndicator && p.Duration > 0 {
|
||||
<div class="absolute top-0 left-0 right-0 h-1 overflow-hidden">
|
||||
<div
|
||||
class={ utils.TwMerge(
|
||||
"toast-progress h-full origin-left transition-transform ease-linear",
|
||||
// Variant colors
|
||||
"data-[variant=default]:bg-gray-500",
|
||||
"data-[variant=success]:bg-green-500",
|
||||
"data-[variant=error]:bg-red-500",
|
||||
"data-[variant=warning]:bg-yellow-500",
|
||||
"data-[variant=info]:bg-blue-500",
|
||||
) }
|
||||
data-variant={ string(p.Variant) }
|
||||
data-duration={ strconv.Itoa(p.Duration) }
|
||||
></div>
|
||||
</div>
|
||||
}
|
||||
// Icon
|
||||
if p.Icon {
|
||||
switch p.Variant {
|
||||
case VariantSuccess:
|
||||
@icon.CircleCheck(icon.Props{Size: 22, Class: "text-green-500 mr-3 flex-shrink-0"})
|
||||
case VariantError:
|
||||
@icon.CircleX(icon.Props{Size: 22, Class: "text-red-500 mr-3 flex-shrink-0"})
|
||||
case VariantWarning:
|
||||
@icon.TriangleAlert(icon.Props{Size: 22, Class: "text-yellow-500 mr-3 flex-shrink-0"})
|
||||
case VariantInfo:
|
||||
@icon.Info(icon.Props{Size: 22, Class: "text-blue-500 mr-3 flex-shrink-0"})
|
||||
}
|
||||
}
|
||||
// Content
|
||||
<span class="flex-1 min-w-0">
|
||||
if p.Title != "" {
|
||||
<p class="text-sm font-semibold truncate">{ p.Title }</p>
|
||||
}
|
||||
if p.Description != "" {
|
||||
<p class="text-sm opacity-90 mt-1">@templ.Raw(p.Description)
|
||||
</p>
|
||||
}
|
||||
</span>
|
||||
// Dismiss button
|
||||
if p.Dismissible {
|
||||
@button.Button(button.Props{
|
||||
Size: button.SizeIcon,
|
||||
Variant: button.VariantGhost,
|
||||
Attributes: templ.Attributes{
|
||||
"aria-label": "Close",
|
||||
"data-tui-toast-dismiss": "",
|
||||
"type": "button",
|
||||
},
|
||||
}) {
|
||||
@icon.X(icon.Props{
|
||||
Size: 18,
|
||||
Class: "opacity-75 hover:opacity-100",
|
||||
})
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ Script() {
|
||||
<script defer nonce={ templ.GetNonce(ctx) } src="/assets/js/toast.min.js"></script>
|
||||
}
|
||||
Reference in New Issue
Block a user