Add prefix and suffix to ui.input, and enable ui.number to support dy…

[Yuerchu]

This pull request adds support for prefix and suffix text to both the Input and Number elements in the NiceGUI library. These enhancements allow developers to easily display additional context before or after the input value, such as units or currency symbols. The changes include new constructor parameters, updates to property handling, and new setter methods.

Input element enhancements

• Added prefix and suffix parameters to the Input element constructor, allowing developers to specify text to display before or after the input value. [1] [2]
• Updated internal property handling in Input to store the prefix and suffix values if provided.
• Introduced set_prefix and set_suffix methods to dynamically update prefix and suffix text for the Input element.

Number element enhancements

• Added set_prefix and set_suffix methods to the Number element, enabling dynamic updates of prefix and suffix text.

[Copilot]

Pull request overview

This PR enhances both ui.input and ui.number elements by adding support for prefix and suffix text display, allowing developers to show contextual information like currency symbols or units alongside input values.

Key Changes

• Added prefix and suffix constructor parameters to ui.input element for displaying text before/after input values
• Introduced set_prefix() and set_suffix() setter methods for both ui.input and ui.number elements to enable dynamic updates
• Updated parameter documentation for both elements

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 8 comments.

File	Description
nicegui/elements/input.py	Added prefix/suffix constructor parameters and corresponding setter methods to the Input element
nicegui/elements/number.py	Added set_prefix() and set_suffix() methods to enable dynamic prefix/suffix updates for the Number element

[Copilot]

The new prefix and suffix parameters for ui.input lack test coverage. Consider adding tests that verify:

1. Elements can be created with prefix/suffix parameters
2. The set_prefix and set_suffix methods work correctly
3. Dynamic updates to prefix/suffix are reflected in the UI

Given that other similar parameters in test_input.py have comprehensive test coverage, this feature should have tests as well.

[Copilot]

The new set_prefix and set_suffix methods for ui.number lack test coverage. Consider adding tests that verify these methods work correctly and dynamically update the UI. Note that while the prefix and suffix constructor parameters already existed, the new setter methods are untested.

Given that other similar parameters in test_number.py have comprehensive test coverage, these new methods should have tests as well.

[evnchn]

Hello @Yuerchu thanks for the PR. Other than the comments by GitHub copilot I don't have much to add for now.

But should we make it bindable as well?

[falkoschindler]

@evnchn I'm not so sure about binding methods. They add a lot of repetitive code and I don't really see the application for binding prefixes and suffixes. We can always add them later if needed.

[Yuerchu]

I've tried to fix some of the syntax issues pointed out by Copilot. But I don't have enough time in the short term to write unit tests.

[evnchn]

@Yuerchu I don't have permission to push for some reason, but here is the test code:

def test_input_with_prefix_suffix(screen: Screen):
    @ui.page('/')
    def page():
        n = ui.input(prefix='MyPrefix', suffix='MySuffix')

        def change_prefix_suffix():
            n.set_prefix('NewPrefix')
            n.set_suffix('NewSuffix')

        ui.button('Change', on_click=change_prefix_suffix)

    screen.open('/')
    screen.should_contain('MyPrefix')
    screen.should_contain('MySuffix')
    screen.click('Change')
    screen.should_contain('NewPrefix')
    screen.should_contain('NewSuffix')

Same for ui.number