@citizenplane/pimp 8.30.0 → 8.32.1

package/src/components/CpMultiselect.vue

@@ -3,8 +3,7 @@
     <base-input-label v-if="label" :required="required" class="cpMultiselect__label">
       {{ label }}
     </base-input-label>
-
-    <AutoComplete
+    <auto-complete
       ref="multiselect"
       v-model="selectModel"
       :suggestions="options"
@@ -29,7 +28,6 @@
           <div class="cpMultiselect__empty">{{ emptyMessage }}</div>
         </slot>
       </template>
-
       <template #chip="{ value, removeCallback }">
         <slot name="selected-option" :option="value" :remove="removeCallback">
           <cp-badge is-clearable size="sm" @on-clear="removeCallback()">
@@ -40,25 +38,20 @@
           </cp-badge>
         </slot>
       </template>
-
       <template #option="{ option }">
         <slot name="option" :option="option" />
       </template>
-
       <template #dropdown>
         <div v-if="displayPrefix" class="cpMultiselect__prefix">
           <slot name="prefix" />
         </div>
-
         <cp-loader v-if="isLoading" class="cpMultiselect__loader" color="#B2B2BD" />
         <button v-else :disabled="disabled" type="button" class="cpMultiselect__toggle" @click.stop="toggleDropdown">
           <cp-icon type="chevron-down" class="cpMultiselect__dropdownIcon" :class="chevronDynamicClass" />
         </button>
-
         <base-select-clear-button v-if="displayClearButton" class="cpMultiselect__clear" @click="handleClear" />
       </template>
-    </AutoComplete>
-
+    </auto-complete>
     <transition-expand>
       <p v-if="isInvalid" class="cpMultiselect__error">
         {{ errorMessage }}
@@ -78,6 +71,13 @@ import TransitionExpand from '@/components/TransitionExpand.vue'
 
 import { isEmpty } from '@/helpers/object'
 
