Skip to content

Commit

Permalink
fix(vue): remove empty default slots of fields (#1517)
Browse files Browse the repository at this point in the history
  • Loading branch information
@MisicDemone
MisicDemone authored May 27, 2021
1 parent d3dd91c commit 00a80b4
Show file tree
Hide file tree
Showing 15 changed files with 338 additions and 270 deletions.
25 changes: 13 additions & 12 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,16 +57,17 @@
"@rollup/plugin-commonjs": "^17.0.0",
"@testing-library/jest-dom": "^5.0.0",
"@testing-library/react": "^11.2.3",
"@testing-library/vue": "^5.6.1",
"@types/hoist-non-react-statics": "^3.3.1",
"@testing-library/vue": "^5.6.2",
"@types/fs-extra": "^8.1.0",
"@types/hoist-non-react-statics": "^3.3.1",
"@types/jest": "^24.0.18",
"@types/node": "^12.6.8",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@typescript-eslint/eslint-plugin": "^4.9.1",
"@typescript-eslint/parser": "^4.8.2",
"@umijs/plugin-sass": "^1.1.1",
"@vue/test-utils": "^1.2.0",
"antd": "^4.0.0",
"chalk": "^2.4.2",
"chokidar": "^2.1.2",
Expand All @@ -77,22 +78,22 @@
"css-loader": "^5.0.0",
"cz-conventional-changelog": "^2.1.0",
"dumi": "^1.1.0-rc.8",
"escape-string-regexp": "^4.0.0",
"eslint": "^7.14.0",
"semver": "^7.3.5",
"string-similarity": "^4.0.4",
"eslint-config-prettier": "^7.0.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-markdown": "^2.0.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-promise": "^4.0.0",
"eslint-plugin-react": "^7.14.2",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-markdown": "^2.0.1",
"eslint-plugin-vue": "^7.0.1",
"execa": "^5.0.0",
"file-loader": "^5.0.2",
"findup": "^0.1.5",
"fs-extra": "^7.0.1",
"gh-release": "^5.0.1",
"ghooks": "^2.0.4",
"glob": "^7.1.3",
"html-webpack-plugin": "^3.2.0",
Expand All @@ -106,35 +107,37 @@
"jest-styled-components": "6.3.3",
"jest-watch-lerna-packages": "^1.1.0",
"lerna": "^4.0.0",
"gh-release": "^5.0.1",
"less": "^4.1.1",
"less-plugin-npm-import": "^2.1.0",
"postcss": "^8.0.0",
"lint-staged": "^8.2.1",
"mfetch": "^0.2.27",
"mobx": "^6.0.4",
"mobx-react-lite": "^3.1.6",
"escape-string-regexp": "^4.0.0",
"onchange": "^5.2.0",
"opencollective": "^1.0.3",
"opencollective-postinstall": "^2.0.2",
"param-case": "^3.0.4",
"postcss": "^8.0.0",
"prettier": "^2.2.1",
"pretty-format": "^24.0.0",
"pretty-quick": "^3.1.0",
"raw-loader": "^4.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-mde": "^11.5.0",
"react-test-renderer": "^16.11.0",
"rimraf": "^3.0.0",
"rollup": "^2.37.1",
"rollup-plugin-external-globals": "^0.6.1",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.30.0",
"rollup-plugin-postcss": "^4.0.0",
"semver": "^7.3.5",
"semver-regex": "^2.0.0",
"showdown": "^1.9.1",
"staged-git-files": "^1.1.2",
"string-similarity": "^4.0.4",
"style-loader": "^1.1.3",
"styled-components": "^5.0.0",
"ts-import-plugin": "1.6.1",
Expand All @@ -145,9 +148,7 @@
"vue-eslint-parser": "^7.1.1",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"showdown": "^1.9.1",
"react-mde": "^11.5.0"
"webpack-dev-server": "^3.10.1"
},
"repository": {
"type": "git",
Expand Down
85 changes: 54 additions & 31 deletions packages/vue/docs/demos/api/components/recursion-field-with-component.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,46 +15,69 @@ import { defineComponent, h } from '@vue/composition-api'
// or "import { defineComponent, h } from 'vue'" if using vue3
import { Input, Button, Space } from 'ant-design-vue'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField, RecursionField, useField, useFieldSchema, observer } from '@formily/vue'
import {
FormProvider,
createSchemaField,
RecursionField,
useField,
useFieldSchema,
observer,
} from '@formily/vue'
import 'ant-design-vue/dist/antd.css'
const ArrayItems = observer(defineComponent({
props: ['value', 'disabled', 'readOnly'],
setup (props) {
const fieldRef = useField()
const schemaRef = useFieldSchema()
const ArrayItems = observer(
defineComponent({
setup() {
const fieldRef = useField()
const schemaRef = useFieldSchema()
return () => {
const field = fieldRef.value
const schema = schemaRef.value
const items = props.value?.map((item, index) => {
return h('div', { key: item.id, style: { marginBottom: '10px' } }, [
h(Space, [
// params of render function is different in vue3
h(RecursionField, { props: { schema: schema.items, name: index } }),
h(Button, { on: { click: () => field.remove(index) } }, ['Remove']),
return () => {
const field = fieldRef.value
const schema = schemaRef.value
const items = field.value?.map((item, index) => {
return h('div', { key: item.id, style: { marginBottom: '10px' } }, [
h(Space, [
// params of render function is different in vue3
h(RecursionField, {
props: { schema: schema.items, name: index },
}),
h(Button, { on: { click: () => field.remove(index) } }, [
'Remove',
]),
]),
])
])
})
const button = h(Button, { on: { click: () => field.push({ id: Date.now() }) } }, ['Add'])
return h('div', [items, button])
}
},
}))
})
const button = h(
Button,
{ on: { click: () => field.push({ id: Date.now() }) } },
['Add']
)
return h('div', [items, button])
}
},
})
)
const { SchemaField, SchemaStringField, SchemaArrayField, SchemaObjectField } = createSchemaField({
components: {
ArrayItems,
Input,
},
})
const { SchemaField, SchemaStringField, SchemaArrayField, SchemaObjectField } =
createSchemaField({
components: {
ArrayItems,
Input,
},
})
export default {
components: { FormProvider, SchemaField, SchemaStringField, SchemaArrayField, SchemaObjectField },
components: {
FormProvider,
SchemaField,
SchemaStringField,
SchemaArrayField,
SchemaObjectField,
},
data() {
return {
form: createForm()
form: createForm(),
}
}
},
}
</script>
174 changes: 91 additions & 83 deletions packages/vue/src/__tests__/schema.markup.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
Schema,
} from '../index'
import { render } from '@testing-library/vue'
import { mount, createLocalVue } from '@vue/test-utils'
import Vue, { CreateElement } from 'vue'
import { defineComponent, h } from '@vue/composition-api'

