feat(CSidebarBrand): allows to rendering the component as a link

mrholek · mrholek · commit 5dfb126fbcea · 2024-01-02T16:36:56.000+01:00
diff --git a/packages/coreui-vue/src/components/sidebar/CSidebarBrand.ts b/packages/coreui-vue/src/components/sidebar/CSidebarBrand.ts
@@ -2,8 +2,27 @@ import { defineComponent, h } from 'vue'
 
 const CSidebarBrand = defineComponent({
   name: 'CSidebarBrand',
-  setup(_, { slots }) {
-    return () => h('div', { class: 'sidebar-brand' }, slots.default && slots.default())
+  props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     *
+     */
+    as: {
+      type: String,
+      default: 'div',
+    },
+    /**
+     * The href attribute specifies the URL of the page the link goes to.
+     */
+    href: String,
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(
+        props.as ?? (props.href ? 'a' : 'div'),
+        { class: 'sidebar-brand', href: props.href },
+        slots.default && slots.default(),
+      )
   },
 })
 
diff --git a/packages/docs/api/sidebar/CSidebarBrand.api.md b/packages/docs/api/sidebar/CSidebarBrand.api.md
@@ -5,3 +5,10 @@ import { CSidebarBrand } from '@coreui/vue'
 // or
 import CSidebarBrand from '@coreui/vue/src/components/sidebar/CSidebarBrand'
 ```
+
+#### Props
+
+| 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'   |
+| **href**  | The href attribute specifies the URL of the page the link goes to.                      | string | -      | -       |
