diff --git a/ncform-show/assets/playground.js b/ncform-show/assets/playground.js
index 19bb9ad..103f661 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 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 moreComp: 'See more widgets'\n },\n cn: {\n template: '模板',\n genForm: '生成表单',\n getData: '获取表单数据',\n notValidJSON: '不是有效的JSON数据',\n moreComp: '看看更多的组件'\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 window.location.reload();\n }\n }\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 moreComp: 'See more widgets'\n },\n cn: {\n template: '模板',\n genForm: '生成表单',\n getData: '获取表单数据',\n notValidJSON: '不是有效的JSON数据',\n moreComp: '看看更多的组件'\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 window.location.reload();\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 _c(\n \"a\",\n {\n staticClass: \"header-logo-invertocat\",\n staticStyle: { position: \"relative\", top: \"9px\" },\n attrs: {\n target: \"_blank\",\n href: \"https://github.com/ncform/ncform\"\n }\n },\n [\n _c(\n \"svg\",\n {\n staticClass: \"octicon octicon-mark-github\",\n attrs: {\n height: \"32\",\n viewBox: \"0 0 16 16\",\n version: \"1.1\",\n width: \"32\",\n \"aria-hidden\": \"true\"\n }\n },\n [\n _c(\"path\", {\n attrs: {\n \"fill-rule\": \"evenodd\",\n d:\n \"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z\"\n }\n })\n ]\n )\n ]\n ),\n _vm._v(\n \"\\r\\n\\r\\n \" + _vm._s(_vm.i18n.template) + \"：\\r\\n \"\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 _vm._v(\" \"),\n _c(\n \"a\",\n {\n staticStyle: {\n float: \"right\",\n position: \"relative\",\n right: \"10px\",\n top: \"20px\"\n },\n attrs: {\n href:\n \"https://ncform.github.io/ncform/ncform-theme-elementui/index.html\",\n target: \"_blank\"\n }\n },\n [_vm._v(_vm._s(_vm.i18n.moreComp))]\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 _c(\n \"a\",\n {\n staticClass: \"header-logo-invertocat\",\n staticStyle: { position: \"relative\", top: \"9px\" },\n attrs: {\n target: \"_blank\",\n href: \"https://github.com/ncform/ncform\"\n }\n },\n [\n _c(\n \"svg\",\n {\n staticClass: \"octicon octicon-mark-github\",\n attrs: {\n height: \"32\",\n viewBox: \"0 0 16 16\",\n version: \"1.1\",\n width: \"32\",\n \"aria-hidden\": \"true\"\n }\n },\n [\n _c(\"path\", {\n attrs: {\n \"fill-rule\": \"evenodd\",\n d:\n \"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z\"\n }\n })\n ]\n )\n ]\n ),\n _vm._v(\n \"\\r\\n\\r\\n \" + _vm._s(_vm.i18n.template) + \"：\\r\\n \"\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 _vm._v(\" \"),\n _c(\n \"a\",\n {\n staticStyle: {\n float: \"right\",\n position: \"relative\",\n right: \"10px\",\n top: \"20px\"\n },\n attrs: {\n href:\n \"https://ncform.github.io/ncform/ncform-theme-elementui/index.html\",\n target: \"_blank\"\n }\n },\n [_vm._v(_vm._s(_vm.i18n.moreComp))]\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
+
+
+
diff --git a/ncform-theme-elementui/layout-comps/array-table.html b/ncform-theme-elementui/layout-comps/array-table.html
index ad190e3..9771e2b 100644
--- a/ncform-theme-elementui/layout-comps/array-table.html
+++ b/ncform-theme-elementui/layout-comps/array-table.html
@@ -11,6 +11,16 @@
rel="stylesheet"
href="../assets/index.css"
/>
+
+
diff --git a/ncform-theme-elementui/layout-comps/array-tabs.html b/ncform-theme-elementui/layout-comps/array-tabs.html
index 1315a9f..1844036 100644
--- a/ncform-theme-elementui/layout-comps/array-tabs.html
+++ b/ncform-theme-elementui/layout-comps/array-tabs.html
@@ -11,6 +11,16 @@
rel="stylesheet"
href="../assets/index.css"
/>
+
+
diff --git a/ncform-theme-elementui/layout-comps/array.html b/ncform-theme-elementui/layout-comps/array.html
index b783430..16001c2 100644
--- a/ncform-theme-elementui/layout-comps/array.html
+++ b/ncform-theme-elementui/layout-comps/array.html
@@ -11,6 +11,16 @@
rel="stylesheet"
href="../assets/index.css"
/>
+
+
diff --git a/ncform-theme-elementui/layout-comps/object.html b/ncform-theme-elementui/layout-comps/object.html
index 0cda719..f92980b 100644
--- a/ncform-theme-elementui/layout-comps/object.html
+++ b/ncform-theme-elementui/layout-comps/object.html
@@ -8,6 +8,16 @@
+
+