kempo-ui 0.0.74 → 0.0.76

package/dist/components/Split.js

@@ -1,4 +1,4 @@
-import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import drag from"../utils/drag.js";export default class Split extends ShadowComponent{static properties={resizing:{type:Boolean,reflect:!0},stacked:{type:Boolean,reflect:!0},stackWidth:{type:Number,attribute:"stack-width"},direction:{type:String,reflect:!0}};constructor(){super(),this.resizing=!1,this.stacked=!1,this.stackWidth=0,this.direction="horizontal",this.dragStartSize=0,this.dragCleanup=()=>{},this.resizeObserver=null}firstUpdated(){super.firstUpdated(),this.setupDragHandler(),this.setupResizeObserver()}disconnectedCallback(){super.disconnectedCallback(),this.dragCleanup(),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}handleDragStart=()=>{this.resizing=!0,this.dragStartSize=Math.round(this.shadowRoot.getElementById("pane-1").getBoundingClientRect()["vertical"===this.direction?"height":"width"]),this.dispatchEvent(new CustomEvent("resizestart",{detail:{startSize:this.dragStartSize},bubbles:!0}))};handleDrag=({x:e,y:t})=>{const i="vertical"===this.direction?t:e,s=`${this.dragStartSize+i}px`;this.setSize(s),this.dispatchEvent(new CustomEvent("resize",{detail:{size:s},bubbles:!0}))};handleDragEnd=({x:e,y:t})=>{this.resizing=!1;const i="vertical"===this.direction?t:e,s=`${this.dragStartSize+i}px`;this.setSize(s),this.dispatchEvent(new CustomEvent("resizeend",{detail:{size:s},bubbles:!0}))};setSize(e){this.style.setProperty("--pane_1_size",e)}setupDragHandler(){const e=this.shadowRoot.getElementById("divider-handle");e&&(this.dragCleanup=drag({element:e,callback:this.handleDrag,startCallback:this.handleDragStart,endCallback:this.handleDragEnd}))}setupResizeObserver(){this.resizeObserver=new ResizeObserver(e=>{for(const t of e){const e=t.contentRect.width;this.stacked=e<=this.stackWidth}}),this.resizeObserver.observe(this)}static styles=css`
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import drag from"../utils/drag.js";export default class Split extends ShadowComponent{static properties={resizing:{type:Boolean,reflect:!0},stacked:{type:Boolean,reflect:!0},stackWidth:{type:Number,attribute:"stack-width"},direction:{type:String,reflect:!0},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.resizing=!1,this.stacked=!1,this.stackWidth=0,this.direction="horizontal",this.persistentId=null,this.dragStartSize=0,this.dragCleanup=()=>{},this.resizeObserver=null}firstUpdated(){if(super.firstUpdated(),this.setupDragHandler(),this.setupResizeObserver(),this.persistentId&&window?.localStorage){const e=window.localStorage.getItem(`split-persistent-id-${this.persistentId}`);e&&this.setSize(e)}}disconnectedCallback(){super.disconnectedCallback(),this.dragCleanup(),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}handleDragStart=()=>{this.resizing=!0,this.dragStartSize=Math.round(this.shadowRoot.getElementById("pane-1").getBoundingClientRect()["vertical"===this.direction?"height":"width"]),this.dispatchEvent(new CustomEvent("resizestart",{detail:{startSize:this.dragStartSize},bubbles:!0}))};handleDrag=({x:e,y:t})=>{const i="vertical"===this.direction?t:e,s=`${this.dragStartSize+i}px`;this.setSize(s),this.dispatchEvent(new CustomEvent("resize",{detail:{size:s},bubbles:!0}))};handleDragEnd=({x:e,y:t})=>{this.resizing=!1;const i="vertical"===this.direction?t:e,s=`${this.dragStartSize+i}px`;this.setSize(s),this.persistentId&&window?.localStorage&&window.localStorage.setItem(`split-persistent-id-${this.persistentId}`,s),this.dispatchEvent(new CustomEvent("resizeend",{detail:{size:s},bubbles:!0}))};setSize(e){this.style.setProperty("--pane_1_size",e)}setupDragHandler(){const e=this.shadowRoot.getElementById("divider-handle");e&&(this.dragCleanup=drag({element:e,callback:this.handleDrag,startCallback:this.handleDragStart,endCallback:this.handleDragEnd}))}setupResizeObserver(){this.resizeObserver=new ResizeObserver(e=>{for(const t of e){const e=t.contentRect.width;this.stacked=e<=this.stackWidth}}),this.resizeObserver.observe(this)}static styles=css`
 		:host {
 			--pane_1_size: calc((100% - var(--handle_width)) / 2);
 			--handle_width: 0.5rem;
@@ -17,7 +17,7 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 
 		.pane {
 			min-width: var(--min_pane_size);
-			max-width: calc(100% - var(--min_pane_size));
+			max-width: calc(100% - var(--min_pane_size) - var(--handle_width));
 			max-height: 100%;
 			overflow: hidden;
 		}
@@ -28,6 +28,7 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 
 		#divider-handle {
 			display: flex;
+			flex-shrink: 0;
 			justify-content: center;
 			width: var(--handle_width);
 			cursor: ew-resize;
@@ -37,9 +38,12 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 			background-color: var(--tc_primary);
 		}
 
+		:host([resizing]) {
+			user-select: none;
+		}
+
 		:host([resizing]) .pane {
 			pointer-events: none;
-			user-select: none;
 		}
 
 		#divider-border {
@@ -80,7 +84,7 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 			min-width: 0;
 			max-width: 100%;
 			min-height: var(--min_pane_size);
-			max-height: calc(100% - var(--min_pane_size));
+			max-height: calc(100% - var(--min_pane_size) - var(--handle_width));
 		}
 
 		:host([direction="vertical"]) #pane-1 {

