Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

allow getOwnConfig (from embroider) access added definitions #913

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

basz
Copy link

@basz basz commented Feb 22, 2023

I went an gone with it. I need this to be able to add new custom components types

let me know if you require changes on this... (perhaps there is a better way)

see #912

@derrabauke
Copy link
Contributor

Hey @basz 👋 Thanks for your contribution. 🎉

Could you please run yarn lint:fix and push again so we can check the pipeline status. :-)

@basz
Copy link
Author

basz commented Feb 23, 2023

sure, done

@basz
Copy link
Author

basz commented Mar 8, 2023

hi there... kind reminder to this open PR.

@anehx
Copy link
Member

anehx commented Mar 8, 2023

Hi @basz, thanks for submitting a PR! I don't quite understand the impact this change since the types/* is currently a fixed list of possible input types. There is currently no way to pass a custom input type such as your example in #912 into the input component.

In order to implement that behaviour, we'd need to adjust the ValidatedInput::Render component to be able to use custom input types. Since that is currently not the case, I'd say that this change alone will not do anything if the host application doesn't customize the render component as well, no?

Do I understand your use case correctly?

@basz
Copy link
Author

basz commented Mar 8, 2023

Yea, you are correct.

I -do- override ValidatedInput::Render.

Without this PR even that is not possible at all.

It's up to you to determine if you would even want to support completely custom components. I understand if you didn't.

Please let me know. I would need to go back to ember-bootstrap as my go to form thing. Disadvantage it is more then just forms.

Thx!

@anehx
Copy link
Member

anehx commented Mar 8, 2023

Could you paste a snippet of how your render component (hbs and js) looks like?

@basz
Copy link
Author

basz commented Mar 8, 2023

currently

