@citizenplane/pimp 9.7.11 → 9.7.14

package/package.json

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

package/src/components/CpMultiselect.vue

@@ -145,7 +145,6 @@ const selectModel = computed({
     if (typeof value === 'string') {
       return
     }
-
     emit('update:modelValue', value)
   },
 })
@@ -197,7 +196,6 @@ const handleOverlayHidden = () => emit('overlayHidden')
 
 const handleValueChange = (newValue: string | object) => {
   if (typeof newValue !== 'string') return
-
   searchQuery.value = newValue
   emit('searchChange', newValue)
 }
@@ -210,9 +208,7 @@ const getInputElement = () => {
 
 const selectInputContent = () => {
   const inputElement = getInputElement()
-  if (inputElement) {
-    inputElement.select()
-  }
+  if (inputElement) inputElement.select()
 }
 
 const focusAndSelectInput = () => {
@@ -245,9 +241,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: `