widgetti / widgetti/ipyvuetify

TextField with `type='number'` - decimal separator and validation

Open
#241 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Python
Stars
355
Forks
61
PR merge metrics
No merged PRs in 30d

Description

Hi, I've just started out with ipyvuetify and I'm looking for how to make a form for a user to input a float value.

I'm using this:

f = v.TextField(v_model = 0.2, type='number', attributes={'min': 0, 'max': 1, 'step': 0.1})

The output is this:
image

But when click the spinbox I get this:
image

Why does the type and decimal separator change here? Is there something I can do to keep the separator . and the value of v_model a float?

Second, I'm trying to make it reject text or show some feedback if the value entered cannot be converted to a float. I don't have JS experience so I've scrounged the issue pages and tried the code below, but there is something with the :rules part that doesnt work.

class MyNumberField(v.VuetifyTemplate):
    label = traitlets.Unicode().tag(sync=True)
    value = traitlets.Unicode(default_value='0').tag(sync=True)
    min = traitlets.Float(default_value=0).tag(sync=True)
    max = traitlets.Float(default_value=1).tag(sync=True)
    step = traitlets.Float(default_value=1).tag(sync=True)
    
    temp = traitlets.Float()
    temp_error = traitlets.Unicode(default_value=None)
    
    @traitlets.default('template')
    def _template(self):
        return '''
          <v-text-field
            :label="label"
            type="number"
            v-model="value"
            @change="temp_rule"
            :rules="[temp_error]"
            :min="min" :max="max" :step="step"
            @input="input($event)"
          ></v-text-field>
        '''

    def vue_temp_rule(self, v):
        self.temp_error = None
        try:
            self.temp = float(v)
        except:
            self.temp_error = 'testtest'
    
    def vue_input(self, data):
        print(data)

mf = MyNumberField()
mf

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the v.TextField configuration and the MyNumberField template shown in the issue; compare browser number-input behavior with the synchronized Python traits and Vuetify rules. Reproduce decimal-separator and invalid-input cases, then confirm that the result preserves the intended float value and provides validation feedback.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, jupyter, python
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.