refactor(anchor): use cssr

* feat(anchor): css in js

* chore: fix code review

* chore:fix code review

* chore: fix code  review

* chore: fix code smell

Co-authored-by: Lecong Zhang <50313260+tskirby@users.noreply.github.com>

src/Anchor/index.js

@@ -1,10 +0,0 @@
-/* istanbul ignore file */
-import Anchor from './src/AnchorAdapter.vue'
-import AnchorLink from './src/Link.vue'
-
-Anchor.install = function (Vue) {
-  Vue.component(Anchor.name, Anchor)
-  Vue.component(AnchorLink.name, AnchorLink)
-}
-
-export default Anchor

src/_styles/Anchor.scss

@@ -1,93 +1,93 @@
-@import './mixins/mixins.scss';
+// @import './mixins/mixins.scss';
 
-@include themes-mixin {
-  @include b(anchor) {
-    @include once {
-      padding-left: 4px;
-      position: relative;
-    }
-    @include b(anchor-link-background) {
-      @include once {
-        position: absolute;
-        left: 2px;
-        width: 100%;
-        max-width: 0;
-        transition: top .15s $--n-ease-in-out-cubic-bezier, max-width .15s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
-        border-top-right-radius: 10.5px;
-        border-bottom-right-radius: 10.5px;
-      }
-      background-color: $--anchor-link-background-color;
-    }
-    @include b(anchor-rail) {
-      @include once {
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        width: 4px;
-        border-radius: 2px;
-        transition: background-color .3s $--n-ease-in-out-cubic-bezier;
-        overflow: hidden;
-      }
-      background-color: $--anchor-rail-background-color;
-      @include e(bar) {
-        @include once {
-          position: absolute;
-          left: 0;
-          transition: top .15s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
-          width: 4px;
-          height: 21px;
-          background-color: transparent;
-        }
-        @include m(active) {
-          background-color: $--n-primary-color;
-        }
-      }
-      @include once {
-        & + {
-          @include b(anchor-link) {
-            margin-top: 0;
-          }
-        }
-      }
-    }
-    @include b(anchor-link) {
-      @include once {
-        margin-top: .5em;
-        padding-left: 16px;
-        position: relative;
-        line-height: 1.5em;
-        font-size: 13px;
-        min-height: 1.5em;
-        display: flex;
-        flex-direction: column;
-        & > {
-          @include b(anchor-link) {
-            padding-left: 16px;
-          }
-        }
-      }
-      @include e(title) {
-        @include once {
-          outline: none;
-          max-width: 100%;
-          text-decoration: none;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          cursor: pointer;
-          display: inline-block;
-          padding-right: 16px;
-          transition: color .3s $--n-ease-in-out-cubic-bezier;
-        }
-        color: map-get($--anchor-link-title-text-color, 'default');
-        &:hover, &:focus {
-          color: map-get($--anchor-link-title-text-color, 'hover');
-        }
-        @include m(active) {
-          color: map-get($--anchor-link-title-text-color, 'active');
-        }
-      }
-    }
-  }
-}
+// @include themes-mixin {
+//   @include b(anchor) {
+//     @include once {
+//       padding-left: 4px;
+//       position: relative;
+//     }
+//     @include b(anchor-link-background) {
+//       @include once {
+//         position: absolute;
+//         left: 2px;
+//         width: 100%;
+//         max-width: 0;
+//         transition: top .15s $--n-ease-in-out-cubic-bezier, max-width .15s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
+//         border-top-right-radius: 10.5px;
+//         border-bottom-right-radius: 10.5px;
+//       }
+//       background-color: $--anchor-link-background-color;
+//     }
+//     @include b(anchor-rail) {
+//       @include once {
+//         position: absolute;
+//         left: 0;
+//         top: 0;
+//         bottom: 0;
+//         width: 4px;
+//         border-radius: 2px;
+//         transition: background-color .3s $--n-ease-in-out-cubic-bezier;
+//         overflow: hidden;
+//       }
+//       background-color: $--anchor-rail-background-color;
+//       @include e(bar) {
+//         @include once {
+//           position: absolute;
+//           left: 0;
+//           transition: top .15s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
+//           width: 4px;
+//           height: 21px;
+//           background-color: transparent;
+//         }
+//         @include m(active) {
+//           background-color: $--n-primary-color;
+//         }
+//       }
+//       @include once {
+//         & + {
+//           @include b(anchor-link) {
+//             margin-top: 0;
+//           }
+//         }
+//       }
+//     }
+//     @include b(anchor-link) {
+//       @include once {
+//         margin-top: .5em;
+//         padding-left: 16px;
+//         position: relative;
+//         line-height: 1.5em;
+//         font-size: 13px;
+//         min-height: 1.5em;
+//         display: flex;
+//         flex-direction: column;
+//         & > {
+//           @include b(anchor-link) {
+//             padding-left: 16px;
+//           }
+//         }
+//       }
+//       @include e(title) {
+//         @include once {
+//           outline: none;
+//           max-width: 100%;
+//           text-decoration: none;
+//           white-space: nowrap;
+//           text-overflow: ellipsis;
+//           overflow: hidden;
+//           cursor: pointer;
+//           display: inline-block;
+//           padding-right: 16px;
+//           transition: color .3s $--n-ease-in-out-cubic-bezier;
+//         }
+//         color: map-get($--anchor-link-title-text-color, 'default');
+//         &:hover, &:focus {
+//           color: map-get($--anchor-link-title-text-color, 'hover');
+//         }
+//         @include m(active) {
+//           color: map-get($--anchor-link-title-text-color, 'active');
+//         }
+//       }
+//     }
+//   }
+// }

