@morjs/runtime-web/lib/components/src/base/progress.js

mor runtime for web

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const lit_element_1 = require("lit-element");
const class_map_1 = require("lit-html/directives/class-map");
const style_map_1 = require("lit-html/directives/style-map");
const baseElement_1 = require("../baseElement");
const bool_converter_1 = tslib_1.__importDefault(require("../utils/bool-converter"));
class Progress extends baseElement_1.BaseElement {
    constructor() {
        super();
        /**
         * 显示百分比
         * 0~100
         */
        this.percent = 0;
        /**
         * 右侧显示百分比值
         * 默认值：show-info="{{false}}"
         */
        this['show-info'] = false;
        /**
         * 线的粗细，单位 px
         * 默认值：6
         */
        this['stroke-width'] = 6;
        /**
         * 进度条颜色
         * 默认值：#09BB07
         */
        this['active-color'] = '#1890ff';
        /**
         * 未选择的进度条颜色。
         */
        this['background-color'] = '#dddddd';
        /**
         * 是否添加从 0% 开始加载的入场动画。
         * 默认值：active="{{false}}"
         */
        this.active = false;
    }
    static get styles() {
        return (0, lit_element_1.css) `
      :host {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      .line {
        width: 100%;
        height: 6px;
        display: flex;
        flex: 1;
        position: relative;
        background-color: #ddd;
        overflow: hidden;
      }

      .percent {
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
      }

      .bar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .percent-num {
        width: 40px;
        display: block;
        text-align: right;
      }

      span {
        white-space: pre-line;
      }

      .animation {
        animation: moveAnimation 1s infinite linear;
        animation-iteration-count: 1;
      }

      @keyframes moveAnimation {
        from {
          width: 0%;
        }
        to {
          width: 100%;
        }
      }
    `;
    }
    attributeChangedCallback(name, oldVal, newVal) {
        super.attributeChangedCallback(name, oldVal, newVal);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
    }
    render() {
        return (0, lit_element_1.html) `
      <div
        class="line"
        style=${(0, style_map_1.styleMap)({
            height: this['stroke-width'] + 'px',
            backgroundColor: this['background-color']
        })}
      >
        <div class="percent" style=${(0, style_map_1.styleMap)({ width: this.percent + '%' })}>
          <div
            class=${(0, class_map_1.classMap)({ bar: true, animation: this.active })}
            style=${(0, style_map_1.styleMap)({ backgroundColor: this['active-color'] })}
          ></div>
        </div>
      </div>
      ${this['show-info'] && this.percent
            ? (0, lit_element_1.html) `<span class="percent-num">${this.percent}%</span>`
            : undefined}
    `;
    }
}
tslib_1.__decorate([
    (0, lit_element_1.property)({ type: Number })
], Progress.prototype, "percent", void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)({ converter: bool_converter_1.default })
], Progress.prototype, 'show-info', void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)({ type: Number })
], Progress.prototype, 'stroke-width', void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)({ type: String })
], Progress.prototype, 'active-color', void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)({ type: String })
], Progress.prototype, 'background-color', void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)({ converter: bool_converter_1.default })
], Progress.prototype, "active", void 0);
exports.default = Progress;
//# sourceMappingURL=progress.js.map