From 525559781900cead0ffa35cdada24a436b74e331 Mon Sep 17 00:00:00 2001 From: "daniel.xiao" Date: Mon, 5 Aug 2019 18:30:52 +0800 Subject: [PATCH] feat: array / array-table / array-tabs add showOneIfEmpty option re #87 --- STD-COMP.md | 3 + STD-COMP_CN.md | 3 + .../src/mixins/vue/layout-array-mixin.js | 31 ++- .../integration/examples/array.spec.js | 55 +++++ .../integration/examples/input.spec.js | 6 +- .../integration/examples/radio.spec.js | 5 +- .../integration/examples/table.spec.js | 56 +++++ .../cypress/integration/examples/tabs.spec.js | 47 ++++ .../integration/examples/customRule.spec.js | 2 + .../examples/layout-comps/array-table.html | 26 ++- .../examples/layout-comps/array-tabs.html | 26 ++- .../examples/layout-comps/array.html | 25 +- .../examples/components/vue-ncform/_dx.html | 25 +- .../vue-ncform/_layout-widgets.html | 1 + .../components/vue-ncform/_required.html | 10 +- .../components/vue-ncform/_ui.itemClass.html | 217 +++++++++--------- .../components/vue-ncform/_ui.label.html | 20 +- 17 files changed, 421 insertions(+), 137 deletions(-) diff --git a/STD-COMP.md b/STD-COMP.md index f05a07a..d0eb993 100755 --- a/STD-COMP.md +++ b/STD-COMP.md @@ -282,6 +282,7 @@ If you don't like the cold text description, click on the [interactive version]( item: '', all: '' }, + showOneIfEmpty: false, // Show one item if empty } ``` @@ -301,6 +302,7 @@ If you don't like the cold text description, click on the [interactive version]( item: '', all: '' }, + showOneIfEmpty: false, // Show one item if empty } ``` @@ -318,5 +320,6 @@ If you don't like the cold text description, click on the [interactive version]( item: '', all: '' }, + showOneIfEmpty: false, // Show one item if empty } ``` diff --git a/STD-COMP_CN.md b/STD-COMP_CN.md index 0d302d5..1856730 100644 --- a/STD-COMP_CN.md +++ b/STD-COMP_CN.md @@ -282,6 +282,7 @@ item: '', all: '' }, + showOneIfEmpty: false, // 当空值时是否显示一项 } ``` @@ -301,6 +302,7 @@ item: '', all: '' }, + showOneIfEmpty: false, // 当空值时是否显示一项 } ``` @@ -318,5 +320,6 @@ item: '', all: '' }, + showOneIfEmpty: false, // 当空值时是否显示一项 } ``` diff --git a/packages/ncform-common/src/mixins/vue/layout-array-mixin.js b/packages/ncform-common/src/mixins/vue/layout-array-mixin.js index 8747cdb..0fa739e 100755 --- a/packages/ncform-common/src/mixins/vue/layout-array-mixin.js +++ b/packages/ncform-common/src/mixins/vue/layout-array-mixin.js @@ -17,13 +17,14 @@ export default { this.$options.lang = window.__$ncform.lang; this.$data.i18n = this.$options.i18nData[this.$options.lang] || this.$options.i18nData.en; - this.schema.value = - this.schema.value && this.schema.value.length > 0 - ? this.schema.value - : [ncformUtils.getDefVal(this.schema.items.type)]; - this.schema.value.forEach((item, idx) => { - this.addItem(idx); - }); + this.schema.value = this.schema.value || []; + if (this.schema.value.length === 0) { + this._addEmptyItem(); + } else { + this.schema.value.forEach((item, idx) => { + this.addItem(idx); + }); + } this.$data.collapsed = this.mergeConfig.collapsed; @@ -111,6 +112,12 @@ export default { this.$set(this.tempData, key, value); }, + _addEmptyItem() { + if (this.schema.value.length === 0 && this.mergeConfig.showOneIfEmpty) { + this.$nextTick(() => this.addItem()); + } + }, + isNormalObjSchema: ncformUtils.isNormalObjSchema, isNormalArrSchema: ncformUtils.isNormalArrSchema, @@ -145,15 +152,18 @@ export default { type: 'warning' }).then(() => { this.schema.value.splice(idx, 1); + this._addEmptyItem(); }) } else { this.schema.value.splice(idx, 1); + this._addEmptyItem(); } } else { if (requiredConfirm) { - window.confirm(confirmText) && this.schema.value.splice(idx, 1); + window.confirm(confirmText) && this.schema.value.splice(idx, 1) && this._addEmptyItem(); } else { this.schema.value.splice(idx, 1); + this._addEmptyItem(); } } }, @@ -165,15 +175,18 @@ export default { type: 'warning' }).then(() => { this.schema.value = []; + this._addEmptyItem(); }) } else { this.schema.value = []; + this._addEmptyItem(); } } else { if (requiredConfirm) { - window.confirm(confirmText) && (this.schema.value = []); + window.confirm(confirmText) && (this.schema.value = []) && this._addEmptyItem(); } else { this.schema.value = []; + this._addEmptyItem(); } } diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/array.spec.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/array.spec.js index b0bfdfc..02671b6 100644 --- a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/array.spec.js +++ b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/array.spec.js @@ -76,9 +76,11 @@ context('Array', () => { cy.get('legend').click(); cy.get('legend').next().should('be.visible'); + cy.get('button').contains('Add Item').click(); cy.get('input').should('not.be.visible'); cy.get('button').find('.el-icon-arrow-up').click() cy.get('input').should('be.visible'); + cy.get('input').its('length').should('equal', 1); cy.get('button').contains('Add Item').click(); cy.get('button').find('.el-icon-arrow-up:visible').click() @@ -363,4 +365,57 @@ context('Array', () => { }); }); + it('showOneIfEmpty option', () => { + let formSchema = { + type: 'object', + properties: { + users1: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widgetConfig: { + showOneIfEmpty: true + } + } + } + } + }; + cy.window() + .its('editor') + .invoke('setValue', JSON.stringify(formSchema, null, 2)); + common.startRun(); + + cy.get('body').as('body'); + + cy.get('.previewArea').within(() => { + // Declare action elements + cy.get('legend') + .contains('users1') + .parent() + .within(() => { + // 默认有一项 + cy.get('input').its('length').should('equal', 1); + cy.get('input').eq(0).should('have.value', ''); + + // 填写值然后删除该项 + cy.get('input').eq(0).type('daniel'); + cy.get('input').eq(0).should('have.value', 'daniel'); + cy.get('.el-icon-remove').eq(0).click(); + cy.get('input').eq(0).should('have.value', ''); + + // 增加多一项，然后删除全部 + cy.get('button').contains('Add').click(); + cy.get('input').its('length').should('equal', 2); + cy.get('input').eq(0).type('daniel'); + cy.get('input').eq(1).type('sarah'); + cy.get('button:contains("Delete All")').click(); + cy.get('input').its('length').should('equal', 1); + cy.get('input').eq(0).should('have.value', ''); + }); + + // common.submitForm(); + }); + }); }); 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 25e30b8..9dfdfbb 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 @@ -104,7 +104,7 @@ context('input', () => { ui: { widgetConfig: { prefixIcon: 'el-icon-search', - trim: false + trim: true } } }, @@ -142,7 +142,7 @@ context('input', () => { .as('nameInput1'); cy.get('@nameInput1') .type(' daniel ') - .should('have.value', ' daniel '); + .should('have.value', 'daniel'); cy.get('@nameInput1') .parent() .find('.el-icon-search') @@ -165,7 +165,7 @@ context('input', () => { .should('not.be.visible'); cy.get('@nameInput2') .type(' daniel ') - .should('have.value', 'daniel'); + .should('have.value', ' daniel '); cy.get('@nameInput2') .parent() .find('.el-input__clear') diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/radio.spec.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/radio.spec.js index 10e6f96..eea146e 100644 --- a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/radio.spec.js +++ b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/radio.spec.js @@ -205,7 +205,10 @@ context('Radio', () => { type: 'string' }, ui: { - widget: 'array-table' + widget: 'array-table', + widgetConfig: { + showOneIfEmpty: true + } } }, name1: { diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/table.spec.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/table.spec.js index c2fe9e1..e0f6a00 100644 --- a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/table.spec.js +++ b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/table.spec.js @@ -81,6 +81,7 @@ context('Table', () => { cy.get('legend').click(); cy.get('legend').next().should('be.visible'); + cy.get('button').contains('Add Item').click(); cy.get('button').contains('Add Item').click(); cy.get('input').its('length').should('equal', 2); @@ -360,4 +361,59 @@ context('Table', () => { }); }); + it('showOneIfEmpty option', () => { + let formSchema = { + type: 'object', + properties: { + users1: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widget: 'array-table', + widgetConfig: { + showOneIfEmpty: true + } + } + } + } + }; + cy.window() + .its('editor') + .invoke('setValue', JSON.stringify(formSchema, null, 2)); + common.startRun(); + + cy.get('body').as('body'); + + cy.get('.previewArea').within(() => { + // Declare action elements + cy.get('legend') + .contains('users1') + .parent() + .within(() => { + // 默认有一项 + cy.get('input').its('length').should('equal', 1); + cy.get('input').eq(0).should('have.value', ''); + + // 填写值然后删除该项 + cy.get('input').eq(0).type('daniel'); + cy.get('input').eq(0).should('have.value', 'daniel'); + cy.get('.el-icon-remove').eq(0).click(); + cy.get('input').eq(0).should('have.value', ''); + + // 增加多一项，然后删除全部 + cy.get('button').contains('Add').click(); + cy.get('input').its('length').should('equal', 2); + cy.get('input').eq(0).type('daniel'); + cy.get('input').eq(1).type('sarah'); + cy.get('button:contains("Delete All")').click(); + cy.get('input').its('length').should('equal', 1); + cy.get('input').eq(0).should('have.value', ''); + }); + + // common.submitForm(); + }); + }); + }); diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/tabs.spec.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/tabs.spec.js index 4d354ce..c5cfe0e 100644 --- a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/tabs.spec.js +++ b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/tabs.spec.js @@ -79,6 +79,7 @@ context('Tabs', () => { cy.get('legend').click(); cy.get('legend').next().should('be.visible'); + cy.get('.el-icon-plus').click(); cy.get('.el-icon-plus').click(); cy.get('.el-tabs__item').its('length').should('equal', 2); cy.get('.el-tabs__item:last-child').should('have.class', 'is-active'); @@ -135,4 +136,50 @@ context('Tabs', () => { }); }); + it('showOneIfEmpty option', () => { + let formSchema = { + type: 'object', + properties: { + users1: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widget: 'array-tabs', + widgetConfig: { + showOneIfEmpty: true + } + } + } + } + }; + cy.window() + .its('editor') + .invoke('setValue', JSON.stringify(formSchema, null, 2)); + common.startRun(); + + cy.get('body').as('body'); + + cy.get('.previewArea').within(() => { + // Declare action elements + cy.get('legend') + .contains('users1') + .parent() + .within(() => { + // 默认有一项 + cy.get('.el-tabs__item').its('length').should('equal', 1); + cy.get('input').should('have.value', ''); + + // 填写值然后删除该项 + cy.get('input').type('daniel'); + cy.get('input').should('have.value', 'daniel'); + cy.get('.el-icon-close').click(); + cy.get('input').should('have.value', ''); + }); + + // common.submitForm(); + }); + }); + }); diff --git a/packages/ncform-e2e/ncform/cypress/integration/examples/customRule.spec.js b/packages/ncform-e2e/ncform/cypress/integration/examples/customRule.spec.js index 97cc550..24b640f 100644 --- a/packages/ncform-e2e/ncform/cypress/integration/examples/customRule.spec.js +++ b/packages/ncform-e2e/ncform/cypress/integration/examples/customRule.spec.js @@ -29,6 +29,8 @@ context('rules.customRule', () => { it('rules.customRule in Array', () => { let id = md5('rules.customRule in Array'); cy.get(`[data-cy=${id}]`).within(() => { + cy.get('legend').contains('rows').parent().find('button').contains('Add').click(); + cy.get('label').contains('maxNum').next().find('input').as('maxNumInput'); cy.get('label').contains('minNum').next().find('input').as('minNumInput'); diff --git a/packages/ncform-theme-elementui/examples/layout-comps/array-table.html b/packages/ncform-theme-elementui/examples/layout-comps/array-table.html index a396aee..0da1fb4 100755 --- a/packages/ncform-theme-elementui/examples/layout-comps/array-table.html +++ b/packages/ncform-theme-elementui/examples/layout-comps/array-table.html @@ -316,7 +316,31 @@ Prompt information can be configured via delConfirmText when requiredDelConfirm 2. delConfirmText.all: delete all confirmation information          ` } - } + }, + { + title: { + cn: '[属性] showOneIfEmpty: 当空值时是否显示一项', + en: + '[ATTR] showOneIfEmpty: Show one item at least if empty' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widget: 'array-table', + widgetConfig: { + showOneIfEmpty: true + } + } + } + } + } + }, ]; // Bootstrap the app diff --git a/packages/ncform-theme-elementui/examples/layout-comps/array-tabs.html b/packages/ncform-theme-elementui/examples/layout-comps/array-tabs.html index 48f42d8..7dae0e2 100755 --- a/packages/ncform-theme-elementui/examples/layout-comps/array-tabs.html +++ b/packages/ncform-theme-elementui/examples/layout-comps/array-tabs.html @@ -273,7 +273,31 @@ Prompt information can be configured via delConfirmText when requiredDelConfirm 1. delConfirmText.item: delete item confirmation information          ` } - } + }, + { + title: { + cn: '[属性] showOneIfEmpty: 当空值时是否显示一项', + en: + '[ATTR] showOneIfEmpty: Show one item at least if empty' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widget: 'array-tabs', + widgetConfig: { + showOneIfEmpty: true + } + } + } + } + } + }, ]; // Bootstrap the app diff --git a/packages/ncform-theme-elementui/examples/layout-comps/array.html b/packages/ncform-theme-elementui/examples/layout-comps/array.html index 9766bb2..484f666 100755 --- a/packages/ncform-theme-elementui/examples/layout-comps/array.html +++ b/packages/ncform-theme-elementui/examples/layout-comps/array.html @@ -350,7 +350,30 @@ Prompt information can be configured via delConfirmText when requiredDelConfirm 2. delConfirmText.all: delete all confirmation information          ` } - } + }, + { + title: { + cn: '[属性] showOneIfEmpty: 当空值时是否显示一项', + en: + '[ATTR] showOneIfEmpty: Show one item at least if empty' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widgetConfig: { + showOneIfEmpty: true + } + } + } + } + } + }, ]; // Bootstrap the app diff --git a/packages/ncform/examples/components/vue-ncform/_dx.html b/packages/ncform/examples/components/vue-ncform/_dx.html index eb3a792..fa5b126 100644 --- a/packages/ncform/examples/components/vue-ncform/_dx.html +++ b/packages/ncform/examples/components/vue-ncform/_dx.html @@ -72,6 +72,11 @@ } } } + }, + ui: { + widgetConfig: { + showOneIfEmpty: true + } } } } @@ -101,11 +106,17 @@ } }, ui: { - widget: 'array-table' + widget: 'array-table', + widgetConfig: { + showOneIfEmpty: true + } } }, ui: { - widget: 'array-table' + widget: 'array-table', + widgetConfig: { + showOneIfEmpty: true + } } } } @@ -138,12 +149,20 @@ } } } + }, + ui: { + widgetConfig: { + showOneIfEmpty: true + } } } } }, ui: { - widget: 'array-table' + widget: 'array-table', + widgetConfig: { + showOneIfEmpty: true + } } } } diff --git a/packages/ncform/examples/components/vue-ncform/_layout-widgets.html b/packages/ncform/examples/components/vue-ncform/_layout-widgets.html index e37fb65..ccafb4c 100644 --- a/packages/ncform/examples/components/vue-ncform/_layout-widgets.html +++ b/packages/ncform/examples/components/vue-ncform/_layout-widgets.html @@ -201,6 +201,7 @@ itemCollapse: true, addTxt: 'Add Item', delAllTxt: 'Remove All', + showOneIfEmpty: true } } } diff --git a/packages/ncform/examples/components/vue-ncform/_required.html b/packages/ncform/examples/components/vue-ncform/_required.html index 5d36b52..339308f 100644 --- a/packages/ncform/examples/components/vue-ncform/_required.html +++ b/packages/ncform/examples/components/vue-ncform/_required.html @@ -62,6 +62,11 @@ } } } + }, + ui: { + widgetConfig: { + showOneIfEmpty: true + } } }, users2: { @@ -75,7 +80,10 @@ } }, ui: { - widget: 'array-table' + widget: 'array-table', + widgetConfig: { + showOneIfEmpty: true + } } } } diff --git a/packages/ncform/examples/components/vue-ncform/_ui.itemClass.html b/packages/ncform/examples/components/vue-ncform/_ui.itemClass.html index 9de84d9..28359be 100644 --- a/packages/ncform/examples/components/vue-ncform/_ui.itemClass.html +++ b/packages/ncform/examples/components/vue-ncform/_ui.itemClass.html @@ -1,138 +1,127 @@ - - - vue-ncform Example - + + + vue-ncform Example - - + .array-daniel .array-item-daniel input { + border-color: #F56C6C; + } - -
- -
+ .table-daniel { + border: 1px dashed #E6A23C; + padding: 0 8px 8px 8px; + border-radius: 8px; + } - - - - - + + + + - + } + ] + } + }); + + + diff --git a/packages/ncform/examples/components/vue-ncform/_ui.label.html b/packages/ncform/examples/components/vue-ncform/_ui.label.html index 9077132..7819f90 100644 --- a/packages/ncform/examples/components/vue-ncform/_ui.label.html +++ b/packages/ncform/examples/components/vue-ncform/_ui.label.html @@ -248,7 +248,10 @@ type: 'string' }, ui: { - legend: 'dx: {{$root.users[0]}} + " info-array"' + legend: 'dx: {{$root.users[0]}} + " info-array"', + widgetConfig: { + showOneIfEmpty: true + } } }, users1: { @@ -258,7 +261,10 @@ }, ui: { legend: 'dx: {{$root.users1[0]}} + " info-table"', - widget: 'array-table' + widget: 'array-table', + widgetConfig: { + showOneIfEmpty: true + } } } } @@ -283,7 +289,10 @@ } }, ui: { - widget: 'array-table' + widget: 'array-table', + widgetConfig: { + showOneIfEmpty: true + } } }, users1: { @@ -293,6 +302,11 @@ ui: { label: 'dx: "dx from: " + {{$root.company}}' } + }, + ui: { + widgetConfig: { + showOneIfEmpty: true + } } } }