From cf841373f5875d5f902212afd804345e10f5dfc0 Mon Sep 17 00:00:00 2001 From: daniel-dx Date: Thu, 28 Feb 2019 22:42:02 +0800 Subject: [PATCH] Updates --- ncform-show/assets/playground.js | 20 +- ncform-show/assets/schemaGen.js | 20 +- ncform-show/playground/index.html | 6 +- ncform-theme-elementui/assets/dist/array.js | 28 +- .../assets/dist/arrayTable.js | 28 +- .../assets/dist/arrayTabs.js | 26 +- .../assets/dist/checkbox.js | 26 +- .../assets/dist/colorPicker.js | 26 +- .../assets/dist/datePicker.js | 26 +- ncform-theme-elementui/assets/dist/input.js | 26 +- .../assets/dist/inputNumber.js | 26 +- ncform-theme-elementui/assets/dist/label.js | 26 +- .../assets/dist/ncformStdComps.js | 364 +++---- ncform-theme-elementui/assets/dist/object.js | 28 +- ncform-theme-elementui/assets/dist/radio.js | 26 +- ncform-theme-elementui/assets/dist/rate.js | 26 +- ncform-theme-elementui/assets/dist/select.js | 26 +- ncform-theme-elementui/assets/dist/slider.js | 26 +- .../assets/dist/textarea.js | 26 +- ncform-theme-elementui/assets/dist/upload.js | 28 +- ncform-theme-elementui/assets/index.css | 2 +- .../control-comps/checkbox.html | 465 +++++---- .../control-comps/color-picker.html | 251 ++--- .../control-comps/date-picker.html | 346 ++++--- .../control-comps/input-number.html | 334 ++++--- .../control-comps/input.html | 907 ++++++++++-------- .../control-comps/label.html | 227 +++-- .../control-comps/radio.html | 398 ++++---- .../control-comps/rate.html | 688 +++++++------ .../control-comps/select.html | 643 +++++++------ .../control-comps/slider.html | 362 +++---- .../control-comps/textarea.html | 321 ++++--- .../control-comps/upload.html | 822 ++++++++-------- ncform-theme-elementui/index.html | 106 +- .../layout-comps/array-table.html | 476 +++++---- .../layout-comps/array-tabs.html | 381 +++++--- .../layout-comps/array.html | 539 ++++++----- .../layout-comps/object.html | 453 +++++---- 38 files changed, 4708 insertions(+), 3847 deletions(-) diff --git a/ncform-show/assets/playground.js b/ncform-show/assets/playground.js index b1444eb..8fef663 100644 --- a/ncform-show/assets/playground.js +++ b/ncform-show/assets/playground.js @@ -98,48 +98,48 @@ return /******/ (function(modules) { // webpackBootstrap /***/ "../../node_modules/babel-loader/lib/index.js!./src/components/playground/playground.js?vue&type=script&lang=js&": /*!****************************************************************************************************************************************!*\ - !*** D:/daniel/projects/owner/ncform/node_modules/babel-loader/lib!./src/components/playground/playground.js?vue&type=script&lang=js& ***! + !*** D:/daniel_projects/owner/ncform/node_modules/babel-loader/lib!./src/components/playground/playground.js?vue&type=script&lang=js& ***! \****************************************************************************************************************************************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n/**\n * \n */\nexports.default = {\n /* ====================== 生命周期 ====================== */\n\n created: function created() {\n // 在这里做一些跟DOM无关的初始化, 比如获取初始化数据\n },\n mounted: function mounted() {\n var _this = this;\n\n // 在这里做一些跟DOM有关的初始化\n setTimeout(function () {\n _this.createEditor();\n _this.templateChange(\"0\");\n }, 0);\n },\n destroyed: function destroyed() {\n // 在这里销毁无用的资源，比如setTimeout返回的值\n },\n\n\n /* ====================== 引用组件 ====================== */\n\n components: {},\n\n /* ====================== 数据绑定 ====================== */\n\n props: {},\n\n data: function data() {\n return {\n jsonValue: \"\",\n ncformSchema: {\n type: \"object\",\n properties: {\n username: {\n type: \"string\",\n ui: {\n columns: 6,\n label: \"username\"\n }\n }\n }\n },\n ncformValue: {},\n\n selectVal: \"0\",\n options: [{\n value: \"0\",\n label: \"基础使用\"\n }, {\n value: \"1\",\n label: \"基础使用-丰富显示\"\n }, {\n value: \"2\",\n label: \"基础使用-多列布局\"\n }, {\n value: \"22\",\n label: \"基础使用-媒体预览\"\n }, {\n value: \"3\",\n label: \"基础使用-标签居左\"\n }, {\n value: \"4\",\n label: \"基础使用-校验规则\"\n }, {\n value: \"5\",\n label: \"基础使用-数组类型\"\n }, {\n value: \"6\",\n label: \"基础使用-表格数组\"\n }, {\n value: \"7\",\n label: \"基础使用-标签数组\"\n }, {\n value: \"77\",\n label: \"基础使用-分隔栏\"\n }, {\n value: \"8\",\n label: \"高级玩法-控件交互 dx表达式\"\n }, {\n value: \"9\",\n label: \"高级玩法-数组项交互 dx表达式\"\n }, {\n value: \"10\",\n label: \"高级玩法-下拉框值交互 dx表达式\"\n }, {\n value: \"101\",\n label: \"高级玩法-校验关联 dx表达式\"\n }, {\n value: \"11\",\n label: \"高级玩法-自定义校验规则 dx表达式\"\n }, {\n value: \"12\",\n label: \"高级玩法-全局常量 dx表达式\"\n }, {\n value: \"13\",\n label: \"高级玩法-跟随 dx表达式\"\n }],\n templates: {\n \"0\": {\n type: \"object\",\n properties: {\n name: {\n type: \"string\"\n },\n email: {\n type: \"string\"\n },\n age: {\n type: \"integer\"\n },\n adult: {\n type: \"boolean\"\n }\n }\n },\n \"1\": {\n type: \"object\",\n properties: {\n name: {\n type: \"string\",\n ui: {\n label: \"姓名\",\n description: \"请填写你的姓名\",\n placeholder: \"姓名\"\n }\n },\n email: {\n type: \"string\",\n ui: {\n label: \"邮件\"\n }\n },\n age: {\n type: \"integer\",\n default: 18,\n ui: {\n label: \"年龄\"\n }\n },\n adult: {\n type: \"boolean\",\n ui: {\n label: \"是否成年\",\n help: {\n show: true,\n text: \"?\",\n content: \"成年才可以玩农药啊\"\n }\n }\n }\n }\n },\n \"2\": {\n type: \"object\",\n properties: {\n firstname: {\n type: \"string\",\n ui: {\n columns: 3,\n label: \"姓名\",\n placeholder: \"姓\"\n }\n },\n lastname: {\n type: \"string\",\n ui: {\n columns: 3,\n showLabel: false,\n placeholder: \"名\"\n }\n },\n email: {\n type: \"string\",\n ui: {\n columns: 6,\n label: \"邮件\"\n }\n },\n age: {\n type: \"integer\",\n ui: {\n columns: 6,\n label: \"年龄\"\n }\n },\n adult: {\n type: \"boolean\",\n ui: {\n columns: 6,\n label: \"是否成年\",\n help: {\n show: true,\n text: \"?\",\n content: \"成年才可以玩农药啊\"\n }\n }\n }\n }\n },\n\n \"22\": {\n type: \"object\",\n properties: {\n image: {\n type: \"string\",\n default: \"https://upload-images.jianshu.io/upload_images/2195795-e3c500e4b7d17b2c.png?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240\",\n ui: {\n label: \"图片\",\n columns: 6,\n preview: {\n type: \"image\",\n value: \"dx: {{$self}}\",\n clearable: true,\n outward: {\n width: 150,\n height: 150,\n shape: \"circle\"\n }\n }\n }\n },\n video: {\n type: \"string\",\n default: \"https://www.w3schools.com/html/mov_bbb.mp4\",\n ui: {\n label: \"视频\",\n columns: 6,\n preview: {\n type: \"video\"\n }\n }\n },\n audio: {\n type: \"string\",\n default: \"https://www.w3schools.com/html/mov_bbb.mp4\",\n ui: {\n label: \"音频\",\n columns: 6,\n preview: {\n type: \"audio\"\n }\n }\n },\n link: {\n type: \"string\",\n default: \"https://www.baidu.com\",\n ui: {\n label: \"链接\",\n columns: 6,\n preview: {\n type: \"link\"\n }\n }\n }\n }\n },\n\n \"3\": {\n type: \"object\",\n properties: {\n firstname: {\n type: \"string\",\n ui: {\n label: \"姓名\",\n placeholder: \"姓\"\n }\n },\n lastname: {\n type: \"string\",\n ui: {\n showLabel: false,\n placeholder: \"名\"\n }\n },\n email: {\n type: \"string\",\n ui: {\n label: \"邮件\"\n }\n },\n age: {\n type: \"integer\",\n ui: {\n label: \"年龄\"\n }\n },\n adult: {\n type: \"boolean\",\n ui: {\n label: \"是否成年\",\n help: {\n show: true,\n text: \"?\",\n content: \"成年才可以玩农药啊\"\n }\n }\n }\n },\n ui: {\n widgetConfig: {\n layout: \"h\"\n }\n }\n },\n \"4\": {\n type: \"object\",\n properties: {\n name: {\n type: \"string\",\n ui: {\n label: \"姓名\",\n description: \"请填写你的姓名\",\n placeholder: \"姓名\"\n },\n rules: {\n required: true,\n minLength: 10\n }\n },\n email: {\n type: \"string\",\n ui: {\n label: \"邮件\"\n },\n rules: {\n required: true,\n email: {\n value: true,\n errMsg: \"请填写有效的邮件地址\"\n }\n }\n },\n age: {\n type: \"integer\",\n ui: {\n label: \"年龄\"\n }\n },\n adult: {\n type: \"boolean\",\n ui: {\n label: \"是否成年\",\n help: {\n show: true,\n text: \"?\",\n content: \"成年才可以玩农药啊\"\n }\n }\n }\n }\n },\n \"5\": {\n type: \"object\",\n properties: {\n user: {\n type: \"array\",\n items: {\n type: \"object\",\n properties: {\n name: {\n type: \"string\",\n ui: {\n label: \"姓名\",\n description: \"请填写你的姓名\",\n placeholder: \"姓名\"\n },\n rules: {\n required: true\n }\n },\n email: {\n type: \"string\",\n ui: {\n label: \"邮件\"\n },\n rules: {\n required: true,\n email: true\n }\n },\n age: {\n type: \"integer\",\n ui: {\n label: \"年龄\"\n }\n },\n adult: {\n type: \"boolean\",\n ui: {\n label: \"是否成年\",\n help: {\n show: true,\n text: \"?\",\n content: \"成年才可以玩农药啊\"\n }\n }\n }\n },\n ui: {\n label: \"用户\"\n }\n },\n ui: {\n showLegend: false,\n noLabelSpace: true\n }\n }\n }\n },\n \"6\": {\n type: \"object\",\n properties: {\n user: {\n type: \"array\",\n items: {\n type: \"object\",\n properties: {\n name: {\n type: \"string\",\n ui: {\n label: \"姓名\",\n description: \"请填写你的姓名\",\n placeholder: \"姓名\"\n },\n rules: {\n required: true\n }\n },\n email: {\n type: \"string\",\n ui: {\n label: \"邮件\"\n },\n rules: {\n required: true,\n email: true\n }\n },\n age: {\n type: \"integer\",\n ui: {\n label: \"年龄\"\n }\n },\n adult: {\n type: \"boolean\",\n ui: {\n label: \"是否成年\",\n help: {\n show: true,\n text: \"?\",\n content: \"成年才可以玩农药啊\"\n }\n }\n }\n }\n },\n ui: {\n showLegend: false,\n noLabelSpace: true,\n widget: \"array-table\",\n widgetConfig: {\n disableCollapse: true\n }\n }\n }\n }\n },\n \"7\": {\n type: \"object\",\n properties: {\n user: {\n type: \"array\",\n items: {\n type: \"object\",\n properties: {\n name: {\n type: \"string\",\n ui: {\n label: \"姓名\",\n description: \"请填写你的姓名\",\n placeholder: \"姓名\"\n },\n rules: {\n required: true\n }\n },\n email: {\n type: \"string\",\n ui: {\n label: \"邮件\"\n },\n rules: {\n required: true,\n email: true\n }\n },\n age: {\n type: \"integer\",\n ui: {\n label: \"年龄\"\n }\n },\n adult: {\n type: \"boolean\",\n ui: {\n label: \"是否成年\",\n help: {\n show: true,\n text: \"?\",\n content: \"成年才可以玩农药啊\"\n }\n }\n }\n },\n ui: {\n label: \"用户\"\n }\n },\n ui: {\n showLegend: false,\n noLabelSpace: true,\n widget: \"array-tabs\"\n }\n }\n }\n },\n \"77\": {\n type: \"object\",\n properties: {\n _line1: {\n type: 'HTML',\n value: '
基本信息
'\n },\n name: {\n type: \"string\",\n ui: {\n label: \"姓名\",\n description: \"请填写你的姓名\",\n placeholder: \"姓名\"\n }\n },\n email: {\n type: \"string\",\n ui: {\n label: \"邮件\"\n }\n },\n _line2: {\n type: 'HTML',\n value: '
其它信息
'\n },\n age: {\n type: \"integer\",\n default: 18,\n ui: {\n label: \"年龄\"\n }\n },\n adult: {\n type: \"boolean\",\n ui: {\n label: \"是否成年\",\n help: {\n show: true,\n text: \"?\",\n content: \"成年才可以玩农药啊\"\n }\n }\n }\n }\n },\n \"8\": {\n type: \"object\",\n properties: {\n age: {\n type: \"integer\",\n ui: {\n label: \"年龄\",\n description: \"大于18岁才能继续填写\"\n }\n },\n gameInfo: {\n type: \"object\",\n properties: {\n game: {\n type: \"string\",\n ui: {\n label: \"喜欢游戏\",\n description: \"填写解锁\"\n }\n },\n gameAge: {\n type: \"integer\",\n ui: {\n label: \"游戏年龄\",\n disabled: \"dx: !{{$root.gameInfo.game}}\"\n }\n }\n },\n ui: {\n legend: \"游戏信息\",\n hidden: \"dx: !{{$root.age}} || {{$root.age}} < 18\"\n }\n }\n }\n },\n \"9\": {\n type: \"object\",\n properties: {\n user: {\n type: \"array\",\n items: {\n type: \"object\",\n properties: {\n adult: {\n type: \"boolean\",\n ui: {\n label: \"是否成年\",\n help: {\n show: true,\n text: \"?\"\n }\n }\n },\n gameName: {\n type: \"string\",\n ui: {\n label: \"喜欢游戏\",\n disabled: \"dx: !{{$root.user[i].adult}}\"\n }\n },\n gameAge: {\n type: \"integer\",\n ui: {\n label: \"游戏年龄\",\n disabled: \"dx: !{{$root.user[i].adult}}\"\n }\n }\n }\n },\n ui: {\n showLegend: false,\n noLabelSpace: true,\n widget: \"array-table\"\n }\n }\n }\n },\n \"10\": {\n type: \"object\",\n properties: {\n province: {\n type: \"string\",\n ui: {\n label: \"省份\",\n widget: \"select\",\n widgetConfig: {\n itemLabelField: \"name\", // 项数据表示label的字段\n itemValueField: \"id\", // 项数据表示value的字段\n enumSourceRemote: {\n // 远程数据源\n remoteUrl: \"/api/test/getProvinces\", // 如果是远程访问，则填写该url\n paramName: \"keyword\" // 请求参数名，默认是keyword\n }\n }\n }\n },\n city: {\n type: \"string\",\n ui: {\n label: \"城市\",\n widget: \"select\",\n widgetConfig: {\n itemLabelField: \"name\", // 项数据表示label的字段\n itemValueField: \"id\", // 项数据表示value的字段\n enumSourceRemote: {\n // 远程数据源\n remoteUrl: \"/api/test/getCities\", // 如果是远程访问，则填写该url\n paramName: \"keyword\", // 请求参数名，默认是keyword\n otherParams: {\n provinceId: \"dx: {{$root.province}}\"\n }\n }\n }\n }\n }\n }\n },\n \"101\": {\n type: \"object\",\n properties: {\n isRequired: {\n type: \"boolean\",\n ui: {\n label: \"是否必填\",\n linkFields: [{\n fieldPath: \"num_1\",\n rules: [\"required\"]\n }, {\n fieldPath: \"num_2\",\n rules: [\"required\"]\n }]\n }\n },\n num_1: {\n type: \"number\",\n ui: {\n description: \"num_1 >= num_2\",\n columns: 6,\n linkFields: [{\n fieldPath: \"num_2\",\n rules: [\"maximum\"]\n }]\n },\n rules: {\n required: {\n value: \"dx: {{$root.isRequired}}\"\n },\n minimum: {\n value: \"dx: {{$root.num_2}} || 0\",\n errMsg: \"num_1 >= num_2\"\n }\n }\n },\n num_2: {\n type: \"number\",\n ui: {\n columns: 6,\n linkFields: [{\n fieldPath: \"num_1\",\n rules: [\"minimum\"]\n }]\n },\n rules: {\n required: {\n value: \"dx: {{$root.isRequired}}\"\n },\n maximum: {\n value: \"dx: {{$root.num_1}} || 0\",\n errMsg: \"num_2 <= num_1\"\n }\n }\n }\n }\n },\n \"11\": {\n type: \"object\",\n properties: {\n startTime: {\n type: \"string\",\n ui: {\n widget: \"date-picker\"\n },\n rules: {\n customRule: [{\n script: \"dx: !{{$root.endTime}} || {{$root.endTime}} >= {{$root.startTime}}\", // 支持dx表达式\n errMsg: \"开始日期必须小于等于结束日期\", // 验证错误信息\n linkItems: [\n // 当触发校验时，同时触发这些关联的项进行校验\n {\n fieldPath: \"endTime\", // 关联项\n customRuleIdx: 0 // 触发该项的自定义验证规则的索引\n }]\n }]\n }\n },\n endTime: {\n type: \"string\",\n ui: {\n widget: \"date-picker\"\n },\n rules: {\n customRule: [{\n script: \"dx: !{{$root.startTime}} || {{$root.endTime}} >= {{$root.startTime}}\", // 支持dx表达式\n errMsg: \"结束日期必须大于等于开始日期\", // 验证错误信息\n linkItems: [\n // 当触发校验时，同时触发这些关联的项进行校验\n {\n fieldPath: \"startTime\", // 关联项\n customRuleIdx: 0 // 触发该项的自定义验证规则的索引\n }]\n }]\n }\n },\n arrayItems: {\n type: \"array\",\n items: {\n type: \"object\",\n properties: {\n startTime: {\n type: \"string\",\n ui: {\n widget: \"date-picker\"\n },\n rules: {\n customRule: [{\n script: \"dx: !{{$root.arrayItems[i].endTime}} || {{$root.arrayItems[i].endTime}} >= {{$root.arrayItems[i].startTime}}\", // 支持dx表达式\n errMsg: \"开始日期必须小于等于结束日期\", // 验证错误信息\n linkItems: [\n // 当触发校验时，同时触发这些关联的项进行校验\n {\n fieldPath: \"arrayItems[i].endTime\", // 关联项\n customRuleIdx: 0 // 触发该项的自定义验证规则的索引\n }]\n }]\n }\n },\n endTime: {\n type: \"string\",\n ui: {\n widget: \"date-picker\"\n },\n rules: {\n customRule: [{\n script: \"dx: !{{$root.arrayItems[i].startTime}} || {{$root.arrayItems[i].endTime}} >= {{$root.arrayItems[i].startTime}}\", // 支持dx表达式\n errMsg: \"结束日期必须大于等于开始日期\", // 验证错误信息\n linkItems: [\n // 当触发校验时，同时触发这些关联的项进行校验\n {\n fieldPath: \"arrayItems[i].startTime\", // 关联项\n customRuleIdx: 0 // 触发该项的自定义验证规则的索引\n }]\n }]\n }\n }\n }\n },\n ui: {\n showLabel: false,\n legend: \"数组项\",\n widget: \"array-table\",\n widgetConfig: {\n collapsed: true\n }\n }\n }\n }\n },\n \"12\": {\n type: \"object\",\n properties: {\n age: {\n type: \"string\",\n ui: {\n placeholder: 'dx: \"年龄必须大于\" + {{$const.ageLimit}}'\n },\n rules: {\n customRule: [{\n script: \"dx: {{$root.age}} > {{$const.ageLimit}}\", // 支持dx表达式\n errMsg: \"请填写正确的年龄\" // 验证错误信息\n }]\n }\n }\n },\n globalConfig: {\n constants: {\n ageLimit: 18\n }\n }\n },\n \"13\": {\n type: \"object\",\n properties: {\n firstname: {\n type: 'string',\n ui: {\n columns: 6\n }\n },\n lastname: {\n type: 'string',\n ui: {\n columns: 6\n }\n },\n fullname: {\n type: 'string',\n valueTemplate: 'dx: {{$root.firstname}} + \" \" +　{{$root.lastname}}',\n ui: {\n columns: 12\n }\n }\n }\n }\n }\n };\n },\n\n\n /* ====================== 事件处理 ====================== */\n\n methods: {\n createEditor: function createEditor() {\n this.$options.editor = window.ace.edit(this.$refs.editor);\n this.$options.editor.$blockScrolling = Infinity;\n },\n templateChange: function templateChange(v) {\n this.$options.editor.setValue(JSON.stringify(this.$data.templates[v], null, 2), 1);\n this.$data.ncformSchema = JSON.parse(this.$options.editor.getValue());\n this.$data.ncformValue = {};\n },\n createForm: function createForm() {\n var value = this.$options.editor.getValue();\n try {\n eval('this.$data.ncformSchema = ' + value);\n this.$data.ncformValue = {};\n } catch (err) {\n alert(\"不是有效的JSON数据.\");\n throw new Error(\"createForm Error:\" + err);\n }\n },\n getFormData: function getFormData() {\n var _this2 = this;\n\n this.$ncformValidate(\"preview-form\").then(function (res) {\n if (res.result) {\n var data = JSON.stringify(_this2.$data.ncformValue, null, 2);\n alert(data);\n }\n });\n }\n },\n\n watch: {}\n};\n\n//# sourceURL=webpack://%5Bname%5D/./src/components/playground/playground.js?D:/daniel/projects/owner/ncform/node_modules/babel-loader/lib"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n/**\r\n * \r\n */\nexports.default = {\n /* ====================== 生命周期 ====================== */\n\n created: function created() {\n // 在这里做一些跟DOM无关的初始化, 比如获取初始化数据\n if (location.search.indexOf('lang=cn') >= 0) {\n this.$data.lang = 'cn';\n }\n },\n mounted: function mounted() {\n var _this = this;\n\n // 在这里做一些跟DOM有关的初始化\n setTimeout(function () {\n _this.createEditor();\n _this.templateChange(\"0\");\n }, 0);\n },\n\n\n /* ====================== 数据绑定 ====================== */\n\n props: {},\n\n data: function data() {\n return {\n lang: 'en',\n jsonValue: \"\",\n i18nData: {\n en: {\n template: 'Template',\n genForm: 'Run',\n getData: 'Get Data',\n notValidJSON: 'Not valid JSON data'\n },\n cn: {\n template: '模板',\n genForm: '生成表单',\n getData: '获取表单数据',\n notValidJSON: '不是有效的JSON数据'\n }\n },\n ncformSchema: {\n type: \"object\",\n properties: {\n username: {\n type: \"string\",\n ui: {\n columns: 6,\n label: \"username\"\n }\n }\n }\n },\n ncformValue: {},\n\n selectVal: \"0\",\n options: [{\n value: \"0\",\n label: {\n cn: \"基础使用\",\n en: \"Basic\"\n }\n }, {\n value: \"1\",\n label: {\n cn: \"基础使用-丰富显示\",\n en: \"Basic-Rich Display\"\n }\n }, {\n value: \"2\",\n label: {\n cn: \"基础使用-多列布局\",\n en: \"Basic-Multi Columns\"\n }\n }, {\n value: \"22\",\n label: {\n cn: \"基础使用-媒体预览\",\n en: \"Basic-Media Preview\"\n }\n }, {\n value: \"3\",\n label: {\n cn: \"基础使用-标签居左\",\n en: \"Basic-Label Left\"\n }\n }, {\n value: \"4\",\n label: {\n cn: \"基础使用-校验规则\",\n en: \"Basic-Verification Rule\"\n }\n }, {\n value: \"5\",\n label: {\n cn: \"基础使用-数组类型\",\n en: \"Basic-Array Type\"\n }\n }, {\n value: \"6\",\n label: {\n cn: \"基础使用-表格数组\",\n en: \"Basic-Table Array\"\n }\n }, {\n value: \"7\",\n label: {\n cn: \"基础使用-标签数组\",\n en: \"Basic-Tabs Array\"\n }\n }, {\n value: \"77\",\n label: {\n cn: \"基础使用-分隔栏\",\n en: \"Basic-Separator\"\n }\n }, {\n value: \"8\",\n label: {\n cn: \"高级玩法-控件交互 dx表达式\",\n en: \"Adv-Control Interaction [dx expression]\"\n }\n }, {\n value: \"9\",\n label: {\n cn: \"高级玩法-数组项交互 dx表达式\",\n en: \"Adv-Array Item Interaction [dx expression]\"\n }\n }, {\n value: \"10\",\n label: {\n cn: \"高级玩法-下拉框值交互 dx表达式\",\n en: \"Adv-Selector Interaction [dx expression]\"\n }\n }, {\n value: \"101\",\n label: {\n cn: \"高级玩法-校验关联 dx表达式\",\n en: \"Adv-Check Association [dx expression]\"\n }\n }, {\n value: \"11\",\n label: {\n cn: \"高级玩法-自定义校验规则 dx表达式\",\n en: \"Adv-Custom Rule [dx expression]\"\n }\n }, {\n value: \"12\",\n label: {\n cn: \"高级玩法-全局常量 dx表达式\",\n en: \"Adv-Global Constant [dx expression]\"\n }\n }, {\n value: \"13\",\n label: {\n cn: \"高级玩法-跟随 dx表达式\",\n en: \"Adv-Follow [dx expression]\"\n }\n }],\n templates: {\n \"0\": {\n type: \"object\",\n properties: {\n name: {\n type: \"string\"\n },\n email: {\n type: \"string\"\n },\n age: {\n type: \"integer\"\n },\n adult: {\n type: \"boolean\"\n }\n }\n },\n \"1\": {\n type: \"object\",\n properties: {\n name: {\n type: \"string\",\n ui: {\n label: \"Name\",\n description: \"Please fill in your name.\",\n placeholder: \"Name\"\n }\n },\n email: {\n type: \"string\",\n ui: {\n label: \"Email\"\n }\n },\n age: {\n type: \"integer\",\n default: 18,\n ui: {\n label: \"Age\"\n }\n },\n adult: {\n type: \"boolean\",\n ui: {\n label: \"Adult\",\n help: {\n show: true,\n text: \"?\",\n content: \"Adults can play games.\"\n }\n }\n }\n }\n },\n \"2\": {\n type: \"object\",\n properties: {\n firstname: {\n type: \"string\",\n ui: {\n columns: 3,\n label: \"Name\",\n placeholder: \"First name\"\n }\n },\n lastname: {\n type: \"string\",\n ui: {\n columns: 3,\n showLabel: false,\n placeholder: \"Last name\"\n }\n },\n email: {\n type: \"string\",\n ui: {\n columns: 6,\n label: \"Email\"\n }\n },\n age: {\n type: \"integer\",\n ui: {\n columns: 6,\n label: \"Age\"\n }\n },\n adult: {\n type: \"boolean\",\n ui: {\n columns: 6,\n label: \"adult\",\n help: {\n show: true,\n text: \"?\",\n content: \"Adults can play games\"\n }\n }\n }\n }\n },\n\n \"22\": {\n type: \"object\",\n properties: {\n image: {\n type: \"string\",\n default: \"https://upload-images.jianshu.io/upload_images/2195795-e3c500e4b7d17b2c.png?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240\",\n ui: {\n label: \"Image\",\n columns: 6,\n preview: {\n type: \"image\",\n value: \"dx: {{$self}}\",\n clearable: true,\n outward: {\n width: 150,\n height: 150,\n shape: \"circle\"\n }\n }\n }\n },\n video: {\n type: \"string\",\n default: \"https://www.w3schools.com/html/mov_bbb.mp4\",\n ui: {\n label: \"Video\",\n columns: 6,\n preview: {\n type: \"video\"\n }\n }\n },\n audio: {\n type: \"string\",\n default: \"https://www.w3schools.com/html/mov_bbb.mp4\",\n ui: {\n label: \"Audio\",\n columns: 6,\n preview: {\n type: \"audio\"\n }\n }\n },\n link: {\n type: \"string\",\n default: \"https://www.baidu.com\",\n ui: {\n label: \"Link\",\n columns: 6,\n preview: {\n type: \"link\"\n }\n }\n }\n }\n },\n\n \"3\": {\n type: \"object\",\n properties: {\n firstname: {\n type: \"string\",\n ui: {\n label: \"Name\",\n placeholder: \"First name\"\n }\n },\n lastname: {\n type: \"string\",\n ui: {\n showLabel: false,\n placeholder: \"Last name\"\n }\n },\n email: {\n type: \"string\",\n ui: {\n label: \"Email\"\n }\n },\n age: {\n type: \"integer\",\n ui: {\n label: \"Age\"\n }\n },\n adult: {\n type: \"boolean\",\n ui: {\n label: \"Adult\",\n help: {\n show: true,\n text: \"?\",\n content: \"Adults can play games\"\n }\n }\n }\n },\n ui: {\n widgetConfig: {\n layout: \"h\"\n }\n }\n },\n \"4\": {\n type: \"object\",\n properties: {\n name: {\n type: \"string\",\n ui: {\n label: \"Name\",\n description: \"Please fill in your name\",\n placeholder: \"Name\"\n },\n rules: {\n required: true,\n minLength: 10\n }\n },\n email: {\n type: \"string\",\n ui: {\n label: \"Email\"\n },\n rules: {\n required: true,\n email: {\n value: true,\n errMsg: \"Please fill in a valid email address\"\n }\n }\n },\n age: {\n type: \"integer\",\n ui: {\n label: \"Age\"\n }\n },\n adult: {\n type: \"boolean\",\n ui: {\n label: \"Adult\",\n help: {\n show: true,\n text: \"?\",\n content: \"Adults can play games\"\n }\n }\n }\n }\n },\n \"5\": {\n type: \"object\",\n properties: {\n user: {\n type: \"array\",\n items: {\n type: \"object\",\n properties: {\n name: {\n type: \"string\",\n ui: {\n label: \"Name\",\n description: \"Please fill in your name\",\n placeholder: \"Name\"\n },\n rules: {\n required: true\n }\n },\n email: {\n type: \"string\",\n ui: {\n label: \"Email\"\n },\n rules: {\n required: true,\n email: true\n }\n },\n age: {\n type: \"integer\",\n ui: {\n label: \"Age\"\n }\n },\n adult: {\n type: \"boolean\",\n ui: {\n label: \"Adult\",\n help: {\n show: true,\n text: \"?\",\n content: \"Adults can play games\"\n }\n }\n }\n },\n ui: {\n label: \"User\"\n }\n },\n ui: {\n showLegend: false,\n noLabelSpace: true\n }\n }\n }\n },\n \"6\": {\n type: \"object\",\n properties: {\n user: {\n type: \"array\",\n items: {\n type: \"object\",\n properties: {\n name: {\n type: \"string\",\n ui: {\n label: \"Name\",\n description: \"Please fill in your name\",\n placeholder: \"Name\"\n },\n rules: {\n required: true\n }\n },\n email: {\n type: \"string\",\n ui: {\n label: \"Email\"\n },\n rules: {\n required: true,\n email: true\n }\n },\n age: {\n type: \"integer\",\n ui: {\n label: \"Age\"\n }\n },\n adult: {\n type: \"boolean\",\n ui: {\n label: \"Adult\",\n help: {\n show: true,\n text: \"?\",\n content: \"Adults can play games\"\n }\n }\n }\n }\n },\n ui: {\n showLegend: false,\n noLabelSpace: true,\n widget: \"array-table\",\n widgetConfig: {\n disableCollapse: true\n }\n }\n }\n }\n },\n \"7\": {\n type: \"object\",\n properties: {\n user: {\n type: \"array\",\n items: {\n type: \"object\",\n properties: {\n name: {\n type: \"string\",\n ui: {\n label: \"Name\",\n description: \"Please fill in your name\",\n placeholder: \"Name\"\n },\n rules: {\n required: true\n }\n },\n email: {\n type: \"string\",\n ui: {\n label: \"Email\"\n },\n rules: {\n required: true,\n email: true\n }\n },\n age: {\n type: \"integer\",\n ui: {\n label: \"Age\"\n }\n },\n adult: {\n type: \"boolean\",\n ui: {\n label: \"Adult\",\n help: {\n show: true,\n text: \"?\",\n content: \"Adults can play games\"\n }\n }\n }\n },\n ui: {\n label: \"User\"\n }\n },\n ui: {\n showLegend: false,\n noLabelSpace: true,\n widget: \"array-tabs\"\n }\n }\n }\n },\n \"77\": {\n type: \"object\",\n properties: {\n _line1: {\n type: 'HTML',\n value: '
Basic Information
'\n },\n name: {\n type: \"string\",\n ui: {\n label: \"Name\",\n description: \"Please fill in your name\",\n placeholder: \"Name\"\n }\n },\n email: {\n type: \"string\",\n ui: {\n label: \"Email\"\n }\n },\n _line2: {\n type: 'HTML',\n value: '
Other Information
'\n },\n age: {\n type: \"integer\",\n default: 18,\n ui: {\n label: \"Age\"\n }\n },\n adult: {\n type: \"boolean\",\n ui: {\n label: \"Adult\",\n help: {\n show: true,\n text: \"?\",\n content: \"Adults can play games\"\n }\n }\n }\n }\n },\n \"8\": {\n type: \"object\",\n properties: {\n age: {\n type: \"integer\",\n ui: {\n label: \"Age\",\n description: \"More than 18 years old to continue filling\"\n }\n },\n gameInfo: {\n type: \"object\",\n properties: {\n game: {\n type: \"string\",\n ui: {\n label: \"Like games\",\n description: \"Fill in and unlock\"\n }\n },\n gameAge: {\n type: \"integer\",\n ui: {\n label: \"Game age\",\n disabled: \"dx: !{{$root.gameInfo.game}}\"\n }\n }\n },\n ui: {\n legend: \"Game info\",\n hidden: \"dx: !{{$root.age}} || {{$root.age}} < 18\"\n }\n }\n }\n },\n \"9\": {\n type: \"object\",\n properties: {\n user: {\n type: \"array\",\n items: {\n type: \"object\",\n properties: {\n adult: {\n type: \"boolean\",\n ui: {\n label: \"Adult\",\n help: {\n show: true,\n text: \"?\"\n }\n }\n },\n gameName: {\n type: \"string\",\n ui: {\n label: \"Like games\",\n disabled: \"dx: !{{$root.user[i].adult}}\"\n }\n },\n gameAge: {\n type: \"integer\",\n ui: {\n label: \"Game age\",\n disabled: \"dx: !{{$root.user[i].adult}}\"\n }\n }\n }\n },\n ui: {\n showLegend: false,\n noLabelSpace: true,\n widget: \"array-table\"\n }\n }\n }\n },\n \"10\": {\n type: \"object\",\n properties: {\n province: {\n type: \"string\",\n ui: {\n label: \"Province\",\n widget: \"select\",\n widgetConfig: {\n itemLabelField: \"name\", // 项数据表示label的字段\n itemValueField: \"id\", // 项数据表示value的字段\n enumSourceRemote: {\n // 远程数据源\n remoteUrl: \"/api/test/getProvinces\", // 如果是远程访问，则填写该url\n paramName: \"keyword\" // 请求参数名，默认是keyword\n }\n }\n }\n },\n city: {\n type: \"string\",\n ui: {\n label: \"City\",\n widget: \"select\",\n widgetConfig: {\n itemLabelField: \"name\", // 项数据表示label的字段\n itemValueField: \"id\", // 项数据表示value的字段\n enumSourceRemote: {\n // 远程数据源\n remoteUrl: \"/api/test/getCities\", // 如果是远程访问，则填写该url\n paramName: \"keyword\", // 请求参数名，默认是keyword\n otherParams: {\n provinceId: \"dx: {{$root.province}}\"\n }\n }\n }\n }\n }\n }\n },\n \"101\": {\n type: \"object\",\n properties: {\n isRequired: {\n type: \"boolean\",\n ui: {\n label: \"Required\",\n linkFields: [{\n fieldPath: \"num_1\",\n rules: [\"required\"]\n }, {\n fieldPath: \"num_2\",\n rules: [\"required\"]\n }]\n }\n },\n num_1: {\n type: \"number\",\n ui: {\n description: \"num_1 >= num_2\",\n columns: 6,\n linkFields: [{\n fieldPath: \"num_2\",\n rules: [\"maximum\"]\n }]\n },\n rules: {\n required: {\n value: \"dx: {{$root.isRequired}}\"\n },\n minimum: {\n value: \"dx: {{$root.num_2}} || 0\",\n errMsg: \"num_1 >= num_2\"\n }\n }\n },\n num_2: {\n type: \"number\",\n ui: {\n columns: 6,\n linkFields: [{\n fieldPath: \"num_1\",\n rules: [\"minimum\"]\n }]\n },\n rules: {\n required: {\n value: \"dx: {{$root.isRequired}}\"\n },\n maximum: {\n value: \"dx: {{$root.num_1}} || 0\",\n errMsg: \"num_2 <= num_1\"\n }\n }\n }\n }\n },\n \"11\": {\n type: \"object\",\n properties: {\n startTime: {\n type: \"string\",\n ui: {\n widget: \"date-picker\"\n },\n rules: {\n customRule: [{\n script: \"dx: !{{$root.endTime}} || {{$root.endTime}} >= {{$root.startTime}}\", // 支持dx表达式\n errMsg: \"Start date must be less than or equal to the end date\", // 验证错误信息\n linkItems: [\n // 当触发校验时，同时触发这些关联的项进行校验\n {\n fieldPath: \"endTime\", // 关联项\n customRuleIdx: 0 // 触发该项的自定义验证规则的索引\n }]\n }]\n }\n },\n endTime: {\n type: \"string\",\n ui: {\n widget: \"date-picker\"\n },\n rules: {\n customRule: [{\n script: \"dx: !{{$root.startTime}} || {{$root.endTime}} >= {{$root.startTime}}\", // 支持dx表达式\n errMsg: \"End date must be greater than or equal to the start date\", // 验证错误信息\n linkItems: [\n // 当触发校验时，同时触发这些关联的项进行校验\n {\n fieldPath: \"startTime\", // 关联项\n customRuleIdx: 0 // 触发该项的自定义验证规则的索引\n }]\n }]\n }\n },\n arrayItems: {\n type: \"array\",\n items: {\n type: \"object\",\n properties: {\n startTime: {\n type: \"string\",\n ui: {\n widget: \"date-picker\"\n },\n rules: {\n customRule: [{\n script: \"dx: !{{$root.arrayItems[i].endTime}} || {{$root.arrayItems[i].endTime}} >= {{$root.arrayItems[i].startTime}}\", // 支持dx表达式\n errMsg: \"Start date must be less than or equal to the end date\", // 验证错误信息\n linkItems: [\n // 当触发校验时，同时触发这些关联的项进行校验\n {\n fieldPath: \"arrayItems[i].endTime\", // 关联项\n customRuleIdx: 0 // 触发该项的自定义验证规则的索引\n }]\n }]\n }\n },\n endTime: {\n type: \"string\",\n ui: {\n widget: \"date-picker\"\n },\n rules: {\n customRule: [{\n script: \"dx: !{{$root.arrayItems[i].startTime}} || {{$root.arrayItems[i].endTime}} >= {{$root.arrayItems[i].startTime}}\", // 支持dx表达式\n errMsg: \"End date must be greater than or equal to the start date\", // 验证错误信息\n linkItems: [\n // 当触发校验时，同时触发这些关联的项进行校验\n {\n fieldPath: \"arrayItems[i].startTime\", // 关联项\n customRuleIdx: 0 // 触发该项的自定义验证规则的索引\n }]\n }]\n }\n }\n }\n },\n ui: {\n showLabel: false,\n legend: \"Array item\",\n widget: \"array-table\",\n widgetConfig: {\n collapsed: true\n }\n }\n }\n }\n },\n \"12\": {\n type: \"object\",\n properties: {\n age: {\n type: \"string\",\n ui: {\n placeholder: 'dx: \"Age must be greater than \" + {{$const.ageLimit}}'\n },\n rules: {\n customRule: [{\n script: \"dx: {{$root.age}} > {{$const.ageLimit}}\", // 支持dx表达式\n errMsg: \"Please fill in the correct age\" // 验证错误信息\n }]\n }\n }\n },\n globalConfig: {\n constants: {\n ageLimit: 18\n }\n }\n },\n \"13\": {\n type: \"object\",\n properties: {\n firstname: {\n type: 'string',\n ui: {\n columns: 6\n }\n },\n lastname: {\n type: 'string',\n ui: {\n columns: 6\n }\n },\n fullname: {\n type: 'string',\n valueTemplate: 'dx: {{$root.firstname}} + \" \" +　{{$root.lastname}}',\n ui: {\n columns: 12\n }\n }\n }\n }\n }\n };\n },\n\n\n computed: {\n listOptions: function listOptions() {\n var _this2 = this;\n\n return this.$data.options.map(function (item) {\n return {\n value: item.value,\n label: item.label[_this2.$data.lang]\n };\n });\n },\n i18n: function i18n() {\n return this.$data.i18nData[this.$data.lang];\n }\n },\n\n /* ====================== 事件处理 ====================== */\n\n methods: {\n createEditor: function createEditor() {\n this.$options.editor = window.ace.edit(this.$refs.editor);\n this.$options.editor.$blockScrolling = Infinity;\n },\n templateChange: function templateChange(v) {\n this.$options.editor.setValue(JSON.stringify(this.$data.templates[v], null, 2), 1);\n this.$data.ncformSchema = JSON.parse(this.$options.editor.getValue());\n this.$data.ncformValue = {};\n },\n createForm: function createForm() {\n var value = this.$options.editor.getValue();\n try {\n eval('this.$data.ncformSchema = ' + value);\n this.$data.ncformValue = {};\n } catch (err) {\n alert(this.i18n.notValidJSON);\n throw new Error('createForm Error:' + err);\n }\n },\n getFormData: function getFormData() {\n var _this3 = this;\n\n this.$ncformValidate(\"preview-form\").then(function (res) {\n if (res.result) {\n var data = JSON.stringify(_this3.$data.ncformValue, null, 2);\n alert(data);\n }\n });\n },\n langChange: function langChange() {\n var url = location.pathname + '?lang=' + this.$data.lang;\n window.history.replaceState(\"\", document.title, url);\n }\n }\n};\n\n//# sourceURL=webpack://%5Bname%5D/./src/components/playground/playground.js?D:/daniel_projects/owner/ncform/node_modules/babel-loader/lib"); /***/ }), /***/ "../../node_modules/vue-loader/lib/loaders/templateLoader.js?!./src/components/playground/playground.html?vue&type=template&id=64a6888e&scoped=true&": /*!********************************************************************************************************************************************************************************************************!*\ - !*** D:/daniel/projects/owner/ncform/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./src/components/playground/playground.html?vue&type=template&id=64a6888e&scoped=true& ***! + !*** D:/daniel_projects/owner/ncform/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./src/components/playground/playground.html?vue&type=template&id=64a6888e&scoped=true& ***! \********************************************************************************************************************************************************************************************************/ /*! exports provided: render, staticRenderFns */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"div\",\n { staticClass: \"playground\" },\n [\n _c(\n \"el-row\",\n [\n _c(\n \"el-col\",\n { attrs: { span: 12 } },\n [\n _vm._v(\"\\r\\n 模板：\\r\\n \"),\n _c(\n \"el-select\",\n {\n attrs: { placeholder: \"请选择\" },\n on: { change: _vm.templateChange },\n model: {\n value: _vm.selectVal,\n callback: function($$v) {\n _vm.selectVal = $$v\n },\n expression: \"selectVal\"\n }\n },\n _vm._l(_vm.options, function(item) {\n return _c(\"el-option\", {\n key: item.value,\n attrs: { label: item.label, value: item.value }\n })\n })\n ),\n _vm._v(\" \"),\n _c(\n \"el-button\",\n { attrs: { type: \"primary\" }, on: { click: _vm.createForm } },\n [_vm._v(\"生成表单\")]\n )\n ],\n 1\n ),\n _vm._v(\" \"),\n _c(\n \"el-col\",\n { attrs: { span: 12 } },\n [\n _c(\n \"el-button\",\n { attrs: { type: \"success\" }, on: { click: _vm.getFormData } },\n [_vm._v(\"获取表单数据\")]\n )\n ],\n 1\n )\n ],\n 1\n ),\n _vm._v(\" \"),\n _c(\n \"el-row\",\n [\n _c(\"el-col\", { attrs: { span: 12 } }, [\n _c(\"div\", { staticClass: \"editorArea\" }, [\n _c(\"div\", { ref: \"editor\", staticClass: \"editor\" }, [\n _vm._v(_vm._s(_vm.jsonValue))\n ])\n ])\n ]),\n _vm._v(\" \"),\n _c(\"el-col\", { attrs: { span: 12 } }, [\n _c(\n \"div\",\n { staticClass: \"previewArea\" },\n [\n _c(\"ncform\", {\n attrs: {\n \"form-schema\": _vm.ncformSchema,\n \"form-name\": \"preview-form\"\n },\n model: {\n value: _vm.ncformValue,\n callback: function($$v) {\n _vm.ncformValue = $$v\n },\n expression: \"ncformValue\"\n }\n })\n ],\n 1\n )\n ])\n ],\n 1\n )\n ],\n 1\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://%5Bname%5D/./src/components/playground/playground.html?D:/daniel/projects/owner/ncform/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"div\",\n { staticClass: \"playground\" },\n [\n _c(\n \"el-row\",\n [\n _c(\n \"el-col\",\n { attrs: { span: 12 } },\n [\n _vm._v(\"\\r\\n \" + _vm._s(_vm.i18n.template) + \"：\\r\\n \"),\n _c(\n \"el-select\",\n {\n attrs: { placeholder: \"请选择\" },\n on: { change: _vm.templateChange },\n model: {\n value: _vm.selectVal,\n callback: function($$v) {\n _vm.selectVal = $$v\n },\n expression: \"selectVal\"\n }\n },\n _vm._l(_vm.listOptions, function(item) {\n return _c(\"el-option\", {\n key: item.value,\n attrs: { label: item.label, value: item.value }\n })\n })\n ),\n _vm._v(\" \"),\n _c(\n \"el-button\",\n { attrs: { type: \"primary\" }, on: { click: _vm.createForm } },\n [_vm._v(_vm._s(_vm.i18n.genForm))]\n )\n ],\n 1\n ),\n _vm._v(\" \"),\n _c(\n \"el-col\",\n { attrs: { span: 12 } },\n [\n _c(\n \"el-button\",\n { attrs: { type: \"success\" }, on: { click: _vm.getFormData } },\n [_vm._v(_vm._s(_vm.i18n.getData))]\n ),\n _vm._v(\" \"),\n _c(\n \"el-radio-group\",\n {\n staticStyle: { float: \"right\" },\n on: {\n change: function($event) {\n _vm.langChange()\n }\n },\n model: {\n value: _vm.lang,\n callback: function($$v) {\n _vm.lang = $$v\n },\n expression: \"lang\"\n }\n },\n [\n _c(\"el-radio-button\", { attrs: { label: \"en\" } }, [\n _vm._v(\"English\")\n ]),\n _vm._v(\" \"),\n _c(\n \"el-radio-button\",\n { attrs: { label: \"cn\", value: \"cn\" } },\n [_vm._v(\"中文\")]\n )\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n ),\n _vm._v(\" \"),\n _c(\n \"el-row\",\n [\n _c(\"el-col\", { attrs: { span: 12 } }, [\n _c(\"div\", { staticClass: \"editorArea\" }, [\n _c(\"div\", { ref: \"editor\", staticClass: \"editor\" }, [\n _vm._v(_vm._s(_vm.jsonValue))\n ])\n ])\n ]),\n _vm._v(\" \"),\n _c(\"el-col\", { attrs: { span: 12 } }, [\n _c(\n \"div\",\n { staticClass: \"previewArea\" },\n [\n _c(\"ncform\", {\n attrs: {\n \"form-schema\": _vm.ncformSchema,\n \"form-name\": \"preview-form\"\n },\n model: {\n value: _vm.ncformValue,\n callback: function($$v) {\n _vm.ncformValue = $$v\n },\n expression: \"ncformValue\"\n }\n })\n ],\n 1\n )\n ])\n ],\n 1\n )\n ],\n 1\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://%5Bname%5D/./src/components/playground/playground.html?D:/daniel_projects/owner/ncform/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options"); /***/ }), /***/ "../../node_modules/vue-loader/lib/runtime/componentNormalizer.js": /*!**************************************************************************************************!*\ - !*** D:/daniel/projects/owner/ncform/node_modules/vue-loader/lib/runtime/componentNormalizer.js ***! + !*** D:/daniel_projects/owner/ncform/node_modules/vue-loader/lib/runtime/componentNormalizer.js ***! \**************************************************************************************************/ /*! exports provided: default */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return normalizeComponent; });\n/* globals __VUE_SSR_CONTEXT__ */\n\n// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).\n// This module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle.\n\nfunction normalizeComponent (\n scriptExports,\n render,\n staticRenderFns,\n functionalTemplate,\n injectStyles,\n scopeId,\n moduleIdentifier, /* server only */\n shadowMode /* vue-cli only */\n) {\n // Vue.extend constructor export interop\n var options = typeof scriptExports === 'function'\n ? scriptExports.options\n : scriptExports\n\n // render functions\n if (render) {\n options.render = render\n options.staticRenderFns = staticRenderFns\n options._compiled = true\n }\n\n // functional template\n if (functionalTemplate) {\n options.functional = true\n }\n\n // scopedId\n if (scopeId) {\n options._scopeId = 'data-v-' + scopeId\n }\n\n var hook\n if (moduleIdentifier) { // server build\n hook = function (context) {\n // 2.3 injection\n context =\n context || // cached call\n (this.$vnode && this.$vnode.ssrContext) || // stateful\n (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional\n // 2.2 with runInNewContext: true\n if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\n context = __VUE_SSR_CONTEXT__\n }\n // inject component styles\n if (injectStyles) {\n injectStyles.call(this, context)\n }\n // register component module identifier for async chunk inferrence\n if (context && context._registeredComponents) {\n context._registeredComponents.add(moduleIdentifier)\n }\n }\n // used by ssr in case component is cached and beforeCreate\n // never gets called\n options._ssrRegister = hook\n } else if (injectStyles) {\n hook = shadowMode\n ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }\n : injectStyles\n }\n\n if (hook) {\n if (options.functional) {\n // for template-only hot-reload because in that case the render fn doesn't\n // go through the normalizer\n options._injectStyles = hook\n // register for functioal component in vue file\n var originalRender = options.render\n options.render = function renderWithStyleInjection (h, context) {\n hook.call(context)\n return originalRender(h, context)\n }\n } else {\n // inject component registration as beforeCreate hook\n var existing = options.beforeCreate\n options.beforeCreate = existing\n ? [].concat(existing, hook)\n : [hook]\n }\n }\n\n return {\n exports: scriptExports,\n options: options\n }\n}\n\n\n//# sourceURL=webpack://%5Bname%5D/D:/daniel/projects/owner/ncform/node_modules/vue-loader/lib/runtime/componentNormalizer.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return normalizeComponent; });\n/* globals __VUE_SSR_CONTEXT__ */\n\n// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).\n// This module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle.\n\nfunction normalizeComponent (\n scriptExports,\n render,\n staticRenderFns,\n functionalTemplate,\n injectStyles,\n scopeId,\n moduleIdentifier, /* server only */\n shadowMode /* vue-cli only */\n) {\n // Vue.extend constructor export interop\n var options = typeof scriptExports === 'function'\n ? scriptExports.options\n : scriptExports\n\n // render functions\n if (render) {\n options.render = render\n options.staticRenderFns = staticRenderFns\n options._compiled = true\n }\n\n // functional template\n if (functionalTemplate) {\n options.functional = true\n }\n\n // scopedId\n if (scopeId) {\n options._scopeId = 'data-v-' + scopeId\n }\n\n var hook\n if (moduleIdentifier) { // server build\n hook = function (context) {\n // 2.3 injection\n context =\n context || // cached call\n (this.$vnode && this.$vnode.ssrContext) || // stateful\n (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional\n // 2.2 with runInNewContext: true\n if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\n context = __VUE_SSR_CONTEXT__\n }\n // inject component styles\n if (injectStyles) {\n injectStyles.call(this, context)\n }\n // register component module identifier for async chunk inferrence\n if (context && context._registeredComponents) {\n context._registeredComponents.add(moduleIdentifier)\n }\n }\n // used by ssr in case component is cached and beforeCreate\n // never gets called\n options._ssrRegister = hook\n } else if (injectStyles) {\n hook = shadowMode\n ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }\n : injectStyles\n }\n\n if (hook) {\n if (options.functional) {\n // for template-only hot-reload because in that case the render fn doesn't\n // go through the normalizer\n options._injectStyles = hook\n // register for functioal component in vue file\n var originalRender = options.render\n options.render = function renderWithStyleInjection (h, context) {\n hook.call(context)\n return originalRender(h, context)\n }\n } else {\n // inject component registration as beforeCreate hook\n var existing = options.beforeCreate\n options.beforeCreate = existing\n ? [].concat(existing, hook)\n : [hook]\n }\n }\n\n return {\n exports: scriptExports,\n options: options\n }\n}\n\n\n//# sourceURL=webpack://%5Bname%5D/D:/daniel_projects/owner/ncform/node_modules/vue-loader/lib/runtime/componentNormalizer.js?"); /***/ }), /***/ "./node_modules/css-loader/index.js!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!./src/components/playground/playground.css?vue&type=style&index=0&id=64a6888e&scoped=true&lang=css&": /*!****************************************************************************************************************************************************************************************************************************!*\ - !*** ./node_modules/css-loader!D:/daniel/projects/owner/ncform/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./src/components/playground/playground.css?vue&type=style&index=0&id=64a6888e&scoped=true&lang=css& ***! + !*** ./node_modules/css-loader!D:/daniel_projects/owner/ncform/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./src/components/playground/playground.css?vue&type=style&index=0&id=64a6888e&scoped=true&lang=css& ***! \****************************************************************************************************************************************************************************************************************************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { -eval("exports = module.exports = __webpack_require__(/*! ../../../node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")();\n// imports\n\n\n// module\nexports.push([module.i, \"\\n.playground[data-v-64a6888e] {\\r\\n padding: 8px;\\n}\\n.editorArea[data-v-64a6888e]{\\r\\n margin: 8px 0 0;\\r\\n border: 1px solid #d8dce5;\\r\\n border-left: none;\\n}\\n.previewArea[data-v-64a6888e]{\\r\\n margin: 8px 0 0;\\r\\n /* min-height: 650px; */\\n}\\n.editor[data-v-64a6888e]{\\r\\n position: relative;\\r\\n width: 100%;\\r\\n min-height: 600px;\\n}\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack://%5Bname%5D/./src/components/playground/playground.css?./node_modules/css-loader!D:/daniel/projects/owner/ncform/node_modules/vue-loader/lib/loaders/stylePostLoader.js"); +eval("exports = module.exports = __webpack_require__(/*! ../../../node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")();\n// imports\n\n\n// module\nexports.push([module.i, \"\\n.playground[data-v-64a6888e] {\\r\\n padding: 8px;\\n}\\n.editorArea[data-v-64a6888e]{\\r\\n margin: 8px 0 0;\\r\\n border: 1px solid #d8dce5;\\r\\n border-left: none;\\n}\\n.previewArea[data-v-64a6888e]{\\r\\n margin: 8px 0 0;\\r\\n /* min-height: 650px; */\\n}\\n.editor[data-v-64a6888e]{\\r\\n position: relative;\\r\\n width: 100%;\\r\\n min-height: 600px;\\n}\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack://%5Bname%5D/./src/components/playground/playground.css?./node_modules/css-loader!D:/daniel_projects/owner/ncform/node_modules/vue-loader/lib/loaders/stylePostLoader.js"); /***/ }), @@ -167,12 +167,12 @@ eval("/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAu /***/ "./node_modules/vue-style-loader/index.js!./node_modules/css-loader/index.js!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!./src/components/playground/playground.css?vue&type=style&index=0&id=64a6888e&scoped=true&lang=css&": /*!************************************************************************************************************************************************************************************************************************************************************!*\ - !*** ./node_modules/vue-style-loader!./node_modules/css-loader!D:/daniel/projects/owner/ncform/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./src/components/playground/playground.css?vue&type=style&index=0&id=64a6888e&scoped=true&lang=css& ***! + !*** ./node_modules/vue-style-loader!./node_modules/css-loader!D:/daniel_projects/owner/ncform/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./src/components/playground/playground.css?vue&type=style&index=0&id=64a6888e&scoped=true&lang=css& ***! \************************************************************************************************************************************************************************************************************************************************************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { -eval("// style-loader: Adds some css to the DOM by adding a -

