Dadido3/D3vugu-components
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Support button to bind to boolean variables

Browse Source 
- Bring back d3c-color-accent
- Reduce number of CSS color variables
This commit is contained in:
David Vogel 2023-05-25 16:37:46 +02:00
parent 114a7d893c
commit cd35a61dc8
11 changed files with 156 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/input/button.go
View File

@ -8,10 +8,25 @@ type Button struct {
IconSlot vugu.Builder `vugu:"data"` // Slot for the symbol.
DefaultSlot vugu.Builder `vugu:"data"`
Bind *bool `vugu:"data"` // A data binding with some bool variable. If this contains a reference, the button can be toggled.
Click ClickHandler // External handler that is called upon an event.
classes string // Additional computed classes that are added to the component.
}
func (c *Button) Compute(ctx vugu.ComputeCtx) {
if c.Bind != nil && *c.Bind {
c.classes = "d3c-color-accent"
} else {
c.classes = ""
}
}
func (c *Button) HandleClick(event vugu.DOMEvent) {
if c.Bind != nil {
*c.Bind = !*c.Bind
}
if c.Click != nil {
c.Click.ClickHandle(ClickEvent{DOMEvent: event})
}

6
components/input/button.vugu
View File

@ -1,4 +1,4 @@
<button vg-attr='utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1633424238"}' @click="c.HandleClick(event)">
<button vg-attr='utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1633424238 " + c.classes}' @click="c.HandleClick(event)">
<div class="d3c-1633424238-highlighter"></div><vg-comp expr="c.IconSlot"></vg-comp><vg-comp expr="c.DefaultSlot"></vg-comp>
</button>
@ -44,7 +44,7 @@
}
.d3c-button-highlight .d3c-1633424238-highlighter, .d3c-button-highlight.d3c-1633424238-highlighter {
background-color: var(--d3c-color-accent-highlighted) !important;
background-color: var(--d3c-color-accent) !important;
}
.d3c-button-only-icon .d3c-1633424238 > *:nth-child(n+3), .d3c-button-only-icon.d3c-1633424238 > *:nth-child(n+3) {
@ -60,7 +60,7 @@
}
.d3c-1633424238:focus-visible {
outline: 1px solid var(--d3c-color-accent-focused);
outline: 1px solid var(--d3c-color-accent);
}
</style>

4
components/input/button_vgen.go
View File

