refactor(confirm): fix some bugs

demo/documentation/components/confirm/enUS/index.md

@@ -2,4 +2,5 @@
 ```demo
 basic
 async
+use-component
 ```

demo/documentation/components/confirm/enUS/useComponent.md

@@ -1,8 +1,29 @@
 # Use Component
 ```html
-<n-confirm title="Title">
+<n-confirm
+  title="Confirm"
+  content="Are you sure?" 
+  :closable="false"
+  positive-text="submit"
+  @positive-click="cancelCallback"
+  @negative-click="submitCallback"
+  negative-text="cancel">
 </n-confirm>
 ```
+```js
+export default {
+  methods: {
+    cancelCallback () {
+      this.$NMessage.success('cancel')
+      this.isActive = false
+    },
+    submitCallback () {
+      this.$NMessage.success('submit')
+      this.isActive = false
+    }
+  }
+}
+```
 ```css
 .n-button {
   margin: 0 12px 8px 0;

packages/base/SelectMenu/src/SelectMenu.vue

@@ -255,9 +255,7 @@ export default {
         this.pendingOption = this.id2Option.get(id)
         this.pendingOptionElement = el
         this.updateLightBarPosition(this.pendingOptionElement)
-        if (this.$refs.scrollbar) {
-          this.$refs.scrollbar.scrollToElement(this.pendingOptionElement)
-        }
+        this.$refs.scrollbar.scrollToElement(this.pendingOptionElement)
       }
     }
   }

packages/common/Confirm/src/confirm.vue

@@ -1,11 +1,13 @@
 <template>
   <n-modal
     v-model="active"
+    :theme="theme"
     :activate-event="event"
     :mask-closable="maskClosable"
     @after-hide="handleAfterHide"
   >
     <n-confirm
+      :theme="theme"
       :type="type"
       :content="content"
       :positive-text="positiveText"

packages/common/Scrollbar/index.js

@@ -1,5 +1,5 @@
 /* istanbul ignore file */
-import ScrollBar from './src/ScrollbarAdaptor.vue'
+import ScrollBar from './src/Scrollbar.vue'
 
 ScrollBar.install = function (Vue) {
   Vue.component(ScrollBar.name, ScrollBar)

packages/common/Scrollbar/src/Scrollbar.vue

@@ -1,5 +1,9 @@
 <template>
+  <div v-if="withoutScrollbar">
+    <slot />
+  </div>
   <div
+    v-else
     class="n-scrollbar"
     :class="{
       [`n-${synthesizedTheme}-theme`]: synthesizedTheme
@@ -79,6 +83,10 @@ export default {
     duration: {
       type: Number,
       default: 0
+    },
+    withoutScrollbar: {
+      type: Boolean,
+      default: false
     }
   },
   data () {

packages/common/Scrollbar/src/ScrollbarAdaptor.vue

@@ -1,18 +0,0 @@
-<script>
-import NScrollbar from './Scrollbar.vue'
-
-export default {
-  name: 'NScrollbar',
-  functional: true,
-  render (h, context) {
-    if (context.props.withoutScrollbar) return context.scopedSlots.default()
-    else {
-      return h(NScrollbar, {
-        props: context.props,
-        scopedSlots: context.scopedSlots,
-        on: context.listeners
-      })
-    }
-  }
-}
-</script>

packages/presets/Confirm/src/Confirm.vue

@@ -2,8 +2,9 @@
   <div
     class="n-confirm"
     :class="{
-      [`n-${theme}-theme`]: theme
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme
     }"
+    :style="synthesizedStyle"
   >
     <div class="n-confirm-title">
       <span class="n-confirm-title-content">
@@ -74,7 +75,9 @@ import iosCheckmarkCircle from '../../../icons/ios-checkmark-circle'
 import mdClose from '../../../icons/md-close'
 import iosHelpCircle from '../../../icons/ios-help-circle'
 import iosCloseCircle from '../../../icons/ios-close-circle'
+import withapp from '../../../mixins/withapp'
 import themeable from '../../../mixins/themeable'
+import asthemecontext from '../../../mixins/asthemecontext'
 
 export default {
   name: 'NConfirm',
@@ -86,7 +89,7 @@ export default {
     iosCheckmarkCircle,
     iosCloseCircle
   },
-  mixins: [themeable],
+  mixins: [withapp, themeable, asthemecontext],
   props: {
     type: {
       type: String,

styles/Confirm.scss

@@ -4,7 +4,8 @@
 @include themes-mixin {
   @include b(confirm) {
     @include once {
-      width: 80vw;
+      box-sizing: border-box;
+      width: 100%;
       max-width: 446px;
       margin: auto;
       border-radius: 9px;
@@ -64,7 +65,6 @@
       color: $--confirm-title-color;
     }
     background: $--confirm-background-color;
-    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.16);
     color: $--confirm-color;
   }
 }

styles/Modal.scss

@@ -9,6 +9,9 @@
     @include b(card) {
       background-color: $--n-dialog-color;
     }
+    @include b(confirm) {
+      width: 80vw;
+    }
     & > .n-scrollbar {
       & > .n-scrollbar-container > .n-scrollbar-content {
         min-height: 100%;

styles/themes/commonVars.scss

@@ -23,7 +23,7 @@ $--input-number-border-radius: 6px;
 $--input-icon-size: 20px;
 $--input-border-radius: 6px;
 
-$--popover-box-shadow: (0px 0px 8px 0px rgba(0,0,0,0.08));
+$--popover-box-shadow: (0px 2px 12px 0px rgba(0, 0, 0, 0.18));
 
 $--slider-rail-height: 4px;
 $--slider-dot-size: 8px;