feat(grid): css in js (#282)

Co-authored-by: Lecong Zhang <50313260+tskirby@users.noreply.github.com>

src/Form/src/FormItemCol.vue

@@ -1,6 +1,6 @@
 <script>
 import NFormItem from './FormItem'
-import NCol from '../../Grid/src/Col'
+import NCol from '../../grid/src/Col'
 
 export default {
   name: 'NFormItemCol',

src/Form/src/FormItemRow.vue

@@ -1,6 +1,6 @@
 <script>
 import NFormItemCol from './FormItemCol'
-import NRow from '../../Grid/src/Row'
+import NRow from '../../grid/src/Row'
 import NFormItem from './FormItem'
 
 export default {

src/Grid/index.js

@@ -1,12 +0,0 @@
-/* istanbul ignore file */
-import Row from './src/Row.vue'
-import Col from './src/Col.vue'
-
-const Grid = {
-  install: function (Vue) {
-    Vue.component(Row.name, Row)
-    Vue.component(Col.name, Col)
-  }
-}
-
-export default Grid

src/_styles/index.scss

@@ -11,7 +11,7 @@
 @import './Descriptions.scss';
 // @import './Radio.scss';
 @import './Form.scss';
-@import './Grid.scss';
+// @import './Grid.scss';
 @import './Layout.scss';
 @import './Message.scss';
 @import './Notification.scss';

src/grid/index.js

@@ -0,0 +1,12 @@
+/* istanbul ignore file */
+import Row from './src/Row.vue'
+import Col from './src/Col.vue'
+
+const Grid = {
+  install: function (Vue, naive) {
+    Vue.component(naive.componentPrefix + Row.name, Row)
+    Vue.component(naive.componentPrefix + Col.name, Col)
+  }
+}
+
+export default Grid

src/grid/src/Col.vue

@@ -25,6 +25,8 @@
 
 <script>
 import formatLength from '../../_utils/css/formatLength'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles/col.js'
 
 export default {
   inject: {
@@ -32,7 +34,10 @@ export default {
       default: null
     }
   },
-  name: 'NCol',
+  name: 'Col',
+  mixins: [
+    usecssr(styles)
+  ],
   props: {
     span: {
       type: [String, Number],

src/grid/src/Row.vue

@@ -17,6 +17,8 @@
 
 <script>
 import formatLength from '../../_utils/css/formatLength'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles/row.js'
 
 export default {
   provide () {
@@ -24,7 +26,10 @@ export default {
       NRow: this
     }
   },
-  name: 'NRow',
+  name: 'Row',
+  mixins: [
+    usecssr(styles)
+  ],
   props: {
     gutter: {
       type: [Array, Number, String],

src/grid/src/styles/col-base.cssr.js

@@ -0,0 +1,39 @@
+import { c, cB, cE, cM } from '../../../_utils/cssr'
+
+export default c([
+  ({ props }) => {
+    const modifierItems = Array.apply(null, { length: 24 }).map((_, index) => {
+      const _index = index + 1
+      const percent = (1 / 24 * _index * 100).toFixed(2) + '%'
+      return [
+        cM(`${_index}-span`, {
+          width: percent
+        }),
+        cM(`${_index}-offset`, {
+          marginLeft: percent
+        }),
+        cM(`${_index}-push`, {
+          left: percent
+        }),
+        cM(`${_index}-pull`, {
+          right: percent
+        })
+      ]
+    })
+    return cB('col', {
+      verticalAlign: 'top',
+      boxSizing: 'border-box',
+      display: 'inline-block',
+      position: 'relative',
+      zIndex: 'auto'
+    }, [
+      cE('box', {
+        position: 'relative',
+        zIndex: 'auto',
+        width: '100%',
+        height: '100%'
+      }),
+      ...modifierItems
+    ])
+  }
+])

src/grid/src/styles/col.js

@@ -0,0 +1,7 @@
+import baseStyle from './col-base.cssr.js'
+
+export default [
+  {
+    CNode: baseStyle
+  }
+]

src/grid/src/styles/row-base.cssr.js

@@ -0,0 +1,14 @@
+import { c, cB, cM } from '../../../_utils/cssr'
+
+export default c([
+  ({ props }) => {
+    return cB('row', {
+      width: '100%'
+    },
+    [
+      cM('flex', {
+        display: 'flex'
+      })
+    ])
+  }
+])

src/grid/src/styles/row.js

@@ -0,0 +1,7 @@
+import baseStyle from './row-base.cssr.js'
+
+export default [
+  {
+    CNode: baseStyle
+  }
+]

src/index.js

@@ -28,7 +28,7 @@ import Element from './element'
 import Empty from './empty'
 import Form from './Form'
 import GradientText from './gradient-text'
-import Grid from './Grid'
+import Grid from './grid'
 import Icon from './icon'
 import Input from './input'
 import InputGroup from './input-group'