iep-ui/lib/color/Color.js

An enterprise-class UI design language and Vue-based implementation

'use strict';

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

var _configConsumerProps = require('../config-provider/configConsumerProps');

var _vueColor = require('vue-color');

var _tooltip = require('../tooltip');

var _tooltip2 = _interopRequireDefault(_tooltip);

var _vueTypes = require('../_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

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

exports['default'] = {
  name: 'AColor',
  props: {
    value: _vueTypes2['default'].string
  },
  inject: {
    configProvider: { 'default': function _default() {
        return _configConsumerProps.ConfigConsumerProps;
      } }
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];
    var customizePrefixCls = this.prefixCls;


    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('color', customizePrefixCls);

    return h(
      'div',
      { 'class': prefixCls },
      [h(
        _tooltip2['default'],
        {
          attrs: { trigger: 'click', overlayClassName: prefixCls + '-panel' }
        },
        [h(
          'template',
          { slot: 'title' },
          [h(_vueColor.Sketch, {
            attrs: { value: this.$props.value },
            on: {
              'input': function input(e) {
                return _this.$emit('input', e.hex);
              }
            }
          })]
        ), h('div', { 'class': prefixCls + '-core', style: { backgroundColor: this.$props.value } })]
      )]
    );
  }
};