refactor: different manner to add namespace to detached content container

packages/common/Cascader/src/BaseCascader.vue

@@ -38,6 +38,9 @@
     <div
       ref="contentContainer"
       class="n-detached-content-container n-cascader-detached-content-container"
+      :class="{
+        [namespace]: namespace
+      }"
     >
       <div
         ref="content"

packages/common/DatePicker/src/main.vue

@@ -72,7 +72,10 @@
     </div>
     <div
       ref="contentContainer"
-      class="n-detached-content-container"
+      class="n-detached-content-container n-date-picker-detached-content-container"
+      :class="{
+        [namespace]: namespace
+      }"
     >
       <div
         ref="content"

packages/common/Modal/src/main.vue

@@ -47,7 +47,8 @@ export default {
         staticClass: 'n-modal-container',
         ref: 'contentContainer',
         class: {
-          'n-modal-container--active': this.value
+          'n-modal-container--active': this.value,
+          [this.namespace]: this.namespace
         }
       },
       [

packages/common/Popover/src/PopoverContent.js

@@ -3,6 +3,7 @@ import clickoutside from '../../../directives/clickoutside'
 import mousemoveoutside from '../../../directives/mousemoveoutside'
 import placeable from '../../../mixins/placeable'
 import zindexable from '../../../mixins/zindexable'
+import withapp from '../../../mixins/withapp'
 
 export default {
   name: 'NPopoverContent',
@@ -42,9 +43,13 @@ export default {
     maxWidth: {
       type: Number,
       default: null
+    },
+    detachedContainerClass: {
+      type: String,
+      default: 'n-popover-detached-content-container'
     }
   },
-  mixins: [placeable, zindexable],
+  mixins: [withapp, placeable, zindexable],
   directives: {
     clickoutside,
     mousemoveoutside
@@ -187,6 +192,10 @@ export default {
     // console.log('render popover content', this.$props)
     return h('div', {
       staticClass: 'n-detached-content-container',
+      class: {
+        [this.detachedContainerClass]: true,
+        [this.namespace]: this.namespace
+      },
       ref: 'contentContainer'
     }, [
       h('div', {

packages/common/Select/src/BaseSelect.vue

@@ -41,6 +41,9 @@
       ref="contentContainer"
       v-clickoutside="handleClickOutsideMenu"
       class="n-detached-content-container n-select-detached-content-container"
+      :class="{
+        [namespace]: namespace
+      }"
     >
       <div
         ref="content"

packages/common/Slider/src/main.vue

@@ -61,7 +61,10 @@
     </div>
     <div
       ref="contentContainer"
-      class="n-detached-content-container"
+      class="n-detached-content-container n-slider-detached-content-container"
+      :class="{
+        [namespace]: namespace
+      }"
     >
       <div
 

packages/common/TimePicker/src/main.vue

@@ -12,7 +12,10 @@
     </div>
     <div
       ref="contentContainer"
-      class="n-detached-content-container"
+      class="n-detached-content-container n-time-picker-detached-content-container"
+      :class="{
+        [namespace]: namespace
+      }"
     >
       <div
         ref="content"

packages/mixins/withapp.js

@@ -0,0 +1,12 @@
+export default {
+  inject: {
+    NApp: {
+      default: null
+    }
+  },
+  computed: {
+    namespace () {
+      return (this.NApp && this.NApp.namespace) || null
+    }
+  }
+}