Refactor field composition

vue/dynamicforms/src/components/form/field.vue

@@ -1,23 +1,8 @@
-<template>
-  <v-col :class="cssClasses + columnClasses">
-    <component
-      :is="field.componentName"
-      v-model="fieldValue"
-      :field="field"
-      :actions="actions"
-      :errors="errors && errors[field.name]"
-      :show-label-or-help-text="showLabelOrHelpText"
-      @update:modelValueDisplay="updateModelValueDisplay"
-    />
-  </v-col>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import _ from 'lodash';
-import { defineComponent, inject } from 'vue';
+import { computed, inject, ref, Ref, watch } from 'vue';
 
 import { useActionHandler } from '../actions/action-handler-composable';
-import ActionHandlerMixin from '../actions/action-handler-mixin';
 import FilteredActions from '../actions/filtered-actions';
 
 import FormField from './definitions/field';
@@ -32,70 +17,80 @@ import DPlaceholder from './inputs/placeholder.vue';
 import DSelect from './inputs/select.vue';
 import DTextArea from './inputs/text-area.vue';
 
-export default /* #__PURE__ */ defineComponent({
-  name: 'FormField',
-  components: {
-    DCheckbox,
-    DCKEditor,
-    DDateTime,
-    DFile,
-    DInput,
-    DList,
-    DPassword: DInput,
-    DPlaceholder,
-    DSelect,
-    DTextArea,
-  },
-  mixins: [ActionHandlerMixin],
-  props: {
-    field: { type: FormField, required: true },
-    actions: { type: FilteredActions, required: true },
-    errors: { type: Object, required: true },
-    showLabelOrHelpText: { type: Boolean, default: true },
-    cssClasses: { type: String, default: 'col' },
-  },
-  setup() {
-    const { callHandler } = useActionHandler();
-    return { callHandler, payload: inject<FormPayload>('payload', {} as FormPayload) };
-  },
-  computed: {
-    columnClasses(): string {
-      const classes = this.field.widthClasses;
-      return classes ? ` ${classes}` : '';
-    },
-    fieldValue: {
-      get(): any { return this.payload[this.field.name]; },
-      set(value: any) {
-        this.payload[this.field.name] = value;
-      },
-    },
-  },
-  watch: {
-    fieldValue: {
-      handler(newValue: any, oldValue: any) {
-        this.debounceHandler(this, newValue, oldValue);
-      },
-      // in case there are nested values in the future
-      deep: true,
-    },
+interface Props {
+  field: FormField
+  actions: FilteredActions
+  errors: any
+  showLabelOrHelpText?: boolean
+  cssClasses?: string
+}
+
+const props = withDefaults(defineProps<Props>(), { cssClasses: 'col', showLabelOrHelpText: true });
+
+const { callHandler } = useActionHandler();
+const payload = inject<Ref<FormPayload>>('payload', ref({}) as Ref<FormPayload>);
+
+const columnClasses = computed<string>(() => {
+  const classes = props.field.widthClasses;
+  return classes ? ` ${classes}` : '';
+});
+
+const fieldValue = computed({
+  get(): any {
+    return payload.value[props.field.name];
   },
-  methods: {
-    updateModelValueDisplay(newValue: any) {
-      const fieldName = `${this.field.name}-display`;
-      if (this.payload[fieldName] === undefined || Object.getOwnPropertyDescriptor(this.payload, fieldName)?.writable) {
-        this.payload[fieldName] = newValue;
-      }
-    },
-    debounceHandler: _.debounce((self, newValue, oldValue) => {
-      self.callHandler(
-        self.actions.valueChanged,
-        { field: self.field.name, oldValue, newValue },
-      );
-    }, 600),
+  set(value: any) {
+    payload.value[props.field.name] = value;
   },
 });
+
+const components: { [key: string]: any } = {
+  DCheckbox,
+  DCKEditor,
+  DDateTime,
+  DFile,
+  DInput,
+  DList,
+  DPlaceholder,
+  DSelect,
+  DTextArea,
+};
+
+const component = computed(() => components?.[props.field.componentName] ?? DInput);
+
+const debounceHandler = _.debounce((newValue: any, oldValue: any) => {
+  callHandler(
+    props.actions.valueChanged,
+    { field: props.field.name, oldValue, newValue },
+  );
+}, 600);
+
+const updateModelValueDisplay = (newValue: any) => {
+  const fieldName = `${props.field.name}-display`;
+  if (Object.getOwnPropertyDescriptor(payload, fieldName)?.writable) {
+    payload.value[fieldName] = newValue;
+  }
+};
+
+watch(fieldValue, (newValue: any, oldValue: any) => {
+  debounceHandler(newValue, oldValue);
+});
 </script>
 
+<template>
+  <v-col :class="cssClasses + columnClasses">
+    <component
+      :is="component"
+      v-model="fieldValue"
+      :field="field"
+      :actions="actions"
+      :errors="errors && errors[field.name]"
+      :show-label-or-help-text="showLabelOrHelpText"
+      @update:modelValueDisplay="updateModelValueDisplay"
+    />
+  </v-col>
+</template>
+
 <style>
 label {
   margin-inline-end: .5em;