diff --git a/components/layout/container.vugu b/components/layout/container.vugu index d335381..9035cea 100644 --- a/components/layout/container.vugu +++ b/components/layout/container.vugu @@ -5,8 +5,6 @@ diff --git a/components/layout/container_vgen.go b/components/layout/container_vgen.go index 572aaeb..f5ead69 100644 --- a/components/layout/container_vgen.go +++ b/components/layout/container_vgen.go @@ -47,7 +47,7 @@ func (c *Container) 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-1634593574 {\n\t\tmargin: 1em;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t}\n", Attr: []vugu.VGAttribute(nil)}) + vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1634593574 {\n\t\tmargin: 1em;\n\t}\n", Attr: []vugu.VGAttribute(nil)}) } vgout.AppendCSS(vgn) return vgout diff --git a/components/overlay/container.go b/components/overlay/container.go new file mode 100644 index 0000000..eb60dde --- /dev/null +++ b/components/overlay/container.go @@ -0,0 +1,40 @@ +package overlay + +import ( + "git.d3nexus.de/Dadido3/D3vugu-components/components/navigation" + "github.com/vugu/vugu" +) + +// Container can be embedded in your root component and provides a way to show overlays like modals and toasts. +type Container struct { + modal vugu.Builder `vugu:"data"` + modalTitle string +} + +func (c *Container) handleModalClose(event vugu.DOMEvent) { + c.modal = nil +} + +func (c *Container) SetModal(component vugu.Builder) { + c.modal = component + + c.modalTitle = "" + // Retrieve title from component if it implements the PageTitleGetter interface. + if pageInfo, ok := component.(navigation.PageTitleGetter); ok { + c.modalTitle, _, _ = pageInfo.PageTitle() + } +} + +type OverlayContainerRef struct { + *Container +} + +func (p *OverlayContainerRef) OverlayContainerSet(container *Container) { + p.Container = container +} + +type OverlayContainerSetter interface { + OverlayContainerSet(*Container) +} + +var _ OverlayContainerSetter = &OverlayContainerRef{} diff --git a/components/overlay/container.vugu b/components/overlay/container.vugu new file mode 100644 index 0000000..616964c --- /dev/null +++ b/components/overlay/container.vugu @@ -0,0 +1,64 @@ +
+
+
+
+

