@carefrees/form-utils-vue 0.0.8 → 0.0.10

package/lib/hooks/register/register.FormList.js

@@ -8,23 +8,23 @@ const useRegisterFormList = (options) => {
   const { ruleInstance, formItemInstance, form, newName, parentItem } = register_FormItem.useRegisterFormItem(options);
   const formListInstance = useFormList.useFormList();
   vue.watch(
-    [newName.value],
+    () => [vue.toValue(newName)],
     () => {
-      formListInstance.ctor(newName.value);
+      formListInstance.ctor(vue.toValue(newName));
     },
     { immediate: true }
   );
   vue.watch(
-    [form, formItemInstance, ruleInstance.value],
+    () => [form, formItemInstance, vue.toValue(ruleInstance)],
     () => {
       formListInstance.instance = form;
       formListInstance.formItemInstance = formItemInstance;
-      formListInstance.rule = ruleInstance.value;
+      formListInstance.rule = vue.toValue(ruleInstance);
     },
     { immediate: true }
   );
   vue.watch(
-    [options.sort, parentItem.value],
+    () => [options.sort, vue.toValue(parentItem)],
     () => {
       formListInstance.sort = vue.toValue(parentItem.value.sort);
       formListInstance.parentDataField = vue.toValue(parentItem.value.name);

package/lib/hooks/useAttrs.js

@@ -30,14 +30,12 @@ function useAttrsProvide(options) {
 function useAttrsInject() {
   const attrs = vue.inject(
     attrsProvideSymbol,
-    vue.computed(
-      () => vue.toRefs({
-        colCount: 4,
-        errorLayout: "left-bottom",
-        labelMode: "top",
-        showColon: true
-      })
-    )
+    vue.computed(() => ({
+      colCount: vue.ref(4),
+      errorLayout: vue.ref("left-bottom"),
+      labelMode: vue.ref("top"),
+      showColon: vue.ref(true)
+    }))
   );
   return attrs;
 }

package/lib/interface/index.d.ts

@@ -1,4 +1,4 @@
-import { ComputedRef, Ref, VNodeChild, StyleValue, UnwrapNestedRefs } from 'vue';
+import { ComputedRef, Ref, Component, StyleValue, UnwrapNestedRefs } from 'vue';
 import { FormItemAttrOptions } from '../hooks/attr/attr.FormItem';
 import { LayoutFormItemProps } from './layout.formItem';
 import { FormLayoutProps } from './layout';
@@ -11,7 +11,7 @@ export interface FormItemProps extends FormItemAttrOptions, LayoutFormItemProps
     /**不进行样式渲染*/
     noStyle?: boolean;
     /**输入框组件*/
-    input?: VNodeChild;
+    input?: Component | string;
 }
 export interface FormProps<T = any> extends FormLayoutProps {
     form?: FormInstanceBase;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carefrees/form-utils-vue",
   "author": "SunLxy <1011771396@qq.com>",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "",
   "main": "lib/index.js",
   "module": "esm/index.mjs",
@@ -26,8 +26,8 @@
     "vue": "^3.5.13"
   },
   "dependencies": {
+    "@carefrees/form-utils": "^0.0.10",
     "async-validator": "~4.2.5",
-    "@carefrees/form-utils": "^0.0.8",
     "classnames": "2.5.1"
   }
-}
+}

package/src/form/{index.vue → form.vue}

@@ -11,7 +11,7 @@
 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 { useForm, useFormProvide } from "../hooks/useForm"
 import FormLayout from "../layout/layout.vue"
 import clx from 'classnames';
 

package/src/form/index.ts

@@ -1,3 +1,3 @@
-import _Form from './index.vue';
+import _Form from './form.vue';
 import { withInstall } from '../utils';
 export const Form = withInstall(_Form);

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

@@ -1,7 +1,7 @@
 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 { computed, Ref, ref, toValue, watch } from 'vue';
 import type { RuleInstanceBase2 } from '../../instance/ruleIntsnace';
 
 export interface FormItemAttrOptions extends RegisterFormItemOptions {
@@ -16,7 +16,11 @@ export interface FormItemAttrOptions extends RegisterFormItemOptions {
   /**是否保护值(不进行表单项组件卸载重置初始值)*/
   preserve?: boolean;
   /**重写规则*/
-  useRules?: (ruleInstance: RuleInstanceBase2, form: FormInstanceBase, formItemInstance: FormItemInstanceBase) => void;
+  useRules?: (
+    ruleInstance: Ref<RuleInstanceBase2>,
+    form: FormInstanceBase,
+    formItemInstance: FormItemInstanceBase,
+  ) => void;
   /**输入框属性重写*/
   useAttrs?: (attrs: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase) => any;
   /**输入框属性*/
@@ -67,7 +71,7 @@ export const useFormItemAttr = (options: FormItemAttrOptions) => {
   watch(
     () => [get(form.formData, toValue(newName)), toValue(newName)],
     () => {
-      oldValue.value = form.getFieldValue(newName.value);
+      oldValue.value = form.getFieldValue(toValue(newName));
     },
     { immediate: true },
   );
@@ -84,7 +88,7 @@ export const useFormItemAttr = (options: FormItemAttrOptions) => {
         value = formatValue(value, form, formItemInstance, event);
       }
       if (oldValue.value !== value) {
-        form.updatedFieldValue(newName.value, value, 'validate');
+        form.updatedFieldValue(toValue(newName), value, 'validate');
         formItemInstance.onAfterUpdate?.(value, form, formItemInstance, event);
         if (Array.isArray(formItemInstance.noticeWatchField) && formItemInstance.noticeWatchField.length) {
           form.noticeWatch(formItemInstance.noticeWatchField);
@@ -132,25 +136,25 @@ export const useFormItemAttr = (options: FormItemAttrOptions) => {
   watch(
     () => [toValue(newAttrs), toValue(deepRefData), toValue(oldValue)],
     () => {
-      attrsLastData.value = useAttrs?.(newAttrs.value, form, formItemInstance) || newAttrs.value;
+      attrsLastData.value = useAttrs?.(toValue(newAttrs), form, formItemInstance) || toValue(newAttrs);
     },
     { immediate: true },
   );
 
   /**规则处理**/
-  const validateResult = ref(ruleInstance.value.getValidateResult());
+  const validateResult = ref(toValue(ruleInstance).getValidateResult());
 
   watch(
     () => [toValue(deepRefData), toValue(oldValue)],
     () => {
-      useRules?.(ruleInstance.value as any, form, formItemInstance);
+      useRules?.(ruleInstance as any, form, formItemInstance);
     },
   );
 
   watch(
-    () => [ruleInstance.value.messages, ruleInstance.value.rules, toValue(oldValue)],
+    () => [toValue(ruleInstance).messages, toValue(ruleInstance).rules, toValue(oldValue)],
     () => {
-      validateResult.value = ruleInstance.value.getValidateResult();
+      validateResult.value = toValue(ruleInstance).getValidateResult();
     },
   );
 

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

@@ -1,4 +1,4 @@
-import { ref, watch } from 'vue';
+import { ref, toValue, watch } from 'vue';
 import { RegisterFormItemOptions } from './register.FormItem';
 import { FormHideItemInstanceBase } from '@carefrees/form-utils';
 import { useFormItemParentNameInject } from '../useFormItemParentName';
@@ -15,7 +15,7 @@ export const useRegisterFormHideItem = (options: RegisterFormHideItemOptions) =>
   const hideItemInstance = ref<FormHideItemInstanceBase>(new FormHideItemInstanceBase().ctor(newName.value));
   const isHide = ref(form.getFieldHideValue(newName.value));
   watch(
-    [isHide.value],
+    () => [toValue(isHide)],
     () => {
       hideItemInstance.value.preHideValue = isHide.value;
     },
@@ -29,16 +29,16 @@ export const useRegisterFormHideItem = (options: RegisterFormHideItemOptions) =>
   hideItemInstance.value.updatedItem = setValue;
 
   watch(
-    [form, newSort.value],
+    () => [form, toValue(newSort)],
     () => {
       hideItemInstance.value.instance = form;
-      hideItemInstance.value.sort = newSort.value;
+      hideItemInstance.value.sort = toValue(newSort);
     },
     { immediate: true },
   );
 
   useEffect(() => {
-    return form.registerFormHideItem(hideItemInstance.value as FormHideItemInstanceBase);
+    return form.registerFormHideItem(toValue(hideItemInstance) as FormHideItemInstanceBase);
   });
 
   return { form, isHide };

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

@@ -2,7 +2,7 @@
  * @description 注册组件
  */
 
-import { ref, toValue, watch } from 'vue';
+import { Ref, ref, toValue, watch } from 'vue';
 import type { RuleItem } from 'async-validator';
 import { useFormInject } from '../useForm';
 import { useFormItem } from '../useFormItem';
@@ -29,11 +29,11 @@ export const useRegisterFormItem = (options: RegisterFormItemOptions) => {
   const { newName, newSort, parentItem } = useFormItemParentNameInject({ name, sort, isJoinParentField });
   // 注册规则
   // 注册单个实例
-  const ruleInstance = ref(new RuleInstanceBase2());
+  const ruleInstance: Ref<RuleInstanceBase2> = ref<any>(new RuleInstanceBase2());
   const formItemInstance = useFormItem();
 
   watch(
-    [form],
+    () => [form],
     () => {
       ruleInstance.value.instance = form;
       formItemInstance.instance = form;
@@ -42,33 +42,33 @@ export const useRegisterFormItem = (options: RegisterFormItemOptions) => {
   );
 
   watch(
-    [newName.value],
+    () => [toValue(newName)],
     () => {
-      ruleInstance.value.ctor(newName.value, rules || []);
-      formItemInstance.ctor(newName.value, ruleInstance.value as any);
+      ruleInstance.value.ctor(toValue(newName), rules || []);
+      formItemInstance.ctor(toValue(newName), toValue(ruleInstance) as any);
     },
     { immediate: true },
   );
 
   watch(
-    [newSort.value],
+    () => [toValue(newSort)],
     () => {
-      ruleInstance.value.sort = newSort.value;
-      formItemInstance.sort = newSort.value;
+      ruleInstance.value.sort = toValue(newSort);
+      formItemInstance.sort = toValue(newSort);
     },
     { immediate: true },
   );
 
   watch(
-    [parentItem.value],
+    () => [toValue(parentItem)],
     () => {
-      formItemInstance.parentDataField = toValue(parentItem.value.name);
+      formItemInstance.parentDataField = toValue(toValue(parentItem).name);
     },
     { immediate: true },
   );
 
   const updated = () => {
-    deepRefData.value = { a: new Date().valueOf() };
+    deepRefData.value = { __temp: new Date().valueOf() };
   };
 
   formItemInstance.updated = updated;

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

@@ -11,25 +11,25 @@ export const useRegisterFormList = (options: RegisterFormListOptions) => {
   const formListInstance = useFormList();
 
   watch(
-    [newName.value],
+    () => [toValue(newName)],
     () => {
-      formListInstance.ctor(newName.value);
+      formListInstance.ctor(toValue(newName));
     },
     { immediate: true },
   );
 
   watch(
-    [form, formItemInstance, ruleInstance.value],
+    () => [form, formItemInstance, toValue(ruleInstance)],
     () => {
       formListInstance.instance = form;
       formListInstance.formItemInstance = formItemInstance;
-      formListInstance.rule = ruleInstance.value as any;
+      formListInstance.rule = toValue(ruleInstance) as any;
     },
     { immediate: true },
   );
 
   watch(
-    [options.sort, parentItem.value],
+    () => [options.sort, toValue(parentItem)],
     () => {
       formListInstance.sort = toValue(parentItem.value.sort);
       formListInstance.parentDataField = toValue(parentItem.value.name);

package/src/hooks/useAttrs.ts

@@ -53,14 +53,12 @@ export function useAttrsProvide(options: AttrsOptions) {
 export function useAttrsInject() {
   const attrs = inject<ComputedRef<AttrsOptions>>(
     attrsProvideSymbol,
-    computed(() =>
-      toRefs({
-        colCount: 4,
-        errorLayout: 'left-bottom',
-        labelMode: 'top',
-        showColon: true,
-      }),
-    ),
+    computed(() => ({
+      colCount: ref(4),
+      errorLayout: ref('left-bottom'),
+      labelMode: ref('top'),
+      showColon: ref(true),
+    })),
   );
   return attrs;
 }

package/src/interface/index.ts

@@ -1,4 +1,4 @@
-import { ComputedRef, Ref, VNodeChild, StyleValue, UnwrapNestedRefs } from 'vue';
+import { ComputedRef, Ref, VNode, Component, StyleValue, UnwrapNestedRefs } from 'vue';
 import { FormItemAttrOptions } from '../hooks/attr/attr.FormItem';
 import { LayoutFormItemProps } from './layout.formItem';
 import { FormLayoutProps } from './layout';
@@ -14,7 +14,7 @@ export interface FormItemProps extends FormItemAttrOptions, LayoutFormItemProps
   /**不进行样式渲染*/
   noStyle?: boolean;
   /**输入框组件*/
-  input?: VNodeChild;
+  input?: Component | string;
 }
 
 export interface FormProps<T = any> extends FormLayoutProps {

package/src/layout/layout.formItem.vue

@@ -47,7 +47,7 @@
 
 <script lang="ts" setup>
 import clx from 'classnames';
-import { defineProps, withDefaults, toValue, computed, StyleValue, watch } from "vue"
+import { defineProps, withDefaults, toValue, computed, StyleValue } from "vue"
 import type { LayoutFormItemProps } from "../interface/layout.formItem"
 import { useAttrsInject } from "../hooks/useAttrs"
 const preCls = 'carefrees-form-item';

package/esm/form/index.vue2.mjs

@@ -1,4 +0,0 @@
-import _sfc_main from "./index.vue.mjs";
-export {
-  _sfc_main as default
-};

package/lib/form/index.vue2.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const index_vue_vue_type_script_setup_true_lang = require("./index.vue.js");
-exports.default = index_vue_vue_type_script_setup_true_lang.default;