feat(kcatalog): add searchInput prop (#596)

Backport addition of `searchInput` prop from Vue3 version.

Changes made:
- add `searchInput` prop
- update docs

docs/components/catalog.md

@@ -163,6 +163,10 @@ export default {
 </script>
 ```
 
+### searchInput
+
+Pass in a string of search input for server-side table filtering. See [the Server-side function section](#server-side-functions) for an example.
+
 ### paginationTotalItems
 
 Pass the total number of items in the set to populate the pagination text:
@@ -535,6 +539,7 @@ is triggered and will be resolved when the fetcher returns. You can override thi
 <KCatalog
   :fetcher="fetcher"
   :initial-fetcher-params="{
+    query: '',
     pageSize: 15,
     page: 1
   }"
@@ -551,12 +556,15 @@ https://kongponents.dev/api/components?_page=1&_limit=10
 
 <KCard>
   <template v-slot:body>
+    <KInput placeholder="Search..." v-model="search" type="search" />
     <KCatalog
       :fetcher="fetcher"
       :initial-fetcher-params="{
+        query: '',
         pageSize: 15,
         page: 1
       }"
+      :search-input="search"
     />
   </template>
 </KCard>
@@ -571,6 +579,11 @@ fetcher(payload) {
     _page: payload.page
   }
 
+  if (query) {
+    params.q = payload.query
+    params._page = 1
+  }
+
   return axios.get('/user_list', {
     baseURL: 'https://kongponents.dev/api',
     params

packages/KCatalog/KCatalog.vue

@@ -171,7 +171,7 @@ import KSkeleton from '@kongponents/kskeleton/KSkeleton.vue'
 import KCatalogItem from './KCatalogItem.vue'
 import KPagination from '@kongponents/kpagination/KPagination.vue'
 import KSkeletonBox from '@kongponents/kskeleton/KSkeletonBox.vue'
-import { useRequest } from '@kongponents/utils/utils.js'
+import { useRequest, useDebounce } from '@kongponents/utils/utils.js'
 
 export default defineComponent({
   name: 'KCatalog',
@@ -339,6 +339,13 @@ export default defineComponent({
       type: String,
       default: ''
     },
+    /**
+     * A prop to pass in a search string for server-side search
+     */
+    searchInput: {
+      type: String,
+      default: ''
+    },
     /**
      * A prop to pass in a the number of pagination neighbors used by the pagination component
      */
@@ -380,19 +387,23 @@ export default defineComponent({
   setup (props, ctx) {
     const defaultFetcherProps = {
       pageSize: 15,
-      page: 1
+      page: 1,
+      query: ''
     }
 
     const data = ref([])
     const total = ref(0)
+    const filterQuery = ref('')
     const page = ref(1)
     const pageSize = ref(15)
     const isCardLoading = ref(true)
     const hasInitialized = ref(false)
 
     const fetchData = async () => {
       isCardLoading.value = true
+      const searchInput = props.searchInput
       const res = await props.fetcher({
+        query: searchInput || filterQuery.value,
         pageSize: pageSize.value,
         page: page.value
       })
@@ -411,6 +422,7 @@ export default defineComponent({
         ...props.initialFetcherParams
       }
 
+      filterQuery.value = fetcherParams.query
       page.value = fetcherParams.page
       pageSize.value = fetcherParams.pageSize
       hasInitialized.value = true
@@ -425,6 +437,7 @@ export default defineComponent({
       }
     }
 
+    const { query, search } = useDebounce('', 350)
     const { revalidate } = useRequest(
       () => props.fetcher && hasInitialized.value && `catalog-item_${Math.floor(Math.random() * 1000)}_${props.fetcherCacheKey}`,
       () => fetchData(),
@@ -439,7 +452,11 @@ export default defineComponent({
       pageSize.value = newPageSize
     }
 
-    watch(() => [page.value, pageSize.value], () => {
+    watch(() => props.searchInput, (newValue) => {
+      search(newValue)
+    }, { immediate: true })
+
+    watch(() => [query.value, page.value, pageSize.value], () => {
       revalidate()
     }, { immediate: true })