@citizenplane/pimp 8.20.4 → 8.22.0

package/src/components/icons/IconRefund.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg width="24" height="25" viewBox="0 0 24 25" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3.77243 10.2761C4.64589 6.12802 8.30266 3.15687 12.5416 3.151C17.4892 3.151 21.5 7.1618 21.5 12.1094C21.5 17.057 17.4892 21.0678 12.5416 21.0678C12.0814 21.0678 11.7083 20.6947 11.7083 20.2344C11.7083 19.7742 12.0814 19.4011 12.5416 19.4011C16.3167 19.4011 19.4676 16.5197 19.8042 12.7596C20.1408 8.99949 17.5519 5.60423 13.8368 4.93364C10.1218 4.26305 6.50916 6.5389 5.50994 10.1794C5.49243 10.2421 5.50533 10.3093 5.54479 10.3611C5.58425 10.4128 5.6457 10.443 5.71077 10.4427H7.16661C7.33613 10.4407 7.48996 10.5416 7.55566 10.6979C7.62136 10.8542 7.58582 11.0347 7.46578 11.1544L4.8391 13.7802C4.67639 13.9429 4.41264 13.9429 4.24993 13.7802L1.62242 11.1544C1.50305 11.0353 1.4672 10.8561 1.53161 10.7002C1.59602 10.5444 1.74799 10.4428 1.91659 10.4427H3.5691C3.66792 10.4427 3.75299 10.373 3.77243 10.2761Z"
+    />
+    <path
+      d="M10.2454 15.391C10.2454 15.943 10.6133 16.3109 11.1652 16.3109L11.5332 16.1269C11.6251 16.1269 11.7171 16.2189 11.7171 16.3109V16.4029C11.7171 16.9548 12.0851 17.3227 12.637 17.3227C13.1889 17.3227 13.5568 16.9548 13.5568 16.4029V16.2189C13.5568 16.1269 13.6488 16.0349 13.7408 16.0349C14.4767 15.851 15.0286 15.391 15.3046 14.6552C15.7645 13.5513 15.2126 12.1715 14.0168 11.7116L11.9011 10.8837C11.7171 10.7917 11.6251 10.6078 11.6251 10.4238C11.6251 10.1478 11.8091 9.96387 12.0851 9.96387H14.2007C14.7527 9.96387 15.1206 9.59593 15.1206 9.04401C15.1206 8.4921 14.7527 8.12416 14.2007 8.12416H13.8328C13.7408 8.12416 13.6488 8.03217 13.6488 7.94018V7.8482C13.6488 7.29628 13.2809 6.92834 12.729 6.92834C12.1771 6.92834 11.8091 7.29628 11.8091 7.8482V8.21614C11.8091 8.30813 11.7171 8.40012 11.6251 8.40012C10.8893 8.58409 10.3373 9.04401 10.0614 9.7799C9.60149 10.8837 10.1534 12.2635 11.3492 12.7235L13.4649 13.5513C13.6488 13.6433 13.7408 13.8273 13.7408 14.0113C13.7408 14.2872 13.5568 14.4712 13.2809 14.4712H11.1652C10.6133 14.4712 10.2454 14.8391 10.2454 15.391Z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconRoundTrip.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+  >
+    <path
+      d="M6.74805 9.61494C7.23216 10.0422 8.12116 9.75737 8.12116 9.11655L8.1212 7.6363H16.1213C17.3263 7.6363 18.3031 8.61312 18.3031 9.81809V11.0302C18.3031 11.4319 18.6287 11.7575 19.0304 11.7575C19.432 11.7575 19.7576 11.4319 19.7576 11.0302V9.81809C19.7576 7.80981 18.1296 6.18177 16.1213 6.18177H8.12123L8.12126 4.70192C8.12126 4.06101 7.23216 3.77555 6.74805 4.20344L4.24193 6.41076C3.91948 6.69563 3.91948 7.12284 4.24193 7.40762L6.74805 9.61494ZM7.87882 17.3332L15.8789 17.3332L15.8788 18.813C15.8788 19.4539 16.7679 19.7393 17.2521 19.3114L19.7582 17.1041C20.0806 16.8192 20.0806 16.392 19.7582 16.1073L17.2521 13.8999C16.7679 13.4726 15.8789 13.7575 15.8789 14.3983L15.8789 15.8787L7.87882 15.8787C6.67385 15.8787 5.69702 14.9019 5.69702 13.6969L5.69702 12.4848C5.69702 12.0831 5.37142 11.7575 4.96976 11.7575C4.5681 11.7575 4.24249 12.0831 4.24249 12.4848L4.24249 13.6969C4.24249 15.7052 5.87053 17.3332 7.87882 17.3332Z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconRouteNoStop.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M17.3806 8.68262C17.6241 8.43913 17.9893 8.43913 18.2328 8.68262L21.1545 11.6043C21.3974 11.8478 21.3974 12.213 21.1545 12.3957L18.2328 15.318C18.111 15.4391 17.9893 15.5 17.8067 15.5C17.4409 15.5 17.198 15.2565 17.198 14.8913V12.899L4.23801 12.9C4.01886 12.9 3.80725 12.8201 3.64285 12.6751C3.47844 12.5302 3.37255 12.3303 3.34501 12.1129L3.33801 12C3.33801 11.7613 3.43283 11.5324 3.60162 11.3636C3.7704 11.1948 3.99932 11.1 4.23801 11.1L17.198 11.099V9.10872C17.198 8.96272 17.237 8.85552 17.3149 8.75612L17.3806 8.68262Z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconRouteOneStop.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M12.858 11.1611H17.5838C17.6672 11.1611 17.7505 11.0777 17.7505 10.9944V9.41094C17.7505 8.66094 18.6672 8.32754 19.1664 8.82764L21.7506 11.411C22.0831 11.7443 22.0831 12.2443 21.7506 12.5777L19.1664 15.1611C18.6672 15.6619 17.7504 15.3278 17.7504 14.5777V12.9944C17.7504 12.911 17.6672 12.8277 17.5838 12.8277H12.8582C12.5151 13.7988 11.589 14.4946 10.5002 14.4946C9.4115 14.4946 8.4855 13.7988 8.1424 12.8276H2.8334C2.3334 12.8276 2 12.4943 2 11.9943C2 11.4943 2.3333 11.161 2.8334 11.161H8.1424C8.4857 10.19 9.4117 9.49444 10.5003 9.49444C11.5889 9.49444 12.5148 10.19 12.8581 11.161L12.858 11.1611Z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconScheduleChange.vue

