vue-poster-editor/lib/widgets/editor-number-picker.js

A poster editor based on Vue.js

'use strict';

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

var _editorNumberPicker = require('./editor-number-picker.html');

var _editorNumberPicker2 = _interopRequireDefault(_editorNumberPicker);

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

exports.default = {
    template: _editorNumberPicker2.default,
    props: ['change', 'value', 'min', 'max', 'step', 'label'],
    data: function data() {
        return {
            active: false,
            number: 0
        };
    },

    methods: {
        set: function set(number) {
            this.number = Math.max(this.min, Math.min(this.max, number));
        },
        setRelative: function setRelative(offset) {
            var base = 10000;
            var number = this.number;

            if (offset % 1 !== 0) {
                offset *= base;
                number *= base;

                number += offset;
                number /= base;
            } else {
                number += offset;
            }

            this.set(number);
        },
        plus: function plus() {
            this.setRelative(this.step);
        },
        minus: function minus() {
            this.setRelative(-this.step);
        }
    },
    mounted: function mounted() {
        this.number = this.value;

        this.$watch('value', function (a) {
            this.number = a;
        });

        this.$watch('number', function () {
            if (!this.change) {
                this.$emit('update:value', this.number);
            } else {
                this.change(this.number);
            }
        });
    }
};
module.exports = exports['default'];