Open awinogradov opened 8 years ago
@voischev do you have some examples?
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' }
]
}
]
}
@voischev :+1:
We need methods to check form-field content. If input
doesn't exist in form-field_type_input
we should send warn.
upd: #171
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
@adinvadim your choose
@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
ping!
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
}
}
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;
});
We can write block form-gen-field
for generate form-field
.
@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;
}):
})
)
@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.
@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?
@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?
@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
Yes. But I think we should think about BH support. I'm not sure we need support it the future.