fix(comp: divider): dynamic slot

packages/cdk/utils/__tests__/vNode.spec.ts

@@ -0,0 +1,55 @@
+import type { VNode, VNodeChild } from 'vue'
+
+import { Comment, Fragment, Text } from 'vue'
+
+import { getFirstValidNode, isValidElementNode } from '../vNode'
+
+const TEMPLATE = 'template'
+
+type FakeVNode = Partial<Pick<VNode, 'type'>> & { children?: FakeVNode[] }
+
+const vNode: FakeVNode = {
+  type: Comment,
+}
+
+vNode.children = [vNode]
+
+describe('vNode.ts', () => {
+  test('getFirstValidNode work', async () => {
+    const undefinedValue = undefined
+    expect(getFirstValidNode(undefinedValue)).toBeUndefined()
+
+    const arrayValue: FakeVNode[] = [vNode]
+    expect(getFirstValidNode(arrayValue as VNodeChild)).toBeUndefined()
+    expect(getFirstValidNode(vNode as VNodeChild)).toBeUndefined()
+
+    vNode.type = Fragment
+    expect(getFirstValidNode(arrayValue as VNodeChild, 0)).toBeUndefined()
+    expect(getFirstValidNode(vNode as VNodeChild, 0)).toBeUndefined()
+    expect(getFirstValidNode(arrayValue as VNodeChild, 1)).toBeUndefined()
+    expect(getFirstValidNode(vNode as VNodeChild, 1)).toBeUndefined()
+
+    vNode.type = TEMPLATE
+    expect(getFirstValidNode(arrayValue as VNodeChild, 0)).toBeUndefined()
+    expect(getFirstValidNode(vNode as VNodeChild, 0)).toBeUndefined()
+    expect(getFirstValidNode(arrayValue as VNodeChild, 1)).toBeUndefined()
+    expect(getFirstValidNode(vNode as VNodeChild, 1)).toBeUndefined()
+
+    vNode.type = Text
+    expect(getFirstValidNode(arrayValue as VNodeChild, 0)).toEqual(vNode)
+    expect(getFirstValidNode(vNode as VNodeChild, 0)).toEqual(vNode)
+    expect(getFirstValidNode(arrayValue as VNodeChild, 1)).toEqual(vNode)
+    expect(getFirstValidNode(vNode as VNodeChild, 1)).toEqual(vNode)
+  })
+
+  test('isValidElementNode work', async () => {
+    vNode.type = Comment
+    expect(isValidElementNode(vNode as VNodeChild)).toBeFalsy()
+
+    vNode.type = Fragment
+    expect(isValidElementNode(vNode as VNodeChild)).toBeFalsy()
+
+    vNode.type = Text
+    expect(isValidElementNode(vNode as VNodeChild)).toBeTruthy()
+  })
+})

packages/cdk/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './convert'
 export * from './propTypes'
 export * from './typeof'
+export * from './vNode'

packages/cdk/utils/vNode.ts

@@ -0,0 +1,41 @@
+import type { VNode, VNodeChild } from 'vue'
+
+import { Comment, Fragment } from 'vue'
+
+import { isUndefined } from './typeof'
+
+const TEMPLATE = 'template'
+
+export const isFragment = (node: VNodeChild) => (node as VNode).type === Fragment
+export const isComment = (node: VNodeChild) => (node as VNode).type === Comment
+export const isTemplate = (node: VNodeChild) => (node as VNode).type === TEMPLATE
+
+function getChildren(node: VNode, depth: number): undefined | VNode {
+  if (isComment(node)) return
+  if (isFragment(node) || isTemplate(node)) {
+    return depth > 0 ? getFirstValidNode(node.children as VNodeChild, depth - 1) : undefined
+  }
+  return node
+}
+
+/**
+ * get first valid child node (not fragment not comment)
+ * @param nodes {VNode} node to be searched
+ * @param maxDepth {number} depth to be searched, default is 3
+ */
+export function getFirstValidNode(nodes?: VNodeChild, maxDepth = 3): ReturnType<typeof getChildren> {
+  if (isUndefined(nodes)) return
+  if (Array.isArray(nodes)) {
+    return getChildren(nodes[0] as VNode, maxDepth)
+  }
+  return getChildren(nodes as VNode, maxDepth)
+}
+
+/**
+ * determine whether an element is valid (not fragment not comment)
+ * @param node {VNode} node to be determined
+ * @returns {boolean}
+ */
+export function isValidElementNode(node: VNodeChild): boolean {
+  return !(isFragment(node) || isComment(node))
+}

packages/components/divider/src/Divider.vue

@@ -6,13 +6,15 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
-import { PropTypes } from '@idux/cdk/utils'
-import { useGlobalConfig } from '@idux/components/core/config'
-
+import type { Ref, SetupContext } from 'vue'
 import type { DividerConfig } from '@idux/components/core/config'
 import type { DividerProps } from './types'
 
+import { computed, defineComponent, onUpdated, ref } from 'vue'
+import { PropTypes } from '@idux/cdk/utils'
+import { useGlobalConfig } from '@idux/components/core/config'
+import { getFirstValidNode, isValidElementNode } from '@idux/cdk/utils'
+
 export default defineComponent({
   name: 'IxDivider',
   props: {
@@ -21,15 +23,23 @@ export default defineComponent({
     position: PropTypes.oneOf(['left', 'center', 'right'] as const),
     type: PropTypes.oneOf(['horizontal', 'vertical'] as const),
   },
-  setup(props: DividerProps, { slots }) {
+  setup(props: DividerProps, { slots }: SetupContext) {
     const dividerConfig = useGlobalConfig('divider')
-    const className = useClassName(props, dividerConfig, !!slots.default)
+    let text = getFirstValidNode(slots.default?.())
+    const withText = ref(!!(text && isValidElementNode(text)))
+
+    onUpdated(() => {
+      text = getFirstValidNode(slots.default?.())
+      withText.value = !!(text && isValidElementNode(text))
+    })
+
+    const className = useClassName(props, dividerConfig, withText)
 
     return { className }
   },
 })
 
-function useClassName(props: DividerProps, config: DividerConfig, withText: boolean) {
+function useClassName(props: DividerProps, config: DividerConfig, withText: Ref<boolean>) {
   return computed(() => {
     const position = props.position || config.position
     const type = props.type || config.type
@@ -39,10 +49,10 @@ function useClassName(props: DividerProps, config: DividerConfig, withText: bool
     return [
       `ix-divider-${type}`,
       {
-        'ix-divider-with-text': withText,
+        'ix-divider-with-text': withText.value,
         'ix-divider-dashed': dashed,
-        'ix-divider-plain': plain && withText,
-        [`ix-divider-with-text-${position}`]: type === 'horizontal' && withText,
+        'ix-divider-plain': plain && withText.value,
+        [`ix-divider-with-text-${position}`]: type === 'horizontal' && withText.value,
       },
     ]
   })