@carefrees/form-utils-vue 0.0.12 → 0.0.14

package/README.md

@@ -12,10 +12,15 @@ npm install @carefrees/form-utils-vue # yarn add @carefrees/form-utils-vue # pnp
 
 ```vue
 <script lang="ts" setup>
-import { reactive } from "vue";
+import { ref } from "vue";
 import { Form, useForm, FormItem } from "@carefrees/form-utils-vue";
 import "@carefrees/form-utils-vue/assets/index.css"
-const formData = reactive({})
+import Input from './Input.vue';
+const formData = ref<{ a: string, b: string }>({
+  a: '',
+  b: ''
+})
+
 const form = useForm();
 const onSubmit = async () => {
   try {
@@ -29,16 +34,38 @@ const onSubmit = async () => {
   }
 }
 const onSetValue = () => {
-  form.value.updatedFieldValue('b', '123')
+  formData.value.a = '123'
+  formData.value.b = '456'
+  // form.value.updatedFieldValue('b', '123')
+}
+
+const onSetValue2 = () => {
+  // formData.value.a = ''
+  // formData.value.b = ''
+  formData.value = {
+    a: "21",
+    b: "22"
+  }
+  // form.value.updatedFieldValue('b', '123')
+}
+
+const onSetValue3 = () => {
+  form.value.updatedFieldValue('b', '')
 }
-const onValuesChange = (...rest: any[]) => {
-  console.log(rest)
+
+const rules1 = ref([{ required: true, message: "必填" }])
+const rules2 = ref([{ required: true, message: "必填" }])
+
+const onUpdateRules = () => {
+  rules1.value = [{ required: true, message: "必填2" }]
+  rules2.value = [{ required: false, message: "不必填" }]
 }
+
 </script>
 <template>
-  <Form @valuesChange='onValuesChange' :formData='formData' :form='form'>
-    <FormItem label='内容' input='input' name='a' :rules='[{ required: true, message: "必填" }]' />
-    <FormItem input='input' name='b'>
+  <Form  :formData='formData' :form='form'>
+    <FormItem label='内容' input='input' name='a' :rules='rules1' />
+    <FormItem :input='Input' name='b' :rules='rules2'>
       <template #label>
         <span>s内容2</span>
       </template>
@@ -50,8 +77,26 @@ const onValuesChange = (...rest: any[]) => {
       </template>
     </FormItem>
     <FormItem label='Input' input='input' name='c' />
-    <button type='button' @click='onSubmit'>点击</button>
+    <FormItem name='d'>
+      <template #label>
+        <span>d</span>
+      </template>
+      <template #helpText>
+        <span>helpText</span>
+      </template>
+      <template #default>
+        <input placeholder='输入内容' v-model='formData.a' />
+      </template>
+      <template #extra>
+        <span>extra</span>
+      </template>
+    </FormItem>
+    <button type='button' @click='onSubmit'>验证</button>
     <button type='button' @click='onSetValue'>设置值</button>
+    <button type='button' @click='onSetValue2'>设置值2</button>
+    <button type='button' @click='onSetValue3'>设置值3</button>
+    <button type='button' @click='onUpdateRules'>更新规则</button>
   </Form>
 </template>
+<style scoped></style>
 ```

package/esm/form/form.js

@@ -1,8 +1,7 @@
-import { computed, createElementBlock, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, reactive, renderSlot, unref, withCtx } from "vue";
-import { useRegisterForm } from "../hooks/register/register.form.js";
-import { useForm, useFormProvide } from "../hooks/useForm.js";
+import { computed, createElementBlock, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, watch, withCtx } from "vue";
 import layout from "../layout/layout.js";
 import classnames from "classnames";
+import { useForm, useFormProvide, useRegisterForm } from "@carefrees/form-utils-vue-hooks";
 const _sfc_main = /* @__PURE__ */ defineComponent({
     name: "Form",
     inheritAttrs: false,
@@ -30,12 +29,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]
         },
         formData: {},
-        onValuesChange: {},
         onFinish: {},
         onFinishFailed: {},
         hideData: {},
         name: {},
