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

* feat(#93): add tag prop to customise component tag * chore(#93): add validator
Realityloop · Mar 12, 2024 · 68adfa8 · 68adfa8
1 parent 8f05f78
commit 68adfa8
Showing 1 changed file with 13 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,11 @@ export default {
   mixins: [ThemeMixin],
 
   props: {
+    tag: {
+      type: String,
+      validator: (value) => ['div', 'span'].includes(value),
+      default: 'div'
+    },
     trigger: {
       type: String,
       default: 'Click me'