Add dropdown component

- Add list binder interface
- Update input example page

components/input/dropdown.go

@@ -0,0 +1,46 @@
+package input
+
+import (
+	"github.com/vugu/vugu"
+)
+
+// Dropdown provides several options that the user can choose.
+type Dropdown struct {
+	AttrMap vugu.AttrMap
+
+	Bind     FieldBinder // Binds the current selected key to some variable.
+	BindList ListBinder  // Binds the list content to some list provider.
+}
+
+func (c *Dropdown) currentKey() string {
+	if c.Bind == nil {
+		return ""
+	}
+
+	return c.Bind.String()
+}
+
+func (c *Dropdown) isKeySelected(key string) bool {
+	if c.Bind == nil {
+		return false
+	}
+
+	return key == c.Bind.String()
+}
+
+func (c *Dropdown) keyValuePairs() []ListKeyValuePair {
+	if c.BindList == nil {
+		return nil
+	}
+
+	return c.BindList.ListKeyValuePairs()
+}
+
+func (c *Dropdown) handleChange(event vugu.DOMEvent) {
+	if c.Bind == nil {
+		return
+	}
+
+	val := event.PropString("target", "value")
+	c.Bind.SetString(val)
+}

components/input/dropdown.vugu

@@ -0,0 +1,16 @@
+<select vg-attr='utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1685186383"}' :value="c.currentKey()" @change="c.handleChange(event)">
+	<option vg-for='_, entry := range c.keyValuePairs()' :value='entry.Key' :selected='c.isKeySelected(entry.Key)' vg-content='entry.Value'></option>
+</select>
+
+<style>
+	.d3c-1685186383 {
+		padding: 0.25em 0.5em;
+	}
+</style>
+
+<script type="application/x-go">
+	import (
+		//"git.d3nexus.de/Dadido3/D3vugu-components/icons"
+		"git.d3nexus.de/Dadido3/D3vugu-components/utils"
+	)
+</script>

components/input/dropdown_vgen.go

@@ -0,0 +1,63 @@
+package input
+
+// Code generated by vugu via vugugen. Please regenerate instead of editing or add additional code in a separate file. DO NOT EDIT.
+
+import "fmt"
+import "reflect"
+import "github.com/vugu/vjson"
+import "github.com/vugu/vugu"
+import js "github.com/vugu/vugu/js"
+
+import (
+	//"git.d3nexus.de/Dadido3/D3vugu-components/icons"
+	"git.d3nexus.de/Dadido3/D3vugu-components/utils"
+)
+
+func (c *Dropdown) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+
+	vgout = &vugu.BuildOut{}
+
+	var vgiterkey interface{}
+	_ = vgiterkey
+	var vgn *vugu.VGNode
+	vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "select", Attr: []vugu.VGAttribute(nil)}
+	vgout.Out = append(vgout.Out, vgn)	// root for output
+	vgn.AddAttrInterface("value", c.currentKey())
+	vgn.AddAttrList(utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1685186383"})
+	vgn.DOMEventHandlerSpecList = append(vgn.DOMEventHandlerSpecList, vugu.DOMEventHandlerSpec{
+		EventType:	"change",
+		Func:		func(event vugu.DOMEvent) { c.handleChange(event) },
+		// TODO: implement capture, etc. mostly need to decide syntax
+	})
+	{
+		vgparent := vgn
+		_ = vgparent
+		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
+		vgparent.AppendChild(vgn)
+		for vgiterkeyt, entry := range c.keyValuePairs() {
+			var vgiterkey interface{} = vgiterkeyt
+			_ = vgiterkey
+			entry := entry
+			_ = entry
+			vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "option", Attr: []vugu.VGAttribute(nil)}
+			vgparent.AppendChild(vgn)
+			vgn.AddAttrInterface("selected", c.isKeySelected(entry.Key))
+			vgn.AddAttrInterface("value", entry.Key)
+			vgn.SetInnerHTML(entry.Value)
+		}
+		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n"}
+		vgparent.AppendChild(vgn)
+	}
+	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-1685186383 {\n\t\tpadding: 0.25em 0.5em;\n\t}\n", Attr: []vugu.VGAttribute(nil)})
+	}
+	vgout.AppendCSS(vgn)
+	return vgout
+}
+
+// 'fix' unused imports
+var _ fmt.Stringer
+var _ reflect.Type
+var _ vjson.RawMessage
+var _ js.Value

