@citizenplane/pimp 18.10.2 → 18.11.0

package/src/components/CpTabs.vue

@@ -184,17 +184,6 @@ const getUnderlineElement = () => {
   return underlineElement
 }
 
-// NOTE: fix mimatch width between active underline & focus outline of active tab
-const getUnderlineInset = () => {
-  if (props.variant !== 'underline') return 0
-
-  const rootStyle = getComputedStyle(document.documentElement)
-  const rootFontSize = Number.parseFloat(rootStyle.fontSize)
-  const insetRem = Number.parseFloat(rootStyle.getPropertyValue('--cp-dimensions-0_5'))
-
-  return rootFontSize * insetRem
-}
-
 const setUnderlineStyle = () => {
   const activeTabElement = getActiveTabElement()
   const underlineElement = getUnderlineElement()
@@ -202,10 +191,12 @@ const setUnderlineStyle = () => {
 
   if (!activeTabElement || !underlineElement || !containerElement) return
 
-  const inset = getUnderlineInset()
+  const containerRect = containerElement.getBoundingClientRect()
+  const tabRect = activeTabElement.getBoundingClientRect()
+  const left = tabRect.left - containerRect.left + containerElement.scrollLeft
 
-  underlineElement.style.width = `${activeTabElement.offsetWidth - inset * 2}px`
-  underlineElement.style.transform = `translate3d(${activeTabElement.offsetLeft + inset}px, 0, 0)`
+  underlineElement.style.width = `${tabRect.width}px`
+  underlineElement.style.transform = `translate3d(${left}px, 0, 0)`
 }
 
 const scrollToActiveElement = (behavior: ScrollBehavior = 'smooth') => {
@@ -298,7 +289,7 @@ watch(
       opacity 300ms ease;
 
     &:focus-visible {
-      outline-offset: calc(var(--cp-dimensions-0_5) * -1);
+      outline-offset: 0;
     }
 
     &--isLoading {
@@ -349,6 +340,25 @@ watch(
     .cpTabs__tab:focus-visible {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
+      outline: none;
+
+      &::before {
+        position: absolute;
+        border: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
+        border-radius: inherit;
+        border-bottom: none;
+        content: '';
+        inset: 0;
+        pointer-events: none;
+      }
+
+      &.cpTabs__tab--isActive::before {
+        border-bottom: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
+      }
+    }
+
+    .cpTabs__tab--isActive:focus-visible ~ .cpTabs__activeUnderline--isUnderline {
+      opacity: 0;
     }
   }
 

package/src/components/icons/IconPlaneNose.vue

@@ -0,0 +1,39 @@
+<template>
+  <svg fill="none" viewBox="0 0 504 433" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_i_23228_86232)">
+      <path
+        d="M171.634 43.4901C209.521 -14.4961 294.478 -14.497 332.366 43.4891L462.309 242.364C489.513 283.999 504 332.657 504 382.391L504 432.666H0.00012207L0 382.391C5.19025e-05 332.657 14.4874 283.999 41.6914 242.364L171.634 43.4901Z"
+        fill="white"
+      />
+    </g>
+    <path
+      d="M172.053 43.7637C209.743 -13.9203 294.257 -13.9212 331.947 43.7627L461.89 242.638C489.041 284.191 503.5 332.754 503.5 382.392V432.166H0.5V382.392C0.500052 332.754 14.9595 284.191 42.1104 242.638L172.053 43.7637Z"
+      stroke="#E9EAF6"
+    />
+    <defs>
+      <filter
+        id="filter0_i_23228_86232"
+        color-interpolation-filters="sRGB"
+        filterUnits="userSpaceOnUse"
+        height="432.666"
+        width="504"
+        x="0"
+        y="0"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feBlend in="SourceGraphic" in2="BackgroundImageFix" mode="normal" result="shape" />
+        <feColorMatrix
+          in="SourceAlpha"
+          result="hardAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation="20" />
+        <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0.917647 0 0 0 0 0.92549 0 0 0 0 1 0 0 0 1 0" />
+        <feBlend in2="shape" mode="normal" result="effect1_innerShadow_23228_86232" />
+      </filter>
+    </defs>
+  </svg>
+</template>

package/src/components/icons/IconPlaneWing.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg fill="none" preserveAspectRatio="xMaxYMid meet" viewBox="0 0 180 509" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 87.8 L180 0 L180 490.1 L0 508.7 Z" fill="url(#paint0_linear_23056_30266)" />
+    <defs>
+      <linearGradient id="paint0_linear_23056_30266" x1="1" x2="0" y1="0.5" y2="0.5">
+        <stop offset="0.5" stop-color="white" />
+        <stop offset="1" stop-color="white" stop-opacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+</template>

package/src/components/icons/IconSparkle.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg fill="none" height="13" viewBox="0 0 13 13" width="13" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M5.64966 0.826416C5.81077 0.391202 6.42605 0.3912 6.58716 0.826416L7.65063 3.70044C7.80258 4.11068 8.12614 4.43424 8.53638 4.58618L11.4104 5.64966C11.8456 5.81077 11.8456 6.42605 11.4104 6.58716L8.53638 7.65063C8.12614 7.80258 7.80258 8.12614 7.65063 8.53638L6.58716 11.4104C6.42605 11.8456 5.81077 11.8456 5.64966 11.4104L4.58618 8.53638C4.43424 8.12614 4.11068 7.80258 3.70044 7.65063L0.826416 6.58716C0.391202 6.42605 0.3912 5.81077 0.826416 5.64966L3.70044 4.58618C4.05951 4.45319 4.35244 4.18883 4.52173 3.84985L4.58618 3.70044L5.64966 0.826416Z"
+      stroke="#D1D3E6"
+    />
+  </svg>
+</template>

package/src/components/index.ts

@@ -43,6 +43,15 @@ import CpMultiselect from './CpMultiselect.vue'
 import CpRadio from './CpRadio.vue'
 import CpRadioGroup from './CpRadioGroup.vue'
 import CpRadioNew from './CpRadioNew.vue'
+import CpSeatMap from './CpSeatMap.vue'
+import CpSeatMapEmergencyExitDialog from './CpSeatMapEmergencyExitDialog.vue'
+import CpSeatMapGrid from './CpSeatMapGrid.vue'
+import CpSeatMapPlane from './CpSeatMapPlane.vue'
+import CpSeatMapRow from './CpSeatMapRow.vue'
+import CpSeatMapRowFacility from './CpSeatMapRowFacility.vue'
+import CpSeatMapSeat from './CpSeatMapSeat.vue'
+import CpSeatMapSeatWrapper from './CpSeatMapSeatWrapper.vue'
+import CpSeatMapZone from './CpSeatMapZone.vue'
 import CpSelect from './CpSelect.vue'
 import CpSelectableButton from './CpSelectableButton.vue'
 import CpSelectMenu from './CpSelectMenu.vue'
@@ -132,6 +141,15 @@ const Components = {
   CpTransitionSlide,
   CpTransitionTabContent,
   CpTrip,
+  CpSeatMap,
+  CpSeatMapEmergencyExitDialog,
+  CpSeatMapGrid,
+  CpSeatMapPlane,
+  CpSeatMapRow,
+  CpSeatMapRowFacility,
+  CpSeatMapSeat,
+  CpSeatMapSeatWrapper,
+  CpSeatMapZone,
 }
 
 const Pimp: Plugin = {
@@ -152,6 +170,30 @@ const Pimp: Plugin = {
   },
 }
 
+export type {
+  CpSeatMapConfig,
+  CpSeatMapSeatSelection,
+  Seat,
+  SeatAncillary,
+  SeatCharacteristic,
+  SeatMap,
+  SeatMapZone,
+  SeatRow,
+  SeatRowFacilityFlags,
+} from '@/constants/seatMap'
+export type { CpSeatMapSeatSelection as CpSeatMapSelection } from '@/constants/seatMap/CpSeatMapSeatSelection'
+
+export {
+  CpSeatMapTransitionDirections,
+  DEFAULT_CP_SEAT_MAP_CONFIG,
+  IataTravelerTypes,
+  SeatCharacteristicCodes,
+  SeatRowFacilities,
+  SeatRowFacilityPosition,
+  SeatStatuses,
+} from '@/constants/seatMap'
+// Consumers key `selections` with this, so it has to be the very same helper.
+export { displaySeat } from '@/helpers/seatMap'
 export {
   CpAccordion,
   CpAccordionGroup,
@@ -182,6 +224,15 @@ export {
   CpRadio,
   CpRadioGroup,
   CpRadioNew,
+  CpSeatMap,
+  CpSeatMapEmergencyExitDialog,
+  CpSeatMapGrid,
+  CpSeatMapPlane,
+  CpSeatMapRow,
+  CpSeatMapRowFacility,
+  CpSeatMapSeat,
+  CpSeatMapSeatWrapper,
+  CpSeatMapZone,
   CpSelect,
   CpSelectableButton,
   CpSelectMenu,

package/src/constants/seatMap/CpSeatMapConfig.ts

@@ -0,0 +1,47 @@
+import { SeatStatuses } from './SeatStatuses'
+
+export interface CpSeatMapConfig {
+  emergencyExit: {
+    close: string
+    confirm: string
+    disclaimerContent: string
+    disclaimerTitle: string
+    subtitle: string
+    title: string
+  }
+  facility: {
+    galley: string
+    lavatory: string
+  }
+  seatStatuses: Record<SeatStatuses, string> & {
+    selected: string
+    selectedForLinkedTraveler: string
+    selectTravelerFirst: string
+  }
+}
+
+export const DEFAULT_CP_SEAT_MAP_CONFIG: CpSeatMapConfig = {
+  seatStatuses: {
+    [SeatStatuses.FREE]: 'Available',
+    [SeatStatuses.OCCUPIED]: 'Occupied',
+    [SeatStatuses.OCCUPIED_BY_CURRENT_PAX]: 'Selected',
+    [SeatStatuses.BLOCKED]: 'Unavailable',
+    [SeatStatuses.PAYABLE]: 'Extra fee',
+    selected: 'Selected',
+    selectedForLinkedTraveler: 'Selected for this traveler and their linked traveler',
+    selectTravelerFirst: 'Select a traveler first',
+  },
+  facility: {
+    galley: 'Galley',
+    lavatory: 'Lavatory',
+  },
+  emergencyExit: {
+    close: 'Close',
+    confirm: 'Confirm',
+    disclaimerContent:
+      'You must be able to assist the crew in an evacuation. Passengers who cannot are not allowed in these rows.',
+    disclaimerTitle: 'Emergency exit row requirements',
+    subtitle: 'This seat is located in an emergency exit row.',
+    title: 'Emergency exit row',
+  },
+}

package/src/constants/seatMap/CpSeatMapSeatSelection.ts

@@ -0,0 +1,12 @@
+import type { IataTravelerTypes } from './IataTravelerTypes'
+
+/**
+ * What the consumer knows about a seat it has assigned. Pimp holds no selection
+ * state of its own — it only renders what it is handed.
+ */
+export interface CpSeatMapSeatSelection {
+  hasLinkedTraveler?: boolean
+  initials: string
+  /** Drives the linked-traveler badge icon; without it the badge falls back to infant. */
+  linkedTravelerType?: IataTravelerTypes
+}

package/src/constants/seatMap/CpSeatMapTransitionDirections.ts

@@ -0,0 +1,4 @@
+export enum CpSeatMapTransitionDirections {
+  BACKWARD = 'backward',
+  FORWARD = 'forward',
+}

package/src/constants/seatMap/IataTravelerTypes.ts

@@ -0,0 +1,6 @@
+export enum IataTravelerTypes {
+  ADULT = 'ad',
+  CHILD = 'ch',
+  INFANT = 'inf',
+  UNACCOMPANIED_MINOR = 'um',
+}

package/src/constants/seatMap/Seat.ts

@@ -0,0 +1,18 @@
+import type { SeatAncillary } from './SeatAncillary'
+import type { SeatCharacteristic } from './SeatCharacteristic'
+import type { SeatStatuses } from './SeatStatuses'
+
+export interface Seat {
+  blocking_code?: string
+  characteristics: SeatCharacteristic[]
+  column: string
+  eligible_ancillaries: SeatAncillary[]
+  has_specific_message: boolean
+  id: number
+  is_exit_row: boolean
+  occupied_traveler_id: number
+  selected_ancillary?: SeatAncillary
+  status: SeatStatuses
+  traveler_eligibility?: Record<string, boolean>
+  type: string
+}

package/src/constants/seatMap/SeatAncillary.ts

@@ -0,0 +1,8 @@
+export interface SeatAncillary {
+  amount: number
+  color: string
+  data_id: number
+  eligible_traveler_ids: number[]
+  formatted_amount: string
+  label: string
+}

package/src/constants/seatMap/SeatCharacteristic.ts

@@ -0,0 +1,7 @@
+import type { SeatCharacteristicCodes } from './SeatCharacteristicCodes'
+
+export interface SeatCharacteristic {
+  code: SeatCharacteristicCodes
+  data_id: number
+  label: string
+}

package/src/constants/seatMap/SeatCharacteristicCodes.ts

@@ -0,0 +1,9 @@
+export enum SeatCharacteristicCodes {
+  WINDOW = 'W',
+  AISLE = 'A',
+  BULKHEAD = 'K',
+  EMERGENCY_EXIT = 'E',
+  NO_SMOKING = 'N',
+  CENTER = '9',
+  CHARGEABLE = 'CH',
+}

package/src/constants/seatMap/SeatMap.ts

@@ -0,0 +1,10 @@
+import type { SeatMapZone } from './SeatMapZone'
+import type { SeatRow } from './SeatRow'
+
+export interface SeatMap {
+  aircraft: string
+  exit_row_warning_child_max_age?: number
+  ref_id_segment: string
+  rows: SeatRow[]
+  zones: Record<string, SeatMapZone>
+}

package/src/constants/seatMap/SeatMapZone.ts

@@ -0,0 +1,5 @@
+export interface SeatMapZone {
+  layout: (string | null)[]
+  prbds: string[]
+  title: string
+}

package/src/constants/seatMap/SeatRow.ts

@@ -0,0 +1,15 @@
+import type { Seat } from './Seat'
+import type { SeatRowFacilityFlags } from './SeatRowFacilityFlags'
+
+export interface SeatRow {
+  bottom?: SeatRowFacilityFlags
+  has_exit_back: boolean
+  has_exit_front: boolean
+  has_exit_left: boolean
+  has_exit_right: boolean
+  is_exit: boolean
+  number: number
+  seats: Record<string, Seat>
+  top?: SeatRowFacilityFlags
+  zone: string
+}

package/src/constants/seatMap/SeatRowFacilities.ts

@@ -0,0 +1,10 @@
+export enum SeatRowFacilities {
+  LAVATORY = 'lavatory',
+  GALLEY = 'galley',
+  CURTAIN = 'curtain',
+}
+
+export enum SeatRowFacilityPosition {
+  LEFT = 'left',
+  RIGHT = 'right',
+}

package/src/constants/seatMap/SeatRowFacilityFlags.ts

@@ -0,0 +1,7 @@
+export interface SeatRowFacilityFlags {
+  curtain?: boolean
+  galley_left?: boolean
+  galley_right?: boolean
+  lavatory_left?: boolean
+  lavatory_right?: boolean
+}

package/src/constants/seatMap/SeatStatuses.ts

@@ -0,0 +1,7 @@
+export enum SeatStatuses {
+  FREE = 'free',
+  OCCUPIED = 'occupied',
+  OCCUPIED_BY_CURRENT_PAX = 'occupiedByCurrentPax',
+  BLOCKED = 'blocked',
+  PAYABLE = 'payable',
+}

package/src/constants/seatMap/index.ts

@@ -0,0 +1,16 @@
+export type { CpSeatMapConfig } from './CpSeatMapConfig'
+export type { CpSeatMapSeatSelection } from './CpSeatMapSeatSelection'
+export type { Seat } from './Seat'
+export type { SeatAncillary } from './SeatAncillary'
+export type { SeatCharacteristic } from './SeatCharacteristic'
+export type { SeatMap } from './SeatMap'
+export type { SeatMapZone } from './SeatMapZone'
+export type { SeatRow } from './SeatRow'
+export type { SeatRowFacilityFlags } from './SeatRowFacilityFlags'
+
+export { DEFAULT_CP_SEAT_MAP_CONFIG } from './CpSeatMapConfig'
+export { CpSeatMapTransitionDirections } from './CpSeatMapTransitionDirections'
+export { IataTravelerTypes } from './IataTravelerTypes'
+export { SeatCharacteristicCodes } from './SeatCharacteristicCodes'
+export { SeatRowFacilities, SeatRowFacilityPosition } from './SeatRowFacilities'
+export { SeatStatuses } from './SeatStatuses'

package/src/helpers/seatMap.ts

@@ -0,0 +1,76 @@
+import type { SeatMap } from '@/constants/seatMap/SeatMap'
+import type { SeatRow } from '@/constants/seatMap/SeatRow'
+
+import { IataTravelerTypes } from '@/constants/seatMap/IataTravelerTypes'
+
+export type SeatMapLayout = (string | null)[]
+
+export interface FormattedSeatMapZone {
+  id: string
+  layout: SeatMapLayout
+  title: string
+}
+
+/** A zone wider than this many columns switches the map to its compact treatment. */
+const LARGE_PLANE_COLUMNS = 6
+
+export const displaySeat = (seat: { column: string; row: number }) => `${seat.row}${seat.column}`
+
+export const getSeatMapZones = (seatMap: SeatMap): FormattedSeatMapZone[] => {
+  return Object.keys(seatMap.zones).map((zoneId) => {
+    const zone = seatMap.zones[zoneId]
+
+    return {
+      id: zoneId,
+      title: zone?.title || '',
+      layout: zone?.layout || [],
+    }
+  })
+}
+
+export const getZoneRows = (seatMap: SeatMap, zoneId: string): SeatRow[] => {
+  return seatMap.rows.filter((row) => row.zone === zoneId).sort((a, b) => a.number - b.number)
+}
+
+export const isLargeSeatMap = (zones: FormattedSeatMapZone[]) => {
+  return zones.some((zone) => zone.layout.length > LARGE_PLANE_COLUMNS)
+}
+
+/** A `null` column is an aisle; it gets a named grid area so row numbers can sit in it. */
+export const getGridTemplateAreas = (layout: SeatMapLayout) => {
+  let hallwayIndex = 0
+
+  return layout
+    .map((column) => {
+      if (column === null) {
+        hallwayIndex++
+        return `HALLWAY-${hallwayIndex}`
+      }
+
+      return column
+    })
+    .join(' ')
+}
+
+export const getGridTemplateColumns = (layout: SeatMapLayout) => {
+  return layout.map((column) => (column === null ? 'var(--hallway-width)' : 'var(--seat-width)')).join(' ')
+}
+
+/** Number of columns before the first aisle, used to span row facilities. */
+export const getSeatBlockSize = (layout: SeatMapLayout) => {
+  const firstNullIndex = layout.indexOf(null)
+  return firstNullIndex > 0 ? firstNullIndex + 1 : layout.length
+}
+
+export const hasHallway = (layout: SeatMapLayout) => layout.includes(null)
+
+export const getHallways = (layout: SeatMapLayout) => {
+  return layout.filter((column) => column === null).map((column, index) => ({ column, index: index + 1 }))
+}
+
+export const getTravelerIcon = (passengerType?: IataTravelerTypes) => {
+  if (!passengerType || passengerType === IataTravelerTypes.ADULT) return ''
+  if ([IataTravelerTypes.CHILD, IataTravelerTypes.UNACCOMPANIED_MINOR].includes(passengerType)) return 'child'
+
+  return 'infant'
+}