refactor(divider): use SFC

apps/playground/src/pages/divider/customize-style.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <a-divider style="border-width: 2px; border-color: #7cb305" />
+  <a-divider style="border-color: #7cb305" dashed />
+  <a-divider style="border-color: #7cb305" dashed>
+    Text
+  </a-divider>
+  <a-divider type="vertical" style="height: 60px; border-color: #7cb305" />
+  <a-divider type="vertical" style="height: 60px; border-color: #7cb305" dashed />
+
+  <div style="display: flex; flex-direction: column; height: 50px; box-shadow: 0 0 1px red">
+    <a-divider style="background: rgba(0,255,0,0.05)" orientation="left">
+      Text
+    </a-divider>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

apps/playground/src/pages/divider/horizontal.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+
+</script>
+
+<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>
+  <a-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>
+  <a-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>
+
+<style scoped>
+
+</style>

apps/playground/src/pages/divider/plain.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+
+</script>
+
+<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>
+  <a-divider plain>Text</a-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>
+  <a-divider orientation="left" plain>
+    Left Text
+  </a-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>
+  <a-divider orientation="right" plain>
+    Right Text
+  </a-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>
+
+<style scoped>
+
+</style>

apps/playground/src/pages/divider/size.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+
+</script>
+
+<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>
+  <a-divider size="small" />
+  <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>
+  <a-divider size="middle" />
+  <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>
+  <a-divider size="large" />
+  <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>
+
+<style scoped>
+
+</style>

apps/playground/src/pages/divider/variant.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+
+</script>
+
+<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>
+  <a-divider style="border-color: #7cb305">
+    Solid
+  </a-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>
+  <a-divider variant="dotted" style="border-color: #7cb305">
+    Dotted
+  </a-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>
+  <a-divider variant="dashed" style="border-color: #7cb305" dashed>
+    Dashed
+  </a-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>
+
+<style scoped>
+
+</style>

apps/playground/src/pages/divider/vertical.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  Text
+  <a-divider type="vertical"></a-divider>
+  <a href="#">Link</a>
+  <a-divider type="vertical"></a-divider>
+  <a href="#">Link</a>
+</template>
+
+<style scoped>
+
+</style>

apps/playground/src/pages/divider/with-text.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+
+</script>
+
+<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>
+  <a-divider>Text</a-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>
+  <a-divider orientation="left">
+    Left Text
+  </a-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>
+  <a-divider orientation="right">
+    Right Text
+  </a-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>
+  <a-divider orientation="left" orientation-margin="0">
+    Left Text with 0 orientationMargin
+  </a-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>
+  <a-divider orientation="right" orientation-margin="50px">
+    Right Text with 50px orientationMargin
+  </a-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>
+
+<style scoped>
+
+</style>

packages/ui/src/components/divider/__tests__/__snapshots__/index.test.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Divider > should render correctly 1`] = `"<div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center" role="separator"><span class="ant-divider-inner-text">test</span></div>"`;

packages/ui/src/components/divider/__tests__/index.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it, vi } from 'vitest'
+import { Divider } from '@ant-design-vue/ui'
+import { mount } from '@vue/test-utils'
+
+describe('Divider', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(Divider, {
+      slots: {
+        default: `test`
+      }
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  });
+
+  it('not show children when vertical', () => {
+    const wrapper = mount(Divider, {
+      props: {
+        orientation: 'right',
+        orientationMargin: '10px',
+      },
+      slots: {
+        default: `test`,
+      },
+    })
+
+    expect(wrapper.find('.ant-divider-inner-text').exists()).toBe(true)
+    const innerTextElement = wrapper.find('.ant-divider-inner-text')
+    expect(innerTextElement.attributes('style')).toContain('margin-inline-end: 10px')
+  })
+
+  it('support bool dashed', () => { 
+    const wrapper = mount(Divider, {
+      props: {
+        dashed: true,
+      },
+      slots: {
+        default: `test`,
+      },
+    })
+    expect(wrapper.find('.ant-divider-dashed').exists()).toBe(true)
+  })
+
+  it('support string variant', () => {
+    const wrapper = mount(Divider, {
+      props: {
+        variant: 'dotted',
+      },
+      slots: {
+        default: `test`,
+      },
+    })
+    expect(wrapper.find('.ant-divider-dotted').exists()).toBe(true)
+  })
+
+  it('support vertical size', () => {
+    const wrapper1= mount(Divider, {
+      props: {
+        size: 'small',
+      },
+      slots: {
+        default: `test`,
+      },
+    })
+    expect(wrapper1.find('.ant-divider-sm')).toBeTruthy();
+
+    const wrapper2 = mount(Divider, {
+      props: {
+        size: 'middle',
+      },
+      slots: {
+        default: `test`,
+      },
+    })
+    expect(wrapper2.find('.ant-divider-md')).toBeTruthy()
+  })
+})