+ +
+ +
+
+
+ + + + \ No newline at end of file diff --git a/components/overlay/container_vgen.go b/components/overlay/container_vgen.go new file mode 100644 index 0000000..bebc1ec --- /dev/null +++ b/components/overlay/container_vgen.go @@ -0,0 +1,131 @@ +package overlay + +// 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/components/input" + "git.d3nexus.de/Dadido3/D3vugu-components/icons" +) + +func (c *Container) 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: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684423938"}}} + vgout.Out = append(vgout.Out, vgn) // root for output + { + vgparent := vgn + _ = vgparent + vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"} + vgparent.AppendChild(vgn) + if c.modal != nil { + vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684423938-modal-container"}}} + vgparent.AppendChild(vgn) + { + vgparent := vgn + _ = vgparent + vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"} + vgparent.AppendChild(vgn) + vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)} + vgparent.AppendChild(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: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684423938-menu d3c-color-accent"}}} + vgparent.AppendChild(vgn) + { + vgparent := vgn + _ = vgparent + vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t"} + vgparent.AppendChild(vgn) + vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "h3", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684423938-title"}, vugu.VGAttribute{Namespace: "", Key: "style", Val: "flex-grow:1"}}} + vgparent.AppendChild(vgn) + vgn.SetInnerHTML(c.modalTitle) + vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t"} + vgparent.AppendChild(vgn) + { + vgcompKey := vugu.MakeCompKey(0x2DDBBBB22E2345CF^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.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleModalClose(event) }) + vgcomp.SymbolSlot = 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 + + { + vgcompKey := vugu.MakeCompKey(0xC5A4AEF7F17F2072^vgin.CurrentPositionHash(), vgiterkey) + // ask BuildEnv for prior instance of this specific component + vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LCancel) + if vgcomp == nil { + // create new one if needed + vgcomp = new(icons.LCancel) + vgin.BuildEnv.WireComponent(vgcomp) + } + vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around + vgout.Components = append(vgout.Components, vgcomp) + vgn = &vugu.VGNode{Component: vgcomp} + 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\t"} + vgparent.AppendChild(vgn) + } + vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"} + vgparent.AppendChild(vgn) + { + var vgcomp vugu.Builder = c.modal + if vgcomp != nil { + vgin.BuildEnv.WireComponent(vgcomp) + 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(1), Data: "\n\t"} + vgparent.AppendChild(vgn) + } + } + 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-1684423938 {\n\t\tposition: fixed;\n\t\tz-index: 2;\n\t}\n\n\t.d3c-1684423938-modal-container {\n\t\twidth: 100vw;\n\t\theight: 100vh;\n\t\tposition: fixed;\n\t\tbackdrop-filter: blur(1px) brightness(80%);\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tz-index: 1;\n\t}\n\n\t.d3c-1684423938-modal-container > div {\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\tborder-radius: 4px;\n\t\tmax-width: 100%;\n\t\tmax-height: 100%;\n\t\toverflow: auto;\n\t\tbox-shadow: 0 1em 3em var(--d3c-color-shadow);\n\t}\n\n\t.d3c-1684423938-menu {\n\t\tpadding: 0.5em;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t\tjustify-content: flex-end;\n\t\talign-items: baseline;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t}\n\n\t.d3c-1684423938-menu > * {\n\t\tmargin: 0 !important;\n\t}\n\n\t.d3c-1684423938-title {\n\t\ttext-align: center;\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 diff --git a/components/overlay/generate.go b/components/overlay/generate.go new file mode 100644 index 0000000..a36ee9f --- /dev/null +++ b/components/overlay/generate.go @@ -0,0 +1,3 @@ +package overlay + +//go:generate vugugen diff --git a/components/overlay/modal-requester.go b/components/overlay/modal-requester.go new file mode 100644 index 0000000..a7a18f4 --- /dev/null +++ b/components/overlay/modal-requester.go @@ -0,0 +1,37 @@ +package overlay + +import ( + "git.d3nexus.de/Dadido3/D3vugu-components/components/input" + "github.com/vugu/vugu" +) + +type ModalRequester struct { + OverlayContainerRef + + SymbolSlot vugu.Builder `vugu:"data"` // Slot for the symbol. + + Title string `vugu:"data"` + Message string `vugu:"data"` + + ClickAbort input.ClickHandler + ClickYes input.ClickHandler +} + +func (c *ModalRequester) handleClickAbort(event vugu.DOMEvent) { + if c.ClickAbort != nil { + c.ClickAbort.ClickHandle(input.ClickEvent{DOMEvent: event}) + } + c.SetModal(nil) +} + +func (c *ModalRequester) handleClickYes(event vugu.DOMEvent) { + if c.ClickYes != nil { + c.ClickYes.ClickHandle(input.ClickEvent{DOMEvent: event}) + } + c.SetModal(nil) +} + +// PageTitle implements PageTitleGetter which is used by PageInfo. +func (c *ModalRequester) PageTitle() (title, longTitle, shortTitle string) { + return c.Title, c.Title, c.Title +} diff --git a/components/overlay/modal-requester.vugu b/components/overlay/modal-requester.vugu new file mode 100644 index 0000000..641ae5b --- /dev/null +++ b/components/overlay/modal-requester.vugu @@ -0,0 +1,31 @@ +
+ +
+ +

