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

Compare commits

base: Dadido3:c81d49c00da7c51a31a9e7ebea3b260db8d505d5
Branches Tags
Dadido3:master
..
compare: Dadido3:114a7d893c9f0581cd8b386e1d93862e311eaeb9
Branches Tags
Dadido3:master

No commits in common. "c81d49c00da7c51a31a9e7ebea3b260db8d505d5" and "114a7d893c9f0581cd8b386e1d93862e311eaeb9" have entirely different histories.
c81d49c00d ... 114a7d893c

12 changed files with 34 additions and 252 deletions
Show Stats Expand all files Collapse all files

15
components/input/button.go
View File

@ -8,25 +8,10 @@ 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 " + c.classes}' @click="c.HandleClick(event)">
<button vg-attr='utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1633424238"}' @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) !important;
background-color: var(--d3c-color-accent-highlighted) !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);
outline: 1px solid var(--d3c-color-accent-focused);
}
</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 " + c.classes})
vgn.AddAttrList(utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1633424238"})
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) !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)})
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)})
}
vgout.AppendCSS(vgn)
return vgout

24
components/input/field.go
View File

@ -180,27 +180,3 @@ func (f FieldBindAny) HTMLInputType() string {
return "text"
}
// FieldBindPassword implements the FieldBinder interface for strings.
type FieldBindPassword struct{ Value *string }
func (f FieldBindPassword) String() string {
if f.Value != nil {
return *f.Value
}
return ""
}
func (f FieldBindPassword) SetString(value string) error {
if f.Value != nil {
*f.Value = value
return nil
}
return fmt.Errorf("no value is bound to this component")
}
func (f FieldBindPassword) HTMLInputType() string {
return "password"
}

2
components/input/field.vugu
View File

@ -39,7 +39,7 @@
}
.d3c-1684925699:has(> input:focus) {
outline: 1px solid var(--d3c-color-accent);
outline: 1px solid var(--d3c-color-accent-focused);
}
</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);\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-focused);\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) !important;
background-color: var(--d3c-color-accent-highlighted) !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);
outline: 1px solid var(--d3c-color-accent-focused);
}
</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) !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)})
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)})
}
vgout.AppendCSS(vgn)
return vgout

4
page-input.go
View File

@ -1,11 +1,9 @@
package main
type PageInput struct {
button1Counter int `vugu:"data"`
button4Bool bool `vugu:"data"`
button1Counter int `vugu:"data"`
input1String string `vugu:"data"`
input2Int int `vugu:"data"`
input3Float float64 `vugu:"data"`
input4String string `vugu:"data"`
}

12
page-input.vugu
View File

@ -37,12 +37,6 @@
<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>
@ -61,11 +55,7 @@
<label for="page-input-3">Some input field bound to float value</label>
<input:Field id="page-input-3" :Bind="input.FieldBindAny{&c.input3Float}"></input:Field>
<span vg-content='fmt.Sprintf("Current value is %v.", c.input3Float)'></span>
<p>For passwords you have to use the <view:CodeInline>input.FieldBindPassword</view:CodeInline> binder:</p>
<label for="page-input-4">Some input field bound to password string</label>
<input:Field id="page-input-4" :Bind="input.FieldBindPassword{&c.input4String}"></input:Field>
<span vg-content='fmt.Sprintf("Secret password is %q.", c.input4String)'></span>
</layout:Container>
</div>

