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

Proposal #5463: Add a resetState method to splitter to manually reset state.

pull/6394/head
Mehdi Rande 2024-09-12 16:50:28 +02:00
parent 0f9cd792c5
commit 404771e05d
2 changed files with 39 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/primevue/src/splitter/Splitter.d.ts vendored
View File

@ -226,6 +226,13 @@ export interface SplitterEmitsOptions {
export declare type SplitterEmits = EmitFn<SplitterEmitsOptions>;
export interface SplitterMethods {
/**
* This method resizes all panels by either using the stored state in the case of a stateful Splitter, the size property of each SplitterPanel, or by resetting them to their default values.
*/
resetState(): void;
}
/**
* **PrimeVue - Splitter**
*
@ -238,7 +245,7 @@ export declare type SplitterEmits = EmitFn<SplitterEmitsOptions>;
* @group Component
*
*/
declare const Splitter: DefineComponent<SplitterProps, SplitterSlots, SplitterEmits>;
declare const Splitter: DefineComponent<SplitterProps, SplitterSlots, SplitterEmits, SplitterMethods>;
declare module 'vue' {
export interface GlobalComponents {

56
packages/primevue/src/splitter/Splitter.vue
View File

@ -22,9 +22,9 @@
</template>
<script>
import { getVNodeProp } from '@primevue/core/utils';
import { getWidth, getHeight, getOuterWidth, getOuterHeight } from '@primeuix/utils/dom';
import { getHeight, getOuterHeight, getOuterWidth, getWidth } from '@primeuix/utils/dom';
import { isArray } from '@primeuix/utils/object';
import { getVNodeProp } from '@primevue/core/utils';
import BaseSplitter from './BaseSplitter.vue';
export default {
@ -53,29 +53,7 @@ export default {
};
},
mounted() {
if (this.panels && this.panels.length) {
let initialized = false;
if (this.isStateful()) {
initialized = this.restoreState();
}
if (!initialized) {
let children = [...this.$el.children].filter((child) => child.getAttribute('data-pc-name') === 'splitterpanel');
let _panelSizes = [];
this.panels.map((panel, i) => {
let panelInitialSize = panel.props && panel.props.size ? panel.props.size : null;
let panelSize = panelInitialSize || 100 / this.panels.length;
_panelSizes[i] = panelSize;
children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
});
this.panelSizes = _panelSizes;
this.prevSize = parseFloat(_panelSizes[0]).toFixed(4);
}
}
this.initializePanels();
},
beforeUnmount() {
this.clear();
@ -85,6 +63,31 @@ export default {
isSplitterPanel(child) {
return child.type.name === 'SplitterPanel';
},
initializePanels() {
if (this.panels && this.panels.length) {
let initialized = false;
if (this.isStateful()) {
initialized = this.restoreState();
}
if (!initialized) {
let children = [...this.$el.children].filter((child) => child.getAttribute('data-pc-name') === 'splitterpanel');
let _panelSizes = [];
this.panels.map((panel, i) => {
let panelInitialSize = panel.props && panel.props.size ? panel.props.size : null;
let panelSize = panelInitialSize || 100 / this.panels.length;
_panelSizes[i] = panelSize;
children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
});
this.panelSizes = _panelSizes;
this.prevSize = parseFloat(_panelSizes[0]).toFixed(4);
}
}
},
onResizeStart(event, index, isKeyDown) {
this.gutterElement = event.currentTarget || event.target.parentElement;
this.size = this.horizontal ? getWidth(this.$el) : getHeight(this.$el);
@ -348,6 +351,9 @@ export default {
}
return false;
},
resetState() {
this.initializePanels();
}
},
computed: {