mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-06 12:17:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(scrollbar): css in js (#258)

Browse Source 
* feat(scrollbar): css in js

* chore: fix code review

* chore: fix code review
This commit is contained in:
HaiboTang 2020-08-17 19:20:57 +08:00 committed by 07akioni
parent e99c28f135
commit 9acfaa75fe
21 changed files with 270 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Cascader/src/CascaderSubmenu.vue
View File

@ -47,7 +47,7 @@
<script>
import NCascaderOption from './CascaderOption.vue'
import NScrollbar from '../../Scrollbar'
import NScrollbar from '../../scrollbar'
import NBaseTrackingRect from '../../_base/tracking-rect'
import debounce from 'lodash-es/debounce'
import { itemSize } from '../../_styles-in-js/common'

2
src/Layout/src/Layout.vue
View File

@ -26,7 +26,7 @@
import layoutModeMixin from './layoutModeMixin'
import themeable from '../../_mixins/themeable'
import withapp from '../../_mixins/withapp'
import NScrollbar from '../../Scrollbar'
import NScrollbar from '../../scrollbar'
export default {
name: 'NLayout',

2
src/Layout/src/LayoutSider.vue
View File

@ -51,7 +51,7 @@ import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable'
import ToggleButton from './ToggleButton'
import ToggleBar from './ToggleBar'
import NScrollbar from '../../Scrollbar'
import NScrollbar from '../../scrollbar'
export default {
name: 'NLayoutSider',

2
src/Notification/src/NotificationContainer.vue
View File

@ -10,7 +10,7 @@
</template>
<script>
import NScrollbar from '../../Scrollbar'
import NScrollbar from '../../scrollbar'
export default {
components: {

8
src/Scrollbar/index.js
View File

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

2
src/TimePicker/src/main.vue
View File

@ -171,7 +171,7 @@
</template>
<script>
import NScrollbar from '../../Scrollbar'
import NScrollbar from '../../scrollbar'
import NInput from '../../input'
import NIcon from '../../icon'
import detachable from '../../_mixins/detachable'

2
src/_base/select-menu/src/SelectMenu.vue
View File

@ -106,7 +106,7 @@
</template>
<script>
import NScrollbar from '../../../Scrollbar'
import NScrollbar from '../../../scrollbar'
import NSelectOption from './SelectOption.vue'
import NSelectGroupHeader from './SelectGroupHeader.vue'
import NBaseTrackingRect from '../../tracking-rect'

2
src/_deprecated/NimbusServiceLayout/src/main.vue
View File

@ -1,6 +1,6 @@
<script>
import Scrollbar from '../../../Scrollbar'
import Scrollbar from '../../../scrollbar'
import withapp from '../../../_mixins/withapp'
import themeable from '../../../_mixins/themeable'
import getDefaultSlot from '../../../_utils/vue/getDefaultSlot'

162
src/_styles/Scrollbar.scss
View File

@ -1,82 +1,82 @@
@import './mixins/mixins.scss';
// @import './mixins/mixins.scss';
@include themes-mixin {
@include b(scrollbar) {
@include once {
position: relative;
z-index: auto;
height: 100%;
}
& > {
@include once {
@include b(scrollbar-container) {
width: 100%;
overflow: scroll;
height: 100%;
max-height: inherit;
scrollbar-width: none;
&::-webkit-scrollbar {
width: 0;
height: 0;
}
& > {
@include b(scrollbar-content) {
width: fit-content;
overflow: hidden;
min-width: 100%;
}
}
}
}
@include b(scrollbar-rail) {
@include once {
position: absolute;
pointer-events: none;
user-select: none;
@include m(horizontal) {
left: 0;
right: 0;
bottom: 2.5px;
& > {
@include e(scrollbar) {
right: 0;
}
}
}
@include m(vertical) {
right: 2.5px;
top: 0;
bottom: 0;
& > {
@include e(scrollbar) {
bottom: 0;
}
}
}
@include m(disabled) {
& > {
@include e(scrollbar) {
pointer-events: none;
}
}
}
}
& > {
@include e(scrollbar) {
@include once {
@include fade-in-transition(scrollbar);
position: absolute;
cursor: pointer;
pointer-events: all;
}
background-color: map-get($--scrollbar-background-color, 'default');
transition: background-color .2s $--n-ease-in-out-cubic-bezier;
&:hover {
background-color: map-get($--scrollbar-background-color, 'hover');
}
}
}
}
}
}
}
// @include themes-mixin {
// @include b(scrollbar) {
// @include once {
// position: relative;
// z-index: auto;
// height: 100%;
// }
// & > {
// @include once {
// @include b(scrollbar-container) {
// width: 100%;
// overflow: scroll;
// height: 100%;
// max-height: inherit;
// scrollbar-width: none;
// &::-webkit-scrollbar {
// width: 0;
// height: 0;
// }
// & > {
// @include b(scrollbar-content) {
// width: fit-content;
// overflow: hidden;
// min-width: 100%;
// }
// }
// }
// }
// @include b(scrollbar-rail) {
// @include once {
// position: absolute;
// pointer-events: none;
// user-select: none;
// @include m(horizontal) {
// left: 0;
// right: 0;
// bottom: 2.5px;
// & > {
// @include e(scrollbar) {
// right: 0;
// }
// }
// }
// @include m(vertical) {
// right: 2.5px;
// top: 0;
// bottom: 0;
// & > {
// @include e(scrollbar) {
// bottom: 0;
// }
// }
// }
// @include m(disabled) {
// & > {
// @include e(scrollbar) {
// pointer-events: none;
// }
// }
// }
// }
// & > {
// @include e(scrollbar) {
// @include once {
// @include fade-in-transition(scrollbar);
// position: absolute;
// cursor: pointer;
// pointer-events: all;
// }
// background-color: map-get($--scrollbar-background-color, 'default');
// transition: background-color .2s $--n-ease-in-out-cubic-bezier;
// &:hover {
// background-color: map-get($--scrollbar-background-color, 'hover');
// }
// }
// }
// }
// }
// }
// }

2
src/data-table/src/HeaderButton/FilterMenu.vue
View File

@ -65,7 +65,7 @@ import NRadioGroup from '../../../Radio/src/RadioGroup'
import NRadio from '../../../Radio/src/Radio'
import NDivider from '../../../divider'
import NButton from '../../../button'
import NScrollbar from '../../../Scrollbar'
import NScrollbar from '../../../scrollbar'
import { shouldUseArrayInSingleMode } from '../utils'
function isEqual (value, oldValue) {

2
src/data-table/src/TableParts/Body.vue
View File

@ -73,7 +73,7 @@
<script>
import cell from './Cell.vue'
import { createCustomWidthStyle, setCheckStatusOfRow, createClassObject, createRowKey } from '../utils'
import NScrollbar from '../../../Scrollbar'
import NScrollbar from '../../../scrollbar'
import formatLength from '../../../_utils/css/formatLength'
export default {

6
src/index.js
View File

@ -49,7 +49,7 @@ import Popup from './Popover'
import Progress from './progress'
import Radio from './Radio'
import Result from './result'
import Scrollbar from './Scrollbar'
import Scrollbar from './scrollbar'
import Select from './Select'
import Slider from './Slider'
import Spin from './Spin'
@ -152,6 +152,8 @@ import resultDarkStyle from './result/styles/dark'
import resultLightStyle from './result/styles/light'
import stepsDarkStyle from './steps/styles/dark'
import stepsLightStyle from './steps/styles/light'
import scrollBarLightStyle from './scrollbar/styles/light'
import scrollBarDarkStyle from './scrollbar/styles/dark'
// Can be remove after refactoring
import baseSelectionLightStyle from './_base/selection/styles/light'
@ -333,6 +335,8 @@ export default create({
datePickerLightStyle,
stepsDarkStyle,
stepsLightStyle,
scrollBarLightStyle,
scrollBarDarkStyle,
// Can be remove after refactoring
baseSelectionLightStyle,
baseSelectionDarkStyle

2
src/log/src/Log.vue
View File

@ -31,7 +31,7 @@
<script>
import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable'
import NScrollbar from '../../Scrollbar'
import NScrollbar from '../../scrollbar'
import NLogLoader from './LogLoader'
import NLogLine from './LogLine'
import NFadeInHeightExpandTransition from '../../_transition/FadeInHeightExpandTransition'

2
src/modal/src/ModalContent.vue
View File

@ -78,7 +78,7 @@
</template>
<script>
import NScrollbar from '../../Scrollbar'
import NScrollbar from '../../scrollbar'
import NConfirm from '../../confirm/src/Confirm'
import NCard from '../../card'
import themeable from '../../_mixins/themeable'

8
src/scrollbar/index.js Normal file
View File

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

12
src/Scrollbar/src/main.vue → src/scrollbar/src/ScrollBar.vue
View File

@ -38,7 +38,7 @@
}"
:style="{...horizontalRailStyle, width: scrollbarSize }"
>
<transition name="n-scrollbar-transition">
<transition name="n-fade-in-transition">
<div
v-if="needVerticalScrollbar && showVeriticalScrollbar"
class="n-scrollbar-rail__scrollbar"
@ -86,10 +86,16 @@
import withapp from '../../_mixins/withapp'
import themable from '../../_mixins/themeable'
import resizeObserverDelagate from '../../_utils/delegate/resizeObserverDelegate'
import usecssr from '../../_mixins/usecssr'
import styles from './styles/index.js'
export default {
name: 'NScrollbar',
mixins: [withapp, themable],
name: 'Scrollbar',
mixins: [
withapp,
themable,
usecssr(styles)
],
props: {
width: {
type: Number,

9
src/scrollbar/src/styles/index.js Normal file
View File

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

114
src/scrollbar/src/styles/themed-base.cssr.js Normal file
View File

@ -0,0 +1,114 @@
import { cTB, c, cB, cM, cE } from '../../../_utils/cssr'
import fadeInTransition from '../../../styles/_transitions/fade-in'
export default c([
({ props }) => {
const {
color,
colorHover
} = props.$local
const {
easeInOutCubicBezier
} = props.$base
return cTB('scrollbar', {
raw: `
position: relative;
z-index: auto;
height: 100%;
`
}, [
c('>', [
cB('scrollbar-container', {
raw: `
width: 100%;
overflow: scroll;
height: 100%;
max-height: inherit;
scrollbar-width: none;
`
}, [
c('&::-webkit-scrollbar', {
raw: `
width: 0;
height: 0;
`
}),
c('>', [
cB('scrollbar-content', {
raw: `
width: fit-content;
overflow: hidden;
min-width: 100%;
`
})
])
]),
cB('scrollbar-rail', {
raw: `
position: absolute;
pointer-events: none;
user-select: none;
`
}, [
cM('horizontal', {
raw: `
left: 0;
right: 0;
bottom: 2.5px;
`
}, [
c('>', [
cE('scrollbar', {
raw: `
right: 0;
`
})
])
]),
cM('vertical', {
raw: `
right: 2.5px;
top: 0;
bottom: 0;
`
}, [
c('>', [
cE('scrollbar', {
raw: `
bottom: 0;
`
})
])
]),
cM('disabled', [
c('>', [
cE('scrollbar', {
raw: `
pointer-events: none;
`
})
])
]),
c('>', [
cE('scrollbar', {
raw: `
position: absolute;
cursor: pointer;
pointer-events: all;
background-color: ${color};
transition: background-color .2s ${easeInOutCubicBezier};
`
}, [
fadeInTransition(),
c('&:hover', {
raw: `
background-color: ${colorHover}
`
})
])
])
])
])
])
}
])

16
src/scrollbar/styles/dark.js Normal file
View File

@ -0,0 +1,16 @@
import create from '../../styles/_utils/create-component-base'
export default create({
name: 'Scrollbar',
theme: 'dark',
getDerivedVariables ({ base, derived }) {
const {
scrollbarBackgroundOverlayColor,
scrollbarHoverBackgroundOverlayColor
} = derived
return {
color: scrollbarBackgroundOverlayColor,
colorHover: scrollbarHoverBackgroundOverlayColor
}
}
})

16
src/scrollbar/styles/light.js Normal file
View File

@ -0,0 +1,16 @@
import create from '../../styles/_utils/create-component-base'
export default create({
name: 'Scrollbar',
theme: 'light',
getDerivedVariables ({ base, derived }) {
const {
scrollbarBackgroundOverlayColor,
scrollbarHoverBackgroundOverlayColor
} = derived
return {
color: scrollbarBackgroundOverlayColor,
colorHover: scrollbarHoverBackgroundOverlayColor
}
}
})

2
src/transfer/src/Transfer.vue
View File

@ -182,7 +182,7 @@
</template>
<script>
import NScrollbar from '../../Scrollbar'
import NScrollbar from '../../scrollbar'
import NTransferHeaderCheckbox from './TransferHeaderCheckbox'
import NTransferHeaderExtra from './TransferHeaderExtra'
import NTransferSourceListItem from './TransferSourceListItem'