vuetify/lib/components/VColorPicker/VColorPickerEdit.js

Vue Material Component Framework

// Styles
import "../../../src/components/VColorPicker/VColorPickerEdit.sass"; // Components

import VBtn from '../VBtn';
import VIcon from '../VIcon'; // Helpers

import { parseHex } from '../../util/colorUtils'; // Types

import Vue from 'vue';
import { fromRGBA, fromHexa, fromHSLA } from './util';
export const modes = {
  rgba: {
    inputs: [['r', 255, 'int'], ['g', 255, 'int'], ['b', 255, 'int'], ['a', 1, 'float']],
    from: fromRGBA
  },
  hsla: {
    inputs: [['h', 360, 'int'], ['s', 1, 'float'], ['l', 1, 'float'], ['a', 1, 'float']],
    from: fromHSLA
  },
  hexa: {
    from: fromHexa
  }
};
export default Vue.extend({
  name: 'v-color-picker-edit',
  props: {
    color: Object,
    disabled: Boolean,
    hideAlpha: Boolean,
    hideModeSwitch: Boolean,
    mode: {
      type: String,
      default: 'rgba',
      validator: v => Object.keys(modes).includes(v)
    }
  },

  data() {
    return {
      modes,
      internalMode: this.mode
    };
  },

  computed: {
    currentMode() {
      return this.modes[this.internalMode];
    }

  },
  watch: {
    mode(mode) {
      this.internalMode = mode;
    }

  },

  created() {
    this.internalMode = this.mode;
  },

  methods: {
    getValue(v, type) {
      if (type === 'float') return Math.round(v * 100) / 100;else if (type === 'int') return Math.round(v);else return 0;
    },

    parseValue(v, type) {
      if (type === 'float') return parseFloat(v);else if (type === 'int') return parseInt(v, 10) || 0;else return 0;
    },

    changeMode() {
      const modes = Object.keys(this.modes);
      const index = modes.indexOf(this.internalMode);
      const newMode = modes[(index + 1) % modes.length];
      this.internalMode = newMode;
      this.$emit('update:mode', newMode);
    },

    genInput(target, attrs, value, on) {
      return this.$createElement('div', {
        staticClass: 'v-color-picker__input'
      }, [this.$createElement('input', {
        key: target,
        attrs,
        domProps: {
          value
        },
        on
      }), this.$createElement('span', target.toUpperCase())]);
    },

    genInputs() {
      if (this.internalMode === 'hexa') {
        const hex = this.color.hexa;
        const value = this.hideAlpha && hex.endsWith('FF') ? hex.substr(0, 7) : hex;
        return this.genInput('hex', {
          maxlength: this.hideAlpha ? 7 : 9,
          disabled: this.disabled
        }, value, {
          change: e => {
            const el = e.target;
            this.$emit('update:color', this.currentMode.from(parseHex(el.value)));
          }
        });
      } else {
        const inputs = this.hideAlpha ? this.currentMode.inputs.slice(0, -1) : this.currentMode.inputs;
        return inputs.map(([target, max, type]) => {
          const value = this.color[this.internalMode];
          return this.genInput(target, {
            type: 'number',
            min: 0,
            max,
            step: type === 'float' ? '0.01' : type === 'int' ? '1' : undefined,
            disabled: this.disabled
          }, this.getValue(value[target], type), {
            input: e => {
              const el = e.target;
              const newVal = this.parseValue(el.value || '0', type);
              this.$emit('update:color', this.currentMode.from(Object.assign({}, value, {
                [target]: newVal
              }), this.color.alpha));
            }
          });
        });
      }
    },

    genSwitch() {
      return this.$createElement(VBtn, {
        props: {
          small: true,
          icon: true,
          disabled: this.disabled
        },
        on: {
          click: this.changeMode
        }
      }, [this.$createElement(VIcon, '$unfold')]);
    }

  },

  render(h) {
    return h('div', {
      staticClass: 'v-color-picker__edit'
    }, [this.genInputs(), !this.hideModeSwitch && this.genSwitch()]);
  }

});
//# sourceMappingURL=VColorPickerEdit.js.map