@citizenplane/pimp 9.5.12 → 9.6.0

package/src/components/CpInput.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="cpInput" :class="dynamicClasses" :aria-disabled="isDisabled" @click="focusOnInput">
+  <div :aria-disabled="isDisabled" class="cpInput" :class="dynamicClasses" @click="focusOnInput">
     <base-input-label
       v-if="label"
       v-bind-once="{ for: inputIdentifier }"
       :is-invalid="isInputInvalid"
-      :tooltip="tooltip"
       :required="isRequired"
+      :tooltip="tooltip"
     >
       {{ capitalizedLabel }}
     </base-input-label>
     <div
       ref="cpInputContainer"
-      :class="{ 'cpInput__container--hasBeforeIcon': hasBeforeIcon }"
       class="cpInput__container"
+      :class="{ 'cpInput__container--hasBeforeIcon': hasBeforeIcon }"
     >
       <div v-if="hasBeforeIcon" class="cpInput__icon cpInput__icon--isBefore">
         <cp-icon v-if="isSearch" type="search" />
@@ -22,18 +22,18 @@
         v-model="inputModel"
         v-bind-once="{ id: inputIdentifier }"
         v-maska
-        :data-maska="mask"
         v-bind="restAttributes"
-        :disabled="isDisabled"
-        :aria-invalid="isInputInvalid"
         :aria-describedby="inputDescribedByAttribute"
+        :aria-invalid="isInputInvalid"
         class="cpInput__inner"
+        :data-maska="mask"
+        :disabled="isDisabled"
       />
       <div v-if="hasAfterIcon" class="cpInput__icon cpInput__icon--isAfter">
         <slot v-if="displayAfterIcon" name="trailing-icon" />
         <transition name="fade">
-          <button v-if="isClearButtonVisible" type="button" class="cpInput__clear" @click="clearInputValue">
-            <cp-icon type="x" class="cpInput__clearIcon" />
+          <button v-if="isClearButtonVisible" class="cpInput__clear" type="button" @click="clearInputValue">
+            <cp-icon class="cpInput__clearIcon" type="x" />
           </button>
         </transition>
       </div>
@@ -55,7 +55,7 @@ import { ref, useAttrs, useSlots, computed, nextTick, onMounted, useId } from 'v
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
 import { Sizes } from '@/constants'