+
+
+ Abort + Yes +
+
+
+ + + + \ No newline at end of file diff --git a/components/overlay/modal-requester_vgen.go b/components/overlay/modal-requester_vgen.go new file mode 100644 index 0000000..4e05a5d --- /dev/null +++ b/components/overlay/modal-requester_vgen.go @@ -0,0 +1,166 @@ +package overlay + +// 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/components/input" + "git.d3nexus.de/Dadido3/D3vugu-components/components/layout" +) + +func (c *ModalRequester) 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: "div", Attr: []vugu.VGAttribute(nil)} + vgout.Out = append(vgout.Out, vgn) // root for output + { + vgparent := vgn + _ = vgparent + vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"} + vgparent.AppendChild(vgn) + { + vgcompKey := vugu.MakeCompKey(0xF4C6D34297449643^vgin.CurrentPositionHash(), vgiterkey) + // ask BuildEnv for prior instance of this specific component + vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*layout.Container) + if vgcomp == nil { + // create new one if needed + vgcomp = new(layout.Container) + 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"} + vgparent.AppendChild(vgn) + vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684441516-flex"}}} + vgparent.AppendChild(vgn) + { + vgparent := vgn + _ = vgparent + vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"} + vgparent.AppendChild(vgn) + { + var vgcomp vugu.Builder = c.SymbolSlot + if vgcomp != nil { + vgin.BuildEnv.WireComponent(vgcomp) + 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\t"} + vgparent.AppendChild(vgn) + vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "p", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "style", Val: "white-space: pre-wrap;"}}} + vgparent.AppendChild(vgn) + vgn.SetInnerHTML(c.Message) + vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"} + 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: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684441516-flex"}, vugu.VGAttribute{Namespace: "", Key: "style", Val: "justify-content: flex-end; align-items: baseline;"}}} + vgparent.AppendChild(vgn) + { + vgparent := vgn + _ = vgparent + vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"} + vgparent.AppendChild(vgn) + if c.ClickAbort != nil { + { + vgcompKey := vugu.MakeCompKey(0xB665D650E0EEB461^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.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleClickAbort(event) }) + 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: "Abort"} + 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\t"} + vgparent.AppendChild(vgn) + if c.ClickYes != nil { + { + vgcompKey := vugu.MakeCompKey(0xA272879670486BAE^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.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleClickYes(event) }) + 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: "Yes"} + 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(1), Data: "\n\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"} + 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-1684441516-flex {\n\t\tmargin: 0.5em 0;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t}\n\n\t.d3c-1684441516-flex > * {\n\t\tmargin: 0;\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 diff --git a/page-overlays.go b/page-overlays.go new file mode 100644 index 0000000..1a51563 --- /dev/null +++ b/page-overlays.go @@ -0,0 +1,22 @@ +package main + +import ( + "git.d3nexus.de/Dadido3/D3vugu-components/components/input" + "git.d3nexus.de/Dadido3/D3vugu-components/components/overlay" + "git.d3nexus.de/Dadido3/D3vugu-components/icons" + "github.com/vugu/vugu" +) + +type PageOverlays struct { + overlay.OverlayContainerRef +} + +func (c *PageOverlays) handleButton(event vugu.DOMEvent) { + c.SetModal(&overlay.ModalRequester{ + SymbolSlot: &icons.LInfoCircle{AttrMap: vugu.AttrMap{"style": "font-size: 2em;"}}, + Title: "Simple requester", + Message: "This is a simple modal requester, are you happy with it?\nIt also supports multi line text!", + ClickAbort: input.ClickFunc(func(event input.ClickEvent) {}), + ClickYes: input.ClickFunc(func(event input.ClickEvent) {}), + }) +} diff --git a/page-overlays.vugu b/page-overlays.vugu new file mode 100644 index 0000000..1384baa --- /dev/null +++ b/page-overlays.vugu @@ -0,0 +1,30 @@ +
+ +

Modals

+

If you component or page contains overlay.OverlayContainerRef and is wired correctly, you can create modals very easily.

+

A simple requester modal is already contained in the overlay package. Use it with:

+ +

