Merge pull request #114 from frappe/tabs-component-fix

src/components/Tabs.story.md

@@ -0,0 +1,21 @@
+## Props
+
+### Tabs
+
+It is an array of objects which contains the following attributes:
+
+1. `label` is the name of the tab, it is required.
+2. `icon` is the icon to be shown in the tab, it accept component and it is
+ optional.
+3. You can add more attributes which can be used for custom rendering in the tab
+ header or content.
+
+### Options
+
+Currently, it has only one option `indicatorLeft` which is used to set the left
+position of the indicator in case of custom rendering. It is optional and
+default value is `20`.
+
+## v-model
+
+It is used to set the active tab or change the active tab. It is required.

src/components/Tabs.vue

@@ -27,8 +27,8 @@
  </Tab>
  <div
  ref="indicator"
- class="absolute -bottom-px h-px bg-gray-900"
- :style="{ left: `${indicatorLeftValue}px` }"
+ class="absolute -bottom-px h-px bg-gray-900 transition-all duration-300 ease-in-out"
+ :style="{ left: `${indicatorLeft}px` }"
  />
  </TabList>
  <TabPanels class="flex flex-1 overflow-hidden">
@@ -45,7 +45,6 @@
 
 <script setup>
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
-import { TransitionPresets, useTransition } from '@vueuse/core'
 import { ref, watch, computed, onMounted, nextTick } from 'vue'
 
 const props = defineProps({
@@ -57,6 +56,12 @@ const props = defineProps({
  type: Number,
  default: 0,
  },
+ options: {
+ type: Object,
+ default: () => ({
+ indicatorLeft: 20,
+ }),
+ },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -70,12 +75,7 @@ const tabRef = ref([])
 const indicator = ref(null)
 const tabsLength = ref(props.tabs?.length)
 
-let indicatorLeft = ref(0)
-
-const indicatorLeftValue = useTransition(indicatorLeft, {
- duration: 250,
- ease: TransitionPresets.easeOutCubic,
-})
+const indicatorLeft = ref(props.options?.indicatorLeft)
 
 function moveIndicator(index) {
  if (index >= tabsLength.value) {