feat(ui/divider): add divider component

packages/varlet-ui/src/divider/Divider.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="var-divider"
+    :class="[vertical ? 'var-divider--vertical' : null, withText ? 'var-divider--with-text' : null]"
+    :style="style"
+  >
+    <span class="var-divider__text">
+      <slot></slot>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, reactive, onMounted, toRefs } from 'vue'
+import { isBool, isNumber } from '../utils/shared'
+import { props } from './props'
+
+export default defineComponent({
+  name: 'VarDivider',
+  props,
+  setup(props, { slots }) {
+    const state = reactive({ withText: false })
+
+    const style = computed(() => {
+      const { inset, vertical } = props
+
+      if ((isBool(inset) && inset) || (isNumber(inset) && inset > 0)) {
+        return vertical
+          ? {
+              height: `calc(80% - ${isBool(inset) ? 16 : inset}px)`,
+            }
+          : {
+              width: `calc(100% - ${isBool(inset) ? 72 : inset}px)`,
+              left: `${isBool(inset) ? 72 : inset}px`,
+            }
+      }
+
+      return {}
+    })
+
+    onMounted(() => {
+      state.withText = Boolean(slots.default?.().length)
+    })
+
+    return {
+      ...toRefs(state),
+      style,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import './divider';
+</style>

packages/varlet-ui/src/divider/divider.less

@@ -0,0 +1,46 @@
+@import '../styles/var';
+
+@divider-color: #bcc2cb;
+@divider-text-color: #888;
+@divider-text-margin: 8px;
+
+.var-divider {
+  width: 100%;
+  height: 1px;
+  margin: @divider-text-margin 0;
+  background-color: @divider-color;
+  position: relative;
+  font-size: @font-size-md;
+  color: #888;
+
+  &--vertical {
+    width: 1px;
+    height: 80%;
+    margin: auto @divider-text-margin;
+    padding: @divider-text-margin 0;
+  }
+
+  &__text {
+    display: inline-block;
+    padding: 0 @divider-text-margin;
+  }
+
+  &--with-text {
+    background-color: transparent;
+    height: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &::before,
+    &::after {
+      display: inline-block;
+      content: '';
+      position: relative;
+      // width: 50%;
+      flex: 1;
+      height: 1px;
+      background-color: @divider-color;
+    }
+  }
+}

packages/varlet-ui/src/divider/docs/en-US.md

@@ -0,0 +1,25 @@
+# Divider
+
+### Intro
+
+
+### Install
+
+```js
+import { createApp } from 'vue'
+import { Divider } from '@varlet/ui'
+
+createApp().use(Divider)
+```
+
+### Scoped Install
+
+```js
+import { Divider } from '@varlet/ui'
+
+export default {
+  components: {
+    [Divider.Component.name]: Divider,
+  }
+}
+```

packages/varlet-ui/src/divider/docs/zh-CN.md

@@ -0,0 +1,56 @@
+# 分割线
+
+### 介绍
+用于分隔列表或布局的各个部分。
+
+### 引入
+
+```js
+import { createApp } from 'vue'
+import { Divider } from '@varlet/ui'
+
+createApp().use(Divider)
+```
+
+### 局部引入
+
+```js
+import { Divider } from '@varlet/ui'
+
+export default {
+  components: {
+    [Divider.Component.name]: Divider,
+  }
+}
+```
+
+### 基本使用
+```js
+<var-divider />
+<var-divider inset />
+<var-divider :inset="24" />
+```
+
+### 垂直分割线
+```js
+<var-button text disabled>文字</var-button>
+<var-divider vertical />
+<var-button text type="primary">链接</var-button>
+<var-divider vertical />
+<var-button text>
+  <var-icon name="github" />
+</var-button>
+```
+
+### 带有文字描述的分割线
+```js
+<var-divider>文字描述</var-divider>
+```
+
+## API
+
+### 属性
+| 参数 | 说明 | 类型 | 默认值 | 
+| --- | --- | --- | --- | 
+| inset | 缩进，允许设置数字来制定缩进距离，当传递`true`时默认缩进距离72px | boolean/number | false |
+| vertical | 是否垂直 | boolean | false |

packages/varlet-ui/src/divider/example/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <app-type>{{ pack.basicUsage }}</app-type>
+    <var-divider />
+    <var-divider inset />
+    <var-divider :inset="24" />
+  </div>
+  <div>
+    <app-type>{{ pack.verticalDivider }}</app-type>
+    <div class="vertical-divider-wrapper">
+      <var-button text disabled>
+        {{ pack.btnText }}
+      </var-button>
+      <var-divider vertical />
+      <var-button text type="primary">
+        {{ pack.btnLinkText }}
+      </var-button>
+      <var-divider vertical />
+      <var-button text>
+        <var-icon name="github" />
+      </var-button>
+    </div>
+  </div>
+  <div>
+    <app-type>{{ pack.dividerWithDesc }}</app-type>
+    <var-divider>{{ pack.dividerWithDescText }}</var-divider>
+  </div>
+</template>
+
+<script>
+import AppType from '@varlet/cli/site/mobile/components/AppType'
+import { pack, use } from './locale'
+import { watchLang } from '../../utils/components'
+import Divider from '..'
+import AppBar from '../../app-bar'
+import Icon from '../../icon'
+import Button from '../../button'
+
+export default {
+  name: 'DividerExample',
+  components: {
+    [Icon.name]: Icon,
+    [Image.name]: Image,
+    [AppBar.name]: AppBar,
+    [Button.name]: Button,
+    [Divider.name]: Divider,
+    AppType,
+  },
+  setup() {
+    watchLang(use)
+
+    const handleClick = () => {
+      window.open('https://github.com/haoziqaq/varlet')
+    }
+
+    return {
+      pack,
+      handleClick,
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.vertical-divider-wrapper {
+  display: flex;
+  justify-content: center;
+}
+</style>

packages/varlet-ui/src/divider/example/locale/en-US.ts

@@ -0,0 +1,3 @@
+export default {
+  basicUsage: 'Basic Usage',
+}

packages/varlet-ui/src/divider/example/locale/index.ts

@@ -0,0 +1,23 @@
+// lib
+import _zhCN from '../../../locale/zh-CN'
+import _enCN from '../../../locale/en-US'
+// mobile example doc
+import zhCN from './zh-CN'
+import enUS from './en-US'
+import { useLocale, add as _add, use as _use } from '../../../locale'
+
+const { add, use: exampleUse, pack, packs, merge } = useLocale()
+
+const use = (lang: string) => {
+  _use(lang)
+  exampleUse(lang)
+}
+
+export { add, pack, packs, merge, use }
+
+// lib
+_add('zh-CN', _zhCN)
+_add('en-US', _enCN)
+// mobile example doc
+add('zh-CN', zhCN)
+add('en-US', enUS)

packages/varlet-ui/src/divider/example/locale/zh-CN.ts

@@ -0,0 +1,8 @@
+export default {
+  basicUsage: '基本使用',
+  verticalDivider: '垂直分割线',
+  btnText: '文字',
+  btnLinkText: '链接',
+  dividerWithDesc: '带有文字描述的分割线',
+  dividerWithDescText: '文字描述',
+}

packages/varlet-ui/src/divider/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Divider from './Divider.vue'
+
+Divider.install = function (app: App) {
+  app.component(Divider.name, Divider)
+}
+
+export default Divider

packages/varlet-ui/src/divider/props.ts

@@ -0,0 +1,10 @@
+export const props = {
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+  inset: {
+    type: [Boolean, Number],
+    default: false,
+  },
+}

packages/varlet-ui/varlet.config.js

@@ -200,6 +200,13 @@ module.exports = {
         },
         doc: 'steps',
       },
+      {
+        text: {
+          'zh-CN': 'Divider 分割线',
+          'en-US': 'Divider',
+        },
+        doc: 'divider',
+      },
       {
         text: {
           'zh-CN': '导航组件',