@citizenplane/pimp 18.7.0 → 18.8.0

package/src/components/CpTrip.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="cpTrip">
+    <div class="cpTrip__content">
+      <div class="cpTrip__routePoint">
+        <time class="cpTrip__time" :datetime="trip.departureDate.raw">{{ trip.departureTime }}</time>
+        <span class="cpTrip__iata">{{ trip.origin.iataCode }}</span>
+      </div>
+      <cp-trip-timeline
+        :airlines="uniqueAirlines"
+        :hide-airlines="hideAirlines"
+        class="cpTrip__timeline"
+        :flight-duration="trip.flightDuration.formatted"
+        :has-self-transfer="trip.hasSelfTransfer"
+        :labels="trip.labels"
+        :stops="trip.stops"
+      />
+      <div class="cpTrip__routePoint">
+        <time class="cpTrip__time" :datetime="trip.arrivalDate.raw">{{ trip.arrivalTime }}</time>
+        <span class="cpTrip__iata">
+          {{ trip.destination.iataCode }}
+          <span v-if="trip.dayCountAfterDeparture" class="cpTrip__plus">+{{ trip.dayCountAfterDeparture }}</span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import CpTripTimeline from '@/components/CpTripTimeline.vue'
+
+type Trip = {
+  airlines: {
+    iataCode: string
+    name: string
+  }[];
+  arrivalDate: {
+    formatted: string
+    raw: string
+  }
+  arrivalTime: string
+  dayCountAfterDeparture?: number
+  departureDate: {
+    formatted: string
+    raw: string
+  }
+  departureTime: string
+  destination: {
+    iataCode: string
+    name: string
+  }
+  flightDuration: {
+    formatted: string
+    raw: string
+  }
+  hasSelfTransfer?: boolean
+  labels?: {
+    layover?: string
+    nonStop?: string
+    stopCount?: string
+    transfer?: string
+  }
+  origin: {
+    iataCode: string
+    name: string
+  }
+  stops?: {
+    duration: string
+    iata: string
+    name: string
+  }[]
+}
+
+interface Props {
+  hideAirlines?: boolean
+  trip: Trip
+}
+
+const props = defineProps<Props>()
+
+const uniqueAirlines = computed(() => {
+  const allAirlinesIataCodes = props.trip.airlines.map((airline) => airline.iataCode)
+  const uniqueAirlineIatas: string[] = Array.from(new Set(allAirlinesIataCodes))
+
+  const allUniqueAirlines = uniqueAirlineIatas.map((uniqueIataCode: string) => {
+    return props.trip.airlines.find((airline) => airline.iataCode === uniqueIataCode)
+  })
+
+  return allUniqueAirlines as {
+    iataCode: string
+    name: string
+  }[]
+})
+</script>
+
+<style lang="scss">
+.cpTrip {
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__title {
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-xs);
+    font-weight: 600;
+    line-height: var(--cp-line-height-xs);
+    padding-block: var(--cp-spacing-sm);
+    text-transform: uppercase;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: var(--cp-spacing-2xl);
+  }
+
+  &__timeline {
+    min-width: 0;
+    flex: 1;
+  }
+
+  &__routePoint {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    &:last-child {
+      align-items: flex-end;
+    }
+  }
+
+  &__plus {
+    position: absolute;
+    top: fn.px-to-rem(-2);
+    right: fn.px-to-rem(-12);
+    color: var(--cp-text-error-primary);
+    font-size: fn.px-to-rem(10);
+    line-height: fn.px-to-rem(14);
+  }
+
+  &__time {
+    font-size: var(--cp-text-size-xl);
+    font-weight: 600;
+    line-height: var(--cp-line-height-xl);
+  }
+
+  &__iata {
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-md);
+    font-weight: 500;
+    line-height: var(--cp-line-height-md);
+  }
+}
+
+@include mx.media-query-max(370px) {
+  .cpTrip {
+    &__content {
+      gap: var(--cp-spacing-md);
+    }
+  }
+}
+
+@include mx.media-query-max(300px) {
+  .cpTrip {
+    &__content {
+      justify-content: center;
+      gap: var(--cp-spacing-sm);
+    }
+
+    &__time {
+      font-size: var(--cp-text-size-lg);
+      line-height: var(--cp-line-height-sm);
+    }
+
+    &__iata {
+      font-size: var(--cp-text-size-sm);
+      line-height: var(--cp-line-height-sm);
+    }
+
+    &__plus {
+      font-size: fn.px-to-rem(8);
+      line-height: fn.px-to-rem(10);
+    }
+  }
+}
+</style>