components/input/list-binder.go

@@ -0,0 +1,49 @@
+package input
+
+import "strconv"
+
+// ListBinder describes the interface that anything that wants to present key value pairs needs to implement.
+type ListBinder interface {
+	ListKeyValuePairs() []ListKeyValuePair
+}
+
+type ListKeyValuePair struct {
+	Key, Value string
+}
+
+// ListBindGenericSlice implements ListBinder for slices that are of some arbitrary type.
+// For this to work, you need to supply a function that returns key value pairs for every slice entry.
+type ListBindGenericSlice[T any] struct {
+	Slice        *[]T
+	KeyValueFunc func(index int, entry T) ListKeyValuePair
+}
+
+func (l ListBindGenericSlice[T]) ListKeyValuePairs() []ListKeyValuePair {
+	if l.Slice == nil || l.KeyValueFunc == nil {
+		return nil
+	}
+
+	result := make([]ListKeyValuePair, 0, len(*l.Slice))
+	for i, entry := range *l.Slice {
+		result = append(result, l.KeyValueFunc(i, entry))
+	}
+	return result
+}
+
+// ListBindSlice implements ListBinder for string slices.
+// The list index (as a string) is used as a key.
+type ListBindSlice struct {
+	Slice *[]string
+}
+
+func (l ListBindSlice) ListKeyValuePairs() []ListKeyValuePair {
+	if l.Slice == nil {
+		return nil
+	}
+
+	result := make([]ListKeyValuePair, 0, len(*l.Slice))
+	for i, entry := range *l.Slice {
+		result = append(result, ListKeyValuePair{Key: strconv.Itoa(i), Value: entry})
+	}
+	return result
+}

page-input.go

@@ -1,5 +1,7 @@
 package main
 