ncform standard components

+
+

+ ncform standard components -
-
-
    -
  • -
    Controls
    -
      -
    • - {{item.name}} -
      • - -
    -
    • -
  • -
    Layouts
    -
      -
    • - {{item.name}} -
      • - -
    -
    • -
-
-
- +
+ + +
+ +

+ +
+
+
    +
  • +
    Controls
    +
      +
    • + {{item.name}} +
      • + +
    +
    • +
  • +
    Layouts +
    +
      +
    • + {{item.name}} +
      • + +
    +
    • +
+
+
+ +
+ + diff --git a/ncform-theme-elementui/layout-comps/array-table.html b/ncform-theme-elementui/layout-comps/array-table.html index 468930e..20961c9 100644 --- a/ncform-theme-elementui/layout-comps/array-table.html +++ b/ncform-theme-elementui/layout-comps/array-table.html @@ -1,218 +1,286 @@ + + + array-tables widget - - - array-tables widget + - + + + - - - - - - - -
-
-

{{item.title}}

-
-
- - value: {{item.schema.value}} -
-
- 
{{JSON.stringify(originFormSchemas[idx].schema.properties, null, 2)}}
-
-
- 
{{item.detail}}
+ + +
+
+

{{ item.title }}

+
+
+ + value: {{ item.schema.value }} +
+
+ 
{{
+              JSON.stringify(originFormSchemas[idx].schema.properties, null, 2)
+            }}
+
+
+ 
{{ item.detail }}
+
-
- - - - - - - - + + + + + + + + - - + Vue.use(vueNcform, { + extComponents: { + input: input.default, + object: object.default, + arrayTable: arrayTable.default + } + }); + + let formSchemas = [ + { + title: { + cn: '默认状态', + en: 'Default' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widget: 'array-table' + } + } + } + } + }, + { + title: { + cn: '[属性] disableAdd: 是否禁止添加项', + en: '[ATTR] disableAdd: Whether to disable the addition of items' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widget: 'array-table', + widgetConfig: { + disableAdd: true + } + } + } + } + } + }, + { + title: { + cn: '[属性] disableDel: 是否禁止删除项', + en: '[ATTR] disableDel: whether to disable item deletion' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widget: 'array-table', + widgetConfig: { + disableDel: true + } + } + } + } + } + }, + { + title: { + cn: '[属性] disableReorder: 是否禁止排序', + en: '[ATTR] disableReorder: whether to disable sorting' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widget: 'array-table', + widgetConfig: { + disableReorder: true + } + } + } + } + } + }, + { + title: { + cn: '[属性] disableCollapse: 是否禁止折叠', + en: '[ATTR] disableCollapse: whether to disable collapse' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widget: 'array-table', + widgetConfig: { + disableCollapse: true + } + } + } + } + } + }, + { + title: { + cn: '[属性] collapsed: 是否默认折叠，默认是false', + en: + '[ATTR] collapsed: whether to collapse by default. default is false' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widget: 'array-table', + widgetConfig: { + collapsed: true + } + } + } + } + } + }, + + { + title: { + cn: '[属性] addTxt: 增加按钮的显示文字。默认值Add', + en: + '[ATTR] addTxt: display text of the add item button. Default is "Add"' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widget: 'array-table', + widgetConfig: { + addTxt: 'Add' + } + } + } + } + } + }, + { + title: { + cn: '[属性] delAllTxt: 删除全部按钮的显示文字。默认值Del All', + en: + '[ATTR] delAllTxt: display text of delete all button. Default is "Del All"' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widget: 'array-table', + widgetConfig: { + delAllTxt: 'Delete All' + } + } + } + } + } + } + ]; + + // Bootstrap the app + new Vue({ + el: '#demo', + data: { + formSchemas: getFormSchemas(), + originFormSchemas: getFormSchemas() + } + }); + + function getFormSchemas() { + return formSchemas.map(item => ({ + title: item.title[lang], + schema: item.schema, + detail: item.detail ? item.detail[lang] : '' + })); + } + + diff --git a/ncform-theme-elementui/layout-comps/array-tabs.html b/ncform-theme-elementui/layout-comps/array-tabs.html index 07d10b5..2d43331 100644 --- a/ncform-theme-elementui/layout-comps/array-tabs.html +++ b/ncform-theme-elementui/layout-comps/array-tabs.html @@ -1,186 +1,247 @@ + + + array-tabs widget - - - array-tabs widget + - + + + - - - - - - - -
-
-

