From cf2b58b3043b5cb2c5dc46e5ba1359368781fcf9 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 3 Jan 2021 00:42:14 +0800
Subject: [PATCH] refactor(drawer): new theme
---
src/drawer/src/Drawer.vue | 38 ++++++--
src/drawer/src/DrawerBodyWrapper.vue | 14 +--
src/drawer/src/styles/index.cssr.js | 90 ++++++++++++++++++
src/drawer/src/styles/index.js | 9 --
src/drawer/src/styles/themed-base.cssr.js | 109 ----------------------
src/drawer/styles/dark.js | 23 +++--
src/drawer/styles/light.js | 23 +++--
src/styles.js | 2 +-
src/styles.new.js | 4 +-
9 files changed, 155 insertions(+), 157 deletions(-)
create mode 100644 src/drawer/src/styles/index.cssr.js
delete mode 100644 src/drawer/src/styles/index.js
delete mode 100644 src/drawer/src/styles/themed-base.cssr.js
diff --git a/src/drawer/src/Drawer.vue b/src/drawer/src/Drawer.vue
index 46219ceff..e6c2e97c1 100644
--- a/src/drawer/src/Drawer.vue
+++ b/src/drawer/src/Drawer.vue
@@ -6,20 +6,20 @@
:class="{
[namespace]: namespace
}"
+ :style="cssVars"
>
@@ -28,15 +28,17 @@
diff --git a/src/drawer/src/DrawerBodyWrapper.vue b/src/drawer/src/DrawerBodyWrapper.vue
index 94141f7a0..57d3d9c5c 100644
--- a/src/drawer/src/DrawerBodyWrapper.vue
+++ b/src/drawer/src/DrawerBodyWrapper.vue
@@ -18,8 +18,7 @@
$attrs.class,
`n-drawer--${placement}-placement`,
{
- [`n-drawer--native-scrollbar`]: nativeScrollbar,
- [`n-${theme}-theme`]: theme
+ [`n-drawer--native-scrollbar`]: nativeScrollbar
}
]"
>
@@ -30,6 +29,7 @@
v-else
v-bind="scrollbarProps"
content-class="n-drawer-scroll-content"
+ :theme="'light'"
>
@@ -39,10 +39,10 @@
diff --git a/src/drawer/src/styles/index.cssr.js b/src/drawer/src/styles/index.cssr.js
new file mode 100644
index 000000000..746dd928a
--- /dev/null
+++ b/src/drawer/src/styles/index.cssr.js
@@ -0,0 +1,90 @@
+import { c, cB, cM, cNotM } from '../../../_utils/cssr'
+import slideInFromRightTransition from '../../../_styles/transitions/slide-in-from-right'
+import slideInFromLeftTransition from '../../../_styles/transitions/slide-in-from-left'
+import slideInFromTopTransition from '../../../_styles/transitions/slide-in-from-top'
+import slideInFromBottomTransition from '../../../_styles/transitions/slide-in-from-bottom'
+import fadeInTransition from '../../../_styles/transitions/fade-in'
+
+// vars:
+// --line-height
+// --color
+// --text-color
+// --box-shadow
+// --bezier
+// --bezier-out
+// --bezier-in
+export default c([
+ cB('drawer', `
+ line-height: var(--line-height);
+ overflow: auto;
+ position: absolute;
+ pointer-events: all;
+ box-shadow: var(--box-shadow);
+ transition:
+ background-color .3s var(--bezier),
+ color .3s var(--bezier);
+ background-color: var(--color);
+ color: var(--text-color);
+ `,
+ [
+ slideInFromRightTransition(),
+ slideInFromLeftTransition(),
+ slideInFromTopTransition(),
+ slideInFromBottomTransition(),
+ cM('native-scrollbar', {
+ boxSizing: 'border-box',
+ padding: '16px 24px'
+ }),
+ cNotM('native-scrollbar', [
+ cB('drawer-scroll-content', {
+ boxSizing: 'border-box',
+ padding: '16px 24px'
+ })
+ ]),
+ cM('right-placement', `
+ top: 0;
+ bottom: 0;
+ right: 0;
+ `),
+ cM('left-placement', `
+ top: 0;
+ bottom: 0;
+ left: 0;
+ `),
+ cM('top-placement', `
+ top: 0;
+ left: 0;
+ right: 0;
+ `),
+ cM('bottom-placement', `
+ left: 0;
+ bottom: 0;
+ right: 0;
+ `)
+ ]),
+ cB('drawer-mask', `
+ background-color: rgba(0, 0, 0, .3);
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ pointer-events: all;
+ `, [
+ fadeInTransition({
+ enterDuration: '0.3s',
+ leaveDuration: '0.3s',
+ enterCubicBezier: 'var(--bezier-in)',
+ leaveCubicBezier: 'var(--bezier-out)'
+ })
+ ]),
+ cB('drawer-container', `
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ pointer-events: none;
+ overflow: hidden;
+ `)
+])
diff --git a/src/drawer/src/styles/index.js b/src/drawer/src/styles/index.js
deleted file mode 100644
index fd9338f5d..000000000
--- a/src/drawer/src/styles/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import baseStyle from './themed-base.cssr.js'
-
-export default [
- {
- key: 'mergedTheme',
- watch: ['mergedTheme'],
- CNode: baseStyle
- }
-]
diff --git a/src/drawer/src/styles/themed-base.cssr.js b/src/drawer/src/styles/themed-base.cssr.js
deleted file mode 100644
index 7aff73948..000000000
--- a/src/drawer/src/styles/themed-base.cssr.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import { c, cTB, cB, cM, cNotM } from '../../../_utils/cssr'
-import slideInFromRightTransition from '../../../_styles/transitions/slide-in-from-right'
-import slideInFromLeftTransition from '../../../_styles/transitions/slide-in-from-left'
-import slideInFromTopTransition from '../../../_styles/transitions/slide-in-from-top'
-import slideInFromBottomTransition from '../../../_styles/transitions/slide-in-from-bottom'
-import fadeInTransition from '../../../_styles/transitions/fade-in'
-
-export default c([
- ({ props }) => {
- const {
- color: backgroundColor,
- textColor,
- boxShadow
- } = props.$local
- const {
- cubicBezierEaseInOut,
- cubicBezierEaseIn,
- cubicBezierEaseOut
- } = props.$global
- return [
- cTB('drawer', {
- raw: `
- overflow: auto;
- position: absolute;
- pointer-events: all;
- box-shadow: ${boxShadow};
- transition:
- background-color .3s ${cubicBezierEaseInOut},
- color .3s ${cubicBezierEaseInOut};
- `,
- backgroundColor,
- color: textColor
- },
- [
- slideInFromRightTransition(),
- slideInFromLeftTransition(),
- slideInFromTopTransition(),
- slideInFromBottomTransition(),
- cM('native-scrollbar', {
- boxSizing: 'border-box',
- padding: '16px 24px'
- }),
- cNotM('native-scrollbar', [
- cB('drawer-scroll-content', {
- boxSizing: 'border-box',
- padding: '16px 24px'
- })
- ]),
- cM('right-placement', {
- raw: `
- top: 0;
- bottom: 0;
- right: 0;
- `
- }),
- cM('left-placement', {
- raw: `
- top: 0;
- bottom: 0;
- left: 0;
- `
- }),
- cM('top-placement', {
- raw: `
- top: 0;
- left: 0;
- right: 0;
- `
- }),
- cM('bottom-placement', {
- raw: `
- left: 0;
- bottom: 0;
- right: 0;
- `
- })
- ]),
- cB('drawer-mask', {
- raw: `
- background-color: rgba(0, 0, 0, .3);
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- pointer-events: all;
- `
- }, [
- fadeInTransition({
- enterDuration: '0.3s',
- leaveDuration: '0.3s',
- enterCubicBezier: cubicBezierEaseIn,
- leaveCubicBezier: cubicBezierEaseOut
- })
- ]),
- cB('drawer-container', {
- raw: `
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- pointer-events: none;
- overflow: hidden;
- `
- })
- ]
- }
-])
diff --git a/src/drawer/styles/dark.js b/src/drawer/styles/dark.js
index d48a2007a..9ffaf271a 100644
--- a/src/drawer/styles/dark.js
+++ b/src/drawer/styles/dark.js
@@ -1,15 +1,18 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseDark } from '../../_styles/base'
+import { commonDark } from '../../_styles/new-common'
+import { scrollbarDark } from '../../scrollbar/styles'
-export default create({
- theme: 'dark',
+export default {
name: 'Drawer',
- peer: [baseDark],
- getLocalVars (vars) {
+ common: commonDark,
+ peers: {
+ Scrollbar: scrollbarDark
+ },
+ self (vars) {
+ const { modalColor, textColor2Overlay, boxShadow3 } = vars
return {
- color: vars.modalColor,
- textColor: vars.textColor2Overlay,
- boxShadow: vars.boxShadow3
+ color: modalColor,
+ textColor: textColor2Overlay,
+ boxShadow: boxShadow3
}
}
-})
+}
diff --git a/src/drawer/styles/light.js b/src/drawer/styles/light.js
index 225fb0c40..afc891565 100644
--- a/src/drawer/styles/light.js
+++ b/src/drawer/styles/light.js
@@ -1,15 +1,18 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseLight } from '../../_styles/base'
+import { commonLight } from '../../_styles/new-common'
+import { scrollbarLight } from '../../scrollbar/styles'
-export default create({
- theme: 'light',
+export default {
name: 'Drawer',
- peer: [baseLight],
- getLocalVars (vars) {
+ common: commonLight,
+ peers: {
+ Scrollbar: scrollbarLight
+ },
+ self (vars) {
+ const { modalColor, textColor2Overlay, boxShadow3 } = vars
return {
- color: vars.modalColor,
- textColor: vars.textColor2Overlay,
- boxShadow: vars.boxShadow3
+ color: modalColor,
+ textColor: textColor2Overlay,
+ boxShadow: boxShadow3
}
}
-})
+}
diff --git a/src/styles.js b/src/styles.js
index e7c1ee196..c91f10a66 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -36,7 +36,7 @@ export { baseDark, baseLight } from './_styles/base'
// export { descriptionsDark, descriptionsLight } from './descriptions/styles'
// export { dialogDark, dialogLight } from './dialog/styles'
// export { dividerDark, dividerLight } from './divider/styles'
-export { drawerDark, drawerLight } from './drawer/styles'
+// export { drawerDark, drawerLight } from './drawer/styles'
export { dropdownDark, dropdownLight } from './dropdown/styles'
export { dynamicInputDark, dynamicInputLight } from './dynamic-input/styles'
export { dynamicTagsDark, dynamicTagsLight } from './dynamic-tags/styles'
diff --git a/src/styles.new.js b/src/styles.new.js
index 25805be63..ec128cc18 100644
--- a/src/styles.new.js
+++ b/src/styles.new.js
@@ -18,6 +18,7 @@ import { datePickerDark } from './date-picker/styles'
import { descriptionsDark } from './descriptions/styles'
import { dialogDark } from './dialog/styles'
import { dividerDark } from './divider/styles'
+import { drawerDark } from './drawer/styles'
export const darkTheme = {
common: commonDark,
@@ -39,5 +40,6 @@ export const darkTheme = {
DatePicker: datePickerDark,
Descriptions: descriptionsDark,
Dialog: dialogDark,
- Divider: dividerDark
+ Divider: dividerDark,
+ Drawer: drawerDark
}