@aochuang/client-sdk 1.0.283 → 1.0.284

package/components/session-select/session-select.vue

@@ -104,7 +104,6 @@ export default {
 	data () {
 		return {
 			pageSize: 40,
-			tuckReady: false,
 			allowTuck: false,
 			loading: false
 		}
@@ -190,17 +189,24 @@ export default {
 	},
 	watch: {
 		lastStickyOnTopSession () {
-			this.delayCheckAllowTuck()
+			this.checkAllowTuckAfterRender()
+		},
+		tucked () {
+			this.checkAllowTuckAfterRender()
+		},
+		sessionListData () {
+			this.checkAllowTuckAfterRender()
 		}
 	},
 	mounted () {
-		this.resizeObserver = new ResizeObserver(entries => {
+		this.resizeObserver = new ResizeObserver(() => {
 			this.delayCheckAllowTuck()
 		})
-		this.resizeObserver.observe(this.$el)
+		this.observeTuckTarget()
 		if (this.autoLoad) {
 			this.$refs.loadMore.reload()
 		}
+		this.checkAllowTuckAfterRender()
 	},
 	methods: {
         reload () {
@@ -208,7 +214,6 @@ export default {
 				return
 			}
 			return this.$refs.loadMore.reload().then(() => {
-				this.tuckReady = true
 				this.delayCheckAllowTuck()
 			})
         },
@@ -221,13 +226,33 @@ export default {
 		scrollTop (top) {
 			this.$refs.loadMore.scrollTop(top)
 		},
-		delayCheckAllowTuck () {
-			if (!this.tuckReady) {
+		observeTuckTarget () {
+			if (!this.resizeObserver || !this.$el) {
 				return
 			}
+			this.resizeObserver.disconnect()
+			this.resizeObserver.observe(this.$el)
+			if (this.$refs.loadMore && this.$refs.loadMore.$el && this.$refs.loadMore.$el !== this.$el) {
+				this.resizeObserver.observe(this.$refs.loadMore.$el)
+			}
+			if (this.lastStickyOnTopSession) {
+				const $lastStickyOnTopEls = this.$refs['item-' + this.lastStickyOnTopSession[this.idField]]
+				if ($lastStickyOnTopEls && $lastStickyOnTopEls.length) {
+					this.resizeObserver.observe($lastStickyOnTopEls[0])
+				}
+			}
+		},
+		checkAllowTuckAfterRender () {
+			this.$nextTick(() => {
+				this.observeTuckTarget()
+				this.delayCheckAllowTuck()
+			})
+		},
+		delayCheckAllowTuck () {
 			clearTimeout(this._checkTimer)
 			this._checkTimer = setTimeout(() => {
-				if (!this.tuckable) {
+				if (!this.tuckable || !this.$el) {
+					this.allowTuck = false
 					return 
 				}
 				if (this.tucked) {
@@ -298,7 +323,9 @@ export default {
 		}
 	},
 	beforeDestroy () {
-		this.resizeObserver && this.resizeObserver.unobserve(this.$el)
+		clearTimeout(this._checkTimer)
+		this.resizeObserver && this.resizeObserver.disconnect()
+		this.resizeObserver = null
 	}
 }
 </script>
@@ -321,6 +348,7 @@ export default {
 	align-items: center;
 	transition: background-color .25s;
 	cursor: pointer;
+	z-index: 3;
 	&:hover {
 		&:not(.is-loading) {
 			background-color: #ddd;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aochuang/client-sdk",
-  "version": "1.0.283",
+  "version": "1.0.284",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"