@citizenplane/pimp 8.25.3 → 8.25.5

package/src/components/selects/CpMultiselect.vue

@@ -1,426 +0,0 @@
-<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/stories/CpMultiselect.stories.ts

@@ -1,237 +0,0 @@
-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>
-    `,
-  }),
-}