@carefrees/form-utils-vue-hooks 0.0.13

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

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

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

@@ -0,0 +1,93 @@
+/**
+ * @description 注册组件
+ */
+
+import { computed, 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 { useRules } from './../useRule';
+
+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 formItemInstance = useFormItem();
+  const ruleInstance = useRules();
+  const ruleItems = ref(rules || []);
+
+  watch(
+    () => toValue(options.rules),
+    (newVal) => {
+      ruleItems.value = newVal || [];
+    },
+  );
+  watch(
+    () => [toValue(form)],
+    () => {
+      ruleInstance.value.instance = form;
+      formItemInstance.value.instance = form;
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => [toValue(newName), toValue(ruleInstance)],
+    () => {
+      ruleInstance.value.name = toValue(newName);
+      ruleInstance.value.rules = ruleItems;
+      formItemInstance.value.name = toValue(newName);
+      formItemInstance.value.rule = ruleInstance;
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => [toValue(newSort)],
+    () => {
+      ruleInstance.value.sort = toValue(newSort);
+      formItemInstance.value.sort = toValue(newSort);
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => [toValue(parentItem)],
+    () => {
+      formItemInstance.value.parentDataField = toValue(toValue(parentItem).name);
+    },
+    { immediate: true },
+  );
+  useEffect(() => form.value.registerFormItem(formItemInstance));
+
+  return {
+    ruleInstance,
+    formItemInstance,
+    form,
+    newName,
+    newSort,
+    parentItem,
+    deepRefData,
+  };
+};

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

@@ -0,0 +1,49 @@
+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.value.ctor(toValue(newName));
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => [toValue(form), formItemInstance, ruleInstance],
+    () => {
+      formListInstance.value.instance = form;
+      formListInstance.value.formItemInstance = formItemInstance;
+      formListInstance.value.rule = ruleInstance;
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => [options.sort, toValue(parentItem)],
+    () => {
+      formListInstance.value.sort = toValue(parentItem.value.sort);
+      formListInstance.value.parentDataField = toValue(parentItem.value.name);
+    },
+    { immediate: true },
+  );
+
+  useEffect(() => {
+    return form.value.registerFormList(newName.value, formListInstance);
+  });
+
+  return {
+    ruleInstance,
+    formItemInstance,
+    formListInstance,
+  };
+};

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

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

package/src/hooks/useAttrs.ts

@@ -0,0 +1,64 @@
+/**公共属性*/
+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

@@ -0,0 +1,13 @@
+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

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

package/src/hooks/useFormItem.ts

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

package/src/hooks/useFormItemParentName.ts

@@ -0,0 +1,49 @@
+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

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

package/src/hooks/useHtmlFor.ts

@@ -0,0 +1,9 @@
+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

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

package/src/hooks/useRule.ts

@@ -0,0 +1,16 @@
+import { RuleInstanceBase } from '../instance/ruleIntsnace';
+import { ref, Ref, toValue } from 'vue';
+
+/** 初始化 规则实例*/
+export function useRules(rules?: Ref<RuleInstanceBase> | RuleInstanceBase) {
+  const refRules = ref<RuleInstanceBase>();
+  if (!refRules.value) {
+    const value = toValue(rules);
+    if (value) {
+      refRules.value = value;
+    } else {
+      refRules.value = new RuleInstanceBase();
+    }
+  }
+  return refRules as Ref<RuleInstanceBase>;
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './interface';
+export * from './hooks/index';
+export * from './utils';
+export * from './instance';