Core

/views/components/view/README.md (4.0 KB)

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
# View Component Helpers

This directory contains quicktemplate component functions for rendering various data types and UI elements.

## Function Reference

### Any.html

- `{% func Any(x any, ps *cutil.PageState) %}` - Renders any value by type-switching to appropriate handlers
{{{ if .HasModule "types" }}}
### AnyByType.html

- `{% func AnyByType(x any, t *types.Wrapped, ps *cutil.PageState) %}` - Renders any value based on explicit type information
- `{% func Default(x any, t string, ps *cutil.PageState) %}` - Default handler for unhandled types
- `{% func Type(v types.Type) %}` - Renders type information
- `{% func Option(x any, t *types.Option, ps *cutil.PageState) %}` - Renders optional values with null toggle
{{{ end }}}
### Bool.html

- `{% func Bool(b bool) %}` - Renders boolean as "true"/"false" text
- `{% func BoolIcon(b bool, size int, cls string, ps *cutil.PageState, titles ...string) %}` - Renders boolean as check/times icon

### Color.html

- `{% func Color(clr string, cls string, ps *cutil.PageState) %}` - Renders color value with background preview

### Diff.html

- `{% func Diffs(value util.Diffs) %}` - Renders diff table showing path/old/new changes
- `{% func DiffsSet(key string, value util.DiffsSet, limit int, ps *cutil.PageState) %}` - Renders grouped diffs as accordion

### Float.html

- `{% func Float(f any) %}` - Renders float value
- `{% func FloatArray(value []any) %}` - Renders array of floats

### Int.html

- `{% func Int(i any) %}` - Renders integer value
- `{% func IntArray(value []any) %}` - Renders array of integers

### Map.html

- `{% func Map(preserveWhitespace bool, m util.ValueMap, ps *cutil.PageState) %}` - Renders key-value map as table
- `{% func MapKeys(m util.ValueMap) %}` - Renders map keys as tags
- `{% func MapArray(preserveWhitespace bool, ps *cutil.PageState, maps ...util.ValueMap) %}` - Renders array of maps as table
- `{% func OrderedMap(preserveWhitespace bool, m *util.OrderedMap[any], ps *cutil.PageState) %}` - Renders ordered map as table
- `{% func OrderedMapArray(preserveWhitespace bool, ps *cutil.PageState, maps ...*util.OrderedMap[any]) %}` - Renders array of ordered maps as table

### Package.html

- `{% func Package(v util.Pkg) %}` - Renders package path segments

### String.html

- `{% func String(value string, classes ...string) %}` - Renders string with optional CSS classes
- `{% func StringRich(value string, code bool, maxLength int, classes ...string) %}` - Renders string with code formatting and length limit
- `{% func StringArray(value []string) %}` - Renders string array with overflow handling
- `{% func FormatLang(v string, ext string) %}` - Renders formatted code with syntax highlighting

### Tags.html

- `{% func Tags(values []string, titles []string, url ...string) %}` - Renders string array as tag elements with optional links

### Timestamp.html

- `{% func Timestamp(value *time.Time) %}` - Renders timestamp with verbose tooltip
- `{% func TimestampMillis(value *time.Time) %}` - Renders timestamp with millisecond precision
- `{% func TimestampRelative(value *time.Time, static bool) %}` - Renders relative time ("2 hours ago")
- `{% func TimestampDay(value *time.Time) %}` - Renders date only (YYYY-MM-DD)
- `{% func DurationSeconds(seconds float64) %}` - Renders duration from seconds value

### URL.html

- `{% func URL(u any, content string, includeExternalIcon bool, ps *cutil.PageState) %}` - Renders clickable URL link
- `{% func CodeLink(path string, title string, ps *cutil.PageState) %}` - Renders link to source code

### UUID.html

- `{% func UUID(value *uuid.UUID) %}` - Renders UUID as string

## Usage Notes

- Most functions accept `ps *cutil.PageState` for context and theme information
- Functions starting with capital letters are exported quicktemplate functions
- `preserveWhitespace` parameter controls whether content should maintain spacing/formatting
- Array functions typically include overflow handling for large datasets
- Icon functions use the SVG icon system via `components.SVGRef()`