diff --git a/STD-COMP.md b/STD-COMP.md index 5d939d6..9401ecb 100755 --- a/STD-COMP.md +++ b/STD-COMP.md @@ -36,6 +36,7 @@ If you don't like the cold text description, click on the [interactive version]( modelField: '', // Used when the value is an object (ie using compound.prependSelect or compound.appendSelect) trim: true, // Whether to automatically trim the front and rear spaces, the default is true clearable: false, // Whether it can be emptied, the default is false + updateOn: 'change', // Timing of triggering value changes, the default is to trigger when value changed. Optional value: ['change', 'blur'] autocomplete: { // Automatic completion itemValueField: 'value', // Item data represents the field of value @@ -114,6 +115,7 @@ If you don't like the cold text description, click on the [interactive version]( { rows: 2, // Rows autoSize: true, // Adaptive content height, optional: [boolean | { minRows: 2, maxRows: 6 }] + updateOn: 'change', // Timing of triggering value changes, the default is to trigger when value changed. Optional value: ['change', 'blur'] } ``` diff --git a/STD-COMP_CN.md b/STD-COMP_CN.md index ed0c800..a8a765d 100644 --- a/STD-COMP_CN.md +++ b/STD-COMP_CN.md @@ -36,6 +36,7 @@ modelField: '', // 当值为对象时使用（即使用compound.prependSelect或compound.appendSelect） trim: true, // 是否自动将前后空格trim掉，默认为true clearable: false, // 是否可清空，默认为false + updateOn: 'change', // 触发值更新的时机，默认是输入变化即触发。可选值：['change', 'blur'] autocomplete: { // 自动补全 itemValueField: 'value', // 项数据表示value的字段 @@ -114,6 +115,7 @@ { rows: 2, // 行数 autoSize: true, // 自适应内容高度，可选值：[boolean | { minRows: 2, maxRows: 6 }] + updateOn: 'change', // 触发值更新的时机，默认是输入变化即触发。可选值：['change', 'blur'] } ``` diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/input.spec.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/input.spec.js index c5aa106..d373b2b 100644 --- a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/input.spec.js +++ b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/input.spec.js @@ -846,4 +846,80 @@ context('input', () => { }); }); + it('updateOn config', () => { + + let formSchema = { + type: 'object', + properties: { + value1: { + type: 'string', + valueTemplate: 'dx: {{$root.name1}}' + }, + name1: { + type: 'string', + ui: { + widgetConfig: { + updateOn: 'blur', + autocomplete: { + itemValueField: 'name', + enumSource: [{ name: 'daniel' }, { name: 'sarah' }], + } + } + } + }, + value2: { + type: 'string', + valueTemplate: 'dx: {{$root.name2}}' + }, + name2: { + type: 'string', + ui: { + widgetConfig: { + updateOn: 'blur', + } + } + }, + } + }; + cy.window() + .its('editor') + .invoke('setValue', JSON.stringify(formSchema, null, 2)); + common.startRun(); + + cy.get('body').as('body'); + + cy.get('.previewArea').within(() => { + + cy.get('label').contains('value1').parent().find('input').as('value1Input'); + cy.get('label').contains('value2').parent().find('input').as('value2Input'); + + // Declare action elements + cy.get('label') + .contains('name1') + .parent() + .within(() => { + cy.get('input').type('da'); + cy.get('@body') + .find('li:contains("daniel")') + .click(); + cy.get('input').should('have.value', 'daniel'); + cy.get('@value1Input').should('have.value', 'daniel'); + cy.get('input').type('hi'); + cy.get('@value1Input').should('have.value', 'daniel'); + cy.get('input').blur(); + cy.get('@value1Input').should('have.value', 'danielhi'); + }); + + cy.get('label') + .contains('name2') + .parent() + .within(() => { + cy.get('input').type('daniel'); + cy.get('@value2Input').should('have.value', ''); + cy.get('input').blur(); + cy.get('@value2Input').should('have.value', 'daniel'); + }); + }); + }); + }); diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/textarea.spec.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/textarea.spec.js index 96d967e..cce010f 100644 --- a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/textarea.spec.js +++ b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/textarea.spec.js @@ -231,4 +231,49 @@ context('textarea', () => { }); }); + it('updateOn config', () => { + + let formSchema = { + type: 'object', + properties: { + value1: { + type: 'string', + valueTemplate: 'dx: {{$root.name1}}' + }, + name1: { + type: 'string', + ui: { + widget: 'textarea', + widgetConfig: { + updateOn: 'blur', + } + } + }, + } + }; + cy.window() + .its('editor') + .invoke('setValue', JSON.stringify(formSchema, null, 2)); + common.startRun(); + + cy.get('body').as('body'); + + cy.get('.previewArea').within(() => { + + cy.get('label').contains('value1').parent().find('input').as('value1Input'); + + // Declare action elements + cy.get('label') + .contains('name1') + .parent() + .within(() => { + cy.get('textarea').type('daniel'); + cy.get('@value1Input').should('have.value', ''); + cy.get('textarea').blur(); + cy.get('@value1Input').should('have.value', 'daniel'); + }); + + }); + }); + }); diff --git a/packages/ncform-theme-elementui/examples/control-comps/input.html b/packages/ncform-theme-elementui/examples/control-comps/input.html index 11c1b9f..eed0fe5 100755 --- a/packages/ncform-theme-elementui/examples/control-comps/input.html +++ b/packages/ncform-theme-elementui/examples/control-comps/input.html @@ -583,7 +583,26 @@ The description of each field of upload is as follows: - headers: set the request headers for the upload ` } - } + }, + { + title: { + cn: '[属性] updateOn: 触发值更新的时机，默认是输入变化即触发。可选值：["change", "blur"]', + en: '[ATTR] updateOn: timing of triggering value changes, the default is to trigger when value changed. Optional value: ["change", "blur"]' + }, + schema: { + type: 'object', + properties: { + name: { + type: 'string', + ui: { + widgetConfig: { + updateOn: 'blur' + } + } + } + } + } + }, ]; // Bootstrap the app diff --git a/packages/ncform-theme-elementui/examples/control-comps/textarea.html b/packages/ncform-theme-elementui/examples/control-comps/textarea.html index ab42aff..134e4b2 100755 --- a/packages/ncform-theme-elementui/examples/control-comps/textarea.html +++ b/packages/ncform-theme-elementui/examples/control-comps/textarea.html @@ -176,7 +176,27 @@ } } } - } + }, + { + title: { + cn: '[属性] updateOn: 触发值更新的时机，默认是输入变化即触发。可选值：["change", "blur"]', + en: '[ATTR] updateOn: timing of triggering value changes, the default is to trigger when value changed. Optional value: ["change", "blur"]' + }, + schema: { + type: 'object', + properties: { + name: { + type: 'string', + ui: { + widget: 'textarea', + widgetConfig: { + updateOn: 'blur' + } + } + } + } + } + }, ]; // Bootstrap the app diff --git a/packages/ncform-theme-elementui/src/components/control-comps/input.vue b/packages/ncform-theme-elementui/src/components/control-comps/input.vue index 887eece..39b2d0b 100755 --- a/packages/ncform-theme-elementui/src/components/control-comps/input.vue +++ b/packages/ncform-theme-elementui/src/components/control-comps/input.vue @@ -11,6 +11,7 @@ :type="mergeConfig.type === 'file' ? 'text' : mergeConfig.type" :prefix-icon="mergeConfig.prefixIcon" :suffix-icon="mergeConfig.suffixIcon" + @blur="onBlur" v-model="inputVal" >