Source

models/VPOptions/FieldOptions.ts

import merge from 'lodash/merge'
import {VPFieldOptions} from 'src/interfaces/VPOptions'
import {InputFormatters} from 'src/interfaces/InputFormatters'
import {ChangeActions} from 'src/interfaces/events/ChangeActions'
import {HTMLValidationRules} from 'src/interfaces/validation/HTMLValidationRules'
import {CustomValidationRule} from 'src/interfaces/validation/CustomValidationRule'

import {ValidatableOptions} from './ValidatableOptions'
import {ValidInput} from 'src/types/ValidInput'
import {toBoolean} from 'src/util/casts/toBoolean'
import {getAttributeIfSet} from 'src/util/getAttributeIfSet'

/**
 * Field Options instance for VPField
 * @category Options
 * @description
 * Internally created VPField options instance, implementing the VPFieldOptions interface w/
 * standard defaults applied dynamically from the DOM bindings or statically if undefined.
 *
 * __NOTE:__ See property descriptions for DOM binding attribute names, if implemented
 * @prop {boolean} [Notify=true] - vp-notify
 * @prop {boolean} [ShowFieldRuleErrors=false] - vp-field-errors
 * @prop {boolean} [ShowCustomRuleErrors=true] - vp-custom-errors
 * @prop {boolean} [ValidateLazyCustomRules=true] - vp-lazy-custom || vp-lazy
 * @prop {boolean} [ValidateLazyFieldFields=true] - vp-lazy-fields || vp-lazy
 * @prop {boolean} [ValidateAsync=false] - vp-async
 * @prop {boolean} [ValidateAsyncResolved=true] - vp-await
 * @prop {boolean} [DirtyOn.blur=false] - vp-dirty-blur
 * @prop {boolean} [DirtyOn.input=true] - vp-dirty-input
 * @prop {boolean} [DirtyOn.change=false] - vp-dirty-change
 * @prop {boolean} [DirtyOn.mouseleave=false] - vp-dirty-mouseleave
 * @prop {boolean} [FormatOn.blur=false] - vp-format-blur
 * @prop {boolean} [FormatOn.input=true] - vp-format-input
 * @prop {boolean} [FormatOn.change=false] - vp-format-change
 * @prop {boolean} [FormatOn.mouseleave=false] - vp-format-mouseleave
 * @prop {boolean} [ValidateOn.blur=true] - vp-blur || vp-validate-blur
 * @prop {boolean} [ValidateOn.input=false] - vp-input || vp-validate-input
 * @prop {boolean} [ValidateOn.change=false] - vp-change || vp-validate-change
 * @prop {boolean} [ValidateOn.mouseleave=false] - vp-mouseleave || vp-validate-mouseleave
 * @prop {boolean} [ForceRules=false]
 * @prop {HTMLValidationRules} [InputRules={}]
 * @prop {CustomValidationRule[]} [CustomRules=[]]
 * @prop {InputFormatters} [InputFormatter={}]
 * @prop {null|ValidInput} [PrimaryInput=null]
 * @prop {number} [PrimaryInputIndex=0]
 * @prop {null|string} [PrimaryInputType=null]
 * @prop {string[]} [InputTypes=['select','input','textarea']]
 * @see {@link VPFieldOptions} For more information on properties defined
 * @augments ValidatableOptions
 */
export class FieldOptions extends ValidatableOptions<FieldOptions> implements VPFieldOptions {
  Notify = true;
  ValidateAsync = false;
  ValidateAsyncResolved = true;
  ShowFieldRuleErrors = false;
  ShowCustomRuleErrors = true;
  ValidateLazyCustomRules = true;
  ValidateLazyFieldRules = true;
  DirtyOn: ChangeActions = {
    blur: false,
    input: true,
    change: false,
    mouseleave: false
  } as ChangeActions;
  FormatOn: ChangeActions = {
    blur: false,
    input: true,
    change: false,
    mouseleave: false
  } as ChangeActions;
  ValidateOn: ChangeActions = {
    blur: true,
    input: false,
    change: false,
    mouseleave: false
  } as ChangeActions;
  ForceRules = false;
  InputRules: HTMLValidationRules = {} as HTMLValidationRules;
  CustomRules: CustomValidationRule[] = [];
  InputFormatter: InputFormatters = {} as InputFormatters;
  PrimaryInput: (null | ValidInput) = null;
  PrimaryInputIndex = 0;
  PrimaryInputType: (null | string) = null;
  InputTypes: ('select' | 'input' | 'textarea')[] = ['select', 'input', 'textarea'];

  constructor(options: VPFieldOptions, element: HTMLElement) {
    super(options, element);

    // DOM Options merge
    const _options = {
      Notify: toBoolean(getAttributeIfSet(element, 'vp-notify', this.Notify)),
      ValidateAsync: toBoolean(getAttributeIfSet(element, 'vp-async', this.ValidateAsync)),
      ValidateAsyncResolved: toBoolean(getAttributeIfSet(element, 'vp-await', this.ValidateAsyncResolved)),
      DirtyOn: {
        blur: toBoolean(getAttributeIfSet(element, 'vp-dirty-blur', this.DirtyOn.blur)),
        input: toBoolean(getAttributeIfSet(element, 'vp-dirty-input', this.DirtyOn.input)),
        change: toBoolean(getAttributeIfSet(element, 'vp-dirty-change', this.DirtyOn.change)),
        mouseleave: toBoolean(getAttributeIfSet(element, 'vp-dirty-mouseleave', this.DirtyOn.mouseleave))
      },
      FormatOn: {
        blur: toBoolean(getAttributeIfSet(element, 'vp-format-blur', this.FormatOn.blur)),
        input: toBoolean(getAttributeIfSet(element, 'vp-format-input', this.FormatOn.input)),
        change: toBoolean(getAttributeIfSet(element, 'vp-format-change', this.FormatOn.change)),
        mouseleave: toBoolean(getAttributeIfSet(element, 'vp-format-mouseleave', this.FormatOn.mouseleave))
      },
      ValidateOn: {
        blur: toBoolean(getAttributeIfSet(element, 'vp-blur',
          getAttributeIfSet(element, 'vp-validate-blur', this.ValidateOn.blur))),
        input: toBoolean(getAttributeIfSet(element, 'vp-input',
          getAttributeIfSet(element, 'vp-validate-input', this.ValidateOn.input))),
        change: toBoolean(getAttributeIfSet(element, 'vp-change',
          getAttributeIfSet(element, 'vp-validate-change', this.ValidateOn.change))),
        mouseleave: toBoolean(getAttributeIfSet(element, 'vp-mouseleave',
          getAttributeIfSet(element, 'vp-validate-mouseleave', this.ValidateOn.mouseleave)))
      },
      ShowFieldRuleErrors: toBoolean(getAttributeIfSet(element, 'vp-field-errors', this.ShowFieldRuleErrors)),
      ShowCustomRuleErrors: toBoolean(getAttributeIfSet(element, 'vp-custom-errors', this.ShowCustomRuleErrors)),
      ValidateLazyCustomRules: toBoolean(getAttributeIfSet(element, 'vp-lazy-custom',
        getAttributeIfSet(element, 'vp-lazy', this.ValidateLazyCustomRules))),
      ValidateLazyFieldRules: toBoolean(getAttributeIfSet(element, 'vp-lazy-field',
        getAttributeIfSet(element, 'vp-lazy', this.ValidateLazyCustomRules)))
    }

    merge(this, _options, options);
  }
}