feat(autoComplete): css in js (#233)

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

src/AutoComplete/index.js

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

src/_styles/AutoComplete.scss

@@ -1,5 +1,5 @@
-@import './mixins/mixins.scss';
+// @import './mixins/mixins.scss';
 
-@include b(auto-complete-menu) {
+// @include b(auto-complete-menu) {
-  @include fade-in-scale-up-transition(auto-complete-menu, $original-transition: (background-color .3s $--n-ease-in-out-cubic-bezier));
+//   @include fade-in-scale-up-transition(auto-complete-menu, $original-transition: (background-color .3s $--n-ease-in-out-cubic-bezier));
-}
+// }

src/autoComplete/index.js

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

src/autoComplete/src/AutoComplete.vue

@@ -36,7 +36,7 @@
         ref="content"
         class="n-positioning-content"
       >
-        <transition name="n-auto-complete-menu-transition">
+        <transition name="n-fade-in-scale-up-transition">
           <n-base-select-menu
             v-if="active"
             ref="contentInner"
@@ -71,9 +71,11 @@ import themeable from '../../_mixins/themeable'
 import asformitem from '../../_mixins/asformitem'
 import NBaseSelectMenu from '../../_base/select-menu'
 import { mapAutoCompleteOptionsToSelectOptions } from './utils'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles'
 
 export default {
-  name: 'NAutoComplete',
+  name: 'AutoComplete',
   components: {
     NInput,
     NBaseSelectMenu
@@ -87,7 +89,8 @@ export default {
     detachable,
     zindexable,
     placeable,
-    asformitem()
+    asformitem(),
+    usecssr(styles)
   ],
   props: {
     placeholder: {

src/autoComplete/src/styles/index.js

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

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

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

src/autoComplete/styles/dark.js

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

src/autoComplete/styles/light.js

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

src/index.js

@@ -58,7 +58,7 @@ import Menu from './Menu'
 import Avatar from './avatar'
 import Result from './Result'
 import Thing from './Thing'
-import AutoComplete from './AutoComplete'
+import AutoComplete from './autoComplete'
 import Empty from './Empty'
 import Element from './element'
 import Log from './Log'
@@ -107,6 +107,8 @@ import transferLightStyle from './transfer/styles/light'
 import transferDarkStyle from './transfer/styles/dark'
 import typographyDarkStyle from './typography/styles/light'
 import typographyLightStyle from './typography/styles/dark'
+import autoComplateLightStyle from './autoComplete/styles/light'
+import autoComplateDarkStyle from './autoComplete/styles/dark'
 import backTopLightStyle from './backTop/styles/light'
 import backTopDarkStyle from './backTop/styles/dark'
 
@@ -238,6 +240,8 @@ export default create({
     transferDarkStyle,
     typographyLightStyle,
     typographyDarkStyle,
+    autoComplateLightStyle,
+    autoComplateDarkStyle,
     backTopLightStyle,
     backTopDarkStyle,
     // Can be remove after refactoring