1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
<template>
<form :id="form.id" class="dynamic-form form" :path="path" @submit.prevent="onSubmit">
<fieldset class="dynamic-form input-group" :disabled="disabled">
<!-- Create a new div element for each field in the form -->
<div v-show="!field.hidden"
v-for="field in fields"
:key="field"
:class="{ 'dirty': field.validator.$dirty, 'data-invalid': field.validator.$invalid }"
class="dynamic-form input-container"
>
<!-- label above the fields -->
<label :for="field.id" class="dynamic-form input-label" >
{{ field.label }}
</label>
<!-- Determine select, input, or textarea -->
<select v-if="isSelect(field)"
v-model="field.validator.$model"
:id="field.id"
:disabled="field.disabled"
class="dynamic-form dynamic-input input-select"
@change="onInput(field)"
>
<option v-for="option in field.options" :key="option.value" :value="option.value">
{{ option.label }}
</option>
</select>
<textarea v-else-if="isTextArea(field)"
v-model="field.validator.$model"
:id="field.id"
:disabled="field.disabled"
class="dynamic-form dynamic-input input-textarea"
@input="onInput(field)"
/>
<input v-else
v-model="field.validator.$model"
:id="field.id"
:type="field.type"
:name="field.name"
:disabled="field.disabled"
class="dynamic-form dynamic-input input"
:placeholder="placeholder(field)"
@input="onInput(field)"
>
<div class="dynamic-form field-description">
<p>{{ field.description }}</p>
</div>
</div>
</fieldset>
</form>
</template>
<script setup lang="ts">
import { defaultTo, cloneDeep, forEach } from 'lodash-es'
import { toRefs, computed } from 'vue'
const props = defineProps<{
form: any
disabled: boolean
validator: any
}>()
const emit = defineEmits(['input', 'submit'])
const { form, disabled, validator } = toRefs(props)
const schema = computed(() => cloneDeep(form.value))
const path = computed(() => defaultTo(form.value.path, '#'))
const fields = computed(() =>{
const ff = defaultTo(schema.value.fields, [])
//Set validators for the field, storeing the fields in the schema item
forEach(ff, field => field.validator = validator.value[field.name])
return ff;
})
const isSelect = (field : any) => field.type === 'select'
const isTextArea = (field : any) => field.type === 'textarea'
const placeholder = (field : any) => defaultTo(field.placeholder, field.label)
const onSubmit = () => emit('submit')
const onInput = (field : string) => emit('input', field)
</script>
|