packages/ui/src/components/divider/divider.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+  import type { ComputedRef, CSSProperties } from 'vue'
+  import { computed, shallowRef } from 'vue'
+  import type { DividerProps, DividerSlots } from './meta'
+  import { DividerDefaultProps } from './meta'
+
+  type SizeType = 'small' | 'middle' | 'large' | undefined
+  const props = withDefaults(defineProps<DividerProps>(), DividerDefaultProps)
+  const slots = defineSlots<DividerSlots>()
+
+  const prefixCls = props.prefixCls
+  // 此处的direction应从config-provider中取，暂时写死
+  const direction = shallowRef<'ltr' | 'rtl'>('ltr')
+  const sizeClassNameMap: Record<string, string> = { small: 'sm', middle: 'md' }
+  // 此函数后续应在config-provider下，暂时放在这里
+  function useSize<T extends string | undefined | number | object>(customSize?: T | ((ctxSize: SizeType) => T)): ComputedRef<T> {
+    // 此处的size应从config-provider中取，暂时写死
+    const size = undefined
+    return computed(() => {
+      if (!customSize) {
+        return size as T
+      }
+      if (typeof customSize === 'string') {
+        return customSize ?? size
+      }
+      if (typeof customSize === 'function') {
+        return customSize(size)
+      }
+      return size as T
+    })
+  }
+  const sizeFullName = useSize(props.size)
+  const sizeCls = computed(() => sizeClassNameMap[sizeFullName.value])
+  const hasChildren = computed(() => !!slots.default)
+  const mergedOrientation = computed(() => {
+    if (props.orientation === 'left') {
+      return direction.value === 'rtl' ? 'end' : 'start'
+    }
+    if (props.orientation === 'right') {
+      return direction.value === 'rtl' ? 'start' : 'end'
+    }
+    return props.orientation
+  })
+  const hasMarginStart = computed(() => mergedOrientation.value === 'start' && props.orientationMargin !== null)
+
+  const hasMarginEnd = computed(() => mergedOrientation.value === 'end' && props.orientationMargin !== null)
+  const cls = computed(() => {
+    return {
+      [prefixCls]: true,
+      [`${prefixCls}-${props.type}`]: true,
+      [`${prefixCls}-with-text`]: hasChildren.value,
+      [`${prefixCls}-with-text-${mergedOrientation.value}`]: hasChildren.value,
+      [`${prefixCls}-dashed`]: !!props.dashed,
+      [`${prefixCls}-${props.variant}`]: props.variant !== 'solid',
+      [`${prefixCls}-plain`]: !!props.plain,
+      [`${prefixCls}-rtl`]: direction.value === 'rtl',
+      [`${prefixCls}-no-default-orientation-margin-start`]: hasMarginStart.value,
+      [`${prefixCls}-no-default-orientation-margin-end`]: hasMarginEnd.value,
+      [`${prefixCls}-${sizeCls.value}`]: !!sizeCls.value,
+    }
+  })
+  const memoizedOrientationMargin = computed(() => {
+    if (typeof props.orientationMargin === 'number') {
+      return props.orientationMargin
+    }
+    if (/^\d+$/.test(props.orientationMargin!)) {
+      return Number(props.orientationMargin)
+    }
+    return props.orientationMargin!
+  })
+  const innerStyle: CSSProperties = {
+    marginInlineStart: hasMarginStart.value ? memoizedOrientationMargin.value : undefined,
+    marginInlineEnd: hasMarginEnd.value ? memoizedOrientationMargin.value : undefined,
+  }
+</script>
+
+<template>
+  <div v-bind="$attrs" :class="[cls]" :style="[innerStyle]" role="separator">
+    <template v-if="$slots.default && type !== 'vertical'">
+      <span :class="[`${prefixCls}-inner-text`]" :style="innerStyle">
+        <slot />
+      </span>
+    </template>
+  </div>
+</template>
+
+<style scoped></style>

packages/ui/src/components/divider/index.ts

@@ -0,0 +1,12 @@
+import type { App, Plugin } from 'vue'
+import Divider from './divider.vue'
+import './style/index.css'
+
+export { default as  Divider } from './divider.vue'
+
+Divider.install = function(app: App){
+  app.component('ADivider', Divider)
+  return app
+}
+
+export default Divider as typeof Divider & Plugin