-import { randomString, capitalizeFirstLetter } from '@/helpers'
+import { capitalizeFirstLetter } from '@/helpers'
 
 interface Emits {
   (e: 'update:modelValue', value: string | number | boolean): void
@@ -99,7 +99,7 @@ const attrs = useAttrs()
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { ['class']: value, id, ...restAttributes } = attrs
 
-const inputIdentifier = ref(id || randomString())
+const inputIdentifier = ref(id || useId())
 
 const helpMessageId = useId()
 const errorMessageId = useId()

package/src/components/CpLoader.vue

@@ -1,44 +1,87 @@
 <template>
   <svg
     id="loader-1"
+    class="cpLoader"
+    :class="dynamicClasses"
+    enable-background="new 0 0 40 40"
+    height="40"
     version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    x="0px"
-    y="0px"
-    width="40px"
-    height="40px"
     viewBox="0 0 40 40"
-    enable-background="new 0 0 40 40"
+    width="40"
+    x="0px"
     xml:space="preserve"
+    xmlns="http://www.w3.org/2000/svg"
+    y="0px"
   >
     <path
-      opacity="0.2"
-      :fill="color"
       d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946    s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634    c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"
+      fill="currentColor"
+      opacity="0.2"
     />
     <path
-      :fill="color"
       d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0    C22.32,8.481,24.301,9.057,26.013,10.047z"
+      fill="currentColor"
     >
       <animateTransform
-        attributeType="xml"
         attributeName="transform"
-        type="rotate"
-        from="0 20 20"
-        to="360 20 20"
+        attributeType="xml"
         dur="0.5s"
+        from="0 20 20"
         repeatCount="indefinite"
+        to="360 20 20"
+        type="rotate"
       />
     </path>
   </svg>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+
+import { Colors, Sizes } from '@/constants'
+import { capitalizeFirstLetter } from '@/helpers'
+
 interface Props {
-  color?: string
+  color?: Colors
+  size?: Sizes
 }
 
-withDefaults(defineProps<Props>(), {
-  color: '#ff6700',
+const props = withDefaults(defineProps<Props>(), { color: Colors.PURPLE, size: Sizes.MD })
+
+const capitalizedColor = computed(() => capitalizeFirstLetter(props.color))
+
+const dynamicClasses = computed(() => {
+  return [`cpLoader--is${capitalizedColor.value}`, `cpLoader--${props.size}`]
 })
 </script>
+
+<style lang="scss">
+@mixin cp-loader-themed($className, $color) {
+  &--is#{$className} {
+    color: $color;
+  }
+}
+
+.cpLoader {
+  @include mx.square-sizing(32);
+
+  @include cp-loader-themed('Blue', colors.$secondary-color);
+  @include cp-loader-themed('Purple', colors.$primary-color);
+  @include cp-loader-themed('Green', colors.$success-color);
+  @include cp-loader-themed('Orange', colors.$warning-color);
+  @include cp-loader-themed('Red', colors.$error-color);
+  @include cp-loader-themed('Yellow', colors.$yellow);
+
+  &--lg {
+    @include mx.square-sizing(48);
+  }
+
+  &--sm {
+    @include mx.square-sizing(24);
+  }
+
+  &--xs {
+    @include mx.square-sizing(16);
+  }
+}
+</style>

package/src/components/CpRadio.vue

@@ -3,18 +3,18 @@
     <label
       v-for="({ label, value, description, additionalData, disabled }, index) in options"
       :key="getRadioId(index)"
-      :class="computedClasses({ value, disabled })"
       class="cpRadio"
+      :class="computedClasses({ value, disabled })"
       :for="getRadioId(index)"
     >
       <input
         :id="getRadioId(index)"
+        :autofocus="autofocus"
         :checked="isActive(value)"
-        :value="value"
         :disabled="disabled"
-        type="radio"
-        :autofocus="autofocus"
         :name="groupName"
+        type="radio"
+        :value="value"
         @input="onChange(value)"
       />
       <span class="cpRadio__content">
@@ -29,10 +29,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { useId } from 'vue'
 
 import { ToggleColors } from '@/constants'
-import { capitalizeFirstLetter, randomString } from '@/helpers'
+import { capitalizeFirstLetter } from '@/helpers'
 
 interface RadioOption {
   additionalData?: string
@@ -62,11 +62,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
-const radioUniqueId = ref(randomString())
+const radioUniqueId = useId()
 
 const onChange = (value: string): void => emit('update:modelValue', value)
 
-const getRadioId = (index: number): string => `${radioUniqueId.value}${index}`
+const getRadioId = (index: number): string => `${radioUniqueId}${index}`
 
 const isActive = (value: string): boolean => value === props.modelValue
 

package/src/components/CpSelect.vue

@@ -2,23 +2,23 @@
   <div class="cpSelect" :class="dynamicClasses">
     <base-input-label
       v-if="label"
+      class="cpSelect__label"
       :for="selectReferenceId"
-      :tooltip="tooltip"
       :is-invalid="isInvalid"
       :required="required"
-      class="cpSelect__label"
+      :tooltip="tooltip"
     >
       {{ capitalizedLabel }}
     </base-input-label>
     <div class="cpSelect__container">
       <select
         :id="selectReferenceId"
-        :value="modelValue"
-        :disabled="disabled"
-        :required="required"
         :autocomplete="autocomplete"
-        :name="name"
         class="cpSelect__inner"
+        :disabled="disabled"
+        :name="name"
+        :required="required"
+        :value="modelValue"
         @input="handleChange"
       >
         <option :disabled="hideDefaultValue" value="">{{ defaultValue }}</option>
@@ -37,13 +37,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, useId } from 'vue'
+import { computed, useId } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 import TransitionExpand from '@/components/TransitionExpand.vue'
 
 import { Sizes } from '@/constants'
-import { randomString, capitalizeFirstLetter } from '@/helpers'
+import { capitalizeFirstLetter } from '@/helpers'
 
 interface Emits {
   (e: 'update:modelValue', value: string): void
@@ -89,7 +89,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
-const selectReferenceId = ref('')
+const selectReferenceId = useId()
 
 const helpMessageId = useId()
 const errorMessageId = useId()
@@ -115,10 +115,6 @@ const handleChange = (e: Event): void => {
   const target = e.target as HTMLSelectElement
   emit('update:modelValue', target.value)
 }
-
-onMounted(() => {
-  selectReferenceId.value = randomString()
-})
 </script>
 
 <style lang="scss">

package/src/components/CpSwitch.vue

@@ -3,12 +3,12 @@
     <span class="cpSwitch__switch">
       <input
         :id="switchUniqueId"
-        :disabled="disabled"
+        :autofocus="autofocus"
         :checked="modelValue"
-        :value="modelValue"
-        type="checkbox"
+        :disabled="disabled"
         :name="groupName"
-        :autofocus="autofocus"
+        type="checkbox"
+        :value="modelValue"
         @change="handleClick(modelValue)"
       />
       <span class="cpSwitch__knobContainer">
@@ -20,7 +20,7 @@
         <span v-if="label" class="cpSwitch__label">{{ label }}</span>
         <span v-if="isRequired" class="u-asterisk">*</span>
         <cp-tooltip v-if="tooltip" :content="tooltip">
-          <cp-icon type="tooltip" size="16" class="cpSwitch__tooltip" />
+          <cp-icon class="cpSwitch__tooltip" size="16" type="tooltip" />
         </cp-tooltip>
       </div>
       <span v-if="helper" class="cpSwitch__helper">{{ helper }}</span>
@@ -29,12 +29,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed, useId } from 'vue'
 
 import CpTooltip from '@/components/CpTooltip.vue'
 
 import { ToggleColors } from '@/constants'
-import { capitalizeFirstLetter, randomString } from '@/helpers'
+import { capitalizeFirstLetter } from '@/helpers'
 
 interface Props {
   autofocus?: boolean
@@ -68,9 +68,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
-const switchUniqueId = ref('')
-
-switchUniqueId.value = randomString()
+const switchUniqueId = useId()
 
 const capitalizedColor = computed(() => {
   return capitalizeFirstLetter(props.color)

package/src/components/CpTable.vue

@@ -2,11 +2,11 @@
   <div class="cpTable" :class="mainClasses">
     <div
       ref="cpTableContainer"
-      role="region"
       :aria-labelledby="uniqueId"
-      tabindex="0"
       class="cpTable__container"
       :class="containerClasses"
+      role="region"
+      tabindex="0"
     >
       <table class="cpTable__table">
         <caption v-if="caption" :id="uniqueId" class="cpTable__caption">
@@ -22,7 +22,7 @@
               class="cpTable__column"
               :style="getColumnStyle(column)"
             >
-              <slot name="column" :column="column">
+              <slot :column="column" name="column">
                 {{ column.name }}
               </slot>
             </th>
@@ -46,10 +46,10 @@
                 :key="`${cellKey}_${rowIndex}`"
                 class="cpTable__cell"
                 :class="getCellClasses(cellKey)"
-                :style="getCellStyle(cellKey, cellIndex)"
                 :colspan="getColspan(cellKey)"
+                :style="getCellStyle(cellKey, cellIndex)"
               >
-                <slot :name="cellKey" :cell="cellValue">
+                <slot :cell="cellValue" :name="cellKey">
                   <span v-if="isFullWidthRow(rowData)">{{ cellValue }}</span>
                   <template v-else>{{ cellValue }}</template>
                 </slot>
@@ -61,21 +61,21 @@
                       v-for="option in quickOptions"
                       :key="option.id"
                       v-tooltip="getQuickOptionTooltip(option)"
-                      type="button"
                       class="cpTable__action"
                       :class="getQuickOptionClasses(option)"
                       :disabled="option.isDisabled"
+                      type="button"
                       @click.stop="($event) => option.action(getRowPayload(rowIndex), $event)"
                     >
-                      <cp-icon :type="option.icon" size="16" />
+                      <cp-icon size="16" :type="option.icon" />
                     </button>
 
                     <button
-                      type="button"
                       class="cpTable__action cpTable__action--isDefault"
+                      type="button"
                       @click.stop="handleContextMenu({ rowData, rowIndex }, $event)"
                     >
-                      <cp-icon type="more-vertical" size="16" />
+                      <cp-icon size="16" type="more-vertical" />
                     </button>
                   </slot>
                 </div>
@@ -84,7 +84,7 @@
           </tr>
         </tbody>
       </table>
-      <cp-table-empty-state v-if="hasNoResult" :placeholder="noResultPlaceholder" class="cpTable__emptyState" />
+      <cp-table-empty-state v-if="hasNoResult" class="cpTable__emptyState" :placeholder="noResultPlaceholder" />
     </div>
     <div v-if="hasPagination" class="cpTable__footer">
       <div class="footer__details">
@@ -98,7 +98,7 @@
             </template>
             <template v-else> No results </template>
           </slot>
-          <template v-else> Loading <cp-loader :color="LoaderColor" class="cpTable__loader--isSmall" /> </template>
+          <template v-else> Loading <cp-loader class="cpTable__loader--isSmall" :color="LoaderColor" /> </template>
         </p>
       </div>
       <div class="footer__pagination">
@@ -117,7 +117,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, useId } from 'vue'
 
 import CpContextualMenu from '@/components/CpContextualMenu.vue'
 import CpTableEmptyState from '@/components/CpTableEmptyState.vue'
@@ -125,7 +125,6 @@ import CpTableEmptyState from '@/components/CpTableEmptyState.vue'
 import { camelize, decamelize } from '@/helpers/string'
 
 import { PAGINATION_FORMATS, RESERVED_KEYS, VISIBLE_ROWS_MAX } from '@/constants'
-import { randomString } from '@/helpers'
 
 interface Emits {
   (e: 'onRowClick', data: Record<string, unknown>): void
@@ -199,7 +198,7 @@ const emit = defineEmits<Emits>()
 
 const LoaderColor = '#5341F9'
 
-const uniqueId = ref(randomString())
+const uniqueId = useId()
 const pageNumber = ref(0)
 const cpTableContainer = ref<HTMLElement | null>(null)
 const contextualMenu = ref<InstanceType<typeof CpContextualMenu>>()

package/src/components/CpTextarea.vue

@@ -3,21 +3,21 @@
     <base-input-label
       v-if="label"
       v-bind-once="{ for: inputIdentifier }"
+      class="cpTextarea__label"
       :is-invalid="isInvalid"
       :required="required"
-      class="cpTextarea__label"
     >
       {{ capitalizedLabel }}
     </base-input-label>
     <textarea
       v-model="textareaModel"
       v-bind-once="{ id: inputIdentifier }"
+      class="cpTextarea__input"
+      :class="{ 'cpTextarea__input--isInvalid': isInvalid }"
       :disabled="disabled"
       :placeholder="placeholder"
       :required="required"
       :style="`min-height: ${height}px`"
-      :class="{ 'cpTextarea__input--isInvalid': isInvalid }"
-      class="cpTextarea__input"
     />
     <transition-expand>
       <p v-if="displayErrorMessage" class="cpTextarea__error">
@@ -28,12 +28,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, useId } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 import TransitionExpand from '@/components/TransitionExpand.vue'
 
-import { randomString, capitalizeFirstLetter } from '@/helpers'
+import { capitalizeFirstLetter } from '@/helpers'
 
 interface Emits {
   (e: 'update:modelValue', value: string): void
@@ -75,7 +75,7 @@ const textareaModel = defineModel<string>({
   },
 })
 
-const inputIdentifier = ref(props.inputId || randomString())
+const inputIdentifier = ref(props.inputId || useId())
 
 const capitalizedLabel = computed(() => capitalizeFirstLetter(props.label))
 

package/src/components/CpToaster.vue

@@ -11,15 +11,15 @@
       @mouseleave="setHoverState(false)"
     >
       <div class="cpToaster__content">
-        <cp-icon :type="toasterIcon" class="cpToaster__icon" />
+        <cp-icon class="cpToaster__icon" :type="toasterIcon" />
         <div class="cpToaster__body">
-          <cp-heading :heading-level="HeadingLevels.H4" :size="400" class="cpToaster__title">{{ title }}</cp-heading>
+          <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 type="button" class="cpToaster__close" @click="closeToaster"><cp-icon type="x" /></button>
+      <button class="cpToaster__close" type="button" @click="closeToaster"><cp-icon type="x" /></button>
       <div v-if="actionLabel" class="cpToaster__footer">
-        <button type="button" class="cpToaster__button" @click="handleActionMethod">
+        <button class="cpToaster__button" type="button" @click="handleActionMethod">
           {{ actionLabel }}
         </button>
       </div>
@@ -29,13 +29,12 @@
 
 <script setup lang="ts">
 import { animate } from 'animejs'
-import { ref, computed, watch, onBeforeMount, onMounted, nextTick, getCurrentInstance } from 'vue'
+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'
-import { randomString } from '@/helpers'
 
 interface Props {
   actionLabel?: string
@@ -69,7 +68,7 @@ if (!validateType(props.type)) {
   console.warn(`Type de toaster invalide: ${props.type}`)
 }
 
-const toasterId = ref<string>()
+const toasterId = useId()
 const toastersContainer = ref<HTMLElement | null>(null)
 const isOpen = ref<boolean>(false)
 const isHovered = ref<boolean>(false)
@@ -121,10 +120,6 @@ const removeSiblings = (): void => {
   siblings.forEach(removeElement)
 }
 
-const setToasterId = (): void => {
-  toasterId.value = randomString()
-}
-
 const showToaster = (): void => {
   isOpen.value = true
 
@@ -225,7 +220,6 @@ onBeforeMount(() => {
   createContainer()
   setupContainer()
   removeSiblings()
-  setToasterId()
 })
 
 onMounted(() => {

package/src/components/icons/IconPlane.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.36776 12.6884L9.49721 9.71379V7.09039C9.76954 5.16444 10.3673 4.26528 11.7194 3.02224C11.8781 2.87633 12.1219 2.87633 12.2806 3.02224C13.6327 4.26528 14.2305 5.16444 14.5028 7.09039V9.71379L20.6322 12.6884C20.8114 12.7753 20.9251 12.9569 20.9251 13.156V14.6153C20.9251 15.3248 20.2855 15.8631 19.5864 15.7419L14.5028 14.8611V18.8782L15.8204 19.7167C15.9704 19.8121 16.0611 19.9775 16.0611 20.1552V20.5842C16.0611 20.8138 15.875 21 15.6453 21H8.35467C8.12503 21 7.93886 20.8138 7.93886 20.5842V20.1552C7.93886 19.9775 8.02965 19.8121 8.17958 19.7167L9.49721 18.8782V14.8611L4.41364 15.7419C3.71448 15.8631 3.07493 15.3248 3.07493 14.6153V13.156C3.07493 12.9569 3.18865 12.7753 3.36776 12.6884Z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconPlaneLanding.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M15.3597 8.78016L13.2651 5.02005C12.9765 4.51424 12.519 4.12617 11.9729 3.92387L10.9579 3.54786L10.9963 7.19388M3.17855 21H21M6.86353 6.41244L18.8104 9.74182C20.3201 10.1626 21.1808 11.7505 20.7093 13.2451L20.1688 14.9582L14.0694 13.1637L8.26007 15.7715C7.48033 16.1216 6.60242 16.1866 5.77964 15.9552L3.75296 15.3852L8.46111 11.7213L6.34453 11.0993C4.20299 10.4699 2.96351 8.23769 3.56143 6.08715L4.36799 3.18616L6.86353 6.41244Z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconPlaneTakeoff.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6.68972 7.85846L6.40328 8.81656C6.60964 8.87825 6.83041 8.87167 7.03273 8.79779L6.68972 7.85846ZM17.2459 4.00369L16.9029 3.06436V3.06436L17.2459 4.00369ZM20.4937 5.58137L19.5433 5.89241V5.89241L20.4937 5.58137ZM21 7.12834L21.3295 8.07249C21.8438 7.89302 22.1198 7.33497 21.9504 6.8173L21 7.12834ZM15.5606 9.02664L15.2311 8.08248C15.0059 8.16108 14.8162 8.31758 14.6963 8.52375L15.5606 9.02664ZM12.6589 14.014L11.7946 13.5111L12.6589 14.014ZM10.9291 15.4586L11.2699 16.3988L10.9291 15.4586ZM9.13562 16.1088L8.17668 15.8251C8.06967 16.1869 8.17541 16.5782 8.45011 16.8368C8.72481 17.0955 9.1217 17.1775 9.47642 17.0489L9.13562 16.1088ZM10.6689 10.9249L11.6278 11.2086C11.7342 10.8488 11.6303 10.4597 11.3586 10.2009C11.087 9.9421 10.6933 9.85715 10.3391 9.98088L10.6689 10.9249ZM8.78168 11.5842L9.11145 12.5282L9.11145 12.5282L8.78168 11.5842ZM4.08609 9.36208L5.02521 9.01849H5.02521L4.08609 9.36208ZM3.14867 6.79979L3.43511 5.84169C3.0726 5.73331 2.67996 5.83881 2.42059 6.11429C2.16122 6.38976 2.07954 6.78804 2.20954 7.14337L3.14867 6.79979ZM10.6692 3.4535L11.0864 2.54467L10.6692 3.4535ZM9.13885 3.32835L8.87488 2.36383H8.87487L9.13885 3.32835ZM8.19281 3.58728L7.92883 2.62275C7.61137 2.70963 7.357 2.94716 7.2486 3.25794C7.1402 3.56871 7.19167 3.91292 7.38622 4.17839L8.19281 3.58728ZM3.17855 20C2.62626 20 2.17855 20.4477 2.17855 21C2.17855 21.5523 2.62626 22 3.17855 22V20ZM21 22C21.5523 22 22 21.5523 22 21C22 20.4477 21.5523 20 21 20V22ZM7.03273 8.79779L17.5889 4.94302L16.9029 3.06436L6.34671 6.91913L7.03273 8.79779ZM19.5433 5.89241L20.0496 7.43938L21.9504 6.8173L21.4441 5.27033L19.5433 5.89241ZM20.6705 6.18418L15.2311 8.08248L15.8901 9.97079L21.3295 8.07249L20.6705 6.18418ZM14.6963 8.52375L11.7946 13.5111L13.5233 14.5169L16.425 9.52953L14.6963 8.52375ZM10.5883 14.5185L8.79482 15.1686L9.47642 17.0489L11.2699 16.3988L10.5883 14.5185ZM10.0946 16.3924L11.6278 11.2086L9.70992 10.6413L8.17668 15.8251L10.0946 16.3924ZM10.3391 9.98088L8.4519 10.6401L9.11145 12.5282L10.9986 11.869L10.3391 9.98088ZM5.02521 9.01849L4.08779 6.4562L2.20954 7.14337L3.14697 9.70566L5.02521 9.01849ZM2.86222 7.75788L6.40328 8.81656L6.97616 6.90036L3.43511 5.84169L2.86222 7.75788ZM8.4519 10.6401C7.05845 11.1269 5.53234 10.4047 5.02521 9.01849L3.14697 9.70566C4.02968 12.1184 6.68602 13.3755 9.11145 12.5282L8.4519 10.6401ZM11.7946 13.5111C11.523 13.9779 11.096 14.3344 10.5883 14.5185L11.2699 16.3988C12.2184 16.0549 13.0159 15.3889 13.5233 14.5169L11.7946 13.5111ZM17.5889 4.94302C18.3916 4.64989 19.2775 5.08022 19.5433 5.89241L21.4441 5.27033C20.8265 3.38315 18.7681 2.38325 16.9029 3.06436L17.5889 4.94302ZM14.7977 4.2482L11.0864 2.54467L10.2521 4.36233L13.9633 6.06586L14.7977 4.2482ZM8.87487 2.36383L7.92883 2.62275L8.45679 4.5518L9.40283 4.29288L8.87487 2.36383ZM7.38622 4.17839L9.33924 6.84332L10.9524 5.66109L8.9994 2.99616L7.38622 4.17839ZM11.0864 2.54467C10.3933 2.22654 9.61041 2.16252 8.87488 2.36383L9.40283 4.29288C9.68528 4.21558 9.98592 4.24017 10.2521 4.36233L11.0864 2.54467ZM3.17855 22H21V20H3.17855V22Z"
+    />
+  </svg>
+</template>

package/src/constants/CpCustomIcons.ts

@@ -57,7 +57,10 @@ import IconOta from '@/components/icons/IconOta.vue'
 import IconPaid from '@/components/icons/IconPaid.vue'
 import IconPassport from '@/components/icons/IconPassport.vue'
 import IconPayout from '@/components/icons/IconPayout.vue'
+import IconPlane from '@/components/icons/IconPlane.vue'
 import IconPlane2 from '@/components/icons/IconPlane2.vue'
+import IconPlaneLanding from '@/components/icons/IconPlaneLanding.vue'
+import IconPlaneTakeoff from '@/components/icons/IconPlaneTakeoff.vue'
 import IconPlug from '@/components/icons/IconPlug.vue'
 import IconPlugOff from '@/components/icons/IconPlugOff.vue'
 import IconReceipt from '@/components/icons/IconReceipt.vue'
@@ -140,6 +143,9 @@ export const CustomCpIcons = {
   paid: IconPaid,
   passport: IconPassport,
   payout: IconPayout,
+  plane: IconPlane,
+  'plane-takeoff': IconPlaneTakeoff,
+  'plane-landing': IconPlaneLanding,
   'plane-2': IconPlane2,
   plug: IconPlug,
   'plug-off': IconPlugOff,

package/src/helpers/index.ts

@@ -1,9 +1,5 @@
 import { DateTime } from 'luxon'
 
-export const randomString = (): string => {
-  return `_${Math.random().toString(36).substr(2, 9)}`
-}
-
 export const formatDates = ({
   dateOne,
   dateTwo,