feat(date-panel): [date-panel,date-picker] DatePicker support using only date panel #2818
Conversation
WalkthroughThis pull request introduces a comprehensive implementation of the DatePanel component for the OpenTiny Vue library. The changes span multiple files across different directories, adding new functionality for date selection, formatting, and interaction. The implementation includes various demos showcasing different use cases such as basic usage, disabled dates, custom week numbering, shortcuts, read-only mode, and event handling. The component is designed with flexibility, supporting the composition API, and providing extensive configuration options. Changes
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 (
|
WalkthroughThis PR introduces a new feature that allows the DatePicker component to support using only the date panel. It includes the addition of new properties, events, and types to the date panel, as well as various demo and test files to showcase the new functionality. Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 15
🔭 Outside diff range comments (1)
packages/renderless/src/date-panel/index.ts (1)
Line range hint
274-290: Ensure correct parameters when callingpanelEmitinhandleDatePickIn
handleDatePick, the call toapi.panelEmit(state.date, t, props)includestandpropsas arguments. SincepanelEmitalready has access totandpropsthrough closure, consider callingapi.panelEmit(state.date)to avoid passing unnecessary parameters.Apply this diff to adjust the function call:
- api.panelEmit(state.date, t, props) + api.panelEmit(state.date)
🧹 Nitpick comments (33)
examples/sites/demos/pc/app/date-panel/shortcuts.spec.ts (2)
4-4: Consider enhancing error handling with more detailed assertions.While catching page errors is good, the current assertion
expect(exception).toBeNull()might not provide enough context when the test fails.Consider this enhancement:
- page.on('pageerror', (exception) => expect(exception).toBeNull()) + page.on('pageerror', (exception) => { + console.error('Page error:', exception); + expect(exception).toBeNull(); + })
1-13: Consider internationalizing button labels for better maintainability.The test uses hardcoded Chinese labels ('今天', '昨天', '一周前'). Consider using a localization system or constants for better maintainability.
Consider this enhancement:
const LABELS = { TODAY: '今天', YESTERDAY: '昨天', WEEK_AGO: '一周前' } as const; test('[DatePanel] 测试快捷选项', async ({ page }) => { // ... existing setup ... await page.getByRole('button', { name: LABELS.TODAY }).click(); await page.getByRole('button', { name: LABELS.YESTERDAY }).click(); await page.getByRole('button', { name: LABELS.WEEK_AGO }).click(); // ... rest of the test ... });examples/sites/demos/pc/app/date-panel/shortcuts.vue (4)
3-3: Add date formatting for better readability.The raw date value might not be user-friendly. Consider formatting the date using a date formatter.
- <div class="value">{{ value }}</div> + <div class="value">{{ value ? new Date(value).toLocaleDateString() : '未选择日期' }}</div>
4-4: Enhance accessibility attributes.Add appropriate ARIA labels to improve accessibility for screen readers.
- <tiny-date-panel v-model="value" :shortcuts="shortcuts"></tiny-date-panel> + <tiny-date-panel + v-model="value" + :shortcuts="shortcuts" + aria-label="日期选择面板" + role="application" + ></tiny-date-panel>
12-12: Consider adding TypeScript type annotations.Adding type annotations would improve code maintainability and provide better IDE support.
-const value = ref() +const value = ref<Date | null>(null)
41-47: Improve responsive design and CSS maintainability.The current styling could be more responsive and maintainable.
.demo-date-panel-wrap { - width: 560px; + max-width: 560px; + width: 100%; & > * { - margin-top: 12px; + margin-block-start: var(--ti-common-space-3x, 12px); } }examples/sites/demos/pc/app/date-panel/shortcuts-composition-api.vue (2)
1-6: Enhance accessibility and value formatting.Consider the following improvements:
- Add ARIA labels for better screen reader support.
- Format the displayed date value for better readability.
<template> <div class="demo-date-panel-wrap"> - <div class="value">{{ value }}</div> + <div class="value" role="status" aria-label="Selected date"> + {{ value ? new Date(value).toLocaleDateString() : 'No date selected' }} + </div> <tiny-date-panel v-model="value" :shortcuts="shortcuts"></tiny-date-panel> </div> </template>
40-48: Consider responsive design improvements.The current styling uses a fixed width which might not work well on smaller screens.
Consider making the component more responsive:
<style scoped lang="less"> .demo-date-panel-wrap { - width: 560px; + max-width: 560px; + width: 100%; & > * { margin-top: 12px; } } </style>packages/renderless/src/date-panel/index.ts (1)
178-185: Add validation fortypeinshowHeaderPickerIn
showHeaderPicker, you're usingDATEPICKER[type]to setstate.currentView. To prevent potential runtime errors due to invalidtypevalues, consider adding validation to ensure thattypeis a valid key withinDATEPICKER.examples/sites/demos/pc/app/date-panel/readonly.vue (1)
1-19: Consider distinguishing component implementations to avoid duplicationThe
readonly.vuecomponent appears identical toreadonly-composition-api.vue, both using the Composition API with<script setup>. If the intention is to provide examples for both the Options API and Composition API, consider refactoringreadonly.vueto use the Options API syntax to avoid duplication.examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue (2)
3-4: Consider adding ARIA attributes for better accessibility.The value display could benefit from proper ARIA attributes to improve screen reader support.
- <div>{{ value }}</div> + <div aria-live="polite" aria-label="Selected date">{{ value }}</div>
8-13: Consider adding type annotation for the ref value.For better type safety and developer experience, consider adding type annotation to the ref.
-const value = ref('') +const value = ref<string>('')examples/sites/demos/pc/app/date-panel/basic-usage.vue (1)
12-13: Remove extra newline to comply with ESLint rules.Remove the extra newline between imports and the value declaration.
import { TinyDatePanel } from '@opentiny/vue' - const value = ref('')🧰 Tools
🪛 eslint
[error] 12-13: Delete
⏎(prettier/prettier)
examples/sites/demos/pc/app/date-panel/format.spec.ts (2)
3-3: Consider using English for test descriptions.For better international collaboration, consider using English for test descriptions.
-test('[DatePanel] 测试格式化', async ({ page }) => { +test('[DatePanel] Test date formatting', async ({ page }) => {
7-11: Use data-testid attributes for more reliable selectors.Using text content for selectors can be fragile. Consider using data-testid attributes instead.
- await page.locator('#format').getByText('15').first().click() + await page.locator('[data-testid="date-panel-day-15"]').click() - await page.locator('#format').getByText('8', { exact: true }).nth(2).click() + await page.locator('[data-testid="date-panel-day-8"]').click()Also consider adding more test cases for different date formats to ensure comprehensive coverage.
examples/sites/demos/pc/app/date-panel/disabled-date.vue (1)
12-15: Add type safety and extract magic numbers.The implementation could benefit from TypeScript types and constants for better maintainability.
-const value = ref('2025-01-02') -const disabledDate = (val) => { - return val.getFullYear() < 2025 -} +const MINIMUM_ALLOWED_YEAR = 2025 +const value = ref<string>('2025-01-02') +const disabledDate = (val: Date): boolean => { + return val.getFullYear() < MINIMUM_ALLOWED_YEAR +}examples/sites/demos/pc/app/date-panel/disabled-date-composition-api.vue (1)
12-15: Consider adding type annotations for better maintainability.The
disabledDatefunction would benefit from TypeScript type annotations for better code maintainability and IDE support.-const value = ref('2025-01-02') -const disabledDate = (val) => { +const value = ref<string>('2025-01-02') +const disabledDate = (val: Date): boolean => { return val.getFullYear() < 2025 }examples/sites/demos/pc/app/date-panel/disabled-date.spec.ts (1)
3-3: Consider using English for test descriptions.For better international collaboration, consider using English for test descriptions.
-test('[DatePanel] 测试时间禁用', async ({ page }) => { +test('[DatePanel] test date disabling functionality', async ({ page }) => {examples/sites/demos/pc/app/date-panel/format.vue (1)
4-4: Extract format strings into constants.Consider extracting the format strings into constants for better maintainability and reusability.
+const DATE_FORMATS = { + HYPHEN: 'yyyy-MM-dd', + SLASH: 'yyyy/MM/dd' +} as const + - <tiny-date-panel v-model="value" format="yyyy-MM-dd"></tiny-date-panel> + <tiny-date-panel v-model="value" :format="DATE_FORMATS.HYPHEN"></tiny-date-panel> - <tiny-date-panel v-model="value1" format="yyyy/MM/dd"></tiny-date-panel> + <tiny-date-panel v-model="value1" :format="DATE_FORMATS.SLASH"></tiny-date-panel>Also applies to: 6-6
packages/vue/src/date-panel/__tests__/date-panel.test.tsx (1)
10-12: Use constants for test values.Extract test values into constants for better maintainability and reusability across test cases.
+const TEST_VALUES = { + DATE: '2025-01-14', + FORMAT: 'yyyy-MM-dd' +} as const + - let value = '2025-01-14' - let format = 'yyyy-MM-dd' + let value = TEST_VALUES.DATE + let format = TEST_VALUES.FORMATexamples/sites/demos/pc/app/date-panel/format-composition-api.vue (2)
14-15: Initialize refs with proper typing for better type safety.Consider adding type annotations to the refs for better TypeScript support and IDE hints.
-const value = ref('') -const value1 = ref('') +const value = ref<string>('') +const value1 = ref<string>('')
19-24: Consider making the component responsive.The fixed width of 560px might not work well on smaller screens. Consider using relative units or media queries for better responsiveness.
.demo-date-panel-wrap { - width: 560px; + width: 100%; + max-width: 560px; .label { margin-top: 18px; } }examples/sites/demos/pc/app/date-panel/readonly.spec.ts (2)
3-3: Consider using English for test descriptions.For better international collaboration, consider using English for test descriptions.
-test('[DatePanel] 测试只读', async ({ page }) => { +test('[DatePanel] test readonly functionality', async ({ page }) => {
13-13: Extract color values into constants.Hardcoded RGB values make tests brittle and harder to maintain. Consider extracting these into theme constants.
+const SELECTED_DATE_BG_COLOR = 'rgb(20, 118, 255)'; // ... -await expect(page.getByText('5', { exact: true }).first()).toHaveCSS('background-color', 'rgb(20, 118, 255)') +await expect(page.getByText('5', { exact: true }).first()).toHaveCSS('background-color', SELECTED_DATE_BG_COLOR)examples/sites/demos/pc/app/date-panel/event-composition-api.vue (1)
12-12: Initialize ref with proper typing and default value.The ref is initialized without a type annotation or default value, which could lead to undefined behavior.
-const value = ref() +const value = ref<string>('')examples/sites/demos/pc/app/date-panel/event.spec.ts (1)
3-16: Consider making the test more maintainable and robust.A few suggestions to improve the test:
- Use dynamic date calculations instead of hardcoded year "2025" to prevent test brittleness
- Consider extracting Chinese text to constants/localization files for better maintainability
- Add comments explaining the test flow and assertions in English
Example refactor:
+ const CURRENT_YEAR = new Date().getFullYear() + 2 // Calculate future year dynamically + const MESSAGES = { + PANEL_SELECT_EVENT: '触发 面板选中 事件，组件绑定值为：' + } test('[DatePanel] 测试事件', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) await page.goto('date-panel#event') - await page.getByRole('button', { name: '2025 年' }).click() - await expect(page.getByRole('cell', { name: '2025' })).toBeVisible() + // Select and verify year + await page.getByRole('button', { name: `${CURRENT_YEAR} 年` }).click() + await expect(page.getByRole('cell', { name: String(CURRENT_YEAR) })).toBeVisible() // ... rest of the test - await expect(page.getByText('触发 面板选中 事件，组件绑定值为：')).toBeVisible() + await expect(page.getByText(MESSAGES.PANEL_SELECT_EVENT)).toBeVisible() })examples/sites/demos/pc/app/date-panel/basic-usage.spec.ts (1)
3-22: Optimize test execution time and enhance reliability.The test is well-structured but takes 16.4s to execute. Consider these improvements:
- Use
test.describe.parallel()to enable parallel test execution- Replace hard-coded text assertions with data-testid selectors
- Add retry logic for flaky UI interactions
-test('[DatePanel] 测试月份/年份/日期选择', async ({ page }) => { +test.describe.parallel('[DatePanel]', () => { + test('测试月份/年份/日期选择', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) await page.goto('date-panel#basic-usage') + await page.waitForLoadState('networkidle')🧰 Tools
🪛 GitHub Actions: E2E Test PR--feat(date-panel): [date-panel,date-picker] DatePicker support using only date panel
[warning] Slow test file execution (16.4s). Consider splitting test file to speed up parallel execution.
packages/vue/src/date-panel/src/index.ts (2)
21-24: Add validation for firstDayOfWeek prop.The
firstDayOfWeekprop should validate that the value is between 1-7 to prevent invalid day selections.firstDayOfWeek: { type: Number, default: 7, + validator: (value) => value >= 1 && value <= 7 },
28-31: Add JSDoc comments for props documentation.The
modelValueandformatprops would benefit from JSDoc comments explaining their expected formats and usage.+/** + * The selected date value. Can be a Date object, timestamp number, or formatted string. + */ modelValue: { type: [Date, String, Number], default: '' }, +/** + * The format string for date display. Follows date-fns format. + * @example 'yyyy-MM-dd' + */ format: { type: String, default: '' },Also applies to: 32-35
examples/sites/demos/pc/app/date-panel/webdoc/date-panel.js (2)
61-63: Add missing English translation for readonly description.The English translation is missing for the readonly demo description.
desc: { 'zh-CN': '<p>通过指定 <code>readonly</code> 设置只读。</p>', - 'en-US': '' + 'en-US': '<p>Set to readonly mode by specifying the <code>readonly</code> property.</p>' },
49-51: Fix HTML formatting in shortcuts description.The English description contains malformed HTML tags.
desc: { 'zh-CN': '<p>通过指定 <code>shortcuts</code> 对象数组可以设置快捷选项。</p>', - 'en-US': '<p><p>You can set shortcut options by specifying the <code>shortcuts</code> array</ p></p>' + 'en-US': '<p>You can set shortcut options by specifying the <code>shortcuts</code> array.</p>' },examples/sites/demos/apis/date-panel.js (1)
112-187: Add missing English descriptions for date format tokens.The format section is missing English descriptions for all format tokens (a, A, d, dd, M, MM, W, WW, yyyy). Please add the English descriptions to maintain consistency with the bilingual documentation approach used throughout the file.
packages/theme/src/date-panel/index.less (1)
31-34: Remove duplicate position:relative style.The
position: relativestyle is duplicated in the.has-timeclass. Consider removing it from one location to avoid style duplication.&__body-wrapper { - position: relative; border: solid 1px var(--tv-DatePanel-border-color-divider); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (35)
examples/sites/demos/apis/date-panel.js(1 hunks)examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue(1 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(1 hunks)examples/sites/demos/pc/app/date-panel/custom-weeks-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-panel/custom-weeks.vue(1 hunks)examples/sites/demos/pc/app/date-panel/disabled-date-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-panel/disabled-date.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/disabled-date.vue(1 hunks)examples/sites/demos/pc/app/date-panel/event-composition-api.vue(1 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(1 hunks)examples/sites/demos/pc/app/date-panel/shortcuts.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/shortcuts.vue(1 hunks)examples/sites/demos/pc/app/date-panel/webdoc/date-panel.cn.md(1 hunks)examples/sites/demos/pc/app/date-panel/webdoc/date-panel.en.md(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(3 hunks)examples/sites/demos/pc/menus.js(1 hunks)packages/renderless/src/date-panel/index.ts(4 hunks)packages/renderless/src/date-panel/vue.ts(8 hunks)packages/theme/src/date-panel/index.less(1 hunks)packages/vue/src/date-panel/__tests__/date-panel.test.tsx(1 hunks)packages/vue/src/date-panel/src/index.ts(1 hunks)packages/vue/src/date-panel/src/mobile-first.vue(1 hunks)packages/vue/src/date-panel/src/pc.vue(4 hunks)packages/vue/src/picker/src/pc.vue(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- examples/sites/demos/pc/app/date-panel/webdoc/date-panel.cn.md
- examples/sites/demos/pc/app/date-panel/webdoc/date-panel.en.md
🧰 Additional context used
🪛 eslint
examples/sites/demos/pc/app/date-panel/basic-usage.vue
[error] 12-13: Delete ⏎
(prettier/prettier)
🪛 GitHub Actions: E2E Test PR--feat(date-panel): [date-panel,date-picker] DatePicker support using only date panel
examples/sites/demos/pc/app/date-panel/basic-usage.spec.ts
[warning] Slow test file execution (16.4s). Consider splitting test file to speed up parallel execution.
examples/sites/demos/pc/app/date-picker/align.spec.ts
[error] 17-17: Test timeout of 30000ms exceeded. Failed to click element due to intercepted pointer events from overlapping elements.
examples/sites/demos/pc/app/date-panel/custom-week.spec.ts
[warning] Slow test file execution (16.6s). Consider splitting test file to speed up parallel execution.
🔇 Additional comments (16)
examples/sites/demos/pc/app/date-panel/shortcuts.spec.ts (1)
1-3: LGTM! Clean test setup with proper imports.The test setup follows Playwright's best practices with proper imports and descriptive test naming.
examples/sites/demos/pc/app/date-panel/shortcuts-composition-api.vue (1)
1-48: Verify uniqueness of the demo implementation.Let's ensure this demo isn't duplicating existing examples.
✅ Verification successful
Implementation verified as unique
This is the only demo implementation showcasing the date panel shortcuts functionality. The related code found in API documentation files confirms this is a valid implementation pattern.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for similar date panel demo files echo "Searching for similar date panel demos..." fd --type f "date-panel.*vue" examples/sites/demos/pc/app/date-panel # Search for shortcut-related code in other files echo "Searching for shortcut-related code in other files..." rg -l "shortcuts.*onClick.*picker" examples/sites/demos/pc/app/date-panelLength of output: 356
Script:
#!/bin/bash # Search for date panel demo files from root echo "Searching for date panel demos..." fd "date-panel" --type f --extension vue # Search for shortcut-related implementations echo "Searching for shortcuts implementation..." rg -l "shortcuts.*\{" --type vue # Search specifically for picker emit patterns echo "Searching for picker emit patterns..." rg -l "picker.\$emit.*pick" --type vueLength of output: 426
Script:
#!/bin/bash # Search for date panel demo files echo "Searching for date panel demos..." fd "date-panel.*\.vue$" examples/sites/demos # Search for shortcut-related implementations echo "Searching for shortcuts implementation..." rg -l "shortcuts.*\{" "examples/sites/demos" # Search specifically for picker emit patterns echo "Searching for picker emit patterns..." rg -l "picker.\$emit.*pick" "examples/sites/demos"Length of output: 477
packages/renderless/src/date-panel/index.ts (1)
168-176: Verify event payload format inpanelEmitThe
panelEmitfunction emitsselect-changeandupdate:modelValueevents with the formatted valueformatVal. Please ensure that any event listeners are prepared to receive a formatted date string instead of aDateobject to prevent potential issues.examples/sites/demos/pc/app/date-panel/readonly-composition-api.vue (1)
1-19: Component implementation looks goodThe
readonly-composition-api.vuecomponent correctly implements a read-only date panel using the Composition API. The code is clear and follows best practices.examples/sites/demos/pc/app/date-panel/disabled-date.vue (1)
3-4: Add validation for the selected date.Consider adding validation to ensure the initial value respects the disabled date constraint.
+import { onMounted } from 'vue' + +onMounted(() => { + const selectedDate = new Date(value.value) + if (disabledDate(selectedDate)) { + console.warn('Initial date falls within disabled range') + } +})examples/sites/demos/pc/app/date-panel/event.vue (1)
12-16: Apply the same improvements as event-composition-api.vue.This component has the same issues as event-composition-api.vue:
- Untyped ref
- Hardcoded Chinese messages
- Missing error handling
Please apply the same improvements suggested in the review of event-composition-api.vue.
examples/sites/demos/apis/date-panel.js (1)
1-221: Well-structured API documentation!The API documentation is comprehensive and well-organized:
- Props are clearly defined with types, default values, and bilingual descriptions
- Events and their signatures are properly documented
- The
IPickerOptionsinterface andITypetype provide clear type definitionspackages/vue/src/picker/src/pc.vue (1)
141-141: Performance optimization: Using v-show for frequently toggled component.Good change! Using
v-showinstead of:visibleis more efficient for components that are frequently toggled, as it avoids the cost of destroying and recreating the DOM node.packages/renderless/src/date-panel/vue.ts (2)
36-36: Good refactor: Consolidated picker functions.The consolidation of
showYearPickerandshowMonthPickerinto a singleshowHeaderPickerfunction reduces code duplication and improves maintainability.Also applies to: 80-80, 213-213
145-165: Verify props reactivity in watchers.The watchers for
modelValueandformatprops look correct, but please ensure:
- The date modification in the
modelValuewatcher handles all edge cases (null, invalid dates)- The format validation in the
formatwatcher prevents invalid formats✅ Verification successful
Watchers implementation is robust and secure
The watchers are correctly implemented with proper validation:
- modelValue watcher handles null/invalid dates through toDate conversion
- format validation is properly handled at the picker component level
- The implementation follows the component hierarchy design pattern with shared validation utilities
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for tests covering the props watchers rg -A 5 "modelValue.*watcher|format.*watcher" "examples/sites/demos/pc/app/date-panel/*.spec.ts"Length of output: 187
Script:
#!/bin/bash # Find test files related to date-panel fd -e spec.ts -e test.ts date-panel # Look for toDate implementation ast-grep --pattern 'function toDate($_) { $$$ }' # Search for format validation rg -A 5 "format.*validation|validateFormat" # Find any imports of date utilities that might contain toDate rg -l "import.*toDate"Length of output: 1410
Script:
#!/bin/bash # Find toDate export and implementation ast-grep --pattern 'export $_$ toDate' # Look for date format handling in picker component rg -A 10 "format.*=" "packages/renderless/src/picker/" # Check for error handling around invalid dates rg -A 5 "invalid.*date|isValid" "packages/renderless/src/"Length of output: 44839
packages/vue/src/date-panel/src/mobile-first.vue (1)
90-90: Consistent implementation with consolidated picker function.The click handlers have been correctly updated to use the new
showHeaderPickerfunction, maintaining consistency with the renderless logic changes.Also applies to: 98-98
packages/vue/src/date-panel/src/pc.vue (4)
28-28: Improved performance by using v-if for conditional rendering.The change from
v-showtov-ifis a good optimization as it removes the DOM elements when there are no shortcuts, rather than just hiding them.
101-105: Good refactor: Consolidated picker methods.The consolidation of separate methods into a single
showHeaderPickermethod with a parameter reduces code duplication and improves maintainability.
332-332: LGTM: Added v-model support.The addition of
update:modelValueto emits follows Vue's v-model convention correctly.
296-329: Verify the default value of firstDayOfWeek prop.The
firstDayOfWeekprop defaults to 7, which typically represents Sunday in JavaScript's Date API (where 0 is Sunday). This might be confusing as most implementations use 0 or 1 as default.Please verify if this aligns with the expected behavior:
Also, all new props are well-defined with proper types and defaults, enhancing the component's configurability.
✅ Verification successful
The firstDayOfWeek prop's default value of 7 is correct and well-documented
The default value of 7 for Sunday is intentionally designed this way and is consistently implemented across the codebase. This is explicitly documented in both Chinese and English documentation, and the implementation is uniform across all related components (date-panel, date-picker, date-range).
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for firstDayOfWeek usage in tests and documentation rg -A 5 "firstDayOfWeek.*[07]" --type vue --type jsLength of output: 81
Script:
#!/bin/bash # Search for firstDayOfWeek without file type restrictions rg -l "firstDayOfWeek" # Search for specific value 7 in relation to firstDayOfWeek rg -A 5 -B 5 "firstDayOfWeek.*7" # Look for test files containing firstDayOfWeek fd "test|spec" -e js -e vue | xargs rg "firstDayOfWeek" # Look for documentation files fd "README|docs" | xargs rg "firstDayOfWeek"Length of output: 8271
examples/sites/demos/pc/menus.js (1)
133-133: LGTM: Menu entry properly structured.The DatePanel component is correctly added to the form components menu with all required fields.
discreted66
force-pushed
the
datepanel
branch
from
886a770 to
8c23c04
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/renderless/src/date-panel/index.ts (1)
217-226:⚠️ Potential issueFix function signature mismatch in handleShortcutClick.
The functions
handleDatePickanddoPickare defined to accept a single parameter but are being called with two arguments. This will cause the second argument to be silently ignored.const picker = { $emit: (type, start, end) => { if (props.shortcuts?.length) { - api.handleDatePick(start, end) + api.handleDatePick(start) } else { - api.doPick(start, end) + api.doPick(start) } } }
🧹 Nitpick comments (9)
examples/sites/demos/pc/app/date-picker/basic-usage.spec.ts (1)
73-74: Consider extracting common selectors into helper functions.While the improved element selection is good, consider extracting these commonly used selectors into helper functions to improve maintainability and reduce duplication. For example:
const selectMonth = async (page: Page, month: string) => { await page.getByRole('cell', { name: month }).locator('a').click(); } const selectDay = async (page: Page, day: string) => { await page.getByRole('rowgroup').getByText(day).first().click(); }This would make the tests more DRY and easier to maintain.
examples/sites/demos/pc/app/date-panel/format-composition-api.vue (4)
2-7: Add accessibility attributes and improve UX.The template should include proper accessibility attributes and more descriptive labels for better user experience.
Consider applying these improvements:
<div class="demo-date-panel-wrap"> - <div>{{ value }}</div> - <tiny-date-panel v-model="value" format="yyyy-MM-dd"></tiny-date-panel> - <div class="label">{{ value1 }}</div> - <tiny-date-panel v-model="value1" format="yyyy/MM/dd"></tiny-date-panel> + <div> + <label id="format1-label">Date (yyyy-MM-dd):</label> + <div aria-labelledby="format1-label">{{ value || 'No date selected' }}</div> + <tiny-date-panel + v-model="value" + format="yyyy-MM-dd" + aria-labelledby="format1-label" + ></tiny-date-panel> + </div> + <div class="label"> + <label id="format2-label">Date (yyyy/MM/dd):</label> + <div aria-labelledby="format2-label">{{ value1 || 'No date selected' }}</div> + <tiny-date-panel + v-model="value1" + format="yyyy/MM/dd" + aria-labelledby="format2-label" + ></tiny-date-panel> + </div> </div>
10-16: Consider using TypeScript and add format validation.The script could benefit from type safety and format validation.
Consider converting to TypeScript and adding format validation:
-<script setup> +<script setup lang="ts"> import { ref } from 'vue' import { TinyDatePanel } from '@opentiny/vue' +import type { PropType } from 'vue' + +// Validate date format +const validateDateFormat = (date: string, format: string) => { + // Add format validation logic here + return true +} -const value = ref('') -const value1 = ref('') +const value = ref<string>('') +const value1 = ref<string>('') + +// Define props for documentation +defineProps({ + format: { + type: String as PropType<string>, + default: 'yyyy-MM-dd', + validator: (format: string) => validateDateFormat('2024-01-01', format) + } +}) </script>
18-25: Improve responsive design and add focus states.The styles could be more responsive and accessible.
Consider these style improvements:
<style scoped lang="less"> .demo-date-panel-wrap { - width: 560px; + max-width: 560px; + width: 100%; + padding: 1rem; + .label { - margin-top: 18px; + margin-top: 1.125rem; } + + :deep(.tiny-date-panel) { + &:focus-within { + outline: 2px solid var(--ti-focus-color, #5e7ce0); + outline-offset: 2px; + } + } } </style>
1-25: Add JSDoc comments for better documentation.Since this is a demo file, it would be helpful to add documentation explaining the purpose and usage of the component.
Consider adding these comments at the top of the file:
+<!-- + * Copyright (c) 2024 - present TinyVue Authors. + * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd. + * + * Use of this source code is governed by an MIT-style license. + --> + +<!-- + * This demo showcases the TinyDatePanel component with different date formats: + * - Basic usage with yyyy-MM-dd format + * - Alternative format using yyyy/MM/dd + * + * @title Date Panel Format Demo + * @description Demonstrates different date formatting options using the Composition API + --> <template>examples/sites/demos/pc/app/date-panel/basic-usage.vue (2)
1-6: Consider adding aria-label for better accessibility.The template should include an aria-label on the div displaying the selected value to improve accessibility.
- <div>{{ value }}</div> + <div aria-label="Selected date">{{ value }}</div>
8-14: Initialize value with a default date.Consider initializing the
valueref with a default date to provide a better user experience.-const value = ref('') +const value = ref(new Date().toISOString())🧰 Tools
🪛 eslint
[error] 12-13: Delete
⏎(prettier/prettier)
packages/vue/src/date-panel/src/pc.vue (1)
296-330: Consider adding validation for firstDayOfWeek prop.The
firstDayOfWeekprop should be validated to ensure it's between 1 and 7.firstDayOfWeek: { type: Number, - default: 7 + default: 7, + validator: (value) => value >= 1 && value <= 7 },examples/sites/demos/pc/app/date-picker/events.spec.ts (1)
6-7: Document the common setup pattern.These setup steps (settings button click and '单示例' selection) match the pattern seen in
default-value.spec.ts. Consider documenting this common setup requirement in a test helper or comments.Example documentation in a test helper:
// test-helpers.ts export async function setupDatePickerTest(page) { // Common setup for date picker tests await page.locator('.settings-btn').first().click() await page.locator('label').filter({ hasText: '单示例' }).click() }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (41)
examples/sites/demos/apis/date-panel.js(1 hunks)examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue(1 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(1 hunks)examples/sites/demos/pc/app/date-panel/custom-weeks-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-panel/custom-weeks.vue(1 hunks)examples/sites/demos/pc/app/date-panel/disabled-date-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-panel/disabled-date.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/disabled-date.vue(1 hunks)examples/sites/demos/pc/app/date-panel/event-composition-api.vue(1 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(1 hunks)examples/sites/demos/pc/app/date-panel/shortcuts.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/shortcuts.vue(1 hunks)examples/sites/demos/pc/app/date-panel/webdoc/date-panel.cn.md(1 hunks)examples/sites/demos/pc/app/date-panel/webdoc/date-panel.en.md(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/basic-usage.spec.ts(1 hunks)examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-picker/custom-suffix-icon.spec.ts(1 hunks)examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue(1 hunks)examples/sites/demos/pc/app/date-picker/default-value.spec.ts(1 hunks)examples/sites/demos/pc/app/date-picker/events.spec.ts(1 hunks)examples/sites/demos/pc/menus.js(1 hunks)packages/renderless/src/date-panel/index.ts(4 hunks)packages/renderless/src/date-panel/vue.ts(8 hunks)packages/theme/src/date-panel/index.less(1 hunks)packages/vue/src/date-panel/__tests__/date-panel.test.tsx(1 hunks)packages/vue/src/date-panel/src/index.ts(1 hunks)packages/vue/src/date-panel/src/mobile-first.vue(1 hunks)packages/vue/src/date-panel/src/pc.vue(4 hunks)packages/vue/src/picker/src/pc.vue(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
- examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
🚧 Files skipped from review as they are similar to previous changes (30)
- examples/sites/demos/pc/app/date-panel/webdoc/date-panel.en.md
- examples/sites/demos/pc/app/date-panel/webdoc/date-panel.cn.md
- examples/sites/demos/pc/app/date-panel/disabled-date.vue
- packages/vue/src/date-panel/src/mobile-first.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/readonly.vue
- packages/theme/src/date-panel/index.less
- examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue
- examples/sites/demos/pc/app/date-panel/readonly.spec.ts
- examples/sites/demos/pc/app/date-panel/event.spec.ts
- packages/vue/src/picker/src/pc.vue
- examples/sites/demos/pc/app/date-panel/webdoc/date-panel.js
- examples/sites/demos/pc/app/date-panel/shortcuts.spec.ts
- examples/sites/demos/pc/app/date-panel/format.spec.ts
- packages/vue/src/date-panel/tests/date-panel.test.tsx
- examples/sites/demos/pc/app/date-panel/disabled-date-composition-api.vue
- examples/sites/demos/pc/app/date-panel/basic-usage.spec.ts
- examples/sites/demos/pc/app/date-panel/disabled-date.spec.ts
- examples/sites/demos/pc/app/date-panel/custom-week.spec.ts
- examples/sites/demos/pc/app/date-panel/custom-weeks-composition-api.vue
- examples/sites/demos/pc/app/date-panel/shortcuts-composition-api.vue
- examples/sites/demos/pc/menus.js
- examples/sites/demos/pc/app/date-panel/event-composition-api.vue
- examples/sites/demos/pc/app/date-panel/shortcuts.vue
- examples/sites/demos/pc/app/date-picker/align.spec.ts
- packages/vue/src/date-panel/src/index.ts
- examples/sites/demos/apis/date-panel.js
- examples/sites/demos/pc/app/date-panel/event.vue
- 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] 12-13: Delete ⏎
(prettier/prettier)
🔇 Additional comments (12)
examples/sites/demos/pc/app/date-picker/basic-usage.spec.ts (1)
65-66: LGTM! Improved element selection strategy.The changes enhance test reliability by using semantic roles and more precise element targeting. This makes the tests more resilient to UI changes and follows Playwright's best practices.
examples/sites/demos/pc/app/date-panel/basic-usage.vue (1)
16-24: LGTM!The styles are well-structured and use appropriate selectors.
packages/renderless/src/date-panel/vue.ts (3)
36-36: LGTM!The consolidation of
showYearPickerandshowMonthPickerintoshowHeaderPickerimproves code maintainability.Also applies to: 80-80
91-106: LGTM!The state initialization with props improves component flexibility and configuration.
145-165: LGTM!The watch functions for
modelValueandformatprops are well implemented with proper immediate execution.packages/vue/src/date-panel/src/pc.vue (2)
Line range hint
28-38: LGTM!The conditional rendering of shortcuts improves performance by avoiding unnecessary DOM elements.
Line range hint
101-110: LGTM!The header click handlers now use the consolidated
showHeaderPickerfunction with appropriate parameters.packages/renderless/src/date-panel/index.ts (3)
168-176: LGTM!The
panelEmitfunction properly updates state and emits events with formatted values.
178-185: LGTM!The
showHeaderPickerfunction correctly handles readonly state and view switching.
Line range hint
274-290: LGTM!The
handleDatePickfunction now properly handles readonly state and emits events correctly.examples/sites/demos/pc/app/date-picker/custom-suffix-icon.spec.ts (1)
6-6: LGTM! Improved selector specificity.The change from a generic
i pathto.demo-custom-suffix-icon pathselector makes the test more robust by targeting the specific custom suffix icon element.examples/sites/demos/pc/app/date-picker/default-value.spec.ts (1)
6-7: Verify the necessity of new setup steps.The added interactions with settings button and '单示例' (single example) selection appear to be setting up the test environment. Please confirm if these steps are necessary prerequisites for testing default values.
Run this script to check if these setup steps are consistent across other test files:
✅ Verification successful
Setup steps are necessary and consistent with other tests
The setup sequence (clicking settings button and selecting single example mode) is a legitimate prerequisite found consistently in multiple date picker test files, including
align.spec.tsandevents.spec.ts. These steps help isolate the test conditions for proper validation of the date picker's default value behavior.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for similar setup patterns across date-picker tests # Look for settings button click followed by single example selection rg -B 2 -A 2 "settings-btn.*click.*单示例" "examples/sites/demos/pc/app/date-picker/*.spec.ts"Length of output: 183
Script:
#!/bin/bash # First find all date-picker spec files echo "=== Date picker spec files ===" fd "\.spec\.ts$" examples/sites/demos/pc/app/date-picker echo -e "\n=== Settings button clicks ===" rg "settings-btn.*click" examples/sites/demos/pc/app/date-picker echo -e "\n=== Single example selections ===" rg "单示例.*click" examples/sites/demos/pc/app/date-picker echo -e "\n=== Full content of default-value.spec.ts ===" cat examples/sites/demos/pc/app/date-picker/default-value.spec.tsLength of output: 3857
discreted66
force-pushed
the
datepanel
branch
from
8c23c04 to
79b78ca
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
packages/renderless/src/date-panel/index.ts (1)
Line range hint
274-290: Consider consolidating emit calls.The function currently calls both
cusEmitandpanelEmit, which could lead to duplicate events being emitted. Consider consolidating these into a single emit mechanism.if (state.selectionMode === DATEPICKER.Day) { let newDate = state.value ? modifyDate(state.value, value.getFullYear(), value.getMonth(), value.getDate()) : modifyWithTimeString(value, state.defaultTime, t) if (!api.checkDateWithinRange(newDate)) { newDate = modifyDate(state.selectableRange[0][0], value.getFullYear(), value.getMonth(), value.getDate()) } state.date = newDate - api.cusEmit(state.date, state.showTime) api.panelEmit(state.date, t, props) }
♻️ Duplicate comments (1)
packages/renderless/src/date-panel/index.ts (1)
217-226:⚠️ Potential issueFix function signature mismatch in shortcut handling.
The functions
handleDatePickanddoPickare defined to accept a single parameter but are being called with two arguments (start, end). This will cause the second argument to be silently ignored.Consider updating the function signatures to handle both arguments:
-export const handleDatePick = ({ api, state, t, props }) => (value) => { +export const handleDatePick = ({ api, state, t, props }) => (start, end) => { if (props.readonly) { return } - // ... use value + const value = end ? [start, end] : start; // ... rest of the function } -export const doPick = (emit) => (date) => { +export const doPick = (emit) => (start, end) => { - emit('pick', date, false) + emit('pick', end ? [start, end] : start, false) }
🧹 Nitpick comments (7)
examples/sites/demos/pc/app/date-panel/basic-usage.vue (2)
8-14: Remove extra newline between imports and variable declaration.There's an unnecessary double newline that should be removed to comply with the linting rules.
import { ref } from 'vue' import { TinyDatePanel } from '@opentiny/vue' - const value = ref('')🧰 Tools
🪛 eslint
[error] 12-13: Delete
⏎(prettier/prettier)
16-24: Consider responsive width.The fixed width of 560px might not be ideal for all screen sizes.
.demo-date-panel-wrap { - width: 560px; + width: 100%; + max-width: 560px;examples/sites/demos/apis/date-panel.js (2)
115-118: Add missing English descriptions for format options.The format options are missing English descriptions, which is important for international developers.
For example:
name: 'a', desc: { 'zh-CN': 'am/pm', - 'en-US': '' + 'en-US': 'Lowercase meridiem (am/pm)' }Also applies to: 124-127, 134-136, 142-144, 150-152, 158-160, 166-168, 174-176, 182-184
195-211: Consider adding validation for firstDayOfWeek.The
IPickerOptionsinterface should validate thatfirstDayOfWeekis between 1 and 7.interface IPickerOptions { - firstDayOfWeek: number + firstDayOfWeek: 1 | 2 | 3 | 4 | 5 | 6 | 7packages/vue/src/date-panel/src/pc.vue (2)
Line range hint
28-40: Improve shortcuts rendering condition.The
v-if="state.shortcuts?.length"condition is good for performance, but consider adding a null check.-v-if="state.shortcuts?.length" +v-if="Array.isArray(state.shortcuts) && state.shortcuts.length"
296-329: Add JSDoc comments for new props.The new props should have JSDoc comments explaining their purpose and expected values.
Example:
+/** + * The first day of the week (1 = Monday, 7 = Sunday) + * @default 7 + */ firstDayOfWeek: { type: Number, default: 7 },packages/renderless/src/date-panel/index.ts (1)
168-176: LGTM! Consider adding TypeScript types.The implementation correctly follows Vue's v-model convention and maintains state consistency.
Consider adding TypeScript types for better type safety:
-export const panelEmit = +export const panelEmit = <T extends Date> ({ state, emit, t, props }: { + state: { date: T; value: T }; + emit: (event: string, ...args: any[]) => void; + t: (key: string) => string; + props: { format: string }; }) =>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (42)
examples/sites/demos/apis/date-panel.js(1 hunks)examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue(1 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(1 hunks)examples/sites/demos/pc/app/date-panel/custom-weeks-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-panel/custom-weeks.vue(1 hunks)examples/sites/demos/pc/app/date-panel/disabled-date-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-panel/disabled-date.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/disabled-date.vue(1 hunks)examples/sites/demos/pc/app/date-panel/event-composition-api.vue(1 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(1 hunks)examples/sites/demos/pc/app/date-panel/shortcuts.spec.ts(1 hunks)examples/sites/demos/pc/app/date-panel/shortcuts.vue(1 hunks)examples/sites/demos/pc/app/date-panel/webdoc/date-panel.cn.md(1 hunks)examples/sites/demos/pc/app/date-panel/webdoc/date-panel.en.md(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/basic-usage.spec.ts(1 hunks)examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-picker/custom-suffix-icon.spec.ts(1 hunks)examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue(1 hunks)examples/sites/demos/pc/app/date-picker/default-value.spec.ts(1 hunks)examples/sites/demos/pc/app/date-picker/events.spec.ts(1 hunks)examples/sites/demos/pc/menus.js(1 hunks)internals/playwright-config/src/index.js(1 hunks)packages/renderless/src/date-panel/index.ts(4 hunks)packages/renderless/src/date-panel/vue.ts(8 hunks)packages/theme/src/date-panel/index.less(1 hunks)packages/vue/src/date-panel/__tests__/date-panel.test.tsx(1 hunks)packages/vue/src/date-panel/src/index.ts(1 hunks)packages/vue/src/date-panel/src/mobile-first.vue(1 hunks)packages/vue/src/date-panel/src/pc.vue(4 hunks)packages/vue/src/picker/src/pc.vue(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (37)
- examples/sites/demos/pc/app/date-picker/events.spec.ts
- examples/sites/demos/pc/app/date-panel/webdoc/date-panel.cn.md
- examples/sites/demos/pc/app/date-picker/default-value.spec.ts
- examples/sites/demos/pc/app/date-panel/webdoc/date-panel.en.md
- examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
- examples/sites/demos/pc/app/date-panel/event.spec.ts
- examples/sites/demos/pc/app/date-panel/readonly.spec.ts
- examples/sites/demos/pc/app/date-panel/format.spec.ts
- packages/theme/src/date-panel/index.less
- examples/sites/demos/pc/app/date-picker/custom-suffix-icon.spec.ts
- examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
- examples/sites/demos/pc/app/date-panel/readonly-composition-api.vue
- examples/sites/demos/pc/app/date-panel/format.vue
- packages/vue/src/picker/src/pc.vue
- examples/sites/demos/pc/menus.js
- examples/sites/demos/pc/app/date-panel/custom-week.spec.ts
- examples/sites/demos/pc/app/date-panel/disabled-date.vue
- examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue
- examples/sites/demos/pc/app/date-panel/shortcuts.spec.ts
- examples/sites/demos/pc/app/date-panel/shortcuts.vue
- examples/sites/demos/pc/app/date-panel/basic-usage.spec.ts
- packages/vue/src/date-panel/tests/date-panel.test.tsx
- examples/sites/demos/pc/app/date-panel/event-composition-api.vue
- packages/vue/src/date-panel/src/mobile-first.vue
- examples/sites/demos/pc/app/date-panel/custom-weeks.vue
- examples/sites/demos/pc/app/date-panel/disabled-date.spec.ts
- examples/sites/demos/pc/app/date-panel/webdoc/date-panel.js
- examples/sites/demos/pc/app/date-panel/format-composition-api.vue
- examples/sites/demos/pc/app/date-panel/disabled-date-composition-api.vue
- examples/sites/demos/pc/app/date-picker/align.spec.ts
- examples/sites/demos/pc/app/date-picker/basic-usage.spec.ts
- examples/sites/demos/pc/app/date-panel/custom-weeks-composition-api.vue
- examples/sites/demos/pc/app/date-panel/event.vue
- examples/sites/demos/pc/app/date-panel/shortcuts-composition-api.vue
- packages/vue/src/date-panel/src/index.ts
- examples/sites/demos/pc/app/date-panel/readonly.vue
- packages/renderless/src/date-panel/vue.ts
🧰 Additional context used
🪛 eslint
examples/sites/demos/pc/app/date-panel/basic-usage.vue
[error] 12-13: Delete ⏎
(prettier/prettier)
🔇 Additional comments (5)
internals/playwright-config/src/index.js (1)
68-68: LGTM! Verify viewport requirements.The increased viewport dimensions (1600x960) should accommodate the date panel component's UI elements better.
Run this script to verify if the date panel's dimensions fit within the new viewport:
✅ Verification successful
Viewport dimensions are appropriate ✓
The codebase scan confirms no component widths exceed the 1600px viewport. Larger dimensions found are for scrollable content (like sticky demos) or horizontal menus, which is expected behavior.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check if any CSS defines widths/heights exceeding viewport dimensions rg -g '*.{css,less,scss,vue}' 'width:|height:' | grep -E '[0-9]{4,}px'Length of output: 2731
examples/sites/demos/pc/app/date-panel/basic-usage.vue (1)
1-6: LGTM! Clean template structure.The template follows Vue best practices with proper class naming and component structure.
packages/vue/src/date-panel/src/pc.vue (2)
332-332: LGTM! Proper event handling.The component correctly emits the necessary events including the v-model update event.
Line range hint
101-109: Verify header picker functionality.The change from specific methods to a generic
showHeaderPickermethod needs verification to ensure it handles all cases correctly.✅ Verification successful
Header picker functionality verified successfully
The new
showHeaderPickermethod is properly implemented and consistently used across both PC and mobile-first versions. The state management for view transitions between year, month, and date views is correctly handled with appropriate conditionals.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for any remaining references to old picker methods rg "showYearPicker|showMonthPicker" --type vueLength of output: 76
Script:
#!/bin/bash # Search for old and new picker methods rg "showYearPicker|showMonthPicker|showHeaderPicker" -A 5 # Search for state management related to year/month view rg "currentView.*['\"](?:year|month|date)['\"]" -A 3Length of output: 11500
packages/renderless/src/date-panel/index.ts (1)
178-185: LGTM! Clean consolidation of picker functions.The implementation properly respects the readonly prop and provides a more maintainable solution by consolidating the month and year picker functions.
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
Based on the comprehensive changes, here are the updated release notes for the DatePanel component:
New Features
Improvements
Documentation
Testing