D3vugu-components/components/input/field.vugu

<div vg-attr='utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1684925699 d3c-button-borderless"}'>
	<input :id="c.ID" :type="c.inputType()" :value="c.content()" @input="c.handleChange(event)">
	<vg-comp expr="c.DefaultSlot"></vg-comp>
	<div class="d3c-1684925699-error d3c-color-critical" vg-if="c.err != nil"></div>
</div>

<style>
	.d3c-1684925699 {
		position: relative;
		display: inline-flex;
		overflow: hidden;
		/*margin: 0.5em 0;*/
		padding-left: 0.25em;
		border-radius: 4px;
		height: 2em;
		border: 1px solid var(--d3c-color-border);
		background-color: var(--d3c-color-background);
		color: var(--d3c-color-text);
		/*gap: 0.5em;*/
	}

	.d3c-1684925699-error {
		position: absolute;
		height: 2px;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: var(--d3c-color-background);
	}

	.d3c-1684925699 > input {
		border: none !important;
		outline: none;
		flex-grow: 1;
	}

	.d3c-1684925699:has(> input:focus) {
		outline: 2px solid var(--d3c-color-accent);
	}
</style>

<script type="application/x-go">
	import (
		//"git.d3nexus.de/Dadido3/D3vugu-components/icons"
		"git.d3nexus.de/Dadido3/D3vugu-components/utils"
	)
</script>