From 99b6a88b6659f37140dbed2ffe6fbb4adf5f83c4 Mon Sep 17 00:00:00 2001
From: adroslice <adriel.m.slice@gmail.com>
Date: Sun, 22 Oct 2023 22:08:08 +0200
Subject: [PATCH] Add NicerForm Component (WIP) - Can replace NiceForm after
 consideration

---
 client/src/components/inputs/NicerForm.vue | 63 ++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 client/src/components/inputs/NicerForm.vue

diff --git a/client/src/components/inputs/NicerForm.vue b/client/src/components/inputs/NicerForm.vue
new file mode 100644
index 0000000..6c90d75
--- /dev/null
+++ b/client/src/components/inputs/NicerForm.vue
@@ -0,0 +1,63 @@
+<script lang="ts">
+import { equals, Index } from '../../util';
+
+export type Field = {
+  is: Component | string,
+  label?: string,
+  props?: any,
+  // actions?: Action[],
+  // forceCastNumber`?: bool,
+};
+export type Fields = Record<Index, Field>;
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  // Two-Way Bindings
+  modelValue?: Record<Index, any>,
+
+  // One-Way Bindings
+  fields?: Fields,
+  heading?: string,
+  headingLevel?: number,
+}>(), {
+  modelValue: () => ({}),
+  fields: () => ({}),
+  heading: '',
+  headingLevel: 2,
+});
+const { fields } = $(props);
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Record<Index, any>): void
+}>();
+
+// Local Variables for Two-Way bindings
+let modelValue: Record<Index, any> = $ref({});
+// Sync from v-model
+onMounted(() => {
+  watch(() => props.modelValue, (val) => {
+    if (equals(val, modelValue)) return;
+    modelValue = Object.assign(modelValue, val);
+  }, { deep: true, immediate: true });
+});
+// Sync to v-model
+watch($$(modelValue), (val) => {
+  if (equals(val, props.modelValue)) return;
+  emit('update:modelValue', Object.assign({}, val));
+}, { deep: true });
+</script>
+
+<template>
+  <div class="form">
+    <component v-if="heading" :is="`h${headingLevel}`" :text="heading"/>
+    <template v-for="[index, field] of Object.entries(fields)" :key="index">
+      <label v-if="field.label" v-text="field.label"/>
+      <component :is="field.is" v-model="modelValue[index]" v-bind="field.props"/>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+
+</style>