primevue 3.29.2 → 3.30.0

package/splitter/splitter.esm.js

@@ -1,435 +1,453 @@
-import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
 import { openBlock, createElementBlock, mergeProps, Fragment, renderList, createBlock, resolveDynamicComponent, createElementVNode, createCommentVNode } from 'vue';
 
-var script = {
-    name: 'Splitter',
-    extends: BaseComponent,
-    emits: ['resizestart', 'resizeend'],
-    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
-        }
+var styles = "\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";
+var classes = {
+  root: function root(_ref) {
+    var props = _ref.props;
+    return ['p-splitter p-component', 'p-splitter-' + props.layout];
+  },
+  gutter: 'p-splitter-gutter',
+  gutterHandler: 'p-splitter-gutter-handle'
+};
+var inlineStyles = {
+  root: function root(_ref2) {
+    var props = _ref2.props;
+    return [{
+      display: 'flex',
+      'flex-wrap': 'nowrap'
+    }, props.layout === 'vertical' ? {
+      'flex-direction': 'column'
+    } : ''];
+  }
+};
+var _useStyle = useStyle(styles, {
+    name: 'splitter',
+    manual: true
+  }),
+  loadStyle = _useStyle.load;
+var script$1 = {
+  name: 'BaseSplitter',
+  "extends": BaseComponent,
+  props: {
+    layout: {
+      type: String,
+      "default": 'horizontal'
     },
-    dragging: false,
-    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() {
-        return {
-            prevSize: null
-        };
+    gutterSize: {
+      type: Number,
+      "default": 4
     },
-    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) => DomHandler.hasClass(child, 'p-splitter-panel'));
-                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)';
-                });
+    stateKey: {
+      type: String,
+      "default": null
+    },
+    stateStorage: {
+      type: String,
+      "default": 'session'
+    },
+    step: {
+      type: Number,
+      "default": 5
+    }
+  },
+  css: {
+    classes: classes,
+    inlineStyles: inlineStyles,
+    loadStyle: loadStyle
+  },
+  provide: function provide() {
+    return {
+      $parentInstance: this
+    };
+  }
+};
 
