npm - kempo-ui - Versions diffs - 0.0.13 → 0.0.15 - Mend

kempo-ui 0.0.13 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (181) hide show

package/docs/kempo-ui/utils/watchWindowSize.html ADDED Viewed

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <base href="/kempo-ui/">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>watchWindowSize - Kempo UI</title>
+  <link rel="stylesheet" href="kempo-vars.css" />
+  <link rel="stylesheet" href="kempo.min.css" />
+  <link rel="stylesheet" href="kempo-hljs.css" />
+  <link rel="stylesheet" href="styles.css" />
+  <script>window.litDisableBundleWarning = true;</script>
+</head>
+<body>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
+  <main>
+    <h1>watchWindowSize</h1>
+    <details
+      class="b r mb"
+    >
+      <summary class="p">Table of Contents</summary>
+      <div class="m mt0 pl">
+        <h6>Usage</h6>
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#functions">Functions</a><br />
+        <a href="#examples">Examples</a><br />
+      </div>
+    </details>
+    <h3>Description</h3>
+    <p>The <code>watchWindowSize</code> utility provides a debounced way to monitor window resize events. It manages multiple handlers efficiently and automatically debounces resize events to improve performance.</p>
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Import and use the window size watching functions:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-keyword">const</span> handler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br />  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Window width:'</span>, width);<br />};<br /><br /><span class="hljs-comment">// Start watching</span><br /><span class="hljs-keyword">const</span> currentWidth = watchWindowSize(handler);<br /><br /><span class="hljs-comment">// Stop watching when done</span><br />unwatchWindowSize(handler);</code></pre>
+    <h3 id="functions"><a href="#functions" class="no-link">Functions</a></h3>
+    <h5><code>watchWindowSize(handler)</code></h5>
+    <p>Registers a handler function to be called when the window is resized.</p>
+    <ul>
+      <li><strong>handler:</strong> Function that receives the new window width</li>
+      <li><strong>Returns:</strong> Current window width</li>
+    </ul>
+    <h5><code>unwatchWindowSize(handler)</code></h5>
+    <p>Unregisters a previously registered handler function.</p>
+    <ul>
+      <li><strong>handler:</strong> The same function reference that was registered</li>
+    </ul>
+    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
+    <h4>Responsive Component</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ResponsiveComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">LitElement</span> </span>{<br />  <span class="hljs-keyword">constructor</span>() {<br />    <span class="hljs-keyword">super</span>();<br />    <span class="hljs-keyword">this</span>.isMobile = <span class="hljs-literal">false</span>;<br />    <span class="hljs-keyword">this</span>.resizeHandler = <span class="hljs-keyword">this</span>.handleResize.bind(<span class="hljs-keyword">this</span>);<br />  }<br /><br />  connectedCallback() {<br />    <span class="hljs-keyword">super</span>.connectedCallback();<br />    <span class="hljs-keyword">const</span> currentWidth = watchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br />    <span class="hljs-keyword">this</span>.handleResize(currentWidth);<br />  }<br /><br />  disconnectedCallback() {<br />    <span class="hljs-keyword">super</span>.disconnectedCallback();<br />    unwatchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br />  }<br /><br />  handleResize(width) {<br />    <span class="hljs-keyword">this</span>.isMobile = width &lt; <span class="hljs-number">768</span>;<br />    <span class="hljs-keyword">this</span>.requestUpdate();<br />  }<br /><br />  render() {<br />    <span class="hljs-keyword">return</span> html`<span class="xml"><br />      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${<span class="hljs-keyword">this</span>.isMobile ? <span class="hljs-string">'mobile'</span> : <span class="hljs-string">'desktop'</span>}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span><br />        Content adapts to screen size<br />      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    `</span>;<br />  }<br />}</code></pre>
+    <h4>Multiple Handlers</h4>
+    <pre><code class="hljs javascript"><span class="hljs-comment">// Handler for navigation</span><br /><span class="hljs-keyword">const</span> navHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br />  <span class="hljs-keyword">const</span> nav = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.navigation'</span>);<br />  nav.classList.toggle(<span class="hljs-string">'mobile'</span>, width &lt; <span class="hljs-number">1024</span>);<br />};<br /><br /><span class="hljs-comment">// Handler for sidebar</span><br /><span class="hljs-keyword">const</span> sidebarHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br />  <span class="hljs-keyword">const</span> sidebar = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.sidebar'</span>);<br />  sidebar.style.display = width &lt; <span class="hljs-number">768</span> ? <span class="hljs-string">'none'</span> : <span class="hljs-string">'block'</span>;<br />};<br /><br /><span class="hljs-comment">// Both handlers will be called on resize</span><br />watchWindowSize(navHandler);<br />watchWindowSize(sidebarHandler);<br /><br /><span class="hljs-comment">// Clean up when needed</span><br />unwatchWindowSize(navHandler);<br />unwatchWindowSize(sidebarHandler);</code></pre>
+    <h4>Breakpoint Detection</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> breakpoints = {<br />  <span class="hljs-attr">mobile</span>: <span class="hljs-number">768</span>,<br />  <span class="hljs-attr">tablet</span>: <span class="hljs-number">1024</span>,<br />  <span class="hljs-attr">desktop</span>: <span class="hljs-number">1200</span><br />};<br /><br /><span class="hljs-keyword">const</span> breakpointHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br />  <span class="hljs-keyword">let</span> currentBreakpoint = <span class="hljs-string">'mobile'</span>;<br />  <br />  <span class="hljs-keyword">if</span> (width &gt;= breakpoints.desktop) {<br />    currentBreakpoint = <span class="hljs-string">'desktop'</span>;<br />  } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (width &gt;= breakpoints.tablet) {<br />    currentBreakpoint = <span class="hljs-string">'tablet'</span>;<br />  }<br />  <br />  <span class="hljs-built_in">document</span>.body.setAttribute(<span class="hljs-string">'data-breakpoint'</span>, currentBreakpoint);<br />  <br />  <span class="hljs-comment">// Dispatch custom event</span><br />  <span class="hljs-built_in">window</span>.dispatchEvent(<span class="hljs-keyword">new</span> CustomEvent(<span class="hljs-string">'breakpointchange'</span>, {<br />    <span class="hljs-attr">detail</span>: { width, <span class="hljs-attr">breakpoint</span>: currentBreakpoint }<br />  }));<br />};<br /><br />watchWindowSize(breakpointHandler);</code></pre>
+    <h4>Performance Benefits</h4>
+    <p>The utility automatically debounces resize events, so you don't need to worry about performance:</p>
+    <pre><code class="hljs javascript"><span class="hljs-comment">// This handler will only be called after resize events stop</span><br /><span class="hljs-keyword">const</span> expensiveHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br />  <span class="hljs-comment">// Expensive DOM calculations or API calls</span><br />  recalculateLayout();<br />  updateCharts();<br />  reflow();<br />};<br /><br />watchWindowSize(expensiveHandler); <span class="hljs-comment">// Automatically debounced</span></code></pre>
+  </main>
+  <div style="height:33vh"></div>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+</body>
+</html>

