Merge pull request #6394 from mehdirande/fix-5463-reset-splitter-state

Proposal for #5463: Add a resetState method to splitter to manually reset state
pull/6465/head
Tuğçe Küçükoğlu 2024-09-24 10:51:05 +03:00 committed by GitHub
commit 00d7470d6a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 39 additions and 26 deletions

View File

@ -226,6 +226,13 @@ export interface SplitterEmitsOptions {
export declare type SplitterEmits = EmitFn<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** * **PrimeVue - Splitter**
* *
@ -238,7 +245,7 @@ export declare type SplitterEmits = EmitFn<SplitterEmitsOptions>;
* @group Component * @group Component
* *
*/ */
declare const Splitter: DefineComponent<SplitterProps, SplitterSlots, SplitterEmits>; declare const Splitter: DefineComponent<SplitterProps, SplitterSlots, SplitterEmits, SplitterMethods>;
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {

View File

@ -22,9 +22,9 @@
</template> </template>
<script> <script>
import { getVNodeProp } from '@primevue/core/utils'; import { getHeight, getOuterHeight, getOuterWidth, getWidth } from '@primeuix/utils/dom';
import { getWidth, getHeight, getOuterWidth, getOuterHeight } from '@primeuix/utils/dom';
import { isArray } from '@primeuix/utils/object'; import { isArray } from '@primeuix/utils/object';
import { getVNodeProp } from '@primevue/core/utils';
import BaseSplitter from './BaseSplitter.vue'; import BaseSplitter from './BaseSplitter.vue';
export default { export default {
@ -53,6 +53,17 @@ export default {
}; };
}, },
mounted() { mounted() {
this.initializePanels();
},
beforeUnmount() {
this.clear();
this.unbindMouseListeners();
},
methods: {
isSplitterPanel(child) {
return child.type.name === 'SplitterPanel';
},
initializePanels() {
if (this.panels && this.panels.length) { if (this.panels && this.panels.length) {
let initialized = false; let initialized = false;
@ -77,14 +88,6 @@ export default {
} }
} }
}, },
beforeUnmount() {
this.clear();
this.unbindMouseListeners();
},
methods: {
isSplitterPanel(child) {
return child.type.name === 'SplitterPanel';
},
onResizeStart(event, index, isKeyDown) { onResizeStart(event, index, isKeyDown) {
this.gutterElement = event.currentTarget || event.target.parentElement; this.gutterElement = event.currentTarget || event.target.parentElement;
this.size = this.horizontal ? getWidth(this.$el) : getHeight(this.$el); this.size = this.horizontal ? getWidth(this.$el) : getHeight(this.$el);
@ -348,6 +351,9 @@ export default {
} }
return false; return false;
},
resetState() {
this.initializePanels();
} }
}, },
computed: { computed: {