fix(grid): increase the length of drag and drop lines in the grid and remove empty values when filtering #3475
Conversation
WalkthroughThe changes update the visual styling of the table grid's resizable bar by adjusting its width and color in LESS files. Additionally, the filter panel logic is improved to trim whitespace from user input before applying the filter, ensuring cleaner and more accurate filtering. The dynamic columns test was also updated to reflect changed month text formats and more precise visibility assertions. Changes
Poem
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
examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.spec.jsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. packages/vue/src/grid/src/filter/src/panel.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
github-actions
bot
added
bug
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/theme-saas/src/grid/table-global.less(1 hunks)packages/theme-saas/src/grid/table.less(1 hunks)packages/vue/src/grid/src/filter/src/panel.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (3)
packages/theme-saas/src/grid/table-global.less (2)
633-633: Width increase improves visibility of the resizable bar.The change from
w-px(1px) tow-0.5(2px) makes the resizable bar thicker, improving its visibility for users during drag and drop operations. This aligns well with the PR objective.
641-641: Brand color enhances visual consistency.Changing the resizable bar color to
bg-color-brandimproves visual consistency with the design system and makes the drag indicator more prominent.packages/theme-saas/src/grid/table.less (1)
724-724: Consistent styling improvements across theme files.The width and color changes are identical to those in
table-global.less, ensuring consistent appearance of the resizable bar across different theme contexts. The thicker width (2px instead of 1px) and brand color enhance usability and visual consistency.Also applies to: 732-732
…y values when filtering
wuyiping0628
changed the title
wuyiping0628
changed the title
…y values when filterin
wuyiping0628
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.spec.js (1)
7-8: Consider making date selection more robust.The updated month selectors reflect the UI changes well, but the use of
.nth(2)for February selection suggests multiple matching elements, which could make the test brittle.Consider using more specific selectors or adding data-testid attributes to make the test more reliable:
- await page.getByText('12 月').first().click() - await page.getByText('2 月').nth(2).click() + await page.getByTestId('month-december').click() + await page.getByTestId('month-february-option-3').click()Alternatively, if data-testid attributes aren't feasible, consider adding assertions to validate the selection state:
await page.getByText('12 月').first().click() + await expect(page.getByText('12 月').first()).toHaveClass(/selected|active/) await page.getByText('2 月').nth(2).click() + await expect(page.getByText('2 月').nth(2)).toHaveClass(/selected|active/)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.spec.js(1 hunks)packages/vue/src/grid/src/filter/src/panel.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/vue/src/grid/src/filter/src/panel.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (1)
examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.spec.js (1)
9-9: Good improvement for test determinism.Adding
.first()to the visibility assertion makes the test more specific and less prone to false positives when multiple cells with the same name exist.
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
Bug Fixes
Style