Q: extending native

[basz]

Hello,

I'm trying to create a ember-bootstrap form control type by extending your select-box/native, which would be used as follows;

            {{form.element controlType="select-one" label=(t 'model.address.country') property="consumer.address.country" showValidation=true
                           options=countriesCollection}}

by creating a component named select-one at pods/components/bs-form/element/control/select-one this will work.

import ControlValidationMixin from 'ember-bootstrap/mixins/control-validation';
import SizeClass from 'ember-bootstrap/mixins/size-class';
import SelectBoxControl from 'ember-select-box/components/select-box/native';

export default SelectBoxControl.extend({
  classTypePrefix: 'form-control',
  classNames: ['form-control'],
  actions: {
    select(value) {
      this.get('onChange')(value);
    }
  },
});

The component works as via;

                {{#bs-form/element/control/select-one as |sb|}}
                    {{#each countriesCollection as |option|}}
                        {{sb.option value=option.value label=option.label}}
                    {{/each}}
                {{/bs-form/element/control/select-one}}

However with the form.element controlType='select-one' there is now 'block'. This works thus far as I have a native select tag, which validates and has the correct classes...

Looking through your code it seems that {{sb.option ..}} registers itself as option component in the select-box via its template that has a yield statement. Since there is no hasBlock this seems not ok?

Can that be done programmatically? Am I approaching this correctly?

[amk221]

I'm not familiar with ember-bootstrap, but I think what you're asking is how to create a custom component, that renders a select box, but does not have a block? If so, I think the answer would be something like this:

{{! pods/components/bs-form/element/control/select-one.hbs }}
{{label}}:
{{#select-box/native value=value on-select=(action 'onChange') as |sb|}}
  {{#each options as |option|}}
    {{#sb.option value=(get option valueKey)}}
      {{get option labelKey}}
    {{/sb.option}}
  {{/each}}
{{/select-box/native}}

{{! Usage in general }}
{{select-one
  value="France"
  onChange=(action 'selectedCountry')
  valueKey="name"
  labelKey="name"
  options=countriesCollection}}

{{! Usage with ember-bootstrap }}
{{#bs-form onSubmit=(action "submit") as |form|}}
  {{form.element
    controlType="select-one"
    label=(t 'model.address.country')
    property="consumer.address.country"
    showValidation=true
    valueKey="id"
    labelKey="name"
    options=countriesCollection}}
{{/bs-form}}

I don't think you need to extend the select box, or use any javascript at all. But I've not tested this code, and I may not understand the problem sufficiently to help.

[basz]

Yes, that approach I have used and it works partially. It is actually the currently recommended approach by ember-bootstrap. The problem is validation and sizing control.

With the approach above I would need to set the tagName to '' on the component and proxy many attributes to select-box. form element.disabled, readonly. classes such as form-control-sm, form-control-lg and is-valid need to be added on the tag.

Therefore I was hoping simply extending your component add the mixins required for sizing and validation would be able to solve it. The only thing I need is to add the options programatically and I'm done.

Or if you know about a smart pattern to 'proxy' pods/components/bs-form/element/control/select-one/ attributes to its child (select-box) that would be even better, cause I need to implement more components in this way and each third party component follows a different pattern.

cc @simonihmig

thanks a lot

amk221 commented 6 years ago

Ok, I understand the situation now, thanks for clarifying.

However with the form.element controlType='select-one' there is no 'block'.

It looks like it does?

If your project is online anywhere, I'll have a look.

simonihmig commented 6 years ago

With the approach above I would need to set the tagName to '' on the component and proxy many attributes to select-box.

@basz Yes, this is the case. And this is intentional. The relationship the component under bs-form/element/control/whatever has to the actual whatever control component is a "has-a" relation (it uses whatever), not a "is-a" (which it would be if it extended whatever).

This is intentional, because we cannot assume the whatever component supports exactly the same API we use (basically all the props we feed into it here). For example especially the value property is important, but maybe whatever expect this as some other prop, maybe selected (which is exactly the case for the power-select integration, see this). So the bs-form/element/control/whatever component basically serves as some glue code between ember-bootstrap's API and that of the control component.

Hope that helps?

@amk221 sorry for capturing your repo here, this was certainly a bit off-topic! 😉

amk221 commented 6 years ago

@basz Example usage: https://github.com/amk221/-ember-bootstrap-select-box/blob/master/app/templates/application.hbs As per instruction by simonihmig.

Your desire to proxy attributes is a common one, and there is a splat attrs helper proposal for glimmer if I recall, but it wouldn't be useful in this situation anyway, due to not all components accepting the same attributes. Making your own template as per this example is necessary to translate ember-bootstrap's attributes to ones which the custom control type understands.

basz commented 6 years ago

thanks. I think this conversation helped me a lot.

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[amk221]

Ok, I understand the situation now, thanks for clarifying.

However with the form.element controlType='select-one' there is no 'block'.

It looks like it does?

If your project is online anywhere, I'll have a look.

[simonihmig]

With the approach above I would need to set the tagName to '' on the component and proxy many attributes to select-box.

@basz Yes, this is the case. And this is intentional. The relationship the component under bs-form/element/control/whatever has to the actual whatever control component is a "has-a" relation (it uses whatever), not a "is-a" (which it would be if it extended whatever).

This is intentional, because we cannot assume the whatever component supports exactly the same API we use (basically all the props we feed into it here). For example especially the value property is important, but maybe whatever expect this as some other prop, maybe selected (which is exactly the case for the power-select integration, see this). So the bs-form/element/control/whatever component basically serves as some glue code between ember-bootstrap's API and that of the control component.

Hope that helps?

@amk221 sorry for capturing your repo here, this was certainly a bit off-topic! 😉

[amk221]

@basz Example usage: https://github.com/amk221/-ember-bootstrap-select-box/blob/master/app/templates/application.hbs As per instruction by simonihmig.

Your desire to proxy attributes is a common one, and there is a splat attrs helper proposal for glimmer if I recall, but it wouldn't be useful in this situation anyway, due to not all components accepting the same attributes. Making your own template as per this example is necessary to translate ember-bootstrap's attributes to ones which the custom control type understands.

[basz]

thanks. I think this conversation helped me a lot.