feat(comp: divider): add divider component

packages/components/components.less

@@ -1,3 +1,4 @@
 @import './button/style/index.less';
 @import './icon/style/index.less';
 @import './badge/style/index.less';
+@import './divider/style/index.less';

packages/components/core/config/types.ts

@@ -1,11 +1,12 @@
-import type { ComponentSize, ButtonMode } from '../types'
+import type { ComponentSize, ButtonMode, DividerPosition, DividerType } from '../types'
 
 export type GlobalConfigKey = keyof GlobalConfig
 
 export interface GlobalConfig {
   button: ButtonConfig
   icon: IconConfig
   badge: BadgeConfig
+  divider: DividerConfig
 }
 
 export interface ButtonConfig {
@@ -22,3 +23,10 @@ export interface BadgeConfig {
   dot: boolean
   overflowCount: number | string
 }
+
+export interface DividerConfig {
+  dashed: boolean
+  plain: boolean
+  position: DividerPosition
+  type: DividerType
+}

packages/components/core/config/useGlobalConfig.ts

@@ -1,21 +1,29 @@
 import { inject, shallowReactive, provide, readonly } from 'vue'
 import type { DeepReadonly } from 'vue'
-import type { BadgeConfig, ButtonConfig, GlobalConfig, GlobalConfigKey, IconConfig } from './types'
+import type { BadgeConfig, ButtonConfig, GlobalConfig, GlobalConfigKey, IconConfig, DividerConfig } from './types'
 
-const button: ButtonConfig = shallowReactive({ mode: 'default', size: 'medium' })
-const icon: IconConfig = shallowReactive({})
-const badge: BadgeConfig = shallowReactive({ showZero: false, dot: false, overflowCount: 99 })
+const button = shallowReactive<ButtonConfig>({ mode: 'default', size: 'medium' })
+const icon = shallowReactive<IconConfig>({})
+const badge = shallowReactive<BadgeConfig>({ showZero: false, dot: false, overflowCount: 99 })
+const divider = shallowReactive<DividerConfig>({
+  dashed: false,
+  plain: false,
+  position: 'center',
+  type: 'horizontal',
+})
 
 const defaultConfig: GlobalConfig = {
   button,
   icon,
   badge,
+  divider,
 }
 
 const globalConfigToken: Record<GlobalConfigKey, symbol> = {
   button: Symbol(),
   icon: Symbol(),
   badge: Symbol(),
+  divider: Symbol(),
 }
 
 /**

packages/components/core/types/index.ts

@@ -1,3 +1,7 @@
 export type ComponentSize = 'large' | 'medium' | 'small'
 
 export type ButtonMode = 'primary' | 'default' | 'dashed' | 'text' | 'link'
+
+export type DividerPosition = 'left' | 'center' | 'right'
+
+export type DividerType = 'horizontal' | 'vertical'

packages/components/divider/__tests__/__snapshots__/divider.spec.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Divider.vue render work 1`] = `"<div class=\\"ix-divider ix-divider-horizontal\\"><!--v-if--></div>"`;

packages/components/divider/__tests__/divider.spec.ts

@@ -0,0 +1,196 @@
+import { mount, MountingOptions, VueWrapper } from '@vue/test-utils'
+import { DefineComponent } from 'vue'
+import IxDivider from '../src/Divider.vue'
+import { DividerProps } from '../src/types'
+
+describe('Divider.vue', () => {
+  let DividerMount: (
+    options?: MountingOptions<Partial<DividerProps>>,
+  ) => VueWrapper<InstanceType<DefineComponent<DividerProps>>>
+
+  beforeEach(() => {
+    DividerMount = (options = {}) => {
+      return mount<DividerProps>(IxDivider, {
+        ...options,
+      })
+    }
+  })
+
+  test('render work', () => {
+    const wrapper = DividerMount()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  test('type work', async () => {
+    const wrapper = DividerMount()
+    expect(wrapper.classes()).toContain('ix-divider-horizontal')
+
+    await wrapper.setProps({ type: 'horizontal' })
+    expect(wrapper.classes()).toContain('ix-divider-horizontal')
+
+    await wrapper.setProps({ type: 'vertical' })
+    expect(wrapper.classes()).toContain('ix-divider-vertical')
+  })
+
+  test('dashed work', async () => {
+    const wrapper = DividerMount()
+    expect(wrapper.classes()).not.toContain('ix-divider-dashed')
+
+    await wrapper.setProps({ dashed: true })
+    expect(wrapper.classes()).toContain('ix-divider-dashed')
+
+    await wrapper.setProps({ dashed: false })
+    expect(wrapper.classes()).not.toContain('ix-divider-dashed')
+  })
+
+  test('slot work', async () => {
+    const text = 'Text'
+    let wrapper = DividerMount()
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text')
+    expect(wrapper.text()).not.toEqual(text)
+    expect(wrapper.find('.ix-divider-inner-text').exists()).toBeFalsy()
+
+    wrapper = DividerMount({ slots: { default: text } })
+    expect(wrapper.classes()).toContain('ix-divider-with-text')
+    expect(wrapper.text()).toEqual(text)
+    expect(wrapper.find('.ix-divider-inner-text').exists()).toBeTruthy()
+  })
+
+  test('plain work', async () => {
+    const text = 'Text'
+    let wrapper = DividerMount()
+    expect(wrapper.classes()).not.toContain('ix-divider-plain')
+
+    wrapper = DividerMount({ slots: { default: text } })
+    expect(wrapper.classes()).not.toContain('ix-divider-plain')
+
+    await wrapper.setProps({ plain: true })
+    expect(wrapper.classes()).toContain('ix-divider-plain')
+
+    await wrapper.setProps({ plain: false })
+    expect(wrapper.classes()).not.toContain('ix-divider-plain')
+  })
+
+  test('position work', async () => {
+    const text = 'Text'
+    let wrapper = DividerMount()
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    await wrapper.setProps({ type: 'horizontal' })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    await wrapper.setProps({ type: 'vertical' })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    wrapper = DividerMount({ slots: { default: text } })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    await wrapper.setProps({ type: 'horizontal' })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    await wrapper.setProps({ type: 'vertical' })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    wrapper = DividerMount({ slots: { default: text }, props: { position: 'left' } })
+    expect(wrapper.classes()).toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    await wrapper.setProps({ type: 'horizontal' })
+    expect(wrapper.classes()).toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    await wrapper.setProps({ type: 'vertical' })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    wrapper = DividerMount({ props: { position: 'left' } })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    await wrapper.setProps({ type: 'horizontal' })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    await wrapper.setProps({ type: 'vertical' })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    wrapper = DividerMount({ slots: { default: text }, props: { position: 'center' } })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    await wrapper.setProps({ type: 'horizontal' })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    await wrapper.setProps({ type: 'vertical' })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    wrapper = DividerMount({ props: { position: 'center' } })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    await wrapper.setProps({ type: 'horizontal' })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    await wrapper.setProps({ type: 'vertical' })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    wrapper = DividerMount({ slots: { default: text }, props: { position: 'right' } })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).toContain('ix-divider-with-text-right')
+
+    await wrapper.setProps({ type: 'horizontal' })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).toContain('ix-divider-with-text-right')
+
+    await wrapper.setProps({ type: 'vertical' })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    wrapper = DividerMount({ props: { position: 'right' } })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    await wrapper.setProps({ type: 'horizontal' })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+
+    await wrapper.setProps({ type: 'vertical' })
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
+    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+  })
+})

packages/components/divider/demo/horizontal.md

@@ -0,0 +1,29 @@
+---
+order: 0
+title:
+  zh: 水平分割线
+  en: Horizontal divider
+---
+
+## zh
+
+默认为水平分割线，可在中间加入文字。
+
+## demo
+
+```html
+
+<template>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>
+  <ix-divider/>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>
+  <ix-divider dashed/>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>
+</template>
+```

packages/components/divider/demo/plain.md

@@ -0,0 +1,32 @@
+---
+order: 1
+title: 
+  zh: 分割线使用正文样式
+  en: divider text use plain style
+---
+
+## zh
+
+使用 `plain` 可以设置为更轻量的分割线文字样式。
+
+## demo
+
+```html
+<template>
+ <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>
+  <ix-divider plain>Text</ix-divider>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>
+  <ix-divider position="left" plain>Left Text</ix-divider>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>
+ <ix-divider position="right" plain>Right Text</ix-divider>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>
+</template>
+```

packages/components/divider/demo/vertical.md

@@ -0,0 +1,22 @@
+---
+order: 3
+title:
+  zh: 垂直分割线
+  en: vertical divider
+---
+
+## zh
+
+使用 `type="vertical"`设置为行内的垂直分割线
+
+## demo
+
+```html
+<template>
+ Text
+  <ix-divider type="vertical" />
+  <a href="#">Link</a>
+  <ix-divider type="vertical"/>
+  <a href="#">Link</a>
+</template>
+```

packages/components/divider/demo/with-text.md

@@ -0,0 +1,34 @@
+---
+order: 2
+title: 
+  zh: 带文字的分割线
+  en: divider with text
+---
+
+## zh
+
+分割线中带有文字，可以用 `position` 制定文字的位置。
+
+文字默认位置为 `center`，除此之外你还可以设置为 `left` 和 `center`，同时你还可以通过全局配置修改默认位置。
+
+## demo
+
+```html
+<template>
+ <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>
+  <ix-divider>Text</ix-divider>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>
+  <ix-divider position="left">Left Text</ix-divider>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>
+ <ix-divider position="right">Right Text</ix-divider>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>
+</template>
+```