github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: remove colorpicker

Browse Source
pull/3784/head
tangjinzhou 4 years ago
parent 22dccf46c5
commit 5e063ba9a3
16 changed files with 0 additions and 899 deletions
Show Stats Download Patch File Download Diff File

208
components/color-picker/ColorPicker.jsx
Unescape View File

@ -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 }}
/>
);
},
};

36
components/color-picker/__tests__/__snapshots__/demo.test.js.snap
Unescape View File

@ -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>
`;

337
components/color-picker/__tests__/__snapshots__/index.test.js.snap
Unescape View File

@ -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>
`;

3
components/color-picker/__tests__/demo.test.js
Unescape View File

@ -1,3 +0,0 @@
import demoTest from '../../../tests/shared/demoTest';
demoTest('color-picker');

155
components/color-picker/__tests__/index.test.js
Unescape View File

@ -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);
});
});

9
components/color-picker/index.js
Unescape View File

@ -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;

5
components/color-picker/locale/en_US.js
Unescape View File

@ -1,5 +0,0 @@
export default {
'btn:save': 'Save',
'btn:cancel': 'Cancel',
'btn:clear': 'Clear',
};

5
components/color-picker/locale/zh_CN.js
Unescape View File

@ -1,5 +0,0 @@
export default {
'btn:save': '保存',
'btn:cancel': '取消',
'btn:clear': '清除',
};

5
components/color-picker/locale/zh_TW.js
Unescape View File

@ -1,5 +0,0 @@
export default {
'btn:save': '保存',
'btn:cancel': '取消',
'btn:clear': '清除',
};

4
components/color-picker/style/index.js
Unescape View File

@ -1,4 +0,0 @@
import '../../style/index.less';
import './index.less';
// style dependencies
import '../../grid/style';

121
components/color-picker/style/index.less
Unescape View File

@ -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;
}
}
}

4
components/index.js
Unescape View File

@ -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
components/locale/default.js
Unescape View File

@ -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
components/locale/zh_CN.js
Unescape View File

@ -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
components/locale/zh_TW.js
Unescape View File

@ -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: '確定',

1
components/style.js
Unescape View File

@ -61,4 +61,3 @@ import './descriptions/style';
import './page-header/style';
import './form-model/style';
import './space/style';
// import './color-picker/style';

Write Preview
Loading…
Cancel
Save