primevue
Version:
PrimeVue is a premium UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, wh
652 lines (646 loc) • 27.3 kB
JavaScript
import { cn } from '@primeuix/utils';
import { isRTL } from '@primeuix/utils/dom';
import { isArray, isNotEmpty } from '@primeuix/utils/object';
import { getVNodeProp } from '@primevue/core/utils';
import BaseComponent from '@primevue/core/basecomponent';
import SplitterStyle from 'primevue/splitter/style';
import { openBlock, createElementBlock, mergeProps, Fragment, renderList, createBlock, resolveDynamicComponent, createElementVNode, createCommentVNode } from 'vue';
var script$1 = {
name: 'BaseSplitter',
"extends": BaseComponent,
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
},
disabled: {
type: Boolean,
"default": false
},
sizes: {
type: Array,
"default": null
}
},
style: SplitterStyle,
provide: function provide() {
return {
$pcSplitter: this,
$parentInstance: this
};
}
};
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
var script = {
name: 'Splitter',
"extends": script$1,
inheritAttrs: false,
emits: ['resizestart', 'resizeend', 'resize', 'collapse', 'update:sizes'],
pointerMoveListener: null,
pointerUpListener: null,
size: null,
gutterMidpoint: null,
initialSizes: [],
initialCollapsed: [],
reportedCollapsed: [],
initialTotal: 100,
timer: null,
data: function data() {
return {
panelSizes: [],
panelRegistry: [],
resizing: false,
prevPanelIndex: null
};
},
mounted: function mounted() {
this.initializePanels();
},
watch: {
panelSizeConfig: function panelSizeConfig() {
this.initializePanels();
},
sizes: {
deep: true,
handler: function handler(newSizes, oldSizes) {
if (this.resizing) return;
if (!newSizes || !this.panels.length) return;
if (oldSizes && oldSizes.length === newSizes.length && oldSizes.every(function (v, i) {
return v === newSizes[i];
})) return;
if (this.panelSizes.length === newSizes.length && this.panelSizes.every(function (v, i) {
return v === newSizes[i];
})) return;
for (var i = 0; i < this.panelRegistry.length; i++) {
var info = this.panelRegistry[i];
if (info !== null && info !== void 0 && info.collapsible) {
var _info$collapsedSize;
info.collapsed = newSizes[i] <= ((_info$collapsedSize = info.collapsedSize) !== null && _info$collapsedSize !== void 0 ? _info$collapsedSize : 0);
}
}
this.panelSizes = _toConsumableArray(newSizes);
this.applyPanelStyles();
}
}
},
beforeUnmount: function beforeUnmount() {
this.clearTimer();
this.unbindPointerListeners();
},
methods: {
isSplitterPanel: function isSplitterPanel(child) {
return child.type.name === 'SplitterPanel';
},
getPanelSize: function getPanelSize(panel) {
var size = panel.props && isNotEmpty(panel.props.size) ? panel.props.size : null;
return size !== null && size !== void 0 ? size : 100 / this.panels.length;
},
buildPanelRegistry: function buildPanelRegistry() {
var _this$panelRegistry;
var prev = (_this$panelRegistry = this.panelRegistry) !== null && _this$panelRegistry !== void 0 ? _this$panelRegistry : [];
this.panelRegistry = this.panels.map(function (panel, i) {
var _existing$collapsed;
var existing = prev[i];
var minSize = getVNodeProp(panel, 'minSize');
var maxSize = getVNodeProp(panel, 'maxSize');
var collapsible = getVNodeProp(panel, 'collapsible');
var collapsedSize = getVNodeProp(panel, 'collapsedSize');
return {
index: i,
minSize: minSize !== null && minSize !== void 0 ? minSize : 0,
maxSize: maxSize !== null && maxSize !== void 0 ? maxSize : 100,
collapsible: collapsible !== null && collapsible !== void 0 ? collapsible : false,
collapsedSize: collapsedSize !== null && collapsedSize !== void 0 ? collapsedSize : 0,
collapsed: (_existing$collapsed = existing === null || existing === void 0 ? void 0 : existing.collapsed) !== null && _existing$collapsed !== void 0 ? _existing$collapsed : false
};
});
},
initializePanels: function initializePanels() {
var _this = this;
if (!this.panels || !this.panels.length) return;
this.buildPanelRegistry();
var initialized = false;
if (this.isStateful()) {
initialized = this.restoreState();
}
if (!initialized) {
var _this$sizes;
var sourceSizes = (_this$sizes = this.sizes) !== null && _this$sizes !== void 0 ? _this$sizes : null;
var _panelSizes = [];
this.panels.forEach(function (panel, i) {
var _sourceSizes$i;
_panelSizes[i] = (_sourceSizes$i = sourceSizes === null || sourceSizes === void 0 ? void 0 : sourceSizes[i]) !== null && _sourceSizes$i !== void 0 ? _sourceSizes$i : _this.getPanelSize(panel);
});
for (var i = 0; i < this.panelRegistry.length; i++) {
var _info$collapsedSize2;
var info = this.panelRegistry[i];
if (info !== null && info !== void 0 && info.collapsible && _panelSizes[i] <= ((_info$collapsedSize2 = info.collapsedSize) !== null && _info$collapsedSize2 !== void 0 ? _info$collapsedSize2 : 0)) {
info.collapsed = true;
}
}
this.panelSizes = _panelSizes;
}
this.$nextTick(function () {
return _this.applyPanelStyles();
});
},
getPanelChildren: function getPanelChildren() {
return _toConsumableArray(this.$el.children).filter(function (child) {
return child.getAttribute('data-pc-name') === 'splitterpanel';
});
},
applyPanelStyles: function applyPanelStyles() {
var _this2 = this;
var children = this.getPanelChildren();
this.panels.forEach(function (_, i) {
var _this2$panelSizes$i;
var el = children[i];
if (!el) return;
var flexGrow = (_this2$panelSizes$i = _this2.panelSizes[i]) !== null && _this2$panelSizes$i !== void 0 ? _this2$panelSizes$i : 100 / _this2.panels.length;
el.style.flex = "".concat(flexGrow, " 1 0px");
el.style.overflow = 'hidden';
if (_this2.horizontal) {
el.style.minWidth = '0';
el.style.minHeight = '';
} else {
el.style.minHeight = '0';
el.style.minWidth = '';
}
if (!el.id) el.id = _this2.panelIds[i];
el.setAttribute('data-index', i);
el.setAttribute('data-orientation', _this2.layout);
var info = _this2.panelRegistry[i];
if (info !== null && info !== void 0 && info.collapsed) el.setAttribute('data-collapsed', '');else el.removeAttribute('data-collapsed');
if (_this2.resizing) el.setAttribute('data-resizing', '');else el.removeAttribute('data-resizing');
});
},
getPanelMinSize: function getPanelMinSize(index) {
var _this$panelRegistry$i, _this$panelRegistry2;
return (_this$panelRegistry$i = (_this$panelRegistry2 = this.panelRegistry) === null || _this$panelRegistry2 === void 0 || (_this$panelRegistry2 = _this$panelRegistry2[index]) === null || _this$panelRegistry2 === void 0 ? void 0 : _this$panelRegistry2.minSize) !== null && _this$panelRegistry$i !== void 0 ? _this$panelRegistry$i : 0;
},
ariaControlsFor: function ariaControlsFor(index) {
var ids = [this.panelIds[index], this.panelIds[index + 1]].filter(Boolean);
return ids.length ? ids.join(' ') : undefined;
},
getPanelMaxSize: function getPanelMaxSize(index) {
var _this$panelRegistry$i2, _this$panelRegistry3;
return (_this$panelRegistry$i2 = (_this$panelRegistry3 = this.panelRegistry) === null || _this$panelRegistry3 === void 0 || (_this$panelRegistry3 = _this$panelRegistry3[index]) === null || _this$panelRegistry3 === void 0 ? void 0 : _this$panelRegistry3.maxSize) !== null && _this$panelRegistry$i2 !== void 0 ? _this$panelRegistry$i2 : 100;
},
isGutterDisabled: function isGutterDisabled() {
return this.disabled;
},
validatePanelSize: function validatePanelSize(rawSize, info, min, isKeyDown) {
var _info$collapsedSize3;
if (!(info !== null && info !== void 0 && info.collapsible)) {
return {
size: Math.max(rawSize, min),
collapsed: false
};
}
var collapsedSize = (_info$collapsedSize3 = info.collapsedSize) !== null && _info$collapsedSize3 !== void 0 ? _info$collapsedSize3 : 0;
if (rawSize >= min) {
return {
size: rawSize,
collapsed: false
};
}
if (isKeyDown) {
return {
size: collapsedSize,
collapsed: true
};
}
var halfwayPoint = (collapsedSize + min) / 2;
if (rawSize <= halfwayPoint) {
return {
size: collapsedSize,
collapsed: true
};
}
return {
size: min,
collapsed: false
};
},
getTotalPanelPx: function getTotalPanelPx() {
var children = this.getPanelChildren();
var total = 0;
var _iterator = _createForOfIteratorHelper(children),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var el = _step.value;
var rect = el.getBoundingClientRect();
total += this.horizontal ? rect.width : rect.height;
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return total;
},
onResizeStart: function onResizeStart(event, index, isKeyDown) {
this.size = this.getTotalPanelPx();
if (!isKeyDown) {
this.gutterMidpoint = this.horizontal ? event.clientX : event.clientY;
}
this.resizing = true;
this.prevPanelIndex = index;
this.initialSizes = _toConsumableArray(this.panelSizes);
this.initialCollapsed = this.panelRegistry.map(function (info) {
return info.collapsed;
});
this.reportedCollapsed = this.panelRegistry.map(function (info) {
return info.collapsed;
});
this.initialTotal = this.initialSizes.reduce(function (a, b) {
return a + b;
}, 0) || 100;
this.applyPanelStyles();
if (!isKeyDown) {
this.$emit('resizestart', {
originalEvent: event,
sizes: _toConsumableArray(this.initialSizes)
});
}
},
onResize: function onResize(event, step, isKeyDown) {
if (this.size === null || this.prevPanelIndex === null || this.initialSizes.length === 0) {
return;
}
var gutterIdx = this.prevPanelIndex;
var total = this.initialTotal;
var delta;
if (isKeyDown) {
delta = total * step / this.size;
} else {
if (this.gutterMidpoint === null) return;
if (this.horizontal) {
if (isRTL(this.$el)) {
delta = (this.gutterMidpoint - event.clientX) * total / this.size;
} else {
delta = (event.clientX - this.gutterMidpoint) * total / this.size;
}
} else {
delta = (event.clientY - this.gutterMidpoint) * total / this.size;
}
}
var newSizes = _toConsumableArray(this.initialSizes);
for (var i = 0; i < this.panelRegistry.length; i++) {
if (this.initialCollapsed[i] !== undefined) {
this.panelRegistry[i].collapsed = this.initialCollapsed[i];
}
}
if (delta > 0) {
this.distribute(newSizes, gutterIdx, delta, isKeyDown, 'forward');
} else if (delta < 0) {
this.distribute(newSizes, gutterIdx + 1, -delta, isKeyDown, 'backward');
}
for (var _i = 0; _i < this.panelRegistry.length; _i++) {
var info = this.panelRegistry[_i];
if (info.collapsed !== this.reportedCollapsed[_i]) {
this.reportedCollapsed[_i] = info.collapsed;
this.$emit('collapse', {
index: _i,
collapsed: info.collapsed,
sizes: _toConsumableArray(newSizes)
});
}
}
this.panelSizes = _toConsumableArray(newSizes);
this.applyPanelStyles();
this.$emit('update:sizes', _toConsumableArray(newSizes));
this.$emit('resize', {
originalEvent: event,
sizes: _toConsumableArray(newSizes)
});
},
distribute: function distribute(newSizes, growIdx, requested, isKeyDown, direction) {
var growInfo = this.panelRegistry[growIdx];
var max = this.getPanelMaxSize(growIdx);
var toGrow = Math.min(requested, Math.max(0, max - newSizes[growIdx]));
if (growInfo !== null && growInfo !== void 0 && growInfo.collapsible && growInfo.collapsed) {
var gapSize = this.getPanelMinSize(growIdx) - growInfo.collapsedSize;
var halfwayDelta = gapSize / 2;
if (isKeyDown) {
toGrow = Math.max(toGrow, gapSize);
toGrow = Math.min(toGrow, Math.max(0, max - newSizes[growIdx]));
} else if (toGrow < halfwayDelta) {
toGrow = 0;
} else {
toGrow = Math.max(toGrow, gapSize);
toGrow = Math.min(toGrow, Math.max(0, max - newSizes[growIdx]));
}
}
var shrunk = 0;
var range = direction === 'forward' ? this.range(growIdx + 1, newSizes.length, 1) : this.range(growIdx - 1, -1, -1);
var _iterator2 = _createForOfIteratorHelper(range),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var _info$collapsedSize4;
var i = _step2.value;
if (shrunk >= toGrow) break;
var info = this.panelRegistry[i];
var min = this.getPanelMinSize(i);
if (info !== null && info !== void 0 && info.collapsed) continue;
var effectiveMin = info !== null && info !== void 0 && info.collapsible ? (_info$collapsedSize4 = info.collapsedSize) !== null && _info$collapsedSize4 !== void 0 ? _info$collapsedSize4 : 0 : min;
var available = Math.max(0, newSizes[i] - effectiveMin);
var amount = Math.min(toGrow - shrunk, available);
var rawSize = newSizes[i] - amount;
var validated = this.validatePanelSize(rawSize, info, min, isKeyDown);
var actualShrunk = newSizes[i] - validated.size;
newSizes[i] = validated.size;
shrunk += actualShrunk;
if (info) info.collapsed = validated.collapsed;
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
newSizes[growIdx] += shrunk;
if (growInfo !== null && growInfo !== void 0 && growInfo.collapsible && growInfo.collapsed && newSizes[growIdx] >= this.getPanelMinSize(growIdx)) {
growInfo.collapsed = false;
}
},
range: function range(start, end, step) {
var out = [];
for (var i = start; step > 0 ? i < end : i > end; i += step) out.push(i);
return out;
},
onResizeEnd: function onResizeEnd(event) {
if (this.isStateful()) {
this.saveState();
}
this.resizing = false;
this.$emit('resizeend', {
originalEvent: event,
sizes: _toConsumableArray(this.panelSizes)
});
this.applyPanelStyles();
this.clear();
},
repeat: function repeat(event, index, step) {
this.onResizeStart(event, index, true);
this.onResize(event, step, true);
},
setTimer: function setTimer(event, index, step) {
var _this3 = this;
if (!this.timer) {
this.$emit('resizestart', {
originalEvent: event,
sizes: _toConsumableArray(this.panelSizes)
});
this.repeat(event, index, step);
this.timer = setInterval(function () {
_this3.repeat(event, index, step);
}, 40);
}
},
clearTimer: function clearTimer() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
onGutterKeyUp: function onGutterKeyUp() {
if (!this.timer) return;
this.clearTimer();
this.onResizeEnd();
},
onGutterKeyDown: function onGutterKeyDown(event, index) {
if (this.disabled) return;
switch (event.code) {
case 'ArrowLeft':
if (this.horizontal) this.setTimer(event, index, this.step * -1);
event.preventDefault();
break;
case 'ArrowRight':
if (this.horizontal) this.setTimer(event, index, this.step);
event.preventDefault();
break;
case 'ArrowDown':
if (!this.horizontal) this.setTimer(event, index, this.step);
event.preventDefault();
break;
case 'ArrowUp':
if (!this.horizontal) this.setTimer(event, index, this.step * -1);
event.preventDefault();
break;
}
},
onGutterPointerDown: function onGutterPointerDown(event, index) {
if (this.disabled) return;
this.onResizeStart(event, index);
this.bindPointerListeners();
},
bindPointerListeners: function bindPointerListeners() {
var _this4 = this;
if (!this.pointerMoveListener) {
this.pointerMoveListener = function (event) {
return _this4.onResize(event);
};
document.addEventListener('pointermove', this.pointerMoveListener);
}
if (!this.pointerUpListener) {
this.pointerUpListener = function (event) {
_this4.onResizeEnd(event);
_this4.unbindPointerListeners();
};
document.addEventListener('pointerup', this.pointerUpListener);
}
},
unbindPointerListeners: function unbindPointerListeners() {
if (this.pointerMoveListener) {
document.removeEventListener('pointermove', this.pointerMoveListener);
this.pointerMoveListener = null;
}
if (this.pointerUpListener) {
document.removeEventListener('pointerup', this.pointerUpListener);
this.pointerUpListener = null;
}
},
clear: function clear() {
this.size = null;
this.gutterMidpoint = null;
this.initialSizes = [];
this.initialCollapsed = [];
this.reportedCollapsed = [];
this.initialTotal = 100;
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() {
if (isArray(this.panelSizes)) {
this.getStorage().setItem(this.stateKey, JSON.stringify(this.panelSizes));
}
},
restoreState: function restoreState() {
var storage = this.getStorage();
var stateString = storage.getItem(this.stateKey);
if (stateString) {
this.panelSizes = JSON.parse(stateString);
return true;
}
return false;
},
resetState: function resetState() {
this.initializePanels();
}
},
computed: {
panels: function panels() {
var _this$$slots$default,
_this$$slots,
_this5 = this;
var panels = [];
(_this$$slots$default = (_this$$slots = this.$slots)["default"]) === null || _this$$slots$default === void 0 || _this$$slots$default.call(_this$$slots).forEach(function (child) {
if (_this5.isSplitterPanel(child)) {
panels.push(child);
} else if (child.children instanceof Array) {
child.children.forEach(function (nestedChild) {
if (_this5.isSplitterPanel(nestedChild)) {
panels.push(nestedChild);
}
});
}
});
return panels;
},
panelSizeConfig: function panelSizeConfig() {
var _this6 = this;
return this.panels.map(function (panel) {
return _this6.getPanelSize(panel);
}).join(',');
},
panelIds: function panelIds() {
var _this7 = this;
return this.panels.map(function (_, i) {
return "".concat(_this7.$id, "_panel_").concat(i);
});
},
gutterStyle: function gutterStyle() {
if (this.horizontal) return {
width: this.gutterSize + 'px'
};else return {
height: this.gutterSize + 'px'
};
},
horizontal: function horizontal() {
return this.layout === 'horizontal';
},
getPTOptions: function getPTOptions() {
var _this$$parentInstance;
return {
context: {
nested: (_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.nestedState
}
};
},
dataP: function dataP() {
var _this$$parentInstance2;
return cn(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, this.layout, this.layout), "nested", ((_this$$parentInstance2 = this.$parentInstance) === null || _this$$parentInstance2 === void 0 ? void 0 : _this$$parentInstance2.nestedState) != null), "resizing", this.resizing), "disabled", this.disabled));
}
}
};
var _hoisted_1 = ["data-orientation", "data-resizing", "data-disabled", "data-p"];
var _hoisted_2 = ["tabindex", "aria-orientation", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-controls", "aria-disabled", "onPointerdown", "onKeydown", "data-orientation", "data-resizing", "data-disabled", "data-p"];
var _hoisted_3 = ["data-orientation", "data-p"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", mergeProps({
"class": _ctx.cx('root'),
"data-orientation": _ctx.layout,
"data-resizing": $data.resizing ? '' : undefined,
"data-disabled": _ctx.disabled ? '' : undefined
}, _ctx.ptmi('root', $options.getPTOptions), {
"data-p": $options.dataP
}), [(openBlock(true), createElementBlock(Fragment, null, renderList($options.panels, function (panel, i) {
var _$data$panelSizes$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'),
style: {
touchAction: 'none',
userSelect: 'none'
},
role: "separator",
tabindex: $options.isGutterDisabled(i) ? -1 : 0,
"aria-orientation": _ctx.layout,
"aria-valuenow": Math.round((_$data$panelSizes$i = $data.panelSizes[i]) !== null && _$data$panelSizes$i !== void 0 ? _$data$panelSizes$i : 0),
"aria-valuemin": Math.round($options.getPanelMinSize(i)),
"aria-valuemax": Math.round(100 - $options.getPanelMinSize(i + 1)),
"aria-controls": $options.ariaControlsFor(i),
"aria-disabled": $options.isGutterDisabled(i) || undefined,
onPointerdown: function onPointerdown($event) {
return $options.onGutterPointerDown($event, i);
},
onKeydown: function onKeydown($event) {
return $options.onGutterKeyDown($event, i);
},
onKeyup: _cache[0] || (_cache[0] = function () {
return $options.onGutterKeyUp && $options.onGutterKeyUp.apply($options, arguments);
}),
"data-orientation": _ctx.layout,
"data-resizing": $data.resizing && $data.prevPanelIndex === i ? '' : undefined,
"data-disabled": $options.isGutterDisabled(i) ? '' : undefined,
"data-p": $options.dataP
}, {
ref_for: true
}, _ctx.ptm('gutter')), [createElementVNode("div", mergeProps({
"class": _ctx.cx('gutterHandle'),
style: [$options.gutterStyle],
"data-orientation": _ctx.layout,
"data-p": $options.dataP
}, {
ref_for: true
}, _ctx.ptm('gutterHandle')), null, 16, _hoisted_3)], 16, _hoisted_2)) : createCommentVNode("", true)], 64);
}), 128))], 16, _hoisted_1);
}
script.render = render;
export { script as default };