Input element types

[Janamou]

trafficstars

Hello, I want to use type attribute in input elements to have for example password input like this (I tried two components but with same result):

textInput(type: "password")(""),
input(type: "password")("")

But it creates always input type text.

And the second thing, if it is needed to always add parameters. I am adding there empty string because without parameter it does not work. Could not be better to have that optional? :-)

Thank you!

[localvoid]

Here is a simple example with input elements:

import 'dart:html' as html;
import 'package:liquid/liquid.dart';
import 'package:liquid/vdom.dart' as v;

class ExampleComponent extends Component<html.DivElement> {
  String _inputValue = '';
  String get inputValue => _inputValue;
  set inputValue(String v) { _inputValue = v.toUpperCase(); }

  init() {
    element.onInput
      ..matches('.ExampleComponent_basicInput').listen((e) {
        print('basic input: ${e.matchingTarget.value}');
        e.stopPropagation();
      })
      ..matches('.ExampleComponent_controlledInput').listen((e) {
        print('controlled input: ${e.matchingTarget.value}');
        inputValue = e.matchingTarget.value;
        invalidate();
        e.stopPropagation();
      })
      ..matches('.ExampleComponent_passwordInput').listen((e) {
        print('password input: ${e.matchingTarget.value}');
        e.stopPropagation();
      });
  }

  build() =>
      v.root()([
          v.textInput(type: 'ExampleComponent_basicInput'),
          v.textInput(type: 'ExampleComponent_controlledInput',
                      value: inputValue),
          v.textInput(type: 'ExampleComponent_passwordInput',
                      attributes: {'type': 'password'})
      ]);
}

main() {
  injectComponent(new ExampleComponent(), html.querySelector('body'));
}

type property on all virtual dom nodes is used as immutable className, I am not sure that it is a good idea, but in practice it is actually quite useful to use classes as mutable modifiers(checked, disabled, etc) and type as some immutable className that can be used in selectors for stylesheets or in event delegation.

Right now the only way to set password type for input elements is to use attributes: {'type': 'password'} for textInput element.

With attributes argument it is possible to set any html attribute, but for performance reasons some elements can accept common attributes as named arguments. For example, img element can accept src, alt, title as named arguments.

I've only implemented small subset of "special" html elements with common attributes: vdom/html.

I think that all this input elements should be implemented as a separate virtual elements passwordInput , colorInput, hiddenInput (and basic input element should be removed).

I'll add all this elements tomorrow.

And it should work without empty string as a child of input element.