+		
+ Open simple modal +
+
+ + + + diff --git a/page-overlays_vgen.go b/page-overlays_vgen.go new file mode 100644 index 0000000..0aeecba --- /dev/null +++ b/page-overlays_vgen.go @@ -0,0 +1,186 @@ +package main + +// 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/components/input" + "git.d3nexus.de/Dadido3/D3vugu-components/components/layout" + "git.d3nexus.de/Dadido3/D3vugu-components/components/view" +) + +func (c *PageOverlays) 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: "div", Attr: []vugu.VGAttribute(nil)} + vgout.Out = append(vgout.Out, vgn) // root for output + { + vgparent := vgn + _ = vgparent + vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"} + vgparent.AppendChild(vgn) + { + vgcompKey := vugu.MakeCompKey(0x8B32FC019648006^vgin.CurrentPositionHash(), vgiterkey) + // ask BuildEnv for prior instance of this specific component + vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*layout.Container) + if vgcomp == nil { + // create new one if needed + vgcomp = new(layout.Container) + 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"} + vgparent.AppendChild(vgn) + vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "h1", Attr: []vugu.VGAttribute(nil)} + vgparent.AppendChild(vgn) + vgn.SetInnerHTML(vugu.HTML("Modals")) + 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: "If you component or page contains "} + vgparent.AppendChild(vgn) + { + vgcompKey := vugu.MakeCompKey(0x1B9CC39770823BF5^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: "overlay.OverlayContainerRef"} + 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: " and is wired correctly, you can create modals very easily."} + 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("A simple requester modal is already contained in the overlay package. Use it with:")) + vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"} + vgparent.AppendChild(vgn) + { + vgcompKey := vugu.MakeCompKey(0x9C5F61CA0305F660^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("func (c *PageOverlays) handleButton(event vugu.DOMEvent) {" + + " c.SetModal(&overlay.ModalRequester{\n" + + " SymbolSlot: &icons.LInfoCircle{AttrMap: vugu.AttrMap{\"style\": \"font-size: 2em;\"}},\n" + + " Title: \"Simple requester\",\n" + + " Message: \"This is a simple modal requester, are you happy with it?\\nIt also supports multi line text!\",\n" + + " ClickAbort: input.ClickFunc(func(event input.ClickEvent) {}),\n" + + " ClickYes: input.ClickFunc(func(event input.ClickEvent) {}),\n" + + " })\n" + + "}") + 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(0x5A0135D77FE2347F^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.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleButton(event) }) + 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: "Open simple modal"} + 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"} + 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"} + 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", Attr: []vugu.VGAttribute(nil)}) + } + vgout.AppendCSS(vgn) + return vgout +} + +// 'fix' unused imports +var _ fmt.Stringer +var _ reflect.Type +var _ vjson.RawMessage +var _ js.Value diff --git a/root.go b/root.go index 04e57cd..2660bae 100644 --- a/root.go +++ b/root.go @@ -1,9 +1,12 @@ package main import ( + "git.d3nexus.de/Dadido3/D3vugu-components/components/overlay" "github.com/vugu/vugu" ) type Root struct { - Body vugu.Builder + Body vugu.Builder `vugu:"data"` + + OverlayContainer *overlay.Container `vugu:"data"` } diff --git a/root.vugu b/root.vugu index cf110f9..cfd823d 100644 --- a/root.vugu +++ b/root.vugu @@ -3,6 +3,7 @@
+ @@ -24,6 +25,10 @@
Colors
+ + +
Overlays
+
diff --git a/root_vgen.go b/root_vgen.go index e87dad5..ca0bc67 100644 --- a/root_vgen.go +++ b/root_vgen.go @@ -46,7 +46,18 @@ func (c *Root) 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(0x13D2A66973251153^vgin.CurrentPositionHash(), vgiterkey) + var vgcomp vugu.Builder = c.OverlayContainer + if vgcomp != nil { + vgin.BuildEnv.WireComponent(vgcomp) + 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\t"} + vgparent.AppendChild(vgn) + { + vgcompKey := vugu.MakeCompKey(0x961FC23E1D0E2B0D^vgin.CurrentPositionHash(), vgiterkey) // ask BuildEnv for prior instance of this specific component vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.Sidebar) if vgcomp == nil { @@ -65,7 +76,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"} vgparent.AppendChild(vgn) { - vgcompKey := vugu.MakeCompKey(0xE938629831D22C73^vgin.CurrentPositionHash(), vgiterkey) + vgcompKey := vugu.MakeCompKey(0xB9941BB3060B0608^vgin.CurrentPositionHash(), vgiterkey) // ask BuildEnv for prior instance of this specific component vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.ButtonFullscreen) if vgcomp == nil { @@ -92,7 +103,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"} vgparent.AppendChild(vgn) { - vgcompKey := vugu.MakeCompKey(0x4F2770B0440D3896^vgin.CurrentPositionHash(), vgiterkey) + vgcompKey := vugu.MakeCompKey(0x9BCC66709F5B5FC4^vgin.CurrentPositionHash(), vgiterkey) // ask BuildEnv for prior instance of this specific component vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry) if vgcomp == nil { @@ -110,7 +121,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { _ = vgparent { - vgcompKey := vugu.MakeCompKey(0xE60BDC191D489035^vgin.CurrentPositionHash(), vgiterkey) + vgcompKey := vugu.MakeCompKey(0x2888A7DC96618E2B^vgin.CurrentPositionHash(), vgiterkey) // ask BuildEnv for prior instance of this specific component vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LHome) if vgcomp == nil { @@ -149,7 +160,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"} vgparent.AppendChild(vgn) { - vgcompKey := vugu.MakeCompKey(0xD88B026382EDB995^vgin.CurrentPositionHash(), vgiterkey) + vgcompKey := vugu.MakeCompKey(0x23321930E313B763^vgin.CurrentPositionHash(), vgiterkey) // ask BuildEnv for prior instance of this specific component vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry) if vgcomp == nil { @@ -167,7 +178,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { _ = vgparent { - vgcompKey := vugu.MakeCompKey(0x9422483909AB3545^vgin.CurrentPositionHash(), vgiterkey) + vgcompKey := vugu.MakeCompKey(0x50779F17FE66AB6A^vgin.CurrentPositionHash(), vgiterkey) // ask BuildEnv for prior instance of this specific component vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LStar) if vgcomp == nil { @@ -206,7 +217,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"} vgparent.AppendChild(vgn) { - vgcompKey := vugu.MakeCompKey(0x804942A156C36E40^vgin.CurrentPositionHash(), vgiterkey) + vgcompKey := vugu.MakeCompKey(0x6358DCE5F06DD9C5^vgin.CurrentPositionHash(), vgiterkey) // ask BuildEnv for prior instance of this specific component vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry) if vgcomp == nil { @@ -224,7 +235,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { _ = vgparent { - vgcompKey := vugu.MakeCompKey(0xA158CCD6344C8F14^vgin.CurrentPositionHash(), vgiterkey) + vgcompKey := vugu.MakeCompKey(0x1392BD562D0DC520^vgin.CurrentPositionHash(), vgiterkey) // ask BuildEnv for prior instance of this specific component vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LInfoCircle) if vgcomp == nil { @@ -263,7 +274,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"} vgparent.AppendChild(vgn) { - vgcompKey := vugu.MakeCompKey(0xFDEE0DA5229078F6^vgin.CurrentPositionHash(), vgiterkey) + vgcompKey := vugu.MakeCompKey(0x55C1CF2617845DEB^vgin.CurrentPositionHash(), vgiterkey) // ask BuildEnv for prior instance of this specific component vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry) if vgcomp == nil { @@ -281,7 +292,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { _ = vgparent { - vgcompKey := vugu.MakeCompKey(0x647FEAD3011C9D78^vgin.CurrentPositionHash(), vgiterkey) + vgcompKey := vugu.MakeCompKey(0xFBA2AAE0C18A3D58^vgin.CurrentPositionHash(), vgiterkey) // ask BuildEnv for prior instance of this specific component vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LCustomize) if vgcomp == nil { @@ -317,6 +328,63 @@ func (c *Root) 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\t\t\t"} + vgparent.AppendChild(vgn) + { + vgcompKey := vugu.MakeCompKey(0x236DDCBADDD06C42^vgin.CurrentPositionHash(), vgiterkey) + // ask BuildEnv for prior instance of this specific component + vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry) + if vgcomp == nil { + // create new one if needed + vgcomp = new(navigation.SidebarEntry) + vgin.BuildEnv.WireComponent(vgcomp) + } + vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around + vgcomp.URL = "/overlays/" + vgcomp.SymbolSlot = 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 + + { + vgcompKey := vugu.MakeCompKey(0x72B82E58E2F7EA80^vgin.CurrentPositionHash(), vgiterkey) + // ask BuildEnv for prior instance of this specific component + vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LDocument) + if vgcomp == nil { + // create new one if needed + vgcomp = new(icons.LDocument) + vgin.BuildEnv.WireComponent(vgcomp) + } + vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around + vgout.Components = append(vgout.Components, vgcomp) + vgn = &vugu.VGNode{Component: vgcomp} + vgparent.AppendChild(vgn) + } + return + }) + 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(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)} + vgparent.AppendChild(vgn) + { + vgparent := vgn + _ = vgparent + vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Overlays"} + 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\t\t"} vgparent.AppendChild(vgn) return @@ -331,7 +399,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"} vgparent.AppendChild(vgn) { - vgcompKey := vugu.MakeCompKey(0xC9B4FB5D75895609^vgin.CurrentPositionHash(), vgiterkey) + vgcompKey := vugu.MakeCompKey(0x4C3861E4C90B286D^vgin.CurrentPositionHash(), vgiterkey) // ask BuildEnv for prior instance of this specific component vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry) if vgcomp == nil { @@ -349,7 +417,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { _ = vgparent { - vgcompKey := vugu.MakeCompKey(0xF93E9305192E8C81^vgin.CurrentPositionHash(), vgiterkey) + vgcompKey := vugu.MakeCompKey(0x193E99FC3B0535F1^vgin.CurrentPositionHash(), vgiterkey) // ask BuildEnv for prior instance of this specific component vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LGlobe) if vgcomp == nil { @@ -388,7 +456,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"} vgparent.AppendChild(vgn) { - vgcompKey := vugu.MakeCompKey(0x7534CF12AA62BFDB^vgin.CurrentPositionHash(), vgiterkey) + vgcompKey := vugu.MakeCompKey(0xB388BDAC5D1B95AC^vgin.CurrentPositionHash(), vgiterkey) // ask BuildEnv for prior instance of this specific component vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry) if vgcomp == nil { @@ -406,7 +474,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { _ = vgparent { - vgcompKey := vugu.MakeCompKey(0x269733CB3FD93BD4^vgin.CurrentPositionHash(), vgiterkey) + vgcompKey := vugu.MakeCompKey(0xFE7C9C5BB6C1F6F7^vgin.CurrentPositionHash(), vgiterkey) // ask BuildEnv for prior instance of this specific component vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LSettings) if vgcomp == nil { diff --git a/router.go b/router.go index 5e86871..67d5633 100644 --- a/router.go +++ b/router.go @@ -6,6 +6,7 @@ import ( "log" "git.d3nexus.de/Dadido3/D3vugu-components/components/navigation" + "git.d3nexus.de/Dadido3/D3vugu-components/components/overlay" "github.com/vugu/vgrouter" "github.com/vugu/vugu" ) @@ -25,7 +26,9 @@ func vuguSetup(buildEnv *vugu.BuildEnv, eventEnv vugu.EventEnv) vugu.Builder { router.SetPathPrefix(urlPathPrefix) // Create root object. - root := &Root{} + root := &Root{ + OverlayContainer: &overlay.Container{}, + } var pageInfo navigation.PageInfo @@ -37,6 +40,9 @@ func vuguSetup(buildEnv *vugu.BuildEnv, eventEnv vugu.EventEnv) vugu.Builder { if c, ok := b.(navigation.PageInfoSetter); ok { c.PageInfoSet(&pageInfo) } + if c, ok := b.(overlay.OverlayContainerSetter); ok { + c.OverlayContainerSet(root.OverlayContainer) + } }) // Call wire function on root component. @@ -59,6 +65,10 @@ func vuguSetup(buildEnv *vugu.BuildEnv, eventEnv vugu.EventEnv) vugu.Builder { root.Body = &PageColors{} })) + router.MustAddRouteExact("/overlays/", vgrouter.RouteHandlerFunc(func(rm *vgrouter.RouteMatch) { + root.Body = &PageOverlays{} + })) + router.MustAddRouteExact("/user/", vgrouter.RouteHandlerFunc(func(rm *vgrouter.RouteMatch) { root.Body = &PageUser{} })) diff --git a/static/css/d3c-theme-base.css b/static/css/d3c-theme-base.css index 60a5faf..3076511 100644 --- a/static/css/d3c-theme-base.css +++ b/static/css/d3c-theme-base.css @@ -9,10 +9,12 @@ --d3c-color-highlighted: #b7b7b7; --d3c-color-selected: #b7b7b7; --d3c-color-clicked: #b7b7b7; + + --d3c-color-shadow: rgba(0, 0, 0, 0.2); } .d3c-color-layer-1 { - --d3c-color-background: rgb(232, 232, 232); + --d3c-color-background: #e8e8e8; --d3c-color-text: black; --d3c-color-border: #b7b7b7; @@ -24,7 +26,7 @@ } .d3c-color-layer-2 { - --d3c-color-background: rgb(207, 207, 207); + --d3c-color-background: #cfcfcf; --d3c-color-text: black; --d3c-color-border: #b7b7b7;