fix: some component not support css scoped

Author: tangjinzhou

antdv-demo

@@ -48,4 +48,13 @@ function resolvePropValue(options, props, key, value) {
   return value;
 }
 
+export function getDataAndAriaProps(props) {
+  return Object.keys(props).reduce((memo, key) => {
+    if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-') {
+      memo[key] = props[key];
+    }
+    return memo;
+  }, {});
+}
+
 export { isOn, cacheStringFunction, camelize, hyphenate, capitalize, resolvePropValue };

components/_util/util.js

@@ -272,7 +272,6 @@ export default {
       $slots,
       getContainer,
     } = this;
-
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('anchor', customizePrefixCls);
     this._sPrefixCls = prefixCls;
@@ -281,7 +280,7 @@ export default {
       visible: activeLink,
     });
 
-    const wrapperClass = classNames(this.$attrs.class, this.wrapperClass, `${prefixCls}-wrapper`);
+    const wrapperClass = classNames(this.wrapperClass, `${prefixCls}-wrapper`);
 
     const anchorClass = classNames(prefixCls, {
       fixed: !affix && !showInkInFixed,
@@ -290,9 +289,7 @@ export default {
     const wrapperStyle = {
       maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh',
       ...this.wrapperStyle,
-      ...this.$attrs.style,
     };
-
     const anchorContent = (
       <div class={wrapperClass} style={wrapperStyle}>
         <div class={anchorClass}>
@@ -307,7 +304,7 @@ export default {
     return !affix ? (
       anchorContent
     ) : (
-      <Affix offsetTop={offsetTop} target={getContainer}>
+      <Affix {...this.$attrs} offsetTop={offsetTop} target={getContainer}>
         {anchorContent}
       </Affix>
     );

components/anchor/Anchor.jsx

@@ -23,6 +23,7 @@ export default {
         registerLink: noop,
         unregisterLink: noop,
         scrollTo: noop,
+        $data: {},
       }),
       antAnchorContext: inject('antAnchorContext', {}),
       configProvider: inject('configProvider', ConfigConsumerProps),
@@ -62,7 +63,7 @@ export default {
     const prefixCls = getPrefixCls('anchor', customizePrefixCls);
 
     const title = getComponent(this, 'title');
-    const active = this.antAnchor.activeLink === href;
+    const active = this.antAnchor.$data.activeLink === href;
     const wrapperClassName = classNames(`${prefixCls}-link`, {
       [`${prefixCls}-link-active`]: active,
     });

components/anchor/AnchorLink.jsx

@@ -153,7 +153,7 @@ const Carousel = {
     if (props.effect === 'fade') {
       props.fade = true;
     }
-
+    const { class: cls, style, ...restAttrs } = this.$attrs;
     const getPrefixCls = this.configProvider.getPrefixCls;
     let className = getPrefixCls('carousel', props.prefixCls);
     const dotsClass = 'slick-dots';
@@ -162,17 +162,19 @@ const Carousel = {
     props.dotsClass = classNames(`${dotsClass}`, `${dotsClass}-${dotPosition || 'bottom'}`, {
       [`${props.dotsClass}`]: !!props.dotsClass,
     });
-    if (props.vertical) {
-      className = `${className} ${className}-vertical`;
-    }
+    className = classNames({
+      [cls]: !!cls,
+      [className]: !!className,
+      [`${className}-vertical`]: props.vertical,
+    });
     const SlickCarouselProps = {
       ...props,
-      ...this.$attrs,
+      ...restAttrs,
       nextArrow: getComponent(this, 'nextArrow'),
       prevArrow: getComponent(this, 'prevArrow'),
     };
     return (
-      <div class={className}>
+      <div class={className} style={style}>
         <SlickCarousel ref={this.saveSlick} {...SlickCarouselProps} vSlots={$slots}></SlickCarousel>
       </div>
     );

components/carousel/index.jsx

@@ -13,6 +13,7 @@ import { hasProp, getOptionProps, initDefaultProps, getComponent } from '../_uti
 import BaseMixin from '../_util/BaseMixin';
 import { formatDate } from './utils';
 import InputIcon from './InputIcon';
+import { getDataAndAriaProps } from '../_util/util';
 
 function getShowDateFromValue(value, mode) {
   const [start, end] = value;
@@ -413,6 +414,7 @@ export default {
         onBlur={onBlur}
         onMouseenter={this.onMouseEnter}
         onMouseleave={this.onMouseLeave}
+        {...getDataAndAriaProps(props)}
       >
         <VcDatePicker {...vcDatePickerProps} vSlots={{ default: input, ...$slots }}></VcDatePicker>
       </span>

components/date-picker/RangePicker.jsx

@@ -10,6 +10,7 @@ import BaseMixin from '../_util/BaseMixin';
 import { WeekPickerProps } from './interface';
 import interopDefault from '../_util/interopDefault';
 import InputIcon from './InputIcon';
+import { getDataAndAriaProps } from '../_util/util';
 
 function formatValue(value, format) {
   return (value && value.format(format)) || '';
@@ -207,7 +208,12 @@ export default {
       style: popupStyle,
     };
     return (
-      <span class={classNames(className, pickerClass)} style={style} id={id}>
+      <span
+        class={classNames(className, pickerClass)}
+        style={style}
+        id={id}
+        {...getDataAndAriaProps(props)}
+      >
         <VcDatePicker {...vcDatePickerProps} vSlots={{ default: input, ...$slots }}></VcDatePicker>
       </span>
     );

components/date-picker/WeekPicker.jsx

@@ -18,6 +18,7 @@ import {
 } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
 import { formatDate } from './utils';
+import { getDataAndAriaProps } from '../_util/util';
 
 // export const PickerProps = {
 //   value?: moment.Moment;
@@ -244,6 +245,7 @@ export default function createPicker(TheCalendar, props) {
           // tabindex={props.disabled ? -1 : 0}
           // onFocus={focus}
           // onBlur={blur}
+          {...getDataAndAriaProps(this.$attrs)}
           onMouseenter={this.onMouseEnter}
           onMouseleave={this.onMouseLeave}
         >

components/date-picker/createPicker.js

@@ -213,7 +213,7 @@ const Drawer = {
     const handler = getComponent(this, 'handle') || false;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('drawer', customizePrefixCls);
-
+    const { class: className } = this.$attrs;
     const vcDrawerProps = {
       ...this.$attrs,
       ...omit(rest, [
@@ -241,6 +241,7 @@ const Drawer = {
       showMask: mask,
       placement,
       class: classnames({
+        [className]: !!className,
         [wrapClassName]: !!wrapClassName,
         [haveMask]: !!haveMask,
       }),

components/drawer/index.jsx

@@ -9,6 +9,7 @@ import {
 import { cloneElement } from '../../_util/vnode';
 import openAnimationFactory from './openAnimationFactory';
 import { collapseProps } from './commonProps';
+import { getDataAndAriaProps } from '../../_util/util';
 
 function _toArray(activeKey) {
   let currentActiveKey = activeKey;
@@ -131,7 +132,12 @@ export default {
       [className]: className,
     };
     return (
-      <div class={collapseClassName} style={style} role={accordion ? 'tablist' : null}>
+      <div
+        class={collapseClassName}
+        {...getDataAndAriaProps(this.$attrs)}
+        style={style}
+        role={accordion ? 'tablist' : null}
+      >
         {this.getItems()}
       </div>
     );

components/vc-collapse/src/Collapse.jsx

@@ -381,7 +381,7 @@ const Drawer = {
         keyboard,
         maskClosable,
       } = this.$props;
-      const { class: cls, style } = this.$attrs;
+      const { class: cls, style, ...restAttrs } = this.$attrs;
       const children = getSlot(this);
       const wrapperClassname = classnames(prefixCls, {
         [`${prefixCls}-${placement}`]: true,
@@ -424,6 +424,7 @@ const Drawer = {
         });
       }
       const domContProps = {
+        ...restAttrs,
         class: wrapperClassname,
         onTransitionend: this.onWrapperTransitionEnd,
         onKeydown: open && keyboard ? this.onKeyDown : noop,

components/vc-drawer/src/Drawer.js

@@ -48,6 +48,7 @@ import { SelectPropTypes } from './PropTypes';
 import contains from '../vc-util/Dom/contains';
 import { isIE, isEdge } from '../_util/env';
 import isValid from '../_util/isValid';
+import { getDataAndAriaProps } from '../_util/util';
 
 const SELECT_EMPTY_VALUE_KEY = 'RC_SELECT_EMPTY_VALUE_KEY';
 
@@ -1580,6 +1581,7 @@ const Select = {
         ariaId={this.$data._ariaId}
       >
         <div
+          {...getDataAndAriaProps(this.$attrs)}
           ref={chaining(this.saveRootRef, this.saveSelectionRef)}
           style={style}
           class={classnames(rootCls)}

components/vc-select/Select.jsx

@@ -1,19 +1,60 @@
 <template>
   <div>
-    <demo />
+    <a-affix class="red"></a-affix>
+    <a-alert class="red"></a-alert>
+    <a-anchor class="red">
+      <a-anchor-link class="red" href="#components-anchor-demo-basic" title="Basic demo" />
+    </a-anchor>
+    <a-auto-complete :dataSource="[]" class="red"></a-auto-complete>
+    <a-avatar class="red"></a-avatar>
+    <a-back-top class="red">jjj</a-back-top>
+    <a-badge class="red"></a-badge>
+    <a-breadcrumb class="red">
+      <a-breadcrumb-item class="red">Home</a-breadcrumb-item>
+    </a-breadcrumb>
+    <a-button class="red"></a-button>
+    <a-calendar class="red"></a-calendar>
+    <a-card class="red"></a-card>
+    <a-carousel class="red">
+      <div>
+        <h3>1</h3>
+      </div>
+    </a-carousel>
+    <a-checkbox class="red">Checkbox</a-checkbox>
+    <a-checkbox-group class="red"></a-checkbox-group>
+    <a-collapse class="red">
+      <a-collapse-panel class="red" key="1" header="This is panel header 1">
+        <p>{{ text }}</p>
+      </a-collapse-panel>
+      <a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
+        <p>{{ text }}</p>
+      </a-collapse-panel>
+      <a-collapse-panel key="3" header="This is panel header 3" disabled>
+        <p>{{ text }}</p>
+      </a-collapse-panel>
+    </a-collapse>
+    <a-date-picker class="red"></a-date-picker>
+    <br />
+    <a-month-picker class="red" placeholder="Select month" />
+    <br />
+    <a-range-picker class="red" />
+    <br />
+    <a-week-picker class="red" placeholder="Select week" />
+
+    <a-descriptions title="User Info" class="red">
+      <a-descriptions-item label="Address" class="red"
+        >No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</a-descriptions-item
+      >
+    </a-descriptions>
+    <a-drawer class="red" style="margin-top: 10px"></a-drawer>>
+    <a-dropdown class="red">
+      <a>ssss</a>
+    </a-dropdown>
+    <a-dropdown-button class="red"></a-dropdown-button>
   </div>
 </template>
-<script>
-import demo from '../antdv-demo/docs/select/demo/custom-dropdown-menu';
-export default {
-  components: {
-    demo,
-  },
-  data() {
-    return {
-      visible: true,
-      current: ['mail'],
-    };
-  },
-};
-</script>
+<style scoped>
+.red {
+  color: red;
+}</style
+>>