@carefrees/form-utils-vue 0.0.8

package/src/form/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <form :class='cls' :style='style' @submit='onSubmit'>
+    <FormLayout v-bind='rest' :class='layoutClass' :style='layoutStyle'>
+      <slot />
+    </FormLayout>
+  </form>
+
+</template>
+
+<script lang="ts" setup>
+import { computed, defineProps, withDefaults, reactive, defineEmits } from "vue"
+import type { FormProps } from "../interface/index"
+import { useRegisterForm } from "../hooks/register/register.form"
+import { useForm, useFormProvide } from "./../hooks/useForm"
+import FormLayout from "../layout/layout.vue"
+import clx from 'classnames';
+
+defineOptions({
+  name: 'Form',
+  inheritAttrs: false, // 可选，防止属性自动应用到根元素
+});
+
+const props = withDefaults(defineProps<FormProps>(), {
+})
+const {
+  form,
+  style,
+  formData,
+  hideData,
+  hideRuleData,
+  name,
+  onFinish,
+  onFinishFailed,
+  onValuesChange,
+  layoutStyle,
+  layoutClass,
+  ...rest
+} = props
+
+const cls = computed(() => clx('carefrees-form', props.class));
+
+const formInstance = useForm(props.form);
+formInstance.value.ctor(reactive(props.formData || {}), reactive(props.hideData || {}), reactive(props.hideRuleData || {}));
+
+const emits = defineEmits(["finish", 'valuesChange', 'finishFailed'])
+
+formInstance.value.onFinish = (...rest) => {
+  emits("finish", ...rest)
+};
+formInstance.value.onValuesChange = (...rest) => {
+  emits("valuesChange", ...rest)
+};
+formInstance.value.onFinishFailed = (...rest) => {
+  emits("finishFailed", ...rest)
+};
+useRegisterForm(formInstance.value, props.name)
+
+const onSubmit = (event: Event) => {
+  event?.preventDefault?.();
+  event?.stopPropagation?.();
+  formInstance.value.submit?.();
+}
+
+useFormProvide(formInstance.value);
+
+</script>

package/src/formItem/form.Item.base.vue

@@ -0,0 +1,54 @@
+<template>
+  <template v-if='props.noStyle'>
+    <component :is="props.input" v-bind='toValue(formAttrs.attrsLastData)' />
+  </template>
+  <template v-else>
+    <LayoutFormItem :label='props.label' :required='isRequired' :error-layout='props.errorLayout'
+      :label-mode='props.labelMode' :only-rule-style='props.onlyRuleStyle' :show-colon='props.showColon'
+      :col-span='props.colSpan' :row-span='props.rowSpan' :html-for='formAttrs.htmlFor' :style='props.style'
+      :class='props.class' :label-style='props.labelStyle' :label-class='props.labelClass'
+      :validate-result='formAttrs.validateResult'>
+      <template v-for="(item, name) in slots" #[name]="slotProps">
+        <slot :name="name" v-bind="slotProps"></slot>
+      </template>
+      <template v-slot:default>
+        <component :is="props.input" v-bind='toValue(formAttrs.attrsLastData)' />
+      </template>
+    </LayoutFormItem>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, withDefaults, computed, toValue } from "vue"
+import type { FormItemProps } from "../interface/index"
+import { useFormItemAttr } from "../hooks/attr/attr.FormItem"
+import LayoutFormItem from "../layout/layout.formItem.vue";
+import { useFormItemParentNameProvide } from "../hooks/useFormItemParentName"
+
+defineOptions({
+  name: 'FormItemBase',
+  inheritAttrs: false, // 可选，防止属性自动应用到根元素
+});
+
+const props = withDefaults(defineProps<FormItemProps>(), {
+})
+
+const formAttrs = useFormItemAttr(props)
+
+useFormItemParentNameProvide({
+  name: formAttrs.newName,
+  sort: formAttrs.newSort
+})
+
+const slots = defineSlots<{
+  label: (params: any) => any,
+  helpText: (params: any) => any,
+  extra: (params: any) => any,
+}>()
+
+const isRequired = computed(() => {
+  return !!props.required || !!(toValue(formAttrs.ruleInstance?.value?.rules) || [])?.find((item) => {
+    return item.required;
+  })
+})
+</script>

package/src/formItem/form.hide.item.vue

@@ -0,0 +1,28 @@
+<template>
+  <template v-if='!isHide'>
+    <FormItemBase v-bind='props'>
+      <template v-for="(item, name) in slots" #[name]="slotProps">
+        <slot :name="name" v-bind="slotProps"></slot>
+      </template>
+    </FormItemBase>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, withDefaults, } from "vue"
+import type { FormItemProps } from "../interface/index"
+import FormItemBase from "./form.Item.base.vue"
+import { useRegisterFormHideItem } from "../hooks/register/register.FormHideItem"
+defineOptions({
+  name: 'FormHideItem',
+  inheritAttrs: false, // 可选，防止属性自动应用到根元素
+});
+const props = withDefaults(defineProps<FormItemProps>(), {
+})
+const slots = defineSlots<{
+  label: (params: any) => any,
+  helpText: (params: any) => any,
+  extra: (params: any) => any,
+}>()
+const { isHide } = useRegisterFormHideItem({ name: props.name, sort: props.sort, isJoinParentField: props.isJoinParentField })
+</script>

package/src/formItem/formItem.vue

