@carefrees/form-utils-vue 0.0.11 → 0.0.13

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}`;
-  });
-};

package/src/hooks/useMultipleForm.ts

@@ -1,29 +0,0 @@
-import { MultipleInstanceBase } from "@carefrees/form-utils"
-import { provide, inject, ref } from "vue"
-
-const multipleFormProvideSymbol = Symbol("carefrees-multiple-form")
-
-/**多表单收集 Context */
-export function useMultipleFormProvide(multipleForm?: MultipleInstanceBase) {
-  const newMultipleForm = useMultipleForm(multipleForm)
-  provide(multipleFormProvideSymbol, newMultipleForm)
-}
-
-/**子项中获取 多表单收集 实例*/
-export function useMultipleFormInject() {
-  const multipleForm = inject<MultipleInstanceBase>(multipleFormProvideSymbol, new MultipleInstanceBase())
-  return multipleForm
-}
-
-/**初始化 多表单收集 实例*/
-export function useMultipleForm(multipleForm?: MultipleInstanceBase) {
-  const refForm = ref<MultipleInstanceBase>()
-  if (!refForm.value) {
-    if (multipleForm) {
-      refForm.value = multipleForm
-    } else {
-      refForm.value = new MultipleInstanceBase()
-    }
-  }
-  return refForm.value
-}

package/src/instance/ruleIntsnace.ts

@@ -1,105 +0,0 @@
-import AsyncValidator, { RuleItem } from 'async-validator';
-import type { MessageType, FormInstanceBase } from '@carefrees/form-utils';
-import { ref, Ref, toValue } from 'vue';
-
-export class RuleInstanceBase2 {
-  /**
-   * 顺序
-   * @example
-   * "0"
-   * "0-0"
-   * "0-0-0"
-   */
-  sort?: string;
-  /**表单实例*/
-  instance?: FormInstanceBase;
-  /**
-   * 字段 ，分割方式与lodash的get和set方法值更新或设置路径一致
-   * @example
-   * 默认："name"
-   * 嵌套字段："name.a.doc"
-   * 嵌套字段："name[1].a.doc"
-   * 嵌套字段："name.a[2].doc"
-   */
-  name: string = '';
-  /**规则*/
-  rules: Ref<RuleItem[]> = ref([]);
-  /**错误提示内容*/
-  messages: Ref<MessageType[]> = ref([]);
-  /**更新当前组件方法*/
-  updated?: Function;
-
-  /**判断是否必填*/
-  isRequired = () => {
-    if (this.instance?.getFieldHideRulesValue?.(this.name)) {
-      return false;
-    }
-    const findItem = (toValue(this.rules) || []).find((item) => item?.required);
-    return !!findItem;
-  };
-  /**初始化*/
-  ctor = (name: string, rules: RuleItem[]) => {
-    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?: MessageType[]) => {
-    this.messages.value = messages || [];
-    this.updated?.({});
-  };
-
-  /**更新规则*/
-  updatedRules = (rules: RuleItem[]) => {
-    /**更新当前规则*/
-    this.rules.value = rules;
-    /**当前组件重新渲染*/
-    this.updatedMessages?.([]);
-  };
-
-  /**验证规则
-   * @param {boolean} isOnly 仅判断是否校验通过
-   */
-  validate = (isOnly: boolean = false) => {
-    return new Promise((resolve, reject) => {
-      const value = this.instance?.getFieldValue?.(this.name);
-      if (this.instance?.getFieldHideRulesValue?.(this.name)) {
-        this.updatedMessages([]);
-        resolve({ [this.name]: value });
-      }
-      new AsyncValidator({ [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,
-    };
-  };
-}

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />