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

Rework NiceForm

Browse source
This commit is contained in:
Samuel Lorch 2023-04-03 22:44:11 +02:00
parent a4559a98e8
commit 46b94ec677
1 changed files with 37 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,68 +1,61 @@
<script setup lang="ts">
import { loadConfigFromFile } from 'vite';
const props = defineModel<{
title: string
sections: {
title: string
fields: {
key: string,
label: string,
component: () => Component,
as: string,
props: any,
default: any,
if?: () => boolean,
}[]
enabled?: (values: Record<string, any>) => Boolean,
rules?: (value: any) => true | string,
}[],
}[],
modelValue: any,
}>();
let { title, fields, modelValue } = $(props);
let { sections } = $(props);
let enabled = $ref({name: true} as any);
const emit = defineEmits<{
(event: 'update:modelValue'): void,
(event: 'update:enabled'): void
}>();
onMounted(async() => {
for (const field of fields) {
if (modelValue[field.key] == undefined) {
if (!field.default) {
modelValue[field.key] = {};
} else {
modelValue[field.key] = field.default;
}
enabled[field.key] = true;
}
}
console.log("modelValue", modelValue, enabled);
});
</script>
<template>
<div class="form">
<h2>{{ title }}</h2>
<template v-for="(field, index) in fields" :key="index">
<template v-if="enabled[field.key]">
<ValidationForm as="div" v-slot="{ values }" @submit="false">
<template v-for="(section, index) in sections" :key="index">
<h4 v-if="section.title">{{ section.title }}</h4>
<div class="section">
<template v-for="(field, index) in section.fields" :key="index">
<template v-if="field.enabled ? field.enabled(values) : true">
<label :for="field.key" v-text="field.label" />
<component :name="field.key" :is="field.component()" v-bind="field.props" v-model="modelValue[field.key]"/>
<Field :name="field.key" :as="field.as" :rules="field.rules" v-bind="field.props" />
<ErrorMessage :name="field.key" />
</template>
</template>
</div>
</template>
<p>{{ values }}</p>
</ValidationForm>
</template>
<style scoped>
.form {
.section {
display: grid;
grid-template-columns: auto 1fr;
padding: 0.5rem;
gap: 0.5rem;
}
.form > :is(button, .button, h2) {
h4,
p {
grid-column: 1 / 3;
}
.form > :is(label) {
grid-column: 1;
h4 {
background-color: var(--cl-bg-hl);
padding: 0.3rem;
padding-left: 0.5rem;
;
}
</style>