refactor: convert shared form helpers and components to TypeScript (CM-1579)

frontend/.eslint/legacy-files.json

@@ -96,12 +96,8 @@
     "src/shared/banner/banner.vue",
     "src/shared/empty-state/empty-state-cta.vue",
     "src/shared/empty-state/empty-state.vue",
-    "src/shared/form/array-input.vue",
     "src/shared/form/autocomplete-many-input.vue",
     "src/shared/form/autocomplete-one-input.vue",
-    "src/shared/form/form-errors.vue",
-    "src/shared/form/form-item.vue",
-    "src/shared/form/inline-select-input.vue",
     "src/shared/form/keywords-input.vue",
     "src/shared/image/image.vue",
     "src/shared/layout/page-wrapper.vue",
@@ -448,10 +444,6 @@
     "src/shared/avatar/avatar-new-badge.vue",
     "src/shared/components/globals.vue",
     "src/shared/dialog/delete-confirm-dialog.vue",
-    "src/shared/form/array-input.vue",
-    "src/shared/form/form-errors.vue",
-    "src/shared/form/form-item.vue",
-    "src/shared/form/inline-select-input.vue",
     "src/shared/image/image.vue",
     "src/shared/loading/page-loader.vue",
     "src/shared/message/toaster-container.vue",

frontend/src/shared/form/array-input.vue

@@ -25,36 +25,33 @@
   </article>
 </template>
 
-<script setup>
-import { computed, defineEmits, defineProps } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 import { required } from '@vuelidate/validators';
-import useVuelidate from '@vuelidate/core';
+import useVuelidate, { type ValidationArgs } from '@vuelidate/core';
 import AppFormItem from '@/shared/form/form-item.vue';
 
