chore: checkpoint

demo/components/ColumnGroup.vue

@@ -0,0 +1,42 @@
+u<template>
+  <div class="doc">
+    <h1>一堆列 / n-column-group</h1>
+    <hr>
+    <h2>基本用法</h2>
+    <n-n-column-group cols="4">
+      <template v-slot:col(1)>
+        666
+      </template>
+      <template v-slot:col(2)>
+        666
+      </template>
+      <template v-slot:col(3)>
+        666
+      </template>
+      <template v-slot:col(4)>
+        666
+      </template>
+    </n-n-column-group>
+    <br>
+    <textarea rows="5">scaffold</textarea>
+    <hr>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped lang="scss">
+.doc {
+  width: 900px;
+  margin: auto;
+  textarea {
+    width: 100%;
+    min-height: 3em;
+  }
+}
+
+</style>

demo/components/selectDemo.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="doc">
-    <h1>scaffold</h1>
+    <h1>选择 / n-select</h1>
     <hr>
     <h2>基本用法</h2>
-    <n-dropdown
+    <n-select
       v-model="selectedValue"
       placeholder="Please Select Type"
       :items="[
@@ -26,7 +26,7 @@
       ]"
     />
     <br>SelectedValue: {{ selectedValue === null ? 'null' : selectedValue }}<br>
-    <textarea rows="40"><n-dropdown
+    <textarea rows="40"><n-select
   v-model="selectedValue"
   placeholder="Please Select Type"
   :items="[
@@ -49,6 +49,30 @@
   ]"
 /></textarea>
     <hr>
+    <h2>多选</h2>
+    <n-select
+      v-model="selectedArray"
+      multiple
+      placeholder="Please Select Type"
+      :items="[
+        {
+          label: 'Artifactory',
+          value: 'Artifactory'
+        },
+        {
+          label: 'Registry',
+          value: 'Registry'
+        },
+        {
+          label: 'Public',
+          value: 'Public'
+        },
+        {
+          label: 'Custom',
+          value: 'Custom'
+        }
+      ]"
+    />
   </div>
 </template>
 
@@ -56,7 +80,8 @@
 export default {
   data () {
     return {
-      selectedValue: null
+      selectedValue: null,
+      selectedArray: []
     }
   }
 }

demo/demo.vue

@@ -39,8 +39,8 @@
         输入 / n-input
       </router-link>
       <br>
-      <router-link to="/n-dropdown">
-        下拉框 / n-dropdown
+      <router-link to="/n-select">
+        选择 / n-select
       </router-link>
     </div>
   </div>

demo/index.js

@@ -15,7 +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 Select from '../packages/common/Select'
 
 import ServiceCard from 'packages/nimbus/ServiceCard'
 import HomeLayout from 'packages/nimbus/HomeLayout'
@@ -31,7 +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 selectDemo from './components/selectDemo'
 import demo from './demo'
 
 Vue.use(VueRouter)
@@ -53,7 +53,7 @@ Checkbox.install(Vue)
 RoundButton.install(Vue)
 Switch.install(Vue)
 Input.install(Vue)
-Dropdown.install(Vue)
+Select.install(Vue)
 
 const routes = [
   { path: '/', component: demo },
@@ -66,7 +66,7 @@ const routes = [
   { path: '/n-switch', component: switchDemo },
   { path: '/n-table', component: tableDemo },
   { path: '/n-input', component: inputDemo },
-  { path: '/n-dropdown', component: dropdownDemo }
+  { path: '/n-select', component: selectDemo }
 ]
 
 const router = new VueRouter({

index.js

@@ -10,7 +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 Select from './packages/common/Select'
 
 import ServiceCard from './packages/nimbus/ServiceCard'
 import HomeLayout from './packages/nimbus/HomeLayout'
@@ -34,7 +34,7 @@ function installUiToVue (Vue) {
   CheckBox.install(Vue)
   RoundButton.install(Vue)
   Switch.install(Vue)
-  Dropdown.install(Vue)
+  Select.install(Vue)
 }
 
 export default installUiToVue

packages/common/ColumnGroup/src/main.vue

@@ -2,7 +2,7 @@
   <div class="n-column-group">
     <div class="columns">
       <div
-        v-for="index in cols"
+        v-for="index in colIndexes"
         :key="index"
         class="column"
       >
@@ -16,18 +16,18 @@
 export default {
   name: 'NColumnGroup',
   props: {
-    col: {
+    cols: {
       type: Number,
       required: true
     }
   },
   computed: {
-    cols () {
-      const colIndexes = []
+    colIndexes () {
+      const indexes = []
       for (let i = 0; i < this.col; ++i) {
-        colIndexes.push(i + 1)
+        indexes.push(i + 1)
       }
-      return colIndexes
+      return indexes
     }
   }
 }

packages/common/Dropdown/index.js

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

packages/common/Dropdown/src/main.vue

@@ -1,87 +0,0 @@
-<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>

packages/common/Select/index.js

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

packages/common/Select/src/main.vue

@@ -0,0 +1,126 @@
+<template>
+  <div
+    class="n-select"
+    :class="{ active: active }"
+    @click="toggleSelect"
+  >
+    <div
+      v-if="multiple"
+      class="link"
+    >
+      <div
+        v-if="selected"
+        class="tags"
+      >
+        <div
+          v-for="item in selectedItems"
+          :key="item.value"
+        >
+          {{ item.value }}
+        </div>
+      </div><div
+        v-else
+        class="tags placeholder"
+      >
+        {{ placeholder }}
+      </div>
+      <div class="menu">
+        <div
+          v-for="item in items"
+          :key="item.value"
+          class="item"
+          @click="toggle(item)"
+        >
+          {{ item.label }}
+        </div>
+      </div>
+    </div>
+    <div
+      v-else
+      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: 'NSelect',
+  model: {
+    prop: 'selectedValue',
+    event: 'change'
+  },
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    // eslint-disable-next-line vue/require-prop-types
+    selectedValue: {
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: 'Please Select'
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      active: false,
+      selected: false,
+      selectedItems: [],
+      selectedItemValues: new Set()
+    }
+  },
+  methods: {
+    toggleSelect () {
+      this.active = !this.active
+    },
+    select (item) {
+      this.$emit('change', item.value)
+      this.selected = true
+    },
+    toggle (item) {
+      const index = this.selectedItems.findIndex(selectedItem => selectedItem.value === item.value)
+      if (1 + index) {
+        this.selectedItems.splice(index, 1)
+        this.selectedItemValues.delete(item.value)
+      } else {
+        this.selectedItems.push(item)
+        this.selectedItemValues.add(item.value)
+      }
+      if (this.selectedItems.length) {
+        this.selected = true
+      } else {
+        this.selected = false
+      }
+      this.$emit('change', this.selectedItems)
+    }
+  }
+}
+</script>

styles/Select.scss

@@ -1,12 +1,12 @@
 @import './mixins/mixins.scss';
 @import './theme/default.scss';
 
-@include b(dropdown) {
+@include b(select) {
   box-sizing: border-box;
   display: inline-block;
   border: none;
   border-radius: 9px;
-  padding: 10px 14px;
+  padding: 8px 14px;
   outline: none;
   background-color: #6F768B;
   font-size: 14px;
@@ -46,6 +46,11 @@
         color: rgba(255, 255, 255, .4);
       }
     }
+    .tags {
+      &.placeholder {
+        color: rgba(255, 255, 255, .4);
+      }
+    }
     .menu {
       overflow: hidden;
       position: absolute;

styles/index.scss

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