ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
220 lines (217 loc) • 7.86 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
var _configProvider = require("../config-provider");
var _BaseMixin = _interopRequireDefault(require("../_util/BaseMixin"));
var _pickrEs = _interopRequireDefault(require("@simonwep/pickr/dist/pickr.es5.min"));
var _icon = _interopRequireDefault(require("../icon"));
var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));
var _en_US = _interopRequireDefault(require("./locale/en_US"));
var _debounce = _interopRequireDefault(require("lodash/debounce"));
var _propsUtil = require("../_util/props-util");
/* eslint-disable */
var colors = '#194d33';
var _default2 = {
name: 'AColorPicker',
mixins: [_BaseMixin.default],
inject: {
configProvider: {
default: function _default() {
return _configProvider.defaultConfigProvider;
}
}
},
model: {
prop: 'value',
event: 'change.value' //为了支持v-model直接返回颜色字符串 所以用了自定义的事件,与pickr自带change事件进行区分
},
props: {
prefixCls: String,
defaultValue: String,
config: _vueTypes.default.object,
value: String,
locale: _vueTypes.default.object,
colorRounded: Number,
size: _vueTypes.default.oneOf(['default', 'small', 'large']).def('default'),
getPopupContainer: Function,
disabled: {
type: Boolean,
default: false
},
format: String,
alpha: {
type: Boolean,
default: false
},
hue: {
type: Boolean,
default: true
} //是否开启色彩预选
},
data: function data() {
return {
colors: colors,
myOpen: false,
pickr: null,
i18n: _en_US.default
};
},
watch: {
'configProvider.locale.ColorPicker': {
handler: function handler(val) {
if (this.locale) return;
this.i18n = val;
this.reInitialize();
}
},
locale: function locale(val) {
this.i18n = val.ColorPicker || val.lang;
this.reInitialize();
},
value: function value(val) {
this.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() {
if (this.locale) {
this.i18n = this.locale.ColorPicker || this.locale.lang;
}
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' + this._uid;
var box = (0, _propsUtil.findDOMNode)(this).querySelector('#color-picker-box' + 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'];
Object.keys(this.$listeners).forEach(function (event) {
pickrEvents.includes(event) && _this.pickr.on(event, _this.$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 = _pickrEs.default.create((0, _extends2.default)({
el: '#color-picker' + this._uid,
container: container && container((0, _propsUtil.findDOMNode)(this)) || document.body,
theme: 'monolith',
default: this.value || this.defaultValue || null,
components: {
// Main components
preview: true,
opacity: this.alpha,
hue: this.hue,
// Input / output Options
interaction: {
hex: true,
rgba: true,
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' + _representation]().toString(_this2.colorRounded || 0);
}
_this2.$emit('change.value', color || '');
}).on('hide', function () {
_this2.setState({
myOpen: false
});
});
},
handleOpenChange: function handleOpenChange() {
var open = !this.myOpen;
this.setState({
myOpen: open
});
this.pickr[open ? 'show' : 'hide']();
this.$emit('openChange', open);
},
getDefaultLocale: function getDefaultLocale() {
var result = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _en_US.default), this.$props.locale);
result.lang = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, result.lang), (this.$props.locale || {}).lang);
return result;
},
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 = {}, (0, _defineProperty2.default)(_classString, prefixCls, true), (0, _defineProperty2.default)(_classString, "".concat(prefixCls, "-open"), this.myOpen), (0, _defineProperty2.default)(_classString, "".concat(prefixCls, "-lg"), this.size === 'large'), (0, _defineProperty2.default)(_classString, "".concat(prefixCls, "-sm"), this.size === 'small'), (0, _defineProperty2.default)(_classString, "".concat(prefixCls, "-disabled"), this.disabled), _classString);
return (0, _vue.createVNode)("div", {
"class": classString,
"tabindex": disabled ? -1 : 0,
"onClick": this.handleOpenChange
}, [(0, _vue.createVNode)("div", {
"class": "".concat(prefixCls, "-selection")
}, [(0, _vue.createVNode)("div", {
"id": 'color-picker-box' + this._uid
}, [(0, _vue.createVNode)("div", {
"id": 'color-picker' + this._uid
}, null)]), (0, _vue.createVNode)(_icon.default, {
"type": "down",
"class": "".concat(prefixCls, "-icon")
}, null)])]);
}
},
render: function render() {
return (0, _vue.createVNode)(_LocaleReceiver.default, {
"componentName": "ColorPicker",
"defaultLocale": this.getDefaultLocale,
"scopedSlots": {
default: this.renderColorPicker
}
}, null);
}
};
exports.default = _default2;