feat(divider): css in js (#240)

Co-authored-by: Lecong Zhang <50313260+tskirby@users.noreply.github.com>

src/Divider/index.js

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

src/data-table/src/HeaderButton/FilterMenu.vue

@@ -63,7 +63,7 @@ import NCheckboxGroup from '../../../Checkbox/src/CheckboxGroup'
 import NCheckbox from '../../../Checkbox/src/Checkbox'
 import NRadioGroup from '../../../Radio/src/RadioGroup'
 import NRadio from '../../../Radio/src/Radio'
-import NDivider from '../../../Divider'
+import NDivider from '../../../divider'
 import NButton from '../../../button'
 import NScrollbar from '../../../Scrollbar'
 import { shouldUseArrayInSingleMode } from '../utils'

src/divider/index.js

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

src/divider/src/Divider.vue

@@ -31,7 +31,7 @@ import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 
 export default {
-  name: 'NDivider',
+  name: 'Divider',
   mixins: [
     withapp,
     themeable

src/divider/src/styles/index.js

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

src/divider/src/styles/themed-base.cssr.js

@@ -0,0 +1,120 @@
+import { c, cTB, cNotM, cE, cM } from '../../../_utils/cssr'
+
+export default c([
+  ({ props }) => {
+    const { easeInOutCubicBezier, strongFontWeight } = props.$base
+    const {
+      dividerTextColor,
+      dividerBorderColor
+    } = props.$local
+    return [
+      cTB(
+        'divider',
+        {
+          raw: `
+            position: relative;
+            display: flex;
+            width: 100%;
+            box-sizing: border-box;
+            font-size: 16px;
+            color: ${dividerTextColor}
+            transition: background-color .3s ${easeInOutCubicBezier};
+          `
+        },
+        [
+          cNotM('vertical', {
+            raw: `
+              margin-top: 24px;
+              margin-bottom: 24px;
+            `
+          },
+          [
+            cNotM('no-title', {
+              raw: `
+                display: flex;
+                align-items: center;
+              `
+            })
+          ]),
+          cE('title', {
+            raw: `
+              transition: color .3s ${easeInOutCubicBezier};
+              display: flex;
+              align-items: center;
+              margin-left: 12px;
+              margin-right: 12px;
+              white-space: nowrap;
+              font-weight: ${strongFontWeight};
+            `
+          }),
+          cM('title-position-left', [
+            cE('line', [
+              cM('left', {
+                raw: `
+                  width: 28px;
+                `
+              })
+            ])
+          ]),
+          cM('title-position-right', [
+            cE('line', [
+              cM('right', {
+                raw: `
+                  width: 28px;
+                `
+              })
+            ])
+          ]),
+          cM('dashed', [
+            cE('line', {
+              raw: `
+                background-color: transparent;
+                height: 0px;
+                width: 100%;
+                border-style: dashed;
+                border-width: 1px 0 0;
+              `
+            })
+          ]),
+          cM('vertical', {
+            raw: `
+              display: inline-block;
+              height: 1em;
+              margin: 0 8px;
+              vertical-align: middle;
+              width: 1px;
+            `
+          }),
+          cE('line', {
+            raw: `
+              border: none;
+              transition: background-color .3s ${easeInOutCubicBezier}, border-color .3s ${easeInOutCubicBezier};
+              height: 1px;
+              width: 100%;
+              margin: 0;
+            `
+          }),
+          cNotM('dashed', [
+            cE('line', {
+              raw: `
+                background-color: ${dividerBorderColor};
+              `
+            })
+          ]),
+          cM('dashed', [
+            cE('line', {
+              raw: `
+                border-color:: ${dividerBorderColor};
+              `
+            })
+          ]),
+          cM('vertical', {
+            raw: `
+              background-color: ${dividerBorderColor};
+            `
+          })
+        ]
+      )
+    ]
+  }
+])

src/divider/styles/dark.js

@@ -0,0 +1,16 @@
+import create from '../../styles/_utils/create-component-base'
+
+export default create({
+  theme: 'dark',
+  name: 'Divider',
+  getDerivedVariables ({ base, derived }) {
+    const {
+      primaryTextOverlayColor,
+      dividerOverlayColor
+    } = derived
+    return {
+      dividerTextColor: primaryTextOverlayColor,
+      dividerBorderColor: dividerOverlayColor
+    }
+  }
+})

src/divider/styles/light.js

@@ -0,0 +1,16 @@
+import create from '../../styles/_utils/create-component-base'
+
+export default create({
+  theme: 'light',
+  name: 'Divider',
+  getDerivedVariables ({ base, derived }) {
+    const {
+      primaryTextColor,
+      dividerOverlayColor
+    } = derived
+    return {
+      dividerTextColor: primaryTextColor,
+      dividerBorderColor: dividerOverlayColor
+    }
+  }
+})

src/index.js

@@ -32,7 +32,7 @@ import ConfirmPlugin from './confirm'
 import Badge from './badge'
 import Tag from './tag'
 import BackTop from './back-top'
-import Divider from './Divider'
+import Divider from './divider'
 import Collapse from './Collapse'
 import Timeline from './Timeline'
 import Popconfirm from './Popconfirm'
@@ -119,6 +119,8 @@ import anchorLightStyle from './anchor/styles/light'
 import anchorDarkStyle from './anchor/styles/dark'
 import breadcrumbLightStyle from './breadcrumb/styles/light'
 import breadcrumbDarkStyle from './breadcrumb/styles/dark'
+import dividerLightStyle from './divider/styles/light'
+import dividerDarkStyle from './divider/styles/dark'
 import dynamicInputLightStyle from './dynamicInput/styles/light'
 import dynamicInputDarkStyle from './dynamicInput/styles/dark'
 import confirmLightStyle from './confirm/styles/light'
@@ -264,6 +266,8 @@ export default create({
     anchorDarkStyle,
     breadcrumbLightStyle,
     breadcrumbDarkStyle,
+    dividerLightStyle,
+    dividerDarkStyle,
     dynamicInputLightStyle,
     dynamicInputDarkStyle,
     confirmLightStyle,