refactor(auto-complete): new theme

src/_mixins/use-config.js

@@ -9,8 +9,6 @@ export default function useConfig (props) {
       if (bordered !== undefined) return bordered
       return NConfigProvider?.mergedBordered || true
     }),
-    namespace () {
-      return NConfigProvider?.namespace
-    }
+    namespace: computed(() => NConfigProvider?.namespace)
   }
 }

src/auto-complete/src/AutoComplete.vue

@@ -15,11 +15,10 @@
           :handleFocus="handleFocus"
           :handleBlur="handleBlur"
           :value="mergedValue"
-          :theme="mergedTheme"
         >
           <n-input
             :bordered="mergedBordered"
-            :theme="mergedTheme"
+            :theme="'light'"
             :value="mergedValue"
             :placeholder="placeholder"
             :size="mergedSize"
@@ -48,7 +47,8 @@
           v-clickoutside="handleClickOutsideMenu"
           auto-pending
           class="n-auto-complete-menu"
-          :theme="mergedTheme"
+          :style="cssVars"
+          :theme="'light'"
           :pattern="value"
           :tree-mate="treeMate"
           :multiple="false"
@@ -61,17 +61,18 @@
 </template>
 
 <script>
-import { ref, toRef } from 'vue'
+import { ref, toRef, computed } from 'vue'
 import { createTreeMate } from 'treemate'
 import { VBinder, VTarget, VFollower } from 'vueuc'
 import { clickoutside } from 'vdirs'
 import { useIsMounted, useMergedState } from 'vooks'
-import { configurable, themeable, useFormItem, withCssr } from '../../_mixins'
+import { useFormItem, useTheme, useConfig } from '../../_mixins'
 import { call, warn, useAdjustedTo } from '../../_utils'
 import { NBaseSelectMenu } from '../../_base'
 import { NInput } from '../../input'
-import styles from './styles'
+import { autoCompleteLight } from '../styles'
 import { mapAutoCompleteOptionsToSelectOptions } from './utils'
+import style from './styles/index.cssr'
 
 export default {
   name: 'AutoComplete',
@@ -85,7 +86,6 @@ export default {
   directives: {
     clickoutside
   },
-  mixins: [configurable, themeable, withCssr(styles)],
   inheritAttrs: false,
   props: {
     bordered: {
@@ -164,6 +164,13 @@ export default {
       controlledValueRef,
       uncontrolledValueRef
     )
+    const themeRef = useTheme(
+      'AutoComplete',
+      'AutoComplete',
+      style,
+      autoCompleteLight,
+      props
+    )
     return {
       uncontrolledValue: uncontrolledValueRef,
       mergedValue: mergedValueRef,
@@ -173,6 +180,15 @@ export default {
       isComposing: ref(false),
       menuRef: ref(null),
       triggerRef: ref(null),
+      cssVars: computed(() => {
+        const {
+          common: { cubicBezierEaseInOut }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut
+        }
+      }),
+      ...useConfig(props),
       ...useFormItem(props)
     }
   },

src/auto-complete/src/styles/index.cssr.js

@@ -0,0 +1,10 @@
+import { cB } from '../../../_utils/cssr'
+import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.js'
+
+// vars:
+// --bezier
+export default cB('auto-complete-menu', [
+  fadeInScaleUpTransition({
+    originalTransition: 'background-color .3s var(--bezier)'
+  })
+])

src/auto-complete/src/styles/index.js

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

src/auto-complete/src/styles/themed-base.cssr.js

@@ -1,17 +0,0 @@
-import { c, cTB } from '../../../_utils/cssr'
-import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.js'
-
-export default c([
-  ({ props }) => {
-    const {
-      $global: {
-        cubicBezierEaseInOut
-      }
-    } = props
-    return cTB('auto-complete-menu', [
-      fadeInScaleUpTransition({
-        originalTransition: `background-color .3s ${cubicBezierEaseInOut}`
-      })
-    ])
-  }
-])

src/auto-complete/styles/dark.js

@@ -1,12 +1,9 @@
-import create from '../../_styles/utils/create-component-base'
 import { baseSelectMenuDark } from '../../_base/select-menu/styles'
 import { inputDark } from '../../input/styles'
+import { commonDark } from '../../_styles/new-common'
 
-export default create({
-  theme: 'dark',
-  name: 'AutoComplete',
-  peer: [baseSelectMenuDark, inputDark],
-  getLocalVars () {
-    return {}
-  }
-})
+export default {
+  common: commonDark,
+  self () {},
+  peers: [baseSelectMenuDark, inputDark]
+}

src/auto-complete/styles/light.js

@@ -1,12 +1,9 @@
-import create from '../../_styles/utils/create-component-base'
 import { baseSelectMenuLight } from '../../_base/select-menu/styles'
 import { inputLight } from '../../input/styles'
+import { commonLight } from '../../_styles/new-common'
 
-export default create({
-  theme: 'light',
-  name: 'AutoComplete',
-  peer: [baseSelectMenuLight, inputLight],
-  getLocalVars () {
-    return {}
-  }
-})
+export default {
+  common: commonLight,
+  self () {},
+  peers: [baseSelectMenuLight, inputLight]
+}

src/styles.js

@@ -20,7 +20,7 @@ export { baseDark, baseLight } from './_styles/base'
 // export { affixDark, affixLight } from './affix/styles'
 // export { alertDark, alertLight } from './alert/styles'
 // export { anchorDark, anchorLight } from './anchor/styles'
-export { autoCompleteDark, autoCompleteLight } from './auto-complete/styles'
+// export { autoCompleteDark, autoCompleteLight } from './auto-complete/styles'
 export { avatarDark, avatarLight } from './avatar/styles'
 export { backTopDark, backTopLight } from './back-top/styles'
 export { badgeDark, badgeLight } from './badge/styles'

src/styles.new.js

@@ -3,11 +3,13 @@ import { dividerDark } from './divider/styles'
 import { alertDark } from './alert/styles'
 import { affixDark } from './affix/styles'
 import { anchorDark } from './anchor/styles'
+import { autoCompleteDark } from './auto-complete/styles'
 
 export const darkTheme = {
   common: commonDark,
-  Affix: affixDark,
   Alert: alertDark,
+  Affix: affixDark,
   Anchor: anchorDark,
+  AutoComplete: autoCompleteDark,
   Divider: dividerDark
 }