From 68adfa838a5726b45b991496de1ec53e19895706 Mon Sep 17 00:00:00 2001
From: Stuart Clark <stu@rtclark.net>
Date: Tue, 12 Mar 2024 12:53:01 +1100
Subject: [PATCH] feat(#93): add tag prop to customise component tag (#144)

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

* chore(#93): add validator
---
 src/components/Popover.vue | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/Popover.vue b/src/components/Popover.vue
index 9dadabd..43cd42c 100644
--- 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,11 @@ export default {
   mixins: [ThemeMixin],
 
   props: {
+    tag: {
+      type: String,
+      validator: (value) => ['div', 'span'].includes(value),
+      default: 'div'
+    },
     trigger: {
       type: String,
       default: 'Click me'