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

chore: upgrade to vue3

pull/2324/head
Amour1688 2020-05-27 19:11:46 +08:00
parent 5acc7671a3
commit adee8604b2
11 changed files with 100 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
antd-tools/getBabelCommonConfig.js
View File

@ -2,24 +2,25 @@
module.exports = function(modules) { module.exports = function(modules) {
const plugins = [ const plugins = [
require.resolve('babel-plugin-transform-vue-jsx'),
require.resolve('babel-plugin-inline-import-data-uri'), require.resolve('babel-plugin-inline-import-data-uri'),
require.resolve('babel-plugin-transform-es3-member-expression-literals'), require.resolve('@babel/plugin-transform-member-expression-literals'),
require.resolve('babel-plugin-transform-es3-property-literals'), require.resolve('@babel/plugin-transform-property-literals'),
require.resolve('babel-plugin-transform-object-assign'), require.resolve('@babel/plugin-proposal-export-default-from'),
require.resolve('babel-plugin-transform-object-rest-spread'), require.resolve('@babel/plugin-transform-object-assign'),
require.resolve('babel-plugin-transform-class-properties'), require.resolve('@babel/plugin-transform-template-literals'),
require.resolve('@babel/plugin-proposal-object-rest-spread'),
require.resolve('@babel/plugin-proposal-class-properties'),
]; ];
plugins.push([ plugins.push([
require.resolve('babel-plugin-transform-runtime'), require.resolve('@babel/plugin-transform-runtime'),
{ {
polyfill: false, helpers: false,
}, },
]); ]);
return { return {
presets: [ presets: [
[ [
require.resolve('babel-preset-env'), require.resolve('@babel/preset-env'),
{ {
modules, modules,
targets: { targets: {
@ -34,6 +35,7 @@ module.exports = function(modules) {
}, },
}, },
], ],
require.resolve('@ant-design-vue/babel-preset-jsx'),
], ],
plugins, plugins,
env: { env: {

2
antdv-demo

@ -1 +1 @@
Subproject commit 814b848dea1d5877f17987d512a0d74fdc99cb1a Subproject commit cbf75b264e8f00f820a73fd2204183d17ca8648b

10
components/_util/wave.jsx
View File

@ -1,3 +1,4 @@
import { nextTick } from 'vue';
import TransitionEvents from './css-animation/Event'; import TransitionEvents from './css-animation/Event';
import raf from './raf'; import raf from './raf';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
@ -22,7 +23,7 @@ export default {
name: 'Wave', name: 'Wave',
props: ['insertExtraNode'], props: ['insertExtraNode'],
mounted() { mounted() {
this.$nextTick(() => { nextTick(() => {
const node = this.$el; const node = this.$el;
if (node.nodeType !== 1) { if (node.nodeType !== 1) {
return; return;
@ -161,9 +162,10 @@ export default {
}, },
render() { render() {
if (this.configProvider.csp) { const csp = this.configProvider().csp;
this.csp = this.configProvider.csp; if (csp) {
this.csp = csp;
} }
return this.$slots.default && this.$slots.default[0]; return this.$slots.default() && this.$slots.default()[0];
}, },
}; };

27
components/alert/index.jsx
View File

@ -1,3 +1,4 @@
import { Transition } from 'vue';
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'; import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined'; import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined'; import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
@ -92,22 +93,23 @@ const Alert = {
}, },
}, },
render(h) { render() {
const { prefixCls: customizePrefixCls, banner, closing, closed } = this; const { prefixCls: customizePrefixCls, banner, closing, closed } = this;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider().getPrefixCls;
const prefixCls = getPrefixCls('alert', customizePrefixCls); const prefixCls = getPrefixCls('alert', customizePrefixCls);
let { closable, type, showIcon } = this; let { closable, type, showIcon } = this;
const closeText = getComponentFromProp(this, 'closeText'); const { closeText, description, message, icon } = this.$props;
const description = getComponentFromProp(this, 'description'); // const closeText = getComponentFromProp(this, 'closeText');
const message = getComponentFromProp(this, 'message'); // const description = getComponentFromProp(this, 'description');
const icon = getComponentFromProp(this, 'icon'); // const message = getComponentFromProp(this, 'message');
// const icon = getComponentFromProp(this, 'icon');
// banner模式默认有 Icon // banner模式默认有 Icon
showIcon = banner && showIcon === undefined ? true : showIcon; showIcon = banner && showIcon === undefined ? true : showIcon;
// banner模式默认为警告 // banner模式默认为警告
type = banner && type === undefined ? 'warning' : type || 'info'; type = banner && type === undefined ? 'warning' : type || 'info';
const iconType = (description ? iconMapOutlined : iconMapFilled)[type] || null; const IconType = (description ? iconMapOutlined : iconMapFilled)[type] || null;
// closeable when closeText is assigned // closeable when closeText is assigned
if (closeText) { if (closeText) {
@ -129,30 +131,29 @@ const Alert = {
</a> </a>
) : null; ) : null;
const iconNode = const iconNode = (icon &&
(icon &&
(isValidElement(icon) ? ( (isValidElement(icon) ? (
cloneElement(icon, { cloneElement(icon, {
class: `${prefixCls}-icon`, class: `${prefixCls}-icon`,
}) })
) : ( ) : (
<span class={`${prefixCls}-icon`}>{icon}</span> <span class={`${prefixCls}-icon`}>{icon}</span>
))) || ))) || <IconType class={`${prefixCls}-icon`} />;
h(iconType, { class: `${prefixCls}-icon` }); // h(iconType, { class: `${prefixCls}-icon` });
const transitionProps = getTransitionProps(`${prefixCls}-slide-up`, { const transitionProps = getTransitionProps(`${prefixCls}-slide-up`, {
appear: false, appear: false,
afterLeave: this.animationEnd, afterLeave: this.animationEnd,
}); });
return closed ? null : ( return closed ? null : (
<transition {...transitionProps}> <Transition {...transitionProps}>
<div v-show={!closing} class={alertCls} data-show={!closing}> <div v-show={!closing} class={alertCls} data-show={!closing}>
{showIcon ? iconNode : null} {showIcon ? iconNode : null}
<span class={`${prefixCls}-message`}>{message}</span> <span class={`${prefixCls}-message`}>{message}</span>
<span class={`${prefixCls}-description`}>{description}</span> <span class={`${prefixCls}-description`}>{description}</span>
{closeIcon} {closeIcon}
</div> </div>
</transition> </Transition>
); );
}, },
}; };

15
components/button/button.jsx
View File

@ -64,7 +64,7 @@ export default {
icon, icon,
$slots, $slots,
} = this; } = this;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider().getPrefixCls;
const prefixCls = getPrefixCls('btn', customizePrefixCls); const prefixCls = getPrefixCls('btn', customizePrefixCls);
const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false; const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
@ -82,7 +82,7 @@ export default {
break; break;
} }
const iconType = sLoading ? 'loading' : icon; const iconType = sLoading ? 'loading' : icon;
const children = filterEmpty($slots.default); const children = filterEmpty($slots.default());
return { return {
[`${prefixCls}`]: true, [`${prefixCls}`]: true,
[`${prefixCls}-${type}`]: type, [`${prefixCls}-${type}`]: type,
@ -130,11 +130,12 @@ export default {
}, },
isNeedInserted() { isNeedInserted() {
const { icon, $slots, type } = this; const { icon, $slots, type } = this;
return $slots.default && $slots.default.length === 1 && !icon && type !== 'link'; const children = filterEmpty($slots.default());
return children && children.length === 1 && !icon && type !== 'link';
}, },
}, },
render() { render() {
this.icon = this.$scopedSlots.icon && this.$scopedSlots.icon(); this.icon = this.$slots.icon && this.$slots.icon();
const classes = this.getClasses(); const classes = this.getClasses();
const { type, htmlType, icon, disabled, handleClick, sLoading, $slots, $attrs } = this; const { type, htmlType, icon, disabled, handleClick, sLoading, $slots, $attrs } = this;
const buttonProps = { const buttonProps = {
@ -148,9 +149,9 @@ export default {
click: handleClick, click: handleClick,
}, },
}; };
const iconNode = sLoading ? <LoadingOutlined /> : icon || null; const iconNode = sLoading ? <LoadingOutlined /> : icon;
const children = filterEmpty($slots.default); const children = $slots.default();
const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false; const autoInsertSpace = this.configProvider().autoInsertSpaceInButton !== false;
const kids = children.map(child => const kids = children.map(child =>
this.insertSpace(child, this.isNeedInserted() && autoInsertSpace), this.insertSpace(child, this.isNeedInserted() && autoInsertSpace),
); );

4
components/tabs/tabs.jsx
View File

@ -50,7 +50,7 @@ export default {
methods: { methods: {
removeTab(targetKey, e) { removeTab(targetKey, e) {
e.stopPropagation(); e.stopPropagation();
if(isValid(targetKey)) { if (isValid(targetKey)) {
this.$emit('edit', targetKey, 'remove'); this.$emit('edit', targetKey, 'remove');
} }
}, },
@ -82,7 +82,7 @@ export default {
hideAdd, hideAdd,
renderTabBar, renderTabBar,
} = props; } = props;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider().getPrefixCls;
const prefixCls = getPrefixCls('tabs', customizePrefixCls); const prefixCls = getPrefixCls('tabs', customizePrefixCls);
const children = filterEmpty(this.$slots.default); const children = filterEmpty(this.$slots.default);

7
components/tag/Tag.jsx
View File

@ -1,3 +1,4 @@
import { Transition } from 'vue';
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'; import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import getTransitionProps from '../_util/getTransitionProps'; import getTransitionProps from '../_util/getTransitionProps';
@ -119,7 +120,7 @@ export default {
render() { render() {
const { prefixCls: customizePrefixCls } = this.$props; const { prefixCls: customizePrefixCls } = this.$props;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider().getPrefixCls;
const prefixCls = getPrefixCls('tag', customizePrefixCls); const prefixCls = getPrefixCls('tag', customizePrefixCls);
const { _visible: visible } = this.$data; const { _visible: visible } = this.$data;
const tag = ( const tag = (
@ -129,7 +130,7 @@ export default {
class={this.getTagClassName(prefixCls)} class={this.getTagClassName(prefixCls)}
style={this.getTagStyle()} style={this.getTagStyle()}
> >
{this.$slots.default} {this.$slots.default()}
{this.renderCloseIcon()} {this.renderCloseIcon()}
</span> </span>
); );
@ -138,7 +139,7 @@ export default {
}); });
return ( return (
<Wave> <Wave>
<transition {...transitionProps}>{tag}</transition> <Transition {...transitionProps}>{tag}</Transition>
</Wave> </Wave>
); );
}, },

20
examples/App.vue
View File

@ -1,19 +1,18 @@
<template> <template>
<div> <div>
<a-button type="primary"> <a-button type="primary" block @click="onClick">
Primary Primary
</a-button> </a-button>
<a-button>Default</a-button> <a-button block>
<a-button type="dashed"> Default
</a-button>
<a-button type="dashed" block>
Dashed Dashed
</a-button> </a-button>
<a-button type="danger"> <a-button type="danger" block>
Danger Danger
</a-button> </a-button>
<a-button type="primary"> <a-button type="link" block>
按钮
</a-button>
<a-button type="link">
Link Link
</a-button> </a-button>
</div> </div>
@ -22,5 +21,10 @@
<script> <script>
export default { export default {
name: 'Demo', name: 'Demo',
methods: {
onClick() {
console.log(1);
},
},
}; };
</script> </script>

17
examples/index.js
View File

@ -1,12 +1,9 @@
import 'babel-polyfill'; import '@babel/polyfill';
import Vue from 'vue'; import { createApp } from 'vue';
import App from './App.vue'; import App from './App.vue';
import Antd from 'ant-design-vue'; import Button from 'ant-design-vue/button';
import 'ant-design-vue/style.js'; import 'ant-design-vue/button/style/index.less';
Vue.use(Antd); createApp(App)
.use(Button)
new Vue({ .mount('#app');
el: '#app',
render: h => h(App),
});

39
package.json
View File

@ -58,36 +58,35 @@
"vue-template-compiler": ">=2.6.0" "vue-template-compiler": ">=2.6.0"
}, },
"devDependencies": { "devDependencies": {
"@ant-design-vue/babel-plugin-jsx": "^1.0.0-alpha.3",
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.6",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-export-default-from": "^7.8.3",
"@babel/plugin-proposal-object-rest-spread": "^7.9.6",
"@babel/plugin-transform-member-expression-literals": "^7.8.3",
"@babel/plugin-transform-object-assign": "^7.8.3",
"@babel/plugin-transform-property-literals": "^7.8.3",
"@babel/plugin-transform-template-literals": "^7.8.3",
"@babel/polyfill": "^7.8.7",
"@babel/preset-env": "^7.9.6",
"@commitlint/cli": "^8.0.0", "@commitlint/cli": "^8.0.0",
"@commitlint/config-conventional": "^8.0.0", "@commitlint/config-conventional": "^8.0.0",
"@octokit/rest": "^16.0.0", "@octokit/rest": "^16.0.0",
"@vue/cli-plugin-eslint": "^4.0.0", "@vue/cli-plugin-eslint": "^4.0.0",
"@vue/compiler-sfc": "^3.0.0-beta.14",
"@vue/server-test-utils": "1.0.0-beta.16", "@vue/server-test-utils": "1.0.0-beta.16",
"@vue/test-utils": "1.0.0-beta.16", "@vue/test-utils": "1.0.0-beta.16",
"acorn": "^7.0.0", "acorn": "^7.0.0",
"autoprefixer": "^9.6.0", "autoprefixer": "^9.6.0",
"axios": "^0.19.0", "axios": "^0.19.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^10.0.1", "babel-eslint": "^10.0.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^23.6.0", "babel-jest": "^23.6.0",
"babel-loader": "^7.1.2", "babel-loader": "^8.0.0",
"babel-plugin-import": "^1.1.1", "babel-plugin-import": "^1.1.1",
"babel-plugin-inline-import-data-uri": "^1.0.1", "babel-plugin-inline-import-data-uri": "^1.0.1",
"babel-plugin-istanbul": "^6.0.0", "babel-plugin-istanbul": "^6.0.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
"babel-plugin-transform-es3-property-literals": "^6.22.0",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "~6.23.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1", "babel-preset-env": "^1.6.1",
"case-sensitive-paths-webpack-plugin": "^2.1.2", "case-sensitive-paths-webpack-plugin": "^2.1.2",
"chalk": "^3.0.0", "chalk": "^3.0.0",
@ -109,7 +108,7 @@
"fs-extra": "^8.0.0", "fs-extra": "^8.0.0",
"glob": "^7.1.2", "glob": "^7.1.2",
"gulp": "^4.0.1", "gulp": "^4.0.1",
"gulp-babel": "^7.0.0", "gulp-babel": "^8.0.0",
"gulp-strip-code": "^0.1.4", "gulp-strip-code": "^0.1.4",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"husky": "^4.0.0", "husky": "^4.0.0",
@ -150,7 +149,7 @@
"terser-webpack-plugin": "^2.3.1", "terser-webpack-plugin": "^2.3.1",
"through2": "^3.0.0", "through2": "^3.0.0",
"url-loader": "^3.0.0", "url-loader": "^3.0.0",
"vue": "^2.6.11", "vue": "^3.0.0-beta.14",
"vue-antd-md-loader": "^1.1.0", "vue-antd-md-loader": "^1.1.0",
"vue-clipboard2": "0.3.1", "vue-clipboard2": "0.3.1",
"vue-draggable-resizable": "^2.1.0", "vue-draggable-resizable": "^2.1.0",
@ -158,12 +157,12 @@
"vue-i18n": "^8.3.2", "vue-i18n": "^8.3.2",
"vue-infinite-scroll": "^2.0.2", "vue-infinite-scroll": "^2.0.2",
"vue-jest": "^2.5.0", "vue-jest": "^2.5.0",
"vue-loader": "^15.6.2", "vue-loader": "^16.0.0-beta.2",
"vue-router": "^3.0.1", "vue-router": "^4.0.0-alpha.12",
"vue-server-renderer": "^2.6.11", "vue-server-renderer": "^2.6.11",
"vue-template-compiler": "^2.6.11", "vue-template-compiler": "^2.6.11",
"vue-virtual-scroller": "^1.0.0", "vue-virtual-scroller": "^1.0.0",
"vuex": "^3.1.0", "vuex": "^4.0.0-beta.2",
"webpack": "^4.28.4", "webpack": "^4.28.4",
"webpack-cli": "^3.2.1", "webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14", "webpack-dev-server": "^3.1.14",

19
webpack.config.js
View File

@ -1,5 +1,5 @@
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); const VueLoaderPlugin = require('vue-loader/dist/plugin').default;
const webpack = require('webpack'); const webpack = require('webpack');
const WebpackBar = require('webpackbar'); const WebpackBar = require('webpackbar');
const path = require('path'); const path = require('path');
@ -21,7 +21,7 @@ module.exports = {
options: { options: {
presets: [ presets: [
[ [
'env', '@babel/preset-env',
{ {
targets: { targets: {
browsers: [ browsers: [
@ -37,10 +37,11 @@ module.exports = {
], ],
], ],
plugins: [ plugins: [
'transform-vue-jsx', ['@ant-design-vue/babel-plugin-jsx', { transformOn: true, compatibleProps: true }],
'transform-object-assign', '@babel/plugin-transform-object-assign',
'transform-object-rest-spread', '@babel/plugin-proposal-object-rest-spread',
'transform-class-properties', '@babel/plugin-proposal-export-default-from',
'@babel/plugin-proposal-class-properties',
], ],
}, },
}, },
@ -54,7 +55,7 @@ module.exports = {
{ {
test: /\.less$/, test: /\.less$/,
use: [ use: [
{ loader: 'vue-style-loader' }, { loader: 'style-loader' },
{ {
loader: 'css-loader', loader: 'css-loader',
options: { sourceMap: true }, options: { sourceMap: true },
@ -72,14 +73,14 @@ module.exports = {
}, },
{ {
test: /\.css$/, test: /\.css$/,
use: ['vue-style-loader', 'css-loader'], use: ['css-loader'],
}, },
], ],
}, },
resolve: { resolve: {
alias: { alias: {
'ant-design-vue': path.join(__dirname, './components'), 'ant-design-vue': path.join(__dirname, './components'),
vue$: 'vue/dist/vue.esm.js', // vue$: 'vue/dist/vue.esm.js',
}, },
extensions: ['.js', '.jsx', '.vue'], extensions: ['.js', '.jsx', '.vue'],
}, },