@citizenplane/pimp 9.7.12 → 9.7.14

package/package.json

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

package/src/components/CpMultiselect.vue

@@ -22,6 +22,7 @@
       :suggestions="options"
       :typeahead
       @click="handleClick"
+      @complete="handleSearch"
       @hide="handleOverlayHidden"
       @keydown.enter="toggleDropdown"
       @keydown.esc.stop
@@ -79,13 +80,12 @@
 <script setup lang="ts">
 import { absolutePosition, getOuterWidth } from '@primeuix/utils/dom'
 import AutoComplete from 'primevue/autocomplete'
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted } 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,6 +94,7 @@ 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 {
@@ -188,6 +189,7 @@ 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')
@@ -195,13 +197,9 @@ 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