kempo-ui 0.1.6 → 0.2.2

package/src/components/Dropdown.js

@@ -244,7 +244,7 @@ export default class Dropdown extends ShadowComponent {
 			display: none;
 			position: fixed;
 			position-anchor: --dropdown-trigger;
-			z-index: 1000;
+			z-index: 70;
 			min-width: anchor-size(width);
 			background: var(--c_bg);
 			border: 1px solid var(--c_border);

package/src/components/Main.js

@@ -2,16 +2,9 @@ import ShadowComponent from './ShadowComponent.js';
 import { html, css } from '../lit-all.min.js';
 
 export default class Main extends ShadowComponent {
-	static properties = {
-		leftPanelWidth: { type: String, state: true },
-		rightPanelWidth: { type: String, state: true }
-	};
-
 	constructor() {
 		super();
-		this.leftPanelWidth = '0px';
-		this.rightPanelWidth = '0px';
-		this.handlePanelChange = this.handlePanelChange.bind(this);
+		this.widthMap = new Map();
 	}
 
 	/*
@@ -19,33 +12,50 @@ export default class Main extends ShadowComponent {
 	*/
 	connectedCallback() {
 		super.connectedCallback();
-		window.addEventListener('side-panel-change', this.handlePanelChange);
-		
-		const leftPanel = document.querySelector('k-side-panel:not([side="right"])');
-		if(leftPanel){
-			this.leftPanelWidth = leftPanel.collapsed ? '3.5rem' : '16rem';
-		}
+		window.addEventListener('aside_state_change', this.handleAsideChange);
 
-		const rightPanel = document.querySelector('k-side-panel[side="right"]');
-		if(rightPanel){
-			this.rightPanelWidth = rightPanel.collapsed ? '3.5rem' : '16rem';
-		}
+		document.querySelectorAll('k-aside[main="push"]').forEach(aside => {
+			if(aside.state !== 'offscreen') {
+				const width = aside.getTargetWidth(aside.state);
+				if(width > 0) {
+					this.widthMap.set(aside, { side: aside.side || 'left', width });
+				}
+			}
+		});
+
+		this.recalculate();
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		window.removeEventListener('side-panel-change', this.handlePanelChange);
+		window.removeEventListener('aside_state_change', this.handleAsideChange);
 	}
 
 	/*
 		Event Handlers
 	*/
-	handlePanelChange(event) {
-		if(event.detail.side === 'right'){
-			this.rightPanelWidth = event.detail.width;
-		}else{
-			this.leftPanelWidth = event.detail.width;
+	handleAsideChange = (event) => {
+		const { aside, state, main, width } = event.detail;
+		if(main === 'overlay' || state === 'offscreen') {
+			this.widthMap.delete(aside);
+		} else {
+			this.widthMap.set(aside, { side: aside.side || 'left', width });
 		}
+		this.recalculate();
+	}
+
+	recalculate = () => {
+		let maxLeft = 0;
+		let maxRight = 0;
+		for(const [, { side, width }] of this.widthMap) {
+			if(side === 'right') {
+				maxRight = Math.max(maxRight, width);
+			} else {
+				maxLeft = Math.max(maxLeft, width);
+			}
+		}
+		this.style.setProperty('--left-panel-width', `${maxLeft}px`);
+		this.style.setProperty('--right-panel-width', `${maxRight}px`);
 	}
 
 	/*
@@ -75,12 +85,6 @@ export default class Main extends ShadowComponent {
 			padding-right: var(--spacer);
 		}
 	`;
-
-	updated() {
-		super.updated();
-		this.style.setProperty('--left-panel-width', this.leftPanelWidth);
-		this.style.setProperty('--right-panel-width', this.rightPanelWidth);
-	}
 }
 
 window.customElements.define('k-main', Main);

package/src/components/Nav.js

@@ -0,0 +1,53 @@
+import { html, css } from '../lit-all.min.js';
+import ShadowComponent from './ShadowComponent.js';
+
+export default class Nav extends ShadowComponent {
+  static properties = {
+    fixed: { type: Boolean, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.fixed = false;
+  }
+
+  /*
+    Rendering
+  */
+  render() {
+    return html`<nav><slot></slot></nav>`;
+  }
+
+  /*
+    Styles
+  */
+  static styles = css`
+    :host {
+      display: block;
+    }
+    :host([fixed]) {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 50;
+    }
+    nav {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+    ::slotted(a) {
+      display: inline-block;
+      padding: var(--spacer);
+      text-decoration: none !important;
+    }
+    ::slotted(.link) {
+      display: inline-block;
+      padding: var(--spacer) !important;
+      text-decoration: none !important;
+    }
+  `;
+}
+
+customElements.define('k-nav', Nav);

package/src/components/PhotoViewer.js

@@ -244,7 +244,7 @@ export default class PhotoViewer extends ShadowComponent {
 			left: 0;
 			right: 0;
 			bottom: 0;
-			z-index: 9999;
+			z-index: 80;
 			background: rgba(0,0,0,0.9);
 			padding: 2rem;
 			display: none;

package/src/components/ShadowComponent.js

@@ -29,7 +29,7 @@ export default class ShadowComponent extends LitElement {
         
         const link = document.createElement('link');
         link.rel = 'stylesheet';
-        link.href = window.kempo?.pathToStylesheet || 'https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css';
+        link.href = window.kempo?.pathToStylesheet || 'https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css';
         shadowRoot.appendChild(link);
         
         // Inject component styles if they exist

package/src/components/ThemeSwitcher.js

@@ -74,6 +74,7 @@ export default class ThemeSwitcher extends ShadowComponent {
 		}
 		button.no-btn {
 			padding: var(--padding);
+			border-radius: var(--radius);
 		}
 	`;
 

package/src/components/Toast.js

@@ -384,7 +384,7 @@ class ToastContainer extends HTMLElement {
       display: flex;
       flex-direction: column;
       gap: 8px;
-      z-index: 1000;
+      z-index: 90;
       pointer-events: auto;
       padding: 32px;
       box-sizing: border-box;

package/tests/bin/get_icon.node-test.js

@@ -0,0 +1,26 @@
+import { execFile } from 'child_process';
+
+/*
+  Utility Functions
+*/
+
+const run = (args) => new Promise((resolve) => {
+  const proc = execFile('node', ['bin/get_icon.js', ...args], (error, stdout, stderr) => {
+    resolve({ code: proc.exitCode ?? error?.code, stdout, stderr });
+  });
+});
+
+/*
+  Tests
+*/
+
+export default {
+  'should exit with error when no icon name provided': async ({pass, fail}) => {
+    const {code, stderr} = await run([]);
+    if(code !== 0 && stderr.includes('Usage')){
+      pass('Shows usage and exits with error');
+    } else {
+      fail(`Expected error exit with usage, got code=${code}, stderr="${stderr}"`);
+    }
+  },
+};

package/tests/bin/highlight_code.node-test.js

@@ -0,0 +1,108 @@
+import { execFile } from 'child_process';
+
+/*
+  Utility Functions
+*/
+
+const run = (args, stdin) => new Promise((resolve) => {
+  const proc = execFile('node', ['bin/highlight_code.js', ...args], (error, stdout, stderr) => {
+    resolve({ code: proc.exitCode ?? error?.code, stdout, stderr });
+  });
+  if(stdin !== undefined){
+    proc.stdin.write(stdin);
+    proc.stdin.end();
+  }
+});
+
+/*
+  Tests
+*/
+
+export default {
+  'should exit with error when no arguments provided': async ({pass, fail}) => {
+    const {code, stderr} = await run([]);
+    if(code !== 0 && stderr.includes('Usage')){
+      pass('Shows usage and exits with error');
+    } else {
+      fail(`Expected error exit with usage message, got code=${code}, stderr="${stderr}"`);
+    }
+  },
+
+  'should exit with error for unknown language': async ({pass, fail}) => {
+    const {code, stderr} = await run(['fakeLang', 'code']);
+    if(code !== 0 && stderr.includes('Unknown language')){
+      pass('Shows unknown language error');
+    } else {
+      fail(`Expected unknown language error, got code=${code}, stderr="${stderr}"`);
+    }
+  },
+
+  'should highlight JavaScript passed as argument': async ({pass, fail}) => {
+    const {stdout} = await run(['js', 'const x = 1;']);
+    if(stdout.includes('<pre><code class="hljs javascript">') &&
+       stdout.includes('</code></pre>') &&
+       stdout.includes('<span class="hljs-keyword">const</span>')){
+      pass('JavaScript highlighted correctly with wrapper');
+    } else {
+      fail(`Unexpected output: ${stdout}`);
+    }
+  },
+
+  'should highlight HTML passed as argument': async ({pass, fail}) => {
+    const {stdout} = await run(['html', '<div>hello</div>']);
+    if(stdout.includes('<pre><code class="hljs html">') &&
+       stdout.includes('</code></pre>') &&
+       stdout.includes('hljs-name')){
+      pass('HTML highlighted correctly with wrapper');
+    } else {
+      fail(`Unexpected output: ${stdout}`);
+    }
+  },
+
+  'should accept language aliases': async ({pass, fail}) => {
+    const {stdout} = await run(['js', 'let x = 1;']);
+    if(stdout.includes('class="hljs javascript"')){
+      pass('Alias "js" resolved to "javascript"');
+    } else {
+      fail(`Alias not resolved: ${stdout}`);
+    }
+  },
+
+  'should read code from stdin': async ({pass, fail}) => {
+    const {stdout} = await run(['css'], 'body { color: red; }');
+    if(stdout.includes('<pre><code class="hljs css">') &&
+       stdout.includes('</code></pre>')){
+      pass('stdin input highlighted correctly');
+    } else {
+      fail(`Unexpected output: ${stdout}`);
+    }
+  },
+
+  'should convert newlines to <br> tags': async ({pass, fail}) => {
+    const {stdout} = await run(['js'], 'const x = 1;\nconst y = 2;');
+    if(stdout.includes('<br>') && !stdout.includes('\n</code>')){
+      pass('Newlines converted to <br>');
+    } else {
+      fail(`Expected <br> tags: ${stdout}`);
+    }
+  },
+
+  'should output a single line': async ({pass, fail}) => {
+    const {stdout} = await run(['html'], '<div>\n  <p>hello</p>\n</div>');
+    const lines = stdout.trim().split('\n');
+    if(lines.length === 1){
+      pass('Output is a single line');
+    } else {
+      fail(`Expected 1 line, got ${lines.length}`);
+    }
+  },
+
+  'should beautify code before highlighting': async ({pass, fail}) => {
+    const {stdout} = await run(['html', '<div><p>hello</p></div>']);
+    if(stdout.includes('<br>')){
+      pass('Beautifier added line breaks (converted to <br>)');
+    } else {
+      fail(`Expected beautified output with <br>: ${stdout}`);
+    }
+  },
+};

package/tests/bin/list_icons.node-test.js

@@ -0,0 +1,26 @@
+import { execFile } from 'child_process';
+
+/*
+  Utility Functions
+*/
+
+const run = (args) => new Promise((resolve) => {
+  const proc = execFile('node', ['bin/list_icons.js', ...args], (error, stdout, stderr) => {
+    resolve({ code: proc.exitCode ?? error?.code, stdout, stderr });
+  });
+});
+
+/*
+  Tests
+*/
+
+export default {
+  'should exit with error when no search term provided': async ({pass, fail}) => {
+    const {code, stderr} = await run([]);
+    if(code !== 0 && stderr.includes('Usage')){
+      pass('Shows usage and exits with error');
+    } else {
+      fail(`Expected error exit with usage, got code=${code}, stderr="${stderr}"`);
+    }
+  },
+};