package/docs/prod.config.json CHANGED Viewed

@@ -1,13 +1,5 @@
 {
-  "mimeTypes": {
-    ".js": "application/javascript",
-    ".mjs": "application/javascript"
-  },
   "middleware": {
-    "logging": {
-      "enabled": true,
-      "includeResponseTime": true
-    },
     "security": {
       "enabled": true,
       "headers": {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",
@@ -25,7 +25,7 @@
   },
   "homepage": "https://github.com/dustinpoissant/kempo-ui#readme",
   "devDependencies": {
-    "kempo-server": "^1.7.10",
+    "kempo-server": "^1.7.12",
     "kempo-testing-framework": "^1.4.0",
     "terser": "^5.43.1"
   },

package/scripts/build.js CHANGED Viewed

@@ -99,19 +99,19 @@ const minifiedKempoHljsCSS = kempoHljsCSS.replace(/\s*\{\s*/g, '{').replace(/\s*
 console.log('Saving kempo-hljs.css');
 await fs.writeFile('./dist/kempo-hljs.css', minifiedKempoHljsCSS, 'utf-8');
-console.log('Cleaning docs/src/ directory');
-await emptyDir('./docs/src/');
+console.log('Cleaning docs/kempo-ui/src/ directory');
+await emptyDir('./docs/kempo-ui/src/');
-console.log('Copying dist/ to docs/');
-await ensureDir('./docs/');
-await copyDir('./dist', './docs/');
+console.log('Copying dist/ to docs/kempo-ui/');
+await ensureDir('./docs/kempo-ui/');
+await copyDir('./dist', './docs/kempo-ui/');
-console.log('Copying icons/ to docs/icons/');
-await copyDir('./icons', './docs/icons/');
+console.log('Copying icons/ to docs/kempo-ui/icons/');
+await copyDir('./icons', './docs/kempo-ui/icons/');
 console.log('Copying base kempo.min.css from external package');
 const kempoCssSource = './node_modules/kempo-css/dist/kempo.min.css';
-const kempoCssDest = './docs/kempo.min.css';
+const kempoCssDest = './docs/kempo-ui/kempo.min.css';
 try {
   const kempoCssContent = await fs.readFile(kempoCssSource, 'utf-8');
   await fs.writeFile(kempoCssDest, kempoCssContent, 'utf-8');

package/scripts/docs.js CHANGED Viewed

@@ -41,6 +41,9 @@ const serverArgs = [
   '--port', port.toString(),
   '--config', configFile
 ];
+setTimeout(()=>{
+  console.log(`\Docs are available at: http://localhost:${port}/kempo-ui/`);
+}, 1000);
 const serverProcess = spawn('npx', serverArgs, {
   stdio: 'inherit',

package/src/components/Accordion.js CHANGED Viewed

@@ -1,12 +1,52 @@
 import ShadowComponent from './ShadowComponent.js';
 import { html, css } from '../lit-all.min.js';
-import { boolTrueFalse } from '../utils/propConverters.js';
+import { boolExists, boolTrueFalse } from '../utils/propConverters.js';
 export default class Accordion extends ShadowComponent {
 	/*
 		Properties
 	*/
-	static properties = {};
+	static properties = {
+		multiple: {
+			type: Boolean,
+			reflect: true,
+			converter: boolExists
+		},
+		persistentId: {
+			type: String,
+			reflect: true,
+			attribute: 'persistent-id'
+		}
+	};
+	constructor() {
+		super();
+		this.multiple = false;
+		this.persistentId = null;
+	}
+	connectedCallback() {
+		super.connectedCallback?.();
+	}
+	/*
+		Lifecycle: Restore persistent state when persistentId changes
+	*/
+	updated(changedProps) {
+		super.updated?.(changedProps);
+		if (changedProps.has('persistentId') && this.persistentId && window?.localStorage) {
+			const key = `accordion-persistent-id-${this.persistentId}`;
+			const value = window.localStorage.getItem(key);
+			if (value) {
+				const openPanels = value.split(',');
+				this.querySelectorAll('k-accordion-panel').forEach(panel => {
+					panel.active = openPanels.includes(panel.name);
+					const header = this.getHeader(panel.name);
+					if (header) header.active = openPanels.includes(panel.name);
+				});
+			}
+		}
+	}
 	/*
 		Public Methods
@@ -20,15 +60,19 @@ export default class Accordion extends ShadowComponent {
 	}
 	openPanel(panelName) {
-		const currentlyActivePanel = this.querySelector(`k-accordion-panel[active="true"]`);
-		if(currentlyActivePanel && currentlyActivePanel.name !== panelName) {
-			currentlyActivePanel.active = false;
-			const currentlyActiveHeader = this.getHeader(currentlyActivePanel.name);
-			if(currentlyActiveHeader) currentlyActiveHeader.active = false;
+		if (!this.multiple) {
+			// Close all other panels (exclusive mode)
+			this.querySelectorAll('k-accordion-panel[active]').forEach(panel => {
+				if (panel.name !== panelName) {
+					panel.active = false;
+					const header = this.getHeader(panel.name);
+					if (header) header.active = false;
+				}
+			});
 		}
 		const panel = this.getPanel(panelName);
-		if(panel) {
+		if (panel) {
 			panel.active = true;
 			panel.transitioning = true;
 			setTimeout(() => {
@@ -36,50 +80,68 @@ export default class Accordion extends ShadowComponent {
 			}, parseInt(getComputedStyle(this).getPropertyValue('--animation_ms') || 256));
 			const header = this.getHeader(panelName);
-			if(header) header.active = true;
+			if (header) header.active = true;
 			this.dispatchEvent(new CustomEvent('openpanel', { detail: { panelName } }));
+			setTimeout(() => {
+				// Save state if persistentId is set
+				if (this.persistentId && window?.localStorage) {
+					const key = `accordion-persistent-id-${this.persistentId}`;
+					const openPanels = Array.from(this.querySelectorAll('k-accordion-panel[active]')).map(p => p.name);
+					window.localStorage.setItem(key, openPanels.join(','));
+				}
+			}, parseInt(getComputedStyle(this).getPropertyValue('--animation_ms') || 256));
 		}
 	}
 	closePanel(panelName) {
 		const panel = this.getPanel(panelName);
-		if(panel) {
-			panel.active = false;
-			panel.transitioning = true;
-			setTimeout(() => {
-				panel.transitioning = false;
-			}, parseInt(getComputedStyle(this).getPropertyValue('--animation_ms') || 256));
+	if (panel) {
+		panel.active = false;
+		panel.transitioning = true;
+		setTimeout(() => {
+			panel.transitioning = false;
+		}, parseInt(getComputedStyle(this).getPropertyValue('--animation_ms') || 256));
-			const header = this.getHeader(panelName);
-			if(header) header.active = false;
+		const header = this.getHeader(panelName);
+		if (header) header.active = false;
-			this.dispatchEvent(new CustomEvent('closepanel', { detail: { panelName } }));
-		}
-	}
+		this.dispatchEvent(new CustomEvent('closepanel', { detail: { panelName } }));
-	togglePanel(panelName) {
-		const panel = this.getPanel(panelName);
-		if(panel) {
-			if(panel.active) {
-				this.closePanel(panelName);
-			} else {
-				this.openPanel(panelName);
+		setTimeout(() => {
+			// Save state if persistentId is set
+			if (this.persistentId && window?.localStorage) {
+				const key = `accordion-persistent-id-${this.persistentId}`;
+				const openPanels = Array.from(this.querySelectorAll('k-accordion-panel[active]')).map(p => p.name);
+				window.localStorage.setItem(key, openPanels.join(','));
 			}
-			this.dispatchEvent(new CustomEvent('togglepanel', { detail: { panelName } }));
+		}, parseInt(getComputedStyle(this).getPropertyValue('--animation_ms') || 256));
+	}
+}
+togglePanel(panelName) {
+	const panel = this.getPanel(panelName);
+	if (panel) {
+		if (panel.active) {
+			this.closePanel(panelName);
+		} else {
+			this.openPanel(panelName);
 		}
+		this.dispatchEvent(new CustomEvent('togglepanel', { detail: { panelName } }));
 	}
+}
 	/*
 		Getters
 	*/
 	get activeHeader() {
-		return this.querySelector('k-accordion-header[active="true"]');
-	}
+	return this.querySelector('k-accordion-header[active="true"]');
+}
 	get activePanel() {
-		return this.querySelector('k-accordion-panel[active="true"]');
-	}
+	return this.querySelector('k-accordion-panel[active="true"]');
+}
 	/*
 		Styles
@@ -87,29 +149,46 @@ export default class Accordion extends ShadowComponent {
 	static styles = css`
 		:host {
 			display: block;
-			border: 1px solid var(--c_border);
+			border: 1px solid var(--c_border, #ccc);
 			border-radius: var(--radius);
 		}
 		::slotted(k-accordion-header) {
-			border-top: 1px solid var(--c_border);
+			border-top: 1px solid var(--c_border, #ccc);
+		}
+		::slotted(k-accordion-header) {
+			position: relative;
+		}
+		::slotted(k-accordion-header)::after {
+			content: '';
+			display: block;
+			position: absolute;
+			left: var(--spacer_h, 0.5rem);
+			right: var(--spacer_h, 0.5rem);
+			bottom: 0;
+			height: 0;
+			width: calc(100% - var(--spacer, 1rem));
+			border-bottom: 1px solid var(--c_border, #ccc);
+			opacity: 0;
+			transition: opacity var(--animation_ms, 256ms);
+			pointer-events: none;
 		}
-		::slotted(k-accordion-header[active="true"]) {
-			border-bottom: 1px solid var(--c_border);
+		::slotted(k-accordion-header[active])::after {
+			opacity: 0.4;
 		}
 		::slotted(k-accordion-header:first-of-type) {
 			border-top: 0;
 		}
-		::slotted(k-accordion-header:last-of-type:not([active="true"])) {
+		::slotted(k-accordion-header:last-of-type:not([active])) {
 			border-bottom: 0;
 		}
 	`;
-	/*
-		Rendering
-	*/
-	render() {
-		return html`<slot></slot>`;
-	}
+/*
+	Rendering
+*/
+render() {
+	return html`<slot></slot>`;
+}
 }
 export class AccordionHeader extends ShadowComponent {
@@ -118,7 +197,7 @@ export class AccordionHeader extends ShadowComponent {
 	*/
 	static properties = {
 		forPanel: { type: String, reflect: true, attribute: 'for-panel' },
-		active: { type: Boolean, reflect: true, converter: boolTrueFalse }
+		active: { type: Boolean, reflect: true, converter: boolExists }
 	};
 	constructor() {
@@ -154,23 +233,32 @@ export class AccordionHeader extends ShadowComponent {
 		return this.closest('k-accordion');
 	}
-	/*
-		Styles
-	*/
+	/* Rendering */
+	render() {
+		return html`
+			<slot name="left-icon">
+				<k-icon id="icon" name="chevron-right"></k-icon>
+			</slot>
+			<slot></slot>
+			<slot name="right-icon"></slot>
+		`;
+	}
 	static styles = css`
 		:host {
 			display: block;
 			padding: 1rem;
 			cursor: pointer;
 		}
+		#icon {
+			will-change: trnasform;
+			transition: transform var(--animation_ms, 256ms);
+			transform: rotate(0deg);
+		}
+		:host([active]) #icon {
+			transform: rotate(90deg);
+		}
 	`;
-	/*
-		Rendering
-	*/
-	render() {
-		return html`<slot></slot>`;
-	}
 }
 export class AccordionPanel extends ShadowComponent {
@@ -179,8 +267,8 @@ export class AccordionPanel extends ShadowComponent {
 	*/
 	static properties = {
 		name: { type: String, reflect: true },
-		active: { type: Boolean, reflect: true, converter: boolTrueFalse },
-		transitioning: { type: Boolean, reflect: true, converter: boolTrueFalse }
+		active: { type: Boolean, reflect: true, converter: boolExists },
+		transitioning: { type: Boolean, reflect: true, converter: boolExists }
 	};
 	constructor() {
@@ -208,7 +296,7 @@ export class AccordionPanel extends ShadowComponent {
 			overflow: hidden;
 			transition: height var(--animation_ms, 256ms) ease-in-out;
 		}
-		:host([active="true"]) {
+	:host([active]) {
 			height: max-content;
 		}
 	`;

package/src/components/Tabs.js CHANGED Viewed

@@ -289,9 +289,14 @@ export class Tab extends ShadowComponent {
 		return this.parentElement?.tagName === 'K-TABS' ? this.parentElement : null;
 	}
-	/*
-		Styles
-	*/
+	/* Rendering */
+	render() {
+		return html`
+			<button id="button" @click=${this.handleClick}>
+				<slot></slot>
+			</button>
+		`;
+	}
 	static styles = css`
 		:host {
 			margin-bottom: -1px;
@@ -313,7 +318,7 @@ export class Tab extends ShadowComponent {
 		}
 		:host([active]) {
-			border-bottom: 2px solid var(--c_primary);
+			border-bottom: 3px solid var(--c_primary);
 			margin-bottom: -1px;
 		}
@@ -321,17 +326,6 @@ export class Tab extends ShadowComponent {
 			color: var(--tc_primary);
 		}
 	`;
-	/*
-		Rendering
-	*/
-	render() {
-		return html`
-			<button id="button" @click=${this.handleClick}>
-				<slot></slot>
-			</button>
-		`;
-	}
 }
 /*
@@ -357,8 +351,11 @@ export class TabContent extends ShadowComponent {
 	}
 	/*
-		Styles
+		Rendering
 	*/
+	render() {
+		return html`<slot></slot>`;
+	}
 	static styles = css`
 		:host {
 			display: block;
@@ -366,6 +363,7 @@ export class TabContent extends ShadowComponent {
 			max-height: 100%;
 			flex: 1 1 auto;
 			overflow: auto;
+			padding-top: var(--spacer, 1rem);
 		}
 		:host([active]) {
@@ -376,13 +374,6 @@ export class TabContent extends ShadowComponent {
 			display: none;
 		}
 	`;
-	/*
-		Rendering
-	*/
-	render() {
-		return html`<slot></slot>`;
-	}
 }
 /*

package/src/kempo-vars.css CHANGED Viewed

	@@ -0,0 +1 @@
1	+ /* Define Kempo Vars Here */