@citizenplane/pimp 9.2.0 → 9.4.0

package/src/stories/CpMultiselect.stories.ts

@@ -1,9 +1,47 @@
-import { ref, toValue } from 'vue'
+import { ref, toValue, computed } from 'vue'
 
 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 },
@@ -238,3 +236,38 @@ export const Invalid: Story = {
     `,
   }),
 }
+
+export const Highlighted: Story = {
+  args: {
+    placeholder: 'Select a supplier',
+    disabled: false,
+    options: supplierOptions,
+  },
+  render: (args) => ({
+    components: { CpMultiselect },
+    setup() {
+      const selectedSupplier = ref(null)
+      const searchQuery = ref('')
+      const handleSearch = (query: string) => {
+        searchQuery.value = query
+      }
+
+      const suggestions = computed(() => {
+        return args.options?.filter((option) => {
+          return option.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+        })
+      })
+
+      return { args, selectedSupplier, suggestions, handleSearch }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpMultiselect v-model="selectedSupplier" v-bind="args" :options="suggestions" @search-change="handleSearch">
+          <template #prefix>
+            <cp-partner-badge type="supplier" size="sm" />
+          </template>
+        </CpMultiselect>
+      </div>
+    `,
+  }),
+}