170
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(0xC22DDE5B6BFE0832^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x2CD946D4B86DA23D^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(0x59F69B4F6C5BDA6A^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x6B340105B051F54F^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(0x14219A8F237A8A44^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0xBB4D6C3CC3E35F46^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(0x9794E8F35738F27^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x6C47BAC12EA7F971^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(0x4F033E58EC649380^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x3802F5A99C90269^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(0x10CD21DEF4514889^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x6718C2DF2385C49B^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(0xF7BB886DF1216355^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0xFAA54896DE5321BD^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(0xF8A2420E39F2415C^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x70891725CFFFB1CC^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(0xF0C7F02200B137BC^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0xCB4B3B9B14DEC44D^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(0xEB81B350C2CF1159^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x405469E963CD877^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(0x2DC9BCD93B9858D1^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0xC756C1C3FF4866F2^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(0xEA75A143AA77A70F^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x73539CEA42E45AED^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(0x5C6C5649D58283EC^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0xA9BC87B39E303BAC^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LGlobe)
if vgcomp == nil {
@ -446,76 +446,6 @@ 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 variables, 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(0xC55F497851F56570^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(0xF1AD429EB840E2F^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)}
@ -529,7 +459,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(0xDD9A2869F1839484^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x8CCA2FEA494180C4^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
if vgcomp == nil {
@ -567,7 +497,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(0x7D4F43932DEDE021^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0xD0084DE093F75708^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
if vgcomp == nil {
@ -601,7 +531,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(0xB0EA81F9A317ADA1^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0xA90B3646A25AD8FB^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
if vgcomp == nil {
@ -635,7 +565,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(0x819FBFBA88D2E9E7^vgin.CurrentPositionHash(), vgiterkey)
vgcompKey := vugu.MakeCompKey(0x134E1E287071FC6A^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
if vgcomp == nil {
@ -656,72 +586,6 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "span", Attr: []vugu.VGAttribute(nil)}
vgparent.AppendChild(vgn)
vgn.SetInnerHTML(fmt.Sprintf("Current value is %v.", c.input3Float))
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)
{
vgparent := vgn
_ = vgparent
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "For passwords you have to use the "}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0x620ADFDAD9D1E612^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
if vgcomp == nil {
// create new one if needed
vgcomp = new(view.CodeInline)
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: "input.FieldBindPassword"}
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: " binder:"}
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: "label", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "for", Val: "page-input-4"}}}
vgparent.AppendChild(vgn)
vgn.SetInnerHTML(vugu.HTML("Some input field bound to password string"))
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
{
vgcompKey := vugu.MakeCompKey(0x947AC7AB0BD9A1A1^vgin.CurrentPositionHash(), vgiterkey)
// ask BuildEnv for prior instance of this specific component
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
if vgcomp == nil {
// create new one if needed
vgcomp = new(input.Field)
vgin.BuildEnv.WireComponent(vgcomp)
}
vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around
vgcomp.Bind = input.FieldBindPassword{&c.input4String}
vgcomp.AttrMap = make(map[string]interface{}, 8)
vgcomp.AttrMap["id"] = "page-input-4"
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("Secret password is %q.", c.input4String))
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\n\t"}
vgparent.AppendChild(vgn)
return

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

@ -8,11 +8,14 @@
--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, like a selected or active element. But not due to user interaction.*/
--d3c-color-highlighted: #b7b7b7; /*Elements being highlighted for any other reason. This has mostly nothing to do with 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: #0071b7; /*General accent color.*/
--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-shadow: rgba(0, 0, 0, 0.2);
}
@ -27,8 +30,6 @@
--d3c-color-focused: #b7b7b7;
--d3c-color-activated: #b7b7b7;
--d3c-color-highlighted: #b7b7b7;
--d3c-color-accent: #0071b7;
}
.d3c-color-layer-2 {
@ -41,22 +42,6 @@
--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 {
@ -69,8 +54,6 @@
--d3c-color-focused: #116700;
--d3c-color-activated: #116700;
--d3c-color-highlighted: #116700;
--d3c-color-accent: #006aff;
}
.d3c-color-success-faded {
@ -83,8 +66,6 @@
--d3c-color-focused: #a3d599;
--d3c-color-activated: #a3d599;
--d3c-color-highlighted: #a3d599;
--d3c-color-accent: #0071b7;
}
.d3c-color-attention {
@ -97,8 +78,6 @@
--d3c-color-focused: #004671;
--d3c-color-activated: #004671;
--d3c-color-highlighted: #004671;
--d3c-color-accent: #006aff;
}
.d3c-color-attention-faded {
@ -111,8 +90,6 @@
--d3c-color-focused: #a1c5dc;
--d3c-color-activated: #a1c5dc;
--d3c-color-highlighted: #a1c5dc;
--d3c-color-accent: #0071b7;
}
.d3c-color-caution {
@ -125,8 +102,6 @@
--d3c-color-focused: #7a6d00;
--d3c-color-activated: #7a6d00;
--d3c-color-highlighted: #7a6d00;
--d3c-color-accent: #006aff;
}
.d3c-color-caution-faded {
@ -139,8 +114,6 @@
--d3c-color-focused: #dbd184;
--d3c-color-activated: #dbd184;
--d3c-color-highlighted: #dbd184;
--d3c-color-accent: #0071b7;
}
.d3c-color-critical {
@ -153,8 +126,6 @@
--d3c-color-focused: #930000;
--d3c-color-activated: #930000;
--d3c-color-highlighted: #930000;
--d3c-color-accent: #006aff;
}
.d3c-color-critical-faded {
@ -167,6 +138,4 @@
--d3c-color-focused: #d9b4b4;
--d3c-color-activated: #d9b4b4;
--d3c-color-highlighted: #d9b4b4;
--d3c-color-accent: #0071b7;
}