@@ -0,0 +1,31 @@
+<template>
+  <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#3E3E5B">
+    <path
+      d="M18.3431 9.31279V6.16077C18.3431 5.0562 17.4476 4.16077 16.3431 4.16077H4.50354C3.39897 4.16077 2.50354 5.0562 2.50354 6.16077V18.0003C2.50354 19.1049 3.39897 20.0003 4.50354 20.0003H6.11962"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path d="M13.9432 2.40076V5.92065" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M6.90344 2.40076V5.92065" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M2.50354 9.44055H18.3431" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    <path
+      d="M15.9196 14.4542V17.8002L18.1502 18.9156"
+      stroke-width="1.78937"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M10.3429 17.8002C10.3429 14.7202 12.8397 12.2235 15.9196 12.2235C18.9995 12.2235 21.4963 14.7202 21.4963 17.8002C21.4963 20.8462 19.005 23.3771 15.9196 23.3771"
+      stroke-width="1.78937"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8.96887 17.1132L10.3429 18.4872L11.7169 17.1132"
+      stroke-width="1.78937"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

package/src/components/icons/IconSeatEmpty.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      d="M13.0827 2.6348H11.4613L9.84009 2.63477C7.63095 2.63477 5.84009 4.42563 5.84009 6.63477V10.5709H6.65073C7.7553 10.5709 8.65073 11.4663 8.65073 12.5709V15.3513L11.4613 15.3513H14.272V12.5709C14.272 11.4663 15.1675 10.5709 16.272 10.5709H17.0827V6.6348C17.0827 4.42566 15.2918 2.6348 13.0827 2.6348Z"
+    />
+    <path
+      d="M5.44946 14.0751L5.44947 16.6389C5.44948 17.6882 6.30014 18.5389 7.34947 18.5389H11.2033H15.5734C16.6227 18.5389 17.4734 17.6882 17.4734 16.6389V14.0751"
+    />
+    <path d="M8.13684 22.5175L14.7859 22.5175" />
+    <path d="M11.4614 18.5387L11.4614 22.5385" />
+  </svg>
+</template>

