@carefrees/form-utils-vue 0.0.12 → 0.0.13

package/esm/instance/ruleIntsnace.js

@@ -1,65 +0,0 @@
-import async_validator from "async-validator";
-import { ref, toValue } from "vue";
-class RuleInstanceBase2 {
-    sort;
-    instance;
-    name = '';
-    rules = ref([]);
-    messages = ref([]);
-    updated;
-    isRequired = ()=>{
-        if (this.instance?.getFieldHideRulesValue?.(this.name)) return false;
-        const findItem = (toValue(this.rules) || []).find((item)=>item?.required);
-        return !!findItem;
-    };
-    ctor = (name, rules)=>{
-        this.name = name;
-        this.rules.value = rules || [];
-        return this;
-    };
-    isValidate = ()=>{
-        if (this.instance?.getFieldHideRulesValue?.(this.name)) return false;
-        const _rules = toValue(this.rules);
-        return !!(Array.isArray(_rules) && _rules.length);
-    };
-    updatedMessages = (messages)=>{
-        this.messages.value = messages || [];
-        this.updated?.({});
-    };
-    updatedRules = (rules)=>{
-        this.rules.value = rules;
-        this.updatedMessages?.([]);
-    };
-    validate = (isOnly = false)=>new Promise((resolve, reject)=>{
-            const value = this.instance?.getFieldValue?.(this.name);
-            if (this.instance?.getFieldHideRulesValue?.(this.name)) {
-                this.updatedMessages([]);
-                resolve({
-                    [this.name]: value
-                });
-            }
-            new async_validator({
-                [this.name]: toValue(this.rules) || []
-            }).validate({
-                [this.name]: value
-            }).then((values)=>{
-                if (!isOnly) this.updatedMessages([]);
-                resolve(values);
-            }).catch(({ errors })=>{
-                if (Array.isArray(errors)) {
-                    if (!isOnly) this.updatedMessages(errors);
-                    reject(errors);
-                } else reject();
-            });
-        });
-    getValidateResult = ()=>{
-        const _messages = toValue(this.messages);
-        const tip = Array.isArray(_messages) ? _messages.map((it)=>it.message) : '';
-        const isInvalid = Array.isArray(tip) ? !!tip.length : !!tip;
-        return {
-            tip,
-            isInvalid
-        };
-    };
-}
-export { RuleInstanceBase2 };

package/src/hooks/attr/attr.FormItem.tsx

