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,
@@ -22,21 +26,54 @@ export default c([
       'base-select-menu',
       {
         raw: `
-        outline: none;
+          outline: none;
-        margin-top: 4px;
+          margin-top: 4px;
-        margin-bottom: 4px;
+          margin-bottom: 4px;
-        z-index: 0;
+          z-index: 0;
-        position: relative;
+          position: relative;
-        border-radius: ${borderRadius};
+          border-radius: ${borderRadius};
-        transition:
+          transition:
-          background-color .3s ${cubicBezierEaseInOut},
+            background-color .3s ${cubicBezierEaseInOut},
-          box-shadow .3s ${cubicBezierEaseInOut};
+            box-shadow .3s ${cubicBezierEaseInOut};
-        overflow: hidden;
+          overflow: hidden;
-        background-color: ${color};
+          background-color: ${color};
-        box-shadow: ${boxShadow};
+          box-shadow: ${boxShadow};
-      `
+        `
       },
       [
+        ['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%'
@@ -61,20 +98,20 @@ export default c([
           'base-select-option',
           {
             raw: `
-          cursor: pointer;
+              cursor: pointer;
-          position: relative;
+              position: relative;
-          padding: 0 14px;
+              padding: 0 14px;
-          white-space: nowrap;
+              white-space: nowrap;
-          transition:
+              transition:
-            background-color .3s ${cubicBezierEaseInOut},
+                background-color .3s ${cubicBezierEaseInOut},
-            color .3s ${cubicBezierEaseInOut},
+                color .3s ${cubicBezierEaseInOut},
-            opacity .3s ${cubicBezierEaseInOut};
+                opacity .3s ${cubicBezierEaseInOut};
-          text-overflow: ellipsis;
+              text-overflow: ellipsis;
-          overflow: hidden;
+              overflow: hidden;
-          box-sizing: border-box;
+              box-sizing: border-box;
-          color: ${optionTextColor};
+              color: ${optionTextColor};
-          opacity: 1;
+              opacity: 1;
-        `
+            `
           },
           [
             c('&:active', {
@@ -121,20 +158,20 @@ export default c([
               ]),
               c('&::after', {
                 raw: `
-              content: '';
+                  content: '';
-              height: 6px;
+                  height: 6px;
-              width: 3px;
+                  width: 3px;
-              position: absolute;
+                  position: absolute;
-              right: 14px;
+                  right: 14px;
-              transform: rotate(45deg) scale(.5);
+                  transform: rotate(45deg) scale(.5);
-              top: calc(50% - 4px);
+                  top: calc(50% - 4px);
-              opacity: 0;
+                  opacity: 0;
-              transition:
+                  transition:
-                transform .3s ${cubicBezierEaseInOut},
+                    transform .3s ${cubicBezierEaseInOut},
-                opacity .3s ${cubicBezierEaseInOut};
+                    opacity .3s ${cubicBezierEaseInOut};
-              border-right: 1px solid ${optionCheckColor};
+                  border-right: 1px solid ${optionCheckColor};
-              border-bottom: 1px solid ${optionCheckColor};
+                  border-bottom: 1px solid ${optionCheckColor};
-            `
+                `
               })
             ]
           )

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 })
-              })
-            ]
-          )
-        ]
-      )
-    ])
-  }
-])