forked from opentiny/tiny-engine
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: jsx slot modelvalue can't update value (opentiny#734)
* fix: jsx slot modelvalue can't update value * fix: add unit test for updateModel event
- Loading branch information
1 parent
ec4e8f7
commit 2418111
Showing
7 changed files
with
313 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
packages/vue-generator/test/testcases/sfc/slotModelValue/components-map.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| [ | ||
| { | ||
| "componentName": "TinyGrid", | ||
| "exportName": "Grid", | ||
| "package": "@opentiny/vue", | ||
| "version": "^3.10.0", | ||
| "destructuring": true | ||
| }, | ||
| { | ||
| "componentName": "TinyNumeric", | ||
| "exportName": "Numeric", | ||
| "package": "@opentiny/vue", | ||
| "version": "^3.10.0", | ||
| "destructuring": true | ||
| }, | ||
| { | ||
| "componentName": "TinyInput", | ||
| "exportName": "Input", | ||
| "package": "@opentiny/vue", | ||
| "version": "^3.10.0", | ||
| "destructuring": true | ||
| } | ||
| ] |
96 changes: 96 additions & 0 deletions
96
packages/vue-generator/test/testcases/sfc/slotModelValue/expected/slotModelValueTest.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| <template> | ||
| <div> | ||
| <div> | ||
| <tiny-grid | ||
| :editConfig="{ trigger: 'click', mode: 'cell', showStatus: true }" | ||
| :columns="state.columns" | ||
| :data="[ | ||
| { | ||
| id: '1', | ||
| name: 'GFD科技有限公司', | ||
| city: '福州', | ||
| employees: 800, | ||
| created_date: '2014-04-30 00:56:00', | ||
| boole: false | ||
| }, | ||
| { | ||
| id: '2', | ||
| name: 'WWW科技有限公司', | ||
| city: '深圳', | ||
| employees: 300, | ||
| created_date: '2016-07-08 12:36:22', | ||
| boole: true | ||
| } | ||
| ]" | ||
| ></tiny-grid> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="jsx"> | ||
| import { Grid as TinyGrid, Numeric as TinyNumeric, Input as TinyInput } from '@opentiny/vue' | ||
| import * as vue from 'vue' | ||
| import { defineProps, defineEmits } from 'vue' | ||
| import { I18nInjectionKey } from 'vue-i18n' | ||
| const props = defineProps({}) | ||
| const emit = defineEmits([]) | ||
| const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode() | ||
| const wrap = lowcodeWrap(props, { emit }) | ||
| wrap({ stores }) | ||
| const state = vue.reactive({ | ||
| columns: [ | ||
| { type: 'index', width: 60 }, | ||
| { type: 'selection', width: 60 }, | ||
| { | ||
| field: 'employees', | ||
| title: '员工数', | ||
| slots: { | ||
| default: ({ row, column, rowIndex }, h) => ( | ||
| <div> | ||
| <TinyNumeric | ||
| allow-empty={true} | ||
| placeholder="请输入" | ||
| controlsPosition="right" | ||
| step={1} | ||
| modelValue={row.employees} | ||
| onChange={(...eventArgs) => onChangeNumber(eventArgs, row, column, rowIndex)} | ||
| onUpdate:modelValue={(value) => (row.employees = value)} | ||
| ></TinyNumeric> | ||
| </div> | ||
| ) | ||
| } | ||
| }, | ||
| { field: 'created_date', title: '创建日期' }, | ||
| { | ||
| field: 'city', | ||
| title: '城市', | ||
| slots: { | ||
| default: ({ row, column, rowIndex }, h) => ( | ||
| <div> | ||
| <TinyInput | ||
| placeholder="请输入" | ||
| modelValue={row.city} | ||
| onChange={(...eventArgs) => onChangeInput(eventArgs, row, column, rowIndex)} | ||
| onUpdate:modelValue={(value) => (row.city = value)} | ||
| ></TinyInput> | ||
| </div> | ||
| ) | ||
| } | ||
| } | ||
| ] | ||
| }) | ||
| wrap({ state }) | ||
| const onChangeInput = wrap(function onChangeInput(eventArgs, args0, args1, args2) { | ||
| console.log('onChangeInput', eventArgs) | ||
| }) | ||
| const onChangeNumber = wrap(function onChangeNumber(eventArgs, args0, args1, args2) { | ||
| console.log('onChangeNumber', eventArgs) | ||
| }) | ||
| wrap({ onChangeInput, onChangeNumber }) | ||
| </script> | ||
| <style scoped></style> |
150 changes: 150 additions & 0 deletions
150
packages/vue-generator/test/testcases/sfc/slotModelValue/page.schema.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,150 @@ | ||
| { | ||
| "state": {}, | ||
| "methods": { | ||
| "onChangeInput": { | ||
| "type": "JSFunction", | ||
| "value": "function onChangeInput(eventArgs,args0,args1,args2) {\n console.log('onChangeInput', eventArgs);\n}" | ||
| }, | ||
| "onChangeNumber": { | ||
| "type": "JSFunction", | ||
| "value": "function onChangeNumber(eventArgs, args0, args1, args2) {\n console.log('onChangeNumber', eventArgs)\n}" | ||
| } | ||
| }, | ||
| "componentName": "Page", | ||
| "css": "", | ||
| "props": {}, | ||
| "lifeCycles": {}, | ||
| "children": [ | ||
| { | ||
| "componentName": "div", | ||
| "props": {}, | ||
| "id": "85375559", | ||
| "children": [ | ||
| { | ||
| "componentName": "TinyGrid", | ||
| "props": { | ||
| "editConfig": { | ||
| "trigger": "click", | ||
| "mode": "cell", | ||
| "showStatus": true | ||
| }, | ||
| "columns": [ | ||
| { | ||
| "type": "index", | ||
| "width": 60 | ||
| }, | ||
| { | ||
| "type": "selection", | ||
| "width": 60 | ||
| }, | ||
| { | ||
| "field": "employees", | ||
| "title": "员工数", | ||
| "slots": { | ||
| "default": { | ||
| "type": "JSSlot", | ||
| "value": [ | ||
| { | ||
| "componentName": "div", | ||
| "id": "44523622", | ||
| "children": [ | ||
| { | ||
| "componentName": "TinyNumeric", | ||
| "props": { | ||
| "allow-empty": true, | ||
| "placeholder": "请输入", | ||
| "controlsPosition": "right", | ||
| "step": 1, | ||
| "modelValue": { | ||
| "type": "JSExpression", | ||
| "value": "row.employees", | ||
| "model": true | ||
| }, | ||
| "onChange": { | ||
| "type": "JSExpression", | ||
| "value": "this.onChangeNumber", | ||
| "params": ["row", "column", "rowIndex"] | ||
| } | ||
| }, | ||
| "id": "62166343" | ||
| } | ||
| ] | ||
| } | ||
| ], | ||
| "params": ["row", "column", "rowIndex"] | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| "field": "created_date", | ||
| "title": "创建日期" | ||
| }, | ||
| { | ||
| "field": "city", | ||
| "title": "城市", | ||
| "slots": { | ||
| "default": { | ||
| "type": "JSSlot", | ||
| "value": [ | ||
| { | ||
| "componentName": "div", | ||
| "id": "66326314", | ||
| "children": [ | ||
| { | ||
| "componentName": "TinyInput", | ||
| "props": { | ||
| "placeholder": "请输入", | ||
| "modelValue": { | ||
| "type": "JSExpression", | ||
| "value": "row.city", | ||
| "model": true | ||
| }, | ||
| "onChange": { | ||
| "type": "JSExpression", | ||
| "value": "this.onChangeInput", | ||
| "params": ["row", "column", "rowIndex"] | ||
| } | ||
| }, | ||
| "id": "22396a2a" | ||
| } | ||
| ] | ||
| } | ||
| ], | ||
| "params": ["row", "column", "rowIndex"] | ||
| } | ||
| } | ||
| } | ||
| ], | ||
| "data": [ | ||
| { | ||
| "id": "1", | ||
| "name": "GFD科技有限公司", | ||
| "city": "福州", | ||
| "employees": 800, | ||
| "created_date": "2014-04-30 00:56:00", | ||
| "boole": false | ||
| }, | ||
| { | ||
| "id": "2", | ||
| "name": "WWW科技有限公司", | ||
| "city": "深圳", | ||
| "employees": 300, | ||
| "created_date": "2016-07-08 12:36:22", | ||
| "boole": true | ||
| } | ||
| ] | ||
| }, | ||
| "id": "63623253" | ||
| } | ||
| ] | ||
| } | ||
| ], | ||
| "dataSource": { | ||
| "list": [] | ||
| }, | ||
| "utils": [], | ||
| "bridge": [], | ||
| "inputs": [], | ||
| "outputs": [], | ||
| "fileName": "slotModelValueTest" | ||
| } |
12 changes: 12 additions & 0 deletions
12
packages/vue-generator/test/testcases/sfc/slotModelValue/slotModel.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { expect, test } from 'vitest' | ||
| import { genSFCWithDefaultPlugin } from '@/generator/vue/sfc' | ||
| import schema from './page.schema.json' | ||
| import componentsMap from './components-map.json' | ||
| import { formatCode } from '@/utils/formatCode' | ||
|
|
||
| test('should generate onUpdate:modelValue event', async () => { | ||
| const res = genSFCWithDefaultPlugin(schema, componentsMap) | ||
| const formattedCode = formatCode(res, 'vue') | ||
|
|
||
| await expect(formattedCode).toMatchFileSnapshot('./expected/slotModelValueTest.vue') | ||
| }) |