refactor(progress): new theme

playground/collect-vars.js

@@ -0,0 +1,13 @@
+const varRegex = /var\(--([^)]+)\)/g
+
+function getVars (input) {
+  console.log(
+    Array.from(
+      new Set(Array.from(input.matchAll(varRegex)).map((v) => '// --' + v[1]))
+    )
+      .sort()
+      .join('\n')
+  )
+}
+
+getVars(document.body.textContent)

src/progress/src/Progress.vue

@@ -1,12 +1,5 @@
 <template>
-  <div
-    class="n-progress"
-    :class="{
-      [`n-progress--${status}`]: status,
-      [`n-progress--${type}`]: type,
-      [`n-${mergedTheme}-theme`]: mergedTheme
-    }"
-  >
+  <div class="n-progress" :class="[`n-progress--${type}`]" :style="cssVars">
     <div v-if="type === 'circle'" class="n-progress-content">
       <div class="n-progress-graph">
         <div class="n-progress-graph-circle">
@@ -223,7 +216,8 @@
 </template>
 
 <script>
-import { nextTick, getCurrentInstance } from 'vue'
+import { nextTick, getCurrentInstance, computed, defineComponent } from 'vue'
+import { onFontsReady } from 'vooks'
 import { NIcon } from '../../icon'
 import {
   CheckmarkIcon as SuccessIcon,
@@ -233,10 +227,10 @@ import {
   ErrorIcon as ErrorCircleIcon,
   SuccessIcon as SuccessCircleIcon
 } from '../../_base/icons'
-import { configurable, themeable, withCssr } from '../../_mixins'
-import styles from './styles/index.js'
-import { formatLength } from '../../_utils'
-import { onFontsReady } from 'vooks'
+import { useTheme } from '../../_mixins'
+import { createKey, formatLength } from '../../_utils'
+import { progressLight } from '../styles'
+import style from './styles/index.cssr.js'
 
 function circlePath (r, sw, vw = 100) {
   return `m ${vw / 2} ${vw / 2 - r} a ${r} ${r} 0 1 1 0 ${
@@ -244,7 +238,7 @@ function circlePath (r, sw, vw = 100) {
   } a ${r} ${r} 0 1 1 0 -${2 * r}`
 }
 
-export default {
+export default defineComponent({
   name: 'Progress',
   components: {
     NIcon,
@@ -255,7 +249,6 @@ export default {
     SuccessCircleIcon,
     ErrorCircleIcon
   },
-  mixins: [configurable, themeable, withCssr(styles)],
   props: {
     processing: {
       type: Boolean,
@@ -336,7 +329,14 @@ export default {
       default: undefined
     }
   },
-  setup () {
+  setup (props) {
+    const themeRef = useTheme(
+      'Progress',
+      'Progress',
+      style,
+      progressLight,
+      props
+    )
     const vm = getCurrentInstance().proxy
     onFontsReady(() => {
       if (vm.mergedIndicatorPlacement === 'inside-label') {
@@ -349,6 +349,43 @@ export default {
         })
       }
     })
+    return {
+      cssVars: computed(() => {
+        const { status } = props
+        const {
+          common: { cubicBezierEaseInOut },
+          self: {
+            fontSize,
+            fontSizeCircle,
+            railColor,
+            railHeight,
+            iconSizeCircle,
+            iconSizeLine,
+            textColorCircle,
+            textColorLineInner,
+            textColorLineOuter,
+            lineBgProcessing,
+            [createKey('iconColor', status)]: iconColor,
+            [createKey('fillColor', status)]: fillColor
+          }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--fill-color': fillColor,
+          '--font-size': fontSize,
+          '--font-size-circle': fontSizeCircle,
+          '--icon-color': iconColor,
+          '--icon-size-circle': iconSizeCircle,
+          '--icon-size-line': iconSizeLine,
+          '--line-bg-processing': lineBgProcessing,
+          '--rail-color': railColor,
+          '--rail-height': railHeight,
+          '--text-color-circle': textColorCircle,
+          '--text-color-line-inner': textColorLineInner,
+          '--text-color-line-outer': textColorLineOuter
+        }
+      })
+    }
   },
   data () {
     return {
@@ -409,24 +446,25 @@ export default {
       }
     },
     iconType () {
-      if (this.type === 'circle') {
-        if (this.status === 'success') {
+      const { type, status } = this
+      if (type === 'circle') {
+        if (status === 'success') {
           return 'success-icon'
-        } else if (this.status === 'error') {
+        } else if (status === 'error') {
           return 'error-icon'
-        } else if (this.status === 'warning') {
+        } else if (status === 'warning') {
           return 'warning-icon'
-        } else if (this.status === 'info') {
+        } else if (status === 'info') {
           return 'info-circle-icon'
         }
-      } else if (this.type === 'line') {
-        if (this.status === 'success') {
+      } else if (type === 'line') {
+        if (status === 'success') {
           return 'success-circle-icon'
-        } else if (this.status === 'error') {
+        } else if (status === 'error') {
           return 'error-circle-icon'
-        } else if (this.status === 'warning') {
+        } else if (status === 'warning') {
           return 'warning-icon'
-        } else if (this.status === 'info') {
+        } else if (status === 'info') {
           return 'info-circle-icon'
         }
       }
@@ -472,5 +510,5 @@ export default {
       return indicatorPercentage
     }
   }
-}
+})
 </script>

src/progress/src/styles/index.cssr.js

@@ -0,0 +1,254 @@
+import { c, cB, cE, cM } from '../../../_utils/cssr'
+
+// vars
+// --bezier
+// --fill-color
+// --font-size
+// --font-size-circle
+// --icon-color
+// --icon-size-circle
+// --icon-size-line
+// --line-bg-processing
+// --rail-color
+// --rail-height
+// --text-color-circle
+// --text-color-line-inner
+// --text-color-line-outer
+export default c([
+  cB('progress', {
+    display: 'inline-block'
+  }, [
+    cB('progress-icon', [
+      cB('icon', {
+        color: 'var(--icon-color)',
+        transition: 'color .3s var(--bezier)'
+      })
+    ]),
+    cM('line', {
+      width: '100%',
+      display: 'block'
+    }, [
+      cB('progress-content', {
+        display: 'flex',
+        alignItems: 'center'
+      }, [
+        cB('progress-graph', {
+          flex: 1
+        })
+      ]),
+      cB('progress-custom-content', {
+        marginLeft: '14px'
+      }),
+      cB('progress-icon', `
+        width: 30px;
+        padding-left: 14px;
+        height: var(--icon-size-line);
+        line-height: var(--icon-size-line);
+        font-size: var(--icon-size-line);
+      `, [
+        cM('as-text', `
+          color: var(--text-color-line-outer);
+          text-align: center;
+          width: 40px;
+          font-size: var(--font-size);
+          padding-left: 4px;
+          transition: color .3s var(--bezier);
+        `)
+      ])
+    ]),
+    cM('circle', {
+      width: '120px'
+    }, [
+      cB('progress-custom-content', `
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      `),
+      cB('progress-text', `
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        display: flex;
+        align-items: center;
+        color: inherit;
+        font-size: 36px;
+        color: var(--text-color-circle);
+        transition: color .3s var(--bezier);
+        white-space: nowrap;
+      `, [
+        cE('percentage', `
+          font-size: var(--font-size-circle);
+        `),
+        cE('unit', `
+          font-size: var(--font-size-circle);
+        `)
+      ]),
+      cB('progress-icon', `
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        display: flex;
+        align-items: center;
+        color: var(--icon-color);
+        font-size: var(--icon-size-circle);
+      `)
+    ]),
+    cM('multiple-circle', {
+      width: '200px',
+      color: 'inherit'
+    }, [
+      cB('progress-text', `
+        color: var(--text-color-circle);
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: color .3s var(--bezier);
+      `)
+    ]),
+    cB('progress-content', {
+      position: 'relative'
+    }),
+    cB('progress-graph', {
+      position: 'relative'
+    }, [
+      cB('progress-graph-circle', [
+        c('svg', {
+          verticalAlign: 'bottom'
+        }),
+        cB('progress-graph-circle-fill', `
+          stroke: var(--fill-color);
+          transition:
+            opacity .3s var(--bezier),
+            stroke .3s var(--bezier),
+            stroke-dasharray .3s var(--bezier);
+        `, [
+          cM('empty', {
+            opacity: 0
+          })
+        ]),
+        cB('progress-graph-circle-rail', `
+          transition: stroke .3s var(--bezier);
+          overflow: hidden;
+          stroke: var(--rail-color);
+        `)
+      ]),
+      cB('progress-graph-line', [
+        cM('indicator-inside', [
+          cB('progress-graph-line-rail', {
+            height: '21px',
+            borderRadius: '10.5px'
+          }, [
+            cB('progress-graph-line-fill', {
+              height: '21px',
+              borderRadius: '10.5px'
+            }),
+            cB('progress-graph-line-indicator', `
+              background: transparent;
+              white-space: nowrap;
+              text-align: right;
+              margin-left: 14px;
+              margin-right: 14px;
+              height: 21px;
+              font-size: var(--font-size);
+              line-height: 21px;
+              color: var(--text-color-line-inner);
+              transition: color .3s var(--bezier);
+            `)
+          ])
+        ]),
+        cM('indicator-inside-label', `
+          height: 21px;
+          display: flex;
+          align-items: center;
+        `, [
+          cB('progress-graph-line-rail', {
+            flex: 1,
+            transition: 'background-color .3s var(--bezier)'
+          }),
+          cB('progress-graph-line-indicator', `
+            background: var(--fill-color);
+            font-size: var(--font-size);
+            transform: translateZ(0);
+            display: flex;
+            vertical-align: middle;
+            height: 21px;
+            line-height: 21px;
+            padding: 0 10px;
+            border-radius: 10.5px;
+            position: absolute;
+            white-space: nowrap;
+            color: var(--text-color-line-inner);
+            transition:
+              right .2s var(--bezier),
+              color .3s var(--bezier),
+              background-color .3s var(--bezier);
+          `)
+        ]),
+        cB('progress-graph-line-rail', `
+          position: relative;
+          overflow: hidden;
+          height: var(--rail-height);
+          border-radius: 5px;
+          background-color: var(--rail-color);
+          transition: background-color .3s var(--bezier);
+        `, [
+          cB('progress-graph-line-fill', `
+            background: var(--fill-color);
+            position: relative;
+            border-radius: 5px;
+            height: inherit;
+            width: 100%;
+            max-width: 0%;
+            transition:
+              background-color .3s var(--bezier),
+              max-width .2s var(--bezier);
+          `, [
+            cM('processing', [
+              c('&::after', `
+                content: "";
+                backgroundImage: var(--line-bg-processing);
+                animation: progress-processing-animation 2s var(--bezier) infinite;
+              `)
+            ])
+          ])
+        ])
+      ])
+    ])
+  ]),
+  c('@keyframes progress-processing-animation', `
+    0% {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 100%;
+      opacity: 1;
+    }
+    66% {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      opacity: 0;
+    }
+    100% {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      opacity: 0;
+    }
+  `)
+])

src/progress/src/styles/index.js

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

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

@@ -1,328 +0,0 @@
-import { cTB, c, cB, cE, cM, createKey } from '../../../_utils/cssr'
-
-export default c([
-  ({ props }) => {
-    const {
-      $global: {
-        cubicBezierEaseInOut,
-        fontWeightStrong
-      },
-      $local: {
-        railHeight,
-        fontSizeCircle,
-        railColor,
-        iconSizeCircle,
-        iconSizeLine,
-        textColorCircle,
-        textColorLineInner,
-        textColorLineOuter,
-        fontSize
-      }
-    } = props
-    return cTB('progress', {
-      display: 'inline-block'
-    }, [
-      cB('progress-icon', [
-        cB('icon', {
-          transition: `color .3s ${cubicBezierEaseInOut}`
-        })
-      ]),
-      cM('line', {
-        width: '100%',
-        display: 'block'
-      }, [
-        cB('progress-content', {
-          display: 'flex',
-          alignItems: 'center'
-        }, [
-          cB('progress-graph', {
-            flex: 1
-          })
-        ]),
-        cB('progress-custom-content', {
-          marginLeft: '14px'
-        }),
-        cB('progress-icon', {
-          raw: `
-            width: 30px;
-            padding-left: 14px;
-            height: ${iconSizeLine};
-            line-height: ${iconSizeLine};
-            font-size: ${iconSizeLine};
-            transition:
-              fill .3s ${cubicBezierEaseInOut},
-              color .3s ${cubicBezierEaseInOut};
-          `
-        }, [
-          cM('as-text', {
-            raw: `
-              color: ${textColorLineOuter};
-              text-align: center;
-              width: 40px;
-              font-size: ${fontSize};
-              padding-left: 4px;
-              transition: color .3s ${cubicBezierEaseInOut};
-            `
-          })
-        ])
-      ]),
-      cM('circle', {
-        width: '120px'
-      }, [
-        cB('progress-custom-content', {
-          raw: `
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translateX(-50%) translateY(-50%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          `
-        }),
-        cB('progress-text', {
-          raw: `
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translateX(-50%) translateY(-50%);
-            display: flex;
-            align-items: center;
-            color: inherit;
-            font-size: 36px;
-            color: ${textColorCircle};
-            transition: color .3s ${cubicBezierEaseInOut};
-          `
-        }),
-        cB('progress-icon', {
-          raw: `
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translateX(-50%) translateY(-50%);
-            display: flex;
-            align-items: center;
-            color: inherit;
-            font-size: ${iconSizeCircle};
-          `
-        }),
-        cB('progress-text', {
-          whiteSpace: 'nowrap',
-          fontWeight: fontWeightStrong,
-          transition: `color .3s ${cubicBezierEaseInOut}`
-        }, [
-          cE('percentage', {
-            color: 'inherit',
-            fontSize: fontSizeCircle
-          }),
-          cE('unit', {
-            color: 'inherit',
-            fontSize: fontSizeCircle
-          })
-        ])
-      ]),
-      cM('multiple-circle', {
-        width: '200px',
-        color: 'inherit'
-      }, [
-        cB('progress-text', {
-          raw: `
-            color: ${textColorCircle};
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translateX(-50%) translateY(-50%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: color .3s ${cubicBezierEaseInOut};
-          `
-        })
-      ]),
-      cB('progress-content', {
-        position: 'relative'
-      }),
-      cB('progress-graph', {
-        position: 'relative'
-      }, [
-        cB('progress-graph-circle', [
-          c('svg', {
-            verticalAlign: 'bottom'
-          }),
-          cB('progress-graph-circle-fill', {
-            transition: `
-              opacity .3s ${cubicBezierEaseInOut},
-              stroke .3s ${cubicBezierEaseInOut},
-              stroke-dasharray .3s ${cubicBezierEaseInOut}
-            `
-          }, [
-            cM('empty', {
-              opacity: 0
-            })
-          ]),
-          cB('progress-graph-circle-rail', {
-            transition: `stroke .3s ${cubicBezierEaseInOut}`,
-            overflow: 'hidden',
-            stroke: railColor
-          })
-        ]),
-        cB('progress-graph-line', [
-          cM('indicator-inside', [
-            cB('progress-graph-line-rail', {
-              height: '21px',
-              borderRadius: '10.5px'
-            }, [
-              cB('progress-graph-line-fill', {
-                height: '21px',
-                borderRadius: '10.5px'
-              }),
-              cB('progress-graph-line-indicator', {
-                backgroundColor: 'transparent',
-                whiteSpace: 'nowrap',
-                textAlign: 'right',
-                marginLeft: '14px',
-                marginRight: '14px',
-                height: '21px',
-                fontSize,
-                lineHeight: '21px',
-                color: textColorLineInner,
-                fontWeight: fontWeightStrong,
-                transition: `color .3s ${cubicBezierEaseInOut}`
-              })
-            ])
-          ]),
-          cM('indicator-inside-label', {
-            height: '21px',
-            display: 'flex',
-            alignItems: 'center'
-          }, [
-            cB('progress-graph-line-rail', {
-              flex: 1,
-              transition: `background-color .3s ${cubicBezierEaseInOut}`
-            }),
-            cB('progress-graph-line-indicator', {
-              raw: `
-                font-size: ${fontSize};
-                transform: translateZ(0);
-                display: flex;
-                vertical-align: middle;
-                height: 21px;
-                line-height: 21px;
-                padding: 0 10px;
-                border-radius: 10.5px;
-                position: absolute;
-                white-space: nowrap;
-              `,
-              color: textColorLineInner,
-              transition: `
-                right .2s ${cubicBezierEaseInOut},
-                color .3s ${cubicBezierEaseInOut},
-                background-color .3s ${cubicBezierEaseInOut}
-              `,
-              fontWeight: fontWeightStrong
-            })
-          ]),
-          cB('progress-graph-line-rail', {
-            raw: `
-              position: relative;
-              overflow: hidden;
-              height: ${railHeight};
-              border-radius: 5px;
-            `,
-            backgroundColor: railColor,
-            transition: `background-color .3s ${cubicBezierEaseInOut}`
-          }, [
-            cB('progress-graph-line-fill', {
-              raw: `
-                position: relative;
-                border-radius: 5px;
-                height: inherit;
-                width: 100%;
-                max-width: 0%;
-                transition:
-                  background-color .3s ${cubicBezierEaseInOut},
-                  max-width .2s ${cubicBezierEaseInOut};
-              `
-            })
-          ])
-        ])
-      ]),
-      ['info', 'success', 'warning', 'error', 'default'].map(status => {
-        const {
-          $local: {
-            lineBgProcessing,
-            textColorCircle,
-            [createKey('iconColor', status)]: iconColor,
-            [createKey('fillColor', status)]: fillColor
-          },
-          $global: {
-            cubicBezierEaseInOut
-          }
-        } = props
-        return cM(status, [
-          cB('progress-text', {
-            color: textColorCircle
-          }),
-          cB('progress-icon', [
-            cB('icon', {
-              color: iconColor
-            })
-          ]),
-          cB('progress-graph', [
-            cB('progress-graph-circle', [
-              cB('progress-graph-circle-fill', {
-                stroke: fillColor
-              })
-            ]),
-            cB('progress-graph-line', [
-              cB('progress-graph-line-rail', [
-                cB('progress-graph-line-fill', {
-                  background: fillColor
-                }, [
-                  cM('processing', [
-                    c('&::after', {
-                      content: "''",
-                      backgroundImage: lineBgProcessing,
-                      animation: `progress-processing-animation 2s ${cubicBezierEaseInOut} infinite`
-                    })
-                  ])
-                ])
-              ]),
-              cB('progress-graph-line-indicator', {
-                background: fillColor
-              })
-            ])
-          ])
-        ])
-      })
-    ])
-  },
-  c('@keyframes progress-processing-animation', {
-    raw: `
-      0% {
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        right: 100%;
-        opacity: 1;
-      }
-      66% {
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        right: 0;
-        opacity: 0;
-      }
-      100% {
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        right: 0;
-        opacity: 0;
-      }
-    `
-  })
-])

src/progress/styles/dark.js

@@ -1,12 +1,13 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseDark } from '../../_styles/base'
 import { iconDark } from '../../icon/styles'
+import { commonDark } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'Progress',
-  theme: 'dark',
-  peer: [baseDark, iconDark],
-  getLocalVars (vars) {
+  common: commonDark,
+  peers: {
+    Icon: iconDark
+  },
+  self (vars) {
     const {
       infoColor,
       successColor,
@@ -40,4 +41,4 @@ export default create({
         'linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .5) 100%)'
     }
   }
-})
+}

src/progress/styles/light.js

@@ -1,12 +1,13 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseLight } from '../../_styles/base'
 import { iconLight } from '../../icon/styles'
+import { commonLight } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'Progress',
-  theme: 'light',
-  peer: [baseLight, iconLight],
-  getLocalVars (vars) {
+  common: commonLight,
+  peers: {
+    Icon: iconLight
+  },
+  self (vars) {
     const {
       infoColor,
       successColor,
@@ -40,4 +41,4 @@ export default create({
         'linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .5) 100%)'
     }
   }
-})
+}

src/styles.js

@@ -60,7 +60,7 @@ export { baseDark, baseLight } from './_styles/base'
 // export { popconfirmDark, popconfirmLight } from './popconfirm/styles'
 // export { popoverDark, popoverLight } from './popover/styles'
 // export { popselectDark, popselectLight } from './popselect/styles'
-export { progressDark, progressLight } from './progress/styles'
+// export { progressDark, progressLight } from './progress/styles'
 export { radioDark, radioLight } from './radio/styles'
 export { rateDark, rateLight } from './rate/styles'
 export { resultDark, resultLight } from './result/styles'

src/styles.new.js

@@ -42,6 +42,7 @@ import { paginationDark } from './pagination/styles'
 import { popconfirmDark } from './popconfirm/styles'
 import { popoverDark } from './popover/styles'
 import { popselectDark } from './popselect/styles'
+import { progressDark } from './progress/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -87,5 +88,6 @@ export const darkTheme = {
   Pagination: paginationDark,
   Popconfirm: popconfirmDark,
   Popover: popoverDark,
-  Popselect: popselectDark
+  Popselect: popselectDark,
+  Progress: progressDark
 }