@citizenplane/pimp 8.23.1 → 8.25.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" @click="handleClear" class="cpMultiselect__clear" />
+      </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/helpers/object.js

@@ -0,0 +1,9 @@
+export const isObject = (object) => {
+  return object != null && typeof object === 'object'
+}
+
+export const isEmpty = (obj) => {
+  if (!isObject(obj)) return true
+
+  return Reflect.ownKeys(obj).length === 0 && obj.constructor === Object
+}

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>
+    `,
+  }),
+}