Merge remote-tracking branch 'origin/master' into feat-vue3
tanjinzhou
commit
660ead3271
|
|
@ -10,6 +10,20 @@
|
|||
|
||||
---
|
||||
|
||||
## 1.6.3
|
||||
|
||||
`2020-07-05`
|
||||
|
||||
- 🐞 Fix Input.Password focus position shift issue [#2420](https://github.com/vueComponent/ant-design-vue/pull/2420)
|
||||
- 🐞 Fix Drawer maskstyle not working [#2407](https://github.com/vueComponent/ant-design-vue/issues/2407)
|
||||
- 🐞 Fix Drawer maskstyle not working [#2407](https://github.com/vueComponent/ant-design-vue/issues/2407)
|
||||
- 🌟 Button supports custom Icon [#2245](https://github.com/vueComponent/ant-design-vue/pull/2245)
|
||||
- 🌟 DatePicker supports custom format [#2276](https://github.com/vueComponent/ant-design-vue/pull/2276)
|
||||
- 🐞 Fix DatePicker year and time is incorrect [#2488](https://github.com/vueComponent/ant-design-vue/issues/2488)
|
||||
- 🌟 Optimize the Menu component, the animation is smoother
|
||||
- 🐞 Fix Dropdown pop-up position error [#2359](https://github.com/vueComponent/ant-design-vue/issues/2359)
|
||||
- 🐞 Fix the problem of duplicate key when `Breadcrumb` has the same name [#2505](https://github.com/vueComponent/ant-design-vue/issues/2505)
|
||||
|
||||
## 1.6.2
|
||||
|
||||
`2020-06-02`
|
||||
|
|
|
|||
|
|
@ -10,6 +10,20 @@
|
|||
|
||||
---
|
||||
|
||||
## 1.6.3
|
||||
|
||||
`2020-07-05`
|
||||
|
||||
- 🐞 修复 Input.Password focus 位置移位问题 [#2420](https://github.com/vueComponent/ant-design-vue/pull/2420)
|
||||
- 🐞 修复 Drawer maskstyle 不生效问题 [#2407](https://github.com/vueComponent/ant-design-vue/issues/2407)
|
||||
- 🐞 修复 Drawer maskstyle 不生效问题 [#2407](https://github.com/vueComponent/ant-design-vue/issues/2407)
|
||||
- 🌟 Button 支持自定义 Icon [#2245](https://github.com/vueComponent/ant-design-vue/pull/2245)
|
||||
- 🌟 DatePicker 支持自定义 format [#2276](https://github.com/vueComponent/ant-design-vue/pull/2276)
|
||||
- 🐞 修复 DatePicker 年份时间不正确问题 [#2488](https://github.com/vueComponent/ant-design-vue/issues/2488)
|
||||
- 🌟 优化 Menu 组件，动画更加流畅
|
||||
- 🐞 修复 Dropdown 弹窗位置错误问题 [#2359](https://github.com/vueComponent/ant-design-vue/issues/2359)
|
||||
- 🐞 修复 Breadcrumb 名称相同时重复 key 问题 [#2505](https://github.com/vueComponent/ant-design-vue/issues/2505)
|
||||
|
||||
## 1.6.2
|
||||
|
||||
`2020-06-02`
|
||||
|
|
|
|||
|
|
@ -196,6 +196,9 @@ function githubRelease(done) {
|
|||
})
|
||||
.then(() => {
|
||||
done();
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ export default {
|
|||
overlay = (
|
||||
<Menu>
|
||||
{route.children.map(child => (
|
||||
<Menu.Item key={child.breadcrumbName || child.path}>
|
||||
<Menu.Item key={child.path || child.breadcrumbName}>
|
||||
{itemRender({
|
||||
route: child,
|
||||
params,
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ exports[`renders ./antdv-demo/docs/carousel/demo/autoplay.md correctly 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="slick-dots slick-dots-bottom undefined" style="display: block;">
|
||||
<ul class="slick-dots slick-dots-bottom" style="display: block;">
|
||||
<li class="slick-active"><button class="">1</button></li>
|
||||
<li class=""><button class="">2</button></li>
|
||||
<li class=""><button class="">3</button></li>
|
||||
|
|
@ -150,7 +150,7 @@ exports[`renders ./antdv-demo/docs/carousel/demo/basic.md correctly 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="slick-dots slick-dots-bottom undefined" style="display: block;">
|
||||
<ul class="slick-dots slick-dots-bottom" style="display: block;">
|
||||
<li class="slick-active"><button class="">1</button></li>
|
||||
<li class=""><button class="">2</button></li>
|
||||
<li class=""><button class="">3</button></li>
|
||||
|
|
@ -231,8 +231,11 @@ exports[`renders ./antdv-demo/docs/carousel/demo/customArrows.md correctly 1`] =
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-slick-arrow slick-arrow slick-next" style="right: 10px; display: block;"><span role="img" aria-label="right-circle" class="anticon anticon-right-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="right-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M666.7 505.5l-246-178A8 8 0 00408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span></div>
|
||||
<ul class="slick-dots slick-dots-bottom undefined" style="display: block;">
|
||||
<div class="custom-slick-arrow slick-arrow slick-next" style="right: 10px; display: block;"><i aria-label="icon: right-circle" class="anticon anticon-right-circle"><svg viewBox="64 64 896 896" data-icon="right-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<path d="M666.7 505.5l-246-178A8 8 0 0 0 408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z"></path>
|
||||
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
|
||||
</svg></i></div>
|
||||
<ul class="slick-dots slick-dots-bottom" style="display: block;">
|
||||
<li class="slick-active"><button class="">1</button></li>
|
||||
<li class=""><button class="">2</button></li>
|
||||
<li class=""><button class="">3</button></li>
|
||||
|
|
@ -339,7 +342,7 @@ exports[`renders ./antdv-demo/docs/carousel/demo/fade.md correctly 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="slick-dots slick-dots-bottom undefined" style="display: block;">
|
||||
<ul class="slick-dots slick-dots-bottom" style="display: block;">
|
||||
<li class="slick-active"><button class="">1</button></li>
|
||||
<li class=""><button class="">2</button></li>
|
||||
<li class=""><button class="">3</button></li>
|
||||
|
|
@ -429,7 +432,7 @@ exports[`renders ./antdv-demo/docs/carousel/demo/position.md correctly 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="slick-dots slick-dots-top undefined" style="display: block;">
|
||||
<ul class="slick-dots slick-dots-top" style="display: block;">
|
||||
<li class="slick-active"><button class="">1</button></li>
|
||||
<li class=""><button class="">2</button></li>
|
||||
<li class=""><button class="">3</button></li>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import hasProp, {
|
|||
import { ConfigConsumerProps } from '../config-provider';
|
||||
import Base from '../base';
|
||||
import warning from '../_util/warning';
|
||||
import classNames from 'classnames';
|
||||
|
||||
// matchMedia polyfill for
|
||||
// https://github.com/WickyNilliams/enquire.js/issues/82
|
||||
|
|
@ -164,7 +165,9 @@ const Carousel = {
|
|||
const dotsClass = 'slick-dots';
|
||||
const dotPosition = this.getDotPosition();
|
||||
props.vertical = dotPosition === 'left' || dotPosition === 'right';
|
||||
props.dotsClass = `${dotsClass} ${dotsClass}-${dotPosition || 'bottom'} ${props.dotsClass}`;
|
||||
props.dotsClass = classNames(`${dotsClass}`, `${dotsClass}-${dotPosition || 'bottom'}`, {
|
||||
[`${props.dotsClass}`]: !!props.dotsClass,
|
||||
});
|
||||
if (props.vertical) {
|
||||
className = `${className} ${className}-vertical`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,208 @@
|
|||
import PropTypes from '../_util/vue-types';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
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 }}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
// 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>
|
||||
`;
|
||||
|
|
@ -0,0 +1,337 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ColorPicker prop locale should works 1`] = `
|
||||
<div tabindex="0" class="ant-color-picker ant-color-picker-open">
|
||||
<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" style="color: rgb(205, 2, 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="left: 512px; top: 384px;">
|
||||
<div class="pcr-selection">
|
||||
<div class="pcr-color-preview">
|
||||
<button type="button" class="pcr-last-color" aria-label="use previous color" style="color: rgb(205, 2, 0);"></button>
|
||||
<div class="pcr-current-color" style="color: rgb(205, 2, 0);"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-palette">
|
||||
<div class="pcr-picker" style="background: rgb(205, 2, 0);"></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" style="background-color: hsl(0.5853658536585238, 100%, 50%);"></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 ant-color-picker-open">
|
||||
<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(205, 2, 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" style="left: 512px; top: 384px;">
|
||||
<div class="pcr-selection">
|
||||
<div class="pcr-color-preview">
|
||||
<button type="button" class="pcr-last-color" aria-label="use previous color" style="color: rgb(205, 2, 0);"></button>
|
||||
<div class="pcr-current-color" style="color: rgb(205, 2, 0);"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-palette">
|
||||
<div class="pcr-picker" style="background: rgb(205, 2, 0);"></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" style="background-color: hsl(0.5853658536585238, 100%, 50%);"></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 ant-color-picker-open">
|
||||
<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" style="color: rgb(205, 2, 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="left: 512px; top: 384px;">
|
||||
<div class="pcr-selection">
|
||||
<div class="pcr-color-preview">
|
||||
<button type="button" class="pcr-last-color" aria-label="use previous color" style="color: rgb(205, 2, 0);"></button>
|
||||
<div class="pcr-current-color" style="color: rgb(205, 2, 0);"></div>
|
||||
</div>
|
||||
|
||||
<div class="pcr-color-palette">
|
||||
<div class="pcr-picker" style="background: rgb(205, 2, 0);"></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" style="background-color: hsl(0.5853658536585238, 100%, 50%);"></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 clear" role="button" aria-label="toggle color picker dialog" style="color: rgba(0, 0, 0, 0.15);"></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" style="left: 512px; top: 384px;">
|
||||
<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 clear" role="button" aria-label="toggle color picker dialog" style="color: rgba(0, 0, 0, 0.15);"></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" style="left: 512px; top: 384px;">
|
||||
<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 clear" role="button" aria-label="toggle color picker dialog" style="color: rgba(0, 0, 0, 0.15);"></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" style="left: 512px; top: 384px;">
|
||||
<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>
|
||||
`;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('color-picker');
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
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);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
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;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export default {
|
||||
'btn:save': 'Save',
|
||||
'btn:cancel': 'Cancel',
|
||||
'btn:clear': 'Clear',
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export default {
|
||||
'btn:save': '保存',
|
||||
'btn:cancel': '取消',
|
||||
'btn:clear': '清除',
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export default {
|
||||
'btn:save': '保存',
|
||||
'btn:cancel': '取消',
|
||||
'btn:clear': '清除',
|
||||
};
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// style dependencies
|
||||
import '../../grid/style';
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ export const PickerProps = () => ({
|
|||
transitionName: PropTypes.string,
|
||||
prefixCls: PropTypes.string,
|
||||
inputPrefixCls: PropTypes.string,
|
||||
format: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
|
||||
format: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.func]),
|
||||
disabled: PropTypes.bool,
|
||||
allowClear: PropTypes.bool,
|
||||
suffixIcon: PropTypes.any,
|
||||
|
|
|
|||
|
|
@ -5,5 +5,13 @@ export function formatDate(value, format) {
|
|||
if (Array.isArray(format)) {
|
||||
format = format[0];
|
||||
}
|
||||
if (typeof format === 'function') {
|
||||
const result = format(value);
|
||||
if (typeof result === 'string') {
|
||||
return result;
|
||||
} else {
|
||||
throw new Error('The function of format does not return a string');
|
||||
}
|
||||
}
|
||||
return value.format(format);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -136,6 +136,8 @@ 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';
|
||||
|
|
@ -203,6 +205,7 @@ const components = [
|
|||
Drawer,
|
||||
Skeleton,
|
||||
Comment,
|
||||
// ColorPicker,
|
||||
ConfigProvider,
|
||||
Empty,
|
||||
Result,
|
||||
|
|
@ -292,6 +295,7 @@ export {
|
|||
Drawer,
|
||||
Skeleton,
|
||||
Comment,
|
||||
// ColorPicker,
|
||||
ConfigProvider,
|
||||
Empty,
|
||||
Result,
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('list');
|
||||
demoTest('list', { skip: ['infinite-virtualized-load'] });
|
||||
|
|
|
|||
|
|
@ -37,7 +37,6 @@ export default {
|
|||
return localeCode;
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const { $slots } = this;
|
||||
const children = this.children || $slots.default;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ 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',
|
||||
|
|
@ -9,6 +10,7 @@ export default {
|
|||
DatePicker,
|
||||
TimePicker,
|
||||
Calendar,
|
||||
ColorPicker,
|
||||
global: {
|
||||
placeholder: 'Please select',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ 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',
|
||||
|
|
@ -9,6 +10,7 @@ export default {
|
|||
DatePicker,
|
||||
TimePicker,
|
||||
Calendar,
|
||||
ColorPicker,
|
||||
// locales for all comoponents
|
||||
global: {
|
||||
placeholder: '请选择',
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ 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',
|
||||
|
|
@ -9,6 +10,7 @@ export default {
|
|||
DatePicker,
|
||||
TimePicker,
|
||||
Calendar,
|
||||
ColorPicker,
|
||||
Table: {
|
||||
filterTitle: '篩選器',
|
||||
filterConfirm: '確 定',
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
background: @menu-bg;
|
||||
outline: none;
|
||||
box-shadow: @box-shadow-base;
|
||||
transition: background 0.3s, width 0.2s;
|
||||
transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
|
||||
.clearfix;
|
||||
|
||||
ul,
|
||||
|
|
|
|||
|
|
@ -60,3 +60,4 @@ import './result/style';
|
|||
import './descriptions/style';
|
||||
import './page-header/style';
|
||||
import './form-model/style';
|
||||
// import './color-picker/style';
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const Calendar = {
|
|||
name: 'Calendar',
|
||||
props: {
|
||||
locale: PropTypes.object.def(enUs),
|
||||
format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
|
||||
format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
||||
visible: PropTypes.bool.def(true),
|
||||
prefixCls: PropTypes.string.def('rc-calendar'),
|
||||
// prefixCls: PropTypes.string,
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const FullCalendar = {
|
|||
name: 'FullCalendar',
|
||||
props: {
|
||||
locale: PropTypes.object.def(enUs),
|
||||
format: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
|
||||
format: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.func]),
|
||||
visible: PropTypes.bool.def(true),
|
||||
prefixCls: PropTypes.string.def('rc-calendar'),
|
||||
defaultType: PropTypes.string.def('date'),
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const Picker = {
|
|||
animation: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
||||
disabled: PropTypes.bool,
|
||||
transitionName: PropTypes.string,
|
||||
format: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
|
||||
format: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.func]),
|
||||
// onChange: PropTypes.func,
|
||||
// onOpenChange: PropTypes.func,
|
||||
children: PropTypes.func,
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ const RangeCalendar = {
|
|||
// onValueChange: PropTypes.func,
|
||||
// onHoverChange: PropTypes.func,
|
||||
// onPanelChange: PropTypes.func,
|
||||
format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
|
||||
format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
||||
// onClear: PropTypes.func,
|
||||
type: PropTypes.any.def('both'),
|
||||
disabledDate: PropTypes.func,
|
||||
|
|
|
|||
|
|
@ -174,7 +174,7 @@ const CalendarHeader = {
|
|||
panel = (
|
||||
<YearPanel
|
||||
locale={locale}
|
||||
defaultValue={value}
|
||||
value={value}
|
||||
rootPrefixCls={prefixCls}
|
||||
onSelect={this.onYearSelect}
|
||||
onDecadePanelShow={this.showDecadePanel}
|
||||
|
|
@ -186,7 +186,7 @@ const CalendarHeader = {
|
|||
panel = (
|
||||
<DecadePanel
|
||||
locale={locale}
|
||||
defaultValue={value}
|
||||
value={value}
|
||||
rootPrefixCls={prefixCls}
|
||||
onSelect={this.onDecadeSelect}
|
||||
renderFooter={renderFooter}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const DateInput = {
|
|||
timePicker: PropTypes.object,
|
||||
value: PropTypes.object,
|
||||
disabledTime: PropTypes.any,
|
||||
format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
|
||||
format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
||||
locale: PropTypes.object,
|
||||
disabledDate: PropTypes.func,
|
||||
// onChange: PropTypes.func,
|
||||
|
|
|
|||
|
|
@ -35,7 +35,11 @@ export default {
|
|||
sValue: this.value || this.defaultValue,
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
this.sValue = val;
|
||||
},
|
||||
},
|
||||
render() {
|
||||
const value = this.sValue;
|
||||
const { locale, renderFooter } = this.$props;
|
||||
|
|
|
|||
|
|
@ -100,5 +100,14 @@ export function formatDate(value, format) {
|
|||
format = format[0];
|
||||
}
|
||||
|
||||
if (typeof format === 'function') {
|
||||
const result = format(value);
|
||||
if (typeof result === 'string') {
|
||||
return result;
|
||||
} else {
|
||||
throw new Error('The function of format does not return a string');
|
||||
}
|
||||
}
|
||||
|
||||
return value.format(format);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,6 +36,11 @@ export default {
|
|||
sValue: this.value || this.defaultValue,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.sValue = val;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
years() {
|
||||
const value = this.sValue;
|
||||
|
|
|
|||
|
|
@ -136,9 +136,10 @@ export default {
|
|||
if (
|
||||
this.$refs.trigger &&
|
||||
this.$refs.trigger._component &&
|
||||
this.$refs.trigger._component.alignInstance
|
||||
this.$refs.trigger._component.$refs &&
|
||||
this.$refs.trigger._component.$refs.alignInstance
|
||||
) {
|
||||
this.$refs.trigger._component.alignInstance.forceAlign();
|
||||
this.$refs.trigger._component.$refs.alignInstance.forceAlign();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -783,7 +783,6 @@ export default {
|
|||
onBlur={this.onBlur}
|
||||
onKeydown={editable ? this.onKeyDown : noop}
|
||||
onKeyup={editable ? this.onKeyUp : noop}
|
||||
maxlength={props.maxLength}
|
||||
readOnly={this.readOnly}
|
||||
disabled={this.disabled}
|
||||
max={this.max}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "ant-design-vue",
|
||||
"version": "1.6.2",
|
||||
"version": "1.6.3",
|
||||
"title": "Ant Design Vue",
|
||||
"description": "An enterprise-class UI design language and Vue-based implementation",
|
||||
"keywords": [
|
||||
|
|
@ -175,6 +175,7 @@
|
|||
"dependencies": {
|
||||
"@ant-design-vue/babel-helper-vue-compatible-props": "^1.0.0",
|
||||
"@ant-design/icons-vue": "^5.0.0-beta.0",
|
||||
"@simonwep/pickr": "~1.7.0",
|
||||
"add-dom-event-listener": "^1.0.2",
|
||||
"array-tree-filter": "^2.1.0",
|
||||
"async-validator": "^3.0.3",
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@ export default function demoTest(component, options = {}) {
|
|||
testMethod(`renders ${file} correctly`, done => {
|
||||
MockDate.set(moment('2016-11-22'));
|
||||
const demo = require(`../.${file}`).default || require(`../.${file}`);
|
||||
const wrapper = mount(demo, { sync: false });
|
||||
document.body.innerHTML = '';
|
||||
const wrapper = mount(demo, { sync: false, attachToDocument: true });
|
||||
Vue.nextTick(() => {
|
||||
// should get dom from element
|
||||
// snap files copy from antd does not need to change
|
||||
|
|
@ -27,6 +28,7 @@ export default function demoTest(component, options = {}) {
|
|||
expect(dom).toMatchSnapshot();
|
||||
MockDate.reset();
|
||||
wrapper.destroy();
|
||||
document.body.innerHTML = '';
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
// Project: https://github.com/vueComponent/ant-design-vue Definitions by:
|
||||
// https://github.com/vueComponent/ant-design-vue/types
|
||||
|
||||
import { AntdComponent } from './component';
|
||||
import Pickr from '@simonwep/pickr';
|
||||
|
||||
export declare class ColorPicker extends AntdComponent {
|
||||
/** simonwep/pickr's options */
|
||||
config?:Pickr.Options
|
||||
/**prefix class name */
|
||||
prefixCls?: string
|
||||
/** default color value */
|
||||
defaultValue?: string
|
||||
/** color value */
|
||||
value?: string
|
||||
/**
|
||||
* language package setting
|
||||
* @type object
|
||||
*/
|
||||
locale: object;
|
||||
/**
|
||||
* precision of color value
|
||||
* @default 0
|
||||
* @type number
|
||||
* */
|
||||
colorRounded?:number
|
||||
/**
|
||||
* descriptions size type
|
||||
* @default 'default'
|
||||
* @type string
|
||||
*/
|
||||
size: 'large' | 'default' | 'small';
|
||||
/**
|
||||
* Parent Node which the selector should be rendered to. Default to body.
|
||||
* When position issues happen, try to modify it into scrollable content and position it relative.
|
||||
* @default () => document.body
|
||||
* @type Function
|
||||
*/
|
||||
getPopupContainer: (triggerNode: any) => HTMLElement;
|
||||
/**
|
||||
* Disabled or not
|
||||
* @default false
|
||||
* @type boolean
|
||||
*/
|
||||
disabled: boolean
|
||||
/**
|
||||
* to set the color format
|
||||
* @default "HEXA"
|
||||
*/
|
||||
format: Pickr.Representation
|
||||
}
|
||||
|
|
@ -18,6 +18,7 @@ module.exports = {
|
|||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /pickr.*js/,
|
||||
options: {
|
||||
cacheDirectory: true,
|
||||
presets: [
|
||||
|
|
|
|||
Loading…
Reference in New Issue