-const props = defineProps({
-  modelValue: {
-    type: String,
-    required: true,
-  },
-  placeholder: {
-    type: String,
-    default: null,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  inputClass: {
-    type: String,
-    default: '',
-  },
-  inputLabel: {
-    type: String,
-    default: '',
-  },
+defineOptions({ name: 'AppArrayInput' });
+
+const props = withDefaults(defineProps<{
+  modelValue: string;
+  placeholder?: string | null;
+  disabled?: boolean;
+  inputClass?: string;
+  inputLabel?: string;
+}>(), {
+  placeholder: null,
+  disabled: false,
+  inputClass: '',
+  inputLabel: '',
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits<{(e: 'update:modelValue', value: string): void;
+}>();
+
+defineSlots<{
+  after?:() => unknown;
+}>();
 
 const rules = {
   required,
@@ -69,11 +66,5 @@ const model = computed({
   },
 });
 
-const $v = useVuelidate(rules, model);
-</script>
-
-<script>
-export default {
-  name: 'AppArrayInput',
-};
+const $v = useVuelidate<string, ValidationArgs>(rules, model);
 </script>

frontend/src/shared/form/element-change.js → frontend/src/shared/form/element-change.ts

@@ -1,9 +1,15 @@
-import { ref, computed } from 'vue';
+import {
+  ref, computed, type Ref, type ComputedRef,
+} from 'vue';
 
-export default function elementChangeDetector(element) {
+export default function elementChangeDetector(element: Ref<unknown>): {
+  temporaryElement: Ref<string>;
+  elementSnapshot: () => void;
+  hasElementChanged: ComputedRef<boolean>;
+} {
   const temporaryElement = ref('');
 
-  function elementSnapshot() {
+  function elementSnapshot(): void {
     temporaryElement.value = JSON.stringify(element.value);
   }
 

frontend/src/shared/form/form-change.ts

@@ -0,0 +1,23 @@
+import {
+  ref, computed, type Ref, type ComputedRef,
+} from 'vue';
+
+export default function formChangeDetector(form: object): {
+  temporaryForm: Ref<string>;
+  formSnapshot: () => void;
+  hasFormChanged: ComputedRef<boolean>;
+} {
+  const temporaryForm = ref('');
+
+  function formSnapshot(): void {
+    temporaryForm.value = JSON.stringify(form);
+  }
+
+  const hasFormChanged = computed(() => temporaryForm.value !== JSON.stringify(form));
+
+  return {
+    temporaryForm,
+    formSnapshot,
+    hasFormChanged,
+  };
+}

frontend/src/shared/form/form-errors.vue

@@ -10,40 +10,29 @@
   </div>
 </template>
 
-<script setup>
-import { computed, defineProps } from 'vue';
+<script setup lang="ts">
+import { computed, unref } from 'vue';
+import type { ErrorObject } from '@vuelidate/core';
 
-const props = defineProps({
-  validation: {
-    required: false,
-    type: Object,
-    default: () => ({}),
-  },
-  errorMessages: {
-    required: false,
-    type: Object,
-    default: () => ({}),
-  },
-  hideDefault: {
-    required: false,
-    type: Boolean,
-    default: false,
-  },
-  errorIcon: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  errorClass: {
-    required: false,
-    type: String,
-    default: '',
-  },
+defineOptions({ name: 'AppFormErrors' });
+
+const props = withDefaults(defineProps<{
+  validation?: { $errors?: ErrorObject[] };
+  errorMessages?: Record<string, string>;
+  hideDefault?: boolean;
+  errorIcon?: string;
+  errorClass?: string;
+}>(), {
+  validation: () => ({}),
+  errorMessages: () => ({}),
+  hideDefault: false,
+  errorIcon: '',
+  errorClass: '',
 });
 
 const errors = computed(() => props.validation?.$errors || []);
 
-const errorMessage = (error) => {
+const errorMessage = (error: ErrorObject) => {
   const prop = `${error.$property}-${error.$validator}`;
   if (
     props.errorMessages
@@ -52,14 +41,8 @@ const errorMessage = (error) => {
     return props.errorMessages[prop];
   }
   if (!props.hideDefault) {
-    return error.$message;
+    return unref(error.$message);
   }
   return '';
 };
 </script>
-
-<script>
-export default {
-  name: 'AppFormErrors',
-};
-</script>

frontend/src/shared/form/form-item.vue

@@ -33,79 +33,54 @@
   </div>
 </template>
 
-<script setup>
-import { computed } from 'vue';
+<script setup lang="ts">
+import { computed, unref } from 'vue';
+import type { ErrorObject } from '@vuelidate/core';
 
-const props = defineProps({
-  validation: {
-    required: false,
-    type: Object,
-    default: () => ({}),
-  },
-  label: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  formId: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  required: {
-    required: false,
-    type: Boolean,
-    default: false,
-  },
-  errorMessages: {
-    required: false,
-    type: Object,
-    default: () => ({}),
-  },
-  filterErrors: {
-    required: false,
-    type: Array,
-    default: () => null,
-  },
-  showError: {
-    required: false,
-    type: Boolean,
-    default: true,
-  },
-  errorIcon: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  errorClass: {
-    required: false,
-    type: String,
-    default: '',
-  },
+defineOptions({ name: 'AppFormItem' });
+
+const props = withDefaults(defineProps<{
+  validation?: { $errors?: ErrorObject[] };
+  label?: string;
+  formId?: string;
+  required?: boolean;
+  errorMessages?: Record<string, string>;
+  filterErrors?: string[] | null;
+  showError?: boolean;
+  errorIcon?: string;
+  errorClass?: string;
+}>(), {
+  validation: () => ({}),
+  label: '',
+  formId: '',
+  required: false,
+  errorMessages: () => ({}),
+  filterErrors: null,
+  showError: true,
+  errorIcon: '',
+  errorClass: '',
 });
 
+defineSlots<{
+  default?:() => unknown;
+}>();
+
 const errors = computed(() => props.validation?.$errors || []);
 
-const enabledError = (errors) => {
+const enabledError = (errors: ErrorObject[]) => {
   if (props.filterErrors && props.filterErrors.length > 0 && errors.length > 0) {
     return props.filterErrors.includes(errors[0].$validator);
   }
   return errors.length > 0;
 };
 
-const errorMessage = (error) => {
+const errorMessage = (error: ErrorObject) => {
   if (
     props.errorMessages
     && props.errorMessages[error.$validator]
   ) {
     return props.errorMessages[error.$validator];
   }
-  return error.$message;
-};
-</script>
-
-<script>
-export default {
-  name: 'AppFormItem',
+  return unref(error.$message);
 };
 </script>