feat: add utils

Author: elonehoo

packages/vue-composition-form/src/utils/cloneObject.ts

@@ -0,0 +1,25 @@
+import { isFunction, isObject } from './index'
+
+export default function cloneObject<T>(data: T): T {
+  let copy: any
+  const isArray = Array.isArray(data)
+
+  if (data instanceof Date) {
+    copy = new Date(data)
+  } else if (data instanceof Set) {
+    copy = new Set(data)
+  } else if (isArray || isObject(data)) {
+    copy = isArray ? [] : {}
+    for (const key in data) {
+      if (isFunction(data[key])) {
+        copy = data
+        break
+      }
+      copy[key] = cloneObject(data[key])
+    }
+  } else {
+    return data
+  }
+
+  return copy
+}

packages/vue-composition-form/src/utils/constant.ts

@@ -0,0 +1 @@
+export const InvalidDate = new Date('foo')

packages/vue-composition-form/src/utils/createHandler.ts

@@ -0,0 +1,10 @@
+import type { FieldValues } from '../types/filed'
+import type { SubmitErrorHandler, SubmitHandler } from '../types/form'
+
+export function createSubmitHandler<T extends FieldValues = FieldValues>(fn: SubmitHandler<T>) {
+  return fn
+}
+
+export function createErrorHandler<T extends FieldValues = FieldValues>(fn: SubmitErrorHandler<T>) {
+  return fn
+}

packages/vue-composition-form/src/utils/deepEqual.ts

@@ -0,0 +1,43 @@
+import { isDateObject, isObject, isPrimitive } from '.'
+
+export function deepEqual(obj1: any, obj2: any) {
+  if (isPrimitive(obj1) || isPrimitive(obj2)) {
+    return obj1 === obj2
+  }
+
+  if (isDateObject(obj1) && isDateObject(obj2)) {
+    return obj1.getTime() === obj2.getTime()
+  }
+
+  const keys1 = Object.keys(obj1)
+  const keys2 = Object.keys(obj2)
+
+  if (keys1.length !== keys2.length) {
+    return false
+  }
+
+  for (const key of keys1) {
+    if (!keys2.includes(key)) {
+      return false
+    }
+
+    // avoid comparing HTMLElement
+    if (key !== 'ref') {
+      const val1 = obj1[key]
+      const val2 = obj2[key]
+
+      if (
+        isObject(val1) ||
+        isObject(val2) ||
+        (isObject(val1) && isObject(val2)) ||
+        (isDateObject(val1) && isDateObject(val2))
+          ? !deepEqual(val1, val2)
+          : val1 !== val2
+      ) {
+        return false
+      }
+    }
+  }
+
+  return true
+}

packages/vue-composition-form/src/utils/fieldElement.ts

@@ -0,0 +1,11 @@
+import type { FieldElement } from '../types/filed'
+
+export const isRadioInput = (el?: FieldElement): el is HTMLInputElement =>
+  el?.type === 'radio'
+
+export const isCheckBoxInput = (el?: FieldElement): el is HTMLInputElement =>
+  el?.type === 'checkbox'
+
+export const isRadioOrCheckboxInput = (
+  el?: FieldElement
+): el is HTMLInputElement => isRadioInput(el) || isCheckBoxInput(el)

packages/vue-composition-form/src/utils/getFormEl.ts

@@ -0,0 +1,27 @@
+import { unref } from 'vue'
+import type { MaybeRef } from '../types/utils'
+import type { FieldElement } from '../types/filed'
+import { isFieldElement } from './isFieldElement'
+import { isHTMLElement, isObject } from './index'
+
+const getValidFormElement = (el: HTMLElement) => el.querySelectorAll('input, textarea, select')[0] as FieldElement
+
+export function getFormEl(elRef: MaybeRef<any> | InputEvent): FieldElement | undefined {
+  elRef = unref(elRef)
+
+  if (isFieldElement(elRef)) {
+    return elRef
+  } else if (isHTMLElement(elRef)) {
+    return getValidFormElement(elRef)
+  } else if (isObject(elRef)) {
+    const keys = Reflect.ownKeys(elRef)
+    for (const key of keys) {
+      const val = unref(elRef[key])
+      if (isFieldElement(val)) {
+        return val
+      } else if (isHTMLElement(val)) {
+        return val.querySelectorAll('input, textarea, select')[0] as FieldElement
+      }
+    }
+  }
+}

packages/vue-composition-form/src/utils/getValidatorError.ts

@@ -0,0 +1,20 @@
+import type { RegisterOptions, ValidateResult } from '../types/validator'
+import type { FieldError } from '../types/errors'
+import { isBoolean, isString } from './index'
+
+export function getValidatorError(
+  result: ValidateResult,
+  type = 'validate'
+): FieldError | undefined {
+  if (isBoolean(result) && !result) {
+    return {
+      type: type as keyof RegisterOptions,
+      message: isString(result) ? result : '',
+    }
+  } else if (isString(result)) {
+    return {
+      type: type as keyof RegisterOptions,
+      message: result,
+    }
+  }
+}

packages/vue-composition-form/src/utils/index.ts

@@ -0,0 +1,44 @@
+export const isFunction = (val: unknown): val is Function =>
+  typeof val === 'function'
+
+export const isNumber = (val: unknown): val is number =>
+  typeof val === 'number' && !Number.isNaN(val)
+
+export const isString = (val: unknown): val is string => typeof val === 'string'
+
+export const isBoolean = (val: unknown): val is Boolean =>
+  typeof val === 'boolean'
+
+export const isObject = (val: unknown) =>
+  val !== null && typeof val === 'object'
+
+export const isArray = (val: unknown): val is Array<unknown> =>
+  Array.isArray(val)
+
+export const isEmptyObject = (val: unknown) =>
+  isObject(val) && Object.keys(val as object).length === 0
+
+export const isUndefined = (val: unknown): val is undefined =>
+  typeof val === 'undefined'
+
+export const isNull = (val: unknown): val is null => val === null
+
+export const isNullOrUndefined = (val: unknown) =>
+  isNull(val) || isUndefined(val)
+
+export const isHTMLElement = (val: unknown): val is HTMLElement =>
+  val instanceof HTMLElement
+
+export const isEmpty = (val: unknown) =>
+  val === '' || val === null || val === undefined
+
+export const isRegex = (val: unknown): val is RegExp => val instanceof RegExp
+
+export const isObjectType = (val: unknown) => typeof val === 'object'
+
+export const isPrimitive = (val: unknown) =>
+  isNullOrUndefined(val) || !isObjectType(val)
+
+export const isDateObject = (val: unknown): val is Date => val instanceof Date
+
+export * from './createHandler'

packages/vue-composition-form/src/utils/isFieldElement.ts

@@ -0,0 +1,5 @@
+export function isFieldElement(el: unknown): el is HTMLInputElement {
+  return (el as HTMLInputElement) instanceof HTMLInputElement
+    || (el as HTMLInputElement) instanceof HTMLTextAreaElement
+    || (el as HTMLInputElement) instanceof HTMLSelectElement
+}

packages/vue-composition-form/src/utils/objectForeach.ts

@@ -0,0 +1,6 @@
+export function objectForeach<T extends object>(
+  object: T,
+  callback: ([key, val]: [key: keyof T, val: T[keyof T]], index: number, array: [string, any][]) => void,
+) {
+  Object.entries(object).forEach(callback as (value: [string, any], index: number, array: [string, any][]) => void)
+}