vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #6636 - For Slider

pull/6674/head
tugcekucukoglu 2024-10-28 10:56:50 +03:00
parent 7b9efec0f0
commit b00da05efb
3 changed files with 103 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
packages/primevue/src/slider/Slider.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div :class="cx('root')" @click="onBarClick" v-bind="ptmi('root')" :data-p-sliding="false"> <div :class="cx('root')" @click="onBarClick" v-bind="ptmi('root')" :data-p-sliding="false">
<span :class="cx('range')" :style="[sx('range'), rangeStyle]" v-bind="ptm('range')"></span> <span :class="cx('range')" :style="[sx('range'), rangeStyle()]" v-bind="ptm('range')"></span>
<span <span
v-if="!range" v-if="!range"
:class="cx('handle')" :class="cx('handle')"
:style="[sx('handle'), handleStyle]" :style="[sx('handle'), handleStyle()]"
@touchstart.passive="onDragStart($event)" @touchstart.passive="onDragStart($event)"
@touchmove.passive="onDrag($event)" @touchmove.passive="onDrag($event)"
@touchend="onDragEnd($event)" @touchend="onDragEnd($event)"
@ -24,7 +24,7 @@
<span <span
v-if="range" v-if="range"
:class="cx('handle')" :class="cx('handle')"
:style="[sx('handle'), rangeStartHandleStyle]" :style="[sx('handle'), rangeStartHandleStyle()]"
@touchstart.passive="onDragStart($event, 0)" @touchstart.passive="onDragStart($event, 0)"
@touchmove.passive="onDrag($event)" @touchmove.passive="onDrag($event)"
@touchend="onDragEnd($event)" @touchend="onDragEnd($event)"
@ -44,7 +44,7 @@
<span <span
v-if="range" v-if="range"
:class="cx('handle')" :class="cx('handle')"
:style="[sx('handle'), rangeEndHandleStyle]" :style="[sx('handle'), rangeEndHandleStyle()]"
@touchstart.passive="onDragStart($event, 1)" @touchstart.passive="onDragStart($event, 1)"
@touchmove.passive="onDrag($event)" @touchmove.passive="onDrag($event)"
@touchend="onDragEnd($event)" @touchend="onDragEnd($event)"
@ -81,8 +81,22 @@ export default {
barHeight: null, barHeight: null,
dragListener: null, dragListener: null,
dragEndListener: null, dragEndListener: null,
mutationObserver: null,
data() {
return {
isRTL: false
};
},
beforeUnmount() { beforeUnmount() {
this.unbindDragListeners(); this.unbindDragListeners();
if (this.mutationObserver) {
this.mutationObserver.disconnect();
}
},
mounted() {
this.updateDirection();
this.observeDirectionChanges();
}, },
methods: { methods: {
updateDomData() { updateDomData() {
@ -98,8 +112,16 @@ export default {
let pageX = event.touches ? event.touches[0].pageX : event.pageX; let pageX = event.touches ? event.touches[0].pageX : event.pageX;
let pageY = event.touches ? event.touches[0].pageY : event.pageY; let pageY = event.touches ? event.touches[0].pageY : event.pageY;
if (this.orientation === 'horizontal') handleValue = ((pageX - this.initX) * 100) / this.barWidth; if (this.orientation === 'horizontal') {
else handleValue = ((this.initY + this.barHeight - pageY) * 100) / this.barHeight; if (this.isRTL) {
handleValue = ((this.initX + this.barWidth - pageX) * 100) / this.barWidth;
} else {
handleValue = ((pageX - this.initX) * 100) / this.barWidth;
}
} else {
handleValue = ((this.initY + this.barHeight - pageY) * 100) / this.barHeight;
}
let newValue = (this.max - this.min) * (handleValue / 100) + this.min; let newValue = (this.max - this.min) * (handleValue / 100) + this.min;
if (this.step) { if (this.step) {
@ -281,6 +303,58 @@ export default {
document.removeEventListener('mouseup', this.dragEndListener); document.removeEventListener('mouseup', this.dragEndListener);
this.dragEndListener = null; this.dragEndListener = null;
} }
},
rangeStyle() {
if (this.range) {
const rangeSliderWidth = this.rangeEndPosition > this.rangeStartPosition ? this.rangeEndPosition - this.rangeStartPosition : this.rangeStartPosition - this.rangeEndPosition;
const rangeSliderPosition = this.rangeEndPosition > this.rangeStartPosition ? this.rangeStartPosition : this.rangeEndPosition;
if (this.horizontal) {
return this.isRTL ? { right: rangeSliderPosition + '%', width: rangeSliderWidth + '%' } : { left: rangeSliderPosition + '%', width: rangeSliderWidth + '%' };
} else {
return { bottom: rangeSliderPosition + '%', height: rangeSliderWidth + '%' };
}
} else {
if (this.horizontal) {
return { width: this.handlePosition + '%' };
} else {
return { height: this.handlePosition + '%' };
}
}
},
handleStyle() {
if (this.horizontal) {
return this.isRTL ? { right: this.handlePosition + '%' } : { left: this.handlePosition + '%' };
} else {
return { bottom: this.handlePosition + '%' };
}
},
rangeStartHandleStyle() {
if (this.horizontal) {
return this.isRTL ? { right: this.rangeStartPosition + '%' } : { left: this.rangeStartPosition + '%' };
} else {
return { bottom: this.rangeStartPosition + '%' };
}
},
rangeEndHandleStyle() {
if (this.horizontal) {
return this.isRTL ? { right: this.rangeEndPosition + '%' } : { left: this.rangeEndPosition + '%' };
} else {
return { bottom: this.rangeEndPosition + '%' };
}
},
updateDirection() {
this.isRTL = !!this.$el.closest('[dir="rtl"]');
},
observeDirectionChanges() {
const targetNode = document.documentElement;
const config = { attributes: true, attributeFilter: ['dir'] };
this.mutationObserver = new MutationObserver(() => {
this.updateDirection();
});
this.mutationObserver.observe(targetNode, config);
} }
}, },
computed: { computed: {
@ -297,22 +371,6 @@ export default {
vertical() { vertical() {
return this.orientation === 'vertical'; return this.orientation === 'vertical';
}, },
rangeStyle() {
if (this.range) {
const rangeSliderWidth = this.rangeEndPosition > this.rangeStartPosition ? this.rangeEndPosition - this.rangeStartPosition : this.rangeStartPosition - this.rangeEndPosition;
const rangeSliderPosition = this.rangeEndPosition > this.rangeStartPosition ? this.rangeStartPosition : this.rangeEndPosition;
if (this.horizontal) return { left: rangeSliderPosition + '%', width: rangeSliderWidth + '%' };
else return { bottom: rangeSliderPosition + '%', height: rangeSliderWidth + '%' };
} else {
if (this.horizontal) return { width: this.handlePosition + '%' };
else return { height: this.handlePosition + '%' };
}
},
handleStyle() {
if (this.horizontal) return { left: this.handlePosition + '%' };
else return { bottom: this.handlePosition + '%' };
},
handlePosition() { handlePosition() {
if (this.value < this.min) return 0; if (this.value < this.min) return 0;
else if (this.value > this.max) return 100; else if (this.value > this.max) return 100;
@ -325,14 +383,6 @@ export default {
rangeEndPosition() { rangeEndPosition() {
if (this.value && this.value.length === 2) return ((this.value[1] > this.max ? 100 : this.value[1] - this.min) * 100) / (this.max - this.min); if (this.value && this.value.length === 2) return ((this.value[1] > this.max ? 100 : this.value[1] - this.min) * 100) / (this.max - this.min);
else return 100; else return 100;
},
rangeStartHandleStyle() {
if (this.horizontal) return { left: this.rangeStartPosition + '%' };
else return { bottom: this.rangeStartPosition + '%' };
},
rangeEndHandleStyle() {
if (this.horizontal) return { left: this.rangeEndPosition + '%' };
else return { bottom: this.rangeEndPosition + '%' };
} }
} }
}; };

20
packages/primevue/src/slider/style/SliderStyle.js
View File

@ -60,15 +60,15 @@ const theme = ({ dt }) => `
} }
.p-slider-horizontal .p-slider-range { .p-slider-horizontal .p-slider-range {
top: 0; inset-block-start: 0;
left: 0; inset-inline-start: 0;
height: 100%; height: 100%;
} }
.p-slider-horizontal .p-slider-handle { .p-slider-horizontal .p-slider-handle {
top: 50%; inset-block-start: 50%;
margin-top: calc(-1 * calc(${dt('slider.handle.height')} / 2)); margin-block-start: calc(-1 * calc(${dt('slider.handle.height')} / 2));
margin-left: calc(-1 * calc(${dt('slider.handle.width')} / 2)); margin-inline-start: calc(-1 * calc(${dt('slider.handle.width')} / 2));
} }
.p-slider-vertical { .p-slider-vertical {
@ -77,14 +77,14 @@ const theme = ({ dt }) => `
} }
.p-slider-vertical .p-slider-handle { .p-slider-vertical .p-slider-handle {
left: 50%; inset-inline-start: 50%;
margin-left: calc(-1 * calc(${dt('slider.handle.width')} / 2)); margin-inline-start: calc(-1 * calc(${dt('slider.handle.width')} / 2));
margin-bottom: calc(-1 * calc(${dt('slider.handle.height')} / 2)); margin-block-end: calc(-1 * calc(${dt('slider.handle.height')} / 2));
} }
.p-slider-vertical .p-slider-range { .p-slider-vertical .p-slider-range {
bottom: 0; inset-block-end: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
} }
`; `;

31
packages/primevue/src/tablist/TabList.vue
View File

@ -91,24 +91,6 @@ export default {
} }
}, },
methods: { methods: {
updateDirection() {
if (document) {
const isHtmlRtl = document.documentElement.getAttribute('dir') === 'rtl';
const isBodyRtl = document.body.getAttribute('dir') === 'rtl';
this.isRTL = isHtmlRtl || isBodyRtl || this.$el.closest('[dir="rtl"]');
}
},
observeDirectionChanges() {
const targetNode = document.documentElement;
const config = { attributes: true, attributeFilter: ['dir'] };
this.mutationObserver = new MutationObserver(() => {
this.updateDirection();
});
this.mutationObserver.observe(targetNode, config);
},
onScroll(event) { onScroll(event) {
this.showNavigators && this.updateButtonState(); this.showNavigators && this.updateButtonState();
@ -179,6 +161,19 @@ export default {
const { prevBtn, nextBtn } = this.$refs; const { prevBtn, nextBtn } = this.$refs;
return [prevBtn, nextBtn].reduce((acc, el) => (el ? acc + getWidth(el) : acc), 0); return [prevBtn, nextBtn].reduce((acc, el) => (el ? acc + getWidth(el) : acc), 0);
},
updateDirection() {
this.isRTL = !!this.$el.closest('[dir="rtl"]');
},
observeDirectionChanges() {
const targetNode = document.documentElement;
const config = { attributes: true, attributeFilter: ['dir'] };
this.mutationObserver = new MutationObserver(() => {
this.updateDirection();
});
this.mutationObserver.observe(targetNode, config);
} }
}, },
computed: { computed: {