diff --git a/addon/components/attach-popover.js b/addon/components/attach-popover.js index ff01bee7..89cf49c3 100644 --- a/addon/components/attach-popover.js +++ b/addon/components/attach-popover.js @@ -5,9 +5,10 @@ import { cancel, debounce, later, next, run } from '@ember/runloop'; import { computed, observer } from '@ember/object'; import { getOwner } from '@ember/application'; import { guidFor } from '@ember/object/internals'; -import { htmlSafe } from '@ember/string'; +import { htmlSafe, isHTMLSafe } from '@ember/string'; import { stripInProduction } from 'ember-attacher/-debug/helpers'; import { warn } from '@ember/debug'; +import { isEmpty } from '@ember/utils'; export default Component.extend({ layout, @@ -56,6 +57,7 @@ export default Component.extend({ showDelay: DEFAULTS.showDelay, showDuration: DEFAULTS.showDuration, showOn: DEFAULTS.showOn, + style: DEFAULTS.style, /** * ================== PRIVATE IMPLEMENTATION DETAILS ================== @@ -110,6 +112,18 @@ export default Component.extend({ return `ember-attacher-${this.get('animation')} ${this.get('class') || ''} ${showOrHideClass}`; }), + _style: computed('style', '_transitionDuration', function () { + const style = this.get('style'); + const transitionDuration = this.get('_transitionDuration'); + warn( + '@ember/string/htmlSafe must be used for any `style` passed to ember-attacher', + isEmpty(style) || isHTMLSafe(style), + { id: 'ember-attacher-require-html-safe-style' } + ); + + return htmlSafe(`transition-duration: ${transitionDuration}ms; ${style}`); + }), + // This is memoized so it can be used by both attach-popover and attach-tooltip _config: computed(function() { return getOwner(this).resolveRegistration('config:environment').emberAttacher || {}; @@ -206,10 +220,6 @@ export default Component.extend({ _transitionDuration: 0, - _transitionDurationCss: computed('_transitionDuration', function() { - return htmlSafe(`transition-duration: ${this.get('_transitionDuration')}ms`); - }), - /** * ================== LIFECYCLE HOOKS ================== */ diff --git a/addon/defaults.js b/addon/defaults.js index 27f12b04..2b669bc8 100644 --- a/addon/defaults.js +++ b/addon/defaults.js @@ -18,5 +18,6 @@ export default { showDelay: 0, showDuration: 300, showOn: 'mouseenter focus', + style: null, tooltipClass: 'ember-attacher-popper ember-attacher-tooltip' }; diff --git a/addon/templates/components/attach-popover.hbs b/addon/templates/components/attach-popover.hbs index c0fa8849..5d20e4e1 100644 --- a/addon/templates/components/attach-popover.hbs +++ b/addon/templates/components/attach-popover.hbs @@ -11,7 +11,7 @@ popperTarget=_currentTarget registerAPI=(action 'registerAPI') renderInPlace=renderInPlace as |emberPopper|}} -