template form for vuetify

vuetify-template-form.py

import ipyvuetify as v
import traitlets
import json

class MyForm(v.VuetifyTemplate):
    email = traitlets.Unicode('').tag(sync=True)
    password = traitlets.Unicode('').tag(sync=True)
    isValid = traitlets.Bool(False).tag(sync=True)
    result = traitlets.Dict({}).tag(sync=True)
    template = traitlets.Unicode('''
    <template>
      <div class="d-flex flex-column mx-8">
        <div class="d-flex flex-row">
            <div class="display-4 ma-8">IPyForm</div>
        </div>
        <v-form v-model="isValid"
                @submit.prevent="submit">
          <div class="d-flex flex-row">
            <v-text-field 
                class="ma-4"
                label="Email" 
                v-model=email
                :rules="[ 
                   v => !!v || 'Password is required', 
                   v => (v && v.length >= 5) || 'Password must have 5+ characters' 
                ]"
                error-count="2"
                required
            ></v-text-field>
            <v-text-field 
                class="ma-4"
                label="Password" 
                v-model="password"
                type="password"
                :rules="[ 
                    v => !!v || 'Password is required', 
                    v => (v && v.length >= 5) || 'Password must have 5+ characters',
                    v => /(?=.*[A-Z])/.test(v) || 'Must have one uppercase character', 
                    v => /(?=.*\d)/.test(v) || 'Must have one number', 
                    v => /([!@$%])/.test(v) || 'Must have one special character [!@#$%]' 
                ]"
                error-count="5"
                required
            ></v-text-field>
          </div>
          <div class="d-flex flex-row">
            <v-spacer></v-spacer>
            <v-btn color="primary" :disabled="!isValid" @click="submit">Save</v-btn>
          </div>
        </v-form>
        <div class="d-flex flex-row">
          <h2>Result:</h2>
        </div>
        <div class="d-flex flex-row">
          {{ result }}
        </div>
      </div>

    </template>
    ''').tag(sync=True)
    
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
    
    def vue_submit(self, _):
        self.result = {
            'email': self.email,
            'password': self.password
        }
    
MyForm()