refactor(upload): new theme

src/styles.js

@@ -83,4 +83,4 @@ export { tooltipDark, tooltipLight } from './tooltip/styles'
 // export { transferDark, transferLight } from './transfer/styles'
 // export { treeDark, treeLight } from './tree/styles'
 // export { typographyDark, typographyLight } from './typography/styles'
-export { uploadDark, uploadLight } from './upload/styles'
+// export { uploadDark, uploadLight } from './upload/styles'

src/styles.new.js

@@ -63,6 +63,7 @@ import { timelineDark } from './timeline/styles'
 import { transferDark } from './transfer/styles'
 import { typographyDark } from './typography/styles'
 import { treeDark } from './tree/styles'
+import { uploadDark } from './upload/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -129,5 +130,6 @@ export const darkTheme = {
   Timeline: timelineDark,
   Transfer: transferDark,
   Tree: treeDark,
-  Typography: typographyDark
+  Typography: typographyDark,
+  Upload: uploadDark
 }

src/upload/src/Upload.vue

@@ -2,11 +2,11 @@
   <div
     class="n-upload"
     :class="{
-      [`n-${mergedTheme}-theme`]: mergedTheme,
       'n-upload--dragger-inside': draggerInside,
       'n-upload--drag-over': dragOver,
       'n-upload--disabled': disabled
     }"
+    :style="cssVars"
   >
     <input
       ref="input"
@@ -40,12 +40,14 @@
 </template>
 
 <script>
+import { defineComponent, computed } from 'vue'
 import { createId } from 'seemly'
-import { configurable, themeable, withCssr } from '../../_mixins'
+import { useTheme } from '../../_mixins'
 import { warn } from '../../_utils'
-import NUploadFile from './UploadFile.vue'
 import { NFadeInExpandTransition } from '../../_base'
