feat(#93): add tag prop to customise component tag

Realityloop · Mar 12, 2024 · 4c3ff6e · 4c3ff6e
1 parent 8f05f78
commit 4c3ff6e
Showing 1 changed file with 12 additions and 6 deletions.
diff --git a/src/components/Popover.vue b/src/components/Popover.vue
@@ -1,5 +1,6 @@
 <template>
-  <div
+  <component
+    :is="tag"
     :class="`ct-popover ${themeClass}`"
     data-collapsible="1"
     data-collapsible-collapsed=""
@@ -18,16 +19,17 @@
       </slot>
     </a>
 
-    <div
+    <component
+      :is="tag"
       class="ct-popover__content"
       data-collapsible-panel
       data-collapsible-trigger-no-icon
     >
-      <div class="ct-popover__content__inner">
+      <component :is="tag" class="ct-popover__content__inner">
         <slot />
-      </div>
-    </div>
-  </div>
+      </component>
+    </component>
+  </component>
 </template>
 
 <script>
@@ -37,6 +39,10 @@ export default {
   mixins: [ThemeMixin],
 
   props: {
+    tag: {
+      type: String,
+      default: 'div'
+    },
     trigger: {
       type: String,
       default: 'Click me'