feat(@vben/common-ui): [api-select] add loading slots #5086
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
packages/effects/common-ui/src/components/api-select/api-select.vueOops! Something went wrong! :( ESLint: 9.16.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/node_modules/@vben/eslint-config/dist/index.mjs' imported from /eslint.config.mjs WalkthroughThe changes in this pull request modify the Changes
Possibly related PRs
Suggested reviewers
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
🧹 Outside diff range and nitpick comments (1)
packages/effects/common-ui/src/components/api-select/api-select.vue (1)
201-203: LGTM! Consider adding accessibility attributes.The implementation of the loading slot is well done, providing both flexibility through scoped slots and a sensible default UI. The loading state is correctly passed to the slot, allowing for custom loading indicators.
Consider adding ARIA attributes for better accessibility:
- <LoaderCircle class="animate-spin" /> + <LoaderCircle + class="animate-spin" + role="status" + aria-label="Loading..." + />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
packages/effects/common-ui/src/components/api-select/api-select.vue(1 hunks)
🔇 Additional comments (1)
packages/effects/common-ui/src/components/api-select/api-select.vue (1)
201-203: Verify usage in parent components
The loading slot implementation looks good. To ensure proper usage, here's how parent components should implement custom loading indicators:
<api-select
loading-slot="suffix"
:api="fetchOptions"
>
<template #suffix="{ loading }">
<my-custom-spinner v-if="loading" />
</template>
</api-select>Let's check for existing usages to ensure compatibility:
✅ Verification successful
No breaking changes for existing ApiSelect implementations
The loading slot implementation is safe to proceed with as:
- No existing components are using any loading-related slots with ApiSelect
- The implementation provides a default loading indicator, maintaining backward compatibility
- The new slot is optional and won't affect current usage patterns
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for existing ApiSelect usage patterns
rg -l "ApiSelect|api-select" --type vue
# Check for any existing loading slot implementations
rg -A 3 "loading-slot" --type vue
Length of output: 131
Script:
#!/bin/bash
# Search for existing ApiSelect usage patterns without file type restriction
rg -l "ApiSelect|api-select"
# Check for any existing loading slot implementations
rg -A 3 "loading-slot"
Length of output: 546
Script:
#!/bin/bash
# Check the content of form/basic.vue files for ApiSelect usage patterns
rg -A 5 "<api-select|<ApiSelect" "playground/src/views/examples/form/basic.vue" "apps/web-naive/src/views/demos/form/basic.vue" "apps/web-ele/src/views/demos/form/basic.vue"
# Check if there are any template slots being used with ApiSelect
rg -A 5 "<template.*#.*>" "playground/src/views/examples/form/basic.vue" "apps/web-naive/src/views/demos/form/basic.vue" "apps/web-ele/src/views/demos/form/basic.vue"
Length of output: 2509
|
此PR已不适用 |
Description
add loading slots
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
api-selectcomponent, allowing parent components to define their own loading templates.