refactor(base-select-menu, base-selection): merge size style

src/_base/select-menu/src/styles/index.js

@@ -1,15 +1,9 @@
 import baseStyle from './themed-base.js'
-import sizeStyle from './themed-size'
 
 export default [
   {
     key: 'theme',
     watch: ['theme'],
     CNode: baseStyle
-  },
-  {
-    key: 'size',
-    watch: ['size', 'theme'],
-    CNode: sizeStyle
   }
 ]

src/_base/select-menu/src/styles/themed-base.js

@@ -1,8 +1,12 @@
-import { cTB, c, cB, cE, cM, cNotM } from '../../../../_utils/cssr'
+import { cTB, c, cB, cE, cM, cNotM, createKey } from '../../../../_utils/cssr'
+import { depx, pxfy } from 'seemly'
 
 export default c([
   ({ props }) => {
-    const { cubicBezierEaseInOut } = props.$global
+    const {
+      $global: { cubicBezierEaseInOut },
+      $local
+    } = props
     const {
       borderRadius,
       color,
@@ -37,6 +41,39 @@ export default c([
         `
       },
       [
+        ['small', 'medium', 'large'].map((size) => {
+          const {
+            [createKey('optionFontSize', size)]: fontSize,
+            [createKey('optionHeight', size)]: optionHeight,
+            [createKey('padding', size)]: padding
+          } = $local
+          const groupHeaderFontSize = pxfy(depx(fontSize) - 2)
+          const menuHeight = pxfy(depx(optionHeight) * 7.6)
+          return cM(
+            size + '-size',
+            {
+              padding
+            },
+            [
+              cB('scrollbar', {
+                maxHeight: menuHeight
+              }),
+              cB('virtual-list', {
+                maxHeight: menuHeight
+              }),
+              cB('base-select-option', {
+                height: optionHeight,
+                lineHeight: optionHeight,
+                fontSize: fontSize
+              }),
+              cB('base-select-group-header', {
+                height: optionHeight,
+                lineHeight: optionHeight,
+                fontSize: groupHeaderFontSize
+              })
+            ]
+          )
+        }),
         cB('base-select-menu-option-wrapper', {
           position: 'relative',
           width: '100%'

src/_base/select-menu/src/styles/themed-size.js

@@ -1,39 +0,0 @@
-import { cTB, c, cB, cM, createKey } from '../../../../_utils/cssr'
-import { depx, pxfy } from 'seemly'
-
-export default c([
-  ({ props }) => {
-    const size = props.$vm.size
-    const fontSize = props.$local[createKey('optionFontSize', size)]
-    const optionHeight = props.$local[createKey('optionHeight', size)]
-    const groupHeaderFontSize = pxfy(depx(fontSize) - 2)
-    const menuHeight = pxfy(depx(optionHeight) * 7.6)
-    const padding = props.$local[createKey('padding', size)]
-    return cTB('base-select-menu', [
-      cM(
-        size + '-size',
-        {
-          padding
-        },
-        [
-          cB('scrollbar', {
-            maxHeight: menuHeight
-          }),
-          cB('virtual-list', {
-            maxHeight: menuHeight
-          }),
-          cB('base-select-option', {
-            height: optionHeight,
-            lineHeight: optionHeight,
-            fontSize: fontSize
-          }),
-          cB('base-select-group-header', {
-            height: optionHeight,
-            lineHeight: optionHeight,
-            fontSize: groupHeaderFontSize
-          })
-        ]
-      )
-    ])
-  }
-])

src/_base/selection/src/styles/index.js

@@ -1,15 +1,9 @@
 import baseStyle from './themed-base.js'
-import sizeStyle from './themed-size'
 
 export default [
   {
     key: 'theme',
     watch: ['theme'],
     CNode: baseStyle
-  },
-  {
-    key: 'size',
-    watch: ['size', 'theme'],
-    CNode: sizeStyle
   }
 ]

src/_base/selection/src/styles/themed-base.js

@@ -9,10 +9,14 @@ import {
   createKey,
   insideFormItem
 } from '../../../../_utils/cssr'
+import { formatLength } from '../../../../_utils'
 
 export default c([
   ({ props }) => {
-    const { $local } = props
+    const {
+      $local,
+      $global: { cubicBezierEaseInOut }
+    } = props
     const {
       borderRadius,
       color,
@@ -32,7 +36,6 @@ export default c([
       borderHover,
       borderActive
     } = $local
-    const { cubicBezierEaseInOut } = props.$global
     return cTB(
       'base-selection',
       {
@@ -48,6 +51,42 @@ export default c([
         borderRadius
       },
       [
+        ['small', 'medium', 'large'].map((size) => {
+          const {
+            [createKey('height', size)]: height,
+            [createKey('fontSize', size)]: fontSize
+          } = $local
+          return cM(
+            size + '-size',
+            {
+              minHeight: height,
+              lineHeight: height,
+              fontSize
+            },
+            [
+              cE('placeholder', {
+                height,
+                lineHeight: height
+              }),
+              cB('base-selection-label', {
+                height,
+                lineHeight: height
+              }),
+              cB(
+                'base-selection-tags',
+                {
+                  minHeight: height
+                },
+                [
+                  cB('base-selection-input-tag', {
+                    height: formatLength(height, { c: 1, offset: -6 }),
+                    lineHeight: formatLength(height, { c: 1, offset: -6 })
+                  })
+                ]
+              )
+            ]
+          )
+        }),
         cM('bordered', [
           cE('border', {
             border

src/_base/selection/src/styles/themed-size.js

@@ -1,45 +0,0 @@
-import { cTB, c, cB, cE, cM, createKey } from '../../../../_utils/cssr'
-import { formatLength } from '../../../../_utils'
-
-export default c([
-  ({ props }) => {
-    const {
-      $vm: { size },
-      $local
-    } = props
-    const height = $local[createKey('height', size)]
-    const fontSize = $local[createKey('fontSize', size)]
-    return cTB('base-selection', [
-      cM(
-        size + '-size',
-        {
-          minHeight: height,
-          lineHeight: height,
-          fontSize
-        },
-        [
-          cE('placeholder', {
-            height,
-            lineHeight: height
-          }),
-          cB('base-selection-label', {
-            height,
-            lineHeight: height
-          }),
-          cB(
-            'base-selection-tags',
-            {
-              minHeight: height
-            },
-            [
-              cB('base-selection-input-tag', {
-                height: formatLength(height, { c: 1, offset: -6 }),
-                lineHeight: formatLength(height, { c: 1, offset: -6 })
-              })
-            ]
-          )
-        ]
-      )
-    ])
-  }
-])