speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-05-11 02:48:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Rework NiceForm to get initial Values working

Browse source
This commit is contained in:
Samuel Lorch 2023-04-12 20:36:33 +02:00
parent 6444636abd
commit 1b4e219fda
1 changed files with 24 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { useForm } from 'vee-validate';
const props = defineModel<{ const props = defineModel<{
title: string title?: string
validationSchema: Record<string, string | Function>, validationSchema?: Record<string, string | Function>,
sections: { sections: {
title: string title: string
fields: { fields: {
@ -15,23 +16,38 @@ const props = defineModel<{
rules?: (value: any) => true | string, rules?: (value: any) => true | string,
}[], }[],
}[], }[],
modelValue: any, initialValues: any,
submit: (value: any) => boolean, submit: (value: any) => boolean,
discard: () => void, discard: () => void,
}>(); }>();
let { sections, submit, discard, validationSchema } = $(props); let { sections, submit, discard, validationSchema, initialValues } = $(props);
let { setValues, handleSubmit, values } = useForm({
initialValues: initialValues,
validationSchema: validationSchema,
});
const onSubmit = handleSubmit(values => {
submit(values);
});
// idk why this is needed
Object.assign(values, initialValues);
onMounted(async() => {
setValues(initialValues);
});
</script> </script>
<template> <template>
<ValidationForm as="div" v-slot="{ values, handleSubmit }" @submit="submit" :validationSchema="validationSchema"> <div>
<template v-for="(section, index) in sections" :key="index"> <template v-for="(section, index) in sections" :key="index">
<h4 v-if="section.title">{{ section.title }}</h4> <h4 v-if="section.title">{{ section.title }}</h4>
<div class="section"> <div class="section">
<template v-for="(field, index) in section.fields" :key="index"> <template v-for="(field, index) in section.fields" :key="index">
<template v-if="field.enabled ? field.enabled(values) : true"> <template v-if="field.enabled ? field.enabled(values) : true">
<label :for="field.key" v-text="field.label" /> <label :for="field.key" v-text="field.label"/>
<Field v-if="field.as == 'NumberBox'" :name="field.key" :as="field.as" :rules="field.rules" v-bind="field.props" @update:modelValue="values[field.key] = Number(values[field.key])"/> <Field v-if="field.as == 'NumberBox'" :name="field.key" :as="field.as" :rules="field.rules" v-bind="field.props" @update:modelValue="values[field.key] = Number(values[field.key])"/>
<Field v-else :name="field.key" :as="field.as" :rules="field.rules" v-bind="field.props"/> <Field v-else :name="field.key" :as="field.as" :rules="field.rules" v-bind="field.props"/>
<ErrorMessage :name="field.key" /> <ErrorMessage :name="field.key" />
@ -41,13 +57,13 @@ let { sections, submit, discard, validationSchema } = $(props);
</template> </template>
<div class="actions"> <div class="actions">
<div class="flex-grow"/> <div class="flex-grow"/>
<button @click="handleSubmit($event, submit)">Submit</button> <button @click="onSubmit">Submit</button>
<div class="space"/> <div class="space"/>
<button @click="discard">Discard</button> <button @click="discard">Discard</button>
<div class="flex-grow"/> <div class="flex-grow"/>
</div> </div>
<p>{{ values }}</p> <p>{{ values }}</p>
</ValidationForm> </div>
</template> </template>
<style scoped> <style scoped>