package/docs/components/split.html

@@ -24,7 +24,7 @@
           <a href="#basicUsage">Basic Usage</a><br />
           <a href="#resizing">Resizing</a><br />
           <a href="#verticalSplit">Vertical Split</a><br />
-          
+          <a href="#persistentState">Persistent State</a><br />
           <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
           <a href="#constructor">Constructor</a><br />
           <a href="#requirements">Requirements</a><br />
@@ -139,6 +139,24 @@
     </div>
 
 
+    <h3 id="persistentState"><a href="#persistentState" class="no-link">Persistent State</a></h3>
+    <p>Add the <code>persistent-id</code> attribute to save and restore the pane size across page refreshes using <code>localStorage</code>. Each split that uses persistence must have a unique <code>persistent-id</code> value.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span> <span class="hljs-attr">persistent-id</span>=<span class="hljs-string">"my-split"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Left Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>Right Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-split persistent-id="docs-split-example" style="height: 10rem" class="b">
+            <div>Left Pane Content</div>
+            <div slot="right">Right Pane Content</div>
+          </k-split>
+        </k-card>
+      </div>
+    </div>
+
     <h2 id="jsRef">JavaScript Reference</h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
@@ -161,6 +179,8 @@
     <p>The window width threshold for stacking behavior. Syncs to <code>stack-width</code> attribute.</p>
     <h5><code>direction<i>: string</i></code></h5>
     <p>The direction of the split. Can be <code>"horizontal"</code> (default) or <code>"vertical"</code>. Syncs to <code>direction</code> attribute.</p>
+    <h5><code>persistentId<i>: string</i></code></h5>
+    <p>When set, the pane size is saved to <code>localStorage</code> on resize and restored on initialization. Must be unique per split instance. Syncs to <code>persistent-id</code> attribute.</p>
 
     <h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
     <h5><code>--pane_1_size</code></h5>

package/docs/src/components/Split.js

