@citizenplane/pimp 8.25.5 → 8.26.0

package/src/components/selects/CpMultiselect.vue

@@ -0,0 +1,426 @@
+<template>
+  <div class="cpMultiselect">
+    <base-input-label v-if="label" :required="required" class="cpMultiselect__label">
+      {{ label }}
+    </base-input-label>
+
+    <AutoComplete
+      ref="multiselect"
+      v-model="selectModel"
+      :suggestions="options"
+      :option-label="optionLabel"
+      :name="name"
+      force-selection
+      :data-key="trackBy"
+      :multiple="multiple"
+      input-class="cpMultiselect__input"
+      :invalid="isInvalid"
+      auto-option-focus
+      :placeholder="placeholder"
+      :disabled="disabled"
+      option-disabled="disabled"
+      :pt="passThroughConfig"
+      @update:model-value="handleUpdateModelValue"
+      @complete="handleSearch"
+      @keydown.esc.stop
+    >
+      <template #empty>
+        <slot name="empty">
+          <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()">
+            <template #leading-icon>
+              <slot name="selected-option-leading-icon" :option="value" />
+            </template>
+            {{ value.name }}
+          </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>
+
+    <transition-expand>
+      <p v-if="isInvalid" class="cpMultiselect__error">
+        {{ errorMessage }}
+      </p>
+    </transition-expand>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import AutoComplete from 'primevue/autocomplete'
+
+import { absolutePosition, getOuterWidth } from '@primeuix/utils/dom'
+
+import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
+import TransitionExpand from '@/components/helpers-utilities/TransitionExpand.vue'
+import BaseSelectClearButton from '@/components/core/BaseSelectClearButton.vue'
+
+import { isEmpty } from '@/helpers/object'
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  required: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  name: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  isInvalid: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  isClearable: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  isLoading: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  multiple: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  options: {
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+  optionLabel: {
+    type: String,
+    required: false,
+    default: 'name',
+  },
+  trackBy: {
+    type: String,
+    required: false,
+    default: 'id',
+  },
+  emptyMessage: {
+    type: String,
+    required: false,
+    default: 'No results found',
+  },
+  errorMessage: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  modelValue: {
+    type: [Array, Object],
+    required: false,
+  },
+})
+
+const emit = defineEmits(['search', 'select', 'clear'])
+
+const selectModel = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    if (typeof value === 'string') {
+      return
+    }
+
+    emit('update:modelValue', value)
+  },
+})
+
+const passThroughConfig = {
+  root: { class: 'cpMultiselect__select' },
+  inputmultiple: { class: 'cpMultiselect__tags' },
+  dropdown: { class: 'cpMultiselect__toggle' },
+  inputchip: { class: 'cpMultiselect__inputWrapper' },
+  overlay: { class: 'cpMultiselect__overlay' },
+  listcontainer: { class: 'cpMultiselect__listWrapper' },
+  list: { class: 'cpMultiselect__list' },
+  option: { class: 'cpMultiselect__option' },
+  loader: { class: 'cpMultiselect__hidden' },
+}
+
+const multiselect = ref(null)
+
+const isDropdownOpen = computed(() => multiselect.value?.overlayVisible)
+
+const chevronDynamicClass = computed(() => {
+  return {
+    'cpMultiselect__dropdownIcon--isRotated': isDropdownOpen.value,
+  }
+})
+
+const displayPrefix = computed(() => {
+  if (!props.multiple) return true
+  return !selectModel.value?.length
+})
+
+const displayClearButton = computed(() => {
+  if (props.multiple) return false
+  return props.isClearable && !isEmpty(selectModel.value)
+})
+
+const handleSearch = (event) => emit('search', event.query)
+const handleClear = () => (selectModel.value = null)
+
+const toggleDropdown = () => {
+  if (isDropdownOpen.value) {
+    multiselect.value.hide()
+  } else {
+    multiselect.value.show()
+  }
+}
+
+const handleUpdateModelValue = (value) => {
+  // Autocomplete will set the model value to the query string if not blocked
+  if (!value || typeof value === 'string') {
+    return
+  }
+}
+
+const overrideAlignOverlay = () => (multiselect.value.alignOverlay = alignOverlay)
+
+const alignOverlay = () => {
+  const target = multiselect.value.$el
+  if (!multiselect.value.overlay || !target) return
+
+  multiselect.value.overlay.style.width = `${getOuterWidth(target)}px`
+
+  absolutePosition(multiselect.value.overlay, target)
+}
+
+onMounted(() => overrideAlignOverlay())
+</script>
+
+<style lang="scss">
+.cpMultiselect {
+  display: flex;
+  flex-direction: column;
+  gap: sp.$space;
+
+  &__label {
+    margin-bottom: 0;
+  }
+
+  &__prefix {
+    order: -1;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__select {
+    display: flex;
+    min-height: fn.px-to-rem(46);
+    align-items: center;
+    justify-content: space-between;
+    padding: fn.px-to-rem(8);
+    border: 1px solid colors.$border-color;
+    border-radius: fn.px-to-rem(10);
+    gap: sp.$space;
+
+    &:has(input:focus-visible) {
+      box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$primary-color, $lightness: 70%);
+    }
+
+    &:has(input:disabled) {
+      background-color: colors.$neutral-light-1;
+      cursor: not-allowed;
+    }
+
+    &:has([data-p='invalid']) {
+      border-color: colors.$error-color;
+
+      &:has(input:focus-visible) {
+        box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$error-color, $lightness: 70%);
+      }
+    }
+  }
+
+  &__tags {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    gap: sp.$space;
+  }
+
+  &__toggle {
+    @extend %u-focus-outline;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &__inputWrapper {
+    display: flex;
+    flex: 1;
+    align-items: center;
+  }
+
+  &__input {
+    padding: 0;
+    flex: 1;
+    font-size: fn.px-to-rem(14);
+    line-height: fn.px-to-rem(24);
+    background-color: transparent;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &__input {
+    padding: 0;
+    flex: 1;
+    font-size: fn.px-to-rem(14);
+    line-height: fn.px-to-rem(24);
+  }
+
+  &__dropdownIcon {
+    @include mx.square-sizing(16);
+
+    transition: rotate 200ms ease;
+
+    &--isRotated {
+      rotate: 180deg;
+    }
+  }
+
+  &__loader {
+    @include mx.square-sizing(16);
+  }
+
+  &__overlay {
+    left: 0;
+    overflow: hidden;
+    background: colors.$neutral-light;
+    border-radius: fn.px-to-rem(8);
+    margin-block: sp.$space;
+    box-shadow:
+      0 2px 4px 0 rgba(18, 18, 23, 0.04),
+      0 5px 8px 0 rgba(18, 18, 23, 0.04),
+      0 10px 18px 0 rgba(18, 18, 23, 0.03),
+      0 24px 48px 0 rgba(18, 18, 23, 0.03),
+      0 0 0 1px rgba(18, 18, 23, 0.1);
+  }
+
+  &__listWrapper {
+    overflow-y: auto;
+  }
+
+  &__hidden {
+    display: none;
+  }
+
+  &__list {
+    padding: sp.$space-sm;
+  }
+
+  &__option {
+    display: flex;
+    align-items: center;
+    padding: fn.px-to-rem(10);
+    border-radius: fn.px-to-rem(6);
+    gap: sp.$space-sm;
+    font-size: fn.px-to-rem(14);
+    line-height: fn.px-to-rem(18);
+
+    &:hover,
+    &[data-p-focused='true'],
+    &[data-p-selected='true'] {
+      background: colors.$neutral-dark-5;
+      color: colors.$neutral-dark;
+    }
+
+    &[data-p-selected='true'] {
+      border: 1px dashed colors.$border-color;
+    }
+
+    &[data-p-disabled='true'] {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  &__empty {
+    padding: sp.$space;
+    font-size: fn.px-to-rem(14);
+    color: colors.$neutral-dark-1;
+  }
+
+  &__error {
+    color: colors.$error-color;
+    font-size: fn.px-to-rem(14);
+    font-weight: 500;
+    line-height: fn.px-to-rem(24);
+  }
+
+  @include mx.media-query-pointer-device-only {
+    &__clear {
+      display: none;
+    }
+  }
+}
+
+@include mx.media-query-pointer-device-only {
+  .cpMultiselect:has(.cpMultiselect__clear):is(:hover, :focus-within) {
+    .cpMultiselect__clear {
+      display: flex;
+    }
+
+    .cpMultiselect__toggle {
+      display: none;
+    }
+  }
+}
+</style>

package/src/constants/src/CpCustomIcons.ts

@@ -63,7 +63,6 @@ export default {
   'seat-empty': defineAsyncComponent(() => import('@/components/icons/IconSeatEmpty.vue')),
   'seat-sold': defineAsyncComponent(() => import('@/components/icons/IconSeatSold.vue')),
   'seat-total': defineAsyncComponent(() => import('@/components/icons/IconSeatTotal.vue')),
-  'semi-moon': defineAsyncComponent(() => import('@/components/icons/IconSemiMoon.vue')),
   supplier: defineAsyncComponent(() => import('@/components/icons/IconSupplier.vue')),
   template: defineAsyncComponent(() => import('@/components/icons/IconTemplate.vue')),
   'third-party': defineAsyncComponent(() => import('@/components/icons/IconThirdParty.vue')),
@@ -71,5 +70,4 @@ export default {
   timer: defineAsyncComponent(() => import('@/components/icons/IconTimer.vue')),
   tooltip: defineAsyncComponent(() => import('@/components/icons/IconTooltip.vue')),
   'traffic-control': defineAsyncComponent(() => import('@/components/icons/IconTrafficControl.vue')),
-  'with-passport': defineAsyncComponent(() => import('@/components/icons/IconWithPassport.vue')),
 }

package/src/stories/CpMultiselect.stories.ts

@@ -0,0 +1,237 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+
+import CpMultiselect from '@/components/selects/CpMultiselect.vue'
+
+const meta = {
+  title: 'CpMultiSelect',
+  component: CpMultiselect,
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label of the select',
+    },
+    required: {
+      control: 'boolean',
+      description: 'Whether the select is required',
+    },
+    name: {
+      control: 'text',
+      description: 'Name of the select',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder of the select',
+    },
+    isInvalid: {
+      control: 'boolean',
+      description: 'Whether the select is invalid',
+    },
+    multiple: {
+      control: 'boolean',
+      description: 'Whether the select should be multiple',
+    },
+    options: {
+      control: 'object',
+      description: 'Options of the select',
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Error message of the select',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the select is disabled',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Whether the select is loading',
+    },
+    emptyMessage: {
+      control: 'text',
+      description: 'Message displayed when no options are found',
+    },
+    trackBy: {
+      control: 'text',
+      description: 'Property to track the selected option',
+    },
+  },
+} satisfies Meta<typeof CpMultiselect>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Single: Story = {
+  args: {
+    placeholder: 'Select a supplier',
+    multiple: false,
+    options: [
+      { id: 1, name: 'MGA AIRLINES' },
+      { id: 2, name: 'ZENITH - EUROATLANTIC AIRWAYS' },
+      { id: 3, name: 'ZENITH - SOUTHERN AIRWAYS EXPRESS MOKULELE AIRLINES AND SURF AIR MOBILITY' },
+      { id: 4, name: 'EDO TUNISAIR ITALY' },
+      { id: 5, name: 'LMX SUISSE SA' },
+      { id: 6, name: 'LMX VOYAGES SAS' },
+      { id: 7, name: 'FLY KHIVA TRAVEL' },
+      { id: 8, name: 'ZENITH - AIR CHATHAMS' },
+      { id: 9, name: 'CP EMPLOYEES' },
+      { id: 10, name: 'MONDIAL TOURISME' },
+      { id: 11, name: 'UNITRAVEL UTAZÁSI IRODA' },
+    ],
+  },
+  render: (args) => ({
+    components: { CpMultiselect },
+    setup() {
+      const searchQuery = ref('')
+      const isLoading = ref(false)
+
+      const originalOptions = ref(args.options)
+      const dynamicOptions = ref(originalOptions.value)
+
+      const handleSearch = async (query: string) => {
+        isLoading.value = true
+        searchQuery.value = query
+
+        dynamicOptions.value = originalOptions.value
+
+        await new Promise((resolve) => setTimeout(resolve, 500))
+
+        dynamicOptions.value = dynamicOptions.value.filter((option: { name: string }) => {
+          return option.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+        })
+
+        isLoading.value = false
+      }
+
+      const selectedSupplier = ref(null)
+      return { args, selectedSupplier, dynamicOptions, handleSearch, isLoading }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpMultiselect v-model="selectedSupplier" v-bind="args" :options="dynamicOptions" :is-loading="isLoading" @search="handleSearch">
+          <template #prefix>
+            <cp-partner-badge type="supplier" size="xs" />
+          </template>
+          <template #option="{ option }">
+            <div style="display: flex; align-items: center; gap: 8px;">
+              <cp-partner-badge type="supplier" size="xs" />
+              {{ option.name }}
+            </div>
+          </template>
+        </CpMultiselect>
+      </div>
+    `,
+  }),
+}
+
+export const Multiple: Story = {
+  args: {
+    required: false,
+    name: 'select',
+    placeholder: 'All airlines',
+    isInvalid: false,
+    disabled: false,
+    multiple: true,
+    emptyMessage: 'No airlines found',
+    options: [
+      { id: 1, name: 'United Airlines', iata_code: 'UA' },
+      { id: 2, name: 'Delta Airlines', iata_code: 'DL' },
+      { id: 3, name: 'American Airlines', iata_code: 'AA' },
+      { id: 4, name: 'Southwest Airlines', iata_code: 'WN' },
+      { id: 5, name: 'Alaska Airlines', iata_code: 'AS' },
+      { id: 6, name: 'JetBlue Airways', iata_code: 'B6' },
+      { id: 7, name: 'Spirit Airlines', iata_code: 'NK' },
+      { id: 8, name: 'Frontier Airlines', iata_code: 'F9' },
+      { id: 9, name: 'Hawaiian Airlines', iata_code: 'HA' },
+      { id: 10, name: 'SkyWest Airlines', iata_code: 'OO' },
+      { id: 11, name: 'Allegiant Air', iata_code: 'G4' },
+      { id: 12, name: 'Atlantic Southeast Airlines', iata_code: 'EV' },
+      { id: 13, name: 'American Eagle Airlines', iata_code: 'MQ' },
+      { id: 14, name: 'Alaska Airlines', iata_code: 'AS' },
+      { id: 15, name: 'Air France', iata_code: 'AF', disabled: true },
+      { id: 16, name: 'Air Canada', iata_code: 'AC' },
+      { id: 17, name: 'Air New Zealand', iata_code: 'NZ' },
+      { id: 18, name: 'Air China', iata_code: 'CA' },
+      { id: 19, name: 'Air India', iata_code: 'AI' },
+      { id: 20, name: 'Air Berlin', iata_code: 'AB' },
+      { id: 21, name: 'AirAsia', iata_code: 'AK' },
+    ],
+  },
+  render: (args) => ({
+    components: { CpMultiselect },
+    setup() {
+      const searchQuery = ref('')
+      const isLoading = ref(false)
+
+      const originalOptions = ref(args.options)
+      const dynamicOptions = ref(originalOptions.value)
+
+      const handleSearch = async (query: string) => {
+        isLoading.value = true
+        searchQuery.value = query
+
+        if (!searchQuery.value) return (dynamicOptions.value = originalOptions.value)
+
+        await new Promise((resolve) => setTimeout(resolve, 500))
+
+        dynamicOptions.value = dynamicOptions.value.filter((option: { name: string }) => {
+          return option.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+        })
+
+        isLoading.value = false
+      }
+
+      const selectedAirlines = ref([])
+      return { args, selectedAirlines, dynamicOptions, handleSearch, isLoading }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpMultiselect v-model="selectedAirlines" v-bind="args" :options="dynamicOptions" :is-loading="isLoading" @search="handleSearch">
+          <template #prefix>
+            <cp-partner-badge type="airline" size="xs" />
+          </template>
+          <template #selected-option-leading-icon="{ option }">
+            <cp-airline-logo :iata-code="option.iata_code" size="14" />
+          </template>
+          <template #option="{ option }">
+            <div style="display: flex; align-items: center; gap: 8px;">
+              <cp-airline-logo :iata-code="option.iata_code" size="14" />
+              {{ option.name }}
+            </div>
+          </template>
+        </CpMultiselect>
+      </div>
+    `,
+  }),
+}
+
+export const Invalid: Story = {
+  args: {
+    placeholder: 'Select a supplier',
+    disabled: false,
+    isInvalid: true,
+    options: [],
+  },
+  render: (args) => ({
+    components: { CpMultiselect },
+    setup() {
+      const selectedSupplier = ref(null)
+      return { args, selectedSupplier }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpMultiselect v-model="selectedSupplier" v-bind="args">
+          <template #prefix>
+            <cp-partner-badge type="supplier" size="xs" />
+          </template>
+          <template #option="{ option }">
+            <div style="display: flex; align-items: center; gap: 8px;">
+              <cp-partner-badge type="supplier" size="xs" />
+              {{ option.name }}
+            </div>
+          </template>
+        </CpMultiselect>
+      </div>
+    `,
+  }),
+}

package/dist/IconPassport-tXkO0SCe.js

@@ -1,22 +0,0 @@
-import { createElementBlock as t, openBlock as o, createElementVNode as C } from "vue";
-import { _ as r } from "./index-BHKeoZcE.js";
-const l = {}, n = {
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
-  fill: "currentColor",
-  xmlns: "http://www.w3.org/2000/svg",
-  "fill-rule": "evenodd",
-  "clip-rule": "evenodd"
-};
-function s(c, e) {
-  return o(), t("svg", n, e[0] || (e[0] = [
-    C("path", { d: "M3.45483 3.88318C3.45483 2.22632 4.79798 0.883179 6.45483 0.883179H17.545C19.2018 0.883179 20.545 2.22632 20.545 3.88318V20.1169C20.545 21.7737 19.2018 23.1169 17.545 23.1169H6.45483C4.79798 23.1169 3.45483 21.7737 3.45483 20.1169V3.88318ZM6.45483 2.88318C5.90255 2.88318 5.45483 3.33089 5.45483 3.88318V20.1169C5.45483 20.6691 5.90255 21.1169 6.45483 21.1169H17.545C18.0973 21.1169 18.545 20.6691 18.545 20.1169V3.88318C18.545 3.33089 18.0973 2.88318 17.545 2.88318H6.45483Z" }, null, -1),
-    C("path", { d: "M7.57593 18.2964C7.57593 17.7441 8.02364 17.2964 8.57593 17.2964H15.4242C15.9765 17.2964 16.4242 17.7441 16.4242 18.2964C16.4242 18.8487 15.9765 19.2964 15.4242 19.2964H8.57593C8.02364 19.2964 7.57593 18.8487 7.57593 18.2964Z" }, null, -1),
-    C("path", { d: "M11.9999 14.5239C14.8415 14.5239 17.1452 12.221 17.1466 9.37975L17.1466 9.37732C17.1466 6.53491 14.8423 4.23059 11.9999 4.23059C9.1575 4.23059 6.85327 6.53482 6.85327 9.37724C6.85327 12.2196 9.1575 14.5239 11.9999 14.5239ZM10.2876 6.15677C9.34877 6.657 8.65444 7.55578 8.43046 8.62732H9.54302C9.64653 7.76371 9.89961 6.92801 10.2876 6.15677ZM13.7124 6.15688C14.1004 6.92809 14.3535 7.76375 14.457 8.62732H15.5694C15.3454 7.55586 14.6512 6.65713 13.7124 6.15688ZM12.9435 8.62732C12.8122 7.75568 12.4898 6.9241 12 6.19247C11.5102 6.9241 11.1877 7.75568 11.0565 8.62732H12.9435ZM11.0565 10.1273H12.9435C12.8122 10.9989 12.4897 11.8304 12 12.5619C11.5103 11.8304 11.1878 10.9989 11.0565 10.1273ZM9.54305 10.1273H8.43049C8.65452 11.1988 9.34884 12.0975 10.2877 12.5977C9.89968 11.8265 9.64659 10.9909 9.54305 10.1273ZM13.7123 12.5976C14.1003 11.8265 14.3534 10.9908 14.4569 10.1273H15.5693C15.3453 11.1987 14.6511 12.0974 13.7123 12.5976Z" }, null, -1)
-  ]));
-}
-const i = /* @__PURE__ */ r(l, [["render", s]]);
-export {
-  i as default
-};