@citizenplane/pimp 9.7.11 → 9.7.12

package/package.json

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

package/src/components/CpMultiselect.vue

@@ -22,7 +22,6 @@
       :suggestions="options"
       :typeahead
       @click="handleClick"
-      @complete="handleSearch"
       @hide="handleOverlayHidden"
       @keydown.enter="toggleDropdown"
       @keydown.esc.stop
@@ -80,12 +79,13 @@
 <script setup lang="ts">
 import { absolutePosition, getOuterWidth } from '@primeuix/utils/dom'
 import AutoComplete from 'primevue/autocomplete'
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 import BaseSelectClearButton from '@/components/BaseSelectClearButton.vue'
 import TransitionExpand from '@/components/TransitionExpand.vue'
 
+import { debounce } from '@/helpers/functions'
 import { isEmpty } from '@/helpers/object'
 
 interface Emits {
@@ -94,7 +94,6 @@ interface Emits {
   (e: 'update:modelValue', value: Record<string, unknown> | Record<string, unknown>[] | string[] | null): void
   (e: 'overlayShown'): void
   (e: 'overlayHidden'): void
-  (e: 'searchChange', value: string | object): void
 }
 
 interface Props {
@@ -145,7 +144,6 @@ const selectModel = computed({
     if (typeof value === 'string') {
       return
     }
-
     emit('update:modelValue', value)
   },
 })
@@ -190,18 +188,20 @@ const displayClearButton = computed(() => {
   return props.isClearable && !isEmpty(selectModel.value)
 })
 
-const handleSearch = (event: { query: string }) => emit('search', event.query)
 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)
 }
 
+watch(
+  searchQuery,
+  debounce((newValue) => emit('search', newValue), 500),
+)
+
 const getInputElement = () => {
   if (!multiselect.value) return null
   // @ts-expect-error '$el' does not exist on type instance of AutoComplete
@@ -210,9 +210,7 @@ const getInputElement = () => {
 
 const selectInputContent = () => {
   const inputElement = getInputElement()
-  if (inputElement) {
-    inputElement.select()
-  }
+  if (inputElement) inputElement.select()
 }
 
 const focusAndSelectInput = () => {
@@ -245,9 +243,7 @@ const toggleDropdown = () => {
 
 const handleUpdateModelValue = (value: Record<string, unknown> | string[] | null) => {
   // Autocomplete will set the model value to the query string if not blocked
-  if (!value || typeof value === 'string') {
-    return
-  }
+  if (!value || typeof value === 'string') return
 }
 
 const overrideAlignOverlay = () => {

package/src/helpers/functions.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// https://decipher.dev/30-seconds-of-typescript/docs/debounce/
+export function debounce<T extends (...args: any[]) => any>(
+  fn: T,
+  wait: number = 300,
+): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout>
+  return function (this: any, ...args: Parameters<T>) {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => fn.apply(this, args), wait)
+  }
+}

package/src/stories/CpMultiselect.stories.ts

@@ -4,7 +4,14 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 
 import CpMultiselect from '@/components/CpMultiselect.vue'
 
-const supplierOptions = [
+interface IOption {
+  disabled?: boolean
+  iata_code?: string
+  id: number
+  name: string
+}
+
+const supplierOptions: IOption[] = [
   { id: 1, name: 'MGA AIRLINES' },
   { id: 2, name: 'ZENITH - EUROATLANTIC AIRWAYS' },
   { id: 3, name: 'ZENITH - SOUTHERN AIRWAYS EXPRESS MOKULELE AIRLINES AND SURF AIR MOBILITY' },
@@ -18,7 +25,7 @@ const supplierOptions = [
   { id: 11, name: 'UNITRAVEL UTAZÁSI IRODA' },
 ]
 
-const airlineOptions = [
+const airlineOptions: IOption[] = [
   { id: 1, name: 'United Airlines', iata_code: 'UA' },
   { id: 2, name: 'Delta Airlines', iata_code: 'DL' },
   { id: 3, name: 'American Airlines', iata_code: 'AA' },
@@ -123,24 +130,21 @@ export const Single: Story = {
 
       const originalOptions = ref(args.options)
       const dynamicOptions = ref(toValue(originalOptions))
+      const selectedSupplier = ref(null)
 
       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) => {
-          // @ts-expect-error option is unknown
-          return option.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+        dynamicOptions.value = originalOptions.value?.filter((option) => {
+          return (option as IOption).name.toLowerCase().includes(searchQuery.value.toLowerCase())
         })
 
         isLoading.value = false
       }
 
-      const selectedSupplier = ref(null)
       return { args, selectedSupplier, dynamicOptions, handleSearch, isLoading }
     },
     template: `
@@ -174,24 +178,21 @@ export const Multiple: Story = {
 
       const originalOptions = ref(args.options)
       const dynamicOptions = ref(toValue(originalOptions))
+      const selectedAirlines = ref([])
 
       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) => {
-          // @ts-expect-error option is unknown
-          return option.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+        dynamicOptions.value = originalOptions.value?.filter((option) => {
+          return (option as IOption).name.toLowerCase().includes(searchQuery.value.toLowerCase())
         })
 
         isLoading.value = false
       }
 
-      const selectedAirlines = ref([])
       return { args, selectedAirlines, dynamicOptions, handleSearch, isLoading }
     },
     template: `