diff --git a/CHANGELOG.md b/CHANGELOG.md index a034fd4..a18eb02 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,68 +1,68 @@ -## [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) -## [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) -## [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)) -## [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) -## [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)) -## [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)) diff --git a/CONFIG.md b/CONFIG.md index 526c581..479d012 100755 --- a/CONFIG.md +++ b/CONFIG.md @@ -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表达式】 diff --git a/README.md b/README.md index 74e2453..ac9e794 100644 --- a/README.md +++ b/README.md @@ -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的速度 ## 参考项目 diff --git a/STD-COMP.md b/STD-COMP.md index 6eb515d..5da185e 100755 --- a/STD-COMP.md +++ b/STD-COMP.md @@ -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' // 删除全部文字 } diff --git a/packages/ncform-common/package.json b/packages/ncform-common/package.json index f486b13..40ec0b4 100755 --- a/packages/ncform-common/package.json +++ b/packages/ncform-common/package.json @@ -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", diff --git a/packages/ncform-common/src/ncform-utils.js b/packages/ncform-common/src/ncform-utils.js index 941d393..09ee80f 100755 --- a/packages/ncform-common/src/ncform-utils.js +++ b/packages/ncform-common/src/ncform-utils.js @@ -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) + ); + } } }); } diff --git a/packages/ncform-common/test/unit/ncform-utils.js b/packages/ncform-common/test/unit/ncform-utils.js index f187dd2..5a82983 100755 --- a/packages/ncform-common/test/unit/ncform-utils.js +++ b/packages/ncform-common/test/unit/ncform-utils.js @@ -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 diff --git a/packages/ncform-show/src/components/playground/playground.js b/packages/ncform-show/src/components/playground/playground.js index d770088..f76ac2a 100755 --- a/packages/ncform-show/src/components/playground/playground.js +++ b/packages/ncform-show/src/components/playground/playground.js @@ -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: '
基本信息
' + }, + name: { + type: "string", + ui: { + label: "姓名", + description: "请填写你的姓名", + placeholder: "姓名" + } + }, + email: { + type: "string", + ui: { + label: "邮件" + } + }, + _line2: { + type: 'HTML', + value: '
其它信息
' + }, + age: { + type: "integer", + default: 18, + ui: { + label: "年龄" + } + }, + adult: { + type: "boolean", + ui: { + label: "是否成年", + help: { + show: true, + text: "?", + content: "成年才可以玩农药啊" + } + } + } + } + }, "8": { type: "object", properties: { diff --git a/packages/ncform-theme-elementui/examples/debug/object.html b/packages/ncform-theme-elementui/examples/debug/object.html new file mode 100644 index 0000000..194f3ae --- /dev/null +++ b/packages/ncform-theme-elementui/examples/debug/object.html @@ -0,0 +1,90 @@ + + + + + object widget + + + + + + + + + +
+
+

{{ item.title }}

+
+
+ + value: {{ item.schema.value }} +
+
+ 
{{ JSON.stringify(originFormSchemas[idx].schema.properties, null, 2) }}
+
+
+ 
{{ item.detail }}
+
+
+
+
+ + + + + + + + + + + + diff --git a/packages/ncform-theme-elementui/examples/index.html b/packages/ncform-theme-elementui/examples/index.html index d4dd615..cb7bcb7 100755 --- a/packages/ncform-theme-elementui/examples/index.html +++ b/packages/ncform-theme-elementui/examples/index.html @@ -8,6 +8,13 @@ + + 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 9800b95..e1e5621 100755 --- a/packages/ncform-theme-elementui/examples/layout-comps/array-table.html +++ b/packages/ncform-theme-elementui/examples/layout-comps/array-table.html @@ -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: { 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 abb4847..cf8f268 100755 --- a/packages/ncform-theme-elementui/examples/layout-comps/array-tabs.html +++ b/packages/ncform-theme-elementui/examples/layout-comps/array-tabs.html @@ -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: { diff --git a/packages/ncform-theme-elementui/examples/layout-comps/array.html b/packages/ncform-theme-elementui/examples/layout-comps/array.html index 010d420..b37fcee 100755 --- a/packages/ncform-theme-elementui/examples/layout-comps/array.html +++ b/packages/ncform-theme-elementui/examples/layout-comps/array.html @@ -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 } } } diff --git a/packages/ncform-theme-elementui/examples/layout-comps/object.html b/packages/ncform-theme-elementui/examples/layout-comps/object.html index ae455d5..b70a562 100755 --- a/packages/ncform-theme-elementui/examples/layout-comps/object.html +++ b/packages/ncform-theme-elementui/examples/layout-comps/object.html @@ -170,7 +170,7 @@ } }, { - title: '[属性] collapsed: 是否默认折叠', + title: '[属性] collapsed: 是否默认折叠', schema: { type: 'object', properties: { @@ -194,7 +194,7 @@ } }, { - title: '[属性] disableCollapse: 是否禁止折叠', + title: '[属性] disableCollapse: 是否禁止折叠', schema: { type: 'object', properties: { diff --git a/packages/ncform-theme-elementui/src/components/control-comps/upload.vue b/packages/ncform-theme-elementui/src/components/control-comps/upload.vue index 543a9a7..dafa14e 100755 --- a/packages/ncform-theme-elementui/src/components/control-comps/upload.vue +++ b/packages/ncform-theme-elementui/src/components/control-comps/upload.vue @@ -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' }); }, diff --git a/packages/ncform-theme-elementui/src/components/layout-comps/array-table.vue b/packages/ncform-theme-elementui/src/components/layout-comps/array-table.vue index df6b76c..c2c5a0e 100755 --- a/packages/ncform-theme-elementui/src/components/layout-comps/array-table.vue +++ b/packages/ncform-theme-elementui/src/components/layout-comps/array-table.vue @@ -47,7 +47,7 @@ - +
diff --git a/packages/ncform-theme-elementui/src/components/layout-comps/array.vue b/packages/ncform-theme-elementui/src/components/layout-comps/array.vue index eea9dfe..19c78ae 100755 --- a/packages/ncform-theme-elementui/src/components/layout-comps/array.vue +++ b/packages/ncform-theme-elementui/src/components/layout-comps/array.vue @@ -14,6 +14,8 @@
+ + @@ -22,7 +24,7 @@