kempo-ui 0.0.7 → 0.0.9

package/docs/src/components/Tree.js

@@ -0,0 +1,37 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css,render}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";export default class Tree extends ShadowComponent{static properties={data:{type:Object},depth:{type:Number,reflect:!0},editable:{type:Boolean,converter:boolExists,attribute:"editable",reflect:!0}};constructor(){super(),this.data=null,this.depth=0,this.editable=!1}render(){return this.data?"object"==typeof this.data&&null!==this.data?html`
+				<div class="tree-root">
+					${(Array.isArray(this.data)?this.data.map((e,t)=>[t,e]):Object.entries(this.data)).map(([e,t])=>Tree.renderValue(t,e,1,this.depth))}
+				</div>
+			`:html`
+			<div class="tree-root">
+				${Tree.renderValue(this.data,null,0,this.depth)}
+			</div>
+		`:html`<slot></slot>`}static leafs=[];static addLeaf=(...e)=>{e.forEach(e=>Tree.leafs.unshift(e))};static renderValue(e,t=null,s=0,r=0){const a=Tree.leafs.find(t=>t.detect(e));if(a){const s=document.createElement("span");if(s.className="d-b",null!==t){const e=document.createElement("span");e.className="number"==typeof t?"tc-muted":"",e.textContent=`${t}: `,s.appendChild(e)}const r=new a(e).render();if(r instanceof Node)s.appendChild(r);else{const e=document.createElement("span");render(r,e),s.appendChild(e)}return s}if("object"==typeof e&&null!==e){const a=new TreeBranch;return a.value=e,a.key=t,a.currentDepth=s,a.maxDepth=r,a}return html`<span class="d-b primitive">${null!==t?html`<span class="${"number"==typeof t?"tc-muted":""}">${t}: </span>`:""}${e}</span>`}}window.customElements.define("k-tree",Tree);export class TreeBranch extends ShadowComponent{static properties={value:{type:Object},key:{type:String},currentDepth:{type:Number},maxDepth:{type:Number},opened:{type:Boolean,converter:boolExists,reflect:!0}};constructor(){super(),this.value=null,this.key=null,this.currentDepth=0,this.maxDepth=0,this.opened=!1}connectedCallback(){super.connectedCallback(),this.currentDepth<=this.maxDepth&&(this.opened=!0)}get tree(){return this.closest("k-tree")}toggle=()=>{this.opened=!this.opened};render(){const e=null!==this.key?`${this.key}: `:"",t=Array.isArray(this.value)?"Array":"Object";return html`
+			<div>
+				<div class="branch-label" @click=${this.toggle}>
+					<k-icon name="chevron-right" class="toggle-icon ${this.opened?"opened":""}"></k-icon>
+					${e}${t}
+				</div>
+				${this.opened?html`
+					<div class="pl">
+						${this.value?(Array.isArray(this.value)?this.value.map((e,t)=>[t,e]):Object.entries(this.value)).map(([e,t])=>Tree.renderValue(t,e,this.currentDepth+1,this.maxDepth)):""}
+					</div>
+				`:""}
+			</div>
+		`}static styles=css`
+		:host{
+			display: block;
+		}
+		.branch-label{
+			cursor: pointer;
+		}
+		.branch-label:hover{
+			background-color: var(--c_bg__alt, #f5f5f5);
+		}
+		.toggle-icon{
+			transition: transform var(--animation_ms, 200ms);
+		}
+		.toggle-icon.opened{
+			transform: rotate(90deg);
+		}
+	`}window.customElements.define("k-tree-branch",TreeBranch);export class TreeLeaf{constructor(e=null){this.value=e}render(){return html`${this.value}`}static detect=()=>!1}export class StringLeaf extends TreeLeaf{render(){return html`<span class="tc-success">"${this.value}"</span>`}static detect=e=>"string"==typeof e}export class NumberLeaf extends TreeLeaf{render(){return html`<span class="tc-primary">${this.value}</span>`}static detect=e=>"number"==typeof e}export class BooleanLeaf extends TreeLeaf{render(){return html`<span class="${this.value?"tc-success":"tc-danger"}">${this.value}</span>`}static detect=e=>"boolean"==typeof e}export class NullLeaf extends TreeLeaf{render(){return html`<span class="tc-muted">null</span>`}static detect=e=>null===e}export class UndefinedLeaf extends TreeLeaf{render(){return html`<span class="tc-muted">undefined</span>`}static detect=e=>void 0===e}Tree.addLeaf(UndefinedLeaf,NullLeaf,BooleanLeaf,NumberLeaf,StringLeaf);

package/docs/utils/debounce.html

@@ -8,12 +8,7 @@
   <link rel="stylesheet" href="../kempo.min.css" />
   <link rel="stylesheet" href="../src/kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>

package/docs/utils/drag.html

@@ -8,12 +8,7 @@
   <link rel="stylesheet" href="../kempo.min.css" />
   <link rel="stylesheet" href="../src/kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>

package/docs/utils/formatTimestamp.html

@@ -8,12 +8,7 @@
   <link rel="stylesheet" href="../kempo.min.css" />
   <link rel="stylesheet" href="../src/kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>

package/docs/utils/init.js

@@ -0,0 +1,7 @@
+import Import from '../src/components/Import.js';
+import Icon from '../src/components/Icon.js';
+import ShadowComponent from '../src/components/ShadowComponent.js';
+
+Import.replacements.root = '../';
+Icon.pathToIcons = ['../icons'];
+ShadowComponent.stylesheetPath = '../kempo.min.css';

package/docs/utils/propConverters.html

@@ -8,12 +8,7 @@
   <link rel="stylesheet" href="../kempo.min.css" />
   <link rel="stylesheet" href="../src/kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>

package/docs/utils/toTitleCase.html

@@ -8,12 +8,7 @@
   <link rel="stylesheet" href="../kempo.min.css" />
   <link rel="stylesheet" href="../src/kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>

package/docs/utils/watchWindowSize.html

@@ -8,12 +8,7 @@
   <link rel="stylesheet" href="../kempo.min.css" />
   <link rel="stylesheet" href="../src/kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
-  <script type="module">
-    import Import from '../src/components/Import.js';
-    import Icon from '../src/components/Icon.js';
-    Import.replacements.root = '../';
-    Icon.pathToIcons = ['../icons'];
-  </script>
+  <script type="module" src="./init.js"></script>
 </head>
 <body>
   <k-import src="../nav.inc.html"></k-import>

package/package.json

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

package/scripts/build.js

@@ -48,13 +48,23 @@ process.stdout.write(`0/${allJSFiles.length} = 0%`);
 const processedJS = {};
 await Promise.all(allJSFiles.map(async jsFile => {
   const filename = path.basename(jsFile);
+  let code = jsCode[jsFile];
+  
   if (filename.endsWith('.min.js')) {
     // Already minified, just copy
-    processedJS[jsFile] = jsCode[jsFile];
+    processedJS[jsFile] = code;
   } else {
     // Minify the file
-    processedJS[jsFile] = (await minify(jsCode[jsFile])).code;
+    code = (await minify(code)).code;
   }
+  
+  // Convert absolute paths to relative paths for GitHub Pages compatibility
+  // This handles paths in ShadowComponent and Icon
+  code = code.replace(/stylesheetPath\s*=\s*"\/kempo\.min\.css"/g, 'stylesheetPath="./kempo.min.css"');
+  code = code.replace(/pathToIcons\s*=\s*\["\/icons"\]/g, 'pathToIcons=["./icons"]');
+  
+  processedJS[jsFile] = code;
+  
   process.stdout.write("\r");
   complete++;
   process.stdout.write(`${complete}/${allJSFiles.length} = ${Math.round((complete/allJSFiles.length)*100)}%`);

package/src/components/Card.js

@@ -11,7 +11,7 @@ export default class Card extends ShadowComponent {
 
 	constructor() {
 		super();
-		this.label = '';
+		this.label = null;
 	}
 
 	/*
@@ -38,12 +38,9 @@ export default class Card extends ShadowComponent {
 			border-radius: var(--radius);
 			padding: var(--spacer_h);
 		}
-		:host([label]) {
-			padding-top: calc(1.5 * var(--spacer));
-			margin-top: var(--spacer);
-		}
 		:host([label]) #card {
 			padding-top: calc(1.5 * var(--spacer));
+			margin-top: var(--spacer);
 		}
 		:host(:not([label])) #label {
 			display: none;

package/src/components/Dialog.js

@@ -227,13 +227,13 @@ export default class Dialog extends ShadowComponent {
 		return html`
 			<button id="overlay" aria-label="Close the Dialog" @click=${this.handleClick}></button>
 			<div id="wrapper">
-				<div
-					id="dialog"
-					role="dialog"
-					aria-modal="true"
-					aria-labelledby="title"
-				>
-					<k-focus-capture>
+				<k-focus-capture>
+					<div
+						id="dialog"
+						role="dialog"
+						aria-modal="true"
+						aria-labelledby="title"
+					>
 						<div
 							id="header"
 							class="${this.hasTitle() ? 'has-title' : ''}"
@@ -264,8 +264,8 @@ export default class Dialog extends ShadowComponent {
 								` : ''}
 							</div>
 						` : ''}
-					</k-focus-capture>
-				</div>
+					</div>
+				</k-focus-capture>
 			</div>
 		`;
 	}
@@ -280,7 +280,9 @@ export default class Dialog extends ShadowComponent {
 
 		const {
 			removeOnClose = true,
-			closeCallback = () => {}
+			closeCallback = () => {},
+			title = '',
+			titleClasses = 'pyh px m0'
 		} = options;
 
 		const dialog = new Dialog();
@@ -297,11 +299,33 @@ export default class Dialog extends ShadowComponent {
 			}
 		});
 
+		// Set title if provided
+		if(title) {
+			const titleElement = document.createElement('h5');
+			titleElement.slot = 'title';
+			titleElement.className = titleClasses;
+			if(title instanceof HTMLElement) {
+				titleElement.appendChild(title);
+			} else {
+				titleElement.innerHTML = title;
+			}
+			dialog.appendChild(titleElement);
+		}
+
 		// Set content
 		if(contents instanceof HTMLElement || contents instanceof DocumentFragment) {
 			dialog.appendChild(contents);
 		} else if(contents) {
-			dialog.innerHTML = contents;
+			// Check if content is plain text (no HTML tags)
+			const hasHtmlTags = /<[^>]+>/.test(contents);
+			if(hasHtmlTags) {
+				dialog.innerHTML += contents;
+			} else {
+				const p = document.createElement('p');
+				p.className = 'p';
+				p.textContent = contents;
+				dialog.appendChild(p);
+			}
 		}
 
 		// Set CSS custom properties for dimensions
@@ -319,11 +343,8 @@ export default class Dialog extends ShadowComponent {
 	}
 
 	static confirm(text, responseCallback, options = {}) {
-		const title = options.title || 'Confirm';
-		return Dialog.create(`
-			<h5 slot="title" class="pyh px m0">${title}</h5>
-			<p class="p">${text}</p>
-		`, {
+		return Dialog.create(text, {
+			title: options.title || 'Confirm',
 			closeBtn: false,
 			overlayClose: false,
 			confirmText: 'Yes',
@@ -336,36 +357,29 @@ export default class Dialog extends ShadowComponent {
 		});
 	}
 
-	static alert(text, responseCallback, options = {}) {
-		const title = options.title || 'Alert';
-		return Dialog.create(`
-			<h5 slot="title" class="pyh px m0">${title}</h5>
-			<p class="p">${text}</p>
-		`, {
+	static alert(text, responseCallback = () => {}, options = {}) {
+		return Dialog.create(text, {
+			title: options.title || 'Alert',
 			closeCallback: responseCallback,
 			cancelText: 'Ok',
 			...options
 		});
 	}
 
-	static error(text, responseCallback, options = {}) {
-		const title = options.title || 'Error';
-		return Dialog.create(`
-			<h5 slot="title" class="pyh px m0 tc-danger">${title}</h5>
-			<p class="p">${text}</p>
-		`, {
+	static error(text, responseCallback = () => {}, options = {}) {
+		return Dialog.create(text, {
+			title: options.title || 'Error',
+			titleClasses: 'pyh px m0 tc-danger',
 			closeCallback: responseCallback,
 			cancelText: 'Ok',
 			...options
 		});
 	}
 
-	static success(text, responseCallback, options = {}) {
-		const title = options.title || 'Success';
-		return Dialog.create(`
-			<h5 slot="title" class="pyh px m0 tc-success">${title}</h5>
-			<p class="p">${text}</p>
-		`, {
+	static success(text, responseCallback = () => {}, options = {}) {
+		return Dialog.create(text, {
+			title: options.title || 'Success',
+			titleClasses: 'pyh px m0 tc-success',
 			closeCallback: responseCallback,
 			cancelText: 'Ok',
 			...options

package/src/components/Icon.js

@@ -69,10 +69,6 @@ export default class Icon extends ShadowComponent {
 		if (changedProperties.has('src') || changedProperties.has('name')) {
 			this.loadIcon();
 		}
-
-		if (changedProperties.has('iconContent')) {
-			this.fixSVG();
-		}
 	}
 
 	/*
@@ -88,30 +84,41 @@ export default class Icon extends ShadowComponent {
 		}
 		
 		if (svg) {
-			this.iconContent = svg;
+			this.iconContent = this.fixSVG(svg);
 		} else {
 			// Check for slotted fallback content first
 			const slottedContent = this.innerHTML.trim();
 			if (slottedContent) {
-				this.iconContent = slottedContent;
+				this.iconContent = this.fixSVG(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);
+	fixSVG(svgString) {
+		if(!svgString) return svgString;
+		
+		// Parse the SVG string and fix attributes
+		const parser = new DOMParser();
+		const doc = parser.parseFromString(svgString, 'image/svg+xml');
+		const $svg = doc.querySelector('svg');
+		
+		if($svg) {
+			// Remove width and height attributes
+			$svg.removeAttribute('width');
+			$svg.removeAttribute('height');
+			
+			// Set fill to currentColor on all paths, rects, and circles
+			$svg.querySelectorAll('path, rect, circle').forEach($el => {
+				$el.setAttribute('fill', 'currentColor');
+			});
+			
+			// Return the fixed SVG as a string
+			return new XMLSerializer().serializeToString($svg);
+		}
+		
+		return svgString;
 	}
 
 	/*