-                this.panelSizes = _panelSizes;
-                this.prevSize = parseFloat(_panelSizes[0]).toFixed(4);
-            }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { 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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+var script = {
+  name: 'Splitter',
+  "extends": script$1,
+  emits: ['resizestart', 'resizeend'],
+  dragging: false,
+  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 data() {
+    return {
+      prevSize: null
+    };
+  },
+  mounted: function mounted() {
+    var _this = this;
+    if (this.panels && this.panels.length) {
+      var initialized = false;
+      if (this.isStateful()) {
+        initialized = this.restoreState();
+      }
+      if (!initialized) {
+        var children = _toConsumableArray(this.$el.children).filter(function (child) {
+          return child.getAttribute('data-pc-name') === 'splitterpanel';
+        });
+        var _panelSizes = [];
+        this.panels.map(function (panel, i) {
+          var panelInitialSize = panel.props && panel.props.size ? panel.props.size : null;
+          var 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);
+      }
+    }
+  },
+  beforeUnmount: function beforeUnmount() {
+    this.clear();
+    this.unbindMouseListeners();
+  },
+  methods: {
+    isSplitterPanel: function isSplitterPanel(child) {
+      return child.type.name === 'SplitterPanel';
+    },
+    onResizeStart: function onResizeStart(event, index, isKeyDown) {
+      this.gutterElement = event.currentTarget || event.target.parentElement;
+      this.size = this.horizontal ? DomHandler.getWidth(this.$el) : DomHandler.getHeight(this.$el);
+      if (!isKeyDown) {
+        this.dragging = true;
+        this.startPos = this.layout === 'horizontal' ? event.pageX || event.changedTouches[0].pageX : event.pageY || event.changedTouches[0].pageY;
+      }
+      this.prevPanelElement = this.gutterElement.previousElementSibling;
+      this.nextPanelElement = this.gutterElement.nextElementSibling;
+      if (isKeyDown) {
+        this.prevPanelSize = this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true) : DomHandler.getOuterHeight(this.prevPanelElement, true);
+        this.nextPanelSize = this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true) : DomHandler.getOuterHeight(this.nextPanelElement, true);
+      } else {
+        this.prevPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true) : DomHandler.getOuterHeight(this.prevPanelElement, true)) / this.size;
+        this.nextPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true) : DomHandler.getOuterHeight(this.nextPanelElement, true)) / this.size;
+      }
+      this.prevPanelIndex = index;
+      this.$emit('resizestart', {
+        originalEvent: event,
+        sizes: this.panelSizes
+      });
+      this.$refs.gutter[index].setAttribute('data-p-gutter-resizing', true);
+      this.$el.setAttribute('data-p-resizing', true);
+    },
+    onResize: function onResize(event, step, isKeyDown) {
+      var newPos, newPrevPanelSize, newNextPanelSize;
+      if (isKeyDown) {
+        if (this.horizontal) {
+          newPrevPanelSize = 100 * (this.prevPanelSize + step) / this.size;
+          newNextPanelSize = 100 * (this.nextPanelSize - step) / this.size;
+        } else {
+          newPrevPanelSize = 100 * (this.prevPanelSize - step) / this.size;
+          newNextPanelSize = 100 * (this.nextPanelSize + step) / this.size;
         }
+      } else {
+        if (this.horizontal) newPos = event.pageX * 100 / this.size - this.startPos * 100 / this.size;else newPos = event.pageY * 100 / this.size - this.startPos * 100 / this.size;
+        newPrevPanelSize = this.prevPanelSize + newPos;
+        newNextPanelSize = this.nextPanelSize - newPos;
+      }
+      this.prevSize = parseFloat(newPrevPanelSize).toFixed(4);
+      if (this.validateResize(newPrevPanelSize, newNextPanelSize)) {
+        this.prevPanelElement.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
+        this.nextPanelElement.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
+        this.panelSizes[this.prevPanelIndex] = newPrevPanelSize;
+        this.panelSizes[this.prevPanelIndex + 1] = newNextPanelSize;
+      }
     },
