feat(badge): add basic badge component

demo/components/badgeDemo/scaffold.demo.vue

@@ -8,10 +8,70 @@
       style="flex-wrap: nowrap;"
     >
       <!--EXAMPLE_START-->
-      Write some demo here
+      <n-badge
+        :value="value"
+        :max="10"
+        style="margin-right: 24px;"
+      >
+        <n-icon
+          type="ios-alarm"
+          :size="24"
+        />
+      </n-badge>
+      <n-badge
+        dot
+        style="margin-right: 24px;"
+      >
+        <n-icon
+          type="ios-alarm"
+          :size="24"
+        />
+      </n-badge>
+      <n-badge
+        :value="value"
+        type="error"
+        style="margin-right: 24px;"
+      >
+        <n-icon
+          type="ios-alarm"
+          :size="24"
+        />
+      </n-badge>
+      <n-badge
+        :value="value"
+        type="info"
+        style="margin-right: 24px;"
+      >
+        <n-icon
+          type="ios-alarm"
+          :size="24"
+        />
+      </n-badge>
+      <n-badge
+        :value="value"
+        type="success"
+        style="margin-right: 24px;"
+      >
+        <n-icon
+          type="ios-alarm"
+          :size="24"
+        />
+      </n-badge>
+      <n-badge
+        :value="value"
+        type="warning"
+        style="margin-right: 24px;"
+      >
+        <n-icon
+          type="ios-alarm"
+          :size="24"
+        />
+      </n-badge>
       <!--EXAMPLE_END-->
     </div>
-    <pre class="n-doc-section__inspect">Inspect some value here</pre>
+    <div class="n-doc-section__inspect">
+      <n-input-number v-model="value" />
+    </div>
     <n-doc-source-block>
       <!--SOURCE-->
     </n-doc-source-block>
@@ -22,6 +82,7 @@
 export default {
   data () {
     return {
+      value: 0
     }
   }
 }

demo/demo.vue

@@ -67,6 +67,10 @@ export default {
               name: 'Button',
               path: '/n-button'
             },
+            {
+              name: 'Cascader',
+              path: '/n-cascader'
+            },
             {
               name: 'Checkbox',
               path: '/n-checkbox'
@@ -131,10 +135,6 @@ export default {
               name: 'Select',
               path: '/n-select'
             },
-            {
-              name: 'Cascader',
-              path: '/n-cascader'
-            },
             {
               name: 'Steps',
               path: '/n-steps'

index.js

@@ -38,6 +38,7 @@ import NimbusIcon from './packages/nimbus/Icon'
 import Scrollbar from './packages/common/Scrollbar'
 import Steps from './packages/common/Steps'
 import Confirm from './packages/common/Confirm'
+import Badge from './packages/common/Badge'
 
 function install (Vue) {
   Card.install(Vue)
@@ -80,6 +81,7 @@ function install (Vue) {
   Steps.install(Vue)
   Confirm.install(Vue)
   Progress.install(Vue)
+  Badge.install(Vue)
 }
 
 export default {

packages/common/Badge/index.js

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

packages/common/Badge/src/main.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="n-badge"
+    :class="{
+      'n-badge--dot': dot,
+      [`n-badge--${type}-type`]: type
+    }"
+  >
+    <slot />
+    <sup
+      v-if="value !== null || dot"
+      class="n-badge-sup"
+    >{{ dot ? null : (max === null || typeof value === 'string') ? value : (value > max ? `${max}+` : value) }}</sup>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NBadge',
+  props: {
+    value: {
+      type: [String, Number],
+      default: null
+    },
+    max: {
+      type: Number,
+      default: null
+    },
+    dot: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      validator () {
+        return ['success', 'error', 'warning', 'info']
+      },
+      default: null
+    }
+  }
+}
+</script>

styles/Badge.scss

@@ -0,0 +1,54 @@
+@import './mixins/mixins.scss';
+@import './theme/default.scss';
+
+@include b(badge) {
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  &.n-badge--dot {
+    .n-badge-sup {
+      height: 8px;
+      width: 8px;
+      padding: 0;
+      min-width: 8px;
+      left: calc(100% - 4px);
+      bottom: calc(100% - 4px);
+    }
+  }
+  &.n-badge--success-type {
+    .n-badge-sup {
+      color: rgba(75, 81, 106, 1);
+      background-color: rgba(99, 226, 183, 1);
+    }
+  }
+  &.n-badge--info-type {
+    .n-badge-sup {
+      background-color: rgba(98, 187, 252, 1);
+    }
+  }
+  &.n-badge--warning-type {
+    .n-badge-sup {
+      background-color: rgba(255, 138, 0, 1);
+    }
+  }
+  &.n-badge--error-type {
+    .n-badge-sup {
+      background-color: rgba(255, 146, 164, 1);
+    }
+  }
+}
+
+@include b(badge-sup) {
+  user-select: none;
+  position: absolute;
+  height: 18px;
+  line-height: 18px;
+  border-radius: 9px;
+  background-color: rgba(237, 73, 99, 1);
+  padding: 0 6px;
+  text-align: center;
+  font-size: 12px;
+  left: calc(100% - 8px);
+  bottom: calc(100% - 8px);
+  font-weight: bold;
+}

styles/Icon.scss

@@ -7,6 +7,7 @@
   text-align: center;
   display: inline-block;
   position: relative;
+  vertical-align: middle;
   &::before {
     line-height: 1em;
     width: 1em;

styles/index.scss

@@ -28,6 +28,7 @@
 @import './Scrollbar.scss';
 @import './Steps.scss';
 @import './Progress.scss';
+@import './Badge.scss';
 
 @import "./NimbusServiceLayout.scss";
 @import "./Popover.scss";