rename MultipleLabels to InputKeyValuePairs

demo/components/inputKeyValuePairsDemo/customInputKeyValuePairs.demo.vue

@@ -8,12 +8,12 @@
       style="flex-wrap: nowrap;"
     >
       <!--EXAMPLE_START-->
-      <n-multipleLabels
+      <n-input-key-value-pairs
         v-model="test1"
         title="Add CheckBox"
       >
-        <template slot-scope="slotProps">
-          <div>
+        <template v-slot="slotProps">
+          <div style="width:100%">
             <n-checkbox
               v-model="slotProps.item.isCheck"
               style="width: 120px;"
@@ -22,13 +22,13 @@
               v-model="slotProps.item.num"
             />
             <n-input
-              v-model="slotProps.item.dtring"
+              v-model="slotProps.item.string"
               type="input"
               size="small"
             />
           </div>
         </template>
-      </n-multipleLabels>
+      </n-input-key-value-pairs>
       <!--EXAMPLE_END-->
     </div>
     <pre class="n-doc-section__inspect">v-model: {{ test1 }}</pre>

demo/components/inputKeyValuePairsDemo/index.vue

@@ -11,21 +11,21 @@
     <div
       class="n-doc-body"
     >
-      <multiple-labels />
-      <customMultipleLabels />
+      <input-key-value-pairs />
+      <custom-input-key-value-pairs />
     </div>
   </div>
 </template>
 
 <script>
 
