5c2a08de6d
* Update browserslist * Add browserslistrc * ember-cli-update --to 3.26, fix conflicts * Run codemodes that start with ember-* * More codemods - before cp* * More codemods (curly data-test-*) * WIP ember-basic-dropdown template errors * updates ember-basic-dropdown and related deps to fix build issues * updates basic dropdown instances to new version API * updates more deps -- ember-template-lint is working again * runs no-implicit-this codemod * creates and runs no-quoteless-attributes codemod * runs angle brackets codemod * updates lint:hbs globs to only touch hbs files * removes yield only templates * creates and runs deprecated args transform * supresses lint error for invokeAction on LinkTo component * resolves remaining ambiguous path lint errors * resolves simple-unless lint errors * adds warnings for deprecated tagName arg on LinkTo components * adds warnings for remaining curly component invocation * updates global template lint rules * resolves remaining template lint errors * disables some ember specfic lint rules that target pre octane patterns * js lint fix run * resolves remaining js lint errors * fixes test run * adds npm-run-all dep * fixes test attribute issues * fixes console acceptance tests * fixes tests * adds yield only wizard/tutorial-active template * fixes more tests * attempts to fix more flaky tests * removes commented out settled in transit test * updates deprecations workflow and adds initializer to filter by version * updates flaky policies acl old test * updates to flaky transit test * bumps ember deps down to LTS version * runs linters after main merge * fixes client count tests after bad merge conflict fixes * fixes client count history test * more updates to lint config * another round of hbs lint fixes after extending stylistic rule * updates lint-staged commands * removes indent eslint rule since it seems to break things * fixes bad attribute in transform-edit-form template * test fixes * fixes enterprise tests * adds changelog * removes deprecated ember-concurrency-test-waiters dep and adds @ember/test-waiters * flaky test fix Co-authored-by: hashishaw <cshaw@hashicorp.com>
73 lines
2 KiB
JavaScript
73 lines
2 KiB
JavaScript
import Component from '@ember/component';
|
|
import { computed } from '@ember/object';
|
|
import { htmlSafe } from '@ember/template';
|
|
import layout from '../templates/components/confirm';
|
|
import { next } from '@ember/runloop';
|
|
|
|
/**
|
|
* @module Confirm
|
|
* `Confirm` components prevent users from performing actions they do not intend to by showing a confirmation message as an overlay. This is a contextual component that should always be rendered with a `Message` which triggers the message.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* <div class="box">
|
|
* <Confirm as |c|>
|
|
* <c.Message
|
|
* @id={{item.id}}
|
|
* @triggerText="Delete"
|
|
* @message="This will permanently delete this secret and all its versions."
|
|
* @onConfirm={{action "delete" item "secret"}}
|
|
* />
|
|
* </Confirm>
|
|
* </div>
|
|
* ```
|
|
*/
|
|
|
|
export default Component.extend({
|
|
layout,
|
|
openTrigger: null,
|
|
height: 0,
|
|
focusTrigger: null,
|
|
style: computed('height', function () {
|
|
return htmlSafe(`height: ${this.height}px`);
|
|
}),
|
|
wormholeReference: null,
|
|
wormholeId: computed('elementId', function () {
|
|
return `confirm-${this.elementId}`;
|
|
}),
|
|
didInsertElement() {
|
|
this._super(...arguments);
|
|
this.set('wormholeReference', this.element.querySelector(`#${this.wormholeId}`));
|
|
},
|
|
didRender() {
|
|
this._super(...arguments);
|
|
this.updateHeight();
|
|
},
|
|
updateHeight: function () {
|
|
let height;
|
|
height = this.openTrigger
|
|
? this.element.querySelector('.confirm-overlay').clientHeight
|
|
: this.element.querySelector('.confirm').clientHeight;
|
|
this.set('height', height);
|
|
},
|
|
actions: {
|
|
onTrigger: function (itemId, e) {
|
|
this.set('openTrigger', itemId);
|
|
|
|
// store a reference to the trigger so we can focus the element
|
|
// after clicking cancel
|
|
this.set('focusTrigger', e.target);
|
|
this.updateHeight();
|
|
},
|
|
onCancel: function () {
|
|
this.set('openTrigger', '');
|
|
this.updateHeight();
|
|
|
|
next(() => {
|
|
this.focusTrigger.focus();
|
|
this.set('focusTrigger', null);
|
|
});
|
|
},
|
|
},
|
|
});
|