kempo-ui 0.0.67 → 0.0.69

package/src/components/Tree.js

@@ -1,15 +1,17 @@
-import ShadowComponent from './ShadowComponent.js';
-import { html, css, render } from '../lit-all.min.js';
+import ShadowComponent from './ShadowComponent.js';
+import { html, css } from '../lit-all.min.js';
 import { boolExists } from '../utils/propConverters.js';
 import './Icon.js';
 
+let nodeTagCounter = 0;
+
 export default class Tree extends ShadowComponent {
 	/* Properties */
 	static properties = {
 		data: { type: Object },
 		depth: { type: Number, reflect: true },
 		editable: { type: Boolean, converter: boolExists, attribute: 'editable', reflect: true }
-	}
+	};
 
 	constructor(){
 		super();
@@ -20,129 +22,129 @@ export default class Tree extends ShadowComponent {
 
 	/* Rendering */
 	render(){
-		if(!this.data){
-			return html`<slot></slot>`;
-		}
-
-		if(typeof this.data === 'object' && this.data !== null){
+		if(this.data === null || this.data === undefined) return html`<slot></slot>`;
+		if(Tree.nodes.find(n => n.detect(this.data))){
 			return html`
 				<div class="tree-root">
-					${(Array.isArray(this.data)
-						? this.data.map((v, i) => [i, v])
-						: Object.entries(this.data)
-					).map(([key, value]) => Tree.renderValue(value, key, 1, this.depth))}
+					${Tree.renderValue(this.data, null, 0, this.depth)}
 				</div>
 			`;
 		}
-
+		const entries = Array.isArray(this.data)
+			? this.data.map((v, i) => [i, v])
+			: typeof this.data === 'object'
+				? Object.entries(this.data)
+				: null;
 		return html`
 			<div class="tree-root">
-				${Tree.renderValue(this.data, null, 0, this.depth)}
+				${entries
+					? entries.map(([key, value]) => Tree.renderValue(value, key, 1, this.depth))
+					: Tree.renderValue(this.data, null, 0, this.depth)}
 			</div>
 		`;
 	}
 
-	/* Leaf Definitions */
-	static leafs = [];
+	/* Node Registry */
+	static nodes = [];
 
-	static addLeaf = (...leafs) => {
-		leafs.forEach(leaf => Tree.leafs.unshift(leaf));
+	static addNode = (...nodes) => {
+		[...nodes].reverse().forEach(node => {
+			if(!Object.prototype.hasOwnProperty.call(node, 'nodeTag')){
+				node.nodeTag = `k-tree-node-${nodeTagCounter++}`;
+				window.customElements.define(node.nodeTag, node);
+			}
+			Tree.nodes.unshift(node);
+		});
 	};
 
 	/* Static Methods */
-	static renderValue(value, key = null, currentDepth = 0, maxDepth = 0){
-		const LeafClass = Tree.leafs.find(leaf => leaf.detect(value));
-
-		if(LeafClass){
-			const wrapper = document.createElement('span');
-			wrapper.className = 'd-b';
-			if(key !== null){
-				const keyLabel = document.createElement('span');
-				keyLabel.className = typeof key === 'number' ? 'tc-muted' : '';
-				keyLabel.textContent = `${key}: `;
-				wrapper.appendChild(keyLabel);
-			}
-			const leaf = new LeafClass(value);
-			const rendered = leaf.render();
-			if(rendered instanceof Node){
-				wrapper.appendChild(rendered);
-			} else {
-				const span = document.createElement('span');
-				render(rendered, span);
-				wrapper.appendChild(span);
-			}
-			return wrapper;
-		}
-
-		if(typeof value === 'object' && value !== null){
-			const branch = new TreeBranch();
-			branch.value = value;
-			branch.key = key;
-			branch.currentDepth = currentDepth;
-			branch.maxDepth = maxDepth;
-			return branch;
-		}
-
-		return html`<span class="d-b primitive">${key !== null ? html`<span class="${typeof key === 'number' ? 'tc-muted' : ''}">${key}: </span>` : ''}${value}</span>`;
+	static renderValue(value, key = null, depth = 0, maxDepth = 0){
+		const NodeClass = Tree.nodes.find(n => n.detect(value)) ?? TreeNode;
+		const el = document.createElement(NodeClass.nodeTag);
+		el.value = value;
+		el.key = key;
+		el.depth = depth;
+		el.maxDepth = maxDepth;
+		return el;
 	}
 }
 
 window.customElements.define('k-tree', Tree);
 
-export class TreeBranch extends ShadowComponent {
+export class TreeNode extends ShadowComponent {
+	static nodeTag = 'k-tree-node';
+
 	/* Properties */
 	static properties = {
 		value: { type: Object },
-		key: { type: String },
-		currentDepth: { type: Number },
+		key: { attribute: false },
+		depth: { type: Number },
 		maxDepth: { type: Number },
-		opened: { type: Boolean, converter: boolExists, reflect: true }
+		opened: { type: Boolean, converter: boolExists, reflect: true },
+		icon: { type: String }
 	};
 
 	constructor(){
 		super();
 		this.value = null;
 		this.key = null;
-		this.currentDepth = 0;
+		this.depth = 0;
 		this.maxDepth = 0;
 		this.opened = false;
+		this.icon = null;
 	}
 
 	/* Lifecycle */
 	connectedCallback(){
 		super.connectedCallback();
-		if(this.currentDepth <= this.maxDepth){
-			this.opened = true;
-		}
+		if(this.depth <= this.maxDepth) this.opened = true;
 	}
 
 	/* Members */
-	get tree(){
-		return this.closest('k-tree');
-	}
+	get tree(){ return this.closest('k-tree'); }
 
 	/* Event Handlers */
-	toggle = () => {
-		this.opened = !this.opened;
-	};
+	toggle = () => { this.opened = !this.opened; };
 
 	/* Rendering */
+	renderLabel(){
+		if(typeof this.value === 'object' && this.value !== null){
+			return html`${Array.isArray(this.value) ? 'Array' : 'Object'}`;
+		}
+		return html`${this.value}`;
+	}
+
+	getChildren(){
+		if(typeof this.value !== 'object' || this.value === null) return null;
+		return Array.isArray(this.value)
+			? this.value.map((v, i) => [i, v])
+			: Object.entries(this.value);
+	}
+
+	renderIcon(){
+		if(this.icon) return html`<k-icon name="${this.icon}"></k-icon>`;
+		return html`<k-icon name="chevron" class="toggle-icon" direction="${this.opened ? 'down' : 'right'}"></k-icon>`;
+	}
+
 	render(){
-		const label = this.key !== null ? `${this.key}: ` : '';
-		const type = Array.isArray(this.value) ? 'Array' : 'Object';
+		const children = this.getChildren();
+		const keyLabel = this.key !== null
+			? html`<span class="${typeof this.key === 'number' ? 'tc-muted' : ''}">${this.key}: </span>`
+			: '';
+
+		if(!children){
+			return html`<span class="d-b">${keyLabel}${this.renderLabel()}</span>`;
+		}
 
 		return html`
 			<div>
 				<button class="branch-label no-btn" @click=${this.toggle} aria-expanded="${this.opened}">
-					<k-icon name="chevron-right" class="toggle-icon ${this.opened ? 'opened' : ''}"></k-icon>
-					${label}${type}
+					${this.renderIcon()}
+					${keyLabel}${this.renderLabel()}
 				</button>
 				${this.opened ? html`
 					<div class="pl">
-						${this.value ? (Array.isArray(this.value)
-							? this.value.map((v, i) => [i, v])
-							: Object.entries(this.value)
-						).map(([key, value]) => Tree.renderValue(value, key, this.currentDepth + 1, this.maxDepth)) : ''}
+						${children.map(([k, v]) => Tree.renderValue(v, k, this.depth + 1, this.maxDepth))}
 					</div>
 				` : ''}
 			</div>
@@ -164,81 +166,37 @@ export class TreeBranch extends ShadowComponent {
 		.branch-label:focus-visible{
 			box-shadow: var(--focus_shadow);
 		}
-		.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(value = null){
-		this.value = value;
-	}
-
-	/* Rendering */
-	render(){
-		return html`${this.value}`;
-	}
-
-	/* Static Methods */
-	static detect = () => {
-		return false;
-	};
+	static detect = () => false;
 }
 
-export class StringLeaf extends TreeLeaf {
-	/* Rendering */
-	render(){
-		return html`<span class="tc-success">"${this.value}"</span>`;
-	}
+window.customElements.define('k-tree-node', TreeNode);
 
-	/* Static Methods */
-	static detect = value => typeof value === 'string';
+export class StringNode extends TreeNode {
+	renderLabel(){ return html`<span class="tc-success">"${this.value}"</span>`; }
+	static detect = v => typeof v === 'string';
 }
 
-export class NumberLeaf extends TreeLeaf {
-	/* Rendering */
-	render(){
-		return html`<span class="tc-primary">${this.value}</span>`;
-	}
-
-	/* Static Methods */
-	static detect = value => typeof value === 'number';
+export class NumberNode extends TreeNode {
+	renderLabel(){ return html`<span class="tc-primary">${this.value}</span>`; }
+	static detect = v => typeof v === 'number';
 }
 
-export class BooleanLeaf extends TreeLeaf {
-	/* Rendering */
-	render(){
-		return html`<span class="${this.value ? 'tc-success' : 'tc-danger'}">${this.value}</span>`;
-	}
-
-	/* Static Methods */
-	static detect = value => typeof value === 'boolean';
+export class BooleanNode extends TreeNode {
+	renderLabel(){ return html`<span class="${this.value ? 'tc-success' : 'tc-danger'}">${this.value}</span>`; }
+	static detect = v => typeof v === 'boolean';
 }
 
-export class NullLeaf extends TreeLeaf {
-	/* Rendering */
-	render(){
-		return html`<span class="tc-muted">null</span>`;
-	}
-	
-	/* Static Methods */
-	static detect = value => value === null;
+export class NullNode extends TreeNode {
+	renderLabel(){ return html`<span class="tc-muted">null</span>`; }
+	static detect = v => v === null;
 }
 
-export class UndefinedLeaf extends TreeLeaf {
-	/* Rendering */
-	render(){
-		return html`<span class="tc-muted">undefined</span>`;
-	}
-
-	/* Static Methods */
-	static detect = value => value === undefined;
+export class UndefinedNode extends TreeNode {
+	renderLabel(){ return html`<span class="tc-muted">undefined</span>`; }
+	static detect = v => v === undefined;
 }
 
-Tree.addLeaf(UndefinedLeaf, NullLeaf, BooleanLeaf, NumberLeaf, StringLeaf);
+Tree.addNode(StringNode, NumberNode, BooleanNode, NullNode, UndefinedNode);
+

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

@@ -512,6 +512,37 @@ export default {
 		pass('Label content projected');
 	},
 
+	'switch should not shrink in constrained container': async ({pass, fail}) => {
+		const { container, toggle } = await createToggle();
+		container.style.width = '100px';
+		await toggle.updateComplete;
+		const switchEl = toggle.shadowRoot.querySelector('#switch');
+		const style = window.getComputedStyle(switchEl);
+		if(style.flexShrink !== '0'){
+			cleanup(container);
+			return fail(`Expected switch flex-shrink to be 0, got ${style.flexShrink}`);
+		}
+		if(style.flexGrow !== '0'){
+			cleanup(container);
+			return fail(`Expected switch flex-grow to be 0, got ${style.flexGrow}`);
+		}
+		cleanup(container);
+		pass('Switch does not shrink in constrained container');
+	},
+
+	'label should shrink in constrained container': async ({pass, fail}) => {
+		const { container, toggle } = await createToggle();
+		await toggle.updateComplete;
+		const label = toggle.shadowRoot.querySelector('#label');
+		const style = window.getComputedStyle(label);
+		if(style.flexGrow !== '1'){
+			cleanup(container);
+			return fail(`Expected label flex-grow to be 1, got ${style.flexGrow}`);
+		}
+		cleanup(container);
+		pass('Label grows to fill remaining space');
+	},
+
 	/*
 		Method Chaining
 	*/