package/src/components/icons/IconSeatSold.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="#3E3E5B"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      d="M13.3861 9V5.74613C13.3861 3.53699 11.5953 1.74612 9.38614 1.74612H7.7648L6.14356 1.74609C3.93442 1.74609 2.14355 3.53696 2.14355 5.74609V9.68219H2.95419C4.05876 9.68219 4.95419 10.5776 4.95419 11.6822V14.4626L7.7648 14.4627"
+    />
+    <path d="M1.75293 13.1865L1.75294 15.7504C1.75295 16.7997 2.6036 17.6503 3.65294 17.6503H7.69867" />
+    <path d="M4.44043 21.6289L11.0895 21.6289" />
+    <path d="M7.76367 17.6494L7.76367 21.6492" />
+    <path d="M22 9L14.4375 17L11 13.3636" />
+  </svg>
+</template>

package/src/components/icons/IconSeatTotal.vue

@@ -0,0 +1,27 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      d="M9.52811 2.6348H7.90677L6.28552 2.63477C4.07638 2.63477 2.28552 4.42563 2.28552 6.63477V10.5709H3.09616C4.20073 10.5709 5.09616 11.4663 5.09616 12.5709V15.3513L7.90677 15.3513H10.7175V12.5709C10.7175 11.4663 11.6129 10.5709 12.7175 10.5709H13.5281V6.6348C13.5281 4.42566 11.7372 2.6348 9.52811 2.6348Z"
+    />
+    <path
+      d="M1.8949 14.0751L1.89491 16.6389C1.89491 17.6882 2.74557 18.5389 3.79491 18.5389H7.64869H12.0188C13.0682 18.5389 13.9188 17.6882 13.9188 16.6389V14.0751"
+    />
+    <path d="M4.58228 22.5175L11.2314 22.5175" />
+    <path d="M7.90686 18.5387L7.90686 22.5385" />
+    <path
+      d="M15.4546 2.5H18.5C20.1569 2.5 21.5 3.84315 21.5 5.5V11H20.4693C19.3648 11 18.4693 11.8954 18.4693 13V15.3227H17.153"
+    />
+    <path d="M21.7691 14.0751V16.6366C21.7691 17.6859 20.9184 18.5366 19.8691 18.5366H16.7479V22.5283" />
+    <path d="M14.6714 22.5175L20.0383 22.5175" />
+  </svg>
+</template>

package/src/components/icons/IconTemplate.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="24"
+    height="25"
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      d="M13 2.73706H6C5.46957 2.73706 4.96086 2.94777 4.58579 3.32285C4.21071 3.69792 4 4.20663 4 4.73706V20.7371C4 21.2675 4.21071 21.7762 4.58579 22.1513C4.96086 22.5263 5.46957 22.7371 6 22.7371H18C18.5304 22.7371 19.0391 22.5263 19.4142 22.1513C19.7893 21.7762 20 21.2675 20 20.7371V9.73706L13 2.73706Z"
+    />
+    <path d="M12.1357 9.02393L9.59766 13.3278H13.6255L11.0841 17.6324" />
+  </svg>
+</template>

package/src/components/icons/IconTicket.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      d="M22 6H2V9.5H2.42683C3.80754 9.5 4.92683 10.6193 4.92683 12C4.92683 13.3807 3.80754 14.5 2.42683 14.5H2V18H22V14.5H21.5732C20.1925 14.5 19.0732 13.3807 19.0732 12C19.0732 10.6193 20.1925 9.5 21.5732 9.5H22V6Z"
+    />
+    <path d="M11 10.3334H16.5" />
+    <path d="M11 13.6667H14" />
+    <path d="M8 7H8.01" />
+    <path d="M8 10.3334H8.01" />
+    <path d="M8 13.6667H8.01" />
+    <path d="M8 17.0001H8.01" />
+  </svg>
+</template>

