D3vugu-components/components/input/tags.vugu
David Vogel a587fea398 Rework value and list binder
- Rename FieldBinder to ValueBinder
- Split ValueBinder interface into ValueGetter, ValueSetter and HTMLInputTyper
- Add non pointer types to ValueBindAny.StringValue
- Move encoding.TextMarshaler in type switch
- Simplify ListBinder, and reuse ValueBinder logic
- Add ListBindGenericValues type
2023-07-03 00:18:58 +02:00

34 lines
1.1 KiB
Plaintext

<div vg-attr='utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1685640525"}'>
<input:Field :Bind="ValueBindAny{Value: &c.fieldValue}"><input:Button @Click="c.handleButtonAdd(event)"><icons:LPlus></icons:LPlus></input:Button></input:Field>
<div vg-for='i, entry := range c.keyValuePairs()' class="d3c-1685640525-tag d3c-color-layer-1 d3c-button-borderless"><span vg-content="entry.Value"></span><input:Button @Click="c.handleButtonDelete(event, i)"><icons:LDelete></icons:LDelete></input:Button></div>
</div>
<style>
.d3c-1685640525 {
display: inline-flex;
flex-direction: column;
gap: 0.5em;
/*padding: 0.25em 0.5em;*/
/*margin: 0.5em 0;*/
min-width: 10em;
}
.d3c-1685640525-tag {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 0.5em;
border-radius: 4px;
gap: 1em;
background-color: var(--d3c-color-background);
color: var(--d3c-color-text);
}
</style>
<script type="application/x-go">
import (
"git.d3nexus.de/Dadido3/D3vugu-components/icons"
"git.d3nexus.de/Dadido3/D3vugu-components/utils"
)
</script>