PlNumberField

[AStaroverov]

No description provided.

[changeset-bot]

🦋 Changeset detected

Latest commit: 7557e0b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
@milaboratories/milaboratories.monetization-test.ui	Patch
@milaboratories/milaboratories.ui-examples.ui	Patch
@milaboratories/uikit	Patch
@milaboratories/milaboratories.monetization-test	Patch
@milaboratories/milaboratories.ui-examples	Patch
@platforma-sdk/ui-vue	Patch
@milaboratories/milaboratories.pool-explorer.ui	Patch
@milaboratories/milaboratories.pool-explorer	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly refactors and enhances the PlTextField and PlNumberField UI components. The primary goal is to standardize validation mechanisms, provide more flexible clearable functionality, and improve the robustness of number input handling, particularly concerning international number formats and pasting. These changes aim to make the components more consistent, easier to use, and more resilient to diverse user inputs.

Highlights

• Standardized Validation Logic: Refactored validation mechanisms in both PlTextField and PlNumberField components to use a consistent validate prop, which now expects a function returning string | undefined (undefined for valid, string for error message). This replaces the previous rules prop that returned boolean | string.
• Enhanced Clearable Functionality: Introduced a more flexible clearable prop for PlTextField and PlNumberField. This prop can now accept either a boolean value or a function that returns the desired reset value, allowing for custom clear behaviors.
• Improved Number Input Handling: The PlNumberField component received significant updates to its number parsing and pasting capabilities. A new normalizeNumberString utility was added to intelligently handle and convert various international number formats (e.g., using commas or dots as decimal/thousand separators) into a standardized format, improving user experience for diverse inputs.
• Refined Increment/Decrement Control: The PlNumberField component's useIncrementButtons and updateOnEnterOrClickOutside props were replaced with a single disableSteps prop, offering clearer and more direct control over the visibility and functionality of increment/decrement buttons.

Changelog

• etc/blocks/monetization-test/ui/src/pages/MainPage.vue
  • Updated validateProductKey to return string | undefined instead of boolean | string.
  • Replaced rules prop with validate prop on PlTextField.
• etc/blocks/ui-examples/ui/src/pages/ErrorsPage.vue
  • Updated positiveNumberRule to return string | undefined.
  • Replaced rules prop with validate prop on PlTextField.
• etc/blocks/ui-examples/ui/src/pages/FormComponentsPage/Main.vue
  • Updated clearable prop on PlTextField to accept a function.
• etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue
  • Removed useIncrementButtons and updateOnEnterOrClickOutside data properties.
  • Added disableSteps data property.
  • Introduced updateNumber function for increment/decrement.
  • Updated PlNumberField components to use clearable and disableSteps props.
• etc/blocks/ui-examples/ui/src/pages/PlTextFieldPage.vue
  • Updated numberRule to return string | undefined.
  • Replaced rules prop with validate prop on PlTextField.
• lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
  • Introduced generic type parameter C.
  • Updated modelValue to use generic type C and be required.
  • Removed useIncrementButtons and updateOnEnterOrClickOutside props, added disableSteps and clearable props.
  • Refactored validation logic to use a validate prop returning string | undefined.
  • Implemented clear functionality for clearable prop (boolean or function).
  • Added handlePaste function for number string normalization.
  • Updated template to reflect new props and clear button.
• lib/ui/uikit/src/components/PlNumberField/parseNumber.ts
  • Added normalizeNumberString function to handle various international number formats and thousand separators.
• lib/ui/uikit/src/components/PlNumberField/pl-number-field.scss
  • Added CSS variables and styles for the new clearable icon.
  • Removed obsolete .withoutArrows class.
• lib/ui/uikit/src/components/PlTextField/PlTextField.vue
  • Introduced generic type parameter C.
  • Updated model to use generic type C and be required.
  • Updated clearable prop to accept boolean | (() => C).
  • Replaced rules prop with validate prop.
  • Removed useValidation utility.
  • Updated clear function to handle functional clearable prop.
  • Refactored error display logic to use the new validate prop.
• lib/ui/uikit/src/components/PlTextField/tests/TextField.spec.ts
  • Added comments regarding generic type inference in Vue Test Utils.
  • Updated test assertions to use (wrapper as any).props("modelValue") for generic type compatibility.
  • Adjusted onUpdate:modelValue type in test.

Activity

• No specific activity has been recorded for this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a significant refactoring of the PlNumberField and PlTextField components, enhancing their functionality and aligning their APIs. Key changes include a new, more robust PlNumberField component, a unified validation API using a validate prop instead of rules, and a more flexible clearable prop that now accepts a function for custom clear behaviors. The PlNumberField also features improved handling for pasted numbers in various international formats. The changes are well-implemented, and I have one suggestion to further improve the robustness of the number parsing logic.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 54.38%. Comparing base (5e769e4) to head (83cedb1).
⚠️ Report is 7 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1509      +/-   ##
==========================================
- Coverage   54.72%   54.38%   -0.34%     
==========================================
  Files         242      242              
  Lines       13598    13686      +88     
  Branches     2789     2820      +31     
==========================================
+ Hits         7441     7443       +2     
- Misses       5226     5309      +83     
- Partials      931      934       +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.