pimelon-ui 0.1.75 → 0.1.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.75",
+  "version": "0.1.77",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -54,10 +54,11 @@
     "radix-vue": "^1.5.3",
     "showdown": "^2.1.0",
     "socket.io-client": "^4.5.1",
-    "tippy.js": "^6.3.7"
+    "tippy.js": "^6.3.7",
+    "typescript": "^5.0.2"
   },
   "peerDependencies": {
-    "vue": "^3.2.45",
+    "vue": ">=3.3.0",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
@@ -70,9 +71,8 @@
     "postcss": "^8.4.21",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.2.7",
-    "typescript": "^5.0.2",
     "vite": "^4.1.0",
-    "vue": "^3.2.45",
+    "vue": "^3.3.0",
     "vue-router": "^4.1.6"
   },
   "lint-staged": {

package/src/components/Tabs.story.md

@@ -10,12 +10,6 @@ It is an array of objects which contains the following attributes:
 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.

package/src/components/Tabs.vue

@@ -1,13 +1,15 @@
 <template>
   <TabGroup
     as="div"
-    class="flex flex-1 flex-col"
+    class="flex flex-1 flex-col overflow-y-hidden"
+    :style="`height: calc(100vh - ${tabListRef?.$el.offsetTop}px)`"
     :defaultIndex="changedIndex"
     :selectedIndex="changedIndex"
     @change="(idx) => (changedIndex = idx)"
   >
     <TabList
-      class="relative flex items-center gap-7.5 overflow-x-auto border-b pl-5"
+      ref="tabListRef"
+      class="relative flex items-center gap-7.5 overflow-x-auto border-b px-5"
       :class="tablistClass"
     >
       <Tab
@@ -30,9 +32,8 @@
       </Tab>
       <div
         ref="indicator"
-        class="absolute bottom-0 h-px bg-gray-900"
+        class="tab-indicator absolute bottom-0 h-px bg-gray-900"
         :class="transitionClass"
-        :style="{ left: `${indicatorLeft}px` }"
       />
     </TabList>
     <TabPanels class="flex flex-1 overflow-hidden" :class="tabPanelClass">
@@ -68,12 +69,6 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  options: {
-    type: Object,
-    default: () => ({
-      indicatorLeft: 20,
-    }),
-  },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -83,11 +78,11 @@ const changedIndex = computed({
   set: (index) => emit('update:modelValue', index),
 })
 
+const tabListRef = ref(null)
 const tabRef = ref([])
 const indicator = ref(null)
 const tabsLength = computed(() => props.tabs?.length)
 
-const indicatorLeft = ref(props.options?.indicatorLeft)
 const transitionClass = ref('')
 
 function moveIndicator(index) {
@@ -96,20 +91,20 @@ function moveIndicator(index) {
   }
   const selectedTab = tabRef.value[index].el
   indicator.value.style.width = `${selectedTab.offsetWidth}px`
-  indicatorLeft.value = selectedTab.offsetLeft
+  indicator.value.style.left = `${selectedTab.offsetLeft}px`
 }
 
 watch(changedIndex, (index) => {
   if (index >= tabsLength.value) {
     changedIndex.value = tabsLength.value - 1
   }
+  transitionClass.value = 'transition-all duration-300 ease-in-out'
   nextTick(() => moveIndicator(index))
 })
 
 onMounted(() => {
-  moveIndicator(changedIndex.value)
-  nextTick(() => {
-    transitionClass.value = 'transition-all duration-300 ease-in-out'
-  })
+  nextTick(() => moveIndicator(changedIndex.value))
+  // Fix for indicator not moving on initial load
+  setTimeout(() => moveIndicator(changedIndex.value), 100)
 })
 </script>