@ -21,7 +21,7 @@ func (c *Button) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
var vgn *vugu.VGNode
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "button", Attr: []vugu.VGAttribute(nil)}
vgout.Out = append(vgout.Out, vgn) // root for output
vgn.AddAttrList(utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1633424238"})
vgn.AddAttrList(utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1633424238 " + c.classes})
vgn.DOMEventHandlerSpecList = append(vgn.DOMEventHandlerSpecList, vugu.DOMEventHandlerSpec{
EventType: "click",
Func: func(event vugu.DOMEvent) { c.HandleClick(event) },
@ -58,7 +58,7 @@ func (c *Button) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
}
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)}
{
vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1633424238 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tgap: 0.5em;\n\t\ttext-decoration: none;\n\t\tpadding: 0.3em 0.5em;\n\t\tmargin: 0.5em 0;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid var(--d3c-color-border);\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tfont-size: 1em;\n\t\tfont-family: \"Segoe UI\", sans-serif;\n\t\tmin-height: 2em;\n\t\tuser-select: none;\n\t}\n\n\t.d3c-button-vertical .d3c-1633424238, .d3c-button-vertical.d3c-1633424238 {\n\t\tflex-direction: column;\n\t}\n\n\t.d3c-button-transparent .d3c-1633424238, .d3c-button-transparent.d3c-1633424238 {\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t}\n\n\t.d3c-1633424238-highlighter {\n\t\tposition: absolute;\n\t\tborder-radius: 2px;\n\t\theight: 4px;\n\t\tleft: 0.5em;\n\t\tright: 0.5em;\n\t\tbottom: 0;\n\t}\n\n\t.d3c-button-highlight .d3c-1633424238-highlighter, .d3c-button-highlight.d3c-1633424238-highlighter {\n\t\tbackground-color: var(--d3c-color-accent-highlighted) !important;\n\t}\n\n\t.d3c-button-only-icon .d3c-1633424238 > *:nth-child(n+3), .d3c-button-only-icon.d3c-1633424238 > *:nth-child(n+3) {\n\t\tdisplay: none;\n\t}\n\n\t.d3c-1633424238:hover {\n\t\tbackground-color: var(--d3c-color-hovered);\n\t}\n\n\t.d3c-1633424238:active {\n\t\tbackground-color: var(--d3c-color-activated);\n\t}\n\n\t.d3c-1633424238:focus-visible {\n\t\toutline: 1px solid var(--d3c-color-accent-focused);\n\t}\n", Attr: []vugu.VGAttribute(nil)})
vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1633424238 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tgap: 0.5em;\n\t\ttext-decoration: none;\n\t\tpadding: 0.3em 0.5em;\n\t\tmargin: 0.5em 0;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid var(--d3c-color-border);\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tfont-size: 1em;\n\t\tfont-family: \"Segoe UI\", sans-serif;\n\t\tmin-height: 2em;\n\t\tuser-select: none;\n\t}\n\n\t.d3c-button-vertical .d3c-1633424238, .d3c-button-vertical.d3c-1633424238 {\n\t\tflex-direction: column;\n\t}\n\n\t.d3c-button-transparent .d3c-1633424238, .d3c-button-transparent.d3c-1633424238 {\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t}\n\n\t.d3c-1633424238-highlighter {\n\t\tposition: absolute;\n\t\tborder-radius: 2px;\n\t\theight: 4px;\n\t\tleft: 0.5em;\n\t\tright: 0.5em;\n\t\tbottom: 0;\n\t}\n\n\t.d3c-button-highlight .d3c-1633424238-highlighter, .d3c-button-highlight.d3c-1633424238-highlighter {\n\t\tbackground-color: var(--d3c-color-accent) !important;\n\t}\n\n\t.d3c-button-only-icon .d3c-1633424238 > *:nth-child(n+3), .d3c-button-only-icon.d3c-1633424238 > *:nth-child(n+3) {\n\t\tdisplay: none;\n\t}\n\n\t.d3c-1633424238:hover {\n\t\tbackground-color: var(--d3c-color-hovered);\n\t}\n\n\t.d3c-1633424238:active {\n\t\tbackground-color: var(--d3c-color-activated);\n\t}\n\n\t.d3c-1633424238:focus-visible {\n\t\toutline: 1px solid var(--d3c-color-accent);\n\t}\n", Attr: []vugu.VGAttribute(nil)})
}
vgout.AppendCSS(vgn)
return vgout

2
components/input/field.vugu
View File

@ -39,7 +39,7 @@
}
.d3c-1684925699:has(> input:focus) {
outline: 1px solid var(--d3c-color-accent-focused);
outline: 1px solid var(--d3c-color-accent);
}
</style>

2
components/input/field_vgen.go
View File

