chore: remove colorpicker
tangjinzhou
parent
22dccf46c5
commit
5e063ba9a3
|
|
@ -1,208 +0,0 @@
|
|||
import PropTypes from '../_util/vue-types';
|
||||
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import Pickr from '@simonwep/pickr/dist/pickr.es5.min';
|
||||
import Icon from '../icon';
|
||||
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||
import enUS from './locale/en_US';
|
||||
import debounce from 'lodash/debounce';
|
||||
|
||||
import { getOptionProps } from '../_util/props-util';
|
||||
let colors = '#194d33';
|
||||
export default {
|
||||
name: 'AColorPicker',
|
||||
mixins: [BaseMixin],
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change.value', //为了支持v-model直接返回颜色字符串 所以用了自定义的事件,与pickr自带change事件进行区分
|
||||
},
|
||||
props: {
|
||||
prefixCls: PropTypes.string,
|
||||
defaultValue: PropTypes.string, //默认值
|
||||
config: PropTypes.object, //pickr配置
|
||||
value: PropTypes.string, //颜色值
|
||||
locale: PropTypes.object, //双语包
|
||||
colorRounded: PropTypes.number, //颜色数值保留几位小数
|
||||
size: PropTypes.oneOf(['default', 'small', 'large']).def('default'), //尺寸
|
||||
getPopupContainer: PropTypes.func, //指定渲染容器
|
||||
disabled: PropTypes.bool.def(false), //是否禁用
|
||||
format: PropTypes.string, //颜色格式设置
|
||||
alpha: PropTypes.bool.def(false), //是否开启透明通道
|
||||
hue: PropTypes.bool.def(true), //是否开启色彩预选
|
||||
},
|
||||
inject: {
|
||||
configProvider: { default: () => ConfigConsumerProps },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
colors,
|
||||
myOpen: false,
|
||||
pickr: null,
|
||||
i18n: enUS,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'configProvider.locale.ColorPicker': {
|
||||
handler(val) {
|
||||
if (this.locale) return;
|
||||
this.i18n = val;
|
||||
this.reInitialize();
|
||||
},
|
||||
},
|
||||
locale(val) {
|
||||
this.i18n = val.ColorPicker || val.lang;
|
||||
this.reInitialize();
|
||||
},
|
||||
value(val) {
|
||||
this.setColor(val);
|
||||
},
|
||||
disabled(val) {
|
||||
this.pickr[val ? 'disable' : 'enable']();
|
||||
},
|
||||
config: {
|
||||
handler() {
|
||||
this.reInitialize();
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
format(val) {
|
||||
const type = val.toLocaleUpperCase();
|
||||
let res = this.pickr.setColorRepresentation(type);
|
||||
if (res) {
|
||||
this.pickr.applyColor();
|
||||
} else {
|
||||
throw new TypeError('format was invalid');
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.locale) {
|
||||
this.i18n = this.locale.ColorPicker || this.locale.lang;
|
||||
}
|
||||
this.createPickr();
|
||||
this.eventsBinding();
|
||||
},
|
||||
destroyed() {
|
||||
this.pickr.destroyAndRemove();
|
||||
},
|
||||
methods: {
|
||||
reInitialize() {
|
||||
this.pickr.destroyAndRemove();
|
||||
const dom = document.createElement('div');
|
||||
dom.id = 'color-picker' + this._uid;
|
||||
const box = this.$el.querySelector('#color-picker-box' + this._uid);
|
||||
box.appendChild(dom);
|
||||
this.createPickr();
|
||||
this.eventsBinding();
|
||||
},
|
||||
setColor: debounce(function(val) {
|
||||
this.pickr.setColor(val);
|
||||
}, 1000),
|
||||
eventsBinding() {
|
||||
const pickrEvents = [
|
||||
'init',
|
||||
'hide',
|
||||
'show',
|
||||
'save',
|
||||
'clear',
|
||||
'change',
|
||||
'changestop',
|
||||
'cancel',
|
||||
'swatchselect',
|
||||
];
|
||||
Object.keys(this.$listeners).forEach(event => {
|
||||
pickrEvents.includes(event) && this.pickr.on(event, this.$listeners[event]);
|
||||
});
|
||||
},
|
||||
createPickr() {
|
||||
const { getPopupContainer } = getOptionProps(this);
|
||||
const { getPopupContainer: getContextPopupContainer } = this.configProvider;
|
||||
const container = getPopupContainer || getContextPopupContainer;
|
||||
this.pickr = Pickr.create(
|
||||
Object.assign(
|
||||
{
|
||||
el: '#color-picker' + this._uid,
|
||||
container: (container && container(this.$el)) || document.body,
|
||||
theme: 'monolith', // or 'monolith', or 'nano'
|
||||
default: this.value || this.defaultValue || null, // 有默认颜色pickr才可以获取到_representation
|
||||
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', (color, instance) => {
|
||||
if (color) {
|
||||
let _representation = instance._representation || 'HEXA';
|
||||
color = color['to' + _representation]().toString(this.colorRounded || 0);
|
||||
}
|
||||
this.$emit('change.value', color || '');
|
||||
})
|
||||
.on('hide', () => {
|
||||
this.setState({ myOpen: false });
|
||||
});
|
||||
},
|
||||
handleOpenChange() {
|
||||
const open = !this.myOpen;
|
||||
this.setState({ myOpen: open });
|
||||
this.pickr[open ? 'show' : 'hide']();
|
||||
this.$emit('openChange', open);
|
||||
},
|
||||
getDefaultLocale() {
|
||||
const result = {
|
||||
...enUS,
|
||||
...this.$props.locale,
|
||||
};
|
||||
result.lang = {
|
||||
...result.lang,
|
||||
...(this.$props.locale || {}).lang,
|
||||
};
|
||||
return result;
|
||||
},
|
||||
renderColorPicker() {
|
||||
const { prefixCls: customizePrefixCls } = this.$props;
|
||||
const { getPrefixCls } = this.configProvider;
|
||||
const prefixCls = getPrefixCls('color-picker', customizePrefixCls);
|
||||
const { disabled } = getOptionProps(this);
|
||||
const classString = {
|
||||
[prefixCls]: true,
|
||||
[`${prefixCls}-open`]: this.myOpen,
|
||||
[`${prefixCls}-lg`]: this.size === 'large',
|
||||
[`${prefixCls}-sm`]: this.size === 'small',
|
||||
[`${prefixCls}-disabled`]: this.disabled,
|
||||
};
|
||||
return (
|
||||
<div class={classString} tabIndex={disabled ? -1 : 0} onClick={this.handleOpenChange}>
|
||||
<div class={`${prefixCls}-selection`}>
|
||||
<div id={'color-picker-box' + this._uid}>
|
||||
<div id={'color-picker' + this._uid}></div>
|
||||
</div>
|
||||
<Icon type="down" class={`${prefixCls}-icon`} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<LocaleReceiver
|
||||
componentName="ColorPicker"
|
||||
defaultLocale={this.getDefaultLocale}
|
||||
scopedSlots={{ default: this.renderColorPicker }}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./antdv-demo/docs/color-picker/demo/alpha.md correctly 1`] = `<a-color-picker alpha="true"></a-color-picker>`;
|
||||
|
||||
exports[`renders ./antdv-demo/docs/color-picker/demo/basic.md correctly 1`] = `
|
||||
<div class="ant-row">
|
||||
<div class="ant-col ant-col-12">
|
||||
有默认值
|
||||
<a-colorpicker></a-colorpicker>
|
||||
</div>
|
||||
<div class="ant-col ant-col-12">
|
||||
无默认值
|
||||
<a-colorpicker></a-colorpicker>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./antdv-demo/docs/color-picker/demo/colors.md correctly 1`] = `<a-color-picker config="[object Object]"></a-color-picker>`;
|
||||
|
||||
exports[`renders ./antdv-demo/docs/color-picker/demo/hue.md correctly 1`] = `<a-color-picker></a-color-picker>`;
|
||||
|
||||
exports[`renders ./antdv-demo/docs/color-picker/demo/size.md correctly 1`] = `
|
||||
<div>
|
||||
<div class="ant-row">
|
||||
<div class="ant-col ant-col-8">
|
||||
<a-colorpicker size="large"></a-colorpicker>
|
||||
</div>
|
||||
<div class="ant-col ant-col-8">
|
||||
<a-colorpicker></a-colorpicker>
|
||||
</div>
|
||||
<div class="ant-col ant-col-8">
|
||||
<a-colorpicker size="small"></a-colorpicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -1,337 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ColorPicker prop locale should works 1`] = `
|
||||
<div tabindex="0" class="ant-color-picker">
|
||||
<div class="ant-color-picker-selection">
|
||||
<div id="color-picker-box25">
|
||||
<div class="pickr">
|
||||
|
||||
<button type="button" class="pcr-button" role="button" aria-label="toggle color picker dialog"></button>
|
||||
|
||||
|
||||
</div>
|
||||
</div><i aria-label="icon: down" class="anticon anticon-down ant-color-picker-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
|
||||
</svg></i>
|
||||
</div>
|
||||
<div class="pcr-app" data-theme="monolith" aria-label="color picker dialog" role="window">
|
||||
<div class="pcr-selection">
|
||||
<div class="pcr-color-preview">
|
||||
<button type="button" class="pcr-last-color" aria-label="use previous color"></button>
|
||||
<div class="pcr-current-color"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-palette">
|
||||
<div class="pcr-picker"></div>
|
||||
<div class="pcr-palette" tabindex="0" aria-label="color selection area" role="listbox"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-chooser">
|
||||
<div class="pcr-picker"></div>
|
||||
<div class="pcr-hue pcr-slider" tabindex="0" aria-label="hue selection slider" role="slider"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-opacity" style="display:none" hidden="">
|
||||
<div class="pcr-picker"></div>
|
||||
<div class="pcr-opacity pcr-slider" tabindex="0" aria-label="selection slider" role="slider"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-swatches "></div>
|
||||
|
||||
<div class="pcr-interaction">
|
||||
<input class="pcr-result" type="text" spellcheck="false" aria-label="color input field">
|
||||
|
||||
<input class="pcr-type active" data-type="HEXA" value="HEXA" type="button">
|
||||
<input class="pcr-type" data-type="RGBA" value="RGBA" type="button">
|
||||
<input class="pcr-type" data-type="HSLA" value="HSLA" type="button" style="display:none" hidden="">
|
||||
<input class="pcr-type" data-type="HSVA" value="HSVA" type="button" style="display:none" hidden="">
|
||||
<input class="pcr-type" data-type="CMYK" value="CMYK" type="button" style="display:none" hidden="">
|
||||
|
||||
<input class="pcr-save" value="1セーブ" type="button" aria-label="save and close">
|
||||
<input class="pcr-cancel" value="1キャンセル" type="button" style="display:none" hidden="" aria-label="cancel and close">
|
||||
<input class="pcr-clear" value="1晴れ" type="button" aria-label="clear and close">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ColorPicker save event should works 1`] = `
|
||||
<div tabindex="0" class="ant-color-picker">
|
||||
<div class="ant-color-picker-selection">
|
||||
<div id="color-picker-box31">
|
||||
<div class="pickr">
|
||||
|
||||
<button type="button" class="pcr-button" role="button" aria-label="toggle color picker dialog" style="color: rgb(0, 0, 0);"></button>
|
||||
|
||||
|
||||
</div>
|
||||
</div><i aria-label="icon: down" class="anticon anticon-down ant-color-picker-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
|
||||
</svg></i>
|
||||
</div>
|
||||
<div class="pcr-app visible" data-theme="monolith" aria-label="color picker dialog" role="window" style="top: 384px; left: 512px;">
|
||||
<div class="pcr-selection">
|
||||
<div class="pcr-color-preview">
|
||||
<button type="button" class="pcr-last-color" aria-label="use previous color" style="color: rgb(0, 0, 0);"></button>
|
||||
<div class="pcr-current-color"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-palette">
|
||||
<div class="pcr-picker"></div>
|
||||
<div class="pcr-palette" tabindex="0" aria-label="color selection area" role="listbox"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-chooser">
|
||||
<div class="pcr-picker"></div>
|
||||
<div class="pcr-hue pcr-slider" tabindex="0" aria-label="hue selection slider" role="slider"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-opacity" style="display:none" hidden="">
|
||||
<div class="pcr-picker"></div>
|
||||
<div class="pcr-opacity pcr-slider" tabindex="0" aria-label="selection slider" role="slider"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-swatches "></div>
|
||||
|
||||
<div class="pcr-interaction">
|
||||
<input class="pcr-result" type="text" spellcheck="false" aria-label="color input field">
|
||||
|
||||
<input class="pcr-type active" data-type="HEXA" value="HEXA" type="button">
|
||||
<input class="pcr-type" data-type="RGBA" value="RGBA" type="button">
|
||||
<input class="pcr-type" data-type="HSLA" value="HSLA" type="button" style="display:none" hidden="">
|
||||
<input class="pcr-type" data-type="HSVA" value="HSVA" type="button" style="display:none" hidden="">
|
||||
<input class="pcr-type" data-type="CMYK" value="CMYK" type="button" style="display:none" hidden="">
|
||||
|
||||
<input class="pcr-save" value="Save" type="button" aria-label="save and close">
|
||||
<input class="pcr-cancel" value="Cancel" type="button" style="display:none" hidden="" aria-label="cancel and close">
|
||||
<input class="pcr-clear" value="Clear" type="button" aria-label="clear and close">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ColorPicker should support default value 1`] = `
|
||||
<div tabindex="0" class="ant-color-picker">
|
||||
<div class="ant-color-picker-selection">
|
||||
<div id="color-picker-box1">
|
||||
<div class="pickr">
|
||||
|
||||
<button type="button" class="pcr-button" role="button" aria-label="toggle color picker dialog"></button>
|
||||
|
||||
|
||||
</div>
|
||||
</div><i aria-label="icon: down" class="anticon anticon-down ant-color-picker-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
|
||||
</svg></i>
|
||||
</div>
|
||||
<div class="pcr-app" data-theme="monolith" aria-label="color picker dialog" role="window">
|
||||
<div class="pcr-selection">
|
||||
<div class="pcr-color-preview">
|
||||
<button type="button" class="pcr-last-color" aria-label="use previous color"></button>
|
||||
<div class="pcr-current-color"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-palette">
|
||||
<div class="pcr-picker"></div>
|
||||
<div class="pcr-palette" tabindex="0" aria-label="color selection area" role="listbox"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-chooser">
|
||||
<div class="pcr-picker"></div>
|
||||
<div class="pcr-hue pcr-slider" tabindex="0" aria-label="hue selection slider" role="slider"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-opacity" style="display:none" hidden="">
|
||||
<div class="pcr-picker"></div>
|
||||
<div class="pcr-opacity pcr-slider" tabindex="0" aria-label="selection slider" role="slider"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-swatches "></div>
|
||||
|
||||
<div class="pcr-interaction">
|
||||
<input class="pcr-result" type="text" spellcheck="false" aria-label="color input field">
|
||||
|
||||
<input class="pcr-type active" data-type="HEXA" value="HEXA" type="button">
|
||||
<input class="pcr-type" data-type="RGBA" value="RGBA" type="button">
|
||||
<input class="pcr-type" data-type="HSLA" value="HSLA" type="button" style="display:none" hidden="">
|
||||
<input class="pcr-type" data-type="HSVA" value="HSVA" type="button" style="display:none" hidden="">
|
||||
<input class="pcr-type" data-type="CMYK" value="CMYK" type="button" style="display:none" hidden="">
|
||||
|
||||
<input class="pcr-save" value="Save" type="button" aria-label="save and close">
|
||||
<input class="pcr-cancel" value="Cancel" type="button" style="display:none" hidden="" aria-label="cancel and close">
|
||||
<input class="pcr-clear" value="Clear" type="button" aria-label="clear and close">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ColorPicker should support disabled 1`] = `
|
||||
<div tabindex="-1" class="ant-color-picker ant-color-picker-disabled">
|
||||
<div class="ant-color-picker-selection">
|
||||
<div id="color-picker-box13">
|
||||
<div class="pickr">
|
||||
|
||||
<button type="button" class="pcr-button disabled" role="button" aria-label="toggle color picker dialog"></button>
|
||||
|
||||
|
||||
</div>
|
||||
</div><i aria-label="icon: down" class="anticon anticon-down ant-color-picker-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
|
||||
</svg></i>
|
||||
</div>
|
||||
<div class="pcr-app" data-theme="monolith" aria-label="color picker dialog" role="window">
|
||||
<div class="pcr-selection">
|
||||
<div class="pcr-color-preview">
|
||||
<button type="button" class="pcr-last-color" aria-label="use previous color"></button>
|
||||
<div class="pcr-current-color"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-palette">
|
||||
<div class="pcr-picker"></div>
|
||||
<div class="pcr-palette" tabindex="0" aria-label="color selection area" role="listbox"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-chooser">
|
||||
<div class="pcr-picker"></div>
|
||||
<div class="pcr-hue pcr-slider" tabindex="0" aria-label="hue selection slider" role="slider"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-opacity" style="display:none" hidden="">
|
||||
<div class="pcr-picker"></div>
|
||||
<div class="pcr-opacity pcr-slider" tabindex="0" aria-label="selection slider" role="slider"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-swatches "></div>
|
||||
|
||||
<div class="pcr-interaction">
|
||||
<input class="pcr-result" type="text" spellcheck="false" aria-label="color input field">
|
||||
|
||||
<input class="pcr-type active" data-type="HEXA" value="HEXA" type="button">
|
||||
<input class="pcr-type" data-type="RGBA" value="RGBA" type="button">
|
||||
<input class="pcr-type" data-type="HSLA" value="HSLA" type="button" style="display:none" hidden="">
|
||||
<input class="pcr-type" data-type="HSVA" value="HSVA" type="button" style="display:none" hidden="">
|
||||
<input class="pcr-type" data-type="CMYK" value="CMYK" type="button" style="display:none" hidden="">
|
||||
|
||||
<input class="pcr-save" value="Save" type="button" aria-label="save and close">
|
||||
<input class="pcr-cancel" value="Cancel" type="button" style="display:none" hidden="" aria-label="cancel and close">
|
||||
<input class="pcr-clear" value="Clear" type="button" aria-label="clear and close">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ColorPicker should support format 1`] = `
|
||||
<div tabindex="0" class="ant-color-picker">
|
||||
<div class="ant-color-picker-selection">
|
||||
<div id="color-picker-box19">
|
||||
<div class="pickr">
|
||||
|
||||
<button type="button" class="pcr-button" role="button" aria-label="toggle color picker dialog" style="color: rgb(0, 0, 0);"></button>
|
||||
|
||||
|
||||
</div>
|
||||
</div><i aria-label="icon: down" class="anticon anticon-down ant-color-picker-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
|
||||
</svg></i>
|
||||
</div>
|
||||
<div class="pcr-app" data-theme="monolith" aria-label="color picker dialog" role="window">
|
||||
<div class="pcr-selection">
|
||||
<div class="pcr-color-preview">
|
||||
<button type="button" class="pcr-last-color" aria-label="use previous color" style="color: rgb(0, 0, 0);"></button>
|
||||
<div class="pcr-current-color"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-palette">
|
||||
<div class="pcr-picker"></div>
|
||||
<div class="pcr-palette" tabindex="0" aria-label="color selection area" role="listbox"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-chooser">
|
||||
<div class="pcr-picker"></div>
|
||||
<div class="pcr-hue pcr-slider" tabindex="0" aria-label="hue selection slider" role="slider"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-opacity" style="display:none" hidden="">
|
||||
<div class="pcr-picker"></div>
|
||||
<div class="pcr-opacity pcr-slider" tabindex="0" aria-label="selection slider" role="slider"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-swatches "></div>
|
||||
|
||||
<div class="pcr-interaction">
|
||||
<input class="pcr-result" type="text" spellcheck="false" aria-label="color input field">
|
||||
|
||||
<input class="pcr-type active" data-type="HEXA" value="HEXA" type="button">
|
||||
<input class="pcr-type" data-type="RGBA" value="RGBA" type="button">
|
||||
<input class="pcr-type" data-type="HSLA" value="HSLA" type="button" style="display:none" hidden="">
|
||||
<input class="pcr-type" data-type="HSVA" value="HSVA" type="button" style="display:none" hidden="">
|
||||
<input class="pcr-type" data-type="CMYK" value="CMYK" type="button" style="display:none" hidden="">
|
||||
|
||||
<input class="pcr-save" value="Save" type="button" aria-label="save and close">
|
||||
<input class="pcr-cancel" value="Cancel" type="button" style="display:none" hidden="" aria-label="cancel and close">
|
||||
<input class="pcr-clear" value="Clear" type="button" aria-label="clear and close">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ColorPicker should support v-model 1`] = `
|
||||
<div tabindex="0" class="ant-color-picker">
|
||||
<div class="ant-color-picker-selection">
|
||||
<div id="color-picker-box7">
|
||||
<div class="pickr">
|
||||
|
||||
<button type="button" class="pcr-button" role="button" aria-label="toggle color picker dialog"></button>
|
||||
|
||||
|
||||
</div>
|
||||
</div><i aria-label="icon: down" class="anticon anticon-down ant-color-picker-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
|
||||
</svg></i>
|
||||
</div>
|
||||
<div class="pcr-app" data-theme="monolith" aria-label="color picker dialog" role="window">
|
||||
<div class="pcr-selection">
|
||||
<div class="pcr-color-preview">
|
||||
<button type="button" class="pcr-last-color" aria-label="use previous color"></button>
|
||||
<div class="pcr-current-color"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-palette">
|
||||
<div class="pcr-picker"></div>
|
||||
<div class="pcr-palette" tabindex="0" aria-label="color selection area" role="listbox"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-chooser">
|
||||
<div class="pcr-picker"></div>
|
||||
<div class="pcr-hue pcr-slider" tabindex="0" aria-label="hue selection slider" role="slider"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-opacity" style="display:none" hidden="">
|
||||
<div class="pcr-picker"></div>
|
||||
<div class="pcr-opacity pcr-slider" tabindex="0" aria-label="selection slider" role="slider"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-swatches "></div>
|
||||
|
||||
<div class="pcr-interaction">
|
||||
<input class="pcr-result" type="text" spellcheck="false" aria-label="color input field">
|
||||
|
||||
<input class="pcr-type active" data-type="HEXA" value="HEXA" type="button">
|
||||
<input class="pcr-type" data-type="RGBA" value="RGBA" type="button">
|
||||
<input class="pcr-type" data-type="HSLA" value="HSLA" type="button" style="display:none" hidden="">
|
||||
<input class="pcr-type" data-type="HSVA" value="HSVA" type="button" style="display:none" hidden="">
|
||||
<input class="pcr-type" data-type="CMYK" value="CMYK" type="button" style="display:none" hidden="">
|
||||
|
||||
<input class="pcr-save" value="Save" type="button" aria-label="save and close">
|
||||
<input class="pcr-cancel" value="Cancel" type="button" style="display:none" hidden="" aria-label="cancel and close">
|
||||
<input class="pcr-clear" value="Clear" type="button" aria-label="clear and close">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('color-picker');
|
||||
|
|
@ -1,155 +0,0 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import ColorPicker from '..';
|
||||
import { asyncExpect } from '@/tests/utils';
|
||||
describe('ColorPicker', () => {
|
||||
it('should support default value', async () => {
|
||||
const wrapper = mount(
|
||||
{
|
||||
render() {
|
||||
return <ColorPicker default-value="#cd0200" getPopupContainer={p => p}></ColorPicker>;
|
||||
},
|
||||
},
|
||||
{ sync: false, attachToDocument: true },
|
||||
);
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
wrapper.destroy();
|
||||
}, 1000);
|
||||
});
|
||||
it('should support v-model', async () => {
|
||||
let color = 'rgba(10, 10, 10, 1)';
|
||||
const wrapper = mount(
|
||||
{
|
||||
data() {
|
||||
return {
|
||||
color,
|
||||
};
|
||||
},
|
||||
render() {
|
||||
return <ColorPicker v-model={this.color} getPopupContainer={p => p}></ColorPicker>;
|
||||
},
|
||||
mounted() {
|
||||
this.color = 'rgba(110, 120, 130, 1)';
|
||||
},
|
||||
},
|
||||
{ sync: false, attachToDocument: true },
|
||||
);
|
||||
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
wrapper.destroy();
|
||||
}, 1000);
|
||||
});
|
||||
it('should support disabled', async () => {
|
||||
const wrapper = mount(
|
||||
{
|
||||
data() {
|
||||
return {
|
||||
disabled: false,
|
||||
};
|
||||
},
|
||||
render() {
|
||||
return <ColorPicker disabled={this.disabled} getPopupContainer={p => p}></ColorPicker>;
|
||||
},
|
||||
mounted() {
|
||||
this.disabled = true;
|
||||
},
|
||||
},
|
||||
{ sync: false, attachToDocument: true },
|
||||
);
|
||||
|
||||
await asyncExpect(async () => {
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
await asyncExpect(() => {
|
||||
wrapper.destroy();
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
it('should support format', async () => {
|
||||
const wrapper = mount(
|
||||
{
|
||||
data() {
|
||||
return {
|
||||
format: 'RGBA',
|
||||
};
|
||||
},
|
||||
render() {
|
||||
return <ColorPicker format={this.format} getPopupContainer={p => p}></ColorPicker>;
|
||||
},
|
||||
mounted() {
|
||||
this.format = 'HEX';
|
||||
},
|
||||
},
|
||||
{ sync: false, attachToDocument: true },
|
||||
);
|
||||
|
||||
await asyncExpect(async () => {
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
await asyncExpect(() => {
|
||||
wrapper.destroy();
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
it('prop locale should works', async () => {
|
||||
const wrapper = mount(
|
||||
{
|
||||
data() {
|
||||
return {
|
||||
locale: {
|
||||
lang: {
|
||||
'btn:save': 'セーブ',
|
||||
'btn:cancel': 'キャンセル',
|
||||
'btn:clear': '晴れ',
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<ColorPicker default-value="#cd0200" locale={this.locale} getPopupContainer={p => p} />
|
||||
);
|
||||
},
|
||||
mounted() {
|
||||
this.locale = {
|
||||
lang: {
|
||||
'btn:save': '1セーブ',
|
||||
'btn:cancel': '1キャンセル',
|
||||
'btn:clear': '1晴れ',
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{ sync: false, attachToDocument: true },
|
||||
);
|
||||
await asyncExpect(async () => {
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
await asyncExpect(() => {
|
||||
wrapper.destroy();
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
it('save event should works', async () => {
|
||||
const wrapper = mount(
|
||||
{
|
||||
render() {
|
||||
return (
|
||||
<ColorPicker default-value="#cd0200" getPopupContainer={p => p} onSave={this.save} />
|
||||
);
|
||||
},
|
||||
methods: {
|
||||
save(val) {
|
||||
return val;
|
||||
},
|
||||
},
|
||||
},
|
||||
{ sync: false, attachToDocument: true },
|
||||
);
|
||||
await asyncExpect(async () => {
|
||||
wrapper.find('.pcr-save').trigger('click');
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
await asyncExpect(() => {
|
||||
wrapper.destroy();
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import ColorPicker from './ColorPicker';
|
||||
import Base from '../base';
|
||||
/* istanbul ignore next */
|
||||
ColorPicker.install = function(Vue) {
|
||||
Vue.use(Base);
|
||||
Vue.component(ColorPicker.name, ColorPicker);
|
||||
};
|
||||
|
||||
export default ColorPicker;
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
export default {
|
||||
'btn:save': 'Save',
|
||||
'btn:cancel': 'Cancel',
|
||||
'btn:clear': 'Clear',
|
||||
};
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
export default {
|
||||
'btn:save': '保存',
|
||||
'btn:cancel': '取消',
|
||||
'btn:clear': '清除',
|
||||
};
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
export default {
|
||||
'btn:save': '保存',
|
||||
'btn:cancel': '取消',
|
||||
'btn:clear': '清除',
|
||||
};
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// style dependencies
|
||||
import '../../grid/style';
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
@import '../../style/themes/index';
|
||||
@import '../../input/style/mixin';
|
||||
|
||||
@color-picker-prefix-cls: ~'@{ant-prefix}-color-picker';
|
||||
.@{color-picker-prefix-cls} {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
min-width: 55px;
|
||||
.pickr {
|
||||
display: inline-block;
|
||||
.pcr-button {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 7px;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.@{color-picker-prefix-cls}-disabled {
|
||||
cursor: not-allowed;
|
||||
.@{color-picker-prefix-cls}-selection {
|
||||
background: @input-disabled-bg;
|
||||
box-shadow: none;
|
||||
border: @border-width-base @border-style-base @select-border-color;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
border: @border-width-base @border-style-base @select-border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&.@{color-picker-prefix-cls}-open {
|
||||
.@{color-picker-prefix-cls}-icon {
|
||||
& svg {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-open {
|
||||
.@{color-picker-prefix-cls}-icon {
|
||||
& svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.@{color-picker-prefix-cls}-selection {
|
||||
.active();
|
||||
}
|
||||
}
|
||||
&-selection {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
background-color: @select-background;
|
||||
border: @border-width-base @border-style-base @select-border-color;
|
||||
border-top-width: @border-width-base + 0.02px;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
transition: all 0.3s @ease-in-out;
|
||||
user-select: none;
|
||||
|
||||
position: relative;
|
||||
height: @input-height-base;
|
||||
cursor: inherit;
|
||||
&:hover {
|
||||
.hover;
|
||||
}
|
||||
}
|
||||
&-icon {
|
||||
.iconfont-mixin();
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: @control-padding-horizontal - 4px;
|
||||
margin-top: -@font-size-sm / 2;
|
||||
color: @disabled-color;
|
||||
font-size: @font-size-sm;
|
||||
line-height: 1;
|
||||
transform-origin: 50% 50%;
|
||||
& svg {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
}
|
||||
&-lg {
|
||||
font-size: @font-size-lg;
|
||||
.@{color-picker-prefix-cls}-selection {
|
||||
line-height: @input-height-lg - 12;
|
||||
height: @input-height-lg;
|
||||
}
|
||||
.@{color-picker-prefix-cls}-icon {
|
||||
top: @input-height-lg / 2;
|
||||
}
|
||||
}
|
||||
|
||||
&-sm {
|
||||
.@{color-picker-prefix-cls}-selection {
|
||||
line-height: @input-height-sm - 12;
|
||||
height: @input-height-sm;
|
||||
}
|
||||
.pickr .pcr-button {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.@{color-picker-prefix-cls}-icon {
|
||||
right: @control-padding-horizontal - 2px;
|
||||
top: @input-height-sm / 2;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -124,8 +124,6 @@ import { default as Timeline } from './timeline';
|
|||
|
||||
import { default as Tooltip } from './tooltip';
|
||||
|
||||
// import { default as Mention } from './mention'
|
||||
|
||||
import { default as Upload } from './upload';
|
||||
|
||||
import { default as version } from './version';
|
||||
|
|
@ -136,8 +134,6 @@ import { default as Skeleton } from './skeleton';
|
|||
|
||||
import { default as Comment } from './comment';
|
||||
|
||||
// import { default as ColorPicker } from './color-picker';
|
||||
|
||||
import { default as ConfigProvider } from './config-provider';
|
||||
|
||||
import { default as Empty } from './empty';
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import Pagination from '../vc-pagination/locale/en_US';
|
|||
import DatePicker from '../date-picker/locale/en_US';
|
||||
import TimePicker from '../time-picker/locale/en_US';
|
||||
import Calendar from '../calendar/locale/en_US';
|
||||
import ColorPicker from '../color-picker/locale/en_US';
|
||||
|
||||
export default {
|
||||
locale: 'en',
|
||||
|
|
@ -10,7 +9,6 @@ export default {
|
|||
DatePicker,
|
||||
TimePicker,
|
||||
Calendar,
|
||||
ColorPicker,
|
||||
global: {
|
||||
placeholder: 'Please select',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import Pagination from '../vc-pagination/locale/zh_CN';
|
|||
import DatePicker from '../date-picker/locale/zh_CN';
|
||||
import TimePicker from '../time-picker/locale/zh_CN';
|
||||
import Calendar from '../calendar/locale/zh_CN';
|
||||
import ColorPicker from '../color-picker/locale/zh_CN';
|
||||
|
||||
export default {
|
||||
locale: 'zh-cn',
|
||||
|
|
@ -10,7 +9,6 @@ export default {
|
|||
DatePicker,
|
||||
TimePicker,
|
||||
Calendar,
|
||||
ColorPicker,
|
||||
// locales for all comoponents
|
||||
global: {
|
||||
placeholder: '请选择',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import Pagination from '../vc-pagination/locale/zh_TW';
|
|||
import DatePicker from '../date-picker/locale/zh_TW';
|
||||
import TimePicker from '../time-picker/locale/zh_TW';
|
||||
import Calendar from '../calendar/locale/zh_TW';
|
||||
import ColorPicker from '../color-picker/locale/zh_TW';
|
||||
|
||||
export default {
|
||||
locale: 'zh-tw',
|
||||
|
|
@ -10,7 +9,6 @@ export default {
|
|||
DatePicker,
|
||||
TimePicker,
|
||||
Calendar,
|
||||
ColorPicker,
|
||||
Table: {
|
||||
filterTitle: '篩選器',
|
||||
filterConfirm: '確定',
|
||||
|
|
|
|||
|
|
@ -61,4 +61,3 @@ import './descriptions/style';
|
|||
import './page-header/style';
|
||||
import './form-model/style';
|
||||
import './space/style';
|
||||
// import './color-picker/style';
|
||||
|
|
|
|||
Loading…
Reference in New Issue