refactor: rename $refs.contentWrapper to $refs.contentContainer

packages/common/Cascader/src/MultipleCascader.vue

@@ -52,7 +52,7 @@
     </div>
 
     <div
-      ref="contentWrapper"
+      ref="contentContainer"
       class="n-cascader-menu__content-wrapper"
     >
       <div

packages/common/Collapse/src/CollapseItem.vue

@@ -12,7 +12,7 @@
       <n-icon type="ios-arrow-forward" />{{ title }}
     </div>
     <div
-      ref="contentWrapper"
+      ref="contentContainer"
       class="n-collapse-item__content-wrapper"
     >
       <div
@@ -49,18 +49,18 @@ export default {
   },
   watch: {
     value (newValue) {
-      if (newValue && this.$refs.contentWrapper && this.$refs.content) {
-        this.$refs.contentWrapper.style.maxHeight = this.$refs.content.getBoundingClientRect().height + 'px'
+      if (newValue && this.$refs.contentContainer && this.$refs.content) {
+        this.$refs.contentContainer.style.maxHeight = this.$refs.content.getBoundingClientRect().height + 'px'
       } else {
-        this.$refs.contentWrapper.style.maxHeight = 0
+        this.$refs.contentContainer.style.maxHeight = 0
       }
     }
   },
   mounted () {
-    if (this.value && this.$refs.contentWrapper && this.$refs.content) {
-      this.$refs.contentWrapper.style.maxHeight = this.$refs.content.getBoundingClientRect().height + 'px'
+    if (this.value && this.$refs.contentContainer && this.$refs.content) {
+      this.$refs.contentContainer.style.maxHeight = this.$refs.content.getBoundingClientRect().height + 'px'
     } else {
-      this.$refs.contentWrapper.style.maxHeight = 0
+      this.$refs.contentContainer.style.maxHeight = 0
     }
   },
   methods: {

packages/common/Popover/src/RawPopover.vue

@@ -13,7 +13,7 @@
       <slot name="activator" />
     </div>
     <div
-      ref="contentWrapper"
+      ref="contentContainer"
       class="n-popover__content-container"
     >
       <!--

packages/common/Select/src/MultipleSelect.vue

@@ -68,7 +68,7 @@
       </div>
     </div>
     <div
-      ref="contentWrapper"
+      ref="contentContainer"
       v-clickoutside="handleClickOutsideMenu"
       class="n-select-menu__content-wrapper"
     >

packages/common/Select/src/SingleSelect.vue

@@ -28,7 +28,7 @@
       </div>
     </div>
     <div
-      ref="contentWrapper"
+      ref="contentContainer"
       class="n-select-menu__content-wrapper"
     >
       <div
@@ -125,8 +125,8 @@ export default {
       type: Array,
       required: true
     },
-    // eslint-disable-next-line vue/require-prop-types
     value: {
+      validator: () => true,
       default: null
     },
     placeholder: {

packages/mixins/detachable.js

@@ -1,10 +1,10 @@
 /**
- * Detach $refs.contentWrapper to detachTarget
+ * Detach $refs.contentContainer to detachTarget
  *
  * Dependency:
- * $refs.contentWrapper
+ * $refs.contentContainer
  *
- * @prop {HTMLElement} detachTarget determine where should $refs.contentWrapper to be detached
+ * @prop {HTMLElement} detachTarget determine where should $refs.contentContainer to be detached
  */
 export default {
   props: {
@@ -13,12 +13,16 @@ export default {
         return true
       },
       default: () => document.body
+    },
+    cleanManually: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {
     detachContent () {
-      this.$refs.contentWrapper.parentNode.removeChild(this.$refs.contentWrapper)
-      this.detachTarget.append(this.$refs.contentWrapper)
+      this.$refs.contentContainer.parentNode.removeChild(this.$refs.contentContainer)
+      this.detachTarget.append(this.$refs.contentContainer)
     }
   },
   beforeMount () {
@@ -31,6 +35,8 @@ export default {
     this.detachContent()
   },
   beforeDestroy () {
-    this.detachTarget.removeChild(this.$refs.contentWrapper)
+    if (!this.cleanManually) {
+      this.detachTarget.removeChild(this.$refs.contentContainer)
+    }
   }
 }

packages/mixins/zindexable.js

@@ -6,22 +6,22 @@ import zIndexManager from '../utils/dom/zIndexManager'
  * acquire new z-index on content when active is set to true
  *
  * dependency:
- * $refs.contentWrapper
+ * $refs.contentContainer
  * $vm.active
  */
 export default {
   mounted () {
-    zIndexManager.registerElement(this.$refs.contentWrapper)
+    zIndexManager.registerElement(this.$refs.contentContainer)
   },
   watch: {
     active (newActive) {
       console.debug('[zindexable.watch.active]:', newActive)
       if (newActive) {
-        zIndexManager.setNewZIndex(this.$refs.contentWrapper)
+        zIndexManager.setNewZIndex(this.$refs.contentContainer)
       }
     }
   },
   beforeDestroy () {
-    zIndexManager.unregisterElement(this.$refs.contentWrapper)
+    zIndexManager.unregisterElement(this.$refs.contentContainer)
   }
 }