Field generators

[awinogradov]

{
    block: 'form-field',
    type: 'input',
    val: 'type something...',
    label: 'test',
    required: true
}

[awinogradov]

@voischev do you have some examples?

[voischev]

like this

by default for generate

{
    block: 'form-field',
    mods: { type: 'input', required: true },
    val: 'type something...',
    label: 'test'
} 

change only control template

{
    block: 'form-field',
    mods: { type: 'input', required: true },
    label: 'test',
    control: { block: 'input', mods: { 'my-super-mod', 'ololo' }, val: 'type something...' }
} 

custom content in field

{
    block: 'form-field',
    mods: { type: 'input', required: true },
    content: [
        {
            block: 'awsome-wrapper',
            content: [
                { block: 'input', val: 'my custom content' },
                { block: 'label' }
            ]
        }
    ]
} 

[awinogradov]

@voischev 👍

[awinogradov]

We need methods to check form-field content. If input doesn't exist in form-field_type_input we should send warn.

upd: #171

[adinvadim]

I want to do this issue. I have a question, what better:

ctx.val || (ctx.val = this._form_field.val)

or

ctx.val = ctx.val || this._form_field.val

Because there are both types in project

[awinogradov]

@adinvadim your choose

[adinvadim]

@awinogradov

Generators for val, name, id, checked field,

Also create bh template for radio-group, and move template from input__control.bemhtml -> input.bemhtml

I can commit my example bundle for testing
#197

[belozer]

ping!

[belozer]

without type. Field type is elem control.

{
  block: 'form-field',
  name: 'card',
  required: true,
  validator: {type: 'card', text: 'My invalid text'},
  message: {type: 'text'},
  label: 'My credit card',
  control: {block: 'input', mods: {'my-super-mod': 'ololo'}, val: 'type something...'}
}

control after generate

{
  block: 'input', 
  mix: [{block: 'form-field', elem: 'control'}], 
  mods: {'my-super-mod': 'ololo'}, 
  val: 'type something...'
}

Using in real word:

{
  block: 'form-field',
  name: 'username',
  message: 'text',
  required: 'Обязательное поле',
  label: 'Имя пользователя:',
  control: {
    block: 'input',
    mods: {theme: 'light'},
    name: 'username',
    placeholder: 'username',
    val: user.username
  }
}

[belozer]

I written simple proxy block form-lite-field on bemtree. You can use now for next declaration:

{
  block: 'form-lite-field',
  name: 'username',
  message: {type: 'text'},
  required: 'Обязательное поле',
  validator: 'username',
  label: 'Имя пользователя:',
  control: {
    block: 'input',
    mods: {theme: 'light'},
    placeholder: 'username',
    val: user.username
  }
}

block('form-lite-field').replace()((node, ctx) => {
  let FormField = {block: 'form-field', mods: {}, js: {}, content: []};

  // Proxy params
  if (ctx.mods) {
    FormField.mods = ctx.mods;
  }
  if (ctx.name) {
    FormField.name = ctx.name;
  }

  // Required
  if (ctx.required) {
    FormField.mods.required = true;
  }
  if (typeof ctx.required === 'string') {
    FormField.js.required = {message: ctx.required};
  }

  // Message
  if (ctx.message) {
    FormField.mods.message = ctx.message.type;
  }
  if (ctx.message && ctx.message.directions) {
    FormField.directions = ctx.message.directions;
  }

  // Validator
  if (ctx.validator) {
    FormField.mods.validate = ctx.validator;
  }

  // Label
  if (ctx.label) {
    FormField.content.push({block: 'label', content: ctx.label});
  }

  // Form field type
  FormField.mods.type = ctx.control.block;
  FormField.content.push(ctx.control);

  return FormField;
});

[belozer]

We can write block form-gen-field for generate form-field.

[adinvadim]

@belozyorcev
Why we need in another block for generating?

We can add this features unnecessary in block form-field, because it's bem-xjst ;)

    match()(function() { return this.ctx.label != null }).content()(function() {
        return [
            {
                block : 'label',
                content : this.ctx.label
            },
            applyNext()
        ]
    }),

    match()(function() { return this.ctx.control != null}).content()(function() {
        return [
            this.ctx.control,
            applyNext()
        ]
    })

For generating required:

    match()(function() { return !this.ctx.required})(

        // Or use mods from bem-xjst v8
        def()(function() {
            this.mods = this.extend(this.applyNext, { required : true });
            return applyNext();
        }),


        // Or use addJs from bem-xjst v8
        match(return typeof ctx.required === 'string').js()(function() {
            var ctx = this.ctx
            return this.extend(applyNext(), {
                message : ctx.required;
            }):
        })
  )

[adinvadim]

@awinogradov ^

[awinogradov]

Nested matchers look strange for me. I think it'll be very hard to understand templates. But I want to see PoC for form-field block with generators as matchers. We need compare two ways.