Expand Down Expand Up @@ -570,87 +571,94 @@ describe('recursion field', () => {
expect(queryByTestId('input')).toBeNull()
})

// test('schema reactions', async () => {
// const form = createForm()
// const components = createSchemaField({
// components: {
// Input,
// },
// })
// const { queryByTestId } = render({
// components: components,
// data () {
// return {
// form,
// reactions: [
// {
// when: '{{$form.values.aaa === "123"}}',
// fulfill: {
// state: {
// visible: true,
// },
// },
// otherwise: {
// state: {
// visible: false,
// },
// },
// },
// {
// when: '{{$self.value === "123"}}',
// target: 'ccc',
// fulfill: {
// schema: {
// 'x-visible': true,
// },
// },
// otherwise: {
// schema: {
// 'x-visible': false,
// },
// },
// },
// ]
// }
// },
// template: `<FormProvider :form="form">
// <SchemaField>
// <SchemaStringField
// name="aaa"
// x-component="Input"
// :x-component-props="{
// 'data-testid': 'aaa',
// }"
// />
// <SchemaStringField
// name="bbb"
// x-component="Input"
// :x-component-props="{
// 'data-testid': 'bbb',
// }"
// :x-reactions="reactions"
// />
// <SchemaStringField
// name="ccc"
// x-component="Input"
// :x-component-props="{
// 'data-testid': 'ccc',
// }"
// />
// </SchemaField>
// </FormProvider>`
// })
// expect(queryByTestId('bbb')).toBeNull()
// fireEvent.update(queryByTestId('aaa'), '123')
// expect(form.query('aaa').get('value')).toEqual('123')
// await waitFor(() => {
// expect(queryByTestId('bbb')).toBeVisible()
// })
// expect(queryByTestId('ccc')).toBeNull()
// fireEvent.update(queryByTestId('bbb'), '123')
// expect(form.query('bbb').get('value')).toEqual('123')
// await waitFor(() => {
// expect(queryByTestId('ccc')).toBeVisible()
// })
// })
test('schema reactions', async () => {
const div = document.createElement('div')
document.body.appendChild(div)
const form = createForm()
const components = createSchemaField({
components: {
Input,
},
})
const localVue = createLocalVue()
localVue.component('FormProvider', FormProvider)
const TestComponent = {
components: components,
data() {
return {
form,
reactions: [
{
when: '{{$form.values.aaa === "123"}}',
fulfill: {
state: {
visible: true,
},
},
otherwise: {
state: {
visible: false,
},
},
},
{
when: '{{$self.value === "123"}}',
target: 'ccc',
fulfill: {
schema: {
'x-visible': true,
},
},
otherwise: {
schema: {
'x-visible': false,
},
},
},
],
}
},
template: `<FormProvider :form="form">
<SchemaField>
<SchemaStringField
name="aaa"
x-component="Input"
:x-component-props="{
'class': 'aaa',
}"
/>
<SchemaStringField
name="bbb"
x-component="Input"
:x-component-props="{
'class': 'bbb',
}"
:x-reactions="reactions"
/>
<SchemaStringField
name="ccc"
x-component="Input"
:x-component-props="{
'class': 'ccc',
}"
/>
</SchemaField>
</FormProvider>`,
} as any
const wrapper = mount(TestComponent, {
attachTo: div,
localVue,
})
expect(wrapper.find('.bbb').exists()).toBeFalsy()
wrapper.find('.aaa').setValue('123')
expect(form.query('aaa').get('value')).toEqual('123')
await wrapper.vm.$forceUpdate()
expect(wrapper.find('.bbb').exists()).toBeTruthy()
expect(wrapper.find('.ccc').exists()).toBeFalsy()
wrapper.find('.bbb').setValue('123')
expect(form.query('bbb').get('value')).toEqual('123')
await wrapper.vm.$forceUpdate()
expect(wrapper.find('.ccc').exists()).toBeTruthy()
wrapper.destroy()
})
})
Loading

0 comments on commit 00a80b4

Please sign in to comment.