{{item.title}}

-
-
- - value: {{item.schema.value}} -
-
- 
{{JSON.stringify(originFormSchemas[idx].schema.properties, null, 2)}}
-
-
- 
{{item.detail}}
+ + +
+
+

{{ item.title }}

+
+
+ + value: {{ item.schema.value }} +
+
+ 
{{
+              JSON.stringify(originFormSchemas[idx].schema.properties, null, 2)
+            }}
+
+
+ 
{{ item.detail }}
+
-
- - - - - - - - + + + + + + + + - - - + + diff --git a/ncform-theme-elementui/layout-comps/array.html b/ncform-theme-elementui/layout-comps/array.html index e0d49f3..0483a83 100644 --- a/ncform-theme-elementui/layout-comps/array.html +++ b/ncform-theme-elementui/layout-comps/array.html @@ -1,246 +1,321 @@ + + + array widget - - - array widget + - + + + - - - - - - - -
-
-

{{item.title}}

-
-
- - value: {{item.schema.value}} -
-
- 
{{JSON.stringify(originFormSchemas[idx].schema.properties, null, 2)}}
-
-
- 
{{item.detail}}
+ + +
+
+

{{ item.title }}

+
+
+ + value: {{ item.schema.value }} +
+
+ 
{{
+              JSON.stringify(originFormSchemas[idx].schema.properties, null, 2)
+            }}
+
+
+ 
{{ item.detail }}
+
-
- - - - - - - - + + + + + + + + - - + Vue.use(vueNcform, { + extComponents: { + input: input.default, + object: object.default, + array: array.default + } + }); + + let formSchemas = [ + { + title: { + cn: '默认状态', + en: 'Default' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + } + } + } + } + }, + { + title: { + cn: '[属性] disableAdd: 是否禁止添加项', + en: '[ATTR] disableAdd: Whether to disable the addition of items' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widgetConfig: { + disableAdd: true + } + } + } + } + } + }, + { + title: { + cn: '[属性] disableDel: 是否禁止删除项', + en: '[ATTR] disableDel: whether to disable item deletion' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widgetConfig: { + disableDel: true + } + } + } + } + } + }, + { + title: { + cn: '[属性] disableReorder: 是否禁止排序', + en: '[ATTR] disableReorder: whether to disable sorting' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widgetConfig: { + disableReorder: true + } + } + } + } + } + }, + { + title: { + cn: '[属性] disableCollapse: 是否禁止折叠', + en: '[ATTR] disableCollapse: whether to disable collapse' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widgetConfig: { + disableCollapse: true + } + } + } + } + } + }, + { + title: { + cn: '[属性] collapsed: 是否默认折叠，默认是false', + en: + '[ATTR] collapsed: whether to collapse by default. default is false' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widgetConfig: { + collapsed: true + } + } + } + } + } + }, + { + title: { + cn: '[属性] disableItemCollapse: 是否禁止项折叠。默认是false', + en: + '[ATTR] disableItemCollapse: whether to disable items collapse by default. default is false' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widgetConfig: { + disableItemCollapse: true + } + } + } + } + } + }, + { + title: { + cn: '[属性] itemCollapse: 项是否默认折叠。默认是false', + en: + '[ATTR] itemCollapse: whether the item is collapsed by default. default is false' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widgetConfig: { + itemCollapse: true + } + } + } + } + } + }, + { + title: { + cn: '[属性] addTxt: 增加按钮的显示文字。默认值Add', + en: + '[ATTR] addTxt: display text of the add item button. Default is "Add"' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widgetConfig: { + addTxt: 'Add' + } + } + } + } + } + }, + { + title: { + cn: '[属性] delAllTxt: 删除全部按钮的显示文字。默认值Del All', + en: + '[ATTR] delAllTxt: display text of delete all button. Default is "Del All"' + }, + schema: { + type: 'object', + properties: { + user: { + type: 'array', + items: { + type: 'string' + }, + ui: { + widgetConfig: { + delAllTxt: 'Delete All' + } + } + } + } + } + } + ]; + + // Bootstrap the app + new Vue({ + el: '#demo', + data: { + formSchemas: getFormSchemas(), + originFormSchemas: getFormSchemas() + } + }); + + function getFormSchemas() { + return formSchemas.map(item => ({ + title: item.title[lang], + schema: item.schema, + detail: item.detail ? item.detail[lang] : '' + })); + } + + diff --git a/ncform-theme-elementui/layout-comps/object.html b/ncform-theme-elementui/layout-comps/object.html index b9569bb..ad489b8 100644 --- a/ncform-theme-elementui/layout-comps/object.html +++ b/ncform-theme-elementui/layout-comps/object.html @@ -1,233 +1,288 @@ + + + object widget - - - object widget + - + + + - - - - - - - -
-
-

{{item.title}}

-
-
- - value: {{item.schema.value}} -
-
- 
{{JSON.stringify(originFormSchemas[idx].schema.properties, null, 2)}}
-
-
- 
{{item.detail}}
+ + +
+
+

{{ item.title }}

+
+
+ + value: {{ item.schema.value }} +
+
+ 
{{ JSON.stringify(originFormSchemas[idx].schema.properties, null, 2) }}
+
+
+ 
{{ item.detail }}
+
-
- - - - - - - + + + + + + + - - + // Bootstrap the app + new Vue({ + el: '#demo', + data: { + formSchemas: getFormSchemas(), + originFormSchemas: getFormSchemas() + } + }); + function getFormSchemas() { + return formSchemas.map(item => ({ + title: item.title[lang], + schema: item.schema, + detail: item.detail ? item.detail[lang] : '' + })); + } + +