+interface Emits {
+  (e: 'search', query: string): void
+  (e: 'select', option: Record<string, unknown>): void
+  (e: 'clear'): void
+  (e: 'update:modelValue', value: Record<string, unknown> | Record<string, unknown>[] | null): void
+}
+
 interface Props {
   disabled?: boolean
   emptyMessage?: string
@@ -114,13 +114,6 @@ const props = withDefaults(defineProps<Props>(), {
   modelValue: null,
 })
 
-interface Emits {
-  (e: 'search', query: string): void
-  (e: 'select', option: Record<string, unknown>): void
-  (e: 'clear'): void
-  (e: 'update:modelValue', value: Record<string, unknown> | Record<string, unknown>[] | null): void
-}
-
 const emit = defineEmits<Emits>()
 
 const selectModel = computed({

package/src/components/CpSelect.vue

@@ -6,7 +6,6 @@
     <div class="cpSelect__container">
       <select
         :id="selectReferenceId"
-        ref="cpSelect"
         :value="modelValue"
         :disabled="disabled"
         :required="required"
@@ -40,6 +39,10 @@ import TransitionExpand from '@/components/TransitionExpand.vue'
 
 import { randomString, capitalizeFirstLetter } from '@/helpers'
 
+interface Emits {
+  (e: 'update:modelValue', value: string): void
+}
+
 interface SelectOption {
   label: string
   value: string | number
@@ -60,10 +63,6 @@ interface Props {
   required?: boolean
 }
 
-interface Emits {
-  (e: 'update:modelValue', value: string): void
-}
-
 const props = withDefaults(defineProps<Props>(), {
   label: '',
   modelValue: '',

package/src/components/CpSelectMenu.vue

@@ -78,6 +78,7 @@ const props = withDefaults(defineProps<Props>(), {
   dropdownTitle: 'Select value',
   dropdownFilterPlaceholder: 'Filter...',
   dropdownEmptyViewPlaceholder: 'No option found',
+  // eslint-disable-next-line vue/no-boolean-default
   closeOnSelect: true,
 })
 

package/src/components/CpTable.vue

@@ -121,7 +121,12 @@ import { camelize, decamelize } from '@/helpers/string'
 import { PAGINATION_FORMATS, RESERVED_KEYS, VISIBLE_ROWS_MAX } from '@/constants'
 import { randomString } from '@/helpers'
 
-const LoaderColor = '#5341F9'
+interface Emits {
+  (e: 'onRowClick', data: Record<string, unknown>): void
+  (e: 'onRowRightClick', payload: { data: Record<string, unknown>; event: Event }): void
+  (e: 'onNextClick'): void
+  (e: 'onPreviousClick'): void
+}
 
 interface ColumnDefinition {
   id: string
@@ -183,15 +188,10 @@ const props = withDefaults(defineProps<Props>(), {
   rowOptions: () => [],
 })
 
-interface Emits {
-  (e: 'onRowClick', data: Record<string, unknown>): void
-  (e: 'onRowRightClick', payload: { data: Record<string, unknown>; event: Event }): void
-  (e: 'onNextClick'): void
-  (e: 'onPreviousClick'): void
-}
-
 const emit = defineEmits<Emits>()
 
+const LoaderColor = '#5341F9'
+
 const uniqueId = ref(randomString())
 const pageNumber = ref(0)
 const cpTableContainer = ref<HTMLElement | null>(null)

package/src/components/CpTextarea.vue

@@ -35,6 +35,10 @@ import TransitionExpand from '@/components/TransitionExpand.vue'
 
 import { randomString, capitalizeFirstLetter } from '@/helpers'
 
+interface Emits {
+  (e: 'update:modelValue', value: string): void
+}
+
 interface Props {
   disabled?: boolean
   errorMessage?: string
@@ -59,10 +63,6 @@ const props = withDefaults(defineProps<Props>(), {
   height: 200,
 })
 
-interface Emits {
-  (e: 'update:modelValue', value: string): void
-}
-
 const emit = defineEmits<Emits>()
 
 const textareaModel = defineModel<string>({

package/src/constants/Button.ts

@@ -0,0 +1,16 @@
+export enum ButtonAppearances {
+  DEFAULT = 'default',
+  PRIMARY = 'primary',
+  MINIMAL = 'minimal',
+}
+
+export enum ButtonTags {
+  BUTTON = 'button',
+  A = 'a',
+}
+
+export enum ButtonTypes {
+  BUTTON = 'button',
+  SUBMIT = 'submit',
+  RESET = 'reset',
+}

package/src/constants/CpCustomIcons.ts

@@ -1,83 +1,157 @@
-import { defineAsyncComponent } from 'vue'
+import IconAccompaniedMinorEach from '@/components/icons/IconAccompaniedMinorEach.vue'
+import IconAccompaniedMinorNone from '@/components/icons/IconAccompaniedMinorNone.vue'
+import IconAccompaniedMinorOne from '@/components/icons/IconAccompaniedMinorOne.vue'
+import IconAddReceipt from '@/components/icons/IconAddReceipt.vue'
+import IconAirline from '@/components/icons/IconAirline.vue'
+import IconAirportTerminal from '@/components/icons/IconAirportTerminal.vue'
+import IconArrival from '@/components/icons/IconArrival.vue'
+import IconBaggageCabinNone from '@/components/icons/IconBaggageCabinNone.vue'
+import IconBaggageCheckedNone from '@/components/icons/IconBaggageCheckedNone.vue'
+import IconBaggagePersonalNone from '@/components/icons/IconBaggagePersonalNone.vue'
+import IconBroadcast from '@/components/icons/IconBroadcast.vue'
+import IconCabinBag from '@/components/icons/IconCabinBag.vue'
+import IconCalendar from '@/components/icons/IconCalendar.vue'
+import IconCalendarDelay from '@/components/icons/IconCalendarDelay.vue'
+import IconCheckedBaggage20 from '@/components/icons/IconCheckedBaggage20.vue'
+import IconCheckedBaggage30 from '@/components/icons/IconCheckedBaggage30.vue'
+import IconCheckList from '@/components/icons/IconCheckList.vue'
+import IconChild from '@/components/icons/IconChild.vue'
+import IconCollapse from '@/components/icons/IconCollapse.vue'
+import IconContact from '@/components/icons/IconContact.vue'
+import IconDeparture from '@/components/icons/IconDeparture.vue'
+import IconDistribution from '@/components/icons/IconDistribution.vue'
+import IconDistributionClosed from '@/components/icons/IconDistributionClosed.vue'
+import IconDistributionExclusivePair from '@/components/icons/IconDistributionExclusivePair.vue'
+import IconDistributionSided from '@/components/icons/IconDistributionSided.vue'
+import IconDistributionSupplySided from '@/components/icons/IconDistributionSupplySided.vue'
+import IconDynamicContent from '@/components/icons/IconDynamicContent.vue'
+import IconEndDate from '@/components/icons/IconEndDate.vue'
+import IconExpand from '@/components/icons/IconExpand.vue'
+import IconFares from '@/components/icons/IconFares.vue'
+import IconFaresOutlined from '@/components/icons/IconFaresOutlined.vue'
+import IconFemale from '@/components/icons/IconFemale.vue'
+import IconFindConversation from '@/components/icons/IconFindConversation.vue'
+import IconFire from '@/components/icons/IconFire.vue'
+import IconFlight from '@/components/icons/IconFlight.vue'
+import IconFlightReturn from '@/components/icons/IconFlightReturn.vue'
+import IconFlightSchedule from '@/components/icons/IconFlightSchedule.vue'
+import IconGroupBy from '@/components/icons/IconGroupBy.vue'
+import IconHandHeart from '@/components/icons/IconHandHeart.vue'
+import IconHistory from '@/components/icons/IconHistory.vue'
+import IconHourGlass from '@/components/icons/IconHourGlass.vue'
+import IconIdCard from '@/components/icons/IconIdCard.vue'
+import IconInfant from '@/components/icons/IconInfant.vue'
+import IconItinerary from '@/components/icons/IconItinerary.vue'
+import IconLeave from '@/components/icons/IconLeave.vue'
+import IconMale from '@/components/icons/IconMale.vue'
+import IconMultiSegments from '@/components/icons/IconMultiSegments.vue'
+import IconNoPassport from '@/components/icons/IconNoPassport.vue'
+import IconNoRefund from '@/components/icons/IconNoRefund.vue'
+import IconNoSeat from '@/components/icons/IconNoSeat.vue'
+import IconNotion from '@/components/icons/IconNotion.vue'
+import IconOffline from '@/components/icons/IconOffline.vue'
+import IconOneWay from '@/components/icons/IconOneWay.vue'
+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 IconPlug from '@/components/icons/IconPlug.vue'
+import IconPlugOff from '@/components/icons/IconPlugOff.vue'
+import IconReceipt from '@/components/icons/IconReceipt.vue'
+import IconRecurrence from '@/components/icons/IconRecurrence.vue'
+import IconRefund from '@/components/icons/IconRefund.vue'
+import IconRoundTrip from '@/components/icons/IconRoundTrip.vue'
+import IconRouteNoStop from '@/components/icons/IconRouteNoStop.vue'
+import IconRouteOneStop from '@/components/icons/IconRouteOneStop.vue'
+import IconScheduleChange from '@/components/icons/IconScheduleChange.vue'
+import IconSeatEmpty from '@/components/icons/IconSeatEmpty.vue'
+import IconSeatSold from '@/components/icons/IconSeatSold.vue'
+import IconSeatTotal from '@/components/icons/IconSeatTotal.vue'
+import IconStartDate from '@/components/icons/IconStartDate.vue'
+import IconSupplier from '@/components/icons/IconSupplier.vue'
+import IconTemplate from '@/components/icons/IconTemplate.vue'
+import IconThirdParty from '@/components/icons/IconThirdParty.vue'
+import IconTicket from '@/components/icons/IconTicket.vue'
+import IconTimer from '@/components/icons/IconTimer.vue'
+import IconTooltip from '@/components/icons/IconTooltip.vue'
+import IconTrafficControl from '@/components/icons/IconTrafficControl.vue'
 
 export const CustomCpIcons = {
-  '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')),
-  'baggage-cabin-none': defineAsyncComponent(() => import('@/components/icons/IconBaggageCabinNone.vue')),
-  'baggage-checked-none': defineAsyncComponent(() => import('@/components/icons/IconBaggageCheckedNone.vue')),
-  'baggage-personal-none': defineAsyncComponent(() => import('@/components/icons/IconBaggagePersonalNone.vue')),
-  broadcast: defineAsyncComponent(() => import('@/components/icons/IconBroadcast.vue')),
-  'calendar-2': defineAsyncComponent(() => import('@/components/icons/IconCalendar.vue')),
-  'calendar-delay': defineAsyncComponent(() => import('@/components/icons/IconCalendarDelay.vue')),
-  'cabin-bag': defineAsyncComponent(() => import('@/components/icons/IconCabinBag.vue')),
-  'check-list': defineAsyncComponent(() => import('@/components/icons/IconCheckList.vue')),
-  'checked-baggage-20': defineAsyncComponent(() => import('@/components/icons/IconCheckedBaggage20.vue')),
-  'checked-baggage-30': defineAsyncComponent(() => import('@/components/icons/IconCheckedBaggage30.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')),
-  'end-date': defineAsyncComponent(() => import('@/components/icons/IconEndDate.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')),
-  'flight-schedule': defineAsyncComponent(() => import('@/components/icons/IconFlightSchedule.vue')),
-  'group-by': defineAsyncComponent(() => import('@/components/icons/IconGroupBy.vue')),
-  'hand-heart': defineAsyncComponent(() => import('@/components/icons/IconHandHeart.vue')),
-  history: defineAsyncComponent(() => import('@/components/icons/IconHistory.vue')),
-  'hour-glass': defineAsyncComponent(() => import('@/components/icons/IconHourGlass.vue')),
-  'id-card': defineAsyncComponent(() => import('@/components/icons/IconIdCard.vue')),
-  infant: defineAsyncComponent(() => import('@/components/icons/IconInfant.vue')),
-  itinerary: defineAsyncComponent(() => import('@/components/icons/IconItinerary.vue')),
-  leave: defineAsyncComponent(() => import('@/components/icons/IconLeave.vue')),
-  male: defineAsyncComponent(() => import('@/components/icons/IconMale.vue')),
-  'multi-segments': defineAsyncComponent(() => import('@/components/icons/IconMultiSegments.vue')),
-  'no-passport': defineAsyncComponent(() => import('@/components/icons/IconNoPassport.vue')),
-  'no-refund': defineAsyncComponent(() => import('@/components/icons/IconNoRefund.vue')),
-  'no-seat': defineAsyncComponent(() => import('@/components/icons/IconNoSeat.vue')),
-  notion: defineAsyncComponent(() => import('@/components/icons/IconNotion.vue')),
-  offline: defineAsyncComponent(() => import('@/components/icons/IconOffline.vue')),
-  'one-way': defineAsyncComponent(() => import('@/components/icons/IconOneWay.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')),
-  plug: defineAsyncComponent(() => import('@/components/icons/IconPlug.vue')),
-  'plug-off': defineAsyncComponent(() => import('@/components/icons/IconPlugOff.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')),
-  'start-date': defineAsyncComponent(() => import('@/components/icons/IconStartDate.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')),
+  'accompanied-minor-each': IconAccompaniedMinorEach,
+  'accompanied-minor-none': IconAccompaniedMinorNone,
+  'accompanied-minor-one': IconAccompaniedMinorOne,
+  'add-receipt': IconAddReceipt,
+  airline: IconAirline,
+  'airport-terminal': IconAirportTerminal,
+  arrival: IconArrival,
+  'baggage-cabin-none': IconBaggageCabinNone,
+  'baggage-checked-none': IconBaggageCheckedNone,
+  'baggage-personal-none': IconBaggagePersonalNone,
+  broadcast: IconBroadcast,
+  'calendar-2': IconCalendar,
+  'calendar-delay': IconCalendarDelay,
+  'cabin-bag': IconCabinBag,
+  'check-list': IconCheckList,
+  'checked-baggage-20': IconCheckedBaggage20,
+  'checked-baggage-30': IconCheckedBaggage30,
+  child: IconChild,
+  collapse: IconCollapse,
+  contact: IconContact,
+  departure: IconDeparture,
+  distribution: IconDistribution,
+  'distribution-closed': IconDistributionClosed,
+  'distribution-exclusive-pair': IconDistributionExclusivePair,
+  'distribution-sided': IconDistributionSided,
+  'distribution-supply-sided': IconDistributionSupplySided,
+  'dynamic-content': IconDynamicContent,
+  'end-date': IconEndDate,
+  expand: IconExpand,
+  fares: IconFares,
+  'fares-outlined': IconFaresOutlined,
+  female: IconFemale,
+  'find-conversation': IconFindConversation,
+  fire: IconFire,
+  flight: IconFlight,
+  'flight-return': IconFlightReturn,
+  'flight-schedule': IconFlightSchedule,
+  'group-by': IconGroupBy,
+  'hand-heart': IconHandHeart,
+  history: IconHistory,
+  'hour-glass': IconHourGlass,
+  'id-card': IconIdCard,
+  infant: IconInfant,
+  itinerary: IconItinerary,
+  leave: IconLeave,
+  male: IconMale,
+  'multi-segments': IconMultiSegments,
+  'no-passport': IconNoPassport,
+  'no-refund': IconNoRefund,
+  'no-seat': IconNoSeat,
+  notion: IconNotion,
+  offline: IconOffline,
+  'one-way': IconOneWay,
+  ota: IconOta,
+  paid: IconPaid,
+  passport: IconPassport,
+  payout: IconPayout,
+  plug: IconPlug,
+  'plug-off': IconPlugOff,
+  receipt: IconReceipt,
+  recurrence: IconRecurrence,
+  refund: IconRefund,
+  'round-trip': IconRoundTrip,
+  'route-no-stop': IconRouteNoStop,
+  'route-one-stop': IconRouteOneStop,
+  'schedule-change': IconScheduleChange,
+  'seat-empty': IconSeatEmpty,
+  'seat-sold': IconSeatSold,
+  'seat-total': IconSeatTotal,
+  'start-date': IconStartDate,
+  supplier: IconSupplier,
+  template: IconTemplate,
+  'third-party': IconThirdParty,
+  ticket: IconTicket,
+  timer: IconTimer,
+  tooltip: IconTooltip,
+  'traffic-control': IconTrafficControl,
 }

package/src/constants/index.ts

@@ -8,3 +8,5 @@ export { PartnerTypes } from './PartnerTypes'
 
 export { CustomCpIcons } from './CpCustomIcons'
 export { Intent } from './Intent'
+
+export const HUMAN_MAX_AGE = 120

package/src/libs/CoreDatepicker.vue

@@ -79,7 +79,7 @@
               >
                 <option
                   v-if="years.indexOf(month.year) === -1"
-                  :key="`month-${monthIndex}-${year}`"
+                  :key="`month-${monthIndex}-${month.year}`"
                   :value="month.year"
                   :disabled="true"
                 >
@@ -246,15 +246,16 @@ export default {
     },
     isTest: {
       type: Boolean,
+      // eslint-disable-next-line vue/no-boolean-default
       default: () => process.env.NODE_ENV === 'test',
     },
   },
   emits: [
-    'date-one-selected',
-    'date-two-selected',
-    'is-inline',
-    'previous-month',
-    'next-month',
+    'dateOneSelected',
+    'dateTwoSelected',
+    'isInline',
+    'previousMonth',
+    'nextMonth',
     'opened',
     'cancelled',
     'closed',
@@ -382,11 +383,11 @@ export default {
   watch: {
     selectedDate1(newValue) {
       const newDate = !newValue || newValue === '' ? '' : newValue
-      this.$emit('date-one-selected', newDate)
+      this.$emit('dateOneSelected', newDate)
     },
     selectedDate2(newValue) {
       const newDate = !newValue || newValue === '' ? '' : newValue
-      this.$emit('date-two-selected', newDate)
+      this.$emit('dateTwoSelected', newDate)
     },
     mode() {
       this.setStartDates()
@@ -408,7 +409,7 @@ export default {
       }
       if (this.isDateTwoBeforeDateOne) {
         this.selectedDate2 = ''
-        this.$emit('date-two-selected', '')
+        this.$emit('dateTwoSelected', '')
       }
     },
     trigger(newValue) {
@@ -442,11 +443,15 @@ export default {
       this.openDatepicker()
     }
 
+    // eslint-disable-next-line vue/no-undef-properties
     this.triggerElement.addEventListener('click', this._handleWindowClickEvent)
   },
   unmounted() {
+    // eslint-disable-next-line vue/no-undef-properties
     window.removeEventListener('resize', this._handleWindowResizeEvent)
+
     window.removeEventListener('click', this._handleWindowClickEvent)
+
     this.triggerElement.removeEventListener('click', this._handleWindowClickEvent)
   },
   methods: {
@@ -456,7 +461,7 @@ export default {
       this._handleWindowResizeEvent = this.debounce(() => {
         if (this.inline) this.openDatepicker()
         else this.closeDatepicker()
-        this.$emit('is-inline', this.inline)
+        this.$emit('isInline', this.inline)
         this.positionDatepicker()
         this.setStartDates()
       }, 200)
@@ -878,7 +883,7 @@ export default {
 
       this.months.unshift(this.getMonth(this.startingDate))
       this.months.splice(this.months.length - 1, 1)
-      this.$emit('previous-month', this.visibleMonths)
+      this.$emit('previousMonth', this.visibleMonths)
       this.resetFocusedDate(false)
     },
     nextMonth() {
@@ -886,7 +891,7 @@ export default {
       this.startingDate = this.addMonths(this.months[this.months.length - 1].firstDateOfMonth)
       this.months.push(this.getMonth(this.startingDate))
       this.months.splice(0, 1)
-      this.$emit('next-month', this.visibleMonths)
+      this.$emit('nextMonth', this.visibleMonths)
       this.resetFocusedDate(true)
     },
     subtractMonths(date) {
@@ -922,7 +927,9 @@ export default {
       this.setStartDates()
       this.triggerElement.classList.add('datepicker-open')
       this.showDatepicker = true
+      // eslint-disable-next-line vue/no-undef-properties
       this.initialDate1 = this.dateOne
+      // eslint-disable-next-line vue/no-undef-properties
       this.initialDate2 = this.dateTwo
       this.$emit('opened')
       this.$nextTick(() => {
@@ -988,6 +995,7 @@ export default {
   },
 }
 </script>
+
 <style lang="scss">
 $tablet: 768px;
 

package/src/stories/CpBadge.stories.ts

@@ -62,6 +62,8 @@ export const Default: Story = {
     size: Sizes.MD,
     isStroked: false,
     isSquare: false,
+    isClearable: false,
+    isDisabled: false,
     leadingIcon: '',
     trailingIcon: '',
     label: 'Badge',
@@ -103,6 +105,11 @@ export const WithSizes: Story = {
   }),
 }
 
+export const WithIcons: Story = {
+  args: { ...Default.args, leadingIcon: 'check', trailingIcon: 'arrow-right', label: 'Both Icons' },
+  render: defaultRender,
+}
+
 export const WithLeadingIcon: Story = {
   args: { ...Default.args, leadingIcon: 'check', label: 'Leading Icon' },
   render: defaultRender,
@@ -138,11 +145,6 @@ export const IsStroked: Story = {
   }),
 }
 
-export const WithIcons: Story = {
-  args: { ...Default.args, leadingIcon: 'check', trailingIcon: 'arrow-right', label: 'Both Icons' },
-  render: defaultRender,
-}
-
 export const IsSquare: Story = {
   args: { ...Default.args, isSquare: true, label: 'Square' },
   render: defaultRender,
@@ -153,6 +155,11 @@ export const IsClearable: Story = {
   render: defaultRender,
 }
 
+export const IsDisabled: Story = {
+  args: { ...Default.args, isDisabled: true, label: 'Disabled' },
+  render: defaultRender,
+}
+
 export const WithSlot: Story = {
   render: (args: Args) => ({
     components: { CpBadge },

package/src/stories/CpDate.stories.ts

@@ -77,7 +77,7 @@ export const Default: Story = {
         <CpDate
           v-model="date"
           v-bind="args"
-          @on-validation="(isValid) => console.log('Validation:', isValid)"
+          @onValidation="(isValid) => console.log('Validation:', isValid)"
         />
       </div>
     `,

package/src/stories/CpMultiselect.stories.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { ref, toValue } from 'vue'
 
 import type { Meta, StoryObj } from '@storybook/vue3'
 
@@ -87,7 +87,7 @@ export const Single: Story = {
       const isLoading = ref(false)
 
       const originalOptions = ref(args.options)
-      const dynamicOptions = ref(originalOptions.value)
+      const dynamicOptions = ref(toValue(originalOptions))
 
       const handleSearch = async (query: string) => {
         isLoading.value = true
@@ -97,7 +97,8 @@ export const Single: Story = {
 
         await new Promise((resolve) => setTimeout(resolve, 500))
 
-        dynamicOptions.value = dynamicOptions.value.filter((option: { name: string }) => {
+        dynamicOptions.value = dynamicOptions.value?.filter((option) => {
+          // @ts-expect-error option is unknown
           return option.name.toLowerCase().includes(searchQuery.value.toLowerCase())
         })
 
@@ -165,7 +166,7 @@ export const Multiple: Story = {
       const isLoading = ref(false)
 
       const originalOptions = ref(args.options)
-      const dynamicOptions = ref(originalOptions.value)
+      const dynamicOptions = ref(toValue(originalOptions))
 
       const handleSearch = async (query: string) => {
         isLoading.value = true
@@ -175,7 +176,8 @@ export const Multiple: Story = {
 
         await new Promise((resolve) => setTimeout(resolve, 500))
 
-        dynamicOptions.value = dynamicOptions.value.filter((option: { name: string }) => {
+        dynamicOptions.value = dynamicOptions.value?.filter((option) => {
+          // @ts-expect-error option is unknown
           return option.name.toLowerCase().includes(searchQuery.value.toLowerCase())
         })