{{! template-lint-disable no-autofocus-attribute }}
<div class={{class-list "form-group"}}>
  {{#if (not-eq @type "checkbox")}}
    <@labelComponent />
  {{/if}}

  <ValidatedForm::ValidatedInput::Render::Wrapper>
    {{#if (eq @type "select")}}
      <this.selectComponent
        @disabled={{@disabled}}
        @inputId={{@inputId}}
        @isInvalid={{@isInvalid}}
        @isValid={{@isValid}}
        @multiple={{@multiple}}
        @name={{or @inputName @name}}
        @optionLabelPath={{@optionLabelPath}}
        @params={{@params}}
        @options={{@options}}
        @optionTargetPath={{@optionTargetPath}}
        @optionValuePath={{@optionValuePath}}
        @prompt={{@prompt}}
        @promptIsSelectable={{@promptIsSelectable}}
        @setDirty={{@setDirty}}
        @update={{@update}}
        @value={{@value}}
        ...attributes
      />
    {{else if (or (eq @type "radioGroup") (eq @type "radio-group"))}}
      <this.radioGroupComponent
        @disabled={{@disabled}}
        @inputId={{@inputId}}
        @isInvalid={{@isInvalid}}
        @isValid={{@isValid}}
        @name={{or @inputName @name}}
        @params={{@params}}
        @options={{@options}}
        @setDirty={{@setDirty}}
        @update={{@update}}
        @value={{@value}}
        ...attributes
      />
    {{else if (or (eq @type "checkboxGroup") (eq @type "checkbox-group"))}}
      <this.checkboxGroupComponent
        @disabled={{@disabled}}
        @inputId={{@inputId}}
        @isInvalid={{@isInvalid}}
        @isValid={{@isValid}}
        @name={{or @inputName @name}}
        @params={{@params}}
        @options={{@options}}
        @setDirty={{@setDirty}}
        @update={{@update}}
        @value={{@value}}
        ...attributes
      />
    {{else if (or (eq @type "inlineCheckboxGroup") (eq @type "inline-checkbox-group"))}}
      <this.inlineCheckboxGroupComponent
        @disabled={{@disabled}}
        @inputId={{@inputId}}
        @isInvalid={{@isInvalid}}
        @isValid={{@isValid}}
        @name={{or @inputName @name}}
        @params={{@params}}
        @options={{@options}}
        @setDirty={{@setDirty}}
        @update={{@update}}
        @value={{@value}}
        ...attributes
      />
    {{else if (or (eq @type "horizontalCheckboxGroup") (eq @type "horizontal-checkbox-group"))}}
      <this.horizontalCheckboxGroupComponent
        @disabled={{@disabled}}
        @inputId={{@inputId}}
        @isInvalid={{@isInvalid}}
        @isValid={{@isValid}}
        @name={{or @inputName @name}}
        @params={{@params}}
        @options={{@options}}
        @setDirty={{@setDirty}}
        @update={{@update}}
        @value={{@value}}
        ...attributes
      />
    {{else if (eq @type "checkbox")}}
      <this.checkboxComponent
        @disabled={{@disabled}}
        @inputId={{@inputId}}
        @isInvalid={{@isInvalid}}
        @isValid={{@isValid}}
        @labelComponent={{@labelComponent}}
        @name={{or @inputName @name}}
        @params={{@params}}
        @options={{@options}}
        @setDirty={{@setDirty}}
        @update={{@update}}
        @value={{@value}}
        ...attributes
      />
    {{else if (eq @type "textarea")}}
      <this.textareaComponent
        autocomplete={{@autocomplete}}
        autofocus={{@autofocus}}
        cols={{@cols}}
        disabled={{@disabled}}
        id={{@inputId}}
        name={{or @inputName @name}}
        placeholder={{@placeholder}}
        rows={{@rows}}
        value={{@value}}
        @params={{@params}}
        @isInvalid={{@isInvalid}}
        @isValid={{@isValid}}
        @setDirty={{@setDirty}}
        @update={{@update}}
        ...attributes
      />
    {{else if (and (eq @type "date") (not-eq this.dateComponent this.inputComponent))}}
      <this.dateComponent
        @autocomplete={{@autocomplete}}
        @autofocus={{@autofocus}}
        @disabled={{@disabled}}
        @id={{@inputId}}
        @params={{@params}}
        @name={{or @inputName @name}}
        @placeholder={{@placeholder}}
        @value={{@value}}
        @isInvalid={{@isInvalid}}
        @isValid={{@isValid}}
        @setDirty={{@setDirty}}
        @update={{@update}}
        ...attributes
      />
    {{else}}
      <this.inputComponent
        autocomplete={{@autocomplete}}
        autofocus={{@autofocus}}
        disabled={{@disabled}}
        id={{@inputId}}
        name={{or @inputName @name}}
        placeholder={{@placeholder}}
        type={{@type}}
        value={{@value}}
        @params={{@params}}
        @isInvalid={{@isInvalid}}
        @isValid={{@isValid}}
        @setDirty={{@setDirty}}
        @update={{@update}}
        ...attributes
      />
    {{/if}}
  </ValidatedForm::ValidatedInput::Render::Wrapper>

  <@hintComponent />
  <@errorComponent />
</div>
import Component from '@glimmer/component';

import passedOrDefault from 'ember-validated-form/passed-or-default';

export default class RenderComponent extends Component {
  @passedOrDefault('types/checkbox-group') checkboxGroupComponent;
  @passedOrDefault('types/inline-checkbox-group') inlineCheckboxGroupComponent;
  @passedOrDefault('types/horizontal-checkbox-group') horizontalCheckboxGroupComponent;
  @passedOrDefault('types/checkbox') checkboxComponent;
  @passedOrDefault('types/input') inputComponent;
  @passedOrDefault('types/radio-group') radioGroupComponent;
  @passedOrDefault('types/select') selectComponent;
  @passedOrDefault('types/textarea') textareaComponent;
  @passedOrDefault('types/date') dateComponent;
}

@basz
Copy link
Author

basz commented Mar 23, 2023

As you can see custom component are hardcoded into the RenderComponent. Do you think there is way around that? I guess one issue would exist with embroider apps and dynamic components... Maybe that is the reason you did it like you did.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants