test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-11-29 18:48:32 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

style: update lint and format code

Browse Source
This commit is contained in:
tangjinzhou 2019-02-01 17:23:00 +08:00
parent a9f7963c0c
commit 55a8dca9e7
114 changed files with 1544 additions and 1158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
.eslintrc
View File

@ -1,4 +1,5 @@
{
"root": true,
"env": {
"browser": true,
"node": true,
@ -6,14 +7,18 @@
"jest": true,
"es6": true
},
"parser": "babel-eslint",
"extends": ["plugin:vue-libs/recommended", "prettier"],
"parserOptions": {
"parser": "babel-eslint"
},
"extends": ["plugin:vue/recommended", "prettier"],
"rules": {
"comma-dangle": [2, "always-multiline"],
"no-var": "error",
"no-unused-vars": "warn",
"camelcase": "off",
"no-extra-boolean-cast": "off",
"semi": ["error", "always"]
"semi": ["error", "always"],
"vue/require-prop-types": "off",
"vue/require-default-prop": "off",
"vue/no-reserved-keys": "off"
}
}

3
.jest.js
View File

@ -28,7 +28,8 @@ module.exports = {
: '.*\\.test\\.js$',
moduleNameMapper: {
"^@/(.*)$": "<rootDir>/$1",
"ant-design-vue": "<rootDir>/components/index.js"
"ant-design-vue": "<rootDir>/components/index.js",
"^vue$": "vue/dist/vue.common.js"
},
snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
collectCoverage: process.env.COVERAGE === 'true',

4
components/_util/ContainerRender.jsx
View File

@ -53,11 +53,11 @@ export default {
if (!this._component) {
this._component = new Vue({
el: el,
parent: self.parent,
data: {
comProps: props,
},
parent: self.parent,
el: el,
mounted() {
this.$nextTick(() => {
if (ready) {

2
components/_util/FormDecoratorDirective.js
View File

@ -4,7 +4,7 @@ export function antDecorator(Vue) {
export default {
// just for tag
install: (Vue, options) => {
install: Vue => {
antDecorator(Vue);
},
};

2
components/_util/antDirective.js
View File

@ -2,7 +2,7 @@ import { antInput } from './antInputDirective';
import { antDecorator } from './FormDecoratorDirective';
export default {
install: (Vue, options) => {
install: Vue => {
antInput(Vue);
antDecorator(Vue);
},

4
components/_util/antInputDirective.js
View File

@ -46,7 +46,7 @@ if (isIE9) {
export function antInput(Vue) {
return Vue.directive('ant-input', {
inserted(el, binding, vnode, oldVnode) {
inserted(el, binding, vnode) {
if (vnode.tag === 'textarea' || isTextInputType(el.type)) {
if (!binding.modifiers || !binding.modifiers.lazy) {
el.addEventListener('compositionstart', onCompositionStart);
@ -67,7 +67,7 @@ export function antInput(Vue) {
}
export default {
install: (Vue, options) => {
install: Vue => {
antInput(Vue);
},
};

2
components/_util/openAnimation.js
View File

@ -1,7 +1,7 @@
import cssAnimation from './css-animation';
import raf from 'raf';
function animate(node, show, done, type) {
function animate(node, show, done) {
let height;
let requestAnimationFrameId;
let appearRequestAnimationFrameId;

2
components/_util/props-util.js
View File

@ -250,7 +250,7 @@ const initDefaultProps = (propTypes, defaultProps) => {
export function mergeProps() {
const args = [].slice.call(arguments, 0);
const props = {};
args.forEach((p = {}, i) => {
args.forEach((p = {}) => {
for (const [k, v] of Object.entries(p)) {
props[k] = props[k] || {};
if (isPlainObject(v)) {

2
components/_util/vue-types/index.js
View File

@ -111,7 +111,7 @@ const VuePropTypes = {
let hasCustomValidators = false;
const nativeChecks = arr.reduce((ret, type, i) => {
const nativeChecks = arr.reduce((ret, type) => {
if (isPlainObject(type)) {
if (type._vueTypes_name === 'oneOf') {
return ret.concat(type.type || []);

2
components/_util/warning.js
View File

@ -1,7 +1,7 @@
import warning from 'warning';
const warned = {};
export default (valid, message, throwError) => {
export default (valid, message) => {
if (!valid && !warned[message]) {
warning(false, message);
warned[message] = true;

4
components/affix/index.jsx
View File

@ -81,10 +81,10 @@ const Affix = {
// Mock Event object.
this.updatePosition({});
},
offsetTop(val) {
offsetTop() {
this.updatePosition({});
},
offsetBottom(val) {
offsetBottom() {
this.updatePosition({});
},
},

12
components/anchor/AnchorLink.jsx
View File

@ -18,6 +18,12 @@ export default {
antAnchor: { default: () => ({}) },
antAnchorContext: { default: () => ({}) },
},
watch: {
href(val, oldVal) {
this.antAnchor.unregisterLink(oldVal);
this.antAnchor.registerLink(val);
},
},
mounted() {
this.antAnchor.registerLink(this.href);
@ -26,12 +32,6 @@ export default {
beforeDestroy() {
this.antAnchor.unregisterLink(this.href);
},
watch: {
href(val, oldVal) {
this.antAnchor.unregisterLink(oldVal);
this.antAnchor.registerLink(val);
},
},
methods: {
handleClick(e) {
this.antAnchor.scrollTo(this.href);

2
components/auto-complete/__tests__/index.test.js
View File

@ -11,7 +11,7 @@ describe('AutoComplete with Custom Input Element Render', () => {
it('AutoComplete with custom Input render perfectly', done => {
const wrapper = mount(
{
render(h) {
render() {
return (
<AutoComplete ref="component" dataSource={['12345', '23456', '34567']}>
<input />

24
components/button/__tests__/index.test.js
View File

@ -16,7 +16,7 @@ describe('Button', () => {
it('create primary button', () => {
const wrapper = mount({
render(h) {
render() {
return <Button type="primary">按钮</Button>;
},
});
@ -25,14 +25,14 @@ describe('Button', () => {
it('renders Chinese characters correctly', done => {
const wrapper = mount({
render(h) {
render() {
return <Button>按钮</Button>;
},
});
expect(wrapper.text()).toBe('按 钮');
const wrapper1 = mount({
render(h) {
render() {
return <Button icon="search">按钮</Button>;
},
});
@ -40,7 +40,7 @@ describe('Button', () => {
expect(wrapper1.html()).toMatchSnapshot();
const wrapper2 = mount({
render(h) {
render() {
return (
<Button>
<Icon type="search" />
@ -52,14 +52,14 @@ describe('Button', () => {
expect(wrapper2.html()).toMatchSnapshot();
// should not insert space when there is icon
const wrapper3 = mount({
render(h) {
render() {
return <Button icon="search">按钮</Button>;
},
});
expect(wrapper3.html()).toMatchSnapshot();
// should not insert space when there is icon while loading
const wrapper4 = mount({
render(h) {
render() {
return (
<Button icon="search" loading>
按钮
@ -70,13 +70,13 @@ describe('Button', () => {
expect(wrapper4.html()).toMatchSnapshot();
// should insert space while loading
const wrapper5 = mount({
render(h) {
render() {
return <Button loading>按钮</Button>;
},
});
expect(wrapper5.html()).toMatchSnapshot();
const wrapper6 = mount({
render(h) {
render() {
return (
<Button>
<span>按钮</span>
@ -151,7 +151,7 @@ describe('Button', () => {
it('should support link button', () => {
const wrapper = mount({
render(h) {
render() {
return (
<Button target="_blank" href="http://ant.design">
link button
@ -164,21 +164,21 @@ describe('Button', () => {
it('fixbug renders {0} , 0 and {false}', () => {
const wrapper = mount({
render(h) {
render() {
return <Button>{0}</Button>;
},
});
expect(wrapper.html()).toMatchSnapshot();
const wrapper1 = mount({
render(h) {
render() {
return <Button>0</Button>;
},
});
expect(wrapper1.html()).toMatchSnapshot();
const wrapper2 = mount({
render(h) {
render() {
return <Button>{false}</Button>;
},
});

54
components/button/button.jsx
View File

@ -6,8 +6,8 @@ import buttonTypes from './buttonTypes';
import { filterEmpty } from '../_util/props-util';
const props = buttonTypes();
export default {
inheritAttrs: false,
name: 'AButton',
inheritAttrs: false,
__ANT_BUTTON: true,
props,
data() {
@ -21,32 +21,6 @@ export default {
hasTwoCNChar: false,
};
},
mounted() {
this.fixTwoCNChar();
},
updated() {
this.fixTwoCNChar();
},
beforeDestroy() {
// if (this.timeout) {
// clearTimeout(this.timeout)
// }
if (this.delayTimeout) {
clearTimeout(this.delayTimeout);
}
},
watch: {
loading(val) {
clearTimeout(this.delayTimeout);
if (typeof val !== 'boolean' && val && val.delay) {
this.delayTimeout = setTimeout(() => {
this.sLoading = !!val;
}, val.delay);
} else {
this.sLoading = !!val;
}
},
},
computed: {
classes() {
const {
@ -77,6 +51,32 @@ export default {
};
},
},
watch: {
loading(val) {
clearTimeout(this.delayTimeout);
if (typeof val !== 'boolean' && val && val.delay) {
this.delayTimeout = setTimeout(() => {
this.sLoading = !!val;
}, val.delay);
} else {
this.sLoading = !!val;
}
},
},
mounted() {
this.fixTwoCNChar();
},
updated() {
this.fixTwoCNChar();
},
beforeDestroy() {
// if (this.timeout) {
// clearTimeout(this.timeout)
// }
if (this.delayTimeout) {
clearTimeout(this.delayTimeout);
}
},
methods: {
fixTwoCNChar() {
// Fix for HOC usage like <FormatMessage />

8
components/checkbox/Checkbox.jsx
View File

@ -5,8 +5,11 @@ import { getOptionProps, getAttrs } from '../_util/props-util';
function noop() {}
export default {
inheritAttrs: false,
name: 'ACheckbox',
inheritAttrs: false,
model: {
prop: 'checked',
},
props: {
prefixCls: {
default: 'ant-checkbox',
@ -23,9 +26,6 @@ export default {
type: PropTypes.string.def('checkbox'),
autoFocus: Boolean,
},
model: {
prop: 'checked',
},
inject: {
checkboxGroupContext: { default: () => null },
},

6
components/checkbox/Group.jsx
View File

@ -3,6 +3,9 @@ import hasProp from '../_util/props-util';
function noop() {}
export default {
name: 'ACheckboxGroup',
model: {
prop: 'value',
},
props: {
prefixCls: {
default: 'ant-checkbox',
@ -22,9 +25,6 @@ export default {
},
disabled: Boolean,
},
model: {
prop: 'value',
},
provide() {
return {
checkboxGroupContext: this,

10
components/date-picker/RangePicker.jsx
View File

@ -66,18 +66,18 @@ function fixLocale(value, localeCode) {
}
export default {
mixins: [BaseMixin],
name: 'ARangePicker',
mixins: [BaseMixin],
model: {
prop: 'value',
event: 'change',
},
props: initDefaultProps(RangePickerProps(), {
prefixCls: 'ant-calendar',
tagPrefixCls: 'ant-tag',
allowClear: true,
showToday: false,
}),
model: {
prop: 'value',
event: 'change',
},
data() {
const value = this.value || this.defaultValue || [];
const [start, end] = value;

8
components/date-picker/WeekPicker.jsx
View File

@ -26,16 +26,16 @@ export default {
// };
// private input: any;
props: initDefaultProps(WeekPickerProps(), {
format: 'gggg-wo',
allowClear: true,
}),
name: 'AWeekPicker',
mixins: [BaseMixin],
model: {
prop: 'value',
event: 'change',
},
props: initDefaultProps(WeekPickerProps(), {
format: 'gggg-wo',
allowClear: true,
}),
data() {
const value = this.value || this.defaultValue;
if (value && !interopDefault(moment).isMoment(value)) {

23
components/drawer/demo/descriptionItem.vue
View File

@ -1,15 +1,20 @@
<template>
<div
style="fontSize: 14px;lineHeight: 22px;marginBottom: 7px;color: rgba(0,0,0,0.65)"
style="fontSize: 14px;lineHeight: 22px;marginBottom: 7px;color: rgba(0,0,0,0.65)"
>
<p
style="marginRight: 8px;display: inline-block;color: rgba(0,0,0,0.85)"
>
<p
style="marginRight: 8px;display: inline-block;color: rgba(0,0,0,0.85)"
>
{{title}}
</p>
<template v-if="content">{{content}}</template>
<slot name="content" v-else></slot>
</div>
{{ title }}
</p>
<template v-if="content">
{{ content }}
</template>
<slot
v-else
name="content"
/>
</div>
</template>
<script>
export default {

8
components/dropdown/dropdown-button.jsx
View File

@ -20,6 +20,10 @@ const DropdownButtonProps = {
export { DropdownButtonProps };
export default {
name: 'ADropdownButton',
model: {
prop: 'visible',
event: 'visibleChange',
},
props: DropdownButtonProps,
methods: {
onClick(e) {
@ -29,10 +33,6 @@ export default {
this.$emit('visibleChange', val);
},
},
model: {
prop: 'visible',
event: 'visibleChange',
},
inject: {
configProvider: { default: () => ({}) },
},

6
components/form/FormItem.jsx
View File

@ -66,12 +66,12 @@ export default {
decoratorFormProps: { default: () => ({}) },
collectFormItemContext: { default: () => noop },
},
created() {
this.collectContext();
},
data() {
return { helpShow: false };
},
created() {
this.collectContext();
},
beforeUpdate() {
if (process.env.NODE_ENV !== 'production') {
this.collectContext();

103
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -112,7 +112,9 @@ exports[`renders ./components/form/demo/advanced-search.vue correctly 1`] = `
</svg></i></a></div>
</div>
</form>
<div class="search-result-list">Search Result List</div>
<div class="search-result-list">
Search Result List
</div>
</div>
`;
@ -150,10 +152,11 @@ exports[`renders ./components/form/demo/customized-form-controls.vue correctly 1
<div class="ant-row ant-form-item">
<div class="ant-form-item-label"><label for="price" title="Price" class="">Price</label></div>
<div class="ant-form-item-control-wrapper">
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }--></span>
<!---->
</div>
</div>
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><span data-__meta="[object Object]" data-__field="[object Object]" id="price" class=""><input type="text" class="ant-input" style="width: 63%; margin-right: 2%;"> <div class="ant-select ant-select-enabled" style="width: 32%;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="RMB" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">RMB</div></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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></span></div>
</div></span></span>
<!---->
</div>
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-form-item-control-wrapper">
@ -223,13 +226,22 @@ exports[`renders ./components/form/demo/dynamic-rule.vue correctly 1`] = `
exports[`renders ./components/form/demo/form-in-modal.vue correctly 1`] = `
<div><button type="button" class="ant-btn ant-btn-primary"><span>New Collection</span></button>
<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->
<!---->
</div>
`;
exports[`renders ./components/form/demo/global-state.vue correctly 1`] = `
<div id="components-form-demo-global-state">
<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }--> <pre class="language-bash"> {
<form class="ant-form ant-form-inline">
<div class="ant-row ant-form-item">
<div class="ant-form-item-label"><label for="username" title="Username" class="ant-form-item-required">Username</label></div>
<div class="ant-form-item-control-wrapper">
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="username" class="ant-input"></span>
<!---->
</div>
</div>
</div>
</form> <pre class="language-bash"> {
"username": {
"value": "benjycui"
}
@ -270,7 +282,13 @@ exports[`renders ./components/form/demo/layout.vue correctly 1`] = `
<div class="ant-row ant-form-item">
<div class="ant-col-4 ant-form-item-label"><label title="Form Layout" class="">Form Layout</label></div>
<div class="ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="horizontal"><span class="ant-radio-button-inner"></span></span><span>Horizontal</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="vertical"><span class="ant-radio-button-inner"></span></span><span>Vertical</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="inline"><span class="ant-radio-button-inner"></span></span><span>Inline</span></label></div></span>
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="horizontal"><span class="ant-radio-button-inner"></span></span><span>
Horizontal
</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="vertical"><span class="ant-radio-button-inner"></span></span><span>
Vertical
</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="inline"><span class="ant-radio-button-inner"></span></span><span>
Inline
</span></label></div></span>
<!---->
</div>
</div>
@ -322,8 +340,12 @@ exports[`renders ./components/form/demo/normal-login.vue correctly 1`] = `
<div class="ant-form-item-control-wrapper">
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input id="remember" type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
Remember me
</span></label><a href="" class="login-form-forgot">Forgot password</a><button type="submit" class="login-form-button ant-btn ant-btn-primary"><span>Log in</span></button>
Or <a href="">register now!</a></span>
</span></label><a href="" class="login-form-forgot">
Forgot password
</a><button type="submit" class="login-form-button ant-btn ant-btn-primary"><span>Log in</span></button>
Or <a href="">
register now!
</a></span>
<!---->
</div>
</div>
@ -382,7 +404,11 @@ exports[`renders ./components/form/demo/register.vue correctly 1`] = `
<div class="ant-row ant-form-item">
<div class="ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="phone" title="Phone Number" class="ant-form-item-required">Phone Number</label></div>
<div class="ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-group-wrapper" style="width: 100%;"><span class="ant-input-wrapper ant-input-group"><span class="ant-input-group-addon"><div class="ant-select ant-select-enabled" style="width: 70px;" data-__meta="[object Object]" data-__field="[object Object]" id="prefix"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="+86" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">+86</div></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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></span></div>
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-group-wrapper" style="width: 100%;"><span class="ant-input-wrapper ant-input-group"><span class="ant-input-group-addon"><div class="ant-select ant-select-enabled" style="width: 70px;" data-__meta="[object Object]" data-__field="[object Object]" id="prefix"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="
+86
" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">
+86
</div></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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></span></div>
</div></span><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="phone" class="ant-input"></span></span></span>
<!---->
</div>
@ -413,7 +439,10 @@ exports[`renders ./components/form/demo/register.vue correctly 1`] = `
</div>
<div class="ant-row ant-form-item">
<div class="ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input id="agreement" type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>I have read the <a href="">agreement</a></span></label></span>
<div class="ant-form-item-control"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input id="agreement" type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
I have read the <a href="">
agreement
</a></span></label></span>
<!---->
</div>
</div>
@ -497,7 +526,9 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
<div class="ant-row ant-form-item">
<div class="ant-col-6 ant-form-item-label"><label title="Plain Text" class="">Plain Text</label></div>
<div class="ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-form-text">China</span></span>
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-form-text">
China
</span></span>
<!---->
</div>
</div>
@ -529,7 +560,9 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
<div class="ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-input-number" data-__meta="[object Object]" data-__field="[object Object]" id="input-number"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><i class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><i class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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></span></div>
<div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="10" min="1" step="1" class="ant-input-number-input"></div>
</div><span class="ant-form-text"> machines</span></span>
</div><span class="ant-form-text">
machines
</span></span>
<!---->
</div>
</div>
@ -556,7 +589,13 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
<div class="ant-row ant-form-item">
<div class="ant-col-6 ant-form-item-label"><label for="radio-group" title="Radio.Group" class="">Radio.Group</label></div>
<div class="ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="radio-group"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="a"><span class="ant-radio-inner"></span></span><span>item 1</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="b"><span class="ant-radio-inner"></span></span><span>item 2</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="c"><span class="ant-radio-inner"></span></span><span>item 3</span></label></div></span>
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="radio-group"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="a"><span class="ant-radio-inner"></span></span><span>
item 1
</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="b"><span class="ant-radio-inner"></span></span><span>
item 2
</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="c"><span class="ant-radio-inner"></span></span><span>
item 3
</span></label></div></span>
<!---->
</div>
</div>
@ -564,7 +603,13 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
<div class="ant-row ant-form-item">
<div class="ant-col-6 ant-form-item-label"><label for="radio-button" title="Radio.Button" class="">Radio.Button</label></div>
<div class="ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="radio-button"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>item 1</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>item 2</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>item 3</span></label></div></span>
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="radio-button"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>
item 1
</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>
item 2
</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>
item 3
</span></label></div></span>
<!---->
</div>
</div>
@ -572,11 +617,21 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
<div class="ant-row ant-form-item">
<div class="ant-col-6 ant-form-item-label"><label for="checkbox-group" title="Checkbox.Group" class="">Checkbox.Group</label></div>
<div class="ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-checkbox-group" data-__meta="[object Object]" data-__field="[object Object]" id="checkbox-group" style="width: 100%;"><div class="ant-row"><div class="ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="A"><span class="ant-checkbox-inner"></span></span><span>A</span></label></div>
<div class="ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value="B"><span class="ant-checkbox-inner"></span></span><span>B</span></label></div>
<div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="C"><span class="ant-checkbox-inner"></span></span><span>C</span></label></div>
<div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="D"><span class="ant-checkbox-inner"></span></span><span>D</span></label></div>
<div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="E"><span class="ant-checkbox-inner"></span></span><span>E</span></label></div>
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-checkbox-group" data-__meta="[object Object]" data-__field="[object Object]" id="checkbox-group" style="width: 100%;"><div class="ant-row"><div class="ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="A"><span class="ant-checkbox-inner"></span></span><span>
A
</span></label></div>
<div class="ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value="B"><span class="ant-checkbox-inner"></span></span><span>
B
</span></label></div>
<div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="C"><span class="ant-checkbox-inner"></span></span><span>
C
</span></label></div>
<div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="D"><span class="ant-checkbox-inner"></span></span><span>
D
</span></label></div>
<div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="E"><span class="ant-checkbox-inner"></span></span><span>
E
</span></label></div>
</div>
</div></span>
<!---->
@ -687,7 +742,11 @@ exports[`renders ./components/form/demo/validate-static.vue correctly 1`] = `
<div class="ant-row ant-form-item">
<div class="ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Error" class="">Error</label></div>
<div class="ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
<div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><div class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Option 1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Option 1</div></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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></span></div>
<div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><div class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="
Option 1
" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">
Option 1
</div></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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></span></div>
</div><span class="ant-form-item-children-icon"><i class="anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></i></span></span>
<!---->
</div>

81
components/form/demo/advanced-search.vue
View File

@ -11,44 +11,65 @@ Because the width of label is not fixed, you may need to adjust it by customizin
</us>
<template>
<div id='components-form-demo-advanced-search'>
<div id="components-form-demo-advanced-search">
<a-form
class='ant-advanced-search-form'
@submit="handleSearch"
class="ant-advanced-search-form"
:form="form"
@submit="handleSearch"
>
<a-row :gutter="24">
<a-col v-for="i in 10" :span="8" :key="i" :style="{ display: i < count ? 'block' : 'none' }">
<a-col
v-for="i in 10"
:key="i"
:span="8"
:style="{ display: i < count ? 'block' : 'none' }"
>
<a-form-item :label="`Field ${i}`">
<a-input
v-decorator="[
`field-${i}`,
{
rules: [{
required: true,
message: 'Input something!',
}],
}
]"
placeholder='placeholder'
/>
<a-input
v-decorator="[
`field-${i}`,
{
rules: [{
required: true,
message: 'Input something!',
}],
}
]"
placeholder="placeholder"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="24" :style="{ textAlign: 'right' }">
<a-button type='primary' htmlType='submit'>Search</a-button>
<a-button :style="{ marginLeft: '8px' }" @click="handleReset">
Clear
</a-button>
<a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle">
Collapse <a-icon :type="expand ? 'up' : 'down'" />
</a>
</a-col>
</a-row>
</a-form>
<div class='search-result-list'>Search Result List</div>
</div>
<a-row>
<a-col
:span="24"
:style="{ textAlign: 'right' }"
>
<a-button
type="primary"
html-type="submit"
>
Search
</a-button>
<a-button
:style="{ marginLeft: '8px' }"
@click="handleReset"
>
Clear
</a-button>
<a
:style="{ marginLeft: '8px', fontSize: '12px' }"
@click="toggle"
>
Collapse <a-icon :type="expand ? 'up' : 'down'" />
</a>
</a-col>
</a-row>
</a-form>
<div class="search-result-list">
Search Result List
</div>
</div>
</template>
<script>

36
components/form/demo/coordinated.vue
View File

@ -10,11 +10,14 @@ Use `setFieldsValue` to set other control's value programmaticly.
<template>
<a-form @submit="handleSubmit" :form="form">
<a-form
:form="form"
@submit="handleSubmit"
>
<a-form-item
label='Note'
:labelCol="{ span: 5 }"
:wrapperCol="{ span: 12 }"
label="Note"
:label-col="{ span: 5 }"
:wrapper-col="{ span: 12 }"
>
<a-input
v-decorator="[
@ -24,26 +27,33 @@ Use `setFieldsValue` to set other control's value programmaticly.
/>
</a-form-item>
<a-form-item
label='Gender'
:labelCol="{ span: 5 }"
:wrapperCol="{ span: 12 }"
label="Gender"
:label-col="{ span: 5 }"
:wrapper-col="{ span: 12 }"
>
<a-select
v-decorator="[
'gender',
{rules: [{ required: true, message: 'Please select your gender!' }]}
]"
placeholder='Select a option and change input text above'
@change="this.handleSelectChange"
placeholder="Select a option and change input text above"
@change="handleSelectChange"
>
<a-select-option value='male'>male</a-select-option>
<a-select-option value='female'>female</a-select-option>
<a-select-option value="male">
male
</a-select-option>
<a-select-option value="female">
female
</a-select-option>
</a-select>
</a-form-item>
<a-form-item
:wrapperCol="{ span: 12, offset: 5 }"
:wrapper-col="{ span: 12, offset: 5 }"
>
<a-button type='primary' htmlType='submit'>
<a-button
type="primary"
html-type="submit"
>
Submit
</a-button>
</a-form-item>

21
components/form/demo/customized-form-controls.vue
View File

@ -16,8 +16,12 @@ Customized or third-party form controls can be used in Form, too. Controls must
<template>
<a-form layout='inline' @submit="handleSubmit" :form="form">
<a-form-item label='Price'>
<a-form
layout="inline"
:form="form"
@submit="handleSubmit"
>
<a-form-item label="Price">
<price-input
v-decorator="[
'price',
@ -29,7 +33,12 @@ Customized or third-party form controls can be used in Form, too. Controls must
/>
</a-form-item>
<a-form-item>
<a-button type='primary' htmlType='submit'>Submit</a-button>
<a-button
type="primary"
html-type="submit"
>
Submit
</a-button>
</a-form-item>
</a-form>
</template>
@ -98,6 +107,9 @@ const PriceInput = {
};
export default {
components: {
PriceInput,
},
beforeCreate () {
this.form = this.$form.createForm(this);
},
@ -118,9 +130,6 @@ export default {
callback('Price must greater than zero!');
},
},
components: {
PriceInput,
},
};
</script>

100
components/form/demo/dynamic-form-item.vue
View File

@ -10,56 +10,64 @@ Add or remove form items dynamically.
<template>
<a-form @submit="handleSubmit" :form="form">
<a-form-item
v-for="(k, index) in form.getFieldValue('keys')"
v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
:label="index === 0 ? 'Passengers' : ''"
:required="false"
:key="k"
<a-form
:form="form"
@submit="handleSubmit"
>
<a-input
v-decorator="[
`names[${k}]`,
{
validateTrigger: ['change', 'blur'],
preserve: true,
rules: [{
required: true,
whitespace: true,
message: 'Please input passenger\'s name or delete this field.',
}],
}
]"
placeholder='passenger name'
style="width: 60%; margin-right: 8px"
/>
<a-icon
v-if="form.getFieldValue('keys').length > 1"
class='dynamic-delete-button'
type='minus-circle-o'
:disabled="form.getFieldValue('keys').length === 1"
@click="() => remove(k)"
/>
</a-form-item>
<a-form-item v-bind="formItemLayoutWithOutLabel">
<a-button type='dashed' @click="add" style="width: 60%">
<a-icon type='plus' /> Add field
</a-button>
</a-form-item>
<a-form-item v-bind="formItemLayoutWithOutLabel">
<a-button type='primary' htmlType='submit'>Submit</a-button>
</a-form-item>
</a-form>
<a-form-item
v-for="(k, index) in form.getFieldValue('keys')"
:key="k"
v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
:label="index === 0 ? 'Passengers' : ''"
:required="false"
>
<a-input
v-decorator="[
`names[${k}]`,
{
validateTrigger: ['change', 'blur'],
preserve: true,
rules: [{
required: true,
whitespace: true,
message: 'Please input passenger\'s name or delete this field.',
}],
}
]"
placeholder="passenger name"
style="width: 60%; margin-right: 8px"
/>
<a-icon
v-if="form.getFieldValue('keys').length > 1"
class="dynamic-delete-button"
type="minus-circle-o"
:disabled="form.getFieldValue('keys').length === 1"
@click="() => remove(k)"
/>
</a-form-item>
<a-form-item v-bind="formItemLayoutWithOutLabel">
<a-button
type="dashed"
style="width: 60%"
@click="add"
>
<a-icon type="plus" /> Add field
</a-button>
</a-form-item>
<a-form-item v-bind="formItemLayoutWithOutLabel">
<a-button
type="primary"
html-type="submit"
>
Submit
</a-button>
</a-form-item>
</a-form>
</template>
<script>
let id = 0;
export default {
beforeCreate () {
this.form = this.$form.createForm(this);
this.form.getFieldDecorator('keys', { initialValue: [], preserve: true });
},
data () {
return {
formItemLayout: {
@ -80,6 +88,10 @@ export default {
},
};
},
beforeCreate () {
this.form = this.$form.createForm(this);
this.form.getFieldDecorator('keys', { initialValue: [], preserve: true });
},
methods: {
remove (k) {
const { form } = this;

31
components/form/demo/dynamic-rule.vue
View File

@ -12,34 +12,34 @@ Perform different check rules according to different situations.
<template>
<a-form :form="form">
<a-form-item
:labelCol="formItemLayout.labelCol"
:wrapperCol="formItemLayout.wrapperCol"
label='Name'
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
label="Name"
>
<a-input
v-decorator="[
'username',
{rules: [{ required: true, message: 'Please input your name' }]}
]"
placeholder='Please input your name'
placeholder="Please input your name"
/>
</a-form-item>
<a-form-item
:labelCol="formItemLayout.labelCol"
:wrapperCol="formItemLayout.wrapperCol"
label='Nickname'
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
label="Nickname"
>
<a-input
v-decorator="[
'nickname',
{rules: [{ required: checkNick, message: 'Please input your nickname' }]}
]"
placeholder='Please input your nickname'
placeholder="Please input your nickname"
/>
</a-form-item>
<a-form-item
:labelCol="formTailLayout.labelCol"
:wrapperCol="formTailLayout.wrapperCol"
:label-col="formTailLayout.labelCol"
:wrapper-col="formTailLayout.wrapperCol"
>
<a-checkbox
:checked="checkNick"
@ -49,10 +49,15 @@ Perform different check rules according to different situations.
</a-checkbox>
</a-form-item>
<a-form-item
:labelCol="formTailLayout.labelCol"
:wrapperCol="formTailLayout.wrapperCol"
:label-col="formTailLayout.labelCol"
:wrapper-col="formTailLayout.wrapperCol"
>
<a-button type='primary' @click="check">Check</a-button>
<a-button
type="primary"
@click="check"
>
Check
</a-button>
</a-form-item>
</a-form>
</template>

9
components/form/demo/form-in-modal.vue
View File

@ -10,7 +10,12 @@ When user visit a page with a list of items, and want to create a new item. The
<template>
<div>
<a-button type='primary' @click="showModal">New Collection</a-button>
<a-button
type="primary"
@click="showModal"
>
New Collection
</a-button>
<collection-create-form
ref="collectionForm"
:visible="visible"
@ -70,6 +75,7 @@ const CollectionCreateForm = {
};
export default {
components: { CollectionCreateForm },
data () {
return {
visible: false,
@ -94,7 +100,6 @@ export default {
});
},
},
components: { CollectionCreateForm },
};
</script>

12
components/form/demo/global-state.vue
View File

@ -18,13 +18,13 @@ But if you use `this.$form.createForm`, You can use any data, not just the prope
<template>
<div id='components-form-demo-global-state'>
<div id="components-form-demo-global-state">
<customized-form
:username="fields.username"
@change="handleFormChange"
/>
<pre class='language-bash'>
{{JSON.stringify(fields, null, 2)}}
<pre class="language-bash">
{{ JSON.stringify(fields, null, 2) }}
</pre>
</div>
</template>
@ -77,6 +77,9 @@ const CustomizedForm = {
};
export default {
components: {
CustomizedForm,
},
data () {
return {
fields: {
@ -92,9 +95,6 @@ export default {
this.fields = { ...this.fields, ...changedFields };
},
},
components: {
CustomizedForm,
},
};
</script>
<style>

86
components/form/demo/horizontal-login.vue
View File

@ -10,46 +10,58 @@ Horizontal login form is often used in navigation bar.
<template>
<a-form layout='inline' @submit="handleSubmit" :form="form">
<a-form-item
:validateStatus="userNameError() ? 'error' : ''"
:help="userNameError() || ''"
<a-form
layout="inline"
:form="form"
@submit="handleSubmit"
>
<a-input
placeholder='Username'
v-decorator="[
'userName',
{rules: [{ required: true, message: 'Please input your username!' }]}
]"
<a-form-item
:validate-status="userNameError() ? 'error' : ''"
:help="userNameError() || ''"
>
<a-icon slot="prefix" type='user' style="color:rgba(0,0,0,.25)"/>
</a-input>
</a-form-item>
<a-form-item
:validateStatus="passwordError() ? 'error' : ''"
:help="passwordError() || ''"
>
<a-input
v-decorator="[
'password',
{rules: [{ required: true, message: 'Please input your Password!' }]}
]"
type='password'
placeholder='Password'
<a-input
v-decorator="[
'userName',
{rules: [{ required: true, message: 'Please input your username!' }]}
]"
placeholder="Username"
>
<a-icon
slot="prefix"
type="user"
style="color:rgba(0,0,0,.25)"
/>
</a-input>
</a-form-item>
<a-form-item
:validate-status="passwordError() ? 'error' : ''"
:help="passwordError() || ''"
>
<a-icon slot="prefix" type='lock' style="color:rgba(0,0,0,.25)"/>
</a-input>
</a-form-item>
<a-form-item>
<a-button
type='primary'
htmlType='submit'
:disabled="hasErrors(form.getFieldsError())"
>
Log in
</a-button>
</a-form-item>
</a-form>
<a-input
v-decorator="[
'password',
{rules: [{ required: true, message: 'Please input your Password!' }]}
]"
type="password"
placeholder="Password"
>
<a-icon
slot="prefix"
type="lock"
style="color:rgba(0,0,0,.25)"
/>
</a-input>
</a-form-item>
<a-form-item>
<a-button
type="primary"
html-type="submit"
:disabled="hasErrors(form.getFieldsError())"
>
Log in
</a-button>
</a-form-item>
</a-form>
</template>
<script>

89
components/form/demo/layout.vue
View File

@ -10,40 +10,51 @@ There are three layout for form: `horizontal`, `vertical`, `inline`.
<template>
<div>
<a-form :layout="formLayout">
<a-form-item
label='Form Layout'
:labelCol="formItemLayout.labelCol"
:wrapperCol="formItemLayout.wrapperCol"
>
<a-radio-group defaultValue='horizontal' @change="handleFormLayoutChange">
<a-radio-button value='horizontal'>Horizontal</a-radio-button>
<a-radio-button value='vertical'>Vertical</a-radio-button>
<a-radio-button value='inline'>Inline</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item
label='Field A'
:labelCol="formItemLayout.labelCol"
:wrapperCol="formItemLayout.wrapperCol"
>
<a-input placeholder='input placeholder' />
</a-form-item>
<a-form-item
label='Field B'
:labelCol="formItemLayout.labelCol"
:wrapperCol="formItemLayout.wrapperCol"
>
<a-input placeholder='input placeholder' />
</a-form-item>
<a-form-item
:wrapperCol="buttonItemLayout.wrapperCol"
>
<a-button type='primary'>Submit</a-button>
</a-form-item>
</a-form>
</div>
<div>
<a-form :layout="formLayout">
<a-form-item
label="Form Layout"
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
>
<a-radio-group
default-value="horizontal"
@change="handleFormLayoutChange"
>
<a-radio-button value="horizontal">
Horizontal
</a-radio-button>
<a-radio-button value="vertical">
Vertical
</a-radio-button>
<a-radio-button value="inline">
Inline
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item
label="Field A"
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
>
<a-input placeholder="input placeholder" />
</a-form-item>
<a-form-item
label="Field B"
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
>
<a-input placeholder="input placeholder" />
</a-form-item>
<a-form-item
:wrapper-col="buttonItemLayout.wrapperCol"
>
<a-button type="primary">
Submit
</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script>
@ -53,11 +64,6 @@ export default {
formLayout: 'horizontal',
};
},
methods: {
handleFormLayoutChange (e) {
this.formLayout = e.target.value;
},
},
computed: {
formItemLayout () {
const { formLayout } = this;
@ -73,6 +79,11 @@ export default {
} : {};
},
},
methods: {
handleFormLayoutChange (e) {
this.formLayout = e.target.value;
},
},
};
</script>

42
components/form/demo/normal-login.vue
View File

@ -9,16 +9,25 @@ Normal login form which can contain more elements.
</us>
<template>
<a-form :form="form" id='components-form-demo-normal-login' @submit="handleSubmit" class='login-form'>
<a-form
id="components-form-demo-normal-login"
:form="form"
class="login-form"
@submit="handleSubmit"
>
<a-form-item>
<a-input
placeholder='Username'
v-decorator="[
'userName',
{ rules: [{ required: true, message: 'Please input your username!' }] }
]"
placeholder="Username"
>
<a-icon slot="prefix" type='user' style="color: rgba(0,0,0,.25)" />
<a-icon
slot="prefix"
type="user"
style="color: rgba(0,0,0,.25)"
/>
</a-input>
</a-form-item>
<a-form-item>
@ -27,10 +36,14 @@ Normal login form which can contain more elements.
'password',
{ rules: [{ required: true, message: 'Please input your Password!' }] }
]"
type='password'
placeholder='Password'
type="password"
placeholder="Password"
>
<a-icon slot="prefix" type='lock' style="color: rgba(0,0,0,.25)" />
<a-icon
slot="prefix"
type="lock"
style="color: rgba(0,0,0,.25)"
/>
</a-input>
</a-form-item>
<a-form-item>
@ -45,11 +58,22 @@ Normal login form which can contain more elements.
>
Remember me
</a-checkbox>
<a class='login-form-forgot' href=''>Forgot password</a>
<a-button type='primary' htmlType='submit' class='login-form-button'>
<a
class="login-form-forgot"
href=""
>
Forgot password
</a>
<a-button
type="primary"
html-type="submit"
class="login-form-button"
>
Log in
</a-button>
Or <a href=''>register now!</a>
Or <a href="">
register now!
</a>
</a-form-item>
</a-form>
</template>

333
components/form/demo/register.vue
View File

@ -9,166 +9,187 @@ Fill in this form to create a new account for you.
</us>
<template>
<a-form @submit="handleSubmit" :form="form">
<a-form-item
v-bind="formItemLayout"
label='E-mail'
<a-form
:form="form"
@submit="handleSubmit"
>
<a-input
v-decorator="[
'email',
{
rules: [{
type: 'email', message: 'The input is not valid E-mail!',
}, {
required: true, message: 'Please input your E-mail!',
}]
}
]"
/>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='Password'
>
<a-input
v-decorator="[
'password',
{
rules: [{
required: true, message: 'Please input your password!',
}, {
validator: this.validateToNextPassword,
}],
}
]"
type='password'
/>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='Confirm Password'
>
<a-input
v-decorator="[
'confirm',
{
rules: [{
required: true, message: 'Please confirm your password!',
}, {
validator: compareToFirstPassword,
}],
}
]"
type='password'
@blur="handleConfirmBlur"
/>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
>
<span slot="label">
Nickname&nbsp;
<a-tooltip title='What do you want others to call you?'>
<a-icon type='question-circle-o' />
</a-tooltip>
</span>
<a-input
v-decorator="[
'nickname',
{
rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }]
}
]"
/>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='Habitual Residence'
>
<a-cascader
v-decorator="[
'residence',
{
initialValue: ['zhejiang', 'hangzhou', 'xihu'],
rules: [{ type: 'array', required: true, message: 'Please select your habitual residence!' }],
}
]"
:options="residences"
/>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='Phone Number'
>
<a-input
v-decorator="[
'phone',
{
rules: [{ required: true, message: 'Please input your phone number!' }],
}
]"
style="width: 100%"
<a-form-item
v-bind="formItemLayout"
label="E-mail"
>
<a-select
<a-input
v-decorator="[
'prefix',
{ initialValue: '86' }
'email',
{
rules: [{
type: 'email', message: 'The input is not valid E-mail!',
}, {
required: true, message: 'Please input your E-mail!',
}]
}
]"
slot="addonBefore"
style="width: 70px"
>
<a-select-option value='86'>+86</a-select-option>
<a-select-option value='87'>+87</a-select-option>
</a-select>
</a-input>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='Website'
>
<a-auto-complete
v-decorator="[
'website',
{rules: [{ required: true, message: 'Please input website!' }]}
]"
@change="handleWebsiteChange"
placeholder='website'
/>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="Password"
>
<template slot="dataSource">
<a-select-option v-for="website in autoCompleteResult" :key="website">{{website}}</a-select-option>
</template>
<a-input />
</a-auto-complete>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='Captcha'
extra='We must make sure that your are a human.'
>
<a-row :gutter="8">
<a-col :span="12">
<a-input
<a-input
v-decorator="[
'password',
{
rules: [{
required: true, message: 'Please input your password!',
}, {
validator: validateToNextPassword,
}],
}
]"
type="password"
/>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="Confirm Password"
>
<a-input
v-decorator="[
'confirm',
{
rules: [{
required: true, message: 'Please confirm your password!',
}, {
validator: compareToFirstPassword,
}],
}
]"
type="password"
@blur="handleConfirmBlur"
/>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
>
<span slot="label">
Nickname&nbsp;
<a-tooltip title="What do you want others to call you?">
<a-icon type="question-circle-o" />
</a-tooltip>
</span>
<a-input
v-decorator="[
'nickname',
{
rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }]
}
]"
/>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="Habitual Residence"
>
<a-cascader
v-decorator="[
'residence',
{
initialValue: ['zhejiang', 'hangzhou', 'xihu'],
rules: [{ type: 'array', required: true, message: 'Please select your habitual residence!' }],
}
]"
:options="residences"
/>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="Phone Number"
>
<a-input
v-decorator="[
'phone',
{
rules: [{ required: true, message: 'Please input your phone number!' }],
}
]"
style="width: 100%"
>
<a-select
slot="addonBefore"
v-decorator="[
'captcha',
{rules: [{ required: true, message: 'Please input the captcha you got!' }]}
'prefix',
{ initialValue: '86' }
]"
/>
</a-col>
<a-col :span="12">
<a-button>Get captcha</a-button>
</a-col>
</a-row>
</a-form-item>
<a-form-item v-bind="tailFormItemLayout">
<a-checkbox
v-decorator="['agreement', {valuePropName: 'checked'}]"
>I have read the <a href=''>agreement</a></a-checkbox>
</a-form-item>
<a-form-item v-bind="tailFormItemLayout">
<a-button type='primary' htmlType='submit'>Register</a-button>
</a-form-item>
</a-form>
style="width: 70px"
>
<a-select-option value="86">
+86
</a-select-option>
<a-select-option value="87">
+87
</a-select-option>
</a-select>
</a-input>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="Website"
>
<a-auto-complete
v-decorator="[
'website',
{rules: [{ required: true, message: 'Please input website!' }]}
]"
placeholder="website"
@change="handleWebsiteChange"
>
<template slot="dataSource">
<a-select-option
v-for="website in autoCompleteResult"
:key="website"
>
{{ website }}
</a-select-option>
</template>
<a-input />
</a-auto-complete>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="Captcha"
extra="We must make sure that your are a human."
>
<a-row :gutter="8">
<a-col :span="12">
<a-input
v-decorator="[
'captcha',
{rules: [{ required: true, message: 'Please input the captcha you got!' }]}
]"
/>
</a-col>
<a-col :span="12">
<a-button>Get captcha</a-button>
</a-col>
</a-row>
</a-form-item>
<a-form-item v-bind="tailFormItemLayout">
<a-checkbox
v-decorator="['agreement', {valuePropName: 'checked'}]"
>
I have read the <a href="">
agreement
</a>
</a-checkbox>
</a-form-item>
<a-form-item v-bind="tailFormItemLayout">
<a-button
type="primary"
html-type="submit"
>
Register
</a-button>
</a-form-item>
</a-form>
</template>
<script>
@ -197,9 +218,6 @@ const residences = [{
}];
export default {
beforeCreate () {
this.form = this.$form.createForm(this);
},
data () {
return {
confirmDirty: false,
@ -229,6 +247,9 @@ export default {
},
};
},
beforeCreate () {
this.form = this.$form.createForm(this);
},
methods: {
handleSubmit (e) {
e.preventDefault();

112
components/form/demo/time-related-controls.vue
View File

@ -9,58 +9,71 @@ The `value` of time-related components is a `moment` object, which we need to pr
</us>
<template>
<a-form @submit="handleSubmit" :form="form">
<a-form-item
v-bind="formItemLayout"
label='DatePicker'
<a-form
:form="form"
@submit="handleSubmit"
>
<a-date-picker v-decorator="['date-picker', config]"/>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='DatePicker[showTime]'
>
<a-date-picker v-decorator="['date-time-picker', config]" showTime format='YYYY-MM-DD HH:mm:ss' />
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='MonthPicker'
>
<a-monthPicker v-decorator="['month-picker', config]" />
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='RangePicker'
>
<a-range-picker v-decorator="['range-picker', rangeConfig]" />
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='RangePicker[showTime]'
>
<a-range-picker v-decorator="['range-time-picker', rangeConfig]" showTime format='YYYY-MM-DD HH:mm:ss' />
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='TimePicker'
>
<a-time-picker v-decorator="['time-picker', config]" />
</a-form-item>
<a-form-item
:wrapperCol="{
xs: { span: 24, offset: 0 },
sm: { span: 16, offset: 8 },
}"
>
<a-button type='primary' htmlType='submit'>Submit</a-button>
</a-form-item>
</a-form>
<a-form-item
v-bind="formItemLayout"
label="DatePicker"
>
<a-date-picker v-decorator="['date-picker', config]" />
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="DatePicker[showTime]"
>
<a-date-picker
v-decorator="['date-time-picker', config]"
show-time
format="YYYY-MM-DD HH:mm:ss"
/>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="MonthPicker"
>
<a-monthPicker v-decorator="['month-picker', config]" />
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="RangePicker"
>
<a-range-picker v-decorator="['range-picker', rangeConfig]" />
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="RangePicker[showTime]"
>
<a-range-picker
v-decorator="['range-time-picker', rangeConfig]"
show-time
format="YYYY-MM-DD HH:mm:ss"
/>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="TimePicker"
>
<a-time-picker v-decorator="['time-picker', config]" />
</a-form-item>
<a-form-item
:wrapper-col="{
xs: { span: 24, offset: 0 },
sm: { span: 16, offset: 8 },
}"
>
<a-button
type="primary"
html-type="submit"
>
Submit
</a-button>
</a-form-item>
</a-form>
</template>
<script>
export default {
beforeCreate () {
this.form = this.$form.createForm(this);
},
data () {
return {
formItemLayout: {
@ -81,6 +94,9 @@ export default {
},
};
},
beforeCreate () {
this.form = this.$form.createForm(this);
},
methods: {
handleSubmit (e) {
e.preventDefault();

371
components/form/demo/validate-other.vue
View File

@ -10,175 +10,250 @@ Demostration for validataion configuration for form controls which are not show
<template>
<a-form id='components-form-demo-validate-other' @submit="handleSubmit" :form="form">
<a-form-item
v-bind="formItemLayout"
label='Plain Text'
<a-form
id="components-form-demo-validate-other"
:form="form"
@submit="handleSubmit"
>
<span class='ant-form-text'>China</span>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='Select'
hasFeedback
>
<a-select
v-decorator="[
'select',
{rules: [{ required: true, message: 'Please select your country!' }]}
]"
placeholder='Please select a country'
<a-form-item
v-bind="formItemLayout"
label="Plain Text"
>
<a-select-option value='china'>China</a-select-option>
<a-select-option value='usa'>U.S.A</a-select-option>
</a-select>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='Select[multiple]'
>
<a-select
v-decorator="[
'select-multiple', {
rules: [{ required: true, message: 'Please select your favourite colors!', type: 'array' }],
}]"
mode='multiple'
placeholder='Please select favourite colors'
<span class="ant-form-text">
China
</span>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="Select"
has-feedback
>
<a-select-option value='red'>Red</a-select-option>
<a-select-option value='green'>Green</a-select-option>
<a-select-option value='blue'>Blue</a-select-option>
</a-select>
</a-form-item>
<a-select
v-decorator="[
'select',
{rules: [{ required: true, message: 'Please select your country!' }]}
]"
placeholder="Please select a country"
>
<a-select-option value="china">
China
</a-select-option>
<a-select-option value="usa">
U.S.A
</a-select-option>
</a-select>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='InputNumber'
>
<a-input-number v-decorator="['input-number', { initialValue: 3 }]" :min="1" :max="10" />
<span class='ant-form-text'> machines</span>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='Switch'
>
<a-switch v-decorator="['switch', { valuePropName: 'checked' }]"/>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='Slider'
>
<a-slider v-decorator="['slider']" :marks="{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }" />
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='Radio.Group'
>
<a-radio-group v-decorator="['radio-group']">
<a-radio value='a'>item 1</a-radio>
<a-radio value='b'>item 2</a-radio>
<a-radio value='c'>item 3</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='Radio.Button'
>
<a-radio-group v-decorator="['radio-button']">
<a-radio-button value='a'>item 1</a-radio-button>
<a-radio-button value='b'>item 2</a-radio-button>
<a-radio-button value='c'>item 3</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='Checkbox.Group'
>
<a-checkbox-group style="width: 100%;" v-decorator="['checkbox-group', {initialValue: ['A', 'B']}]">
<a-row>
<a-col :span="8"><a-checkbox value="A">A</a-checkbox></a-col>
<a-col :span="8"><a-checkbox disabled value="B">B</a-checkbox></a-col>
<a-col :span="8"><a-checkbox value="C">C</a-checkbox></a-col>
<a-col :span="8"><a-checkbox value="D">D</a-checkbox></a-col>
<a-col :span="8"><a-checkbox value="E">E</a-checkbox></a-col>
</a-row>
</a-checkbox-group>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='Rate'
>
<a-rate allowHalf v-decorator="['rate', {initialValue: 3.5}]"/>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='Upload'
extra='longgggggggggggggggggggggggggggggggggg'
>
<a-upload
v-decorator="['upload', {
valuePropName: 'fileList',
getValueFromEvent: normFile,
}]"
name='logo'
action='/upload.do'
listType='picture'
<a-form-item
v-bind="formItemLayout"
label="Select[multiple]"
>
<a-button>
<a-icon type='upload' /> Click to upload
</a-button>
</a-upload>
</a-form-item>
<a-select
v-decorator="[
'select-multiple', {
rules: [{ required: true, message: 'Please select your favourite colors!', type: 'array' }],
}]"
mode="multiple"
placeholder="Please select favourite colors"
>
<a-select-option value="red">
Red
</a-select-option>
<a-select-option value="green">
Green
</a-select-option>
<a-select-option value="blue">
Blue
</a-select-option>
</a-select>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label='Dragger'
>
<div class='dropbox'>
<a-upload-dragger
v-decorator="['dragger', {
<a-form-item
v-bind="formItemLayout"
label="InputNumber"
>
<a-input-number
v-decorator="['input-number', { initialValue: 3 }]"
:min="1"
:max="10"
/>
<span class="ant-form-text">
machines
</span>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="Switch"
>
<a-switch v-decorator="['switch', { valuePropName: 'checked' }]" />
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="Slider"
>
<a-slider
v-decorator="['slider']"
:marks="{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }"
/>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="Radio.Group"
>
<a-radio-group v-decorator="['radio-group']">
<a-radio value="a">
item 1
</a-radio>
<a-radio value="b">
item 2
</a-radio>
<a-radio value="c">
item 3
</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="Radio.Button"
>
<a-radio-group v-decorator="['radio-button']">
<a-radio-button value="a">
item 1
</a-radio-button>
<a-radio-button value="b">
item 2
</a-radio-button>
<a-radio-button value="c">
item 3
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="Checkbox.Group"
>
<a-checkbox-group
v-decorator="['checkbox-group', {initialValue: ['A', 'B']}]"
style="width: 100%;"
>
<a-row>
<a-col :span="8">
<a-checkbox value="A">
A
</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox
disabled
value="B"
>
B
</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="C">
C
</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="D">
D
</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="E">
E
</a-checkbox>
</a-col>
</a-row>
</a-checkbox-group>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="Rate"
>
<a-rate
v-decorator="['rate', {initialValue: 3.5}]"
allow-half
/>
</a-form-item>
<a-form-item
v-bind="formItemLayout"
label="Upload"
extra="longgggggggggggggggggggggggggggggggggg"
>
<a-upload
v-decorator="['upload', {
valuePropName: 'fileList',
getValueFromEvent: normFile,
}]"
name='files'
action='/upload.do'
name="logo"
action="/upload.do"
list-type="picture"
>
<p class='ant-upload-drag-icon'>
<a-icon type='inbox' />
</p>
<p class='ant-upload-text'>Click or drag file to this area to upload</p>
<p class='ant-upload-hint'>Support for a single or bulk upload.</p>
</a-upload-dragger>
</div>
</a-form-item>
<a-button>
<a-icon type="upload" /> Click to upload
</a-button>
</a-upload>
</a-form-item>
<a-form-item
:wrapperCol="{ span: 12, offset: 6 }"
>
<a-button type='primary' htmlType='submit'>Submit</a-button>
</a-form-item>
</a-form>
<a-form-item
v-bind="formItemLayout"
label="Dragger"
>
<div class="dropbox">
<a-upload-dragger
v-decorator="['dragger', {
valuePropName: 'fileList',
getValueFromEvent: normFile,
}]"
name="files"
action="/upload.do"
>
<p class="ant-upload-drag-icon">
<a-icon type="inbox" />
</p>
<p class="ant-upload-text">
Click or drag file to this area to upload
</p>
<p class="ant-upload-hint">
Support for a single or bulk upload.
</p>
</a-upload-dragger>
</div>
</a-form-item>
<a-form-item
:wrapper-col="{ span: 12, offset: 6 }"
>
<a-button
type="primary"
html-type="submit"
>
Submit
</a-button>
</a-form-item>
</a-form>
</template>
<script>
export default {
beforeCreate () {
this.form = this.$form.createForm(this);
},
data: () => ({
formItemLayout: {
labelCol: { span: 6 },
wrapperCol: { span: 14 },
},
}),
beforeCreate () {
this.form = this.$form.createForm(this);
},
methods: {
handleSubmit (e) {
e.preventDefault();

177
components/form/demo/validate-static.vue
View File

@ -18,138 +18,165 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo
<template>
<a-form>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label='Fail'
validateStatus='error'
help='Should be combination of numbers & alphabets'
:label-col="labelCol"
:wrapper-col="wrapperCol"
label="Fail"
validate-status="error"
help="Should be combination of numbers & alphabets"
>
<a-input placeholder='unavailable choice' id='error' />
<a-input
id="error"
placeholder="unavailable choice"
/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label='Warning'
validateStatus='warning'
:label-col="labelCol"
:wrapper-col="wrapperCol"
label="Warning"
validate-status="warning"
>
<a-input placeholder='Warning' id='warning' />
<a-input
id="warning"
placeholder="Warning"
/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label='Validating'
hasFeedback
validateStatus='validating'
help='The information is being validated...'
:label-col="labelCol"
:wrapper-col="wrapperCol"
label="Validating"
has-feedback
validate-status="validating"
help="The information is being validated..."
>
<a-input placeholder="I'm the content is being validated" id='validating' />
<a-input
id="validating"
placeholder="I'm the content is being validated"
/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label='Success'
hasFeedback
validateStatus='success'
:label-col="labelCol"
:wrapper-col="wrapperCol"
label="Success"
has-feedback
validate-status="success"
>
<a-input placeholder="I'm the content" id='success' />
<a-input
id="success"
placeholder="I'm the content"
/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label='Warning'
hasFeedback
validateStatus='warning'
:label-col="labelCol"
:wrapper-col="wrapperCol"
label="Warning"
has-feedback
validate-status="warning"
>
<a-input placeholder='Warning' id='warning' />
<a-input
id="warning"
placeholder="Warning"
/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label='Fail'
hasFeedback
validateStatus='error'
help='Should be combination of numbers & alphabets'
:label-col="labelCol"
:wrapper-col="wrapperCol"
label="Fail"
has-feedback
validate-status="error"
help="Should be combination of numbers & alphabets"
>
<a-input placeholder='unavailable choice' id='error' />
<a-input
id="error"
placeholder="unavailable choice"
/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label='Success'
hasFeedback
validateStatus='success'
:label-col="labelCol"
:wrapper-col="wrapperCol"
label="Success"
has-feedback
validate-status="success"
>
<a-date-picker style="width: 100%" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label='Warning'
hasFeedback
validateStatus='warning'
:label-col="labelCol"
:wrapper-col="wrapperCol"
label="Warning"
has-feedback
validate-status="warning"
>
<a-time-picker style="width: 100%" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label='Error'
hasFeedback
validateStatus='error'
:label-col="labelCol"
:wrapper-col="wrapperCol"
label="Error"
has-feedback
validate-status="error"
>
<a-select defaultValue='1'>
<a-select-option value='1'>Option 1</a-select-option>
<a-select-option value='2'>Option 2</a-select-option>
<a-select-option value='3'>Option 3</a-select-option>
<a-select default-value="1">
<a-select-option value="1">
Option 1
</a-select-option>
<a-select-option value="2">
Option 2
</a-select-option>
<a-select-option value="3">
Option 3
</a-select-option>
</a-select>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label='Validating'
hasFeedback
validateStatus='validating'
help='The information is being validated...'
:label-col="labelCol"
:wrapper-col="wrapperCol"
label="Validating"
has-feedback
validate-status="validating"
help="The information is being validated..."
>
<a-cascader :defaultValue="['1']" :options="[]" />
<a-cascader
:default-value="['1']"
:options="[]"
/>
</a-form-item>
<a-form-item
label='inline'
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="inline"
:label-col="labelCol"
:wrapper-col="wrapperCol"
style="margin-bottom:0;"
>
<a-form-item
validateStatus='error'
help='Please select the correct date'
validate-status="error"
help="Please select the correct date"
:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }"
>
<a-date-picker style="width: 100%"/>
<a-date-picker style="width: 100%" />
</a-form-item>
<span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">
-
</span>
<a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
<a-date-picker style="width: 100%"/>
<a-date-picker style="width: 100%" />
</a-form-item>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label='Success'
hasFeedback
validateStatus='success'
:label-col="labelCol"
:wrapper-col="wrapperCol"
label="Success"
has-feedback
validate-status="success"
>
<a-input-number style="width: 100%" />
</a-form-item>

6
components/form/demo/without-form-create.vue
View File

@ -12,10 +12,10 @@
<template>
<a-form>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label-col="labelCol"
:wrapper-col="wrapperCol"
label="Prime between 8 & 12"
:validateStatus="number.validateStatus"
:validate-status="number.validateStatus"
:help="number.errorMsg || tips"
>
<a-input-number

2
components/grid/Col.jsx
View File

@ -28,8 +28,8 @@ export const ColProps = {
};
export default {
props: ColProps,
name: 'ACol',
props: ColProps,
inject: {
rowContext: {
default: () => null,

14
components/icon/__tests__/index.test.js
View File

@ -7,7 +7,7 @@ import { cloneElement } from '../../_util/vnode';
describe('Icon', () => {
it('should render to a <i class="xxx"><svg>...</svg></i>', () => {
const wrapper = mount({
render(h) {
render() {
return <Icon type="message" class="my-icon-classname" />;
},
});
@ -16,7 +16,7 @@ describe('Icon', () => {
it('should support basic usage', () => {
const wrapper = mount({
render(h) {
render() {
return (
<div>
<Icon type="home" />
@ -33,7 +33,7 @@ describe('Icon', () => {
it('should support older usage', () => {
const wrapper = mount({
render(h) {
render() {
return (
<div>
<Icon type="home-o" />
@ -49,7 +49,7 @@ describe('Icon', () => {
it('should support two-tone icon', () => {
const wrapper = mount({
render(h) {
render() {
return <Icon type="check-circle" theme="twoTone" twoToneColor="#f5222d" />;
},
});
@ -61,7 +61,7 @@ describe('Icon', () => {
Icon.setTwoToneColor('#1890ff');
expect(Icon.getTwoToneColor()).toBe('#1890ff');
const wrapper = mount({
render(h) {
render() {
return <Icon type="check-circle" theme="twoTone" />;
},
});
@ -72,7 +72,7 @@ describe('Icon', () => {
it('should support pass svg paths as children', () => {
const wrapper = mount({
render(h) {
render() {
return (
<Icon viewBox="0 0 24 24">
<title>Cool Home</title>
@ -86,7 +86,7 @@ describe('Icon', () => {
it('should give warning and render <i>{null}</i>', () => {
const wrapper = mount({
render(h) {
render() {
return <Icon viewBox="0 0 24 24" />;
},
});

18
components/input/Input.jsx
View File

@ -15,21 +15,26 @@ function fixControlledValue(value) {
}
export default {
inheritAttrs: false,
name: 'AInput',
props: {
...inputProps,
},
inheritAttrs: false,
model: {
prop: 'value',
event: 'change.value',
},
props: {
...inputProps,
},
data() {
const { value, defaultValue } = this.$props;
return {
stateValue: fixControlledValue(!hasProp(this, 'value') ? defaultValue : value),
};
},
watch: {
value(val) {
this.stateValue = fixControlledValue(val);
},
},
mounted() {
this.$nextTick(() => {
if (this.autoFocus) {
@ -37,11 +42,6 @@ export default {
}
});
},
watch: {
value(val) {
this.stateValue = fixControlledValue(val);
},
},
methods: {
handleKeyDown(e) {
if (e.keyCode === 13) {

8
components/input/Search.jsx
View File

@ -9,6 +9,10 @@ import PropTypes from '../_util/vue-types';
export default {
name: 'AInputSearch',
model: {
prop: 'value',
event: 'change.value',
},
props: {
...inputProps,
prefixCls: {
@ -21,10 +25,6 @@ export default {
},
enterButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.object]),
},
model: {
prop: 'value',
event: 'change.value',
},
methods: {
onSearch(e) {
this.$emit('search', this.$refs.input.stateValue, e);

8
components/input/TextArea.jsx
View File

@ -28,14 +28,14 @@ function noop() {}
export default {
name: 'ATextarea',
props: {
...inputProps,
autosize: [Object, Boolean],
},
model: {
prop: 'value',
event: 'change.value',
},
props: {
...inputProps,
autosize: [Object, Boolean],
},
data() {
const { value, defaultValue } = this.$props;
return {

8
components/layout/Sider.jsx
View File

@ -71,6 +71,10 @@ export default {
name: 'ALayoutSider',
__ANT_LAYOUT_SIDER: true,
mixins: [BaseMixin],
model: {
prop: 'collapsed',
event: 'collapse',
},
props: initDefaultProps(SiderProps, {
prefixCls: 'ant-layout-sider',
collapsible: false,
@ -146,10 +150,6 @@ export default {
this.siderHook.removeSider(this.uniqueId);
}
},
model: {
prop: 'collapsed',
event: 'collapse',
},
methods: {
responsiveHandler(mql) {
this.setState({ below: mql.matches });

2
components/locale-provider/__tests__/index.test.js
View File

@ -124,7 +124,7 @@ const columns = [
];
const App = {
render(h) {
render() {
return (
<div>
<Pagination defaultCurrent={1} total={50} showSizeChanger />

4
components/menu/MenuItem.jsx
View File

@ -3,9 +3,9 @@ import { getOptionProps } from '../_util/props-util';
import Tooltip from '../tooltip';
function noop() {}
export default {
name: 'MenuItem',
inheritAttrs: false,
props: itemProps,
name: 'MenuItem',
inject: {
getInlineCollapsed: { default: () => noop },
},
@ -15,7 +15,7 @@ export default {
this.$refs.menuItem.onKeyDown(e);
},
},
render(h) {
render() {
const props = getOptionProps(this);
const { level, title, rootPrefixCls } = props;
const { getInlineCollapsed, $slots, $attrs: attrs, $listeners } = this;

29
components/menu/demo/SubMenu.vue
View File

@ -1,12 +1,29 @@
<template functional>
<a-sub-menu v-on="listeners" :key="data.key">
<span slot="title"><a-icon type="mail" /><span>{{data.attrs.menuInfo.title}}</span></span>
<template v-for="item in data.attrs.menuInfo.children">
<a-menu-item v-if="!item.children" :key="item.key">
<a-sub-menu
:key="data.key"
v-on="listeners"
>
<span slot="title">
<a-icon type="mail" /><span>{{ props.menuInfo.title }}</span>
</span>
<template v-for="item in props.menuInfo.children">
<a-menu-item
v-if="!item.children"
:key="item.key"
>
<a-icon type="pie-chart" />
<span>{{item.title}}</span>
<span>{{ item.title }}</span>
</a-menu-item>
<sub-menu v-else :menuInfo="item" :key="item.key"/>
<sub-menu
v-else
:key="item.key"
:menu-info="item"
/>
</template>
</a-sub-menu>
</template>
<script>
export default {
props: ['menuInfo'],
};
</script>

2
components/menu/demo/template.md
View File

@ -28,7 +28,7 @@ The properties of `a-sub-menu` are dynamically changed inside the component. If
<a-icon type="pie-chart" />
<span>{{item.title}}</span>
</a-menu-item>
<sub-menu v-else :menuInfo="item" :key="item.key"/>
<sub-menu v-else :menu-info="item" :key="item.key"/>
</template>
</a-menu>
</div>

2
components/message/__tests__/index.test.js
View File

@ -128,7 +128,7 @@ describe('message', () => {
}, 0);
});
it('should allow custom icon', async () => {
message.open({ content: 'Message', icon: h => <Icon type="smile-o" /> });
message.open({ content: 'Message', icon: h => <Icon type="smile-o" /> }); // eslint-disable-line
await asyncExpect(() => {
expect(document.querySelectorAll('.anticon-smile-o').length).toBe(1);
}, 0);

44
components/modal/Modal.jsx
View File

@ -68,6 +68,10 @@ const modalProps = (defaultProps = {}) => {
export default {
name: 'AModal',
model: {
prop: 'visible',
event: 'change',
},
props: modalProps({
prefixCls: 'ant-modal',
width: 520,
@ -79,9 +83,24 @@ export default {
// okButtonDisabled: false,
// cancelButtonDisabled: false,
}),
model: {
prop: 'visible',
event: 'change',
mounted() {
if (mousePositionEventBinded) {
return;
}
// 只有点击事件支持从鼠标位置动画展开
addEventListener(document.documentElement, 'click', e => {
mousePosition = {
x: e.pageX,
y: e.pageY,
};
// 100ms 内发生过点击事件，则从点击位置动画展示
// 否则直接 zoom 展示
// 这样可以兼容非点击方式展开
setTimeout(() => {
mousePosition = null;
}, 100);
});
mousePositionEventBinded = true;
},
// static info: ModalFunc;
// static success: ModalFunc;
@ -124,25 +143,6 @@ export default {
);
},
},
mounted() {
if (mousePositionEventBinded) {
return;
}
// 只有点击事件支持从鼠标位置动画展开
addEventListener(document.documentElement, 'click', e => {
mousePosition = {
x: e.pageX,
y: e.pageY,
};
// 100ms 内发生过点击事件，则从点击位置动画展示
// 否则直接 zoom 展示
// 这样可以兼容非点击方式展开
setTimeout(() => {
mousePosition = null;
}, 100);
});
mousePositionEventBinded = true;
},
render() {
const { visible, wrapClassName, centered, prefixCls, $listeners, $slots } = this;

4
components/notification/index.js
View File

@ -85,7 +85,7 @@ function getNotificationInstance(prefixCls, placement, callback) {
class: `${prefixCls}-${placement}`,
style: getPlacementStyle(placement),
getContainer: defaultGetContainer,
closeIcon: h => <Icon class={`${prefixCls}-close-icon`} type={'close'} />,
closeIcon: h => <Icon class={`${prefixCls}-close-icon`} type={'close'} />, // eslint-disable-line
},
notification => {
notificationInstance[cacheKey] = notification;
@ -128,7 +128,7 @@ function notice(args) {
);
} else if (type) {
const iconType = typeToIcon[type];
iconNode = h => <Icon class={`${prefixCls}-icon ${prefixCls}-icon-${type}`} type={iconType} />;
iconNode = h => <Icon class={`${prefixCls}-icon ${prefixCls}-icon-${type}`} type={iconType} />; // eslint-disable-line
}
getNotificationInstance(outerPrefixCls, placement || defaultPlacement, notification => {

8
components/pagination/Pagination.jsx
View File

@ -35,15 +35,15 @@ export const PaginationConfig = () => ({
export default {
name: 'APagination',
model: {
prop: 'current',
event: 'change.current',
},
props: {
...PaginationProps(),
prefixCls: PropTypes.string.def('ant-pagination'),
selectPrefixCls: PropTypes.string.def('ant-select'),
},
model: {
prop: 'current',
event: 'change.current',
},
methods: {
getIconsProps() {
const { prefixCls } = this.$props;

2
components/popconfirm/index.jsx
View File

@ -118,7 +118,7 @@ const Popconfirm = {
);
},
},
render(h) {
render() {
const props = getOptionProps(this);
const otherProps = omit(props, ['title', 'content', 'cancelText', 'okText']);
const tooltipProps = {

2
components/popover/index.jsx
View File

@ -23,7 +23,7 @@ const Popover = {
},
},
render(h) {
render() {
const { title, prefixCls, $slots } = this;
const props = getOptionProps(this);
delete props.title;

16
components/radio/Group.jsx
View File

@ -6,6 +6,9 @@ function noop() {}
export default {
name: 'ARadioGroup',
model: {
prop: 'value',
},
props: {
prefixCls: {
default: 'ant-radio',
@ -33,9 +36,6 @@ export default {
stateValue: value === undefined ? defaultValue : value,
};
},
model: {
prop: 'value',
},
provide() {
return {
radioGroupContext: this,
@ -58,6 +58,11 @@ export default {
};
},
},
watch: {
value(val) {
this.stateValue = val;
},
},
methods: {
onRadioChange(ev) {
const lastValue = this.stateValue;
@ -71,11 +76,6 @@ export default {
}
},
},
watch: {
value(val) {
this.stateValue = val;
},
},
render() {
const { mouseenter = noop, mouseleave = noop } = this.$listeners;
const props = getOptionProps(this);

6
components/radio/Radio.jsx
View File

@ -7,6 +7,9 @@ function noop() {}
export default {
name: 'ARadio',
model: {
prop: 'checked',
},
props: {
prefixCls: {
default: 'ant-radio',
@ -22,9 +25,6 @@ export default {
autoFocus: Boolean,
type: PropTypes.string.def('radio'),
},
model: {
prop: 'checked',
},
inject: {
radioGroupContext: { default: undefined },
},

2
components/table/SelectionBox.jsx
View File

@ -5,8 +5,8 @@ import BaseMixin from '../_util/BaseMixin';
import { getOptionProps } from '../_util/props-util';
export default {
mixins: [BaseMixin],
name: 'SelectionBox',
mixins: [BaseMixin],
props: SelectionBoxProps,
data() {
return {

10
components/table/SelectionCheckboxAll.jsx
View File

@ -7,9 +7,9 @@ import { SelectionCheckboxAllProps } from './interface';
import BaseMixin from '../_util/BaseMixin';
export default {
props: SelectionCheckboxAllProps,
name: 'SelectionCheckboxAll',
mixins: [BaseMixin],
props: SelectionCheckboxAllProps,
data() {
const { $props: props } = this;
this.defaultSelections = props.hideDefaultSelections
@ -33,10 +33,6 @@ export default {
};
},
mounted() {
this.subscribe();
},
watch: {
$props: {
handler: function() {
@ -46,6 +42,10 @@ export default {
},
},
mounted() {
this.subscribe();
},
beforeDestroy() {
if (this.unsubscribe) {
this.unsubscribe();

2
components/table/Table.jsx
View File

@ -124,7 +124,7 @@ export default {
},
deep: true,
},
dataSource(val) {
dataSource() {
this.store.setState({
selectionDirty: false,
});

42
components/table/demo/EditableCell.vue
View File

@ -1,21 +1,31 @@
<template>
<div class='editable-cell'>
<div v-if="editable" class='editable-cell-input-wrapper'>
<a-input
:value="value"
@change="handleChange"
@pressEnter="check"
/><a-icon
type='check'
class='editable-cell-icon-check'
@click="check"
/>
<div class="editable-cell">
<div
v-if="editable"
class="editable-cell-input-wrapper"
>
<a-input
:value="value"
@change="handleChange"
@pressEnter="check"
/><a-icon
type="check"
class="editable-cell-icon-check"
@click="check"
/>
</div>
<div
v-else
class="editable-cell-text-wrapper"
>
{{ value || ' ' }}
<a-icon
type="edit"
class="editable-cell-icon"
@click="edit"
/>
</div>
</div>
<div v-else class='editable-cell-text-wrapper'>
{{value || ' '}}
<a-icon type='edit' class='editable-cell-icon' @click="edit" />
</div>
</div>
</template>
<script>
export default {

16
components/table/filterDropdown.jsx
View File

@ -17,8 +17,8 @@ function stopPropagation(e) {
}
export default {
mixins: [BaseMixin],
name: 'FilterMenu',
mixins: [BaseMixin],
props: initDefaultProps(FilterMenuProps, {
handleFilter() {},
column: {},
@ -34,13 +34,6 @@ export default {
sVisible: visible,
};
},
mounted() {
const { column } = this;
this.$nextTick(() => {
this.setNeverShown(column);
});
},
watch: {
_propsSymbol() {
const nextProps = getOptionProps(this);
@ -81,6 +74,13 @@ export default {
// this.sSelectedKeys = val
// },
},
mounted() {
const { column } = this;
this.$nextTick(() => {
this.setNeverShown(column);
});
},
methods: {
getDropdownVisible() {
return this.neverShown ? false : this.sVisible;

21
components/tabs/tabs.jsx
View File

@ -10,6 +10,10 @@ import TabBar from './TabBar';
export default {
TabPane,
name: 'ATabs',
model: {
prop: 'activeKey',
event: 'change',
},
props: {
prefixCls: PropTypes.string.def('ant-tabs'),
activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@ -25,9 +29,12 @@ export default {
tabBarGutter: PropTypes.number,
renderTabBar: PropTypes.func,
},
model: {
prop: 'activeKey',
event: 'change',
mounted() {
const NO_FLEX = ' no-flex';
const tabNode = this.$el;
if (tabNode && !isFlexSupported() && tabNode.className.indexOf(NO_FLEX) === -1) {
tabNode.className += NO_FLEX;
}
},
methods: {
removeTab(targetKey, e) {
@ -54,14 +61,6 @@ export default {
},
},
mounted() {
const NO_FLEX = ' no-flex';
const tabNode = this.$el;
if (tabNode && !isFlexSupported() && tabNode.className.indexOf(NO_FLEX) === -1) {
tabNode.className += NO_FLEX;
}
},
render() {
const props = getOptionProps(this);
const {

8
components/tag/Tag.jsx
View File

@ -9,6 +9,10 @@ import BaseMixin from '../_util/BaseMixin';
export default {
name: 'ATag',
mixins: [BaseMixin],
model: {
prop: 'visible',
event: 'close.visible',
},
props: {
prefixCls: PropTypes.string.def('ant-tag'),
color: PropTypes.string,
@ -16,10 +20,6 @@ export default {
visible: PropTypes.bool,
afterClose: PropTypes.func,
},
model: {
prop: 'visible',
event: 'close.visible',
},
data() {
let _visible = true;
if (hasProp(this, 'visible')) {

10
components/tooltip/Tooltip.jsx
View File

@ -25,14 +25,14 @@ const splitObject = (obj, keys) => {
const props = abstractTooltipProps();
export default {
name: 'ATooltip',
props: {
...props,
title: PropTypes.any,
},
model: {
prop: 'visible',
event: 'visibleChange',
},
props: {
...props,
title: PropTypes.any,
},
inject: {
configProvider: { default: () => ({}) },
},
@ -156,7 +156,7 @@ export default {
},
},
render(h) {
render() {
const { $props, $data, $slots, $listeners } = this;
const { prefixCls, openClassName, getPopupContainer } = $props;
const { getPopupContainer: getContextPopupContainer } = this.configProvider;

2
components/transfer/item.jsx
View File

@ -6,6 +6,7 @@ import Checkbox from '../checkbox';
function noop() {}
export default {
name: 'Item',
props: {
renderedText: PropTypes.any,
renderedEl: PropTypes.any,
@ -15,7 +16,6 @@ export default {
prefixCls: PropTypes.string,
disabled: PropTypes.bool,
},
name: 'Item',
render() {
const { renderedText, renderedEl, item, lazy, checked, disabled, prefixCls } = this.$props;

2
components/tree/DirectoryTree.jsx
View File

@ -28,8 +28,8 @@ function getIcon(props, h) {
}
export default {
mixins: [BaseMixin],
name: 'ADirectoryTree',
mixins: [BaseMixin],
model: {
prop: 'checkedKeys',
event: 'check',

10
components/upload/Upload.jsx
View File

@ -13,10 +13,10 @@ import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from './u
export { UploadProps };
export default {
inheritAttrs: false,
name: 'AUpload',
Dragger: Dragger,
mixins: [BaseMixin],
inheritAttrs: false,
Dragger: Dragger,
props: initDefaultProps(UploadProps, {
prefixCls: 'ant-upload',
type: 'select',
@ -38,14 +38,14 @@ export default {
dragState: 'drop',
};
},
beforeDestroy() {
this.clearProgressTimer();
},
watch: {
fileList(val) {
this.sFileList = val;
},
},
beforeDestroy() {
this.clearProgressTimer();
},
methods: {
onStart(file) {
const targetItem = fileToObject(file);

3
components/vc-calendar/demo/antd-calendar.vue
View File

@ -1,5 +1,5 @@
<script>
/* eslint react/no-multi-comp:0, no-console:0 */
/* eslint react/no-multi-comp:0, no-console:0, no-unused-vars:0 */
import '../assets/index.less';
import PropTypes from '@/components/_util/vue-types';
@ -17,7 +17,6 @@ import 'moment/locale/en-gb';
const format = 'YYYY-MM-DD HH:mm:ss';
const cn = window.location.search.indexOf('cn') !== -1;
const now = moment();
if (cn) {
now.locale('zh-cn').utcOffset(8);

2
components/vc-calendar/demo/antd-range-calendar.vue
View File

@ -1,5 +1,5 @@
<script>
/* eslint react/no-multi-comp:0, no-console:0 */
/* eslint react/no-multi-comp:0, no-console:0, no-unused-vars:0 */
import '../assets/index.less';
import '@/components/vc-time-picker/assets/index.less';

2
components/vc-calendar/src/RangeCalendar.jsx
View File

@ -125,7 +125,7 @@ const RangeCalendar = {
};
},
watch: {
value(val) {
value() {
const newState = {};
newState.sValue = normalizeAnchor(this.$props, 0);
this.setState(newState);

10
components/vc-cascader/Cascader.jsx
View File

@ -45,6 +45,11 @@ const BUILT_IN_PLACEMENTS = {
};
export default {
mixins: [BaseMixin],
model: {
prop: 'value',
event: 'change',
},
props: {
value: PropTypes.array,
defaultValue: PropTypes.array,
@ -69,11 +74,6 @@ export default {
loadingIcon: PropTypes.any,
getPopupContainer: PropTypes.func,
},
mixins: [BaseMixin],
model: {
prop: 'value',
event: 'change',
},
data() {
let initialValue = [];
const { value, defaultValue, popupVisible } = this;

10
components/vc-cascader/Menus.jsx
View File

@ -24,11 +24,6 @@ export default {
this.menuItems = {};
return {};
},
mounted() {
this.$nextTick(() => {
this.scrollActiveItemToView();
});
},
watch: {
visible(val) {
if (val) {
@ -38,6 +33,11 @@ export default {
}
},
},
mounted() {
this.$nextTick(() => {
this.scrollActiveItemToView();
});
},
methods: {
getFieldName(name) {
const { fieldNames, defaultFieldNames } = this.$props;

8
components/vc-checkbox/src/Checkbox.jsx
View File

@ -7,6 +7,10 @@ export default {
name: 'Checkbox',
mixins: [BaseMixin],
inheritAttrs: false,
model: {
prop: 'checked',
event: 'change',
},
props: initDefaultProps(
{
prefixCls: PropTypes.string,
@ -31,10 +35,6 @@ export default {
defaultChecked: false,
},
),
model: {
prop: 'checked',
event: 'change',
},
data() {
const checked = hasProp(this, 'checked') ? this.checked : this.defaultChecked;
return {

24
components/vc-collapse/src/Collapse.jsx
View File

@ -36,6 +36,18 @@ export default {
stateActiveKey: _toArray(currentActiveKey),
};
},
watch: {
activeKey(val) {
this.setState({
stateActiveKey: _toArray(val),
});
},
openAnimation(val) {
this.setState({
currentOpenAnimations: val,
});
},
},
methods: {
onClickItem(key) {
let activeKey = this.stateActiveKey;
@ -103,18 +115,6 @@ export default {
this.$emit('change', this.accordion ? activeKey[0] : activeKey);
},
},
watch: {
activeKey(val) {
this.setState({
stateActiveKey: _toArray(val),
});
},
openAnimation(val) {
this.setState({
currentOpenAnimations: val,
});
},
},
render() {
const { prefixCls, accordion } = this.$props;
const collapseClassName = {

22
components/vc-dialog/Dialog.jsx
View File

@ -69,6 +69,17 @@ export default {
};
},
watch: {
visible(val) {
if (val) {
this.destroyPopup = false;
}
this.$nextTick(() => {
this.updatedCallback(!val);
});
},
},
// private inTransition: boolean;
// private titleId: string;
// private openTime: number;
@ -88,17 +99,6 @@ export default {
this.updatedCallback(false);
});
},
watch: {
visible(val) {
if (val) {
this.destroyPopup = false;
}
this.$nextTick(() => {
this.updatedCallback(!val);
});
},
},
beforeDestroy() {
if (this.visible || this.inTransition) {
this.removeScrollingEffect();

4
components/vc-dialog/demo/ant-design.vue
View File

@ -46,7 +46,7 @@ export default {
};
},
onClose (e) {
onClose () {
// console.log(e);
this.visible = false;
},
@ -55,7 +55,7 @@ export default {
this.destroyOnClose = e.target.checked;
},
changeWidth (e) {
changeWidth () {
this.width = this.width === 600 ? 800 : 600;
},

14
components/vc-lazy-load/src/LazyLoad.jsx
View File

@ -52,6 +52,13 @@ export default {
visible: false,
};
},
watch: {
_propsSymbol() {
if (!this.visible) {
this.lazyLoadHandler();
}
},
},
mounted() {
this.$nextTick(() => {
this._mounted = true;
@ -66,13 +73,6 @@ export default {
this.scrollHander = addEventListener(eventNode, 'scroll', this.lazyLoadHandler);
});
},
watch: {
_propsSymbol(val) {
if (!this.visible) {
this.lazyLoadHandler();
}
},
},
beforeDestroy() {
this._mounted = false;
if (this.lazyLoadHandler.cancel) {

2
components/vc-menu/SubMenu.jsx
View File

@ -415,7 +415,7 @@ const SubMenu = {
},
},
render(h) {
render() {
const props = this.$props;
const { rootPrefixCls, parentMenu, $listeners = {} } = this;
const isOpen = props.isOpen;

10
components/vc-notification/Notice.jsx
View File

@ -13,6 +13,11 @@ export default {
update: PropTypes.bool,
closeIcon: PropTypes.any,
},
watch: {
duration() {
this.restartCloseTimer();
},
},
mounted() {
this.startCloseTimer();
@ -27,11 +32,6 @@ export default {
this.clearCloseTimer();
this.willDestroy = true; // beforeDestroy调用后依然会触发onMouseleave事件
},
watch: {
duration() {
this.restartCloseTimer();
},
},
methods: {
close() {
this.clearCloseTimer();

4
components/vc-notification/demo/simple.jsx
View File

@ -1,4 +1,4 @@
/* eslint-disable no-console */
/* eslint-disable no-console, no-unused-vars */
import '../assets/index.less';
import Notification from '../index';
let notification = null;
@ -13,7 +13,7 @@ Notification.newInstance(
function simpleFn() {
notification.notice({
content: h => {
content: () => {
return <span>simple show</span>;
},
onClose() {

8
components/vc-pagination/Pagination.jsx
View File

@ -28,6 +28,10 @@ function calculatePage(p, state, props) {
export default {
name: 'Pagination',
mixins: [BaseMixin],
model: {
prop: 'current',
event: 'change.current',
},
props: {
prefixCls: PropTypes.string.def('rc-pagination'),
selectPrefixCls: PropTypes.string.def('rc-select'),
@ -55,10 +59,6 @@ export default {
jumpPrevIcon: PropTypes.any,
jumpNextIcon: PropTypes.any,
},
model: {
prop: 'current',
event: 'change.current',
},
data() {
const hasOnChange = this.onChange !== noop;
const hasCurrent = hasProp(this, 'current');

22
components/vc-rate/src/Rate.jsx
View File

@ -29,6 +29,10 @@ function noop() {}
export default {
name: 'Rate',
mixins: [BaseMixin],
model: {
prop: 'value',
event: 'change',
},
props: initDefaultProps(rateProps, {
defaultValue: 0,
count: 5,
@ -38,10 +42,6 @@ export default {
tabIndex: 0,
character: '★',
}),
model: {
prop: 'value',
event: 'change',
},
data() {
let value = this.value;
if (!hasProp(this, 'value')) {
@ -54,13 +54,6 @@ export default {
hoverValue: undefined,
};
},
mounted() {
this.$nextTick(() => {
if (this.autoFocus && !this.disabled) {
this.focus();
}
});
},
watch: {
value(val) {
this.setState({
@ -68,6 +61,13 @@ export default {
});
},
},
mounted() {
this.$nextTick(() => {
if (this.autoFocus && !this.disabled) {
this.focus();
}
});
},
methods: {
onHover(event, index) {
const hoverValue = this.getStarValue(index, event.pageX);

14
components/vc-select/DropdownMenu.jsx
View File

@ -28,6 +28,13 @@ export default {
firstActiveValue: PropTypes.string,
menuItemSelectedIcon: PropTypes.any,
},
watch: {
visible(val) {
if (!val) {
this.lastVisible = val;
}
},
},
created() {
this.rafInstance = { cancel: () => null };
@ -41,13 +48,6 @@ export default {
});
this.lastVisible = this.$props.visible;
},
watch: {
visible(val) {
if (!val) {
this.lastVisible = val;
}
},
},
updated() {
const props = this.$props;
if (!this.prevVisible && props.visible) {

8
components/vc-select/Select.jsx
View File

@ -452,7 +452,7 @@ const Select = {
}
},
onPlaceholderClick(e) {
onPlaceholderClick() {
if (this.getInputDOMNode() && this.getInputDOMNode()) {
this.getInputDOMNode().focus();
}
@ -618,7 +618,7 @@ const Select = {
this._focused = false;
}
},
inputBlur(e) {
inputBlur() {
this.clearBlurTime();
if (this.disabled) {
return;
@ -1448,7 +1448,7 @@ const Select = {
}
}
},
selectionRefFocus(e) {
selectionRefFocus() {
if (this._focused || this.disabled) {
return;
}
@ -1456,7 +1456,7 @@ const Select = {
this.updateFocusClassName();
this.$emit('focus');
},
selectionRefBlur(e) {
selectionRefBlur() {
this._focused = false;
this.updateFocusClassName();
this.$emit('blur');

8
components/vc-select/SelectTrigger.jsx
View File

@ -57,15 +57,15 @@ export default {
dropdownRender: PropTypes.func,
ariaId: PropTypes.string,
},
created() {
this.saveDropdownMenuRef = saveRef(this, 'dropdownMenuRef');
this.saveTriggerRef = saveRef(this, 'triggerRef');
},
data() {
return {
dropdownWidth: 0,
};
},
created() {
this.saveDropdownMenuRef = saveRef(this, 'dropdownMenuRef');
this.saveTriggerRef = saveRef(this, 'triggerRef');
},
mounted() {
this.$nextTick(() => {

2
components/vc-select/demo/optionFilterProp.vue
View File

@ -4,7 +4,7 @@ import '../assets/index.less';
export default {
methods: {
onChange (value, options) {
onChange (value) {
console.log(`selected ${value}`);
},
},

2
components/vc-select/demo/optionLabelProp.vue
View File

@ -4,7 +4,7 @@ import '../assets/index.less';
export default {
methods: {
onChange (value, options) {
onChange (value) {
console.log(`selected ${value}`);
},
},

2
components/vc-select/demo/suggest.vue
View File

@ -35,7 +35,7 @@ export default {
},
},
render (h) {
render () {
const data = this.data;
const options = data.map((d) => {
return <Option key={d.value}>{d.text}</Option>;

2
components/vc-slick/demo/AppendDots.jsx
View File

@ -2,7 +2,7 @@ import '../assets/index.less';
import Slider from '../src/slider';
export default {
render(h) {
render() {
const settings = {
props: {
dots: true,

2
components/vc-slick/demo/CustomArrows.jsx
View File

@ -2,7 +2,7 @@ import '../assets/index.less';
import Slider from '../src/slider';
export default {
render(h) {
render() {
const settings = {
props: {
dots: true,

6
components/vc-slick/src/track.js
View File

@ -116,7 +116,7 @@ const renderSlides = function(spec, children, createElement) {
class: classnames(slideClasses, slideClass),
style: { outline: 'none', ...(getStyle(child.context) || {}), ...childStyle },
on: {
click: e => {
click: () => {
// child.props && child.props.onClick && child.props.onClick(e)
if (spec.focusOnSelect) {
spec.focusOnSelect(childOnClickOptions);
@ -148,7 +148,7 @@ const renderSlides = function(spec, children, createElement) {
},
style: { ...(getStyle(child.context) || {}), ...childStyle },
on: {
click: e => {
click: () => {
// child.props && child.props.onClick && child.props.onClick(e)
if (spec.focusOnSelect) {
spec.focusOnSelect(childOnClickOptions);
@ -176,7 +176,7 @@ const renderSlides = function(spec, children, createElement) {
class: classnames(slideClasses, slideClass),
style: { ...(getStyle(child.context) || {}), ...childStyle },
on: {
click: e => {
click: () => {
// child.props && child.props.onClick && child.props.onClick(e)
if (spec.focusOnSelect) {
spec.focusOnSelect(childOnClickOptions);

12
components/vc-switch/Switch.jsx
View File

@ -5,7 +5,7 @@ import { hasProp, getOptionProps, getComponentFromProp } from '../_util/props-ut
// function noop () {
// }
export default {
name: 'vc-switch',
name: 'VcSwitch',
mixins: [BaseMixin],
model: {
prop: 'checked',
@ -28,6 +28,11 @@ export default {
stateChecked: checked,
};
},
watch: {
checked(val) {
this.stateChecked = val;
},
},
mounted() {
this.$nextTick(() => {
const { autoFocus, disabled } = this;
@ -36,11 +41,6 @@ export default {
}
});
},
watch: {
checked(val) {
this.stateChecked = val;
},
},
methods: {
setChecked(checked) {
if (this.disabled) {

2
components/vc-table/src/ExpandIcon.jsx
View File

@ -1,8 +1,8 @@
import PropTypes from '../../_util/vue-types';
import BaseMixin from '../../_util/BaseMixin';
export default {
mixins: [BaseMixin],
name: 'ExpandIcon',
mixins: [BaseMixin],
props: {
record: PropTypes.object,
prefixCls: PropTypes.string,

110
components/vc-table/src/Table.jsx
View File

@ -79,6 +79,60 @@ export default {
customHeaderRow: () => {},
},
),
data() {
this.preData = [...this.data];
return {
columnManager: new ColumnManager(this.columns),
sComponents: merge(
{
table: 'table',
header: {
wrapper: 'thead',
row: 'tr',
cell: 'th',
},
body: {
wrapper: 'tbody',
row: 'tr',
cell: 'td',
},
},
this.components,
),
};
},
watch: {
components() {
this._components = merge(
{
table: 'table',
header: {
wrapper: 'thead',
row: 'tr',
cell: 'th',
},
body: {
wrapper: 'tbody',
row: 'tr',
cell: 'td',
},
},
this.components,
);
},
columns(val) {
if (val) {
this.columnManager.reset(val);
}
},
data(val) {
if (val.length === 0 && this.hasScrollX()) {
this.$nextTick(() => {
this.resetScrollX();
});
}
},
},
// static childContextTypes = {
// table: PropTypes.any,
@ -112,65 +166,11 @@ export default {
this.debouncedWindowResize = debounce(this.handleWindowResize, 150);
},
data() {
this.preData = [...this.data];
return {
columnManager: new ColumnManager(this.columns),
sComponents: merge(
{
table: 'table',
header: {
wrapper: 'thead',
row: 'tr',
cell: 'th',
},
body: {
wrapper: 'tbody',
row: 'tr',
cell: 'td',
},
},
this.components,
),
};
},
provide() {
return {
table: this,
};
},
watch: {
components(val) {
this._components = merge(
{
table: 'table',
header: {
wrapper: 'thead',
row: 'tr',
cell: 'th',
},
body: {
wrapper: 'tbody',
row: 'tr',
cell: 'td',
},
},
this.components,
);
},
columns(val) {
if (val) {
this.columnManager.reset(val);
}
},
data(val) {
if (val.length === 0 && this.hasScrollX()) {
this.$nextTick(() => {
this.resetScrollX();
});
}
},
},
mounted() {
this.$nextTick(() => {
@ -188,7 +188,7 @@ export default {
});
},
updated(prevProps) {
updated() {
this.$nextTick(() => {
if (this.columnManager.isAnyColumnsFixed()) {
this.handleWindowResize();

2
components/vc-table/src/TableCell.jsx
View File

@ -32,7 +32,7 @@ export default {
},
},
render(h) {
render() {
const {
record,
indentSize,

18
components/vc-tabs/src/ScrollableTabBarNode.jsx
View File

@ -29,6 +29,14 @@ export default {
prev: false,
};
},
watch: {
tabBarPosition() {
this.tabBarPositionChange = true;
this.$nextTick(() => {
this.setOffset(0);
});
},
},
mounted() {
this.$nextTick(() => {
@ -56,14 +64,6 @@ export default {
this.debouncedResize.cancel();
}
},
watch: {
tabBarPosition(val) {
this.tabBarPositionChange = true;
this.$nextTick(() => {
this.setOffset(0);
});
},
},
methods: {
updatedCal(prevProps) {
const props = this.$props;
@ -260,7 +260,7 @@ export default {
this.setOffset(offset + navWrapNodeWH);
},
nextClick(e) {
nextClick() {
// this.__emit('nextClick', e)
const navWrapNode = this.$props.getRef('navWrap');
const navWrapNodeWH = this.getOffsetWH(navWrapNode);

2
components/vc-tabs/src/TabBar.jsx
View File

@ -11,7 +11,7 @@ export default {
const listeners = this.$listeners;
return (
<SaveRef
children={(saveRef, getRef) => (
children={saveRef => (
<TabBarRootNode saveRef={saveRef} {...{ props, on: listeners }}>
<TabBarTabsNode saveRef={saveRef} {...{ props, on: listeners }} />
</TabBarRootNode>

4
components/vc-tabs/src/Tabs.jsx
View File

@ -26,11 +26,11 @@ function activeKeyIsValid(props, key) {
export default {
name: 'Tabs',
mixins: [BaseMixin],
model: {
prop: 'activeKey',
event: 'change',
},
mixins: [BaseMixin],
props: {
destroyInactiveTabPane: PropTypes.bool,
renderTabBar: PropTypes.func.isRequired,
@ -41,7 +41,7 @@ export default {
tabBarPosition: PropTypes.string.def('top'),
activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
__propsSymbol__: PropTypes.any,
propsSymbol: PropTypes.any,
},
data() {
const props = getOptionProps(this);

2
components/vc-time-picker/Select.jsx
View File

@ -46,7 +46,7 @@ const Select = {
});
},
watch: {
selectedIndex(val) {
selectedIndex() {
this.$nextTick(() => {
// smooth scroll to selected option
this.scrollToSelected(120);

16
components/vc-time-picker/TimePicker.jsx
View File

@ -9,8 +9,8 @@ import { initDefaultProps, hasProp, getComponentFromProp } from '../_util/props-
function noop() {}
export default {
mixins: [BaseMixin],
name: 'VcTimePicker',
mixins: [BaseMixin],
props: initDefaultProps(
{
prefixCls: PropTypes.string,
@ -89,13 +89,6 @@ export default {
sValue: value,
};
},
mounted() {
this.$nextTick(() => {
if (this.autoFocus) {
this.focus();
}
});
},
watch: {
value(val) {
@ -111,6 +104,13 @@ export default {
}
},
},
mounted() {
this.$nextTick(() => {
if (this.autoFocus) {
this.focus();
}
});
},
methods: {
onPanelChange(value) {
this.setValue(value);

Some files were not shown because too many files have changed in this diff Show More