feat(dropdown): i think it finally works...

demo/documentation/components/dropdown/enUS/basic.md

@@ -8,9 +8,8 @@
     v-for="hotel in hotels"
     :key="hotel"
     :name="hotel.toLowerCase()"
-  >
-    {{ hotel }}
-  </n-dropdown-item>
+    :label="hotel"
+  />
 </n-dropdown>
 ```
 ```js

demo/documentation/components/dropdown/enUS/cascade.md

@@ -3,6 +3,7 @@
 <n-dropdown
   placement="bottom-start"
   trigger="click"
+  @select="handleSelect"
 >
   <template v-slot:activator>
     <n-button>People and something to eat</n-button>
@@ -41,4 +42,13 @@
     </n-dropdown-submenu>
   </n-dropdown-submenu>
 </n-dropdown>
+```
+```js
+export default {
+  methods: {
+    handleSelect (name) {
+      this.$NMessage.info(name)
+    }
+  }
+}
 ```

demo/documentation/components/dropdown/enUS/index.md

@@ -4,6 +4,7 @@ basic
 trigger
 placement
 cascade
+width
 size
 manual-position
 ```

demo/documentation/components/dropdown/enUS/manualPosition.md

@@ -1,6 +1,9 @@
 # Manually Positioned
+For some special case, you may want to manually position the dropdown. For example, right click to activate dropdown in some area.
 ```html
-<div style="width: 200px; height: 200px; background-color: rgba(0, 128, 0, .5);" @contextmenu="handleContextMenu"></div>
+<div style="width: 200px; height: 200px; background-color: rgba(0, 128, 0, .5);" @contextmenu="handleContextMenu">
+  Right Click
+</div>
 <n-dropdown
   placement="bottom-start"
   trigger="manual"

demo/documentation/components/dropdown/enUS/placement.md

@@ -1,6 +1,6 @@
 # Placement
 ```html
-<n-dropdown @select="handleSelect" placement="bottom-start">
+<n-dropdown @select="handleSelect" placement="bottom-start" :focusable="false">
   <template v-slot:activator>
     <n-button>I want to go sleep!</n-button>
   </template>

demo/documentation/components/dropdown/enUS/size.md

@@ -4,6 +4,7 @@
   placement="bottom-start"
   trigger="click"
   size="small"
+  @select="handleSelect"
   :focusable="false"
 >
   <template v-slot:activator>
@@ -47,6 +48,7 @@
   placement="bottom-start"
   trigger="click"
   size="medium"
+  @select="handleSelect"
   :focusable="false"
 >
   <template v-slot:activator>
@@ -91,6 +93,7 @@
   trigger="click"
   size="large"
   :focusable="false"
+  @select="handleSelect"
 >
   <template v-slot:activator>
     <n-button>Large Some</n-button>
