DynamicSanitizeData Vuejs - Crie métodos e/ou dados de form para "limpar" dados de formulário

dynamicSanitizeToAPI.js

import utils from './utils.js'
/**
  Cria métodos dinâmicos que sanitize o objeto de parâmetro e retorne no formato adequado para uso, em APIs por exmeplo.
*/
export default function (settings) {
  if (!utils.hasValidSanitizeMixinSettings(settings)) {
    console.warn('Objeto de configuração do {data[prop]}SanitizeToAPI inválido!')
    return {}
  }
  let method = {} // OBJETO computed VUEJS
  let data = {} // OBJETO data VUEJS
  // mixin ainda nao e acessivel aqui
  for (let prop in settings) {
    console.log('let prop in settings = ', prop)
    method[`${prop}SanitizeToAPI`] = function () { //  [algumacoisa]Sanitize
      const obj = {}
      for (let p in this[prop]) {
        if (settings[prop][p] !== undefined) {
          obj[p] = settings[prop][p].sanitize.call(settings[prop][p].context, this[prop][p])
        } else obj[p] = this[prop][p]
      }
      // se for um objeto vazio return null
      return Object.getOwnPropertyNames(obj).length > 0 ? obj : null
    }

    data[prop] = {}
    for (let p in settings[prop]) {
      data[prop][p] = settings[prop][p].default
    }
  }

  return {
    methods: Object.getOwnPropertyNames(method).length > 0 ? method : undefined,
    data: function () { return data }
  }
}

Sample.vue

<template>
  <div>
   <!-- SEUS INPUTS, COM V-MASK, ETC... -->
  </div>
</template>
import dynamicSanitizeToAPI from '@/mixins/dynamicSanitizeToAPI'
import { onlyDigits } from 'utils/sanitize'
const formSanitizeToAPI = dynamicSanitizeToAPI({
  form: {
    id: {default: null},
    fone1: {default: '999999', sanitize: onlyDigits},
    fone2: {default: '', sanitize: onlyDigits}
  }
})

export default {
  name: 'ClientForm',
  components: { FormGrid, CityAutocomplete },
  mixins: [formSanitizeToAPI],
  data () {
    return {
      ... Outras props reativas, pois o do obj form vai ser mesclado no data via Mixin.
    }
  },
  methods: {
    save () {
      const objSanitized = this.formSanitizeToAPI()
      console.log(this.form, this.objSanitized)
      this.$axios.post(...)
    }
  }
}
</script>

utils.js

export default {
  hasValidSanitizeMixinSettings: function (settings) {
    if (this.is(settings, 'Object')) {
      for (let prop in settings) {
        if (this.is(prop, 'String') && this.is(settings[prop], 'Object')) {
          for (let p in settings[prop]) {
            if (this.is(p, 'String') && this.is(settings[prop][p], 'Object')) {
              if (this.isDefined(settings[prop][p].default)) {
                if (!this.is(settings[prop][p].sanitize, 'Function')) {
                  settings[prop][p].context = this
                  settings[prop][p].sanitize = function (value) {
                    return this.hasValidPrimitiveJsonValue(value) ? value : null
                  }
                } else if (!this.hasValidValue(settings[prop][p].context)) settings[prop][p].context = settings[prop][p].sanitize
                continue
              }
            }
            return false
          }
        } else return false
      }
    } else return false
    return true
  },
  getType: function (variable) {
    // pode ser feito com ternario, mas assim é mais legivel
    if (!this.isDefined(variable)) return 'undefined'
    if (this.isNull(variable)) return 'null'
    if (this.constructor.name === 'Number') {
      if (Number.isNaN(variable)) return 'NaN'
      if (variable === Infinity) return 'Infinity'
      if (variable === -Infinity) return '-Infinity'
    }
    return variable.constructor.name
  },
  isDefined: function (variable) {
    return variable !== undefined
  },
  isNull: function (variable) {
    return variable === null
  },
  is: function (variable, strType) {
    return this.getType(variable) === strType
  },
  isFinite: function (variable) { // compatibilidade para o maldito Internet Explorer!
    return variable !== Infinity && variable !== -Infinity
  },
  hasValidNumber: function (variable) {
    if (this.isDefinedNotNull(variable) && this.is(variable, 'Number')) {
      if (!Number.isNaN(variable) && this.isFinite(variable)) {
        return true
      }
    }
    return false
  },
  hasValidPrimitiveJsonValue (variable) {
    if (this.isDefined(variable)) {
      if (this.is(variable, 'Number')) return this.hasValidNumber(variable)
      return (this.isNull(variable) || this.is(variable, 'String') || this.is(variable, 'Boolean') || this.is(variable, 'Date'))
    }
    return false
  },
  hasValidJsonValue (variable) {
    if (!this.hasValidPrimitiveJsonValue(variable)) {
      if ((typeof variable) === 'object' && !this.is(variable, 'RegExp')) {
        // caso existam valores invalidos nos indices do objeto o stringify ignora
        try {
          JSON.stringify(variable)
          return true
        } catch (error) {}
      }
      return false
    }
    return true
  },
  hasValidValue: function (variable) {
    return this.isDefinedNotNull(variable) ? this.is(variable, 'Number') ? this.hasValidNumber(variable) : true : false
  },
  isDefinedNotNull: function (variable) {
    return this.isDefined(variable) && !this.isNull(variable)
  },
  isSameType: function (arr, strType) {
    if (this.is(arr, 'Array')) {
      if (arr.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          if (!this.is(arr[i], strType)) return false
        }
        return true
      }
      return strType === 'undefined'
    }
    return false
  },
  objEquals: function (obj1, obj2) {
    return (JSON.stringify(obj1) === JSON.stringify(obj2))
  },
  deepCopy: function (obj) {
    return JSON.parse(JSON.stringify(obj))
  }
}