Make all classes configurable

[Windvis]

The current implementation does not allow full control over all class names. We use Tailwind in our projects and we try to avoid creating custom classes when possible.

What do you think about adding a theme object similar to ember-yeti-table?

[Windvis]

I can take a jab at it if you think this is useful 😄 .

[amk221]

👋 Can you elaborate a bit more?

[amk221]

Sorry - I read the link a bit more. I'll have a think and get back to you.

[amk221]

Would this approach work for you:

Default implementation (BEM):

(Will allow backwards compatibility for users using @classNamePrefix=)

function buildClassName(child, state) {
  let className = 'select-box';

  if (child) {
    className = `${className}__${child}`;
  }

  if (state) {
    className = `${className}--${state}`;
  }

  return className;
}

Custom implementation

<SelectBox @onBuildClassName={{this.buildClassName}} />

export default class MyComponent extends Component {
  @action
  buildClassName(child, state) {
    switch (child) {
      case 'option':
        // return ...;
      case 'options':
        // return ...;  
      case 'selected-option':
        // return ...; 
      case 'selected-options':
        // return ...;
      case 'group':
        // return ...;
      case 'group-label':
        // return ...;
      case 'group-options':
        // return ...;
      case 'input':
        // return ...;
      default:
        // return ...;
    }
  }
}

[amk221]

Preliminary attempt here:

https://github.com/zestia/ember-select-box/compare/classnames