From d3d7f368b9446047d2cc5d56cdbb81265655b6b4 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Thu, 3 Sep 2020 12:20:19 +0800
Subject: [PATCH 1/4] refactor(base-select-menu): use cssr
---
.../select/zhCN/index.demo-entry.md | 1 +
.../components/select/zhCN/menuDebug.demo.md | 98 ++++++
src/_base/select-menu/src/SelectMenu.vue | 15 +-
src/_base/select-menu/src/styles/index.js | 20 ++
.../select-menu/src/styles/themed-base.js | 133 ++++++++
.../select-menu/src/styles/themed-size.js | 43 +++
src/_base/select-menu/styles/_common.js | 10 +
src/_base/select-menu/styles/dark.js | 24 ++
src/_base/select-menu/styles/light.js | 24 ++
src/_styles-in-js/common.js | 13 -
src/_styles-in-js/common.scss | 9 -
src/_styles/BaseSelectMenu.scss | 315 +++++++++---------
src/_styles/index.scss | 1 -
src/auto-complete/styles/dark.js | 6 +
src/auto-complete/styles/light.js | 6 +
src/cascader/src/Cascader.vue | 5 +-
src/cascader/src/CascaderSubmenu.vue | 5 +-
src/popselect/styles/dark.js | 4 +
src/popselect/styles/light.js | 4 +
src/select/styles/dark.js | 6 +
src/select/styles/light.js | 6 +
21 files changed, 562 insertions(+), 186 deletions(-)
create mode 100644 demo/documentation/components/select/zhCN/menuDebug.demo.md
create mode 100644 src/_base/select-menu/src/styles/index.js
create mode 100644 src/_base/select-menu/src/styles/themed-base.js
create mode 100644 src/_base/select-menu/src/styles/themed-size.js
create mode 100644 src/_base/select-menu/styles/_common.js
create mode 100644 src/_base/select-menu/styles/dark.js
create mode 100644 src/_base/select-menu/styles/light.js
delete mode 100644 src/_styles-in-js/common.js
delete mode 100644 src/_styles-in-js/common.scss
diff --git a/demo/documentation/components/select/zhCN/index.demo-entry.md b/demo/documentation/components/select/zhCN/index.demo-entry.md
index 7d81532ff..7d29b1ec3 100644
--- a/demo/documentation/components/select/zhCN/index.demo-entry.md
+++ b/demo/documentation/components/select/zhCN/index.demo-entry.md
@@ -19,6 +19,7 @@ action
fallback-option
change-debug
placeholder-debug
+menu-debug
```
## V-model
|prop|event|
diff --git a/demo/documentation/components/select/zhCN/menuDebug.demo.md b/demo/documentation/components/select/zhCN/menuDebug.demo.md
new file mode 100644
index 000000000..e3790c99d
--- /dev/null
+++ b/demo/documentation/components/select/zhCN/menuDebug.demo.md
@@ -0,0 +1,98 @@
+# Menu Debug
+```html
+
+
+
+
+```
+```js
+export default {
+ data () {
+ return {
+ value: 'song0',
+ value1: ['song0', 'song1'],
+ options: [
+ {
+ label: "Everybody's Got Something to Hide Except Me and My Monkey",
+ value: 'song0',
+ disabled: true
+ },
+ {
+ label: 'Drive My Car',
+ value: 'song1'
+ },
+ {
+ label: 'Norwegian Wood',
+ value: 'song2'
+ },
+ {
+ label: 'You Won\'t See',
+ value: 'song3',
+ disabled: true
+ },
+ {
+ label: 'Nowhere Man',
+ value: 'song4'
+ },
+ {
+ label: 'Think For Yourself',
+ value: 'song5'
+ },
+ {
+ label: 'The Word',
+ value: 'song6'
+ },
+ {
+ label: 'Michelle',
+ value: 'song7',
+ disabled: true
+ },
+ {
+ label: 'What goes on',
+ value: 'song8'
+ },
+ {
+ label: 'Girl',
+ value: 'song9'
+ },
+ {
+ label: 'I\'m looking through you',
+ value: 'song10'
+ },
+ {
+ label: 'In My Life',
+ value: 'song11'
+ },
+ {
+ label: 'Wait',
+ value: 'song12'
+ }
+ ]
+ }
+ }
+}
+```
+```css
+.n-select {
+ width: 180px;
+ margin: 0 12px 8px 0;
+}
+```
\ No newline at end of file
diff --git a/src/_base/select-menu/src/SelectMenu.vue b/src/_base/select-menu/src/SelectMenu.vue
index 8f990493d..2f244141f 100644
--- a/src/_base/select-menu/src/SelectMenu.vue
+++ b/src/_base/select-menu/src/SelectMenu.vue
@@ -120,10 +120,13 @@ import {
OPTION_TYPE
} from '../../../_utils/component/select'
import formatLength from '../../../_utils/css/formatLength'
-import { itemSize } from '../../../_styles-in-js/common.js'
+import depx from '../../../_utils/css/depx'
+import { createKey } from '../../../_utils/cssr'
+import usecssr from '../../../_mixins/usecssr'
+import styles from './styles'
export default {
- name: 'NBaseSelectMenu',
+ name: 'BaseSelectMenu',
provide () {
return {
NBaseSelectMenu: this
@@ -138,6 +141,12 @@ export default {
RecycleScroller,
render
},
+ mixins: [
+ usecssr(styles, {
+ themeKey: 'theme',
+ injectCssrProps: true
+ })
+ ],
props: {
theme: {
type: String,
@@ -222,7 +231,7 @@ export default {
return flattenedOptions && flattenedOptions.length === 0
},
itemSize () {
- return itemSize[this.size]
+ return depx(this.cssrProps.$local[createKey('optionHeight', this.size)])
},
pendingOptionValue () {
const pendingWrappedOption = this.pendingWrappedOption
diff --git a/src/_base/select-menu/src/styles/index.js b/src/_base/select-menu/src/styles/index.js
new file mode 100644
index 000000000..419ad5158
--- /dev/null
+++ b/src/_base/select-menu/src/styles/index.js
@@ -0,0 +1,20 @@
+import baseStyle from './themed-base.js'
+import sizeStyle from './themed-size'
+
+export default [
+ {
+ key: 'theme',
+ watch: [
+ 'theme'
+ ],
+ CNode: baseStyle
+ },
+ {
+ key: 'size',
+ watch: [
+ 'size',
+ 'theme'
+ ],
+ CNode: sizeStyle
+ }
+]
diff --git a/src/_base/select-menu/src/styles/themed-base.js b/src/_base/select-menu/src/styles/themed-base.js
new file mode 100644
index 000000000..055ac3c9f
--- /dev/null
+++ b/src/_base/select-menu/src/styles/themed-base.js
@@ -0,0 +1,133 @@
+import { cTB, c, cB, cE, cM, cNotM } from '../../../../_utils/cssr'
+
+export default c([
+ ({ props }) => {
+ const {
+ easeInOutCubicBezier
+ } = props.$base
+ const {
+ borderRadius,
+ color,
+ boxShadow,
+ groupHeaderTextColor,
+ actionDividerColor,
+ optionTextColorPressed,
+ optionTextColor,
+ optionTextColorDisabled,
+ optionTextColorSelected,
+ optionOpacityDisabled,
+ optionCheckColor,
+ actionTextColor
+ } = props.$local
+ return cTB('base-select-menu', {
+ raw: `
+ outline: none;
+ margin-top: 4px;
+ margin-bottom: 4px;
+ z-index: 0;
+ position: relative;
+ border-radius: ${borderRadius};
+ transition: ${easeInOutCubicBezier};
+ overflow: hidden;
+ background-color: ${color};
+ box-shadow: ${boxShadow};
+ `
+ }, [
+ cB('base-select-menu-option-wrapper', {
+ position: 'relative',
+ width: '100%'
+ }),
+ cE('action', {
+ padding: '8px 14px',
+ fontSize: '14px',
+ transition: `
+ color .3s ${easeInOutCubicBezier},
+ border-color .3s ${easeInOutCubicBezier}
+ `,
+ borderTop: `1px solid ${actionDividerColor}`,
+ color: actionTextColor
+ }),
+ cB('base-select-group-header', {
+ cursor: 'default',
+ padding: '0 14px',
+ color: groupHeaderTextColor
+ }),
+ cB('base-select-option', {
+ raw: `
+ cursor: pointer;
+ position: relative;
+ padding: 0 14px;
+ white-space: nowrap;
+ transition:
+ color .3s ${easeInOutCubicBezier},
+ opacity .3s ${easeInOutCubicBezier};
+ text-overflow: ellipsis;
+ overflow: hidden;
+ box-sizing: border-box;
+ color: ${optionTextColor};
+ opacity: 1;
+ `
+ }, [
+ c('&:active', {
+ color: optionTextColorPressed
+ }),
+ cM('grouped', {
+ padding: '0 21px'
+ }),
+ cM('selected', {
+ color: optionTextColorSelected
+ }),
+ cM('disabled', {
+ cursor: 'not-allowed'
+ }, [
+ cNotM('selected', {
+ color: optionTextColorDisabled
+ }),
+ cM('selected', {
+ opacity: optionOpacityDisabled
+ })
+ ])
+ ]),
+ cM('no-tracking-rect', [
+ cB('base-select-option', [
+ cNotM('disabled', [
+ c('&:hover', {
+ color: optionTextColorSelected
+ })
+ ])
+ ])
+ ]),
+ cM('multiple', [
+ cB('base-select-option', {
+ position: 'relative',
+ transition: `color .3s ${easeInOutCubicBezier}`,
+ paddingRight: '28px'
+ }, [
+ cM('selected', [
+ c('&::after', {
+ opacity: 1,
+ transform: 'rotate(45deg) scale(1)'
+ })
+ ]),
+ c('&::after', {
+ raw: `
+ content: '';
+ height: 6px;
+ width: 3px;
+ position: absolute;
+ right: 14px;
+ transform: rotate(45deg) scale(.5);
+ top: calc(50% - 4px);
+ opacity: 0;
+ transition:
+ transform .3s ${easeInOutCubicBezier},
+ opacity .3s ${easeInOutCubicBezier};
+ border-right: 1px solid ${optionCheckColor};
+ border-bottom: 1px solid ${optionCheckColor};
+ `
+ })
+ ])
+ ])
+ ])
+ }
+])
diff --git a/src/_base/select-menu/src/styles/themed-size.js b/src/_base/select-menu/src/styles/themed-size.js
new file mode 100644
index 000000000..fe77f78e4
--- /dev/null
+++ b/src/_base/select-menu/src/styles/themed-size.js
@@ -0,0 +1,43 @@
+import { cTB, c, cB, cM, createKey } from '../../../../_utils/cssr'
+import depx from '../../../../_utils/css/depx'
+import pxfy from '../../../../_utils/css/pxfy'
+
+export default c([
+ ({ props }) => {
+ const size = props.$instance.size
+ const fontSize = props.$local[createKey('optionFontSize', size)]
+ const optionHeight = props.$local[createKey('optionHeight', size)]
+ const groupHeaderFontSize = pxfy(depx(fontSize) - 2)
+ const menuHeight = pxfy(depx(optionHeight) * 7.6)
+ return cTB('base-select-menu', [
+ cM(size + '-size', [
+ cB('virtual-scroller', {
+ raw: `
+ height: 100%;
+ max-height: ${menuHeight};
+ scrollbar-width: none;
+ -moz-scrollbar-width: none;
+ `
+ }, [
+ c('&::-webkit-scrollbar', {
+ width: 0,
+ height: 0
+ })
+ ]),
+ cB('scrollbar-container', {
+ maxHeight: menuHeight
+ }),
+ cB('base-select-option', {
+ height: optionHeight,
+ lineHeight: optionHeight,
+ fontSize: fontSize
+ }),
+ cB('base-select-group-header', {
+ height: optionHeight,
+ lineHeight: optionHeight,
+ fontSize: groupHeaderFontSize
+ })
+ ])
+ ])
+ }
+])
diff --git a/src/_base/select-menu/styles/_common.js b/src/_base/select-menu/styles/_common.js
new file mode 100644
index 000000000..8f5b9128b
--- /dev/null
+++ b/src/_base/select-menu/styles/_common.js
@@ -0,0 +1,10 @@
+export default {
+ optionFontSizeSmall: '14px',
+ optionFontSizeMedium: '14px',
+ optionFontSizeLarge: '15px',
+ optionFontSizeHuge: '16px',
+ optionHeightSmall: '28px',
+ optionHeightMedium: '34px',
+ optionHeightLarge: '40px',
+ optionHeightHuge: '48px'
+}
diff --git a/src/_base/select-menu/styles/dark.js b/src/_base/select-menu/styles/dark.js
new file mode 100644
index 000000000..77174a4b8
--- /dev/null
+++ b/src/_base/select-menu/styles/dark.js
@@ -0,0 +1,24 @@
+import create from '../../../styles/_utils/create-component-base'
+import commonVariables from './_common'
+
+export default create({
+ name: 'BaseSelectMenu',
+ theme: 'dark',
+ getDerivedVariables ({ base, derived }) {
+ return {
+ ...commonVariables,
+ borderRadius: base.borderRadius,
+ color: derived.popoverBackgroundColor,
+ boxShadow: derived.popoverBoxShadow,
+ groupHeaderTextColor: derived.tertiaryTextOverlayColor,
+ actionDividerColor: derived.dividerOverlayColor,
+ optionTextColor: derived.secondaryTextOverlayColor,
+ optionTextColorPressed: derived.primaryActiveColor,
+ optionTextColorDisabled: derived.disabledTextOverlayColor,
+ optionTextColorSelected: derived.primaryColor,
+ optionOpacityDisabled: derived.disabledOpacity,
+ optionCheckColor: derived.primaryColor,
+ actionTextColor: derived.secondaryTextOverlayColor
+ }
+ }
+})
diff --git a/src/_base/select-menu/styles/light.js b/src/_base/select-menu/styles/light.js
new file mode 100644
index 000000000..e8be402bb
--- /dev/null
+++ b/src/_base/select-menu/styles/light.js
@@ -0,0 +1,24 @@
+import create from '../../../styles/_utils/create-component-base'
+import commonVariables from './_common'
+
+export default create({
+ name: 'BaseSelectMenu',
+ theme: 'light',
+ getDerivedVariables ({ base, derived }) {
+ return {
+ ...commonVariables,
+ borderRadius: base.borderRadius,
+ color: derived.popoverBackgroundColor,
+ boxShadow: derived.popoverBoxShadow,
+ groupHeaderTextColor: derived.tertiaryTextColor,
+ actionDividerColor: derived.dividerOverlayColor,
+ optionTextColor: derived.secondaryTextColor,
+ optionTextColorPressed: derived.primaryActiveColor,
+ optionTextColorDisabled: derived.disabledTextColor,
+ optionTextColorSelected: derived.primaryColor,
+ optionOpacityDisabled: derived.disabledOpacity,
+ optionCheckColor: derived.primaryColor,
+ actionTextColor: derived.secondaryTextColor
+ }
+ }
+})
diff --git a/src/_styles-in-js/common.js b/src/_styles-in-js/common.js
deleted file mode 100644
index f57da7874..000000000
--- a/src/_styles-in-js/common.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import commonStyle from './common.scss'
-
-function extractLength (length) {
- return Number(length.match(/^\d+/)[0])
-}
-
-export const itemSize = {
- tiny: extractLength(commonStyle.tinySize),
- small: extractLength(commonStyle.smallSize),
- medium: extractLength(commonStyle.mediumSize),
- large: extractLength(commonStyle.largeSize),
- huge: extractLength(commonStyle.hugeSize)
-}
diff --git a/src/_styles-in-js/common.scss b/src/_styles-in-js/common.scss
deleted file mode 100644
index 82e5de106..000000000
--- a/src/_styles-in-js/common.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import '../_styles/themes/common.scss';
-
-:export {
- tinySize: map-get($--n-height, 'tiny');
- smallSize: map-get($--n-height, 'small');
- mediumSize: map-get($--n-height, 'medium');
- largeSize: map-get($--n-height, 'large');
- hugeSize: map-get($--n-height, 'huge');
-}
\ No newline at end of file
diff --git a/src/_styles/BaseSelectMenu.scss b/src/_styles/BaseSelectMenu.scss
index 60db21cda..0fca42631 100644
--- a/src/_styles/BaseSelectMenu.scss
+++ b/src/_styles/BaseSelectMenu.scss
@@ -1,159 +1,160 @@
-@import './mixins/mixins.scss';
+// @import './mixins/mixins.scss';
-@mixin base-select-size-mixin ($size) {
- @include m($size + '-size') {
- @include b(virtual-scroller) {
- height: 100%;
- max-height: map-get($--n-height, $size) * 7.6;
- scrollbar-width: none;
- -moz-scrollbar-width: none;
- &::-webkit-scrollbar {
- width: 0;
- height: 0;
- }
- }
- @include b(scrollbar-container) {
- max-height: map-get($--n-height, $size) * 7.6;
- }
- @include b(base-select-option) {
- height: map-get($--n-height, $size);
- line-height: map-get($--n-height, $size);
- font-size: map-get($--n-font-size, $size);
- }
- @include b(base-select-group-header) {
- height: map-get($--n-height, $size);
- line-height: map-get($--n-height, $size);
- font-size: map-get($--n-font-size, $size) - 2px;
- }
- }
-}
+// @mixin base-select-size-mixin ($size) {
+// @include m($size + '-size') {
+// @include b(virtual-scroller) {
+// height: 100%;
+// max-height: map-get($--n-height, $size) * 7.6;
+// scrollbar-width: none;
+// -moz-scrollbar-width: none;
+// &::-webkit-scrollbar {
+// width: 0;
+// height: 0;
+// }
+// }
+// @include b(scrollbar-container) {
+// max-height: map-get($--n-height, $size) * 7.6;
+// }
+// @include b(base-select-option) {
+// height: map-get($--n-height, $size);
+// line-height: map-get($--n-height, $size);
+// font-size: map-get($--n-font-size, $size);
+// }
+// @include b(base-select-group-header) {
+// height: map-get($--n-height, $size);
+// line-height: map-get($--n-height, $size);
+// font-size: map-get($--n-font-size, $size) - 2px;
+// }
+// }
+// }
-@include themes-mixin {
- @include b(base-select-menu) {
- @include once {
- @include base-select-size-mixin("small");
- @include base-select-size-mixin("medium");
- @include base-select-size-mixin("large");
- @include base-select-size-mixin("huge");
- outline: none;
- margin-top: 4px;
- margin-bottom: 4px;
- z-index: 0;
- position: relative;
- border-radius: $--n-base-select-menu-border-radius;
- transition: background-color .3s $--n-ease-in-out-cubic-bezier;
- overflow: hidden;
- @include b(base-select-menu-option-wrapper) {
- position: relative;
- width: 100%;
- }
- @include e(action) {
- padding: 8px 14px;
- font-size: 14px;
- }
- }
- background-color: $--base-select-menu-background-color;
- box-shadow: $--base-select-menu-box-shadow;
- @include b(base-select-group-header) {
- @include once {
- cursor: default;
- padding: 0 14px;
- }
- color: map-get($--base-select-menu-group-header-text-color, 'default');
- }
- @include b(base-select-option) {
- @include once {
- cursor: pointer;
- position: relative;
- padding: 0 14px;
- white-space: nowrap;
- transition: color .3s $--n-ease-in-out-cubic-bezier;
- text-overflow: ellipsis;
- overflow: hidden;
- box-sizing: border-box;
- @include m(grouped) {
- padding: 0 21px;
- }
- }
- color: map-get($--base-select-menu-option-color, "default");
- @include m(selected) {
- color: map-get($--base-select-menu-option-color, "selected");
- }
- @include m(disabled) {
- color: map-get($--base-select-menu-option-color, "disabled");
- @include once {
- &::after {
- display: none;
- }
- }
- @include m(selected) {
- color: map-get($--base-select-menu-option-color, "disabled-selected");
- &::after {
- border-right: 1px solid map-get($--base-select-menu-option-color, "disabled-selected");
- border-bottom: 1px solid map-get($--base-select-menu-option-color, "disabled-selected");
- @include once {
- display: block;
- }
- }
- }
- @include once {
- cursor: not-allowed;
- }
- }
- }
- @include e(action) {
- @include once {
- transition:
- color .3s $--n-ease-in-out-cubic-bezier,
- border-color .3s $--n-ease-in-out-cubic-bezier;
- }
- border-top: 1px solid $--base-select-menu-action-divider-color;
- color: $--base-select-menu-action-text-color;
- }
- @include m(no-tracking-rect) {
- @include b(base-select-option) {
- @include not-m(disabled) {
- &:hover {
- color: map-get($--base-select-menu-option-color, "selected");
- }
- }
- }
- }
- @include m(multiple) {
- @include b(base-select-option) {
- @include once {
- position: relative;
- transition: color .3s $--n-ease-in-out-cubic-bezier;
- padding-right: 28px;
- @include m(selected) {
- background: none;
- &::after {
- opacity: 1;
- transform: rotate(45deg) scale(1);
- }
- }
- }
- &::after {
- @include once {
- content: '';
- height: 6px;
- width: 3px;
- position: absolute;
- right: 14px;
- transform: rotate(45deg) scale(.5);
- top: calc(50% - 4px);
- opacity: 0;
- transition:
- transform .3s $--n-ease-in-out-cubic-bezier,
- opacity .3s $--n-ease-in-out-cubic-bezier;
- }
- border-right: 1px solid $--base-select-menu-option-check-mark-color;
- border-bottom: 1px solid $--base-select-menu-option-check-mark-color;
- }
- &:active {
- color: map-get($--base-select-menu-option-color, "active");
- }
- }
- }
- }
-}
+// @include themes-mixin {
+// @include b(base-select-menu) {
+// // @include base-select-size-mixin("small");
+// // @include base-select-size-mixin("medium");
+// // @include base-select-size-mixin("large");
+// // @include base-select-size-mixin("huge");
+// // @include once {
+
+// // outline: none;
+// // margin-top: 4px;
+// // margin-bottom: 4px;
+// // z-index: 0;
+// // position: relative;
+// // border-radius: $--n-base-select-menu-border-radius;
+// // transition: background-color .3s $--n-ease-in-out-cubic-bezier;
+// // overflow: hidden;
+// // @include b(base-select-menu-option-wrapper) {
+// // position: relative;
+// // width: 100%;
+// // }
+// // @include e(action) {
+// // padding: 8px 14px;
+// // font-size: 14px;
+// // }
+// // }
+// // background-color: $--base-select-menu-background-color;
+// // box-shadow: $--base-select-menu-box-shadow;
+// // @include b(base-select-group-header) {
+// // @include once {
+// // cursor: default;
+// // padding: 0 14px;
+// // }
+// // color: map-get($--base-select-menu-group-header-text-color, 'default');
+// // }
+// // @include b(base-select-option) {
+// // @include once {
+// // cursor: pointer;
+// // position: relative;
+// // padding: 0 14px;
+// // white-space: nowrap;
+// // transition: color .3s $--n-ease-in-out-cubic-bezier;
+// // text-overflow: ellipsis;
+// // overflow: hidden;
+// // box-sizing: border-box;
+// // @include m(grouped) {
+// // padding: 0 21px;
+// // }
+// // }
+// // color: map-get($--base-select-menu-option-color, "default");
+// // @include m(selected) {
+// // color: map-get($--base-select-menu-option-color, "selected");
+// // }
+// // @include m(disabled) {
+// // color: map-get($--base-select-menu-option-color, "disabled");
+// // @include once {
+// // &::after {
+// // display: none;
+// // }
+// // }
+// // @include m(selected) {
+// // color: map-get($--base-select-menu-option-color, "disabled-selected");
+// // &::after {
+// // border-right: 1px solid map-get($--base-select-menu-option-color, "disabled-selected");
+// // border-bottom: 1px solid map-get($--base-select-menu-option-color, "disabled-selected");
+// // @include once {
+// // display: block;
+// // }
+// // }
+// // }
+// // @include once {
+// // cursor: not-allowed;
+// // }
+// // }
+// // }
+// // @include e(action) {
+// // @include once {
+// // transition:
+// // color .3s $--n-ease-in-out-cubic-bezier,
+// // border-color .3s $--n-ease-in-out-cubic-bezier;
+// // }
+// // border-top: 1px solid $--base-select-menu-action-divider-color;
+// // color: $--base-select-menu-action-text-color;
+// // }
+// // @include m(no-tracking-rect) {
+// // @include b(base-select-option) {
+// // @include not-m(disabled) {
+// // &:hover {
+// // color: map-get($--base-select-menu-option-color, "selected");
+// // }
+// // }
+// // }
+// // }
+// // @include m(multiple) {
+// // @include b(base-select-option) {
+// // @include once {
+// // position: relative;
+// // transition: color .3s $--n-ease-in-out-cubic-bezier;
+// // padding-right: 28px;
+// // @include m(selected) {
+// // background: none;
+// // &::after {
+// // opacity: 1;
+// // transform: rotate(45deg) scale(1);
+// // }
+// // }
+// // }
+// // &::after {
+// // @include once {
+// // content: '';
+// // height: 6px;
+// // width: 3px;
+// // position: absolute;
+// // right: 14px;
+// // transform: rotate(45deg) scale(.5);
+// // top: calc(50% - 4px);
+// // opacity: 0;
+// // transition:
+// // transform .3s $--n-ease-in-out-cubic-bezier,
+// // opacity .3s $--n-ease-in-out-cubic-bezier;
+// // }
+// // border-right: 1px solid $--base-select-menu-option-check-mark-color;
+// // border-bottom: 1px solid $--base-select-menu-option-check-mark-color;
+// // }
+// // &:active {
+// // color: map-get($--base-select-menu-option-color, "active");
+// // }
+// // }
+// // }
+// }
+// }
diff --git a/src/_styles/index.scss b/src/_styles/index.scss
index a614b55de..0b25ea623 100644
--- a/src/_styles/index.scss
+++ b/src/_styles/index.scss
@@ -5,7 +5,6 @@
@import './BaseLoading.scss';
@import './BaseMenuMask.scss';
-@import './BaseSelectMenu.scss';
@import './BaseTrackingRect.scss';
@import './Descriptions.scss';
@import './Form.scss';
diff --git a/src/auto-complete/styles/dark.js b/src/auto-complete/styles/dark.js
index a1588d712..7bba65a87 100644
--- a/src/auto-complete/styles/dark.js
+++ b/src/auto-complete/styles/dark.js
@@ -1,8 +1,14 @@
import create from '../../styles/_utils/create-component-base'
+import baseSelectMenuStyle from '../../_base/select-menu/styles/dark'
+import inputStyle from '../../input/styles/dark'
export default create({
theme: 'dark',
name: 'AutoComplete',
+ peer: [
+ baseSelectMenuStyle,
+ inputStyle
+ ],
getDerivedVariables ({ base, derived }) {
return {}
}
diff --git a/src/auto-complete/styles/light.js b/src/auto-complete/styles/light.js
index 94010d5ee..fc3b471a3 100644
--- a/src/auto-complete/styles/light.js
+++ b/src/auto-complete/styles/light.js
@@ -1,8 +1,14 @@
import create from '../../styles/_utils/create-component-base'
+import baseSelectMenuStyle from '../../_base/select-menu/styles/light'
+import inputStyle from '../../input/styles/light'
export default create({
theme: 'light',
name: 'AutoComplete',
+ peer: [
+ baseSelectMenuStyle,
+ inputStyle
+ ],
getDerivedVariables ({ base, derived }) {
return {}
}
diff --git a/src/cascader/src/Cascader.vue b/src/cascader/src/Cascader.vue
index 7271b44c2..a7543b7bf 100644
--- a/src/cascader/src/Cascader.vue
+++ b/src/cascader/src/Cascader.vue
@@ -127,7 +127,10 @@ export default {
themeable,
asformitem(),
locale('Cascader'),
- usecssr(styles)
+ usecssr(styles, {
+ themeKey: 'syntheticTheme',
+ injectCssrProps: true
+ })
],
model: {
prop: 'value',
diff --git a/src/cascader/src/CascaderSubmenu.vue b/src/cascader/src/CascaderSubmenu.vue
index d3ebf2d65..1c5d5d63b 100644
--- a/src/cascader/src/CascaderSubmenu.vue
+++ b/src/cascader/src/CascaderSubmenu.vue
@@ -50,7 +50,7 @@ import NCascaderOption from './CascaderOption.vue'
import NScrollbar from '../../scrollbar'
import NBaseTrackingRect from '../../_base/tracking-rect'
import debounce from 'lodash-es/debounce'
-import { itemSize } from '../../_styles-in-js/common'
+import depx from '../../_utils/css/depx'
export default {
name: 'NCascaderSubmenu',
@@ -92,7 +92,8 @@ export default {
return this.NCascader.syntheticTheme
},
itemSize () {
- return itemSize[this.size] || itemSize.medium
+ const localCssrProps = this.NCascader.cssrProps.$local
+ return depx(localCssrProps.height[this.size])
}
},
methods: {
diff --git a/src/popselect/styles/dark.js b/src/popselect/styles/dark.js
index 1b84485e4..117240789 100644
--- a/src/popselect/styles/dark.js
+++ b/src/popselect/styles/dark.js
@@ -1,8 +1,12 @@
import create from '../../styles/_utils/create-component-base'
+import selectMenuStyle from '../../_base/select-menu/styles/dark'
export default create({
name: 'Popselect',
theme: 'dark',
+ peer: [
+ selectMenuStyle
+ ],
getDerivedVariables ({ base, derived }) {
return {
diff --git a/src/popselect/styles/light.js b/src/popselect/styles/light.js
index 8aab86ac5..eb991d1b6 100644
--- a/src/popselect/styles/light.js
+++ b/src/popselect/styles/light.js
@@ -1,8 +1,12 @@
import create from '../../styles/_utils/create-component-base'
+import selectMenuStyle from '../../_base/select-menu/styles/light'
export default create({
name: 'Popselect',
theme: 'light',
+ peer: [
+ selectMenuStyle
+ ],
getDerivedVariables ({ base, derived }) {
return {
diff --git a/src/select/styles/dark.js b/src/select/styles/dark.js
index 4e8302475..2924293c2 100644
--- a/src/select/styles/dark.js
+++ b/src/select/styles/dark.js
@@ -1,8 +1,14 @@
import create from '../../styles/_utils/create-component-base'
+import baseSelectionStyle from '../../_base/selection/styles/dark'
+import baseSelectMenuStyle from '../../_base/select-menu/styles/dark'
export default create({
name: 'Select',
theme: 'dark',
+ peer: [
+ baseSelectionStyle,
+ baseSelectMenuStyle
+ ],
getDerivedVariables ({ derived, base }) {
return {}
}
diff --git a/src/select/styles/light.js b/src/select/styles/light.js
index d65e30193..fce179120 100644
--- a/src/select/styles/light.js
+++ b/src/select/styles/light.js
@@ -1,8 +1,14 @@
import create from '../../styles/_utils/create-component-base'
+import baseSelectionStyle from '../../_base/selection/styles/light'
+import baseSelectMenuStyle from '../../_base/select-menu/styles/light'
export default create({
name: 'Select',
theme: 'light',
+ peer: [
+ baseSelectionStyle,
+ baseSelectMenuStyle
+ ],
getDerivedVariables ({ derived, base }) {
return {}
}
From b1e8914cbd7dc3f2316f7e4b112a9cdf8930da01 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Thu, 3 Sep 2020 12:21:06 +0800
Subject: [PATCH 2/4] refactor(mixins/usecssr): use `find` to detect if style
is mounted
---
src/_mixins/usecssr.js | 19 +++++--------------
src/_utils/cssr/index.js | 4 ++--
2 files changed, 7 insertions(+), 16 deletions(-)
diff --git a/src/_mixins/usecssr.js b/src/_mixins/usecssr.js
index 68aa3e9f6..cbc9e2e2d 100644
--- a/src/_mixins/usecssr.js
+++ b/src/_mixins/usecssr.js
@@ -1,18 +1,10 @@
-const mountedStyleMap = new Map()
+import { find } from '../_utils/cssr'
if (process.env.NODE_ENV !== 'production') {
if (!window.naive) window.naive = {}
window.naive.styleRenderingDuration = 0
}
-function isStyleMounted (id) {
- return mountedStyleMap.has(id)
-}
-
-function markStyleMounted (id) {
- return mountedStyleMap.set(id, 1)
-}
-
function getThemeVariables (naive, themeName) {
const styles = naive.styles
const theme = styles[themeName]
@@ -48,7 +40,8 @@ function setupMutableStyle (
instance,
theme,
dependencyKey,
- CNode
+ CNode,
+ moduleSrcUpdated
) {
const naive = instance.$naive
const options = instance.$options
@@ -75,7 +68,7 @@ function setupMutableStyle (
dependencyKey,
dependencyValue
)
- if (isStyleMounted(mountId)) return
+ if (find(mountId)) return
const cssrPropsGetter = styles[renderedTheme][name]
if (process.env.NODE_ENV !== 'production' && !cssrPropsGetter) {
console.error(`[naive-ui/mixins/usecssr]: ${name}'s style not found`, styles)
@@ -95,7 +88,6 @@ function setupMutableStyle (
props: componentCssrProps,
count: false
})
- markStyleMounted(mountId)
}
function setupImmutableStyle (
@@ -106,7 +98,7 @@ function setupImmutableStyle (
const mountId = createImmutableStyleId(
options.cssrId || options.cssrName || options.name
)
- if (isStyleMounted(mountId)) return
+ if (find(mountId)) return
CNode.mount({
target: mountId,
props: {
@@ -114,7 +106,6 @@ function setupImmutableStyle (
},
count: false
})
- markStyleMounted(mountId)
}
function setupCssrProps (
diff --git a/src/_utils/cssr/index.js b/src/_utils/cssr/index.js
index 7a457ab36..447f7e550 100644
--- a/src/_utils/cssr/index.js
+++ b/src/_utils/cssr/index.js
@@ -13,7 +13,7 @@ const plugin = BEMPlugin({
modifierPrefix
})
cssr.use(plugin)
-const { c, context } = cssr
+const { c, context, find } = cssr
context.theme = null
context.pallete = null
const { cB, cE, cM, cNotM } = plugin
@@ -60,4 +60,4 @@ function createKey (prefix, suffix) {
return prefix + suffix.replace(/^[a-z]/, startChar => startChar.toUpperCase())
}
-export { c, cTB, cB, cE, cM, cNotM, insideFormItem, insideModal, prefix, namespace, createKey }
+export { c, cTB, cB, cE, cM, cNotM, insideFormItem, insideModal, prefix, namespace, createKey, find }
From 872b2c7033450bdc5125ff7a049c690a54010a22 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Thu, 3 Sep 2020 12:21:31 +0800
Subject: [PATCH 3/4] fix(select): menu transition in dark theme
---
src/select/src/styles/themed-base.cssr.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/select/src/styles/themed-base.cssr.js b/src/select/src/styles/themed-base.cssr.js
index 0cf1ace99..0d6b11ac8 100644
--- a/src/select/src/styles/themed-base.cssr.js
+++ b/src/select/src/styles/themed-base.cssr.js
@@ -1,4 +1,4 @@
-import { cTB, c, cB, cM, cNotM } from '../../../_utils/cssr'
+import { cTB, c, cM, cNotM } from '../../../_utils/cssr'
import fadeInScaleUpTransition from '../../../styles/_transitions/fade-in-scale-up'
export default c([
@@ -52,7 +52,7 @@ export default c([
`
})
]),
- cB('select-menu', {
+ cTB('select-menu', {
raw: `
transform: ${transformDebounceScale};
`
From 912d14907c79dbe10cbd8ec52bc5351db20d0712 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Thu, 3 Sep 2020 12:22:51 +0800
Subject: [PATCH 4/4] fix(avatar): don't mount empty size style
---
src/avatar/src/Avatar.vue | 9 ++++++++-
src/avatar/src/config.js | 7 +++++++
src/avatar/src/styles/index.js | 4 ++--
3 files changed, 17 insertions(+), 3 deletions(-)
create mode 100644 src/avatar/src/config.js
diff --git a/src/avatar/src/Avatar.vue b/src/avatar/src/Avatar.vue
index f33ab9ebf..2a9ed7fdc 100644
--- a/src/avatar/src/Avatar.vue
+++ b/src/avatar/src/Avatar.vue
@@ -34,6 +34,7 @@ import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable'
import usecssr from '../../_mixins/usecssr'
import styles from './styles'
+import { validSize } from './config'
export default {
name: 'Avatar',
@@ -44,7 +45,9 @@ export default {
],
props: {
size: {
- type: [String, Number],
+ validator (value) {
+ return validSize.includes(value) || typeof value === 'number'
+ },
default: 'medium'
},
src: {
@@ -87,6 +90,10 @@ export default {
return `${this.size / 2}px`
}
return null
+ },
+ // TODO: refactor, bad implementation
+ cssrSize () {
+ return typeof this.size === 'number' ? 'medium' : this.size
}
},
updated () {
diff --git a/src/avatar/src/config.js b/src/avatar/src/config.js
new file mode 100644
index 000000000..1d72a0d3c
--- /dev/null
+++ b/src/avatar/src/config.js
@@ -0,0 +1,7 @@
+export const validSize = [
+ 'tiny',
+ 'small',
+ 'medium',
+ 'large',
+ 'huge'
+]
diff --git a/src/avatar/src/styles/index.js b/src/avatar/src/styles/index.js
index 001595387..ec167569b 100644
--- a/src/avatar/src/styles/index.js
+++ b/src/avatar/src/styles/index.js
@@ -10,10 +10,10 @@ export default [
CNode: themedBaseStyle
},
{
- key: 'size',
+ key: 'cssrSize',
watch: [
'syntheticTheme',
- 'size'
+ 'cssrSize'
],
CNode: themedSizeStyle
}