@ -57,7 +57,7 @@ func (c *Field) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
}
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)}
{
vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1684925699 {\n\t\tposition: relative;\n\t\tdisplay: inline-flex;\n\t\toverflow: hidden;\n\t\tmargin: 0.5em 0;\n\t\tpadding-left: 0.25em;\n\t\tborder-radius: 4px;\n\t\theight: 2em;\n\t\tborder: 1px solid var(--d3c-color-border);\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\t/*gap: 0.5em;*/\n\t}\n\n\t.d3c-1684925699-error {\n\t\tposition: absolute;\n\t\theight: 2px;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbackground-color: var(--d3c-color-background);\n\t}\n\n\t.d3c-1684925699 > input {\n\t\tborder: none !important;\n\t\toutline: none;\n\t\tflex-grow: 1;\n\t}\n\n\t.d3c-1684925699 > * {\n\t\tmargin: 0;\n\t}\n\n\t.d3c-1684925699:has(> input:focus) {\n\t\toutline: 1px solid var(--d3c-color-accent-focused);\n\t}\n", Attr: []vugu.VGAttribute(nil)})
vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1684925699 {\n\t\tposition: relative;\n\t\tdisplay: inline-flex;\n\t\toverflow: hidden;\n\t\tmargin: 0.5em 0;\n\t\tpadding-left: 0.25em;\n\t\tborder-radius: 4px;\n\t\theight: 2em;\n\t\tborder: 1px solid var(--d3c-color-border);\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\t/*gap: 0.5em;*/\n\t}\n\n\t.d3c-1684925699-error {\n\t\tposition: absolute;\n\t\theight: 2px;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbackground-color: var(--d3c-color-background);\n\t}\n\n\t.d3c-1684925699 > input {\n\t\tborder: none !important;\n\t\toutline: none;\n\t\tflex-grow: 1;\n\t}\n\n\t.d3c-1684925699 > * {\n\t\tmargin: 0;\n\t}\n\n\t.d3c-1684925699:has(> input:focus) {\n\t\toutline: 1px solid var(--d3c-color-accent);\n\t}\n", Attr: []vugu.VGAttribute(nil)})
}
vgout.AppendCSS(vgn)
return vgout

4
components/navigation/sidebar-entry.vugu
View File

@ -43,7 +43,7 @@
}
.d3c-button-highlight .d3c-1683622560-highlighter, .d3c-button-highlight.d3c-1683622560-highlighter {
background-color: var(--d3c-color-accent-highlighted) !important;
background-color: var(--d3c-color-accent) !important;
}
.d3c-button-only-icon .d3c-1683622560 > *:nth-child(n+3), .d3c-button-only-icon.d3c-1683622560 > *:nth-child(n+3) {
@ -59,7 +59,7 @@
}
.d3c-1683622560:focus-visible {
outline: 1px solid var(--d3c-color-accent-focused);
outline: 1px solid var(--d3c-color-accent);
}
</style>

2
components/navigation/sidebar-entry_vgen.go
View File

@ -58,7 +58,7 @@ func (c *SidebarEntry) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
}
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)}
{
vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1683622560 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 0.5em;\n\t\ttext-decoration: none;\n\t\tpadding: 0.3em 0.5em;\n\t\tmargin: 0.5em 0;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid var(--d3c-color-border);\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tfont-size: 1em;\n\t\tfont-family: \"Segoe UI\", sans-serif;\n\t\tmin-height: 2em;\n\t\tuser-select: none;\n\t}\n\n\t.d3c-button-vertical .d3c-1683622560, .d3c-button-vertical.d3c-1683622560 {\n\t\tflex-direction: column;\n\t}\n\n\t.d3c-button-transparent .d3c-1683622560, .d3c-button-transparent.d3c-1683622560 {\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t}\n\n\t.d3c-1683622560-highlighter {\n\t\tposition: absolute;\n\t\tborder-radius: 2px;\n\t\twidth: 4px;\n\t\ttop: 0.5em;\n\t\tbottom: 0.5em;\n\t\tleft: 0;\n\t}\n\n\t.d3c-button-highlight .d3c-1683622560-highlighter, .d3c-button-highlight.d3c-1683622560-highlighter {\n\t\tbackground-color: var(--d3c-color-accent-highlighted) !important;\n\t}\n\n\t.d3c-button-only-icon .d3c-1683622560 > *:nth-child(n+3), .d3c-button-only-icon.d3c-1683622560 > *:nth-child(n+3) {\n\t\tdisplay: none;\n\t}\n\n\t.d3c-1683622560:hover {\n\t\tbackground-color: var(--d3c-color-hovered);\n\t}\n\n\t.d3c-1683622560:active {\n\t\tbackground-color: var(--d3c-color-activated);\n\t}\n\n\t.d3c-1683622560:focus-visible {\n\t\toutline: 1px solid var(--d3c-color-accent-focused);\n\t}\n", Attr: []vugu.VGAttribute(nil)})
vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1683622560 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 0.5em;\n\t\ttext-decoration: none;\n\t\tpadding: 0.3em 0.5em;\n\t\tmargin: 0.5em 0;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid var(--d3c-color-border);\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tfont-size: 1em;\n\t\tfont-family: \"Segoe UI\", sans-serif;\n\t\tmin-height: 2em;\n\t\tuser-select: none;\n\t}\n\n\t.d3c-button-vertical .d3c-1683622560, .d3c-button-vertical.d3c-1683622560 {\n\t\tflex-direction: column;\n\t}\n\n\t.d3c-button-transparent .d3c-1683622560, .d3c-button-transparent.d3c-1683622560 {\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t}\n\n\t.d3c-1683622560-highlighter {\n\t\tposition: absolute;\n\t\tborder-radius: 2px;\n\t\twidth: 4px;\n\t\ttop: 0.5em;\n\t\tbottom: 0.5em;\n\t\tleft: 0;\n\t}\n\n\t.d3c-button-highlight .d3c-1683622560-highlighter, .d3c-button-highlight.d3c-1683622560-highlighter {\n\t\tbackground-color: var(--d3c-color-accent) !important;\n\t}\n\n\t.d3c-button-only-icon .d3c-1683622560 > *:nth-child(n+3), .d3c-button-only-icon.d3c-1683622560 > *:nth-child(n+3) {\n\t\tdisplay: none;\n\t}\n\n\t.d3c-1683622560:hover {\n\t\tbackground-color: var(--d3c-color-hovered);\n\t}\n\n\t.d3c-1683622560:active {\n\t\tbackground-color: var(--d3c-color-activated);\n\t}\n\n\t.d3c-1683622560:focus-visible {\n\t\toutline: 1px solid var(--d3c-color-accent);\n\t}\n", Attr: []vugu.VGAttribute(nil)})
}
vgout.AppendCSS(vgn)
return vgout

