feat: el-divider

.gitignore

@@ -1,3 +1,5 @@
+.vscode
+.idea
 node_modules
 .DS_Store
 dist

packages/divider/__tests__/divider.spec.ts

@@ -0,0 +1,46 @@
+import {mount} from '@vue/test-utils'
+import Divider from '../src/index.vue'
+
+const AXIOM = 'Rem is the best girl'
+
+describe('Divider.vue', () => {
+  test('render test', () => {
+    const wrapper = mount(Divider, {
+      slots: {
+        default: AXIOM,
+      },
+    })
+    expect(wrapper.text()).toEqual(AXIOM)
+  })
+
+  test('direction', () => {
+    const { vm } = mount(Divider, {
+      props: {
+        direction: 'vertical',
+      },
+    })
+    expect(vm.$el.classList.contains('el-divider--vertical')).toEqual(true)
+  })
+
+  test('contentPosition', () => {
+    const wrapper = mount(Divider, {
+      slots: {
+        default: AXIOM,
+      },
+      props: {
+        contentPosition: 'right',
+      },
+    })
+    const textDiv = wrapper.find('.el-divider__text')
+    expect(textDiv.element.classList.contains('is-right')).toEqual(true)
+  })
+
+  test('customClass', () => {
+    const { vm } = mount(Divider, {
+      props: {
+        class: 'customClass',
+      },
+    })
+    expect(vm.$el.classList.contains('customClass')).toEqual(true)
+  })
+})

packages/divider/doc/basic.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-divider class="item" />
+  <el-divider class="item" @click="handleClick">click me</el-divider>
+  <el-divider class="item" content-position="left">撸起袖子加油干</el-divider>
+  <el-divider class="item" content-position="right">一张蓝图绘到底</el-divider>
+  <el-divider class="item"><i class="el-icon-mobile-phone"></i></el-divider>
+  <div class="item">
+    <span>雨纷纷</span>
+    <el-divider direction="vertical" />
+    <span>旧故里</span>
+    <el-divider direction="vertical" />
+    <span>草木深</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Basic',
+  methods: {
+    handleClick() {
+      alert('click')
+    },
+  },
+}
+</script>
+
+<style scoped>
+.item {
+  margin-bottom: 40px;
+}
+</style>

packages/divider/doc/index.stories.ts

@@ -0,0 +1,5 @@
+export { default as BasicUsage } from './basic.vue'
+
+export default {
+  title: 'Divider',
+}

packages/divider/index.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue'
+import Divider from './src/index.vue'
+export default (app: App): void => {
+  app.component(Divider.name, Divider)
+}

packages/divider/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/divider",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.0"
+  }
+}

packages/divider/src/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    v-bind="$attrs"
+    :class="['el-divider', `el-divider--${direction}`]"
+  >
+    <div
+      v-if="$slots.default && direction !== 'vertical'"
+      :class="['el-divider__text', `is-${contentPosition}`]"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'ElDivider',
+  props: {
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator(val: string): boolean {
+        return ['horizontal', 'vertical'].indexOf(val) !== -1
+      },
+    },
+    contentPosition: {
+      type: String,
+      default: 'center',
+      validator(val: string): boolean {
+        return ['left', 'center', 'right'].indexOf(val) !== -1
+      },
+    },
+  },
+}
+</script>

packages/element-plus/index.ts

@@ -2,13 +2,15 @@ import type { App } from 'vue'
 import ElButton from '@element-plus/button'
 import ElBadge from '@element-plus/badge'
 import ElTag from '@element-plus/tag'
+import ElDivider from '@element-plus/divider'
 
 export {
-  ElButton, ElBadge, ElTag,
+  ElButton, ElBadge, ElTag, ElDivider,
 }
 
 export default function install(app: App): void {
   ElButton(app)
   ElBadge(app)
   ElTag(app)
+  ElDivider(app)
 }