@citizenplane/pimp 9.16.2 → 10.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "9.16.2",
+  "version": "10.0.0",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",
@@ -33,7 +33,6 @@
     "./*.css": "./dist/*.css"
   },
   "dependencies": {
-    "animejs": "^4.2.2",
     "feather-icons": "^4.29.2",
     "floating-vue": "^5.2.2",
     "luxon": "^3.7.2",

package/src/components/CpSelectMenu.vue

@@ -8,7 +8,7 @@
         type="chevron-down"
       />
     </button>
-    <transition @enter="enter">
+    <transition mode="out-in" name="scale-elastic">
       <div v-if="isDropdownOpen" ref="dropdownRef" class="cpSelectMenu__dropdown dropdown">
         <p v-if="dropdownTitle" class="dropdown__title">
           {{ dropdownTitle }}
@@ -47,7 +47,6 @@
 </template>
 
 <script setup lang="ts">
-import { animate, cubicBezier } from 'animejs'
 import { ref, computed, nextTick } from 'vue'
 
 interface SelectValue {
@@ -92,17 +91,6 @@ const inputType = computed(() => {
   return props.isMultiSelect ? 'checkbox' : 'radio'
 })
 
-const enter = (): void => {
-  if (dropdownRef.value) {
-    animate(dropdownRef.value, {
-      scale: [0.8, 1],
-      opacity: [0, 1],
-      duration: 200,
-      ease: cubicBezier(0.175, 0.885, 0.32, 1.175),
-    })
-  }
-}
-
 const toggleDropdown = (): void => {
   isDropdownOpen.value = !isDropdownOpen.value
 

package/src/components/CpToast.vue

@@ -151,8 +151,14 @@ const handleActionClick = (onClick: VoidFunction, closeCallback: VoidFunction) =
   z-index: -1;
 }
 
+.cpToasts {
+  pointer-events: none;
+}
+
 .cpToasts .p-toast-message-leave-active:not(:only-child) {
   position: absolute;
+  left: 0;
+  right: 0;
 }
 
 .cpToasts[data-p$='center'] {
@@ -169,6 +175,7 @@ const handleActionClick = (onClick: VoidFunction, closeCallback: VoidFunction) =
 .cpToasts > div {
   display: flex;
   flex-direction: column;
+  pointer-events: auto;
   gap: sp.$space;
 }
 
@@ -180,6 +187,7 @@ const handleActionClick = (onClick: VoidFunction, closeCallback: VoidFunction) =
   overflow: hidden;
   position: relative;
   flex-direction: column;
+  max-width: fn.px-to-rem(400);
   padding: sp.$space-md;
   border-radius: fn.px-to-rem(8);
   box-shadow: var(--toaster-shadow);
@@ -216,6 +224,10 @@ const handleActionClick = (onClick: VoidFunction, closeCallback: VoidFunction) =
   &__summary {
     font-weight: 600;
     color: fn.v(text-accent-primary);
+
+    &:first-letter {
+      text-transform: capitalize;
+    }
   }
 
   &__detail {
@@ -345,4 +357,19 @@ const handleActionClick = (onClick: VoidFunction, closeCallback: VoidFunction) =
     }
   }
 }
+
+@media (max-width: 451px) {
+  .cpToasts {
+    max-width: calc(100% - #{fn.v(spacing-2xl)});
+    right: 0 !important;
+    left: 0;
+    margin: 0 auto;
+    text-align: center;
+  }
+
+  .cpToast {
+    max-width: 100%;
+    min-width: 100%;
+  }
+}
 </style>

package/src/components/index.ts

@@ -43,7 +43,6 @@ import CpTabs from './CpTabs.vue'
 import CpTelInput from './CpTelInput.vue'
 import CpTextarea from './CpTextarea.vue'
 import CpToast from './CpToast.vue'
-import CpToaster from './CpToaster.vue'
 import CpTooltip from './CpTooltip.vue'
 import CpTransitionDialog from './CpTransitionDialog.vue'
 import IconAirline from './icons/IconAirline.vue'
@@ -56,10 +55,8 @@ import IconSupplier from './icons/IconSupplier.vue'
 import IconThirdParty from './icons/IconThirdParty.vue'
 import IconTooltip from './icons/IconTooltip.vue'
 import TransitionExpand from './TransitionExpand.vue'
-import createToaster from '@/plugins/toaster'
 
 const Components = {
-  CpToaster,
   CpToast,
   CpBadge,
   CpTabs,
@@ -105,7 +102,7 @@ const Components = {
 }
 
 const Pimp = {
-  install(app: App, options: Record<string, unknown>) {
+  install(app: App) {
     app.use(PrimeVue, { unstyled: true })
     app.use(VueTelInput)
     app.use(ToastService)
@@ -119,12 +116,6 @@ const Pimp = {
     app.directive('bind-once', BindOnceDirective)
     app.directive('maska', vMaska)
     app.directive('tooltip', vTooltip)
-
-    // CpToaster
-    const methods = createToaster(options)
-    // @ts-expect-error <comment on type error>
-    app.$toaster = methods
-    app.config.globalProperties.$toaster = methods
   },
 }
 

package/src/components/CpToaster.vue

@@ -1,382 +0,0 @@
-<template>
-  <transition @enter="enter" @leave="leave">
-    <div
-      v-show="isOpen"
-      :id="toasterId"
-      :key="toasterId"
-      class="cpToaster"
-      :class="dynamicClass"
-      role="alert"
-      @mouseenter="setHoverState()"
-      @mouseleave="setHoverState(false)"
-    >
-      <div class="cpToaster__content">
-        <cp-icon class="cpToaster__icon" :type="toasterIcon" />
-        <div class="cpToaster__body">
-          <cp-heading class="cpToaster__title" :heading-level="HeadingLevels.H4" :size="400">{{ title }}</cp-heading>
-          <p v-if="description" class="cpToaster__description">{{ description }}</p>
-        </div>
-      </div>
-      <button class="cpToaster__close" type="button" @click="closeToaster">
-        <cp-icon type="x" />
-      </button>
-      <div v-if="actionLabel" class="cpToaster__footer">
-        <button v-if="actionIsButton" class="cpToaster__button" type="button" @click="handleActionMethod">
-          {{ actionLabel }}
-        </button>
-        <a v-else class="cpToaster__button" v-bind="actionLinkProperties">
-          {{ actionLabel }}
-        </a>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script setup lang="ts">
-import { animate, cubicBezier } from 'animejs'
-import { ref, computed, watch, onBeforeMount, onMounted, nextTick, getCurrentInstance, useId } from 'vue'
-
-import CpHeading from '@/components/CpHeading.vue'
-import CpIcon from '@/components/CpIcon.vue'
-
-import { HeadingLevels, Intent } from '@/constants'
-
-interface Props {
-  actionAs?: 'link' | 'button'
-  actionLabel?: string
-  actionLinkProperties?: Record<string, unknown>
-  actionMethod?: (vmProperties: Record<string, unknown>) => void
-  delayBeforeCloseInMs?: number
-  description?: string
-  isUnique?: boolean
-  title: string
-  type?: string
-}
-
-interface PublicMethods {
-  closeToaster: () => void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  description: '',
-  type: 'info',
-  delayBeforeCloseInMs: 5000,
-  actionLabel: '',
-  actionLinkProperties: () => ({}),
-  actionAs: 'button',
-  actionMethod: () => {},
-  isUnique: false,
-})
-
-const validateType = (value: string): boolean => {
-  const intentValues = Object.values(Intent).map((item) => item.value)
-  return intentValues.includes(value)
-}
-
-if (!validateType(props.type)) {
-  console.warn(`Type de toaster invalide: ${props.type}`)
-}
-
-const toasterId = useId()
-const toastersContainer = ref<HTMLElement | null>(null)
-const isOpen = ref<boolean>(false)
-const isHovered = ref<boolean>(false)
-const deleteCountDown = ref<number>(props.delayBeforeCloseInMs)
-const timeoutID = ref<ReturnType<typeof setTimeout>>()
-const countDownInterval = ref<ReturnType<typeof setInterval>>()
-
-const instance = getCurrentInstance()
-
-const actionIsButton = computed(() => props.actionAs === 'button')
-
-const toasterIcon = computed(() => {
-  const intentValues = Object.values(Intent)
-  const intent = intentValues.find((intentItem) => intentItem.value === props.type)
-  return intent ? intent.icon : Intent.INFO.icon
-})
-
-const dynamicClass = computed(() => {
-  return `cpToaster--${props.type || Intent.INFO.value}`
-})
-
-watch(isHovered, (newValue: boolean) => {
-  if (!newValue) {
-    handleDeleteEvent()
-  } else {
-    cancelDelete()
-  }
-})
-
-const createContainer = (): void => {
-  toastersContainer.value = document.querySelector('.cpToaster__container')
-
-  if (toastersContainer.value) return
-
-  if (!toastersContainer.value) {
-    toastersContainer.value = document.createElement('section')
-    toastersContainer.value.className = 'cpToaster__container'
-  }
-}
-
-const setupContainer = (): void => {
-  if (toastersContainer.value) {
-    document.body.appendChild(toastersContainer.value)
-  }
-}
-
-const removeSiblings = (): void => {
-  if (!props.isUnique) return
-
-  const siblings = document.querySelectorAll('.cpToaster')
-  siblings.forEach(removeElement)
-}
-
-const showToaster = (): void => {
-  isOpen.value = true
-
-  nextTick(() => {
-    if (toastersContainer.value && instance?.proxy?.$el) {
-      toastersContainer.value.insertAdjacentElement('afterbegin', instance.proxy.$el)
-    }
-  })
-}
-
-const setHoverState = (state: boolean = true): void => {
-  isHovered.value = state
-}
-
-const handleDeleteEvent = (): void => {
-  startCountDown()
-
-  timeoutID.value = setTimeout(() => {
-    closeToaster()
-  }, props.delayBeforeCloseInMs)
-}
-
-const cancelDelete = (): void => {
-  if (timeoutID.value) {
-    clearTimeout(timeoutID.value)
-  }
-  if (countDownInterval.value) {
-    clearInterval(countDownInterval.value)
-  }
-  resetCountDown()
-}
-
-const startCountDown = (): void => {
-  countDownInterval.value = setInterval(() => {
-    deleteCountDown.value -= 1000
-    if (deleteCountDown.value <= 0 && countDownInterval.value) {
-      clearInterval(countDownInterval.value)
-    }
-  }, 1000)
-}
-
-const resetCountDown = (): void => {
-  deleteCountDown.value = props.delayBeforeCloseInMs
-}
-
-const handleActionMethod = (): void => {
-  const vmProperties: Record<string, unknown> = {
-    closeToaster,
-  }
-
-  return props.actionMethod(vmProperties)
-}
-
-const closeToaster = (): void => {
-  cancelDelete()
-  isOpen.value = false
-
-  setTimeout(() => {
-    if (instance?.proxy?.$el) {
-      removeElement(instance.proxy.$el)
-    }
-  }, 240)
-}
-
-const removeElement = (el: Element): void => {
-  if (typeof el.remove !== 'undefined') {
-    el.remove()
-  } else if (el.parentNode) {
-    el.parentNode.removeChild(el)
-  }
-}
-
-const enter = async (el: Element, done: () => void): Promise<void> => {
-  animate(el, {
-    translateY: [-60, 0],
-    opacity: [0, 1],
-    duration: 240,
-    ease: cubicBezier(0.175, 0.885, 0.32, 1.175),
-    complete: function () {
-      done()
-    },
-  })
-}
-
-const leave = async (el: Element, done: () => void): Promise<void> => {
-  animate(el, {
-    scale: [1, 0.8],
-    opacity: [1, 0],
-    duration: 240,
-    ease: cubicBezier(0.0, 0.0, 0.2, 1),
-    complete: function () {
-      done()
-    },
-  })
-}
-
-onBeforeMount(() => {
-  createContainer()
-  setupContainer()
-  removeSiblings()
-})
-
-onMounted(() => {
-  showToaster()
-  handleDeleteEvent()
-})
-
-defineExpose<PublicMethods>({
-  closeToaster,
-})
-</script>
-
-<style lang="scss">
-@mixin cp-toaster-style($color, $className) {
-  &--#{$className} &__icon {
-    color: $color;
-  }
-
-  &--#{$className}:before {
-    background-color: $color;
-  }
-}
-
-.cpToaster {
-  position: relative;
-  box-shadow:
-    rgba(67, 90, 111, 0.3) 0 0 1px,
-    rgba(67, 90, 111, 0.47) 0 8px 10px -4px;
-  background: colors.$neutral-light;
-  padding: sp.$space-md;
-  overflow: hidden;
-  width: max-content;
-  max-width: 100%;
-  margin: auto;
-  pointer-events: auto;
-  font-size: fn.px-to-rem(14);
-
-  @media (min-width: 769px) {
-    border-radius: fn.px-to-rem(8);
-  }
-
-  @media (max-width: 768px) {
-    min-width: 100%;
-  }
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: fn.px-to-rem(3);
-    height: 100%;
-  }
-
-  &__container {
-    position: fixed;
-    z-index: 9999;
-    top: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    padding: sp.$space-lg;
-    max-width: fn.px-to-rem(400);
-    pointer-events: none;
-
-    & > *:not(:last-child) {
-      margin-bottom: sp.$space;
-    }
-
-    @media (max-width: 768px) {
-      max-width: 100%;
-    }
-  }
-
-  &__content {
-    display: flex;
-    align-items: flex-start;
-  }
-
-  &__body {
-    flex: 1;
-    margin-left: sp.$space;
-    padding-right: calc(sp.$space-lg + sp.$space-lg);
-  }
-
-  &__icon {
-    flex-shrink: 0;
-    height: fn.px-to-rem(16);
-    width: fn.px-to-rem(16);
-  }
-
-  &__content,
-  &__title {
-    line-height: fn.px-to-rem(16);
-  }
-
-  &__title {
-    font-weight: 600;
-
-    &:not(:only-child) {
-      margin-bottom: sp.$space-sm;
-    }
-  }
-
-  &__description {
-    font-size: fn.px-to-rem(14);
-  }
-
-  &__close {
-    position: absolute;
-    right: sp.$space;
-    top: sp.$space;
-    display: flex;
-    border-radius: fn.px-to-rem(4);
-    padding: sp.$space-sm;
-    color: colors.$neutral-dark-1;
-
-    svg {
-      margin: 0;
-      width: fn.px-to-rem(18);
-      height: fn.px-to-rem(18);
-    }
-
-    &:hover {
-      background-color: rgba(colors.$neutral-dark-1, 0.1);
-    }
-  }
-
-  &__footer {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: sp.$space-lg;
-  }
-
-  &__button {
-    font-size: fn.px-to-rem(12);
-    color: colors.$secondary-color;
-
-    &:not(:hover) {
-      text-decoration: underline;
-    }
-  }
-
-  @include cp-toaster-style(colors.$secondary-color, 'info');
-  @include cp-toaster-style(colors.$warning-color, 'warning');
-  @include cp-toaster-style(colors.$success-color, 'success');
-  @include cp-toaster-style(colors.$error-color, 'critical');
-}
-</style>

package/src/plugins/toaster.ts

@@ -1,71 +0,0 @@
-import { App, h, render, VNode } from 'vue'
-
-import CpToaster from '@/components/CpToaster.vue'
-
-import { Intent } from '@/constants'
-
-type MountOptions = {
-  app?: App | null
-  children?: unknown
-  element?: HTMLElement | null
-  props?: Record<string, unknown>
-}
-
-const createElement = () => (typeof document !== 'undefined' ? document.createElement('div') : null)
-
-const mount = (component: unknown, { props, children, element, app }: MountOptions = {}) => {
-  let el: HTMLElement | null = element ? element : createElement()
-
-  // @ts-expect-error <comment on type error>
-  let vNode: VNode = h(component, props, children)
-  if (app && app._context) {
-    vNode.appContext = app._context
-  }
-
-  render(vNode, el as HTMLElement)
-
-  const destroy = () => {
-    if (el) {
-      render(null, el)
-    }
-    el = null
-    // @ts-expect-error explicit nulling for GC
-    vNode = null
-  }
-
-  return { vNode, destroy, el }
-}
-
-const createToaster = (globalOptions: Record<string, unknown> = {}) => {
-  return {
-    show(options: Record<string, unknown> = {}) {
-      const localOptions = { ...options }
-
-      mount(CpToaster, {
-        props: { ...globalOptions, ...localOptions },
-      })
-    },
-    unique(options: Record<string, unknown> = {}) {
-      options.isUnique = true
-      return this.show(options)
-    },
-    success(options: Record<string, unknown> = {}) {
-      options.type = Intent.SUCCESS.value
-      return this.show(options)
-    },
-    critical(options: Record<string, unknown> = {}) {
-      options.type = Intent.CRITICAL.value
-      return this.show(options)
-    },
-    info(options: Record<string, unknown> = {}) {
-      options.type = Intent.INFO.value
-      return this.show(options)
-    },
-    warning(options: Record<string, unknown> = {}) {
-      options.type = Intent.WARNING.value
-      return this.show(options)
-    },
-  }
-}
-
-export default createToaster