package/src/components/icons/IconTimer.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.43535 10.7231C8.82587 10.3325 9.45904 10.3325 9.84956 10.7231L12.4187 13.2922C12.8092 13.6827 12.8092 14.3159 12.4187 14.7064C12.0281 15.0969 11.395 15.0969 11.0044 14.7064L8.43535 12.1373C8.04483 11.7468 8.04483 11.1136 8.43535 10.7231Z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.5421 1.74255L9.4812 1.74258C8.92891 1.74258 8.4812 2.1903 8.4812 2.74258C8.4812 3.29486 8.92892 3.74258 9.48121 3.74258L11.0051 3.74257V5.97386C6.99453 6.46438 3.88843 9.882 3.88843 14.0251C3.88843 18.505 7.52013 22.1367 12.0001 22.1367C16.48 22.1367 20.1117 18.505 20.1117 14.0251C20.1117 12.1326 19.4636 10.3914 18.3772 9.01146L19.5985 7.79019C19.989 7.39967 19.989 6.7665 19.5985 6.37598C19.2079 5.98545 18.5748 5.98545 18.1842 6.37598L16.9567 7.60351C15.8359 6.7371 14.482 6.15761 13.0051 5.9751V3.74256L14.5421 3.74255C15.0944 3.74255 15.5421 3.29483 15.5421 2.74255C15.5421 2.19026 15.0944 1.74255 14.5421 1.74255ZM12.0001 7.91345C8.6247 7.91345 5.88843 10.6497 5.88843 14.0251C5.88843 17.4004 8.6247 20.1367 12.0001 20.1367C15.3754 20.1367 18.1117 17.4004 18.1117 14.0251C18.1117 10.6497 15.3754 7.91345 12.0001 7.91345Z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconTrafficControl.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      stroke="none"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M13 3C13 2.44772 12.5523 2 12 2C11.4477 2 11 2.44772 11 3V4H3.00001C2.70443 4 2.424 4.13076 2.234 4.35717C2.044 4.58358 1.96389 4.88244 2.01518 5.17353L3.46045 13.3757C3.54467 13.8537 3.95994 14.2022 4.44528 14.2022H7V21.928C7 22.4803 7.44772 22.928 8 22.928C8.55228 22.928 9 22.4803 9 21.928V14.2022H12.1534H15.2021V21.928C15.2021 22.4803 15.6499 22.928 16.2021 22.928C16.7544 22.928 17.2021 22.4803 17.2021 21.928V14.2022H19.8615C20.3469 14.2022 20.7621 13.8537 20.8464 13.3757L22.2916 5.17353C22.3429 4.88244 22.2628 4.58358 22.0728 4.35717C21.8828 4.13076 21.6024 4 21.3068 4H13V3ZM11 6H9.06389L9.54098 12.2022H12.1534H14.6613L15.1384 6H13H12.1534H11ZM4.19162 6H7.05799L7.53508 12.2022H5.28448L4.19162 6ZM16.6672 12.2022H19.0223L20.1152 6H17.1443L16.6672 12.2022Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/{index.js → index.ts}

@@ -9,7 +9,6 @@ import { vTooltip } from 'floating-vue'
 // COMPONENTS
 // Atomic elements
 import CpBadge from './atomic-elements/CpBadge.vue'
-import CpBadgeNew from './atomic-elements/CpBadgeNew.vue'
 import CpDialog from './atomic-elements/CpDialog.vue'
 import CpDialogWrapper from './atomic-elements/CpDialogWrapper.vue'
 import CpTooltip from './atomic-elements/CpTooltip.vue'
