feat(divider): add divider component

README.md

@@ -73,18 +73,17 @@ Vue.use(naiveUi)
 |Breadcrumb|🚧|||
 |Badge|😍|||
 |Steps|😍|||
-|Tag|🚧|||
+|Tag|😍|||
 |Divider|🚧|||
 |Statistic|🚧|||
 |PopConfirm|🚧|||
 |Anchor|🚧|||
-|BackTop|🚧|||
-|Progress|🚧|||
+|BackTop|😍|||
+|Progress|😍|||
 |Timeline|🚧|||
 |Card|🚧|||
 |Collapse|🚧|||
 |Cascader|🚧|||
-|BackTop|🚧|||
 1. Z-index management on `Select` & `Tooltip` & `Modal`(Low Priority)
 2. Full featured table component(Medium Priority)
 3. Form component(Medium Priority)

demo/components/dividerDemo/basicUsage.demo.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="n-doc-section">
+    <div class="n-doc-section__header">
+      Basic Usage
+    </div>
+    <div
+      class="n-doc-section__view"
+    >
+      <!--EXAMPLE_START-->
+      <n-divider />
+      <n-divider>A Happy Ending</n-divider>
+      <n-divider content-position="left">
+        A Happy Ending
+      </n-divider>
+      <n-divider content-position="right">
+        A Happy Ending
+      </n-divider>
+      <n-divider dashed>
+        A Happy Ending
+      </n-divider>
+      <div style="width: 100%;">
+        A<n-divider vertical />Happy<n-divider vertical />Ending
+      </div>
+      <!--EXAMPLE_END-->
+    </div>
+    <n-doc-source-block>
+      <!--SOURCE-->
+    </n-doc-source-block>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+    }
+  }
+}
+</script>

demo/components/dividerDemo/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    ref="doc"
+    class="n-doc"
+  >
+    <div class="n-doc-header">
+      <n-gradient-text :font-size="20">
+        Divider / n-divider
+      </n-gradient-text>
+    </div>
+    <div class="n-doc-body">
+      <basic-usage />
+    </div>
+  </div>
+</template>
+
+<script>
+import basicUsage from './basicUsage.demo.vue'
+
+export default {
+  components: {
+    basicUsage
+  },
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+  }
+}
+</script>

demo/demo.vue

@@ -91,6 +91,10 @@ export default {
               name: 'DatePicker',
               path: '/n-date-picker'
             },