-import styles from './styles'
+import { uploadLight } from '../styles'
+import NUploadFile from './UploadFile.vue'
+import style from './styles/index.cssr.js'
 
 /**
  * fils status ['pending', 'uploading', 'finished', 'removed', 'error']
@@ -151,13 +153,12 @@ function submit (
   componentInstance.change(fileAfterChange)
 }
 
-export default {
+export default defineComponent({
   name: 'Upload',
   components: {
     NUploadFile,
     NFadeInExpandTransition
   },
-  mixins: [configurable, themeable, withCssr(styles)],
   provide () {
     return {
       NUpload: this
@@ -250,6 +251,47 @@ export default {
       default: false
     }
   },
+  setup (props) {
+    const themeRef = useTheme('Upload', 'Upload', style, uploadLight, props)
+    return {
+      cssVars: computed(() => {
+        const {
+          common: { cubicBezierEaseInOut },
+          self: {
+            draggerColor,
+            draggerBorder,
+            draggerBorderHover,
+            itemColorHover,
+            itemColorHoverError,
+            itemTextColorError,
+            itemTextColorSuccess,
+            itemTextColor,
+            itemIconColor,
+            itemDisabledOpacity,
+            lineHeight,
+            borderRadius,
+            fontSize
+          }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--border-radius': borderRadius,
+          '--dragger-border': draggerBorder,
+          '--dragger-border-hover': draggerBorderHover,
+          '--dragger-color': draggerColor,
+          '--font-size': fontSize,
+          '--item-color-hover': itemColorHover,
+          '--item-color-hover-error': itemColorHoverError,
+          '--item-disabled-opacity': itemDisabledOpacity,
+          '--item-icon-color': itemIconColor,
+          '--item-text-color': itemTextColor,
+          '--item-text-color-error': itemTextColorError,
+          '--item-text-color-success': itemTextColorSuccess,
+          '--line-height': lineHeight
+        }
+      })
+    }
+  },
   data () {
     return {
       internalFileList: [],
@@ -382,5 +424,5 @@ export default {
       }
     }
   }
-}
+})
 </script>

src/upload/src/UploadDragger.vue

@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'UploadDragger',
   inject: {
     NUpload: {
@@ -18,5 +20,5 @@ export default {
   beforeUnmount () {
     this.NUpload && (this.NUpload.draggerInside = false)
   }
-}
+})
 </script>

src/upload/src/UploadFile.vue

@@ -54,8 +54,7 @@
 </template>
 
 <script>
-import { NButton } from '../../button'
+import { defineComponent } from 'vue'
-import NUploadProgress from './UploadProgress.vue'
 import {
   CancelIcon,
   DeleteIcon,
@@ -63,10 +62,12 @@ import {
   DownloadIcon
 } from '../../_base/icons'
 import { NIcon } from '../../icon'
+import { NButton } from '../../button'
 import { NIconSwitchTransition } from '../../_base'
 import { warn } from '../../_utils'
+import NUploadProgress from './UploadProgress.vue'
 
-export default {
+export default defineComponent({
   name: 'UploadFile',
   components: {
     NButton,
@@ -172,5 +173,5 @@ export default {
       this.handleRemove(Object.assign({}, file))
     }
   }
-}
+})
 </script>

src/upload/src/UploadProgress.vue

@@ -12,10 +12,11 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue'
 import { NFadeInExpandTransition } from '../../_base'
 import { NProgress } from '../../progress'
 
-export default {
+export default defineComponent({
   name: 'UploadProgress',
   components: {
     NProgress,
@@ -57,5 +58,5 @@ export default {
   created () {
     this.postponedShow = this.show
   }
-}
+})
 </script>

src/upload/src/styles/index.cssr.js

@@ -0,0 +1,155 @@
+import { c, cM, cB, cE } from '../../../_utils/cssr'
+import fadeInHeightExpand from '../../../_styles/transitions/fade-in-height-expand'
+import createIconSwitchTransition from '../../../_styles/transitions/icon-switch'
+
+export default cB('upload', [
+  cE('file-input', `
+    display: block;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  `),
+  cE('activator', `
+    display: inline-block;
+  `),
+  cM('dragger-inside', [
+    cE('activator', `
+      display: block;
+    `)
+  ]),
+  cB('upload-dragger', `
+    cursor: pointer;
+    box-sizing: border-box;
+    width: 100%;
+    text-align: center;
+    border-radius: var(--border-radius);
+    padding: 24px;
+    transition:
+      border-color .3s var(--bezier),
+      background-color .3s var(--bezier);
+    background-color: var(--dragger-color);
+    border: var(--dragger-border);
+  `, [
+    c('&:hover', `
+      border: var(--dragger-border-hover);
+    `)
+  ]),
+  cB('upload-file-list', `
+    margin-top: 8px;
+    line-height: var(--line-height);
+  `, [
+    cB('upload-file', `
+      display: block;
+      box-sizing: border-box;
+      cursor: default;
+      padding: 0px 12px 0 6px;
+      transition: background-color .3s  var(--bezier);
+      border-radius: var(--border-radius);
+    `, [
+      fadeInHeightExpand(),
+      cB('progress', `
+        box-sizing: border-box;
+        padding-bottom: 6px;
+        margin-bottom: 6px;
+      `, [
+        fadeInHeightExpand({
+          foldPadding: true
+        })
+      ]),
+      c('&:hover', `
+        background-color: var(--item-color-hover);
+      `, [
+        cB('upload-file-info', [
+          cE('action', `
+            opacity: 1;
+          `)
+        ])
+      ]),
+      cM('error-status', [
+        c('&:hover', `
+          background-color: var(--item-color-hover-error);
+        `),
+        cB('upload-file-info', [
+          cE('name', `
+            color: var(--item-text-color-error);
+          `)
+        ])
+      ]),
+      cM('with-url', `
+        cursor: pointer;
+      `, [
+        cB('upload-file-info', [
+          cE('name', `
+            text-decoration: underline;
+            color: var(--item-text-color-success);
+            text-decoration-color: var(--item-text-color-success);
+          `)
+        ])
+      ]),
+      cB('upload-file-info', `
+        position: relative;
+        padding-top: 6px;
+        padding-bottom: 6px;
+      `, [
+        cE('action', `
+          padding-top: inherit;
+          padding-bottom: inherit;
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 80px;
+          display: flex;
+          align-items: center;
+          transition: opacity .2s var(--bezier);
+          flex-direction: row-reverse;
+          opacity: 0;
+        `, [
+          cB('button', [
+            cB('icon', [
+              c('svg', [
+                createIconSwitchTransition()
+              ])
+            ])
+          ])
+        ]),
+        cE('name', `
+          text-overflow: ellipsis;
+          overflow: hidden;
+          text-decoration: underline;
+          text-decoration-color: transparent;
+          font-size: var(--font-size);
+          transition:
+            color .3s var(--bezier),
+            text-decoration-color .3s var(--bezier);
+          color: var(--item-text-color);    
+        `, [
+          cB('icon', `
+            font-size: 18px;
+            margin-right: 2px;
+            vertical-align: middle;
+            color: var(--item-icon-color);
+          `)
+        ])
+      ])
+    ])
+  ]),
+  cM('disabled', `
+    opacity: var(--item-disabled-opacity);
+  `, [
+    cE('activator', `
+      cursor: not-allowed;
+    `),
+    cB('upload-file-list', `
+      cursor: not-allowed;
+    `),
+    cB('upload-dragger', `
+      cursor: not-allowed;
+    `)
+  ]),
+  cM('drag-over', [
+    cB('upload-dragger', `
+      border: var(--dragger-border-hover);
+    `)
+  ])
+])

src/upload/src/styles/index.js

@@ -1,9 +0,0 @@
-import themedBaseStyle from './themed-base.cssr.js'
-
-export default [
-  {
-    key: 'mergedTheme',
-    watch: ['mergedTheme'],
-    CNode: themedBaseStyle
-  }
-]

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

@@ -1,220 +0,0 @@
-import { c, cM, cTB, cB, cE } from '../../../_utils/cssr'
-import fadeInHeightExpand from '../../../_styles/transitions/fade-in-height-expand'
-import createIconSwitchTransition from '../../../_styles/transitions/icon-switch'
-
-export default c([
-  ({ props }) => {
-    const {
-      $global: {
-        cubicBezierEaseInOut
-      },
-      $local: {
-        draggerColor,
-        draggerBorder,
-        draggerBorderHover,
-        itemColorHover,
-        itemColorHoverError,
-        itemTextColorError,
-        itemTextColorSuccess,
-        itemTextColor,
-        itemIconColor,
-        itemDisabledOpacity,
-        lineHeight,
-        borderRadius,
-        fontSize
-      }
-    } = props
-    const iconSwitchTransition = createIconSwitchTransition()
-    return cTB('upload', [
-      cE('file-input', {
-        raw: `
-          display: block;
-          width: 0;
-          height: 0;
-          opacity: 0;
-        `
-      }),
-      cE('activator', {
-        raw: `
-          display: inline-block;
-        `
-      }),
-      cM('dragger-inside', [
-        cE('activator', {
-          raw: `
-            display: block;
-          `
-        })
-      ]),
-      cB('upload-dragger', {
-        raw: `
-          cursor: pointer;
-          box-sizing: border-box;
-          width: 100%;
-          text-align: center;
-          border-radius: ${borderRadius};
-          padding: 24px;
-          transition:
-            border-color .3s ${cubicBezierEaseInOut},
-            background-color .3s ${cubicBezierEaseInOut};
-          background-color: ${draggerColor};
-          border: ${draggerBorder};
-        `
-      }, [
-        c('&:hover', {
-          border: draggerBorderHover
-        })
-      ]),
-      cB('upload-file-list', {
-        raw: `
-          margin-top: 8px;
-          line-height: ${lineHeight};
-        `
-      }, [
-        cB('upload-file', {
-          raw: `
-            display: block;
-            box-sizing: border-box;
-            cursor: default;
-            padding: 0px 12px 0 6px;
-            transition: background-color .3s  ${cubicBezierEaseInOut};
-            border-radius: ${borderRadius};
-          `
-        }, [
-          fadeInHeightExpand(),
-          cB('progress', {
-            raw: `
-              box-sizing: border-box;
-              padding-bottom: 6px;
-              margin-bottom: 6px;
-            `
-          }, [
-            fadeInHeightExpand({
-              foldPadding: true
-            })
-          ]),
-          c('&:hover', {
-            raw: `
-              background-color: ${itemColorHover};
-            `
-          }, [
-            cB('upload-file-info', [
-              cE('action', {
-                raw: `
-                  opacity: 1;
-                `
-              })
-            ])
-          ]),
-          cM('error-status', [
-            c('&:hover', {
-              raw: `
-                background-color: ${itemColorHoverError};
-              `
-            }),
-            cB('upload-file-info', [
-              cE('name', {
-                raw: `color: ${itemTextColorError}`
-              })
-            ])
-          ]),
-          cM('with-url', {
-            raw: `
-              cursor: pointer;
-            `
-          }, [
-            cB('upload-file-info', [
-              cE('name', {
-                raw: `
-                  text-decoration: underline;
-                  color: ${itemTextColorSuccess};
-                  text-decoration-color: ${itemTextColorSuccess};
-                `
-              })
-            ])
-          ]),
-          cB('upload-file-info', {
-            raw: `
-              position: relative;
-              padding-top: 6px;
-              padding-bottom: 6px;
-            `
-          }, [
-            cE('action', {
-              raw: `
-                padding-top: inherit;
-                padding-bottom: inherit;
-                position: absolute;
-                right: 0;
-                top: 0;
-                bottom: 0;
-                width: 80px;
-                display: flex;
-                align-items: center;
-                transition: opacity .2s ${cubicBezierEaseInOut};
-                flex-direction: row-reverse;
-                opacity: 0;
-              `
-            }, [
-              cB('button', [
-                cB('icon', [
-                  c('svg', [
-                    iconSwitchTransition
-                  ])
-                ])
-              ])
-            ]),
-            cE('name', {
-              raw: `
-                text-overflow: ellipsis;
-                overflow: hidden;
-                text-decoration: underline;
-                text-decoration-color: transparent;
-                font-size: ${fontSize};
-                transition:
-                  color .3s ${cubicBezierEaseInOut},
-                  text-decoration-color .3s ${cubicBezierEaseInOut};
-                color: ${itemTextColor};    
-              `
-            }, [
-              cB('icon', {
-                raw: `
-                  font-size: 18px;
-                  margin-right: 2px;
-                  vertical-align: middle;
-                  color: ${itemIconColor};
-                `
-              })
-            ])
-          ])
-        ])
-      ]),
-      cM('disabled', {
-        raw: `
-          opacity: ${itemDisabledOpacity}
-        `
-      }, [
-        cE('activator', {
-          raw: `
-            cursor: not-allowed;
-          `
-        }),
-        cB('upload-file-list', {
-          raw: `
-            cursor: not-allowed;
-          `
-        }),
-        cB('upload-dragger', {
-          raw: `
-            cursor: not-allowed;
-          `
-        })
-      ]),
-      cM('drag-over', [
-        cB('upload-dragger', {
-          border: draggerBorderHover
-        })
-      ])
-    ])
-  }
-])

src/upload/styles/dark.js

@@ -1,15 +1,18 @@
-import create from '../../_styles/utils/create-component-base'
 import { changeColor } from 'seemly'
-import { baseDark } from '../../_styles/base'
 import { buttonDark } from '../../button/styles'
 import { iconDark } from '../../icon/styles'
 import { progressDark } from '../../progress/styles'
+import { commonDark } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'Upload',
-  theme: 'dark',
+  common: commonDark,
-  peer: [baseDark, buttonDark, iconDark, progressDark],
+  peers: {
-  getLocalVars (vars) {
+    Button: buttonDark,
+    Icon: iconDark,
+    Progress: progressDark
+  },
+  self (vars) {
     const {
       iconColorOverlay,
       primaryColor,
@@ -42,4 +45,4 @@ export default create({
       itemDisabledOpacity: opacityDisabled
     }
   }
-})
+}

src/upload/styles/light.js

@@ -1,15 +1,18 @@
-import create from '../../_styles/utils/create-component-base'
 import { changeColor } from 'seemly'
-import { baseLight } from '../../_styles/base'
 import { buttonLight } from '../../button/styles'
 import { iconLight } from '../../icon/styles'
 import { progressLight } from '../../progress/styles'
+import { commonLight } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'Upload',
-  theme: 'light',
+  common: commonLight,
-  peer: [baseLight, buttonLight, iconLight, progressLight],
+  peers: {
-  getLocalVars (vars) {
+    Button: buttonLight,
+    Icon: iconLight,
+    Progress: progressLight
+  },
+  self (vars) {
     const {
       iconColorOverlay,
       primaryColor,
@@ -42,4 +45,4 @@ export default create({
       itemDisabledOpacity: opacityDisabled
     }
   }
-})
+}