vue-poster-editor/lib/widgets/editor-color-hue.js

A poster editor based on Vue.js

'use strict';

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

var _jquery = require('jquery');

var _jquery2 = _interopRequireDefault(_jquery);

require('@zsk526/jquery-minicolors');

var _editorColorHue = require('./editor-color-hue.html');

var _editorColorHue2 = _interopRequireDefault(_editorColorHue);

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

var pickerDefaultColor = 'rgba(0, 0, 0, 1)';

exports.default = {
    template: _editorColorHue2.default,
    props: {
        change: {},
        color: {
            default: pickerDefaultColor
        }
    },
    methods: {
        initHue: function initHue() {
            var _this = this;

            this.element = (0, _jquery2.default)(this.$el);
            this.input = this.element.find('input.inp-picker');

            this.input.minicolors({
                inline: true,
                format: 'rgb',
                control: 'hue',
                opacity: true,
                defaultValue: this.color || pickerDefaultColor,
                change: function change(color) {
                    _this.$emit('update:color', color);
                }
            });
        }
    },

    events: {
        'hue.color.change': function hueColorChange(color) {
            this.$emit('update:color', color);
            this.input.minicolors('value', color);
        }
    },

    mounted: function mounted() {
        this.initHue();
    },
    beforeDestroy: function beforeDestroy() {
        this.input.minicolors('destroy');
        this.input = this.element = null;
    }
};
module.exports = exports['default'];