feat(empty): css in js (#243)

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

src/Empty/index.js

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

src/_base/select-menu/src/SelectMenu.vue

@@ -110,7 +110,7 @@ import NScrollbar from '../../../Scrollbar'
 import NSelectOption from './SelectOption.vue'
 import NSelectGroupHeader from './SelectGroupHeader.vue'
 import NBaseTrackingRect from '../../tracking-rect'
-import NEmpty from '../../../Empty'
+import NEmpty from '../../../empty'
 import { RecycleScroller } from 'vue-virtual-scroller'
 import render from '../../../_utils/vue/render'
 import {

src/data-table/src/DataTable.vue

@@ -68,7 +68,7 @@ import usecssr from '../../_mixins/usecssr'
 import locale from '../../_mixins/locale'
 import { setCheckStatusOfRow, createRowKey } from './utils'
 import BaseTable from './BaseTable.vue'
-import NEmpty from '../../Empty'
+import NEmpty from '../../empty'
 import NPagination from '../../Pagination'
 import formatLength from '../../_utils/css/formatLength'
 import isPlainObject from 'lodash-es/isPlainObject'

src/empty/index.js

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

src/empty/src/Empty.vue

@@ -31,14 +31,21 @@ import themeable from '../../_mixins/themeable'
 import locale from '../../_mixins/locale'
 import removeCircleOutline from '../../_icons/remove-circle-outline'
 import NIcon from '../../Icon'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles/index'
 
 export default {
-  name: 'NEmpty',
+  name: 'Empty',
   components: {
     removeCircleOutline,
     NIcon
   },
-  mixins: [ withapp, themeable, locale('Empty') ],
+  mixins: [
+    withapp,
+    themeable,
+    locale('Empty'),
+    usecssr(styles)
+  ],
   props: {
     description: {
       type: String,

src/empty/src/styles/index.js

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

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

@@ -0,0 +1,52 @@
+import { c, cTB, cB, cE } from '../../../_utils/cssr'
+
+export default c([
+  ({ props }) => {
+    const {
+      textColor,
+      iconColor,
+      extraTextColor
+    } = props.$local
+    const base = props.$base
+    const easeInOutCubicBezier = base.easeInOutCubicBezier
+    return [
+      cTB('empty', {
+        raw: `
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 14px;
+        `
+      },
+      [
+        cE('icon', {
+          raw: `
+          transition: fill .3s ${easeInOutCubicBezier};
+          `
+        }, [
+          cB('icon', {
+            raw: `
+            fill: ${iconColor};
+            stroke: ${iconColor};
+            `
+          })
+        ]),
+        cE('description', {
+          raw: `
+          margin-top: 4px;
+          transition: color .3s ${easeInOutCubicBezier};
+          color: ${textColor};
+          `
+        }),
+        cE('extra', {
+          raw: `
+          text-align: center;
+          transition: color .3s ${easeInOutCubicBezier};
+          margin-top: 16px;
+          color: ${extraTextColor};
+          `
+        })
+      ])
+    ]
+  }
+])

src/empty/src/styles/themed-size.cssr.js

@@ -0,0 +1,30 @@
+import { c, cTB, cE, cM } from '../../../_utils/cssr'
+
+export default c([
+  ({ props }) => {
+    const {
+      fontSize,
+      iconSize
+    } = props.$local
+    const size = props.$instance.size
+    const theIconSize = iconSize[size]
+    return cTB('empty', [
+      cM(
+        `${size}-size`,
+        {
+          fontSize: fontSize[size]
+        },
+        [
+          cE('icon', {
+            raw: `
+            width: ${theIconSize};
+            height: ${theIconSize};
+            font-size: ${theIconSize};
+            line-height: ${theIconSize};
+            `
+          })
+        ]
+      )
+    ])
+  }
+])

src/empty/styles/_common.js

@@ -0,0 +1,14 @@
+export default {
+  fontSize: {
+    'small': '14px',
+    'medium': '14px',
+    'large': '15px',
+    'huge': '16px'
+  },
+  iconSize: {
+    'small': '28px',
+    'medium': '34px',
+    'large': '40px',
+    'huge': '46px'
+  }
+}

src/empty/styles/dark.js

@@ -0,0 +1,20 @@
+import create from '../../styles/_utils/create-component-base'
+import sizeVarables from './_common'
+
+export default create({
+  theme: 'dark',
+  name: 'Empty',
+  getDerivedVariables ({ derived }) {
+    const {
+      disabledTextOverlayColor,
+      iconOverlayColor,
+      secondaryTextOverlayColor
+    } = derived
+    return {
+      ...sizeVarables,
+      textColor: disabledTextOverlayColor,
+      iconColor: iconOverlayColor,
+      extraTextColor: secondaryTextOverlayColor
+    }
+  }
+})

src/empty/styles/light.js

@@ -0,0 +1,20 @@
+import create from '../../styles/_utils/create-component-base'
+import sizeVarables from './_common'
+
+export default create({
+  theme: 'light',
+  name: 'Empty',
+  getDerivedVariables ({ derived }) {
+    const {
+      disabledTextColor,
+      iconOverlayColor,
+      secondaryTextColor
+    } = derived
+    return {
+      ...sizeVarables,
+      textColor: disabledTextColor,
+      iconColor: iconOverlayColor,
+      extraTextColor: secondaryTextColor
+    }
+  }
+})

src/index.js

@@ -59,7 +59,7 @@ import Avatar from './avatar'
 import Result from './Result'
 import Thing from './Thing'
 import AutoComplete from './auto-complete'
-import Empty from './Empty'
+import Empty from './empty'
 import Element from './element'
 import Log from './Log'
 import Code from './code'
@@ -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 emptyLightStyle from './empty/styles/light'
+import emptyDarkStyle from './empty/styles/dark'
 import dropdownLightStyle from './dropdown/styles/light'
 import dropdownDarkStyle from './dropdown/styles/dark'
 import collapseLightStyle from './collapse/styles/light'
@@ -270,6 +272,8 @@ export default create({
     anchorDarkStyle,
     breadcrumbLightStyle,
     breadcrumbDarkStyle,
+    emptyLightStyle,
+    emptyDarkStyle,
     dropdownLightStyle,
     dropdownDarkStyle,
     collapseLightStyle,

src/transfer/src/Transfer.vue

@@ -190,7 +190,7 @@ import NTransferTargetListItem from './TransferTargetListItem'
 import NTransferButton from './TransferButton'
 import NInput from '../../input'
 import NIcon from '../../Icon'
-import NEmpty from '../../Empty'
+import NEmpty from '../../empty'
 import NBaseTrackingRect from '../../_base/tracking-rect'
 import iosSearch from '../../_icons/ios-search'
 import locale from '../../_mixins/locale'