src/_utils/cssr/index.js

@@ -53,4 +53,4 @@ function cTB (selector, ...rest) {
   ])
 }
 
-export { c, cTB, cB, cE, cM, cNotM, insideFormItem, insideModal, namespace, prefix }
+export { c, cTB, cB, cE, cM, cNotM, insideFormItem, insideModal, prefix, namespace }

src/anchor/index.js

@@ -0,0 +1,10 @@
+/* istanbul ignore file */
+import Anchor from './src/AnchorAdapter.vue'
+import AnchorLink from './src/Link.vue'
+
+Anchor.install = function (Vue, naive) {
+  Vue.component(naive.componentPrefix + Anchor.name, Anchor)
+  Vue.component(naive.componentPrefix + AnchorLink.name, AnchorLink)
+}
+
+export default Anchor

src/anchor/src/AnchorAdapter.vue

@@ -31,13 +31,22 @@
 <script>
 import NBaseAnchor from './BaseAnchor'
 import NAffix from '../../affix'
+import usecssr from '../../_mixins/usecssr'
+import themeable from '../../_mixins/themeable'
+import withapp from '../../_mixins/withapp'
+import styles from './styles'
 
 export default {
-  name: 'NAnchor',
+  name: 'Anchor',
   components: {
     NBaseAnchor,
     NAffix
   },
+  mixins: [
+    withapp,
+    themeable,
+    usecssr(styles)
+  ],
   props: {
     top: {
       type: Number,

src/anchor/src/Link.vue

@@ -22,7 +22,7 @@ import collectable from '../../_mixins/collectable'
 import simlulatedComputed from '../../_mixins/simulatedComputed'
 
 export default {
-  name: 'NAnchorLink',
+  name: 'AnchorLink',
   inject: {
     NAnchor: {
       default: null

src/anchor/src/styles/index.js

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

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

@@ -0,0 +1,119 @@
+import { c, cE, cB, cM, cTB } from '../../../_utils/cssr'
+
+export default c([
+  ({ props }) => {
+    const {
+      action,
+      railBackgroundColor,
+      linkBackgroundColor,
+      railActiveBackgroundColor
+    } = props.$local
+    const {
+      default: defaultColor,
+      hover: hoverColor,
+      active: activeColor
+    } = action
+    const {
+      easeInOutCubicBezier
+    } = props.$base
+    return cTB('anchor', {
+      raw: `
+        padding-left: 4px;
+        position: relative;
+      `
+    }, [
+      cB('anchor-link-background', {
+        raw: `
+          position: absolute;
+          left: 2px;
+          width: 100%;
+          max-width: 0;
+          border-top-right-radius: 10.5px;
+          border-bottom-right-radius: 10.5px;
+        `,
+        backgroundColor: linkBackgroundColor,
+        transition: `
+          top .15s ${easeInOutCubicBezier},
+          max-width .15s ${easeInOutCubicBezier},
+          background-color .3s ${easeInOutCubicBezier}
+        `
+      }),
+      cB('anchor-rail', {
+        raw: `
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 4px;
+          border-radius: 2px;
+          overflow: hidden;
+        `,
+        transition: `background-color .3s ${easeInOutCubicBezier}`,
+        backgroundColor: railBackgroundColor
+      }, [
+        cE('bar', {
+          raw: `
+            position: absolute;
+            left: 0;
+            width: 4px;
+            height: 21px;
+            background-color: transparent;
+          `,
+          transition: `
+            top .15s ${easeInOutCubicBezier},
+            background-color .3s ${easeInOutCubicBezier}
+          `
+        }, [
+          cM('active', {
+            backgroundColor: railActiveBackgroundColor
+          })
+        ]),
+        c('& +', [
+          cB('anchor-link', {
+            marginTop: 0
+          })
+        ])
+      ]),
+      cB('anchor-link', {
+        raw: `
+          margin-top: .5em;
+          padding-left: 16px;
+          position: relative;
+          line-height: 1.5em;
+          font-size: 13px;
+          min-height: 1.5em;
+          display: flex;
+          flex-direction: column;
+        `
+      }, [
+        c('& +', [
+          cB('anchor-link', {
+            paddingLeft: '16px'
+          })
+        ]),
+        cE('title', {
+          raw: `
+            outline: none;
+            max-width: 100%;
+            text-decoration: none;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            cursor: pointer;
+            display: inline-block;
+            padding-right: 16px;
+          `,
+          transition: `color .3s ${easeInOutCubicBezier}`,
+          color: defaultColor
+        }, [
+          c('&:hover, &:focus', {
+            color: hoverColor
+          }),
+          cM('active', {
+            color: activeColor
+          })
+        ])
+      ])
+    ])
+  }
+])

src/anchor/styles/dark.js

@@ -0,0 +1,30 @@
+import create from '../../styles/_utils/create-component-base'
+import { changeColor } from '../../../src/_utils/color/index'
+
+export default create({
+  theme: 'dark',
+  name: 'Anchor',
+  getDerivedVariables ({ base, derived }) {
+    const {
+      borderRadius,
+      primaryDefault
+    } = base
+    const alphaAnchor = '0.15'
+    const {
+      primaryColor,
+      railBackgroundOverlayColor,
+      secondaryTextOverlayColor
+    } = derived
+    return {
+      borderRadius,
+      railActiveBackgroundColor: primaryColor,
+      linkBackgroundColor: changeColor(primaryDefault, { alpha: alphaAnchor }),
+      railBackgroundColor: railBackgroundOverlayColor,
+      action: {
+        default: secondaryTextOverlayColor,
+        hover: primaryColor,
+        active: primaryColor
+      }
+    }
+  }
+})

src/anchor/styles/light.js

@@ -0,0 +1,30 @@
+import create from '../../styles/_utils/create-component-base'
+import { changeColor } from '../../../src/_utils/color/index'
+
+export default create({
+  theme: 'light',
+  name: 'Anchor',
+  getDerivedVariables ({ base, derived }) {
+    const {
+      borderRadius,
+      primaryDefault
+    } = base
+    const alphaAnchor = '0.15'
+    const {
+      railBackgroundOverlayColor,
+      primaryColor,
+      secondaryTextOverlayColor
+    } = derived
+    return {
+      borderRadius,
+      railActiveBackgroundColor: primaryColor,
+      linkBackgroundColor: changeColor(primaryDefault, { alpha: alphaAnchor }),
+      railBackgroundColor: railBackgroundOverlayColor,
+      action: {
+        default: secondaryTextOverlayColor,
+        hover: primaryColor,
+        active: primaryColor
+      }
+    }
+  }
+})

src/index.js

@@ -36,7 +36,7 @@ import Divider from './Divider'
 import Collapse from './Collapse'
 import Timeline from './Timeline'
 import Popconfirm from './Popconfirm'
-import Anchor from './Anchor'
+import Anchor from './anchor'
 import Dropdown from './Dropdown'
 import Popselect from './Popselect'
 import ConfigProvider from './config-provider'
@@ -113,6 +113,8 @@ import autoComplateLightStyle from './auto-complete/styles/light'
 import autoComplateDarkStyle from './auto-complete/styles/dark'
 import codeLightStyle from './code/styles/light'
 import codeDarkStyle from './code/styles/dark'
+import anchorDarkStyle from './anchor/styles/dark'
+import anchorLightStyle from './anchor/styles/light'
 import breadcrumbDarkStyle from './breadcrumb/styles/dark'
 import breadcrumbLightStyle from './breadcrumb/styles/light'
 
@@ -250,6 +252,8 @@ export default create({
     backTopDarkStyle,
     codeLightStyle,
     codeDarkStyle,
+    anchorDarkStyle,
+    anchorLightStyle,
     breadcrumbDarkStyle,
     breadcrumbLightStyle,
     // Can be remove after refactoring

src/styles/base/dark.js

@@ -30,7 +30,7 @@ export default create({
       alphaActive: '0.03',
 
       alphaAvatar: '0.18',
-      alphaRail: '0.20',
+      alphaRail: '0.2',
       alphaProgressRail: '0.12',
       alphaBorder: '0.24',
       alphaDivider: '0.09',

src/styles/base/light.js

@@ -1,7 +1,6 @@
 import create from '../_utils/create-theme-base.js'
 import { read, composite } from '../../_utils/color/index.js'
 import commonVariables from '../_common-style/base.js'
-
 export default create({
   theme: 'light',
   name: 'base',