From 6fe0c19fbe6859ab0c6835261554853031c2e0bc Mon Sep 17 00:00:00 2001 From: Amphiluke Date: Sat, 2 Oct 2021 22:08:02 +0700 Subject: [PATCH 1/2] Update dev dependencies --- package-lock.json | 157 ++++++++++++++++++++-------------------------- package.json | 4 +- 2 files changed, 71 insertions(+), 90 deletions(-) diff --git a/package-lock.json b/package-lock.json index e3eb8af..8e74e29 100644 --- a/package-lock.json +++ b/package-lock.json @@ -114,9 +114,9 @@ "dev": true }, "@types/node": { - "version": "16.9.6", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.9.6.tgz", - "integrity": "sha512-YHUZhBOMTM3mjFkXVcK+WwAcYmyhe1wL4lfqNtzI0b3qAy7yuSetnM7QJazgE5PFmgVTNGiLOgRFfJMqW7XpSQ==", + "version": "16.10.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.10.2.tgz", + "integrity": "sha512-zCclL4/rx+W5SQTzFs9wyvvyCwoK9QtBpratqz2IYJ3O8Umrn0m3nsTv0wQBk9sRGpvUe9CwPDrQFB10f1FIjQ==", "dev": true }, "@types/resolve": { @@ -129,13 +129,13 @@ } }, "@vue/compiler-core": { - "version": "3.2.18", - "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.18.tgz", - "integrity": "sha512-zNKVUx2gN/46xjKy+fNRB3+PJVO2WoGUUdpQo9w5GylWj8vs/r7pMuzQralP8J02YDp6YgJ61v1Yjq7nW5xK6Q==", + "version": "3.2.19", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.19.tgz", + "integrity": "sha512-8dOPX0YOtaXol0Zf2cfLQ4NU/yHYl2H7DCKsLEZ7gdvPK6ZSEwGLJ7IdghhY2YEshEpC5RB9QKdC5I07z8Dtjg==", "dev": true, "requires": { "@babel/parser": "^7.15.0", - "@vue/shared": "3.2.18", + "@vue/shared": "3.2.19", "estree-walker": "^2.0.2", "source-map": "^0.6.1" }, @@ -149,27 +149,27 @@ } }, "@vue/compiler-dom": { - "version": "3.2.18", - "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.18.tgz", - "integrity": "sha512-AqCND7Q0vYFlsBcwWnbcmOiVS/J/70qTZOCPxJnktvH+w4Y7F9omKDyuhsd/ZsJCmSvvpzqBNf2hgtMnoTjNiw==", + "version": "3.2.19", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.19.tgz", + "integrity": "sha512-WzQoE8rfkFjPtIioc7SSgTsnz9g2oG61DU8KHnzPrRS7fW/lji6H2uCYJfp4Z6kZE8GjnHc1Ljwl3/gxDes0cw==", "dev": true, "requires": { - "@vue/compiler-core": "3.2.18", - "@vue/shared": "3.2.18" + "@vue/compiler-core": "3.2.19", + "@vue/shared": "3.2.19" } }, "@vue/compiler-sfc": { - "version": "3.2.18", - "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.18.tgz", - "integrity": "sha512-ui+w1WtVjxlSlnvR4uYgVbbYcN75SrADyMuStnhRqhQM8E2MzJ99W/7Qm3UDs+GxzCEDyQA1CmUvtCg5tlwOMw==", + "version": "3.2.19", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.19.tgz", + "integrity": "sha512-pLlbgkO1UHTO02MSpa/sFOXUwIDxSMiKZ1ozE5n71CY4DM+YmI+G3gT/ZHZ46WBId7f3VTF/D8pGwMygcQbrQA==", "dev": true, "requires": { "@babel/parser": "^7.15.0", - "@vue/compiler-core": "3.2.18", - "@vue/compiler-dom": "3.2.18", - "@vue/compiler-ssr": "3.2.18", - "@vue/ref-transform": "3.2.18", - "@vue/shared": "3.2.18", + "@vue/compiler-core": "3.2.19", + "@vue/compiler-dom": "3.2.19", + "@vue/compiler-ssr": "3.2.19", + "@vue/ref-transform": "3.2.19", + "@vue/shared": "3.2.19", "estree-walker": "^2.0.2", "magic-string": "^0.25.7", "postcss": "^8.1.10", @@ -185,24 +185,24 @@ } }, "@vue/compiler-ssr": { - "version": "3.2.18", - "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.18.tgz", - "integrity": "sha512-qncqUn+y00o2X8h75XUmekzpxjlQOtZkR2XzEDkBFyRfe+jruG2l0MBFKq88wMeiHRzAfysRNqRQd2KXopHPFQ==", + "version": "3.2.19", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.19.tgz", + "integrity": "sha512-oLon0Cn3O7WEYzzmzZavGoqXH+199LT+smdjBT3Uf3UX4HwDNuBFCmvL0TsqV9SQnIgKvBRbQ7lhbpnd4lqM3w==", "dev": true, "requires": { - "@vue/compiler-dom": "3.2.18", - "@vue/shared": "3.2.18" + "@vue/compiler-dom": "3.2.19", + "@vue/shared": "3.2.19" } }, "@vue/ref-transform": { - "version": "3.2.18", - "resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.18.tgz", - "integrity": "sha512-STPcQbA8u3DftZjZW/dS+0mGIABKgbXCxOJTyEYxP+rxa66tqa/QSkeuz54h0zk2wgPfe4vo2QPtcFGl3kl45A==", + "version": "3.2.19", + "resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.19.tgz", + "integrity": "sha512-03wwUnoIAeKti5IGGx6Vk/HEBJ+zUcm5wrUM3+PQsGf7IYnXTbeIfHHpx4HeSeWhnLAjqZjADQwW8uA4rBmVbg==", "dev": true, "requires": { "@babel/parser": "^7.15.0", - "@vue/compiler-core": "3.2.18", - "@vue/shared": "3.2.18", + "@vue/compiler-core": "3.2.19", + "@vue/shared": "3.2.19", "estree-walker": "^2.0.2", "magic-string": "^0.25.7" }, @@ -216,9 +216,9 @@ } }, "@vue/shared": { - "version": "3.2.18", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.18.tgz", - "integrity": "sha512-vFa2annVlbI082ICC3BH239UFO66nn2Syxy9shI7N2haPrc4rFRyNuDjWKJRe3sX7py4yhYL7fopB5tWGwGVyA==", + "version": "3.2.19", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.19.tgz", + "integrity": "sha512-Knqhx7WieLdVgwCAZgTVrDCXZ50uItuecLh9JdLC8O+a5ayaSyIQYveUK3hCRNC7ws5zalHmZwfdLMGaS8r4Ew==", "dev": true }, "acorn": { @@ -322,24 +322,16 @@ } }, "browserslist": { - "version": "4.17.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.1.tgz", - "integrity": "sha512-aLD0ZMDSnF4lUt4ZDNgqi5BUn9BZ7YdQdI/cYlILrhdSSZJLU9aNZoD5/NBmM4SK34APB2e83MOsRt1EnkuyaQ==", + "version": "4.17.2", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.2.tgz", + "integrity": "sha512-jSDZyqJmkKMEMi7SZAgX5UltFdR5NAO43vY0AwTpu4X3sGH7GLLQ83KiUomgrnvZRCeW0yPPnKqnxPqQOER9zQ==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001259", - "electron-to-chromium": "^1.3.846", + "caniuse-lite": "^1.0.30001261", + "electron-to-chromium": "^1.3.854", "escalade": "^3.1.1", - "nanocolors": "^0.1.5", + "nanocolors": "^0.2.12", "node-releases": "^1.1.76" - }, - "dependencies": { - "nanocolors": { - "version": "0.1.12", - "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.1.12.tgz", - "integrity": "sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ==", - "dev": true - } } }, "buble": { @@ -388,21 +380,10 @@ } }, "caniuse-lite": { - "version": "1.0.30001260", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001260.tgz", - "integrity": "sha512-Fhjc/k8725ItmrvW5QomzxLeojewxvqiYCKeFcfFEhut28IVLdpHU19dneOmltZQIE5HNbawj1HYD+1f2bM1Dg==", - "dev": true, - "requires": { - "nanocolors": "^0.1.0" - }, - "dependencies": { - "nanocolors": { - "version": "0.1.12", - "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.1.12.tgz", - "integrity": "sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ==", - "dev": true - } - } + "version": "1.0.30001263", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001263.tgz", + "integrity": "sha512-doiV5dft6yzWO1WwU19kt8Qz8R0/8DgEziz6/9n2FxUasteZNwNNYSmJO3GLBH8lCVE73AB1RPDPAeYbcO5Cvw==", + "dev": true }, "chalk": { "version": "2.4.2", @@ -644,9 +625,9 @@ } }, "electron-to-chromium": { - "version": "1.3.850", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.850.tgz", - "integrity": "sha512-ZzkDcdzePeF4dhoGZQT77V2CyJOpwfTZEOg4h0x6R/jQhGt/rIRpbRyVreWLtD7B/WsVxo91URm2WxMKR9JQZA==", + "version": "1.3.857", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.857.tgz", + "integrity": "sha512-a5kIr2lajm4bJ5E4D3fp8Y/BRB0Dx2VOcCRE5Gtb679mXIME/OFhWler8Gy2ksrf8gFX+EFCSIGA33FB3gqYpg==", "dev": true }, "emoji-regex": { @@ -1154,9 +1135,9 @@ "dev": true }, "is-core-module": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.6.0.tgz", - "integrity": "sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==", + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.7.0.tgz", + "integrity": "sha512-ByY+tjCciCr+9nLryBYcSD50EOGWt95c7tIsKTG1J2ixKKXPvF7Ej3AVd+UfDydAJom3biBGDBALaO79ktwgEQ==", "dev": true, "requires": { "has": "^1.0.3" @@ -1175,9 +1156,9 @@ "dev": true }, "is-glob": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", - "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", "dev": true, "requires": { "is-extglob": "^2.1.1" @@ -1393,15 +1374,15 @@ "dev": true }, "nanocolors": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.2.tgz", - "integrity": "sha512-t4mwdKizEGLFeZzDbr1r6SjwKYZQEB0Z/trGsdAIsw5EadaR010/zvJ0arkw6vznyTevcMi9BtppprJ5aqLXRg==", + "version": "0.2.12", + "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.12.tgz", + "integrity": "sha512-SFNdALvzW+rVlzqexid6epYdt8H9Zol7xDoQarioEFcFN0JHo4CYNztAxmtfgGTVRCmFlEOqqhBpoFGKqSAMug==", "dev": true }, "nanoid": { - "version": "3.1.25", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz", - "integrity": "sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==", + "version": "3.1.28", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.28.tgz", + "integrity": "sha512-gSu9VZ2HtmoKYe/lmyPFES5nknFrHa+/DT9muUFWFMi6Jh9E1I7bkvlQ8xxf1Kos9pi9o8lBnIOkatMhKX/YUw==", "dev": true }, "natural-compare": { @@ -1411,9 +1392,9 @@ "dev": true }, "node-releases": { - "version": "1.1.76", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.76.tgz", - "integrity": "sha512-9/IECtNr8dXNmPWmFXepT0/7o5eolGesHUa3mtr0KlgnCvnZxwh2qensKL42JJY2vQKC3nIBXetFAqR+PW1CmA==", + "version": "1.1.77", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.77.tgz", + "integrity": "sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ==", "dev": true }, "normalize-url": { @@ -1979,9 +1960,9 @@ } }, "rollup": { - "version": "2.57.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.57.0.tgz", - "integrity": "sha512-bKQIh1rWKofRee6mv8SrF2HdP6pea5QkwBZSMImJysFj39gQuiV8MEPBjXOCpzk3wSYp63M2v2wkWBmFC8O/rg==", + "version": "2.58.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.58.0.tgz", + "integrity": "sha512-NOXpusKnaRpbS7ZVSzcEXqxcLDOagN6iFS8p45RkoiMqPHDLwJm758UF05KlMoCRbLBTZsPOIa887gZJ1AiXvw==", "dev": true, "requires": { "fsevents": "~2.3.2" @@ -2315,17 +2296,17 @@ } }, "table": { - "version": "6.7.1", - "resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz", - "integrity": "sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==", + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/table/-/table-6.7.2.tgz", + "integrity": "sha512-UFZK67uvyNivLeQbVtkiUs8Uuuxv24aSL4/Vil2PJVtMgU8Lx0CYkP12uCGa3kjyQzOSgV1+z9Wkb82fCGsO0g==", "dev": true, "requires": { "ajv": "^8.0.1", "lodash.clonedeep": "^4.5.0", "lodash.truncate": "^4.4.2", "slice-ansi": "^4.0.0", - "string-width": "^4.2.0", - "strip-ansi": "^6.0.0" + "string-width": "^4.2.3", + "strip-ansi": "^6.0.1" }, "dependencies": { "ajv": { diff --git a/package.json b/package.json index 1bcaf24..bf69643 100644 --- a/package.json +++ b/package.json @@ -34,12 +34,12 @@ "homepage": "https://amphiluke.github.io/vue-handy-scroll/", "devDependencies": { "@rollup/plugin-buble": "^0.21.3", - "@vue/compiler-sfc": "^3.2.18", + "@vue/compiler-sfc": "^3.2.19", "eslint": "^7.32.0", "eslint-plugin-vue": "^7.18.0", "husky": "^7.0.2", "postcss": "^8.3.8", - "rollup": "^2.57.0", + "rollup": "^2.58.0", "rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-postcss": "^4.0.1", "rollup-plugin-terser": "^7.0.2", From 062ad09a4440483aadb91a6c05282672d6081074 Mon Sep 17 00:00:00 2001 From: Amphiluke Date: Sat, 2 Oct 2021 22:26:37 +0700 Subject: [PATCH 2/2] Prevent widget method invocation after unmount --- dist/handy-scroll.esm.js | 9 +++++++-- dist/handy-scroll.esm.min.js | 4 ++-- dist/handy-scroll.umd.js | 9 +++++++-- dist/handy-scroll.umd.min.js | 4 ++-- package-lock.json | 2 +- package.json | 2 +- src/handy-scroll.vue | 7 ++++++- 7 files changed, 26 insertions(+), 11 deletions(-) diff --git a/dist/handy-scroll.esm.js b/dist/handy-scroll.esm.js index ce22159..625d8cc 100644 --- a/dist/handy-scroll.esm.js +++ b/dist/handy-scroll.esm.js @@ -1,5 +1,5 @@ /*! -vue-handy-scroll v3.0.0 +vue-handy-scroll v3.0.1 https://amphiluke.github.io/vue-handy-scroll/ */ import { openBlock, createElementBlock, renderSlot, createElementVNode, normalizeClass } from 'vue'; @@ -127,7 +127,12 @@ var script = { }, handleContainerFocus() { - setTimeout(() => this.syncWidget(), 0); + setTimeout(() => { + // The widget might be unmounted before the timer is triggered (issue Amphiluke/handy-scroll#14) + if (this.$refs && this.$refs.widget) { + this.syncWidget(); + } + }, 0); }, checkVisibility() { diff --git a/dist/handy-scroll.esm.min.js b/dist/handy-scroll.esm.min.js index e0d870b..716fbde 100644 --- a/dist/handy-scroll.esm.min.js +++ b/dist/handy-scroll.esm.min.js @@ -1,5 +1,5 @@ /*! -vue-handy-scroll v3.0.0 +vue-handy-scroll v3.0.1 https://amphiluke.github.io/vue-handy-scroll/ */ -import{openBlock as e,createElementBlock as t,renderSlot as n,createElementVNode as l,normalizeClass as i}from"vue";let o=Object.create(null),d={emit(e,...t){let n=o[e];n&&n.forEach((e=>e(...t)))},on(e,t){let n=o[e];n||(n=[],o[e]=n),n.push(t)},off(e,t){let n=o[e];if(n){let l=n.indexOf(t);l>=0&&(n.splice(l,1),n.length||delete o[e])}}};var s={EventBus:d,props:{customViewport:{type:Boolean,default:!1},unobtrusive:{type:Boolean,default:!1}},data:()=>({visible:!0}),created(){this.skipSyncContainer=this.skipSyncWidget=!1},mounted(){this.queueUpdate().then((()=>{this.addEventHandlers()}))},unmounted(){this.removeEventHandlers()},methods:{queueUpdate(){let e=this;return e.$nextTick().then((()=>{e.update(),e.skipSyncContainer=e.skipSyncWidget=!1}))},addEventHandlers(){let e=this;if(!e.$refs.scrollBody){let t=e.windowScrollHandler=()=>e.checkVisibility(),n=e.windowResizeHandler=()=>e.update();window.addEventListener("scroll",t,!1),window.addEventListener("resize",n,!1)}let t=e.updateHandler=({sourceElement:t}={})=>{t&&!e.$el.contains(t)||e.queueUpdate()};d.on("update",t)},removeEventHandlers(){let e=this;window.removeEventListener("scroll",e.windowScrollHandler,!1),window.removeEventListener("resize",e.windowResizeHandler,!1),d.off("update",e.updateHandler)},handleWidgetScroll(){let e=this;e.visible&&!e.skipSyncContainer&&e.syncContainer(),e.skipSyncContainer=!1},handleContainerScroll(){let e=this;e.skipSyncWidget||e.syncWidget(),e.skipSyncWidget=!1},handleContainerFocus(){setTimeout((()=>this.syncWidget()),0)},checkVisibility(){let e=this,{widget:t,container:n,scrollBody:l}=e.$refs,i=t.scrollWidth<=t.offsetWidth;if(!i){let e=n.getBoundingClientRect(),t=l?l.getBoundingClientRect().bottom:window.innerHeight||document.documentElement.clientHeight;i=e.bottom<=t||e.top>t}e.visible===i&&(e.visible=!i)},syncContainer(){let{widget:e,container:t}=this.$refs,{scrollLeft:n}=e;t.scrollLeft!==n&&(this.skipSyncWidget=!0,t.scrollLeft=n)},syncWidget(){let{widget:e,container:t}=this.$refs,{scrollLeft:n}=t;e.scrollLeft!==n&&(this.skipSyncContainer=!0,e.scrollLeft=n)},update(){let{widget:e,strut:t,container:n,scrollBody:l}=this.$refs,{style:i}=e,{clientWidth:o,scrollWidth:d}=n;i.width=`${o}px`,l||(i.left=`${n.getBoundingClientRect().left}px`),t.style.width=`${d}px`,d>o&&(i.height=e.offsetHeight-e.clientHeight+1+"px"),this.syncWidget(),this.checkVisibility()}}};const r={key:0,class:"handy-scroll-viewport"},a={ref:"strut"},c={ref:"strut"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&l.firstChild?l.insertBefore(i,l.firstChild):l.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}('.handy-scroll[data-v-71ecdf2e]{bottom:0;min-height:17px;overflow:auto;position:fixed}.handy-scroll div[data-v-71ecdf2e]{height:1px;overflow:hidden;pointer-events:none}.handy-scroll div[data-v-71ecdf2e]:before{content:"\\A0"}.handy-scroll[data-v-71ecdf2e],.handy-scroll div[data-v-71ecdf2e]{font-size:1px;line-height:0;margin:0;padding:0}.handy-scroll-hidden[data-v-71ecdf2e]{bottom:9999px}.handy-scroll-hidden div[data-v-71ecdf2e]:before{content:"\\A0\\A0"}.handy-scroll-viewport[data-v-71ecdf2e]{position:relative}.handy-scroll-area[data-v-71ecdf2e],.handy-scroll-body[data-v-71ecdf2e]{overflow:auto}.handy-scroll-viewport .handy-scroll[data-v-71ecdf2e]{left:0;position:absolute}.handy-scroll-unobtrusive .handy-scroll[data-v-71ecdf2e]{opacity:0;transition:opacity .5s ease .3s}.handy-scroll-unobtrusive:hover .handy-scroll[data-v-71ecdf2e]{opacity:1}'),s.render=function(o,d,s,h,f,u){return s.customViewport?(e(),t("div",r,[n(o.$slots,"viewport-before"),l("div",{ref:"scrollBody",class:"handy-scroll-body",onScroll:d[3]||(d[3]=(...e)=>u.checkVisibility&&u.checkVisibility(...e))},[n(o.$slots,"body-before"),l("div",{ref:"container",class:i(["handy-scroll-area",{"handy-scroll-unobtrusive":s.unobtrusive}]),onScroll:d[1]||(d[1]=(...e)=>u.handleContainerScroll&&u.handleContainerScroll(...e)),onFocusin:d[2]||(d[2]=(...e)=>u.handleContainerFocus&&u.handleContainerFocus(...e))},[n(o.$slots,"default"),l("div",{ref:"widget",class:i(["handy-scroll",{"handy-scroll-hidden":!f.visible}]),onScroll:d[0]||(d[0]=(...e)=>u.handleWidgetScroll&&u.handleWidgetScroll(...e))},[l("div",a,null,512)],34)],34),n(o.$slots,"body-after")],544),n(o.$slots,"viewport-after")])):(e(),t("div",{key:1,ref:"container",class:i(["handy-scroll-area",{"handy-scroll-unobtrusive":s.unobtrusive}]),onScroll:d[5]||(d[5]=(...e)=>u.handleContainerScroll&&u.handleContainerScroll(...e)),onFocusin:d[6]||(d[6]=(...e)=>u.handleContainerFocus&&u.handleContainerFocus(...e))},[n(o.$slots,"default"),l("div",{ref:"widget",class:i(["handy-scroll",{"handy-scroll-hidden":!f.visible}]),onScroll:d[4]||(d[4]=(...e)=>u.handleWidgetScroll&&u.handleWidgetScroll(...e))},[l("div",c,null,512)],34)],34))},s.__scopeId="data-v-71ecdf2e",s.__file="src/handy-scroll.vue";export{s as default}; +import{openBlock as e,createElementBlock as t,renderSlot as n,createElementVNode as l,normalizeClass as i}from"vue";let o=Object.create(null),d={emit(e,...t){let n=o[e];n&&n.forEach((e=>e(...t)))},on(e,t){let n=o[e];n||(n=[],o[e]=n),n.push(t)},off(e,t){let n=o[e];if(n){let l=n.indexOf(t);l>=0&&(n.splice(l,1),n.length||delete o[e])}}};var s={EventBus:d,props:{customViewport:{type:Boolean,default:!1},unobtrusive:{type:Boolean,default:!1}},data:()=>({visible:!0}),created(){this.skipSyncContainer=this.skipSyncWidget=!1},mounted(){this.queueUpdate().then((()=>{this.addEventHandlers()}))},unmounted(){this.removeEventHandlers()},methods:{queueUpdate(){let e=this;return e.$nextTick().then((()=>{e.update(),e.skipSyncContainer=e.skipSyncWidget=!1}))},addEventHandlers(){let e=this;if(!e.$refs.scrollBody){let t=e.windowScrollHandler=()=>e.checkVisibility(),n=e.windowResizeHandler=()=>e.update();window.addEventListener("scroll",t,!1),window.addEventListener("resize",n,!1)}let t=e.updateHandler=({sourceElement:t}={})=>{t&&!e.$el.contains(t)||e.queueUpdate()};d.on("update",t)},removeEventHandlers(){let e=this;window.removeEventListener("scroll",e.windowScrollHandler,!1),window.removeEventListener("resize",e.windowResizeHandler,!1),d.off("update",e.updateHandler)},handleWidgetScroll(){let e=this;e.visible&&!e.skipSyncContainer&&e.syncContainer(),e.skipSyncContainer=!1},handleContainerScroll(){let e=this;e.skipSyncWidget||e.syncWidget(),e.skipSyncWidget=!1},handleContainerFocus(){setTimeout((()=>{this.$refs&&this.$refs.widget&&this.syncWidget()}),0)},checkVisibility(){let e=this,{widget:t,container:n,scrollBody:l}=e.$refs,i=t.scrollWidth<=t.offsetWidth;if(!i){let e=n.getBoundingClientRect(),t=l?l.getBoundingClientRect().bottom:window.innerHeight||document.documentElement.clientHeight;i=e.bottom<=t||e.top>t}e.visible===i&&(e.visible=!i)},syncContainer(){let{widget:e,container:t}=this.$refs,{scrollLeft:n}=e;t.scrollLeft!==n&&(this.skipSyncWidget=!0,t.scrollLeft=n)},syncWidget(){let{widget:e,container:t}=this.$refs,{scrollLeft:n}=t;e.scrollLeft!==n&&(this.skipSyncContainer=!0,e.scrollLeft=n)},update(){let{widget:e,strut:t,container:n,scrollBody:l}=this.$refs,{style:i}=e,{clientWidth:o,scrollWidth:d}=n;i.width=`${o}px`,l||(i.left=`${n.getBoundingClientRect().left}px`),t.style.width=`${d}px`,d>o&&(i.height=e.offsetHeight-e.clientHeight+1+"px"),this.syncWidget(),this.checkVisibility()}}};const r={key:0,class:"handy-scroll-viewport"},a={ref:"strut"},c={ref:"strut"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&l.firstChild?l.insertBefore(i,l.firstChild):l.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}('.handy-scroll[data-v-71ecdf2e]{bottom:0;min-height:17px;overflow:auto;position:fixed}.handy-scroll div[data-v-71ecdf2e]{height:1px;overflow:hidden;pointer-events:none}.handy-scroll div[data-v-71ecdf2e]:before{content:"\\A0"}.handy-scroll[data-v-71ecdf2e],.handy-scroll div[data-v-71ecdf2e]{font-size:1px;line-height:0;margin:0;padding:0}.handy-scroll-hidden[data-v-71ecdf2e]{bottom:9999px}.handy-scroll-hidden div[data-v-71ecdf2e]:before{content:"\\A0\\A0"}.handy-scroll-viewport[data-v-71ecdf2e]{position:relative}.handy-scroll-area[data-v-71ecdf2e],.handy-scroll-body[data-v-71ecdf2e]{overflow:auto}.handy-scroll-viewport .handy-scroll[data-v-71ecdf2e]{left:0;position:absolute}.handy-scroll-unobtrusive .handy-scroll[data-v-71ecdf2e]{opacity:0;transition:opacity .5s ease .3s}.handy-scroll-unobtrusive:hover .handy-scroll[data-v-71ecdf2e]{opacity:1}'),s.render=function(o,d,s,h,f,u){return s.customViewport?(e(),t("div",r,[n(o.$slots,"viewport-before"),l("div",{ref:"scrollBody",class:"handy-scroll-body",onScroll:d[3]||(d[3]=(...e)=>u.checkVisibility&&u.checkVisibility(...e))},[n(o.$slots,"body-before"),l("div",{ref:"container",class:i(["handy-scroll-area",{"handy-scroll-unobtrusive":s.unobtrusive}]),onScroll:d[1]||(d[1]=(...e)=>u.handleContainerScroll&&u.handleContainerScroll(...e)),onFocusin:d[2]||(d[2]=(...e)=>u.handleContainerFocus&&u.handleContainerFocus(...e))},[n(o.$slots,"default"),l("div",{ref:"widget",class:i(["handy-scroll",{"handy-scroll-hidden":!f.visible}]),onScroll:d[0]||(d[0]=(...e)=>u.handleWidgetScroll&&u.handleWidgetScroll(...e))},[l("div",a,null,512)],34)],34),n(o.$slots,"body-after")],544),n(o.$slots,"viewport-after")])):(e(),t("div",{key:1,ref:"container",class:i(["handy-scroll-area",{"handy-scroll-unobtrusive":s.unobtrusive}]),onScroll:d[5]||(d[5]=(...e)=>u.handleContainerScroll&&u.handleContainerScroll(...e)),onFocusin:d[6]||(d[6]=(...e)=>u.handleContainerFocus&&u.handleContainerFocus(...e))},[n(o.$slots,"default"),l("div",{ref:"widget",class:i(["handy-scroll",{"handy-scroll-hidden":!f.visible}]),onScroll:d[4]||(d[4]=(...e)=>u.handleWidgetScroll&&u.handleWidgetScroll(...e))},[l("div",c,null,512)],34)],34))},s.__scopeId="data-v-71ecdf2e",s.__file="src/handy-scroll.vue";export{s as default}; diff --git a/dist/handy-scroll.umd.js b/dist/handy-scroll.umd.js index c839d51..1f4f279 100644 --- a/dist/handy-scroll.umd.js +++ b/dist/handy-scroll.umd.js @@ -1,5 +1,5 @@ /*! -vue-handy-scroll v3.0.0 +vue-handy-scroll v3.0.1 https://amphiluke.github.io/vue-handy-scroll/ */ (function (global, factory) { @@ -141,7 +141,12 @@ https://amphiluke.github.io/vue-handy-scroll/ handleContainerFocus: function handleContainerFocus() { var this$1$1 = this; - setTimeout(function () { return this$1$1.syncWidget(); }, 0); + setTimeout(function () { + // The widget might be unmounted before the timer is triggered (issue Amphiluke/handy-scroll#14) + if (this$1$1.$refs && this$1$1.$refs.widget) { + this$1$1.syncWidget(); + } + }, 0); }, checkVisibility: function checkVisibility() { diff --git a/dist/handy-scroll.umd.min.js b/dist/handy-scroll.umd.min.js index 4719f85..1d60e9d 100644 --- a/dist/handy-scroll.umd.min.js +++ b/dist/handy-scroll.umd.min.js @@ -1,5 +1,5 @@ /*! -vue-handy-scroll v3.0.0 +vue-handy-scroll v3.0.1 https://amphiluke.github.io/vue-handy-scroll/ */ -!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("vue")):"function"==typeof define&&define.amd?define(["vue"],n):(e="undefined"!=typeof globalThis?globalThis:e||self).HandyScroll=n(e.Vue)}(this,(function(e){"use strict";var n=Object.create(null),t={emit:function(e){for(var t=[],o=arguments.length-1;o-- >0;)t[o]=arguments[o+1];var i=n[e];i&&i.forEach((function(e){return e.apply(void 0,t)}))},on:function(e,t){var o=n[e];o||(o=[],n[e]=o),o.push(t)},off:function(e,t){var o=n[e];if(o){var i=o.indexOf(t);i>=0&&(o.splice(i,1),o.length||delete n[e])}}},o={EventBus:t,props:{customViewport:{type:Boolean,default:!1},unobtrusive:{type:Boolean,default:!1}},data:function(){return{visible:!0}},created:function(){this.skipSyncContainer=this.skipSyncWidget=!1},mounted:function(){var e=this;this.queueUpdate().then((function(){e.addEventHandlers()}))},unmounted:function(){this.removeEventHandlers()},methods:{queueUpdate:function(){var e=this;return e.$nextTick().then((function(){e.update(),e.skipSyncContainer=e.skipSyncWidget=!1}))},addEventHandlers:function(){var e=this;if(!e.$refs.scrollBody){var n=e.windowScrollHandler=function(){return e.checkVisibility()},o=e.windowResizeHandler=function(){return e.update()};window.addEventListener("scroll",n,!1),window.addEventListener("resize",o,!1)}var i=e.updateHandler=function(n){void 0===n&&(n={});var t=n.sourceElement;t&&!e.$el.contains(t)||e.queueUpdate()};t.on("update",i)},removeEventHandlers:function(){var e=this;window.removeEventListener("scroll",e.windowScrollHandler,!1),window.removeEventListener("resize",e.windowResizeHandler,!1),t.off("update",e.updateHandler)},handleWidgetScroll:function(){var e=this;e.visible&&!e.skipSyncContainer&&e.syncContainer(),e.skipSyncContainer=!1},handleContainerScroll:function(){var e=this;e.skipSyncWidget||e.syncWidget(),e.skipSyncWidget=!1},handleContainerFocus:function(){var e=this;setTimeout((function(){return e.syncWidget()}),0)},checkVisibility:function(){var e=this,n=e.$refs,t=n.widget,o=n.container,i=n.scrollBody,r=t.scrollWidth<=t.offsetWidth;if(!r){var l=o.getBoundingClientRect(),d=i?i.getBoundingClientRect().bottom:window.innerHeight||document.documentElement.clientHeight;r=l.bottom<=d||l.top>d}e.visible===r&&(e.visible=!r)},syncContainer:function(){var e=this.$refs,n=e.widget,t=e.container,o=n.scrollLeft;t.scrollLeft!==o&&(this.skipSyncWidget=!0,t.scrollLeft=o)},syncWidget:function(){var e=this.$refs,n=e.widget,t=e.container.scrollLeft;n.scrollLeft!==t&&(this.skipSyncContainer=!0,n.scrollLeft=t)},update:function(){var e=this.$refs,n=e.widget,t=e.strut,o=e.container,i=e.scrollBody,r=n.style,l=o.clientWidth,d=o.scrollWidth;r.width=l+"px",i||(r.left=o.getBoundingClientRect().left+"px"),t.style.width=d+"px",d>l&&(r.height=n.offsetHeight-n.clientHeight+1+"px"),this.syncWidget(),this.checkVisibility()}}},i={key:0,class:"handy-scroll-viewport"},r={ref:"strut"},l={ref:"strut"};return function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}('.handy-scroll[data-v-71ecdf2e]{bottom:0;min-height:17px;overflow:auto;position:fixed}.handy-scroll div[data-v-71ecdf2e]{height:1px;overflow:hidden;pointer-events:none}.handy-scroll div[data-v-71ecdf2e]:before{content:"\\A0"}.handy-scroll[data-v-71ecdf2e],.handy-scroll div[data-v-71ecdf2e]{font-size:1px;line-height:0;margin:0;padding:0}.handy-scroll-hidden[data-v-71ecdf2e]{bottom:9999px}.handy-scroll-hidden div[data-v-71ecdf2e]:before{content:"\\A0\\A0"}.handy-scroll-viewport[data-v-71ecdf2e]{position:relative}.handy-scroll-area[data-v-71ecdf2e],.handy-scroll-body[data-v-71ecdf2e]{overflow:auto}.handy-scroll-viewport .handy-scroll[data-v-71ecdf2e]{left:0;position:absolute}.handy-scroll-unobtrusive .handy-scroll[data-v-71ecdf2e]{opacity:0;transition:opacity .5s ease .3s}.handy-scroll-unobtrusive:hover .handy-scroll[data-v-71ecdf2e]{opacity:1}'),o.render=function(n,t,o,d,a,c){return o.customViewport?(e.openBlock(),e.createElementBlock("div",i,[e.renderSlot(n.$slots,"viewport-before"),e.createElementVNode("div",{ref:"scrollBody",class:"handy-scroll-body",onScroll:t[3]||(t[3]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return c.checkVisibility&&c.checkVisibility.apply(c,e)})},[e.renderSlot(n.$slots,"body-before"),e.createElementVNode("div",{ref:"container",class:e.normalizeClass(["handy-scroll-area",{"handy-scroll-unobtrusive":o.unobtrusive}]),onScroll:t[1]||(t[1]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return c.handleContainerScroll&&c.handleContainerScroll.apply(c,e)}),onFocusin:t[2]||(t[2]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return c.handleContainerFocus&&c.handleContainerFocus.apply(c,e)})},[e.renderSlot(n.$slots,"default"),e.createElementVNode("div",{ref:"widget",class:e.normalizeClass(["handy-scroll",{"handy-scroll-hidden":!a.visible}]),onScroll:t[0]||(t[0]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return c.handleWidgetScroll&&c.handleWidgetScroll.apply(c,e)})},[e.createElementVNode("div",r,null,512)],34)],34),e.renderSlot(n.$slots,"body-after")],544),e.renderSlot(n.$slots,"viewport-after")])):(e.openBlock(),e.createElementBlock("div",{key:1,ref:"container",class:e.normalizeClass(["handy-scroll-area",{"handy-scroll-unobtrusive":o.unobtrusive}]),onScroll:t[5]||(t[5]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return c.handleContainerScroll&&c.handleContainerScroll.apply(c,e)}),onFocusin:t[6]||(t[6]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return c.handleContainerFocus&&c.handleContainerFocus.apply(c,e)})},[e.renderSlot(n.$slots,"default"),e.createElementVNode("div",{ref:"widget",class:e.normalizeClass(["handy-scroll",{"handy-scroll-hidden":!a.visible}]),onScroll:t[4]||(t[4]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return c.handleWidgetScroll&&c.handleWidgetScroll.apply(c,e)})},[e.createElementVNode("div",l,null,512)],34)],34))},o.__scopeId="data-v-71ecdf2e",o.__file="src/handy-scroll.vue",o})); +!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("vue")):"function"==typeof define&&define.amd?define(["vue"],n):(e="undefined"!=typeof globalThis?globalThis:e||self).HandyScroll=n(e.Vue)}(this,(function(e){"use strict";var n=Object.create(null),t={emit:function(e){for(var t=[],o=arguments.length-1;o-- >0;)t[o]=arguments[o+1];var i=n[e];i&&i.forEach((function(e){return e.apply(void 0,t)}))},on:function(e,t){var o=n[e];o||(o=[],n[e]=o),o.push(t)},off:function(e,t){var o=n[e];if(o){var i=o.indexOf(t);i>=0&&(o.splice(i,1),o.length||delete n[e])}}},o={EventBus:t,props:{customViewport:{type:Boolean,default:!1},unobtrusive:{type:Boolean,default:!1}},data:function(){return{visible:!0}},created:function(){this.skipSyncContainer=this.skipSyncWidget=!1},mounted:function(){var e=this;this.queueUpdate().then((function(){e.addEventHandlers()}))},unmounted:function(){this.removeEventHandlers()},methods:{queueUpdate:function(){var e=this;return e.$nextTick().then((function(){e.update(),e.skipSyncContainer=e.skipSyncWidget=!1}))},addEventHandlers:function(){var e=this;if(!e.$refs.scrollBody){var n=e.windowScrollHandler=function(){return e.checkVisibility()},o=e.windowResizeHandler=function(){return e.update()};window.addEventListener("scroll",n,!1),window.addEventListener("resize",o,!1)}var i=e.updateHandler=function(n){void 0===n&&(n={});var t=n.sourceElement;t&&!e.$el.contains(t)||e.queueUpdate()};t.on("update",i)},removeEventHandlers:function(){var e=this;window.removeEventListener("scroll",e.windowScrollHandler,!1),window.removeEventListener("resize",e.windowResizeHandler,!1),t.off("update",e.updateHandler)},handleWidgetScroll:function(){var e=this;e.visible&&!e.skipSyncContainer&&e.syncContainer(),e.skipSyncContainer=!1},handleContainerScroll:function(){var e=this;e.skipSyncWidget||e.syncWidget(),e.skipSyncWidget=!1},handleContainerFocus:function(){var e=this;setTimeout((function(){e.$refs&&e.$refs.widget&&e.syncWidget()}),0)},checkVisibility:function(){var e=this,n=e.$refs,t=n.widget,o=n.container,i=n.scrollBody,r=t.scrollWidth<=t.offsetWidth;if(!r){var l=o.getBoundingClientRect(),d=i?i.getBoundingClientRect().bottom:window.innerHeight||document.documentElement.clientHeight;r=l.bottom<=d||l.top>d}e.visible===r&&(e.visible=!r)},syncContainer:function(){var e=this.$refs,n=e.widget,t=e.container,o=n.scrollLeft;t.scrollLeft!==o&&(this.skipSyncWidget=!0,t.scrollLeft=o)},syncWidget:function(){var e=this.$refs,n=e.widget,t=e.container.scrollLeft;n.scrollLeft!==t&&(this.skipSyncContainer=!0,n.scrollLeft=t)},update:function(){var e=this.$refs,n=e.widget,t=e.strut,o=e.container,i=e.scrollBody,r=n.style,l=o.clientWidth,d=o.scrollWidth;r.width=l+"px",i||(r.left=o.getBoundingClientRect().left+"px"),t.style.width=d+"px",d>l&&(r.height=n.offsetHeight-n.clientHeight+1+"px"),this.syncWidget(),this.checkVisibility()}}},i={key:0,class:"handy-scroll-viewport"},r={ref:"strut"},l={ref:"strut"};return function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}('.handy-scroll[data-v-71ecdf2e]{bottom:0;min-height:17px;overflow:auto;position:fixed}.handy-scroll div[data-v-71ecdf2e]{height:1px;overflow:hidden;pointer-events:none}.handy-scroll div[data-v-71ecdf2e]:before{content:"\\A0"}.handy-scroll[data-v-71ecdf2e],.handy-scroll div[data-v-71ecdf2e]{font-size:1px;line-height:0;margin:0;padding:0}.handy-scroll-hidden[data-v-71ecdf2e]{bottom:9999px}.handy-scroll-hidden div[data-v-71ecdf2e]:before{content:"\\A0\\A0"}.handy-scroll-viewport[data-v-71ecdf2e]{position:relative}.handy-scroll-area[data-v-71ecdf2e],.handy-scroll-body[data-v-71ecdf2e]{overflow:auto}.handy-scroll-viewport .handy-scroll[data-v-71ecdf2e]{left:0;position:absolute}.handy-scroll-unobtrusive .handy-scroll[data-v-71ecdf2e]{opacity:0;transition:opacity .5s ease .3s}.handy-scroll-unobtrusive:hover .handy-scroll[data-v-71ecdf2e]{opacity:1}'),o.render=function(n,t,o,d,a,c){return o.customViewport?(e.openBlock(),e.createElementBlock("div",i,[e.renderSlot(n.$slots,"viewport-before"),e.createElementVNode("div",{ref:"scrollBody",class:"handy-scroll-body",onScroll:t[3]||(t[3]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return c.checkVisibility&&c.checkVisibility.apply(c,e)})},[e.renderSlot(n.$slots,"body-before"),e.createElementVNode("div",{ref:"container",class:e.normalizeClass(["handy-scroll-area",{"handy-scroll-unobtrusive":o.unobtrusive}]),onScroll:t[1]||(t[1]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return c.handleContainerScroll&&c.handleContainerScroll.apply(c,e)}),onFocusin:t[2]||(t[2]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return c.handleContainerFocus&&c.handleContainerFocus.apply(c,e)})},[e.renderSlot(n.$slots,"default"),e.createElementVNode("div",{ref:"widget",class:e.normalizeClass(["handy-scroll",{"handy-scroll-hidden":!a.visible}]),onScroll:t[0]||(t[0]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return c.handleWidgetScroll&&c.handleWidgetScroll.apply(c,e)})},[e.createElementVNode("div",r,null,512)],34)],34),e.renderSlot(n.$slots,"body-after")],544),e.renderSlot(n.$slots,"viewport-after")])):(e.openBlock(),e.createElementBlock("div",{key:1,ref:"container",class:e.normalizeClass(["handy-scroll-area",{"handy-scroll-unobtrusive":o.unobtrusive}]),onScroll:t[5]||(t[5]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return c.handleContainerScroll&&c.handleContainerScroll.apply(c,e)}),onFocusin:t[6]||(t[6]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return c.handleContainerFocus&&c.handleContainerFocus.apply(c,e)})},[e.renderSlot(n.$slots,"default"),e.createElementVNode("div",{ref:"widget",class:e.normalizeClass(["handy-scroll",{"handy-scroll-hidden":!a.visible}]),onScroll:t[4]||(t[4]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return c.handleWidgetScroll&&c.handleWidgetScroll.apply(c,e)})},[e.createElementVNode("div",l,null,512)],34)],34))},o.__scopeId="data-v-71ecdf2e",o.__file="src/handy-scroll.vue",o})); diff --git a/package-lock.json b/package-lock.json index 8e74e29..56fc9df 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vue-handy-scroll", - "version": "3.0.0", + "version": "3.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index bf69643..ae61e04 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-handy-scroll", - "version": "3.0.0", + "version": "3.0.1", "description": "Handy floating scrollbar component for Vue 3", "main": "dist/handy-scroll.umd.js", "module": "dist/handy-scroll.esm.js", diff --git a/src/handy-scroll.vue b/src/handy-scroll.vue index d618df6..b269ebc 100644 --- a/src/handy-scroll.vue +++ b/src/handy-scroll.vue @@ -145,7 +145,12 @@ export default { }, handleContainerFocus() { - setTimeout(() => this.syncWidget(), 0); + setTimeout(() => { + // The widget might be unmounted before the timer is triggered (issue Amphiluke/handy-scroll#14) + if (this.$refs && this.$refs.widget) { + this.syncWidget(); + } + }, 0); }, checkVisibility() {