From 39f7e90ae4df58e2a3548be3336ec06488e66ff6 Mon Sep 17 00:00:00 2001 From: Gcaufy Date: Sat, 5 Dec 2020 12:43:54 +0800 Subject: [PATCH] =?UTF-8?q?chore(playground):=20=E4=BC=98=E5=8C=96=20templ?= =?UTF-8?q?ates=20=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../fixtures/adv-array-item-interaction.json | 45 + .../fixtures/adv-check-association.json | 72 ++ .../fixtures/adv-control-interaction.json | 35 + .../playground/fixtures/adv-custom-rule.json | 102 ++ .../playground/fixtures/adv-follow.json | 24 + .../fixtures/adv-global-constant.json | 24 + .../fixtures/adv-selector-interaction.json | 38 + .../playground/fixtures/adv-temp-value.json | 30 + .../playground/fixtures/basic-array-type.json | 61 + .../playground/fixtures/basic-label-left.json | 47 + .../fixtures/basic-media-preview.json | 56 + .../fixtures/basic-multi-columns.json | 47 + .../fixtures/basic-rich-display.json | 37 + .../playground/fixtures/basic-separator.json | 45 + .../fixtures/basic-table-array.json | 60 + .../playground/fixtures/basic-tabs-array.json | 60 + .../fixtures/basic-verification-rule.json | 47 + .../components/playground/fixtures/basic.json | 17 + .../components/playground/fixtures/index.js | 138 +++ .../src/components/playground/playground.html | 2 +- .../src/components/playground/playground.js | 1035 +---------------- 21 files changed, 1018 insertions(+), 1004 deletions(-) create mode 100644 packages/ncform-show/src/components/playground/fixtures/adv-array-item-interaction.json create mode 100644 packages/ncform-show/src/components/playground/fixtures/adv-check-association.json create mode 100644 packages/ncform-show/src/components/playground/fixtures/adv-control-interaction.json create mode 100644 packages/ncform-show/src/components/playground/fixtures/adv-custom-rule.json create mode 100644 packages/ncform-show/src/components/playground/fixtures/adv-follow.json create mode 100644 packages/ncform-show/src/components/playground/fixtures/adv-global-constant.json create mode 100644 packages/ncform-show/src/components/playground/fixtures/adv-selector-interaction.json create mode 100644 packages/ncform-show/src/components/playground/fixtures/adv-temp-value.json create mode 100644 packages/ncform-show/src/components/playground/fixtures/basic-array-type.json create mode 100644 packages/ncform-show/src/components/playground/fixtures/basic-label-left.json create mode 100644 packages/ncform-show/src/components/playground/fixtures/basic-media-preview.json create mode 100644 packages/ncform-show/src/components/playground/fixtures/basic-multi-columns.json create mode 100644 packages/ncform-show/src/components/playground/fixtures/basic-rich-display.json create mode 100644 packages/ncform-show/src/components/playground/fixtures/basic-separator.json create mode 100644 packages/ncform-show/src/components/playground/fixtures/basic-table-array.json create mode 100644 packages/ncform-show/src/components/playground/fixtures/basic-tabs-array.json create mode 100644 packages/ncform-show/src/components/playground/fixtures/basic-verification-rule.json create mode 100644 packages/ncform-show/src/components/playground/fixtures/basic.json create mode 100644 packages/ncform-show/src/components/playground/fixtures/index.js diff --git a/packages/ncform-show/src/components/playground/fixtures/adv-array-item-interaction.json b/packages/ncform-show/src/components/playground/fixtures/adv-array-item-interaction.json new file mode 100644 index 0000000..2197acc --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/adv-array-item-interaction.json @@ -0,0 +1,45 @@ +{ + "type": "object", + "properties": { + "user": { + "type": "array", + "items": { + "type": "object", + "properties": { + "adult": { + "type": "boolean", + "ui": { + "label": "Adult", + "help": { + "show": true, + "text": "?" + } + } + }, + "gameName": { + "type": "string", + "ui": { + "label": "Like games", + "disabled": "dx: !{{$root.user[i].adult}}" + } + }, + "gameAge": { + "type": "integer", + "ui": { + "label": "Game age", + "disabled": "dx: !{{$root.user[i].adult}}" + } + } + } + }, + "ui": { + "showLegend": false, + "noLabelSpace": true, + "widget": "array-table", + "widgetConfig": { + "showOneIfEmpty": true + } + } + } + } +} \ No newline at end of file diff --git a/packages/ncform-show/src/components/playground/fixtures/adv-check-association.json b/packages/ncform-show/src/components/playground/fixtures/adv-check-association.json new file mode 100644 index 0000000..47143a9 --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/adv-check-association.json @@ -0,0 +1,72 @@ +{ + "type": "object", + "properties": { + "isRequired": { + "type": "boolean", + "ui": { + "label": "Required", + "linkFields": [ + { + "fieldPath": "num_1", + "rules": [ + "required" + ] + }, + { + "fieldPath": "num_2", + "rules": [ + "required" + ] + } + ] + } + }, + "num_1": { + "type": "number", + "ui": { + "description": "num_1 >= num_2", + "columns": 6, + "linkFields": [ + { + "fieldPath": "num_2", + "rules": [ + "maximum" + ] + } + ] + }, + "rules": { + "required": { + "value": "dx: {{$root.isRequired}}" + }, + "minimum": { + "value": "dx: {{$root.num_2}} || 0", + "errMsg": "num_1 >= num_2" + } + } + }, + "num_2": { + "type": "number", + "ui": { + "columns": 6, + "linkFields": [ + { + "fieldPath": "num_1", + "rules": [ + "minimum" + ] + } + ] + }, + "rules": { + "required": { + "value": "dx: {{$root.isRequired}}" + }, + "maximum": { + "value": "dx: {{$root.num_1}} || 0", + "errMsg": "num_2 <= num_1" + } + } + } + } +} \ No newline at end of file diff --git a/packages/ncform-show/src/components/playground/fixtures/adv-control-interaction.json b/packages/ncform-show/src/components/playground/fixtures/adv-control-interaction.json new file mode 100644 index 0000000..2c11480 --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/adv-control-interaction.json @@ -0,0 +1,35 @@ +{ + "type": "object", + "properties": { + "age": { + "type": "integer", + "ui": { + "label": "Age", + "description": "More than 18 years old to continue filling" + } + }, + "gameInfo": { + "type": "object", + "properties": { + "game": { + "type": "string", + "ui": { + "label": "Like games", + "description": "Fill in and unlock" + } + }, + "gameAge": { + "type": "integer", + "ui": { + "label": "Game age", + "disabled": "dx: !{{$root.gameInfo.game}}" + } + } + }, + "ui": { + "legend": "Game info", + "hidden": "dx: !{{$root.age}} || {{$root.age}} < 18" + } + } + } +} \ No newline at end of file diff --git a/packages/ncform-show/src/components/playground/fixtures/adv-custom-rule.json b/packages/ncform-show/src/components/playground/fixtures/adv-custom-rule.json new file mode 100644 index 0000000..d0e1dca --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/adv-custom-rule.json @@ -0,0 +1,102 @@ +{ + "type": "object", + "properties": { + "startTime": { + "type": "string", + "ui": { + "widget": "date-picker" + }, + "rules": { + "customRule": [ + { + "script": "dx: !{{$root.endTime}} || {{$root.endTime}} >= {{$root.startTime}}", + "errMsg": "Start date must be less than or equal to the end date", + "linkItems": [ + { + "fieldPath": "endTime", + "customRuleIdx": 0 + } + ] + } + ] + } + }, + "endTime": { + "type": "string", + "ui": { + "widget": "date-picker" + }, + "rules": { + "customRule": [ + { + "script": "dx: !{{$root.startTime}} || {{$root.endTime}} >= {{$root.startTime}}", + "errMsg": "End date must be greater than or equal to the start date", + "linkItems": [ + { + "fieldPath": "startTime", + "customRuleIdx": 0 + } + ] + } + ] + } + }, + "arrayItems": { + "type": "array", + "items": { + "type": "object", + "properties": { + "startTime": { + "type": "string", + "ui": { + "widget": "date-picker" + }, + "rules": { + "customRule": [ + { + "script": "dx: !{{$root.arrayItems[i].endTime}} || {{$root.arrayItems[i].endTime}} >= {{$root.arrayItems[i].startTime}}", + "errMsg": "Start date must be less than or equal to the end date", + "linkItems": [ + { + "fieldPath": "arrayItems[i].endTime", + "customRuleIdx": 0 + } + ] + } + ] + } + }, + "endTime": { + "type": "string", + "ui": { + "widget": "date-picker" + }, + "rules": { + "customRule": [ + { + "script": "dx: !{{$root.arrayItems[i].startTime}} || {{$root.arrayItems[i].endTime}} >= {{$root.arrayItems[i].startTime}}", + "errMsg": "End date must be greater than or equal to the start date", + "linkItems": [ + { + "fieldPath": "arrayItems[i].startTime", + "customRuleIdx": 0 + } + ] + } + ] + } + } + } + }, + "ui": { + "showLabel": false, + "legend": "Array item", + "widget": "array-table", + "widgetConfig": { + "collapsed": false, + "showOneIfEmpty": true + } + } + } + } +} \ No newline at end of file diff --git a/packages/ncform-show/src/components/playground/fixtures/adv-follow.json b/packages/ncform-show/src/components/playground/fixtures/adv-follow.json new file mode 100644 index 0000000..2966280 --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/adv-follow.json @@ -0,0 +1,24 @@ +{ + "type": "object", + "properties": { + "firstname": { + "type": "string", + "ui": { + "columns": 6 + } + }, + "lastname": { + "type": "string", + "ui": { + "columns": 6 + } + }, + "fullname": { + "type": "string", + "valueTemplate": "dx: {{$root.firstname}} + \" \" +　{{$root.lastname}}", + "ui": { + "columns": 12 + } + } + } +} \ No newline at end of file diff --git a/packages/ncform-show/src/components/playground/fixtures/adv-global-constant.json b/packages/ncform-show/src/components/playground/fixtures/adv-global-constant.json new file mode 100644 index 0000000..28a0402 --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/adv-global-constant.json @@ -0,0 +1,24 @@ +{ + "type": "object", + "properties": { + "age": { + "type": "string", + "ui": { + "placeholder": "dx: \"Age must be greater than \" + {{$const.ageLimit}}" + }, + "rules": { + "customRule": [ + { + "script": "dx: {{$root.age}} > {{$const.ageLimit}}", + "errMsg": "Please fill in the correct age" + } + ] + } + } + }, + "globalConfig": { + "constants": { + "ageLimit": 18 + } + } +} \ No newline at end of file diff --git a/packages/ncform-show/src/components/playground/fixtures/adv-selector-interaction.json b/packages/ncform-show/src/components/playground/fixtures/adv-selector-interaction.json new file mode 100644 index 0000000..e264522 --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/adv-selector-interaction.json @@ -0,0 +1,38 @@ +{ + "type": "object", + "properties": { + "province": { + "type": "string", + "ui": { + "label": "Province", + "widget": "select", + "widgetConfig": { + "itemLabelField": "name", + "itemValueField": "id", + "enumSourceRemote": { + "remoteUrl": "/api/test/getProvinces", + "paramName": "keyword" + } + } + } + }, + "city": { + "type": "string", + "ui": { + "label": "City", + "widget": "select", + "widgetConfig": { + "itemLabelField": "name", + "itemValueField": "id", + "enumSourceRemote": { + "remoteUrl": "/api/test/getCities", + "paramName": "keyword", + "otherParams": { + "provinceId": "dx: {{$root.province}}" + } + } + } + } + } + } +} \ No newline at end of file diff --git a/packages/ncform-show/src/components/playground/fixtures/adv-temp-value.json b/packages/ncform-show/src/components/playground/fixtures/adv-temp-value.json new file mode 100644 index 0000000..c21e6fd --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/adv-temp-value.json @@ -0,0 +1,30 @@ +{ + "type": "object", + "properties": { + "item": { + "type": "string", + "ui": { + "description": "Currently only select, radio, checkbox supports this feature.", + "widget": "select", + "widgetConfig": { + "itemDataKey": "selectedItem", + "enumSource": [ + { + "value": "1", + "label": "ncform", + "desc": "ncform is a very nice configuration generation way to develop forms" + }, + { + "value": "2", + "label": "daniel", + "desc": "Daniel is the author of ncform" + } + ] + } + } + }, + "desc": { + "valueTemplate": "dx: {{$temp.selectedItem.desc}} || \"\"" + } + } +} \ No newline at end of file diff --git a/packages/ncform-show/src/components/playground/fixtures/basic-array-type.json b/packages/ncform-show/src/components/playground/fixtures/basic-array-type.json new file mode 100644 index 0000000..cf2fc2f --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/basic-array-type.json @@ -0,0 +1,61 @@ +{ + "type": "object", + "properties": { + "user": { + "type": "array", + "items": { + "type": "object", + "properties": { + "name": { + "type": "string", + "ui": { + "label": "Name", + "description": "Please fill in your name", + "placeholder": "Name" + }, + "rules": { + "required": true + } + }, + "email": { + "type": "string", + "ui": { + "label": "Email" + }, + "rules": { + "required": true, + "email": true + } + }, + "age": { + "type": "integer", + "ui": { + "label": "Age" + } + }, + "adult": { + "type": "boolean", + "ui": { + "label": "Adult", + "help": { + "show": true, + "text": "?", + "content": "Adults can play games" + } + } + } + }, + "ui": { + "label": "User" + } + }, + "ui": { + "showLegend": false, + "noLabelSpace": true, + "widgetConfig": { + "showOneIfEmpty": true + } + } + } + } +} \ No newline at end of file diff --git a/packages/ncform-show/src/components/playground/fixtures/basic-label-left.json b/packages/ncform-show/src/components/playground/fixtures/basic-label-left.json new file mode 100644 index 0000000..23674ae --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/basic-label-left.json @@ -0,0 +1,47 @@ +{ + "type": "object", + "properties": { + "firstname": { + "type": "string", + "ui": { + "label": "Name", + "placeholder": "First name" + } + }, + "lastname": { + "type": "string", + "ui": { + "showLabel": false, + "placeholder": "Last name" + } + }, + "email": { + "type": "string", + "ui": { + "label": "Email" + } + }, + "age": { + "type": "integer", + "ui": { + "label": "Age" + } + }, + "adult": { + "type": "boolean", + "ui": { + "label": "Adult", + "help": { + "show": true, + "text": "?", + "content": "Adults can play games" + } + } + } + }, + "ui": { + "widgetConfig": { + "layout": "h" + } + } +} \ No newline at end of file diff --git a/packages/ncform-show/src/components/playground/fixtures/basic-media-preview.json b/packages/ncform-show/src/components/playground/fixtures/basic-media-preview.json new file mode 100644 index 0000000..60dd1de --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/basic-media-preview.json @@ -0,0 +1,56 @@ +{ + "type": "object", + "properties": { + "image": { + "type": "string", + "default": "https://upload-images.jianshu.io/upload_images/2195795-e3c500e4b7d17b2c.png?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240", + "ui": { + "label": "Image", + "columns": 6, + "preview": { + "type": "image", + "value": "dx: {{$self}}", + "clearable": true, + "outward": { + "width": 150, + "height": 150, + "shape": "circle" + } + } + } + }, + "video": { + "type": "string", + "default": "https://www.w3schools.com/html/mov_bbb.mp4", + "ui": { + "label": "Video", + "columns": 6, + "preview": { + "type": "video" + } + } + }, + "audio": { + "type": "string", + "default": "https://www.w3schools.com/html/mov_bbb.mp4", + "ui": { + "label": "Audio", + "columns": 6, + "preview": { + "type": "audio" + } + } + }, + "link": { + "type": "string", + "default": "https://www.baidu.com", + "ui": { + "label": "Link", + "columns": 6, + "preview": { + "type": "link" + } + } + } + } +} \ No newline at end of file diff --git a/packages/ncform-show/src/components/playground/fixtures/basic-multi-columns.json b/packages/ncform-show/src/components/playground/fixtures/basic-multi-columns.json new file mode 100644 index 0000000..3ce0fe5 --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/basic-multi-columns.json @@ -0,0 +1,47 @@ +{ + "type": "object", + "properties": { + "firstname": { + "type": "string", + "ui": { + "columns": 3, + "label": "Name", + "placeholder": "First name" + } + }, + "lastname": { + "type": "string", + "ui": { + "columns": 3, + "showLabel": false, + "placeholder": "Last name" + } + }, + "email": { + "type": "string", + "ui": { + "columns": 6, + "label": "Email" + } + }, + "age": { + "type": "integer", + "ui": { + "columns": 6, + "label": "Age" + } + }, + "adult": { + "type": "boolean", + "ui": { + "columns": 6, + "label": "adult", + "help": { + "show": true, + "text": "?", + "content": "Adults can play games" + } + } + } + } +} \ No newline at end of file diff --git a/packages/ncform-show/src/components/playground/fixtures/basic-rich-display.json b/packages/ncform-show/src/components/playground/fixtures/basic-rich-display.json new file mode 100644 index 0000000..30d3b38 --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/basic-rich-display.json @@ -0,0 +1,37 @@ +{ + "type": "object", + "properties": { + "name": { + "type": "string", + "ui": { + "label": "Name", + "description": "Please fill in your name.", + "placeholder": "Name" + } + }, + "email": { + "type": "string", + "ui": { + "label": "Email" + } + }, + "age": { + "type": "integer", + "default": 18, + "ui": { + "label": "Age" + } + }, + "adult": { + "type": "boolean", + "ui": { + "label": "Adult", + "help": { + "show": true, + "text": "?", + "content": "Adults can play games." + } + } + } + } + } \ No newline at end of file diff --git a/packages/ncform-show/src/components/playground/fixtures/basic-separator.json b/packages/ncform-show/src/components/playground/fixtures/basic-separator.json new file mode 100644 index 0000000..4a0f53b --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/basic-separator.json @@ -0,0 +1,45 @@ +{ + "type": "object", + "properties": { + "_line1": { + "type": "HTML", + "value": "
Basic Information
" + }, + "name": { + "type": "string", + "ui": { + "label": "Name", + "description": "Please fill in your name", + "placeholder": "Name" + } + }, + "email": { + "type": "string", + "ui": { + "label": "Email" + } + }, + "_line2": { + "type": "HTML", + "value": "
Other Information
" + }, + "age": { + "type": "integer", + "default": 18, + "ui": { + "label": "Age" + } + }, + "adult": { + "type": "boolean", + "ui": { + "label": "Adult", + "help": { + "show": true, + "text": "?", + "content": "Adults can play games" + } + } + } + } +} \ No newline at end of file diff --git a/packages/ncform-show/src/components/playground/fixtures/basic-table-array.json b/packages/ncform-show/src/components/playground/fixtures/basic-table-array.json new file mode 100644 index 0000000..42174a1 --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/basic-table-array.json @@ -0,0 +1,60 @@ +{ + "type": "object", + "properties": { + "user": { + "type": "array", + "items": { + "type": "object", + "properties": { + "name": { + "type": "string", + "ui": { + "label": "Name", + "description": "Please fill in your name", + "placeholder": "Name" + }, + "rules": { + "required": true + } + }, + "email": { + "type": "string", + "ui": { + "label": "Email" + }, + "rules": { + "required": true, + "email": true + } + }, + "age": { + "type": "integer", + "ui": { + "label": "Age" + } + }, + "adult": { + "type": "boolean", + "ui": { + "label": "Adult", + "help": { + "show": true, + "text": "?", + "content": "Adults can play games" + } + } + } + } + }, + "ui": { + "showLegend": false, + "noLabelSpace": true, + "widget": "array-table", + "widgetConfig": { + "disableCollapse": true, + "showOneIfEmpty": true + } + } + } + } +} \ No newline at end of file diff --git a/packages/ncform-show/src/components/playground/fixtures/basic-tabs-array.json b/packages/ncform-show/src/components/playground/fixtures/basic-tabs-array.json new file mode 100644 index 0000000..42174a1 --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/basic-tabs-array.json @@ -0,0 +1,60 @@ +{ + "type": "object", + "properties": { + "user": { + "type": "array", + "items": { + "type": "object", + "properties": { + "name": { + "type": "string", + "ui": { + "label": "Name", + "description": "Please fill in your name", + "placeholder": "Name" + }, + "rules": { + "required": true + } + }, + "email": { + "type": "string", + "ui": { + "label": "Email" + }, + "rules": { + "required": true, + "email": true + } + }, + "age": { + "type": "integer", + "ui": { + "label": "Age" + } + }, + "adult": { + "type": "boolean", + "ui": { + "label": "Adult", + "help": { + "show": true, + "text": "?", + "content": "Adults can play games" + } + } + } + } + }, + "ui": { + "showLegend": false, + "noLabelSpace": true, + "widget": "array-table", + "widgetConfig": { + "disableCollapse": true, + "showOneIfEmpty": true + } + } + } + } +} \ No newline at end of file diff --git a/packages/ncform-show/src/components/playground/fixtures/basic-verification-rule.json b/packages/ncform-show/src/components/playground/fixtures/basic-verification-rule.json new file mode 100644 index 0000000..81c5d73 --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/basic-verification-rule.json @@ -0,0 +1,47 @@ +{ + "type": "object", + "properties": { + "name": { + "type": "string", + "ui": { + "label": "Name", + "description": "Please fill in your name", + "placeholder": "Name" + }, + "rules": { + "required": true, + "minLength": 10 + } + }, + "email": { + "type": "string", + "ui": { + "label": "Email" + }, + "rules": { + "required": true, + "email": { + "value": true, + "errMsg": "Please fill in a valid email address" + } + } + }, + "age": { + "type": "integer", + "ui": { + "label": "Age" + } + }, + "adult": { + "type": "boolean", + "ui": { + "label": "Adult", + "help": { + "show": true, + "text": "?", + "content": "Adults can play games" + } + } + } + } +} \ No newline at end of file diff --git a/packages/ncform-show/src/components/playground/fixtures/basic.json b/packages/ncform-show/src/components/playground/fixtures/basic.json new file mode 100644 index 0000000..41a5858 --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/basic.json @@ -0,0 +1,17 @@ +{ + "type": "object", + "properties": { + "name": { + "type": "string" + }, + "email": { + "type": "string" + }, + "age": { + "type": "integer" + }, + "adult": { + "type": "boolean" + } + } + } \ No newline at end of file diff --git a/packages/ncform-show/src/components/playground/fixtures/index.js b/packages/ncform-show/src/components/playground/fixtures/index.js new file mode 100644 index 0000000..87f7cf5 --- /dev/null +++ b/packages/ncform-show/src/components/playground/fixtures/index.js @@ -0,0 +1,138 @@ +/** + * Fixtures added here. + * Please make sure the value name is the same with json file name. + */ +const fixtures = [ + { + value: "basic", + label: { + cn: "基础使用", + en: "Basic" + } + }, + { + value: "basic-rich-display", + label: { + cn: "基础使用-丰富显示", + en: "Basic-Rich Display" + } + }, + { + value: "basic-multi-columns", + label: { + cn: "基础使用-多列布局", + en: "Basic-Multi Columns" + } + }, + { + value: "basic-media-preview", + label: { + cn: "基础使用-媒体预览", + en: "Basic-Media Preview" + } + }, + { + value: "basic-label-left", + label: { + cn: "基础使用-标签居左", + en: "Basic-Label Left" + } + }, + { + value: "basic-verification-rule", + label: { + cn: "基础使用-校验规则", + en: "Basic-Verification Rule" + } + }, + { + value: "basic-array-type", + label: { + cn: "基础使用-数组类型", + en: "Basic-Array Type" + } + }, + { + value: "basic-table-array", + label: { + cn: "基础使用-表格数组", + en: "Basic-Table Array" + } + }, + { + value: "basic-tabs-array", + label: { + cn: "基础使用-标签数组", + en: "Basic-Tabs Array" + } + }, + { + value: "basic-separator", + label: { + cn: "基础使用-分隔栏", + en: "Basic-Separator" + } + }, + { + value: "adv-control-interaction", + label: { + cn: "高级玩法-控件交互 dx表达式", + en: "Adv-Control Interaction [dx expression]" + } + }, + { + value: "adv-array-item-interaction", + label: { + cn: "高级玩法-数组项交互 dx表达式", + en: "Adv-Array Item Interaction [dx expression]" + } + }, + { + value: "adv-selector-interaction", + label: { + cn: "高级玩法-下拉框值交互 dx表达式", + en: "Adv-Selector Interaction [dx expression]" + } + }, + { + value: "adv-check-association", + label: { + cn: "高级玩法-校验关联 dx表达式", + en: "Adv-Check Association [dx expression]" + } + }, + { + value: "adv-custom-rule", + label: { + cn: "高级玩法-自定义校验规则 dx表达式", + en: "Adv-Custom Rule [dx expression]" + } + }, + { + value: "adv-global-constant", + label: { + cn: "高级玩法-全局常量 dx表达式", + en: "Adv-Global Constant [dx expression]" + } + }, + { + value: "adv-follow", + label: { + cn: "高级玩法-跟随 dx表达式", + en: "Adv-Follow [dx expression]" + } + }, + { + value: "adv-temp-value", + label: { + cn: "高级玩法-临时变量 dx表达式", + en: "Adv-Temp Value [dx expression]" + } + } +]; + +fixtures.map(item => { + item.schema = require('./' + item.value + '.json'); +}); + +export default fixtures; diff --git a/packages/ncform-show/src/components/playground/playground.html b/packages/ncform-show/src/components/playground/playground.html index cf17008..b35039a 100755 --- a/packages/ncform-show/src/components/playground/playground.html +++ b/packages/ncform-show/src/components/playground/playground.html @@ -8,7 +8,7 @@ {{i18n.template}}： - + {{i18n.genForm}} diff --git a/packages/ncform-show/src/components/playground/playground.js b/packages/ncform-show/src/components/playground/playground.js index 04d4b3b..f9f8f9f 100755 --- a/packages/ncform-show/src/components/playground/playground.js +++ b/packages/ncform-show/src/components/playground/playground.js @@ -1,6 +1,20 @@ /** * */ +import fixtures from './fixtures/index'; + +/** + * Get Url Hash + */ +function getUrlHash() { + const hash = window.location.hash.substr(1); + return hash.split('&').reduce(function (res, item) { + var parts = item.split('='); + res[parts[0]] = parts[1]; + return res; + }, {}); +} + export default { /* ====================== 生命周期 ====================== */ @@ -15,7 +29,13 @@ export default { // 在这里做一些跟DOM有关的初始化 setTimeout(() => { this.createEditor(); - this.templateChange("0"); + + // Get template from hash + const hash = getUrlHash(); + const tpl = hash['tpl'] || fixtures[0].value; + this.selectVal = fixtures.filter(item => item.value === tpl)[0] || fixtures[0]; + + this.templateChange(this.selectVal); }, 0); }, @@ -63,1014 +83,21 @@ export default { } }, ncformValue: {}, - - selectVal: "0", - options: [ - { - value: "0", - label: { - cn: "基础使用", - en: "Basic" - } - }, - { - value: "1", - label: { - cn: "基础使用-丰富显示", - en: "Basic-Rich Display" - } - }, - { - value: "2", - label: { - cn: "基础使用-多列布局", - en: "Basic-Multi Columns" - } - }, - { - value: "22", - label: { - cn: "基础使用-媒体预览", - en: "Basic-Media Preview" - } - }, - { - value: "3", - label: { - cn: "基础使用-标签居左", - en: "Basic-Label Left" - } - }, - { - value: "4", - label: { - cn: "基础使用-校验规则", - en: "Basic-Verification Rule" - } - }, - { - value: "5", - label: { - cn: "基础使用-数组类型", - en: "Basic-Array Type" - } - }, - { - value: "6", - label: { - cn: "基础使用-表格数组", - en: "Basic-Table Array" - } - }, - { - value: "7", - label: { - cn: "基础使用-标签数组", - en: "Basic-Tabs Array" - } - }, - { - value: "77", - label: { - cn: "基础使用-分隔栏", - en: "Basic-Separator" - } - }, - { - value: "8", - label: { - cn: "高级玩法-控件交互 dx表达式", - en: "Adv-Control Interaction [dx expression]" - } - }, - { - value: "9", - label: { - cn: "高级玩法-数组项交互 dx表达式", - en: "Adv-Array Item Interaction [dx expression]" - } - }, - { - value: "10", - label: { - cn: "高级玩法-下拉框值交互 dx表达式", - en: "Adv-Selector Interaction [dx expression]" - } - }, - { - value: "101", - label: { - cn: "高级玩法-校验关联 dx表达式", - en: "Adv-Check Association [dx expression]" - } - }, - { - value: "11", - label: { - cn: "高级玩法-自定义校验规则 dx表达式", - en: "Adv-Custom Rule [dx expression]" - } - }, - { - value: "12", - label: { - cn: "高级玩法-全局常量 dx表达式", - en: "Adv-Global Constant [dx expression]" - } - }, - { - value: "13", - label: { - cn: "高级玩法-跟随 dx表达式", - en: "Adv-Follow [dx expression]" - } - }, - { - value: "14", - label: { - cn: "高级玩法-临时变量 dx表达式", - en: "Adv-Temp Value [dx expression]" - } - } - ], - templates: { - "0": { - type: "object", - properties: { - name: { - type: "string" - }, - email: { - type: "string" - }, - age: { - type: "integer" - }, - adult: { - type: "boolean" - } - } - }, - "1": { - type: "object", - properties: { - name: { - type: "string", - ui: { - label: "Name", - description: "Please fill in your name.", - placeholder: "Name" - } - }, - email: { - type: "string", - ui: { - label: "Email" - } - }, - age: { - type: "integer", - default: 18, - ui: { - label: "Age" - } - }, - adult: { - type: "boolean", - ui: { - label: "Adult", - help: { - show: true, - text: "?", - content: "Adults can play games." - } - } - } - } - }, - "2": { - type: "object", - properties: { - firstname: { - type: "string", - ui: { - columns: 3, - label: "Name", - placeholder: "First name" - } - }, - lastname: { - type: "string", - ui: { - columns: 3, - showLabel: false, - placeholder: "Last name" - } - }, - email: { - type: "string", - ui: { - columns: 6, - label: "Email" - } - }, - age: { - type: "integer", - ui: { - columns: 6, - label: "Age" - } - }, - adult: { - type: "boolean", - ui: { - columns: 6, - label: "adult", - help: { - show: true, - text: "?", - content: "Adults can play games" - } - } - } - } - }, - - "22": { - type: "object", - properties: { - image: { - type: "string", - default: - "https://upload-images.jianshu.io/upload_images/2195795-e3c500e4b7d17b2c.png?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240", - ui: { - label: "Image", - columns: 6, - preview: { - type: "image", - value: "dx: {{$self}}", - clearable: true, - outward: { - width: 150, - height: 150, - shape: "circle" - } - } - } - }, - video: { - type: "string", - default: "https://www.w3schools.com/html/mov_bbb.mp4", - ui: { - label: "Video", - columns: 6, - preview: { - type: "video" - } - } - }, - audio: { - type: "string", - default: "https://www.w3schools.com/html/mov_bbb.mp4", - ui: { - label: "Audio", - columns: 6, - preview: { - type: "audio" - } - } - }, - link: { - type: "string", - default: "https://www.baidu.com", - ui: { - label: "Link", - columns: 6, - preview: { - type: "link" - } - } - } - } - }, - - "3": { - type: "object", - properties: { - firstname: { - type: "string", - ui: { - label: "Name", - placeholder: "First name" - } - }, - lastname: { - type: "string", - ui: { - showLabel: false, - placeholder: "Last name" - } - }, - email: { - type: "string", - ui: { - label: "Email" - } - }, - age: { - type: "integer", - ui: { - label: "Age" - } - }, - adult: { - type: "boolean", - ui: { - label: "Adult", - help: { - show: true, - text: "?", - content: "Adults can play games" - } - } - } - }, - ui: { - widgetConfig: { - layout: "h" - } - } - }, - "4": { - type: "object", - properties: { - name: { - type: "string", - ui: { - label: "Name", - description: "Please fill in your name", - placeholder: "Name" - }, - rules: { - required: true, - minLength: 10 - } - }, - email: { - type: "string", - ui: { - label: "Email" - }, - rules: { - required: true, - email: { - value: true, - errMsg: "Please fill in a valid email address" - } - } - }, - age: { - type: "integer", - ui: { - label: "Age" - } - }, - adult: { - type: "boolean", - ui: { - label: "Adult", - help: { - show: true, - text: "?", - content: "Adults can play games" - } - } - } - } - }, - "5": { - type: "object", - properties: { - user: { - type: "array", - items: { - type: "object", - properties: { - name: { - type: "string", - ui: { - label: "Name", - description: "Please fill in your name", - placeholder: "Name" - }, - rules: { - required: true - } - }, - email: { - type: "string", - ui: { - label: "Email" - }, - rules: { - required: true, - email: true - } - }, - age: { - type: "integer", - ui: { - label: "Age" - } - }, - adult: { - type: "boolean", - ui: { - label: "Adult", - help: { - show: true, - text: "?", - content: "Adults can play games" - } - } - } - }, - ui: { - label: "User" - } - }, - ui: { - showLegend: false, - noLabelSpace: true, - widgetConfig: { - showOneIfEmpty: true - } - } - } - } - }, - "6": { - type: "object", - properties: { - user: { - type: "array", - items: { - type: "object", - properties: { - name: { - type: "string", - ui: { - label: "Name", - description: "Please fill in your name", - placeholder: "Name" - }, - rules: { - required: true - } - }, - email: { - type: "string", - ui: { - label: "Email" - }, - rules: { - required: true, - email: true - } - }, - age: { - type: "integer", - ui: { - label: "Age" - } - }, - adult: { - type: "boolean", - ui: { - label: "Adult", - help: { - show: true, - text: "?", - content: "Adults can play games" - } - } - } - } - }, - ui: { - showLegend: false, - noLabelSpace: true, - widget: "array-table", - widgetConfig: { - disableCollapse: true, - showOneIfEmpty: true - } - } - } - } - }, - "7": { - type: "object", - properties: { - user: { - type: "array", - items: { - type: "object", - properties: { - name: { - type: "string", - ui: { - label: "Name", - description: "Please fill in your name", - placeholder: "Name" - }, - rules: { - required: true - } - }, - email: { - type: "string", - ui: { - label: "Email" - }, - rules: { - required: true, - email: true - } - }, - age: { - type: "integer", - ui: { - label: "Age" - } - }, - adult: { - type: "boolean", - ui: { - label: "Adult", - help: { - show: true, - text: "?", - content: "Adults can play games" - } - } - } - }, - ui: { - label: "User" - } - }, - ui: { - showLegend: false, - noLabelSpace: true, - widget: "array-tabs", - widgetConfig: { - showOneIfEmpty: true - } - } - } - } - }, - "77": { - type: "object", - properties: { - _line1: { - type: "HTML", - value: - '
Basic Information
' - }, - name: { - type: "string", - ui: { - label: "Name", - description: "Please fill in your name", - placeholder: "Name" - } - }, - email: { - type: "string", - ui: { - label: "Email" - } - }, - _line2: { - type: "HTML", - value: - '
Other Information
' - }, - age: { - type: "integer", - default: 18, - ui: { - label: "Age" - } - }, - adult: { - type: "boolean", - ui: { - label: "Adult", - help: { - show: true, - text: "?", - content: "Adults can play games" - } - } - } - } - }, - "8": { - type: "object", - properties: { - age: { - type: "integer", - ui: { - label: "Age", - description: "More than 18 years old to continue filling" - } - }, - gameInfo: { - type: "object", - properties: { - game: { - type: "string", - ui: { - label: "Like games", - description: "Fill in and unlock" - } - }, - gameAge: { - type: "integer", - ui: { - label: "Game age", - disabled: "dx: !{{$root.gameInfo.game}}" - } - } - }, - ui: { - legend: "Game info", - hidden: "dx: !{{$root.age}} || {{$root.age}} < 18" - } - } - } - }, - "9": { - type: "object", - properties: { - user: { - type: "array", - items: { - type: "object", - properties: { - adult: { - type: "boolean", - ui: { - label: "Adult", - help: { - show: true, - text: "?" - } - } - }, - gameName: { - type: "string", - ui: { - label: "Like games", - disabled: "dx: !{{$root.user[i].adult}}" - } - }, - gameAge: { - type: "integer", - ui: { - label: "Game age", - disabled: "dx: !{{$root.user[i].adult}}" - } - } - } - }, - ui: { - showLegend: false, - noLabelSpace: true, - widget: "array-table", - widgetConfig: { - showOneIfEmpty: true - } - } - } - } - }, - "10": { - type: "object", - properties: { - province: { - type: "string", - ui: { - label: "Province", - widget: "select", - widgetConfig: { - itemLabelField: "name", // 项数据表示label的字段 - itemValueField: "id", // 项数据表示value的字段 - enumSourceRemote: { - // 远程数据源 - remoteUrl: "/api/test/getProvinces", // 如果是远程访问，则填写该url - paramName: "keyword" // 请求参数名，默认是keyword - } - } - } - }, - city: { - type: "string", - ui: { - label: "City", - widget: "select", - widgetConfig: { - itemLabelField: "name", // 项数据表示label的字段 - itemValueField: "id", // 项数据表示value的字段 - enumSourceRemote: { - // 远程数据源 - remoteUrl: "/api/test/getCities", // 如果是远程访问，则填写该url - paramName: "keyword", // 请求参数名，默认是keyword - otherParams: { - provinceId: "dx: {{$root.province}}" - } - } - } - } - } - } - }, - "101": { - type: "object", - properties: { - isRequired: { - type: "boolean", - ui: { - label: "Required", - linkFields: [ - { - fieldPath: "num_1", - rules: ["required"] - }, - { - fieldPath: "num_2", - rules: ["required"] - } - ] - } - }, - num_1: { - type: "number", - ui: { - description: "num_1 >= num_2", - columns: 6, - linkFields: [ - { - fieldPath: "num_2", - rules: ["maximum"] - } - ] - }, - rules: { - required: { - value: "dx: {{$root.isRequired}}" - }, - minimum: { - value: "dx: {{$root.num_2}} || 0", - errMsg: "num_1 >= num_2" - } - } - }, - num_2: { - type: "number", - ui: { - columns: 6, - linkFields: [ - { - fieldPath: "num_1", - rules: ["minimum"] - } - ] - }, - rules: { - required: { - value: "dx: {{$root.isRequired}}" - }, - maximum: { - value: "dx: {{$root.num_1}} || 0", - errMsg: "num_2 <= num_1" - } - } - } - } - }, - "11": { - type: "object", - properties: { - startTime: { - type: "string", - ui: { - widget: "date-picker" - }, - rules: { - customRule: [ - { - script: - "dx: !{{$root.endTime}} || {{$root.endTime}} >= {{$root.startTime}}", // 支持dx表达式 - errMsg: - "Start date must be less than or equal to the end date", // 验证错误信息 - linkItems: [ - // 当触发校验时，同时触发这些关联的项进行校验 - { - fieldPath: "endTime", // 关联项 - customRuleIdx: 0 // 触发该项的自定义验证规则的索引 - } - ] - } - ] - } - }, - endTime: { - type: "string", - ui: { - widget: "date-picker" - }, - rules: { - customRule: [ - { - script: - "dx: !{{$root.startTime}} || {{$root.endTime}} >= {{$root.startTime}}", // 支持dx表达式 - errMsg: - "End date must be greater than or equal to the start date", // 验证错误信息 - linkItems: [ - // 当触发校验时，同时触发这些关联的项进行校验 - { - fieldPath: "startTime", // 关联项 - customRuleIdx: 0 // 触发该项的自定义验证规则的索引 - } - ] - } - ] - } - }, - arrayItems: { - type: "array", - items: { - type: "object", - properties: { - startTime: { - type: "string", - ui: { - widget: "date-picker" - }, - rules: { - customRule: [ - { - script: - "dx: !{{$root.arrayItems[i].endTime}} || {{$root.arrayItems[i].endTime}} >= {{$root.arrayItems[i].startTime}}", // 支持dx表达式 - errMsg: - "Start date must be less than or equal to the end date", // 验证错误信息 - linkItems: [ - // 当触发校验时，同时触发这些关联的项进行校验 - { - fieldPath: "arrayItems[i].endTime", // 关联项 - customRuleIdx: 0 // 触发该项的自定义验证规则的索引 - } - ] - } - ] - } - }, - endTime: { - type: "string", - ui: { - widget: "date-picker" - }, - rules: { - customRule: [ - { - script: - "dx: !{{$root.arrayItems[i].startTime}} || {{$root.arrayItems[i].endTime}} >= {{$root.arrayItems[i].startTime}}", // 支持dx表达式 - errMsg: - "End date must be greater than or equal to the start date", // 验证错误信息 - linkItems: [ - // 当触发校验时，同时触发这些关联的项进行校验 - { - fieldPath: "arrayItems[i].startTime", // 关联项 - customRuleIdx: 0 // 触发该项的自定义验证规则的索引 - } - ] - } - ] - } - } - } - }, - ui: { - showLabel: false, - legend: "Array item", - widget: "array-table", - widgetConfig: { - collapsed: false, - showOneIfEmpty: true - } - } - } - } - }, - "12": { - type: "object", - properties: { - age: { - type: "string", - ui: { - placeholder: - 'dx: "Age must be greater than " + {{$const.ageLimit}}' - }, - rules: { - customRule: [ - { - script: "dx: {{$root.age}} > {{$const.ageLimit}}", // 支持dx表达式 - errMsg: "Please fill in the correct age" // 验证错误信息 - } - ] - } - } - }, - globalConfig: { - constants: { - ageLimit: 18 - } - } - }, - "13": { - type: "object", - properties: { - firstname: { - type: "string", - ui: { - columns: 6 - } - }, - lastname: { - type: "string", - ui: { - columns: 6 - } - }, - fullname: { - type: "string", - valueTemplate: - 'dx: {{$root.firstname}} + " " + {{$root.lastname}}', - ui: { - columns: 12 - } - } - } - }, - "14": { - type: "object", - properties: { - item: { - type: "string", - ui: { - description: - "Currently only select, radio, checkbox supports this feature.", - widget: "select", - widgetConfig: { - itemDataKey: "selectedItem", - enumSource: [ - { - value: "1", - label: "ncform", - desc: - "ncform is a very nice configuration generation way to develop forms" - }, - { - value: "2", - label: "daniel", - desc: "Daniel is the author of ncform" - } - ] - } - } - }, - desc: { - valueTemplate: 'dx: {{$temp.selectedItem.desc}} || ""' - } - } - } - } + selectVal: fixtures[0], + fixtures: fixtures, }; }, computed: { listOptions() { - return this.$data.options.map(item => ({ + return this.fixtures.map(item => ({ value: item.value, - label: item.label[this.$data.lang] + label: item.label[this.lang], + schema: item.schema, })); }, i18n() { - return this.$data.i18nData[this.$data.lang]; + return this.i18nData[this.lang]; } }, @@ -1082,12 +109,14 @@ export default { this.$options.editor.$blockScrolling = Infinity; }, templateChange(v) { + // Update url hash, so that people can copy the url and share the template to others + window.location.hash = '#tpl=' + v.value; this.$options.editor.setValue( - JSON.stringify(this.$data.templates[v], null, 2), + JSON.stringify(v.schema, null, 2), 1 ); - this.$data.ncformSchema = JSON.parse(this.$options.editor.getValue()); - this.$data.ncformValue = {}; + this.ncformSchema = JSON.parse(this.$options.editor.getValue()); + this.ncformValue = {}; }, createForm() { const value = this.$options.editor.getValue();