feat: update layout

components/input-number/index.jsx

@@ -49,7 +49,7 @@ const InputNumber = {
   render() {
     const { prefixCls: customizePrefixCls, size, ...others } = getOptionProps(this);
     const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
-    const prefixCls = getPrefixCls('input-group', customizePrefixCls);
+    const prefixCls = getPrefixCls('input-number', customizePrefixCls);
 
     const inputNumberClass = classNames({
       [`${prefixCls}-lg`]: size === 'large',

components/layout/Sider.jsx

@@ -23,6 +23,7 @@ import {
 } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import isNumeric from '../_util/isNumeric';
+import { ConfigConsumerProps } from '../config-provider';
 
 const dimensionMap = {
   xs: '480px',
@@ -76,14 +77,12 @@ export default {
     event: 'collapse',
   },
   props: initDefaultProps(SiderProps, {
-    prefixCls: 'ant-layout-sider',
     collapsible: false,
     defaultCollapsed: false,
     reverseArrow: false,
     width: 200,
     collapsedWidth: 80,
   }),
-
   data() {
     this.uniqueId = generateId('ant-sider-');
     let matchMedia;
@@ -113,6 +112,7 @@ export default {
   },
   inject: {
     siderHook: { default: () => ({}) },
+    configProvider: { default: () => ({}) },
   },
   // getChildContext() {
   //   return {
@@ -179,9 +179,10 @@ export default {
   },
 
   render() {
-    const { prefixCls, theme, collapsible, reverseArrow, width, collapsedWidth } = getOptionProps(
-      this,
-    );
+    const { prefixCls: customizePrefixCls, theme, collapsible, reverseArrow, width, collapsedWidth } = getOptionProps(this);
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
+
     const trigger = getComponentFromProp(this, 'trigger');
     const rawWidth = this.sCollapsed ? collapsedWidth : width;
     // use "px" as fallback unit for width
@@ -189,7 +190,9 @@ export default {
     // special trigger when collapsedWidth == 0
     const zeroWidthTrigger =
       parseFloat(String(collapsedWidth || 0)) === 0 ? (
-        <span onClick={this.toggle} class={`${prefixCls}-zero-width-trigger`}>
+        <span onClick={this.toggle} class={`${prefixCls}-zero-width-trigger ${prefixCls}-zero-width-trigger-${
+          reverseArrow ? 'right' : 'left'
+        }`}>
           <Icon type="bars" />
         </span>
       ) : null;

components/layout/demo/index.vue

@@ -104,7 +104,7 @@ The first level navigation is inclined left near a logo, and the secondary menu
 
 - **Enlarge the size of the font**
 
-  \`12px\`、\`14px\` is a standard font size of navigations，\`14px\` is used for the first and the second level of the navigation. You can choose an appropriate font size regarding the level of your navigation.
+  \`12px\`, \`14px\` is a standard font size of navigations, \`14px\` is used for the first and the second level of the navigation. You can choose an appropriate font size regarding the level of your navigation.
 
 ## Component Overview
 

components/layout/layout.jsx

@@ -1,6 +1,7 @@
 import PropTypes from '../_util/vue-types';
 import classNames from 'classnames';
 import { getOptionProps } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider';
 
 export const BasicProps = {
   prefixCls: PropTypes.string,
@@ -12,8 +13,15 @@ function generator(props, name) {
     return {
       name,
       props: BasicComponent.props,
+      inject: {
+        configProvider: { default: () => ({}) },
+      },
       render() {
-        const { prefixCls } = props;
+        const { suffixCls } = props;
+        const { prefixCls: customizePrefixCls } = this.$props;
+        const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+        const prefixCls = getPrefixCls(suffixCls, customizePrefixCls);
+
         const basicComponentProps = {
           props: {
             prefixCls,
@@ -73,28 +81,28 @@ const BasicLayout = {
 
 const Layout = generator(
   {
-    prefixCls: 'ant-layout',
+    suffixCls: 'layout',
   },
   'ALayout',
 )(BasicLayout);
 
 const Header = generator(
   {
-    prefixCls: 'ant-layout-header',
+    suffixCls: 'layout-header',
   },
   'ALayoutHeader',
 )(Basic);
 
 const Footer = generator(
   {
-    prefixCls: 'ant-layout-footer',
+    suffixCls: 'layout-footer',
   },
   'ALayoutFooter',
 )(Basic);
 
 const Content = generator(
   {
-    prefixCls: 'ant-layout-content',
+    suffixCls: 'layout-content',
   },
   'ALayoutContent',
 )(Basic);