@@ -130,6 +133,15 @@
   </n-dropdown-submenu>
 </n-dropdown>
 ```
+```js
+export default {
+  methods: {
+    handleSelect (name) {
+      this.$NMessage.info(name)
+    }
+  }
+}
+```
 ```css
 .n-button {
   margin: 0 8px 12px 0;

demo/documentation/components/dropdown/enUS/trigger.md

@@ -8,9 +8,8 @@
     v-for="hotel in hotels"
     :key="hotel"
     :name="hotel.toLowerCase()"
-  >
-    {{ hotel }}
-  </n-dropdown-item>
+    :label="hotel"
+  />
 </n-dropdown>
 
 <n-dropdown @select="handleSelect" trigger="click" :focusable="false">
@@ -21,9 +20,8 @@
     v-for="hotel in hotels"
     :key="hotel"
     :name="hotel.toLowerCase()"
-  >
-    {{ hotel }}
-  </n-dropdown-item>
+    :label="hotel"
+  />
 </n-dropdown>
 
 <n-dropdown @select="handleSelect" trigger="manual" v-model="showDropdown">
@@ -34,9 +32,8 @@
     v-for="hotel in hotels"
     :key="hotel"
     :name="hotel.toLowerCase()"
-  >
-    {{ hotel }}
-  </n-dropdown-item>
+    :label="hotel"
+  />
 </n-dropdown>
 ```
 ```js

demo/documentation/components/dropdown/enUS/width.md

@@ -0,0 +1,57 @@
+# Width
+`width`, `max-width`, `min-width`, `submenu-width`, `submenu-max-width`, `sub-min-width` can be set.
+```html
+<n-dropdown
+  placement="bottom-start"
+  trigger="click"
+  :width="180"
+  :submenu-width="180"
+  @select="handleSelect"
+>
+  <template v-slot:activator>
+    <n-button>People and something to eat</n-button>
+  </template>
+  <n-dropdown-item name="gatsby">
+    Gatsby
+  </n-dropdown-item>
+  <n-dropdown-item name="daisy">
+    Daisy
+  </n-dropdown-item>
+  <n-dropdown-divider />
+  <n-dropdown-item name="nick">
+    Nick
+  </n-dropdown-item>
+  <n-dropdown-submenu>
+    <template v-slot:activator>
+      Others
+    </template>
+    <n-dropdown-item name="jordan baker">
+      Jordan Baker
+    </n-dropdown-item>
+    <n-dropdown-divider />
+    <n-dropdown-item name="tom buchanan">
+      Tom Buchanan
+    </n-dropdown-item>
+    <n-dropdown-submenu>
+      <template v-slot:activator>
+        Others
+      </template>
+      <n-dropdown-item name="chicken">
+        Chicken
+      </n-dropdown-item>
+      <n-dropdown-item name="beef">
+        Beef
+      </n-dropdown-item>
+    </n-dropdown-submenu>
+  </n-dropdown-submenu>
+</n-dropdown>
+```
+```js
+export default {
+  methods: {
+    handleSelect (name) {
+      this.$NMessage.info(name)
+    }
+  }
+}
+```

demo/documentation/components/grid/enUS/basic.md

@@ -18,10 +18,10 @@
 ```css
 .red {
   height: 108px;
-  background-color: rgba(255, 0, 0, .5);
+  background-color: rgba(128, 0, 0, .5);
 }
 .green {
   height: 108px;
-  background-color: rgba(0, 255, 0, .5);
+  background-color: rgba(0, 128, 0, .5);
 }
 ```

demo/documentation/components/grid/enUS/gutter.md

@@ -32,10 +32,10 @@
 ```css
 .red {
   height: 108px;
-  background-color: rgba(255, 0, 0, .5);
+  background-color: rgba(128, 0, 0, .5);
 }
 .green {
   height: 108px;
-  background-color: rgba(0, 255, 0, .5);
+  background-color: rgba(0, 128, 0, .5);
 }
 ```

demo/documentation/components/grid/enUS/offset.md

@@ -12,10 +12,10 @@
 ```css
 .red {
   height: 108px;
-  background-color: rgba(255, 0, 0, .5);
+  background-color: rgba(128, 0, 0, .5);
 }
 .green {
   height: 108px;
-  background-color: rgba(0, 255, 0, .5);
+  background-color: rgba(0, 128, 0, .5);
 }
 ```

demo/documentation/components/grid/enUS/pushPull.md

@@ -18,10 +18,10 @@
 ```css
 .red {
   height: 108px;
-  background-color: rgba(255, 0, 0, .5);
+  background-color: rgba(128, 0, 0, .5);
 }
 .green {
   height: 108px;
-  background-color: rgba(0, 255, 0, .5);
+  background-color: rgba(0, 128, 0, .5);
 }
 ```

demo/documentation/components/select/enUS/slotApi.md

@@ -1,20 +1,20 @@
 # Slot API Debug
 ```html
 <n-select v-model="value">
-  <n-select-option value="value1">
-    label1
+  <n-select-option label="label1" value="value1">
+    Dog
   </n-select-option>
-  <n-select-option value="value2">
-    label2
+  <n-select-option label="label2" value="value2">
+    Cat
   </n-select-option>
-  <n-select-option value="value3">
-    label3
+  <n-select-option label="label3" value="value3">
+    Money
   </n-select-option>
-  <n-select-option value="value4">
-    label4
+  <n-select-option label="label4" value="value4">
+    Tiger
   </n-select-option>
-  <n-select-option value="value5">
-    label5
+  <n-select-option label="label5" value="value5">
+    Happy
   </n-select-option>
 </n-select>
 ```

packages/base/Portal/src/main.js

@@ -1,10 +1,5 @@
 export default {
   name: 'NBasePortal',
-  provide () {
-    return {
-      NBasePortal: this
-    }
-  },
   mounted () {
     if (this.$el.parentElement && !this.elementTransferred) {
       this.$el.parentElement.removeChild(this.$el)

packages/base/SelectMenu/src/SelectOption.vue

@@ -12,12 +12,9 @@
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
   >
-    <template v-if="$scopedSlots.default">
-      <slot />
-    </template>
-    <template v-else-if="label">
+    <slot>
       {{ label }}
-    </template>
+    </slot>
   </div>
 </template>
 
@@ -34,8 +31,8 @@ export default {
   },
   props: {
     label: {
-      type: [String, Array],
-      default: null
+      type: String,
+      required: true
     },
     value: {
       validator () {

packages/common/Dropdown/src/DropdownItem.vue

@@ -8,6 +8,10 @@ export default {
       default: false
     },
     name: {
+      type: String,
+      required: true
+    },
+    label: {
       type: String,
       default: undefined
     },
@@ -24,7 +28,7 @@ export default {
   render (h) {
     return h(NBaseSelectOption, {
       props: {
-        label: this.name,
+        label: this.$scopedSlots.default ? '' : (this.label || this.name),
         value: this.value
       },
       scopedSlots: this.$scopedSlots,

packages/common/Dropdown/src/DropdownMenu.vue

@@ -132,6 +132,22 @@ export default {
         })
       }
     },
+    handleKeyUpEnter () {
+      if (this.activeMenuInstance) {
+        if (this.activeMenuInstance.$refs.selectMenu) {
+          const selectMenu = this.activeMenuInstance.$refs.selectMenu
+          if (selectMenu.pendingOption) {
+            this.$emit('select', selectMenu.pendingOption.name)
+            this.controller.hide()
+          }
+        }
+      }
+    },
+    handleKeyUp (e) {
+      if (e.keyCode === 13) {
+        this.handleKeyUpEnter()
+      }
+    },
     handleKeyDown (e) {
       if (!this.NDropdownMenu) {
         if (e.keyCode === 37) this.handleKeyDownLeft()
@@ -165,7 +181,8 @@ export default {
       on: {
         keydown: this.handleKeyDown,
         mouseenter: this.handleMouseEnter,
-        blur: this.handleBlur
+        blur: this.handleBlur,
+        keyup: this.handleKeyUp
       }
     }, [
       h(NBaseSelectOptionCollector, {

packages/common/Dropdown/src/DropdownSubmenu.vue

@@ -2,6 +2,7 @@
   <n-dropdown-item
     ref="selectOption"
     :label="label"
+    name="n-dropdown-submenu-item"
     :value="value"
     as-submenu
     @mouseenter="handleMouseEnter"
@@ -11,7 +12,12 @@
       ref="activator"
       class="n-dropdown-submenu-activator"
     >
-      <slot name="activator" />
+      <slot name="activator">
+        {{ label }}
+      </slot>
+      <n-icon v-if="arrow" class="n-dropdown-submenu-activator__arrow">
+        <ios-arrow-forward />
+      </n-icon>
     </div>
     <transition
       name="n-fade-in-scale-up--transition"
@@ -34,12 +40,16 @@
 import NDropdownMenu from './DropdownMenu'
 import NDropdownItem from './DropdownItem'
 import themeable from '../../../mixins/themeable'
+import NIcon from '../../Icon'
+import iosArrowForward from '../../../icons/ios-arrow-forward'
 
 export default {
   name: 'NDropdownSubmenu',
   components: {
     NDropdownMenu,
-    NDropdownItem
+    NDropdownItem,
+    NIcon,
+    iosArrowForward
   },
   mixins: [themeable],
   provide () {
@@ -59,6 +69,10 @@ export default {
     }
   },
   props: {
+    arrow: {
+      type: Boolean,
+      default: true
+    },
     label: {
       type: String,
       default: undefined

packages/common/Popover/src/PopoverContent.js

@@ -64,6 +64,10 @@ export default {
     detachedContainerClass: {
       type: String,
       default: 'n-popover-detached-content-container'
+    },
+    detached: {
+      type: Boolean,
+      default: true
     }
   },
   mixins: [withapp, themeable, placeable, zindexable],
@@ -71,11 +75,6 @@ export default {
     clickoutside,
     mousemoveoutside
   },
-  inject: {
-    NBasePortal: {
-      default: null
-    }
-  },
   data () {
     return {
       internalActive: false,
@@ -96,9 +95,6 @@ export default {
     }
   },
   computed: {
-    detached () {
-      return this.NBasePortal.elementTransferred
-    },
     style () {
       const style = {}
       if (this.width) {

styles/BaseSelectMenu.scss

@@ -32,6 +32,7 @@
       z-index: 0;
       position: relative;
       border-radius: 6px;
+      transition: background-color .3s $default-cubic-bezier;
       @include b(base-select-menu-option-wrapper) {
         position: relative;
         width: 100%;
@@ -63,6 +64,7 @@
       position: relative;
       padding: 0px 14px;
       white-space: nowrap;
+      transition: color .3s $default-cubic-bezier;
       color: map-get($map: $--base-select-menu-option-color, $key: "default");
       @include m(selected) {
         color: map-get($map: $--base-select-menu-option-color, $key: "selected");
@@ -100,6 +102,7 @@
       }
     }
     @include b(base-select-menu-light-bar) {
+      transition: background-color .3s $default-cubic-bezier;
       position: absolute;
       width:100%;
       background-color: $--base-select-menu-light-bar-background-color;

styles/Divider.scss

@@ -16,7 +16,6 @@
           align-items: center;
         }
       }
-      
       @include e(title) {
         transition: color .3s $default-cubic-bezier;
         display: flex;

styles/Dropdown.scss

@@ -3,8 +3,23 @@
 
 @include themes-mixin {
   @include b(popover-content) {
+    @include b(dropdown-submenu-activator) {
+      @include e(arrow) {
+        fill: $--n-secondary-text-color;
+      }
+    }
     @include once {
       position: relative;
+      @include b(dropdown-submenu-activator) {
+        display: inline-block;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        @include e(arrow) {
+          position: relative;
+          right: -8px;
+        }
+      }
       @include b(dropdown-menu) {
         outline: none;
         @include b(base-select-menu) {
@@ -16,11 +31,23 @@
             @include b(base-select-option) {
               padding: 0 20px;
             }
+            @include b(dropdown-submenu-activator) {
+              @include e(arrow) {
+                font-size: 16px;
+                margin-left: 16px;
+              }
+            }
           }
           @include m(small-size) {
             @include b(base-select-option) {
               padding: 0 16px;
             }
+            @include b(dropdown-submenu-activator) {
+              @include e(arrow) {
+                font-size: 16px;
+                margin-left: 12px;
+              }
+            }
           }
           @include m(large-size, huge-size) {
             @include b(base-select-menu-option-wrapper) {
@@ -30,6 +57,12 @@
             @include b(base-select-option) {
               padding: 0 24px;
             }
+            @include b(dropdown-submenu-activator) {
+              @include e(arrow) {
+                font-size: 16px;
+                margin-left: 20px;
+              }
+            }
           }
           @include m(large-size) {
             @include b(base-select-menu-option-wrapper) {

styles/Popover.scss

@@ -22,6 +22,7 @@
   @include b(popover-content) {
     $popover-arrow-width: 6px;
     @include once {
+      transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
       @include popover-transition;
       transform-origin: inherit;
       transform: scale(.99999);
@@ -221,6 +222,7 @@
       box-shadow: $--popover-box-shadow;
     }
     @include b(popover-arrow) {
+      transition: border-color .3s $default-cubic-bezier;
       border-width: 6px;
       pointer-events: none;
       position: absolute;

think.md

@@ -50,6 +50,8 @@ confirm 有 bug = =...和 button 颜色相关，之后检查吧
 Radio Button 默认主题下是否 hollow out，这是个问题
 ## 2019.11.14
 base picker focus 问题
+## 2018.12.3
+Dropdown Submenu 定位问题
 ## TODO
 issue fix, add delay prop
 add trigger to tooltip