feat: update configprovider

antdv-demo

@@ -1 +1 @@
-Subproject commit adbfcd30aeb6c125defa35102ed659f1be03c672
+Subproject commit f3b049411f17e556d8795f40d41bfadb471ae630

components/_util/props-util.js

@@ -5,6 +5,23 @@ import classNames from 'classnames';
 //   return match ? match[1] : '';
 // }
 
+const onRE = /^on[^a-z]/;
+export const isOn = key => onRE.test(key);
+
+const splitAttrs = attrs => {
+  const allAttrs = Object.keys(attrs);
+  const eventAttrs = [];
+  const extraAttrs = [];
+  for (let i = 0, l = allAttrs.length; i < l; i++) {
+    const key = allAttrs[i];
+    if (isOn(key)) {
+      eventAttrs.push({ [key[2].toLowerCase() + key.slice(3)]: attrs[key] });
+    } else {
+      extraAttrs.push({ [key]: attrs[key] });
+    }
+  }
+  return { events: eventAttrs, extraAttrs };
+};
 const camelizeRE = /-(\w)/g;
 const camelize = str => {
   return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));
@@ -261,7 +278,7 @@ export function getComponentName(opts) {
 }
 
 export function isEmptyElement(c) {
-  return !(c.tag || (c.text && c.text.trim() !== ''));
+  return typeof c.type === 'symbol' && c.children.trim() === '';
 }
 
 export function isStringElement(c) {
@@ -309,6 +326,7 @@ function isValidElement(element) {
 }
 
 export {
+  splitAttrs,
   hasProp,
   filterProps,
   getOptionProps,

components/button/button.jsx

@@ -1,7 +1,8 @@
+import { inject } from 'vue';
 import Wave from '../_util/wave';
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
 import buttonTypes from './buttonTypes';
-import { filterEmpty, getListeners } from '../_util/props-util';
+import { filterEmpty } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 // eslint-disable-next-line no-console
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
@@ -12,8 +13,11 @@ export default {
   inheritAttrs: false,
   __ANT_BUTTON: true,
   props,
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+  setup() {
+    const configProvider = inject('configProvider') || ConfigConsumerProps;
+    return {
+      configProvider,
+    };
   },
   data() {
     return {
@@ -63,6 +67,7 @@ export default {
         block,
         icon,
         $slots,
+        $attrs,
       } = this;
       const getPrefixCls = this.configProvider().getPrefixCls;
       const prefixCls = getPrefixCls('btn', customizePrefixCls);
@@ -84,6 +89,7 @@ export default {
       const iconType = sLoading ? 'loading' : icon;
       const children = filterEmpty($slots.default());
       return {
+        [$attrs.class]: $attrs.class,
         [`${prefixCls}`]: true,
         [`${prefixCls}-${type}`]: type,
         [`${prefixCls}-${shape}`]: shape,
@@ -139,19 +145,14 @@ export default {
     const classes = this.getClasses();
     const { type, htmlType, icon, disabled, handleClick, sLoading, $slots, $attrs } = this;
     const buttonProps = {
-      attrs: {
-        ...$attrs,
-        disabled,
-      },
+      ...$attrs,
+      disabled,
       class: classes,
-      on: {
-        ...getListeners(this),
-        click: handleClick,
-      },
+      onClick: handleClick,
     };
     const iconNode = sLoading ? <LoadingOutlined /> : icon;
     const children = $slots.default();
-    const autoInsertSpace = this.configProvider().autoInsertSpaceInButton !== false;
+    const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
     const kids = children.map(child =>
       this.insertSpace(child, this.isNeedInserted() && autoInsertSpace),
     );

components/config-provider/index.jsx

@@ -1,6 +1,6 @@
-import Vue from 'vue';
+import { reactive, provide } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { filterEmpty, getComponentFromProp } from '../_util/props-util';
+import { getComponentFromProp } from '../_util/props-util';
 import defaultRenderEmpty from './renderEmpty';
 import Base from '../base';
 import LocaleProvider, { ANT_MARK } from '../locale-provider';
@@ -28,21 +28,21 @@ const ConfigProvider = {
     pageHeader: PropTypes.object,
     transformCellText: PropTypes.func,
   },
-  provide() {
-    const _self = this;
-    this._proxyVm = new Vue({
-      data() {
-        return {
-          ..._self.$props,
-          getPrefixCls: _self.getPrefixCls,
-          renderEmpty: _self.renderEmptyComponent,
-        };
-      },
-    });
-    return {
-      configProvider: this._proxyVm._data,
-    };
+  setup(props, context) {
+    provide(
+      'configProvider',
+      reactive({
+        ...props,
+        getPrefixCls: context.getPrefixCls,
+        renderEmpty: context.renderEmptyComponent,
+      }),
+    );
   },
+  // provide() {
+  //   return {
+  //     configProvider: this._proxyVm,
+  //   };
+  // },
   watch: {
     ...getWatch([
       'prefixCls',
@@ -67,18 +67,14 @@ const ConfigProvider = {
     renderProvider(legacyLocale) {
       return (
         <LocaleProvider locale={this.locale || legacyLocale} _ANT_MARK__={ANT_MARK}>
-          {this.$slots.default ? filterEmpty(this.$slots.default)[0] : null}
+          {this.$slots.default ? this.$slots.default() : null}
         </LocaleProvider>
       );
     },
   },
 
   render() {
-    return (
-      <LocaleReceiver
-        scopedSlots={{ default: (_, __, legacyLocale) => this.renderProvider(legacyLocale) }}
-      />
-    );
+    return <LocaleReceiver children={(_, __, legacyLocale) => this.renderProvider(legacyLocale)} />;
   },
 };
 

components/locale-provider/LocaleReceiver.jsx

@@ -36,8 +36,8 @@ export default {
   },
 
   render() {
-    const { $scopedSlots } = this;
-    const children = this.children || $scopedSlots.default;
+    const { $slots } = this;
+    const children = this.children || $slots.default;
     const { antLocale } = this.localeData;
     return children(this.getLocale(), this.getLocaleCode(), antLocale);
   },

components/locale-provider/index.jsx

@@ -69,7 +69,7 @@ const LocaleProvider = {
     changeConfirmLocale();
   },
   render() {
-    return this.$slots.default ? this.$slots.default[0] : null;
+    return this.$slots.default ? this.$slots.default() : null;
   },
 };
 

examples/App.vue

@@ -1,6 +1,15 @@
 <template>
-  <div>
-    <a-button type="primary" block @click="onClick">
+  <a-config-provider prefixCls="ss">
+    jdjj
+    <div>ddd</div>
+    <a-button
+      :class="['test']"
+      class="aaa"
+      style="display: inline"
+      block
+      @click="onClick"
+      :type="type"
+    >
       Primary
     </a-button>
     <a-button block>
@@ -15,12 +24,17 @@
     <a-button type="link" block>
       Link
     </a-button>
-  </div>
+  </a-config-provider>
 </template>
 
 <script>
 export default {
   name: 'Demo',
+  data() {
+    return {
+      type: 'primary',
+    };
+  },
   methods: {
     onClick() {
       console.log(1);

examples/index.js

@@ -2,8 +2,10 @@ import '@babel/polyfill';
 import { createApp } from 'vue';
 import App from './App.vue';
 import Button from 'ant-design-vue/button';
+import ConfigProvider from 'ant-design-vue/config-provider';
 import 'ant-design-vue/button/style/index.less';
 
 createApp(App)
   .use(Button)
+  .use(ConfigProvider)
   .mount('#app');