@carefrees/form-utils-vue 0.0.8

package/esm/hooks/attr/attr.FormItem.mjs

@@ -0,0 +1,120 @@
+import { get } from "@carefrees/form-utils";
+import { useHtmlFor } from "../useHtmlFor.mjs";
+import { useRegisterFormItem } from "../register/register.FormItem.mjs";
+import { ref, toValue, watch, computed } from "vue";
+const useFormItemAttr = (options) => {
+  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) => {
+    var _a;
+    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");
+        (_a = formItemInstance.onAfterUpdate) == null ? void 0 : _a.call(formItemInstance, 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 == null ? void 0 : useAttrs(newAttrs.value, form, formItemInstance)) || newAttrs.value;
+  }, {
+    immediate: true
+  });
+  const validateResult = ref(ruleInstance.value.getValidateResult());
+  watch(() => [toValue(deepRefData), toValue(oldValue)], () => {
+    useRules == null ? void 0 : useRules(ruleInstance.value, 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
+  };
+};
+export {
+  useFormItemAttr
+};

package/esm/hooks/index.d.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/esm/hooks/register/register.FormHideItem.d.ts

@@ -0,0 +1,9 @@
+import { RegisterFormItemOptions } from './register.FormItem';
+interface RegisterFormHideItemOptions extends Omit<RegisterFormItemOptions, 'rules'> {
+}
+/**注册表单隐藏表单项到表单实例中*/
+export declare const useRegisterFormHideItem: (options: RegisterFormHideItemOptions) => {
+    form: import('@carefrees/form-utils').FormInstanceBase<any>;
+    isHide: import('vue').Ref<any, any>;
+};
+export {};

package/esm/hooks/register/register.FormHideItem.mjs

@@ -0,0 +1,38 @@
+import { ref, watch } from "vue";
+import { FormHideItemInstanceBase } from "@carefrees/form-utils";
+import { useFormItemParentNameInject } from "../useFormItemParentName.mjs";
+import { useFormInject } from "../useForm.mjs";
+import { useEffect } from "../useEffect.mjs";
+const useRegisterFormHideItem = (options) => {
+  const { name, sort, isJoinParentField = true } = options;
+  const form = useFormInject();
+  const { newName, newSort } = useFormItemParentNameInject({ name, sort, isJoinParentField });
+  const hideItemInstance = ref(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);
+  });
+  return { form, isHide };
+};
+export {
+  useRegisterFormHideItem
+};