feat(pagination): css in js

src/Pagination/index.js

@@ -1,7 +0,0 @@
-import Pagination from './src/main.vue'
-
-Pagination.install = function (Vue) {
-  Vue.component(Pagination.name, Pagination)
-}
-
-export default Pagination

src/Pagination/tests/main.spec.js

@@ -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')
-    })
-  })
-})

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';

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'

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'

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

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'

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
+  }
+]

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
+        })
+      ])
+    ])
+  }
+])

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
+    }
+  }
+})

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
+    }
+  }
+})

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')
+    })
+  })
+})

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)

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 () {