feat: update carousel

components/carousel/index.jsx

@@ -1,6 +1,7 @@
 import PropTypes from '../_util/vue-types';
 import debounce from 'lodash/debounce';
 import { initDefaultProps, getComponentFromProp, filterEmpty } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider';
 
 // matchMedia polyfill for
 // https://github.com/WickyNilliams/enquire.js/issues/82
@@ -70,13 +71,11 @@ const Carousel = {
   props: initDefaultProps(CarouselProps, {
     dots: true,
     arrows: false,
-    prefixCls: 'ant-carousel',
     draggable: false,
   }),
-
-  // innerSlider: any;
-
-  // private slick: any;
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
 
   beforeMount() {
     this.onWindowResized = debounce(this.onWindowResized, 500, {
@@ -137,7 +136,10 @@ const Carousel = {
       props.fade = true;
     }
 
-    let className = props.prefixCls;
+
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    let className = getPrefixCls('carousel', props.prefixCls);
+
     if (props.vertical) {
       className = `${className} ${className}-vertical`;
     }

components/cascader/index.jsx

@@ -19,6 +19,7 @@ import {
 import BaseMixin from '../_util/BaseMixin';
 import { cloneElement } from '../_util/vnode';
 import warning from '../_util/warning';
+import { ConfigConsumerProps } from '../config-provider';
 
 const CascaderOptionType = PropTypes.shape({
   value: PropTypes.string,
@@ -73,7 +74,7 @@ const CascaderProps = {
   /** 是否支持清除*/
   allowClear: PropTypes.bool.def(true),
   showSearch: PropTypes.oneOfType([Boolean, ShowSearchType]),
-  notFoundContent: PropTypes.any.def('Not Found'),
+  notFoundContent: PropTypes.an,
   loadData: PropTypes.func,
   /** 次级菜单的展开方式，可选 'click' 和 'hover' */
   expandTrigger: CascaderExpandTrigger,
@@ -81,8 +82,8 @@ const CascaderProps = {
   changeOnSelect: PropTypes.bool,
   /** 浮层可见变化时回调 */
   // onPopupVisibleChange?: (popupVisible: boolean) => void;
-  prefixCls: PropTypes.string.def('ant-cascader'),
-  inputPrefixCls: PropTypes.string.def('ant-input'),
+  prefixCls: PropTypes.string,
+  inputPrefixCls: PropTypes.string,
   getPopupContainer: PropTypes.func,
   popupVisible: PropTypes.bool,
   fieldNames: FieldNamesType,
@@ -285,7 +286,7 @@ const Cascader = {
       }
     },
 
-    generateFilteredOptions(prefixCls) {
+    generateFilteredOptions(prefixCls, renderEmpty) {
       const { showSearch, notFoundContent, $scopedSlots } = this;
       const names = getFilledFieldNames(this.$props);
       const {
@@ -335,7 +336,11 @@ const Cascader = {
         });
       }
       return [
-        { [names.label]: notFoundContent, [names.value]: 'ANT_CASCADER_NOT_FOUND', disabled: true },
+        {
+          [names.label]: notFoundContent || renderEmpty('Cascader'),
+          [names.value]: 'ANT_CASCADER_NOT_FOUND',
+          disabled: true,
+        },
       ];
     },
 
@@ -364,8 +369,8 @@ const Cascader = {
     suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
     const { getPopupContainer: getContextPopupContainer } = configProvider;
     const {
-      prefixCls,
-      inputPrefixCls,
+      prefixCls: customizePrefixCls,
+      inputPrefixCls: customizeInputPrefixCls,
       placeholder = localeData.placeholder,
       size,
       disabled,
@@ -374,6 +379,11 @@ const Cascader = {
       ...otherProps
     } = props;
 
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const renderEmpty = this.configProvider.renderEmpty || ((componentName) => ConfigConsumerProps.renderEmpty(componentName));
+    const prefixCls = getPrefixCls('cascader', customizePrefixCls);
+    const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
+
     const sizeCls = classNames({
       [`${inputPrefixCls}-lg`]: size === 'large',
       [`${inputPrefixCls}-sm`]: size === 'small',
@@ -423,7 +433,7 @@ const Cascader = {
 
     let options = props.options;
     if (inputValue) {
-      options = this.generateFilteredOptions(prefixCls);
+      options = this.generateFilteredOptions(prefixCls, renderEmpty);
     }
     // Dropdown menu should keep previous status until it is fully closed.
     if (!sPopupVisible) {
@@ -502,6 +512,7 @@ const Cascader = {
         ...props,
         getPopupContainer,
         options: options,
+        prefixCls,
         value: value,
         popupVisible: sPopupVisible,
         dropdownMenuColumnStyle: dropdownMenuColumnStyle,

components/cascader/style/index.js

@@ -2,5 +2,5 @@ import '../../style/index.less';
 import './index.less';
 
 // style dependencies
-// import '../../empty/style';
+import '../../empty/style';
 import '../../input/style';

components/config-provider/index.jsx

@@ -15,11 +15,17 @@ const ConfigProvider = {
     return {
       configProvider: {
         ...this.$props,
-        renderEmpty: this.$props.renderEmpty || this.$slots.renderEmpty || defaultRenderEmpty,
+        renderEmpty: this.renderEmptySlots,
         getPrefixCls: this.getPrefixCls,
       },
     };
   },
+  computed: {
+    renderEmptySlots() {
+      const customRender = (this.$scopedSlots && this.$scopedSlots['renderEmpty']) || this.$slots['renderEmpty'];
+      return this.$props.renderEmpty || customRender || defaultRenderEmpty;
+    },
+  },
   methods: {
     getPrefixCls(suffixCls, customizePrefixCls) {
       const { prefixCls = 'ant' } = this.$props;
@@ -37,6 +43,7 @@ export const ConfigConsumerProps = {
     if (customizePrefixCls) return customizePrefixCls;
     return `ant-${suffixCls}`;
   },
+  renderEmpty: defaultRenderEmpty,
 };
 
 /* istanbul ignore next */

components/empty/demo/config-provider.md

@@ -20,8 +20,8 @@ Use ConfigProvider set global Empty style.
 
     <a-divider />
     <a-config-provider>
-      <template v-if="customize">
-        <div slot="renderEmpty" style="textAlign: center">
+      <template v-slot:renderEmpty>
+        <div style="textAlign: center">
           <a-icon type="smile" style="fontSize: 20px" />
           <p>Data Not Found</p>
         </div>
@@ -54,7 +54,7 @@ Use ConfigProvider set global Empty style.
 export default {
   data() {
     return {
-      customize: false,
+      customize: true,
       style: {width: '200px'},
       columns: [
         {