@citizenplane/pimp 10.0.5 → 10.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "10.0.5",
+  "version": "10.0.7",
   "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,
@@ -131,19 +131,10 @@ watch(
 
   /* Scrolling Visual Cue */
   background:
-    linear-gradient(to right, fn.v(background-primary) 30%, rgba(255, 255, 255, 0%)),
-    linear-gradient(to right, rgba(fn.v(background-primary), 0), fn.v(background-primary) 70%) 0 100%,
-    radial-gradient(
-      farthest-side at 0% 50%,
-      rgba(fn.v(foreground-secondary), 0.2),
-      rgba(fn.v(foreground-secondary), 0)
-    ),
-    radial-gradient(
-        farthest-side at 100% 50%,
-        rgba(fn.v(foreground-secondary), 0.2),
-        rgba(fn.v(foreground-secondary), 0)
-      )
-      0 100%;
+    linear-gradient(90deg, #fff 30%, #fff0),
+    linear-gradient(90deg, #fff0, #fff 70%) 0 100%,
+    radial-gradient(farthest-side at 0 50%, #3e3e5b33, #3e3e5b00),
+    radial-gradient(farthest-side at 100% 50%, #3e3e5b33, #3e3e5b00) 0 100%;
   background-attachment: local, local, scroll, scroll;
   background-color: fn.v(background-primary);
   background-position:
@@ -222,4 +213,20 @@ watch(
     border-radius: fn.px-to-rem(4);
   }
 }
+
+@include mx.media-query-max(768px) {
+  .cpTabs {
+    margin-right: sp.$space-lg;
+    padding: fn.px-to-rem(3) 0;
+    overflow-x: auto;
+
+    &__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,