@@ -1,4 +1,4 @@
-import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import drag from"../utils/drag.js";export default class Split extends ShadowComponent{static properties={resizing:{type:Boolean,reflect:!0},stacked:{type:Boolean,reflect:!0},stackWidth:{type:Number,attribute:"stack-width"},direction:{type:String,reflect:!0}};constructor(){super(),this.resizing=!1,this.stacked=!1,this.stackWidth=0,this.direction="horizontal",this.dragStartSize=0,this.dragCleanup=()=>{},this.resizeObserver=null}firstUpdated(){super.firstUpdated(),this.setupDragHandler(),this.setupResizeObserver()}disconnectedCallback(){super.disconnectedCallback(),this.dragCleanup(),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}handleDragStart=()=>{this.resizing=!0,this.dragStartSize=Math.round(this.shadowRoot.getElementById("pane-1").getBoundingClientRect()["vertical"===this.direction?"height":"width"]),this.dispatchEvent(new CustomEvent("resizestart",{detail:{startSize:this.dragStartSize},bubbles:!0}))};handleDrag=({x:e,y:t})=>{const i="vertical"===this.direction?t:e,s=`${this.dragStartSize+i}px`;this.setSize(s),this.dispatchEvent(new CustomEvent("resize",{detail:{size:s},bubbles:!0}))};handleDragEnd=({x:e,y:t})=>{this.resizing=!1;const i="vertical"===this.direction?t:e,s=`${this.dragStartSize+i}px`;this.setSize(s),this.dispatchEvent(new CustomEvent("resizeend",{detail:{size:s},bubbles:!0}))};setSize(e){this.style.setProperty("--pane_1_size",e)}setupDragHandler(){const e=this.shadowRoot.getElementById("divider-handle");e&&(this.dragCleanup=drag({element:e,callback:this.handleDrag,startCallback:this.handleDragStart,endCallback:this.handleDragEnd}))}setupResizeObserver(){this.resizeObserver=new ResizeObserver(e=>{for(const t of e){const e=t.contentRect.width;this.stacked=e<=this.stackWidth}}),this.resizeObserver.observe(this)}static styles=css`
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import drag from"../utils/drag.js";export default class Split extends ShadowComponent{static properties={resizing:{type:Boolean,reflect:!0},stacked:{type:Boolean,reflect:!0},stackWidth:{type:Number,attribute:"stack-width"},direction:{type:String,reflect:!0},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.resizing=!1,this.stacked=!1,this.stackWidth=0,this.direction="horizontal",this.persistentId=null,this.dragStartSize=0,this.dragCleanup=()=>{},this.resizeObserver=null}firstUpdated(){if(super.firstUpdated(),this.setupDragHandler(),this.setupResizeObserver(),this.persistentId&&window?.localStorage){const e=window.localStorage.getItem(`split-persistent-id-${this.persistentId}`);e&&this.setSize(e)}}disconnectedCallback(){super.disconnectedCallback(),this.dragCleanup(),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}handleDragStart=()=>{this.resizing=!0,this.dragStartSize=Math.round(this.shadowRoot.getElementById("pane-1").getBoundingClientRect()["vertical"===this.direction?"height":"width"]),this.dispatchEvent(new CustomEvent("resizestart",{detail:{startSize:this.dragStartSize},bubbles:!0}))};handleDrag=({x:e,y:t})=>{const i="vertical"===this.direction?t:e,s=`${this.dragStartSize+i}px`;this.setSize(s),this.dispatchEvent(new CustomEvent("resize",{detail:{size:s},bubbles:!0}))};handleDragEnd=({x:e,y:t})=>{this.resizing=!1;const i="vertical"===this.direction?t:e,s=`${this.dragStartSize+i}px`;this.setSize(s),this.persistentId&&window?.localStorage&&window.localStorage.setItem(`split-persistent-id-${this.persistentId}`,s),this.dispatchEvent(new CustomEvent("resizeend",{detail:{size:s},bubbles:!0}))};setSize(e){this.style.setProperty("--pane_1_size",e)}setupDragHandler(){const e=this.shadowRoot.getElementById("divider-handle");e&&(this.dragCleanup=drag({element:e,callback:this.handleDrag,startCallback:this.handleDragStart,endCallback:this.handleDragEnd}))}setupResizeObserver(){this.resizeObserver=new ResizeObserver(e=>{for(const t of e){const e=t.contentRect.width;this.stacked=e<=this.stackWidth}}),this.resizeObserver.observe(this)}static styles=css`
 		:host {
 			--pane_1_size: calc((100% - var(--handle_width)) / 2);
 			--handle_width: 0.5rem;
@@ -17,7 +17,7 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 
 		.pane {
 			min-width: var(--min_pane_size);
-			max-width: calc(100% - var(--min_pane_size));
+			max-width: calc(100% - var(--min_pane_size) - var(--handle_width));
 			max-height: 100%;
 			overflow: hidden;
 		}
@@ -28,6 +28,7 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 
 		#divider-handle {
 			display: flex;
+			flex-shrink: 0;
 			justify-content: center;
 			width: var(--handle_width);
 			cursor: ew-resize;
@@ -37,9 +38,12 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 			background-color: var(--tc_primary);
 		}
 
+		:host([resizing]) {
+			user-select: none;
+		}
+
 		:host([resizing]) .pane {
 			pointer-events: none;
-			user-select: none;
 		}
 
 		#divider-border {
@@ -80,7 +84,7 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 			min-width: 0;
 			max-width: 100%;
 			min-height: var(--min_pane_size);
-			max-height: calc(100% - var(--min_pane_size));
+			max-height: calc(100% - var(--min_pane_size) - var(--handle_width));
 		}
 
 		:host([direction="vertical"]) #pane-1 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.0.74",
