kempo-ui 0.0.2 → 0.0.3

package/src/components/HybridComponent.js

@@ -1,40 +1,40 @@
-import { html, render } from '../lit-all.min.js';
-import ShadowComponent from './ShadowComponent.js';
-
-export default class HybridComponent extends ShadowComponent {
-
-	/*
-	  Shadow DOM Setup
-	*/
-
-	createRenderRoot() {
-		const renderContainer = super.createRenderRoot();
-		
-		this.lightRoot = document.createElement('div');
-		this.lightRoot.style.display = 'contents';
-		this.lightRoot.slot = 'lightRoot';
-		this.appendChild(this.lightRoot);
-		
-		return renderContainer;
-	}
-
-	/*
-	  Lifecycle Callbacks
-	*/
-
-	updated() {
-		render(this.renderLightDom(), this.lightRoot);
-	}
-
-	/*
-	  Rendering
-	*/
-
-	renderLightDom() {
-		return html``;
-	}
-
-	render() {
-		return html`<slot name="lightRoot"></slot>`;
-	}
-}
+import { html, render } from '../lit-all.min.js';
+import ShadowComponent from './ShadowComponent.js';
+
+export default class HybridComponent extends ShadowComponent {
+
+	/*
+	  Shadow DOM Setup
+	*/
+
+	createRenderRoot() {
+		const renderContainer = super.createRenderRoot();
+		
+		this.lightRoot = document.createElement('div');
+		this.lightRoot.style.display = 'contents';
+		this.lightRoot.slot = 'lightRoot';
+		this.appendChild(this.lightRoot);
+		
+		return renderContainer;
+	}
+
+	/*
+	  Lifecycle Callbacks
+	*/
+
+	updated() {
+		render(this.renderLightDom(), this.lightRoot);
+	}
+
+	/*
+	  Rendering
+	*/
+
+	renderLightDom() {
+		return html``;
+	}
+
+	render() {
+		return html`<slot name="lightRoot"></slot>`;
+	}
+}

package/src/components/Icon.js

