@citizenplane/pimp 8.26.0 → 8.27.0

package/src/components/feedback-indicators/CpToaster.vue

@@ -13,7 +13,7 @@
       <div class="cpToaster__content">
         <cp-icon :type="toasterIcon" class="cpToaster__icon" />
         <div class="cpToaster__body">
-          <cp-heading heading-level="h4" :size="400" class="cpToaster__title">{{ title }}</cp-heading>
+          <cp-heading :heading-level="HeadingLevels.H4" :size="400" class="cpToaster__title">{{ title }}</cp-heading>
           <p v-if="description" class="cpToaster__description">{{ description }}</p>
         </div>
       </div>
@@ -27,210 +27,215 @@
   </transition>
 </template>
 
-<script>
+<script setup lang="ts">
 import { animate } from 'animejs'
-
-import { Intent } from '@/utils/constants'
-import { randomString } from '@/helpers'
+import { ref, computed, watch, onBeforeMount, onMounted, nextTick, getCurrentInstance } from 'vue'
 
 import CpHeading from '@/components/typography/CpHeading.vue'
 import CpIcon from '@/components/visual/CpIcon.vue'
 
-export default {
-  name: 'CpToaster',
-  components: {
-    CpHeading,
-    CpIcon,
-  },
-  props: {
-    title: {
-      type: String,
-      required: true,
-      default: '',
-    },
-    description: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    type: {
-      type: String,
-      required: false,
-      default: 'info',
-      validator(value) {
-        const intentValues = Object.values(Intent).map((item) => item.value)
-        return intentValues.includes(value)
-      },
-    },
-    delayBeforeCloseInMs: {
-      type: Number,
-      required: false,
-      default: 5000,
-    },
-    actionLabel: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    actionMethod: {
-      type: Function,
-      required: false,
-      default: () => {},
-    },
-    isUnique: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      toasterId: null,
-      toastersContainer: null,
-      isOpen: false,
-      isHovered: false,
-      deleteCountDown: this.delayBeforeCloseInMs,
-      timeoutID: null,
-      countDownInterval: null,
-      publicProperties: ['closeToaster'],
+import { HeadingLevels, Intent } from '@/constants'
+import { randomString } from '@/helpers'
+
+interface Props {
+  actionLabel?: string
+  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: '',
+  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 = ref<string>()
+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 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 setToasterId = (): void => {
+  toasterId.value = randomString()
+}
+
+const showToaster = (): void => {
+  isOpen.value = true
+
+  nextTick(() => {
+    if (toastersContainer.value && instance?.proxy?.$el) {
+      toastersContainer.value.insertAdjacentElement('afterbegin', instance.proxy.$el)
     }
-  },
-  computed: {
-    toasterIcon() {
-      const intentValues = Object.values(Intent)
-      const intent = intentValues.find((intentItem) => intentItem.value === this.type)
-      return intent ? intent.icon : Intent.INFO.icon
-    },
-    dynamicClass() {
-      return `cpToaster--${this.type || Intent.INFO.value}`
-    },
-  },
-  watch: {
-    isHovered(newValue) {
-      if (!newValue) {
-        this.handleDeleteEvent()
-      } else {
-        this.cancelDelete()
-      }
-    },
-  },
-  beforeMount() {
-    this.createContainer()
-    this.setupContainer()
-    this.removeSiblings()
-    this.setToasterId()
-  },
-  mounted() {
-    this.showToaster()
-    this.handleDeleteEvent()
-  },
-  methods: {
-    createContainer() {
-      this.toastersContainer = document.querySelector('.cpToaster__container')
-
-      if (this.toastersContainer) return
-
-      if (!this.toastersContainer) {
-        this.toastersContainer = document.createElement('section')
-        this.toastersContainer.className = 'cpToaster__container'
-      }
-    },
-    setupContainer() {
-      document.body.appendChild(this.toastersContainer)
-    },
-    removeSiblings() {
-      if (!this.isUnique) return
+  })
+}
 
-      const siblings = document.querySelectorAll('.cpToaster')
-      siblings.forEach(this.removeElement)
-    },
-    setToasterId() {
-      this.toasterId = randomString()
-    },
-    showToaster() {
-      this.isOpen = true
+const setHoverState = (state: boolean = true): void => {
+  isHovered.value = state
+}
 
-      this.$nextTick(() => {
-        this.toastersContainer.insertAdjacentElement('afterbegin', this.$el)
-      })
-    },
-    setHoverState(state = true) {
-      this.isHovered = state
-    },
-    handleDeleteEvent() {
-      this.startCountDown()
+const handleDeleteEvent = (): void => {
+  startCountDown()
 
-      this.timeoutID = setTimeout(() => {
-        this.closeToaster()
-      }, this.delayBeforeCloseInMs)
-    },
-    cancelDelete() {
-      clearTimeout(this.timeoutID)
-      clearInterval(this.countDownInterval)
-      this.resetCountDown()
-    },
-    startCountDown() {
-      this.countDownInterval = setInterval(() => {
-        this.deleteCountDown -= 1000
-        if (this.deleteCountDown <= 0) {
-          clearInterval(this.countDownInterval)
-        }
-      }, 1000)
-    },
-    resetCountDown() {
-      const delay = this.delayBeforeCloseInMs
-      this.deleteCountDown = delay
-    },
-    handleActionMethod() {
-      // Unexpected aliasing of 'this' to local variable  @typescript-eslint/no-this-alias
-      // eslint-disable-next-line
-      const vm = this
-      const vmProperties = Object.keys(vm)
-        .filter((key) => this.publicProperties.includes(key))
-        .reduce((allowedProperties, key) => {
-          allowedProperties[key] = vm[key]
-          return allowedProperties
-        }, {})
-      return this.actionMethod(vmProperties)
-    },
-    closeToaster() {
-      this.cancelDelete()
-      this.isOpen = false
+  timeoutID.value = setTimeout(() => {
+    closeToaster()
+  }, props.delayBeforeCloseInMs)
+}
 
-      setTimeout(() => {
-        this.removeElement(this.$el)
-      }, 240)
-    },
-    removeElement(el) {
-      if (typeof el.remove !== 'undefined') {
-        el.remove()
-      } else {
-        el.parentNode.removeChild(el)
-      }
-    },
-    async enter(el, done) {
-      animate(el, {
-        translateY: [-60, 0],
-        opacity: [0, 1],
-        duration: 240,
-        ease: 'cubicBezier(0.175, 0.885, 0.32, 1.175)',
-        complete: function () {
-          done()
-        },
-      })
+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 as HTMLElement).remove !== 'undefined') {
+    ;(el as HTMLElement).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()
     },
-    async leave(el, done) {
-      animate(el, {
-        scale: [1, 0.8],
-        opacity: [1, 0],
-        duration: 240,
-        ease: 'cubicBezier(0.0, 0.0, 0.2, 1)',
-        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()
+  setToasterId()
+})
+
+onMounted(() => {
+  showToaster()
+  handleDeleteEvent()
+})
+
+defineExpose<PublicMethods>({
+  closeToaster,
+})
 </script>
 
 <style lang="scss">

package/src/components/helpers-utilities/TransitionExpand.vue

@@ -4,45 +4,43 @@
   </transition>
 </template>
 
-<script>
-export default {
-  methods: {
-    afterEnter(element) {
-      element.style.height = `auto`
-    },
-    enter(element) {
-      const { width } = getComputedStyle(element)
+<script setup lang="ts">
+const afterEnter = (element: HTMLElement): void => {
+  element.style.height = `auto`
+}
+
+const enter = (element: HTMLElement): void => {
+  const { width } = getComputedStyle(element)
 
-      element.style.width = width
-      element.style.position = `absolute`
-      element.style.visibility = `hidden`
-      element.style.height = `auto`
+  element.style.width = width
+  element.style.position = `absolute`
+  element.style.visibility = `hidden`
+  element.style.height = `auto`
 
-      const { height } = getComputedStyle(element)
+  const { height } = getComputedStyle(element)
 
-      element.style.width = null
-      element.style.position = null
-      element.style.visibility = null
-      element.style.height = 0
+  element.style.width = ''
+  element.style.position = ''
+  element.style.visibility = ''
+  element.style.height = '0'
+
+  // Force repaint to make sure the
+  // animation is triggered correctly.
+  requestAnimationFrame(() => {
+    element.style.height = height
+  })
+}
 
-      // Force repaint to make sure the
-      // animation is triggered correctly.
-      requestAnimationFrame(() => {
-        element.style.height = height
-      })
-    },
-    leave(element) {
-      const { height } = getComputedStyle(element)
+const leave = (element: HTMLElement): void => {
+  const { height } = getComputedStyle(element)
 
-      element.style.height = height
+  element.style.height = height
 
-      // Force repaint to make sure the
-      // animation is triggered correctly.
-      requestAnimationFrame(() => {
-        element.style.height = 0
-      })
-    },
-  },
+  // Force repaint to make sure the
+  // animation is triggered correctly.
+  requestAnimationFrame(() => {
+    element.style.height = '0'
+  })
 }
 </script>
 

package/src/components/icons/IconOneWay.vue

@@ -19,8 +19,8 @@
             <use stroke="#C8C8D4" stroke-width="1.6" xlink:href="#path-1"></use>
           </g>
           <path
-            d="M38,11.6666667 L0,11.6666667"
             id="Shape"
+            d="M38,11.6666667 L0,11.6666667"
             stroke="#C8C8D4"
             stroke-width="1.6"
             transform="translate(19.000000, 11.666667) scale(-1, 1) translate(-19.000000, -11.666667) "

package/src/components/index.ts

@@ -1,74 +1,61 @@
+import { vTooltip } from 'floating-vue'
 // PLUGINS
 import { vMaska } from 'maska/vue'
 import PrimeVue from 'primevue/config'
+import { App } from 'vue'
+import { BindOnceDirective } from 'vue-bind-once'
 
 // DIRECTIVES
 import ClickOutside from '../directives/ClickOutside'
-import { BindOnceDirective } from 'vue-bind-once'
-import { vTooltip } from 'floating-vue'
-
+import CpCoreDatepicker from '../libs/CoreDatepicker.vue'
+import CpAirlineLogo from './atomic-elements/CpAirlineLogo.vue'
 // COMPONENTS
 // Atomic elements
 import CpBadge from './atomic-elements/CpBadge.vue'
 import CpDialog from './atomic-elements/CpDialog.vue'
 import CpDialogWrapper from './atomic-elements/CpDialogWrapper.vue'
-import CpTooltip from './atomic-elements/CpTooltip.vue'
 import CpPartnerBadge from './atomic-elements/CpPartnerBadge.vue'
-import CpAirlineLogo from './atomic-elements/CpAirlineLogo.vue'
-
-// Typography
-import CpHeading from './typography/CpHeading.vue'
-
+import CpTooltip from './atomic-elements/CpTooltip.vue'
 // Buttons
 import CpButton from './buttons/CpButton.vue'
-
+import CpCalendar from './date-pickers/CpCalendar.vue'
 // Date pickers
 import CpDate from './date-pickers/CpDate.vue'
-import CpCoreDatepicker from '../libs/CoreDatepicker.vue'
 import CpDatepicker from './date-pickers/CpDatepicker.vue'
-import CpCalendar from './date-pickers/CpCalendar.vue'
-
-// Dropdown menus
-
 // Feedback indicators
 import CpAlert from './feedback-indicators/CpAlert.vue'
+// Dropdown menus
 import CpLoader from './feedback-indicators/CpLoader.vue'
 import CpToaster from './feedback-indicators/CpToaster.vue'
-
+// Helpers and Utilities
+import TransitionExpand from './helpers-utilities/TransitionExpand.vue'
+import IconAirline from './icons/IconAirline.vue'
+import IconCheckList from './icons/IconCheckList.vue'
+import IconCollapse from './icons/IconCollapse.vue'
+import IconExpand from './icons/IconExpand.vue'
+import IconGroupBy from './icons/IconGroupBy.vue'
+import IconOta from './icons/IconOta.vue'
+import IconSupplier from './icons/IconSupplier.vue'
+import IconThirdParty from './icons/IconThirdParty.vue'
+// Icons
+import IconTooltip from './icons/IconTooltip.vue'
 // Inputs
 import CpInput from './inputs/CpInput.vue'
 import CpTextarea from './inputs/CpTextarea.vue'
-
+// List and Tables
+import CpTable from './lists-and-table/CpTable.vue'
+import CpMultiselect from './selects/CpMultiselect.vue'
 // Selects
 import CpSelect from './selects/CpSelect.vue'
 import CpSelectMenu from './selects/CpSelectMenu.vue'
-import CpMultiselect from './selects/CpMultiselect.vue'
-
 // Toggles
 import CpCheckbox from './toggles/CpCheckbox.vue'
 import CpRadio from './toggles/CpRadio.vue'
 import CpSwitch from './toggles/CpSwitch.vue'
-
-// List and Tables
-import CpTable from './lists-and-table/CpTable.vue'
-
+// Typography
+import CpHeading from './typography/CpHeading.vue'
 // Visual
 import CpIcon from './visual/CpIcon.vue'
-
-// Icons
-import IconTooltip from './icons/IconTooltip.vue'
-import IconAirline from './icons/IconAirline.vue'
-import IconOta from './icons/IconOta.vue'
-import IconSupplier from './icons/IconSupplier.vue'
-import IconThirdParty from './icons/IconThirdParty.vue'
-import IconGroupBy from './icons/IconGroupBy.vue'
-import IconCollapse from './icons/IconCollapse.vue'
-import IconExpand from './icons/IconExpand.vue'
-import IconCheckList from './icons/IconCheckList.vue'
-
-// Helpers and Utilities
-import TransitionExpand from './helpers-utilities/TransitionExpand.vue'
-
 // Methods
 import createToaster from '@/plugins/toaster'
 
@@ -111,11 +98,11 @@ const Components = {
 }
 
 const Pimp = {
-  install(app, options) {
+  install(app: App, options: Record<string, unknown>) {
     app.use(PrimeVue, { unstyled: true })
 
     Object.keys(Components).forEach((name) => {
-      app.component(name, Components[name])
+      app.component(name, Components[name as keyof typeof Components])
     })
 
     // Directives
@@ -126,6 +113,7 @@ const Pimp = {
 
     // CpToaster
     const methods = createToaster(options)
+    // @ts-expect-error <comment on type error>
     app.$toaster = methods
     app.config.globalProperties.$toaster = methods
   },