@fe6/water-pro
Version:
An enterprise-class UI design language and Vue-based implementation
256 lines (222 loc) • 9.26 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _debounce = _interopRequireDefault(require("lodash/debounce"));
var _shared = require("@fe6/shared");
var _DownOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/DownOutlined"));
var _pickr = _interopRequireDefault(require("./colors/pickr"));
var _propsUtil = require("../_util/props-util");
var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
var _BaseMixin = _interopRequireDefault(require("../_util/BaseMixin"));
var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));
var _zh_CN = _interopRequireDefault(require("./locale/zh_CN"));
var _utils = require("./utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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); }
var _default2 = {
name: 'AColorPicker',
mixins: [_BaseMixin.default],
props: {
prefixCls: _vueTypes.default.string,
defaultValue: _vueTypes.default.string,
config: _vueTypes.default.object,
value: _vueTypes.default.string,
locale: _vueTypes.default.object.def(_zh_CN.default),
colorRounded: _vueTypes.default.number,
size: _vueTypes.default.oneOf(['default', 'small', 'large']).def('default'),
getPopupContainer: _vueTypes.default.func,
disabled: _vueTypes.default.looseBool.def(false),
format: _vueTypes.default.string,
alpha: _vueTypes.default.looseBool.def(false),
hue: _vueTypes.default.looseBool.def(true),
padding: _vueTypes.default.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 = (0, _useConfigInject2.default)('color-picker', props),
prefixClsNew = _useConfigInject.prefixCls,
configProvider = _useConfigInject.configProvider;
var i18n = (0, _vue.ref)(((_a = configProvider.locale) === null || _a === void 0 ? void 0 : _a.ColorPicker) || _zh_CN.default);
return {
uid: (0, _utils.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 = (0, _propsUtil.findDOMNode)(this).querySelector("#color-picker-box".concat(this.uid));
box.appendChild(dom);
this.createPickr();
this.eventsBinding();
},
setColor: (0, _debounce.default)(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 = (0, _propsUtil.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 = (0, _propsUtil.getOptionProps)(this),
getPopupContainer = _getOptionProps.getPopupContainer;
var getContextPopupContainer = this.configProvider.getPopupContainer;
var container = getPopupContainer || getContextPopupContainer;
this.pickr = _pickr.default.create(_extends({
el: "#color-picker".concat(this.uid),
container: container && container((0, _propsUtil.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 = (0, _shared.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({}, _zh_CN.default), this.$props.locale);
result.lang = _extends(_extends({}, _zh_CN.default), (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 = (0, _propsUtil.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 (0, _vue.createVNode)("div", {
"class": classString,
"tabindex": disabled ? -1 : 0,
"onClick": this.openColorPicker
}, [(0, _vue.createVNode)("div", {
"class": "".concat(prefixCls, "-selection")
}, [(0, _vue.createVNode)("div", {
"id": "color-picker-box".concat(this.uid)
}, [(0, _vue.createVNode)("div", {
"id": "color-picker".concat(this.uid)
}, null)]), (0, _vue.createVNode)(_DownOutlined.default, {
"class": "".concat(prefixCls, "-icon")
}, null)])]);
}
},
render: function render() {
return (0, _vue.createVNode)(_LocaleReceiver.default, {
"componentName": "ColorPicker",
"defaultLocale": this.getDefaultLocale,
"children": this.renderColorPicker
}, null);
}
};
exports.default = _default2;