@@ -0,0 +1,155 @@
+import ShadowComponent from './ShadowComponent.js';
+import { html, css, unsafeHTML } from '../lit-all.min.js';
+
+const cache = {};
+
+const getIconByPath = async (path) => {
+	if (!cache[path]) {
+		cache[path] = new Promise(async (resolve, reject) => {
+			const controller = new AbortController();
+			const signal = controller.signal;
+			try {
+				const response = await fetch(path, { signal });
+				if (response.status === 200) {
+					resolve(await response.text());
+				} else if (response.status === 404) {
+					resolve(null);
+				}
+			} catch (e) {
+				if (e.name !== 'AbortError') {
+					reject(e);
+				}
+			}
+		}).catch(() => null);
+	}
+	return await cache[path];
+};
+
+const getIconByName = (name) => {
+	const tryDir = async (dir) => getIconByPath(`${dir}/${name}.svg`);
+
+	return new Promise(async (resolve, reject) => {
+		let svg;
+		for(let i = 0; i < Icon.pathToIcons.length && !svg; i++){
+			try {
+				svg = await tryDir(Icon.pathToIcons[i]);
+			} catch(e){}
+		}
+		if(svg){
+			resolve(svg);
+		} else {
+			resolve(null);
+		}
+	});
+};
+
+export default class Icon extends ShadowComponent {
+	/*
+		Properties
+	*/
+	static properties = {
+		src: { type: String, reflect: true },
+		name: { type: String, reflect: true },
+		iconContent: { type: String }
+	};
+
+	constructor(name = '') {
+		super();
+		this.src = '';
+		this.name = name;
+		this.iconContent = '';
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	updated(changedProperties) {
+		super.updated();
+		
+		if (changedProperties.has('src') || changedProperties.has('name')) {
+			this.loadIcon();
+		}
+
+		if (changedProperties.has('iconContent')) {
+			this.fixSVG();
+		}
+	}
+
+	/*
+		Methods
+	*/
+	async loadIcon() {
+		let svg;
+		
+		if (this.src) {
+			svg = await getIconByPath(this.src);
+		} else if (this.name) {
+			svg = await getIconByName(this.name);
+		}
+		
+		if (svg) {
+			this.iconContent = svg;
+		} else {
+			// Check for slotted fallback content first
+			const slottedContent = this.innerHTML.trim();
+			if (slottedContent) {
+				this.iconContent = slottedContent;
+			} else {
+				this.iconContent = Icon.fallback;
+			}
+		}
+	}
+
+	fixSVG() {
+		// Use setTimeout to ensure DOM is updated
+		setTimeout(() => {
+			const $svg = this.querySelector('svg');
+			if ($svg) {
+				$svg.removeAttribute('width');
+				$svg.removeAttribute('height');
+				$svg.querySelectorAll('path, rect, circle').forEach($path => {
+					$path.setAttribute('fill', 'currentColor');
+				});
+			}
+		}, 0);
+	}
+
+	/*
+		Styles
+	*/
+	static styles = css`
+		:host {
+			display: inline-block;
+			vertical-align: bottom;
+		}
+		::slotted(svg), svg {
+			height: 1.35em;
+			vertical-align: middle;
+		}
+	`;
+
+	/*
+		Rendering
+	*/
+	render() {
+		if (!this.iconContent) {
+			// Show slotted content while loading
+			return html`<slot></slot>`;
+		}
+		
+		return html`${unsafeHTML(this.iconContent)}`;
+	}
+
+	/*
+		Static Properties
+	*/
+	static pathToIcons = [
+		'/icons'
+	];
+
+	static fallback = `
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>
+	`;
+}
+
+window.customElements.define('k-icon', Icon);

package/src/components/Import.js

@@ -0,0 +1,104 @@
+import LightComponent from './LightComponent.js';
+import { html, render, unsafeHTML } from '../lit-all.min.js';
+
+export default class Import extends LightComponent {
+	/*
+		Properties
+	*/
+	static properties = {
+		src: {
+			type: String,
+			reflect: true
+		},
+		content: {
+			type: String
+		},
+		scripts: {
+			type: Array
+		}
+	}
+
+	static replacements = {}
+	constructor(){
+		super();
+		this.src = '';
+		this.content = '';
+		this.scripts = [];
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	updated(changedProperties){
+		super.updated(); // Important: call super for LightComponent
+		
+		if(changedProperties.has('src')){
+			this.fetch();
+		}
+		
+		if(changedProperties.has('content') && this.scripts.length > 0){
+			// Execute scripts after DOM content is rendered
+			setTimeout(() => this.executeScripts(), 0);
+		}
+	}
+
+	/*
+		Methods
+	*/
+	async fetch(){
+		let contents = await (await fetch(this.src)).text();
+		for (const [name, value] of Object.entries(Import.replacements)) {
+			contents = contents.replace(new RegExp(`%%${name}%%`, 'g'), value);
+		}
+		
+		// Parse the HTML to extract scripts
+		const parser = new DOMParser();
+		const doc = parser.parseFromString(contents, 'text/html');
+		const scriptElements = doc.querySelectorAll('script');
+		
+		// Extract script sources and inline code
+		this.scripts = Array.from(scriptElements).map(script => ({
+			src: script.src,
+			text: script.textContent,
+			type: script.type || 'text/javascript'
+		}));
+		
+		// Remove script tags from the content
+		scriptElements.forEach(script => script.remove());
+		
+		// Serialize back to string without scripts - use the entire body content
+		this.content = doc.body ? doc.body.innerHTML : contents;
+	}
+
+	executeScripts(){
+		this.scripts.forEach(script => {
+			const scriptElement = document.createElement('script');
+			scriptElement.type = script.type;
+			
+			if (script.src) {
+				scriptElement.src = script.src;
+			} else if (script.text) {
+				scriptElement.textContent = script.text;
+			}
+			
+			// Append to head to execute
+			document.head.appendChild(scriptElement);
+		});
+		
+		// Clear scripts after execution to avoid re-execution
+		this.scripts = [];
+	}
+
+	/*
+		Rendering
+	*/
+	renderLightDom() {
+		if (!this.content) {
+			return html``;
+		}
+		
+		// Use unsafeHTML to render the actual HTML content
+		return html`${unsafeHTML(this.content)}`;
+	}
+}
+window.customElements.define('k-import', Import);

package/src/components/LightComponent.js

@@ -1,32 +1,32 @@
-import { LitElement, html, render } from '../lit-all.min.js';
-
-export default class LightComponent extends LitElement {
-
-	/*
-	  Light DOM Setup
-	*/
-
-	createRenderRoot() {
-		this.lightRoot = document.createElement('div');
-		this.lightRoot.style.display = 'contents';
-		this.appendChild(this.lightRoot);
-		
-		return this;
-	}
-
-	/*
-	  Lifecycle Callbacks
-	*/
-
-	updated() {
-		render(this.renderLightDom(), this.lightRoot);
-	}
-
-	/*
-	  Rendering
-	*/
-
-	renderLightDom() {
-		return html``;
-	}
-}
+import { LitElement, html, render } from '../lit-all.min.js';
+
+export default class LightComponent extends LitElement {
+
+	/*
+	  Light DOM Setup
+	*/
+
+	createRenderRoot() {
+		this.lightRoot = document.createElement('div');
+		this.lightRoot.style.display = 'contents';
+		this.appendChild(this.lightRoot);
+		
+		return this;
+	}
+
+	/*
+	  Lifecycle Callbacks
+	*/
+
+	updated() {
+		render(this.renderLightDom(), this.lightRoot);
+	}
+
+	/*
+	  Rendering
+	*/
+
+	renderLightDom() {
+		return html``;
+	}
+}

package/src/components/ShadowComponent.js

@@ -1,17 +1,30 @@
-import { LitElement } from '../lit-all.min.js';
-
-export default class ShadowComponent extends LitElement {
-    createRenderRoot() {
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = '/kempo.min.css';
-        shadowRoot.appendChild(link);
-        
-        const renderContainer = document.createElement('div');
-        shadowRoot.appendChild(renderContainer);
-        
-        return renderContainer;
-    }
-}
+import { LitElement } from '../lit-all.min.js';
+
+export default class ShadowComponent extends LitElement {
+    createRenderRoot() {
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = '/kempo.min.css';
+        shadowRoot.appendChild(link);
+        
+        // Inject component styles if they exist
+        const styles = this.constructor.styles;
+        if (styles) {
+            const styleEl = document.createElement('style');
+            if (Array.isArray(styles)) {
+                styleEl.textContent = styles.map(s => s.cssText || s).join('\n');
+            } else {
+                styleEl.textContent = styles.cssText || styles;
+            }
+            shadowRoot.appendChild(styleEl);
+        }
+        
+        const renderContainer = document.createElement('div');
+        renderContainer.style.display = 'contents';
+        shadowRoot.appendChild(renderContainer);
+        
+        return renderContainer;
+    }
+}

package/src/components/SideMenu.js

@@ -0,0 +1,167 @@
+import ShadowComponent from './ShadowComponent.js';
+import { html, css } from '../lit-all.min.js';
+import { boolTrueFalse } from '../utils/propConverters.js';
+import './FocusCapture.js';
+
+export default class SideMenu extends ShadowComponent {
+	/*
+		Properties
+	*/
+	static properties = {
+		opened: { type: Boolean, reflect: true },
+		overlayClose: { type: Boolean, reflect: true, attribute: 'overlay-close', converter: boolTrueFalse },
+		side: { type: String, reflect: true }
+	};
+
+	constructor() {
+		super();
+		this.opened = false;
+		this.overlayClose = true;
+		this.side = 'left';
+	}
+
+	/*
+		Event Handlers
+	*/
+	overlayClick = () => {
+		if(this.overlayClose) this.close();
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		
+		if(changedProperties.has('opened')) {
+			if(this.opened) {
+				this.dispatchEvent(new CustomEvent('change', { detail: 'open' }));
+				this.dispatchEvent(new CustomEvent('open'));
+			} else {
+				this.dispatchEvent(new CustomEvent('change', { detail: 'close' }));
+				this.dispatchEvent(new CustomEvent('close'));
+			}
+		}
+	}
+
+	/*
+		Methods
+	*/
+	open() {
+		this.opened = true;
+	}
+
+	close() {
+		this.opened = false;
+	}
+
+	toggle() {
+		this.opened ? this.close() : this.open();
+		this.dispatchEvent(new CustomEvent('toggle'));
+	}
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<k-focus-capture>
+				<div id="container">
+					<button id="overlay" @click=${this.overlayClick}>
+						<div id="overlay-x">✕</div>
+					</button>
+					<div id="menu">
+						<slot></slot>
+					</div>
+				</div>
+			</k-focus-capture>
+		`;
+	}
+	static styles = css`
+		:host {
+			--bg: var(--c_bg);
+			--width: 20rem;
+
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100vw;
+			max-width: 100%;
+			height: 100vh;
+			z-index: 100;
+			pointer-events: none;
+		}
+		:host([opened]) {
+			pointer-events: auto;
+		}
+		k-focus-capture {
+			width: 100%;
+			height: 100%;
+		}
+		#container {
+			position: relative;
+			width: 100%;
+			height: 100%;
+			opacity: 0;
+			transition: opacity var(--animation_ms, 256ms);
+		}
+		:host([opened]) #container {
+			opacity: 1;
+		}
+		#overlay {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			left: 0;
+			top: 0;
+			background: var(--overlay, rgba(0, 0, 0, 0.5));
+			border: none;
+			padding: 0;
+			cursor: pointer;
+			z-index: 1;
+		}
+		#overlay-x {
+			position: absolute;
+			top: var(--spacer_h);
+			right: var(--spacer_h);
+			font-size: 1.75rem;
+			cursor: pointer;
+			color: var(--tc_light);
+		}
+		:host([overlay-close="false"]) #overlay-x {
+			display: none;
+		}
+		:host([overlay-close="false"]) #overlay {
+			cursor: default;
+		}
+		#menu {
+			position: absolute;
+			width: var(--width);
+			max-width: calc(100vw - 6rem);
+			height: 100vh;
+			overflow-y: auto;
+			left: calc(var(--width) * -1);
+			top: 0;
+			background: var(--bg);
+			transition: left var(--animation_ms, 256ms);
+			padding: var(--menu_padding, var(--spacer));
+			z-index: 2;
+		}
+		:host([opened]) #menu {
+			left: 0;
+		}
+		:host([side="right"]) #menu {
+			left: auto;
+			transition: right var(--animation_ms, 256ms);
+			right: calc(var(--width) * -1);
+		}
+		:host([opened][side="right"]) #menu {
+			right: 0;
+		}
+		:host([side="right"]) #overlay-x {
+			right: auto;
+			left: var(--spacer_h);
+		}
+	`;
+}
+window.customElements.define('k-side-menu', SideMenu);