@citizenplane/pimp 13.1.0 → 14.0.0

package/package.json

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

package/src/components/CpAccordion.vue

@@ -29,11 +29,11 @@
         :quick-options-limit="resolvedQuickOptionsLimit"
       />
     </button>
-    <transition-expand>
+    <cp-transition-expand>
       <div v-if="isToggled" :id="accordionContentId" :aria-labelledby="accordionId" class="cpAccordion__content">
         <slot />
       </div>
-    </transition-expand>
+    </cp-transition-expand>
   </div>
 </template>
 
@@ -150,12 +150,8 @@ const handleClick = () => (isToggled.value = !isToggled.value)
   }
 
   &__actions {
-    right: 0;
-    top: 0;
-    height: 100%;
     background: linear-gradient(270deg, var(--cp-utility-neutral-100) 0%, rgba(242, 246, 250, 0) 100%);
     padding: 0 var(--cp-spacing-md) 0 15%;
-    transform: translate3d(calc(var(--cp-dimensions-1) * 1.25), 0%, 0);
     display: flex;
     align-items: center;
   }
@@ -164,11 +160,4 @@ const handleClick = () => (isToggled.value = !isToggled.value)
     color: var(--cp-foreground-primary);
   }
 }
-
-@media (hover: hover) and (pointer: fine) {
-  [cp-item-actions-trigger]:has(.cpItemActions--isDropdownOpen) .cpItemActions,
-  [cp-item-actions-trigger]:is(:focus-within, :focus-visible, :hover) .cpItemActions {
-    transform: translate3d(0, 0, 0);
-  }
-}
 </style>

package/src/components/CpDate.vue

@@ -45,9 +45,9 @@
         :required="required"
       />
     </div>
-    <transition-expand>
+    <cp-transition-expand>
       <div v-if="advancedErrorMessage" class="cpDate__errorMessage">{{ advancedErrorMessage }}</div>
-    </transition-expand>
+    </cp-transition-expand>
   </div>
 </template>
 

package/src/components/CpInput.vue

@@ -39,14 +39,14 @@
         </transition>
       </div>
     </div>
-    <transition-expand mode="out-in">
+    <cp-transition-expand mode="out-in">
       <p v-if="displayErrorMessage" :id="errorMessageId" class="cpInput__error">
         {{ errorMessage }}
       </p>
       <p v-else-if="displayHelp" :id="helpMessageId" class="cpInput__help">
         {{ help }}
       </p>
-    </transition-expand>
+    </cp-transition-expand>
   </div>
 </template>
 

package/src/components/CpMultiselect.vue

@@ -86,11 +86,11 @@
         />
       </template>
     </auto-complete>
-    <transition-expand mode="out-in">
+    <cp-transition-expand mode="out-in">
       <p v-if="isInvalid" class="cpMultiselect__error">
         {{ errorMessage }}
       </p>
-    </transition-expand>
+    </cp-transition-expand>
   </div>
 </template>
 
@@ -101,7 +101,7 @@ import { ref, computed, onMounted, useSlots, useId } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 import BaseSelectClearButton from '@/components/BaseSelectClearButton.vue'
-import TransitionExpand from '@/components/TransitionExpand.vue'
+import CpTransitionExpand from '@/components/CpTransitionExpand.vue'
 
 import { isEmpty } from '@/helpers/object'
 

package/src/components/CpSelect.vue

@@ -25,14 +25,14 @@
         <option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</option>
       </select>
     </div>
-    <transition-expand mode="out-in">
+    <cp-transition-expand mode="out-in">
       <p v-if="displayErrorMessage" :id="errorMessageId" class="cpSelect__error">
         {{ errorMessage }}
       </p>
       <p v-else-if="displayHelp" :id="helpMessageId" class="cpSelect__help">
         {{ help }}
       </p>
-    </transition-expand>
+    </cp-transition-expand>
   </div>
 </template>
 
@@ -40,7 +40,7 @@
 import { computed, useId } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
-import TransitionExpand from '@/components/TransitionExpand.vue'
+import CpTransitionExpand from '@/components/CpTransitionExpand.vue'
 
 import type { Sizes } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'

package/src/components/CpTelInput.vue

@@ -28,14 +28,14 @@
         </template>
       </vue-tel-input>
     </div>
-    <transition-expand mode="out-in">
+    <cp-transition-expand mode="out-in">
       <p v-if="displayErrorMessage" :id="errorMessageId" class="cpTelInput__error">
         {{ errorMessage }}
       </p>
       <p v-else-if="displayHelp" :id="helpMessageId" class="cpTelInput__help">
         {{ help }}
       </p>