-        hideRuleData: {},
         bgcolor: {},
         title: {
             type: [
@@ -100,7 +97,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     ],
     setup (__props, { emit: __emit }) {
         const props = __props;
-        const { form, style, formData, hideData, hideRuleData, name, onFinish, onFinishFailed, onValuesChange, layoutStyle, layoutClass, bgcolor, ...rest } = props;
+        const { form, style, formData, hideData, name, onFinish, onFinishFailed, layoutStyle, layoutClass, bgcolor, ...rest } = props;
         const cls = computed(()=>classnames("carefrees-form", props.class));
         const formStyle = computed(()=>{
             if (bgcolor) return [
@@ -114,24 +111,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ];
         });
         const formInstance = useForm(props.form);
-        formInstance.value.ctor(reactive(props.formData || {}), reactive(props.hideData || {}), reactive(props.hideRuleData || {}));
+        formInstance.value.formData = ref(props.formData || {});
+        formInstance.value.hideState = ref(props.hideData || {});
+        watch(()=>props.formData, (newVal)=>{
+            formInstance.value.formData = ref(newVal || {});
+        });
+        watch(()=>props.hideData, (newVal)=>{
+            formInstance.value.hideState = ref(newVal || {});
+        });
         const emits = __emit;
         formInstance.value.onFinish = (...rest2)=>{
             emits("finish", ...rest2);
         };
-        formInstance.value.onValuesChange = (...rest2)=>{
-            emits("valuesChange", ...rest2);
-        };
         formInstance.value.onFinishFailed = (...rest2)=>{
             emits("finishFailed", ...rest2);
         };
-        useRegisterForm(formInstance.value, props.name);
+        useRegisterForm(formInstance, props.name);
         const onSubmit = (event)=>{
             event?.preventDefault?.();
             event?.stopPropagation?.();
             formInstance.value.submit?.();
         };
-        useFormProvide(formInstance.value);
+        useFormProvide(formInstance);
         return (_ctx, _cache)=>(openBlock(), createElementBlock("form", {
                 class: normalizeClass(cls.value),
                 style: normalizeStyle(formStyle.value),

package/esm/formItem/form.Item.base.js

@@ -1,7 +1,6 @@
 import { computed, createBlock, createSlots, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, renderList, renderSlot, resolveDynamicComponent, toValue, unref, useSlots, withCtx } from "vue";
-import { useFormItemAttr } from "../hooks/attr/attr.FormItem.js";
 import layout_formItem from "../layout/layout.formItem.js";
-import { useFormItemParentNameProvide } from "../hooks/useFormItemParentName.js";
+import { useFormItemAttr, useFormItemParentNameProvide } from "@carefrees/form-utils-vue-hooks";
 const _sfc_main = /* @__PURE__ */ defineComponent({
     name: "FormItemBase",
     inheritAttrs: false,
@@ -13,10 +12,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         input: {},
         dependencies: {},
         noticeOnlyRuleDataField: {},
-        isNoticeParentField: {
-            type: Boolean
-        },
-        noticeWatchField: {},
         preserve: {
             type: Boolean
         },

package/esm/formItem/form.Item.base.vue.d.ts

@@ -1,6 +1,7 @@
 import type { FormItemProps } from "../interface/index";
 type __VLS_Slots = {
     label: (params: any) => any;
+    default: (params: any) => any;
     helpText: (params: any) => any;
     extra: (params: any) => any;
 };

package/esm/formItem/form.hide.item.js

@@ -1,6 +1,6 @@
 import { createBlock, createCommentVNode, createSlots, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderList, renderSlot, unref, useSlots, withCtx } from "vue";
 import form_Item_base from "./form.Item.base.js";
-import { useRegisterFormHideItem } from "../hooks/register/register.FormHideItem.js";
+import { useRegisterFormHideItem } from "@carefrees/form-utils-vue-hooks";
 const _sfc_main = /* @__PURE__ */ defineComponent({
     name: "FormHideItem",
     inheritAttrs: false,
@@ -12,10 +12,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         input: {},
         dependencies: {},
         noticeOnlyRuleDataField: {},
-        isNoticeParentField: {
-            type: Boolean
-        },
-        noticeWatchField: {},
         preserve: {
             type: Boolean
         },

package/esm/formItem/form.hide.item.vue.d.ts

@@ -1,6 +1,7 @@
 import type { FormItemProps } from "../interface/index";
 type __VLS_Slots = {
     label: (params: any) => any;
+    default: (params: any) => any;
     helpText: (params: any) => any;
     extra: (params: any) => any;
 };

package/esm/formItem/formItem.js

@@ -12,10 +12,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         input: {},
         dependencies: {},
         noticeOnlyRuleDataField: {},
-        isNoticeParentField: {
-            type: Boolean
-        },
-        noticeWatchField: {},
         preserve: {
             type: Boolean
         },

package/esm/formItem/index.d.ts

@@ -13,6 +13,7 @@ export declare const FormItemBase: import("../utils").SFCWithInstall<{
 } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").FormItemProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         label: (params: any) => any;
+        default: (params: any) => any;
         helpText: (params: any) => any;
         extra: (params: any) => any;
     };
@@ -52,6 +53,7 @@ export declare const FormHideItem: import("../utils").SFCWithInstall<{
 } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").FormItemProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         label: (params: any) => any;
+        default: (params: any) => any;
         helpText: (params: any) => any;
         extra: (params: any) => any;
     };

package/esm/index.d.ts

@@ -1,4 +1,4 @@
-export * from './hooks';
+export * from '@carefrees/form-utils-vue-hooks';
 export * from './component';
 export * from './utils';
 export * from './interface';

package/esm/index.js

@@ -1,4 +1,4 @@
-export * from "./hooks/index.js";
+export * from "@carefrees/form-utils-vue-hooks";
 export * from "./component.js";
 export * from "./utils/index.js";
 export * from "./interface/index.js";

package/esm/interface/index.d.ts

@@ -1,12 +1,7 @@
-import { ComputedRef, Ref, Component, StyleValue, UnwrapNestedRefs } from 'vue';
-import { FormItemAttrOptions } from '../hooks/attr/attr.FormItem';
+import { Component, StyleValue } from 'vue';
 import { LayoutFormItemProps } from './layout.formItem';
 import { FormLayoutProps } from './layout';
-import { FormInstanceBase, ValidateErrorEntity } from '@carefrees/form-utils';
-export type ComputedRefBase<T> = ComputedRef<T> | Ref<T>;
-export type PartialComputedRefs<T> = {
-    [K in keyof T]: ComputedRefBase<T[K]>;
-};
+import type { FormInstanceBase, ValidateErrorEntity, FormItemAttrOptions } from '@carefrees/form-utils-vue-hooks';
 export interface FormItemProps extends FormItemAttrOptions, LayoutFormItemProps {
     /**不进行样式渲染*/
     noStyle?: boolean;
@@ -14,15 +9,13 @@ export interface FormItemProps extends FormItemAttrOptions, LayoutFormItemProps
     input?: Component | string;
 }
 export interface FormProps<T = any> extends FormLayoutProps {
-    form?: FormInstanceBase;
+    form?: FormInstanceBase<T>;
     style?: StyleValue;
     class?: string;
     layoutClass?: string;
     layoutStyle?: StyleValue;
     /**表单数据*/
-    formData?: any;
-    /**值更新触发*/
-    onValuesChange?: (changedValues: Partial<T>, values: UnwrapNestedRefs<T>) => void;
+    formData?: Object;
     /**提交保存 验证成功*/
     onFinish?: (values: T) => void;
     /**提交保存 验证失败*/
@@ -31,8 +24,6 @@ export interface FormProps<T = any> extends FormLayoutProps {
     hideData?: Record<string, boolean>;
     /**表单名称*/
     name?: string;
-    /**隐藏规则校验*/
-    hideRuleData?: Record<string, boolean>;
     /**背景颜色*/
     bgcolor?: string;
 }

package/esm/interface/layout.d.ts

@@ -1,4 +1,4 @@
-import { AttrsOptions } from '../hooks/useAttrs';
+import type { AttrsOptions } from '@carefrees/form-utils-vue-hooks';
 import { VNodeChild, StyleValue } from 'vue';
 export interface FormLayoutProps extends Omit<AttrsOptions, 'colCount'> {
     /**标题*/

package/esm/interface/layout.formItem.d.ts

@@ -1,5 +1,5 @@
 import { VNodeChild, StyleValue } from 'vue';
-import { ComputedRefBase } from '.';
+import type { ComputedRefBase } from '@carefrees/form-utils-vue-hooks';
 export interface LayoutFormItemProps {
     /**规则校验失败错误提示位置*/
     errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';

package/esm/layout/layout.formItem.js

@@ -1,6 +1,6 @@
 import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, toValue, useSlots } from "vue";
 import classnames from "classnames";
-import { useAttrsInject } from "../hooks/useAttrs.js";
+import { useAttrsInject } from "@carefrees/form-utils-vue-hooks";
 const _hoisted_1 = [
     "for"
 ];

package/esm/layout/layout.js

@@ -1,6 +1,6 @@
 import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, toValue, useSlots } from "vue";
 import classnames from "classnames";
-import { useAttrsInject, useAttrsProvide } from "../hooks/useAttrs.js";
+import { useAttrsInject, useAttrsProvide } from "@carefrees/form-utils-vue-hooks";
 const preCls = "carefrees-form-layout";
 const _sfc_main = /* @__PURE__ */ defineComponent({
     name: "Layout",

package/package.json

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

package/src/form/form.vue

@@ -8,12 +8,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineProps, withDefaults, reactive, defineEmits } from "vue"
+import { computed, defineProps, withDefaults, defineEmits, ref, watch } 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';
+import { useRegisterForm, useForm, useFormProvide } from "@carefrees/form-utils-vue-hooks"
 
 defineOptions({
   name: 'Form',
@@ -27,11 +26,9 @@ const {
   style,
   formData,
   hideData,
-  hideRuleData,
   name,
   onFinish,
   onFinishFailed,
-  onValuesChange,
   layoutStyle,
   layoutClass,
   bgcolor,
@@ -47,27 +44,33 @@ const formStyle = computed(() => {
 });
 
 const formInstance = useForm(props.form);
-formInstance.value.ctor(reactive(props.formData || {}), reactive(props.hideData || {}), reactive(props.hideRuleData || {}));
+formInstance.value.formData = ref(props.formData || {});
+formInstance.value.hideState = ref(props.hideData || {});
+
+watch(() => props.formData, (newVal) => {
+  formInstance.value.formData = ref(newVal || {});
+})
+
+watch(() => props.hideData, (newVal) => {
+  formInstance.value.hideState = ref(newVal || {});
+})
 
 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)
-
+useRegisterForm(formInstance, props.name)
 const onSubmit = (event: Event) => {
   event?.preventDefault?.();
   event?.stopPropagation?.();
   formInstance.value.submit?.();
 }
 
-useFormProvide(formInstance.value);
+useFormProvide(formInstance);
 
 </script>

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

@@ -8,12 +8,12 @@
       :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>
+      <template v-for="(item, name) in slots" #[name]="slotProps">
+        <slot :name="name" v-bind="slotProps"></slot>
+      </template>
     </LayoutFormItem>
   </template>
 </template>
@@ -21,9 +21,8 @@
 <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"
+import { useFormItemParentNameProvide, useFormItemAttr } from "@carefrees/form-utils-vue-hooks"
 
 defineOptions({
   name: 'FormItemBase',
@@ -42,6 +41,7 @@ useFormItemParentNameProvide({
 
 const slots = defineSlots<{
   label: (params: any) => any,
+  default: (params: any) => any,
   helpText: (params: any) => any,
   extra: (params: any) => any,
 }>()

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

@@ -12,7 +12,8 @@
 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"
+import { useRegisterFormHideItem } from "@carefrees/form-utils-vue-hooks"
+
 defineOptions({
   name: 'FormHideItem',
   inheritAttrs: false, // 可选，防止属性自动应用到根元素
@@ -21,6 +22,7 @@ const props = withDefaults(defineProps<FormItemProps>(), {
 })
 const slots = defineSlots<{
   label: (params: any) => any,
+  default: (params: any) => any,
   helpText: (params: any) => any,
   extra: (params: any) => any,
 }>()

package/src/formItem/formItem.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineProps, withDefaults } from "vue"
+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"
@@ -29,6 +29,7 @@ defineOptions({
 });
 const props = withDefaults(defineProps<Partial<FormItemProps>>(), {
 })
+
 const slots = defineSlots<{
   default: (params: any) => any,
   label: (params: any) => any,

package/src/index.ts

@@ -1,5 +1,5 @@
 import * as components from './component';
-export * from './hooks';
+export * from '@carefrees/form-utils-vue-hooks';
 export * from './component';
 export * from './utils';
 export * from './interface';

package/src/interface/index.ts

@@ -1,14 +1,7 @@
-import { ComputedRef, Ref, VNode, Component, StyleValue, UnwrapNestedRefs } from 'vue';
-import { FormItemAttrOptions } from '../hooks/attr/attr.FormItem';
+import { Component, StyleValue } from 'vue';
 import { LayoutFormItemProps } from './layout.formItem';
 import { FormLayoutProps } from './layout';
-import { FormInstanceBase, ValidateErrorEntity } from '@carefrees/form-utils';
-
-export type ComputedRefBase<T> = ComputedRef<T> | Ref<T>;
-
-export type PartialComputedRefs<T> = {
-  [K in keyof T]: ComputedRefBase<T[K]>;
-};
+import type { FormInstanceBase, ValidateErrorEntity, FormItemAttrOptions } from '@carefrees/form-utils-vue-hooks';
 
 export interface FormItemProps extends FormItemAttrOptions, LayoutFormItemProps {
   /**不进行样式渲染*/
@@ -18,15 +11,13 @@ export interface FormItemProps extends FormItemAttrOptions, LayoutFormItemProps
 }
 
 export interface FormProps<T = any> extends FormLayoutProps {
-  form?: FormInstanceBase;
+  form?: FormInstanceBase<T>;
   style?: StyleValue;
   class?: string;
   layoutClass?: string;
   layoutStyle?: StyleValue;
   /**表单数据*/
-  formData?: any;
-  /**值更新触发*/
-  onValuesChange?: (changedValues: Partial<T>, values: UnwrapNestedRefs<T>) => void;
+  formData?: Object;
   /**提交保存 验证成功*/
   onFinish?: (values: T) => void;
   /**提交保存 验证失败*/
@@ -35,8 +26,6 @@ export interface FormProps<T = any> extends FormLayoutProps {
   hideData?: Record<string, boolean>;
   /**表单名称*/
   name?: string;
-  /**隐藏规则校验*/
-  hideRuleData?: Record<string, boolean>;
   /**背景颜色*/
   bgcolor?: string;
 }

package/src/interface/layout.formItem.ts

@@ -1,6 +1,5 @@
 import { VNodeChild, StyleValue } from 'vue';
-import { ComputedRefBase } from '.';
-
+import type { ComputedRefBase } from '@carefrees/form-utils-vue-hooks';
 export interface LayoutFormItemProps {
   /**规则校验失败错误提示位置*/
   errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';

package/src/interface/layout.ts

@@ -1,4 +1,5 @@
-import { AttrsOptions } from '../hooks/useAttrs';
+import type { AttrsOptions } from '@carefrees/form-utils-vue-hooks';
+
 import { VNodeChild, StyleValue } from 'vue';
 
 export interface FormLayoutProps extends Omit<AttrsOptions, 'colCount'> {

package/src/layout/layout.formItem.vue

@@ -49,7 +49,8 @@
 import clx from 'classnames';
 import { defineProps, withDefaults, toValue, computed, StyleValue } from "vue"
 import type { LayoutFormItemProps } from "../interface/layout.formItem"
-import { useAttrsInject } from "../hooks/useAttrs"
+import { useAttrsInject } from "@carefrees/form-utils-vue-hooks"
+
 const preCls = 'carefrees-form-item';
 defineOptions({
   name: 'LayoutFormItem',

package/src/layout/layout.vue

@@ -30,7 +30,8 @@
 import clx from 'classnames';
 import { defineProps, withDefaults, toValue, computed, StyleValue } from "vue"
 import type { FormLayoutProps } from "../interface/layout"
-import { useAttrsInject, useAttrsProvide } from "../hooks/useAttrs"
+import { useAttrsInject, useAttrsProvide } from "@carefrees/form-utils-vue-hooks"
+
 const preCls = 'carefrees-form-layout';
 
 const attrs = useAttrsInject();