vxcontrol/ncform
1
0
Fork 0
mirror of https://github.com/vxcontrol/ncform.git synced 2026-07-19 18:23:32 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: array / array-table / array-tabs add showOneIfEmpty option

Browse Source 
re #87
This commit is contained in:
daniel.xiao
2019-08-05 18:30:52 +08:00
parent 0ab6584ef9
commit 5255597819
17 changed files with 421 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
STD-COMP.md
+3
View File
@@ -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
}
```
STD-COMP_CN.md
+3
View File
@@ -282,6 +282,7 @@
item: '',
all: ''
},
showOneIfEmpty: false, // 当空值时是否显示一项
}
```
@@ -301,6 +302,7 @@
item: '',
all: ''
},
showOneIfEmpty: false, // 当空值时是否显示一项
}
```
@@ -318,5 +320,6 @@
item: '',
all: ''
},
showOneIfEmpty: false, // 当空值时是否显示一项
}
```
packages/ncform-common/src/mixins/vue/layout-array-mixin.js
+22 -9
View File
@@ -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();
}
}
packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/array.spec.js
+55
View File
@@ -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();
});
});
});
packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/input.spec.js
+3 -3
View File
@@ -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')
packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/radio.spec.js
+4 -1
View File
@@ -205,7 +205,10 @@ context('Radio', () => {
type: 'string'
},
ui: {
widget: 'array-table'
widget: 'array-table',
widgetConfig: {
showOneIfEmpty: true
}
}
},
name1: {
packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/table.spec.js
+56
View File
@@ -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();
});
});
});
packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/tabs.spec.js
+47
View File
@@ -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();
});
});
});
packages/ncform-e2e/ncform/cypress/integration/examples/customRule.spec.js
+2
View File
@@ -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');
packages/ncform-theme-elementui/examples/layout-comps/array-table.html
+25 -1
View File
@@ -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
packages/ncform-theme-elementui/examples/layout-comps/array-tabs.html
+25 -1
View File
@@ -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
packages/ncform-theme-elementui/examples/layout-comps/array.html
+24 -1
View File
@@ -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
packages/ncform/examples/components/vue-ncform/_dx.html
+22 -3
View File
@@ -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
}
}
}
}
packages/ncform/examples/components/vue-ncform/_layout-widgets.html
+1
View File
@@ -201,6 +201,7 @@
itemCollapse: true,
addTxt: 'Add Item',
delAllTxt: 'Remove All',
showOneIfEmpty: true
}
}
}
packages/ncform/examples/components/vue-ncform/_required.html
+9 -1
View File
@@ -62,6 +62,11 @@
}
}
}
},
ui: {
widgetConfig: {
showOneIfEmpty: true
}
}
},
users2: {
@@ -75,7 +80,10 @@
}
},
ui: {
widget: 'array-table'
widget: 'array-table',
widgetConfig: {
showOneIfEmpty: true
}
}
}
}
packages/ncform/examples/components/vue-ncform/_ui.itemClass.html
+103 -114
View File
@@ -1,138 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>vue-ncform Example</title>
<link
rel="stylesheet"
href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css"
/>
<head>
<meta charset="UTF-8" />
<title>vue-ncform Example</title>
<style>
<link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css" />
.obj-daniel {
border: 1px dashed #409EFF;
padding: 0 8px;
border-radius: 8px;
}
.obj-daniel .obj-item-daniel input {
border-color: #409EFF;
}
<style>
.obj-daniel {
border: 1px dashed #409EFF;
padding: 0 8px;
border-radius: 8px;
}
.array-daniel {
border: 1px dashed #F56C6C;
padding: 0 8px 8px 8px;
border-radius: 8px;
}
.array-daniel .array-item-daniel input {
border-color: #F56C6C;
}
.obj-daniel .obj-item-daniel input {
border-color: #409EFF;
}
.table-daniel {
border: 1px dashed #E6A23C;
padding: 0 8px 8px 8px;
border-radius: 8px;
}
.table-daniel .table-item-daniel input {
border-color: #E6A23C;
}
.array-daniel {
border: 1px dashed #F56C6C;
padding: 0 8px 8px 8px;
border-radius: 8px;
}
</style>
</head>
.array-daniel .array-item-daniel input {
border-color: #F56C6C;
}
<body>
<div id="demo" class="container">
<template v-for="item in formSchemas">
<div
:data-cy="item.id"
v-if="mode !== 'only' || item.only"
:key="item.formName"
>
<h4>[CASE] {{ item.title }}</h4>
<ncform
:form-schema="item.formSchema"
v-model="item.formSchema.value"
:form-name="item.formName"
></ncform>
<hr />
</div>
</template>
</div>
.table-daniel {
border: 1px dashed #E6A23C;
padding: 0 8px 8px 8px;
border-radius: 8px;
}
<script
type="text/javascript"
src="../../../node_modules/vue/dist/vue.js"
></script>
<script
type="text/javascript"
src="https://unpkg.com/blueimp-md5@2.10.0/js/md5.js"
></script>
<script
type="text/javascript"
src="../../../node_modules/@ncform/ncform-common/dist/ncformCommon.min.js"
></script>
<script type="text/javascript" src="../../../dist/vueNcform.js"></script>
<script type="text/javascript">
Vue.use(vueNcform, { lang: 'en' });
.table-daniel .table-item-daniel input {
border-color: #E6A23C;
}
</style>
</head>
new Vue({
el: '#demo',
data: {
mode: 'all', // all or only. if only mode, only objects with only:true in formSchemas are valid
formSchemas: [
{
id: md5('Add item class'),
title: 'Add item class',
formName: 'form_' + Math.random(),
formSchema: {
type: 'object',
properties: {
user: {
type: 'object',
properties: {
name: {
type: 'string',
ui: {
itemClass: 'obj-item-daniel'
}
<body>
<div id="demo" class="container">
<template v-for="item in formSchemas">
<div :data-cy="item.id" v-if="mode !== 'only' || item.only" :key="item.formName">
<h4>[CASE] {{ item.title }}</h4>
<ncform :form-schema="item.formSchema" v-model="item.formSchema.value" :form-name="item.formName"></ncform>
<hr />
</div>
</template>
</div>
<script type="text/javascript" src="../../../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/blueimp-md5@2.10.0/js/md5.js"></script>
<script type="text/javascript" src="../../../node_modules/@ncform/ncform-common/dist/ncformCommon.min.js"></script>
<script type="text/javascript" src="../../../dist/vueNcform.js"></script>
<script type="text/javascript">
Vue.use(vueNcform, { lang: 'en' });
new Vue({
el: '#demo',
data: {
mode: 'all', // all or only. if only mode, only objects with only:true in formSchemas are valid
formSchemas: [
{
id: md5('Add item class'),
title: 'Add item class',
formName: 'form_' + Math.random(),
formSchema: {
type: 'object',
properties: {
user: {
type: 'object',
properties: {
name: {
type: 'string',
ui: {
itemClass: 'obj-item-daniel'
}
},
ui: {
itemClass: 'obj-daniel'
}
},
users: {
type: 'array',
items: {
type: 'string',
ui: {
itemClass: 'array-item-daniel'
}
},
ui: {
itemClass: 'obj-daniel'
}
},
users: {
type: 'array',
items: {
type: 'string',
ui: {
itemClass: 'array-daniel'
itemClass: 'array-item-daniel'
}
},
users1: {
type: 'array',
items: {
type: 'string',
ui: {
itemClass: 'table-item-daniel'
}
},
ui: {
itemClass: 'array-daniel',
widgetConfig: {
showOneIfEmpty: true
}
}
},
users1: {
type: 'array',
items: {
type: 'string',
ui: {
itemClass: 'table-daniel',
widget: 'array-table'
itemClass: 'table-item-daniel'
}
},
ui: {
itemClass: 'table-daniel',
widget: 'array-table',
widgetConfig: {
showOneIfEmpty: true
}
}
}
}
}
]
}
});
</script>
</body>
}
]
}
});
</script>
</body>
</html>
packages/ncform/examples/components/vue-ncform/_ui.label.html
+17 -3
View File
@@ -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
}
}
}
}