feat(popconfirm): css in js (#255)

* feat(popconfirm): css in js

* chore: fix code review

* chore: fix code review

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

src/Popconfirm/index.js

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

src/_styles/Popconfirm.scss

@@ -1,33 +1,33 @@
-@import './mixins/mixins.scss';
+// @import './mixins/mixins.scss';
 
-@include b(popconfirm-content) {
+// @include b(popconfirm-content) {
-  padding: 4px 0;
+//   padding: 4px 0;
-  @include m(no-icon) {
+//   @include m(no-icon) {
-    @include e(body) {
+//     @include e(body) {
-      padding-left: 0;
+//       padding-left: 0;
-    }
+//     }
-  }
+//   }
-  @include e(body) {
+//   @include e(body) {
-    font-size: 13px;
+//     font-size: 13px;
-    white-space: nowrap;
+//     white-space: nowrap;
-    padding-left: 22px;
+//     padding-left: 22px;
-    position: relative;
+//     position: relative;
-    @include b(icon) {
+//     @include b(icon) {
-      position: absolute;
+//       position: absolute;
-      font-size: 18px;
+//       font-size: 18px;
-      left: 0;
+//       left: 0;
-      top: 0;
+//       top: 0;
-    }
+//     }
-  }
+//   }
-  @include e(action) {
+//   @include e(action) {
-    margin-top: 14px;
+//     margin-top: 14px;
-    display: flex;
+//     display: flex;
-    justify-content: flex-end;
+//     justify-content: flex-end;
-    @include b(button) {
+//     @include b(button) {
-      margin-right: 8px;
+//       margin-right: 8px;
-      &:last-child {
+//       &:last-child {
-        margin-right: 0;
+//         margin-right: 0;
-      }
+//       }
-    }
+//     }
-  }
+//   }
-}
+// }

src/index.js

@@ -43,6 +43,8 @@ import Message from './Message'
 import Modal from './modal'
 import Notification from './Notification'
 import Pagination from './Pagination'
+import Popconfirm from './pop-confirm'
+import Popselect from './Popselect'
 import Popconfirm from './Popconfirm'
 import Popselect from './pop-select'
 import Popup from './Popover'
@@ -140,6 +142,8 @@ import loadingBarLightStyle from './loading-bar/styles/light'
 import loadingBarDarkStyle from './loading-bar/styles/dark'
 import modalDarkStyle from './modal/styles/dark'
 import modalLightStyle from './modal/styles/light'
+import popConfirmDarkStyle from './pop-confirm/styles/dark'
+import popConfirmLightStyle from './pop-confirm/styles/light'
 import popSelectLightStyle from './pop-select/styles/light'
 import popSelectDarkStyle from './pop-select/styles/dark'
 import resultDarkStyle from './result/styles/dark'
@@ -313,6 +317,8 @@ export default create({
     loadingBarLightStyle,
     modalDarkStyle,
     modalLightStyle,
+    popConfirmDarkStyle,
+    popConfirmLightStyle,
     popSelectLightStyle,
     popSelectDarkStyle,
     resultDarkStyle,

src/pop-confirm/index.js

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

src/pop-confirm/src/Popconfirm.vue

@@ -3,7 +3,7 @@ import NPopover from '../../Popover'
 import PopconfirmPanel from './PopconfirmPanel'
 
 export default {
-  name: 'NPopconfirm',
+  name: 'Popconfirm',
   functional: true,
   props: {
     ...NPopover.props,

src/pop-confirm/src/PopconfirmPanel.vue

@@ -45,15 +45,25 @@ import NButton from '../../button'
 import NIcon from '../../icon'
 import mdAlert from '../../_icons/md-alert'
 import locale from '../../_mixins/locale'
+import withapp from '../../_mixins/withapp'
+import themeable from '../../_mixins/themeable'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles'
 
 export default {
   name: 'NPopconfirmPanel',
+  cssrName: 'Popconfirm',
   components: {
     NButton,
     NIcon,
     mdAlert
   },
-  mixins: [ locale('Popconfirm') ],
+  mixins: [
+    locale('Popconfirm'),
+    withapp,
+    themeable,
+    usecssr(styles)
+  ],
   props: {
     positiveText: {
       type: String,

src/pop-confirm/src/styles/index.js

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

src/pop-confirm/src/styles/themed-base.cssr.js

@@ -0,0 +1,57 @@
+import { cTB, c, cB, cE, cM } from '../../../_utils/cssr'
+
+export default c([
+  ({ props }) => {
+    return [
+      cTB('popconfirm-content', {
+        raw: `
+          padding: 4px 0;
+        `
+      }, [
+        cE('body', {
+          raw: `
+            font-size: 13px;
+            white-space: nowrap;
+            padding-left: 22px;
+            position: relative;
+          `
+        }, [
+          cB('icon', {
+            raw: `
+              position: absolute;
+              font-size: 18px;
+              left: 0;
+              top: 0;
+            `
+          })
+        ]),
+        cM('no-icon', [
+          cE('body', {
+            raw: `
+              padding-left: 0;
+            `
+          })
+        ]),
+        cE('action', {
+          raw: `
+            margin-top: 14px;
+            display: flex;
+            justify-content: flex-end;
+          `
+        }, [
+          cB('button', {
+            raw: `
+              margin-right: 8px;
+            `
+          }, [
+            c('&:last-child', {
+              raw: `
+                margin-right: 0;
+              `
+            })
+          ])
+        ])
+      ])
+    ]
+  }
+])

src/pop-confirm/styles/dark.js

@@ -0,0 +1,11 @@
+import create from '../../styles/_utils/create-component-base'
+
+export default create({
+  name: 'Popconfirm',
+  theme: 'dark',
+  getDerivedVariables ({ base, derived }) {
+    return {
+
+    }
+  }
+})

src/pop-confirm/styles/light.js

@@ -0,0 +1,11 @@
+import create from '../../styles/_utils/create-component-base'
+
+export default create({
+  name: 'Popconfirm',
+  theme: 'light',
+  getDerivedVariables ({ base, derived }) {
+    return {
+
+    }
+  }
+})