initial

frontend/app/components/SimpleForm.vue

@@ -0,0 +1,66 @@
+<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>