属性合并问题

cypress/component/BaseScene.cy.tsx

@@ -7,6 +7,7 @@ const Test = defineComponent({
             class: 'before',
             id: 'p1',
         });
+
         const style = ref({});
         const { render } = useScene({
             components: [
@@ -26,7 +27,7 @@ const Test = defineComponent({
                 },
                 {
                     name: ComponentType.Button,
-                    props: { type: 'primary' },
+                    props: { type: 'primary', id: 'clickMeBtn' },
                     children: ['ClickMe'],
                     events: {
                         onClick: () => {
@@ -45,6 +46,21 @@ const Test = defineComponent({
                     props: { id: 'p2', style: style },
                     children: ['单属性响应式样式'],
                 },
+                {
+                    name: 'div',
+                    vIf: false,
+                    children: 'vIf',
+                },
+                {
+                    name: 'div',
+                    vShow: false,
+                    children: 'vShow',
+                },
+                {
+                    name: ComponentType.Button,
+                    disabled: true,
+                    children: 'vShow',
+                },
             ],
         });
         return render;
@@ -67,15 +83,15 @@ describe('BaseScene.cy.tsx', () => {
     it('测试传入组件', () => {
         const app = cy.mount(Test);
         // 测试传入组件
-        app.get('button').should('contain.text', 'ClickMe');
-        app.get('button').should('have.class', 'fes-btn-type-primary');
+        app.get('#clickMeBtn').should('contain.text', 'ClickMe');
+        app.get('#clickMeBtn').should('have.class', 'fes-btn-type-primary');
     });
 
     it('测试响应式属性', () => {
         const app = cy.mount(Test);
         // 测试响应式属性
         app.get('#p1').should('have.class', 'before');
-        app.get('button').click();
+        app.get('#clickMeBtn').click();
         app.get('#p1').should('have.class', 'after');
         app.get('#p2').should('have.css', 'color', 'rgb(255, 0, 0)');
     });

cypress/component/useForm.cy.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, EnumOption, FormSceneContext, doInitFields, doValidate, useForm, useSceneContext } from '@koala-form/core';
+import { ComponentType, EnumOption, FormSceneContext, composeRender, doInitFields, doValidate, useForm, useSceneContext } from '@koala-form/core';
 import { defineComponent, reactive, ref } from 'vue';
 
 const Test = defineComponent({
@@ -13,10 +13,12 @@ const Test = defineComponent({
         const vIf = ref(true);
         const vShow = ref(true);
 
+        const name = { name: 'name', label: '姓名', props: { id: 'name' }, components: { name: ComponentType.Input } };
+
         const form = useForm({
             ctx: ctx as FormSceneContext,
             fields: [
-                { name: 'name', label: '姓名', props: { id: 'name' }, required: true, components: { name: ComponentType.Input } },
+                { ...name, required: true },
                 { name: 'sex', label: '性别', vIf, vShow, props: { id: 'sex' }, options: sexOptions, components: { name: ComponentType.Select } },
                 {
                     label: ' ',
@@ -68,7 +70,12 @@ const Test = defineComponent({
                 },
             ],
         });
-        return form.render;
+
+        const form2 = useForm({
+            fields: [{ ...name, label: '姓名2' }],
+        });
+
+        return composeRender([form.render, form2.render]);
     },
 });
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koala-form/core",
-  "version": "2.0.3",
+  "version": "2.0.6",
   "description": "基于Vue3的中后台表单解决方案",
   "main": "dist/index.js",
   "module": "dist/index.js",

packages/core/src/plugins/disabledPlugin.ts

@@ -1,5 +1,5 @@
 import { isFunction, isUndefined } from 'lodash-es';
-import { ref } from 'vue';
+import { Ref, computed, ref, unref } from 'vue';
 import { SceneConfig, SceneContext } from '../base';
 import { mergeRefProps, travelTree } from '../helper';
 import { ComponentDesc } from '../scheme';
@@ -20,7 +20,7 @@ export const disabledPlugin: PluginFunction<SceneContext, SceneConfig> = (api) =
                 mergeRefProps(scheme, 'props', { disabled: _disabled });
             } else {
                 const props: any = scheme.props || {};
-                props.disabled = node.disabled;
+                props.disabled = computed(() => unref(node.disabled as Ref<boolean>));
                 scheme.props = props;
             }
         });

packages/core/src/plugins/vIfPlugin.ts

@@ -1,5 +1,5 @@
 import { isFunction, isUndefined } from 'lodash-es';
-import { Ref, ref } from 'vue';
+import { Ref, computed, ref, unref } from 'vue';
 import { SceneConfig, SceneContext } from '../base';
 import { travelTree } from '../helper';
 import { ComponentDesc } from '../scheme';
@@ -19,7 +19,7 @@ export const vIfPlugin: PluginFunction<SceneContext, SceneConfig> = (api) => {
                 });
                 scheme.vIf = vIf;
             } else {
-                scheme.vIf = node.vIf as Ref<boolean>;
+                scheme.vIf = computed(() => unref(node.vIf)) as Ref<boolean>;
             }
         });
         api.emit('started');

packages/core/src/plugins/vShowPlugin.ts

@@ -1,5 +1,5 @@
 import { isFunction, isUndefined } from 'lodash-es';
-import { Ref, ref } from 'vue';
+import { Ref, computed, ref, unref } from 'vue';
 import { SceneConfig, SceneContext } from '../base';
 import { travelTree } from '../helper';
 import { ComponentDesc } from '../scheme';
@@ -19,7 +19,7 @@ export const vShowPlugin: PluginFunction<SceneContext, SceneConfig> = (api) => {
                 });
                 scheme.vShow = vShow;
             } else {
-                scheme.vShow = node.vShow as Ref<boolean>;
+                scheme.vShow = computed(() => unref(node.vShow)) as Ref<boolean>;
             }
         });
         api.emit('started');

packages/core/src/scheme.ts

@@ -1,5 +1,5 @@
 import { isString } from 'lodash-es';
-import { DefineComponent, Ref, Slot, Slots, VNodeChild, reactive } from 'vue';
+import { DefineComponent, Ref, Slot, Slots, VNodeChild, isReactive, reactive } from 'vue';
 import { EnumOption, Reactive, SceneContext, When } from './base';
 import { travelTree, turnArray } from './helper';
 
@@ -9,7 +9,7 @@ export interface ComponentDesc {
     vIf?: Ref<boolean> | When | boolean;
     vShow?: Ref<boolean> | When | boolean;
     vModels?: Record<string, ModelRef>;
-    disabled?: Ref<boolean> | When;
+    disabled?: Ref<boolean> | When | boolean;
     events?: Record<string, (value: any, ...args: any[]) => void>;
     slotName?: string;
     slots?: Slots;
@@ -112,7 +112,11 @@ export const createScheme = (node: ComponentDesc | string | Field | SceneContext
     } else if ((node as SceneContext).schemes) {
         return { __node: node, component: '', children: (node as SceneContext).schemes };
     } else {
-        const scheme = { __node: node, component: node.name || '', props: (node as ComponentDesc).props || reactive({}) };
+        let props = (node as ComponentDesc).props;
+        if (!isReactive(props)) {
+            props = reactive({ ...(props || {}) });
+        }
+        const scheme = { __node: node, component: node.name || '', props };
         return scheme;
     }
 };