@morjs/runtime-web/lib/components/src/form/checkbox.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 Checkbox extends baseElement_1.BaseElement {
    constructor() {
        super();
        /**
         * 组件值，选中时 change 事件会携带的 value。
         */
        this.value = '';
        /**
         * 当前是否选中。
         * 默认值：false
         */
        this.checked = false;
        /**
         * 线的粗细，单位 px
         * 默认值：6
         */
        this.disabled = false;
        /**
         * radio 的颜色，同 CSS 色值。
         */
        this.color = '#1890ff';
    }
    static get styles() {
        return (0, lit_element_1.css) `
      :host {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      .check-icon {
        margin-right: 8px;
        display: flex;
        flex-direction: column;
      }

      .icon {
        width: 20px;
        height: 20px;
        fill: #1890ff;
      }

      .checked-disabled {
        fill: #ddd;
      }

      .unchecked-disabled {
        fill: #ddd;
        background-color: #ddd;
        width: 20px;
        height: 20px;
        border-radius: 2px;
      }

      .label {
        position: relative;
      }
    `;
    }
    connectedCallback() {
        super.connectedCallback();
        if (this.checked) {
            this.dispatchEvent(new CustomEvent('init-tiga-checkbox-group-event', {
                detail: {
                    value: this.value
                },
                bubbles: true
            }));
        }
    }
    attributeChangedCallback(name, oldVal, newVal) {
        super.attributeChangedCallback(name, oldVal, newVal);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
    }
    _emitEvent(e) {
        this.dispatchEvent(new CustomEvent('call-tiga-checkbox-group-event', e));
    }
    _handleClick() {
        if (!this.disabled) {
            this._emitEvent({
                detail: {
                    value: this.value
                },
                bubbles: true
            });
        }
    }
    renderCheckbox() {
        if (this.checked) {
            return (0, lit_element_1.html) ` <svg
        t="1607411135079"
        class=${(0, class_map_1.classMap)({ icon: true, 'checked-disabled': this.disabled })}
        style=${(0, style_map_1.styleMap)({ fill: this.disabled ? '#ddd' : this.color })}
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="27107"
        width="30"
        height="30"
      >
        <path
          d="M896 0H128C57.344 0 0 57.344 0 128v768c0 70.656 57.344 128 128 128h768c70.656 0 128-57.344 128-128V128c0-70.656-57.344-128-128-128z m64 896c0 35.38944-28.60544 64-64 64H128c-35.328 0-64-28.61056-64-64V128c0-35.328 28.672-64 64-64h768c35.38944 0 64 28.672 64 64v768z"
          p-id="27108"
        ></path>
        <path
          d="M402.2016 751.76448a44.032 44.032 0 0 1-33.43872-15.37536L139.62752 469.05344a44.03712 44.03712 0 0 1 66.87232-57.3184l200.23296 233.60512 415.2576-362.24512a44.04224 44.04224 0 0 1 57.90208 66.37056L431.1552 740.9152a44.0832 44.0832 0 0 1-28.9536 10.84928z"
          p-id="27109"
        ></path>
      </svg>`;
        }
        return (0, lit_element_1.html) ` <svg
      t="1607411322249"
      class=${(0, class_map_1.classMap)({ icon: true, 'unchecked-disabled': this.disabled })}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="30242"
      width="30"
      height="30"
    >
      <path
        d="M896 0H128C57.344 0 0 57.344 0 128v768c0 70.656 57.344 128 128 128h768c70.656 0 128-57.344 128-128V128c0-70.656-57.344-128-128-128z m64 896c0 35.38944-28.60544 64-64 64H128c-35.328 0-64-28.61056-64-64V128c0-35.328 28.672-64 64-64h768c35.38944 0 64 28.672 64 64v768z"
        p-id="30243"
      ></path>
    </svg>`;
    }
    render() {
        return (0, lit_element_1.html) `
      <span class="check-icon" @touchstart="${this._handleClick}">
        ${this.renderCheckbox()}
      </span>
    `;
    }
}
tslib_1.__decorate([
    (0, lit_element_1.property)({ type: String })
], Checkbox.prototype, "value", void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)({ converter: bool_converter_1.default })
], Checkbox.prototype, "checked", void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)({ converter: bool_converter_1.default })
], Checkbox.prototype, "disabled", void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)({ type: String })
], Checkbox.prototype, "color", void 0);
exports.default = Checkbox;
//# sourceMappingURL=checkbox.js.map