@inkline/inkline/composables/useValidation.js

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useFormValidationError = useFormValidationError;
exports.useValidation = useValidation;
var _utils = require("@grozav/utils");
var _vue = require("vue");
var _constants = require("@inkline/inkline/constants");
var _validation = require("@inkline/inkline/validation");
var _useInkline = require("@inkline/inkline/composables/useInkline");
function useValidation(options) {
  const inkline = (0, _useInkline.useInkline)();
  const form = (0, _vue.inject)(_constants.FormKey, null);
  const formGroup = (0, _vue.inject)(_constants.FormGroupKey, null);
  const schema = form ? (0, _vue.computed)(() => form.schema && options.validate?.value && (0, _utils.getValueByPath)(form.schema.value, options.name.value)) : (0, _vue.ref)(options.schema?.value || null);
  if (!form && options.schema?.value) {
    (0, _vue.watch)(() => options.schema?.value, value => {
      schema.value = value;
    });
  }
  function shouldValidate(schema2, eventName) {
    if (!options.validate?.value) {
      return;
    }
    const events = schema2.validateOn ? [].concat(schema2.validateOn) : inkline?.options?.validateOn;
    return events.includes(eventName);
  }
  async function setValue(name, value) {
    if (!options.validate?.value) {
      return;
    }
    let resolvedSchema = (0, _utils.clone)(schema.value);
    const targetSchema = (0, _utils.getValueByPath)(resolvedSchema, name);
    if (!targetSchema) {
      throw new Error('Schema to be validated not found. Did you forget to match the schema key to the input "name" prop?');
    }
    resolvedSchema = (0, _utils.setValueByPath)(resolvedSchema, `${name}.value`, value);
    resolvedSchema = (0, _utils.setValuesAlongPath)(resolvedSchema, name, {
      pristine: false,
      dirty: true
    });
    if (shouldValidate(targetSchema, "input")) {
      resolvedSchema = await (0, _validation.validateSchema)(resolvedSchema);
    }
    schema.value = resolvedSchema;
    options.onUpdate?.(resolvedSchema);
  }
  async function setTouched(name, event) {
    if (!options.validate?.value) {
      return;
    }
    let resolvedSchema = (0, _utils.clone)(schema.value);
    const targetSchema = (0, _utils.getValueByPath)(resolvedSchema, name);
    if (!targetSchema) {
      throw new Error('Schema to be validated not found. Did you forget to match the schema key to the input "name" prop?');
    }
    resolvedSchema = (0, _utils.setValuesAlongPath)(resolvedSchema, name, {
      untouched: false,
      touched: true
    });
    if (shouldValidate(targetSchema, event.type)) {
      resolvedSchema = await (0, _validation.validateSchema)(resolvedSchema);
    }
    schema.value = resolvedSchema;
    options.onUpdate?.(resolvedSchema);
  }
  async function onSubmit(event) {
    if (!options.validate?.value) {
      return;
    }
    let resolvedSchema = await (0, _validation.validateSchema)(schema.value);
    resolvedSchema = (0, _validation.setSchemaStateRecursively)(resolvedSchema, {
      untouched: false,
      touched: true
    });
    if (resolvedSchema.valid) {
      options.onSubmit?.(event);
    }
    schema.value = resolvedSchema;
    options.onUpdate?.(resolvedSchema);
  }
  async function onInput(nameRef, value) {
    const name = (0, _vue.unref)(nameRef);
    if (!options.validate?.value || !name) {
      return;
    }
    if (formGroup) {
      formGroup.onInput(name, value);
    } else if (form) {
      form.onInput(name, value);
    } else if (options.schema?.value) {
      await setValue(name, value);
    }
  }
  function onBlur(nameRef, event) {
    const name = (0, _vue.unref)(nameRef);
    if (!options.validate?.value || !name) {
      return;
    }
    if (formGroup) {
      formGroup.onBlur(name, event);
    } else if (form) {
      form.onBlur(name, event);
    } else if (options.schema?.value) {
      setTouched(name, event);
    }
  }
  return {
    schema,
    onSubmit,
    onInput,
    onBlur
  };
}
function useFormValidationError(options) {
  const hasError = (0, _vue.computed)(() => {
    if (typeof options.error.value === "boolean") {
      return options.error.value;
    } else if (options.schema.value && options.error.value) {
      let visible = true;
      [].concat(options.error.value).forEach(status => {
        visible = visible && options.schema.value[status];
      });
      return visible;
    }
    return false;
  });
  return {
    hasError
  };
}