@fe6/water-pro/es/color-picker/ColorPicker.js

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

import { createVNode as _createVNode } from "vue";

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import { ref } from 'vue';
import debounce from 'lodash-es/debounce';
import { isUndefined } from '@fe6/shared';
import DownOutlined from '@ant-design/icons-vue/DownOutlined'; // TODO [fix][vite2] The requested module '/shop/node_modules/@simonwep/pickr/dist/pickr.es5.min.js?v=037821b3' does not provide an export named 'default'
// import Pickr from '@simonwep/pickr/dist/pickr.es5.min';

import Pickr from './colors/pickr';
import { getOptionProps, findDOMNode, getListeners } from '../_util/props-util';
import PropTypes from '../_util/vue-types';
import useConfigInject from '../_util/hooks/useConfigInject';
import BaseMixin from '../_util/BaseMixin';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import zhCn from './locale/zh_CN';
import { generateAriaId } from './utils';
export default {
  name: 'AColorPicker',
  mixins: [BaseMixin],
  props: {
    prefixCls: PropTypes.string,
    defaultValue: PropTypes.string,
    config: PropTypes.object,
    value: PropTypes.string,
    locale: PropTypes.object.def(zhCn),
    colorRounded: PropTypes.number,
    size: PropTypes.oneOf(['default', 'small', 'large']).def('default'),
    getPopupContainer: PropTypes.func,
    disabled: PropTypes.looseBool.def(false),
    format: PropTypes.string,
    alpha: PropTypes.looseBool.def(false),
    hue: PropTypes.looseBool.def(true),
    padding: PropTypes.number.def(16),
    predefine: {
      type: Array,
      default: function _default() {
        return ['rgba(244, 67, 54, 1)', 'rgba(233, 30, 99, 1)', 'rgba(156, 39, 176, 1)', 'rgba(103, 58, 183, 1)', 'rgba(63, 81, 181, 1)', 'rgb(255, 120, 0)', '#c71585', 'rgba(0, 188, 212, 1)', 'rgba(0, 150, 136, 1)', 'rgba(76, 175, 80, 1)', 'rgba(139, 195, 74, 1)', 'rgba(205, 220, 57, 1)', 'rgba(255, 235, 59, 1)', 'rgba(255, 193, 7, 1)'];
      }
    }
  },
  emits: ['update:value', 'change', 'openChange'],
  setup: function setup(props) {
    var _a;

    var _useConfigInject = useConfigInject('color-picker', props),
        prefixClsNew = _useConfigInject.prefixCls,
        configProvider = _useConfigInject.configProvider;

    var i18n = ref(((_a = configProvider.locale) === null || _a === void 0 ? void 0 : _a.ColorPicker) || zhCn);
    return {
      uid: generateAriaId(prefixClsNew.value),
      i18n: i18n,
      configProvider: configProvider
    };
  },
  data: function data() {
    return {
      myOpen: false,
      pickr: null
    };
  },
  watch: {
    'configProvider.locale': {
      handler: function handler(val) {
        this.i18n = val === null || val === void 0 ? void 0 : val.ColorPicker;
        this.reInitialize();
      }
    },
    value: function value(val) {
      if (!val) {
        this.reInitialize();
      } else {
        this.pickr.setColor(val);
      }
    },
    disabled: function disabled(val) {
      this.pickr[val ? 'disable' : 'enable']();
    },
    config: {
      handler: function handler() {
        this.reInitialize();
      },
      deep: true
    },
    format: function format(val) {
      var type = val.toLocaleUpperCase();
      var res = this.pickr.setColorRepresentation(type);

      if (res) {
        this.pickr.applyColor();
      } else {
        throw new TypeError('format was invalid');
      }
    }
  },
  mounted: function mounted() {
    this.createPickr();
    this.eventsBinding();
  },
  unmounted: function unmounted() {
    this.pickr.destroyAndRemove();
  },
  methods: {
    reInitialize: function reInitialize() {
      this.pickr.destroyAndRemove();
      var dom = document.createElement('div');
      dom.id = "color-picker".concat(this.uid);
      var box = findDOMNode(this).querySelector("#color-picker-box".concat(this.uid));
      box.appendChild(dom);
      this.createPickr();
      this.eventsBinding();
    },
    setColor: debounce(function (val) {
      this.pickr.setColor(val);
    }, 1000),
    eventsBinding: function eventsBinding() {
      var _this = this;

      var pickrEvents = ['init', 'hide', 'show', 'save', 'clear', 'change', 'changestop', 'cancel', 'swatchselect'];
      var listeners = getListeners(this);
      Object.keys(listeners).forEach(function (event) {
        pickrEvents.includes(event) && _this.pickr.on(event, listeners[event]);
      });
    },
    createPickr: function createPickr() {
      var _this2 = this;

      var _getOptionProps = getOptionProps(this),
          getPopupContainer = _getOptionProps.getPopupContainer;

      var getContextPopupContainer = this.configProvider.getPopupContainer;
      var container = getPopupContainer || getContextPopupContainer;
      this.pickr = Pickr.create(_extends({
        el: "#color-picker".concat(this.uid),
        container: container && container(findDOMNode(this)) || document.body,
        theme: 'monolith',
        default: this.value || this.defaultValue || null,
        swatches: this.predefine,
        padding: this.padding,
        closeOnScroll: true,
        components: {
          preview: true,
          opacity: this.alpha,
          hue: this.hue,
          interaction: {
            input: true,
            clear: true,
            save: true
          }
        }
      }, this.config, {
        i18n: this.i18n
      })).on('save', function (color, instance) {
        if (color) {
          var _representation = instance._representation || 'HEXA';

          color = color["to".concat(_representation)]().toString(_this2.colorRounded || 0);
        }

        _this2.$emit('update:value', color || '');

        _this2.$emit('change', color || '');

        _this2.handleOpenChange(false);
      }).on('clear', function () {
        _this2.$emit('update:value', null);

        _this2.$emit('change', null);
      }).on('hide', function () {
        _this2.setState({
          myOpen: false
        });

        _this2.$emit('openChange', false);
      });
      this.pickr[this.disabled ? 'disable' : 'enable']();
    },
    handleOpenChange: function handleOpenChange(status) {
      var open = isUndefined(status) ? !this.myOpen : status;
      this.setState({
        myOpen: open
      });
      this.pickr[open ? 'show' : 'hide']();
      this.$emit('openChange', open);
    },
    getDefaultLocale: function getDefaultLocale() {
      var result = _extends(_extends({}, zhCn), this.$props.locale);

      result.lang = _extends(_extends({}, zhCn), (this.$props.locale || {}).lang);
      return this.locale;
    },
    openColorPicker: function openColorPicker() {
      var _this3 = this;

      if (!this.disabled) {
        setTimeout(function () {
          _this3.handleOpenChange();
        }, 0);
      }
    },
    renderColorPicker: function renderColorPicker() {
      var _classString;

      var customizePrefixCls = this.$props.prefixCls;
      var getPrefixCls = this.configProvider.getPrefixCls;
      var prefixCls = getPrefixCls('color-picker', customizePrefixCls);

      var _getOptionProps2 = getOptionProps(this),
          disabled = _getOptionProps2.disabled;

      var classString = (_classString = {}, _defineProperty(_classString, prefixCls, true), _defineProperty(_classString, "".concat(prefixCls, "-open"), this.myOpen), _defineProperty(_classString, "".concat(prefixCls, "-lg"), this.size === 'large'), _defineProperty(_classString, "".concat(prefixCls, "-sm"), this.size === 'small'), _defineProperty(_classString, "".concat(prefixCls, "-disabled"), this.disabled), _classString);
      return _createVNode("div", {
        "class": classString,
        "tabindex": disabled ? -1 : 0,
        "onClick": this.openColorPicker
      }, [_createVNode("div", {
        "class": "".concat(prefixCls, "-selection")
      }, [_createVNode("div", {
        "id": "color-picker-box".concat(this.uid)
      }, [_createVNode("div", {
        "id": "color-picker".concat(this.uid)
      }, null)]), _createVNode(DownOutlined, {
        "class": "".concat(prefixCls, "-icon")
      }, null)])]);
    }
  },
  render: function render() {
    return _createVNode(LocaleReceiver, {
      "componentName": "ColorPicker",
      "defaultLocale": this.getDefaultLocale,
      "children": this.renderColorPicker
    }, null);
  }
};