fix(date-picker):fix the init panel width and month name #3466
Conversation
|
""" WalkthroughThe changes update the default width of the DatePanel component by adjusting a CSS variable and modify the localization key generation for month names in the month table component, switching from a lookup-based approach to a direct numeric suffix format. Corresponding test cases were updated to reflect the new month label formats and element targeting. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MonthTableComponent
participant LocalizationSystem
User->>MonthTableComponent: Render month table
MonthTableComponent->>LocalizationSystem: Request label for `ui.datepicker.month${cell.text + 1}`
LocalizationSystem-->>MonthTableComponent: Return localized month name
MonthTableComponent-->>User: Display month name
Possibly related PRs
Suggested reviewers
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/date-panel/basic-usage.spec.tsOops! 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. examples/sites/demos/pc/app/date-panel/custom-week.spec.tsOops! 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. examples/sites/demos/pc/app/date-panel/disabled-date.spec.tsOops! 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.
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (11)
✅ Files skipped from review due to trivial changes (2)
🚧 Files skipped from review as they are similar to previous changes (9)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ 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 (
|
![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 (2)
packages/theme/src/date-panel/vars.less(1 hunks)packages/vue/src/month-table/src/pc.vue(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (1)
packages/theme/src/date-panel/vars.less (1)
24-24: LGTM! Width increase addresses the narrow panel issue.The increase from the implied previous width to 360px provides better usability for the date picker panel, addressing the stated issue of the panel being too narrow.
| @@ -15,7 +15,7 @@ | |||
| <tr v-for="(row, key) in state.rows" :key="key"> | |||
| <td v-for="(cell, key) in row" :class="getCellStyle(cell)" :key="key"> | |||
| <div> | |||
| <a class="cell" v-text="t('ui.datepicker.months.' + state.months[cell.text])"></a> | |||
| <a class="cell" v-text="t(`ui.datepicker.month${cell.text + 1}`)"></a> | |||
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify that the new localization keys are properly defined.
The change from array-based lookup to direct numeric suffix format (ui.datepicker.month${cell.text + 1}) looks good for providing full month names instead of abbreviated forms. However, please ensure that:
- The new localization keys (ui.datepicker.month1, ui.datepicker.month2, etc.) are defined in all language files
- The
cell.textvalue is guaranteed to be a number in the range 0-11 - This change doesn't break existing translations or components that might depend on the previous key format
🏁 Script executed:
#!/bin/bash
# Description: Verify the new localization keys exist and check for potential breaking changes
# Test: Search for the new localization key pattern in language files
rg -A 2 -B 2 "ui\.datepicker\.month[0-9]" --type json --type js --type ts
# Test: Check if the old key pattern is still used elsewhere
rg "ui\.datepicker\.months\." --type vue --type js --type ts
# Test: Find where cell.text is defined to verify it's always numeric
ast-grep --pattern 'cell.text'Length of output: 1360
🏁 Script executed:
#!/bin/bash
# Search all locale files for the new month keys (month1–month12)
rg -n "ui\\.datepicker\\.month[0-9]+" -g "*.{json,js,ts,yml,yaml,vue}"
# Search for any remaining uses of the old key pattern
rg -n "ui\\.datepicker\\.months\\." -g "*.{vue,js,ts}"
# Inspect how cell.text is populated in the month-table logic
sed -n '50,150p' packages/renderless/src/month-table/index.tsLength of output: 2727
Define new month translation keys in all locale files
The switch to t(\ui.datepicker.month${cell.text + 1}`) requires new keys (ui.datepicker.month1throughui.datepicker.month12`), but none are defined in the current locale files. To prevent missing-translation errors:
- Add
ui.datepicker.month1…ui.datepicker.month12entries to each language’s resource file, corresponding to full month names. - Confirm that
cell.text(0–11) always yields valid keys once incremented. - Review the existing
monthNamesutility in packages/utils/src/date-util/index.ts (line 37) which still uses the oldui.datepicker.months.{month}pattern—either update it to use the new numeric keys or clean up the legacy keys if they’re no longer needed.
🤖 Prompt for AI Agents
In packages/vue/src/month-table/src/pc.vue at line 18, the localization key
format was changed to use numeric suffixes (ui.datepicker.month1 to month12). To
fix this, add these new keys with full month names to all locale resource files
to avoid missing translations. Verify that cell.text is always a number from 0
to 11 so that adding 1 produces valid keys. Also, update or remove the old
monthNames utility in packages/utils/src/date-util/index.ts around line 37 to
align with the new key format and prevent inconsistencies.
discreted66
force-pushed
the
panel0529
branch
3 times, most recently
from
ce01c5b to
4a8479b
Compare
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
Style
Refactor
Tests