Ember-picker NPM

ember-picker

Ember addon for vanilla-picker color picker library.

Compatibility

Ember.js v3.28 or above
Ember CLI v3.28 or above
Node.js v14 or above

Installation

ember install ember-picker

Usage

You can change all global configuration settings via config/environment.js file.

Please check vanilla-picker site for more configuration details.

ENV['ember-picker'] = {
  parent: undefined,
  popup: 'right',
  template: undefined,
  layout: 'default',
  alpha: true,
  editor: true,
  editorFormat: 'hex',
  cancelButton: false,
  color: undefined,
  onChange: undefined,
  onDone: undefined,
  onOpen: undefined,
  onClose: undefined,
};

Example as a component

<Picker @color={{this.color}} @onDone={{this.onDone}} />

<Picker
  @color={{this.color}}
  @onDone={{this.onDone}}
  style='{{if
    this.color
    (concat "width: 32px;height: 32px;background:" this.color ";")
    "width: 32px;height: 32px;"
  }}'
>
  Block
</Picker>

Example as a modifer

<div
  class='ember-picker'
  style='{{if
    this.color
    (concat "width: 32px;height: 32px;background:" this.color ";")
    "width: 32px;height: 32px;"
  }}'
  {{picker color=this.color onDone=this.onDone}}
>
  Modifier
</div>

If you would like access to the picker instance in order to call some methods directly, for example to hide or show programmatically, pass an action to registerAPI

<Input
  {{picker registerAPI=this.saveApi color=this.color onDone=this.onDone}}
/>

// save the picker instance to use later
@action
saveApi(picker) {
  this.picker = picker;
}

// programmatically open the picker
@action
openPicker() {
  this.picker.show();
}