feat(thing): css in js

src/Thing/index.js

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

src/index.js

@@ -59,7 +59,7 @@ import Switch from './Switch'
 import Table from './Table'
 import Tabs from './Tabs'
 import Tag from './tag'
-import Thing from './Thing'
+import Thing from './thing'
 import Time from './Time'
 import TimePicker from './TimePicker'
 import Timeline from './Timeline'
@@ -158,12 +158,17 @@ import scrollBarLightStyle from './scrollbar/styles/light'
 import scrollBarDarkStyle from './scrollbar/styles/dark'
 import cascaderLightStyle from './cascader/styles/light'
 import cascaderDarkStyle from './cascader/styles/dark'
+<<<<<<< HEAD
 import checkboxLightStyle from './checkbox/styles/light'
 import checkboxDarkStyle from './checkbox/styles/dark'
 import spinDarkStyle from './spin/styles/dark'
 import spinLightStyle from './spin/styles/light'
 import statisticLightStyle from './statistic/styles/light'
 import statisticDarkStyle from './statistic/styles/dark'
+=======
+import thingLightStyle from './thing/styles/light'
+import thingDarkStyle from './thing/styles/dark'
+>>>>>>> 66b33db... feat(thing): css in js
 
 // Can be remove after refactoring
 import baseSelectionLightStyle from './_base/selection/styles/light'
@@ -357,6 +362,8 @@ export default create({
     spinLightStyle,
     statisticLightStyle,
     statisticDarkStyle,
+    thingLightStyle,
+    thingDarkStyle,
     // Can be remove after refactoring
     baseSelectionLightStyle,
     baseSelectionDarkStyle

src/thing/index.js

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

src/thing/src/Thing.vue

@@ -74,10 +74,16 @@
 <script>
 import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles'
 
 export default {
-  name: 'NThing',
-  mixins: [ withapp, themeable ],
+  name: 'Thing',
+  mixins: [
+    withapp,
+    themeable,
+    usecssr(styles)
+  ],
   props: {
     title: {
       type: String,

src/thing/src/styles/index.js

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

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

@@ -0,0 +1,92 @@
+import { c, cTB, cB, cE } from '../../../_utils/cssr'
+
+export default c([
+  ({ props }) => {
+    const {
+      easeInOutCubicBezier,
+      strongWeight
+    } = props.$base
+    const {
+      thingHeaderTextColor,
+      thingTextColor
+    } = props.$local
+    return cTB('thing', {
+      raw: `
+      display: flex;
+      transition: color .3s ${easeInOutCubicBezier};
+      font-size: 14px;
+      `,
+      color: thingTextColor
+    }, [
+      cB('thing-avatar', {
+        raw: `
+        margin-right: 12px;
+        margin-top: 2px;
+        `
+      }),
+      cB('thing-avatar-header-wrapper', {
+        raw: `
+        display: flex;
+        flex-wrap: nowrap;
+        `
+      }, [
+        cB('thing-avatar-header-wrapper', {
+          raw: `
+          flex: 1;
+          `
+        })
+      ]),
+      cB('thing-main', {
+        raw: `
+        flex-grow: 1;
+        `
+      }, [
+        cB('thing-header', {
+          raw: `
+          display: flex;
+          margin-bottom: 4px;
+          justify-content: space-between;
+          align-items: center;
+          `
+        }, [
+          cE('title', {
+            raw: `
+            font-size: 16px;
+            font-weight: ${strongWeight};
+            transition: color .3s ${easeInOutCubicBezier};
+            `,
+            color: thingHeaderTextColor
+          })
+        ]),
+        cE('description', [
+          c('&:not(:last-child)', {
+            raw: `
+            margin-bottom: 4px;
+            `
+          })
+        ]),
+        cE('content', [
+          c('&:not(:first-child)', {
+            raw: `
+            margin-top: 12px;
+            `
+          })
+        ]),
+        cE('footer', [
+          c('&:not(:first-child)', {
+            raw: `
+            margin-top: 12px;
+            `
+          })
+        ]),
+        cE('action', [
+          c('&:not(:first-child)', {
+            raw: `
+            margin-top: 12px;
+            `
+          })
+        ])
+      ])
+    ])
+  }
+])

src/thing/styles/dark.js

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

src/thing/styles/light.js

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