3
page-input.go
View File

@ -1,7 +1,8 @@
package main
type PageInput struct {
button1Counter int `vugu:"data"`
button1Counter int `vugu:"data"`
button4Bool bool `vugu:"data"`
input1String string `vugu:"data"`
input2Int int `vugu:"data"`

6
page-input.vugu
View File

@ -37,6 +37,12 @@
<vg-slot name="IconSlot"><icons:LGlobe style="font-size: 2em;"></icons:LGlobe></vg-slot>
<vg-slot name="DefaultSlot">Something</vg-slot>
</input:Button>
<p>Buttons can be bound to boolean variables, in this case they will function as a toggle:</p>
<view:Code>
<pre vg-content='"<input:Button :Bind=\"&c.button4Bool\">Toggle me!</input:Button>"' style="margin: 0;"></pre>
</view:Code>
<input:Button :Bind="&c.button4Bool">Toggle me!</input:Button>
<span vg-content="fmt.Sprintf(`Boolean is set to %v.`, c.button4Bool)"></span>
<h2>Input fields</h2>
<p>Input fields can be bound to data. They will automatically change their type based on the bound data type.</p>

104
page-input_vgen.go
View File

@ -31,7 +31,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0x2CD946D4B86DA23D^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0xDF5D3F79949389E5^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*layout.Container)
if vgcomp == nil {
@ -62,7 +62,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Clickable components support the "}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0x6B340105B051F54F^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x8B4C45FD29FDFBBC^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
if vgcomp == nil {
@ -89,7 +89,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: " event that handlers can be registered to with "}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0xBB4D6C3CC3E35F46^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0xB75B9AD43FA62FAC^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
if vgcomp == nil {
@ -117,7 +117,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0x6C47BAC12EA7F971^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0xA00EEDE2E930F00F^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
if vgcomp == nil {
@ -166,7 +166,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0x3802F5A99C90269^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x2DBAE75227B0F529^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
if vgcomp == nil {
@ -198,7 +198,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0x6718C2DF2385C49B^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0xE19829F002BBD424^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
if vgcomp == nil {
@ -232,7 +232,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0xFAA54896DE5321BD^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x3C96CB3EBB39445D^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
if vgcomp == nil {
@ -267,7 +267,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0x70891725CFFFB1CC^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x8018CCE8E762AFA9^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
if vgcomp == nil {
@ -284,7 +284,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
_ = vgparent
{
vgcompKey := vugu.MakeCompKey(0xCB4B3B9B14DEC44D^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0xBE684A63A3B94236^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LDocument)
if vgcomp == nil {
@ -330,7 +330,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Use the "}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0x405469E963CD877^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x307BBC85FB56FDE5^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
if vgcomp == nil {
@ -360,7 +360,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0xC756C1C3FF4866F2^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x2BE5347445C1EF5F^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
if vgcomp == nil {
@ -395,7 +395,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0x73539CEA42E45AED^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x55177BCCED839985^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
if vgcomp == nil {
@ -414,7 +414,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
_ = vgparent
{
vgcompKey := vugu.MakeCompKey(0xA9BC87B39E303BAC^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0xC688D04EC2EDF2AB^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LGlobe)
if vgcomp == nil {
@ -446,6 +446,76 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn = &vugu.VGNode{Component: vgcomp}
vgparent.AppendChild(vgn)
}
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "p", Attr: []vugu.VGAttribute(nil)}
vgparent.AppendChild(vgn)
vgn.SetInnerHTML(vugu.HTML("Buttons can be bound to boolean variable, in this case they will function as a toggle:"))
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0x4F4F880E626F4F25^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
if vgcomp == nil {
// create new one if needed
vgcomp = new(view.Code)
vgin.BuildEnv.WireComponent(vgcomp)
}
vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around
vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
vgout = &vugu.BuildOut{}
vgout.Out = append(vgout.Out, vgn)
vgparent := vgn
_ = vgparent
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
vgparent.AppendChild(vgn)
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "pre", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "style", Val: "margin: 0;"}}}
vgparent.AppendChild(vgn)
vgn.SetInnerHTML("<input:Button :Bind=\"&c.button4Bool\">Toggle me!</input:Button>")
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
return
})
vgout.Components = append(vgout.Components, vgcomp)
vgn = &vugu.VGNode{Component: vgcomp}
vgparent.AppendChild(vgn)
}
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0x58D93F32F03504E1^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
if vgcomp == nil {
// create new one if needed
vgcomp = new(input.Button)
vgin.BuildEnv.WireComponent(vgcomp)
}
vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around
vgcomp.Bind = &c.button4Bool
vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
vgout = &vugu.BuildOut{}
vgout.Out = append(vgout.Out, vgn)
vgparent := vgn
_ = vgparent
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Toggle me!"}
vgparent.AppendChild(vgn)
return
})
vgout.Components = append(vgout.Components, vgcomp)
vgn = &vugu.VGNode{Component: vgcomp}
vgparent.AppendChild(vgn)
}
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "span", Attr: []vugu.VGAttribute(nil)}
vgparent.AppendChild(vgn)
vgn.SetInnerHTML(fmt.Sprintf(`Boolean is set to %v.`, c.button4Bool))
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\n\t\t"}
vgparent.AppendChild(vgn)
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "h2", Attr: []vugu.VGAttribute(nil)}
@ -459,7 +529,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0x8CCA2FEA494180C4^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x8E059AF11DFD605^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
if vgcomp == nil {
@ -497,7 +567,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0xD0084DE093F75708^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x756CB00237D8810^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
if vgcomp == nil {
@ -531,7 +601,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0xA90B3646A25AD8FB^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x7C3A36DA5DCF3ED3^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
if vgcomp == nil {
@ -565,7 +635,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0x134E1E287071FC6A^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0xA262AF139BBC7695^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
if vgcomp == nil {

41
static/css/d3c-theme-base.css
View File

@ -8,14 +8,11 @@
--d3c-color-hovered: #dadada; /*Elements being hovered by the input cursor.*/
--d3c-color-focused: #b7b7b7; /*Elements being "pre" selected and can receive keyboard events.*/
--d3c-color-activated: #b7b7b7; /*Elements being actively pressed or interacted with.*/
--d3c-color-highlighted: #b7b7b7; /*Elements being highlighted for any other reason. This has mostly nothing to do with user interaction.*/
--d3c-color-highlighted: #b7b7b7; /*Elements being highlighted for any other reason, like a selected or active element. But not due to user interaction.*/
/*The following special colors are meant for text and lines and must contrast well with --d3c-color-background.*/
/*Elements should only use the colors sparingly, otherwise it would cause too much visual clutter.*/
--d3c-color-accent-hovered: #1c6491; /*Elements being hovered by the input cursor.*/
--d3c-color-accent-focused: #0071b7; /*Elements being "pre" selected and can receive keyboard events.*/
--d3c-color-accent-activated: #0071b7; /*Elements being actively pressed or interacted with.*/
--d3c-color-accent-highlighted: #0071b7; /*Elements being highlighted for any other reason. This has mostly nothing to do with user interaction.*/
--d3c-color-accent: #0071b7; /*General accent color.*/
--d3c-color-shadow: rgba(0, 0, 0, 0.2);
}
@ -30,6 +27,8 @@
--d3c-color-focused: #b7b7b7;
--d3c-color-activated: #b7b7b7;
--d3c-color-highlighted: #b7b7b7;
--d3c-color-accent: #0071b7;
}
.d3c-color-layer-2 {
@ -42,6 +41,22 @@
--d3c-color-focused: #b7b7b7;
--d3c-color-activated: #b7b7b7;
--d3c-color-highlighted: #b7b7b7;
--d3c-color-accent: #0071b7;
}
.d3c-color-accent {
--d3c-color-background: #0063a1;
--d3c-color-text: white;
--d3c-color-border: #004671;
--d3c-color-hovered: #005285;
--d3c-color-focused: #004671;
--d3c-color-activated: #004671;
--d3c-color-highlighted: #004671;
--d3c-color-accent: #98c3ff;
}
.d3c-color-success {
@ -54,6 +69,8 @@
--d3c-color-focused: #116700;
--d3c-color-activated: #116700;
--d3c-color-highlighted: #116700;
--d3c-color-accent: #006aff;
}
.d3c-color-success-faded {
@ -66,6 +83,8 @@
--d3c-color-focused: #a3d599;
--d3c-color-activated: #a3d599;
--d3c-color-highlighted: #a3d599;
--d3c-color-accent: #0071b7;
}
.d3c-color-attention {
@ -78,6 +97,8 @@
--d3c-color-focused: #004671;
--d3c-color-activated: #004671;
--d3c-color-highlighted: #004671;
--d3c-color-accent: #006aff;
}
.d3c-color-attention-faded {
@ -90,6 +111,8 @@
--d3c-color-focused: #a1c5dc;
--d3c-color-activated: #a1c5dc;
--d3c-color-highlighted: #a1c5dc;
--d3c-color-accent: #0071b7;
}
.d3c-color-caution {
@ -102,6 +125,8 @@
--d3c-color-focused: #7a6d00;
--d3c-color-activated: #7a6d00;
--d3c-color-highlighted: #7a6d00;
--d3c-color-accent: #006aff;
}
.d3c-color-caution-faded {
@ -114,6 +139,8 @@
--d3c-color-focused: #dbd184;
--d3c-color-activated: #dbd184;
--d3c-color-highlighted: #dbd184;
--d3c-color-accent: #0071b7;
}
.d3c-color-critical {
@ -126,6 +153,8 @@
--d3c-color-focused: #930000;
--d3c-color-activated: #930000;
--d3c-color-highlighted: #930000;
--d3c-color-accent: #006aff;
}
.d3c-color-critical-faded {
@ -138,4 +167,6 @@
--d3c-color-focused: #d9b4b4;
--d3c-color-activated: #d9b4b4;
--d3c-color-highlighted: #d9b4b4;
--d3c-color-accent: #0071b7;
}