fix(vfg): typescript clean up [khcp-11325] (#1900)

Convert files to use setup syntax/cleanup ts.
Part of [KHCP-11325](https://konghq.atlassian.net/browse/KHCP-11325).

Author: kaiarrowood

packages/core/forms/src/components/fields/abstractField.ts

@@ -8,7 +8,7 @@ import isString from 'lodash-es/isString'
 import arrayUniq from 'lodash-es/uniq'
 import uniqueId from 'lodash-es/uniqueId'
 import { slugifyFormID } from '../../utils/schema'
-import validators from '../../utils/validators'
+import { validators } from '../../utils/validators'
 
 function convertValidator(validator) {
   if (isString(validator)) {

packages/core/forms/src/composables/useAbstractFields.ts

@@ -7,7 +7,7 @@ import isFunction from 'lodash-es/isFunction'
 import isString from 'lodash-es/isString'
 import arrayUniq from 'lodash-es/uniq'
 import uniqueId from 'lodash-es/uniqueId'
-import validators from '../utils/validators'
+import { validators } from '../utils/validators'
 import { slugifyFormID } from '../utils/schema'
 
 interface AbstractFieldParams {

packages/core/forms/src/locales/en.json

@@ -109,6 +109,29 @@
       "address_example": "e.g. localhost:6379"
     }
   },
+  "validators": {
+    "field_is_required": "This field is required",
+    "invalid_format": "Invalid format",
+    "number_too_small": "The number is too small. Minimum: {0}",
+    "number_too_large": "The number is too large. Maximum: {0}",
+    "invalid_number": "Invalid number",
+    "invalid_integer": "The value is not an integer",
+    "text_too_short": "The length of text is too short. Current: {0}, Minimum: {1}",
+    "text_too_long": "The length of text is too long. Current: {0}, Maximum: {1}",
+    "this_not_text": "This is not a text",
+    "this_not_array": "This is not an array",
+    "select_min_items": "Select minimum {0} items",
+    "select_max_items": "Select maximum {0} items",
+    "invalid_date": "Invalid date",
+    "date_is_early": "The date is too early. Current: {0}, Minimum: {1}",
+    "date_is_late": "The date is too late. Current: {0}, Maximum: {1}",
+    "invalid_email": "Invalid e-mail address",
+    "invalid_url": "Invalid URL",
+    "invalid_card": "Invalid card format",
+    "invalid_card_number": "Invalid card number",
+    "invalid_text_contain_number": "Invalid text - cannot contains numbers or special characters",
+    "invalid_tex_contain_spec": "Invalid text - cannot contains special characters"
+  },
   "vfg": {
     "labels": {
       "on": "On",

packages/core/forms/src/types/form-generator.ts

@@ -24,3 +24,8 @@ export interface AutofillSlotProps {
 }
 
 export type AutofillSlot = Slot<AutofillSlotProps>
+
+export type Validator = (value: any, field: any, model: any, messages: Record<string, string>) => string[]
+export interface Validators {
+  [key: string]: Validator
+}

packages/core/forms/src/utils/dateFieldHelper.ts

@@ -5,8 +5,10 @@
  */
 export const uuidRegEx = '[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}'
 
-export function isValidUuid(str: string) {
-  if (!str) return false
+export const isValidUuid = (str: string) => {
+  if (!str) {
+    return false
+  }
 
   return str.length === 36 && new RegExp(`^${uuidRegEx}$`).test(str)
 }

packages/core/forms/src/utils/isValidUuid.ts

@@ -6,7 +6,7 @@ import isObject from 'lodash-es/isObject'
 import set from 'lodash-es/set'
 
 // Create a new model by schema default values
-export const createDefaultObject = (schema: any, obj: Record<string, any> = {}) => {
+export const createDefaultObject = (schema: any, obj: Record<string, any> = {}): Record<string, any> => {
   each(schema.fields, (field: any) => {
     if (get(obj, field.model) === undefined && field.default !== undefined) {
       if (isFunction(field.default)) {
@@ -16,22 +16,26 @@ export const createDefaultObject = (schema: any, obj: Record<string, any> = {})
       } else set(obj, field.model, field.default)
     }
   })
+
   return obj
 }
 
 // Get a new model which contains only properties of multi-edit fields
-export const getMultipleFields = (schema: any) => {
-  const res: any = []
+export const getMultipleFields = (schema: any): any[] => {
+  const res: any[] = []
+
   each(schema.fields, field => {
-    if (field.multi === true) res.push(field)
+    if (field.multi === true) {
+      res.push(field)
+    }
   })
 
   return res
 }
 
 // Merge many models to one 'work model' by schema
-export const mergeMultiObjectFields = (schema: any, objs: any) => {
-  const model = {}
+export const mergeMultiObjectFields = (schema: any, objs: any): Record<string, any> => {
+  const model: Record<string, any> = {}
 
   const fields = getMultipleFields(schema)
 
@@ -41,11 +45,12 @@ export const mergeMultiObjectFields = (schema: any, objs: any) => {
     const path = field.model
 
     each(objs, (obj: any) => {
-      const v = get(obj, path)
+      const val = get(obj, path)
+
       if (notSet) {
-        mergedValue = v
+        mergedValue = val
         notSet = false
-      } else if (mergedValue !== v) {
+      } else if (mergedValue !== val) {
         mergedValue = undefined
       }
     })
@@ -56,50 +61,50 @@ export const mergeMultiObjectFields = (schema: any, objs: any) => {
   return model
 }
 
-export const slugifyFormID = (schema: any, prefix: any = '') => {
+export const slugifyFormID = (schema: any, prefix: any = ''): string => {
   // Try to get a reasonable default id from the schema,
   // then slugify it.
   if (typeof schema.id !== 'undefined') {
     // If an ID's been explicitly set, use it unchanged
-    return prefix + schema.id
+    return prefix + schema.id + ''
   } else {
     // Return the slugified version of either:
     return (
       prefix +
       (schema.inputName || schema.label || schema.model || '')
-      // NB: This is a very simple, conservative, slugify function,
-      // avoiding extra dependencies.
+        // NB: This is a very simple, conservative, slugify function,
+        // avoiding extra dependencies.
         .toString()
         .trim()
         .toLowerCase()
-      // Spaces & underscores to dashes
+        // Spaces & underscores to dashes
         .replace(/ |_/g, '-')
-      // Multiple dashes to one
+        // Multiple dashes to one
         .replace(/-{2,}/g, '-')
-      // Remove leading & trailing dashes
+        // Remove leading & trailing dashes
         .replace(/^-+|-+$/g, '')
-      // Remove anything that isn't a (English/ASCII) letter, number or dash.
+        // Remove anything that isn't a (English/ASCII) letter, number or dash.
         .replace(/([^a-zA-Z0-9-]+)/g, '')
     )
   }
 }
 
-export const slugify = (name: any = '') => {
+export const slugify = (name: any = ''): string => {
   // Return the slugified version of either:
   return (
     name
-    // NB: This is a very simple, conservative, slugify function,
-    // avoiding extra dependencies.
+      // NB: This is a very simple, conservative, slugify function,
+      // avoiding extra dependencies.
       .toString()
       .trim()
-    // .toLowerCase()
-    // Spaces to dashes
+      // .toLowerCase()
+      // Spaces to dashes
       .replace(/ /g, '-')
-    // Multiple dashes to one
+      // Multiple dashes to one
       .replace(/-{2,}/g, '-')
-    // Remove leading & trailing dashes
+      // Remove leading & trailing dashes
       .replace(/^-+|-+$/g, '')
-    // Remove anything that isn't a (English/ASCII) letter, number or dash.
+      // Remove anything that isn't a (English/ASCII) letter, number or dash.
       .replace(/([^a-zA-Z0-9-_/./:]+)/g, '')
   )
 }