matting-editor/lib/widgets/matting-color-picker-panel.js

matting-editor

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var _mattingColorPickerPanel = require('./matting-color-picker-panel.html');

var _mattingColorPickerPanel2 = _interopRequireDefault(_mattingColorPickerPanel);

var _isDarkColor = require('../utils/is-dark-color');

var _isDarkColor2 = _interopRequireDefault(_isDarkColor);

var _onecolor = require('../utils/onecolor.shim');

var _onecolor2 = _interopRequireDefault(_onecolor);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

exports.default = {
    template: _mattingColorPickerPanel2.default,
    data: function data() {
        return {
            currentColorEl: null
        };
    },

    props: {
        value: {
            type: String,
            default: null
        },
        label: {
            type: String,
            default: '选择颜色'
        },
        swatches: {
            type: Array,
            default: function _default() {
                return [];
            }
        }
    },
    computed: {
        currentColor: {
            get: function get() {
                return this.value;
            },
            set: function set(color) {
                var colorItem = _lodash2.default.find(this.swatches, { value: color });
                this.$emit('input', color, this.currentColorEl, colorItem.text);
            }
        }
    },
    methods: {
        setColor: function setColor(color, evt) {
            this.currentColorEl = evt.target;
            this.currentColor = color;
        },
        isDark: function isDark(currentColor) {
            if (!currentColor) {
                return true;
            }

            var color = (0, _onecolor2.default)(currentColor);
            return (0, _isDarkColor2.default)(color.red() * 255, color.green() * 255, color.blue() * 255);
        }
    }
};