@citizenplane/pimp 12.0.0 → 12.0.2

package/package.json

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

package/src/assets/css/shadows.css

@@ -12,7 +12,7 @@
   --cp-drop-shadow-2xs-spread: -2px;
   --cp-drop-shadow-2xs-inset-spread: -1px;
   --cp-drop-shadow-xs-blur: 11px;
-  --cp-drop-shadow-xs-color: var(--cp-colors-grey-shadow-color-12-5);
+  --cp-drop-shadow-xs-color: var(--cp-colors-grey-shadow-color-7-5);
   --cp-drop-shadow-xs-offset-x: 0;
   --cp-drop-shadow-xs-offset-y: 5px;
   --cp-drop-shadow-xs-spread: -2px;

package/src/components/CpTabs.vue

@@ -47,7 +47,7 @@ const emit = defineEmits<EmitType>()
 
 const cpTabsElement = ref<HTMLElement | null>(null)
 const activeUnderline = ref<HTMLElement | null>(null)
-const activeTabIndex = ref<number | null>(null)
+const activeTabIndex = ref<number | null>(props.defaultActiveIndex)
 
 const hasTabCount = (count?: number) => typeof count === 'number'
 
@@ -90,12 +90,8 @@ const setUnderlineStyle = () => {
 
   if (!activeTabElement || !underlineElement || !containerElement) return
 
-  const tabRect = activeTabElement.getBoundingClientRect()
-  const containerRect = containerElement.getBoundingClientRect()
-  const left = tabRect.left - containerRect.left + containerElement.scrollLeft
-
-  underlineElement.style.width = `${tabRect.width}px`
-  underlineElement.style.transform = `translate3d(${left}px, 0, 0)`
+  underlineElement.style.width = `${activeTabElement.offsetWidth}px`
+  underlineElement.style.transform = `translate3d(${activeTabElement.offsetLeft}px, 0, 0)`
 }
 
 const scrollToActiveElement = () => {
@@ -109,9 +105,6 @@ onBeforeUnmount(() => window.removeEventListener('resize', setUnderlineStyle))
 
 onMounted(() => {
   window.addEventListener('resize', setUnderlineStyle)
-
-  activeTabIndex.value = props.defaultActiveIndex
-
   nextTick(setUnderlineStyle)
 })
 
@@ -196,6 +189,15 @@ watch(
   }
 }
 
+@include mx.media-query-min(769px) {
+  .cpTabs {
+    &__tab--isActive {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}
+
 @include mx.media-query-max(768px) {
   .cpTabs {
     margin-right: var(--cp-spacing-xl);

package/src/stories/CpTabs.stories.ts

@@ -1,4 +1,5 @@
 import { action } from 'storybook/actions'
+import { ref } from 'vue'
 
 import type { Args, Meta, StoryObj } from '@storybook/vue3'
 
@@ -81,3 +82,32 @@ export const WithIconsAndCounts: Story = {
   },
   render: defaultRender,
 }
+
+export const InDialog: Story = {
+  args: {
+    ...Default.args,
+    defaultActiveIndex: 1,
+    tabs: [
+      { title: 'Notifications', icon: 'bell', count: 8 },
+      { title: 'Messages', icon: 'user', count: 3 },
+      { title: 'Tasks', icon: 'check', count: 15 },
+    ],
+  },
+  render: (args) => ({
+    components: { CpTabs },
+    setup() {
+      const isVisible = ref(false)
+      return { args, isVisible }
+    },
+    template: `
+      <cp-transition-dialog>
+        <cp-dialog v-if="isVisible" title="Tabs in dialog" @close="isVisible = false">
+          <CpTabs v-bind="args" @on-tab-click="args.onOnTabClick" v-if="isVisible" />
+        </cp-dialog>
+      </cp-transition-dialog>
+      <div style="display: flex; justify-content: center; align-items: center; min-height: 240px; min-width:240px;">
+        <cp-button @click="isVisible = !isVisible">Open dialog</cp-button>
+      </div>
+    `,
+  }),
+}