@citizenplane/pimp 10.0.5 → 10.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "10.0.5",
+  "version": "10.0.6",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpTabs.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 type EmitType = {
   (e: 'onTabClick', index: number): void
@@ -41,9 +41,7 @@ interface Props {
   }[]
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  defaultActiveIndex: 0,
-})
+const props = withDefaults(defineProps<Props>(), { defaultActiveIndex: 0 })
 
 const emit = defineEmits<EmitType>()
 
@@ -88,15 +86,16 @@ const getUnderlineElement = () => {
 const setUnderlineStyle = () => {
   const activeTabElement = getActiveTabElement()
   const underlineElement = getUnderlineElement()
+  const containerElement = cpTabsElement.value
 
-  if (!activeTabElement) return
+  if (!activeTabElement || !underlineElement || !containerElement) return
 
-  const { clientWidth, offsetLeft } = activeTabElement
+  const tabRect = activeTabElement.getBoundingClientRect()
+  const containerRect = containerElement.getBoundingClientRect()
+  const left = tabRect.left - containerRect.left + containerElement.scrollLeft
 
-  if (!underlineElement) return
-
-  underlineElement.style.width = `${clientWidth}px`
-  underlineElement.style.transform = `translate3d(${offsetLeft}px, 0, 0)`
+  underlineElement.style.width = `${tabRect.width}px`
+  underlineElement.style.transform = `translate3d(${left}px, 0, 0)`
 }
 
 const scrollToActiveElement = () => {
@@ -111,11 +110,12 @@ onBeforeUnmount(() => window.removeEventListener('resize', setUnderlineStyle))
 onMounted(() => {
   window.addEventListener('resize', setUnderlineStyle)
 
-  setUnderlineStyle()
   activeTabIndex.value = props.defaultActiveIndex
+
+  nextTick(setUnderlineStyle)
 })
 
-watch(activeTabIndex, () => setUnderlineStyle())
+watch(activeTabIndex, () => nextTick(setUnderlineStyle))
 
 watch(
   () => props.defaultActiveIndex,
@@ -222,4 +222,16 @@ watch(
     border-radius: fn.px-to-rem(4);
   }
 }
+
+@include mx.media-query-max(768px) {
+  .cpTabs {
+    &__activeUnderline {
+      top: auto;
+      bottom: auto;
+      height: 100%;
+      border-radius: var(--pimp-radius-md);
+      opacity: 0.14;
+    }
+  }
+}
 </style>

package/src/stories/CpTabs.stories.ts

@@ -40,7 +40,7 @@ export const Default: Story = {
   args: {
     defaultActiveIndex: 0,
     isLoading: false,
-    tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }, { title: 'Tab 3' }],
+    tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }, { title: 'Tab 3' }, { title: 'Tab 4' }],
     onOnTabClick: action('tab-clicked'),
   },
   render: defaultRender,