-    </transition-expand>
+    </cp-transition-expand>
   </div>
 </template>
 

package/src/components/CpTextarea.vue

@@ -19,11 +19,11 @@
       :required="required"
       :style="`min-height: ${height}px`"
     />
-    <transition-expand>
+    <cp-transition-expand>
       <p v-if="displayErrorMessage" class="cpTextarea__error">
         {{ errorMessage }}
       </p>
-    </transition-expand>
+    </cp-transition-expand>
   </div>
 </template>
 
@@ -31,7 +31,7 @@
 import { ref, computed, useId } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
-import TransitionExpand from '@/components/TransitionExpand.vue'
+import CpTransitionExpand from '@/components/CpTransitionExpand.vue'
 
 import { capitalizeFirstLetter } from '@/helpers'
 

package/src/components/CpTransitionCounter.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="cpTransitionCounter">
+    <transition :duration="duration" mode="out-in" :name="formattedTransitionName">
+      <span :key="counterNumber">
+        <slot />
+      </span>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+interface Props {
+  counterNumber?: number
+  duration?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  counterNumber: 0,
+  duration: 300,
+})
+
+enum Directions {
+  UP = 'up',
+  DOWN = 'down',
+}
+
+const direction = ref<Directions>(Directions.UP)
+
+const formattedTransitionName = computed(() => `counter-${direction.value}`)
+
+watch(
+  () => props.counterNumber,
+  (newValue: number, oldValue: number) => {
+    direction.value = newValue < oldValue ? Directions.DOWN : Directions.UP
+  },
+)
+</script>
+
+<style lang="scss">
+.cpTransitionCounter {
+  display: inline-flex;
+  overflow: hidden;
+
+  &-up-enter-from {
+    transform: translate3d(0, 100%, 0);
+  }
+
+  &-down-enter-from {
+    transform: translate3d(0, -100%, 0);
+  }
+
+  &-up-leave-to,
+  &-down-leave-to {
+    filter: blur(1px);
+    opacity: 0;
+  }
+
+  &-up-leave-to {
+    transform: translate3d(0, -100%, 0) skewY(-30deg);
+  }
+
+  &-down-leave-to {
+    transform: translate3d(0, 100%, 0) skewY(30deg);
+  }
+
+  &-up-enter-active,
+  &-down-enter-active,
+  &-up-leave-active,
+  &-down-leave-active {
+    transition:
+      transform 200ms ease,
+      opacity 200ms ease;
+  }
+}
+</style>

package/src/components/CpTransitionListItems.vue

@@ -0,0 +1,41 @@
+<template>
+  <transition-group :name="dynamicTransitionName">
+    <slot />
+  </transition-group>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+interface Props {
+  disableOnLoad?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), { disableOnLoad: false })
+
+const isDisabled = ref<boolean>(props.disableOnLoad)
+
+const dynamicTransitionName = computed<string>(() => (isDisabled.value ? '' : 'list-items'))
+
+onMounted(() => (isDisabled.value = false))
+</script>
+
+<style lang="scss">
+.list-items-move,
+.list-items-enter-active,
+.list-items-leave-active {
+  transition:
+    transform 400ms ease,
+    opacity 200ms ease;
+}
+
+.list-items-enter-from,
+.list-items-leave-to {
+  opacity: 0;
+  transform: translate3d(fn.px-to-rem(30), 0, 0);
+}
+
+.list-items-leave-active {
+  position: absolute;
+}
+</style>

package/src/components/CpTransitionSize.vue

@@ -0,0 +1,88 @@
+<template>
+  <div :id="transitionId" ref="slotWrapper" class="cpTransitionSize" :class="componentDynamicClass">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onBeforeUnmount, useId, nextTick } from 'vue'
+
+interface Props {
+  type?: 'width' | 'height'
+}
+
+const props = withDefaults(defineProps<Props>(), { type: 'width' })
+
+const slotWrapper = ref()
+const slotContent = computed<HTMLElement | null>(() => slotWrapper.value?.children[0])
+
+const isHeight = computed<boolean>(() => props.type === 'height')
+
+const componentDynamicClass = computed(() => {
+  return { 'cpTransitionSize--isHeight': isHeight.value }
+})
+
+const transitionId = useId()
+
+const updateWrapperSize = async () => {
+  if (!slotContent.value) return
+
+  const size = slotContent.value[isHeight.value ? 'clientHeight' : 'clientWidth']
+  const property = isHeight.value ? 'min-height' : 'width'
+
+  slotWrapper.value.style[property] = `${size}px`
+
+  const transitionItem = document.getElementById(transitionId)
+  if (!transitionItem || !isHeight.value) return
+
+  slotWrapper.value.style.height = 0
+
+  await nextTick()
+
+  transitionItem.addEventListener(
+    'transitionend',
+    () => {
+      if (slotWrapper.value) {
+        slotWrapper.value.style.height = 'auto'
+      }
+    },
+    { once: true },
+  )
+}
+
+const observer = ref<MutationObserver>()
+
+const initObserver = () => {
+  observer.value = new MutationObserver(updateWrapperSize)
+  observer.value.observe(slotContent.value as HTMLElement, { childList: true, subtree: false })
+
+  updateWrapperSize()
+}
+
+onMounted(() => {
+  if (slotContent.value) {
+    initObserver()
+  }
+})
+
+onBeforeUnmount(() => {
+  if (observer.value) observer.value.disconnect()
+})
+</script>
+
+<style lang="scss">
+.cpTransitionSize {
+  display: inline-flex;
+  overflow: hidden;
+  transition-duration: 350ms;
+  transition-property: width;
+  transition-timing-function: var(--cp-easing-elastic);
+  white-space: nowrap;
+
+  &--isHeight {
+    display: block;
+    transition-property: min-height;
+    transition-timing-function: ease;
+  }
+}
+</style>