package/src/components/CpTripTimeline.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="cpTripTimeline">
+    <div class="cpTripTimeline__information">
+      <div class="cpTripTimeline__dotWrapper">
+        <span class="cpTripTimeline__dot" />
+      </div>
+      <cp-badge :size="badgeDynamicSize">
+        {{ flightDuration }}
+      </cp-badge>
+      <cp-tooltip v-if="!hideAirlines" allow-outside-container>
+        <div class="cpTripTimeline__airlines">
+          <div
+            v-for="(airline, index) in firstAirlines"
+            :key="airline.iataCode"
+            class="cpTripTimeline__airlineLogo"
+          >
+            <span v-if="displayRemainingAirlinesCount(index)" class="cpTripTimeline__remaining">+{{ remainingAirlinesCount }}</span>
+            <cp-airline-logo v-else :iata-code="airline.iataCode" :size="logoDynamicSize" />
+          </div>
+        </div>
+        <template #content>
+          <ul class="cpTripTimeline__airlinesList">
+            <li v-for="airline in airlines" :key="airline.iataCode">{{ airline.name }}</li>
+          </ul>
+        </template>
+      </cp-tooltip>
+      <div class="cpTripTimeline__dotWrapper">
+        <span class="cpTripTimeline__dot" />
+      </div>
+    </div>
+    <cp-tooltip class="cpTripTimeline__tooltip" :disabled="!hasStops" allow-outside-container>
+      <p class="cpTripTimeline__summary">
+        <template v-if="hasStops">
+          <span class="cpTripTimeline__stop">{{ stopLabel }}</span>
+          <span v-if="hasSelfTransfer" class="cpTripTimeline__transfer">
+            {{ transferLabel }}
+          </span>
+          <span>{{ formattedStops }}</span>
+        </template>
+        <span v-else>{{ nonStopLabel }}</span>
+      </p>
+      <template #content>
+        <ul class="cpTripTimeline__stops">
+          <li v-for="stop in stops" :key="stop.iata">
+            {{ stop.duration }} {{ layoverLabel }} •
+            <template v-if="stop.selfTransferLabel">
+              {{ stop.selfTransferLabel }}
+            </template>
+            <template v-else> {{ stop.name }} ({{ stop.iata }})</template>
+
+            <hr />
+          </li>
+        </ul>
+      </template>
+    </cp-tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useDynamicSize } from '@/composables/useDynamicSize'
+
+interface Props {
+  airlines: {
+    iataCode: string;
+    name: string;
+  }[];
+  flightDuration: string;
+  hasSelfTransfer?: boolean;
+  hideAirlines?: boolean;
+  labels?: {
+    layover?: string;
+    nonStop?: string;
+    stopCount?: string;
+    transfer?: string;
+  };
+  stops?: {
+    duration: string;
+    iata: string;
+    name: string;
+    selfTransferLabel?: string;
+  }[];
+}
+
+const props = defineProps<Props>()
+
+const stopLabel = computed(() => props.labels?.stopCount)
+const layoverLabel = computed(() => props.labels?.layover)
+const nonStopLabel = computed(() => props.labels?.nonStop)
+const transferLabel = computed(() => props.labels?.transfer)
+
+const badgeDynamicSize = useDynamicSize({ default: 'sm', 300: 'xs' })
+const logoDynamicSize = useDynamicSize({ default: 24, 300: 20 })
+
+const hasStops = computed(() => !!props.stops?.length)
+
+const AIRLINES_LIMIT = 3
+const firstAirlines = computed(() => props.airlines.slice(0, AIRLINES_LIMIT))
+const hasMoreAirlinesThanLimit = computed(() => props.airlines.length > (AIRLINES_LIMIT + 1))
+
+const formattedStops = computed(() => {
+  if (!hasStops.value) return ''
+  return props.stops!.map(({ name }) => name).join(', ')
+})
+
+const remainingAirlinesCount = computed(() => props.airlines.length - firstAirlines.value.length)
+
+const displayRemainingAirlinesCount = (index: number) => {
+  const isLastItem = index === firstAirlines.value.length - 1
+  return hasMoreAirlinesThanLimit.value && isLastItem
+}
+</script>
+
+<style lang="scss">
+.cpTripTimeline {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__information {
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    gap: var(--cp-spacing-md);
+    padding-block: fn.px-to-rem(3);
+
+    &::before,
+    &::after {
+      display: block;
+      width: 100%;
+      min-width: 0;
+      height: fn.px-to-rem(2);
+      flex: 1 1 fn.px-to-rem(32);
+      border-radius: var(--cp-radius-xs);
+      background-color: var(--cp-border-soft);
+      content: "";
+      transform-origin: right;
+      transition: transform 300ms var(--cp-easing-elastic);
+    }
+  }
+
+  &__dotWrapper {
+    display: flex;
+    width: fn.px-to-rem(16);
+    height: fn.px-to-rem(16);
+    align-items: center;
+    justify-content: center;
+
+    &:first-child {
+      order: -1;
+    }
+
+    &:last-child {
+      order: 1;
+    }
+  }
+
+  &__dot {
+    width: fn.px-to-rem(6);
+    height: fn.px-to-rem(6);
+    border-radius: var(--cp-radius-full);
+    background-color: var(--cp-foreground-quaternary);
+  }
+
+  &__airlines {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--cp-spacing-xs);
+
+    > *:not(:first-child) {
+      margin-left: calc(var(--cp-spacing-md) * -1);
+    }
+  }
+
+  &__remaining {
+    display: flex;
+    width: fn.px-to-rem(24);
+    height: fn.px-to-rem(24);
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--cp-radius-sm);
+    background: var(--cp-background-tertiary);
+    font-size: var(--cp-text-size-xs);
+    font-weight: 600;
+    line-height: var(--cp-line-height-xs);
+  }
+
+  &__tooltip {
+    display: inline-flex;
+    width: 100%;
+    justify-content: center;
+    padding-block: var(--cp-spacing-sm);
+  }
+
+  &__summary {
+    @extend %u-text-ellipsis;
+
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-xs);
+    line-height: var(--cp-line-height-xs);
+
+    &:has(.cpTripTimeline__stop) {
+      border-bottom: 1px dashed var(--cp-border-strong);
+      cursor: help;
+    }
+
+    span:not(:first-child)::before {
+      color: var(--cp-text-secondary);
+      content: "•";
+      font-size: var(--cp-text-size-xs);
+      letter-spacing: var(--cp-letter-spacing-xs);
+      line-height: var(--cp-line-height-xs);
+      margin-inline: var(--cp-spacing-xs);
+    }
+  }
+
+  &__transfer {
+    color: var(--cp-text-error-primary);
+    text-transform: capitalize;
+  }
+
+  &__stops {
+    max-width: fn.px-to-rem(300);
+  }
+
+  &__stops li hr {
+    border-radius: var(--cp-radius-md);
+    margin-block: var(--cp-spacing-md);
+  }
+
+  &__stops li:last-child hr {
+    display: none;
+  }
+}
+
+@include mx.media-query-max(370px) {
+  .cpTripTimeline {
+    &__dotWrapper {
+      display: none;
+    }
+  }
+}
+
+@include mx.media-query-max(300px) {
+  .cpTripTimeline {
+    &__information {
+      padding-block: 0;
+
+      &::before,
+      &::after {
+        display: none;
+      }
+    }
+
+    &__remaining {
+      width: fn.px-to-rem(20);
+      height: fn.px-to-rem(20);
+      font-size: fn.px-to-rem(10);
+    }
+
+    &__tooltip {
+      padding-block: var(--cp-spacing-xs);
+    }
+  }
+}
+</style>

