feat:[date-panel,date-range,date-picker]DatePicker support using only date range panel #2869
Conversation
WalkthroughThe changes introduce a new date range selection capability and update the existing date-panel component. Key modifications include refining property types (such as changing Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant TR as TinyDateRange
participant API as DateRange API
participant PC as Parent Component
U->>TR: Select a date range
TR->>API: Trigger handleSelectChange1 & other event handlers
API-->>PC: Emit update:modelValue & select-change events
PC->>TR: Re-render with updated date range
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
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 (
|
Walkthrough此PR为 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
WalkthroughThis PR introduces support for the time interval panel for the Changes
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🔭 Outside diff range comments (1)
examples/sites/demos/pc/app/date-panel/event-composition-api.vue (1)
1-38: Consider extracting shared logic into a composable.This file largely duplicates code from
event.vue. Consider creating a composable function to share the common logic:// useDatePanelEvents.js export function useDatePanelEvents() { const value = ref('2025-01-15') const value1 = ref(['2025-01-15', '2025-02-15']) const handleSelectChange = (value) => { TinyModal.message({ message: `触发 面板选中 事件，组件绑定值为：${value}`, status: 'info' }) } const handleSelectChange1 = (value) => { TinyModal.message({ message: `触发 区间面板选中 事件，组件绑定值为：${value}`, status: 'info' }) } return { value, value1, handleSelectChange, handleSelectChange1 } }Then use it in both components:
<script setup> import { useDatePanelEvents } from './useDatePanelEvents' const { value, value1, handleSelectChange, handleSelectChange1 } = useDatePanelEvents() </script>
🧹 Nitpick comments (22)
examples/sites/demos/apis/date-panel.js (1)
201-464: Consider merging common props with 'date-panel'.
The 'date-range' component duplicates certain props (e.g., disabled-date, format, popper-class). If structural reusability is possible, factor out shared logic or types to avoid code duplication and maintain consistency.packages/vue/src/date-range/__tests__/date-range.test.tsx (1)
1-17: Expand test coverage for edge cases.
The test covers a standard use case with two valid date strings in an array. Consider adding test cases for empty arrays, invalid formats, or partial selections. This helps ensure robust functionality in real-world scenarios.examples/sites/demos/pc/app/date-panel/format.spec.ts (1)
6-8: Validate multi-locale or boundary dates.
These lines test a single click scenario (day '23'). Consider verifying edge values such as month boundaries or minimum/maximum dates to ensure formatting logic holds in all scenarios.examples/sites/demos/pc/app/date-panel/basic-usage.vue (1)
14-14: Remove extra newlineRemove the extra newline to fix the ESLint error.
import { TinyDatePanel, TinyDateRange } from '@opentiny/vue' - const value = ref('2025-01-15')🧰 Tools
🪛 ESLint
[error] 14-15: Delete
⏎(prettier/prettier)
examples/sites/demos/pc/app/date-panel/readonly.vue (1)
1-1: Consider using CSS custom properties for consistent stylingThe same styling for the date range picker is duplicated across multiple files. Consider defining these styles in a shared location using CSS custom properties (CSS variables) to maintain consistency and reduce duplication.
Example approach:
- Define variables in a shared CSS file:
:root { --tiny-date-range-width: 668px; --tiny-date-component-spacing: 12px; }
- Use variables in components:
.demo-date-panel-wrap { & > * { margin-top: var(--tiny-date-component-spacing); } .tiny-date-range { width: var(--tiny-date-range-width); } }examples/sites/demos/pc/app/date-panel/shortcuts.spec.ts (1)
13-17: Consider adding specific date validation.While checking for non-empty values is good, consider adding specific date validation to ensure the correct date ranges are selected for each shortcut.
- await expect(page.locator('.value1')).not.toHaveText('') + // Validate specific date ranges for each shortcut + await page.getByRole('button', { name: '最近三个月' }).click() + await expect(page.locator('.value1')).toContainText('2025-01') // Start date + await expect(page.locator('.value1')).toContainText('2025-03') // End dateexamples/sites/demos/pc/app/date-panel/format-composition-api.vue (1)
14-15: Consider using dynamic initial dates.Hard-coded dates in 2025 might become outdated. Consider using dynamic dates relative to the current date.
-const value = ref('2025/01/15') -const value1 = ref(['2025/01/15', '2025/02/15']) +const today = new Date() +const value = ref(today.toISOString().split('T')[0].replace(/-/g, '/')) +const nextMonth = new Date(today.setMonth(today.getMonth() + 1)) +const value1 = ref([ + today.toISOString().split('T')[0].replace(/-/g, '/'), + nextMonth.toISOString().split('T')[0].replace(/-/g, '/') +])examples/sites/demos/pc/app/date-panel/disabled-date-composition-api.vue (1)
24-29: Consider responsive width adjustmentsThe fixed width values might cause layout issues on smaller screens.
Consider using relative units or media queries:
.demo-date-panel-wrap { - width: 560px; + width: 100%; + max-width: 560px; & > * { margin-top: 12px; } .tiny-date-range-picker { - width: 668px; + width: 100%; + max-width: 668px; } }examples/sites/demos/pc/app/date-panel/unlink-panels-composition-api.vue (1)
3-3: Consider internationalizing the text contentThe hardcoded Chinese text should be moved to localization files for better maintainability and internationalization support.
Consider using i18n:
- <div class="value">默认启用面板联动：{{ value }}</div> + <div class="value">{{ t('datePanel.defaultLinkPanels') }}: {{ value }}</div> - <div class="value1">关闭面板联动：{{ value1 }}</div> + <div class="value1">{{ t('datePanel.unlinkPanels') }}: {{ value1 }}</div>Also applies to: 10-10
examples/sites/demos/pc/app/date-panel/readonly.spec.ts (1)
7-13: Consider adding test descriptionsThe test steps would be clearer with descriptive comments for each interaction.
// datePanel + // Test navigation and date selection in readonly mode await page.locator('#readonly').getByLabel('上个月').click() await page.locator('#readonly').getByText('19').first().click() await page.locator('#readonly').getByLabel('下个月').click() await page.locator('#readonly div').filter({ hasText: /^21$/ }).first().click() await page.locator('#readonly div').filter({ hasText: /^23$/ }).first().click()examples/sites/demos/pc/app/date-panel/unlink-panels.vue (2)
3-3: Consider adding i18n support for the Chinese text.The hardcoded Chinese text "默认启用面板联动" and "关闭面板联动" should be internationalized for better maintainability and global accessibility.
Also applies to: 10-10
21-21: Consider using Date objects for initialization.Instead of string dates, consider using Date objects for better type safety and consistency.
-const value = ref(['2025-01-15', '2025-02-15']) -const value1 = ref(['2025-01-15', '2025-02-15']) +const value = ref([new Date('2025-01-15'), new Date('2025-02-15')]) +const value1 = ref([new Date('2025-01-15'), new Date('2025-02-15')])Also applies to: 22-22
examples/sites/demos/pc/app/date-panel/unlink-panels.spec.ts (1)
3-18: Add more test coverage for edge cases.While the test covers basic functionality, consider adding tests for:
- Invalid date selections
- Panel navigation across years
- Keyboard navigation
- Accessibility testing
examples/sites/demos/pc/app/date-panel/event.vue (2)
21-23: Consider using template literals for message formatting.The string concatenation could be improved using template literals for better readability.
- TinyModal.message({ message: '触发 区间面板选中 事件，组件绑定值为：' + value, status: 'info' }) + TinyModal.message({ message: `触发 区间面板选中 事件，组件绑定值为：${value}`, status: 'info' })
32-34: Consider using CSS variables for consistent widths.The hardcoded width value could be replaced with a CSS variable for better maintainability.
+:root { + --date-range-picker-width: 668px; +} .tiny-date-range-picker { - width: 668px; + width: var(--date-range-picker-width); }examples/sites/demos/pc/app/date-panel/custom-weeks.vue (1)
38-43: Consider making the width responsive.The fixed width of 668px for the date range picker might not be ideal for all screen sizes.
Consider using a relative width or media queries:
.tiny-date-range-picker { - width: 668px; + width: 100%; + max-width: 668px; }examples/sites/demos/pc/app/date-panel/custom-week.spec.ts (1)
3-30: Consider enhancing test coverage and readability.While the test covers the basic functionality, consider these improvements:
- Split into separate test cases for datePanel and dateRange
- Add negative test cases (e.g., invalid dates)
- Use more descriptive test names
Example refactor:
-test('[DatePanel] 测试周次序号', async ({ page }) => { +test.describe('[DatePanel]', () => { + test('should display correct week numbers in date panel', async ({ page }) => { // existing datePanel tests + }) + + test('should handle date range selection correctly', async ({ page }) => { // existing dateRange tests + }) + + test('should handle invalid date selections gracefully', async ({ page }) => { + // Add negative test cases + }) +})packages/vue/src/date-table/src/index.ts (1)
31-38: Consider adding JSDoc comments for props.The props are well-structured, but adding JSDoc comments would improve documentation.
Example enhancement:
+/** + * @property {boolean} showWeekNumber - Whether to display week numbers + * @default false + */ showWeekNumber: { type: Boolean, default: false }, +/** + * @property {boolean} readonly - Whether the date table is in readonly mode + * @default false + */ readonly: { type: Boolean, default: false },examples/sites/demos/pc/app/date-panel/disabled-date.spec.ts (1)
13-14: Consider using more robust selectors.The current selector using
nth(1)might be fragile if the DOM structure changes.Consider using more specific attributes or data-testid for selection:
- await page.getByText('23', { exact: true }).first().click() + await page.getByRole('cell', { name: '23' }).click()packages/vue/src/date-range/src/index.ts (1)
62-65: Consider documenting unlinkPanels behavior.The unlinkPanels prop could benefit from documentation explaining its purpose and usage.
Consider adding a comment explaining the behavior:
unlinkPanels: { type: Boolean, default: false + // When true, the two date panels can show different months }examples/sites/demos/pc/app/date-panel/shortcuts.vue (2)
12-12: Consider using more descriptive variable names.The variables
valueandvalue1could be more descriptive to better indicate their purpose (e.g.,selectedDateanddateRange).-const value = ref('2025-01-15') -const value1 = ref(['2025-01-15', '2025-02-15']) +const selectedDate = ref('2025-01-15') +const dateRange = ref(['2025-01-15', '2025-02-15'])Also applies to: 14-15
41-69: Consider extracting date calculation utilities.The shortcuts1 array contains repeated date calculation logic. Consider extracting these calculations into utility functions for better maintainability.
+const calculateDateOffset = (days) => { + const end = new Date() + const start = new Date() + start.setTime(start.getTime() - 3600 * 1000 * 24 * days) + return [start, end] +} const shortcuts1 = [ { text: '最近一周', onClick(picker) { - const end = new Date() - const start = new Date() - start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) + const [start, end] = calculateDateOffset(7) picker.$emit('pick', [start, end]) } }, // Apply similar changes to other shortcuts ]
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (39)
examples/sites/demos/apis/date-panel.js(4 hunks)examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/basic-usage.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/basic-usage.vue(1 hunks)examples/sites/demos/pc/app/date-panel/custom-week.spec.ts(2 hunks)examples/sites/demos/pc/app/date-panel/custom-weeks-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/custom-weeks.vue(2 hunks)examples/sites/demos/pc/app/date-panel/disabled-date-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/disabled-date.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/disabled-date.vue(2 hunks)examples/sites/demos/pc/app/date-panel/event-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/event.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/event.vue(1 hunks)examples/sites/demos/pc/app/date-panel/format-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-panel/format.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/format.vue(1 hunks)examples/sites/demos/pc/app/date-panel/readonly-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-panel/readonly.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/readonly.vue(1 hunks)examples/sites/demos/pc/app/date-panel/shortcuts-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/shortcuts.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/shortcuts.vue(2 hunks)examples/sites/demos/pc/app/date-panel/unlink-panels-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-panel/unlink-panels.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/unlink-panels.vue(1 hunks)examples/sites/demos/pc/app/date-panel/webdoc/date-panel.js(1 hunks)examples/sites/demos/pc/app/date-picker/align.spec.ts(1 hunks)examples/sites/demos/pc/app/date-picker/webdoc/date-picker.js(1 hunks)packages/renderless/src/date-panel/index.ts(2 hunks)packages/renderless/src/date-range/index.ts(7 hunks)packages/renderless/src/date-range/vue.ts(7 hunks)packages/renderless/src/date-table/index.ts(2 hunks)packages/renderless/src/month-table/index.ts(1 hunks)packages/vue/src/date-range/__tests__/date-range.test.tsx(1 hunks)packages/vue/src/date-range/src/index.ts(1 hunks)packages/vue/src/date-range/src/mobile-first.vue(1 hunks)packages/vue/src/date-range/src/pc.vue(8 hunks)packages/vue/src/date-table/src/index.ts(1 hunks)packages/vue/src/date-table/src/pc.vue(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- packages/renderless/src/date-panel/index.ts
- packages/renderless/src/month-table/index.ts
🧰 Additional context used
🪛 ESLint
examples/sites/demos/pc/app/date-panel/basic-usage.vue
[error] 14-15: Delete ⏎
(prettier/prettier)
🔇 Additional comments (45)
examples/sites/demos/apis/date-panel.js (2)
10-10: Confirm the callback signature.
The type '() => void' may be too restrictive if you intend to receive parameters or return a boolean to conditionally disable dates. If you truly need no parameters or return value, this is fine; otherwise, revise the signature to match your intended usage.
31-31: Ensure consistent prop naming with referencing code.
Noting the prop name is listed as 'v-model / modelValue'; confirm references in the documentation and usage remain consistent and discoverable.examples/sites/demos/pc/app/date-panel/format.spec.ts (1)
10-13: Confirm array format for date range.
You are verifying that the display matches '[ "2025/01/28", "2025/02/12" ]'. This is good, but consider including a negative test or an out-of-range date to confirm correct error handling.examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue (1)
25-27: Fix CSS selector to match component class nameThe CSS selector
.tiny-date-range-pickerdoesn't match any elements in the template. Thetiny-date-rangecomponent likely renders with a different class name.Let's verify the correct class name:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Search for the actual class name used by TinyDateRange component rg -l "tiny-date-range" src/date-rangeLength of output: 93
Let's collect more information. The previous search attempted to look in a non-existent directory. I'll run an expanded search for "tiny-date-range-picker" and inspect the template from the affected file to see what class names are applied. This will help us confirm whether the CSS selector is indeed mismatched.
🏁 Script executed:
#!/bin/bash # Search for all occurrences of "tiny-date-range-picker" in the repository rg -n "tiny-date-range-picker" . # Print the <template> block from the basic usage Vue example to see how the component is rendered sed -n '/<template>/,/<\/template>/p' examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vueLength of output: 8558
Fix CSS selector to target the rendered element
In the basic usage composition API example, the style block currently uses a tag selector:
tiny-date-range-picker { width: 668px; }
However, the template uses the component as:
The actual rendered element from the date range component carries the class name "tiny-date-range-picker" (as confirmed by multiple occurrences in other examples and in the core component file). Therefore, updating the style to use a class selector:
.tiny-date-range-picker { width: 668px; }
will correctly apply the styling.
examples/sites/demos/pc/app/date-panel/basic-usage.vue (1)
25-27: Fix CSS selector to match component class nameThe CSS selector
.tiny-date-range-pickerdoesn't match any elements in the template. Thetiny-date-rangecomponent likely renders with a different class name.examples/sites/demos/pc/app/date-panel/readonly-composition-api.vue (2)
24-26: Fix CSS selector to match component class nameThe CSS selector
.tiny-date-range-pickerdoesn't match any elements in the template. Thetiny-date-rangecomponent likely renders with a different class name.
5-6: LGTM! Consistent implementation of readonly date rangeThe readonly implementation is consistent with the single date panel, correctly applying the readonly prop to both components.
examples/sites/demos/pc/app/date-panel/readonly.vue (2)
24-26: Fix CSS selector to match component class nameThe CSS selector
.tiny-date-range-pickerdoesn't match any elements in the template. Thetiny-date-rangecomponent likely renders with a different class name.
5-6: LGTM! Consistent implementation of readonly date rangeThe readonly implementation is consistent with the single date panel, correctly applying the readonly prop to both components.
examples/sites/demos/pc/app/date-panel/shortcuts.spec.ts (1)
7-11: LGTM! Clear and focused test for date panel shortcuts.The test cases for single date selection are well-structured and validate the expected behavior.
examples/sites/demos/pc/app/date-panel/format-composition-api.vue (2)
3-6: LGTM! Clear template structure with both single date and date range components.The template organization is clean and the component usage is correct.
21-26: LGTM! Improved layout with consistent spacing.The style changes enhance the component's visual presentation.
examples/sites/demos/pc/app/date-panel/format.vue (1)
1-29: Same issues as format-composition-api.vue.Please apply the same improvements suggested for format-composition-api.vue regarding dynamic initial dates.
examples/sites/demos/pc/app/date-panel/event.spec.ts (1)
7-13: LGTM! Clear test flow for date panel events.The test cases for single date selection events are well-structured.
examples/sites/demos/pc/app/date-panel/disabled-date-composition-api.vue (1)
5-6: LGTM: Date range component integrationThe new date range component is properly integrated with the same disabled date validation as the single date panel.
examples/sites/demos/pc/app/date-panel/disabled-date.vue (1)
1-32: LGTM: Consistent implementation with composition API versionThe implementation maintains consistency with the composition API version, sharing the same functionality and styling.
examples/sites/demos/pc/app/date-panel/unlink-panels.vue (1)
6-6: LGTM! Clear demonstration of linked vs unlinked panels.The implementation effectively demonstrates both default linked behavior and unlinked panels using the
unlink-panelsprop.Also applies to: 12-12
examples/sites/demos/pc/app/date-panel/custom-weeks.vue (1)
10-17: LGTM! Good reuse of props across components.The new date range component maintains consistency by reusing the same props as the date panel component, which is a good practice for maintaining API consistency.
examples/sites/demos/pc/app/date-panel/custom-weeks-composition-api.vue (1)
1-46: LGTM! Maintains consistency with the Options API version.The implementation correctly mirrors the functionality of the Options API version while using the Composition API style.
examples/sites/demos/pc/app/date-panel/basic-usage.spec.ts (3)
17-17: LGTM! Improved selector specificity.The change to use
.first()makes the selector more precise and reduces flakiness in tests.
20-21: LGTM! Updated date selection test.The test now properly validates the date selection with a more specific selector and assertion.
23-27: LGTM! Comprehensive date range tests added.Good addition of tests for the new date range functionality, covering:
- Panel opening
- Year selection
- Date selection
- Result validation
examples/sites/demos/pc/app/date-panel/disabled-date.spec.ts (2)
7-10: LGTM! Clear section separation.Good addition of section comment and improved selector specificity.
16-28: Review the use of nth selectors in date range tests.The tests use multiple nth selectors which could make them brittle to DOM changes.
Consider running this script to find better selector alternatives:
packages/vue/src/date-range/src/index.ts (2)
34-41: LGTM! Well-defined core props.The type and modelValue props are properly defined with appropriate types and defaults.
42-61: LGTM! Comprehensive configuration props.Good addition of configuration props with appropriate types and defaults:
- format
- readonly
- shortcuts
- disabledDate
- popperClass
examples/sites/demos/pc/app/date-picker/align.spec.ts (1)
3-5: LGTM! Added viewport configuration.Good addition of viewport configuration to ensure consistent test environment across different machines.
examples/sites/demos/pc/app/date-panel/shortcuts.vue (1)
5-6: LGTM! Clear demonstration of the date range component.The template structure effectively demonstrates both single date and date range selection with their respective values displayed.
examples/sites/demos/pc/app/date-panel/shortcuts-composition-api.vue (1)
1-83: File is identical to shortcuts.vue.The implementation matches shortcuts.vue. The same suggestions for variable naming and utility extraction apply here.
packages/vue/src/date-table/src/pc.vue (1)
65-66: LGTM! Proper addition of readonly prop.The readonly prop is correctly added to support the new feature. This aligns with the PR objectives of enhancing date panel functionality.
examples/sites/demos/pc/app/date-panel/webdoc/date-panel.js (1)
80-93: LGTM! Well-documented demo entry.The new demo entry for unlink-panels is thoroughly documented with clear descriptions in both Chinese and English, explaining the feature's behavior and configuration.
packages/renderless/src/date-range/vue.ts (3)
53-54: LGTM! New imports enhance component reactivity.The addition of
watchPickerVisibleandwatchModelValueimports improves the component's reactivity by providing dedicated watchers for picker visibility and model value changes.
143-144: LGTM! Model value watcher enhances reactivity.The addition of the
modelValuewatcher with immediate execution ensures that the component reacts to initial and subsequent value changes.
88-90: Verify prop initialization in state.The state initialization now directly uses props for several values. Ensure that these props are properly validated and have appropriate default values to prevent runtime errors.
Also applies to: 102-104, 109-111
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Search for prop validation in the codebase ast-grep --pattern 'props: { $$$ popperClass: $_, modelValue: $_, format: $_, unlinkPanels: $_, shortcuts: $_, disabledDate: $_ $$$ }'Length of output: 152
I'm not seeing the expected prop validation using the previous pattern. To confirm whether the props (like popperClass and modelValue) are properly defined and have default values in the component, I need to inspect the full props definition from the component file.
Let's run a script to print the complete "props" block from packages/renderless/src/date-range/vue.ts.
🏁 Script executed:
#!/bin/bash # Extract the props block from the Vue component to inspect prop definitions and default values. sed -n '/props: {/,/}/p' packages/renderless/src/date-range/vue.tsLength of output: 68
Let's use a different approach and try to locate any prop definitions by searching for the keyword "props:" within the file. This might help us locate where (or if) props are declared and whether they have default values.
🏁 Script executed:
#!/bin/bash # Search for any line containing "props:" in the Vue component to identify prop initializations/definitions. rg -n "props:" packages/renderless/src/date-range/vue.tsLength of output: 56
Let's run a new script combining searches for "defineProps", "default:" usage, and "export default" so we can better understand how props are defined and default values assigned within the component.
🏁 Script executed:
#!/bin/bash echo "Searching for defineProps in packages/renderless/src/date-range/vue.ts:" rg -n "defineProps" packages/renderless/src/date-range/vue.ts echo "Searching for default: values in packages/renderless/src/date-range/vue.ts:" rg -n "default:" packages/renderless/src/date-range/vue.ts echo "Searching for export default and props block in packages/renderless/src/date-range/vue.ts:" rg -n "export default" packages/renderless/src/date-range/vue.tsLength of output: 692
Let's try a more fine-grained search of the lines around the snippet so we can inspect how prop values like popperClass and modelValue are being initialized and whether there's any inline defaulting or validation.
This should help us inspect the state initialization and any related prop definitions in the file.
🏁 Script executed:
#!/bin/bash # Print 10 lines of context around the first occurrence of the snippet "popperClass:" rg -n -C 5 "popperClass:" packages/renderless/src/date-range/vue.tsLength of output: 394
It appears that the state initialization uses inline fallbacks—using an empty string for popperClass and an empty array for modelValue—so that even if the parent does not pass these props, the state will have safe default values.
However, without evidence of an explicit definition or type validation for these props in the file (or elsewhere in the codebase), it suggests that the component relies on these inline fallbacks for safety. This is acceptable provided that:
• The inline defaults ('' for popperClass and [] for modelValue) match the intended types.
• Any type checking (via TypeScript or runtime validations) is done elsewhere (i.e. at the component’s creation level).Given that the inline defaults safeguard against runtime errors, I am confident that, in this case, the prop initialization in state is appropriately handled.
Action: No further changes needed here.
packages/vue/src/date-range/src/pc.vue (3)
27-27: Improve shortcuts rendering condition.The condition
state.shortcuts?.lengthis more robust than checking juststate.shortcutsas it ensures the array has items.
54-54: Verify readonly state handling.The readonly state is now consistently applied across all inputs, but ensure that the readonly state doesn't interfere with other input properties like disabled.
Also applies to: 66-67, 69-69, 91-91, 103-104
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Search for potential conflicts with readonly state rg -A 2 ':disabled="' rg -A 2 ':readonly="'Length of output: 68575
Readonly state verified in date-range/pc.vue and related inputs
After investigating the occurrences of :readonly alongside the disabled attributes across the codebase (including in packages/vue/src/date-range/src/pc.vue and related input components), the readonly binding is applied consistently and separately from disabled. There’s no evidence that the readonly state interferes with the disabled property in any of the components.
- The date-range component applies :readonly="readonly" independently while its disabled state is managed via state.rangeState.selecting.
- Other components (e.g. in input/src/pc.vue and mobile-first.vue) also use readonly and disabled bindings separately.
Based on this review, the readonly state handling works as intended without conflicting with the disabled attribute.
262-277: Verify prop types and defaults.New props have been added but their types and default values should be properly defined to prevent runtime errors.
packages/vue/src/date-range/src/mobile-first.vue (1)
11-16: LGTM! Improved shortcuts rendering and formatting.The changes improve code readability and align with the PC version's shortcuts handling.
examples/sites/demos/pc/app/date-picker/webdoc/date-picker.js (1)
211-217: LGTM! Improved documentation clarity.The updated demo name and description better explain the unlink-panels feature and its behavior.
packages/renderless/src/date-table/index.ts (2)
20-22: LGTM!The new imports are correctly placed and used within the code.
451-453: LGTM!The readonly check is correctly implemented using an early return pattern, preventing any interactions when the component is in readonly mode.
packages/renderless/src/date-range/index.ts (4)
24-25: LGTM!The new imports are correctly placed and used within the code.
217-220: LGTM!The readonly checks are correctly implemented in both functions using an early return pattern, ensuring consistent readonly behavior across the component.
Also applies to: 375-377
434-442: LGTM!The shortcuts enhancement correctly handles both direct panel usage and emit cases, providing a flexible implementation for different use cases.
561-565: LGTM!The event enhancements follow Vue's v-model pattern and provide good feedback through the select-change event. The date formatting is correctly handled based on the picker type.
examples/sites/demos/pc/app/date-panel/unlink-panels-composition-api.vue
Show resolved
Hide resolved
discreted66
changed the title
discreted66
changed the title
discreted66
force-pushed
the
DateRanges
branch
from
e5846f1 to
f9b00d0
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
examples/sites/demos/pc/app/date-panel/custom-weeks-composition-api.vue (1)
28-32: Avoid side effects in formatWeeks functionThe
formatWeeksfunction modifies external state througheachWeekFirstDay.value, which could lead to unexpected behavior. Consider separating the state update into a dedicated function.-const formatWeeks = (customWeeks, weekFirstDays) => { - eachWeekFirstDay.value = weekFirstDays - return customWeeks + 'w' -} +const updateWeekFirstDays = (weekFirstDays) => { + eachWeekFirstDay.value = weekFirstDays +} + +const formatWeeks = (customWeeks, weekFirstDays) => { + updateWeekFirstDays(weekFirstDays) + return `${customWeeks}w` +}
♻️ Duplicate comments (1)
packages/renderless/src/date-range/index.ts (1)
620-634:⚠️ Potential issueFix inconsistent date method usage.
The implementation uses
getUTCDate()for the day component while using local date methods (getFullYear(),getMonth()) for year and month.Apply this diff to fix the inconsistency:
- const start = modifyDate(newVal, newVal.getFullYear(), newVal.getMonth(), newVal.getUTCDate()) - const end = modifyDate(newVal1, newVal1.getFullYear(), newVal1.getMonth(), newVal1.getUTCDate()) + const start = modifyDate(newVal, newVal.getFullYear(), newVal.getMonth(), newVal.getDate()) + const end = modifyDate(newVal1, newVal1.getFullYear(), newVal1.getMonth(), newVal1.getDate())
🧹 Nitpick comments (9)
examples/sites/demos/pc/app/date-panel/basic-usage.vue (2)
3-6: Add ARIA labels for accessibility.The value display divs should have descriptive ARIA labels to improve accessibility.
- <div class="value">{{ value }}</div> + <div class="value" aria-label="Selected date">{{ value }}</div> - <div class="value1">{{ value1 }}</div> + <div class="value1" aria-label="Selected date range">{{ value1 }}</div>
25-27: Consider making the date range picker width responsive.Hard-coding the width to 668px may cause issues on smaller screens.
.tiny-date-range-picker { - width: 668px; + width: 100%; + max-width: 668px; }examples/sites/demos/pc/app/date-panel/format.vue (1)
4-6: Consider demonstrating multiple date formats.The demo could be more educational by showing different format patterns.
- <tiny-date-panel v-model="value" format="yyyy/MM/dd"></tiny-date-panel> + <tiny-date-panel v-model="value" format="yyyy/MM/dd" class="mb-2"></tiny-date-panel> + <tiny-date-panel v-model="value2" format="dd/MM/yyyy" class="mb-2"></tiny-date-panel> + <tiny-date-panel v-model="value3" format="MM-dd-yyyy"></tiny-date-panel>examples/sites/demos/pc/app/date-panel/event.spec.ts (1)
7-13: Add explicit wait for panel visibility.Add explicit wait for the year panel to be visible before clicking to make the test more reliable.
// datePanel await page.getByRole('button', { name: '2025 年' }).click() + await page.waitForSelector('[role="cell"][name="2025"]', { state: 'visible' }) await expect(page.getByRole('cell', { name: '2025' })).toBeVisible() await page.getByText('2024').click() await page.getByText('七月').click() await page.locator('#event').getByText('17').first().click()examples/sites/demos/pc/app/date-panel/unlink-panels-composition-api.vue (1)
21-22: Consider using computed dates instead of hardcoded valuesUsing hardcoded dates may cause maintenance issues in the future. Consider using computed dates relative to the current date.
-const value = ref(['2025-01-15', '2025-02-15']) -const value1 = ref(['2025-01-15', '2025-02-15']) +const today = new Date() +const nextMonth = new Date(today) +nextMonth.setMonth(today.getMonth() + 1) +const value = ref([today.toISOString().split('T')[0], nextMonth.toISOString().split('T')[0]]) +const value1 = ref([today.toISOString().split('T')[0], nextMonth.toISOString().split('T')[0]])examples/sites/demos/pc/app/date-panel/event-composition-api.vue (1)
17-23: Consolidate event handlers and externalize messagesThe event handlers have similar logic with only message text differences. Consider consolidating them and externalizing the messages for better maintainability and i18n support.
-const handleSelectChange = (value) => { - TinyModal.message({ message: '触发 面板选中 事件，组件绑定值为：' + value, status: 'info' }) -} - -const handleSelectChange1 = (value) => { - TinyModal.message({ message: '触发 区间面板选中 事件，组件绑定值为：' + value, status: 'info' }) -} +const messages = { + panel: '触发 面板选中 事件，组件绑定值为：', + range: '触发 区间面板选中 事件，组件绑定值为：' +} + +const handleSelectChange = (value, type = 'panel') => { + TinyModal.message({ message: messages[type] + value, status: 'info' }) +}examples/sites/demos/pc/app/date-panel/shortcuts-composition-api.vue (2)
14-15: Consider using Date objects for initialization.While string initialization works, using Date objects would be more consistent with the component's internal handling.
-const value = ref('2025-01-15') -const value1 = ref(['2025-01-15', '2025-02-15']) +const value = ref(new Date('2025-01-15')) +const value1 = ref([new Date('2025-01-15'), new Date('2025-02-15')])
41-69: Consider adding type safety to shortcuts.The shortcuts implementation is logically sound, but could benefit from TypeScript interfaces for better maintainability.
interface DateShortcut { text: string; onClick: (picker: { $emit: (event: string, value: [Date, Date]) => void }) => void; } const shortcuts1: DateShortcut[] = [ // ... existing implementation ]examples/sites/demos/apis/date-panel.js (1)
317-464: Consider grouping format options by type.The format options would be more readable if grouped by categories (date, time, etc.).
Consider reorganizing the format documentation into sections:
format: { date: ['d', 'dd', 'M', 'MM', 'yyyy'], time: ['h', 'H', 'hh', 'HH', 'm', 'mm', 's', 'ss'], period: ['a', 'A'], week: ['W', 'WW'] }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (40)
examples/sites/demos/apis/date-panel.js(4 hunks)examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/basic-usage.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/basic-usage.vue(1 hunks)examples/sites/demos/pc/app/date-panel/custom-week.spec.ts(2 hunks)examples/sites/demos/pc/app/date-panel/custom-weeks-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/custom-weeks.vue(2 hunks)examples/sites/demos/pc/app/date-panel/disabled-date-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/disabled-date.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/disabled-date.vue(2 hunks)examples/sites/demos/pc/app/date-panel/event-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/event.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/event.vue(1 hunks)examples/sites/demos/pc/app/date-panel/format-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-panel/format.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/format.vue(1 hunks)examples/sites/demos/pc/app/date-panel/readonly-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-panel/readonly.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/readonly.vue(1 hunks)examples/sites/demos/pc/app/date-panel/shortcuts-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/shortcuts.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/shortcuts.vue(2 hunks)examples/sites/demos/pc/app/date-panel/unlink-panels-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-panel/unlink-panels.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/unlink-panels.vue(1 hunks)examples/sites/demos/pc/app/date-panel/webdoc/date-panel.js(1 hunks)examples/sites/demos/pc/app/date-picker/align.spec.ts(1 hunks)examples/sites/demos/pc/app/date-picker/webdoc/date-picker.js(1 hunks)packages/renderless/src/date-panel/index.ts(2 hunks)packages/renderless/src/date-range/index.ts(7 hunks)packages/renderless/src/date-range/vue.ts(7 hunks)packages/renderless/src/date-table/index.ts(2 hunks)packages/renderless/src/month-table/index.ts(1 hunks)packages/vue/src/date-panel/__tests__/date-panel.test.tsx(1 hunks)packages/vue/src/date-range/__tests__/date-range.test.tsx(1 hunks)packages/vue/src/date-range/src/index.ts(1 hunks)packages/vue/src/date-range/src/mobile-first.vue(1 hunks)packages/vue/src/date-range/src/pc.vue(8 hunks)packages/vue/src/date-table/src/index.ts(1 hunks)packages/vue/src/date-table/src/pc.vue(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (26)
- packages/vue/src/date-table/src/index.ts
- packages/vue/src/date-table/src/pc.vue
- examples/sites/demos/pc/app/date-panel/basic-usage.spec.ts
- examples/sites/demos/pc/app/date-panel/unlink-panels.spec.ts
- examples/sites/demos/pc/app/date-panel/custom-week.spec.ts
- examples/sites/demos/pc/app/date-picker/align.spec.ts
- examples/sites/demos/pc/app/date-panel/readonly.spec.ts
- examples/sites/demos/pc/app/date-panel/shortcuts.spec.ts
- packages/vue/src/date-range/tests/date-range.test.tsx
- examples/sites/demos/pc/app/date-panel/format.spec.ts
- examples/sites/demos/pc/app/date-panel/unlink-panels.vue
- packages/renderless/src/date-panel/index.ts
- packages/renderless/src/month-table/index.ts
- examples/sites/demos/pc/app/date-panel/event.vue
- examples/sites/demos/pc/app/date-panel/custom-weeks.vue
- packages/vue/src/date-range/src/mobile-first.vue
- examples/sites/demos/pc/app/date-panel/disabled-date.spec.ts
- examples/sites/demos/pc/app/date-panel/disabled-date.vue
- examples/sites/demos/pc/app/date-panel/readonly.vue
- examples/sites/demos/pc/app/date-picker/webdoc/date-picker.js
- examples/sites/demos/pc/app/date-panel/format-composition-api.vue
- examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue
- examples/sites/demos/pc/app/date-panel/disabled-date-composition-api.vue
- packages/vue/src/date-range/src/index.ts
- examples/sites/demos/pc/app/date-panel/readonly-composition-api.vue
- packages/renderless/src/date-range/vue.ts
🧰 Additional context used
🪛 ESLint
examples/sites/demos/pc/app/date-panel/basic-usage.vue
[error] 14-15: Delete ⏎
(prettier/prettier)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR Unit Test
🔇 Additional comments (16)
packages/vue/src/date-panel/__tests__/date-panel.test.tsx (1)
9-15: Add test coverage for format prop.While simplifying the test to focus on value prop is good, we should ensure format functionality is tested separately.
Would you like me to help generate a new test case specifically for the format prop?
examples/sites/demos/pc/app/date-panel/event.spec.ts (1)
16-18: Improve selector reliability.Using nth selectors can be fragile. Consider using more reliable selectors or adding test IDs.
- await page.locator('#event').getByText('9', { exact: true }).nth(2).click() - await page.locator('#event').getByText('16').nth(2).click() + // Add data-testid attributes to the template + await page.locator('[data-testid="date-range-start-day-9"]').click() + await page.locator('[data-testid="date-range-end-day-16"]').click()examples/sites/demos/pc/app/date-panel/unlink-panels-composition-api.vue (1)
5-5: Update class name for consistencyThe template uses
demo-date-picker-wrapwhile the style block definesdemo-date-panel-wrap. Update for consistency with other demo files.- <div class="demo-date-picker-wrap"> + <div class="demo-date-panel-wrap">Also applies to: 11-11
examples/sites/demos/pc/app/date-panel/shortcuts-composition-api.vue (1)
5-6: LGTM! Well-structured date range implementation.The template changes properly integrate the date range component with appropriate bindings for v-model and shortcuts.
examples/sites/demos/pc/app/date-panel/webdoc/date-panel.js (1)
80-93: LGTM! Well-documented unlink-panels feature.The documentation is comprehensive with clear descriptions in both languages and proper demo references.
packages/vue/src/date-range/src/pc.vue (1)
54-54: LGTM! Comprehensive readonly implementation.The readonly state is properly handled across all input fields with consistent behavior.
Also applies to: 66-66, 69-69, 91-91, 103-103, 104-104
examples/sites/demos/apis/date-panel.js (2)
63-73: Clarify the generic type for 'shortcuts'.The usage of 'Array' is ambiguous.
- type: 'Array<T>', + type: 'Array<{ text: string; onClick: (picker: any) => void }>',
201-303: LGTM! Well-structured date-range component API.The API documentation is comprehensive with clear property descriptions and proper type definitions.
packages/renderless/src/date-table/index.ts (3)
20-22: LGTM!The new imports are correctly added and used within the file.
65-65: LGTM!The date comparison logic is improved by using
formatDatefor consistent string-based comparison in 'dates' selection mode.
451-453: LGTM!The readonly check is correctly added to prevent user interactions when the component is in readonly mode.
packages/renderless/src/date-range/index.ts (5)
24-25: LGTM!The new imports are correctly added and used within the file.
217-220: LGTM!The readonly check is correctly added to prevent range changes when the component is in readonly mode.
375-377: LGTM!The readonly check is correctly added to prevent range selection when the component is in readonly mode.
435-442: LGTM!The logic is correctly updated to directly apply shortcut selections when available.
561-565: LGTM!The event handling is enhanced with proper format determination and additional event emissions.
discreted66
changed the title
discreted66
force-pushed
the
DateRanges
branch
from
f9b00d0 to
6f3ed85
Compare
There was a problem hiding this comment.
Actionable comments posted: 4
🔭 Outside diff range comments (1)
packages/renderless/src/date-range/index.ts (1)
414-443: Improve error handling in shortcut click handler.The shortcut click handler now supports direct panel usage but lacks error handling for invalid dates.
Apply this diff to add error handling:
if (props.shortcuts?.length) { + if (!start || !end || !toDate1(start) || !toDate1(end)) { + return + } state.value = [start, end] state.leftDate = start state.rightDate = end
♻️ Duplicate comments (3)
examples/sites/demos/pc/app/date-panel/event.spec.ts (1)
16-17: 🛠️ Refactor suggestionImprove selector reliability.
Using nth selectors can be fragile. Consider using more reliable selectors or adding test IDs.
- await page.locator('#event').getByText('9', { exact: true }).nth(2).click() - await page.locator('#event').getByText('16').nth(2).click() + // Add data-testid attributes to the template + await page.locator('[data-testid="date-range-start-day-9"]').click() + await page.locator('[data-testid="date-range-end-day-16"]').click()examples/sites/demos/pc/app/date-panel/shortcuts.vue (1)
41-69: 🛠️ Refactor suggestionImprove shortcuts implementation
The shortcuts implementation has several areas for improvement, including duplicate time calculations and magic numbers.
The previous review comment suggesting the use of a helper function and constants is still applicable. Please refer to the previous suggestion for the implementation details.
packages/renderless/src/date-range/index.ts (1)
620-634:⚠️ Potential issueFix inconsistent date method usage.
The implementation uses
getUTCDate()for the day component while using local date methods (getFullYear(),getMonth()) for year and month. This inconsistency could lead to incorrect date calculations.Apply this diff to fix the inconsistency:
- const start = modifyDate(newVal, newVal.getFullYear(), newVal.getMonth(), newVal.getUTCDate()) - const end = modifyDate(newVal1, newVal1.getFullYear(), newVal1.getMonth(), newVal1.getUTCDate()) + const start = modifyDate(newVal, newVal.getFullYear(), newVal.getMonth(), newVal.getDate()) + const end = modifyDate(newVal1, newVal1.getFullYear(), newVal1.getMonth(), newVal1.getDate())
🧹 Nitpick comments (10)
examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue (1)
12-12: Consider adding type annotations for better maintainability.While the code works correctly, adding TypeScript type annotations would improve code maintainability and IDE support.
-const value = ref('2025-01-15') -const value1 = ref(['2025-01-15', '2025-02-15']) +const value = ref<string>('2025-01-15') +const value1 = ref<[string, string]>(['2025-01-15', '2025-02-15'])Also applies to: 14-15
examples/sites/demos/pc/app/date-panel/basic-usage.vue (1)
25-27: Use consistent class naming across components.The selector differs from the composition API version (
.tiny-date-range-pickervstiny-date-range-picker).- .tiny-date-range-picker { + tiny-date-range-picker {examples/sites/demos/pc/app/date-panel/event.spec.ts (1)
7-8: Consider using test constants for better maintainability.Extract test data and selectors into constants for better maintainability and reusability.
+const TEST_SELECTORS = { + datePanel: '#event', + yearButton: '2025 年', + monthButton: '七月', +} as const; + +const TEST_DATA = { + startDate: '9', + endDate: '16', + year: '2024', +} as const; + test('[DatePanel] 测试事件', async ({ page }) => { // ... - // datePanel + // Date Panel Section // ... - // dateRange + // Date Range SectionAlso applies to: 15-16
examples/sites/demos/pc/app/date-panel/event-composition-api.vue (2)
21-23: Improve event message formattingConsider using template literals for better readability and maintenance.
- TinyModal.message({ message: '触发 区间面板选中 事件，组件绑定值为：' + value, status: 'info' }) + TinyModal.message({ + message: `触发 区间面板选中 事件，组件绑定值为：${value}`, + status: 'info' + })
33-35: Consider using responsive widthThe hardcoded width of 668px might not be optimal for all screen sizes.
- width: 668px; + max-width: 668px; + width: 100%;packages/vue/src/date-range/src/index.ts (2)
38-41: Improve type safety for modelValueThe Array type is too generic. Consider using a more specific type for date ranges.
- type: Array, + type: Array as PropType<[Date | string, Date | string]>, default: () => []
54-57: Add type definition for disabledDate functionConsider adding a proper TypeScript type definition for better type safety.
- type: Function, + type: Function as PropType<(date: Date) => boolean>, default: nullexamples/sites/demos/pc/app/date-panel/shortcuts-composition-api.vue (2)
41-69: Extract time calculations into utility functions.The shortcuts array contains repeated time calculation logic that could be extracted into reusable utility functions.
Consider refactoring to:
+const calculateDateOffset = (days) => { + const end = new Date() + const start = new Date() + start.setTime(start.getTime() - 3600 * 1000 * 24 * days) + return [start, end] +} const shortcuts1 = [ { text: '最近一周', onClick(picker) { - const end = new Date() - const start = new Date() - start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) + const [start, end] = calculateDateOffset(7) picker.$emit('pick', [start, end]) } }, { text: '最近一个月', onClick(picker) { - const end = new Date() - const start = new Date() - start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) + const [start, end] = calculateDateOffset(30) picker.$emit('pick', [start, end]) } }, { text: '最近三个月', onClick(picker) { - const end = new Date() - const start = new Date() - start.setTime(start.getTime() - 3600 * 1000 * 24 * 90) + const [start, end] = calculateDateOffset(90) picker.$emit('pick', [start, end]) } } ]
78-80: Consider using responsive width.The hardcoded width might not be responsive on different screen sizes.
Consider using relative units or CSS Grid/Flexbox:
.tiny-date-range-picker { - width: 668px; + width: 100%; + max-width: 668px; }packages/vue/src/date-range/src/pc.vue (1)
66-69: Consolidate readonly checks.The readonly checks are scattered across multiple places. Consider consolidating them into a computed property.
+const isEditable = computed(() => !readonly && !state.rangeState.selecting) +const isMaxEditable = computed(() => isEditable.value && state.minDate) -@focus="!readonly && (state.minTimePickerVisible = true)" +@focus="isEditable.value && (state.minTimePickerVisible = true)" -:readonly="!timeEditable || readonly" +:readonly="!timeEditable || !isEditable.value" -:readonly="readonly || !state.minDate || !timeEditable" +:readonly="!isMaxEditable.value || !timeEditable" -@focus="state.minDate && !readonly && (state.maxTimePickerVisible = true)" +@focus="isMaxEditable.value && (state.maxTimePickerVisible = true)"Also applies to: 103-104
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (40)
examples/sites/demos/apis/date-panel.js(4 hunks)examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/basic-usage.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/basic-usage.vue(1 hunks)examples/sites/demos/pc/app/date-panel/custom-week.spec.ts(2 hunks)examples/sites/demos/pc/app/date-panel/custom-weeks-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/custom-weeks.vue(2 hunks)examples/sites/demos/pc/app/date-panel/disabled-date-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/disabled-date.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/disabled-date.vue(2 hunks)examples/sites/demos/pc/app/date-panel/event-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/event.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/event.vue(1 hunks)examples/sites/demos/pc/app/date-panel/format-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-panel/format.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/format.vue(1 hunks)examples/sites/demos/pc/app/date-panel/readonly-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-panel/readonly.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/readonly.vue(1 hunks)examples/sites/demos/pc/app/date-panel/shortcuts-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/shortcuts.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/shortcuts.vue(2 hunks)examples/sites/demos/pc/app/date-panel/unlink-panels-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-panel/unlink-panels.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/unlink-panels.vue(1 hunks)examples/sites/demos/pc/app/date-panel/webdoc/date-panel.js(1 hunks)examples/sites/demos/pc/app/date-picker/align.spec.ts(1 hunks)examples/sites/demos/pc/app/date-picker/webdoc/date-picker.js(1 hunks)packages/renderless/src/date-panel/index.ts(2 hunks)packages/renderless/src/date-range/index.ts(7 hunks)packages/renderless/src/date-range/vue.ts(7 hunks)packages/renderless/src/date-table/index.ts(2 hunks)packages/renderless/src/month-table/index.ts(1 hunks)packages/utils/src/date-util/index.ts(1 hunks)packages/vue/src/date-range/__tests__/date-range.test.tsx(1 hunks)packages/vue/src/date-range/src/index.ts(1 hunks)packages/vue/src/date-range/src/mobile-first.vue(1 hunks)packages/vue/src/date-range/src/pc.vue(8 hunks)packages/vue/src/date-table/src/index.ts(1 hunks)packages/vue/src/date-table/src/pc.vue(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (27)
- examples/sites/demos/pc/app/date-picker/align.spec.ts
- packages/vue/src/date-range/src/mobile-first.vue
- packages/vue/src/date-table/src/pc.vue
- examples/sites/demos/pc/app/date-panel/webdoc/date-panel.js
- examples/sites/demos/pc/app/date-panel/format.spec.ts
- examples/sites/demos/pc/app/date-panel/shortcuts.spec.ts
- examples/sites/demos/pc/app/date-panel/custom-week.spec.ts
- examples/sites/demos/pc/app/date-panel/basic-usage.spec.ts
- examples/sites/demos/pc/app/date-panel/unlink-panels.spec.ts
- examples/sites/demos/pc/app/date-panel/disabled-date.spec.ts
- examples/sites/demos/pc/app/date-panel/unlink-panels.vue
- examples/sites/demos/pc/app/date-panel/readonly.spec.ts
- packages/renderless/src/month-table/index.ts
- examples/sites/demos/pc/app/date-panel/readonly.vue
- examples/sites/demos/pc/app/date-panel/unlink-panels-composition-api.vue
- examples/sites/demos/pc/app/date-panel/event.vue
- packages/renderless/src/date-table/index.ts
- packages/vue/src/date-table/src/index.ts
- packages/vue/src/date-range/tests/date-range.test.tsx
- examples/sites/demos/pc/app/date-panel/format.vue
- packages/renderless/src/date-panel/index.ts
- examples/sites/demos/pc/app/date-panel/disabled-date.vue
- examples/sites/demos/pc/app/date-panel/readonly-composition-api.vue
- examples/sites/demos/pc/app/date-panel/disabled-date-composition-api.vue
- packages/renderless/src/date-range/vue.ts
- examples/sites/demos/pc/app/date-picker/webdoc/date-picker.js
- examples/sites/demos/pc/app/date-panel/custom-weeks.vue
🧰 Additional context used
🪛 ESLint
examples/sites/demos/pc/app/date-panel/basic-usage.vue
[error] 14-15: Delete ⏎
(prettier/prettier)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (10)
examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue (1)
3-6: LGTM! Clean integration of the date range component.The template structure is well-organized, with clear separation between single date and date range sections.
examples/sites/demos/pc/app/date-panel/format-composition-api.vue (2)
4-4: LGTM! Consistent format usage across components.The format is properly applied to both date panel and date range components.
Also applies to: 6-6
14-15: Ensure format consistency between refs and components.The initial values in the refs should match the format specified in the components.
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Description: Check format consistency across the codebase # Search for date format patterns in the codebase rg -A 2 'format="[^"]*"' | grep -E '(ref\(|format=)'Length of output: 5188
Formatting is consistent between the refs and the component props.
- In examples/sites/demos/pc/app/date-panel/format-composition-api.vue, the initial ref values ("2025/01/15" and ["2025/01/15", "2025/02/15"]) correctly match the component's format ("yyyy/MM/dd").
examples/sites/demos/pc/app/date-panel/custom-weeks-composition-api.vue (1)
41-43: Consider using responsive widthThe hardcoded width of 668px might not be optimal for all screen sizes.
- width: 668px; + max-width: 668px; + width: 100%;packages/vue/src/date-range/src/pc.vue (1)
262-278: Props need TypeScript types.The props array should use TypeScript for better type safety and developer experience.
examples/sites/demos/apis/date-panel.js (1)
63-73: Clarify the generic type for 'shortcuts'.The usage of 'Array' is ambiguous.
packages/renderless/src/date-range/index.ts (4)
24-25: LGTM! Import statements are properly updated.The addition of
modifyWithTimeStringandDATEPICKERimports aligns with their usage in the modified functions.
217-220: LGTM! Readonly check is properly implemented.The function now checks the
readonlyproperty before making any changes, which is consistent with the PR's objectives.
373-377: LGTM! Readonly check is properly implemented.The function now checks the
readonlyproperty before making any changes, which is consistent with the PR's objectives.
557-565: LGTM! Event emission is properly implemented.The function now correctly emits multiple events with formatted date values:
pickevent with raw date objectsupdate:modelValueevent with formatted datesselect-changeevent with formatted dates
|
标题使用英文，内容描述可以用中文 |
The title is in English, and the content description can be in Chinese |
discreted66
changed the title
已修改 |
Modified |
discreted66
force-pushed
the
DateRanges
branch
from
6f3ed85 to
eadf31e
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
examples/sites/demos/pc/app/date-panel/shortcuts.vue (1)
41-69: 🛠️ Refactor suggestionImprove shortcuts implementation.
The shortcuts implementation can be improved by extracting common date calculation logic and using constants for magic numbers.
packages/vue/src/date-range/src/pc.vue (1)
262-277: 🛠️ Refactor suggestionProps need type definitions.
The props array should use TypeScript for better type safety and developer experience.
🧹 Nitpick comments (3)
examples/sites/demos/pc/app/date-panel/event-composition-api.vue (2)
12-15: Consider using current date-based examples.While the code is correct, consider using dynamic dates relative to the current date for more relevant examples:
-const value = ref('2025-01-15') -const value1 = ref(['2025-01-15', '2025-02-15']) +const today = new Date() +const nextMonth = new Date(today) +nextMonth.setMonth(today.getMonth() + 1) +const value = ref(today.toISOString().split('T')[0]) +const value1 = ref([ + today.toISOString().split('T')[0], + nextMonth.toISOString().split('T')[0] +])
33-35: Consider using responsive width for better adaptability.The hardcoded width might not be optimal for all screen sizes. Consider using relative units or media queries:
.tiny-date-range-picker { - width: 668px; + width: 100%; + max-width: 668px; }examples/sites/demos/pc/app/date-panel/basic-usage.vue (1)
25-27: Consider making the date range picker width configurable.The width is currently hardcoded to 668px. Consider making it configurable through props or CSS variables for better reusability across different contexts.
.tiny-date-range-picker { - width: 668px; + width: var(--tiny-date-range-picker-width, 668px); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (40)
examples/sites/demos/apis/date-panel.js(5 hunks)examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/basic-usage.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/basic-usage.vue(1 hunks)examples/sites/demos/pc/app/date-panel/custom-week.spec.ts(2 hunks)examples/sites/demos/pc/app/date-panel/custom-weeks-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/custom-weeks.vue(2 hunks)examples/sites/demos/pc/app/date-panel/disabled-date-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/disabled-date.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/disabled-date.vue(2 hunks)examples/sites/demos/pc/app/date-panel/event-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/event.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/event.vue(1 hunks)examples/sites/demos/pc/app/date-panel/format-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-panel/format.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/format.vue(1 hunks)examples/sites/demos/pc/app/date-panel/readonly-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-panel/readonly.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/readonly.vue(1 hunks)examples/sites/demos/pc/app/date-panel/shortcuts-composition-api.vue(2 hunks)examples/sites/demos/pc/app/date-panel/shortcuts.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/shortcuts.vue(2 hunks)examples/sites/demos/pc/app/date-panel/unlink-panels-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-panel/unlink-panels.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/unlink-panels.vue(1 hunks)examples/sites/demos/pc/app/date-panel/webdoc/date-panel.js(1 hunks)examples/sites/demos/pc/app/date-picker/align.spec.ts(1 hunks)examples/sites/demos/pc/app/date-picker/webdoc/date-picker.js(1 hunks)packages/renderless/src/date-panel/index.ts(2 hunks)packages/renderless/src/date-range/index.ts(7 hunks)packages/renderless/src/date-range/vue.ts(7 hunks)packages/renderless/src/date-table/index.ts(2 hunks)packages/renderless/src/month-table/index.ts(1 hunks)packages/utils/src/date-util/index.ts(1 hunks)packages/vue/src/date-range/__tests__/date-range.test.tsx(1 hunks)packages/vue/src/date-range/src/index.ts(1 hunks)packages/vue/src/date-range/src/mobile-first.vue(1 hunks)packages/vue/src/date-range/src/pc.vue(8 hunks)packages/vue/src/date-table/src/index.ts(1 hunks)packages/vue/src/date-table/src/pc.vue(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (32)
- packages/vue/src/date-range/src/mobile-first.vue
- examples/sites/demos/pc/app/date-picker/align.spec.ts
- examples/sites/demos/pc/app/date-panel/basic-usage.spec.ts
- examples/sites/demos/pc/app/date-panel/shortcuts.spec.ts
- examples/sites/demos/pc/app/date-panel/format.spec.ts
- packages/vue/src/date-table/src/index.ts
- examples/sites/demos/pc/app/date-panel/shortcuts-composition-api.vue
- examples/sites/demos/pc/app/date-panel/custom-week.spec.ts
- packages/vue/src/date-table/src/pc.vue
- examples/sites/demos/pc/app/date-panel/unlink-panels.vue
- examples/sites/demos/pc/app/date-panel/webdoc/date-panel.js
- packages/renderless/src/date-table/index.ts
- examples/sites/demos/pc/app/date-panel/custom-weeks.vue
- examples/sites/demos/pc/app/date-panel/event.vue
- examples/sites/demos/pc/app/date-panel/disabled-date.spec.ts
- examples/sites/demos/pc/app/date-panel/readonly.vue
- examples/sites/demos/pc/app/date-panel/readonly.spec.ts
- examples/sites/demos/pc/app/date-panel/event.spec.ts
- examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue
- examples/sites/demos/pc/app/date-panel/disabled-date.vue
- examples/sites/demos/pc/app/date-panel/readonly-composition-api.vue
- examples/sites/demos/pc/app/date-panel/format.vue
- examples/sites/demos/pc/app/date-panel/format-composition-api.vue
- packages/vue/src/date-range/tests/date-range.test.tsx
- packages/vue/src/date-range/src/index.ts
- examples/sites/demos/pc/app/date-panel/unlink-panels.spec.ts
- examples/sites/demos/pc/app/date-panel/disabled-date-composition-api.vue
- packages/renderless/src/month-table/index.ts
- packages/renderless/src/date-panel/index.ts
- examples/sites/demos/pc/app/date-panel/unlink-panels-composition-api.vue
- packages/renderless/src/date-range/vue.ts
- packages/utils/src/date-util/index.ts
🧰 Additional context used
🪛 ESLint
examples/sites/demos/pc/app/date-panel/basic-usage.vue
[error] 14-15: Delete ⏎
(prettier/prettier)
🔇 Additional comments (16)
examples/sites/demos/pc/app/date-panel/event-composition-api.vue (2)
3-6: LGTM! Clean template structure with proper component bindings.The template changes follow Vue best practices with clear value displays and proper component bindings.
21-23: LGTM! Consistent event handling implementation.The new event handler follows the established pattern and provides clear feedback.
examples/sites/demos/pc/app/date-panel/basic-usage.vue (1)
5-6: LGTM! Date range component integration looks good.The date range component is properly integrated with appropriate type and model binding.
examples/sites/demos/pc/app/date-panel/custom-weeks-composition-api.vue (1)
11-17: LGTM! Date range component properly integrates with custom week formatting.The component correctly inherits the week formatting configuration from the parent.
packages/vue/src/date-range/src/pc.vue (1)
54-54: LGTM! Comprehensive readonly implementation.The readonly state is properly handled across all interactive elements:
- Input fields
- Time picker triggers
- Date table interactions
- Footer visibility
Also applies to: 66-66, 69-69, 91-91, 103-103, 104-104, 165-165, 215-215, 222-222
examples/sites/demos/apis/date-panel.js (5)
9-11: Incorrect type for disabled-date.The type
() => voidis incorrect as the function should return a boolean indicating whether a date is disabled.Apply this diff to fix the type:
- type: '() => void', + type: '(date: Date) => boolean',
63-73: Clarify the generic type for 'shortcuts'.The usage of 'Array' is ambiguous. Consider specifying actual item structure.
Apply this diff to improve type clarity:
- type: 'Array<T>', + type: 'Array<{ label: string; onClick: () => void }>',
201-303: Verify date-range component type definition.The type definition for the date-range component's
typeproperty uses a string literal type with a|operator, which might cause display issues in the documentation.Apply this diff to fix the type definition:
- type: `'daterange | datetimerange'`, + type: "'daterange' | 'datetimerange'",✅ Verification successful
Action Required: Update the date-range type property definition
The current code uses a single string literal for the union type (
'daterange | datetimerange'), which does not correctly render as a union of two string literals in the documentation. Changing it to the suggested format:- type: `'daterange | datetimerange'`, + type: "'daterange' | 'datetimerange'",ensures that each literal is separately quoted, removing any ambiguity during the documentation rendering.
227-236:⚠️ Potential issueIncorrect type for disabled-date in date-range component.
The same issue with the
disabled-datetype exists in the date-range component.Apply this diff to fix the type:
- type: '() => void', + type: '(date: Date) => boolean',Likely invalid or redundant comment.
271-280: 🛠️ Refactor suggestionClarify the generic type for 'shortcuts' in date-range component.
The same issue with the ambiguous 'Array' type exists in the date-range component.
Apply this diff to improve type clarity:
- type: 'Array<T>', + type: 'Array<{ label: string; onClick: () => void }>',Likely invalid or redundant comment.
examples/sites/demos/pc/app/date-picker/webdoc/date-picker.js (1)
211-217: LGTM! Documentation improvements for panel linkage.The changes provide a clearer explanation of the unlink-panels feature and its behavior.
packages/renderless/src/date-range/index.ts (5)
217-224: LGTM! Readonly support in handleChangeRange.The function now correctly handles the readonly state by preventing changes when readonly is true.
372-412: LGTM! Readonly support in handleRangePick.The function now correctly handles the readonly state by preventing range selection when readonly is true.
🧰 Tools
🪛 Biome (1.9.4)
[error] 398-399: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
414-448: LGTM! Improved shortcuts handling.The function now directly sets state values and calls handleRangePick when shortcuts are available, improving the user experience.
556-567: LGTM! Enhanced event emission in handleConfirm.The function now correctly emits update:modelValue and select-change events with formatted date values.
620-634: Fix inconsistent date method usage.The implementation uses
getUTCDate()for the day component while using local date methods for year and month.Apply this diff to fix the inconsistency:
- const start = modifyDate(newVal, newVal.getFullYear(), newVal.getMonth(), newVal.getUTCDate()) - const end = modifyDate(newVal1, newVal1.getFullYear(), newVal1.getMonth(), newVal1.getUTCDate()) + const start = modifyDate(newVal, newVal.getFullYear(), newVal.getMonth(), newVal.getDate()) + const end = modifyDate(newVal1, newVal1.getFullYear(), newVal1.getMonth(), newVal1.getDate())
|
@all-contributors please add @discreted66 for code. |
|
I've put up a pull request to add @discreted66! 🎉 |
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
New Features
UI & Interaction Enhancements