refactor: layout、col、row

src/packages/col/index.scss

@@ -2,6 +2,15 @@
   float: left;
   box-sizing: border-box;
   word-break: break-all;
+
+  &-gutter {
+    &:last-child {
+      padding-right: 0 !important;
+    }
+    &:first-child {
+      padding-left: 0 !important;
+    }
+  }
 }
 
 @for $i from 1 through 24 {

src/packages/col/index.vue

@@ -4,7 +4,7 @@
   </view>
 </template>
 <script lang="ts">
-import { reactive, computed, inject } from 'vue';
+import { computed, inject } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('col');
 
@@ -19,20 +19,21 @@ export default create({
       default: '0'
     }
   },
-  setup(props, { emit, slots }) {
+  setup(props) {
     const prefixCls = componentName;
-    const gutter = inject('gutter');
+    const gutter = inject('gutter') as number;
     const classes = computed(() => {
       return {
         [prefixCls]: true,
+        [prefixCls + '-gutter']: gutter,
         ['nut-col-' + props.span]: true,
         ['nut-col-offset-' + props.offset]: true
       };
     });
     const style = computed(() => {
       return {
-        paddingLeft: gutter + 'px',
-        paddingRight: gutter + 'px'
+        paddingLeft: gutter / 2 + 'px',
+        paddingRight: gutter / 2 + 'px'
       };
     });
     return {

src/packages/layout/demo.vue

@@ -57,7 +57,7 @@
     </div>
     <h2>Flex布局</h2>
     <div class="box-item">
-      <nut-row type="flex" flexWrap="nowrap">
+      <nut-row type="flex" wrap="nowrap">
         <nut-col :span="6">
           <div class="flex-content">span:6</div>
         </nut-col>

src/packages/layout/doc.md

@@ -8,305 +8,130 @@
 
 ``` javascript
 import { createApp } from 'vue';
-import { Row, Col } from '@nutui/nutui';
+import { Layout } from '@nutui/nutui';
 
 const app = createApp();
-app.use(Row);
-app.use(Col);
+app.use(Layout);
 ```
 
 ## 代码演示
 
-### 基本用法
+### 基础用法
 
 ```html
 <nut-row>
-    <nut-col :span="12">
-        <div class="flex-content">span:12</div>
-    </nut-col>
-    <nut-col :span="12">
-        <div class="flex-content flex-content-light">span:12</div>
-    </nut-col>
+  <nut-col :span="24">
+    <div class="flex-content">span:24</div>
+  </nut-col>
 </nut-row>
 <nut-row>
-    <nut-col :span="8">
-        <div class="flex-content">span:8</div>
-    </nut-col>
-    <nut-col :span="8">
-        <div class="flex-content flex-content-light">span:8</div>
-    </nut-col>
-    <nut-col :span="8">
-        <div class="flex-content">span:8</div>
-    </nut-col>
+  <nut-col :span="12">
+    <div class="flex-content">span:12</div>
+  </nut-col>
+  <nut-col :span="12">
+    <div class="flex-content flex-content-light">span:12</div>
+  </nut-col>
 </nut-row>
 <nut-row>
-    <nut-col :span="6">
-        <div class="flex-content">span:6</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">span:6</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content">span:6</div>
-        </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">span:6</div>
-    </nut-col>
+  <nut-col :span="8">
+    <div class="flex-content">span:8</div>
+  </nut-col>
+  <nut-col :span="8">
+    <div class="flex-content flex-content-light">span:8</div>
+  </nut-col>
+  <nut-col :span="8">
+    <div class="flex-content">span:8</div>
+  </nut-col>
 </nut-row>
 <nut-row>
-    <nut-col :span="4">
-        <div class="flex-content">span:4</div>
-    </nut-col>
-    <nut-col :span="4">
-        <div class="flex-content flex-content-light">span:4</div>
-    </nut-col>
-    <nut-col :span="4">
-        <div class="flex-content">span:4</div>
-    </nut-col>
-    <nut-col :span="4">
-        <div class="flex-content flex-content-light">span:4</div>
-    </nut-col>
-    <nut-col :span="4">
-        <div class="flex-content">span:4</div>
-    </nut-col>
-    <nut-col :span="4">
-        <div class="flex-content flex-content-light">span:4</div>
-    </nut-col>
+  <nut-col :span="6">
+    <div class="flex-content">span:6</div>
+  </nut-col>
+  <nut-col :span="6">
+    <div class="flex-content flex-content-light">span:6</div>
+  </nut-col>
+  <nut-col :span="6">
+    <div class="flex-content">span:6</div>
+  </nut-col>
+  <nut-col :span="6">
+    <div class="flex-content">span:6</div>
+  </nut-col>
 </nut-row>
-
 ```
 
 ### 设置元素间距
 
 ```html
 <nut-row :gutter="10">
-    <nut-col :span="6">
-        <div class="flex-content">span:6</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">span:6</div>
+    <nut-col :span="8">
+        <div class="flex-content">span:8</div>
     </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content">span:6</div>
+    <nut-col :span="8">
+        <div class="flex-content flex-content-light">span:8</div>
     </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">span:6</div>
+    <nut-col :span="8">
+        <div class="flex-content">span:8</div>
     </nut-col>
-</nut-row>
-            
+</nut-row>   
 ```
-
 ### Flex布局
 
-#### wrap（是否换行）
-
 ```html
-<nut-row type="flex" flexWrap="nowrap" :gutter="10">
-    <nut-col :span="6">
-        <div class="flex-content">1</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">2</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content">3</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">4</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content">5</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">6</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content">7</div>
-    </nut-col>
-</nut-row>
-<nut-row type="flex" flexWrap="wrap" :gutter="10">
-    <nut-col :span="6">
-        <div class="flex-content">1</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">2</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content">3</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">4</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content">5</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">6</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content">7</div>
-    </nut-col>
-</nut-row>
-<nut-row type="flex" flexWrap="reverse" :gutter="10">
-    <nut-col :span="6">
-        <div class="flex-content">1</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">2</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content">3</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">4</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content">5</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">6</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content">7</div>
-    </nut-col>
-</nut-row>
-
-```
-
-#### justify（主轴方向）
-
-```html
-<nut-row type="flex">
-    <nut-col :span="6">
-        <div class="flex-content">start</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">start</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content">start</div>
-    </nut-col>
+<nut-row type="flex" wrap="nowrap">
+  <nut-col :span="6">
+    <div class="flex-content">span:6</div>
+  </nut-col>
+  <nut-col :span="6">
+    <div class="flex-content flex-content-light">span:6</div>
+  </nut-col>
+  <nut-col :span="6">
+    <div class="flex-content">span:6</div>
+  </nut-col>
 </nut-row>
 <nut-row type="flex" justify="center">
-    <nut-col :span="6">
-        <div class="flex-content">center</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">center</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content">center</div>
-    </nut-col>
+  <nut-col :span="6">
+    <div class="flex-content">span:6</div>
+  </nut-col>
+  <nut-col :span="6">
+    <div class="flex-content flex-content-light">span:6</div>
+  </nut-col>
+  <nut-col :span="6">
+    <div class="flex-content">span:6</div>
+  </nut-col>
 </nut-row>
 <nut-row type="flex" justify="end">
-    <nut-col :span="6">
-        <div class="flex-content">end</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">end</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content">end</div>
-    </nut-col>
+  <nut-col :span="6">
+    <div class="flex-content">span:6</div>
+  </nut-col>
+  <nut-col :span="6">
+    <div class="flex-content flex-content-light">span:6</div>
+  </nut-col>
+  <nut-col :span="6">
+    <div class="flex-content">span:6</div>
+  </nut-col>
 </nut-row>
 <nut-row type="flex" justify="space-between">
-    <nut-col :span="6">
-        <div class="flex-content">between</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">between</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content">between</div>
-    </nut-col>
+  <nut-col :span="6">
+    <div class="flex-content">span:6</div>
+  </nut-col>
+  <nut-col :span="6">
+    <div class="flex-content flex-content-light">span:6</div>
+  </nut-col>
+  <nut-col :span="6">
+    <div class="flex-content">span:6</div>
+  </nut-col>
 </nut-row>
 <nut-row type="flex" justify="space-around">
-    <nut-col :span="6">
-        <div class="flex-content">around</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">around</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content">around</div>
-    </nut-col>
-</nut-row>
-
-```
-
-#### align（侧轴方向）
-
-```html
-<nut-row type="flex" gutter="10" align="flex-start">
-    <nut-col :span="6">
-        <div class="flex-content flex-content-height">1</div>
-    </nut-col>
-    <nut-col :span="12">
-        <div class="flex-content flex-content-light">顶部对齐 - flex-start</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-height">3</div>
-    </nut-col>
-</nut-row>
-<nut-row type="flex" gutter="10" align="center">
-    <nut-col :span="6">
-        <div class="flex-content flex-content-height">1</div>
-    </nut-col>
-    <nut-col :span="12">
-        <div class="flex-content flex-content-light">居中对齐 - center</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-height">3</div>
-    </nut-col>
-</nut-row>
-<nut-row type="flex" gutter="10" align="flex-end">
-    <nut-col :span="6">
-        <div class="flex-content flex-content-height">1</div>
-    </nut-col>
-    <nut-col :span="12">
-        <div class="flex-content flex-content-light">底部对齐 - flex-end</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-height">3</div>
-    </nut-col>
+  <nut-col :span="6">
+    <div class="flex-content">span:6</div>
+  </nut-col>
+  <nut-col :span="6">
+    <div class="flex-content flex-content-light">span:6</div>
+  </nut-col>
+  <nut-col :span="6">
+    <div class="flex-content">span:6</div>
+  </nut-col>
 </nut-row>
-
-```
-
-### 分栏偏移
-
-```html
-<nut-row type="flex">
-    <nut-col :offset="6" span="6">
-        <div class="flex-content">offset:6</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content flex-content-light">span:6</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content">span:6</div>
-    </nut-col>
-</nut-row>
-<nut-row type="flex">
-    <nut-col span="6">
-        <div class="flex-content">span:6</div>
-    </nut-col>
-    <nut-col :offset="8" :span="6">
-        <div class="flex-content flex-content-light">offset:8</div>
-    </nut-col>
-    <nut-col :span="6">
-        <div class="flex-content">span:6</div>
-    </nut-col>
-</nut-row>
-<nut-row type="flex">
-    <nut-col span="6" :offset="6">
-        <div class="flex-content">offset:6</div>
-    </nut-col>
-    <nut-col :span="6" :offset="6">
-        <div class="flex-content">offset:6</div>
-    </nut-col>
-</nut-row>
-
 ```
 
 ## Prop

src/packages/layout/index.vue

@@ -4,10 +4,7 @@ const { create } = createComponent('layout');
 import Row from '@/packages/row/index.vue';
 import Col from '@/packages/col/index.vue';
 export default create({
-  components: {
-    [Row.name]: Row,
-    [Col.name]: Col
-  }
+  children: [Row, Col]
 });
 </script>
 

src/packages/row/index.scss

@@ -1,4 +1,5 @@
 .nut-row {
+  width: 100%;
   &:after {
     display: block;
     height: 0;
@@ -6,44 +7,45 @@
     visibility: hidden;
     content: '';
   }
-}
-.nut-row-flex {
-  display: flex;
-  &:after {
-    display: none;
+
+  &-flex {
+    display: flex;
+    &:after {
+      display: none;
+    }
+    .nut-col {
+      float: none;
+    }
   }
-  .nut-col {
-    float: none;
+  &-justify-center {
+    justify-content: center;
+  }
+  &-justify-end {
+    justify-content: flex-end;
+  }
+  &-justify-space-between {
+    justify-content: space-between;
+    align-items: center;
+  }
+  &-justify-space-around {
+    justify-content: space-around;
+  }
+  &-align-flex-start {
+    align-items: flex-start;
+  }
+  &-align-center {
+    align-items: center;
+  }
+  &-align-flex-end {
+    align-items: flex-end;
+  }
+  &-flex-wrap {
+    flex-wrap: wrap;
+  }
+  &-flex-nowrap {
+    flex-wrap: nowrap;
+  }
+  &-flex-reverse {
+    flex-wrap: wrap-reverse;
   }
-}
-.nut-row-justify-center {
-  justify-content: center;
-}
-.nut-row-justify-end {
-  justify-content: flex-end;
-}
-.nut-row-justify-space-between {
-  justify-content: space-between;
-  align-items: center;
-}
-.nut-row-justify-space-around {
-  justify-content: space-around;
-}
-.nut-row-align-flex-start {
-  align-items: flex-start;
-}
-.nut-row-align-center {
-  align-items: center;
-}
-.nut-row-align-flex-end {
-  align-items: flex-end;
-}
-.nut-row-flex-wrap {
-  flex-wrap: wrap;
-}
-.nut-row-flex-nowrap {
-  flex-wrap: nowrap;
-}
-.nut-row-flex-reverse {
-  flex-wrap: wrap-reverse;
 }

src/packages/row/index.vue

@@ -4,7 +4,7 @@
   </view>
 </template>
 <script lang="ts">
-import { computed, provide } from 'vue';
+import { provide } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('row');
 
@@ -26,7 +26,7 @@ export default create({
       type: String,
       default: 'flex-start'
     },
-    flexWrap: {
+    wrap: {
       type: String,
       default: 'nowrap'
     }
@@ -46,7 +46,7 @@ export default create({
               ${getClass('', props.type)}
               ${getClass('justify', props.justify)}
               ${getClass('align', props.align)}
-              ${getClass('flex', props.flexWrap)}
+              ${getClass('flex', props.wrap)}
               ${prefixCls}
               `;
     };