feat: dropdown

demo/components/dropdownDemo.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="doc">
+    <h1>scaffold</h1>
+    <hr>
+    <h2>基本用法</h2>
+    <n-dropdown
+      v-model="selectedValue"
+      placeholder="Please Select Type"
+    />
+    <br>SelectedValue: {{ selectedValue === null ? 'null' : selectedValue }}<br>
+    <textarea rows="5"><n-dropdown
+  v-model="selectedValue"
+  placeholder="Please Select Type"
+/></textarea>
+    <hr>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      selectedValue: null
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.doc {
+  width: 900px;
+  margin: auto;
+  background-color: #5C657E;
+  min-height: 900px;
+  padding: 0px 40px;
+  textarea {
+    width: 100%;
+    min-height: 3em;
+  }
+}
+
+</style>

demo/demo.vue

@@ -38,6 +38,10 @@
       <router-link to="/n-input">
         输入 / n-input
       </router-link>
+      <br>
+      <router-link to="/n-dropdown">
+        下拉框 / n-dropdown
+      </router-link>
     </div>
   </div>
 </template>

demo/index.js

@@ -15,6 +15,7 @@ import Checkbox from 'packages/common/Checkbox'
 import RoundButton from 'packages/common/RoundButton'
 import Switch from '../packages/common/Switch'
 import Input from '../packages/common/Input'
+import Dropdown from '../packages/common/Dropdown'
 
 import ServiceCard from 'packages/nimbus/ServiceCard'
 import HomeLayout from 'packages/nimbus/HomeLayout'
@@ -30,6 +31,7 @@ import roundButtonDemo from './components/roundButtonDemo'
 import switchDemo from './components/switchDemo'
 import tableDemo from './components/tableDemo'
 import inputDemo from './components/inputDemo'
+import dropdownDemo from './components/dropdownDemo'
 import demo from './demo'
 
 Vue.use(VueRouter)
@@ -51,6 +53,7 @@ Checkbox.install(Vue)
 RoundButton.install(Vue)
 Switch.install(Vue)
 Input.install(Vue)