+            {
+              name: 'Divider',
+              path: '/n-divider'
+            },
             {
               name: 'Gradient Text',
               path: '/n-gradient-text'

demo/index.js

@@ -46,6 +46,7 @@ import collapseDemo from './components/collapseDemo'
 import tagDemo from './components/tagDemo'
 import timelineDemo from './components/timelineDemo'
 import progressDemo from './components/progressDemo'
+import dividerDemo from './components/dividerDemo'
 import demo from './demo'
 
 import popoverDebug from './debugComponents/popoverDebug'
@@ -118,7 +119,8 @@ const routes = [
       { path: '/n-timeline', component: timelineDemo },
       { path: '/n-scrollbar-debug2', component: scrollbarDebug2 },
       { path: '/n-back-top', component: backTopDemo },
-      { path: '/n-date-picker-debug', component: datePickerDebug }
+      { path: '/n-date-picker-debug', component: datePickerDebug },
+      { path: '/n-divider', component: dividerDemo }
     ]
   },
   {

demo/readme.js

@@ -202,7 +202,7 @@ Vue.use(naiveUi)
 </tr>
 <tr>
 <td>Tag</td>
-<td style="text-align:center;">🚧</td>
+<td style="text-align:center;">😍</td>
 <td style="text-align:center;"></td>
 <td></td>
 </tr>
@@ -232,13 +232,13 @@ Vue.use(naiveUi)
 </tr>
 <tr>
 <td>BackTop</td>
-<td style="text-align:center;">🚧</td>
+<td style="text-align:center;">😍</td>
 <td style="text-align:center;"></td>
 <td></td>
 </tr>
 <tr>
 <td>Progress</td>
-<td style="text-align:center;">🚧</td>
+<td style="text-align:center;">😍</td>
 <td style="text-align:center;"></td>
 <td></td>
 </tr>
@@ -266,12 +266,6 @@ Vue.use(naiveUi)
 <td style="text-align:center;"></td>
 <td></td>
 </tr>
-<tr>
-<td>BackTop</td>
-<td style="text-align:center;">🚧</td>
-<td style="text-align:center;"></td>
-<td></td>
-</tr>
 </tbody>
 </table>
 <ol>

index.js

@@ -42,6 +42,7 @@ import Confirm from './packages/common/Confirm'
 import Badge from './packages/common/Badge'
 import Tag from './packages/common/Tag'
 import BackTop from './packages/common/BackTop'
+import Divider from './packages/common/Divider'
 
 function install (Vue) {
   Card.install(Vue)
@@ -88,6 +89,7 @@ function install (Vue) {
   Badge.install(Vue)
   Tag.install(Vue)
   BackTop.install(Vue)
+  Divider.install(Vue)
 }
 
 export default {

packages/common/Divider/index.js

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

packages/common/Divider/src/main.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="n-divider"
+    :class="{
+      'n-divider--vertical': vertical,
+      'n-divider--no-content': !$slots.default,
+      'n-divider--dashed': dashed,
+      [`n-divider--content-position-${contentPosition}`]: $slots.default && contentPosition
+    }"
+  >
+    <div
+      v-if="!vertical"
+      class="n-divider__line n-divider__line--left"
+    />
+    <div
+      v-if="!vertical && $slots.default"
+      class="n-divider__content"
+    >
+      <slot />
+    </div>
+    <div
+      v-if="!vertical && $slots.default"
+      class="n-divider__line n-divider__line--right"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NDivider',
+  props: {
+    contentPosition: {
+      type: String,
+      default: 'center'
+    },
+    dashed: {
+      type: Boolean,
+      default: false
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>

styles/Badge.scss

@@ -27,12 +27,12 @@
   }
   &.n-badge--warning-type {
     .n-badge-sup {
-      background-color: rgba(216, 94, 0, 1);
+      background-color: rgba(205, 135, 20, 1);
     }
   }
   &.n-badge--error-type {
     .n-badge-sup {
-      background-color: rgba(210, 82, 129, 1);
+      background-color: rgba(255, 109, 147, 1);
     }
   }
 }

styles/Divider.scss

@@ -0,0 +1,56 @@
+@import './mixins/mixins.scss';
+@import './theme/default.scss';
+
+@include b(divider) {
+  position: relative;
+  display: flex;
+  width: 100%;
+  .n-divider__line {
+    height: 1px;
+    width: 100%;
+    margin-top: 24px;
+    margin-bottom: 24px;
+    background-color: rgba(255, 255, 255, 0.3)
+  }
+  .n-divider__content {
+    display: flex;
+    align-items: center;
+    margin-left: 4px;
+    margin-right: 4px;
+    white-space: nowrap;
+    color: rgba(233, 233, 236, 1);
+    font-weight: bold;
+  }
+  &.n-divider--content-position-left {
+    .n-divider__line {
+      &.n-divider__line--left {
+        width: 14px;
+      }
+    }
+  }
+  &.n-divider--content-position-right {
+    .n-divider__line {
+      &.n-divider__line--right {
+        width: 14px;
+      }
+    }
+  }
+  &.n-divider--dashed {
+    .n-divider__line {
+      height: 0px;
+      width: 100%;
+      background: none;
+      border-color: rgba(255, 255, 255, 0.3);
+      border-style: dashed;
+      border-width: 1px 0 0;
+    }
+  }
+  &.n-divider--vertical {
+    display: inline-block;
+    height: 1em;
+    margin: 0 8px;
+    vertical-align: middle;
+    width: 1px;
+    background-color: rgba(255, 255, 255, 0.3)
+  }
+}

styles/index.scss

@@ -32,6 +32,7 @@
 @import './Badge.scss';
 @import './Tag.scss';
 @import './BackTop.scss';
+@import './Divider.scss';
 
 @import "./NimbusServiceLayout.scss";
 @import "./Popover.scss";