@stories-js/core
Version:
Stories web components to build stories
5 lines • 3.12 kB
JavaScript
/*!
* (C) StoriesJS https://storiesjs.org - GPL-2.0 License
*/
import{r as t,i as s,h as i,g as e}from"./p-dea5a230.js";const o=":host{display:grid;grid-template-columns:1fr -webkit-max-content 1fr;grid-template-columns:1fr max-content 1fr;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto;cursor:auto;width:auto;height:100vh}:host([resizing]){-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([resizing][split=horizontal]){cursor:col-resize}:host #median{inline-size:0.5rem;grid-column:2/3}:host #median:hover{cursor:col-resize}:host [name=slot1]{grid-column:1/2;grid-row:1/1}:host [name=slot2]{grid-column:3/4;grid-row:1/1}:host([resizing][split=vertical]){cursor:row-resize}:host([split=vertical]){grid-template-rows:1fr -webkit-max-content 1fr;grid-template-rows:1fr max-content 1fr;grid-template-columns:none}:host([split=vertical]) #median{block-size:0.5rem;inline-size:auto;grid-row:2/3;grid-column:1/1}:host([split=vertical]) #median:hover{cursor:row-resize}:host([split=vertical]) [name=slot1]{grid-row:1/2;grid-column:1/1}:host([split=vertical]) [name=slot2]{grid-row:3/4;grid-column:1/1}#median{background:bisque}::slotted(*){overflow:auto}";const r=class{constructor(i){t(this,i);this.storiesSizeChange=s(this,"storiesSizeChange",7);this.minSize=0;this.defaultSize=0;this.pointerDown=t=>{t.preventDefault();this.isResizing=true;const s=this.el.getBoundingClientRect();this.left=s.x;this.top=s.y;this.el.addEventListener("pointermove",this.pointerMove);this.el.addEventListener("pointerup",this.pointerUp)};this.pointerMove=t=>{t.preventDefault();if(this.split==="horizontal"){const s=t.clientX-this.left;const i=this.median.getBoundingClientRect().width;this.value=Math.round(s-i/2);this.value=this.value<this.minSize?this.minSize:this.value;this.el.style.gridTemplateColumns=`${this.value}px ${i}px 1fr`}else{const s=t.clientY-this.top;const i=this.median.getBoundingClientRect().height;this.value=Math.round(s-i/2);this.value=this.value<this.minSize?this.minSize:this.value;this.el.style.gridTemplateRows=`${this.value}px ${i}px 1fr`}};this.pointerUp=t=>{t.preventDefault();this.isResizing=false;this.storiesSizeChange.emit(this.value);this.el.removeEventListener("pointermove",this.pointerMove);this.el.removeEventListener("pointerup",this.pointerUp)}}componentDidLoad(){if(this.defaultSize>0||this.minSize>0){if(this.split==="horizontal"){const t=this.median.getBoundingClientRect().width;this.value=Math.round(this.defaultSize);this.value=this.value<this.minSize?this.minSize:this.value;this.el.style.gridTemplateColumns=`${this.value}px ${t}px 1fr`}else{const t=this.median.getBoundingClientRect().height;this.value=Math.round(this.defaultSize);this.value=this.value<this.minSize?this.minSize:this.value;this.el.style.gridTemplateRows=`${this.value}px ${t}px 1fr`}}}render(){return[i("slot",{name:"slot1"}),i("div",{ref:t=>this.median=t,id:"median",onPointerDown:this.pointerDown}),i("slot",{name:"slot2"})]}get el(){return e(this)}};r.style=o;export{r as stories_split_pane};
//# sourceMappingURL=p-6513f4d9.entry.js.map