From 040dd788940271175d3c1295a96f01112dcf1adb Mon Sep 17 00:00:00 2001 From: aringlai Date: Thu, 23 Nov 2023 11:37:56 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20vIf=E3=80=81vShow=E3=80=81disabled?= =?UTF-8?q?=20&&=20props=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/component/BaseScene.cy.tsx | 24 +++++++++++++++++---- packages/core/src/plugins/disabledPlugin.ts | 4 ++-- packages/core/src/plugins/vIfPlugin.ts | 4 ++-- packages/core/src/plugins/vShowPlugin.ts | 4 ++-- packages/core/src/scheme.ts | 10 ++++++--- 5 files changed, 33 insertions(+), 13 deletions(-) diff --git a/cypress/component/BaseScene.cy.tsx b/cypress/component/BaseScene.cy.tsx index d2fbc10..d71b9e1 100644 --- a/cypress/component/BaseScene.cy.tsx +++ b/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)'); }); diff --git a/packages/core/src/plugins/disabledPlugin.ts b/packages/core/src/plugins/disabledPlugin.ts index 14c742e..dab85d2 100644 --- a/packages/core/src/plugins/disabledPlugin.ts +++ b/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 = (api) = mergeRefProps(scheme, 'props', { disabled: _disabled }); } else { const props: any = scheme.props || {}; - props.disabled = node.disabled; + props.disabled = computed(() => unref(node.disabled as Ref)); scheme.props = props; } }); diff --git a/packages/core/src/plugins/vIfPlugin.ts b/packages/core/src/plugins/vIfPlugin.ts index 60eaf27..b3ab829 100644 --- a/packages/core/src/plugins/vIfPlugin.ts +++ b/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 = (api) => { }); scheme.vIf = vIf; } else { - scheme.vIf = node.vIf as Ref; + scheme.vIf = computed(() => unref(node.vIf)) as Ref; } }); api.emit('started'); diff --git a/packages/core/src/plugins/vShowPlugin.ts b/packages/core/src/plugins/vShowPlugin.ts index ea766e4..65cd068 100644 --- a/packages/core/src/plugins/vShowPlugin.ts +++ b/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 = (api) => { }); scheme.vShow = vShow; } else { - scheme.vShow = node.vShow as Ref; + scheme.vShow = computed(() => unref(node.vShow)) as Ref; } }); api.emit('started'); diff --git a/packages/core/src/scheme.ts b/packages/core/src/scheme.ts index 06f8a2d..1ab4a0b 100644 --- a/packages/core/src/scheme.ts +++ b/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 | When | boolean; vShow?: Ref | When | boolean; vModels?: Record; - disabled?: Ref | When; + disabled?: Ref | When | boolean; events?: Record 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; } }; From 49a66552d05bf8aecdbb6fd554735947c3131c93 Mon Sep 17 00:00:00 2001 From: aringlai Date: Thu, 23 Nov 2023 15:30:30 +0800 Subject: [PATCH 2/3] =?UTF-8?q?test:=20=E6=B5=8B=E8=AF=95=E6=A1=88?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/component/useForm.cy.tsx | 13 ++++++++++--- packages/core/package.json | 2 +- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/cypress/component/useForm.cy.tsx b/cypress/component/useForm.cy.tsx index 50e6291..ea2fc27 100644 --- a/cypress/component/useForm.cy.tsx +++ b/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]); }, }); diff --git a/packages/core/package.json b/packages/core/package.json index 2bed307..4cf71b6 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@koala-form/core", - "version": "2.0.3", + "version": "2.0.4", "description": "基于Vue3的中后台表单解决方案", "main": "dist/index.js", "module": "dist/index.js", From 0c6a7187ce37efd40b77d1d8645d3d72cfa5870e Mon Sep 17 00:00:00 2001 From: aringlai Date: Thu, 23 Nov 2023 15:35:51 +0800 Subject: [PATCH 3/3] refactor: version --- packages/core/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/package.json b/packages/core/package.json index 4cf71b6..8c6de01 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@koala-form/core", - "version": "2.0.4", + "version": "2.0.6", "description": "基于Vue3的中后台表单解决方案", "main": "dist/index.js", "module": "dist/index.js",