feat(components): add dropdown component

example/App.vue

@@ -144,6 +144,21 @@
       <emqx-breadcrumb-item>活动详情</emqx-breadcrumb-item>
     </emqx-breadcrumb>
   </div>
+  <h2>Dropdown</h2>
+  <div class="show-item">
+    <emqx-dropdown trigger="click">
+      <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span>
+      <template #dropdown>
+        <emqx-dropdown-menu>
+          <emqx-dropdown-item>黄金糕</emqx-dropdown-item>
+          <emqx-dropdown-item>狮子头</emqx-dropdown-item>
+          <emqx-dropdown-item>螺蛳粉</emqx-dropdown-item>
+          <emqx-dropdown-item disabled>双皮奶</emqx-dropdown-item>
+          <emqx-dropdown-item divided>蚵仔煎</emqx-dropdown-item>
+        </emqx-dropdown-menu>
+      </template>
+    </emqx-dropdown>
+  </div>
   <h2>Upload</h2>
   <div class="show-item">
     <emqx-upload drag action="https://jsonplaceholder.typicode.com/posts/" multiple>

package.json

@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "element-plus": "^1.0.2-beta.35"
+    "element-plus": "^1.0.2-beta.40"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

packages/Dropdown/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Dropdown from './src/dropdown.vue'
+
+Dropdown.install = (Vue: App): void => {
+  Vue.component(Dropdown.name, Dropdown)
+}
+
+export default Dropdown

packages/Dropdown/src/dropdown.vue

@@ -0,0 +1,20 @@
+<template>
+  <el-dropdown class="emqx-dropdown">
+    <slot></slot>
+    <template v-if="$slots.dropdown" #dropdown>
+      <slot name="dropdown"></slot>
+    </template>
+  </el-dropdown>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { ElDropdown } from 'element-plus'
+
+export default defineComponent({
+  name: 'EmqxDropdown',
+  components: {
+    ElDropdown,
+  },
+})
+</script>

packages/DropdownItem/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import DropdownItem from './src/dropdownItem.vue'
+
+DropdownItem.install = (Vue: App): void => {
+  Vue.component(DropdownItem.name, DropdownItem)
+}
+
+export default DropdownItem

packages/DropdownItem/src/dropdownItem.vue

@@ -0,0 +1,17 @@
+<template>
+  <el-dropdown-item class="emqx-dropdown-item">
+    <slot></slot>
+  </el-dropdown-item>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { ElDropdownItem } from 'element-plus'
+
+export default defineComponent({
+  name: 'EmqxDropdownItem',
+  components: {
+    ElDropdownItem,
+  },
+})
+</script>

packages/DropdownMenu/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import DropdownMenu from './src/dropdownMenu.vue'
+
+DropdownMenu.install = (Vue: App): void => {
+  Vue.component(DropdownMenu.name, DropdownMenu)
+}
+
+export default DropdownMenu

packages/DropdownMenu/src/dropdownMenu.vue

@@ -0,0 +1,17 @@
+<template>
+  <el-dropdown-menu class="emqx-dropdown-menu">
+    <slot></slot>
+  </el-dropdown-menu>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { ElDropdownMenu } from 'element-plus'
+
+export default defineComponent({
+  name: 'EmqxDropdownMenu',
+  components: {
+    ElDropdownMenu,
+  },
+})
+</script>

packages/index.ts

@@ -31,6 +31,9 @@ import Loading from './Loading'
 import Avatar from './Avatar'
 import Checkbox from './Checkbox'
 import Radio from './Radio'
+import Dropdown from './Dropdown'
+import DropdownMenu from './DropdownMenu'
+import DropdownItem from './DropdownItem'
 
 import lang from 'element-plus/lib/locale/lang/zh-cn'
 import locale from 'element-plus/lib/locale'
@@ -73,6 +76,9 @@ const components = [
   Avatar,
   Checkbox,
   Radio,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
 ]
 
 const plugins = [Loading]
@@ -121,6 +127,9 @@ const packages = {
   Avatar,
   Checkbox,
   Radio,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
 }
 
 export const EmqxMessage = Message

packages/styles/components/dropdown.scss

@@ -0,0 +1,9 @@
+.el-dropdown__popper.el-popper[role="tooltip"] {
+  border-radius: 8px;
+  .el-popper__arrow {
+    display: none;
+  }
+  .el-dropdown-menu {
+    border-radius: 8px;
+  }
+}

packages/styles/components/index.scss

@@ -12,3 +12,4 @@
 @import "menu-item.scss";
 @import "select.scss";
 @import "tags.scss";
+@import "dropdown.scss";

yarn.lock

@@ -1033,6 +1033,11 @@
   resolved "https://registry.npm.taobao.org/@types/json-schema/download/@types/json-schema-7.0.7.tgz?cache=0&sync_timestamp=1613378919536&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fjson-schema%2Fdownload%2F%40types%2Fjson-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
   integrity sha1-mKmTUWyFnrDVxMjwmDF6nqaNua0=
 
+"@types/lodash@^4.14.161":
+  version "4.14.168"
+  resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008"
+  integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==
+
 "@types/mime@^1":
   version "1.3.2"
   resolved "https://registry.npm.taobao.org/@types/mime/download/@types/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
@@ -3661,12 +3666,13 @@ elegant-spinner@^1.0.1:
   resolved "https://registry.npm.taobao.org/elegant-spinner/download/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
   integrity sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=
 
-element-plus@^1.0.2-beta.35:
-  version "1.0.2-beta.35"
-  resolved "https://registry.npm.taobao.org/element-plus/download/element-plus-1.0.2-beta.35.tgz#158890bddf28f8495f261d02789bf394c5c97123"
-  integrity sha1-FYiQvd8o+ElfJh0CeJvzlMXJcSM=
+element-plus@^1.0.2-beta.40:
+  version "1.0.2-beta.40"
+  resolved "https://registry.npmjs.org/element-plus/-/element-plus-1.0.2-beta.40.tgz#30fc9b161496ae587fab86235c80b728ea43d909"
+  integrity sha512-8S7JbBpJLUa3ggexuKuKeyrTo451gMDHa/BKJVFiHSyexcHPgnHQwHf2nIoZvY1w6FzmZPdBdZ3NoDLXu51SIw==
   dependencies:
     "@popperjs/core" "^2.4.4"
+    "@types/lodash" "^4.14.161"
     async-validator "^3.4.0"
     dayjs "1.x"
     lodash "^4.17.20"