@@ -74,7 +73,6 @@ import createToaster from '@/plugins/toaster'
 const Components = {
   CpToaster,
   CpBadge,
-  CpBadgeNew,
   CpHeading,
   CpButton,
   CpDialogWrapper,
@@ -122,7 +120,7 @@ const Pimp = {
     app.directive('tooltip', vTooltip)
 
     // CpToaster
-    let methods = createToaster(options)
+    const methods = createToaster(options)
     app.$toaster = methods
     app.config.globalProperties.$toaster = methods
   },

package/src/components/inputs/CpInput.vue

@@ -4,7 +4,7 @@
       {{ capitalizedLabel }} <span v-if="isRequired" class="u-asterisk">*</span>
       <cp-tooltip v-if="tooltip" :content="tooltip">
         <button type="button" class="cpInput__tooltip">
-          <icon-tooltip class="cpInput__tooltipIcon" />
+          <cp-icon class="cpInput__tooltipIcon" type="cp-tooltip" />
         </button>
       </cp-tooltip>
     </base-input-label>
@@ -121,7 +121,7 @@ defineOptions({ inheritAttrs: false })
 const attrs = useAttrs()
 
 // class is a reserved word, we can't remove 'class' property from attrs
-// eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line
 const { ['class']: value, id, ...restAttributes } = attrs
 
 const inputIdentifier = ref(id || randomString())

package/src/components/lists-and-table/CpTable.vue

@@ -311,12 +311,14 @@ const handleNavigationClick = (isNext = true) => {
   resetScrollPosition()
 
   if (isNext) {
-    hasRemainingPages.value && augmentOffset()
+    if (hasRemainingPages.value) {
+      augmentOffset()
+    }
     emit('onNextClick')
     return
   }
 
-  hasPreviousPages.value && decreaseOffset()
+  if (hasPreviousPages.value) decreaseOffset()
   emit('onPreviousClick')
 }
 

package/src/components/selects/CpSelectMenu.vue

@@ -129,8 +129,12 @@ export default {
       this.$emit('on-close')
     },
     onChange(value) {
-      value.value !== this.selectedValue.value && this.$emit('update:selectedValue', value)
-      this.closeOnSelect && this.closeDropdown()
+      if (value.value !== this.selectedValue.value) {
+        this.$emit('update:selectedValue', value)
+      }
+      if (this.closeOnSelect) {
+        this.closeDropdown()
+      }
     },
     updateFilterValue(event) {
       this.$emit('on-filter-change', event.target.value)

package/src/components/visual/CpIcon.vue

@@ -1,76 +1,90 @@
-<script>
-import { defineComponent, h, watch } from 'vue'
+<template>
+  <component :is="wrapperTag" v-bind="wrapperAttrs">
+    <component :is="dynamicIcon" v-bind="iconAttrs" />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
 import * as feather from 'feather-icons'
+import { CustomCpIcons } from '@/constants'
 
-export default defineComponent({
-  name: 'CpIcon',
-  props: {
-    size: {
-      type: [Number, String],
-      default: 24,
-    },
+interface Props {
+  size?: number | string
+  tag?: string
+  type: string
+  weight?: number
+}
 
-    tag: {
-      type: String,
-      default: 'i',
-    },
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  tag: 'i',
+  weight: 0,
+})
 
-    type: {
-      type: String,
-      default: 'feather',
-      validator(type) {
-        if (!feather) {
-          throw new Error('The Feather icons is required.')
-        }
+const wrapperTag = computed(() => props.tag)
+const type = computed(() => props.type)
+const size = computed(() => props.size)
+const weight = computed(() => props.weight)
 
-        if (!feather.icons[type]) {
-          throw new Error(`"${type}" is not an available icon type.`)
-        }
+// @ts-expect-error cannot use string as index type for CustomCpIcons
+const isCustomIcon = computed(() => !!CustomCpIcons[type.value])
+// @ts-expect-error cannot use string as index type for feather.icons
+const isFeatherIcon = computed(() => !!feather.icons[type.value])
 
-        return true
-      },
-    },
-  },
-  setup(props, { attrs }) {
-    let icon = feather.icons[props.type] || ''
+const dynamicIcon = computed(() => {
+  if (isFeatherIcon.value && isCustomIcon.value) {
+    throw new Error(`Icon type "${type.value}" is defined in both feather icons and CustomCpIcons. Please choose one.`)
+  }
+
+  if (isFeatherIcon.value) {
+    return 'svg'
+  } else if (type.value === 'checked-baggage') {
+    return weight.value >= 30 ? CustomCpIcons['checked-baggage-20'] : CustomCpIcons['checked-baggage-30']
+  } else {
+    // @ts-expect-error cannot use string as index type for CustomCpIcons
+    return CustomCpIcons[type.value] || ''
+  }
+})
 
-    watch(
-      () => props.type,
-      () => {
-        icon = feather.icons[props.type]
-      },
-    )
+const wrapperAttrs = computed(() => {
+  const attrs: Record<string, unknown> = {
+    'data-name': type.value,
+    'data-type': type.value,
+    class: {
+      cpIcon: true,
+      [`cpIcon--${type.value as string}`]: type.value,
+    },
+  }
 
-    return () =>
-      h(
-        props.tag,
+  if (!isCustomIcon.value) {
+    attrs['data-tags'] = dynamicIcon.value.tags
+  }
 
-        {
-          ...attrs,
-          'data-name': props.type,
-          'data-tags': icon.tags,
-          'data-type': props.type,
-          class: {
-            cpIcon: true,
-            [`cpIcon--${props.type}`]: props.type,
-          },
-        },
+  return attrs
+})
 
-        [
-          h(
-            'svg',
+const iconAttrs = computed(() => {
+  const attrs: Record<string, unknown> = {
+    height: size.value,
+    width: size.value,
+  }
 
-            {
-              ...icon.attrs,
-              height: props.size,
-              width: props.size,
-              class: [icon.attrs.class, 'cpIcon__content'],
-              innerHTML: icon.contents,
-            },
-          ),
-        ],
-      )
-  },
+  if (isCustomIcon.value) {
+    return {
+      ...attrs,
+      class: 'cpIcon__content',
+    }
+  } else {
+    // @ts-expect-error cannot use string as index type for feather.icons
+    const featherIcon = feather.icons[type.value]
+    return {
+      ...featherIcon.attrs,
+      ...attrs,
+      class: [featherIcon.attrs?.class, 'cpIcon__content'],
+      innerHTML: featherIcon.contents || '',
+    }
+  }
 })
 </script>
 

package/src/constants/{index.js → index.ts}

@@ -2,3 +2,4 @@ export { default as Colors } from './src/colors/Colors'
 export { default as ToggleColors } from './src/colors/ToggleColors'
 export { default as Position } from './src/Position'
 export { default as CpTableConfig } from './src/CpTableConfig'
+export { default as CustomCpIcons } from './src/CpCustomIcons'

package/src/constants/src/CpCustomIcons.ts

@@ -0,0 +1,69 @@
+import { defineAsyncComponent } from 'vue'
+
+export default {
+  'accompanied-minor-each': defineAsyncComponent(() => import('@/components/icons/IconAccompaniedMinorEach.vue')),
+  'accompanied-minor-none': defineAsyncComponent(() => import('@/components/icons/IconAccompaniedMinorNone.vue')),
+  'accompanied-minor-one': defineAsyncComponent(() => import('@/components/icons/IconAccompaniedMinorOne.vue')),
+  'add-receipt': defineAsyncComponent(() => import('@/components/icons/IconAddReceipt.vue')),
+  airline: defineAsyncComponent(() => import('@/components/icons/IconAirline.vue')),
+  'airport-terminal': defineAsyncComponent(() => import('@/components/icons/IconAirportTerminal.vue')),
+  arrival: defineAsyncComponent(() => import('@/components/icons/IconArrival.vue')),
+  broadcast: defineAsyncComponent(() => import('@/components/icons/IconBroadcast.vue')),
+  'cabin-bag': defineAsyncComponent(() => import('@/components/icons/IconCabinBag.vue')),
+  'checked-baggage': defineAsyncComponent(() => import('@/components/icons/IconCheckedBaggage.vue')),
+  'checked-baggage-20': defineAsyncComponent(() => import('@/components/icons/IconCheckedBaggage20.vue')),
+  'checked-baggage-30': defineAsyncComponent(() => import('@/components/icons/IconCheckedBaggage30.vue')),
+  'check-list': defineAsyncComponent(() => import('@/components/icons/IconCheckList.vue')),
+  child: defineAsyncComponent(() => import('@/components/icons/IconChild.vue')),
+  collapse: defineAsyncComponent(() => import('@/components/icons/IconCollapse.vue')),
+  contact: defineAsyncComponent(() => import('@/components/icons/IconContact.vue')),
+  departure: defineAsyncComponent(() => import('@/components/icons/IconDeparture.vue')),
+  distribution: defineAsyncComponent(() => import('@/components/icons/IconDistribution.vue')),
+  'distribution-closed': defineAsyncComponent(() => import('@/components/icons/IconDistributionClosed.vue')),
+  'distribution-exclusive-pair': defineAsyncComponent(
+    () => import('@/components/icons/IconDistributionExclusivePair.vue'),
+  ),
+  'distribution-sided': defineAsyncComponent(() => import('@/components/icons/IconDistributionSided.vue')),
+  'distribution-supply-sided': defineAsyncComponent(() => import('@/components/icons/IconDistributionSupplySided.vue')),
+  'dynamic-content': defineAsyncComponent(() => import('@/components/icons/IconDynamicContent.vue')),
+  expand: defineAsyncComponent(() => import('@/components/icons/IconExpand.vue')),
+  fares: defineAsyncComponent(() => import('@/components/icons/IconFares.vue')),
+  'fares-outlined': defineAsyncComponent(() => import('@/components/icons/IconFaresOutlined.vue')),
+  female: defineAsyncComponent(() => import('@/components/icons/IconFemale.vue')),
+  'find-conversation': defineAsyncComponent(() => import('@/components/icons/IconFindConversation.vue')),
+  fire: defineAsyncComponent(() => import('@/components/icons/IconFire.vue')),
+  flight: defineAsyncComponent(() => import('@/components/icons/IconFlight.vue')),
+  'flight-return': defineAsyncComponent(() => import('@/components/icons/IconFlightReturn.vue')),
+  'group-by': defineAsyncComponent(() => import('@/components/icons/IconGroupBy.vue')),
+  'hand-heart': defineAsyncComponent(() => import('@/components/icons/IconHandHeart.vue')),
+  history: defineAsyncComponent(() => import('@/components/icons/IconHistory.vue')),
+  hourglass: defineAsyncComponent(() => import('@/components/icons/IconHourGlass.vue')),
+  'id-card': defineAsyncComponent(() => import('@/components/icons/IconIdCard.vue')),
+  infant: defineAsyncComponent(() => import('@/components/icons/IconInfant.vue')),
+  male: defineAsyncComponent(() => import('@/components/icons/IconMale.vue')),
+  'multi-segments': defineAsyncComponent(() => import('@/components/icons/IconMultiSegments.vue')),
+  'no-refund': defineAsyncComponent(() => import('@/components/icons/IconNoRefund.vue')),
+  notion: defineAsyncComponent(() => import('@/components/icons/IconNotion.vue')),
+  offline: defineAsyncComponent(() => import('@/components/icons/IconOffline.vue')),
+  ota: defineAsyncComponent(() => import('@/components/icons/IconOta.vue')),
+  paid: defineAsyncComponent(() => import('@/components/icons/IconPaid.vue')),
+  passport: defineAsyncComponent(() => import('@/components/icons/IconPassport.vue')),
+  payout: defineAsyncComponent(() => import('@/components/icons/IconPayout.vue')),
+  receipt: defineAsyncComponent(() => import('@/components/icons/IconReceipt.vue')),
+  recurrence: defineAsyncComponent(() => import('@/components/icons/IconRecurrence.vue')),
+  refund: defineAsyncComponent(() => import('@/components/icons/IconRefund.vue')),
+  'round-trip': defineAsyncComponent(() => import('@/components/icons/IconRoundTrip.vue')),
+  'route-no-stop': defineAsyncComponent(() => import('@/components/icons/IconRouteNoStop.vue')),
+  'route-one-stop': defineAsyncComponent(() => import('@/components/icons/IconRouteOneStop.vue')),
+  'schedule-change': defineAsyncComponent(() => import('@/components/icons/IconScheduleChange.vue')),
+  'seat-empty': defineAsyncComponent(() => import('@/components/icons/IconSeatEmpty.vue')),
+  'seat-sold': defineAsyncComponent(() => import('@/components/icons/IconSeatSold.vue')),
+  'seat-total': defineAsyncComponent(() => import('@/components/icons/IconSeatTotal.vue')),
+  supplier: defineAsyncComponent(() => import('@/components/icons/IconSupplier.vue')),
+  template: defineAsyncComponent(() => import('@/components/icons/IconTemplate.vue')),
+  'third-party': defineAsyncComponent(() => import('@/components/icons/IconThirdParty.vue')),
+  ticket: defineAsyncComponent(() => import('@/components/icons/IconTicket.vue')),
+  timer: defineAsyncComponent(() => import('@/components/icons/IconTimer.vue')),
+  tooltip: defineAsyncComponent(() => import('@/components/icons/IconTooltip.vue')),
+  'traffic-control': defineAsyncComponent(() => import('@/components/icons/IconTrafficControl.vue')),
+}

package/src/constants/src/colors/{ToggleColors.js → ToggleColors.ts}

@@ -1,4 +1,4 @@
-import { Colors } from '@/constants'
+import Colors from './Colors'
 
 export default {
   BLUE: Colors.BLUE,

package/src/libs/CoreDatepicker.vue

@@ -454,7 +454,8 @@ export default {
       this.viewportWidth = window.innerWidth + 'px'
 
       this._handleWindowResizeEvent = this.debounce(() => {
-        this.inline ? this.openDatepicker() : this.closeDatepicker()
+        if (this.inline) this.openDatepicker()
+        else this.closeDatepicker()
         this.$emit('is-inline', this.inline)
         this.positionDatepicker()
         this.setStartDates()
@@ -502,6 +503,8 @@ export default {
       let timeout
 
       return function () {
+        // Unexpected aliasing of 'this' to local variable  @typescript-eslint/no-this-alias
+        // eslint-disable-next-line
         const context = this
         const args = arguments