@opensig/opendesign/es/form/OForm.vue.mjs

import { defineComponent, computed, provide, createElementBlock, openBlock, withModifiers, normalizeStyle, normalizeClass, renderSlot } from "vue";
import { formInjectKey } from "./provide.mjs";
import { formProps } from "./types.mjs";
import { getFlexValue } from "./form.mjs";
import { isFunction } from "../_utils/is.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OForm",
  props: formProps,
  emits: ["submit", "validate", "clear", "reset"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const align = computed(() => getFlexValue(props.labelAlign));
    const justify = computed(() => getFlexValue(props.labelJustify));
    const filedList = [];
    const doValidate = (filed) => {
      const filedNames = filed ? [].concat(filed) : [];
      const list = filedList.map((item) => {
        if (filedNames.length === 0 || item.filed && filedNames.includes(item.filed)) {
          return item.validate ? item.validate() : null;
        }
        return null;
      });
      return Promise.all(list).then((rlt) => {
        emits("validate", rlt);
        return rlt;
      });
    };
    const clearValidate = (filed, onClear) => {
      const filedNames = filed ? [].concat(filed) : [];
      filedList.forEach((item) => {
        if (filedNames.length === 0 || item.filed && filedNames.includes(item.filed)) {
          item.clearValidate();
          if (isFunction(onClear)) {
            onClear(item);
          }
        }
      });
      emits("clear", filed);
    };
    const addFiled = (filedItem) => {
      filedList.push(filedItem);
    };
    const removeFiled = (filed) => {
      const idx = filedList.findIndex((item) => item.filed === filed);
      filedList.splice(idx, 1);
    };
    const resetFields = (filed) => {
      clearValidate(filed, (item) => {
        item.resetFiled();
      });
      emits("reset", filed);
    };
    const onSubmit = () => {
      doValidate().then((rlt) => {
        emits("submit", rlt);
      });
    };
    provide(formInjectKey, {
      model: computed(() => props.model),
      addFiled,
      removeFiled
    });
    __expose({
      /** validate form */
      validate: doValidate,
      /** reset form */
      resetFields,
      /** clear validate state */
      clearValidate
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "form",
        {
          class: normalizeClass(["o-form", [
            {
              "o-form-has-required": props.hasRequired
            },
            `o-form-layout-${props.layout}`
          ]]),
          style: normalizeStyle({
            "--form-label-width": props.labelWidth,
            "--form-label-align": props.labelAlign,
            "--form-label-justify": justify.value,
            "--form-item-align": align.value
          }),
          onSubmit: withModifiers(onSubmit, ["prevent"])
        },
        [
          renderSlot(_ctx.$slots, "default")
        ],
        38
        /* CLASS, STYLE, NEED_HYDRATION */
      );
    };
  }
});
export {
  _sfc_main as default
};