speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-09-13 15:19:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add Form Submit Functionality

Browse source
This commit is contained in:
Samuel Lorch 2023-04-03 23:44:23 +02:00
parent 54460ca3d5
commit d7f2eb64f9
4 changed files with 47 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

28
client/src/components/NiceForm.vue
View file

@ -15,14 +15,16 @@ const props = defineModel<{
}[],
}[],
modelValue: any,
submit: (value: any) => boolean,
discard: () => void,
}>();
let { sections } = $(props);
let { sections, submit, discard } = $(props);
</script>
<template>
<ValidationForm as="div" v-slot="{ values }" @submit="false">
<ValidationForm as="form" v-slot="{ values }" @submit="submit">
<template v-for="(section, index) in sections" :key="index">
<h4 v-if="section.title">{{ section.title }}</h4>
<div class="section">
@ -35,17 +37,39 @@ let { sections } = $(props);
</template>
</div>
</template>
<div class="actions">
<div class="flex-grow"/>
<button>Submit</button>
<div class="space"/>
<button @click="discard">Discard</button>
<div class="flex-grow"/>
</div>
<p>{{ values }}</p>
</ValidationForm>
</template>
<style scoped>
form {
display: flex;
flex-direction: column;
}
.section {
display: grid;
grid-template-columns: auto 1fr;
padding: 0.5rem;
gap: 0.5rem;
}
.actions {
flex-direction: row;
}
.space {
padding: 0.2rem;
}
.actions > button {
flex-grow: true;
}
h4,
p {