-import multipleLabels from './multipleLabels.demo.vue'
-import customMultipleLabels from './customMultipleLabels.demo.vue'
+import inputKeyValuePairs from './inputKeyValuePairs.demo.vue'
+import customInputKeyValuePairs from './customInputKeyValuePairs.demo.vue'
 
 export default {
   components: {
-    multipleLabels,
-    customMultipleLabels
+    inputKeyValuePairs,
+    customInputKeyValuePairs
   },
   data () {
     return {

demo/components/inputKeyValuePairsDemo/inputKeyValuePairs.demo.vue

@@ -8,7 +8,7 @@
       style="flex-wrap: nowrap;"
     >
       <!--EXAMPLE_START-->
-      <n-multipleLabels
+      <n-input-key-value-pairs
         v-model="test1"
         placeholder-key="placeholder1"
         placeholder-value="placeholder2"
@@ -29,7 +29,7 @@ export default {
       test1: [
         {
           key: 'key1',
-          value: 'key1'
+          value: 'value1'
         },
         {}
       ]

demo/demo.vue

@@ -103,6 +103,10 @@ export default {
               name: 'InputNumber',
               path: '/n-input-number'
             },
+            {
+              name: 'InputKeyValuePairs',
+              path: '/n-InputKeyValuePairs'
+            },
             {
               name: 'Message',
               path: '/n-message'
@@ -135,14 +139,6 @@ 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,7 +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 inputKeyValuePairsDemo from './components/inputKeyValuePairsDemo'
 import modalDemo from './components/modalDemo'
 import nimbusFormCardDemo from './components/nimbusFormCardDemo'
 import messageDemo from './components/messageDemo'
@@ -81,7 +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-InputKeyValuePairs', component: inputKeyValuePairsDemo },
       { path: '/n-modal', component: modalDemo },
       { path: '/n-nimbus-form-card', component: nimbusFormCardDemo },
       { path: '/n-message', component: messageDemo },

index.js

@@ -13,7 +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 InputKeyValuePairs from './packages/common/InputKeyValuePairs'
 import Modal from './packages/common/Modal'
 import Input from './packages/common/Input'
 import Message from './packages/common/Message'
@@ -75,7 +75,7 @@ function install (Vue) {
   NimbusIcon.install(Vue)
   Radio.install(Vue)
   Cascader.install(Vue)
-  MultipleLabels.install(Vue)
+  InputKeyValuePairs.install(Vue)
   Form.install(Vue)
   Tab.install(Vue)
   TimePicker.install(Vue)

packages/common/Checkbox/src/main.vue

@@ -27,7 +27,7 @@ export default {
     },
     value: {
       type: Boolean,
-      required: true
+      default: false
     },
     disabled: {
       type: Boolean,

packages/common/InputKeyValuePairs/index.js

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

packages/common/InputKeyValuePairs/src/main.vue

@@ -1,31 +1,39 @@
 <template>
-  <div class="n-multiple-labels">
+  <div class="n-input-key-value">
     <div
       v-for="(item, index) in value"
       :key="index"
-      class="n-multiple-labels__item"
+      class="n-input-key-value__item"
     >
-      <p class="n-multiple-labels__item--title">
+      <p class="n-input-key-value__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">
+      <div class="n-input-key-value__item--container">
+        <div class="n-input-key-value__item--content">
+          <slot :item="item">
+            <div
+              ref="default"
+              class="n-input-key-value__item--input--container"
+            >
+              <n-input
+                v-model="item.key"
+                class="n-input-key-value__item--input"
+                :placeholder="placeholderKey"
+                @focus="checkValue"
+              />
+              <n-input
+                v-model="item.value"
+                class="n-input-key-value__item--input"
+                :placeholder="placeholderValue"
+                @focus="checkValue"
+              />
+            </div>
+          </slot>
+        </div>
+        <div class="n-input-key-value__item--action">
           <!-- <span> -->
           <n-icon
-            class="n-multiple-labels__item--action--add"
+            class="n-input-key-value__item--action--add"
             type="md-remove-circle"
             size="30"
             color="#C0818B"
@@ -33,7 +41,7 @@
           />
           <n-icon
             v-if="index==value.length-1"
-            class="n-multiple-labels__item--action--remove"
+            class="n-input-key-value__item--action--remove"
             type="md-add-circle"
             size="30"
             color="#4DB199"
@@ -51,7 +59,7 @@
 <script>
 
 export default {
-  name: 'NMultipleLabels',
+  name: 'NInputKeyValuePairs',
   model: {
     prop: 'value',
     event: 'input'
@@ -95,13 +103,18 @@ export default {
   },
   computed: {
 
+  },
+  watch: {
+    // value () {
+    //   this.checkValue()
+    // }
+  },
+  mounted () {
+    // this.checkValue()
   },
   methods: {
     add () {
-      this.value.push({
-        key: '',
-        value: ''
-      })
+      this.value.push({})
     },
     remove (index) {
       if (index === 0) {
@@ -119,6 +132,18 @@ export default {
         return
       }
       this.value.splice(index, 1)
+    },
+    checkValue () {
+      let self = this
+      if (this.$refs.default) {
+        this.value.map((item, index) => {
+          let result = {
+            key: item.key ? item.key : '',
+            value: item.value ? item.value : ''
+          }
+          self.$set(this.value, index, result)
+        })
+      }
     }
   }
 }

packages/common/MultipleLabels/index.js

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

styles/InputKeyValuePairs.scss

@@ -0,0 +1,37 @@
+.n-input-key-value {
+  width: 100%;
+  .n-input-key-value__item {
+    margin-bottom: 30px;
+    .n-input-key-value__item--title {
+      display: block;
+      margin: 0 0 8px;
+    }
+    .n-input-key-value__item--container {
+      display: flex;
+      .n-input-key-value__item--content {
+        flex: 1;
+        display: inline-block;
+        display: flex;
+      }
+      .n-input-key-value__item--input--container {
+        width: 100%;
+        display: flex;
+        .n-input-key-value__item--input {
+          display: inline-block;
+          flex: 1;
+        }
+      }
+      
+      .n-input-key-value__item--input:first-child {
+        margin-right: 13px;
+      }
+      .n-input-key-value__item--action {
+        width: 70px;
+        display: inline-block;
+        align-items: center;
+        display: flex;
+        margin-left: 13px;
+      }
+    }
+  }
+}

styles/MultipleLabels.scss

@@ -1,23 +0,0 @@
-.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,7 +14,7 @@
 @import "./Input.scss";
 @import "./Select.scss";
 @import "./Cascader.scss";
-@import "./MultipleLabels.scss";
+@import "./InputKeyValuePairs.scss";
 @import "./Message.scss";
 @import "./Tooltip.scss";
 @import "./Notification.scss";