feat: Dropdown组件新增hideOnClick配置 && offset配置 && 完善了下demo和文档

docs/atui/introduce.md

@@ -20,7 +20,7 @@ english: AliTelecom UI System
 
 ## 版本
 
-目前最新版本 v0.0.28
+目前最新版本 v0.0.29
 
 ## 浏览器支持
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "atui",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "description": "components built with Vue.js",
   "main": "dist/atui.js",
   "repository": {
@@ -122,7 +122,7 @@
     "dev:test": "karma start build/karma.dev.config.js",
     "lesshint": "lesshint src/styles -r scripts/lesshint-report.js",
     "publish-npm": "npm run authors && tnpm publish",
-    "build": "npm run lint && NODE_ENV=production webpack --config build/webconfig.config.js --progress && cp node_modules/vue/dist/vue.js dist/vue.js && cp node_modules/vue/dist/vue.min.js dist/vue.min.js",
+    "build": "npm run lint && NODE_ENV=production webpack --config build/webconfig.config.js --progress && cp node_modules/vue/dist/vue.js dist/vue.js && cp node_modules/vue/dist/vue.min.js dist/vue.min.js && npm run lib",
     "test": "npm run lint && npm run test:unit",
     "test:unit": "karma start build/karma.unit.config.js",
     "test:cover": "karma start build/karma.cover.config.js",

src/components/Affix/index.md

@@ -1,6 +1,6 @@
 ---
 category: Components
-type: Basic
+type: Navigation
 title: Affix
 subtitle: 固钉
 ---

src/components/Dropdown/Dropdown.vue

@@ -5,14 +5,15 @@
              popup-cls="dropdown"
              placement="bottomLeft"
              :popup-hide-delay="200"
+             :offset="offset"
              popup-hide-when-click-outside
              popup-use-trigger-width
              @toggle-popup="onTogglePopup"
              :show="isOpen">
       <template slot="trigger">
         <slot></slot>
       </template>
-      <div slot="popup" :class="[prefixCls + '-dropdown-menu-cont','atui-dropdown-menu']">
+      <div slot="popup" :class="[prefixCls + '-dropdown-menu-cont','atui-dropdown-menu']" @click="onPopClick">
         <slot name="dropdown-menu" role="dropdown"></slot>
       </div>
     </trigger>
@@ -35,6 +36,16 @@
       },
       open: {
         type: Boolean
+      },
+      hideOnClick: {
+        type: Boolean,
+        default: true
+      },
+      offset: {
+        type: Array,
+        default () {
+          return [0, 2]
+        }
       }
     },
     components: {
@@ -45,14 +56,25 @@
         isOpen: this.open
       }
     },
+    watch: {
+      open (newVal, oldVal) {
+        this.isOpen = newVal
+      },
+      isOpen (newVal, oldVal) {
+        this.$emit('change', newVal)
+      }
+    },
     created () {
       this.$on('closeDropdown', () => {
         this.isOpen = false
       })
     },
     methods: {
-      onTogglePopup: function (val) {
+      onTogglePopup (val) {
         this.isOpen = val
+      },
+      onPopClick () {
+        this.hideOnClick && (this.isOpen = false)
       }
     }
   }

src/components/Dropdown/demo/basic.md

@@ -6,7 +6,7 @@ title:
 ---
 
 ## zh-CN
-
+通过名为`dropdown-menu`的slot来自定义弹出层
 
 
 ## en-US
@@ -34,6 +34,13 @@ new Vue({
   components: {
     vDropdown: atui.Dropdown,
     icon: atui.Icon
+  },
+  data: {
+    
+  },
+  methods: {
+    closeDropdown () {
+    }
   }
 })
 ````

src/components/Dropdown/demo/hide.md

@@ -0,0 +1,46 @@
+---
+order: 2
+title:
+  zh-CN: 菜单隐藏方式
+  en-US: Type
+---
+
+## zh-CN
+下拉菜单默认在点击菜单项后会被隐藏，将`hide-on-click`属性默认为`false`可以关闭此功能。
+
+
+## en-US
+
+````jsx
+
+<v-dropdown :hide-on-click="false">
+  <div>
+    点击显示菜单 <icon type="down"></icon>
+  </div>
+  <ul slot="dropdown-menu">
+    <li><a>选项一</a></li>
+    <li><a>选项二</a></li>
+    <li><a>选项三</a></li>
+    <li role="separator" class="atui-dropdown-divider"></li>
+    <li><a href="#">其它</a></li>
+  </ul>
+</v-dropdown>
+
+````
+
+````vue-script
+new Vue({
+  el: 'body',
+  components: {
+    vDropdown: atui.Dropdown,
+    icon: atui.Icon
+  },
+  data: {
+    
+  },
+  methods: {
+    closeDropdown () {
+    }
+  }
+})
+````

src/components/Dropdown/demo/hover.md

@@ -15,7 +15,7 @@ hover显示
 
 <dropdown trigger="hover">
   <div>
-    点击显示菜单 <icon type="down"></icon>
+    hover显示菜单 <icon type="down"></icon>
   </div>
   <ul slot="dropdown-menu">
     <li><a>选项一</a></li>

src/components/Dropdown/demo/offset.md

@@ -0,0 +1,46 @@
+---
+order: 0
+title:
+  zh-CN: 带偏移量的菜单
+  en-US: Type
+---
+
+## zh-CN
+配置props:`offset=[0, 20]`,向下偏移量20px
+
+
+## en-US
+
+````jsx
+
+<v-dropdown :offset="[0, 20]">
+  <div>
+    点击显示菜单 <icon type="down"></icon>
+  </div>
+  <ul slot="dropdown-menu">
+    <li><a>选项一</a></li>
+    <li><a>选项二</a></li>
+    <li><a>选项三</a></li>
+    <li role="separator" class="atui-dropdown-divider"></li>
+    <li><a href="#">其它</a></li>
+  </ul>
+</v-dropdown>
+
+````
+
+````vue-script
+new Vue({
+  el: 'body',
+  components: {
+    vDropdown: atui.Dropdown,
+    icon: atui.Icon
+  },
+  data: {
+    
+  },
+  methods: {
+    closeDropdown () {
+    }
+  }
+})
+````

src/components/Dropdown/index.md

@@ -15,5 +15,9 @@ dropdown组件只提供了一种能力，只需要指定slot
 
 属性 | 说明 | 类型 | 默认值
 -----|-----|-----|------
-trigger | 事件触发类型 | String | click
+hideOnClick | 是否在点击菜单项后隐藏菜单 ｜ `Boolean` | `true` |
+offset | 下拉弹出层的偏移量, 如`[0, 50]`,横向不偏移,纵向偏移50px | `Array` | `[0, 0]` |
+trigger | 显示下拉菜单的触发方式，可选值为`hover`, `click`, `focus`默认为`click` | `click` |
+@change | 下拉菜单展示状态变化时触发 | `function(isOpen)` | 无 |
+
 

src/styles/bootstrap.less

@@ -61,8 +61,6 @@
 @import "trigger.less";
 @import "carousel.less";
 
-@import "editor.less";
-
 // Utility classes
 @import "utilities.less";
 @import "responsive-utilities.less";