Merge branch 'develop' of ***REMOVED*** into develop

demo/components/multipleLabelsDemo/customMultipleLabels.demo.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="n-doc-section">
+    <div class="n-doc-section__header">
+      Custom Multiple Labels
+    </div>
+    <div
+      class="n-doc-section__view"
+      style="flex-wrap: nowrap;"
+    >
+      <!--EXAMPLE_START-->
+      <n-multipleLabels
+        v-model="test1"
+        title="Add CheckBox"
+      >
+        <template slot-scope="slotProps">
+          <div>
+            <n-checkbox
+              v-model="slotProps.item.isCheck"
+              style="width: 120px;"
+            />
+            <n-input-number
+              v-model="slotProps.item.num"
+            />
+            <n-input
+              v-model="slotProps.item.dtring"
+              type="input"
+              size="small"
+            />
+          </div>
+        </template>
+      </n-multipleLabels>
+      <!--EXAMPLE_END-->
+    </div>
+    <pre class="n-doc-section__inspect">v-model: {{ test1 }}</pre>
+    <n-doc-source-block>
+      <!--SOURCE-->
+    </n-doc-source-block>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      test1: [
+        {
+          isCheck: true
+        }
+      ]
+    }
+  }
+}
+</script>

demo/components/multipleLabelsDemo/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    ref="doc"
+    class="n-doc"
+  >
+    <div class="n-doc-header">
+      <n-gradient-text :font-size="20">
+        Select / n-select
+      </n-gradient-text>
+    </div>
+    <div
+      class="n-doc-body"
+    >
+      <multiple-labels />
+      <customMultipleLabels />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import multipleLabels from './multipleLabels.demo.vue'
+import customMultipleLabels from './customMultipleLabels.demo.vue'
+
+export default {
+  components: {
+    multipleLabels,
+    customMultipleLabels
+  },
+  data () {
+    return {
+      selectedValue: null,
+      selectedArray: [],
+      items: [
+        {
+          label: 'ArtifactoryLabel',
+          value: 'Artifactory'
+        },
+        {
+          label: 'Registry',
+          value: 'Registry'
+        },
+        {
+          label: 'Public',
+          value: 'Public'
+        },
+        {
+          label: 'Custom',
+          value: 'Custom'
+        }
+      ],
+      items2: [
+        {
+          label: 'Drive My Car',
+          children: [
+            {
+              label: 'test1',
+              value: 'test1'
+            },
+            {
+              label: 'test2',
+              value: 'test2'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    handleChange (newValue) {
+      alert(String(newValue))
+    },
+    handleChange2 (newValue) {
+      alert(JSON.stringify(newValue))
+    }
+  }
+}
+</script>

demo/components/multipleLabelsDemo/multipleLabels.demo.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="n-doc-section">
+    <div class="n-doc-section__header">
+      Multiple Labels
+    </div>
+    <div
+      class="n-doc-section__view"
+      style="flex-wrap: nowrap;"
+    >
+      <!--EXAMPLE_START-->
+      <n-multipleLabels
+        v-model="test1"
+        placeholder-key="placeholder1"
+        placeholder-value="placeholder2"
+      />
+      <!--EXAMPLE_END-->
+    </div>
+    <pre class="n-doc-section__inspect">v-model: {{ test1 }}</pre>
+    <n-doc-source-block>
+      <!--SOURCE-->
+    </n-doc-source-block>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      test1: [
+        {
+          key: 'key1',
+          value: 'key1'
+        },
+        {}
+      ]
+    }
+  }
+}
+</script>

demo/demo.vue

@@ -135,6 +135,14 @@ export default {
               name: 'Select',
               path: '/n-select'
             },
+            {
+              name: 'Cascader',
+              path: '/n-cascader'
+            },
+            {
+              name: 'MultipleLabels',
+              path: '/n-MultipleLabels'
+            },
             {
               name: 'Steps',
               path: '/n-steps'

demo/index.js

@@ -17,6 +17,7 @@ import advanceTableDemo from './components/advanceTableDemo'
 import inputDemo from './components/inputDemo'
 import selectDemo from './components/selectDemo'
 import cascaderDemo from './components/cascaderDemo'
+import multipleLabelsDemo from './components/multipleLabelsDemo'
 import modalDemo from './components/modalDemo'
 import nimbusFormCardDemo from './components/nimbusFormCardDemo'
 import messageDemo from './components/messageDemo'
@@ -80,6 +81,7 @@ const routes = [
       { path: '/n-input', component: inputDemo },
       { path: '/n-select', component: selectDemo },
       { path: '/n-cascader', component: cascaderDemo },
+      { path: '/n-MultipleLabels', component: multipleLabelsDemo },
       { path: '/n-modal', component: modalDemo },
       { path: '/n-nimbus-form-card', component: nimbusFormCardDemo },
       { path: '/n-message', component: messageDemo },
@@ -97,7 +99,6 @@ const routes = [
       { path: '/n-tab', component: tabDemo },
       { path: '/n-time-picker', component: timePickerDemo },
       { path: '/n-confirm', component: confirmDemo },
-
       { path: '/n-router-debug', component: routerDebug },
       { path: '/n-modal-debug', component: modalDebug },
       { path: '/n-scrollbar-debug', component: scrollbarDebug },

index.js

@@ -13,6 +13,7 @@ import RoundButton from './packages/common/Button'
 import Switch from './packages/common/Switch'
 import Select from './packages/common/Select'
 import Cascader from './packages/common/Cascader'
+import MultipleLabels from './packages/common/MultipleLabels'
 import Modal from './packages/common/Modal'
 import Input from './packages/common/Input'
 import Message from './packages/common/Message'
@@ -75,6 +76,7 @@ function install (Vue) {
   NimbusIcon.install(Vue)
   Radio.install(Vue)
   Cascader.install(Vue)
+  MultipleLabels.install(Vue)
   Form.install(Vue)
   Tab.install(Vue)
   TimePicker.install(Vue)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.2.77",
+  "version": "0.2.78",
   "description": "",
   "main": "index.js",
   "scripts": {

packages/common/Cascader/src/MultipleCascader.vue

@@ -85,7 +85,7 @@ import toggleable from '../../../mixins/toggleable'
 import CasPanel from './CasPanel'
 
 export default {
-  name: 'MutipleCascader',
+  name: 'MultipleCascader',
   components: {
     NIcon,
     CasPanel

packages/common/Cascader/src/main.vue

@@ -2,7 +2,7 @@
 /**
  * Warning: There are some potential problems if there are too many items!
  */
-import MutipleCascader from './MutipleCascader'
+import MultipleCascader from './MultipleCascader'
 
 export default {
   name: 'NCascader',
@@ -70,7 +70,7 @@ export default {
       change: this.handleChange.bind(this),
       setactive: this.handleSetActive.bind(this)
     }
-    return h(MutipleCascader, {
+    return h(MultipleCascader, {
       props: { ...this.$props, active: this.active, placement: 'bottom-start', widthMode: 'activator' },
       on
     })

packages/common/MultipleLabels/index.js

@@ -0,0 +1,8 @@
+/* istanbul ignore file */
+import MultipleLabels from './src/main.vue'
+
+MultipleLabels.install = function (Vue) {
+  Vue.component(MultipleLabels.name, MultipleLabels)
+}
+
+export default MultipleLabels

packages/common/MultipleLabels/src/main.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="n-multiple-labels">
+    <div
+      v-for="(item, index) in value"
+      :key="index"
+      class="n-multiple-labels__item"
+    >
+      <p class="n-multiple-labels__item--title">
+        {{ title }}
+      </p>
+      <div class="n-multiple-labels__item--content">
+        <slot :item="item">
+          <n-input
+            v-model="item.key"
+            class="n-multiple-labels__item--input"
+            :placeholder="placeholderKey"
+          />
+          <n-input
+            v-model="item.value"
+            class="n-multiple-labels__item--input"
+            :placeholder="placeholderValue"
+          />
+        </slot>
+
+        <div class="n-multiple-labels__item--action">
+          <!-- <span> -->
+          <n-icon
+            class="n-multiple-labels__item--action--add"
+            type="md-remove-circle"
+            size="30"
+            color="#C0818B"
+            @click="remove(index)"
+          />
+          <n-icon
+            v-if="index==value.length-1"
+            class="n-multiple-labels__item--action--remove"
+            type="md-add-circle"
+            size="30"
+            color="#4DB199"
+            @click="add"
+          />
+        <!-- </span> -->
+        </div>
+      </div>
+
+      <!-- {{ value }} -->
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'NMultipleLabels',
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => {
+        return [{
+          key: '',
+          value: ''
+        } ]
+      }
+    },
+    title: {
+      type: String,
+      default: 'Label'
+    },
+    placeholderKey: {
+      type: String,
+      default: 'Key'
+    },
+    placeholderValue: {
+      type: String,
+      default: 'Value'
+    }
+  },
+  data () {
+    return {
+      labels: [
+        {
+          key: 'key1',
+          value: 'value1'
+        },
+        {
+          key: 'key2',
+          value: 'value2'
+        }
+      ]
+    }
+  },
+  computed: {
+
+  },
+  methods: {
+    add () {
+      this.value.push({
+        key: '',
+        value: ''
+      })
+    },
+    remove (index) {
+      if (index === 0) {
+        Object.keys(this.value[0]).forEach((key) => {
+          let type = typeof (this.value[0][key])
+          switch (type) {
+            case 'boolean':
+              this.$set(this.value[0], key, false)
+              break
+            default:
+              this.$set(this.value[0], key, null)
+              break
+          }
+        })
+        return
+      }
+      this.value.splice(index, 1)
+    }
+  }
+}
+</script>

styles/MultipleLabels.scss

@@ -0,0 +1,23 @@
+.n-multiple-labels {
+  .n-multiple-labels__item {
+    margin-bottom: 30px;
+    .n-multiple-labels__item--title {
+      display: block;
+      margin: 0 0 8px;
+    }
+    .n-multiple-labels__item--content {
+      display: flex;
+      .n-multiple-labels__item--input {
+        flex: 2;
+        display: inline-block;
+        margin-right: 13px;
+      }
+      .n-multiple-labels__item--action {
+        flex: 1;
+        display: inline-block;
+        align-items: center;
+        display: flex;
+      }
+    }
+  }
+}

styles/index.scss

@@ -14,6 +14,7 @@
 @import "./Input.scss";
 @import "./Select.scss";
 @import "./Cascader.scss";
+@import "./MultipleLabels.scss";
 @import "./Message.scss";
 @import "./Tooltip.scss";
 @import "./Notification.scss";