refactor(transfer): size style use cssr

src/_mixins/usecssr.js

@@ -63,7 +63,7 @@ function setupMutableStyle (
     process.env.NODE_ENV !== 'production' &&
     (dependencyValue === null || dependencyValue === undefined)
   ) {
-    console.error(`[naive-ui/mixins/usecssr]: ${name}.${dependencyKey} is ${dependencyValue}`)
+    console.error(`[naive-ui/mixins/usecssr]: dependency key ${name}.${dependencyKey} should be nullable`)
   }
   const mountId = createMutableStyleId(
     name,
@@ -113,9 +113,46 @@ function setupImmutableStyle (
   markStyleMounted(mountId)
 }
 
-export default function (styles) {
+function setupCssrProps (
+  instance,
+  theme
+) {
+  const naive = instance.$naive
+  const options = instance.$options
+  const {
+    fallbackTheme,
+    styles
+  } = naive
+  const name = options.cssrName || options.name
+  const renderedTheme = theme || fallbackTheme
+  const cssrPropsGetter = styles[renderedTheme][name]
+  const themeVariables = getThemeVariables(naive, renderedTheme)
+  const componentCssrProps = {
+    $instance: instance,
+    $base: themeVariables.base,
+    $derived: themeVariables.derived,
+    $local: cssrPropsGetter.cssrProps(themeVariables),
+    $renderedTheme: renderedTheme,
+    $fallbackTheme: fallbackTheme
+  }
+  instance.cssrProps = componentCssrProps
+}
+
+export default function (styles, cssrPropsOption) {
   // collect watchers
   const watchers = {}
+  if (
+    cssrPropsOption &&
+    cssrPropsOption.themeKey &&
+    cssrPropsOption.injectCssrProps
+  ) {
+    const themeKey = cssrPropsOption.themeKey
+    watchers[themeKey] = [
+      instance => {
+        setupCssrProps(instance, instance[themeKey])
+      }
+    ]
+  }
   styles.forEach(style => {
     if (!style.watch) return
     style.watch.forEach(watchKey => {
@@ -145,6 +182,7 @@ export default function (styles) {
     .forEach(
       watchKey => {
         watch[watchKey] = function () {
+          // TODO use `themeKey`
           const syntheticTheme = this.syntheticTheme || this.theme
           watchers[watchKey].forEach(watcher => {
             watcher(this, syntheticTheme)
@@ -153,6 +191,11 @@ export default function (styles) {
       }
     )
   return {
+    data () {
+      return {
+        cssrProps: null
+      }
+    },
     created () {
       styles.forEach(style => {
         if (process.env.NODE_ENV !== 'production') {
@@ -161,6 +204,7 @@ export default function (styles) {
         if (style.key) {
           setupMutableStyle(
             this,
+            // TODO use `themeKey`
             this.syntheticTheme || this.theme || null,
             style.key,
             style.CNode
@@ -171,6 +215,9 @@ export default function (styles) {
             style.CNode
           )
         }
+        if (cssrPropsOption && cssrPropsOption.themeKey) {
+          setupCssrProps(this, this[cssrPropsOption.themeKey])
+        }
         if (process.env.NODE_ENV !== 'production') {
           window.naive.styleRenderingDuration += performance.now()
         }

src/_styles/Transfer.scss

@@ -1,118 +1,118 @@
 @import './mixins/mixins.scss';
 
-@keyframes transfer-slide-in-from-left {
+// @keyframes transfer-slide-in-from-left {
-  0% {
+//   0% {
-    transform: translateX(-150%);
+//     transform: translateX(-150%);
-  }
+//   }
-  100% {
+//   100% {
-    transform: translateX(0);
+//     transform: translateX(0);
-  }
+//   }
-}
+// }
 
-@keyframes transfer-slide-out-to-right {
+// @keyframes transfer-slide-out-to-right {
-  0% {
+//   0% {
-    transform: translateX(0);
+//     transform: translateX(0);
-  }
+//   }
-  100% {
+//   100% {
-    transform: translateX(150%);
+//     transform: translateX(150%);
-  }
+//   }
-}
+// }
 
-@keyframes transfer-slide-in-from-right {
+// @keyframes transfer-slide-in-from-right {
-  0% {
+//   0% {
-    transform: translateX(150%);
+//     transform: translateX(150%);
-  }
+//   }
-  100% {
+//   100% {
-    transform: translateX(0);
+//     transform: translateX(0);
-  }
+//   }
-}
+// }
 
-@keyframes transfer-slide-out-to-left {
+// @keyframes transfer-slide-out-to-left {
-  0% {
+//   0% {
-    transform: translateX(0);
+//     transform: translateX(0);
-  }
+//   }
-  100% {
+//   100% {
-    transform: translateX(-150%);
+//     transform: translateX(-150%);
-  }
+//   }
-}
+// }
 
-@mixin transfer-animation-mixin($size) {
+// @mixin transfer-animation-mixin($size) {
-  @keyframes transfer-height-collapse--#{$size} {
+//   @keyframes transfer-height-collapse--#{$size} {
-    0% {
+//     0% {
-      max-height: map-get($--n-height, $size);
+//       max-height: map-get($--n-height, $size);
-    }
+//     }
-    100% {
+//     100% {
-      max-height: 0;
+//       max-height: 0;
-    }
+//     }
-  }
+//   }
   
-  @keyframes transfer-height-expand--#{$size} {
+//   @keyframes transfer-height-expand--#{$size} {
-    0% {
+//     0% {
-      max-height: 0;
+//       max-height: 0;
-    }
+//     }
-    100% {
+//     100% {
-      max-height: map-get($--n-height, $size);
+//       max-height: map-get($--n-height, $size);
-    }
+//     }
-  }
+//   }
-}
+// }
 
-@mixin transfer-size-mixin($size) {
+// @mixin transfer-size-mixin($size) {
-  @include m($size + '-size') {
+//   @include m($size + '-size') {
-    @include m(filterable) {
+//     @include m(filterable) {
-      @include b(transfer-list) {
+//       @include b(transfer-list) {
-        @include b(transfer-list-body) {
+//         @include b(transfer-list-body) {
-          height: map-get($--n-height, $size) * 5.6 + 45px;
+//           height: map-get($--n-height, $size) * 5.6 + 45px;
-        }
+//         }
-      }
+//       }
-    }
+//     }
-    @include b(transfer-list) {
+//     @include b(transfer-list) {
-      @include b(transfer-list-header) {
+//       @include b(transfer-list-header) {
-        font-size: map-get($--n-font-size, $size);
+//         font-size: map-get($--n-font-size, $size);
-        height: map-get($--n-height, $size) + 6px;
+//         height: map-get($--n-height, $size) + 6px;
-      }
+//       }
-      @include b(empty) {
+//       @include b(empty) {
-        font-size: map-get($--n-font-size, $size);
+//         font-size: map-get($--n-font-size, $size);
-      }
+//       }
-      @include b(transfer-list-body) {
+//       @include b(transfer-list-body) {
-        height: map-get($--n-height, $size) * 5.6;
+//         height: map-get($--n-height, $size) * 5.6;
-        @include b(transfer-list-item) {
+//         @include b(transfer-list-item) {
-          font-size: map-get($--n-font-size, $size);
+//           font-size: map-get($--n-font-size, $size);
-          height: map-get($--n-height, $size);
+//           height: map-get($--n-height, $size);
-          max-height: map-get($--n-height, $size);
+//           max-height: map-get($--n-height, $size);
-          @include m(source) {
+//           @include m(source) {
-            @include m(enter) {
+//             @include m(enter) {
-              animation-name: transfer-height-expand--#{$size}, transfer-slide-in-from-right;
+//               animation-name: transfer-height-expand--#{$size}, transfer-slide-in-from-right;
-            }
+//             }
-            @include m(leave) {
+//             @include m(leave) {
-              animation-name: transfer-height-collapse--#{$size}, transfer-slide-out-to-right;
+//               animation-name: transfer-height-collapse--#{$size}, transfer-slide-out-to-right;
-            }
+//             }
-          }
+//           }
-          @include m(target) {
+//           @include m(target) {
-            @include m(enter) {
+//             @include m(enter) {
-              animation-name: transfer-height-expand--#{$size}, transfer-slide-in-from-left;
+//               animation-name: transfer-height-expand--#{$size}, transfer-slide-in-from-left;
-            }
+//             }
-            @include m(leave) {
+//             @include m(leave) {
-              animation-name: transfer-height-collapse--#{$size}, transfer-slide-out-to-left;
+//               animation-name: transfer-height-collapse--#{$size}, transfer-slide-out-to-left;
-            }
+//             }
-          }
+//           }
-        }
+//         }
-      }
+//       }
-    }
+//     }
-  }
+//   }
-}
+// }
 
-@include transfer-animation-mixin('small');
+// @include transfer-animation-mixin('small');
-@include transfer-animation-mixin('medium');
+// @include transfer-animation-mixin('medium');
-@include transfer-animation-mixin('large');
+// @include transfer-animation-mixin('large');
 
 @include themes-mixin {
   @include b(transfer) {
     @include once {
       display: flex;
       width: 444px;
-      @include transfer-size-mixin('small');
+      // @include transfer-size-mixin('small');
-      @include transfer-size-mixin('medium');
+      // @include transfer-size-mixin('medium');
-      @include transfer-size-mixin('large');
+      // @include transfer-size-mixin('large');
     }
     @include b(transfer-list) {
       @include once {

src/index.js

@@ -103,6 +103,8 @@ import drawerLightStyle from './drawer/styles/light'
 import drawerDarkStyle from './drawer/styles/dark'
 import dataTableLightStyle from './data-table/styles/light'
 import dataTableDarkStyle from './data-table/styles/dark'
+import transferLightStyle from './transfer/styles/light'
+import transferDarkStyle from './transfer/styles/dark'
 
 // Can be remove after refactoring
 import baseSelectionLightStyle from './_base/selection/styles/light'
@@ -228,6 +230,8 @@ export default create({
     drawerLightStyle,
     dataTableLightStyle,
     dataTableDarkStyle,
+    transferLightStyle,
+    transferDarkStyle,
     // Can be remove after refactoring
     baseSelectionLightStyle,
     baseSelectionDarkStyle

src/transfer/index.js

@@ -1,8 +1,8 @@
 /* istanbul ignore file */
 import Transfer from './src/Transfer.vue'
 
-Transfer.install = function (Vue) {
+Transfer.install = function (Vue, naive) {
-  Vue.component(Transfer.name, Transfer)
+  Vue.component(naive.componentPrefix + Transfer.name, Transfer)
 }
 
 export default Transfer

src/transfer/src/Transfer.vue

@@ -197,12 +197,14 @@ import locale from '../../_mixins/locale'
 import asformitem from '../../_mixins/asformitem'
 import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles'
 import { RecycleScroller } from 'vue-virtual-scroller'
 import debounce from 'lodash-es/debounce'
 import { itemSize } from '../../_styles-in-js/common'
 
 export default {
-  name: 'NTransfer',
+  name: 'Transfer',
   components: {
     NTransferHeaderCheckbox,
     NTransferHeaderExtra,
@@ -217,7 +219,18 @@ export default {
     iosSearch,
     RecycleScroller
   },
-  mixins: [withapp, themeable, locale('Transfer'), asformitem()],
+  mixins: [
+    withapp,
+    themeable,
+    usecssr(
+      styles, {
+        themeKey: 'syntheticTheme',
+        injectCssrProps: true
+      }
+    ),
+    locale('Transfer'),
+    asformitem()
+  ],
   model: {
     prop: 'value',
     event: 'change'

src/transfer/src/styles/index.js

@@ -0,0 +1,19 @@
+import themedBaseStyle from './themed-base/index.cssr.js'
+import themedSizeStyle from './themed-size.cssr.js'
+
+export default [
+  {
+    key: 'syntheticTheme',
+    watch: [
+      'syntheticTheme'
+    ],
+    CNode: themedBaseStyle
+  },
+  {
+    key: 'syntheticSize',
+    watch: [
+      'syntheticSize'
+    ],
+    CNode: themedSizeStyle
+  }
+]

src/transfer/src/styles/themed-base/animation.cssr.js

@@ -0,0 +1,44 @@
+import { c } from '../../../../_utils/cssr'
+
+export default c([
+  c('@keyframes transfer-slide-in-from-left', {
+    raw: `
+      0% {
+        transform: translateX(-150%);
+      }
+      100% {
+        transform: translateX(0);
+      }
+    `
+  }),
+  c('@keyframes transfer-slide-out-to-right', {
+    raw: `
+      0% {
+        transform: translateX(0);
+      }
+      100% {
+        transform: translateX(150%);
+      }
+    `
+  }),
+  c('@keyframes transfer-slide-in-from-right', {
+    raw: `
+      0% {
+        transform: translateX(150%);
+      }
+      100% {
+        transform: translateX(0);
+      }
+    `
+  }),
+  c('@keyframes transfer-slide-out-to-left', {
+    raw: `
+      0% {
+        transform: translateX(0);
+      }
+      100% {
+        transform: translateX(-150%);
+      }
+    `
+  })
+])

src/transfer/src/styles/themed-base/index.cssr.js

@@ -0,0 +1,10 @@
+import { c } from '../../../../_utils/cssr'
+import animationStyle from './animation.cssr.js'
+
+export default c([
+  () => {
+    return [
+      animationStyle
+    ]
+  }
+])

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

@@ -0,0 +1,79 @@
+import { c, cTB, cB, cM } from '../../../_utils/cssr'
+import depx from '../../../_utils/css/depx'
+import pxfy from '../../../_utils/css/pxfy'
+
+export default c([
+  ({ props }) => {
+    const size = props.$instance.syntheticSize
+    const height = props.$local.height[size]
+    const fontSize = props.$local.fontSize[size]
+    return [
+      c(`@keyframes transfer-height-collapse--${size}`, {
+        raw: `
+          0% {
+            max-height: ${height};
+          }
+          100% {
+            max-height: 0;
+          }
+        `
+      }),
+      c(`@keyframes transfer-height-expand--${size}`, {
+        raw: `
+          0% {
+            max-height: 0;
+          }
+          100% {
+            max-height: ${height};
+          }
+        `
+      }),
+      cTB('transfer', [
+        cM(size + '-size', [
+          cM('filterable', [
+            cB('transfer-list', [
+              cB('transfer-list-body', {
+                height: pxfy(depx(height) * 5.6 + 45)
+              })
+            ])
+          ]),
+          cB('transfer-list', [
+            cB('transfer-list-header', {
+              fontSize,
+              height: pxfy(depx(height) + 6)
+            }),
+            cB('empty', {
+              fontSize
+            }),
+            cB('transfer-list-body', {
+              height: pxfy(depx(height) * 5.6)
+            }, [
+              cB('transfer-list-item', {
+                fontSize,
+                height,
+                maxHeight: height
+              }, [
+                cM('source', [
+                  cM('enter', {
+                    animationName: `transfer-height-expand--${size}, transfer-slide-in-from-right`
+                  }),
+                  cM('leave', {
+                    animationName: `transfer-height-collapse--${size}, transfer-slide-out-to-right`
+                  })
+                ]),
+                cM('target', [
+                  cM('enter', {
+                    animationName: `transfer-height-expand--${size}, transfer-slide-in-from-left`
+                  }),
+                  cM('leave', {
+                    animationName: `transfer-height-collapse--${size}, transfer-slide-out-to-left`
+                  })
+                ])
+              ])
+            ])
+          ])
+        ])
+      ])
+    ]
+  }
+])

src/transfer/styles/_common.js

@@ -0,0 +1,12 @@
+export default {
+  fontSize: {
+    small: '14px',
+    medium: '14px',
+    large: '15px'
+  },
+  height: {
+    small: '28px',
+    medium: '34px',
+    large: '40px'
+  }
+}

src/transfer/styles/dark.js

@@ -0,0 +1,12 @@
+import create from '../../styles/_utils/create-component-base'
+import commonVariables from './_common'
+
+export default create({
+  theme: 'dark',
+  name: 'Transfer',
+  getDerivedVariables ({ base, derived }) {
+    return {
+      ...commonVariables
+    }
+  }
+})

src/transfer/styles/light.js

@@ -0,0 +1,12 @@
+import create from '../../styles/_utils/create-component-base'
+import commonVariables from './_common'
+
+export default create({
+  theme: 'light',
+  name: 'Transfer',
+  getDerivedVariables ({ base, derived }) {
+    return {
+      ...commonVariables
+    }
+  }
+})