@varlet/ui/es/form/Form.mjs

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

var __async = (__this, __arguments, generator) => {
  return new Promise((resolve, reject) => {
    var fulfilled = (value) => {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    };
    var rejected = (value) => {
      try {
        step(generator.throw(value));
      } catch (e) {
        reject(e);
      }
    };
    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
    step((generator = generator.apply(__this, __arguments)).next());
  });
};
import { computed, defineComponent } from "vue";
import { call, find, preventDefault } from "@varlet/shared";
import { createNamespace } from "../utils/components.mjs";
import { getParentScroller, getTop, scrollTo, toPxNum } from "../utils/elements.mjs";
import { linear } from "../utils/shared.mjs";
import { props } from "./props.mjs";
import { useFormItems } from "./provide.mjs";
const { name, n } = createNamespace("form");
import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
function __render__(_ctx, _cache) {
  return _openBlock(), _createElementBlock(
    "form",
    {
      class: _normalizeClass(_ctx.n()),
      onSubmit: _cache[0] || (_cache[0] = (...args) => _ctx.handleSubmit && _ctx.handleSubmit(...args)),
      onReset: _cache[1] || (_cache[1] = (...args) => _ctx.handleReset && _ctx.handleReset(...args))
    },
    [
      _renderSlot(_ctx.$slots, "default")
    ],
    34
    /* CLASS, NEED_HYDRATION */
  );
}
const __sfc__ = defineComponent({
  name,
  props,
  setup(props2) {
    const disabled = computed(() => props2.disabled);
    const readonly = computed(() => props2.readonly);
    const { formItems, bindFormItems } = useFormItems();
    const formProvider = {
      disabled,
      readonly
    };
    bindFormItems(formProvider);
    function scroll(formItemElement) {
      setTimeout(() => {
        const scroller = getParentScroller(formItemElement);
        const scrollerTop = scroller === window ? 0 : getTop(scroller);
        const top = getTop(formItemElement) - scrollerTop - toPxNum(props2.scrollToErrorOffsetY);
        scrollTo(scroller, {
          top,
          animation: linear
        });
      }, 300);
    }
    function handleSubmit(event) {
      return __async(this, null, function* () {
        preventDefault(event);
        const valid = yield validate();
        call(props2.onSubmit, valid);
      });
    }
    function handleReset(event) {
      preventDefault(event);
      reset();
      call(props2.onReset);
    }
    function validate() {
      return __async(this, null, function* () {
        var _a;
        const res = yield Promise.all(formItems.map(({ validate: validate2 }) => validate2()));
        if (props2.scrollToError) {
          const [, errorIndex] = find(res, (r) => r === false, props2.scrollToError);
          const hasError = errorIndex > -1;
          if (hasError) {
            const formItemElement = (_a = formItems[errorIndex].instance.proxy) == null ? void 0 : _a.$el;
            scroll(formItemElement);
          }
          return !hasError;
        }
        return res.every((result) => result === true);
      });
    }
    function reset() {
      return formItems.forEach(({ reset: reset2 }) => reset2());
    }
    function resetValidation() {
      return formItems.forEach(({ resetValidation: resetValidation2 }) => resetValidation2());
    }
    return {
      n,
      handleSubmit,
      handleReset,
      validate,
      reset,
      resetValidation
    };
  }
});
__sfc__.render = __render__;
var stdin_default = __sfc__;
export {
  stdin_default as default
};