test: add apiSelect remote search demo #5246
Conversation
|
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
playground/src/views/examples/form/basic.vueOops! Something went wrong! :( ESLint: 9.17.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/node_modules/@vben/eslint-config/dist/index.mjs' imported from /eslint.config.mjs WalkthroughThe pull request enhances the Changes
Sequence DiagramsequenceDiagram
participant User
participant ApiSelect
participant fetchRemoteOptions
User->>ApiSelect: Enter search keyword
ApiSelect->>fetchRemoteOptions: Request options with keyword
fetchRemoteOptions-->>ApiSelect: Return filtered options
ApiSelect->>User: Display matching options
Assessment against linked issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
playground/src/views/examples/form/basic.vue (2)
19-31: Add error handling in promise chain.
While simulating a remote call, it might be wise to handle any potential API errors. For production usage, you could catch errors and setfetching.value = falseaccordingly so that your loading spinner is properly hidden.function fetchRemoteOptions({ keyword = '选项' }: Record<string, any>) { fetching.value = true; return new Promise((resolve, reject) => { setTimeout(() => { try { const options = Array.from({ length: 10 }).map((_, index) => ({ label: `${keyword}-${index}`, value: `${keyword}-${index}`, })); resolve(options); } catch (e) { - // currently ignoring errors + reject(e); } fetching.value = false; }, 1000); }); }
84-87: EncapsulateApiSelectprops/logic if usage grows.
The newApiSelectvariant for remote searching is great. If you notice repeated patterns or want to reuse these props (API calls, debouncing, etc.) in multiple places, consider creating a dedicated helper or composable for reusability.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
playground/src/views/examples/form/basic.vue(3 hunks)
🔇 Additional comments (6)
playground/src/views/examples/form/basic.vue (6)
2-2: Imports look good.
No issues with importing h and ref from Vue. Keep in mind to remove unused imports as you build out more features.
6-6: Debouncing search is a solid approach.
Using useDebounceFn from VueUse is good practice for preventing excessive server calls. Consider making the debounce delay configurable if you expect different use cases or want to tune performance later.
16-17: Reactive state usage is appropriate here.
Defining keyword and fetching as refs properly separates loading state from user input for remote search.
88-93: Confirm the default notFoundContent experience.
You’re correctly setting notFoundContent to undefined when fetching is true to display the loading spinner. Ensure that you’re comfortable with the user experience in the event no results are returned.
94-101: Good use of debounced searching and dynamic params.
You're effectively tracking the search value and updating params to drive remote data fetching. This is a straightforward pattern for search suggestions.
102-114: Conditional rendering for loading spinner is handled correctly.
Using the renderComponentContent callback to set notFoundContent to an actual <Spin> is well done. Users will see a clear indicator of loading in the dropdown.
Description
添加ApiSelect远程搜索的Demo
close #5221
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
ApiSelectcomponent for remote searching.