package/src/components/CpTransitionSlide.vue

@@ -0,0 +1,44 @@
+<template>
+  <transition :mode="mode" :name="formattedTransitionName">
+    <slot />
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  mode?: 'in-out' | 'out-in' | 'default'
+  slideTo?: 'top' | 'left'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  slideTo: 'top',
+  mode: 'out-in',
+})
+
+const formattedTransitionName = computed(() => `slide-${props.slideTo}`)
+</script>
+
+<style lang="scss">
+.slide-top-enter-active,
+.slide-top-leave-active,
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition:
+    transform 300ms ease,
+    opacity 300ms ease;
+}
+
+.slide-top-enter-from,
+.slide-top-leave-to {
+  opacity: 0;
+  transform: scale3d(0.8, 0.8, 1) translate3d(0, fn.px-to-rem(10), 0);
+}
+
+.slide-left-enter-from,
+.slide-left-leave-to {
+  opacity: 0;
+  transform: scale3d(0.8, 0.8, 1) translate3d(fn.px-to-rem(10), 0, 0);
+}
+</style>

package/src/components/CpTransitionTabContent.vue

@@ -0,0 +1,70 @@
+<template>
+  <transition :duration="duration" mode="out-in" :name="formattedTransitionName" @after-enter="emit('onAfterEnter')">
+    <slot />
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type Direction = 'forward' | 'backward'
+
+type EmitType = {
+  (event: 'onAfterEnter'): void
+}
+
+interface Props {
+  direction?: Direction
+  duration?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  direction: 'forward',
+  duration: 300,
+})
+
+const emit = defineEmits<EmitType>()
+
+const formattedTransitionName = computed(() => `tab-content-${props.direction}`)
+</script>
+
+<style lang="scss">
+.tab-content-backward,
+.tab-content-forward {
+  &-enter-active,
+  &-leave-active {
+    transition:
+      transform 300ms ease,
+      opacity 300ms ease;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.tab-content-forward {
+  &-enter-from {
+    transform: translate3d(10vw, 0, 0);
+  }
+
+  &-leave-to {
+    transform: translate3d(-10vw, 0, 0);
+  }
+}
+
+.tab-content-backward {
+  &-enter-from {
+    transform: translate3d(-10vw, 0, 0);
+  }
+
+  &-leave-to {
+    transform: translate3d(10vw, 0, 0);
+  }
+}
+</style>

package/src/components/index.ts

@@ -47,7 +47,13 @@ import CpTelInput from './CpTelInput.vue'
 import CpTextarea from './CpTextarea.vue'
 import CpToast from './CpToast.vue'
 import CpTooltip from './CpTooltip.vue'
+import CpTransitionCounter from './CpTransitionCounter.vue'
 import CpTransitionDialog from './CpTransitionDialog.vue'
+import CpTransitionExpand from './CpTransitionExpand.vue'
+import CpTransitionListItems from './CpTransitionListItems.vue'
+import CpTransitionSize from './CpTransitionSize.vue'
+import CpTransitionSlide from './CpTransitionSlide.vue'
+import CpTransitionTabContent from './CpTransitionTabContent.vue'
 import IconAirline from './icons/IconAirline.vue'
 import IconCheckList from './icons/IconCheckList.vue'
 import IconCollapse from './icons/IconCollapse.vue'
@@ -57,7 +63,6 @@ import IconOta from './icons/IconOta.vue'
 import IconSupplier from './icons/IconSupplier.vue'
 import IconThirdParty from './icons/IconThirdParty.vue'
 import IconTooltip from './icons/IconTooltip.vue'
-import TransitionExpand from './TransitionExpand.vue'
 
 const Components = {
   CpAccordion,
@@ -104,7 +109,12 @@ const Components = {
   IconExpand,
   IconCheckList,
   CpTransitionDialog,
-  TransitionExpand,
+  CpTransitionExpand,
+  CpTransitionSize,
+  CpTransitionCounter,
+  CpTransitionListItems,
+  CpTransitionSlide,
+  CpTransitionTabContent,
 }
 
 const Pimp = {

package/src/stories/BaseInputLabel.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
 const meta = {
-  title: 'BaseInputLabel',
+  title: 'Form/BaseInputLabel',
   component: BaseInputLabel,
   argTypes: {
     isInvalid: {

package/src/stories/CpAccordion.stories.ts

@@ -37,7 +37,7 @@ const defaultStoryActions: MenuItem[] = [
 ]
 
 const meta = {
-  title: 'CpAccordion',
+  title: 'Navigation/CpAccordion',
   component: CpAccordion,
   argTypes: {
     title: {

package/src/stories/CpAccordionGroup.stories.ts

@@ -43,7 +43,7 @@ const defaultItemActions: MenuItem[] = [
 ]
 
 const meta = {
-  title: 'CpAccordionGroup',
+  title: 'Navigation/CpAccordionGroup',
   component: CpAccordionGroup,
   argTypes: {
     variant: {

package/src/stories/CpAirlineLogo.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpAirlineLogo from '@/components/CpAirlineLogo.vue'
 
 const meta = {
-  title: 'CpAirlineLogo',
+  title: 'Visual/CpAirlineLogo',
   component: CpAirlineLogo,
   parameters: {
     docs: {

package/src/stories/CpAlert.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpAlert from '@/components/CpAlert.vue'
 
 const meta = {
-  title: 'CpAlert',
+  title: 'Feedback/CpAlert',
   component: CpAlert,
   argTypes: {
     intent: {

package/src/stories/CpBadge.stories.ts

@@ -3,7 +3,7 @@ import type { Args, Meta, StoryObj } from '@storybook/vue3'
 import CpBadge from '@/components/CpBadge.vue'
 
 const meta = {
-  title: 'CpBadge',
+  title: 'Visual/CpBadge',
   component: CpBadge,
   argTypes: {
     color: {

package/src/stories/CpButton.stories.ts

@@ -15,7 +15,7 @@ import {
 } from '@/stories/documentationStyles'
 
 const meta = {
-  title: 'CpButton',
+  title: 'Form/CpButton',
   component: CpButton,
   argTypes: {
     appearance: {

package/src/stories/CpCheckbox.stories.ts

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpCheckbox from '@/components/CpCheckbox.vue'
 
 const meta = {
-  title: 'CpCheckbox',
+  title: 'Form/CpCheckbox',
   component: CpCheckbox,
   argTypes: {
     modelValue: {

package/src/stories/CpContextualMenu.stories.ts

@@ -6,7 +6,7 @@ import CpButton from '@/components/CpButton.vue'
 import CpContextualMenu from '@/components/CpContextualMenu.vue'
 
 const meta = {
-  title: 'CpContextualMenu',
+  title: 'Menu/CpContextualMenu',
   component: CpContextualMenu,
   parameters: {
     docs: {

package/src/stories/CpDate.stories.ts

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpDate from '@/components/CpDate.vue'
 
 const meta = {
-  title: 'CpDate',
+  title: 'Form/CpDate',
   component: CpDate,
   argTypes: {
     size: {

package/src/stories/CpDatepicker.stories.ts

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpDatepicker from '@/components/CpDatepicker.vue'
 
 const meta = {
-  title: 'CpDatepicker',
+  title: 'Form/CpDatepicker',
   component: CpDatepicker,
 
   argTypes: {

package/src/stories/CpDialog.stories.ts

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpDialog from '@/components/CpDialog.vue'
 
 const meta = {
-  title: 'CpDialog',
+  title: 'Navigation/CpDialog',
   component: CpDialog,
   argTypes: {
     maxWidth: {

package/src/stories/CpHeading.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpHeading from '@/components/CpHeading.vue'
 
 const meta = {
-  title: 'CpHeading',
+  title: 'Visual/CpHeading',
   component: CpHeading,
   argTypes: {
     headingLevel: {

package/src/stories/CpIcon.stories.ts

@@ -30,7 +30,7 @@ const iconsOptions = [
 ].sort()
 
 const meta = {
-  title: 'CpIcon',
+  title: 'Visual/CpIcon',
   component: CpIcon,
   argTypes: {
     type: {