Merge pull request #107 from vipshop/develop

v0.24.0

.gitignore

@@ -14,6 +14,7 @@ package-lock.json
 *.sln
 
 /dist
+/lib
 /docs/dist
 /packages/*/lib
 /material-list.json

README.md

@@ -82,6 +82,12 @@ ams.render('demo')
 
 尝试AMS的最简单的方式是使用[JSRUN上的官方入门Demo](http://jsrun.net/sehKp/edit?utm_source=website)。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。
 
+### packages本地开发调试
+
+```
+npm run dev
+```
+
 ## 相关链接
 
 - [文档与教程](https://vipshop.github.io/ams/)

docs/package.json

@@ -6,7 +6,7 @@
   },
   "private": true,
   "dependencies": {
-    "@ams-team/ams": "latest",
+    "@ams-team/ams": "^0.24.0",
     "@ams-team/block-ams-config": "latest",
     "@ams-team/block-chart": "latest",
     "@ams-team/json-stringify": "latest",

docs/zh-CN/.vuepress/components/api/icon/list.vue

@@ -14,7 +14,7 @@ export default {
         return {
             icons: [
                 'user', 'woman', 'man', 'question', 'watcher', 'advocate', 'fold', 'crown', 'heart', 'brick', 'dashboard',
-                'portrait', 'brand-equity', 'crowd-manage', 'account-sales', 'help-center', 'data-report', 'customer-operation'
+                'portrait', 'brand-equity', 'crowd-manage', 'account-sales', 'help-center', 'data-report', 'customer-operation', 'code'
             ]
         }
     },

docs/zh-CN/.vuepress/components/block/drawer/block.js

@@ -15,6 +15,7 @@ export default {
                     title: '我是标题'
                 },
                 props: {
+                    'append-to-body': true,
                     'before-close': function(done){
                         this.$confirm('确认关闭？')
                         .then(_ => {
@@ -65,6 +66,9 @@ export default {
         blocks: {
             adminDrawer: {
                 type: 'drawer',
+                props: {
+                    'append-to-body': true
+                },
                 data: {
                     title: '添加'
                 },

docs/zh-CN/.vuepress/components/block/list/block.js

@@ -980,7 +980,11 @@ export default {
                 },
                 testText: {
                     type: "text",
-                    label: "名称"
+                    label: "名称",
+                    props: {
+                        // 实现名称字段拖拽
+                        'class-name': 'drag-column'
+                    }
                 },
                 testTextarea: {
                     type: "textarea",
@@ -997,7 +1001,9 @@ export default {
             }
         },
         options: {
-            drag: true
+            drag: true,
+            // 隐藏拖拽icon
+            // showDragIcon: false
         },
         on: {
             'drag-start': function({ oldIndex }) {

docs/zh-CN/.vuepress/components/block/router/block.js

@@ -216,14 +216,6 @@ export default {
                 },
                 slot: 'menuTop'
             },
-            navRouterLeft: {
-                slot: 'nav-left',
-                type: 'component',
-                options: {
-                    is: 'div',
-                    text: '导航左侧插槽'
-                }
-            },
             navRouterTitle: {
                 "type": "component",
                 "options": {

docs/zh-CN/.vuepress/components/block/router/demo.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-card shadow="hover" class="demo demo-card">
+    <el-card shadow="hover" class="demo demo-card router-demo-card">
         <ams-block v-if="init" :name="blockName" class="demo-card-preview"/>
         <div :class="`demo-card-config ${showConfig ? 'open': ''}`">
             <highlight-code lang="javascript">
@@ -38,3 +38,8 @@ export default {
     }
 }
 </script>
+<style lang="scss" scoped>
+.router-demo-card .demo-card-preview{
+    padding: 0;
+}
+</style>

docs/zh-CN/.vuepress/components/block/steps/block.js

@@ -62,5 +62,75 @@ export default {
                 })
             }
         }
+    },
+    descriptionSteps: {
+        type: 'steps',
+        data: {
+            active: 0
+        },
+        options: {
+            descriptionstep1: 'step1',
+            descriptionstep2: 'step2',
+            descriptionstep3: {
+                title: 'step3',
+                description: '这是一段很长很长很长的描述性文字'
+            }
+        },
+        props: {
+            'align-center': true
+        },
+        blocks: {
+            descriptionstep1: {
+                type: 'component',
+                options: {
+                    is: 'div',
+                    text: '我是step1的内容'
+                },
+                style: {
+                    padding: '100px',
+                }
+            },
+            descriptionstep2: {
+                type: 'component',
+                options: {
+                    is: 'div',
+                    text: '我是step2的内容'
+                },
+                style: {
+                    padding: '100px',
+                }
+            },
+            descriptionstep3: {
+                type: 'component',
+                options: {
+                    is: 'div',
+                    text: '我是step3的内容'
+                },
+                style: {
+                    padding: '100px',
+                }
+            }
+        },
+        operations: {
+            next: {
+                type: 'button',
+                label: '下一步',
+                props: {
+                    type: 'primary'
+                }
+            }
+        },
+        actions: {
+            next() {
+                let next = this.block.data.active = this.block.data.active + 1
+                if (next >= Object.keys(this.block.blocks).length) {
+                    this.block.data.active = 0
+                    next = 0
+                }
+                this.setBlockData({
+                    active: next
+                })
+            }
+        }
     }
 }

docs/zh-CN/.vuepress/components/field/button/block.js

@@ -13,20 +13,21 @@ export default {
                 },
                 buttonA: {
                     type: 'button',
-                    label: '按钮',
+                    // label: '按钮',
                     labelWidth: '0',
                     tooltip: '点击触发事件',
                     props: {
+                        text: '点击',
                         inline: true,
                         type: 'primary'
                     },
-                    event: 'pop'
+                    event: 'pop:xxx'
                 }
 			}
 		},
         actions: {
-            pop() {
-                this.$alert('你输入了：'+ this.data.text)
+            pop({ $arg }) {
+                this.$alert('你输入了：'+ $arg)
             }
         }
 	}

docs/zh-CN/.vuepress/components/field/html/block.js

@@ -0,0 +1,64 @@
+export default {
+	htmlField1: {
+        ctx: 'view',
+		type: 'form',
+		resource: {
+			fields: {
+                id: {
+                    type: 'text',
+                    label: '序号'
+                },
+				html: {
+					type: 'html',
+                    label: '渲染字段',
+                    view(value, field, contxt) {
+                        // 可在view里面进行html拼接
+                        return value + '<img src="https://vipshop.github.io/ams/index/ams-logo.png" />'
+                    }
+				}
+			}
+		},
+		data: {
+            id: '1204',
+            html: '<div style="color: red">我是渲染的内容</div>'
+        }
+	},
+	htmlField2: {
+        ctx: 'view',
+		type: 'list',
+		resource: {
+			fields: {
+                id: {
+                    type: 'text',
+                    label: '序号'
+                },
+				html: {
+					type: 'html',
+                    label: '渲染字段',
+                    view(value, field, context) {
+                        // 可在view里面进行html拼接
+                        // console.log('context-上下文', context);
+                        return '<span style="color:red;">'+ value+'</span><img src="https://vipshop.github.io/ams/index/ams-logo.png" />'
+
+                    }
+				}
+			}
+		},
+		data: {
+            list: [
+                {
+                    id: 1,
+                    html: '1'
+                },
+                {
+                    id: 2,
+                    html: '2'
+                },
+                {
+                    id: 3,
+                    html: '3'
+                },
+            ]
+        }
+	},
+};

docs/zh-CN/.vuepress/components/field/html/demo.vue

@@ -0,0 +1,40 @@
+<template>
+    <el-card shadow="hover" class="demo demo-card">
+        <ams-block v-if="init" :name="blockName" class="demo-card-preview"/>
+        <div :class="`demo-card-config ${showConfig ? 'open': ''}`">
+            <highlight-code lang="javascript">
+                {{ configCode }}
+            </highlight-code>
+        </div>
+        <div class="demo-card-config-btn" @click="toggleDemoCofig">
+            <i :class="`el-icon-caret-${showConfig ? 'top': 'bottom'}`"></i>
+             {{ showConfig ? '隐藏' : '显示'}}配置
+            <el-link v-if="onlineDemo" :href="onlineDemo" target="_blank" type="success">在线运行</el-link>
+        </div>
+    </el-card>
+</template>
+
+<script>
+import demoMixins from '../../demo/demo-mixin'
+import block from './block'
+import stringify from '@ams-team/json-stringify'
+import beautify from 'js-beautify'
+
+export default {
+    mixins: [demoMixins],
+    mounted(){
+        const stringConfig = stringify(block[this.blockName])
+        this.configCode = beautify(stringConfig, { indent_size: 2, space_in_empty_paren: true })
+        
+        // 如果已经注册过则不再注册
+        if (ams && ams.blocks && ams.blocks[this.blockName]) {
+            this.init = true;
+            return;
+        }
+
+        ams.block(this.blockName, block[this.blockName])
+
+        this.init = true
+    }
+}
+</script>

docs/zh-CN/.vuepress/config.js

@@ -37,7 +37,7 @@ module.exports = {
       },
       {
         text: '示例',
-        link: '/example/'
+        link: '/example/#/'
       },
       {
         text: '版本更新',
@@ -51,6 +51,10 @@ module.exports = {
             link: '/version/VERSION'
           }
         ]
+      },
+      {
+        text: 'GITHUB',
+        link: 'https://github.com/vipshop/ams'
       }
     ],
     sidebar: {
@@ -99,7 +103,7 @@ module.exports = {
         {
           title: '基础',
           collapsable: false,
-          children: ['text','password', 'textarea', 'switch',  'color', 'rate', 'unitselect', 'link', 'button']
+          children: ['text','password', 'textarea', 'switch',  'color', 'rate', 'unitselect', 'link', 'button', 'html']
         },
         {
           title: '时间',
@@ -140,6 +144,7 @@ module.exports = {
             children: [
               'api',
               'form',
+              'grid',
               'list',
               'imagelist',
               'table',

docs/zh-CN/api/README.md

@@ -46,6 +46,8 @@ AMS体系中，有几个概念：**物料，字段，区块，模板**
 * `@ams-team/field-*` AMS扩展字段库，在核心库提供的字段之外的扩展字段
 * `@ams-team/block-*` AMS扩展区块库，在核心库提供的区块之外的扩展区块
 * `@ams-team/cli` 工具，提供快速搭建项目脚手架、编写定制模块、发布管理定制模块等功能 [>> 详情](/api/cli.html)
+* `vscode/ams-helper` vscode编辑器用于AMS开发时的插件 [>> 详情](https://marketplace.visualstudio.com/items?itemName=wuzebin.ams-helper)
+* `主题风格` 提供多种主题风格，按公司UED部门的设计规范标准，统一了后台管理系统页面的各种UI组件样式 [点击预览](https://vipshop.github.io/ams/example/index.html)
 * `扩展图标` 在element-ui提供的[Icon 图标](https://element.eleme.cn/#/zh-CN/component/icon)之外，我们还提供了UED出品的[扩展图标](/api/icon.html)满足不同需求
 
 :::tip