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

Merge pull request #39 from ncform/develop

Browse Source 
Develop
This commit is contained in:
daniel-dx
2019-02-25 20:16:30 -06:00
committed by GitHub
parent aec80bc648 869057f750
commit 460bd25745
28 changed files with 414 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+21 -21
View File
@@ -1,68 +1,68 @@
<a name="0.1.17"></a>
## [0.1.17](https://github.com/vipshop/ncform/compare/v0.1.16...v0.1.17) (2018-10-29)
## [0.1.17](https://github.com/ncform/ncform/compare/v0.1.16...v0.1.17) (2018-10-29)
### Features
* **ncform:** add isDirty prop ([82a468b](https://github.com/vipshop/ncform/commit/82a468b)), closes [#32](https://github.com/vipshop/ncform/issues/32)
* **ncform:** add isDirty prop ([82a468b](https://github.com/ncform/ncform/commit/82a468b)), closes [#32](https://github.com/ncform/ncform/issues/32)
<a name="0.1.16"></a>
## [0.1.16](https://github.com/vipshop/ncform/compare/v0.1.15...v0.1.16) (2018-10-27)
## [0.1.16](https://github.com/ncform/ncform/compare/v0.1.15...v0.1.16) (2018-10-27)
### Bug Fixes
* **ncform-theme-elementui:** fixed upload control fields assignment error ([23a4acf](https://github.com/vipshop/ncform/commit/23a4acf)), closes [#23](https://github.com/vipshop/ncform/issues/23)
* **ncform-theme-elementui:** fixed select control when multiple is set to true, then the otherParams changed cause error ([1485660](https://github.com/vipshop/ncform/commit/1485660)), closes [#24](https://github.com/vipshop/ncform/issues/24)
* **ncform-theme-elementui:** fixed upload control fields assignment error ([23a4acf](https://github.com/ncform/ncform/commit/23a4acf)), closes [#23](https://github.com/ncform/ncform/issues/23)
* **ncform-theme-elementui:** fixed select control when multiple is set to true, then the otherParams changed cause error ([1485660](https://github.com/ncform/ncform/commit/1485660)), closes [#24](https://github.com/ncform/ncform/issues/24)
### Features
* **ncform:** add new rule - ajax ([961f1eb](https://github.com/vipshop/ncform/commit/961f1eb)), closes [#29](https://github.com/vipshop/ncform/issues/29)
* **ncform:** add reset method - $ncformReset(formName) ([a192afc](https://github.com/vipshop/ncform/commit/a192afc)), closes [#25](https://github.com/vipshop/ncform/issues/25)
* **ncform:** description support dx expression && html content ([7fc4532](https://github.com/vipshop/ncform/commit/7fc4532)), closes [#27](https://github.com/vipshop/ncform/issues/27)
* **ncform:** add new rule - ajax ([961f1eb](https://github.com/ncform/ncform/commit/961f1eb)), closes [#29](https://github.com/ncform/ncform/issues/29)
* **ncform:** add reset method - $ncformReset(formName) ([a192afc](https://github.com/ncform/ncform/commit/a192afc)), closes [#25](https://github.com/ncform/ncform/issues/25)
* **ncform:** description support dx expression && html content ([7fc4532](https://github.com/ncform/ncform/commit/7fc4532)), closes [#27](https://github.com/ncform/ncform/issues/27)
<a name="0.1.15"></a>
## [0.1.15](https://github.com/vipshop/ncform/compare/v0.1.14...v) (2018-10-11)
## [0.1.15](https://github.com/ncform/ncform/compare/v0.1.14...v) (2018-10-11)
### Bug Fixes
* **ncform-theme-elementui:** fixed input control $emit input event when init with compound.prependSelect config ([941a88f](https://github.com/vipshop/ncform/commit/941a88f)), closes [#19](https://github.com/vipshop/ncform/issues/19)
* **ncform-theme-elementui:** fixed input control $emit input event when init with compound.prependSelect config ([941a88f](https://github.com/ncform/ncform/commit/941a88f)), closes [#19](https://github.com/ncform/ncform/issues/19)
### Features
* **ncform:** add valueTemplate config, now you can easily control one field's value depend on another ([8ac95eb](https://github.com/vipshop/ncform/commit/8ac95eb))
* **ncform:** add valueTemplate config, now you can easily control one field's value depend on another ([8ac95eb](https://github.com/ncform/ncform/commit/8ac95eb))
<a name="0.1.13"></a>
## [0.1.13](https://github.com/vipshop/ncform/compare/v0.1.12...v0.1.13) (2018-09-10)
## [0.1.13](https://github.com/ncform/ncform/compare/v0.1.12...v0.1.13) (2018-09-10)
### Bug Fixes
* **ncform:** fixed non-required fields still verify rules with empty value ([fe9901c](https://github.com/vipshop/ncform/commit/fe9901c)), issue [#16](https://github.com/vipshop/ncform/issues/16)
* **ncform:** fixed non-required fields still verify rules with empty value ([fe9901c](https://github.com/ncform/ncform/commit/fe9901c)), issue [#16](https://github.com/ncform/ncform/issues/16)
### Features
* **ncform:** add globalConfig.ignoreRulesWhenHidden configure ([4d0b6d0](https://github.com/vipshop/ncform/commit/4d0b6d0)), issue [#17](https://github.com/vipshop/ncform/issues/17)
* **ncform:** pattern rule value support string type ([cd22f48](https://github.com/vipshop/ncform/commit/cd22f48)), issue [#15](https://github.com/vipshop/ncform/issues/15)
* **ncform:** add globalConfig.ignoreRulesWhenHidden configure ([4d0b6d0](https://github.com/ncform/ncform/commit/4d0b6d0)), issue [#17](https://github.com/ncform/ncform/issues/17)
* **ncform:** pattern rule value support string type ([cd22f48](https://github.com/ncform/ncform/commit/cd22f48)), issue [#15](https://github.com/ncform/ncform/issues/15)
<a name="0.1.12"></a>
## [0.1.12](https://github.com/vipshop/ncform/compare/v0.1.10...v) (2018-08-24)
## [0.1.12](https://github.com/ncform/ncform/compare/v0.1.10...v) (2018-08-24)
### Features
* **ncform:** default value support dx expression ([bee57fc](https://github.com/vipshop/ncform/commit/bee57fc))
* **ncform:** default value support dx expression ([bee57fc](https://github.com/ncform/ncform/commit/bee57fc))
<a name="0.1.10"></a>
## [0.1.10](https://github.com/vipshop/ncform/compare/v0.1.8...v0.1.10) (2018-08-07)
## [0.1.10](https://github.com/ncform/ncform/compare/v0.1.8...v0.1.10) (2018-08-07)
### Features
* Build `template compiled` lib to suppoort runtime-only version vue； ([98f46f5](https://github.com/vipshop/ncform/commit/98f46f5))
* Build `template compiled` lib to suppoort runtime-only version vue； ([98f46f5](https://github.com/ncform/ncform/commit/98f46f5))
* Upgrade webpack version to 4；([98f46f5](https://github.com/vipshop/ncform/commit/98f46f5))
* Upgrade webpack version to 4；([98f46f5](https://github.com/ncform/ncform/commit/98f46f5))
* **ncform-theme-element:** input control add trim configure; ([98f46f5](https://github.com/vipshop/ncform/commit/98f46f5))
* **ncform-theme-element:** input control add trim configure; ([98f46f5](https://github.com/ncform/ncform/commit/98f46f5))
CONFIG.md
+6 -2
View File
@@ -7,7 +7,11 @@
firstName: {
/* 数据 */
type: 'string', // 数据类型 string / number / integer / boolean / object / array
type: 'string', // 数据类型 string / number / integer / boolean / object / array / HTML / COMP
// 注意：大写的类型为特殊只读类型，一般应用场景为显示一个分隔栏。该数据会自动过滤掉
// HTML: 配置value，值为一段HTML【支持dx表达式】;
// COMP: 配置ui.widget和ui.widgetConfig
value: '', // 数据的值
default: '', // 数据的默认值，value为空的时候取该值
valueTemplate: '', // 值模板，当里面有dx表达式时，表达式值发生改变，会优化取该值作为value（即会覆盖用户所填的值）
@@ -20,7 +24,7 @@
showLabel: true, // 是否显示标签（当为false不显示时，依然占着空间）
noLabelSpace: false, // 标签是否不占空间，优先级比showLabel高
legend: '', // 标题内容，当对象，数组布局数据类型时有效
showLegend: false, // 是否显示标题
showLegend: true, // 是否显示标题。当为object类型时，showLegend优先于showLabel，所以需要设置showLegend为false时label才生效
description: 'Fill in the first name', // 字段描述信息【支持dx表达式】
placeholder: 'first name', // 占位内容【支持dx表达式】
disabled: false, // 是否禁用【支持dx表达式】
README.md
+4 -4
View File
@@ -8,9 +8,9 @@ ncform，一种令人愉悦的表单开发方式，仅需配置即可生成表
## Playground
在 [Playground](https://vipshop.github.io/ncform/ncform-show/playground/index.html) 体验一下ncform的魅力，可加深你对ncform的了解
在 [Playground](https://ncform.github.io/ncform/ncform-show/playground/index.html) 体验一下ncform的魅力，可加深你对ncform的了解
> [Playground](https://vipshop.github.io/ncform/ncform-show/playground/index.html) 展示了ncform大部分的使用场景例子（I believe the example is the best document），建议先仔细浏览下，例子中的配置实际开发中一般都可以直接使用滴
> [Playground](https://ncform.github.io/ncform/ncform-show/playground/index.html) 展示了ncform大部分的使用场景例子（I believe the example is the best document），建议先仔细浏览下，例子中的配置实际开发中一般都可以直接使用滴
## Quick Start
@@ -235,7 +235,7 @@ ncform = ncform容器 + ncform主题标准组件
一个系统项目，一般都会使用一种UI库（如vue）及其之上的UI实现方案（如elementui）
为了与之和平共处，ncform的标准组件可采用与之一致的UI实现方案
ncform Vue版默认提供了elementui主题的标准组件[【点击查看】](https://vipshop.github.io/ncform/ncform-theme-elementui/index.html)
ncform Vue版默认提供了elementui主题的标准组件[【点击查看】](https://ncform.github.io/ncform/ncform-theme-elementui/index.html)
如果你是iview的粉丝，通过遵循ncform标准组件的规范开发iview主题的标准组件即可
@@ -243,7 +243,7 @@ ncform Vue版默认提供了elementui主题的标准组件[【点击查看】](h
## Schema Generator
通过 [Schema Generator](https://vipshop.github.io/ncform/ncform-show/schema-gen/index.html)，可以加速你写form schema的速度
通过 [Schema Generator](https://ncform.github.io/ncform/ncform-show/schema-gen/index.html)，可以加速你写form schema的速度
## 参考项目
STD-COMP.md
+4 -2
View File
@@ -1,6 +1,6 @@
# Standard Components
如果你不太喜欢冷冰冰的文字描述，可点击 [互动版本](https://vipshop.github.io/ncform/ncform-theme-elementui/index.html)
如果你不太喜欢冷冰冰的文字描述，可点击 [互动版本](https://ncform.github.io/ncform/ncform-theme-elementui/index.html)
## control components
@@ -266,8 +266,10 @@
disableAdd: true, // 是否禁止添加项
disableDel: true, // 是否禁止删除项
disableReorder: true, // 是否禁止排序
collapsed: false, // 是否默认折叠
disableCollapse: false, // 是否允许折叠
collapsed: false, // 是否默认折叠
disableItemCollapse: false, // 是否允许项折叠
itemCollapse: false, // 项是否默认折叠
addTxt: 'Add', // 新建文字
delAllTxt: 'Del All' // 删除全部文字
}
packages/ncform-common/package.json
+1 -1
View File
@@ -14,7 +14,7 @@
},
"repository": {
"type": "git",
"url": "git+https://github.com/vipshop/ncform.git"
"url": "git+https://github.com/ncform/ncform.git"
},
"keywords": [
"json",
packages/ncform-common/src/ncform-utils.js
+15 -11
View File
@@ -69,9 +69,10 @@ const ncformUtils = {
}
function addDefField(fieldName, fieldSchema) {
let type = fieldSchema.type || "string";
const fullFields = {
/* 数据本身 */
type: fieldSchema.type || "string",
/* 数据本身 */
type: type,
value: null, // 这里给了null，否则如果是对象这种，默认值就不会被覆盖了
// value: ncformUtils.getDefVal(fieldSchema.type),
@@ -81,7 +82,8 @@ const ncformUtils = {
label: fieldName === "$root" ? "" : fieldName,
legend: fieldName === "$root" ? "" : fieldName,
showLabel: true,
showLegend: true,
showLegend: (ncformUtils.isNormalObjSchema(fieldSchema) || ncformUtils.isNormalArrSchema(fieldSchema)) ? true : false,
noLabelSpace: type.toUpperCase() === type ? true : false, // 大写的类型为特殊的只读类型，所以不需要显示label
description: "",
placeholder: "",
disabled: false,
@@ -94,7 +96,7 @@ const ncformUtils = {
/* 渲染组件字段 */
widget:
fieldSchema.widget || getDefWidget(fieldSchema.type || "string"),
fieldSchema.widget || getDefWidget(type),
widgetConfig: {
placeholder: _get(fieldSchema, "ui.placeholder", ""),
disabled: _get(fieldSchema, "ui.disabled", false),
@@ -132,7 +134,7 @@ const ncformUtils = {
if (fieldName === "$root") {
// 根节点
const defaultGlobalConfig = {
// 全局配置
// 全局配置
style: {
formCls: "", // form class
invalidFeedbackCls: "" // invalid feedback class
@@ -175,12 +177,14 @@ const ncformUtils = {
key
);
} else {
model[key] = ncformUtils.priorityGetValue(
"basic",
formSchema.properties[key].value,
ncformUtils.smartAnalyze(formSchema.properties[key].default),
ncformUtils.getDefVal(formSchema.properties[key].type)
);
if (formSchema.properties[key].type.toUpperCase() !== formSchema.properties[key].type) { // 大写的类型忽略掉
model[key] = ncformUtils.priorityGetValue(
"basic",
formSchema.properties[key].value,
ncformUtils.smartAnalyze(formSchema.properties[key].default),
ncformUtils.getDefVal(formSchema.properties[key].type)
);
}
}
});
}
packages/ncform-common/test/unit/ncform-utils.js
+21
View File
@@ -223,6 +223,27 @@ describe('/src/ncform-utils.js', () => {
const result = ncformUtils.getModelFromSchema(formSchema);
assert(JSON.stringify(result.user) === JSON.stringify([]));
});
it("getModelFromSchema - 大写的类型，如HTML，COMP类型值 自动过滤掉", () => {
const formSchema = {
type: 'object',
properties: {
user: {
type: 'string',
value: 'daniel'
},
_line1: {
type: 'HTML',
value: '------'
},
_line2: {
type: 'COMP',
value: 'SomeLineComp'
}
}
};
const result = ncformUtils.getModelFromSchema(formSchema);
assert(JSON.stringify(result) === JSON.stringify({user: 'daniel'}));
});
// --- setValueToSchema
packages/ncform-show/src/components/playground/playground.js
+49
View File
@@ -83,6 +83,10 @@ export default {
value: "7",
label: "基础使用-标签数组"
},
{
value: "77",
label: "基础使用-分隔栏"
},
{
value: "8",
label: "高级玩法-控件交互 dx表达式"
@@ -543,6 +547,51 @@ export default {
}
}
},
"77": {
type: "object",
properties: {
_line1: {
type: 'HTML',
value: '<div style="border-left: 4px solid orange; padding-left: 6px; color: orange"> 基本信息</div>'
},
name: {
type: "string",
ui: {
label: "姓名",
description: "请填写你的姓名",
placeholder: "姓名"
}
},
email: {
type: "string",
ui: {
label: "邮件"
}
},
_line2: {
type: 'HTML',
value: '<div style="border-left: 4px solid orange; margin-top:10px; padding-left: 6px; color: orange"> 其它信息</div>'
},
age: {
type: "integer",
default: 18,
ui: {
label: "年龄"
}
},
adult: {
type: "boolean",
ui: {
label: "是否成年",
help: {
show: true,
text: "?",
content: "成年才可以玩农药啊"
}
}
}
}
},
"8": {
type: "object",
properties: {
packages/ncform-theme-elementui/examples/debug/object.html
+90
View File
@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>object widget</title>
<link rel="stylesheet" href="../demo.css" />
<!-- 引入样式 -->
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css" />
</head>
<body>
<!--演示区域-->
<div id="demo" v-cloak>
<div v-for="(item, idx) in formSchemas">
<h4 class="demo_title">{{ item.title }}</h4>
<div class="demo_item-wrapper">
<div>
<ncform :form-schema="item.schema" v-model="item.schema.value"></ncform>
<small>value: {{ item.schema.value }}</small>
</div>
<div>
<pre>{{ JSON.stringify(originFormSchemas[idx].schema.properties, null, 2) }}</pre>
</div>
<div>
<pre>{{ item.detail }}</pre>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../../node_modules/lodash/lodash.min.js"></script>
<script type="text/javascript" src="../../node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/lib/index.js"></script>
<script type="text/javascript" src="../../node_modules/@ncform/ncform-common/dist/ncformCommon.min.js"></script>
<script type="text/javascript" src="../../node_modules/@ncform/ncform/dist/vueNcform.js"></script>
<script type="text/javascript" src="../../dist/input.js"></script>
<script type="text/javascript" src="../../dist/object.js"></script>
<script type="text/javascript">
Vue.use(vueNcform, { extComponents: { input: input.default, object: object.default } });
let formSchemas = [
{
title: '默认状态',
schema: {
type: 'object',
properties: {
user: {
type: 'object',
properties: {
info: {
type: 'object',
properties: {
firstname: {
type: 'string'
},
lastname: {
type: 'string'
}
},
ui: {
showLegend:false,
label: 'haha',
}
}
},
ui: {
widgetConfig: {
layout: 'h'
}
}
}
}
}
}
];
// Bootstrap the app
new Vue({
el: '#demo',
data: {
formSchemas: _.cloneDeep(formSchemas),
originFormSchemas: formSchemas
}
});
</script>
</body>
</html>
packages/ncform-theme-elementui/examples/index.html
+7
View File
@@ -8,6 +8,13 @@
<link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
<style>
.doc {
height: 100%;
min-height: 600px;
}
</style>
</head>
<body>
packages/ncform-theme-elementui/examples/layout-comps/array-table.html
+4 -4
View File
@@ -63,7 +63,7 @@
}
},
{
title: '[属性] disableAdd: 是否禁止添加项',
title: '[属性] disableAdd: 是否禁止添加项',
schema: {
type: 'object',
properties: {
@@ -103,7 +103,7 @@
}
},
{
title: '[属性] disableReorder: 是否禁止排序',
title: '[属性] disableReorder: 是否禁止排序',
schema: {
type: 'object',
properties: {
@@ -123,7 +123,7 @@
}
},
{
title: '[属性] collapsed: 是否默认折叠',
title: '[属性] collapsed: 是否默认折叠',
schema: {
type: 'object',
properties: {
@@ -143,7 +143,7 @@
}
},
{
title: '[属性] disableCollapse: 是否禁止折叠',
title: '[属性] disableCollapse: 是否禁止折叠',
schema: {
type: 'object',
properties: {
packages/ncform-theme-elementui/examples/layout-comps/array-tabs.html
+3 -3
View File
@@ -63,7 +63,7 @@
}
},
{
title: '[属性] disableAdd: 是否禁止添加项',
title: '[属性] disableAdd: 是否禁止添加项',
schema: {
type: 'object',
properties: {
@@ -103,7 +103,7 @@
}
},
{
title: '[属性] collapsed: 是否默认折叠',
title: '[属性] collapsed: 是否默认折叠',
schema: {
type: 'object',
properties: {
@@ -123,7 +123,7 @@
}
},
{
title: '[属性] disableCollapse: 是否禁止折叠',
title: '[属性] disableCollapse: 是否禁止折叠',
schema: {
type: 'object',
properties: {
packages/ncform-theme-elementui/examples/layout-comps/array.html
+43 -5
View File
@@ -60,7 +60,7 @@
}
},
{
title: '[属性] disableAdd: 是否禁止添加项',
title: '[属性] disableAdd: 是否禁止添加项',
schema: {
type: 'object',
properties: {
@@ -98,7 +98,7 @@
}
},
{
title: '[属性] disableReorder: 是否禁止排序',
title: '[属性] disableReorder: 是否禁止排序',
schema: {
type: 'object',
properties: {
@@ -117,7 +117,26 @@
}
},
{
title: '[属性] collapsed: 是否默认折叠',
title: '[属性] disableCollapse: 是否禁止折叠',
schema: {
type: 'object',
properties: {
user: {
type: 'array',
items: {
type: 'string'
},
ui: {
widgetConfig: {
disableCollapse: true
}
}
}
}
}
},
{
title: '[属性] collapsed: 是否默认折叠',
schema: {
type: 'object',
properties: {
@@ -136,7 +155,7 @@
}
},
{
title: '[属性] disableCollapse: 是否禁止折叠',
title: '[属性] disableItemCollapse: 是否禁止项折叠',
schema: {
type: 'object',
properties: {
@@ -147,7 +166,26 @@
},
ui: {
widgetConfig: {
disableCollapse: true
disableItemCollapse: true
}
}
}
}
}
},
{
title: '[属性] itemCollapse: 项是否默认折叠',
schema: {
type: 'object',
properties: {
user: {
type: 'array',
items: {
type: 'string'
},
ui: {
widgetConfig: {
itemCollapse: true
}
}
}
packages/ncform-theme-elementui/examples/layout-comps/object.html
+2 -2
View File
@@ -170,7 +170,7 @@
}
},
{
title: '[属性] collapsed: 是否默认折叠',
title: '[属性] collapsed: 是否默认折叠',
schema: {
type: 'object',
properties: {
@@ -194,7 +194,7 @@
}
},
{
title: '[属性] disableCollapse: 是否禁止折叠',
title: '[属性] disableCollapse: 是否禁止折叠',
schema: {
type: 'object',
properties: {
packages/ncform-theme-elementui/src/components/control-comps/upload.vue
+2 -2
View File
@@ -210,7 +210,7 @@
&& !vm.mergeConfig.showFileList
&& fileList.length) {
vm.$message({
message: `成功选中文件！目前选中文件共 ${fileList.length} 个`,
message: `成功选中文件！目前选中文件共 ${fileList.length} 个`,
type: 'success'
});
}
@@ -266,7 +266,7 @@
handleUploadExceed(files, fileList) {
const vm = this;
vm.$message({
message: `此次选择导致一次上传的文件个数超过限制数目${vm.mergeConfig.limit}个，请重新选择！`,
message: `此次选择导致一次上传的文件个数超过限制数目${vm.mergeConfig.limit}个，请重新选择！`,
type: 'warning'
});
},
packages/ncform-theme-elementui/src/components/layout-comps/array-table.vue
+1 -1
View File
@@ -47,7 +47,7 @@
<tfoot v-if="!mergeConfig.disableDel || !mergeConfig.disableAdd">
<tr>
<td :colspan="renderSchemas.length + 1">
<!-- 列表控制按钮 -->
<!-- 列表控制按钮 -->
<div class="el-button-group" v-if="!mergeConfig.disableAdd || !mergeConfig.disableDel">
<button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="el-button el-button--mini"><i class="el-icon-circle-plus-outline"></i> {{mergeConfig.addTxt}}</button>
<button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="el-button el-button--danger el-button--mini"><i class="el-icon-remove"></i> {{mergeConfig.delAllTxt}}</button>
packages/ncform-theme-elementui/src/components/layout-comps/array.vue
+36 -3
View File
@@ -14,6 +14,8 @@
<!-- 项控制按钮 -->
<div class="el-button-group">
<button @click="collapseItem(dataItem.__dataSchema)" v-show="dataItem.__dataSchema._expand" v-if="!mergeConfig.disableItemCollapse" type="button" class="el-button el-button--mini"><i class="el-icon-arrow-down"></i></button>
<button @click="collapseItem(dataItem.__dataSchema)" v-show="!dataItem.__dataSchema._expand" v-if="!mergeConfig.disableItemCollapse" type="button" class="el-button el-button--mini"><i class="el-icon-arrow-up"></i></button>
<button @click="delItem(idx)" v-if="!mergeConfig.disableDel" type="button" class="el-button el-button--danger el-button--mini"><i class="el-icon-remove"></i></button>
<button @click="itemUp(idx)" v-show="idx !== 0" v-if="!mergeConfig.disableReorder" type="button" class="el-button el-button--mini"><i class="el-icon-sort-up"></i></button>
<button @click="itemDown(idx)" v-show="idx !== schema.value.length - 1" v-if="!mergeConfig.disableReorder" type="button" class="el-button el-button--mini"><i class="el-icon-sort-down"></i></button>
@@ -22,7 +24,7 @@
<!-- array item 是 正常的 object 类型 -->
<template v-if="isNormalObjSchema(dataItem.__dataSchema)">
<ncform-object :schema="dataItem.__dataSchema" :form-data="formData" :idx-chain="(idxChain ? idxChain + ',' : '') + idx" :config="dataItem.__dataSchema.ui.widgetConfig" :show-legend="false">
<ncform-object v-show="mergeConfig.disableItemCollapse || dataItem.__dataSchema._expand" :schema="dataItem.__dataSchema" :form-data="formData" :idx-chain="(idxChain ? idxChain + ',' : '') + idx" :config="dataItem.__dataSchema.ui.widgetConfig" :show-legend="false">
<template v-for="(fieldSchema, fieldName) in (dataItem.__dataSchema.properties || {__notObjItem: dataItem.__dataSchema})" :slot="fieldName"><!-- 注意：__notObjItem 这个Key为与form-item约定好的值，其它名字不生效 -->
<slot :name="fieldName" :schema="fieldSchema" :idx="idx"></slot>
@@ -33,12 +35,14 @@
<!-- array item 是 非正常的 object 类型 以及 其它类型 -->
<div v-else class="normal-item">
<slot name="__notObjItem" :schema="dataItem.__dataSchema" :idx="idx"></slot> <!-- 注意：__notObjItem 和 __dataSchema 都是约定好的值，其它名字不生效 -->
<div v-show="mergeConfig.disableItemCollapse || dataItem.__dataSchema._expand">
<slot name="__notObjItem" :schema="dataItem.__dataSchema" :idx="idx"></slot> <!-- 注意：__notObjItem 和 __dataSchema 都是约定好的值，其它名字不生效 -->
</div>
</div>
</div>
<!-- 列表控制按钮 -->
<!-- 列表控制按钮 -->
<div v-show="!mergeConfig.collapsed" class="el-button-group" v-if="!mergeConfig.disableAdd || !mergeConfig.disableDel">
<button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="el-button el-button--mini"><i class="el-icon-circle-plus-outline"></i> {{mergeConfig.addTxt}}</button>
<button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="el-button el-button--danger el-button--mini"><i class="el-icon-remove"></i> {{mergeConfig.delAllTxt}}</button>
@@ -94,5 +98,34 @@
mixins: [layoutArrayMixin],
created() {
this._supportItemsCollapse();
},
methods: {
collapseItem(dataSchema) {
dataSchema._expand = !dataSchema._expand;
},
_supportItemsCollapse() {
if (!this.$data.mergeConfig.disableItemCollapse) {
this.schema.value.forEach(dataItem => {
if (dataItem.__dataSchema._expand === undefined)
this.$set(dataItem.__dataSchema, '_expand', !this.$data.mergeConfig.itemCollapse);
})
}
}
},
watch: {
'schema.value.length': {
handler(newVal, oldVal) {
if (newVal > oldVal) { // add item
this._supportItemsCollapse();
}
}
}
}
}
</script>
packages/ncform-theme-elementui/src/components/layout-comps/object.vue
+8 -3
View File
@@ -1,6 +1,6 @@
<template>
<div class="__object-form-item">
<legend v-if="schema.ui.legend && showLegend && schema.ui.showLegend" @click="collapse()">
<legend v-if="legendEnable(schema) && showLegend" @click="collapse()">
{{schema.ui.legend}}
<i v-if="!mergeConfig.disableCollapse" class="el-collapse-item__arrow" :class="{'el-icon-arrow-up': !mergeConfig.collapsed, 'el-icon-arrow-down': mergeConfig.collapsed}"></i>
</legend>
@@ -47,7 +47,7 @@
:style="{display: _analyzeVal(fieldSchema.ui.hidden) ? 'none' : ''}"
class="el-col el-form-item">
<template>
<label v-if="!isNormalObjSchema(fieldSchema) && !fieldSchema.ui.noLabelSpace" :style="{'visibility': fieldSchema.ui.showLabel ? 'visible' : 'hidden', width: mergeConfig.labelWidth}" class="el-form-item__label">
<label v-if="!legendEnable(fieldSchema) && !fieldSchema.ui.noLabelSpace" :style="{'visibility': fieldSchema.ui.showLabel ? 'visible' : 'hidden', width: mergeConfig.labelWidth}" class="el-form-item__label">
<!-- 必填标识 -->
<i v-if="_analyzeVal(fieldSchema.rules.required) === true || (typeof fieldSchema.rules.required === 'object' && _analyzeVal(fieldSchema.rules.required.value) === true)" class="text-danger">*</i>
{{fieldSchema.ui.label}}
@@ -58,7 +58,7 @@
</el-tooltip>
:
</label>
<div class="el-form-item__content" :style="{'margin-left': isNormalObjSchema(fieldSchema) || fieldSchema.ui.noLabelSpace ? '0px' : mergeConfig.labelWidth}">
<div class="el-form-item__content" :style="{'margin-left': (legendEnable(fieldSchema) || fieldSchema.ui.noLabelSpace) ? '0px' : mergeConfig.labelWidth}">
<slot :name="field"></slot>
<!-- 说明信息 -->
<small v-if="fieldSchema.ui.description" class="form-desc" v-html="_analyzeVal(fieldSchema.ui.description)">
@@ -157,6 +157,11 @@ export default {
default: true
}
},
methods: {
legendEnable(fieldSchema) {
return fieldSchema.ui.showLegend && fieldSchema.ui.legend;
}
},
mixins: [layoutObjectMixin]
};
</script>
packages/ncform/README.md
+1 -1
View File
@@ -2,7 +2,7 @@
ncform，一种令人愉悦的表单开发方式，仅需配置即可生成表单UI及其交互行为。
更详细信息请访问官网：[https://github.com/vipshop/ncform](https://github.com/vipshop/ncform)
更详细信息请访问官网：[https://github.com/ncform/ncform](https://github.com/ncform/ncform)
# How to dev
packages/ncform/examples/components/vue-ncform/base-array-use.html
+4 -1
View File
@@ -59,7 +59,10 @@
// disableDel: true,
// disableReorder: true,
addTxt: '增加',
delAllTxt: '删除全部'
delAllTxt: '删除全部',
// disableItemCollapse: false,
// itemCollapse: true
}
},
rules: {
packages/ncform/examples/components/vue-ncform/base-use.html
+20
View File
@@ -26,6 +26,13 @@
<script type="text/javascript">
Vue.use(vueNcform)
Vue.component('SepLine', {
props: {
config: Object
},
template: `<div :style="{ 'background-color': config.bgColor }" >========这是一条华丽丽的COMP分割线======== </div>`
})
// Bootstrap the app
new Vue({
el: '#demo',
@@ -78,6 +85,19 @@
}
}
},
_sepLine1: {
type: 'HTML',
value: 'dx: {{$root.peason1.firstName}} + " >> ========这是一条华丽丽的HTML分割线======== << " + {{$root.peason1.firstName}}',
},
_sepLine2: {
type: 'COMP',
ui: {
widget: 'SepLine',
widgetConfig: {
bgColor: 'orange'
}
}
},
peason2: {
type: 'object',
properties: {
packages/ncform/examples/components/vue-ncform/condition-use.html
+1 -1
View File
@@ -257,7 +257,7 @@
}
},
{
description: '操作对象',
description: '操作对象',
formSchema: {
type: 'object',
properties: {
packages/ncform/examples/components/vue-ncform/nested-object-use.html
+6
View File
@@ -129,7 +129,13 @@
}
},
ui: {
// 显示Legend
legend: 'Name',
// 显示label
// showLegend: false,
// label: 'Name',
widgetConfig: {
layout: 'h',
labelWidth: '120px'
packages/ncform/package.json
+1 -1
View File
@@ -20,7 +20,7 @@
},
"repository": {
"type": "git",
"url": "git+https://github.com/vipshop/ncform.git"
"url": "git+https://github.com/ncform/ncform.git"
},
"devDependencies": {
"autoprefixer": "^6.0.2",
packages/ncform/src/components/vue-ncform/form-item.vue
+19
View File
@@ -20,6 +20,16 @@
</component>
<!-- 特殊类型 HTML -->
<template v-else-if="schema.type === 'HTML'">
<div v-html="htmlTypeVal"></div>
</template>
<!-- 特殊类型 COMP -->
<template v-else-if="schema.type === 'COMP'">
<component :is="schema.ui.widget" :config="schema.ui.widgetConfig" :form-data="formData" :global-const="globalConfig.constants" :idx-chain="idxChain"></component>
</template>
<!-- string / number / integer / boolean 类型 -->
<template v-else>
<component :is="'ncform-' + schema.ui.widget" :config="schema.ui.widgetConfig" v-model="schema.value" :form-data="formData" :global-const="globalConfig.constants" :idx-chain="idxChain" class="__ncform-control">
@@ -142,6 +152,15 @@ export default {
constData: this.globalConfig.constants
}
});
},
htmlTypeVal() {
return ncformUtils.smartAnalyzeVal(this.schema.value, {
idxChain: this.idxChain,
data: {
rootData: this.formData,
constData: this.globalConfig.constants
}
});
}
},
packages/ncform/src/components/vue-ncform/layout-comps/array-table.vue
+1 -1
View File
@@ -42,7 +42,7 @@
<tfoot v-if="!mergeConfig.disableDel || !mergeConfig.disableAdd">
<tr>
<td :colspan="renderSchemas.length + 1">
<!-- 列表控制按钮 -->
<!-- 列表控制按钮 -->
<div class="btn-group btn-group-sm" v-if="!mergeConfig.disableAdd || !mergeConfig.disableDel">
<button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="btn btn-secondary">Add</button>
<button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="btn btn-danger btn-secondary">Del All</button>
packages/ncform/src/components/vue-ncform/layout-comps/array.vue
+36 -3
View File
@@ -10,6 +10,8 @@
<!-- 项控制按钮 -->
<div class="btn-group btn-group-sm">
<button @click="collapseItem(dataItem.__dataSchema)" v-show="dataItem.__dataSchema._expand" v-if="!mergeConfig.disableItemCollapse" type="button" class="btn btn-primary btn-secondary">fold</button>
<button @click="collapseItem(dataItem.__dataSchema)" v-show="!dataItem.__dataSchema._expand" v-if="!mergeConfig.disableItemCollapse" type="button" class="btn btn-primary btn-secondary">Expand</button>
<button @click="delItem(idx)" v-if="!mergeConfig.disableDel" type="button" class="btn btn-danger btn-secondary">Del</button>
<button @click="itemUp(idx)" v-show="idx !== 0" v-if="!mergeConfig.disableReorder" type="button" class="btn btn-secondary">Up</button>
<button @click="itemDown(idx)" v-show="idx !== schema.value.length - 1" v-if="!mergeConfig.disableReorder" type="button" class="btn btn-secondary">Down</button>
@@ -17,7 +19,7 @@
<!-- array item 是 正常的 object 类型 -->
<template v-if="isNormalObjSchema(dataItem.__dataSchema)">
<ncform-object :schema="dataItem.__dataSchema" :form-data="formData" :idx-chain="(idxChain ? idxChain + ',' : '') + idx" :config="dataItem.__dataSchema.ui.widgetConfig" :show-legend="false">
<ncform-object v-show="mergeConfig.disableItemCollapse || dataItem.__dataSchema._expand" :schema="dataItem.__dataSchema" :form-data="formData" :idx-chain="(idxChain ? idxChain + ',' : '') + idx" :config="dataItem.__dataSchema.ui.widgetConfig" :show-legend="false">
<!-- 注意：__notObjItem 这个Key为与form-item约定好的值，其它名字不生效 -->
<template v-for="(fieldSchema, fieldName) in (dataItem.__dataSchema.properties || {__notObjItem: dataItem.__dataSchema})" :slot="fieldName">
@@ -29,12 +31,14 @@
<!-- array item 是 非正常的 object 类型 以及 其它类型 -->
<template v-else>
<slot name="__notObjItem" :schema="dataItem.__dataSchema" :idx="idx"></slot> <!-- 注意：__notObjItem 和 __dataSchema 都是约定好的值，其它名字不生效 -->
<div v-show="mergeConfig.disableItemCollapse || dataItem.__dataSchema._expand">
<slot name="__notObjItem" :schema="dataItem.__dataSchema" :idx="idx"></slot> <!-- 注意：__notObjItem 和 __dataSchema 都是约定好的值，其它名字不生效 -->
</div>
</template>
</div>
<!-- 列表控制按钮 -->
<!-- 列表控制按钮 -->
<div v-show="!mergeConfig.collapsed" class="btn-group btn-group-sm" v-if="!mergeConfig.disableAdd || !mergeConfig.disableDel">
<button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="btn btn-secondary">{{mergeConfig.addTxt}}</button>
<button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="btn btn-danger btn-secondary">{{mergeConfig.delAllTxt}}</button>
@@ -64,5 +68,34 @@
mixins: [layoutArrayMixin],
created() {
this._supportItemsCollapse();
},
methods: {
collapseItem(dataSchema) {
dataSchema._expand = !dataSchema._expand;
},
_supportItemsCollapse() {
if (!this.$data.mergeConfig.disableItemCollapse) {
this.schema.value.forEach(dataItem => {
if (dataItem.__dataSchema._expand === undefined)
this.$set(dataItem.__dataSchema, '_expand', !this.$data.mergeConfig.itemCollapse);
})
}
}
},
watch: {
'schema.value.length': {
handler(newVal, oldVal) {
if (newVal > oldVal) { // add item
this._supportItemsCollapse();
}
}
}
}
}
</script>
packages/ncform/src/components/vue-ncform/layout-comps/object.vue
+8 -3
View File
@@ -1,6 +1,6 @@
<template>
<div class="__object-form-item">
<legend v-if="schema.ui.legend && showLegend && schema.ui.showLegend" @click="collapse()">{{schema.ui.legend}}</legend>
<legend v-if="legendEnable(schema) && showLegend" @click="collapse()">{{schema.ui.legend}}</legend>
<!-- 垂直布局，即label上，control下 -->
<div v-if="mergeConfig.layout === 'v'" v-show="!mergeConfig.collapsed" class="form-row v-layout" style="width: 100%">
@@ -39,7 +39,7 @@
:style="{display: _analyzeVal(fieldSchema.ui.hidden) ? 'none' : ''}"
class="form-group row">
<template>
<label v-if="!isNormalObjSchema(fieldSchema) && !fieldSchema.ui.noLabelSpace" :style="{'visibility': fieldSchema.ui.showLabel ? 'visible' : 'hidden', width: mergeConfig.labelWidth}" class="col-form-label">
<label v-if="!legendEnable(fieldSchema) && !fieldSchema.ui.noLabelSpace" :style="{'visibility': fieldSchema.ui.showLabel ? 'visible' : 'hidden', width: mergeConfig.labelWidth}" class="col-form-label">
<!-- 必填标识 -->
<i v-if="_analyzeVal(fieldSchema.rules.required) === true || (typeof fieldSchema.rules.required === 'object' && _analyzeVal(fieldSchema.rules.required.value) === true)" class="text-danger">*</i>
{{fieldSchema.ui.label}}
@@ -48,7 +48,7 @@
<a v-if="fieldSchema.ui.help.show === true" href="#"><span :class="fieldSchema.ui.help.iconCls">{{fieldSchema.ui.help.text}}</span></a>
:
</label>
<div :style="{'margin-left': !isNormalObjSchema(fieldSchema) && !fieldSchema.ui.noLabelSpace ? mergeConfig.labelWidth + ';' : '0px;'}" :class="{'col-md-9': !isNormalObjSchema(fieldSchema) && !fieldSchema.ui.noLabelSpace, 'col-md-12': !(!isNormalObjSchema(fieldSchema) && !fieldSchema.ui.noLabelSpace)}">
<div :style="{'margin-left': !legendEnable(fieldSchema) && !fieldSchema.ui.noLabelSpace ? mergeConfig.labelWidth + ';' : '0px;'}" :class="{'col-md-9': !legendEnable(fieldSchema) && !fieldSchema.ui.noLabelSpace, 'col-md-12': !(!legendEnable(fieldSchema) && !fieldSchema.ui.noLabelSpace)}">
<slot :name="field"></slot>
<!-- 说明信息 -->
@@ -108,6 +108,11 @@
default: true
},
},
methods: {
legendEnable(fieldSchema) {
return fieldSchema.ui.showLegend && fieldSchema.ui.legend;
}
},
mixins: [layoutObjectMixin]
}
</script>