refactor(form): clean cssr codes

src/form/src/Form.vue

@@ -11,8 +11,6 @@
 </template>
 <script>
 import cloneDeep from 'lodash-es/cloneDeep'
-import usecssr from '../../_mixins/usecssr'
-import styles from './styles'
 
 export default {
   name: 'Form',
@@ -21,9 +19,6 @@ export default {
       NForm: this
     }
   },
-  mixins: [
-    usecssr(styles)
-  ],
   props: {
     inline: {
       type: Boolean,
@@ -59,7 +54,7 @@ export default {
       validator (value) {
         return ['small', 'medium', 'large'].includes(value)
       },
-      default: 'medium'
+      default: null
     },
     onSubmit: {
       type: Function,

src/form/src/FormItem.vue

@@ -2,7 +2,7 @@
   <div
     class="n-form-item"
     :class="{
-      [`n-form-item--${syntheticSize}-size`]: true,
+      [`n-form-item--${renderedSize}-size`]: true,
       [`n-${syntheticTheme}-theme`]: syntheticTheme,
       [`n-form-item--${syntheticLabelPlacement}-labelled`]: syntheticLabelPlacement,
       [`n-form-item--${syntheticLabelAlign}-label-aligned`]: syntheticLabelAlign,
@@ -157,7 +157,7 @@ export default {
       validator (value) {
         return ['small', 'medium', 'large'].includes(value)
       },
-      default: 'medium'
+      default: null
     },
     ignorePathChange: {
       type: Boolean,
@@ -209,6 +209,9 @@ export default {
       }
       return null
     },
+    renderedSize () {
+      return this.syntheticSize || 'medium'
+    },
     syntheticValidationStatus () {
       if (this.validationStatus !== null) return this.validationStatus
       if (this.validationErrored) return 'error'

src/form/src/styles/index.js

@@ -8,8 +8,8 @@ export default [
     CNode: baseStyle
   },
   {
-    key: 'size',
-    watch: ['size', 'syntheticTheme', 'syntheticSize'],
+    key: 'renderedSize',
+    watch: ['syntheticTheme', 'renderedSize'],
     CNode: sizeStyle
   }
 ]

src/form/src/styles/themed-base.cssr.js

@@ -4,12 +4,10 @@ import fadeDownTranstion from '../../../styles/_transitions/fade-down'
 export default c([
   ({ props }) => {
     const {
-      itemLabelTextColor,
-      itemRequiredAsterisk,
-      itemFeedbackTextColorError,
-      itemFeedbackTextColorWarning,
-      itemLabelHeight,
-      height
+      labelTextColor,
+      asteriskColor,
+      feedbackTextColorError,
+      feedbackTextColorWarning
     } = props.$local
     const {
       easeInOutCubicBezier
@@ -45,11 +43,6 @@ export default c([
             margin-right: 18px;
           `
         }, [
-          cM('no-label', {
-            raw: `
-              padding-top: ${itemLabelHeight.medium}
-            `
-          }),
           cB('form-item-label', {
             raw: `
               display: block;
@@ -110,7 +103,6 @@ export default c([
           raw: `
             padding-top: 3px;
             padding-bottom: 3px;
-            min-height: ${height.medium};
             display: flex;
             align-items: center;
             position: relative;
@@ -119,14 +111,14 @@ export default c([
           cM('error', [
             c('+', [
               cB('form-item-feedback-wrapper', {
-                color: itemFeedbackTextColorError
+                color: feedbackTextColorError
               })
             ])
           ]),
           cM('warning', [
             c('+', [
               cB('form-item-feedback-wrapper', {
-                color: itemFeedbackTextColorWarning
+                color: feedbackTextColorWarning
               })
             ])
           ])
@@ -137,19 +129,18 @@ export default c([
               raw: `
                 content: ' *';
               `,
-              color: itemRequiredAsterisk
+              color: asteriskColor
             })
           ])
         ]),
         cB('form-item-label', {
           raw: `
             display: inline-block;
-            height: ${itemLabelHeight.medium};
             box-sizing: border-box;
             font-size: 14px;
             transition: color .3s ${easeInOutCubicBezier};
           `,
-          color: itemLabelTextColor
+          color: labelTextColor
         }, [
           c('&::after', {
             raw: `

src/form/src/styles/themed-size.cssr.js

@@ -1,37 +1,39 @@
-import { c, cB, cM } from '../../../_utils/cssr'
+import { c, cB, cM, createKey } from '../../../_utils/cssr'
+import depx from '../../../_utils/css/depx'
+import pxfy from '../../../_utils/css/pxfy'
 
 export default c([
   ({ props }) => {
-    const size = props.$instance.syntheticSize || props.$instance.size
-    const height = props.$local.height[size]
-    const fontSize = props.$local.fontSize[size]
-    const itemLabelHeight = props.$local.itemLabelHeight[size]
-    const getNumber = str => {
-      return Number(str.replace(/[^0-9]/ig, ''))
-    }
+    const size = props.$instance.renderedSize
+    const $local = props.$local
+    const blankHeight = $local[createKey('blankHeight', size)]
+    const feedbackFontSize = $local[createKey('feedbackFontSize', size)]
+    const labelFontSizeTop = $local[createKey('labelFontSizeTop', size)]
+    const labelFontSizeLeft = $local[createKey('labelFontSizeLeft', size)]
+    const labelHeight = $local[createKey('labelHeight', size)]
     return cB('form-item', [
       cM(size + '-size', [
         cM('top-labelled', [
           cM('no-label', {
-            paddingTop: itemLabelHeight
+            paddingTop: labelHeight
           }),
           cB('form-item-label', {
-            fontSize: `${getNumber(fontSize) - 1}px`,
-            height: itemLabelHeight
+            fontSize: labelFontSizeTop,
+            height: labelHeight
           })
         ]),
         cM('left-labelled', [
           cB('form-item-label', {
-            fontSize: fontSize,
-            height: `${getNumber(height) + 6}px`,
-            lineHeight: `${getNumber(height) + 6}px`
+            fontSize: labelFontSizeLeft,
+            height: pxfy(depx(blankHeight) + 6),
+            lineHeight: pxfy(depx(blankHeight) + 6)
           })
         ]),
         cB('form-item-blank', {
-          minHeight: height
+          minHeight: blankHeight
         }),
         cB('form-item-feedback-wrapper', {
-          fontSize: fontSize
+          fontSize: feedbackFontSize
         })
       ])
     ])

src/form/styles/_common.js

@@ -1,26 +1,17 @@
 export default {
-  height: {
-    tiny: '22px',
-    small: '28px',
-    medium: '34px',
-    large: '40px',
-    huge: '48px'
-  },
-  fontSize: {
-    tiny: '13px',
-    small: '14px',
-    medium: '14px',
-    large: '15px',
-    huge: '16px'
-  },
-  itemFeedbackFontSize: {
-    small: '13px',
-    medium: '14px',
-    large: '14px'
-  },
-  itemLabelHeight: {
-    small: '20px',
-    medium: '22px',
-    large: '24px'
-  }
+  blankHeightSmall: '28px',
+  blankHeightMedium: '34px',
+  blankHeightLarge: '40px',
+  feedbackFontSizeSmall: '13px',
+  feedbackFontSizeMedium: '13px',
+  feedbackFontSizeLarge: '14px',
+  labelFontSizeLeftSmall: '14px',
+  labelFontSizeLeftMedium: '14px',
+  labelFontSizeLeftLarge: '15px',
+  labelFontSizeTopSmall: '13px',
+  labelFontSizeTopMedium: '13px',
+  labelFontSizeTopLarge: '14px',
+  labelHeightSmall: '18px',
+  labelHeightMedium: '18px',
+  labelHeightLarge: '20px'
 }

src/form/styles/dark.js

@@ -1,11 +1,13 @@
 import create from '../../styles/_utils/create-component-base'
 import commonVariables from './_common'
-import suffixStyle from '../../_base/suffix/styles/dark'
+import gridStyle from '../../grid/styles/dark'
 
 export default create({
   name: 'Form',
   theme: 'dark',
-  peer: [ suffixStyle ],
+  peer: [
+    gridStyle
+  ],
   getDerivedVariables ({ base, derived }) {
     const {
       primaryTextOverlayColor,
@@ -14,10 +16,10 @@ export default create({
     } = derived
     return {
       ...commonVariables,
-      itemLabelTextColor: primaryTextOverlayColor,
-      itemRequiredAsterisk: errorColor,
-      itemFeedbackTextColorError: errorColor,
-      itemFeedbackTextColorWarning: warningColor
+      labelTextColor: primaryTextOverlayColor,
+      asteriskColor: errorColor,
+      feedbackTextColorError: errorColor,
+      feedbackTextColorWarning: warningColor
     }
   }
 })

src/form/styles/light.js

@@ -1,11 +1,11 @@
 import create from '../../styles/_utils/create-component-base'
 import commonVariables from './_common'
-import suffixStyle from '../../_base/suffix/styles/dark'
+import gridStyle from '../../grid/styles/light'
 
 export default create({
   name: 'Form',
   theme: 'light',
-  peer: [ suffixStyle ],
+  peer: [gridStyle],
   getDerivedVariables ({ base, derived }) {
     const {
       primaryTextColor,
@@ -14,10 +14,10 @@ export default create({
     } = derived
     return {
       ...commonVariables,
-      itemLabelTextColor: primaryTextColor,
-      itemRequiredAsterisk: errorColor,
-      itemFeedbackTextColorError: errorColor,
-      itemFeedbackTextColorWarning: warningColor
+      labelTextColor: primaryTextColor,
+      asteriskColor: errorColor,
+      feedbackTextColorError: errorColor,
+      feedbackTextColorWarning: warningColor
     }
   }
 })