@sigmaott/base-next 1.4.0 → 1.4.2

package/src/composables/form.ts

@@ -1,351 +1,351 @@
-import { deepMerge, p, randomStr } from '@antfu/utils'
-import type { FormInstance, FormItemProp, FormItemRule } from 'element-plus'
-import type { Arrayable } from 'element-plus/es/utils'
-import { get, set, unset } from 'lodash-unified'
-import type { MaybeRefOrGetter } from 'vue'
-
-interface ElFormOptions<T> {
-  initialValues: MaybeRef<T>
-  onSubmit?: (values: T) => Promise<any> | void
-  prop?: string
-}
-
-export function cleanEmptyObjectAndArray(object: any) {
-  Object
-    .entries(object)
-    .forEach(([k, v]) => {
-      if (v && typeof v === 'object')
-        cleanEmptyObjectAndArray(v)
-
-      if (v && typeof v === 'object' && (!Object.keys(v).length || v === null || v === undefined)) {
-        if (Array.isArray(object))
-          object[k] = null
-        else
-          delete object[k]
-      }
-    })
-  return object
-}
-
-interface ElFormContext {
-  formRef: Ref<FormInstance>
-  formValue: Ref<any>
-  formErrors: Ref<any>
-  submitLocks: Map<string, (submit: boolean) => Promise<boolean>>
-  getAtrrs: (_prop: string, _rules?: Arrayable<FormItemRule>, _options?: {
-    enabled?: boolean
-  }) => {
-    error: any
-    rules: Arrayable<FormItemRule> | undefined
-    prop: string
-  }
-}
-
-function handleRegister({ formRef, formValue, formErrors }: Pick<ElFormContext, 'formErrors' | 'formRef' | 'formValue'>) {
-  return <T = any>(_prop: MaybeRefOrGetter<string>, _rules?: MaybeRefOrGetter<Arrayable<FormItemRule>>, _options?: {
-    enabled?: MaybeRefOrGetter<boolean>
-    watchDeep?: boolean
-    defaultValue?: any
-    error?: Ref<string | undefined>
-  }) => {
-    const prop = toRef(_prop)
-    const enabled = toRef(_options?.enabled ?? true)
-
-    const value = computed({
-      get: () => get(formValue.value, prop.value),
-      set: (value: T) => {
-        set(formValue.value, prop.value, value)
-      },
-    })
-
-    if (_options?.watchDeep) {
-      watch(value, () => {
-        formRef.value?.validateField(prop.value)
-      }, { deep: true })
-    }
-
-    watch(enabled, () => {
-      formRef.value.validateField(prop.value, (isValid) => {
-        if (isValid) {
-          unset(formErrors.value, prop.value)
-          formErrors.value = cleanEmptyObjectAndArray(formErrors.value)
-        }
-      })
-    }, { flush: 'post' })
-
-    watch(enabled, () => {
-      if (enabled.value) {
-        // set default value
-        if (_options?.defaultValue !== undefined && get(formValue.value, prop.value) === undefined)
-          set(formValue.value, prop.value, _options?.defaultValue)
-      }
-      else {
-        // // clear value
-        // unset(formValue.value, prop.value)
-      }
-    }, { immediate: true })
-
-    const error = computed(() => get(formErrors.value, prop.value) || _options?.error?.value)
-    const rules = computed(() => enabled.value ? toRef(_rules).value : [])
-
-    const attrs = reactive({
-      error,
-      rules,
-      prop,
-    })
-
-    return makeDestructurable(
-      {
-        value,
-        attrs,
-      } as const,
-      [value, attrs] as const,
-    )
-  }
-}
-
-// TODO: simply
-function handleRegisterArray({ formRef, formValue, formErrors }: Pick<ElFormContext, 'formErrors' | 'formRef' | 'formValue'>) {
-  return <T = any>(_prop: MaybeRefOrGetter<string>, _rules?: MaybeRefOrGetter<Arrayable<FormItemRule>>, _options?: {
-    enabled?: MaybeRefOrGetter<boolean>
-    defaultValue?: any[]
-  }) => {
-    const prop = toRef(_prop)
-    const enabled = toRef(_options?.enabled ?? true)
-
-    const value = computed({
-      get: () => get(formValue.value, prop.value),
-      set: (value: T[]) => {
-        set(formValue.value, prop.value, value)
-      },
-    })
-
-    watch(value, () => {
-      formRef.value?.validateField(prop.value)
-    }, { deep: true, flush: 'post' })
-
-    watch(enabled, () => {
-      formRef.value.validateField(prop.value, (isValid) => {
-        if (isValid) {
-          unset(formErrors.value, prop.value)
-          formErrors.value = cleanEmptyObjectAndArray(formErrors.value)
-        }
-      })
-    }, { flush: 'post' })
-
-    watch(enabled, () => {
-      if (enabled.value) {
-        // set default value
-        if (_options?.defaultValue !== undefined && (get(formValue.value, prop.value) === undefined || !get(formValue.value, prop.value).length))
-          set(formValue.value, prop.value, _options?.defaultValue)
-      }
-      else {
-        // // clear value
-        // unset(formValue.value, prop.value)
-      }
-    }, { immediate: true })
-
-    const error = computed(() => {
-      const _error = get(formErrors.value, prop.value)
-      if (Array.isArray(_error))
-        return ''
-      return _error
-    })
-    const rules = computed(() => enabled.value ? toRef(_rules).value : [])
-
-    const attrs = reactive({
-      error,
-      rules,
-      prop,
-    })
-
-    function remove(id: string | number) {
-      const index = typeof id === 'number' ? id : value.value.findIndex(item => item === id || item.id === id || item._id === id)
-      if (index !== -1) {
-        value.value.splice(index, 1)
-        const error = get(formErrors.value, prop.value)
-        error?.splice(index, 1)
-        set(formErrors.value, prop.value, error)
-        cleanEmptyObjectAndArray(formErrors.value)
-      }
-    }
-
-    function add(item: T) {
-      if (typeof item === 'string') {
-        value.value.push(item)
-      }
-      else {
-        value.value.push({
-          id: genUUID(),
-          _id: genUUID(),
-          ...item,
-        })
-      }
-    }
-
-    function addFirst(item: T) {
-      if (typeof item === 'string') {
-        value.value.unshift(item)
-      }
-      else {
-        value.value.unshift({
-          id: genUUID(),
-          _id: genUUID(),
-          ...item,
-        })
-      }
-    }
-
-    return makeDestructurable(
-      {
-        value,
-        attrs,
-        remove,
-        add,
-        addFirst,
-      } as const,
-      [value, attrs, { add, remove, addFirst }] as const,
-    )
-  }
-}
-
-const injectKey = Symbol('InjectionState')
-
-export function useElForm<T = any>(options: ElFormOptions<T>) {
-  const formRef = ref<FormInstance>()
-  const { t } = useI18n()
-
-  const _formValue = toRef(options.initialValues)
-  const formValue = extendRef(_formValue, {
-    set: (newValue) => {
-      formValue.value = defu(klona(toRaw(newValue), options.initialValues))
-      return formValue.value
-    },
-  }) as Ref<T>
-
-  const formErrors = ref<any>({})
-
-  function handleValidate(prop: FormItemProp, isValid: boolean, message: string) {
-    if (!isValid) {
-      set(formErrors.value, prop, message)
-    }
-    else {
-      // NOTE: with array it might isValid but the nested item is not valid
-      const error = get(formErrors.value, prop)
-      if (!Array.isArray(error) || !error.length)
-        unset(formErrors.value, prop)
-
-      formErrors.value = cleanEmptyObjectAndArray(formErrors.value)
-    }
-  }
-
-  async function handleSubmit() {
-    try {
-      const valid = await formRef.value?.validate()
-      if (valid)
-        options.onSubmit?.(formValue.value as T)
-
-      return valid
-    }
-    catch (error) {
-      ElMessage.error(t('form.form_validation_failed'))
-    }
-  }
-
-  const register = handleRegister({ formRef, formValue, formErrors })
-
-  const registerArray = handleRegisterArray({ formRef, formValue, formErrors })
-
-  function getAtrrs(_prop: string, _rules?: Arrayable<FormItemRule>, _options?: {
-    enabled?: boolean
-  }) {
-    const [_, attrs] = register(_prop, _rules, _options)
-    return attrs
-  }
-  const isError = computed(() => Object.keys(formErrors.value).length > 0)
-
-  const state = {
-    formRef,
-    formValue,
-    formErrors,
-    handleSubmit,
-    handleValidate,
-    register,
-    registerArray,
-    getAtrrs,
-    isError,
-  }
-  provide(injectKey, state)
-  return state
-}
-
-export function useElField<T>(_prop: MaybeRefOrGetter<string>, _rules?: MaybeRefOrGetter<Arrayable<FormItemRule>>, _options?: {
-  enabled?: MaybeRefOrGetter<boolean>
-  watchDeep?: boolean
-  defaultValue?: any
-  key?: string
-}) {
-  const { formRef, formValue, formErrors } = inject(_options?.key || injectKey) as ElFormContext
-
-  return handleRegister({ formRef, formValue, formErrors })<T>(_prop, _rules, _options)
-}
-
-export function useElFieldArray<T>(_prop: MaybeRefOrGetter<string>, _rules?: MaybeRefOrGetter<Arrayable<FormItemRule>>, _options?: {
-  enabled?: MaybeRefOrGetter<boolean>
-  defaultValue?: any
-  key?: string
-}) {
-  const { formRef, formValue, formErrors } = inject(_options?.key || injectKey) as ElFormContext
-
-  return handleRegisterArray({ formRef, formValue, formErrors })<T>(_prop, _rules, _options)
-}
-
-export function useElFormContext() {
-  return inject(injectKey) as ElFormContext
-}
-
-export function useSyncElForm(_prop: MaybeRefOrGetter<string>, { formErrors, submitLocks, formValue, formRef }: Pick<ElFormContext, 'formErrors' | 'formValue' | 'formRef'> & { handleSubmit: () => Promise<boolean> }) {
-  const prop = toRef(_prop)
-  const [_formValues] = useElField<any>(prop)
-  const { formErrors: _formErrors, submitLocks: _submitLocks } = useElFormContext()
-
-  _submitLocks.set(prop.value, async () => {
-    const submitArray = Array.from(submitLocks.values())
-    const registerHookValid = (await p(submitArray).map(async fn => await fn())).every(Boolean)
-    const valid = await formRef.value.validate()
-
-    return valid && registerHookValid
-  })
-
-  watch(formErrors, () => {
-    set(_formErrors.value, prop.value, formErrors.value)
-    cleanEmptyObjectAndArray(_formErrors.value)
-  }, { deep: true })
-
-  watch(formValue, () => {
-    _formValues.value = formValue.value
-  }, { deep: true })
-}
-
-export function hasError(errors: any, props: string[]): boolean {
-  return props.some((p) => {
-    const error = get(errors, p)
-    if (Array.isArray(error)) {
-      return error.filter((item) => {
-        if (item && typeof item === 'object')
-          return hasError(item, Object.keys(item))
-        else
-          return Boolean(item)
-      }).length > 0
-    }
-
-    if (error && typeof error === 'object')
-      return hasError(error, Object.keys(error))
-
-    return !!error
-  })
-}
-
-export function setError(errors: any, prop: string, message: string) {
-  set(errors, prop, message)
-}
+import { deepMerge, p, randomStr } from '@antfu/utils'
+import type { FormInstance, FormItemProp, FormItemRule } from 'element-plus'
+import type { Arrayable } from 'element-plus/es/utils'
+import { get, set, unset } from 'lodash-unified'
+import type { MaybeRefOrGetter } from 'vue'
+
+interface ElFormOptions<T> {
+  initialValues: MaybeRef<T>
+  onSubmit?: (values: T) => Promise<any> | void
+  prop?: string
+}
+
+export function cleanEmptyObjectAndArray(object: any) {
+  Object
+    .entries(object)
+    .forEach(([k, v]) => {
+      if (v && typeof v === 'object')
+        cleanEmptyObjectAndArray(v)
+
+      if (v && typeof v === 'object' && (!Object.keys(v).length || v === null || v === undefined)) {
+        if (Array.isArray(object))
+          object[k] = null
+        else
+          delete object[k]
+      }
+    })
+  return object
+}
+
+interface ElFormContext {
+  formRef: Ref<FormInstance>
+  formValue: Ref<any>
+  formErrors: Ref<any>
+  submitLocks: Map<string, (submit: boolean) => Promise<boolean>>
+  getAtrrs: (_prop: string, _rules?: Arrayable<FormItemRule>, _options?: {
+    enabled?: boolean
+  }) => {
+    error: any
+    rules: Arrayable<FormItemRule> | undefined
+    prop: string
+  }
+}
+
+function handleRegister({ formRef, formValue, formErrors }: Pick<ElFormContext, 'formErrors' | 'formRef' | 'formValue'>) {
+  return <T = any>(_prop: MaybeRefOrGetter<string>, _rules?: MaybeRefOrGetter<Arrayable<FormItemRule>>, _options?: {
+    enabled?: MaybeRefOrGetter<boolean>
+    watchDeep?: boolean
+    defaultValue?: any
+    error?: Ref<string | undefined>
+  }) => {
+    const prop = toRef(_prop)
+    const enabled = toRef(_options?.enabled ?? true)
+
+    const value = computed({
+      get: () => get(formValue.value, prop.value),
+      set: (value: T) => {
+        set(formValue.value, prop.value, value)
+      },
+    })
+
+    if (_options?.watchDeep) {
+      watch(value, () => {
+        formRef.value?.validateField(prop.value)
+      }, { deep: true })
+    }
+
+    watch(enabled, () => {
+      formRef.value.validateField(prop.value, (isValid) => {
+        if (isValid) {
+          unset(formErrors.value, prop.value)
+          formErrors.value = cleanEmptyObjectAndArray(formErrors.value)
+        }
+      })
+    }, { flush: 'post' })
+
+    watch(enabled, () => {
+      if (enabled.value) {
+        // set default value
+        if (_options?.defaultValue !== undefined && get(formValue.value, prop.value) === undefined)
+          set(formValue.value, prop.value, _options?.defaultValue)
+      }
+      else {
+        // // clear value
+        // unset(formValue.value, prop.value)
+      }
+    }, { immediate: true })
+
+    const error = computed(() => get(formErrors.value, prop.value) || _options?.error?.value)
+    const rules = computed(() => enabled.value ? toRef(_rules).value : [])
+
+    const attrs = reactive({
+      error,
+      rules,
+      prop,
+    })
+
+    return makeDestructurable(
+      {
+        value,
+        attrs,
+      } as const,
+      [value, attrs] as const,
+    )
+  }
+}
+
+// TODO: simply
+function handleRegisterArray({ formRef, formValue, formErrors }: Pick<ElFormContext, 'formErrors' | 'formRef' | 'formValue'>) {
+  return <T = any>(_prop: MaybeRefOrGetter<string>, _rules?: MaybeRefOrGetter<Arrayable<FormItemRule>>, _options?: {
+    enabled?: MaybeRefOrGetter<boolean>
+    defaultValue?: any[]
+  }) => {
+    const prop = toRef(_prop)
+    const enabled = toRef(_options?.enabled ?? true)
+
+    const value = computed({
+      get: () => get(formValue.value, prop.value),
+      set: (value: T[]) => {
+        set(formValue.value, prop.value, value)
+      },
+    })
+
+    watch(value, () => {
+      formRef.value?.validateField(prop.value)
+    }, { deep: true, flush: 'post' })
+
+    watch(enabled, () => {
+      formRef.value.validateField(prop.value, (isValid) => {
+        if (isValid) {
+          unset(formErrors.value, prop.value)
+          formErrors.value = cleanEmptyObjectAndArray(formErrors.value)
+        }
+      })
+    }, { flush: 'post' })
+
+    watch(enabled, () => {
+      if (enabled.value) {
+        // set default value
+        if (_options?.defaultValue !== undefined && (get(formValue.value, prop.value) === undefined || !get(formValue.value, prop.value).length))
+          set(formValue.value, prop.value, _options?.defaultValue)
+      }
+      else {
+        // // clear value
+        // unset(formValue.value, prop.value)
+      }
+    }, { immediate: true })
+
+    const error = computed(() => {
+      const _error = get(formErrors.value, prop.value)
+      if (Array.isArray(_error))
+        return ''
+      return _error
+    })
+    const rules = computed(() => enabled.value ? toRef(_rules).value : [])
+
+    const attrs = reactive({
+      error,
+      rules,
+      prop,
+    })
+
+    function remove(id: string | number) {
+      const index = typeof id === 'number' ? id : value.value.findIndex(item => item === id || item.id === id || item._id === id)
+      if (index !== -1) {
+        value.value.splice(index, 1)
+        const error = get(formErrors.value, prop.value)
+        error?.splice(index, 1)
+        set(formErrors.value, prop.value, error)
+        cleanEmptyObjectAndArray(formErrors.value)
+      }
+    }
+
+    function add(item: T) {
+      if (typeof item === 'string') {
+        value.value.push(item)
+      }
+      else {
+        value.value.push({
+          id: genUUID(),
+          _id: genUUID(),
+          ...item,
+        })
+      }
+    }
+
+    function addFirst(item: T) {
+      if (typeof item === 'string') {
+        value.value.unshift(item)
+      }
+      else {
+        value.value.unshift({
+          id: genUUID(),
+          _id: genUUID(),
+          ...item,
+        })
+      }
+    }
+
+    return makeDestructurable(
+      {
+        value,
+        attrs,
+        remove,
+        add,
+        addFirst,
+      } as const,
+      [value, attrs, { add, remove, addFirst }] as const,
+    )
+  }
+}
+
+const injectKey = Symbol('InjectionState')
+
+export function useElForm<T = any>(options: ElFormOptions<T>) {
+  const formRef = ref<FormInstance>()
+  const { t } = useI18n()
+
+  const _formValue = toRef(options.initialValues)
+  const formValue = extendRef(_formValue, {
+    set: (newValue) => {
+      formValue.value = defu(klona(toRaw(newValue), options.initialValues))
+      return formValue.value
+    },
+  }) as Ref<T>
+
+  const formErrors = ref<any>({})
+
+  function handleValidate(prop: FormItemProp, isValid: boolean, message: string) {
+    if (!isValid) {
+      set(formErrors.value, prop, message)
+    }
+    else {
+      // NOTE: with array it might isValid but the nested item is not valid
+      const error = get(formErrors.value, prop)
+      if (!Array.isArray(error) || !error.length)
+        unset(formErrors.value, prop)
+
+      formErrors.value = cleanEmptyObjectAndArray(formErrors.value)
+    }
+  }
+
+  async function handleSubmit() {
+    try {
+      const valid = await formRef.value?.validate()
+      if (valid)
+        options.onSubmit?.(formValue.value as T)
+
+      return valid
+    }
+    catch (error) {
+      ElMessage.error(t('form.form_validation_failed'))
+    }
+  }
+
+  const register = handleRegister({ formRef, formValue, formErrors })
+
+  const registerArray = handleRegisterArray({ formRef, formValue, formErrors })
+
+  function getAtrrs(_prop: string, _rules?: Arrayable<FormItemRule>, _options?: {
+    enabled?: boolean
+  }) {
+    const [_, attrs] = register(_prop, _rules, _options)
+    return attrs
+  }
+  const isError = computed(() => Object.keys(formErrors.value).length > 0)
+
+  const state = {
+    formRef,
+    formValue,
+    formErrors,
+    handleSubmit,
+    handleValidate,
+    register,
+    registerArray,
+    getAtrrs,
+    isError,
+  }
+  provide(injectKey, state)
+  return state
+}
+
+export function useElField<T>(_prop: MaybeRefOrGetter<string>, _rules?: MaybeRefOrGetter<Arrayable<FormItemRule>>, _options?: {
+  enabled?: MaybeRefOrGetter<boolean>
+  watchDeep?: boolean
+  defaultValue?: any
+  key?: string
+}) {
+  const { formRef, formValue, formErrors } = inject(_options?.key || injectKey) as ElFormContext
+
+  return handleRegister({ formRef, formValue, formErrors })<T>(_prop, _rules, _options)
+}
+
+export function useElFieldArray<T>(_prop: MaybeRefOrGetter<string>, _rules?: MaybeRefOrGetter<Arrayable<FormItemRule>>, _options?: {
+  enabled?: MaybeRefOrGetter<boolean>
+  defaultValue?: any
+  key?: string
+}) {
+  const { formRef, formValue, formErrors } = inject(_options?.key || injectKey) as ElFormContext
+
+  return handleRegisterArray({ formRef, formValue, formErrors })<T>(_prop, _rules, _options)
+}
+
+export function useElFormContext() {
+  return inject(injectKey) as ElFormContext
+}
+
+export function useSyncElForm(_prop: MaybeRefOrGetter<string>, { formErrors, submitLocks, formValue, formRef }: Pick<ElFormContext, 'formErrors' | 'formValue' | 'formRef'> & { handleSubmit: () => Promise<boolean> }) {
+  const prop = toRef(_prop)
+  const [_formValues] = useElField<any>(prop)
+  const { formErrors: _formErrors, submitLocks: _submitLocks } = useElFormContext()
+
+  _submitLocks.set(prop.value, async () => {
+    const submitArray = Array.from(submitLocks.values())
+    const registerHookValid = (await p(submitArray).map(async fn => await fn())).every(Boolean)
+    const valid = await formRef.value.validate()
+
+    return valid && registerHookValid
+  })
+
+  watch(formErrors, () => {
+    set(_formErrors.value, prop.value, formErrors.value)
+    cleanEmptyObjectAndArray(_formErrors.value)
+  }, { deep: true })
+
+  watch(formValue, () => {
+    _formValues.value = formValue.value
+  }, { deep: true })
+}
+
+export function hasError(errors: any, props: string[]): boolean {
+  return props.some((p) => {
+    const error = get(errors, p)
+    if (Array.isArray(error)) {
+      return error.filter((item) => {
+        if (item && typeof item === 'object')
+          return hasError(item, Object.keys(item))
+        else
+          return Boolean(item)
+      }).length > 0
+    }
+
+    if (error && typeof error === 'object')
+      return hasError(error, Object.keys(error))
+
+    return !!error
+  })
+}
+
+export function setError(errors: any, prop: string, message: string) {
+  set(errors, prop, message)
+}