diff --git a/docs/components/content/examples/SelectMenuExampleAsyncSearch.vue b/docs/components/content/examples/SelectMenuExampleSearchAsync.vue similarity index 62% rename from docs/components/content/examples/SelectMenuExampleAsyncSearch.vue rename to docs/components/content/examples/SelectMenuExampleSearchAsync.vue index 77fa206f..fa320cff 100644 --- a/docs/components/content/examples/SelectMenuExampleAsyncSearch.vue +++ b/docs/components/content/examples/SelectMenuExampleSearchAsync.vue @@ -1,19 +1,27 @@ diff --git a/docs/content/3.forms/4.select-menu.md b/docs/content/3.forms/4.select-menu.md index 62029af8..7b61cd60 100644 --- a/docs/content/3.forms/4.select-menu.md +++ b/docs/content/3.forms/4.select-menu.md @@ -132,6 +132,18 @@ props: --- :: +### Control the query :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"} + +Use a `v-model:query` to control the search query. + +::component-example +--- +component: 'select-menu-example-search-query' +componentProps: + class: 'w-full lg:w-48' +--- +:: + ### Async search Pass a function to the `searchable` prop to customize the search behavior and filter options according to your needs. The function will receive the query as its first argument and should return an array. @@ -140,19 +152,7 @@ Use the `debounce` prop to adjust the delay of the function. ::component-example --- -component: 'select-menu-example-async-search' -componentProps: - class: 'w-full lg:w-48' ---- -:: - -### Control the query :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"} - -Use a `v-model:query` to control the search query. - -::component-example ---- -component: 'select-menu-example-search-query' +component: 'select-menu-example-search-async' componentProps: class: 'w-full lg:w-48' ---