package/src/components/index.ts

@@ -8,11 +8,10 @@ import { vTooltip } from 'floating-vue'
 import { vMaska } from 'maska/vue'
 import PrimeVue from 'primevue/config'
 import ToastService from 'primevue/toastservice'
+import type { App, Plugin } from 'vue'
 import { BindOnceDirective } from 'vue-bind-once'
 import VueTelInput from 'vue-tel-input'
 
-import type { App, Plugin } from 'vue'
-
 import ClickOutside from '../directives/ClickOutside'
 import CpCoreDatepicker from '../libs/CoreDatepicker.vue'
 import CpAccordion from './CpAccordion.vue'
@@ -60,6 +59,7 @@ import CpTransitionListItems from './CpTransitionListItems.vue'
 import CpTransitionSize from './CpTransitionSize.vue'
 import CpTransitionSlide from './CpTransitionSlide.vue'
 import CpTransitionTabContent from './CpTransitionTabContent.vue'
+import CpTrip from './CpTrip.vue'
 import IconAirline from './icons/IconAirline.vue'
 import IconCheckList from './icons/IconCheckList.vue'
 import IconCollapse from './icons/IconCollapse.vue'
@@ -126,6 +126,7 @@ const Components = {
   CpTransitionListItems,
   CpTransitionSlide,
   CpTransitionTabContent,
+  CpTrip,
 }
 
 const Pimp: Plugin = {
@@ -149,59 +150,60 @@ const Pimp: Plugin = {
 export {
   CpAccordion,
   CpAccordionGroup,
-  CpToast,
-  CpButtonToggle,
+  CpAirlineLogo,
+  CpAlert,
   CpBadge,
-  CpTabs,
-  CpHeading,
   CpButton,
   CpButtonGroup,
-  CpDialog,
-  CpDate,
+  CpButtonToggle,
+  CpCalendar,
+  CpCheckbox,
   CpContextualMenu,
-  CpMenu,
-  CpMenuItem,
-  CpMenuList,
-  CpItemActions,
   CpCoreDatepicker,
+  CpDate,
   CpDatepicker,
-  CpRadioNew,
-  CpCalendar,
-  CpAlert,
-  CpLoader,
+  CpDialog,
+  CpHeading,
+  CpIcon,
   CpInput,
-  CpText,
-  CpTextarea,
-  CpSelect,
-  CpSelectMenu,
+  CpItemActions,
+  CpLoader,
+  CpMenu,
+  CpMenuItem,
+  CpMenuList,
   CpMultiselect,
-  CpCheckbox,
   CpRadio,
   CpRadioGroup,
+  CpRadioNew,
+  CpSelect,
   CpSelectableButton,
+  CpSelectMenu,
   CpSwitch,
   CpTable,
   CpTableColumnEditor,
-  CpIcon,
+  CpTabs,
   CpTelInput,
+  CpText,
+  CpTextarea,
+  CpToast,
   CpTooltip,
-  CpAirlineLogo,
-  IconAirline,
-  IconOta,
-  IconSupplier,
-  IconThirdParty,
-  IconTooltip,
-  IconGroupBy,
-  IconCollapse,
-  IconExpand,
-  IconCheckList,
+  CpTransitionCounter,
   CpTransitionDialog,
   CpTransitionExpand,
-  CpTransitionSize,
-  CpTransitionCounter,
   CpTransitionListItems,
+  CpTransitionSize,
   CpTransitionSlide,
   CpTransitionTabContent,
+  CpTrip,
+  IconAirline,
+  IconCheckList,
+  IconCollapse,
+  IconExpand,
+  IconGroupBy,
+  IconOta,
+  IconSupplier,
+  IconThirdParty,
+  IconTooltip,
 }
 
 export default Pimp

package/src/composables/useDynamicSize.ts

@@ -0,0 +1,60 @@
+import { useWindowSize } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
+
+import type { Sizes } from '@/constants/layout'
+
+import { Breakpoints } from '@/constants/layout'
+
+type SizeValue = Sizes | number
+
+type BreakpointName = 'mobile' | 'tablet' | 'largeTablet' | 'desktop' | 'large'
+
+const NAMED_BREAKPOINTS: Record<BreakpointName, number> = {
+  mobile: Breakpoints.MOBILE,
+  tablet: Breakpoints.TABLET,
+  largeTablet: Breakpoints.LARGE_TABLET,
+  desktop: Breakpoints.DESKTOP,
+  large: Breakpoints.LARGE,
+}
+
+export type DynamicSizeConfig = {
+  default: SizeValue
+} & Partial<Record<number | BreakpointName, SizeValue>>
+
+const resolveThreshold = (key: string): number => {
+  if (key in NAMED_BREAKPOINTS) {
+    return NAMED_BREAKPOINTS[key as BreakpointName]
+  }
+  return Number(key)
+}
+
+const resolveSize = (width: number, config: DynamicSizeConfig): SizeValue => {
+  const { default: defaultValue, ...breakpoints } = config
+
+  let match: SizeValue | undefined
+  let matchThreshold = -1
+
+  for (const [key, value] of Object.entries(breakpoints)) {
+    const threshold = resolveThreshold(key)
+    if (width <= threshold && threshold > matchThreshold) {
+      match = value
+      matchThreshold = threshold
+    }
+  }
+
+  return match ?? defaultValue
+}
+
+export const useDynamicSize = (config: DynamicSizeConfig) => {
+  if (import.meta.env.SSR) return config.default
+
+  const isMounted = ref(false)
+  onMounted(() => (isMounted.value = true))
+
+  const { width: windowWidth } = useWindowSize()
+
+  return computed(() => {
+    if (!isMounted.value) return config.default
+    return resolveSize(windowWidth.value, config)
+  })
+}

package/src/constants/index.ts

@@ -1,10 +1,10 @@
 export type { Colors } from './colors/Colors'
-export { Position } from './Position'
 export type { ToggleColors } from './colors/ToggleColors'
-export { RESERVED_KEYS, VISIBLE_ROWS_MAX } from './CpTableConfig'
 export type { Sizes } from './Sizes'
 
 export { CustomCpIcons } from './CpCustomIcons'
+export { RESERVED_KEYS, VISIBLE_ROWS_MAX } from './CpTableConfig'
 export { Intent } from './Intent'
+export { Position } from './Position'
 
 export const HUMAN_MAX_AGE = 120

package/src/constants/layout/Breakpoints.ts

@@ -0,0 +1,8 @@
+export enum Breakpoints {
+  SMALL_MOBILE = 370,
+  MOBILE = 552,
+  TABLET = 768,
+  LARGE_TABLET = 968,
+  DESKTOP = 1024,
+  LARGE = 1440,
+}

package/src/constants/layout/Sizes.ts

@@ -0,0 +1 @@
+export type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

package/src/constants/layout/index.ts

@@ -0,0 +1,3 @@
+export type { Sizes } from './Sizes'
+
+export { Breakpoints } from './Breakpoints'

package/src/directives/ClickOutside.ts

@@ -4,7 +4,7 @@ type ClickOutsideBinding = {
 
 export default {
   beforeMount(el: HTMLElement & { clickOutsideEvent?: (e: MouseEvent) => void }, binding: ClickOutsideBinding) {
-    el.clickOutsideEvent = function (event: MouseEvent) {
+    el.clickOutsideEvent = (event: MouseEvent) => {
       if (!(el === event.target || el.contains(event.target as Node))) {
         binding.value(event, el)
       }

package/src/directives/ResizeSelect.ts

@@ -10,6 +10,6 @@ function resizeSelect(el: HTMLSelectElement) {
   option.textContent = el.value
   select.appendChild(option)
   el.parentNode?.appendChild(select)
-  el.style.width = select.offsetWidth + 'px'
+  el.style.width = `${select.offsetWidth}px`
   select.parentNode?.removeChild(select)
 }

package/src/helpers/functions.ts

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/** biome-ignore-all lint/suspicious/noExplicitAny: generic debounce helper */
 // https://decipher.dev/30-seconds-of-typescript/docs/debounce/
 export function debounce<T extends (...args: any[]) => any>(
   fn: T,

package/src/helpers/index.ts

@@ -17,7 +17,7 @@ export const formatDates = ({
     formattedDates = DateTime.fromISO(dateOne).toFormat(format, { locale })
   }
   if (dateTwo) {
-    formattedDates += ' - ' + DateTime.fromISO(dateTwo).toFormat(format, { locale })
+    formattedDates += ` - ${DateTime.fromISO(dateTwo).toFormat(format, { locale })}`
   }
 
   return formattedDates