refactor(date-picker): [date-picker] modify variable names and styles for date-picker

[MomoPoppy]

…es for date-picker

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

• New Features
  • Enhanced date and time picker functionality with improved state management and formatting options.
  • Introduced new CSS variables for better theming and styling consistency across components.
• Bug Fixes
  • Resolved issues with infinite loops when emitting database time.
• Documentation
  • Updated comments in CSS files to clarify the purpose of various variables.
• Refactor
  • Reorganized CSS variable naming conventions to improve clarity and maintainability.
  • Consolidated styles within various components for better structure and organization.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

The pull request introduces significant enhancements to various components within the UI library, particularly focusing on the picker, date, time, and range components. Key changes include the addition of new functions for managing state and formatting, updates to CSS variable naming conventions, and structural modifications to Vue component templates for improved layout. The changes aim to streamline styling and enhance functionality, including better handling of time ranges, improved state management, and a more organized approach to CSS variables across components.

Changes

File Path	Change Summary
packages/renderless/src/picker/index.ts	Added watchIsRange function; updated getType, watchModelValue, computedFormat, computedTriggerClass, computedHaveTrigger, initPopper, and emitDbTime functions to improve state management and formatting.
packages/theme/src/base/vars.less	Added comments for clarity and specified default values for CSS variables.
packages/theme/src/date-panel/index.less	Renamed and redefined CSS variables and class structures for the date panel, including updates to styles and the introduction of new classes.
packages/theme/src/date-panel/vars.less	Removed old CSS variables related to the picker panel; introduced new variables specific to the tv-DatePanel component.
packages/theme/src/date-picker/index.less	Completely removed styles for the date picker component, including imports and variable declarations.
packages/theme/src/date-picker/vars.less	Removed the .component-css-vars-date-picker() function that defined CSS variables for the date picker.
packages/theme/src/date-range/index.less	Updated styling rules for the date range picker, focusing on header, content, and time picker sections with new variables.
packages/theme/src/date-range/vars.less	Overhauled CSS variables for the date range picker, introducing new variables and removing old ones.
packages/theme/src/date-table/index.less	Renamed CSS variables from --ti-date-table-* to --tv-DateTable-*, updating properties throughout the styles.
packages/theme/src/date-table/vars.less	Updated CSS variables for the date table, reflecting a new naming convention and enhancing clarity.
packages/theme/src/month-table/index.less	Updated CSS variable references and modified styles for the month table, enhancing consistency with new variable names.
packages/theme/src/month-table/vars.less	Overhauled CSS variables for the month table, introducing new variables and removing old ones.
packages/theme/src/picker/index.less	Renamed CSS class prefixes and restructured styles associated with the picker component, aligning with a new design system.
packages/theme/src/picker/vars.less	Introduced new CSS variables for the picker component, enhancing customization options.
packages/theme/src/quarter-panel/index.less	Updated header styles to use CSS variables, enhancing maintainability and responsiveness.
packages/theme/src/quarter-panel/vars.less	Introduced new CSS variables for styling the quarter panel component.
packages/theme/src/time-panel/index.less	Updated styles to utilize new CSS variables for the time panel, enhancing maintainability and theming flexibility.
packages/theme/src/time-panel/vars.less	Overhauled CSS variables for the time panel, introducing new variables and removing old ones.
packages/theme/src/time-range/index.less	Updated styling rules for the time range picker, transitioning to a new variable naming convention.
packages/theme/src/time-range/vars.less	Complete overhaul of CSS variable definitions for the time range picker, reflecting a new naming scheme.
packages/theme/src/time-spinner/index.less	Updated CSS variables and structural modifications for the time spinner component.
packages/theme/src/time-spinner/vars.less	Introduced new CSS variables for the time spinner, indicating a rebranding of variable naming conventions.
packages/theme/src/year-table/index.less	Removed references to the date picker component from the year table's styles.
packages/theme/src/year-table/vars.less	Removed specific CSS variables related to the year table component.
packages/vue/src/date-panel/src/pc.vue	Structural modifications to the template, enhancing layout with a new wrapper <div>.
packages/vue/src/date-range/src/pc.vue	Wrapped date-table components in a new <div> for improved layout.
packages/vue/src/month-range/src/pc.vue	Updated class names and wrapped <month-table> components in a new <div> for layout improvements.
packages/vue/src/picker/src/pc.vue	Added a new class to the main <div> for the picker component, indicating future changes.
packages/vue/src/time-range/src/pc.vue	Added a new class to the main <div> for the time range picker, enhancing styling.
packages/vue/src/time/src/pc.vue	Updated class names for the main container <div>, restructuring for styling purposes.
packages/vue/src/year-range/src/pc.vue	Wrapped year-table components in a new <div> for layout improvements.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant PickerComponent
    participant DatePanel
    participant TimePanel

    User->>PickerComponent: Select date or time
    PickerComponent->>DatePanel: Update state and display date
    PickerComponent->>TimePanel: Update state and display time
    DatePanel->>User: Show selected date
    TimePanel->>User: Show selected time

Loading

Possibly related PRs

• feat(time-picker): [time-picker] updata time frame xdesign #2092: Updates to the time picker component's styles, potentially related to the main PR's enhancements.
• feat(drop-times): [drop-times] Adapting to the SMB theme #2118: Adapts the picker component to the SMB theme, involving similar styling adjustments.
• feat(date-picker): [date-picker] Adapting to the SMB themem #2205: Focuses on adapting the date-picker component to the SMB theme, aligning with the main PR's enhancements.
• refactor(time-select): [time-select] refactor the theme #2275: Refactors the time-select component's theme vars, relevant due to shared context with the main PR.
• refactor(calendar): [calendar] refactor theme vars #2323: Refactors calendar theme vars, connecting to enhancements in the picker component.

Suggested reviewers

• zzcr

Poem

🐰 In the garden where pickers play,
New styles bloom in bright array.
With colors fresh and layouts neat,
Our UI dance is now complete!
Hopping through the code with glee,
A better picker, come and see! 🌼

---

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?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[MomoPoppy]

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

[zzcr]

改变了模板，需要评估下是否对saas主题造成影响？

[MomoPoppy]

已贴图，没有，就是在表格的外层加个div

[MomoPoppy]

pc模板的修改没有影响saas