-    beforeUnmount() {
-        this.clear();
-        this.unbindMouseListeners();
+    onResizeEnd: function onResizeEnd(event) {
+      if (this.isStateful()) {
+        this.saveState();
+      }
+      this.$emit('resizeend', {
+        originalEvent: event,
+        sizes: this.panelSizes
+      });
+      this.$refs.gutter.forEach(function (gutter) {
+        return gutter.setAttribute('data-p-gutter-resizing', false);
+      });
+      this.$el.setAttribute('data-p-resizing', false);
+      this.clear();
     },
-    methods: {
-        isSplitterPanel(child) {
-            return child.type.name === 'SplitterPanel';
-        },
-        onResizeStart(event, index, isKeyDown) {
-            this.gutterElement = event.currentTarget || event.target.parentElement;
-            this.size = this.horizontal ? DomHandler.getWidth(this.$el) : DomHandler.getHeight(this.$el);
-
-            if (!isKeyDown) {
-                this.dragging = true;
-                this.startPos = this.layout === 'horizontal' ? event.pageX || event.changedTouches[0].pageX : event.pageY || event.changedTouches[0].pageY;
-            }
-
-            this.prevPanelElement = this.gutterElement.previousElementSibling;
-            this.nextPanelElement = this.gutterElement.nextElementSibling;
-
-            if (isKeyDown) {
-                this.prevPanelSize = this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true) : DomHandler.getOuterHeight(this.prevPanelElement, true);
-                this.nextPanelSize = this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true) : DomHandler.getOuterHeight(this.nextPanelElement, true);
-            } else {
-                this.prevPanelSize = (100 * (this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true) : DomHandler.getOuterHeight(this.prevPanelElement, true))) / this.size;
-                this.nextPanelSize = (100 * (this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true) : DomHandler.getOuterHeight(this.nextPanelElement, true))) / this.size;
-            }
-
-            this.prevPanelIndex = index;
-            this.$emit('resizestart', { originalEvent: event, sizes: this.panelSizes });
-            DomHandler.addClass(this.gutterElement, 'p-splitter-gutter-resizing');
-            DomHandler.addClass(this.$el, 'p-splitter-resizing');
-        },
-        onResize(event, step, isKeyDown) {
-            let newPos, newPrevPanelSize, newNextPanelSize;
-
-            if (isKeyDown) {
-                if (this.horizontal) {
-                    newPrevPanelSize = (100 * (this.prevPanelSize + step)) / this.size;
-                    newNextPanelSize = (100 * (this.nextPanelSize - step)) / this.size;
-                } else {
-                    newPrevPanelSize = (100 * (this.prevPanelSize - step)) / this.size;
-                    newNextPanelSize = (100 * (this.nextPanelSize + step)) / this.size;
-                }
-            } else {
-                if (this.horizontal) newPos = (event.pageX * 100) / this.size - (this.startPos * 100) / this.size;
-                else newPos = (event.pageY * 100) / this.size - (this.startPos * 100) / this.size;
-
-                newPrevPanelSize = this.prevPanelSize + newPos;
-                newNextPanelSize = this.nextPanelSize - newPos;
-            }
-
-            this.prevSize = parseFloat(newPrevPanelSize).toFixed(4);
-
-            if (this.validateResize(newPrevPanelSize, newNextPanelSize)) {
-                this.prevPanelElement.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
-                this.nextPanelElement.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
-                this.panelSizes[this.prevPanelIndex] = newPrevPanelSize;
-                this.panelSizes[this.prevPanelIndex + 1] = newNextPanelSize;
-            }
-        },
-        onResizeEnd(event) {
-            if (this.isStateful()) {
-                this.saveState();
-            }
-
-            this.$emit('resizeend', { originalEvent: event, sizes: this.panelSizes });
-            DomHandler.removeClass(this.gutterElement, 'p-splitter-gutter-resizing');
-            DomHandler.removeClass(this.$el, 'p-splitter-resizing');
-            this.clear();
-        },
-        repeat(event, index, step) {
-            this.onResizeStart(event, index, true);
-            this.onResize(event, step, true);
-        },
-        setTimer(event, index, step) {
-            this.clearTimer();
-            this.timer = setTimeout(() => {
-                this.repeat(event, index, step);
-            }, 40);
-        },
-        clearTimer() {
-            if (this.timer) {
-                clearTimeout(this.timer);
-            }
-        },
-        onGutterKeyUp() {
-            this.clearTimer();
-            this.onResizeEnd();
-        },
-        onGutterKeyDown(event, index) {
-            switch (event.code) {
-                case 'ArrowLeft': {
-                    if (this.layout === 'horizontal') {
-                        this.setTimer(event, index, this.step * -1);
-                    }
-
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'ArrowRight': {
-                    if (this.layout === 'horizontal') {
-                        this.setTimer(event, index, this.step);
-                    }
-
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'ArrowDown': {
-                    if (this.layout === 'vertical') {
-                        this.setTimer(event, index, this.step * -1);
-                    }
-
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'ArrowUp': {
-                    if (this.layout === 'vertical') {
-                        this.setTimer(event, index, this.step);
-                    }
-
-                    event.preventDefault();
-                    break;
-                }
+    repeat: function repeat(event, index, step) {
+      this.onResizeStart(event, index, true);
+      this.onResize(event, step, true);
+    },
+    setTimer: function setTimer(event, index, step) {
+      var _this2 = this;
+      this.clearTimer();
+      this.timer = setTimeout(function () {
+        _this2.repeat(event, index, step);
+      }, 40);
+    },
+    clearTimer: function clearTimer() {
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+    },
+    onGutterKeyUp: function onGutterKeyUp() {
+      this.clearTimer();
+      this.onResizeEnd();
+    },
+    onGutterKeyDown: function onGutterKeyDown(event, index) {
+      switch (event.code) {
+        case 'ArrowLeft':
+          {
+            if (this.layout === 'horizontal') {
+              this.setTimer(event, index, this.step * -1);
             }
-        },
-        onGutterMouseDown(event, index) {
-            this.onResizeStart(event, index);
-            this.bindMouseListeners();
-        },
-        onGutterTouchStart(event, index) {
-            this.onResizeStart(event, index);
-            this.bindTouchListeners();
-            event.preventDefault();
-        },
-        onGutterTouchMove(event) {
-            this.onResize(event);
             event.preventDefault();
-        },
-        onGutterTouchEnd(event) {
-            this.onResizeEnd(event);
-            this.unbindTouchListeners();
-            event.preventDefault();
-        },
-        bindMouseListeners() {
-            if (!this.mouseMoveListener) {
-                this.mouseMoveListener = (event) => this.onResize(event);
-                document.addEventListener('mousemove', this.mouseMoveListener);
-            }
-
-            if (!this.mouseUpListener) {
-                this.mouseUpListener = (event) => {
-                    this.onResizeEnd(event);
-                    this.unbindMouseListeners();
-                };
-
-                document.addEventListener('mouseup', this.mouseUpListener);
+            break;
+          }
+        case 'ArrowRight':
+          {
+            if (this.layout === 'horizontal') {
+              this.setTimer(event, index, this.step);
             }
-        },
-        bindTouchListeners() {
-            if (!this.touchMoveListener) {
-                this.touchMoveListener = (event) => this.onResize(event.changedTouches[0]);
-                document.addEventListener('touchmove', this.touchMoveListener);
-            }
-
-            if (!this.touchEndListener) {
-                this.touchEndListener = (event) => {
-                    this.resizeEnd(event);
-                    this.unbindTouchListeners();
-                };
-
-                document.addEventListener('touchend', this.touchEndListener);
-            }
-        },
-        validateResize(newPrevPanelSize, newNextPanelSize) {
-            let prevPanelMinSize = ObjectUtils.getVNodeProp(this.panels[0], 'minSize');
-
-            if (this.panels[0].props && prevPanelMinSize && prevPanelMinSize > newPrevPanelSize) {
-                return false;
-            }
-
-            let newPanelMinSize = ObjectUtils.getVNodeProp(this.panels[1], 'minSize');
-
-            if (this.panels[1].props && newPanelMinSize && newPanelMinSize > newNextPanelSize) {
-                return false;
-            }
-
-            return true;
-        },
-        unbindMouseListeners() {
-            if (this.mouseMoveListener) {
-                document.removeEventListener('mousemove', this.mouseMoveListener);
-                this.mouseMoveListener = null;
-            }
-
-            if (this.mouseUpListener) {
-                document.removeEventListener('mouseup', this.mouseUpListener);
-                this.mouseUpListener = null;
-            }
-        },
-        unbindTouchListeners() {
-            if (this.touchMoveListener) {
-                document.removeEventListener('touchmove', this.touchMoveListener);
-                this.touchMoveListener = null;
-            }
-
-            if (this.touchEndListener) {
-                document.removeEventListener('touchend', this.touchEndListener);
-                this.touchEndListener = null;
+            event.preventDefault();
+            break;
+          }
+        case 'ArrowDown':
+          {
+            if (this.layout === 'vertical') {
+              this.setTimer(event, index, this.step * -1);
             }
-        },
-        clear() {
-            this.dragging = false;
-            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() {
-            return this.stateKey != null;
-        },
-        getStorage() {
-            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".');
+            event.preventDefault();
+            break;
+          }
+        case 'ArrowUp':
+          {
+            if (this.layout === 'vertical') {
+              this.setTimer(event, index, this.step);
             }
-        },
-        saveState() {
-            this.getStorage().setItem(this.stateKey, JSON.stringify(this.panelSizes));
-        },
-        restoreState() {
-            const storage = this.getStorage();
-            const stateString = storage.getItem(this.stateKey);
-
-            if (stateString) {
-                this.panelSizes = JSON.parse(stateString);
-                let children = [...this.$el.children].filter((child) => DomHandler.hasClass(child, 'p-splitter-panel'));
-
-                children.forEach((child, i) => {
-                    child.style.flexBasis = 'calc(' + this.panelSizes[i] + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
-                });
-
-                return true;
+            event.preventDefault();
+            break;
+          }
+      }
+    },
+    onGutterMouseDown: function onGutterMouseDown(event, index) {
+      this.onResizeStart(event, index);
+      this.bindMouseListeners();
+    },
+    onGutterTouchStart: function onGutterTouchStart(event, index) {
+      this.onResizeStart(event, index);
+      this.bindTouchListeners();
+      event.preventDefault();
+    },
+    onGutterTouchMove: function onGutterTouchMove(event) {
+      this.onResize(event);
+      event.preventDefault();
+    },
+    onGutterTouchEnd: function onGutterTouchEnd(event) {
+      this.onResizeEnd(event);
+      this.unbindTouchListeners();
+      event.preventDefault();
+    },
+    bindMouseListeners: function bindMouseListeners() {
+      var _this3 = this;
+      if (!this.mouseMoveListener) {
+        this.mouseMoveListener = function (event) {
+          return _this3.onResize(event);
+        };
+        document.addEventListener('mousemove', this.mouseMoveListener);
+      }
+      if (!this.mouseUpListener) {
+        this.mouseUpListener = function (event) {
+          _this3.onResizeEnd(event);
+          _this3.unbindMouseListeners();
+        };
+        document.addEventListener('mouseup', this.mouseUpListener);
+      }
+    },
+    bindTouchListeners: function bindTouchListeners() {
+      var _this4 = this;
+      if (!this.touchMoveListener) {
+        this.touchMoveListener = function (event) {
+          return _this4.onResize(event.changedTouches[0]);
+        };
+        document.addEventListener('touchmove', this.touchMoveListener);
+      }
+      if (!this.touchEndListener) {
+        this.touchEndListener = function (event) {
+          _this4.resizeEnd(event);
+          _this4.unbindTouchListeners();
+        };
+        document.addEventListener('touchend', this.touchEndListener);
+      }
+    },
+    validateResize: function validateResize(newPrevPanelSize, newNextPanelSize) {
+      var prevPanelMinSize = ObjectUtils.getVNodeProp(this.panels[0], 'minSize');
+      if (this.panels[0].props && prevPanelMinSize && prevPanelMinSize > newPrevPanelSize) {
+        return false;
+      }
+      var newPanelMinSize = ObjectUtils.getVNodeProp(this.panels[1], 'minSize');
+      if (this.panels[1].props && newPanelMinSize && newPanelMinSize > newNextPanelSize) {
+        return false;
+      }
+      return true;
+    },
+    unbindMouseListeners: function unbindMouseListeners() {
+      if (this.mouseMoveListener) {
+        document.removeEventListener('mousemove', this.mouseMoveListener);
+        this.mouseMoveListener = null;
+      }
+      if (this.mouseUpListener) {
+        document.removeEventListener('mouseup', this.mouseUpListener);
+        this.mouseUpListener = null;
+      }
+    },
+    unbindTouchListeners: function unbindTouchListeners() {
+      if (this.touchMoveListener) {
+        document.removeEventListener('touchmove', this.touchMoveListener);
+        this.touchMoveListener = null;
+      }
+      if (this.touchEndListener) {
+        document.removeEventListener('touchend', this.touchEndListener);
+        this.touchEndListener = null;
+      }
+    },
+    clear: function clear() {
+      this.dragging = false;
+      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 isStateful() {
+      return this.stateKey != null;
+    },
+    getStorage: function getStorage() {
+      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 saveState() {
+      this.getStorage().setItem(this.stateKey, JSON.stringify(this.panelSizes));
+    },
+    restoreState: function restoreState() {
+      var _this5 = this;
+      var storage = this.getStorage();
+      var stateString = storage.getItem(this.stateKey);
+      if (stateString) {
+        this.panelSizes = JSON.parse(stateString);
+        var children = _toConsumableArray(this.$el.children).filter(function (child) {
+          return child.getAttribute('data-pc-name') === 'splitterpanel';
+        });
+        children.forEach(function (child, i) {
+          child.style.flexBasis = 'calc(' + _this5.panelSizes[i] + '% - ' + (_this5.panels.length - 1) * _this5.gutterSize + 'px)';
+        });
+        return true;
+      }
+      return false;
+    }
+  },
+  computed: {
+    panels: function panels() {
+      var _this6 = this;
+      var panels = [];
+      this.$slots["default"]().forEach(function (child) {
+        if (_this6.isSplitterPanel(child)) {
+          panels.push(child);
+        } else if (child.children instanceof Array) {
+          child.children.forEach(function (nestedChild) {
+            if (_this6.isSplitterPanel(nestedChild)) {
+              panels.push(nestedChild);
             }
-
-            return false;
+          });
         }
+      });
+      return panels;
     },
-    computed: {
-        containerClass() {
-            return ['p-splitter p-component', 'p-splitter-' + this.layout];
-        },
-        panels() {
-            const panels = [];
-
-            this.$slots.default().forEach((child) => {
-                if (this.isSplitterPanel(child)) {
-                    panels.push(child);
-                } else if (child.children instanceof Array) {
-                    child.children.forEach((nestedChild) => {
-                        if (this.isSplitterPanel(nestedChild)) {
-                            panels.push(nestedChild);
-                        }
-                    });
-                }
-            });
-
-            return panels;
-        },
-        gutterStyle() {
-            if (this.horizontal) return { width: this.gutterSize + 'px' };
-            else return { height: this.gutterSize + 'px' };
-        },
-        horizontal() {
-            return this.layout === 'horizontal';
-        }
+    gutterStyle: function gutterStyle() {
+      if (this.horizontal) return {
+        width: this.gutterSize + 'px'
+      };else return {
+        height: this.gutterSize + 'px'
+      };
+    },
+    horizontal: function horizontal() {
+      return this.layout === 'horizontal';
     }
+  }
 };
 
-const _hoisted_1 = ["onMousedown", "onTouchstart", "onTouchmove", "onTouchend"];
-const _hoisted_2 = ["aria-orientation", "aria-valuenow", "onKeydown"];
-
+var _hoisted_1 = ["onMousedown", "onTouchstart", "onTouchmove", "onTouchend"];
+var _hoisted_2 = ["aria-orientation", "aria-valuenow", "onKeydown"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", mergeProps({ class: $options.containerClass }, _ctx.ptm('root')), [
-    (openBlock(true), createElementBlock(Fragment, null, renderList($options.panels, (panel, i) => {
-      return (openBlock(), createElementBlock(Fragment, { key: i }, [
-        (openBlock(), createBlock(resolveDynamicComponent(panel), { tabindex: "-1" })),
-        (i !== $options.panels.length - 1)
-          ? (openBlock(), createElementBlock("div", mergeProps({
-              key: 0,
-              class: "p-splitter-gutter",
-              role: "separator",
-              tabindex: "-1",
-              onMousedown: $event => ($options.onGutterMouseDown($event, i)),
-              onTouchstart: $event => ($options.onGutterTouchStart($event, i)),
-              onTouchmove: $event => ($options.onGutterTouchMove($event, i)),
-              onTouchend: $event => ($options.onGutterTouchEnd($event, i))
-            }, _ctx.ptm('gutter')), [
-              createElementVNode("div", mergeProps({
-                class: "p-splitter-gutter-handle",
-                tabindex: "0",
-                style: $options.gutterStyle,
-                "aria-orientation": $props.layout,
-                "aria-valuenow": $data.prevSize,
-                onKeyup: _cache[0] || (_cache[0] = (...args) => ($options.onGutterKeyUp && $options.onGutterKeyUp(...args))),
-                onKeydown: $event => ($options.onGutterKeyDown($event, i))
-              }, _ctx.ptm('gutterhandler')), null, 16, _hoisted_2)
-            ], 16, _hoisted_1))
-          : createCommentVNode("", true)
-      ], 64))
-    }), 128))
-  ], 16))
-}
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
+  return openBlock(), createElementBlock("div", mergeProps({
+    "class": _ctx.cx('root'),
+    style: _ctx.sx('root'),
+    "data-p-resizing": false
+  }, _ctx.ptm('root'), {
+    "data-pc-name": "splitter"
+  }), [(openBlock(true), createElementBlock(Fragment, null, renderList($options.panels, function (panel, i) {
+    return openBlock(), createElementBlock(Fragment, {
+      key: i
+    }, [(openBlock(), createBlock(resolveDynamicComponent(panel), {
+      tabindex: "-1"
+    })), i !== $options.panels.length - 1 ? (openBlock(), createElementBlock("div", mergeProps({
+      key: 0,
+      ref_for: true,
+      ref: "gutter",
+      "class": _ctx.cx('gutter'),
+      role: "separator",
+      tabindex: "-1",
+      onMousedown: function onMousedown($event) {
+        return $options.onGutterMouseDown($event, i);
+      },
+      onTouchstart: function onTouchstart($event) {
+        return $options.onGutterTouchStart($event, i);
+      },
+      onTouchmove: function onTouchmove($event) {
+        return $options.onGutterTouchMove($event, i);
+      },
+      onTouchend: function onTouchend($event) {
+        return $options.onGutterTouchEnd($event, i);
+      },
+      "data-p-gutter-resizing": false
+    }, _ctx.ptm('gutter')), [createElementVNode("div", mergeProps({
+      "class": _ctx.cx('gutterHandler'),
+      tabindex: "0",
+      style: [$options.gutterStyle],
+      "aria-orientation": _ctx.layout,
+      "aria-valuenow": $data.prevSize,
+      onKeyup: _cache[0] || (_cache[0] = function () {
+        return $options.onGutterKeyUp && $options.onGutterKeyUp.apply($options, arguments);
+      }),
+      onKeydown: function onKeydown($event) {
+        return $options.onGutterKeyDown($event, i);
+      }
+    }, _ctx.ptm('gutterHandler')), null, 16, _hoisted_2)], 16, _hoisted_1)) : createCommentVNode("", true)], 64);
+  }), 128))], 16);
 }
 
-var css_248z = "\n.p-splitter {\n    display: flex;\n    flex-wrap: nowrap;\n}\n.p-splitter-vertical {\n    flex-direction: column;\n}\n.p-splitter-panel {\n    flex-grow: 1;\n}\n.p-splitter-panel-nested {\n    display: flex;\n}\n.p-splitter-panel .p-splitter {\n    flex-grow: 1;\n    border: 0 none;\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.p-splitter-horizontal.p-splitter-resizing {\n    cursor: col-resize;\n    user-select: none;\n}\n.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {\n    height: 24px;\n    width: 100%;\n}\n.p-splitter-horizontal > .p-splitter-gutter {\n    cursor: col-resize;\n}\n.p-splitter-vertical.p-splitter-resizing {\n    cursor: row-resize;\n    user-select: none;\n}\n.p-splitter-vertical > .p-splitter-gutter {\n    cursor: row-resize;\n}\n.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {\n    width: 24px;\n    height: 100%;\n}\n";
-styleInject(css_248z);
-
 script.render = render;
 
 export { script as default };