@citizenplane/pimp 18.7.0 → 18.8.1

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/icons/IconDestination.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M16 11.9999C16 9.02546 18.1644 6.55652 21.0042 6.08217C21.5489 5.99118 22 6.44763 22 6.99992C22 7.5522 21.5453 7.98709 21.0101 8.12334C19.2798 8.56386 18 10.1324 18 11.9999C18 13.8674 19.2798 15.436 21.0101 15.8765C21.5453 16.0127 22 16.4476 22 16.9999C22 17.5522 21.5489 18.0087 21.0042 17.9177C18.1644 17.4433 16 14.9744 16 11.9999ZM11.5859 12.9999L9.29297 15.2929C8.90244 15.6834 8.90244 16.3164 9.29297 16.7069C9.68349 17.0975 10.3165 17.0975 10.707 16.7069L14.6967 12.7173C14.8838 12.5356 15 12.2813 15 11.9999C15 11.7185 14.8838 11.4642 14.6967 11.2825L10.707 7.29288C10.3165 6.90236 9.68349 6.90236 9.29297 7.29288C8.90244 7.68341 8.90244 8.31642 9.29297 8.70695L11.5859 10.9999H2C1.44772 10.9999 1 11.4476 1 11.9999C1 12.5522 1.44772 12.9999 2 12.9999H11.5859Z"/>
+  </svg>
+</template>

package/src/components/icons/IconOrigin.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M2 6.99992C2 6.44763 2.45108 5.99118 2.99581 6.08217C5.83559 6.55653 8 9.02546 8 11.9999C8 14.9744 5.83559 17.4433 2.99581 17.9177C2.45107 18.0087 2 17.5522 2 16.9999C2 16.4476 2.45467 16.0127 2.98988 15.8765C4.72024 15.436 6 13.8674 6 11.9999C6 10.1324 4.72024 8.56386 2.98988 8.12334C2.45467 7.98709 2 7.5522 2 6.99992ZM19.5859 13H10C9.44771 13 9 12.5523 9 12C9 11.4478 9.44771 11 10 11H19.5859L17.293 8.70707C16.9024 8.31655 16.9024 7.68353 17.293 7.29301C17.6835 6.90248 18.3165 6.90248 18.707 7.29301L22.707 11.293C23.0976 11.6835 23.0976 12.3165 22.707 12.7071L18.707 16.7071C18.3165 17.0976 17.6835 17.0976 17.293 16.7071C16.9024 16.3165 16.9024 15.6835 17.293 15.293L19.5859 13Z"/>
+  </svg>
+</template>

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/CpCustomIcons.ts

@@ -38,6 +38,7 @@ import IconCorrosive from '@/components/icons/IconCorrosive.vue'
 import IconDashedCircle from '@/components/icons/IconDashedCircle.vue'
 import IconDedicated from '@/components/icons/IconDedicated.vue'
 import IconDeparture from '@/components/icons/IconDeparture.vue'
+import IconDestination from '@/components/icons/IconDestination.vue'
 import IconDeviceForbidden from '@/components/icons/IconDeviceForbidden.vue'
 import IconDirectFlightAlt from '@/components/icons/IconDirectFlightAlt.vue'
 import IconDistribution from '@/components/icons/IconDistribution.vue'
@@ -92,6 +93,7 @@ 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 IconOrigin from '@/components/icons/IconOrigin.vue'
 import IconOta from '@/components/icons/IconOta.vue'
 import IconOtaFilled from '@/components/icons/IconOtaFilled.vue'
 import IconPaid from '@/components/icons/IconPaid.vue'
@@ -173,6 +175,7 @@ export const CustomCpIcons = {
   dedicated: IconDedicated,
   departure: IconDeparture,
   'direct-flight-alt': IconDirectFlightAlt,
+  destination: IconDestination,
   'device-forbidden': IconDeviceForbidden,
   distribution: IconDistribution,
   'distribution-closed': IconDistributionClosed,
@@ -226,6 +229,7 @@ export const CustomCpIcons = {
   notion: IconNotion,
   offline: IconOffline,
   'one-way': IconOneWay,
+  origin: IconOrigin,
   ota: IconOta,
   'ota-filled': IconOtaFilled,
   paid: IconPaid,

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