frappe-ui 0.1.15 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {

package/readme.md

@@ -52,9 +52,11 @@ module.exports = {
 }
 ```
 
+Now, you can import needed components and start using it:
+
 ```html
 <template>
-  <button>Click me</button>
+  <Button>Click me</Button>
 </template>
 <script>
   import { Button } from 'frappe-ui'

package/src/components/Tabs.vue

@@ -27,7 +27,8 @@
       </Tab>
       <div
         ref="indicator"
-        class="absolute -bottom-px h-px bg-gray-900 transition-all duration-300 ease-in-out"
+        class="absolute -bottom-px h-px bg-gray-900"
+        :class="transitionClass"
         :style="{ left: `${indicatorLeft}px` }"
       />
     </TabList>
@@ -76,6 +77,7 @@ const indicator = ref(null)
 const tabsLength = ref(props.tabs?.length)
 
 const indicatorLeft = ref(props.options?.indicatorLeft)
+const transitionClass = ref('')
 
 function moveIndicator(index) {
   if (index >= tabsLength.value) {
@@ -93,5 +95,10 @@ watch(changedIndex, (index) => {
   nextTick(() => moveIndicator(index))
 })
 
-onMounted(() => moveIndicator(changedIndex.value))
+onMounted(() => {
+  moveIndicator(changedIndex.value)
+  nextTick(() => {
+    transitionClass.value = 'transition-all duration-300 ease-in-out'
+  })
+})
 </script>