66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<div class="p-2 bg-neutral-50 rounded-lg shadow-neutral-300 shadow-sm">
|
|
<table class="table">
|
|
<tbody>
|
|
<tr v-for="(prop, idx) in type.properties" :key="idx">
|
|
<td class="font-semibold w-0 text-nowrap px-2">
|
|
{{ prop.name }}
|
|
</td>
|
|
<td>
|
|
<u-input
|
|
v-if="prop.type === 'string'"
|
|
v-model="formData[prop.name]"
|
|
type="text"
|
|
class="w-full"
|
|
/>
|
|
<u-textarea
|
|
v-if="prop.type === 'text'"
|
|
v-model="formData[prop.name]"
|
|
class="w-full"
|
|
/>
|
|
<u-input
|
|
v-if="prop.type === 'number'"
|
|
v-model="formData[prop.name]"
|
|
type="number"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<h4 class="mx-0">Form Data</h4>
|
|
<pre class="mx-0 my-0">{{ formData }}</pre>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { DataType } from "~/types";
|
|
|
|
interface Props {
|
|
type: DataType;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const formData = ref<Record<string, string>>({});
|
|
|
|
watch(
|
|
props,
|
|
() => {
|
|
// Property value changed, resetting the form data
|
|
formData.value = {};
|
|
},
|
|
{ deep: true }
|
|
);
|
|
</script>
|
|
|
|
<style>
|
|
/* Override default high margins for <ol> lists */
|
|
.table {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
</style>
|