chore(vue): Update vue-slider-component (#1853)

* updated vue-slider-component dependency * feat(vue): modified the rangeslider component to comply with upgraded slider component * feat(vue): modified the dynamic-rangeslider component to comply with upgraded slider component * fix(vue): issue with range-input not resetting when cleared through selected filters * fix(vue): slider component styling issues * fix: raised issues
appbaseio · Jan 20, 2022 · 6ea9a81 · 6ea9a81
1 parent 960c550
commit 6ea9a81
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 24 deletions.
diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -46,7 +46,7 @@
 		"url-search-params-polyfill": "^7.0.0",
 		"vue-highlight-words": "^1.2.0",
 		"vue-no-ssr": "^1.1.0",
-		"vue-slider-component": "^2.8.16",
+		"vue-slider-component": "^3.2.15",
 		"vue-types": "^1.3.3"
 	},
 	"peerDependencies": {

diff --git a/packages/vue/rollup.config.js b/packages/vue/rollup.config.js
@@ -139,7 +139,7 @@ export default {
 				'process.env.NODE_ENV': JSON.stringify(minify ? 'production' : 'development'),
 				"components['vue-slider-component'] = require('vue-slider-component');": `
 					var s = document.createElement("script");
-					s.setAttribute("src","https://cdn.jsdelivr.net/npm/vue-slider-component@2.8.2/dist/index.js");
+					s.setAttribute("src","https://cdn.jsdelivr.net/npm/vue-slider-component@3.2.15/dist/vue-slider-component.umd.min.js");
 					s.onload = function(){
 						var VueSlider = global['vue-slider-component'];
 						components['vue-slider-component'] = VueSlider;

diff --git a/packages/vue/src/components/range/DynamicRangeSlider.jsx b/packages/vue/src/components/range/DynamicRangeSlider.jsx
@@ -170,8 +170,9 @@ const DynamicRangeSlider = {
 			this.setQueryOptions(this.internalRangeComponent, { aggs });
 		},
 
-		handleSlider(values) {
-			this.handleChange(values.currentValue);
+		handleSlider() {
+			const sliderValues = this.$refs.slider.getValue();			
+			this.handleChange(sliderValues);
 		},
 
 		handleChange(currentValue) {
@@ -303,6 +304,7 @@ const DynamicRangeSlider = {
 				<NoSSR>
 					<Slider class={getClassName(this.$props.innerClass, 'slider')}>
 						<vue-slider-component
+							ref="slider"
 							value={[
 								Math.max(start, this.currentValue[0]),
 								Math.min(end, this.currentValue[1]),
@@ -313,6 +315,7 @@ const DynamicRangeSlider = {
 							dotSize={20}
 							height={4}
 							enable-cross={false}
+							tooltip="always"
 							{...{ props: this.$props.sliderOptions }}
 						/>
 

diff --git a/packages/vue/src/components/range/RangeInput.jsx b/packages/vue/src/components/range/RangeInput.jsx
@@ -113,7 +113,7 @@ const RangeInput = {
 			}
 		},
 		handleOnChange(value) {
-			this.handleChange(value, 'change');
+			this.handleChange(value || this.$props.range, 'change');			
 		},
 		handleValueChange(value) {
 			this.handleChange(value, 'value-change');

diff --git a/packages/vue/src/components/range/RangeSlider.jsx b/packages/vue/src/components/range/RangeSlider.jsx
@@ -67,11 +67,9 @@ const RangeSlider = {
 				});
 			}
 		},
-		handleSlider(values) {
-			clearTimeout(this.handleSliderChange._tId);
-			this.handleSliderChange._tId = setTimeout(() => {
-				this.handleSliderChange(values);
-			}, 100);
+		handleSlider() {
+			const sliderValues = this.$refs.slider.getValue();			
+			this.handleSliderChange(sliderValues);
 		},
 		handleChange(currentValue, props = this.$props) {
 			const performUpdate = () => {
@@ -199,12 +197,9 @@ const RangeSlider = {
 								dotSize={20}
 								height={4}
 								enable-cross={false}
+								onDrag-end={this.handleSlider}
+								tooltip="always"
 								{...{ props: this.$props.sliderOptions }}
-								{...{
-									on: {
-										input: this.handleSlider,
-									},
-								}}
 							/>
 							{this.$props.rangeLabels && (
 								<div class="label-container">

diff --git a/packages/vue/src/styles/Slider.js b/packages/vue/src/styles/Slider.js
@@ -46,7 +46,7 @@ const Slider = styled('div')`
 	}
 
 	/* dot style */
-	.vue-slider-dot{
+	.vue-slider-dot {
 		z-index: 2;
 	}
 
@@ -59,6 +59,7 @@ const Slider = styled('div')`
 		box-sizing: border-box;
 		border: 1px solid #9a9a9a;
 		z-index: 2;
+		box-shadow: 0.5px 0.5px 2px 1px rgb(0 0 0 / 32%);
 	}
 
 	.vue-slider-dot-handle-disabled {
@@ -74,17 +75,17 @@ const Slider = styled('div')`
 		text-align: center;
 		color: #fff;
 		border-radius: 5px;
-		border-color: #000;
-		background-color: #000;
+		border: 1px solid #3498db;
+		background-color: #3498db;
 		box-sizing: content-box;
 	}
 
 	.vue-slider-dot-tooltip-inner::after {
-		content: "";
+		content: '';
 		position: absolute;
 	}
 
-	.vue-slider-dot -tooltip-inner-top::after {
+	.vue-slider-dot-tooltip-inner-top::after {
 		top: 100%;
 		left: 50%;
 		transform: translate(-50%, 0);

diff --git a/yarn.lock b/yarn.lock
@@ -34618,6 +34618,11 @@ vm-browserify@1.1.2, vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-class-component@^7.1.0:
+  version "7.2.6"
+  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.6.tgz#8471e037b8e4762f5a464686e19e5afc708502e4"
+  integrity sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==
+
 vue-client-only@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-2.1.0.tgz#1a67a47b8ecacfa86d75830173fffee3bf8a4ee3"
@@ -34693,6 +34698,13 @@ vue-no-ssr@^1.1.0, vue-no-ssr@^1.1.1:
   resolved "https://registry.yarnpkg.com/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz#875f3be6fb0ae41568a837f3ac1a80eaa137b998"
   integrity sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g==
 
+vue-property-decorator@^8.0.0:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-8.5.1.tgz#571a91cf8d2b507f537d79bf8275af3184572fff"
+  integrity sha512-O6OUN2OMsYTGPvgFtXeBU3jPnX5ffQ9V4I1WfxFQ6dqz6cOUbR3Usou7kgFpfiXDvV7dJQSFcJ5yUPgOtPPm1Q==
+  dependencies:
+    vue-class-component "^7.1.0"
+
 vue-router@^3.5.1:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.3.tgz#041048053e336829d05dafacf6a8fb669a2e7999"
@@ -34712,10 +34724,13 @@ vue-server-renderer@^2.6.12:
     serialize-javascript "^3.1.0"
     source-map "0.5.6"
 
-vue-slider-component@^2.8.16:
-  version "2.8.16"
-  resolved "https://registry.yarnpkg.com/vue-slider-component/-/vue-slider-component-2.8.16.tgz#b2036f816ed64fa4fcd6741219b80c5063b4fd60"
-  integrity sha512-06gDoheKMU8TdqjoofIJaYfXw3uuWOXF2I14d/F5yW/8iOxnoI4Ks9WSXy8RWY+gs62GBE6tQXHDSX/H6IOaAw==
+vue-slider-component@^3.2.15:
+  version "3.2.15"
+  resolved "https://registry.yarnpkg.com/vue-slider-component/-/vue-slider-component-3.2.15.tgz#fd40564c1d15a90a1290cb691990c0bc745b3aa9"
+  integrity sha512-FpmMsQ6MQFn22B6boDcEjRmuawdaHwjHRVZiuv5w37jijHra6+HogjSrh3mb42jE+PUIFFagXi36oFEzpDbadg==
+  dependencies:
+    core-js "^3.6.5"
+    vue-property-decorator "^8.0.0"
 
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2, vue-style-loader@^4.1.3:
   version "4.1.3"