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 Tooltip } from './tooltip';
|
||||||
|
|
||||||
// import { default as Mention } from './mention'
|
|
||||||
|
|
||||||
import { default as Upload } from './upload';
|
import { default as Upload } from './upload';
|
||||||
|
|
||||||
import { default as version } from './version';
|
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 Comment } from './comment';
|
||||||
|
|
||||||
// import { default as ColorPicker } from './color-picker';
|
|
||||||
|
|
||||||
import { default as ConfigProvider } from './config-provider';
|
import { default as ConfigProvider } from './config-provider';
|
||||||
|
|
||||||
import { default as Empty } from './empty';
|
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 DatePicker from '../date-picker/locale/en_US';
|
||||||
import TimePicker from '../time-picker/locale/en_US';
|
import TimePicker from '../time-picker/locale/en_US';
|
||||||
import Calendar from '../calendar/locale/en_US';
|
import Calendar from '../calendar/locale/en_US';
|
||||||
import ColorPicker from '../color-picker/locale/en_US';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
locale: 'en',
|
locale: 'en',
|
||||||
|
|
@ -10,7 +9,6 @@ export default {
|
||||||
DatePicker,
|
DatePicker,
|
||||||
TimePicker,
|
TimePicker,
|
||||||
Calendar,
|
Calendar,
|
||||||
ColorPicker,
|
|
||||||
global: {
|
global: {
|
||||||
placeholder: 'Please select',
|
placeholder: 'Please select',
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@ import Pagination from '../vc-pagination/locale/zh_CN';
|
||||||
import DatePicker from '../date-picker/locale/zh_CN';
|
import DatePicker from '../date-picker/locale/zh_CN';
|
||||||
import TimePicker from '../time-picker/locale/zh_CN';
|
import TimePicker from '../time-picker/locale/zh_CN';
|
||||||
import Calendar from '../calendar/locale/zh_CN';
|
import Calendar from '../calendar/locale/zh_CN';
|
||||||
import ColorPicker from '../color-picker/locale/zh_CN';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
locale: 'zh-cn',
|
locale: 'zh-cn',
|
||||||
|
|
@ -10,7 +9,6 @@ export default {
|
||||||
DatePicker,
|
DatePicker,
|
||||||
TimePicker,
|
TimePicker,
|
||||||
Calendar,
|
Calendar,
|
||||||
ColorPicker,
|
|
||||||
// locales for all comoponents
|
// locales for all comoponents
|
||||||
global: {
|
global: {
|
||||||
placeholder: '请选择',
|
placeholder: '请选择',
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@ import Pagination from '../vc-pagination/locale/zh_TW';
|
||||||
import DatePicker from '../date-picker/locale/zh_TW';
|
import DatePicker from '../date-picker/locale/zh_TW';
|
||||||
import TimePicker from '../time-picker/locale/zh_TW';
|
import TimePicker from '../time-picker/locale/zh_TW';
|
||||||
import Calendar from '../calendar/locale/zh_TW';
|
import Calendar from '../calendar/locale/zh_TW';
|
||||||
import ColorPicker from '../color-picker/locale/zh_TW';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
locale: 'zh-tw',
|
locale: 'zh-tw',
|
||||||
|
|
@ -10,7 +9,6 @@ export default {
|
||||||
DatePicker,
|
DatePicker,
|
||||||
TimePicker,
|
TimePicker,
|
||||||
Calendar,
|
Calendar,
|
||||||
ColorPicker,
|
|
||||||
Table: {
|
Table: {
|
||||||
filterTitle: '篩選器',
|
filterTitle: '篩選器',
|
||||||
filterConfirm: '確定',
|
filterConfirm: '確定',
|
||||||
|
|
|
||||||
|
|
@ -61,4 +61,3 @@ import './descriptions/style';
|
||||||
import './page-header/style';
|
import './page-header/style';
|
||||||
import './form-model/style';
|
import './form-model/style';
|
||||||
import './space/style';
|
import './space/style';
|
||||||
// import './color-picker/style';
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue