@citizenplane/pimp 9.3.0 → 9.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "9.3.0",
+  "version": "9.4.1",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpMultiselect.vue

@@ -25,6 +25,7 @@
       @keydown.enter="toggleDropdown"
       @show="handleOverlayShown"
       @hide="handleOverlayHidden"
+      @value-change="handleValueChange"
       @click="handleClick"
     >
       <template #empty>
@@ -33,10 +34,10 @@
         </slot>
       </template>
       <template #chip="{ value, removeCallback }">
-        <slot name="selected-option" :option="value" :remove="removeCallback">
+        <slot name="tag" :option="value" :remove="removeCallback">
           <cp-badge class="cpMultiselect__tag" is-clearable size="sm" @on-clear="removeCallback">
             <template #leading-icon>
-              <slot name="selected-option-leading-icon" :option="value" />
+              <slot name="tag-leading-icon" :option="value" />
             </template>
             {{ value.name }}
           </cp-badge>
@@ -89,6 +90,7 @@ interface Emits {
   (e: 'update:modelValue', value: Record<string, unknown> | Record<string, unknown>[] | null): void
   (e: 'overlayShown'): void
   (e: 'overlayHidden'): void
+  (e: 'searchChange', value: string | object): void
 }
 
 interface Props {
@@ -151,6 +153,8 @@ const passThroughConfig = computed(() => ({
 
 const multiselect = ref<InstanceType<typeof AutoComplete> | null>(null)
 
+const searchQuery = ref('')
+
 // @ts-expect-error 'overlayVisible' does not exist on type instance of AutoComplete
 const isDropdownOpen = computed(() => multiselect.value?.overlayVisible)
 
@@ -173,6 +177,13 @@ const handleClear = () => (selectModel.value = null)
 const handleOverlayShown = () => emit('overlayShown')
 const handleOverlayHidden = () => emit('overlayHidden')
 
+const handleValueChange = (newValue: string | object) => {
+  if (typeof newValue !== 'string') return
+
+  searchQuery.value = newValue
+  emit('searchChange', newValue)
+}
+
 const getInputElement = () => {
   if (!multiselect.value) return null
   // @ts-expect-error '$el' does not exist on type instance of AutoComplete

package/src/stories/CpMultiselect.stories.ts

@@ -4,6 +4,44 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 
 import CpMultiselect from '@/components/CpMultiselect.vue'
 
+const supplierOptions = [
+  { 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' },
+]
+
+const airlineOptions = [
+  { 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' },
+]
+
 const meta = {
   title: 'CpMultiSelect',
   component: CpMultiselect,
@@ -66,19 +104,7 @@ 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' },
-    ],
+    options: supplierOptions,
   },
   render: (args) => ({
     components: { CpMultiselect },
@@ -114,12 +140,6 @@ export const Single: Story = {
           <template #prefix>
             <cp-partner-badge type="supplier" size="sm" />
           </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>
     `,
@@ -135,29 +155,7 @@ export const Multiple: Story = {
     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' },
-    ],
+    options: airlineOptions,
   },
   render: (args) => ({
     components: { CpMultiselect },
@@ -193,7 +191,7 @@ export const Multiple: Story = {
           <template #prefix>
             <cp-partner-badge type="airline" size="sm" />
           </template>
-          <template #selected-option-leading-icon="{ option }">
+          <template #tag-leading-icon="{ option }">
             <cp-airline-logo :iata-code="option.iata_code" size="14" />
           </template>
           <template #option="{ option }">