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 :+1:

[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 https://github.com/bem-contrib/bem-forms/pull/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.

[adinvadim]

@awinogradov @voischev Added label and control generator https://github.com/bem-contrib/bem-forms/pull/197

What about generating control by mod type, if ctx.control does not exist?

[awinogradov]

@adinvadim 🔥

What about generating control by mod type, if ctx.control does not exist?

What do you mean? Generate input as control in form-field_type_input?

[adinvadim]

@awinogradov Yep. Generate control, if content and ctx.control does not exist.

Okey, what do we need to do to already merge this features? bh templates?

Also, we have to merge this in v2 branch

[awinogradov]

Yes. But I think we should think about BH support. I'm not sure we need support it the future.