addon/components/ui-progress.js

import Component from '@ember/component';
import { computed } from '@ember/object';
import { observer } from '@ember/object';
import layout from '../templates/components/ui-progress';


/**

ui-progress component

@module components
@namespace components
@class UiProgress
@constructor
*/
export default Component.extend({
    layout: layout,
    classNameBindings: ['_uiClass', 'class', 'theme', 'loading:active:', '_componentClass', 'success:success:', 'error:error:'],
    _uiClass: 'ui',
    _componentClass: 'progress',

    /**
     * progress theme, indicating
     *
     * @property {String} theme
     * @default  ''
     */
    theme: '',

    /**
     * progress theme
     *
     * @property {String} class
     * @default  ''
     */
    class: '',

    /**
     * progress loading status, by default false
     *
     * @property {Boolean} loading
     * @default  false
     */
    loading: false,

    /**
     * progress success status, by default false
     *
     * @property {Boolean} success
     * @default  false
     */
    success: false,

    /**
     * progress error status, by default false
     *
     * @property {Boolean} error
     * @default  false
     */
    error: false,
    /**
     * progress percent
     *
     * @property {Number} percent
     * @default  0
     */
    percent: 0,
    didInsertElement() {
        this.$().progress({
            percent: this.get('_percent')
        });
    },
    _percent: computed('percent', {
        get(){
            if(this.percent > 100){
                return 100;
            }

            if(this.percent < 0){
                return 0;
            }

            return this.percent;
        }
    }),
    updateProgress: observer('percent', function(){
        this.$().progress({
            percent: this.get('_percent')
        });
    })
});