+import "github.com/vugu/vugu"
+
 type PageInput struct {
 	button1Counter int  `vugu:"data"`
 	button4Bool    bool `vugu:"data"`
@@ -10,4 +12,11 @@ type PageInput struct {
 	inputField4String string  `vugu:"data"`
 	inputField5String string  `vugu:"data"`
 	inputField5Bool   bool    `vugu:"data"`
+
+	dropdown1Slice []string `vugu:"data"`
+	dropdown1Index int      `vugu:"data"`
+}
+
+func (c *PageInput) Init(ctx vugu.InitCtx) {
+	c.dropdown1Slice = []string{"This", "is", "a", "list", "of", "things!"}
 }

page-input.vugu

@@ -77,6 +77,11 @@
 			</input:Button>
 		</input:Field>
 
+		<h2>Drop-down</h2>
+		<label for="page-dropdown-1">Select a slice entry</label>
+		<input:Dropdown id="page-dropdown-1" :Bind="input.FieldBindAny{Value: &c.dropdown1Index}" :BindList="input.ListBindSlice{Slice: &c.dropdown1Slice}"></input:Dropdown>
+		<span vg-content='fmt.Sprintf("The selected index is %d.", c.dropdown1Index)'></span>
+
 	</layout:Container>
 </div>
 

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(0xCEEA144C25FF2E6B^vgin.CurrentPositionHash(), vgiterkey)
+			vgcompKey := vugu.MakeCompKey(0xB26EBEB1D8E73BFF^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(0x293C7847767D0443^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0x61A9ED57B2D7FC0C^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(0x2E397688ACD190A2^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0xB81D4F0D1B7B2451^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(0xD5BA3CC9CD0D12FE^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x8B3FBE62D7FA14E0^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(0xA425E79111F90BDD^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x23A75C8C62CC7ACD^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(0x4BD198012B78C1B4^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xAE9F9A663C5516CE^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(0x77450DC118F5A209^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xF589A6C162306426^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(0xF4282C931C72C8BE^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xD1D77E8F211E03BE^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(0xAF781B607847C544^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0xFC981C2DDF2A88D0^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(0x354C94E7EBA72AAC^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0xA543BA04FA033BC^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(0x9ED5C23518440634^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xFB49E11243E269C4^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(0x4A176307736BB1F7^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x912307B559566958^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(0x1553CB8390B8D1DF^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x551841C4245C4D9C^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LGlobe)
 							if vgcomp == nil {
@@ -454,7 +454,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(0xEB960134DB660ED7^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x5F3C6AE687A90906^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -486,7 +486,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(0x62538CCFB0C3AF11^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xC1E721EE39A2E365^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 					if vgcomp == nil {
@@ -529,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(0xEC245637543BA0FC^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xB50AB6DDFCE0F888^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -567,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(0x6526634FF3B54319^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 {
@@ -601,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(0x5BC320CBDC58240^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xE6214B61489F970C^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
 					if vgcomp == nil {
@@ -635,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(0xF46C5FDA4EC7E69^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xADA936494B3AA8DD^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
 					if vgcomp == nil {
@@ -666,7 +666,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "For passwords you have to use the "}
 					vgparent.AppendChild(vgn)
 					{
-						vgcompKey := vugu.MakeCompKey(0xEA1DA1E311E89B9D^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0x1FA84C8CB03D8627^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 						if vgcomp == nil {
@@ -701,7 +701,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(0x7F57299092001AA3^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x4B1753F5FE40444B^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
 					if vgcomp == nil {
@@ -735,7 +735,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(0xF0289D7E34872CA4^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xFBFF656CD8DD1D02^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
 					if vgcomp == nil {
@@ -757,7 +757,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
 						vgparent.AppendChild(vgn)
 						{
-							vgcompKey := vugu.MakeCompKey(0xD2C6B2B25A02A991^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x9E80AFDA2C83321E^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 							if vgcomp == nil {
@@ -778,7 +778,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								vgparent.AppendChild(vgn)
 								if !c.inputField5Bool {
 									{
-										vgcompKey := vugu.MakeCompKey(0xA5DA8A9DBDB90700^vgin.CurrentPositionHash(), vgiterkey)
+										vgcompKey := vugu.MakeCompKey(0x3B3A5A3B4A9E4726^vgin.CurrentPositionHash(), vgiterkey)
 										// ask BuildEnv for prior instance of this specific component
 										vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LLockOpened)
 										if vgcomp == nil {
@@ -798,7 +798,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								vgparent.AppendChild(vgn)
 								if c.inputField5Bool {
 									{
-										vgcompKey := vugu.MakeCompKey(0xDD2A63E717759625^vgin.CurrentPositionHash(), vgiterkey)
+										vgcompKey := vugu.MakeCompKey(0x6EB9CA19A9C5ADD6^vgin.CurrentPositionHash(), vgiterkey)
 										// ask BuildEnv for prior instance of this specific component
 										vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LLockClosed)
 										if vgcomp == nil {
@@ -825,7 +825,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
 						vgparent.AppendChild(vgn)
 						{
-							vgcompKey := vugu.MakeCompKey(0xA8B460D83294629^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x224D34D59F84E415^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 							if vgcomp == nil {
@@ -844,7 +844,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t"}
 								vgparent.AppendChild(vgn)
 								{
-									vgcompKey := vugu.MakeCompKey(0xC486202221CDA1F7^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0x4DF16B456825F66A^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LGlobe)
 									if vgcomp == nil {
@@ -873,6 +873,41 @@ 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\n\t\t"}
+				vgparent.AppendChild(vgn)
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "h2", Attr: []vugu.VGAttribute(nil)}
+				vgparent.AppendChild(vgn)
+				vgn.SetInnerHTML(vugu.HTML("Drop-down"))
+				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-dropdown-1"}}}
+				vgparent.AppendChild(vgn)
+				vgn.SetInnerHTML(vugu.HTML("Select a slice entry"))
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+				vgparent.AppendChild(vgn)
+				{
+					vgcompKey := vugu.MakeCompKey(0xC3DF5DFFB763B333^vgin.CurrentPositionHash(), vgiterkey)
+					// ask BuildEnv for prior instance of this specific component
+					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Dropdown)
+					if vgcomp == nil {
+						// create new one if needed
+						vgcomp = new(input.Dropdown)
+						vgin.BuildEnv.WireComponent(vgcomp)
+					}
+					vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+					vgcomp.Bind = input.FieldBindAny{Value: &c.dropdown1Index}
+					vgcomp.BindList = input.ListBindSlice{Slice: &c.dropdown1Slice}
+					vgcomp.AttrMap = make(map[string]interface{}, 8)
+					vgcomp.AttrMap["id"] = "page-dropdown-1"
+					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("The selected index is %d.", c.dropdown1Index))
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\n\t"}
 				vgparent.AppendChild(vgn)
 				return