various-ui/es/components/form/default-item/src/composable.mjs

This is a test version of the Vue 3 component library

import { inject, ref, computed } from 'vue';
import { UiFormEmitterKey, UiFormRulesKey, UiFormDataKey } from '../../../../constants/index.mjs';

const useComposable = (define) => {
  const emitter = inject(UiFormEmitterKey, void 0);
  const rules = inject(UiFormRulesKey, {});
  const data = inject(UiFormDataKey, {});
  const refs = {
    verifyTimer: ref(),
    //* 校验过渡定时器
    visible: ref(false),
    //* 校验提示显示状态
    content: ref(""),
    //* 校验提示的文本
    status: ref("info")
    //* 校验提示的类型
  };
  const methods = {
    //* 校验显示函数
    show: (content, type) => {
      refs.status.value = type || "info";
      refs.visible.value = true;
      refs.content.value = content;
    },
    //* 校验隐藏函数
    hidden: () => {
      refs.visible.value = false;
      refs.status.value = "info";
    },
    //* 校验函数
    validator: async (name, callBack) => {
      const rule = rules[define.prop].filter((value) => !name || value.trigger == name);
      if (!rule.length) return;
      else {
        const verifys = [];
        rule.forEach((value) => verifys.push(value.verify(data)));
        const result = await Promise.all(verifys);
        const error = result.filter((value) => !value.verify);
        if (error.length) {
          callBack && callBack(false);
          methods.show(error[0].message || "", error[0].type || "error");
        } else {
          methods.hidden();
          callBack && callBack(true);
        }
      }
    }
  };
  const computeds = {
    //* 组件类名
    className: computed(() => {
      if (refs.status.value != "info") {
        return `ui-form-${define.direction} ui-${refs.status.value}-type`;
      } else {
        return `ui-form-${define.direction}`;
      }
    }),
    //* 组件样式
    style: computed(() => {
      if (define.width) return { width: define.width + "px" };
      else return {};
    })
  };
  return { data, refs, rules, methods, emitter, computeds };
};

export { useComposable };
//# sourceMappingURL=composable.mjs.map