@morjs/runtime-web/lib/components/src/form/switch.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 Switch extends baseElement_1.BaseElement {
    constructor() {
        super();
        /**
         * 组件名字，用于表单提交获取数据。
         */
        this.name = '';
        /**
         * 当前是否选中。
         * 默认值：false
         */
        this.checked = false;
        /**
         * 是否禁用。
         * 默认值：6
         */
        this.disabled = false;
        /**
         * 组件颜色，同 CSS 色值。
         */
        this.color = '#108ee9';
    }
    static get styles() {
        return (0, lit_element_1.css) `
      :host {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 16px;
        position: relative;
      }

      .tiga-switch {
        position: relative;
        z-index: 0;
        display: inline-block;
        vertical-align: middle;
        box-sizing: border-box;
        cursor: pointer;
        align-self: center;
      }

      .checkbox {
        width: 51px;
        height: 31px;
        border-radius: 31px;
        box-sizing: border-box;
        background: #e5e5e5;
        z-index: 0;
        margin: 0;
        padding: 0;
        border: 0;
        cursor: pointer;
        position: relative;
        transition: all 300ms;
      }

      .checkbox:before {
        content: ' ';
        position: absolute;
        left: 1px;
        top: 1px;
        width: 48px;
        height: 28px;
        border-radius: 28px;
        box-sizing: border-box;
        z-index: 1;
        transform: scale(1);
        background: #ffffff;
        transition: all 200ms;
      }

      .checkbox:after {
        content: ' ';
        height: 28px;
        width: 28px;
        border-radius: 28px;
        background: #ffffff;
        position: absolute;
        z-index: 2;
        left: 1px;
        top: 1px;
        transform: translateX(0);
        transition: all 200ms;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.21);
      }

      .checkbox.checked:after {
        transform: translateX(20px);
      }

      .checkbox.checked:before {
        transform: scale(0);
      }
    `;
    }
    /**
     * onChange checked 改变时触发，event.detail={ value:checked}。
     */
    /**
     * controlled 是否为受控组件，为 true 时，checked 会完全受 setData 控制。
     */
    get value() {
        return this.checked;
    }
    reset() {
        this.checked = false;
    }
    connectedCallback() {
        super.connectedCallback();
    }
    attributeChangedCallback(name, oldVal, newVal) {
        super.attributeChangedCallback(name, oldVal, newVal);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
    }
    _handleClick() {
        if (!this.disabled) {
            this.checked = !this.checked;
        }
        this.dispatchEvent(new CustomEvent('change', {
            detail: {
                value: this.checked
            }
        }));
    }
    render() {
        const styleInfo = {
            backgroundColor: this.checked ? this.color : '#e5e5e5',
            opacity: this.disabled ? 0.3 : 1
        };
        return (0, lit_element_1.html) `
      <div class="tiga-switch" @click="${this._handleClick}">
        <div
          class=${(0, class_map_1.classMap)({ checkbox: true, checked: this.checked })}
          style=${(0, style_map_1.styleMap)(styleInfo)}
        />
      </div>
    `;
    }
}
tslib_1.__decorate([
    (0, lit_element_1.property)({ type: String })
], Switch.prototype, "name", void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)({ converter: bool_converter_1.default })
], Switch.prototype, "checked", void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)({ converter: bool_converter_1.default })
], Switch.prototype, "disabled", void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)({ type: String })
], Switch.prototype, "color", void 0);
exports.default = Switch;
//# sourceMappingURL=switch.js.map