@@ -0,0 +1,38 @@
+<template>
+  <template v-if='props.name'>
+    <FormItemBase v-bind='props as FormItemProps'>
+      <template v-for="(_, name) in slots" #[name]="slotProps">
+        <slot :name="name" v-bind="slotProps"></slot>
+      </template>
+    </FormItemBase>
+  </template>
+  <template v-else>
+    <LayoutFormItem :label='props.label' :errorLayout='props.errorLayout' :labelMode='props.labelMode'
+      :onlyRuleStyle='props.onlyRuleStyle' :showColon='props.showColon' :colSpan='props.colSpan'
+      :rowSpan='props.rowSpan' :style='props.style' :class='props.class' :labelStyle='props.labelStyle'
+      :labelClass='props.labelClass'>
+      <template v-for="(_, name) in slots" #[name]="slotProps">
+        <slot :name="name" v-bind="slotProps"></slot>
+      </template>
+    </LayoutFormItem>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, withDefaults } from "vue"
+import type { FormItemProps } from "../interface/index"
+import LayoutFormItem from "../layout/layout.formItem.vue";
+import FormItemBase from "./form.Item.base.vue"
+defineOptions({
+  name: 'FormItem',
+  inheritAttrs: false, // 可选，防止属性自动应用到根元素
+});
+const props = withDefaults(defineProps<Partial<FormItemProps>>(), {
+})
+const slots = defineSlots<{
+  default: (params: any) => any,
+  label: (params: any) => any,
+  helpText: (params: any) => any,
+  extra: (params: any) => any,
+}>()
+</script>

package/src/formItem/index.ts

@@ -0,0 +1,7 @@
+import _FormItemBase from './form.Item.base.vue';
+import _FormItem from './formItem.vue';
+import _FormHideItem from './form.hide.item.vue';
+import { withInstall } from '../utils';
+export const FormItemBase = withInstall(_FormItemBase);
+export const FormItem = withInstall(_FormItem);
+export const FormHideItem = withInstall(_FormHideItem);

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

@@ -0,0 +1,170 @@
+import { FormInstanceBase, FormItemInstanceBase, get } from '@carefrees/form-utils';
+import { useHtmlFor } from './../useHtmlFor';
+import { useRegisterFormItem, RegisterFormItemOptions } from './../register/register.FormItem';
+import { computed, 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: 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(newName.value);
+    },
+    { 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(newName.value, 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?.(newAttrs.value, form, formItemInstance) || newAttrs.value;
+    },
+    { immediate: true },
+  );
+
+  /**规则处理**/
+  const validateResult = ref(ruleInstance.value.getValidateResult());
+
+  watch(
+    () => [toValue(deepRefData), toValue(oldValue)],
+    () => {
+      useRules?.(ruleInstance.value as any, form, formItemInstance);
+    },
+  );
+
+  watch(
+    () => [ruleInstance.value.messages, ruleInstance.value.rules, toValue(oldValue)],
+    () => {
+      validateResult.value = ruleInstance.value.getValidateResult();
+    },
+  );
+
+  return {
+    valuePropName,
+    htmlFor,
+    onChange: onValueChange,
+    formItemInstance,
+    form,
+    ruleInstance,
+    newAttrs,
+    attrsLastData,
+    validateResult,
+    newSort,
+    newName,
+  };
+};

package/src/hooks/index.ts

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

@@ -0,0 +1,45 @@
+import { ref, 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(
+    [isHide.value],
+    () => {
+      hideItemInstance.value.preHideValue = isHide.value;
+    },
+    { immediate: true },
+  );
+
+  const setValue = () => {
+    isHide.value = form.getFieldHideValue(newName.value);
+  };
+
+  hideItemInstance.value.updatedItem = setValue;
+
+  watch(
+    [form, newSort.value],
+    () => {
+      hideItemInstance.value.instance = form;
+      hideItemInstance.value.sort = newSort.value;
+    },
+    { immediate: true },
+  );
+
+  useEffect(() => {
+    return form.registerFormHideItem(hideItemInstance.value as FormHideItemInstanceBase);
+  });
+
+  return { form, isHide };
+};

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

@@ -0,0 +1,80 @@
+/**
+ * @description 注册组件
+ */
+
+import { 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(new RuleInstanceBase2());
+  const formItemInstance = useFormItem();
+
+  watch(
+    [form],
+    () => {
+      ruleInstance.value.instance = form;
+      formItemInstance.instance = form;
+    },
+    { immediate: true },
+  );
+
+  watch(
+    [newName.value],
+    () => {
+      ruleInstance.value.ctor(newName.value, rules || []);
+      formItemInstance.ctor(newName.value, ruleInstance.value as any);
+    },
+    { immediate: true },
+  );
+
+  watch(
+    [newSort.value],
+    () => {
+      ruleInstance.value.sort = newSort.value;
+      formItemInstance.sort = newSort.value;
+    },
+    { immediate: true },
+  );
+
+  watch(
+    [parentItem.value],
+    () => {
+      formItemInstance.parentDataField = toValue(parentItem.value.name);
+    },
+    { immediate: true },
+  );
+
+  const updated = () => {
+    deepRefData.value = { a: 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

@@ -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(
+    [newName.value],
+    () => {
+      formListInstance.ctor(newName.value);
+    },
+    { immediate: true },
+  );
+
+  watch(
+    [form, formItemInstance, ruleInstance.value],
+    () => {
+      formListInstance.instance = form;
+      formListInstance.formItemInstance = formItemInstance;
+      formListInstance.rule = ruleInstance.value as any;
+    },
+    { immediate: true },
+  );
+
+  watch(
+    [options.sort, parentItem.value],
+    () => {
+      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

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

@@ -0,0 +1,66 @@
+/**公共属性*/
+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(() =>
+      toRefs({
+        colCount: 4,
+        errorLayout: 'left-bottom',
+        labelMode: 'top',
+        showColon: 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,28 @@
+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>>;
+}