feat: add component to tag prop types

* Update tag prop types * Fix type
oruga-ui · Jun 18, 2023 · 7c62f2b · 7c62f2b
1 parent 1dc1f2d
commit 7c62f2b
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 12 deletions.
diff --git a/packages/oruga-next/src/components/autocomplete/Autocomplete.vue b/packages/oruga-next/src/components/autocomplete/Autocomplete.vue
@@ -98,6 +98,7 @@
 </template>
 
 <script lang="ts">
+import type { Component, PropType } from 'vue'
 import { defineComponent } from 'vue'
 
 import Input from '../input/Input.vue'
@@ -208,7 +209,7 @@ export default defineComponent({
          * Menu tag name
          */
         menuTag: {
-            type: String,
+            type: [String, Object, Function] as PropType<string | Component>,
             default: () => {
                 return getValueByPath(getOptions(), 'autocomplete.menuTag', 'div')
             }
@@ -217,7 +218,7 @@ export default defineComponent({
          * Menu item tag name
          */
         itemTag: {
-            type: String,
+            type: [String, Object, Function] as PropType<string | Component>,
             default: () => {
                 return getValueByPath(getOptions(), 'autocomplete.itemTag', 'div')
             }

diff --git a/packages/oruga-next/src/components/button/Button.vue b/packages/oruga-next/src/components/button/Button.vue
@@ -33,6 +33,7 @@
 </template>
 
 <script lang="ts">
+import type { Component, PropType } from 'vue'
 import { defineComponent } from 'vue'
 
 import Icon from '../icon/Icon.vue'
@@ -121,7 +122,7 @@ export default defineComponent({
          * @values button, a, input, router-link, nuxt-link (or other nuxt alias)
          */
         tag: {
-            type: String,
+            type: [String, Object, Function] as PropType<string | Component>,
             default: 'button'
         },
         /**

diff --git a/packages/oruga-next/src/components/dropdown/Dropdown.vue b/packages/oruga-next/src/components/dropdown/Dropdown.vue
@@ -43,6 +43,7 @@
 </template>
 
 <script lang="ts">
+import type { Component, PropType } from 'vue'
 import { defineComponent } from 'vue'
 
 import BaseComponentMixin from '../../utils/BaseComponentMixin'
@@ -190,7 +191,7 @@ export default defineComponent({
          * Dropdown menu tag name
          */
         menuTag: {
-            type: String,
+            type: [String, Object, Function] as PropType<string | Component>,
             default: () => {
                 return getValueByPath(getOptions(), 'dropdown.menuTag', 'div')
             }

diff --git a/packages/oruga-next/src/components/dropdown/DropdownItem.vue b/packages/oruga-next/src/components/dropdown/DropdownItem.vue
@@ -10,6 +10,7 @@
 </template>
 
 <script lang="ts">
+import type { Component, PropType } from 'vue'
 import { defineComponent } from 'vue'
 
 import BaseComponentMixin from '../../utils/BaseComponentMixin'
@@ -48,7 +49,7 @@ export default defineComponent({
          * Dropdown item tag name
          */
         tag: {
-            type: String,
+            type: [String, Object, Function] as PropType<string | Component>,
             default: () => {
                 return getValueByPath(getOptions(), 'dropdown.itemTag', 'div')
             }

diff --git a/packages/oruga-next/src/components/menu/MenuItem.vue b/packages/oruga-next/src/components/menu/MenuItem.vue
@@ -39,6 +39,7 @@
 
 <script lang="ts">
 import BaseComponentMixin from '../../utils/BaseComponentMixin';
+import type { Component, PropType } from 'vue'
 import {defineComponent} from "vue";
 
 export default defineComponent({
@@ -58,7 +59,7 @@ export default defineComponent({
             default: 'slide'
         },
         tag: {
-            type: String,
+            type: [String, Object, Function] as PropType<string | Component>,
             default: 'a'
         },
         ariaRole: {

diff --git a/packages/oruga-next/src/components/pagination/PaginationButton.vue b/packages/oruga-next/src/components/pagination/PaginationButton.vue
@@ -14,6 +14,7 @@
 </template>
 
 <script lang="ts">
+import type { Component, PropType } from 'vue'
 import { defineComponent } from 'vue'
 import { getOptions } from '../../utils/config'
 import { getValueByPath } from '../../utils/helpers'
@@ -28,9 +29,14 @@ export default defineComponent({
             required: true
         },
         tag: {
-            type: String,
+            type: [String, Object, Function] as PropType<string | Component>,
             default: 'a',
-            validator: (value) => getValueByPath(getOptions(), 'linkTags', ['a', 'button', 'input', 'router-link', 'nuxt-link']).indexOf(value) >= 0
+            validator: (value) => {
+                if (typeof value === 'string') {
+                    return getValueByPath(getOptions(), 'linkTags', ['a', 'button', 'input', 'router-link', 'nuxt-link']).indexOf(value) >= 0
+                }
+                return true
+            }
         },
         disabled: {
             type: Boolean,

diff --git a/packages/oruga-next/src/components/tabs/TabItem.vue b/packages/oruga-next/src/components/tabs/TabItem.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import type { Component, PropType } from 'vue'
 import { defineComponent } from 'vue'
 
 import BaseComponentMixin from '../../utils/BaseComponentMixin'
@@ -21,7 +22,7 @@ export default defineComponent({
          * Tabs item tag name
          */
         tag: {
-            type: String,
+            type: [String, Object, Function] as PropType<string | Component>,
             default: () => {
                 return getValueByPath(getOptions(), 'tabs.itemTag', 'button')
             }

diff --git a/packages/oruga-next/src/utils/SlotComponent.ts b/packages/oruga-next/src/utils/SlotComponent.ts
@@ -1,4 +1,4 @@
-import type { DefineComponent } from 'vue';
+import type { Component, DefineComponent, PropType } from 'vue';
 import { defineComponent, h } from 'vue';
 
 export default defineComponent({
@@ -16,8 +16,8 @@ export default defineComponent({
             type: Object
         },
         tag: {
-            type: String,
-            default: 'div'
+            type: [String, Object, Function] as PropType<string | Component>,
+             default: 'div'
         }
     },
     render() {