+  "version": "0.0.76",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

package/src/components/Split.js

@@ -7,7 +7,8 @@ export default class Split extends ShadowComponent {
 		resizing: { type: Boolean, reflect: true },
 		stacked: { type: Boolean, reflect: true },
 		stackWidth: { type: Number, attribute: 'stack-width' },
-		direction: { type: String, reflect: true }
+		direction: { type: String, reflect: true },
+		persistentId: { type: String, reflect: true, attribute: 'persistent-id' }
 	};
 
 	constructor() {
@@ -17,6 +18,7 @@ export default class Split extends ShadowComponent {
 		this.stacked = false;
 		this.stackWidth = 0;
 		this.direction = 'horizontal';
+		this.persistentId = null;
 		
 		// Private state
 		this.dragStartSize = 0;
@@ -31,6 +33,10 @@ export default class Split extends ShadowComponent {
 		super.firstUpdated();
 		this.setupDragHandler();
 		this.setupResizeObserver();
+		if(this.persistentId && window?.localStorage) {
+			const size = window.localStorage.getItem(`split-persistent-id-${this.persistentId}`);
+			if(size) this.setSize(size);
+		}
 	}
 
 	disconnectedCallback() {
@@ -69,6 +75,9 @@ export default class Split extends ShadowComponent {
 		const delta = this.direction === 'vertical' ? y : x;
 		const size = `${this.dragStartSize + delta}px`;
 		this.setSize(size);
+		if(this.persistentId && window?.localStorage) {
+			window.localStorage.setItem(`split-persistent-id-${this.persistentId}`, size);
+		}
 		this.dispatchEvent(new CustomEvent('resizeend', {
 			detail: { size },
 			bubbles: true
@@ -126,7 +135,7 @@ export default class Split extends ShadowComponent {
 
 		.pane {
 			min-width: var(--min_pane_size);
-			max-width: calc(100% - var(--min_pane_size));
+			max-width: calc(100% - var(--min_pane_size) - var(--handle_width));
 			max-height: 100%;
 			overflow: hidden;
 		}
@@ -137,6 +146,7 @@ export default class Split extends ShadowComponent {
 
 		#divider-handle {
 			display: flex;
+			flex-shrink: 0;
 			justify-content: center;
 			width: var(--handle_width);
 			cursor: ew-resize;
@@ -146,9 +156,12 @@ export default class Split extends ShadowComponent {
 			background-color: var(--tc_primary);
 		}
 
+		:host([resizing]) {
+			user-select: none;
+		}
+
 		:host([resizing]) .pane {
 			pointer-events: none;
-			user-select: none;
 		}
 
 		#divider-border {
@@ -189,7 +202,7 @@ export default class Split extends ShadowComponent {
 			min-width: 0;
 			max-width: 100%;
 			min-height: var(--min_pane_size);
-			max-height: calc(100% - var(--min_pane_size));
+			max-height: calc(100% - var(--min_pane_size) - var(--handle_width));
 		}
 
 		:host([direction="vertical"]) #pane-1 {

package/tests/components/Split.browser-test.js

@@ -5,7 +5,7 @@ const createSplit = async (options = {}) => {
 	container.style.width = '800px';
 	container.style.height = '400px';
 	container.innerHTML = `
-		<k-split ${options.stacked ? 'stacked' : ''} ${options.stackWidth ? `stack-width="${options.stackWidth}"` : ''} ${options.direction ? `direction="${options.direction}"` : ''}>
+		<k-split ${options.stacked ? 'stacked' : ''} ${options.stackWidth ? `stack-width="${options.stackWidth}"` : ''} ${options.direction ? `direction="${options.direction}"` : ''} ${options.persistentId ? `persistent-id="${options.persistentId}"` : ''}>
 			<div id="left-content">Left Pane Content</div>
 			<div slot="right" id="right-content">Right Pane Content</div>
 		</k-split>
@@ -709,5 +709,92 @@ export default {
 
 		cleanup(container);
 		pass('Size updates during vertical drag');
+	},
+
+	'should have default persistentId as null': async ({pass, fail}) => {
+		const { container, split } = await createSplit();
+
+		if(split.persistentId !== null){
+			cleanup(container);
+			fail(`Expected persistentId to be null, got ${split.persistentId}`);
+			return;
+		}
+
+		cleanup(container);
+		pass('Default persistentId is null');
+	},
+
+	'should accept persistent-id attribute': async ({pass, fail}) => {
+		const { container, split } = await createSplit({ persistentId: 'my-split' });
+
+		if(split.persistentId !== 'my-split'){
+			cleanup(container);
+			fail(`Expected persistentId to be "my-split", got ${split.persistentId}`);
+			return;
+		}
+
+		cleanup(container);
+		pass('persistent-id attribute accepted');
+	},
+
+	'should save size to localStorage on drag end when persistentId is set': async ({pass, fail}) => {
+		const key = 'split-persistent-id-save-test';
+		window.localStorage.removeItem(key);
+
+		const { container, split } = await createSplit({ persistentId: 'save-test' });
+
+		split.handleDragStart();
+		split.handleDragEnd({ x: 100, y: 0 });
+
+		const saved = window.localStorage.getItem(key);
+
+		if(!saved){
+			cleanup(container);
+			window.localStorage.removeItem(key);
+			fail('Size should be saved to localStorage on drag end');
+			return;
+		}
+
+		cleanup(container);
+		window.localStorage.removeItem(key);
+		pass('Size saved to localStorage on drag end');
+	},
+
+	'should not save to localStorage on drag end when persistentId is not set': async ({pass, fail}) => {
+		const { container, split } = await createSplit();
+
+		const keysBefore = Object.keys(window.localStorage).filter(k => k.startsWith('split-persistent-id-'));
+		split.handleDragStart();
+		split.handleDragEnd({ x: 100, y: 0 });
+		const keysAfter = Object.keys(window.localStorage).filter(k => k.startsWith('split-persistent-id-'));
+
+		if(keysAfter.length !== keysBefore.length){
+			cleanup(container);
+			fail('Should not save to localStorage when persistentId is not set');
+			return;
+		}
+
+		cleanup(container);
+		pass('Does not save to localStorage when persistentId is not set');
+	},
+
+	'should restore size from localStorage when persistentId is set': async ({pass, fail}) => {
+		const key = 'split-persistent-id-restore-test';
+		window.localStorage.setItem(key, '350px');
+
+		const { container, split } = await createSplit({ persistentId: 'restore-test' });
+
+		const pane1Size = split.style.getPropertyValue('--pane_1_size');
+
+		window.localStorage.removeItem(key);
+
+		if(pane1Size !== '350px'){
+			cleanup(container);
+			fail(`Expected --pane_1_size to be 350px (restored from localStorage), got ${pane1Size}`);
+			return;
+		}
+
+		cleanup(container);
+		pass('Size restored from localStorage when persistentId is set');
 	}
 };