fix: Tab component props

EzzalddeenAli · Jan 31, 2024 · d72a683 · d72a683
1 parent 89832b4
commit d72a683
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 17 deletions.
diff --git a/frontend/src/components/Controls/InputWithTabs.vue b/frontend/src/components/Controls/InputWithTabs.vue
@@ -32,7 +32,11 @@ function getLabel() {
 			<div
 				class="my-2 flex select-none flex-col space-y-3 rounded border bg-white p-3 text-base shadow-md"
 			>
-				<Tabs :tabs="tabs" @switch="$emit('tab-change', $event.label)" />
+				<Tabs
+					:tabs="tabs"
+					:model-value="getLabel()"
+					@update:model-value="$emit('tab-change', $event.label)"
+				/>
 				<slot name="inputs"></slot>
 				<div class="flex w-full justify-end">
 					<Button variant="solid" @click="togglePopover()"> Done </Button>

diff --git a/frontend/src/components/Controls/TimespanPicker.vue b/frontend/src/components/Controls/TimespanPicker.vue
@@ -14,14 +14,7 @@
 			<div
 				class="my-2 flex w-[18rem] select-none flex-col space-y-3 rounded border bg-white p-3 text-base shadow-md"
 			>
-				<Tabs
-					:tabs="[
-						{ label: 'Last', active: span == 'Last' },
-						{ label: 'Current', active: span == 'Current' },
-						{ label: 'Next', active: span == 'Next' },
-					]"
-					@switch="(tab) => (span = tab.label)"
-				></Tabs>
+				<Tabs :tabs="['Last', 'Current', 'Next']" v-model="span"></Tabs>
 
 				<div class="flex space-x-2">
 					<Input

diff --git a/frontend/src/components/Controls/TimespanPickerFlat.vue b/frontend/src/components/Controls/TimespanPickerFlat.vue
@@ -1,13 +1,6 @@
 <template>
 	<div class="flex select-none flex-col space-y-3 text-base">
-		<Tabs
-			:tabs="[
-				{ label: 'Last', active: span == 'Last' },
-				{ label: 'Current', active: span == 'Current' },
-				{ label: 'Next', active: span == 'Next' },
-			]"
-			@switch="(tab) => (span = tab.label)"
-		></Tabs>
+		<Tabs :tabs="['Last', 'Current', 'Next']" v-model="span"></Tabs>
 
 		<div class="flex space-x-2">
 			<Input