@citizenplane/pimp 9.15.4 → 9.16.0

package/package.json

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

package/src/components/CpTable.vue

@@ -267,7 +267,7 @@ const getVisibleColumnsIds = () => {
 const fullWidthColumn = computed(() => normalizedColumns.value.find(({ isFull }) => isFull))
 
 const hasAFullWidthColumnVisible = computed(() => {
-  if (!fullWidthColumn.value) return false
+  if (!fullWidthColumn.value) return true
   return columnsModel.value.includes(fullWidthColumn.value.id)
 })
 

package/src/components/CpTabs.vue

@@ -0,0 +1,238 @@
+<template>
+  <div ref="cpTabsElement" class="cpTabs" role="tablist">
+    <button
+      v-for="(tab, index) in tabs"
+      :key="tab.title"
+      class="cpTabs__tab"
+      :class="getTabClass(index)"
+      role="tab"
+      tabindex="0"
+      type="button"
+      @click="handleTabClick(index)"
+    >
+      <cp-icon v-if="tab.icon" class="cpTabs__icon" size="16" :type="tab.icon" />
+      <cp-heading class="cpTabs__title" heading-level="h4">
+        {{ tab.title }}
+      </cp-heading>
+      <div v-if="hasTabCount(tab.count)" class="cpTabs__count">
+        <cp-badge :color="dynamicBadgeColor(index)" size="xs">
+          {{ tab.count }}
+        </cp-badge>
+      </div>
+    </button>
+    <div ref="activeUnderline" class="cpTabs__activeUnderline" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+type EmitType = {
+  (e: 'onTabClick', index: number): void
+}
+
+interface Props {
+  defaultActiveIndex?: number
+  isLoading?: boolean
+  tabs: {
+    count?: number
+    icon?: string
+    title: string
+  }[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultActiveIndex: 0,
+})
+
+const emit = defineEmits<EmitType>()
+
+const cpTabsElement = ref<HTMLElement | null>(null)
+const activeUnderline = ref<HTMLElement | null>(null)
+const activeTabIndex = ref<number | null>(null)
+
+const hasTabCount = (count?: number) => typeof count === 'number'
+
+const handleTabClick = (index: number) => {
+  if (props.isLoading) return
+
+  activeTabIndex.value = index
+  emit('onTabClick', index)
+  scrollToActiveElement()
+}
+
+const getTabClass = (tabIndex: number) => {
+  if (!props.tabs[tabIndex]) return
+
+  return [{ 'cpTabs__tab--isActive': activeTabIndex.value === tabIndex }, { 'cpTabs__tab--isLoading': props.isLoading }]
+}
+
+const dynamicBadgeColor = (index: number) => (index === activeTabIndex.value ? 'purple' : 'gray')
+
+const getActiveTabElement = () => {
+  const componentElement = cpTabsElement.value
+
+  if (!componentElement) return
+  if (activeTabIndex.value === null) return
+
+  return componentElement.children[activeTabIndex.value] as HTMLElement
+}
+
+const getUnderlineElement = () => {
+  const underlineElement = activeUnderline.value
+  if (!underlineElement) return
+
+  return underlineElement
+}
+
+const setUnderlineStyle = () => {
+  const activeTabElement = getActiveTabElement()
+  const underlineElement = getUnderlineElement()
+
+  if (!activeTabElement) return
+
+  const { clientWidth, offsetLeft } = activeTabElement
+
+  if (!underlineElement) return
+
+  underlineElement.style.width = `${clientWidth}px`
+  underlineElement.style.transform = `translate3d(${offsetLeft}px, 0, 0)`
+}
+
+const scrollToActiveElement = () => {
+  const activeTabElement = getActiveTabElement()
+  if (!activeTabElement) return
+
+  return activeTabElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+}
+
+onBeforeUnmount(() => window.removeEventListener('resize', setUnderlineStyle))
+
+onMounted(() => {
+  window.addEventListener('resize', setUnderlineStyle)
+
+  setUnderlineStyle()
+  activeTabIndex.value = props.defaultActiveIndex
+})
+
+watch(activeTabIndex, () => setUnderlineStyle())
+
+watch(
+  () => props.defaultActiveIndex,
+  (newValue) => (activeTabIndex.value = newValue),
+)
+</script>
+
+<style lang="scss">
+.cpTabs {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  /* 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%;
+  background-attachment: local, local, scroll, scroll;
+  background-color: fn.v(background-primary);
+  background-position:
+    0 0,
+    100%,
+    0 0,
+    100%;
+  background-repeat: no-repeat;
+  background-size:
+    40px 100%,
+    40px 100%,
+    14px 100%,
+    14px 100%;
+  gap: fn.v(spacing-md);
+
+  &__activeUnderline {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: fn.px-to-rem(2);
+    transition:
+      background-color 300ms ease,
+      transform 300ms cubic-bezier(0.34, 1.26, 0.64, 1),
+      width 300ms cubic-bezier(0.34, 1.26, 0.64, 1);
+  }
+
+  &__tab {
+    @extend %u-focus-outline;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: fn.v(spacing-md);
+    border-radius: fn.px-to-rem(8);
+    color: fn.v(text-secondary);
+    gap: fn.v(spacing-sm);
+    -webkit-tap-highlight-color: transparent;
+    transition:
+      box-shadow 300ms ease,
+      opacity 300ms ease;
+
+    &:focus-visible {
+      outline-offset: fn.px-to-rem(-2);
+    }
+
+    &--isLoading {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    &--isActive {
+      color: fn.v(text-accent-primary);
+    }
+
+    &--isActive ~ .cpTabs__activeUnderline {
+      background-color: fn.v(border-accent-solid);
+    }
+  }
+
+  &__title {
+    font-size: fn.px-to-em(14);
+    font-weight: 500;
+    line-height: fn.px-to-rem(24);
+    padding-inline: fn.v(spacing-sm);
+    transition: color 300ms ease;
+    white-space: nowrap;
+  }
+
+  &__count {
+    font-variant: tabular-nums;
+  }
+
+  &__icon {
+    position: relative;
+    display: flex;
+    border-radius: fn.px-to-rem(4);
+  }
+
+  @media (max-width: 700px) {
+    margin-right: fn.v(spacing-lg);
+    overflow-x: auto;
+
+    &__activeUnderline {
+      top: auto;
+      bottom: auto;
+      height: 100%;
+      border-radius: fn.px-to-rem(8);
+      opacity: 0.14;
+    }
+  }
+}
+</style>

package/src/components/index.ts

@@ -39,6 +39,7 @@ import CpSelectMenu from './CpSelectMenu.vue'
 import CpSwitch from './CpSwitch.vue'
 import CpTable from './CpTable.vue'
 import CpTableColumnEditor from './CpTableColumnEditor.vue'
+import CpTabs from './CpTabs.vue'
 import CpTelInput from './CpTelInput.vue'
 import CpTextarea from './CpTextarea.vue'
 import CpToast from './CpToast.vue'
@@ -61,6 +62,7 @@ const Components = {
   CpToaster,
   CpToast,
   CpBadge,
+  CpTabs,
   CpHeading,
   CpButton,
   CpButtonGroup,

package/src/stories/CpTabs.stories.ts

@@ -0,0 +1,83 @@
+import { action } from 'storybook/actions'
+
+import type { Args, Meta, StoryObj } from '@storybook/vue3'
+
+import CpTabs from '@/components/CpTabs.vue'
+
+const meta = {
+  title: 'CpTabs',
+  component: CpTabs,
+  argTypes: {
+    defaultActiveIndex: {
+      control: 'number',
+      description: 'The index of the initially active tab',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Whether the tabs are in loading state',
+    },
+    tabs: {
+      control: 'object',
+      description: 'Array of tab objects with title, optional icon, and optional count',
+    },
+  },
+} satisfies Meta<typeof CpTabs>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const defaultTemplate = '<CpTabs v-bind="args" @on-tab-click="args.onOnTabClick" />'
+const defaultRender = (args: Args) => ({
+  components: { CpTabs },
+  setup() {
+    return { args }
+  },
+  template: defaultTemplate,
+})
+
+export const Default: Story = {
+  args: {
+    defaultActiveIndex: 0,
+    isLoading: false,
+    tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }, { title: 'Tab 3' }],
+    onOnTabClick: action('tab-clicked'),
+  },
+  render: defaultRender,
+}
+
+export const WithIcons: Story = {
+  args: {
+    ...Default.args,
+    tabs: [
+      { title: 'Home', icon: 'home' },
+      { title: 'Settings', icon: 'settings' },
+      { title: 'User', icon: 'user' },
+    ],
+  },
+  render: defaultRender,
+}
+
+export const WithCounts: Story = {
+  args: {
+    ...Default.args,
+    tabs: [
+      { title: 'Inbox', count: 5 },
+      { title: 'Sent', count: 12 },
+      { title: 'Drafts', count: 3 },
+    ],
+  },
+  render: defaultRender,
+}
+
+export const WithIconsAndCounts: Story = {
+  args: {
+    ...Default.args,
+    tabs: [
+      { title: 'Notifications', icon: 'bell', count: 8 },
+      { title: 'Messages', icon: 'user', count: 3 },
+      { title: 'Tasks', icon: 'check', count: 15 },
+    ],
+  },
+  render: defaultRender,
+}