@@ -1,174 +0,0 @@
-import { FormInstanceBase, FormItemInstanceBase, get } from '@carefrees/form-utils';
-import { useHtmlFor } from './../useHtmlFor';
-import { useRegisterFormItem, RegisterFormItemOptions } from './../register/register.FormItem';
-import { computed, Ref, ref, toValue, watch } from 'vue';
-import type { RuleInstanceBase2 } from '../../instance/ruleIntsnace';
-
-export interface FormItemAttrOptions extends RegisterFormItemOptions {
-  /**依赖更新项*/
-  dependencies?: string[];
-  /**通知 只用于校验规则提示 字段 */
-  noticeOnlyRuleDataField?: string[];
-  /**通知父级字段监听方法更新*/
-  isNoticeParentField?: boolean;
-  /**通知watch监听方法更新*/
-  noticeWatchField?: string[];
-  /**是否保护值(不进行表单项组件卸载重置初始值)*/
-  preserve?: boolean;
-  /**重写规则*/
-  useRules?: (
-    ruleInstance: Ref<RuleInstanceBase2>,
-    form: FormInstanceBase,
-    formItemInstance: FormItemInstanceBase,
-  ) => void;
-  /**输入框属性重写*/
-  useAttrs?: (attrs: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase) => any;
-  /**输入框属性*/
-  inputAttrs?: Object;
-  /**传递组件字段*/
-  valuePropName?: string;
-  /**取值字段(默认和valuePropName值相同)*/
-  getValuePath?: string;
-  /**自定义获取值*/
-  getValueFromEvent?: (event: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase) => any;
-  /**值格式化*/
-  formatValue?: (value: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase, event: any) => any;
-  /**触发数据更新之后触发（用于数据联动之类的）*/
-  onAfterUpdate?: (value: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase, event: any) => void;
-  /**事件名称*/
-  trigger?: string;
-}
-
-/**表单项参数*/
-export const useFormItemAttr = (options: FormItemAttrOptions) => {
-  const {
-    trigger = 'onChange',
-    dependencies,
-    noticeOnlyRuleDataField,
-    isNoticeParentField,
-    noticeWatchField,
-    preserve,
-    valuePropName = 'value',
-    getValuePath = valuePropName,
-    getValueFromEvent,
-    formatValue,
-    onAfterUpdate,
-    useAttrs,
-    useRules,
-    inputAttrs,
-    ...rest
-  } = options;
-  const { formItemInstance, form, ruleInstance, newName, newSort, deepRefData } = useRegisterFormItem({ ...rest });
-  formItemInstance.dependencies = dependencies;
-  formItemInstance.noticeOnlyRuleDataField = noticeOnlyRuleDataField;
-  formItemInstance.isNoticeParentField = isNoticeParentField;
-  formItemInstance.onAfterUpdate = onAfterUpdate;
-  formItemInstance.noticeWatchField = noticeWatchField;
-  formItemInstance.preserve = preserve;
-  /**获取值*/
-  const oldValue = ref(get(form.formData, toValue(newName)));
-
-  watch(
-    () => [get(form.formData, toValue(newName)), toValue(newName)],
-    () => {
-      oldValue.value = form.getFieldValue(toValue(newName));
-    },
-    { immediate: true },
-  );
-
-  const onValueChange = (event: any) => {
-    try {
-      let value = event;
-      if (typeof getValueFromEvent === 'function') {
-        value = getValueFromEvent(event, form, formItemInstance);
-      } else if (event && event.target && typeof event.target === 'object' && getValuePath in event.target) {
-        value = get(event.target, getValuePath);
-      }
-      if (typeof formatValue === 'function') {
-        value = formatValue(value, form, formItemInstance, event);
-      }
-      if (oldValue.value !== value) {
-        form.updatedFieldValue(toValue(newName), value, 'validate');
-        formItemInstance.onAfterUpdate?.(value, form, formItemInstance, event);
-        if (Array.isArray(formItemInstance.noticeWatchField) && formItemInstance.noticeWatchField.length) {
-          form.noticeWatch(formItemInstance.noticeWatchField);
-        }
-        if (
-          Array.isArray(formItemInstance.noticeOnlyRuleDataField) &&
-          formItemInstance.noticeOnlyRuleDataField.length
-        ) {
-          form.onlyValidate(formItemInstance.noticeOnlyRuleDataField);
-        }
-        if (formItemInstance.isNoticeParentField && formItemInstance.parentDataField) {
-          form.notice(formItemInstance.parentDataField);
-        }
-      }
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  formItemInstance.onChange = onValueChange;
-  const htmlFor = useHtmlFor(newName);
-
-  watch(
-    () => htmlFor,
-    () => {
-      formItemInstance.htmlFor = htmlFor.value;
-    },
-    { immediate: true },
-  );
-
-  /**属性处理*/
-  const newAttrs = computed(() => {
-    const _attr = inputAttrs || {};
-    return {
-      ..._attr,
-      [trigger]: onValueChange,
-      name: toValue(newName),
-      id: toValue(htmlFor),
-      [valuePropName]: toValue(oldValue),
-    };
-  });
-
-  const attrsLastData = ref(toValue(newAttrs));
-
-  watch(
-    () => [toValue(newAttrs), toValue(deepRefData), toValue(oldValue)],
-    () => {
-      attrsLastData.value = useAttrs?.(toValue(newAttrs), form, formItemInstance) || toValue(newAttrs);
-    },
-    { immediate: true },
-  );
-
-  /**规则处理**/
-  const validateResult = ref(toValue(ruleInstance).getValidateResult());
-
-  watch(
-    () => [toValue(deepRefData), toValue(oldValue)],
-    () => {
-      useRules?.(ruleInstance as any, form, formItemInstance);
-    },
-  );
-
-  watch(
-    () => [toValue(ruleInstance).messages, toValue(ruleInstance).rules, toValue(oldValue)],
-    () => {
-      validateResult.value = toValue(ruleInstance).getValidateResult();
-    },
-  );
-
-  return {
-    valuePropName,
-    htmlFor,
-    onChange: onValueChange,
-    formItemInstance,
-    form,
-    ruleInstance,
-    newAttrs,
-    attrsLastData,
-    validateResult,
-    newSort,
-    newName,
-  };
-};

package/src/hooks/index.ts

@@ -1,13 +0,0 @@
-export * from './useAttrs';
-export * from './useForm';
-export * from './useFormItem';
-export * from './useFormList';
-export * from './useHtmlFor';
-export * from './useMultipleForm';
-export * from './useFormItemParentName';
-export * from './useEffect';
-export * from './register/register.FormHideItem';
-export * from './register/register.FormItem';
-export * from './register/register.FormList';
-export * from './register/register.form';
-export * from './attr/attr.FormItem';

package/src/hooks/register/register.FormHideItem.ts

@@ -1,45 +0,0 @@
-import { ref, toValue, watch } from 'vue';
-import { RegisterFormItemOptions } from './register.FormItem';
-import { FormHideItemInstanceBase } from '@carefrees/form-utils';
-import { useFormItemParentNameInject } from '../useFormItemParentName';
-import { useFormInject } from '../useForm';
-import { useEffect } from '../useEffect';
-
-interface RegisterFormHideItemOptions extends Omit<RegisterFormItemOptions, 'rules'> {}
-
-/**注册表单隐藏表单项到表单实例中*/
-export const useRegisterFormHideItem = (options: RegisterFormHideItemOptions) => {
-  const { name, sort, isJoinParentField = true } = options;
-  const form = useFormInject();
-  const { newName, newSort } = useFormItemParentNameInject({ name, sort, isJoinParentField });
-  const hideItemInstance = ref<FormHideItemInstanceBase>(new FormHideItemInstanceBase().ctor(newName.value));
-  const isHide = ref(form.getFieldHideValue(newName.value));
-  watch(
-    () => [toValue(isHide)],
-    () => {
-      hideItemInstance.value.preHideValue = isHide.value;
-    },
-    { immediate: true },
-  );
-
-  const setValue = () => {
-    isHide.value = form.getFieldHideValue(newName.value);
-  };
-
-  hideItemInstance.value.updatedItem = setValue;
-
-  watch(
-    () => [form, toValue(newSort)],
-    () => {
-      hideItemInstance.value.instance = form;
-      hideItemInstance.value.sort = toValue(newSort);
-    },
-    { immediate: true },
-  );
-
-  useEffect(() => {
-    return form.registerFormHideItem(toValue(hideItemInstance) as FormHideItemInstanceBase);
-  });
-
-  return { form, isHide };
-};

package/src/hooks/register/register.FormItem.ts

@@ -1,80 +0,0 @@
-/**
- * @description 注册组件
- */
-
-import { Ref, ref, toValue, watch } from 'vue';
-import type { RuleItem } from 'async-validator';
-import { useFormInject } from '../useForm';
-import { useFormItem } from '../useFormItem';
-import { useFormItemParentNameInject } from '../useFormItemParentName';
-import { useEffect } from '../useEffect';
-import { RuleInstanceBase2 } from '../../instance/ruleIntsnace';
-
-export interface RegisterFormItemOptions {
-  /**字段*/
-  name: string;
-  /**规则*/
-  rules?: RuleItem[];
-  /**排序值*/
-  sort?: string;
-  /**是否拼接父级字段*/
-  isJoinParentField?: boolean;
-}
-
-/**注册表单项到表单实例中*/
-export const useRegisterFormItem = (options: RegisterFormItemOptions) => {
-  const { name, rules, sort, isJoinParentField = true } = options;
-  const form = useFormInject();
-  const deepRefData = ref<any>({});
-  const { newName, newSort, parentItem } = useFormItemParentNameInject({ name, sort, isJoinParentField });
-  // 注册规则
-  // 注册单个实例
-  const ruleInstance: Ref<RuleInstanceBase2> = ref<any>(new RuleInstanceBase2());
-  const formItemInstance = useFormItem();
-
-  watch(
-    () => [form],
-    () => {
-      ruleInstance.value.instance = form;
-      formItemInstance.instance = form;
-    },
-    { immediate: true },
-  );
-
-  watch(
-    () => [toValue(newName)],
-    () => {
-      ruleInstance.value.ctor(toValue(newName), rules || []);
-      formItemInstance.ctor(toValue(newName), toValue(ruleInstance) as any);
-    },
-    { immediate: true },
-  );
-
-  watch(
-    () => [toValue(newSort)],
-    () => {
-      ruleInstance.value.sort = toValue(newSort);
-      formItemInstance.sort = toValue(newSort);
-    },
-    { immediate: true },
-  );
-
-  watch(
-    () => [toValue(parentItem)],
-    () => {
-      formItemInstance.parentDataField = toValue(toValue(parentItem).name);
-    },
-    { immediate: true },
-  );
-
-  const updated = () => {
-    deepRefData.value = { __temp: new Date().valueOf() };
-  };
-
-  formItemInstance.updated = updated;
-  ruleInstance.value.updated = updated;
-
-  useEffect(() => form.registerFormItem(formItemInstance));
-
-  return { ruleInstance, formItemInstance, form, newName, newSort, parentItem, deepRefData };
-};

package/src/hooks/register/register.FormList.ts

@@ -1,49 +0,0 @@
-import { watch, toValue } from 'vue';
-import { RegisterFormItemOptions, useRegisterFormItem } from './register.FormItem';
-import { useFormList } from '../useFormList';
-import { useEffect } from '../useEffect';
-
-export interface RegisterFormListOptions extends RegisterFormItemOptions {}
-
-/**注册表单List到表单实例中*/
-export const useRegisterFormList = (options: RegisterFormListOptions) => {
-  const { ruleInstance, formItemInstance, form, newName, parentItem } = useRegisterFormItem(options);
-  const formListInstance = useFormList();
-
-  watch(
-    () => [toValue(newName)],
-    () => {
-      formListInstance.ctor(toValue(newName));
-    },
-    { immediate: true },
-  );
-
-  watch(
-    () => [form, formItemInstance, toValue(ruleInstance)],
-    () => {
-      formListInstance.instance = form;
-      formListInstance.formItemInstance = formItemInstance;
-      formListInstance.rule = toValue(ruleInstance) as any;
-    },
-    { immediate: true },
-  );
-
-  watch(
-    () => [options.sort, toValue(parentItem)],
-    () => {
-      formListInstance.sort = toValue(parentItem.value.sort);
-      formListInstance.parentDataField = toValue(parentItem.value.name);
-    },
-    { immediate: true },
-  );
-
-  useEffect(() => {
-    return form.registerFormList(newName.value, formListInstance);
-  });
-
-  return {
-    ruleInstance,
-    formItemInstance,
-    formListInstance,
-  };
-};

package/src/hooks/register/register.form.ts

@@ -1,12 +0,0 @@
-import { useMultipleFormInject } from '../useMultipleForm';
-import { FormInstanceBase } from '@carefrees/form-utils';
-import { useEffect } from '../useEffect';
-
-/**注册表单实例到多表单收集实例中*/
-export const useRegisterForm = (form: FormInstanceBase, name?: string) => {
-  const multipleForm = useMultipleFormInject();
-  useEffect(() => {
-    if (name) return multipleForm.ctor(name, form);
-  });
-  return multipleForm;
-};

package/src/hooks/useAttrs.ts

@@ -1,64 +0,0 @@
-/**公共属性*/
-import { provide, inject, computed, StyleValue, ComputedRef, ref, toRefs, reactive } from 'vue';
-import { ComputedRefBase } from '../interface';
-
-export type AttrsOptions = {
-  /**列数据*/
-  colCount?: ComputedRefBase<number | undefined>;
-  /**规则校验失败错误提示位置*/
-  errorLayout?: ComputedRefBase<'left-bottom' | 'right-bottom' | 'top-right' | 'top-left' | undefined>;
-  /**label显示模式*/
-  labelMode?: ComputedRefBase<'left' | 'top' | 'hide' | undefined>;
-  /**是否显示label后的冒号*/
-  showColon?: ComputedRefBase<boolean | undefined>;
-  /**表单项 className*/
-  formItemClass?: ComputedRefBase<string | undefined>;
-  /**表单项 style*/
-  formItemStyle?: ComputedRefBase<StyleValue | undefined>;
-  /**表单项 label  className*/
-  formItemLabelClass?: ComputedRefBase<string | undefined>;
-  /**表单项 label  style*/
-  formItemLabelStyle?: ComputedRefBase<StyleValue | undefined>;
-};
-
-const attrsProvideSymbol = Symbol('carefrees-attrs');
-
-/**公共属性 Context */
-export function useAttrsProvide(options: AttrsOptions) {
-  const {
-    colCount = ref(4),
-    errorLayout = ref('left-bottom'),
-    labelMode = ref('top'),
-    showColon = ref(true),
-    formItemClass,
-    formItemStyle,
-    formItemLabelClass,
-    formItemLabelStyle,
-  } = options;
-  const data = computed(() => {
-    return {
-      colCount,
-      errorLayout,
-      labelMode,
-      showColon,
-      formItemClass,
-      formItemStyle,
-      formItemLabelClass,
-      formItemLabelStyle,
-    };
-  });
-  provide(attrsProvideSymbol, reactive(data));
-}
-/**子项中获取公共属性*/
-export function useAttrsInject() {
-  const attrs = inject<ComputedRef<AttrsOptions>>(
-    attrsProvideSymbol,
-    computed(() => ({
-      colCount: ref(4),
-      errorLayout: ref('left-bottom'),
-      labelMode: ref('top'),
-      showColon: ref(true),
-    })),
-  );
-  return attrs;
-}

package/src/hooks/useEffect.ts

@@ -1,13 +0,0 @@
-import { onMounted, onUnmounted, ref } from 'vue';
-
-/**挂载卸载*/
-export const useEffect = (fun: () => Function | undefined) => {
-  const unRegisterRef = ref();
-  onMounted(() => {
-    unRegisterRef.value = fun();
-  });
-  onUnmounted(() => {
-    typeof unRegisterRef.value === 'function' && unRegisterRef.value();
-    unRegisterRef.value = undefined;
-  });
-};

package/src/hooks/useForm.ts

@@ -1,28 +0,0 @@
-import { FormInstanceBase } from '@carefrees/form-utils';
-import { provide, inject, ref, Ref } from 'vue';
-
-const formProvideSymbol = Symbol('carefrees-form');
-
-/**表单实例 Context */
-export function useFormProvide<T = any>(form: FormInstanceBase<T>) {
-  provide(formProvideSymbol, form);
-}
-
-/**子项中获取表单实例*/
-export function useFormInject<T = any>() {
-  const form = inject<FormInstanceBase<T>>(formProvideSymbol, new FormInstanceBase<T>());
-  return form;
-}
-
-/**初始化表单实例*/
-export function useForm<T = any>(form?: FormInstanceBase<T>) {
-  const refForm = ref<FormInstanceBase<T>>();
-  if (!refForm.value) {
-    if (form) {
-      refForm.value = form;
-    } else {
-      refForm.value = new FormInstanceBase<T>();
-    }
-  }
-  return refForm as Ref<FormInstanceBase<T>>;
-}

package/src/hooks/useFormItem.ts

@@ -1,28 +0,0 @@
-import { FormItemInstanceBase } from '@carefrees/form-utils';
-import { provide, inject, ref } from 'vue';
-
-const formItemProvideSymbol = Symbol('carefrees-form-item');
-
-/**表单项实例 Context */
-export function useFormItemProvide(formItem: FormItemInstanceBase) {
-  provide(formItemProvideSymbol, formItem);
-}
-
-/**子项中获取表单项实例*/
-export function useFormItemInject() {
-  const formItem = inject<FormItemInstanceBase>(formItemProvideSymbol, new FormItemInstanceBase());
-  return formItem;
-}
-
-/**s初始化 表单项实例*/
-export function useFormItem(formItem?: FormItemInstanceBase) {
-  const refForm = ref<FormItemInstanceBase>();
-  if (!refForm.value) {
-    if (formItem) {
-      refForm.value = formItem;
-    } else {
-      refForm.value = new FormItemInstanceBase();
-    }
-  }
-  return refForm.value;
-}

package/src/hooks/useFormItemParentName.ts

@@ -1,49 +0,0 @@
-import { provide, inject, computed, ComputedRef, ref, toValue } from 'vue';
-import { PartialComputedRefs } from '../interface';
-
-export interface FormItemParentNamOptions {
-  /**字段*/
-  name: string;
-  /**排序*/
-  sort?: string;
-  /**是否拼接父级字段*/
-  isJoinParentField?: boolean;
-}
-
-export type FormItemParentNameProviderProps = PartialComputedRefs<Omit<FormItemParentNamOptions, 'isJoinParentField'>>;
-
-const parentNameProvideSymbol = Symbol('carefrees-parent-name');
-
-export const useFormItemParentNameProvide = (props: FormItemParentNameProviderProps) => {
-  const { name, sort } = props;
-  provide(
-    parentNameProvideSymbol,
-    computed(() => ({ name, sort })),
-  );
-};
-
-/**表单项获取父级字段*/
-export const useFormItemParentNameInject = (options: FormItemParentNamOptions) => {
-  const { isJoinParentField = true, sort, name } = options;
-  const parentItem = inject<ComputedRef<FormItemParentNameProviderProps>>(
-    parentNameProvideSymbol,
-    computed(() => ({ name: ref(''), sort: ref('') })),
-  );
-  const newName = computed(() => {
-    const _name = toValue(parentItem.value.name);
-    if (_name && isJoinParentField) {
-      if (/^\./.test(`${name}`)) {
-        return [_name, name].filter(Boolean).join('');
-      } else if (name) {
-        return [_name, '.', name].filter(Boolean).join('');
-      }
-      return [_name, name].filter(Boolean).join('');
-    }
-    return [name].filter(Boolean).join('');
-  });
-  const newSort = computed(() => {
-    const _sort = toValue(parentItem.value.sort);
-    return [isJoinParentField ? _sort : '', sort].filter(Boolean).join('-');
-  });
-  return { newName, newSort, parentItem };
-};

package/src/hooks/useFormList.ts

@@ -1,28 +0,0 @@
-import { FormListInstanceBase } from '@carefrees/form-utils';
-import { provide, inject, ref } from 'vue';
-
-const formListProvideSymbol = Symbol('carefrees-form-list');
-
-/**表单List实例 Context */
-export function useFormListProvide(formList: FormListInstanceBase) {
-  provide(formListProvideSymbol, formList);
-}
-
-/**子项中获取表单List实例*/
-export function useFormListInject() {
-  const formList = inject<FormListInstanceBase>(formListProvideSymbol, new FormListInstanceBase());
-  return formList;
-}
-
-/**初始化 表单List实例*/
-export function useFormList(formList?: FormListInstanceBase) {
-  const refForm = ref<FormListInstanceBase>();
-  if (!refForm.value) {
-    if (formList) {
-      refForm.value = formList;
-    } else {
-      refForm.value = new FormListInstanceBase();
-    }
-  }
-  return refForm.value;
-}

package/src/hooks/useHtmlFor.ts

@@ -1,9 +0,0 @@
-import { ref, computed, Ref } from 'vue';
-
-let localId = 0;
-export const useHtmlFor = (suffix: Ref<string>) => {
-  const count = ref(localId++);
-  return computed(() => {
-    return `carefree-vue-form-item_${count.value.toString(32)}_${suffix.value}`;
-  });
-};