fix: using frappeui Tabs component in Lead/Deal

frappe-ui

@@ -1 +1 @@
-Subproject commit 8762f85ef72c01c2dbf9fbe2bd7417911d347ac3
+Subproject commit 167ff453cb525674f976d53b126900b80b9a80a2

frontend/.gitignore

@@ -2,10 +2,4 @@ node_modules
 .DS_Store
 dist
 dist-ssr
-*.local
+*.local
-*.pyc
-*.egg-info
-*.swp
-tags
-crm/public/frontend
-__pycache__

frontend/package.json

@@ -16,7 +16,7 @@
     "@vueuse/integrations": "^10.3.0",
     "autoprefixer": "^10.4.14",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.5",
+    "frappe-ui": "^0.1.6",
     "pinia": "^2.0.33",
     "postcss": "^8.4.5",
     "socket.io-client": "^4.7.2",

frontend/src/pages/Deal.vue

@@ -36,43 +36,9 @@
     </template>
   </LayoutHeader>
   <div v-if="deal.data" class="flex h-full overflow-hidden">
-    <TabGroup as="div" class="flex flex-1 flex-col" @change="onTabChange">
+    <Tabs v-model="tabIndex" v-slot="{ tab }" :tabs="tabs">
-      <TabList class="relative flex items-center gap-6 border-b pl-5">
+      <Activities :title="tab.label" v-model:reload="reload" v-model="deal" />
-        <Tab
+    </Tabs>
-          ref="tabRef"
-          as="template"
-          v-for="tab in tabs"
-          :key="tab.label"
-          v-slot="{ selected }"
-        >
-          <button
-            class="-mb-[1px] flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 transition-all duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
-            :class="{ 'text-gray-900': selected }"
-          >
-            <component v-if="tab.icon" :is="tab.icon" class="h-5" />
-            {{ tab.label }}
-          </button>
-        </Tab>
-        <div
-          ref="indicator"
-          class="absolute -bottom-[1px] h-[1px] w-[82px] bg-gray-900"
-          :style="{ left: `${indicatorLeftValue}px` }"
-        />
-      </TabList>
-      <TabPanels class="flex flex-1 overflow-hidden">
-        <TabPanel
-          class="flex flex-1 flex-col overflow-y-auto"
-          v-for="tab in tabs"
-          :key="tab.label"
-        >
-          <Activities
-            :title="tab.label"
-            v-model:reload="reload"
-            v-model="deal"
-          />
-        </TabPanel>
-      </TabPanels>
-    </TabGroup>
     <div class="flex w-[352px] flex-col justify-between border-l">
       <div
         class="flex h-[41px] items-center border-b px-5 py-2.5 text-lg font-semibold"
@@ -352,8 +318,6 @@ import Toggler from '@/components/Toggler.vue'
 import Activities from '@/components/Activities.vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
-import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
-import { TransitionPresets, useTransition } from '@vueuse/core'
 import {
   dealStatuses,
   statusDropdownOptions,
@@ -372,6 +336,7 @@ import {
   Dropdown,
   Tooltip,
   Avatar,
+  Tabs,
 } from 'frappe-ui'
 import { ref, computed } from 'vue'
 
@@ -434,6 +399,7 @@ const breadcrumbs = computed(() => {
   return items
 })
 
+const tabIndex = ref(0)
 const tabs = [
   {
     label: 'Activity',
@@ -469,21 +435,6 @@ function validateFile(file) {
   }
 }
 
-const tabRef = ref([])
-const indicator = ref(null)
-
-let indicatorLeft = ref(20)
-const indicatorLeftValue = useTransition(indicatorLeft, {
-  duration: 250,
-  ease: TransitionPresets.easeOutCubic,
-})
-
-function onTabChange(index) {
-  const selectedTab = tabRef.value[index].el
-  indicator.value.style.width = `${selectedTab.offsetWidth}px`
-  indicatorLeft.value = selectedTab.offsetLeft
-}
-
 const detailSections = computed(() => {
   return [
     {

frontend/src/pages/Lead.vue

@@ -39,43 +39,9 @@
     </template>
   </LayoutHeader>
   <div v-if="lead?.data" class="flex h-full overflow-hidden">
-    <TabGroup as="div" class="flex flex-1 flex-col" @change="onTabChange">
+    <Tabs v-model="tabIndex" v-slot="{ tab }" :tabs="tabs">
-      <TabList class="relative flex items-center gap-6 border-b pl-5">
+      <Activities :title="tab.label" v-model:reload="reload" v-model="lead" />
-        <Tab
+    </Tabs>
-          ref="tabRef"
-          as="template"
-          v-for="tab in tabs"
-          :key="tab.label"
-          v-slot="{ selected }"
-        >
-          <button
-            class="-mb-[1px] flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 transition-all duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
-            :class="{ 'text-gray-900': selected }"
-          >
-            <component v-if="tab.icon" :is="tab.icon" class="h-5" />
-            {{ tab.label }}
-          </button>
-        </Tab>
-        <div
-          ref="indicator"
-          class="absolute -bottom-[1px] h-[1px] w-[82px] bg-gray-900"
-          :style="{ left: `${indicatorLeftValue}px` }"
-        />
-      </TabList>
-      <TabPanels class="flex flex-1 overflow-hidden">
-        <TabPanel
-          class="flex flex-1 flex-col overflow-y-auto"
-          v-for="tab in tabs"
-          :key="tab.label"
-        >
-          <Activities
-            :title="tab.label"
-            v-model:reload="reload"
-            v-model="lead"
-          />
-        </TabPanel>
-      </TabPanels>
-    </TabGroup>
     <div class="flex w-[352px] flex-col justify-between border-l">
       <div
         class="flex h-[41px] items-center border-b px-5 py-2.5 text-lg font-semibold"
@@ -323,8 +289,6 @@ import Toggler from '@/components/Toggler.vue'
 import Activities from '@/components/Activities.vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
-import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
-import { TransitionPresets, useTransition } from '@vueuse/core'
 import {
   leadStatuses,
   statusDropdownOptions,
@@ -343,12 +307,12 @@ import {
   Dropdown,
   Tooltip,
   Avatar,
+  Tabs,
 } from 'frappe-ui'
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import CameraIcon from '../components/Icons/CameraIcon.vue'
 
-
 const { getUser, users } = usersStore()
 const { contacts } = contactsStore()
 const router = useRouter()
@@ -412,6 +376,7 @@ const breadcrumbs = computed(() => {
   return items
 })
 
+const tabIndex = ref(0)
 const tabs = [
   {
     label: 'Activity',
@@ -447,21 +412,6 @@ function validateFile(file) {
   }
 }
 
-const tabRef = ref([])
-const indicator = ref(null)
-
-let indicatorLeft = ref(20)
-const indicatorLeftValue = useTransition(indicatorLeft, {
-  duration: 250,
-  ease: TransitionPresets.easeOutCubic,
-})
-
-function onTabChange(index) {
-  const selectedTab = tabRef.value[index].el
-  indicator.value.style.width = `${selectedTab.offsetWidth}px`
-  indicatorLeft.value = selectedTab.offsetLeft
-}
-
 const detailSections = computed(() => {
   return [
     {

package.json

@@ -1,6 +1,6 @@
 {
     "private": true,
-    "workspaces": ["frappe-ui", "frontend"],
+    "aworkspaces": ["frappe-ui", "frontend"],
     "scripts": {
         "postinstall": "cd frontend && yarn install",
         "dev": "cd frontend && yarn dev",