1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | import Component from '@ember/component'; import layout from '../templates/components/el-alert'; import {computed, get, set} from "@ember/object"; import transition from "../utils/transition"; export default Component.extend({ layout, TYPE_CLASSES_MAP: null, classNames: ['el-alert','animated', 'fadeIn'], classNameBindings: ['typeClass', 'effectClass', 'center:is-center', 'isClosed:el-hidden', ], attributeBindings: ['role'], role: 'alert', title: '', description: '', type: 'info', closable: true, closeText: '', showIcon: false, center: false, isClosed: false, effect: 'light', init() { this._super(); set(this, 'TYPE_CLASSES_MAP', { 'success': 'el-icon-success', 'warning': 'el-icon-warning', 'error': 'el-icon-error' } ) }, typeClass: computed('type', function () { return `el-alert--${ get(this, 'type') }`; }), effectClass: computed('effect', function () { return `is-${ get(this, 'effect') }`; }), iconClass: computed('type', function () { return get(this, 'TYPE_CLASSES_MAP')[get(this, 'type')] || 'el-icon-info'; }), isBigIcon: computed('description', function () { return get(this, 'description') !== '' ? 'is-big' : ''; }), isBoldTitle: computed('description', function () { return get(this, 'description') !== '' ? 'is-bold' : ''; }), actions: { close() { let e = this.element; let transitionEvent = transition('animation'); e.addEventListener(transitionEvent, () => { set(this, 'isClosed', true); if (this.get('action')) { this.get('action')(); } }); e.classList.add('animated'); e.classList.add('fadeOut'); } } }); |