Refactor #6826 - For Splitter
parent
db61c5ec80
commit
418d81a3c3
|
@ -22,7 +22,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getHeight, getOuterHeight, getOuterWidth, getWidth } from '@primeuix/utils/dom';
|
import { getHeight, getOuterHeight, getOuterWidth, getWidth, isRTL } from '@primeuix/utils/dom';
|
||||||
import { isArray } from '@primeuix/utils/object';
|
import { isArray } from '@primeuix/utils/object';
|
||||||
import { getVNodeProp } from '@primevue/core/utils';
|
import { getVNodeProp } from '@primevue/core/utils';
|
||||||
import BaseSplitter from './BaseSplitter.vue';
|
import BaseSplitter from './BaseSplitter.vue';
|
||||||
|
@ -47,40 +47,19 @@ export default {
|
||||||
panelSizes: null,
|
panelSizes: null,
|
||||||
prevPanelIndex: null,
|
prevPanelIndex: null,
|
||||||
timer: null,
|
timer: null,
|
||||||
mutationObserver: null,
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
prevSize: null,
|
prevSize: null
|
||||||
isRTL: false
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.initializePanels();
|
this.initializePanels();
|
||||||
this.updateDirection();
|
|
||||||
this.observeDirectionChanges();
|
|
||||||
},
|
},
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
this.clear();
|
this.clear();
|
||||||
this.unbindMouseListeners();
|
this.unbindMouseListeners();
|
||||||
|
|
||||||
if (this.mutationObserver) {
|
|
||||||
this.mutationObserver.disconnect();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
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);
|
|
||||||
},
|
|
||||||
isSplitterPanel(child) {
|
isSplitterPanel(child) {
|
||||||
return child.type.name === 'SplitterPanel';
|
return child.type.name === 'SplitterPanel';
|
||||||
},
|
},
|
||||||
|
@ -147,7 +126,7 @@ export default {
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (this.horizontal) {
|
if (this.horizontal) {
|
||||||
if (this.isRTL) {
|
if (isRTL(this.$el)) {
|
||||||
newPos = ((this.startPos - event.pageX) * 100) / this.size;
|
newPos = ((this.startPos - event.pageX) * 100) / this.size;
|
||||||
} else {
|
} else {
|
||||||
newPos = ((event.pageX - this.startPos) * 100) / this.size;
|
newPos = ((event.pageX - this.startPos) * 100) / this.size;
|
||||||
|
|
Loading…
Reference in New Issue