feat: Divider component

src-next/divider/README.md

@@ -0,0 +1,63 @@
+# Divider
+
+### Install
+
+```js
+import Vue from 'vue';
+import { Divider } from 'vant';
+
+Vue.use(Divider);
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-divider />
+```
+
+### With Text
+
+```html
+<van-divider>Text</van-divider>
+```
+
+### Content Position
+
+```html
+<van-divider content-position="left">Text</van-divider>
+<van-divider content-position="right">Text</van-divider>
+```
+
+### Dashed
+
+```html
+<van-divider dashed>Text</van-divider>
+```
+
+### Custom Style
+
+```html
+<van-divider
+  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
+>
+  Text
+</van-divider>
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| dashed | Whether to use dashed border | _boolean_ | `false` |
+| hairline | Whether to use hairline | _boolean_ | `true` |
+| content-position | Content position，can be set to `left` `right` | _string_ | `center` |
+
+### Slots
+
+| Name    | Description |
+| ------- | ----------- |
+| default | content     |

src-next/divider/README.zh-CN.md

@@ -0,0 +1,73 @@
+# Divider 分割线
+
+### 引入
+
+```js
+import Vue from 'vue';
+import { Divider } from 'vant';
+
+Vue.use(Divider);
+```
+
+## 代码演示
+
+### 基础用法
+
+默认渲染一条水平分割线
+
+```html
+<van-divider />
+```
+
+### 展示文字
+
+通过插槽在可以分割线中间插入内容
+
+```html
+<van-divider>文字</van-divider>
+```
+
+### 内容位置
+
+通过`content-position`指定内容所在位置
+
+```html
+<van-divider content-position="left">文字</van-divider>
+<van-divider content-position="right">文字</van-divider>
+```
+
+### 虚线
+
+添加`dashed`属性使分割线渲染为虚线
+
+```html
+<van-divider dashed>文字</van-divider>
+```
+
+### 自定义样式
+
+可以直接通过`style`属性设置分割线的样式
+
+```html
+<van-divider
+  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
+>
+  文字
+</van-divider>
+```
+
+## API
+
+### Props
+
+| 参数             | 说明                             | 类型      | 默认值   |
+| ---------------- | -------------------------------- | --------- | -------- |
+| dashed           | 是否使用虚线                     | _boolean_ | `false`  |
+| hairline         | 是否使用 0.5px 线                | _boolean_ | `true`   |
+| content-position | 内容位置，可选值为`left` `right` | _string_  | `center` |
+
+### Slots
+
+| 名称    | 说明 |
+| ------- | ---- |
+| default | 内容 |

src-next/divider/demo/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <demo-section>
+    <demo-block :title="t('basicUsage')">
+      <van-divider />
+    </demo-block>
+
+    <demo-block :title="t('withText')">
+      <van-divider>
+        {{ t('text') }}
+      </van-divider>
+    </demo-block>
+
+    <demo-block :title="t('contentPosition')">
+      <van-divider content-position="left">
+        {{ t('text') }}
+      </van-divider>
+
+      <van-divider content-position="right">
+        {{ t('text') }}
+      </van-divider>
+    </demo-block>
+
+    <demo-block :title="t('dashed')">
+      <van-divider dashed :hairline="false">
+        {{ t('text') }}
+      </van-divider>
+    </demo-block>
+
+    <demo-block :title="t('customStyle')">
+      <van-divider
+        :style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }"
+      >
+        {{ t('text') }}
+      </van-divider>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+import { BLUE } from '../../utils/constant';
+
+export default {
+  i18n: {
+    'zh-CN': {
+      text: '文本',
+      dashed: '虚线',
+      withText: '展示文本',
+      contentPosition: '内容位置',
+      customStyle: '自定义样式',
+    },
+    'en-US': {
+      text: 'Text',
+      dashed: 'Dashed',
+      withText: 'With Text',
+      contentPosition: 'Content Position',
+      customStyle: 'Custom Style',
+    },
+  },
+
+  data() {
+    return {
+      BLUE,
+    };
+  },
+};
+</script>
+
+<style lang="less">
+@import '../../style/var';
+
+.demo-divider {
+  background-color: @white;
+
+  .van-doc-demo-block__title {
+    padding-top: @padding-md;
+  }
+}
+</style>

src-next/divider/index.js

@@ -0,0 +1,33 @@
+import { createNamespace } from '../utils';
+
+const [createComponent, bem] = createNamespace('divider');
+
+export default createComponent({
+  props: {
+    dashed: Boolean,
+    hairline: {
+      type: Boolean,
+      default: true,
+    },
+    contentPosition: {
+      type: String,
+      default: 'center',
+    },
+  },
+
+  render() {
+    const Content = this.$slots.default?.();
+    return (
+      <div
+        role="separator"
+        class={bem({
+          dashed: this.dashed,
+          hairline: this.hairline,
+          [`content-${this.contentPosition}`]: !!Content,
+        })}
+      >
+        {Content}
+      </div>
+    );
+  },
+});

src-next/divider/index.less

@@ -0,0 +1,64 @@
+@import '../style/var';
+
+.van-divider {
+  display: flex;
+  align-items: center;
+  margin: @divider-margin;
+  color: @divider-text-color;
+  font-size: @divider-font-size;
+  line-height: @divider-line-height;
+  border-color: @divider-border-color;
+  border-style: solid;
+  border-width: 0;
+
+  &::before,
+  &::after {
+    display: block;
+    flex: 1;
+    box-sizing: border-box;
+    height: 1px;
+    border-color: inherit;
+    border-style: inherit;
+    border-width: @border-width-base 0 0;
+  }
+
+  &::before {
+    content: '';
+  }
+
+  &--hairline {
+    &::before,
+    &::after {
+      transform: scaleY(0.5);
+    }
+  }
+
+  &--dashed {
+    border-style: dashed;
+  }
+
+  &--content-center,
+  &--content-left,
+  &--content-right {
+    &::before {
+      margin-right: @divider-content-padding;
+    }
+
+    &::after {
+      margin-left: @divider-content-padding;
+      content: '';
+    }
+  }
+
+  &--content-left {
+    &::before {
+      max-width: @divider-content-left-width;
+    }
+  }
+
+  &--content-right {
+    &::after {
+      max-width: @divider-content-right-width;
+    }
+  }
+}

src-next/divider/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div role="separator" class="van-divider van-divider--hairline"></div>
+  </div>
+  <div>
+    <div role="separator" class="van-divider van-divider--hairline van-divider--content-center">
+      文本
+    </div>
+  </div>
+  <div>
+    <div role="separator" class="van-divider van-divider--hairline van-divider--content-left">
+      文本
+    </div>
+    <div role="separator" class="van-divider van-divider--hairline van-divider--content-right">
+      文本
+    </div>
+  </div>
+  <div>
+    <div role="separator" class="van-divider van-divider--dashed van-divider--content-center">
+      文本
+    </div>
+  </div>
+  <div>
+    <div role="separator" class="van-divider van-divider--hairline van-divider--content-center" style="border-color: #1989fa; color: rgb(25, 137, 250); padding: 0px 16px;">
+      文本
+    </div>
+  </div>
+</div>
+`;

src-next/divider/test/demo.spec.js

@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);

vant.config.js

@@ -233,10 +233,10 @@ module.exports = {
               //   path: 'count-down',
               //   title: 'CountDown 倒计时',
               // },
-              // {
+              {
-              //   path: 'divider',
+                path: 'divider',
-              //   title: 'Divider 分割线',
+                title: 'Divider 分割线',
-              // },
+              },
               {
                 path: 'empty',
                 title: 'Empty 空状态',
@@ -567,10 +567,10 @@ module.exports = {
               //   path: 'count-down',
               //   title: 'CountDown',
               // },
-              // {
+              {
-              //   path: 'divider',
+                path: 'divider',
-              //   title: 'Divider',
+                title: 'Divider',
-              // },
+              },
               {
                 path: 'empty',
                 title: 'Empty',