Skip to content

Commit

Permalink
feat(tabs): add component generics (#978)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mlmoravek
mlmoravek authored Jun 19, 2024
1 parent f07a7cc commit a9ded34
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 45 deletions.
52 changes: 26 additions & 26 deletions packages/docs/components/Tabs.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,21 +41,21 @@ sidebarDepth: 2

### Props

| Prop name | Description | Type | Values | Default |
| ---------------- | ----------------------------------------------- | ------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| animateInitially | Apply animation on the initial render | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;animateInitially: false<br>}</code> |
| animated | Tab will have an animation | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;animated: true<br>}</code> |
| animation | Transition animation name | Array&lt;string&gt; | `[next`, `prev]`, `[right`, `left`, `down`, `up]` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;animation: [ "slide-next", "slide-prev", "slide-down", "slide-up", ]<br>}</code> |
| destroyOnHide | Destroy tabItem on hide | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| expanded | Tabs will be expanded (full-width) | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| multiline | Show tab items multiline when there is no space | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| override | Override existing theme classes completely | boolean | - | |
| position | Position of the tabs | string | `left`, `centered`, `right` | |
| size | Tab size | string | `small`, `medium`, `large` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;size: undefined<br>}</code> |
| type | Tab type | string | `boxed`, `toggle` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;type: "default"<br>}</code> |
| v-model | | string\|number | - | <code style='white-space: nowrap; padding: 0;'>0</code> |
| variant | Color of the control | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;variant: undefined<br>}</code> |
| vertical | Show tab in vertical layout | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;vertical: false<br>}</code> |
| Prop name | Description | Type | Values | Default |
| ---------------- | ----------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| animateInitially | Apply animation on the initial render | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;animateInitially: false<br>}</code> |
| animated | Tab will have an animation | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;animated: true<br>}</code> |
| animation | Transition animation name | Array&lt;string&gt; | `[next`, `prev]`, `[right`, `left`, `down`, `up]` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;animation: [ "slide-next", "slide-prev", "slide-down", "slide-up", ]<br>}</code> |
| destroyOnHide | Destroy tabItem on hide | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| expanded | Tabs will be expanded (full-width) | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| multiline | Show tab items multiline when there is no space | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| override | Override existing theme classes completely | boolean | - | |
| position | Position of the tabs | string | `left`, `centered`, `right` | |
| size | Tab size | string | `small`, `medium`, `large` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;size: undefined<br>}</code> |
| type | Tab type | string | `boxed`, `toggle` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;type: "default"<br>}</code> |
| v-model | | string\|number\|object | - | <code style='white-space: nowrap; padding: 0;'>0</code> |
| variant | Color of the control | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;variant: undefined<br>}</code> |
| vertical | Show tab in vertical layout | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;vertical: false<br>}</code> |

### Events

Expand Down Expand Up @@ -84,17 +84,17 @@ sidebarDepth: 2

### Props

| Prop name | Description | Type | Values | Default |
| --------- | ------------------------------------------------------------------------ | ---------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| ariaRole | Role attribute to be passed to the div wrapper for better accessibility. | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;ariaRole: "tab"<br>}</code> |
| disabled | Item will be disabled | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| icon | Icon on the left | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;icon: undefined<br>}</code> |
| iconPack | Icon pack | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code> |
| label | Item label | string | - | |
| override | Override existing theme classes completely | boolean | - | |
| tag | Tabs item tag name | DynamicComponent | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;itemTag: "button"<br>}</code> |
| value | Item value (it will be used as v-model of wrapper component) | string\|number | - | Default function (see source code) |
| visible | Show/hide item | boolean | - | <code style='white-space: nowrap; padding: 0;'>true</code> |
| Prop name | Description | Type | Values | Default |
| --------- | ------------------------------------------------------------------------ | ---------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| ariaRole | Role attribute to be passed to the div wrapper for better accessibility. | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;ariaRole: "tab"<br>}</code> |
| disabled | Item will be disabled | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| icon | Icon on the left | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;icon: undefined<br>}</code> |
| iconPack | Icon pack | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code> |
| label | Item label | string | - | |
| override | Override existing theme classes completely | boolean | - | |
| tag | Tabs item tag name | DynamicComponent | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;itemTag: "button"<br>}</code> |
| value | Item value (it will be used as v-model of wrapper component) | string\|number\|object | - | Default function (see source code) |
| visible | Show/hide item | boolean | - | <code style='white-space: nowrap; padding: 0;'>true</code> |

### Events

Expand Down
14 changes: 10 additions & 4 deletions packages/oruga/src/components/tabs/TabItem.vue
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<script setup lang="ts">
<script setup lang="ts" generic="T extends string | number | object">
import { computed, ref, useSlots, type PropType } from "vue";
import { getOption } from "@/utils/config";
Expand All @@ -21,8 +21,14 @@ defineOptions({
const props = defineProps({
/** Override existing theme classes completely */
override: { type: Boolean, default: undefined },
/** Item value (it will be used as v-model of wrapper component) */
value: { type: [String, Number], default: () => uuid() },
/**
* Item value (it will be used as v-model of wrapper component)
* @type string|number|object
*/
value: {
type: [String, Number, Object] as PropType<T>,
default: () => uuid(),
},
/** Item label */
label: { type: String, default: undefined },
/** Item will be disabled */
Expand Down Expand Up @@ -109,7 +115,7 @@ const providedData = computed<TabItemComponent>(() => ({
}));
// Inject functionalities and data from the parent component
const { parent, item } = useProviderChild<TabsComponent>({
const { parent, item } = useProviderChild<TabsComponent<T>>({
data: providedData,
});
Expand Down
Loading

0 comments on commit a9ded34

Please sign in to comment.