From 6ebb2ef6fe72761885f6f63244d82b2725eb2565 Mon Sep 17 00:00:00 2001 From: "songwanli2025@163.com" Date: Tue, 1 Sep 2020 15:12:05 +0800 Subject: [PATCH 1/2] feat(slider): css in js --- src/Slider/index.js | 8 - src/_styles/index.scss | 5 +- src/index.js | 10 +- src/slider/index.js | 8 + .../src/main.vue => slider/src/Slider.vue} | 5 +- src/slider/src/styles/index.js | 9 + src/slider/src/styles/themed-base.cssr.js | 181 ++++++++++++++++++ src/slider/styles/_common.js | 5 + src/slider/styles/dark.js | 42 ++++ src/slider/styles/light.js | 41 ++++ src/styles/base/dark.js | 1 + src/styles/base/light.js | 1 + 12 files changed, 305 insertions(+), 11 deletions(-) delete mode 100644 src/Slider/index.js create mode 100644 src/slider/index.js rename src/{Slider/src/main.vue => slider/src/Slider.vue} (99%) create mode 100644 src/slider/src/styles/index.js create mode 100644 src/slider/src/styles/themed-base.cssr.js create mode 100644 src/slider/styles/_common.js create mode 100644 src/slider/styles/dark.js create mode 100644 src/slider/styles/light.js diff --git a/src/Slider/index.js b/src/Slider/index.js deleted file mode 100644 index 2b95a2ae7..000000000 --- a/src/Slider/index.js +++ /dev/null @@ -1,8 +0,0 @@ -/* istanbul ignore file */ -import Scaffold from './src/main.vue' - -Scaffold.install = function (Vue) { - Vue.component(Scaffold.name, Scaffold) -} - -export default Scaffold diff --git a/src/_styles/index.scss b/src/_styles/index.scss index 9824baa6c..d067ebf43 100644 --- a/src/_styles/index.scss +++ b/src/_styles/index.scss @@ -13,7 +13,10 @@ @import './Pagination.scss'; @import './Popover.scss'; @import './Popselect.scss'; -@import './Slider.scss'; +@import './Radio.scss'; +// @import './Slider.scss'; +@import './Steps.scss'; +// @import './Switch.scss'; @import './Table.scss'; @import './Tabs.scss'; @import './TimePicker.scss'; diff --git a/src/index.js b/src/index.js index 8b05fa114..8700ee01c 100644 --- a/src/index.js +++ b/src/index.js @@ -51,7 +51,7 @@ import Radio from './radio' import Result from './result' import Select from './select' import Scrollbar from './scrollbar' -import Slider from './Slider' +import Slider from './slider' import Spin from './spin' import Statistic from './statistic' import Steps from './steps' @@ -178,6 +178,10 @@ import layoutDarkStyle from './layout/styles/dark' import layoutLightStyle from './layout/styles/light' import treeLightStyle from './tree/styles/light' import treeDarkStyle from './tree/styles/dark' +import paginationLightStyle from './pagination/styles/light' +import paginationDarkStyle from './pagination/styles/dark' +import sliderLightStyle from './slider/styles/light' +import sliderDarkStyle from './slider/styles/dark' // Can be remove after refactoring import baseSelectionLightStyle from './_base/selection/styles/light' @@ -385,6 +389,10 @@ export default create({ layoutLightStyle, treeLightStyle, treeDarkStyle, + paginationLightStyle, + paginationDarkStyle, + sliderLightStyle, + sliderDarkStyle, // Can be remove after refactoring baseSelectionLightStyle, baseSelectionDarkStyle diff --git a/src/slider/index.js b/src/slider/index.js new file mode 100644 index 000000000..66e6d322d --- /dev/null +++ b/src/slider/index.js @@ -0,0 +1,8 @@ +/* istanbul ignore file */ +import Slider from './src/Slider.vue' + +Slider.install = function (Vue, naive) { + Vue.component(naive.componentPrefix + Slider.name, Slider) +} + +export default Slider diff --git a/src/Slider/src/main.vue b/src/slider/src/Slider.vue similarity index 99% rename from src/Slider/src/main.vue rename to src/slider/src/Slider.vue index 9b263c776..58afce1f1 100644 --- a/src/Slider/src/main.vue +++ b/src/slider/src/Slider.vue @@ -101,6 +101,8 @@ import withapp from '../../_mixins/withapp' import themeable from '../../_mixins/themeable' import asformitem from '../../_mixins/asformitem' import zindexable from '../../_mixins/zindexable' +import usecssr from '../../_mixins/usecssr' +import styles from './styles' function handleFirstHandleMouseMove (e) { const railRect = this.$refs.rail.getBoundingClientRect() @@ -123,7 +125,7 @@ function handleSecondHandleMouseMove (e) { } export default { - name: 'NSlider', + name: 'Slider', mixins: [ withapp, themeable, @@ -131,6 +133,7 @@ export default { detachable, placeable, zindexable, + usecssr(styles), asformitem() ], model: { diff --git a/src/slider/src/styles/index.js b/src/slider/src/styles/index.js new file mode 100644 index 000000000..958d3000d --- /dev/null +++ b/src/slider/src/styles/index.js @@ -0,0 +1,9 @@ +import baseStyle from './themed-base.cssr.js' + +export default [ + { + key: 'syntheticTheme', + watch: ['syntheticTheme'], + CNode: baseStyle + } +] diff --git a/src/slider/src/styles/themed-base.cssr.js b/src/slider/src/styles/themed-base.cssr.js new file mode 100644 index 000000000..93252b237 --- /dev/null +++ b/src/slider/src/styles/themed-base.cssr.js @@ -0,0 +1,181 @@ +import { cTB, c, cB, cM, cE } from '../../../_utils/cssr' +import fadeInScaleUpTransition from '../../../styles/_transitions/fade-in-scale-up' + +export default c([ + ({ props }) => { + const { + railBackgroundColorDefault, + railBackgroundColorHover, + railFillBackgroundColorDefault, + railFillBackgroundColorHover, + handleBackgroundColor, + handleBoxShadowDefault, + handleBoxShadowHover, + handleBoxShadowActive, + handleBoxShadowFocus, + indicatorBackgroundColor, + indicatorBoxShadow, + indicatorTextColor, + dotBoxShadowDefault, + dotBoxShadowActive, + railHeight, + transformDebounceScale, + handleSize, + dotSize + } = props.$local + const { + easeInOutCubicBezier + } = props.$base + return [ + cTB('slider', { + raw: ` + display: block; + padding: 5px 0; + position: relative; + z-index: 0; + width: calc(100% - 14px); + margin-left: 7px; + margin-right: 7px; + cursor: pointer; + ` + }, [ + cB('slider-marks', { + raw: ` + position: absolute; + top: 14px; + left: 0; + right: 0; + ` + }, [ + cB('slider-mark', { + raw: ` + position: absolute; + transform: translateX(-50%); + ` + }) + ]), + cM('width-mark', { + raw: ` + width: calc(100% - 24px); + margin: 8px 12px 32px 12px; + ` + }), + c('&:hover', [ + cB('slider-rail', { + backgroundColor: railBackgroundColorHover + }, [ + cE('fill', { + backgroundColor: railFillBackgroundColorHover + }), + cB('slider-dots', [ + cB('slider-dot', { + boxShadow: dotBoxShadowActive + }) + ]) + ]), + cB('slider-handle', { + boxShadow: handleBoxShadowHover + }) + ]), + cM('active', [ + cB('slider-rail', { + backgroundColor: railBackgroundColorHover + }, [ + cE('fill', { + backgroundColor: railFillBackgroundColorHover + }), + cB('slider-dots', [ + cB('slider-dot', { + boxShadow: dotBoxShadowActive + }) + ]) + ]), + cB('slider-handle', { + boxShadow: handleBoxShadowHover + }) + ]), + cB('slider-rail', { + raw: ` + width: 100%; + position: relative; + `, + height: railHeight, + backgroundColor: railBackgroundColorDefault, + transition: `background-color .3s ${easeInOutCubicBezier}`, + borderRadius: `${parseInt(railHeight) / 2}px` + }, [ + cE('fill', { + raw: ` + position: absolute; + top: 0; + bottom: 0; + border-radius: ${parseInt(railHeight) / 2}px, + transition: background-color .3s ${easeInOutCubicBezier}; + `, + backgroundColor: railFillBackgroundColorDefault + }) + ]), + cB('slider-handle', { + raw: ` + outline: none; + height: ${handleSize}; + width: ${handleSize}; + border-radius: ${parseInt(handleSize) / 2}px; + transition: box-shadow .2s ${easeInOutCubicBezier}, background-color .3s ${easeInOutCubicBezier}; + position: absolute; + top: 0; + transform: translateX(-50%); + overflow: hidden; + cursor: pointer; + `, + backgroundColor: handleBackgroundColor, + boxShadow: handleBoxShadowDefault + }, [ + c('&:hover', { + boxShadow: handleBoxShadowHover + }), + c('&:hover:focus', { + boxShadow: handleBoxShadowActive + }), + c('&:focus', { + boxShadow: handleBoxShadowFocus + }) + ]), + cB('slider-dots', { + raw: ` + position: absolute; + left: 0; + top: 50%; + right: 0; + ` + }, [ + cB('slider-dot', { + raw: ` + transition: box-shadow .3s ${easeInOutCubicBezier}, background-color .3s ${easeInOutCubicBezier}; + position: absolute; + transform: translateX(-50%) translateY(-50%); + height: ${dotSize}; + width: ${dotSize}; + border-radius: ${parseInt(dotSize) / 2}px; + overflow: hidden; + `, + boxShadow: dotBoxShadowDefault + }) + ]) + ]), + cTB('slider-handle-indicator', { + raw: ` + ${fadeInScaleUpTransition('slider-indicator')}, + transform:${transformDebounceScale}; + font-size: 14px; + padding: 8px 12px; + margin-bottom: 12px; + border-radius: 4px; + `, + color: indicatorTextColor, + backgroundColor: indicatorBackgroundColor, + boxShadow: indicatorBoxShadow + }) + ] + } +]) diff --git a/src/slider/styles/_common.js b/src/slider/styles/_common.js new file mode 100644 index 000000000..1c702ab27 --- /dev/null +++ b/src/slider/styles/_common.js @@ -0,0 +1,5 @@ +export default { + railHeight: '4px', + handleSize: '14px', + dotSize: '8px' +} diff --git a/src/slider/styles/dark.js b/src/slider/styles/dark.js new file mode 100644 index 000000000..d742623d7 --- /dev/null +++ b/src/slider/styles/dark.js @@ -0,0 +1,42 @@ +import create from '../../styles/_utils/create-component-base' +import { composite, changeColor } from '../../_utils/color/index.js' +import sizeVariables from './_common' + +export default create({ + name: 'Slider', + theme: 'dark', + getDerivedVariables ({ base, derived }) { + const boxShadow = '0 2px 8px 0 rgba(0, 0, 0, 0.12)' + const { + railBackgroundOverlayColor, + railHoverBackgroundOverlayColor, + cardBackgroundColor, + primaryColor, + popoverBackgroundColor, + secondaryTextOverlayColor + } = derived + const { + transformDebounceScale + } = base + const defaultFillColor = composite(cardBackgroundColor, changeColor(primaryColor, { alpha: 0.7 })) + return { + ...sizeVariables, + // defaultFillColor: defaultFillColor, + railBackgroundColorDefault: railBackgroundOverlayColor, + railBackgroundColorHover: railHoverBackgroundOverlayColor, + railFillBackgroundColorDefault: defaultFillColor, + railFillBackgroundColorHover: primaryColor, + handleBackgroundColor: cardBackgroundColor, + handleBoxShadowDefault: `inset 0 0 0 2px ${defaultFillColor}`, + handleBoxShadowHover: `inset 0 0 0 2px ${primaryColor}`, + handleBoxShadowActive: `inset 0 0 0 2px ${primaryColor}, 0 0 0 3px ${changeColor(primaryColor, { alpha: 0.2 })}`, + handleBoxShadowFocus: `inset 0 0 0 2px ${primaryColor}, 0 0 0 3px ${changeColor(primaryColor, { alpha: 0.2 })}`, + indicatorBackgroundColor: popoverBackgroundColor, + indicatorBoxShadow: boxShadow, + indicatorTextColor: secondaryTextOverlayColor, + dotBoxShadowDefault: `inset 0 0 0 2px ${defaultFillColor}`, + dotBoxShadowActive: `inset 0 0 0 2px ${primaryColor}`, + transformDebounceScale: transformDebounceScale + } + } +}) diff --git a/src/slider/styles/light.js b/src/slider/styles/light.js new file mode 100644 index 000000000..ffd94ec3f --- /dev/null +++ b/src/slider/styles/light.js @@ -0,0 +1,41 @@ + +import create from '../../styles/_utils/create-component-base' +import { changeColor } from '../../_utils/color/index.js' +import sizeVariables from './_common' + +export default create({ + name: 'Slider', + theme: 'light', + getDerivedVariables ({ base, derived }) { + const indicatorBackgroundColor = 'rgba(0, 0, 0, .85)' + const boxShadow = '0 2px 8px 0 rgba(0, 0, 0, 0.12)' + const { + railBackgroundOverlayColor, + railHoverBackgroundOverlayColor, + primaryColor, + primaryHoverColor, + baseBackgroundColor + } = derived + const { + transformDebounceScale + } = base + return { + ...sizeVariables, + railBackgroundColorDefault: railBackgroundOverlayColor, + railBackgroundColorHover: railHoverBackgroundOverlayColor, + railFillBackgroundColorDefault: primaryColor, + railFillBackgroundColorHover: primaryHoverColor, + handleBackgroundColor: baseBackgroundColor, + handleBoxShadowDefault: `inset 0 0 0 2px ${primaryColor}`, + handleBoxShadowHover: `inset 0 0 0 2px ${primaryHoverColor}`, + handleBoxShadowActive: `inset 0 0 0 2px ${primaryHoverColor}, 0 0 0 3px ${changeColor(primaryColor, { alpha: 0.2 })}`, + handleBoxShadowFocus: `inset 0 0 0 2px ${primaryHoverColor}, 0 0 0 3px ${changeColor(primaryColor, { alpha: 0.2 })}`, + indicatorBackgroundColor: indicatorBackgroundColor, + indicatorBoxShadow: boxShadow, + indicatorTextColor: baseBackgroundColor, + dotBoxShadowDefault: `inset 0 0 0 2px ${primaryColor}`, + dotBoxShadowActive: `inset 0 0 0 2px ${primaryHoverColor}`, + transformDebounceScale: transformDebounceScale + } + } +}) diff --git a/src/styles/base/dark.js b/src/styles/base/dark.js index a785ff5c7..e654eb374 100644 --- a/src/styles/base/dark.js +++ b/src/styles/base/dark.js @@ -170,6 +170,7 @@ export default create({ progressRailBackgroundOverlayColor: overlay(base.alphaProgressRail), railBackgroundColor: neutral(base.alphaRail), railBackgroundOverlayColor: overlay(base.alphaRail), + railHoverBackgroundOverlayColor: overlay(base.alphaRail * 1.5), popoverBackgroundColor: base.neutralPopover, tableBodyBackgroundColor: base.neutralCard, diff --git a/src/styles/base/light.js b/src/styles/base/light.js index 7bf7d26b3..63e87841f 100644 --- a/src/styles/base/light.js +++ b/src/styles/base/light.js @@ -170,6 +170,7 @@ export default create({ progressRailBackgroundOverlayColor: overlay(base.alphaProgressRail), railBackgroundColor: neutral(base.alphaRail), railBackgroundOverlayColor: overlay(base.alphaRail), + railHoverBackgroundOverlayColor: overlay(base.alphaRail * 0.75), popoverBackgroundColor: base.neutralPopover, tableBodyBackgroundColor: base.neutralCard, From 6e55c32cbbd812992269a344806d9518b1d118fd Mon Sep 17 00:00:00 2001 From: "songwanli2025@163.com" Date: Tue, 1 Sep 2020 15:13:17 +0800 Subject: [PATCH 2/2] feat(pagination): css in js --- src/Pagination/index.js | 7 - src/Pagination/tests/main.spec.js | 21 --- src/_styles/index.scss | 7 +- src/data-table/src/DataTable.vue | 2 +- src/index.js | 2 +- src/pagination/index.js | 7 + .../src/Pagination.vue} | 11 +- src/pagination/src/styles/index.js | 9 + src/pagination/src/styles/themed-base.cssr.js | 175 ++++++++++++++++++ src/{Pagination => pagination}/src/utils.js | 0 src/pagination/styles/dark.js | 37 ++++ src/pagination/styles/light.js | 37 ++++ src/pagination/tests/Pagination.spec.js | 50 +++++ .../tests/utils.spec.js | 0 test/unit/index.js | 2 +- test/unit/specs/src/Pagination/index.spec.js | 2 +- 16 files changed, 334 insertions(+), 35 deletions(-) delete mode 100644 src/Pagination/index.js delete mode 100644 src/Pagination/tests/main.spec.js create mode 100644 src/pagination/index.js rename src/{Pagination/src/main.vue => pagination/src/Pagination.vue} (97%) create mode 100644 src/pagination/src/styles/index.js create mode 100644 src/pagination/src/styles/themed-base.cssr.js rename src/{Pagination => pagination}/src/utils.js (100%) create mode 100644 src/pagination/styles/dark.js create mode 100644 src/pagination/styles/light.js create mode 100644 src/pagination/tests/Pagination.spec.js rename src/{Pagination => pagination}/tests/utils.spec.js (100%) diff --git a/src/Pagination/index.js b/src/Pagination/index.js deleted file mode 100644 index ea288d773..000000000 --- a/src/Pagination/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import Pagination from './src/main.vue' - -Pagination.install = function (Vue) { - Vue.component(Pagination.name, Pagination) -} - -export default Pagination diff --git a/src/Pagination/tests/main.spec.js b/src/Pagination/tests/main.spec.js deleted file mode 100644 index ed49cc09e..000000000 --- a/src/Pagination/tests/main.spec.js +++ /dev/null @@ -1,21 +0,0 @@ -import { expect } from 'chai' -import { mount } from '@vue/test-utils' -import Pagination from '../src/main.vue' - -describe('n-pagination', () => { - describe('props.page', () => { - it('should work', () => { - const wrapper = mount(Pagination, { - propsData: { - page: 5, - pageCount: 10 - } - }) - expect( - wrapper - .find('.n-pagination-item--active') - .text() - ).to.equal('5') - }) - }) -}) diff --git a/src/_styles/index.scss b/src/_styles/index.scss index d067ebf43..28ba4df14 100644 --- a/src/_styles/index.scss +++ b/src/_styles/index.scss @@ -10,7 +10,12 @@ @import './DatePicker.scss'; @import './Descriptions.scss'; @import './Form.scss'; -@import './Pagination.scss'; +// @import './Grid.scss'; +// @import './Message.scss'; +// @import './Layout.scss'; +// @import './Notification.scss'; +// @import './Pagination.scss'; +@import './Popconfirm.scss'; @import './Popover.scss'; @import './Popselect.scss'; @import './Radio.scss'; diff --git a/src/data-table/src/DataTable.vue b/src/data-table/src/DataTable.vue index 61c076062..c25186de3 100644 --- a/src/data-table/src/DataTable.vue +++ b/src/data-table/src/DataTable.vue @@ -69,7 +69,7 @@ import locale from '../../_mixins/locale' import { setCheckStatusOfRow, createRowKey } from './utils' import BaseTable from './BaseTable.vue' import NEmpty from '../../empty' -import NPagination from '../../Pagination' +import NPagination from '../../pagination' import formatLength from '../../_utils/css/formatLength' import isPlainObject from 'lodash-es/isPlainObject' import styles from './styles' diff --git a/src/index.js b/src/index.js index 8700ee01c..f3c183a11 100644 --- a/src/index.js +++ b/src/index.js @@ -42,7 +42,7 @@ import Menu from './menu' import Message from './message' import Modal from './modal' import Notification from './notification' -import Pagination from './Pagination' +import Pagination from './pagination' import Popconfirm from './popconfirm' import Popselect from './popselect' import Popup from './Popover' diff --git a/src/pagination/index.js b/src/pagination/index.js new file mode 100644 index 000000000..2e5d256ec --- /dev/null +++ b/src/pagination/index.js @@ -0,0 +1,7 @@ +import Pagination from './src/Pagination.vue' + +Pagination.install = function (Vue, naive) { + Vue.component(naive.componentPrefix + Pagination.name, Pagination) +} + +export default Pagination diff --git a/src/Pagination/src/main.vue b/src/pagination/src/Pagination.vue similarity index 97% rename from src/Pagination/src/main.vue rename to src/pagination/src/Pagination.vue index 1b441bc89..165c541af 100644 --- a/src/Pagination/src/main.vue +++ b/src/pagination/src/Pagination.vue @@ -100,15 +100,22 @@ import withapp from '../../_mixins/withapp' import themeable from '../../_mixins/themeable' import locale from '../../_mixins/locale' import { pageItems } from './utils' +import usecssr from '../../_mixins/usecssr' +import styles from './styles' export default { - name: 'NPagination', + name: 'Pagination', components: { NSelect, NInput, NBaseIcon }, - mixins: [ withapp, themeable, locale('Pagination') ], + mixins: [ + withapp, + themeable, + usecssr(styles), + locale('Pagination') + ], model: { prop: 'page', event: 'change' diff --git a/src/pagination/src/styles/index.js b/src/pagination/src/styles/index.js new file mode 100644 index 000000000..958d3000d --- /dev/null +++ b/src/pagination/src/styles/index.js @@ -0,0 +1,9 @@ +import baseStyle from './themed-base.cssr.js' + +export default [ + { + key: 'syntheticTheme', + watch: ['syntheticTheme'], + CNode: baseStyle + } +] diff --git a/src/pagination/src/styles/themed-base.cssr.js b/src/pagination/src/styles/themed-base.cssr.js new file mode 100644 index 000000000..304d928e9 --- /dev/null +++ b/src/pagination/src/styles/themed-base.cssr.js @@ -0,0 +1,175 @@ +import { cTB, c, cB, cE, cM, cNotM } from '../../../_utils/cssr' + +export default c([ + ({ props }) => { + const { + itemTextColorDefault, + itemTextColorHover, + itemTextColorActive, + itemTextColorDisabled, + itemBackgroundColorDefault, + itemBackgroundColorActive, + itemBackgroundColorDisabled, + itemBorderColorDefault, + itemBorderColorActive, + itemBorderColorDisabled, + textColorDisabled, + borderRadius + } = props.$local + const { + easeInOutCubicBezier + } = props.$base + return cTB('pagination', { + raw: ` + display: flex; + vertical-align: middle; + ` + }, [ + cB('select', { + raw: ` + width: unset; + ` + }), + cM('transition-disabled', [ + cB('pagination-item', { + raw: ` + transition: none; + ` + }) + ]), + cB('pagination-quick-jumper', { + raw: ` + white-space: nowrap; + display: flex; + width: 110px; + line-height: 28px; + transition: color .3s ${easeInOutCubicBezier}; + `, + color: itemTextColorDefault + }, [ + cB('input', { + raw: ` + margin: 0 8px; + ` + }, [ + c('input', { + raw: ` + padding-left: 6px; + padding-right: 10px; + ` + }) + ]) + ]), + cB('pagination-item', { + raw: ` + position: relative; + cursor: pointer; + user-select: none; + min-width:28px; + height:28px; + padding-left: 4px; + padding-right: 4px; + box-sizing: border-box; + opacity: 1; + transition: + color .3s ${easeInOutCubicBezier}, + box-shadow .3s ${easeInOutCubicBezier}, + background-color .3s ${easeInOutCubicBezier}, + opacity .3s ${easeInOutCubicBezier}, + fill .3s ${easeInOutCubicBezier}; + display: flex; + align-items: center; + justify-content: center; + border-radius: ${borderRadius}; + line-height: 28px; + `, + color: itemTextColorDefault, + fill: itemTextColorDefault + }, [ + c('&:not(:last-child)', { + raw: ` + margin-right: 8px; + ` + }), + cE('more-icon, arrow-icon', { + raw: ` + position: relative; + z-index: auto; + width: 16px; + height: 16px; + ` + }, [ + cB('base-icon', { + raw: ` + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + ` + }) + ]), + cM('fast-backward, fast-forward', [ + cE('more-icon', { + raw: ` + display: block; + ` + }), + cE('arrow-icon', { + raw: ` + display: none; + ` + }) + ]), + cM('active', { + background: itemBackgroundColorActive, + color: itemTextColorActive, + boxShadow: `inset 0 0 0 1px ${itemBorderColorActive}` + }), + cM('backward, forward', { + backgroundColor: itemBackgroundColorDefault, + boxShadow: `inset 0 0 0 1px ${itemBorderColorDefault}` + }), + cNotM('disabled', [ + c('&:hover', { + color: itemTextColorHover + }, [ + cM('fast-backward, fast-forward', [ + cE('more-icon', { + raw: ` + display: none; + ` + }), + cE('arrow-icon', { + raw: ` + display: block; + ` + }) + ]) + ]) + ]), + cM('disabled', { + raw: ` + cursor: not-allowed; + `, + fill: itemTextColorDisabled, + color: itemTextColorDisabled + }, [ + cM('active, backward, forward', { + backgroundColor: itemBackgroundColorDisabled, + boxShadow: `inset 0 0 0 1px ${itemBorderColorDisabled}` + }) + ]) + ]), + cM('disabled', { + raw: ` + cursor: not-allowed; + ` + }, [ + cB('pagination-quick-jumper', { + color: textColorDisabled + }) + ]) + ]) + } +]) diff --git a/src/Pagination/src/utils.js b/src/pagination/src/utils.js similarity index 100% rename from src/Pagination/src/utils.js rename to src/pagination/src/utils.js diff --git a/src/pagination/styles/dark.js b/src/pagination/styles/dark.js new file mode 100644 index 000000000..200128ab8 --- /dev/null +++ b/src/pagination/styles/dark.js @@ -0,0 +1,37 @@ +import create from '../../styles/_utils/create-component-base' +import { changeColor } from '../../_utils/color/index' +import suffixStyle from '../../_base/suffix/styles/dark' + +export default create({ + name: 'Pagination', + theme: 'dark', + peer: [ suffixStyle ], + getDerivedVariables ({ base, derived }) { + const { + secondaryTextOverlayColor, + primaryColor, + disabledBackgroundColor, + disabledTextOverlayColor, + borderOverlayColor, + tertiaryOpacity + } = derived + const { + borderRadius + } = base + return { + itemTextColorDefault: secondaryTextOverlayColor, + itemTextColorHover: primaryColor, + itemTextColorActive: primaryColor, + itemTextColorDisabled: disabledTextOverlayColor, + itemBackgroundColorDefault: 'transparent', + itemBackgroundColorActive: 'transparent', + itemBackgroundColorDisabled: disabledBackgroundColor, + itemBorderColorDefault: borderOverlayColor, + itemBorderColorActive: changeColor(primaryColor, { alpha: tertiaryOpacity }), + itemBorderColorDisabled: 'transparent', + textColorDefault: secondaryTextOverlayColor, + textColorDisabled: secondaryTextOverlayColor, + borderRadius: borderRadius + } + } +}) diff --git a/src/pagination/styles/light.js b/src/pagination/styles/light.js new file mode 100644 index 000000000..60f8f152d --- /dev/null +++ b/src/pagination/styles/light.js @@ -0,0 +1,37 @@ +import create from '../../styles/_utils/create-component-base' +import suffixStyle from '../../_base/suffix/styles/dark' + +export default create({ + name: 'Pagination', + theme: 'light', + peer: [ suffixStyle ], + getDerivedVariables ({ base, derived }) { + const { + secondaryTextColor, + primaryColor, + disabledBackgroundColor, + disabledTextColor, + cardBackgroundColor, + baseBackgroundColor, + borderColor + } = derived + const { + borderRadius + } = base + return { + itemTextColorDefault: secondaryTextColor, + itemTextColorHover: primaryColor, + itemTextColorActive: primaryColor, + itemTextColorDisabled: disabledTextColor, + itemBackgroundColorDefault: cardBackgroundColor, + itemBackgroundColorActive: baseBackgroundColor, + itemBackgroundColorDisabled: disabledBackgroundColor, + itemBorderColorDefault: borderColor, + itemBorderColorActive: primaryColor, + itemBorderColorDisabled: borderColor, + textColorDefault: secondaryTextColor, + textColorDisabled: disabledTextColor, + borderRadius: borderRadius + } + } +}) diff --git a/src/pagination/tests/Pagination.spec.js b/src/pagination/tests/Pagination.spec.js new file mode 100644 index 000000000..70fc855d0 --- /dev/null +++ b/src/pagination/tests/Pagination.spec.js @@ -0,0 +1,50 @@ +import Vue from 'vue' +import { expect } from 'chai' +import { mount } from '@vue/test-utils' +import Pagination from '../index' +import create from '../../create' +import zhCN from '../../locale/zhCN' +import enUS from '../../locale/enUS' +import lightScheme from '../../_styles-in-js/lightStyleScheme.scss' +import darkScheme from '../../_styles-in-js/darkStyleScheme.scss' +import paginationLightStyle from '../styles/light' +import paginationDarkStyle from '../styles/dark' +import baseDarkStyle from '../../styles/base/dark' +import baseLightStyle from '../../styles/base/light' + +describe('n-pagination', () => { + describe('props.page', () => { + it('should work', () => { + const naive = create({ + locales: [zhCN, enUS], + fallbackLocale: enUS, + fallbackTheme: 'light', + components: [ + Pagination + ], + styles: [ + baseLightStyle, + baseDarkStyle, + paginationLightStyle, + paginationDarkStyle + ], + styleSchemes: { + light: lightScheme, + dark: darkScheme + } + }) + Vue.use(naive) + const wrapper = mount(Pagination, { + propsData: { + page: 5, + pageCount: 10 + } + }) + expect( + wrapper + .find('.n-pagination-item--active') + .text() + ).to.equal('5') + }) + }) +}) diff --git a/src/Pagination/tests/utils.spec.js b/src/pagination/tests/utils.spec.js similarity index 100% rename from src/Pagination/tests/utils.spec.js rename to src/pagination/tests/utils.spec.js diff --git a/test/unit/index.js b/test/unit/index.js index a8ea16531..448a6aa1d 100644 --- a/test/unit/index.js +++ b/test/unit/index.js @@ -6,5 +6,5 @@ import 'regenerator-runtime/runtime' // packagesContext.keys().forEach(packagesContext) // require all test files (files that ends with .spec.js) -const testsContext = require.context('./specs/src/Pagination', true, /\.spec.js$/) +const testsContext = require.context('./specs/src/pagination', true, /\.spec.js$/) testsContext.keys().forEach(testsContext) diff --git a/test/unit/specs/src/Pagination/index.spec.js b/test/unit/specs/src/Pagination/index.spec.js index 970578ba8..5a55ff1ee 100644 --- a/test/unit/specs/src/Pagination/index.spec.js +++ b/test/unit/specs/src/Pagination/index.spec.js @@ -1,4 +1,4 @@ -import { pagesToShow, mapPagesToPageItems, pageItems } from 'src/Pagination/src/utils' +import { pagesToShow, mapPagesToPageItems, pageItems } from 'src/pagination/src/utils' import { expect } from 'chai' describe('Pagination', function () {