diff --git a/components/input/button.go b/components/input/button.go index 902882f..83515fb 100644 --- a/components/input/button.go +++ b/components/input/button.go @@ -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}) } diff --git a/components/input/button.vugu b/components/input/button.vugu index 58ce72f..dc00d8c 100644 --- a/components/input/button.vugu +++ b/components/input/button.vugu @@ -1,4 +1,4 @@ - @@ -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); } diff --git a/components/input/button_vgen.go b/components/input/button_vgen.go index 4cbbd31..9d16a28 100644 --- a/components/input/button_vgen.go +++ b/components/input/button_vgen.go @@ -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 diff --git a/components/input/field.vugu b/components/input/field.vugu index adfbc57..cdd3080 100644 --- a/components/input/field.vugu +++ b/components/input/field.vugu @@ -39,7 +39,7 @@ } .d3c-1684925699:has(> input:focus) { - outline: 1px solid var(--d3c-color-accent-focused); + outline: 1px solid var(--d3c-color-accent); } diff --git a/components/input/field_vgen.go b/components/input/field_vgen.go index 0d2c503..11e132a 100644 --- a/components/input/field_vgen.go +++ b/components/input/field_vgen.go @@ -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 diff --git a/components/navigation/sidebar-entry.vugu b/components/navigation/sidebar-entry.vugu index 5081b80..f096a98 100644 --- a/components/navigation/sidebar-entry.vugu +++ b/components/navigation/sidebar-entry.vugu @@ -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); } diff --git a/components/navigation/sidebar-entry_vgen.go b/components/navigation/sidebar-entry_vgen.go index e90fe3b..d5f6248 100644 --- a/components/navigation/sidebar-entry_vgen.go +++ b/components/navigation/sidebar-entry_vgen.go @@ -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 diff --git a/page-input.go b/page-input.go index d6a8132..0294f08 100644 --- a/page-input.go +++ b/page-input.go @@ -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"` diff --git a/page-input.vugu b/page-input.vugu index 1a7b284..51dc1ec 100644 --- a/page-input.vugu +++ b/page-input.vugu @@ -37,6 +37,12 @@ Something +

Buttons can be bound to boolean variables, in this case they will function as a toggle:

+ +

+		
+ Toggle me! +

Input fields

Input fields can be bound to data. They will automatically change their type based on the bound data type.

diff --git a/page-input_vgen.go b/page-input_vgen.go index 079187b..15e20fb 100644 --- a/page-input_vgen.go +++ b/page-input_vgen.go @@ -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("Toggle me!") + 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 { diff --git a/static/css/d3c-theme-base.css b/static/css/d3c-theme-base.css index cb7ca65..06a566e 100644 --- a/static/css/d3c-theme-base.css +++ b/static/css/d3c-theme-base.css @@ -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; }