primevue 3.30.2 → 3.32.0

package/splitter/Splitter.d.ts

@@ -20,6 +20,7 @@ export interface SplitterPassThroughMethodOptions {
     instance: any;
     props: SplitterProps;
     state: SplitterState;
+    context: SplitterContext;
 }
 
 /**
@@ -58,19 +59,19 @@ export interface SplitterResizeEndEvent {
  */
 export interface SplitterPassThroughOptions {
     /**
-     * Uses to pass attributes to the root's DOM element.
+     * Used to pass attributes to the root's DOM element.
      */
     root?: SplitterPassThroughOptionType;
     /**
-     * Uses to pass attributes to the gutter's DOM element.
+     * Used to pass attributes to the gutter's DOM element.
      */
     gutter?: SplitterPassThroughOptionType;
     /**
-     * Uses to pass attributes to the gutter handler's DOM element.
+     * Used to pass attributes to the gutter handler's DOM element.
      */
     gutterHandler?: SplitterPassThroughOptionType;
     /**
-     * Uses to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
@@ -93,6 +94,16 @@ export interface SplitterState {
     prevSize: number;
 }
 
+/**
+ * Defines options in Splitter component.
+ */
+export interface SplitterContext {
+    /**
+     * Current nested state of the component.
+     */
+    nested?: boolean;
+}
+
 /**
  * Defines valid properties in Splitter component.
  */
@@ -122,7 +133,7 @@ export interface SplitterProps {
      */
     step?: number | undefined;
     /**
-     * Uses to pass attributes to DOM elements inside the component.
+     * Used to pass attributes to DOM elements inside the component.
      * @type {SplitterPassThroughOptions}
      */
     pt?: SplitterPassThroughOptions;

package/splitter/Splitter.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" :style="sx('root')" :data-p-resizing="false" v-bind="ptm('root')" data-pc-name="splitter">
+    <div :class="cx('root')" :style="sx('root')" :data-p-resizing="false" v-bind="ptm('root', getPTOptions())" data-pc-name="splitter">
         <template v-for="(panel, i) of panels" :key="i">
             <component :is="panel" tabindex="-1"></component>
             <div
@@ -79,6 +79,13 @@ export default {
         this.unbindMouseListeners();
     },
     methods: {
+        getPTOptions() {
+            return {
+                context: {
+                    nested: DomHandler.getAttribute(this.$parentInstance?.$el, 'data-pc-name') === 'splitterpanel'
+                }
+            };
+        },
         isSplitterPanel(child) {
             return child.type.name === 'SplitterPanel';
         },

package/splitter/splitter.cjs.js

@@ -129,6 +129,14 @@ var script = {
     this.unbindMouseListeners();
   },
   methods: {
+    getPTOptions: function getPTOptions() {
+      var _this$$parentInstance;
+      return {
+        context: {
+          nested: utils.DomHandler.getAttribute((_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.$el, 'data-pc-name') === 'splitterpanel'
+        }
+      };
+    },
     isSplitterPanel: function isSplitterPanel(child) {
       return child.type.name === 'SplitterPanel';
     },
@@ -411,7 +419,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "class": _ctx.cx('root'),
     style: _ctx.sx('root'),
     "data-p-resizing": false
-  }, _ctx.ptm('root'), {
+  }, _ctx.ptm('root', $options.getPTOptions()), {
     "data-pc-name": "splitter"
   }), [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.panels, function (panel, i) {
     return vue.openBlock(), vue.createElementBlock(vue.Fragment, {

package/splitter/splitter.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("primevue/basecomponent"),n=require("primevue/usestyle"),i=require("vue");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=r(t),o=n.useStyle("\n.p-splitter {\n    display: flex;\n    flex-wrap: nowrap;\n}\n\n.p-splitter-vertical {\n    flex-direction: column;\n}\n\n.p-splitter-gutter {\n    flex-grow: 0;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: col-resize;\n}\n\n.p-splitter-horizontal.p-splitter-resizing {\n    cursor: col-resize;\n    user-select: none;\n}\n\n.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {\n    height: 24px;\n    width: 100%;\n}\n\n.p-splitter-horizontal > .p-splitter-gutter {\n    cursor: col-resize;\n}\n\n.p-splitter-vertical.p-splitter-resizing {\n    cursor: row-resize;\n    user-select: none;\n}\n\n.p-splitter-vertical > .p-splitter-gutter {\n    cursor: row-resize;\n}\n\n.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {\n    width: 24px;\n    height: 100%;\n}\n",{name:"splitter",manual:!0});function l(e){return p(e)||h(e)||u(e)||a()}function a(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function u(e,t){if(e){if("string"==typeof e)return c(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?c(e,t):void 0}}function h(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function p(e){if(Array.isArray(e))return c(e)}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var d={name:"Splitter",extends:{name:"BaseSplitter",extends:s.default,props:{layout:{type:String,default:"horizontal"},gutterSize:{type:Number,default:4},stateKey:{type:String,default:null},stateStorage:{type:String,default:"session"},step:{type:Number,default:5}},css:{classes:{root:function(e){return["p-splitter p-component","p-splitter-"+e.props.layout]},gutter:"p-splitter-gutter",gutterHandler:"p-splitter-gutter-handle"},inlineStyles:{root:function(e){return[{display:"flex","flex-wrap":"nowrap"},"vertical"===e.props.layout?{"flex-direction":"column"}:""]}},loadStyle:o.load},provide:function(){return{$parentInstance:this}}},emits:["resizestart","resizeend"],dragging:!1,mouseMoveListener:null,mouseUpListener:null,touchMoveListener:null,touchEndListener:null,size:null,gutterElement:null,startPos:null,prevPanelElement:null,nextPanelElement:null,nextPanelSize:null,prevPanelSize:null,panelSizes:null,prevPanelIndex:null,timer:null,data:function(){return{prevSize:null}},mounted:function(){var e=this;if(this.panels&&this.panels.length){var t=!1;if(this.isStateful()&&(t=this.restoreState()),!t){var n=l(this.$el.children).filter((function(e){return"splitterpanel"===e.getAttribute("data-pc-name")})),i=[];this.panels.map((function(t,r){var s=(t.props&&t.props.size?t.props.size:null)||100/e.panels.length;i[r]=s,n[r].style.flexBasis="calc("+s+"% - "+(e.panels.length-1)*e.gutterSize+"px)"})),this.panelSizes=i,this.prevSize=parseFloat(i[0]).toFixed(4)}}},beforeUnmount:function(){this.clear(),this.unbindMouseListeners()},methods:{isSplitterPanel:function(e){return"SplitterPanel"===e.type.name},onResizeStart:function(t,n,i){this.gutterElement=t.currentTarget||t.target.parentElement,this.size=this.horizontal?e.DomHandler.getWidth(this.$el):e.DomHandler.getHeight(this.$el),i||(this.dragging=!0,this.startPos="horizontal"===this.layout?t.pageX||t.changedTouches[0].pageX:t.pageY||t.changedTouches[0].pageY),this.prevPanelElement=this.gutterElement.previousElementSibling,this.nextPanelElement=this.gutterElement.nextElementSibling,i?(this.prevPanelSize=this.horizontal?e.DomHandler.getOuterWidth(this.prevPanelElement,!0):e.DomHandler.getOuterHeight(this.prevPanelElement,!0),this.nextPanelSize=this.horizontal?e.DomHandler.getOuterWidth(this.nextPanelElement,!0):e.DomHandler.getOuterHeight(this.nextPanelElement,!0)):(this.prevPanelSize=100*(this.horizontal?e.DomHandler.getOuterWidth(this.prevPanelElement,!0):e.DomHandler.getOuterHeight(this.prevPanelElement,!0))/this.size,this.nextPanelSize=100*(this.horizontal?e.DomHandler.getOuterWidth(this.nextPanelElement,!0):e.DomHandler.getOuterHeight(this.nextPanelElement,!0))/this.size),this.prevPanelIndex=n,this.$emit("resizestart",{originalEvent:t,sizes:this.panelSizes}),this.$refs.gutter[n].setAttribute("data-p-gutter-resizing",!0),this.$el.setAttribute("data-p-resizing",!0)},onResize:function(e,t,n){var i,r,s;n?this.horizontal?(r=100*(this.prevPanelSize+t)/this.size,s=100*(this.nextPanelSize-t)/this.size):(r=100*(this.prevPanelSize-t)/this.size,s=100*(this.nextPanelSize+t)/this.size):(r=this.prevPanelSize+(i=this.horizontal?100*e.pageX/this.size-100*this.startPos/this.size:100*e.pageY/this.size-100*this.startPos/this.size),s=this.nextPanelSize-i),this.prevSize=parseFloat(r).toFixed(4),this.validateResize(r,s)&&(this.prevPanelElement.style.flexBasis="calc("+r+"% - "+(this.panels.length-1)*this.gutterSize+"px)",this.nextPanelElement.style.flexBasis="calc("+s+"% - "+(this.panels.length-1)*this.gutterSize+"px)",this.panelSizes[this.prevPanelIndex]=r,this.panelSizes[this.prevPanelIndex+1]=s)},onResizeEnd:function(e){this.isStateful()&&this.saveState(),this.$emit("resizeend",{originalEvent:e,sizes:this.panelSizes}),this.$refs.gutter.forEach((function(e){return e.setAttribute("data-p-gutter-resizing",!1)})),this.$el.setAttribute("data-p-resizing",!1),this.clear()},repeat:function(e,t,n){this.onResizeStart(e,t,!0),this.onResize(e,n,!0)},setTimer:function(e,t,n){var i=this;this.clearTimer(),this.timer=setTimeout((function(){i.repeat(e,t,n)}),40)},clearTimer:function(){this.timer&&clearTimeout(this.timer)},onGutterKeyUp:function(){this.clearTimer(),this.onResizeEnd()},onGutterKeyDown:function(e,t){switch(e.code){case"ArrowLeft":"horizontal"===this.layout&&this.setTimer(e,t,-1*this.step),e.preventDefault();break;case"ArrowRight":"horizontal"===this.layout&&this.setTimer(e,t,this.step),e.preventDefault();break;case"ArrowDown":"vertical"===this.layout&&this.setTimer(e,t,-1*this.step),e.preventDefault();break;case"ArrowUp":"vertical"===this.layout&&this.setTimer(e,t,this.step),e.preventDefault()}},onGutterMouseDown:function(e,t){this.onResizeStart(e,t),this.bindMouseListeners()},onGutterTouchStart:function(e,t){this.onResizeStart(e,t),this.bindTouchListeners(),e.preventDefault()},onGutterTouchMove:function(e){this.onResize(e),e.preventDefault()},onGutterTouchEnd:function(e){this.onResizeEnd(e),this.unbindTouchListeners(),e.preventDefault()},bindMouseListeners:function(){var e=this;this.mouseMoveListener||(this.mouseMoveListener=function(t){return e.onResize(t)},document.addEventListener("mousemove",this.mouseMoveListener)),this.mouseUpListener||(this.mouseUpListener=function(t){e.onResizeEnd(t),e.unbindMouseListeners()},document.addEventListener("mouseup",this.mouseUpListener))},bindTouchListeners:function(){var e=this;this.touchMoveListener||(this.touchMoveListener=function(t){return e.onResize(t.changedTouches[0])},document.addEventListener("touchmove",this.touchMoveListener)),this.touchEndListener||(this.touchEndListener=function(t){e.resizeEnd(t),e.unbindTouchListeners()},document.addEventListener("touchend",this.touchEndListener))},validateResize:function(t,n){var i=e.ObjectUtils.getVNodeProp(this.panels[0],"minSize");if(this.panels[0].props&&i&&i>t)return!1;var r=e.ObjectUtils.getVNodeProp(this.panels[1],"minSize");return!(this.panels[1].props&&r&&r>n)},unbindMouseListeners:function(){this.mouseMoveListener&&(document.removeEventListener("mousemove",this.mouseMoveListener),this.mouseMoveListener=null),this.mouseUpListener&&(document.removeEventListener("mouseup",this.mouseUpListener),this.mouseUpListener=null)},unbindTouchListeners:function(){this.touchMoveListener&&(document.removeEventListener("touchmove",this.touchMoveListener),this.touchMoveListener=null),this.touchEndListener&&(document.removeEventListener("touchend",this.touchEndListener),this.touchEndListener=null)},clear:function(){this.dragging=!1,this.size=null,this.startPos=null,this.prevPanelElement=null,this.nextPanelElement=null,this.prevPanelSize=null,this.nextPanelSize=null,this.gutterElement=null,this.prevPanelIndex=null},isStateful:function(){return null!=this.stateKey},getStorage:function(){switch(this.stateStorage){case"local":return window.localStorage;case"session":return window.sessionStorage;default:throw new Error(this.stateStorage+' is not a valid value for the state storage, supported values are "local" and "session".')}},saveState:function(){this.getStorage().setItem(this.stateKey,JSON.stringify(this.panelSizes))},restoreState:function(){var e=this,t=this.getStorage().getItem(this.stateKey);return!!t&&(this.panelSizes=JSON.parse(t),l(this.$el.children).filter((function(e){return"splitterpanel"===e.getAttribute("data-pc-name")})).forEach((function(t,n){t.style.flexBasis="calc("+e.panelSizes[n]+"% - "+(e.panels.length-1)*e.gutterSize+"px)"})),!0)}},computed:{panels:function(){var e=this,t=[];return this.$slots.default().forEach((function(n){e.isSplitterPanel(n)?t.push(n):n.children instanceof Array&&n.children.forEach((function(n){e.isSplitterPanel(n)&&t.push(n)}))})),t},gutterStyle:function(){return this.horizontal?{width:this.gutterSize+"px"}:{height:this.gutterSize+"px"}},horizontal:function(){return"horizontal"===this.layout}}},m=["onMousedown","onTouchstart","onTouchmove","onTouchend"],g=["aria-orientation","aria-valuenow","onKeydown"];d.render=function(e,t,n,r,s,o){return i.openBlock(),i.createElementBlock("div",i.mergeProps({class:e.cx("root"),style:e.sx("root"),"data-p-resizing":!1},e.ptm("root"),{"data-pc-name":"splitter"}),[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(o.panels,(function(n,r){return i.openBlock(),i.createElementBlock(i.Fragment,{key:r},[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(n),{tabindex:"-1"})),r!==o.panels.length-1?(i.openBlock(),i.createElementBlock("div",i.mergeProps({key:0,ref_for:!0,ref:"gutter",class:e.cx("gutter"),role:"separator",tabindex:"-1",onMousedown:function(e){return o.onGutterMouseDown(e,r)},onTouchstart:function(e){return o.onGutterTouchStart(e,r)},onTouchmove:function(e){return o.onGutterTouchMove(e,r)},onTouchend:function(e){return o.onGutterTouchEnd(e,r)},"data-p-gutter-resizing":!1},e.ptm("gutter")),[i.createElementVNode("div",i.mergeProps({class:e.cx("gutterHandler"),tabindex:"0",style:[o.gutterStyle],"aria-orientation":e.layout,"aria-valuenow":s.prevSize,onKeyup:t[0]||(t[0]=function(){return o.onGutterKeyUp&&o.onGutterKeyUp.apply(o,arguments)}),onKeydown:function(e){return o.onGutterKeyDown(e,r)}},e.ptm("gutterHandler")),null,16,g)],16,m)):i.createCommentVNode("",!0)],64)})),128))],16)},module.exports=d;
+"use strict";var e=require("primevue/utils"),t=require("primevue/basecomponent"),n=require("primevue/usestyle"),i=require("vue");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=r(t),o=n.useStyle("\n.p-splitter {\n    display: flex;\n    flex-wrap: nowrap;\n}\n\n.p-splitter-vertical {\n    flex-direction: column;\n}\n\n.p-splitter-gutter {\n    flex-grow: 0;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: col-resize;\n}\n\n.p-splitter-horizontal.p-splitter-resizing {\n    cursor: col-resize;\n    user-select: none;\n}\n\n.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {\n    height: 24px;\n    width: 100%;\n}\n\n.p-splitter-horizontal > .p-splitter-gutter {\n    cursor: col-resize;\n}\n\n.p-splitter-vertical.p-splitter-resizing {\n    cursor: row-resize;\n    user-select: none;\n}\n\n.p-splitter-vertical > .p-splitter-gutter {\n    cursor: row-resize;\n}\n\n.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {\n    width: 24px;\n    height: 100%;\n}\n",{name:"splitter",manual:!0});function l(e){return p(e)||h(e)||u(e)||a()}function a(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function u(e,t){if(e){if("string"==typeof e)return c(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?c(e,t):void 0}}function h(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function p(e){if(Array.isArray(e))return c(e)}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var d={name:"Splitter",extends:{name:"BaseSplitter",extends:s.default,props:{layout:{type:String,default:"horizontal"},gutterSize:{type:Number,default:4},stateKey:{type:String,default:null},stateStorage:{type:String,default:"session"},step:{type:Number,default:5}},css:{classes:{root:function(e){return["p-splitter p-component","p-splitter-"+e.props.layout]},gutter:"p-splitter-gutter",gutterHandler:"p-splitter-gutter-handle"},inlineStyles:{root:function(e){return[{display:"flex","flex-wrap":"nowrap"},"vertical"===e.props.layout?{"flex-direction":"column"}:""]}},loadStyle:o.load},provide:function(){return{$parentInstance:this}}},emits:["resizestart","resizeend"],dragging:!1,mouseMoveListener:null,mouseUpListener:null,touchMoveListener:null,touchEndListener:null,size:null,gutterElement:null,startPos:null,prevPanelElement:null,nextPanelElement:null,nextPanelSize:null,prevPanelSize:null,panelSizes:null,prevPanelIndex:null,timer:null,data:function(){return{prevSize:null}},mounted:function(){var e=this;if(this.panels&&this.panels.length){var t=!1;if(this.isStateful()&&(t=this.restoreState()),!t){var n=l(this.$el.children).filter((function(e){return"splitterpanel"===e.getAttribute("data-pc-name")})),i=[];this.panels.map((function(t,r){var s=(t.props&&t.props.size?t.props.size:null)||100/e.panels.length;i[r]=s,n[r].style.flexBasis="calc("+s+"% - "+(e.panels.length-1)*e.gutterSize+"px)"})),this.panelSizes=i,this.prevSize=parseFloat(i[0]).toFixed(4)}}},beforeUnmount:function(){this.clear(),this.unbindMouseListeners()},methods:{getPTOptions:function(){var t;return{context:{nested:"splitterpanel"===e.DomHandler.getAttribute(null===(t=this.$parentInstance)||void 0===t?void 0:t.$el,"data-pc-name")}}},isSplitterPanel:function(e){return"SplitterPanel"===e.type.name},onResizeStart:function(t,n,i){this.gutterElement=t.currentTarget||t.target.parentElement,this.size=this.horizontal?e.DomHandler.getWidth(this.$el):e.DomHandler.getHeight(this.$el),i||(this.dragging=!0,this.startPos="horizontal"===this.layout?t.pageX||t.changedTouches[0].pageX:t.pageY||t.changedTouches[0].pageY),this.prevPanelElement=this.gutterElement.previousElementSibling,this.nextPanelElement=this.gutterElement.nextElementSibling,i?(this.prevPanelSize=this.horizontal?e.DomHandler.getOuterWidth(this.prevPanelElement,!0):e.DomHandler.getOuterHeight(this.prevPanelElement,!0),this.nextPanelSize=this.horizontal?e.DomHandler.getOuterWidth(this.nextPanelElement,!0):e.DomHandler.getOuterHeight(this.nextPanelElement,!0)):(this.prevPanelSize=100*(this.horizontal?e.DomHandler.getOuterWidth(this.prevPanelElement,!0):e.DomHandler.getOuterHeight(this.prevPanelElement,!0))/this.size,this.nextPanelSize=100*(this.horizontal?e.DomHandler.getOuterWidth(this.nextPanelElement,!0):e.DomHandler.getOuterHeight(this.nextPanelElement,!0))/this.size),this.prevPanelIndex=n,this.$emit("resizestart",{originalEvent:t,sizes:this.panelSizes}),this.$refs.gutter[n].setAttribute("data-p-gutter-resizing",!0),this.$el.setAttribute("data-p-resizing",!0)},onResize:function(e,t,n){var i,r,s;n?this.horizontal?(r=100*(this.prevPanelSize+t)/this.size,s=100*(this.nextPanelSize-t)/this.size):(r=100*(this.prevPanelSize-t)/this.size,s=100*(this.nextPanelSize+t)/this.size):(r=this.prevPanelSize+(i=this.horizontal?100*e.pageX/this.size-100*this.startPos/this.size:100*e.pageY/this.size-100*this.startPos/this.size),s=this.nextPanelSize-i),this.prevSize=parseFloat(r).toFixed(4),this.validateResize(r,s)&&(this.prevPanelElement.style.flexBasis="calc("+r+"% - "+(this.panels.length-1)*this.gutterSize+"px)",this.nextPanelElement.style.flexBasis="calc("+s+"% - "+(this.panels.length-1)*this.gutterSize+"px)",this.panelSizes[this.prevPanelIndex]=r,this.panelSizes[this.prevPanelIndex+1]=s)},onResizeEnd:function(e){this.isStateful()&&this.saveState(),this.$emit("resizeend",{originalEvent:e,sizes:this.panelSizes}),this.$refs.gutter.forEach((function(e){return e.setAttribute("data-p-gutter-resizing",!1)})),this.$el.setAttribute("data-p-resizing",!1),this.clear()},repeat:function(e,t,n){this.onResizeStart(e,t,!0),this.onResize(e,n,!0)},setTimer:function(e,t,n){var i=this;this.clearTimer(),this.timer=setTimeout((function(){i.repeat(e,t,n)}),40)},clearTimer:function(){this.timer&&clearTimeout(this.timer)},onGutterKeyUp:function(){this.clearTimer(),this.onResizeEnd()},onGutterKeyDown:function(e,t){switch(e.code){case"ArrowLeft":"horizontal"===this.layout&&this.setTimer(e,t,-1*this.step),e.preventDefault();break;case"ArrowRight":"horizontal"===this.layout&&this.setTimer(e,t,this.step),e.preventDefault();break;case"ArrowDown":"vertical"===this.layout&&this.setTimer(e,t,-1*this.step),e.preventDefault();break;case"ArrowUp":"vertical"===this.layout&&this.setTimer(e,t,this.step),e.preventDefault()}},onGutterMouseDown:function(e,t){this.onResizeStart(e,t),this.bindMouseListeners()},onGutterTouchStart:function(e,t){this.onResizeStart(e,t),this.bindTouchListeners(),e.preventDefault()},onGutterTouchMove:function(e){this.onResize(e),e.preventDefault()},onGutterTouchEnd:function(e){this.onResizeEnd(e),this.unbindTouchListeners(),e.preventDefault()},bindMouseListeners:function(){var e=this;this.mouseMoveListener||(this.mouseMoveListener=function(t){return e.onResize(t)},document.addEventListener("mousemove",this.mouseMoveListener)),this.mouseUpListener||(this.mouseUpListener=function(t){e.onResizeEnd(t),e.unbindMouseListeners()},document.addEventListener("mouseup",this.mouseUpListener))},bindTouchListeners:function(){var e=this;this.touchMoveListener||(this.touchMoveListener=function(t){return e.onResize(t.changedTouches[0])},document.addEventListener("touchmove",this.touchMoveListener)),this.touchEndListener||(this.touchEndListener=function(t){e.resizeEnd(t),e.unbindTouchListeners()},document.addEventListener("touchend",this.touchEndListener))},validateResize:function(t,n){var i=e.ObjectUtils.getVNodeProp(this.panels[0],"minSize");if(this.panels[0].props&&i&&i>t)return!1;var r=e.ObjectUtils.getVNodeProp(this.panels[1],"minSize");return!(this.panels[1].props&&r&&r>n)},unbindMouseListeners:function(){this.mouseMoveListener&&(document.removeEventListener("mousemove",this.mouseMoveListener),this.mouseMoveListener=null),this.mouseUpListener&&(document.removeEventListener("mouseup",this.mouseUpListener),this.mouseUpListener=null)},unbindTouchListeners:function(){this.touchMoveListener&&(document.removeEventListener("touchmove",this.touchMoveListener),this.touchMoveListener=null),this.touchEndListener&&(document.removeEventListener("touchend",this.touchEndListener),this.touchEndListener=null)},clear:function(){this.dragging=!1,this.size=null,this.startPos=null,this.prevPanelElement=null,this.nextPanelElement=null,this.prevPanelSize=null,this.nextPanelSize=null,this.gutterElement=null,this.prevPanelIndex=null},isStateful:function(){return null!=this.stateKey},getStorage:function(){switch(this.stateStorage){case"local":return window.localStorage;case"session":return window.sessionStorage;default:throw new Error(this.stateStorage+' is not a valid value for the state storage, supported values are "local" and "session".')}},saveState:function(){this.getStorage().setItem(this.stateKey,JSON.stringify(this.panelSizes))},restoreState:function(){var e=this,t=this.getStorage().getItem(this.stateKey);return!!t&&(this.panelSizes=JSON.parse(t),l(this.$el.children).filter((function(e){return"splitterpanel"===e.getAttribute("data-pc-name")})).forEach((function(t,n){t.style.flexBasis="calc("+e.panelSizes[n]+"% - "+(e.panels.length-1)*e.gutterSize+"px)"})),!0)}},computed:{panels:function(){var e=this,t=[];return this.$slots.default().forEach((function(n){e.isSplitterPanel(n)?t.push(n):n.children instanceof Array&&n.children.forEach((function(n){e.isSplitterPanel(n)&&t.push(n)}))})),t},gutterStyle:function(){return this.horizontal?{width:this.gutterSize+"px"}:{height:this.gutterSize+"px"}},horizontal:function(){return"horizontal"===this.layout}}},m=["onMousedown","onTouchstart","onTouchmove","onTouchend"],g=["aria-orientation","aria-valuenow","onKeydown"];d.render=function(e,t,n,r,s,o){return i.openBlock(),i.createElementBlock("div",i.mergeProps({class:e.cx("root"),style:e.sx("root"),"data-p-resizing":!1},e.ptm("root",o.getPTOptions()),{"data-pc-name":"splitter"}),[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(o.panels,(function(n,r){return i.openBlock(),i.createElementBlock(i.Fragment,{key:r},[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(n),{tabindex:"-1"})),r!==o.panels.length-1?(i.openBlock(),i.createElementBlock("div",i.mergeProps({key:0,ref_for:!0,ref:"gutter",class:e.cx("gutter"),role:"separator",tabindex:"-1",onMousedown:function(e){return o.onGutterMouseDown(e,r)},onTouchstart:function(e){return o.onGutterTouchStart(e,r)},onTouchmove:function(e){return o.onGutterTouchMove(e,r)},onTouchend:function(e){return o.onGutterTouchEnd(e,r)},"data-p-gutter-resizing":!1},e.ptm("gutter")),[i.createElementVNode("div",i.mergeProps({class:e.cx("gutterHandler"),tabindex:"0",style:[o.gutterStyle],"aria-orientation":e.layout,"aria-valuenow":s.prevSize,onKeyup:t[0]||(t[0]=function(){return o.onGutterKeyUp&&o.onGutterKeyUp.apply(o,arguments)}),onKeydown:function(e){return o.onGutterKeyDown(e,r)}},e.ptm("gutterHandler")),null,16,g)],16,m)):i.createCommentVNode("",!0)],64)})),128))],16)},module.exports=d;

package/splitter/splitter.esm.js

@@ -123,6 +123,14 @@ var script = {
     this.unbindMouseListeners();
   },
   methods: {
+    getPTOptions: function getPTOptions() {
+      var _this$$parentInstance;
+      return {
+        context: {
+          nested: DomHandler.getAttribute((_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.$el, 'data-pc-name') === 'splitterpanel'
+        }
+      };
+    },
     isSplitterPanel: function isSplitterPanel(child) {
       return child.type.name === 'SplitterPanel';
     },
@@ -405,7 +413,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "class": _ctx.cx('root'),
     style: _ctx.sx('root'),
     "data-p-resizing": false
-  }, _ctx.ptm('root'), {
+  }, _ctx.ptm('root', $options.getPTOptions()), {
     "data-pc-name": "splitter"
   }), [(openBlock(true), createElementBlock(Fragment, null, renderList($options.panels, function (panel, i) {
     return openBlock(), createElementBlock(Fragment, {

package/splitter/splitter.esm.min.js

@@ -1 +1 @@
-import{DomHandler as e,ObjectUtils as t}from"primevue/utils";import n from"primevue/basecomponent";import{useStyle as i}from"primevue/usestyle";import{openBlock as s,createElementBlock as r,mergeProps as o,Fragment as l,renderList as a,createBlock as u,resolveDynamicComponent as h,createElementVNode as p,createCommentVNode as c}from"vue";var d=i("\n.p-splitter {\n    display: flex;\n    flex-wrap: nowrap;\n}\n\n.p-splitter-vertical {\n    flex-direction: column;\n}\n\n.p-splitter-gutter {\n    flex-grow: 0;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: col-resize;\n}\n\n.p-splitter-horizontal.p-splitter-resizing {\n    cursor: col-resize;\n    user-select: none;\n}\n\n.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {\n    height: 24px;\n    width: 100%;\n}\n\n.p-splitter-horizontal > .p-splitter-gutter {\n    cursor: col-resize;\n}\n\n.p-splitter-vertical.p-splitter-resizing {\n    cursor: row-resize;\n    user-select: none;\n}\n\n.p-splitter-vertical > .p-splitter-gutter {\n    cursor: row-resize;\n}\n\n.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {\n    width: 24px;\n    height: 100%;\n}\n",{name:"splitter",manual:!0});function m(e){return z(e)||v(e)||g(e)||f()}function f(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function g(e,t){if(e){if("string"==typeof e)return S(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?S(e,t):void 0}}function v(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function z(e){if(Array.isArray(e))return S(e)}function S(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var y={name:"Splitter",extends:{name:"BaseSplitter",extends:n,props:{layout:{type:String,default:"horizontal"},gutterSize:{type:Number,default:4},stateKey:{type:String,default:null},stateStorage:{type:String,default:"session"},step:{type:Number,default:5}},css:{classes:{root:function(e){return["p-splitter p-component","p-splitter-"+e.props.layout]},gutter:"p-splitter-gutter",gutterHandler:"p-splitter-gutter-handle"},inlineStyles:{root:function(e){return[{display:"flex","flex-wrap":"nowrap"},"vertical"===e.props.layout?{"flex-direction":"column"}:""]}},loadStyle:d.load},provide:function(){return{$parentInstance:this}}},emits:["resizestart","resizeend"],dragging:!1,mouseMoveListener:null,mouseUpListener:null,touchMoveListener:null,touchEndListener:null,size:null,gutterElement:null,startPos:null,prevPanelElement:null,nextPanelElement:null,nextPanelSize:null,prevPanelSize:null,panelSizes:null,prevPanelIndex:null,timer:null,data:function(){return{prevSize:null}},mounted:function(){var e=this;if(this.panels&&this.panels.length){var t=!1;if(this.isStateful()&&(t=this.restoreState()),!t){var n=m(this.$el.children).filter((function(e){return"splitterpanel"===e.getAttribute("data-pc-name")})),i=[];this.panels.map((function(t,s){var r=(t.props&&t.props.size?t.props.size:null)||100/e.panels.length;i[s]=r,n[s].style.flexBasis="calc("+r+"% - "+(e.panels.length-1)*e.gutterSize+"px)"})),this.panelSizes=i,this.prevSize=parseFloat(i[0]).toFixed(4)}}},beforeUnmount:function(){this.clear(),this.unbindMouseListeners()},methods:{isSplitterPanel:function(e){return"SplitterPanel"===e.type.name},onResizeStart:function(t,n,i){this.gutterElement=t.currentTarget||t.target.parentElement,this.size=this.horizontal?e.getWidth(this.$el):e.getHeight(this.$el),i||(this.dragging=!0,this.startPos="horizontal"===this.layout?t.pageX||t.changedTouches[0].pageX:t.pageY||t.changedTouches[0].pageY),this.prevPanelElement=this.gutterElement.previousElementSibling,this.nextPanelElement=this.gutterElement.nextElementSibling,i?(this.prevPanelSize=this.horizontal?e.getOuterWidth(this.prevPanelElement,!0):e.getOuterHeight(this.prevPanelElement,!0),this.nextPanelSize=this.horizontal?e.getOuterWidth(this.nextPanelElement,!0):e.getOuterHeight(this.nextPanelElement,!0)):(this.prevPanelSize=100*(this.horizontal?e.getOuterWidth(this.prevPanelElement,!0):e.getOuterHeight(this.prevPanelElement,!0))/this.size,this.nextPanelSize=100*(this.horizontal?e.getOuterWidth(this.nextPanelElement,!0):e.getOuterHeight(this.nextPanelElement,!0))/this.size),this.prevPanelIndex=n,this.$emit("resizestart",{originalEvent:t,sizes:this.panelSizes}),this.$refs.gutter[n].setAttribute("data-p-gutter-resizing",!0),this.$el.setAttribute("data-p-resizing",!0)},onResize:function(e,t,n){var i,s,r;n?this.horizontal?(s=100*(this.prevPanelSize+t)/this.size,r=100*(this.nextPanelSize-t)/this.size):(s=100*(this.prevPanelSize-t)/this.size,r=100*(this.nextPanelSize+t)/this.size):(s=this.prevPanelSize+(i=this.horizontal?100*e.pageX/this.size-100*this.startPos/this.size:100*e.pageY/this.size-100*this.startPos/this.size),r=this.nextPanelSize-i),this.prevSize=parseFloat(s).toFixed(4),this.validateResize(s,r)&&(this.prevPanelElement.style.flexBasis="calc("+s+"% - "+(this.panels.length-1)*this.gutterSize+"px)",this.nextPanelElement.style.flexBasis="calc("+r+"% - "+(this.panels.length-1)*this.gutterSize+"px)",this.panelSizes[this.prevPanelIndex]=s,this.panelSizes[this.prevPanelIndex+1]=r)},onResizeEnd:function(e){this.isStateful()&&this.saveState(),this.$emit("resizeend",{originalEvent:e,sizes:this.panelSizes}),this.$refs.gutter.forEach((function(e){return e.setAttribute("data-p-gutter-resizing",!1)})),this.$el.setAttribute("data-p-resizing",!1),this.clear()},repeat:function(e,t,n){this.onResizeStart(e,t,!0),this.onResize(e,n,!0)},setTimer:function(e,t,n){var i=this;this.clearTimer(),this.timer=setTimeout((function(){i.repeat(e,t,n)}),40)},clearTimer:function(){this.timer&&clearTimeout(this.timer)},onGutterKeyUp:function(){this.clearTimer(),this.onResizeEnd()},onGutterKeyDown:function(e,t){switch(e.code){case"ArrowLeft":"horizontal"===this.layout&&this.setTimer(e,t,-1*this.step),e.preventDefault();break;case"ArrowRight":"horizontal"===this.layout&&this.setTimer(e,t,this.step),e.preventDefault();break;case"ArrowDown":"vertical"===this.layout&&this.setTimer(e,t,-1*this.step),e.preventDefault();break;case"ArrowUp":"vertical"===this.layout&&this.setTimer(e,t,this.step),e.preventDefault()}},onGutterMouseDown:function(e,t){this.onResizeStart(e,t),this.bindMouseListeners()},onGutterTouchStart:function(e,t){this.onResizeStart(e,t),this.bindTouchListeners(),e.preventDefault()},onGutterTouchMove:function(e){this.onResize(e),e.preventDefault()},onGutterTouchEnd:function(e){this.onResizeEnd(e),this.unbindTouchListeners(),e.preventDefault()},bindMouseListeners:function(){var e=this;this.mouseMoveListener||(this.mouseMoveListener=function(t){return e.onResize(t)},document.addEventListener("mousemove",this.mouseMoveListener)),this.mouseUpListener||(this.mouseUpListener=function(t){e.onResizeEnd(t),e.unbindMouseListeners()},document.addEventListener("mouseup",this.mouseUpListener))},bindTouchListeners:function(){var e=this;this.touchMoveListener||(this.touchMoveListener=function(t){return e.onResize(t.changedTouches[0])},document.addEventListener("touchmove",this.touchMoveListener)),this.touchEndListener||(this.touchEndListener=function(t){e.resizeEnd(t),e.unbindTouchListeners()},document.addEventListener("touchend",this.touchEndListener))},validateResize:function(e,n){var i=t.getVNodeProp(this.panels[0],"minSize");if(this.panels[0].props&&i&&i>e)return!1;var s=t.getVNodeProp(this.panels[1],"minSize");return!(this.panels[1].props&&s&&s>n)},unbindMouseListeners:function(){this.mouseMoveListener&&(document.removeEventListener("mousemove",this.mouseMoveListener),this.mouseMoveListener=null),this.mouseUpListener&&(document.removeEventListener("mouseup",this.mouseUpListener),this.mouseUpListener=null)},unbindTouchListeners:function(){this.touchMoveListener&&(document.removeEventListener("touchmove",this.touchMoveListener),this.touchMoveListener=null),this.touchEndListener&&(document.removeEventListener("touchend",this.touchEndListener),this.touchEndListener=null)},clear:function(){this.dragging=!1,this.size=null,this.startPos=null,this.prevPanelElement=null,this.nextPanelElement=null,this.prevPanelSize=null,this.nextPanelSize=null,this.gutterElement=null,this.prevPanelIndex=null},isStateful:function(){return null!=this.stateKey},getStorage:function(){switch(this.stateStorage){case"local":return window.localStorage;case"session":return window.sessionStorage;default:throw new Error(this.stateStorage+' is not a valid value for the state storage, supported values are "local" and "session".')}},saveState:function(){this.getStorage().setItem(this.stateKey,JSON.stringify(this.panelSizes))},restoreState:function(){var e=this,t=this.getStorage().getItem(this.stateKey);return!!t&&(this.panelSizes=JSON.parse(t),m(this.$el.children).filter((function(e){return"splitterpanel"===e.getAttribute("data-pc-name")})).forEach((function(t,n){t.style.flexBasis="calc("+e.panelSizes[n]+"% - "+(e.panels.length-1)*e.gutterSize+"px)"})),!0)}},computed:{panels:function(){var e=this,t=[];return this.$slots.default().forEach((function(n){e.isSplitterPanel(n)?t.push(n):n.children instanceof Array&&n.children.forEach((function(n){e.isSplitterPanel(n)&&t.push(n)}))})),t},gutterStyle:function(){return this.horizontal?{width:this.gutterSize+"px"}:{height:this.gutterSize+"px"}},horizontal:function(){return"horizontal"===this.layout}}},x=["onMousedown","onTouchstart","onTouchmove","onTouchend"],E=["aria-orientation","aria-valuenow","onKeydown"];y.render=function(e,t,n,i,d,m){return s(),r("div",o({class:e.cx("root"),style:e.sx("root"),"data-p-resizing":!1},e.ptm("root"),{"data-pc-name":"splitter"}),[(s(!0),r(l,null,a(m.panels,(function(n,i){return s(),r(l,{key:i},[(s(),u(h(n),{tabindex:"-1"})),i!==m.panels.length-1?(s(),r("div",o({key:0,ref_for:!0,ref:"gutter",class:e.cx("gutter"),role:"separator",tabindex:"-1",onMousedown:function(e){return m.onGutterMouseDown(e,i)},onTouchstart:function(e){return m.onGutterTouchStart(e,i)},onTouchmove:function(e){return m.onGutterTouchMove(e,i)},onTouchend:function(e){return m.onGutterTouchEnd(e,i)},"data-p-gutter-resizing":!1},e.ptm("gutter")),[p("div",o({class:e.cx("gutterHandler"),tabindex:"0",style:[m.gutterStyle],"aria-orientation":e.layout,"aria-valuenow":d.prevSize,onKeyup:t[0]||(t[0]=function(){return m.onGutterKeyUp&&m.onGutterKeyUp.apply(m,arguments)}),onKeydown:function(e){return m.onGutterKeyDown(e,i)}},e.ptm("gutterHandler")),null,16,E)],16,x)):c("",!0)],64)})),128))],16)};export{y as default};
+import{DomHandler as e,ObjectUtils as t}from"primevue/utils";import n from"primevue/basecomponent";import{useStyle as i}from"primevue/usestyle";import{openBlock as s,createElementBlock as r,mergeProps as o,Fragment as l,renderList as a,createBlock as u,resolveDynamicComponent as h,createElementVNode as p,createCommentVNode as c}from"vue";var d=i("\n.p-splitter {\n    display: flex;\n    flex-wrap: nowrap;\n}\n\n.p-splitter-vertical {\n    flex-direction: column;\n}\n\n.p-splitter-gutter {\n    flex-grow: 0;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: col-resize;\n}\n\n.p-splitter-horizontal.p-splitter-resizing {\n    cursor: col-resize;\n    user-select: none;\n}\n\n.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {\n    height: 24px;\n    width: 100%;\n}\n\n.p-splitter-horizontal > .p-splitter-gutter {\n    cursor: col-resize;\n}\n\n.p-splitter-vertical.p-splitter-resizing {\n    cursor: row-resize;\n    user-select: none;\n}\n\n.p-splitter-vertical > .p-splitter-gutter {\n    cursor: row-resize;\n}\n\n.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {\n    width: 24px;\n    height: 100%;\n}\n",{name:"splitter",manual:!0});function m(e){return z(e)||v(e)||g(e)||f()}function f(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function g(e,t){if(e){if("string"==typeof e)return S(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?S(e,t):void 0}}function v(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function z(e){if(Array.isArray(e))return S(e)}function S(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var y={name:"Splitter",extends:{name:"BaseSplitter",extends:n,props:{layout:{type:String,default:"horizontal"},gutterSize:{type:Number,default:4},stateKey:{type:String,default:null},stateStorage:{type:String,default:"session"},step:{type:Number,default:5}},css:{classes:{root:function(e){return["p-splitter p-component","p-splitter-"+e.props.layout]},gutter:"p-splitter-gutter",gutterHandler:"p-splitter-gutter-handle"},inlineStyles:{root:function(e){return[{display:"flex","flex-wrap":"nowrap"},"vertical"===e.props.layout?{"flex-direction":"column"}:""]}},loadStyle:d.load},provide:function(){return{$parentInstance:this}}},emits:["resizestart","resizeend"],dragging:!1,mouseMoveListener:null,mouseUpListener:null,touchMoveListener:null,touchEndListener:null,size:null,gutterElement:null,startPos:null,prevPanelElement:null,nextPanelElement:null,nextPanelSize:null,prevPanelSize:null,panelSizes:null,prevPanelIndex:null,timer:null,data:function(){return{prevSize:null}},mounted:function(){var e=this;if(this.panels&&this.panels.length){var t=!1;if(this.isStateful()&&(t=this.restoreState()),!t){var n=m(this.$el.children).filter((function(e){return"splitterpanel"===e.getAttribute("data-pc-name")})),i=[];this.panels.map((function(t,s){var r=(t.props&&t.props.size?t.props.size:null)||100/e.panels.length;i[s]=r,n[s].style.flexBasis="calc("+r+"% - "+(e.panels.length-1)*e.gutterSize+"px)"})),this.panelSizes=i,this.prevSize=parseFloat(i[0]).toFixed(4)}}},beforeUnmount:function(){this.clear(),this.unbindMouseListeners()},methods:{getPTOptions:function(){var t;return{context:{nested:"splitterpanel"===e.getAttribute(null===(t=this.$parentInstance)||void 0===t?void 0:t.$el,"data-pc-name")}}},isSplitterPanel:function(e){return"SplitterPanel"===e.type.name},onResizeStart:function(t,n,i){this.gutterElement=t.currentTarget||t.target.parentElement,this.size=this.horizontal?e.getWidth(this.$el):e.getHeight(this.$el),i||(this.dragging=!0,this.startPos="horizontal"===this.layout?t.pageX||t.changedTouches[0].pageX:t.pageY||t.changedTouches[0].pageY),this.prevPanelElement=this.gutterElement.previousElementSibling,this.nextPanelElement=this.gutterElement.nextElementSibling,i?(this.prevPanelSize=this.horizontal?e.getOuterWidth(this.prevPanelElement,!0):e.getOuterHeight(this.prevPanelElement,!0),this.nextPanelSize=this.horizontal?e.getOuterWidth(this.nextPanelElement,!0):e.getOuterHeight(this.nextPanelElement,!0)):(this.prevPanelSize=100*(this.horizontal?e.getOuterWidth(this.prevPanelElement,!0):e.getOuterHeight(this.prevPanelElement,!0))/this.size,this.nextPanelSize=100*(this.horizontal?e.getOuterWidth(this.nextPanelElement,!0):e.getOuterHeight(this.nextPanelElement,!0))/this.size),this.prevPanelIndex=n,this.$emit("resizestart",{originalEvent:t,sizes:this.panelSizes}),this.$refs.gutter[n].setAttribute("data-p-gutter-resizing",!0),this.$el.setAttribute("data-p-resizing",!0)},onResize:function(e,t,n){var i,s,r;n?this.horizontal?(s=100*(this.prevPanelSize+t)/this.size,r=100*(this.nextPanelSize-t)/this.size):(s=100*(this.prevPanelSize-t)/this.size,r=100*(this.nextPanelSize+t)/this.size):(s=this.prevPanelSize+(i=this.horizontal?100*e.pageX/this.size-100*this.startPos/this.size:100*e.pageY/this.size-100*this.startPos/this.size),r=this.nextPanelSize-i),this.prevSize=parseFloat(s).toFixed(4),this.validateResize(s,r)&&(this.prevPanelElement.style.flexBasis="calc("+s+"% - "+(this.panels.length-1)*this.gutterSize+"px)",this.nextPanelElement.style.flexBasis="calc("+r+"% - "+(this.panels.length-1)*this.gutterSize+"px)",this.panelSizes[this.prevPanelIndex]=s,this.panelSizes[this.prevPanelIndex+1]=r)},onResizeEnd:function(e){this.isStateful()&&this.saveState(),this.$emit("resizeend",{originalEvent:e,sizes:this.panelSizes}),this.$refs.gutter.forEach((function(e){return e.setAttribute("data-p-gutter-resizing",!1)})),this.$el.setAttribute("data-p-resizing",!1),this.clear()},repeat:function(e,t,n){this.onResizeStart(e,t,!0),this.onResize(e,n,!0)},setTimer:function(e,t,n){var i=this;this.clearTimer(),this.timer=setTimeout((function(){i.repeat(e,t,n)}),40)},clearTimer:function(){this.timer&&clearTimeout(this.timer)},onGutterKeyUp:function(){this.clearTimer(),this.onResizeEnd()},onGutterKeyDown:function(e,t){switch(e.code){case"ArrowLeft":"horizontal"===this.layout&&this.setTimer(e,t,-1*this.step),e.preventDefault();break;case"ArrowRight":"horizontal"===this.layout&&this.setTimer(e,t,this.step),e.preventDefault();break;case"ArrowDown":"vertical"===this.layout&&this.setTimer(e,t,-1*this.step),e.preventDefault();break;case"ArrowUp":"vertical"===this.layout&&this.setTimer(e,t,this.step),e.preventDefault()}},onGutterMouseDown:function(e,t){this.onResizeStart(e,t),this.bindMouseListeners()},onGutterTouchStart:function(e,t){this.onResizeStart(e,t),this.bindTouchListeners(),e.preventDefault()},onGutterTouchMove:function(e){this.onResize(e),e.preventDefault()},onGutterTouchEnd:function(e){this.onResizeEnd(e),this.unbindTouchListeners(),e.preventDefault()},bindMouseListeners:function(){var e=this;this.mouseMoveListener||(this.mouseMoveListener=function(t){return e.onResize(t)},document.addEventListener("mousemove",this.mouseMoveListener)),this.mouseUpListener||(this.mouseUpListener=function(t){e.onResizeEnd(t),e.unbindMouseListeners()},document.addEventListener("mouseup",this.mouseUpListener))},bindTouchListeners:function(){var e=this;this.touchMoveListener||(this.touchMoveListener=function(t){return e.onResize(t.changedTouches[0])},document.addEventListener("touchmove",this.touchMoveListener)),this.touchEndListener||(this.touchEndListener=function(t){e.resizeEnd(t),e.unbindTouchListeners()},document.addEventListener("touchend",this.touchEndListener))},validateResize:function(e,n){var i=t.getVNodeProp(this.panels[0],"minSize");if(this.panels[0].props&&i&&i>e)return!1;var s=t.getVNodeProp(this.panels[1],"minSize");return!(this.panels[1].props&&s&&s>n)},unbindMouseListeners:function(){this.mouseMoveListener&&(document.removeEventListener("mousemove",this.mouseMoveListener),this.mouseMoveListener=null),this.mouseUpListener&&(document.removeEventListener("mouseup",this.mouseUpListener),this.mouseUpListener=null)},unbindTouchListeners:function(){this.touchMoveListener&&(document.removeEventListener("touchmove",this.touchMoveListener),this.touchMoveListener=null),this.touchEndListener&&(document.removeEventListener("touchend",this.touchEndListener),this.touchEndListener=null)},clear:function(){this.dragging=!1,this.size=null,this.startPos=null,this.prevPanelElement=null,this.nextPanelElement=null,this.prevPanelSize=null,this.nextPanelSize=null,this.gutterElement=null,this.prevPanelIndex=null},isStateful:function(){return null!=this.stateKey},getStorage:function(){switch(this.stateStorage){case"local":return window.localStorage;case"session":return window.sessionStorage;default:throw new Error(this.stateStorage+' is not a valid value for the state storage, supported values are "local" and "session".')}},saveState:function(){this.getStorage().setItem(this.stateKey,JSON.stringify(this.panelSizes))},restoreState:function(){var e=this,t=this.getStorage().getItem(this.stateKey);return!!t&&(this.panelSizes=JSON.parse(t),m(this.$el.children).filter((function(e){return"splitterpanel"===e.getAttribute("data-pc-name")})).forEach((function(t,n){t.style.flexBasis="calc("+e.panelSizes[n]+"% - "+(e.panels.length-1)*e.gutterSize+"px)"})),!0)}},computed:{panels:function(){var e=this,t=[];return this.$slots.default().forEach((function(n){e.isSplitterPanel(n)?t.push(n):n.children instanceof Array&&n.children.forEach((function(n){e.isSplitterPanel(n)&&t.push(n)}))})),t},gutterStyle:function(){return this.horizontal?{width:this.gutterSize+"px"}:{height:this.gutterSize+"px"}},horizontal:function(){return"horizontal"===this.layout}}},x=["onMousedown","onTouchstart","onTouchmove","onTouchend"],E=["aria-orientation","aria-valuenow","onKeydown"];y.render=function(e,t,n,i,d,m){return s(),r("div",o({class:e.cx("root"),style:e.sx("root"),"data-p-resizing":!1},e.ptm("root",m.getPTOptions()),{"data-pc-name":"splitter"}),[(s(!0),r(l,null,a(m.panels,(function(n,i){return s(),r(l,{key:i},[(s(),u(h(n),{tabindex:"-1"})),i!==m.panels.length-1?(s(),r("div",o({key:0,ref_for:!0,ref:"gutter",class:e.cx("gutter"),role:"separator",tabindex:"-1",onMousedown:function(e){return m.onGutterMouseDown(e,i)},onTouchstart:function(e){return m.onGutterTouchStart(e,i)},onTouchmove:function(e){return m.onGutterTouchMove(e,i)},onTouchend:function(e){return m.onGutterTouchEnd(e,i)},"data-p-gutter-resizing":!1},e.ptm("gutter")),[p("div",o({class:e.cx("gutterHandler"),tabindex:"0",style:[m.gutterStyle],"aria-orientation":e.layout,"aria-valuenow":d.prevSize,onKeyup:t[0]||(t[0]=function(){return m.onGutterKeyUp&&m.onGutterKeyUp.apply(m,arguments)}),onKeydown:function(e){return m.onGutterKeyDown(e,i)}},e.ptm("gutterHandler")),null,16,E)],16,x)):c("",!0)],64)})),128))],16)};export{y as default};

package/splitter/splitter.js

@@ -126,6 +126,14 @@ this.primevue.splitter = (function (utils, BaseComponent, usestyle, vue) {
         this.unbindMouseListeners();
       },
       methods: {
+        getPTOptions: function getPTOptions() {
+          var _this$$parentInstance;
+          return {
+            context: {
+              nested: utils.DomHandler.getAttribute((_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.$el, 'data-pc-name') === 'splitterpanel'
+            }
+          };
+        },
         isSplitterPanel: function isSplitterPanel(child) {
           return child.type.name === 'SplitterPanel';
         },
@@ -408,7 +416,7 @@ this.primevue.splitter = (function (utils, BaseComponent, usestyle, vue) {
         "class": _ctx.cx('root'),
         style: _ctx.sx('root'),
         "data-p-resizing": false
-      }, _ctx.ptm('root'), {
+      }, _ctx.ptm('root', $options.getPTOptions()), {
         "data-pc-name": "splitter"
       }), [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.panels, function (panel, i) {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, {

package/splitter/splitter.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.splitter=function(e,t,n,i){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=r(t),o=n.useStyle("\n.p-splitter {\n    display: flex;\n    flex-wrap: nowrap;\n}\n\n.p-splitter-vertical {\n    flex-direction: column;\n}\n\n.p-splitter-gutter {\n    flex-grow: 0;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: col-resize;\n}\n\n.p-splitter-horizontal.p-splitter-resizing {\n    cursor: col-resize;\n    user-select: none;\n}\n\n.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {\n    height: 24px;\n    width: 100%;\n}\n\n.p-splitter-horizontal > .p-splitter-gutter {\n    cursor: col-resize;\n}\n\n.p-splitter-vertical.p-splitter-resizing {\n    cursor: row-resize;\n    user-select: none;\n}\n\n.p-splitter-vertical > .p-splitter-gutter {\n    cursor: row-resize;\n}\n\n.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {\n    width: 24px;\n    height: 100%;\n}\n",{name:"splitter",manual:!0});function l(e){return p(e)||h(e)||u(e)||a()}function a(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function u(e,t){if(e){if("string"==typeof e)return c(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?c(e,t):void 0}}function h(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function p(e){if(Array.isArray(e))return c(e)}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var d={name:"Splitter",extends:{name:"BaseSplitter",extends:s.default,props:{layout:{type:String,default:"horizontal"},gutterSize:{type:Number,default:4},stateKey:{type:String,default:null},stateStorage:{type:String,default:"session"},step:{type:Number,default:5}},css:{classes:{root:function(e){return["p-splitter p-component","p-splitter-"+e.props.layout]},gutter:"p-splitter-gutter",gutterHandler:"p-splitter-gutter-handle"},inlineStyles:{root:function(e){return[{display:"flex","flex-wrap":"nowrap"},"vertical"===e.props.layout?{"flex-direction":"column"}:""]}},loadStyle:o.load},provide:function(){return{$parentInstance:this}}},emits:["resizestart","resizeend"],dragging:!1,mouseMoveListener:null,mouseUpListener:null,touchMoveListener:null,touchEndListener:null,size:null,gutterElement:null,startPos:null,prevPanelElement:null,nextPanelElement:null,nextPanelSize:null,prevPanelSize:null,panelSizes:null,prevPanelIndex:null,timer:null,data:function(){return{prevSize:null}},mounted:function(){var e=this;if(this.panels&&this.panels.length){var t=!1;if(this.isStateful()&&(t=this.restoreState()),!t){var n=l(this.$el.children).filter((function(e){return"splitterpanel"===e.getAttribute("data-pc-name")})),i=[];this.panels.map((function(t,r){var s=(t.props&&t.props.size?t.props.size:null)||100/e.panels.length;i[r]=s,n[r].style.flexBasis="calc("+s+"% - "+(e.panels.length-1)*e.gutterSize+"px)"})),this.panelSizes=i,this.prevSize=parseFloat(i[0]).toFixed(4)}}},beforeUnmount:function(){this.clear(),this.unbindMouseListeners()},methods:{isSplitterPanel:function(e){return"SplitterPanel"===e.type.name},onResizeStart:function(t,n,i){this.gutterElement=t.currentTarget||t.target.parentElement,this.size=this.horizontal?e.DomHandler.getWidth(this.$el):e.DomHandler.getHeight(this.$el),i||(this.dragging=!0,this.startPos="horizontal"===this.layout?t.pageX||t.changedTouches[0].pageX:t.pageY||t.changedTouches[0].pageY),this.prevPanelElement=this.gutterElement.previousElementSibling,this.nextPanelElement=this.gutterElement.nextElementSibling,i?(this.prevPanelSize=this.horizontal?e.DomHandler.getOuterWidth(this.prevPanelElement,!0):e.DomHandler.getOuterHeight(this.prevPanelElement,!0),this.nextPanelSize=this.horizontal?e.DomHandler.getOuterWidth(this.nextPanelElement,!0):e.DomHandler.getOuterHeight(this.nextPanelElement,!0)):(this.prevPanelSize=100*(this.horizontal?e.DomHandler.getOuterWidth(this.prevPanelElement,!0):e.DomHandler.getOuterHeight(this.prevPanelElement,!0))/this.size,this.nextPanelSize=100*(this.horizontal?e.DomHandler.getOuterWidth(this.nextPanelElement,!0):e.DomHandler.getOuterHeight(this.nextPanelElement,!0))/this.size),this.prevPanelIndex=n,this.$emit("resizestart",{originalEvent:t,sizes:this.panelSizes}),this.$refs.gutter[n].setAttribute("data-p-gutter-resizing",!0),this.$el.setAttribute("data-p-resizing",!0)},onResize:function(e,t,n){var i,r,s;n?this.horizontal?(r=100*(this.prevPanelSize+t)/this.size,s=100*(this.nextPanelSize-t)/this.size):(r=100*(this.prevPanelSize-t)/this.size,s=100*(this.nextPanelSize+t)/this.size):(r=this.prevPanelSize+(i=this.horizontal?100*e.pageX/this.size-100*this.startPos/this.size:100*e.pageY/this.size-100*this.startPos/this.size),s=this.nextPanelSize-i),this.prevSize=parseFloat(r).toFixed(4),this.validateResize(r,s)&&(this.prevPanelElement.style.flexBasis="calc("+r+"% - "+(this.panels.length-1)*this.gutterSize+"px)",this.nextPanelElement.style.flexBasis="calc("+s+"% - "+(this.panels.length-1)*this.gutterSize+"px)",this.panelSizes[this.prevPanelIndex]=r,this.panelSizes[this.prevPanelIndex+1]=s)},onResizeEnd:function(e){this.isStateful()&&this.saveState(),this.$emit("resizeend",{originalEvent:e,sizes:this.panelSizes}),this.$refs.gutter.forEach((function(e){return e.setAttribute("data-p-gutter-resizing",!1)})),this.$el.setAttribute("data-p-resizing",!1),this.clear()},repeat:function(e,t,n){this.onResizeStart(e,t,!0),this.onResize(e,n,!0)},setTimer:function(e,t,n){var i=this;this.clearTimer(),this.timer=setTimeout((function(){i.repeat(e,t,n)}),40)},clearTimer:function(){this.timer&&clearTimeout(this.timer)},onGutterKeyUp:function(){this.clearTimer(),this.onResizeEnd()},onGutterKeyDown:function(e,t){switch(e.code){case"ArrowLeft":"horizontal"===this.layout&&this.setTimer(e,t,-1*this.step),e.preventDefault();break;case"ArrowRight":"horizontal"===this.layout&&this.setTimer(e,t,this.step),e.preventDefault();break;case"ArrowDown":"vertical"===this.layout&&this.setTimer(e,t,-1*this.step),e.preventDefault();break;case"ArrowUp":"vertical"===this.layout&&this.setTimer(e,t,this.step),e.preventDefault()}},onGutterMouseDown:function(e,t){this.onResizeStart(e,t),this.bindMouseListeners()},onGutterTouchStart:function(e,t){this.onResizeStart(e,t),this.bindTouchListeners(),e.preventDefault()},onGutterTouchMove:function(e){this.onResize(e),e.preventDefault()},onGutterTouchEnd:function(e){this.onResizeEnd(e),this.unbindTouchListeners(),e.preventDefault()},bindMouseListeners:function(){var e=this;this.mouseMoveListener||(this.mouseMoveListener=function(t){return e.onResize(t)},document.addEventListener("mousemove",this.mouseMoveListener)),this.mouseUpListener||(this.mouseUpListener=function(t){e.onResizeEnd(t),e.unbindMouseListeners()},document.addEventListener("mouseup",this.mouseUpListener))},bindTouchListeners:function(){var e=this;this.touchMoveListener||(this.touchMoveListener=function(t){return e.onResize(t.changedTouches[0])},document.addEventListener("touchmove",this.touchMoveListener)),this.touchEndListener||(this.touchEndListener=function(t){e.resizeEnd(t),e.unbindTouchListeners()},document.addEventListener("touchend",this.touchEndListener))},validateResize:function(t,n){var i=e.ObjectUtils.getVNodeProp(this.panels[0],"minSize");if(this.panels[0].props&&i&&i>t)return!1;var r=e.ObjectUtils.getVNodeProp(this.panels[1],"minSize");return!(this.panels[1].props&&r&&r>n)},unbindMouseListeners:function(){this.mouseMoveListener&&(document.removeEventListener("mousemove",this.mouseMoveListener),this.mouseMoveListener=null),this.mouseUpListener&&(document.removeEventListener("mouseup",this.mouseUpListener),this.mouseUpListener=null)},unbindTouchListeners:function(){this.touchMoveListener&&(document.removeEventListener("touchmove",this.touchMoveListener),this.touchMoveListener=null),this.touchEndListener&&(document.removeEventListener("touchend",this.touchEndListener),this.touchEndListener=null)},clear:function(){this.dragging=!1,this.size=null,this.startPos=null,this.prevPanelElement=null,this.nextPanelElement=null,this.prevPanelSize=null,this.nextPanelSize=null,this.gutterElement=null,this.prevPanelIndex=null},isStateful:function(){return null!=this.stateKey},getStorage:function(){switch(this.stateStorage){case"local":return window.localStorage;case"session":return window.sessionStorage;default:throw new Error(this.stateStorage+' is not a valid value for the state storage, supported values are "local" and "session".')}},saveState:function(){this.getStorage().setItem(this.stateKey,JSON.stringify(this.panelSizes))},restoreState:function(){var e=this,t=this.getStorage().getItem(this.stateKey);return!!t&&(this.panelSizes=JSON.parse(t),l(this.$el.children).filter((function(e){return"splitterpanel"===e.getAttribute("data-pc-name")})).forEach((function(t,n){t.style.flexBasis="calc("+e.panelSizes[n]+"% - "+(e.panels.length-1)*e.gutterSize+"px)"})),!0)}},computed:{panels:function(){var e=this,t=[];return this.$slots.default().forEach((function(n){e.isSplitterPanel(n)?t.push(n):n.children instanceof Array&&n.children.forEach((function(n){e.isSplitterPanel(n)&&t.push(n)}))})),t},gutterStyle:function(){return this.horizontal?{width:this.gutterSize+"px"}:{height:this.gutterSize+"px"}},horizontal:function(){return"horizontal"===this.layout}}},m=["onMousedown","onTouchstart","onTouchmove","onTouchend"],g=["aria-orientation","aria-valuenow","onKeydown"];return d.render=function(e,t,n,r,s,o){return i.openBlock(),i.createElementBlock("div",i.mergeProps({class:e.cx("root"),style:e.sx("root"),"data-p-resizing":!1},e.ptm("root"),{"data-pc-name":"splitter"}),[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(o.panels,(function(n,r){return i.openBlock(),i.createElementBlock(i.Fragment,{key:r},[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(n),{tabindex:"-1"})),r!==o.panels.length-1?(i.openBlock(),i.createElementBlock("div",i.mergeProps({key:0,ref_for:!0,ref:"gutter",class:e.cx("gutter"),role:"separator",tabindex:"-1",onMousedown:function(e){return o.onGutterMouseDown(e,r)},onTouchstart:function(e){return o.onGutterTouchStart(e,r)},onTouchmove:function(e){return o.onGutterTouchMove(e,r)},onTouchend:function(e){return o.onGutterTouchEnd(e,r)},"data-p-gutter-resizing":!1},e.ptm("gutter")),[i.createElementVNode("div",i.mergeProps({class:e.cx("gutterHandler"),tabindex:"0",style:[o.gutterStyle],"aria-orientation":e.layout,"aria-valuenow":s.prevSize,onKeyup:t[0]||(t[0]=function(){return o.onGutterKeyUp&&o.onGutterKeyUp.apply(o,arguments)}),onKeydown:function(e){return o.onGutterKeyDown(e,r)}},e.ptm("gutterHandler")),null,16,g)],16,m)):i.createCommentVNode("",!0)],64)})),128))],16)},d}(primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);
+this.primevue=this.primevue||{},this.primevue.splitter=function(e,t,n,i){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=r(t),o=n.useStyle("\n.p-splitter {\n    display: flex;\n    flex-wrap: nowrap;\n}\n\n.p-splitter-vertical {\n    flex-direction: column;\n}\n\n.p-splitter-gutter {\n    flex-grow: 0;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: col-resize;\n}\n\n.p-splitter-horizontal.p-splitter-resizing {\n    cursor: col-resize;\n    user-select: none;\n}\n\n.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {\n    height: 24px;\n    width: 100%;\n}\n\n.p-splitter-horizontal > .p-splitter-gutter {\n    cursor: col-resize;\n}\n\n.p-splitter-vertical.p-splitter-resizing {\n    cursor: row-resize;\n    user-select: none;\n}\n\n.p-splitter-vertical > .p-splitter-gutter {\n    cursor: row-resize;\n}\n\n.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {\n    width: 24px;\n    height: 100%;\n}\n",{name:"splitter",manual:!0});function l(e){return p(e)||h(e)||u(e)||a()}function a(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function u(e,t){if(e){if("string"==typeof e)return c(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?c(e,t):void 0}}function h(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function p(e){if(Array.isArray(e))return c(e)}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var d={name:"Splitter",extends:{name:"BaseSplitter",extends:s.default,props:{layout:{type:String,default:"horizontal"},gutterSize:{type:Number,default:4},stateKey:{type:String,default:null},stateStorage:{type:String,default:"session"},step:{type:Number,default:5}},css:{classes:{root:function(e){return["p-splitter p-component","p-splitter-"+e.props.layout]},gutter:"p-splitter-gutter",gutterHandler:"p-splitter-gutter-handle"},inlineStyles:{root:function(e){return[{display:"flex","flex-wrap":"nowrap"},"vertical"===e.props.layout?{"flex-direction":"column"}:""]}},loadStyle:o.load},provide:function(){return{$parentInstance:this}}},emits:["resizestart","resizeend"],dragging:!1,mouseMoveListener:null,mouseUpListener:null,touchMoveListener:null,touchEndListener:null,size:null,gutterElement:null,startPos:null,prevPanelElement:null,nextPanelElement:null,nextPanelSize:null,prevPanelSize:null,panelSizes:null,prevPanelIndex:null,timer:null,data:function(){return{prevSize:null}},mounted:function(){var e=this;if(this.panels&&this.panels.length){var t=!1;if(this.isStateful()&&(t=this.restoreState()),!t){var n=l(this.$el.children).filter((function(e){return"splitterpanel"===e.getAttribute("data-pc-name")})),i=[];this.panels.map((function(t,r){var s=(t.props&&t.props.size?t.props.size:null)||100/e.panels.length;i[r]=s,n[r].style.flexBasis="calc("+s+"% - "+(e.panels.length-1)*e.gutterSize+"px)"})),this.panelSizes=i,this.prevSize=parseFloat(i[0]).toFixed(4)}}},beforeUnmount:function(){this.clear(),this.unbindMouseListeners()},methods:{getPTOptions:function(){var t;return{context:{nested:"splitterpanel"===e.DomHandler.getAttribute(null===(t=this.$parentInstance)||void 0===t?void 0:t.$el,"data-pc-name")}}},isSplitterPanel:function(e){return"SplitterPanel"===e.type.name},onResizeStart:function(t,n,i){this.gutterElement=t.currentTarget||t.target.parentElement,this.size=this.horizontal?e.DomHandler.getWidth(this.$el):e.DomHandler.getHeight(this.$el),i||(this.dragging=!0,this.startPos="horizontal"===this.layout?t.pageX||t.changedTouches[0].pageX:t.pageY||t.changedTouches[0].pageY),this.prevPanelElement=this.gutterElement.previousElementSibling,this.nextPanelElement=this.gutterElement.nextElementSibling,i?(this.prevPanelSize=this.horizontal?e.DomHandler.getOuterWidth(this.prevPanelElement,!0):e.DomHandler.getOuterHeight(this.prevPanelElement,!0),this.nextPanelSize=this.horizontal?e.DomHandler.getOuterWidth(this.nextPanelElement,!0):e.DomHandler.getOuterHeight(this.nextPanelElement,!0)):(this.prevPanelSize=100*(this.horizontal?e.DomHandler.getOuterWidth(this.prevPanelElement,!0):e.DomHandler.getOuterHeight(this.prevPanelElement,!0))/this.size,this.nextPanelSize=100*(this.horizontal?e.DomHandler.getOuterWidth(this.nextPanelElement,!0):e.DomHandler.getOuterHeight(this.nextPanelElement,!0))/this.size),this.prevPanelIndex=n,this.$emit("resizestart",{originalEvent:t,sizes:this.panelSizes}),this.$refs.gutter[n].setAttribute("data-p-gutter-resizing",!0),this.$el.setAttribute("data-p-resizing",!0)},onResize:function(e,t,n){var i,r,s;n?this.horizontal?(r=100*(this.prevPanelSize+t)/this.size,s=100*(this.nextPanelSize-t)/this.size):(r=100*(this.prevPanelSize-t)/this.size,s=100*(this.nextPanelSize+t)/this.size):(r=this.prevPanelSize+(i=this.horizontal?100*e.pageX/this.size-100*this.startPos/this.size:100*e.pageY/this.size-100*this.startPos/this.size),s=this.nextPanelSize-i),this.prevSize=parseFloat(r).toFixed(4),this.validateResize(r,s)&&(this.prevPanelElement.style.flexBasis="calc("+r+"% - "+(this.panels.length-1)*this.gutterSize+"px)",this.nextPanelElement.style.flexBasis="calc("+s+"% - "+(this.panels.length-1)*this.gutterSize+"px)",this.panelSizes[this.prevPanelIndex]=r,this.panelSizes[this.prevPanelIndex+1]=s)},onResizeEnd:function(e){this.isStateful()&&this.saveState(),this.$emit("resizeend",{originalEvent:e,sizes:this.panelSizes}),this.$refs.gutter.forEach((function(e){return e.setAttribute("data-p-gutter-resizing",!1)})),this.$el.setAttribute("data-p-resizing",!1),this.clear()},repeat:function(e,t,n){this.onResizeStart(e,t,!0),this.onResize(e,n,!0)},setTimer:function(e,t,n){var i=this;this.clearTimer(),this.timer=setTimeout((function(){i.repeat(e,t,n)}),40)},clearTimer:function(){this.timer&&clearTimeout(this.timer)},onGutterKeyUp:function(){this.clearTimer(),this.onResizeEnd()},onGutterKeyDown:function(e,t){switch(e.code){case"ArrowLeft":"horizontal"===this.layout&&this.setTimer(e,t,-1*this.step),e.preventDefault();break;case"ArrowRight":"horizontal"===this.layout&&this.setTimer(e,t,this.step),e.preventDefault();break;case"ArrowDown":"vertical"===this.layout&&this.setTimer(e,t,-1*this.step),e.preventDefault();break;case"ArrowUp":"vertical"===this.layout&&this.setTimer(e,t,this.step),e.preventDefault()}},onGutterMouseDown:function(e,t){this.onResizeStart(e,t),this.bindMouseListeners()},onGutterTouchStart:function(e,t){this.onResizeStart(e,t),this.bindTouchListeners(),e.preventDefault()},onGutterTouchMove:function(e){this.onResize(e),e.preventDefault()},onGutterTouchEnd:function(e){this.onResizeEnd(e),this.unbindTouchListeners(),e.preventDefault()},bindMouseListeners:function(){var e=this;this.mouseMoveListener||(this.mouseMoveListener=function(t){return e.onResize(t)},document.addEventListener("mousemove",this.mouseMoveListener)),this.mouseUpListener||(this.mouseUpListener=function(t){e.onResizeEnd(t),e.unbindMouseListeners()},document.addEventListener("mouseup",this.mouseUpListener))},bindTouchListeners:function(){var e=this;this.touchMoveListener||(this.touchMoveListener=function(t){return e.onResize(t.changedTouches[0])},document.addEventListener("touchmove",this.touchMoveListener)),this.touchEndListener||(this.touchEndListener=function(t){e.resizeEnd(t),e.unbindTouchListeners()},document.addEventListener("touchend",this.touchEndListener))},validateResize:function(t,n){var i=e.ObjectUtils.getVNodeProp(this.panels[0],"minSize");if(this.panels[0].props&&i&&i>t)return!1;var r=e.ObjectUtils.getVNodeProp(this.panels[1],"minSize");return!(this.panels[1].props&&r&&r>n)},unbindMouseListeners:function(){this.mouseMoveListener&&(document.removeEventListener("mousemove",this.mouseMoveListener),this.mouseMoveListener=null),this.mouseUpListener&&(document.removeEventListener("mouseup",this.mouseUpListener),this.mouseUpListener=null)},unbindTouchListeners:function(){this.touchMoveListener&&(document.removeEventListener("touchmove",this.touchMoveListener),this.touchMoveListener=null),this.touchEndListener&&(document.removeEventListener("touchend",this.touchEndListener),this.touchEndListener=null)},clear:function(){this.dragging=!1,this.size=null,this.startPos=null,this.prevPanelElement=null,this.nextPanelElement=null,this.prevPanelSize=null,this.nextPanelSize=null,this.gutterElement=null,this.prevPanelIndex=null},isStateful:function(){return null!=this.stateKey},getStorage:function(){switch(this.stateStorage){case"local":return window.localStorage;case"session":return window.sessionStorage;default:throw new Error(this.stateStorage+' is not a valid value for the state storage, supported values are "local" and "session".')}},saveState:function(){this.getStorage().setItem(this.stateKey,JSON.stringify(this.panelSizes))},restoreState:function(){var e=this,t=this.getStorage().getItem(this.stateKey);return!!t&&(this.panelSizes=JSON.parse(t),l(this.$el.children).filter((function(e){return"splitterpanel"===e.getAttribute("data-pc-name")})).forEach((function(t,n){t.style.flexBasis="calc("+e.panelSizes[n]+"% - "+(e.panels.length-1)*e.gutterSize+"px)"})),!0)}},computed:{panels:function(){var e=this,t=[];return this.$slots.default().forEach((function(n){e.isSplitterPanel(n)?t.push(n):n.children instanceof Array&&n.children.forEach((function(n){e.isSplitterPanel(n)&&t.push(n)}))})),t},gutterStyle:function(){return this.horizontal?{width:this.gutterSize+"px"}:{height:this.gutterSize+"px"}},horizontal:function(){return"horizontal"===this.layout}}},m=["onMousedown","onTouchstart","onTouchmove","onTouchend"],g=["aria-orientation","aria-valuenow","onKeydown"];return d.render=function(e,t,n,r,s,o){return i.openBlock(),i.createElementBlock("div",i.mergeProps({class:e.cx("root"),style:e.sx("root"),"data-p-resizing":!1},e.ptm("root",o.getPTOptions()),{"data-pc-name":"splitter"}),[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(o.panels,(function(n,r){return i.openBlock(),i.createElementBlock(i.Fragment,{key:r},[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(n),{tabindex:"-1"})),r!==o.panels.length-1?(i.openBlock(),i.createElementBlock("div",i.mergeProps({key:0,ref_for:!0,ref:"gutter",class:e.cx("gutter"),role:"separator",tabindex:"-1",onMousedown:function(e){return o.onGutterMouseDown(e,r)},onTouchstart:function(e){return o.onGutterTouchStart(e,r)},onTouchmove:function(e){return o.onGutterTouchMove(e,r)},onTouchend:function(e){return o.onGutterTouchEnd(e,r)},"data-p-gutter-resizing":!1},e.ptm("gutter")),[i.createElementVNode("div",i.mergeProps({class:e.cx("gutterHandler"),tabindex:"0",style:[o.gutterStyle],"aria-orientation":e.layout,"aria-valuenow":s.prevSize,onKeyup:t[0]||(t[0]=function(){return o.onGutterKeyUp&&o.onGutterKeyUp.apply(o,arguments)}),onKeydown:function(e){return o.onGutterKeyDown(e,r)}},e.ptm("gutterHandler")),null,16,g)],16,m)):i.createCommentVNode("",!0)],64)})),128))],16)},d}(primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);

package/splitterpanel/SplitterPanel.d.ts

@@ -19,6 +19,7 @@ export declare type SplitterPanelPassThroughOptionType = SplitterPanelPassThroug
 export interface SplitterPanelPassThroughMethodOptions {
     instance: any;
     props: SplitterPanelProps;
+    context: SplitterPanelContext;
 }
 
 /**
@@ -27,11 +28,11 @@ export interface SplitterPanelPassThroughMethodOptions {
  */
 export interface SplitterPanelPassThroughOptions {
     /**
-     * Uses to pass attributes to the root's DOM element.
+     * Used to pass attributes to the root's DOM element.
      */
     root?: SplitterPanelPassThroughOptionType;
     /**
-     * Uses to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
@@ -44,6 +45,16 @@ export interface SplitterPanelPassThroughAttributes {
     [key: string]: any;
 }
 
+/**
+ * Defines options in SplitterPanel component.
+ */
+export interface SplitterPanelContext {
+    /**
+     * Current nested state of the panel.
+     */
+    nested?: boolean;
+}
+
 /**
  * Defines valid properties in SplitterPanel component.
  */
@@ -57,7 +68,7 @@ export interface SplitterPanelProps {
      */
     minSize?: number | undefined;
     /**
-     * Uses to pass attributes to DOM elements inside the component.
+     * Used to pass attributes to DOM elements inside the component.
      * @type {SplitterPanelPassThroughOptions}
      */
     pt?: SplitterPanelPassThroughOptions;

package/splitterpanel/SplitterPanel.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="cx('root')" v-bind="ptm('root')" data-pc-name="splitterpanel">
+    <div ref="container" :class="cx('root')" v-bind="ptm('root', getPTOptions)" data-pc-name="splitterpanel">
         <slot></slot>
     </div>
 </template>
@@ -15,6 +15,13 @@ export default {
             return this.$slots.default().some((child) => {
                 return child.type.name === 'Splitter';
             });
+        },
+        getPTOptions() {
+            return {
+                context: {
+                    nested: this.isNested
+                }
+            };
         }
     }
 };

package/splitterpanel/splitterpanel.cjs.js

@@ -54,6 +54,13 @@ var script = {
       return this.$slots["default"]().some(function (child) {
         return child.type.name === 'Splitter';
       });
+    },
+    getPTOptions: function getPTOptions() {
+      return {
+        context: {
+          nested: this.isNested
+        }
+      };
     }
   }
 };
@@ -62,7 +69,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
     ref: "container",
     "class": _ctx.cx('root')
-  }, _ctx.ptm('root'), {
+  }, _ctx.ptm('root', $options.getPTOptions), {
     "data-pc-name": "splitterpanel"
   }), [vue.renderSlot(_ctx.$slots, "default")], 16);
 }

package/splitterpanel/splitterpanel.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/basecomponent"),t=require("primevue/usestyle"),n=require("vue");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=r(e),s=t.useStyle("\n.p-splitter-panel {\n    flex-grow: 1;\n}\n\n.p-splitter-panel-nested {\n    display: flex;\n}\n\n.p-splitter-panel .p-splitter {\n    flex-grow: 1;\n    border: 0 none;\n}\n",{name:"splitterpanel",manual:!0}),p={name:"SplitterPanel",extends:{name:"BaseSplitterPanel",extends:l.default,props:{size:{type:Number,default:null},minSize:{type:Number,default:null}},css:{classes:{root:function(e){return["p-splitter-panel",{"p-splitter-panel-nested":e.instance.isNested}]}},loadStyle:s.load},provide:function(){return{$parentInstance:this}}},computed:{isNested:function(){return this.$slots.default().some((function(e){return"Splitter"===e.type.name}))}}};p.render=function(e,t,r,l,s,p){return n.openBlock(),n.createElementBlock("div",n.mergeProps({ref:"container",class:e.cx("root")},e.ptm("root"),{"data-pc-name":"splitterpanel"}),[n.renderSlot(e.$slots,"default")],16)},module.exports=p;
+"use strict";var e=require("primevue/basecomponent"),t=require("primevue/usestyle"),n=require("vue");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=r(e),s=t.useStyle("\n.p-splitter-panel {\n    flex-grow: 1;\n}\n\n.p-splitter-panel-nested {\n    display: flex;\n}\n\n.p-splitter-panel .p-splitter {\n    flex-grow: 1;\n    border: 0 none;\n}\n",{name:"splitterpanel",manual:!0}),p={name:"SplitterPanel",extends:{name:"BaseSplitterPanel",extends:l.default,props:{size:{type:Number,default:null},minSize:{type:Number,default:null}},css:{classes:{root:function(e){return["p-splitter-panel",{"p-splitter-panel-nested":e.instance.isNested}]}},loadStyle:s.load},provide:function(){return{$parentInstance:this}}},computed:{isNested:function(){return this.$slots.default().some((function(e){return"Splitter"===e.type.name}))},getPTOptions:function(){return{context:{nested:this.isNested}}}}};p.render=function(e,t,r,l,s,p){return n.openBlock(),n.createElementBlock("div",n.mergeProps({ref:"container",class:e.cx("root")},e.ptm("root",p.getPTOptions),{"data-pc-name":"splitterpanel"}),[n.renderSlot(e.$slots,"default")],16)},module.exports=p;

package/splitterpanel/splitterpanel.esm.js

@@ -48,6 +48,13 @@ var script = {
       return this.$slots["default"]().some(function (child) {
         return child.type.name === 'Splitter';
       });
+    },
+    getPTOptions: function getPTOptions() {
+      return {
+        context: {
+          nested: this.isNested
+        }
+      };
     }
   }
 };
@@ -56,7 +63,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", mergeProps({
     ref: "container",
     "class": _ctx.cx('root')
-  }, _ctx.ptm('root'), {
+  }, _ctx.ptm('root', $options.getPTOptions), {
     "data-pc-name": "splitterpanel"
   }), [renderSlot(_ctx.$slots, "default")], 16);
 }

package/splitterpanel/splitterpanel.esm.min.js

@@ -1 +1 @@
-import e from"primevue/basecomponent";import{useStyle as t}from"primevue/usestyle";import{openBlock as n,createElementBlock as r,mergeProps as l,renderSlot as p}from"vue";var s=t("\n.p-splitter-panel {\n    flex-grow: 1;\n}\n\n.p-splitter-panel-nested {\n    display: flex;\n}\n\n.p-splitter-panel .p-splitter {\n    flex-grow: 1;\n    border: 0 none;\n}\n",{name:"splitterpanel",manual:!0}),a={name:"SplitterPanel",extends:{name:"BaseSplitterPanel",extends:e,props:{size:{type:Number,default:null},minSize:{type:Number,default:null}},css:{classes:{root:function(e){return["p-splitter-panel",{"p-splitter-panel-nested":e.instance.isNested}]}},loadStyle:s.load},provide:function(){return{$parentInstance:this}}},computed:{isNested:function(){return this.$slots.default().some((function(e){return"Splitter"===e.type.name}))}}};a.render=function(e,t,s,a,i,o){return n(),r("div",l({ref:"container",class:e.cx("root")},e.ptm("root"),{"data-pc-name":"splitterpanel"}),[p(e.$slots,"default")],16)};export{a as default};
+import e from"primevue/basecomponent";import{useStyle as t}from"primevue/usestyle";import{openBlock as n,createElementBlock as r,mergeProps as s,renderSlot as p}from"vue";var l=t("\n.p-splitter-panel {\n    flex-grow: 1;\n}\n\n.p-splitter-panel-nested {\n    display: flex;\n}\n\n.p-splitter-panel .p-splitter {\n    flex-grow: 1;\n    border: 0 none;\n}\n",{name:"splitterpanel",manual:!0}),i={name:"SplitterPanel",extends:{name:"BaseSplitterPanel",extends:e,props:{size:{type:Number,default:null},minSize:{type:Number,default:null}},css:{classes:{root:function(e){return["p-splitter-panel",{"p-splitter-panel-nested":e.instance.isNested}]}},loadStyle:l.load},provide:function(){return{$parentInstance:this}}},computed:{isNested:function(){return this.$slots.default().some((function(e){return"Splitter"===e.type.name}))},getPTOptions:function(){return{context:{nested:this.isNested}}}}};i.render=function(e,t,l,i,o,a){return n(),r("div",s({ref:"container",class:e.cx("root")},e.ptm("root",a.getPTOptions),{"data-pc-name":"splitterpanel"}),[p(e.$slots,"default")],16)};export{i as default};

package/splitterpanel/splitterpanel.js

@@ -52,6 +52,13 @@ this.primevue.splitterpanel = (function (BaseComponent, usestyle, vue) {
           return this.$slots["default"]().some(function (child) {
             return child.type.name === 'Splitter';
           });
+        },
+        getPTOptions: function getPTOptions() {
+          return {
+            context: {
+              nested: this.isNested
+            }
+          };
         }
       }
     };
@@ -60,7 +67,7 @@ this.primevue.splitterpanel = (function (BaseComponent, usestyle, vue) {
       return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         ref: "container",
         "class": _ctx.cx('root')
-      }, _ctx.ptm('root'), {
+      }, _ctx.ptm('root', $options.getPTOptions), {
         "data-pc-name": "splitterpanel"
       }), [vue.renderSlot(_ctx.$slots, "default")], 16);
     }

package/splitterpanel/splitterpanel.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.splitterpanel=function(e,t,n){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=r(e),s=t.useStyle("\n.p-splitter-panel {\n    flex-grow: 1;\n}\n\n.p-splitter-panel-nested {\n    display: flex;\n}\n\n.p-splitter-panel .p-splitter {\n    flex-grow: 1;\n    border: 0 none;\n}\n",{name:"splitterpanel",manual:!0}),p={name:"SplitterPanel",extends:{name:"BaseSplitterPanel",extends:l.default,props:{size:{type:Number,default:null},minSize:{type:Number,default:null}},css:{classes:{root:function(e){return["p-splitter-panel",{"p-splitter-panel-nested":e.instance.isNested}]}},loadStyle:s.load},provide:function(){return{$parentInstance:this}}},computed:{isNested:function(){return this.$slots.default().some((function(e){return"Splitter"===e.type.name}))}}};return p.render=function(e,t,r,l,s,p){return n.openBlock(),n.createElementBlock("div",n.mergeProps({ref:"container",class:e.cx("root")},e.ptm("root"),{"data-pc-name":"splitterpanel"}),[n.renderSlot(e.$slots,"default")],16)},p}(primevue.basecomponent,primevue.usestyle,Vue);
+this.primevue=this.primevue||{},this.primevue.splitterpanel=function(e,t,n){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=r(e),l=t.useStyle("\n.p-splitter-panel {\n    flex-grow: 1;\n}\n\n.p-splitter-panel-nested {\n    display: flex;\n}\n\n.p-splitter-panel .p-splitter {\n    flex-grow: 1;\n    border: 0 none;\n}\n",{name:"splitterpanel",manual:!0}),p={name:"SplitterPanel",extends:{name:"BaseSplitterPanel",extends:s.default,props:{size:{type:Number,default:null},minSize:{type:Number,default:null}},css:{classes:{root:function(e){return["p-splitter-panel",{"p-splitter-panel-nested":e.instance.isNested}]}},loadStyle:l.load},provide:function(){return{$parentInstance:this}}},computed:{isNested:function(){return this.$slots.default().some((function(e){return"Splitter"===e.type.name}))},getPTOptions:function(){return{context:{nested:this.isNested}}}}};return p.render=function(e,t,r,s,l,p){return n.openBlock(),n.createElementBlock("div",n.mergeProps({ref:"container",class:e.cx("root")},e.ptm("root",p.getPTOptions),{"data-pc-name":"splitterpanel"}),[n.renderSlot(e.$slots,"default")],16)},p}(primevue.basecomponent,primevue.usestyle,Vue);

package/steps/BaseSteps.vue

@@ -57,7 +57,7 @@ const styles = `
 `;
 
 const classes = {
-    root: ({ instance }) => ['p-steps p-component', { 'p-readonly': instance.readonly }],
+    root: ({ props }) => ['p-steps p-component', { 'p-readonly': props.readonly }],
     menu: 'p-steps-list',
     menuitem: ({ instance, item }) => [
         'p-steps-item',

package/steps/Steps.d.ts

@@ -20,6 +20,7 @@ export declare type StepsPassThroughOptionType = StepsPassThroughAttributes | ((
 export interface StepsPassThroughMethodOptions {
     instance: any;
     props: StepsProps;
+    context: StepsContext;
 }
 
 /**
@@ -28,31 +29,31 @@ export interface StepsPassThroughMethodOptions {
  */
 export interface StepsPassThroughOptions {
     /**
-     * Uses to pass attributes to the root's DOM element.
+     * Used to pass attributes to the root's DOM element.
      */
     root?: StepsPassThroughOptionType;
     /**
-     * Uses to pass attributes to the list's DOM element.
+     * Used to pass attributes to the list's DOM element.
      */
     menu?: StepsPassThroughOptionType;
     /**
-     * Uses to pass attributes to the list item's DOM element.
+     * Used to pass attributes to the list item's DOM element.
      */
     menuitem?: StepsPassThroughOptionType;
     /**
-     * Uses to pass attributes to the action's DOM element.
+     * Used to pass attributes to the action's DOM element.
      */
     action?: StepsPassThroughOptionType;
     /**
-     * Uses to pass attributes to the step's DOM element.
+     * Used to pass attributes to the step's DOM element.
      */
     step?: StepsPassThroughOptionType;
     /**
-     * Uses to pass attributes to the label's DOM element.
+     * Used to pass attributes to the label's DOM element.
      */
     label?: StepsPassThroughOptionType;
     /**
-     * Uses to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
@@ -65,6 +66,30 @@ export interface StepsPassThroughAttributes {
     [key: string]: any;
 }
 
+/**
+ * Defines current options in Steps component.
+ */
+export interface StepsContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
+    /**
+     * Index of the menuitem.
+     */
+    index: number;
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current disabled state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Defines valid properties in Steps component.
  */
@@ -88,7 +113,7 @@ export interface StepsProps {
      */
     exact?: boolean | undefined;
     /**
-     * Uses to pass attributes to DOM elements inside the component.
+     * Used to pass attributes to DOM elements inside the component.
      * @type {StepsPassThroughOptions}
      */
     pt?: StepsPassThroughOptions;