+Dropdown.install(Vue)
 
 const routes = [
   { path: '/', component: demo },
@@ -62,7 +65,8 @@ const routes = [
   { path: '/n-round-button', component: roundButtonDemo },
   { path: '/n-switch', component: switchDemo },
   { path: '/n-table', component: tableDemo },
-  { path: '/n-input', component: inputDemo }
+  { path: '/n-input', component: inputDemo },
+  { path: '/n-dropdown', component: dropdownDemo }
 ]
 
 const router = new VueRouter({

index.js

@@ -10,6 +10,7 @@ import Table from './packages/common/Table'
 import CheckBox from './packages/common/Checkbox'
 import RoundButton from './packages/common/RoundButton'
 import Switch from './packages/common/Switch'
+import Dropdown from './packages/common/Dropdown'
 
 import ServiceCard from './packages/nimbus/ServiceCard'
 import HomeLayout from './packages/nimbus/HomeLayout'
@@ -33,6 +34,7 @@ function installUiToVue (Vue) {
   CheckBox.install(Vue)
   RoundButton.install(Vue)
   Switch.install(Vue)
+  Dropdown.install(Vue)
 }
 
 export default installUiToVue

packages/common/Dropdown/index.js

@@ -0,0 +1,7 @@
+import Dropdown from './src/main.vue'
+
+Dropdown.install = function (Vue) {
+  Vue.component(Dropdown.name, Dropdown)
+}
+
+export default Dropdown

packages/common/Dropdown/src/main.vue

@@ -0,0 +1,87 @@
+<template>
+  <div
+    class="n-dropdown"
+    :class="{ active: active }"
+    @click="toggleDropdown"
+  >
+    <div class="link">
+      <div
+        v-if="selected"
+        class="label"
+      >
+        {{ selectedValue }}
+      </div><div
+        v-else
+        class="label placeholder"
+      >
+        {{ placeholder }}
+      </div>
+      <div class="menu">
+        <div
+          v-for="item in items"
+          :key="item.value"
+          class="item"
+          @click="select(item)"
+        >
+          {{ item.label }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NDropdown',
+  model: {
+    prop: 'selectedValue',
+    event: 'change'
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [
+        {
+          label: 'Artifactory',
+          value: 'Artifactory'
+        },
+        {
+          label: 'Registry',
+          value: 'Registry'
+        },
+        {
+          label: 'Public',
+          value: 'Public'
+        },
+        {
+          label: 'Custom',
+          value: 'Custom'
+        }
+      ]
+    },
+    selectedValue: {
+      type: String,
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: 'Please Select'
+    }
+  },
+  data () {
+    return {
+      active: false,
+      selected: false
+    }
+  },
+  methods: {
+    toggleDropdown () {
+      this.active = !this.active
+    },
+    select (item) {
+      this.$emit('change', item.value)
+      this.selected = true
+    }
+  }
+}
+</script>

styles/Dropdown.scss

@@ -0,0 +1,69 @@
+@import './mixins/mixins.scss';
+@import './theme/default.scss';
+
+@include b(dropdown) {
+  box-sizing: border-box;
+  display: inline-block;
+  border: none;
+  border-radius: 9px;
+  padding: 10px 14px;
+  outline: none;
+  background-color: #6F768B;
+  font-size: 14px;
+  line-height: 20px;
+  width: 100%;
+  color: #fff;
+  font-family: $default-font-family;
+  cursor: pointer;
+  &.active {
+    border: 1px solid #63E2B7;
+    margin: -1px;
+    .link {
+      &::after {
+        transform: rotate(135deg);
+      }
+      .menu {
+        visibility: visible;
+      }
+    }
+  }
+  .link {
+    position: relative;
+    &::after {
+      position: absolute;
+      content: '';
+      width: 6px;
+      height: 6px;
+      border-left: 1px solid rgba(255, 255, 255, .4);
+      border-bottom: 1px solid rgba(255, 255, 255, .4);
+      right: 2px;
+      top: calc(50% - 5px);
+      transform: rotate(-45deg);
+      transform-origin: 25% 75%;
+    }
+    .label {
+      &.placeholder {
+        color: rgba(255, 255, 255, .4);
+      }
+    }
+    .menu {
+      overflow: hidden;
+      position: absolute;
+      visibility: hidden;
+      top: calc(100% + 15px);
+      left: -14px;
+      right: -14px;
+      border-radius: 9px;
+      background-color: rgba(75, 81, 106, 1);
+      box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.16);
+      .item {
+        padding: 8px 14px;
+        color: rgba(255, 255, 255, .7);
+        &:hover {
+          background-color: rgba(96, 220, 178, 0.3);
+          color: #63E2B7;
+        }
+      }
+    }
+  }
+}

styles/Input.scss

@@ -12,7 +12,7 @@
     font-size: 14px;
     line-height: 20px;
     color: #fff;
-    font-family: 'Open Sans';
+    font-family: $default-font-family;
     width: 100%;
     caret-color: #63E2B7;
     &::placeholder {
@@ -30,7 +30,7 @@
     font-size: 14px;
     line-height: 20px;
     color: #fff;
-    font-family: 'Open Sans';
+    font-family: $default-font-family;
     width: 100%;
     resize: vertical;
     caret-color: #63E2B7;

styles/base.scss

@@ -3,7 +3,7 @@
 
 body {
   margin: 0;
-  font-family: 'Open Sans';
+  font-family: $default-font-family;
   min-width: 1280px;
   background: $body-background-color;
   color: $primary-text-color;

styles/index.scss

@@ -12,5 +12,6 @@
 @import './RoundButton.scss';
 @import './Switch.scss';
 @import './Input.scss';
+@import './Dropdown.scss';
 
 @import './NimbusServiceLayout.scss';

styles/theme/default.scss

@@ -23,4 +23,6 @@ $default-button-text-color: #63E2B7;
 $default-button-hover-text-color: #1F263E;
 $default-button-background-color: #63E2B7;
 
-$default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
+$default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
+
+$default-font-family: 'Open Sans';