diff --git a/packages/coreui-vue/src/components/header/CHeader.ts b/packages/coreui-vue/src/components/header/CHeader.ts index 32ab0bf5..d1c23b45 100644 --- a/packages/coreui-vue/src/components/header/CHeader.ts +++ b/packages/coreui-vue/src/components/header/CHeader.ts @@ -3,6 +3,13 @@ import { defineComponent, h } from 'vue' const CHeader = defineComponent({ name: 'CHeader', props: { + /** + * Component used for the root node. Either a string to use a HTML element or a component. + */ + as: { + type: String, + default: 'div', + }, /** * Defines optional container wrapping children elements. * @@ -31,7 +38,7 @@ const CHeader = defineComponent({ setup(props, { slots }) { return () => h( - 'div', + props.as, { class: ['header', { [`header-${props.position}`]: props.position }] }, props.container ? h( diff --git a/packages/coreui-vue/src/components/header/__tests__/CHeader.spec.ts b/packages/coreui-vue/src/components/header/__tests__/CHeader.spec.ts index 2bb30916..09ec0065 100644 --- a/packages/coreui-vue/src/components/header/__tests__/CHeader.spec.ts +++ b/packages/coreui-vue/src/components/header/__tests__/CHeader.spec.ts @@ -20,6 +20,15 @@ const customWrapper = mount(Component, { }, }) +const customWrapperTwo = mount(Component, { + propsData: { + as: 'header', + }, + slots: { + default: 'Default slot', + }, +}) + describe(`Loads and display ${ComponentName} component`, () => { it('has a name', () => { expect(Component.name).toMatch(ComponentName) @@ -44,3 +53,13 @@ describe(`Customize ${ComponentName} component`, () => { expect(customWrapper.find('.container-lg').classes('container-lg')).toBe(true) }) }) + + +describe(`Customize (number two) ${ComponentName} component`, () => { + it('renders correctly', () => { + expect(customWrapperTwo.html()).toMatchSnapshot() + }) + it('tag name is custom', () => { + expect(customWrapperTwo.element.tagName).toBe('HEADER') + }) +}) \ No newline at end of file diff --git a/packages/docs/api/header/CHeader.api.md b/packages/docs/api/header/CHeader.api.md index 0416d9ee..f47ab627 100644 --- a/packages/docs/api/header/CHeader.api.md +++ b/packages/docs/api/header/CHeader.api.md @@ -8,7 +8,8 @@ import CHeader from '@coreui/vue/src/components/header/CHeader' #### Props -| Prop name | Description | Type | Values | Default | -| ------------- | ------------------------------------------------------ | --------------- | ------------------------------------------------------------- | ------- | -| **container** | Defines optional container wrapping children elements. | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`, `'fluid'` | - | -| **position** | Place header in non-static positions. | string | `'fixed'`, `'sticky'` | - | +| Prop name | Description | Type | Values | Default | +| ------------- | --------------------------------------------------------------------------------------- | --------------- | ------------------------------------------------------------- | ------- | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'div' | +| **container** | Defines optional container wrapping children elements. | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`, `'fluid'` | - | +| **position** | Place header in non-static positions. | string | `'fixed'`, `'sticky'` | - |