feat(ncform-show): Add ext components demo

packages/ncform-show/src/components/playground/fixtures/ext-array-import.json

@@ -16,7 +16,10 @@
           "disableCollapse": true
         }
       },
-      "defaultValue": [ 1234567, 892310 ]
+      "defaultValue": [
+        1234567,
+        892310
+      ]
     },
     "tags": {
       "type": "array",

packages/ncform-show/src/components/playground/fixtures/index.js

@@ -133,7 +133,11 @@ const fixtures = [
     value: "ext-array-import",
     label: {
       cn: "外部扩展-数组导入",
-      en: "Extentions Array Import"
+      en: "Ext-Array Import"
+    },
+    desc: {
+      cn: "该示例使用扩展组件nc-array-import(非标准组件): https://github.com/ncform/nc-array-import",
+      en: "This example uses the extension component nc-array-import (non-standard component): https://github.com/ncform/nc-array-import"
     }
   }
 ];

packages/ncform-show/src/components/playground/playground.html

@@ -24,6 +24,13 @@
   </el-row>
   <el-row>
     <el-col :span="12">
+      <el-alert v-if="selectVal && selectVal.desc"
+        style="margin-top: 6px;"
+        show-icon
+        :closable="false"
+        :title="selectVal.desc"
+        type="info">
+      </el-alert>
       <div class="editorArea">
         <div ref="editor" class="editor">{{jsonValue}}</div>
       </div>

packages/ncform-show/src/components/playground/playground.js

@@ -32,8 +32,8 @@ export default {
 
       // 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];
+      const tpl = hash['tpl'] || this.listOptions[0].value;
+      this.selectVal = this.listOptions.filter(item => item.value === tpl)[0] || this.listOptions[0];
 
       this.templateChange(this.selectVal);
     }, 0);
@@ -83,7 +83,7 @@ export default {
         }
       },
       ncformValue: {},
-      selectVal: fixtures[0],
+      selectVal: null,
       fixtures: fixtures,
     };
   },
@@ -93,6 +93,7 @@ export default {
       return this.fixtures.map(item => ({
         value: item.value,
         label: item.label[this.lang],
+        desc: item.desc ? item.desc[this.lang] : '',
         schema: item.schema,
       }));
     },