kempo-ui 0.3.14 → 0.3.16

package/src/components/Combobox.js

@@ -0,0 +1,338 @@
+import { html, css } from '../lit-all.min.js';
+import ShadowComponent from './ShadowComponent.js';
+import debounce from '../utils/debounce.js';
+import './Option.js';
+
+export default class Combobox extends ShadowComponent {
+	static formAssociated = true;
+
+	static properties = {
+		value: { type: String, reflect: true },
+		name: { type: String, reflect: true },
+		placeholder: { type: String },
+		opened: { type: Boolean, reflect: true },
+		searching: { type: Boolean, reflect: true },
+		required: { type: Boolean, reflect: true },
+		requireMatch: { type: Boolean, reflect: true, attribute: 'require-match' },
+		disabled: { type: Boolean, reflect: true },
+		debounceMs: { type: Number, attribute: 'debounce-ms' },
+		maxVisible: { type: Number, attribute: 'max-visible' }
+	};
+
+	#focusedIndex = -1;
+	#options = [];
+
+	/*
+		Lifecycle Callbacks
+	*/
+	constructor() {
+		super();
+		this.internals = this.attachInternals();
+		this.value = '';
+		this.name = '';
+		this.placeholder = '';
+		this.opened = false;
+		this.searching = false;
+		this.required = false;
+		this.requireMatch = false;
+		this.disabled = false;
+		this.debounceMs = 300;
+		this.maxVisible = 8;
+		this.#setupDebounce(300);
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		document.addEventListener('click', this.handleDocumentClick);
+		this.#syncOptions();
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener('click', this.handleDocumentClick);
+	}
+
+	childrenUpdated() {
+		this.#syncOptions();
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if(changedProperties.has('debounceMs')) {
+			this.#setupDebounce(this.debounceMs);
+		}
+		if(changedProperties.has('value') || changedProperties.has('required') || changedProperties.has('requireMatch')) {
+			this.#updateFormState();
+		}
+	}
+
+	formResetCallback() {
+		this.value = '';
+		this.#updateFormState();
+	}
+
+	formStateRestoreCallback(state) {
+		this.value = state;
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleInput = e => {
+		this.value = e.target.value;
+		this.opened = true;
+		this.#focusedIndex = -1;
+		this.#debouncedSearch(this.value);
+	};
+
+	handleKeydown = e => {
+		const items = this.#visibleOptions;
+		if(e.key === 'ArrowDown') {
+			e.preventDefault();
+			if(!this.opened) {
+				this.opened = true;
+				return;
+			}
+			this.#focusedIndex = Math.min(this.#focusedIndex + 1, items.length - 1);
+			this.requestUpdate();
+			this.#scrollFocusedIntoView();
+		} else if(e.key === 'ArrowUp') {
+			e.preventDefault();
+			this.#focusedIndex = Math.max(this.#focusedIndex - 1, 0);
+			this.requestUpdate();
+			this.#scrollFocusedIntoView();
+		} else if(e.key === 'Enter') {
+			e.preventDefault();
+			if(this.#focusedIndex >= 0 && this.#focusedIndex < items.length) {
+				this.#selectOption(items[this.#focusedIndex]);
+			}
+		} else if(e.key === 'Escape') {
+			e.preventDefault();
+			this.opened = false;
+			this.#focusedIndex = -1;
+		} else if(e.key === 'Tab') {
+			this.opened = false;
+			this.#focusedIndex = -1;
+		}
+	};
+
+	handleDocumentClick = e => {
+		if(!e.composedPath().includes(this)) {
+			this.opened = false;
+			this.#focusedIndex = -1;
+		}
+	};
+
+	handleFocus = () => {
+		this.opened = true;
+	};
+
+	handleOptionClick = e => {
+		const index = Number(e.currentTarget.dataset.index);
+		this.#selectOption(this.#visibleOptions[index]);
+	};
+
+	/*
+		Public Methods
+	*/
+	setOptions(options) {
+		[...this.querySelectorAll('k-option')].forEach(o => o.remove());
+		options.forEach(opt => {
+			const el = document.createElement('k-option');
+			if(typeof opt === 'object') {
+				el.setAttribute('value', opt.value ?? opt.label);
+				el.textContent = opt.label;
+			} else {
+				el.textContent = opt;
+			}
+			this.appendChild(el);
+		});
+		return this;
+	}
+
+	clear() {
+		this.value = '';
+		this.opened = false;
+		this.#focusedIndex = -1;
+		this.#updateFormState();
+		return this;
+	}
+
+	/*
+		Private Methods
+	*/
+	#setupDebounce(ms) {
+		this.#debouncedSearch = debounce(value => {
+			this.dispatchEvent(new CustomEvent('search', {
+				detail: { value },
+				bubbles: true,
+				composed: true
+			}));
+		}, ms);
+	}
+
+	#debouncedSearch = () => {};
+
+	#syncOptions() {
+		this.#options = [...this.querySelectorAll('k-option')].map(el => ({
+			label: el.label,
+			value: el.value
+		}));
+		this.requestUpdate();
+	}
+
+	#selectOption(option) {
+		this.value = option.label;
+		this.opened = false;
+		this.#focusedIndex = -1;
+		this.#updateFormState();
+		this.dispatchEvent(new CustomEvent('select', {
+			detail: { value: option.value, label: option.label },
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new CustomEvent('change', {
+			bubbles: true
+		}));
+	}
+
+	#updateFormState() {
+		const matchedOption = this.#options.find(o => o.label === this.value);
+		this.internals.setFormValue(matchedOption ? matchedOption.value : this.value);
+		if(this.required && !this.value) {
+			this.internals.setValidity({ valueMissing: true }, 'Please select a value.', this.shadowRoot?.querySelector('input'));
+		} else if(this.requireMatch && this.value && !matchedOption) {
+			this.internals.setValidity({ customError: true }, 'Please select a valid option.', this.shadowRoot?.querySelector('input'));
+		} else {
+			this.internals.setValidity({});
+		}
+	}
+
+	#scrollFocusedIntoView() {
+		this.updateComplete.then(() => {
+			this.shadowRoot?.querySelector('.option.focused')?.scrollIntoView({ block: 'nearest' });
+		});
+	}
+
+	get #filteredOptions() {
+		const term = (this.value || '').toLowerCase();
+		if(!term) return this.#options;
+		return this.#options.filter(opt => opt.label.toLowerCase().includes(term));
+	}
+
+	get #visibleOptions() {
+		return this.#filteredOptions.slice(0, this.maxVisible);
+	}
+
+	/*
+		Rendering
+	*/
+	render() {
+		const visible = this.#visibleOptions;
+		const hasMore = this.#filteredOptions.length > this.maxVisible;
+		return html`
+			<slot style="display:none"></slot>
+			<input
+				type="text"
+				.value=${this.value}
+				placeholder=${this.placeholder}
+				?disabled=${this.disabled}
+				@input=${this.handleInput}
+				@keydown=${this.handleKeydown}
+				@focus=${this.handleFocus}
+				autocomplete="off"
+			/>
+			${this.opened ? html`
+				<div id="menu">
+					${visible.map((opt, i) => html`
+						<div
+							class="option ${i === this.#focusedIndex ? 'focused' : ''}"
+							data-index=${i}
+							@click=${this.handleOptionClick}
+						>${opt.label}</div>
+					`)}
+					${hasMore && !this.searching ? html`
+						<div class="more">${this.#filteredOptions.length - this.maxVisible} more...</div>
+					` : ''}
+					${visible.length === 0 && !this.searching ? html`
+						<div class="no-results">No matches</div>
+					` : ''}
+					${this.searching ? html`
+						<div class="searching">
+							<k-spinner size="xs"></k-spinner>
+							<span>Searching...</span>
+						</div>
+					` : ''}
+				</div>
+			` : ''}
+		`;
+	}
+
+	/*
+		Styles
+	*/
+	static styles = css`
+		:host {
+			display: block;
+			position: relative;
+		}
+		:host([disabled]) {
+			opacity: 0.5;
+			pointer-events: none;
+		}
+		input {
+			width: 100%;
+			box-sizing: border-box;
+			padding: var(--spacer_h) var(--spacer);
+			border: 1px solid var(--c_border);
+			border-radius: var(--radius);
+			background: var(--c_bg);
+			color: var(--tc);
+			font: inherit;
+			outline: none;
+			transition: border-color var(--animation_ms);
+		}
+		input:focus {
+			border-color: var(--c_primary);
+		}
+		#menu {
+			position: absolute;
+			top: 100%;
+			left: 0;
+			right: 0;
+			z-index: 70;
+			max-height: 20rem;
+			overflow-y: auto;
+			background: var(--c_bg);
+			border: 1px solid var(--c_border);
+			border-radius: var(--radius);
+			box-shadow: var(--drop_shadow);
+			margin-top: 0.25rem;
+		}
+		.option {
+			padding: var(--spacer_h) var(--spacer);
+			cursor: pointer;
+			transition: background var(--animation_ms);
+		}
+		.option:hover,
+		.option.focused {
+			background: var(--c_bg__alt);
+		}
+		.no-results,
+		.more {
+			padding: var(--spacer_h) var(--spacer);
+			color: var(--tc_muted);
+			font-style: italic;
+		}
+		.searching {
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+			padding: var(--spacer_h) var(--spacer);
+			color: var(--tc_muted);
+			border-top: 1px solid var(--c_border);
+		}
+	`;
+}
+
+customElements.define('k-combobox', Combobox);

package/src/components/Option.js

@@ -0,0 +1,19 @@
+export default class Option extends HTMLElement {
+	static get observedAttributes() {
+		return ['value'];
+	}
+
+	get value() {
+		return this.getAttribute('value') ?? this.textContent.trim();
+	}
+
+	set value(v) {
+		this.setAttribute('value', v);
+	}
+
+	get label() {
+		return this.textContent.trim();
+	}
+}
+
+customElements.define('k-option', Option);

package/src/components/ThemeSwitcher.js

@@ -1,28 +1,90 @@
 import ShadowComponent from './ShadowComponent.js';
-import { html, css } from '../lit-all.min.js';
+import { html, css, nothing } from '../lit-all.min.js';
 import theme from '../utils/theme.js';
 import './Icon.js';
 
+const ICON_MAP = {
+	auto: 'mode-auto',
+	light: 'mode-light',
+	dark: 'mode-dark'
+};
+
+const parseOptions = str => str.split(',').map(s => s.trim()).filter(Boolean);
+const capitalize = s => s.charAt(0).toUpperCase() + s.slice(1);
+
 export default class ThemeSwitcher extends ShadowComponent {
+
 	/* Properties */
 	static properties = {
-		currentTheme: { type: String, reflect: true, attribute: 'current-theme' }
+		currentTheme: { type: String, reflect: true, attribute: 'current-theme' },
+		mode: { type: String, reflect: true },
+		options: { type: String, reflect: true },
+		labels: { type: String, reflect: true },
+		resolvedMode: { type: String, state: true },
+		resolvedLabels: { type: Array, state: true }
 	};
 
 	constructor() {
 		super();
 		this.currentTheme = theme.get();
+		this.mode = 'auto';
+		this.options = 'light, auto, dark';
+		this.labels = null;
+		this.resolvedMode = 'segmented';
+		this.resolvedLabels = null;
 	}
 
+	/*
+		Aside Detection
+	*/
+	#aside = null;
+
+	handleAsideStateChange = e => {
+		if(this.mode === 'auto') {
+			this.resolvedMode = e.detail.state === 'collapsed' ? 'toggle' : 'segmented';
+		}
+		this.resolveLabels();
+	};
+
+	resolveMode = () => {
+		if(this.mode === 'toggle' || this.mode === 'segmented'){
+			this.resolvedMode = this.mode;
+			return;
+		}
+		if(this.#aside){
+			this.resolvedMode = this.#aside.state === 'collapsed' ? 'toggle' : 'segmented';
+		} else {
+			this.resolvedMode = 'segmented';
+		}
+	};
+
+	resolveLabels = () => {
+		if(this.labels === null || this.labels === undefined || (this.#aside && this.#aside.state === 'collapsed')){
+			this.resolvedLabels = null;
+			return;
+		}
+		const opts = parseOptions(this.options);
+		if(this.labels === ''){
+			this.resolvedLabels = opts.map(capitalize);
+		} else {
+			const custom = parseOptions(this.labels);
+			this.resolvedLabels = opts.map((opt, i) => custom[i] ?? capitalize(opt));
+		}
+	};
+
 	/*
 		Event Handlers
 	*/
 	handleClick = () => {
-		const current = theme.get();
-		if(current === 'auto') theme.set('light');
-		if(current === 'light') theme.set('dark');
-		if(current === 'dark') theme.set('auto');
-	}
+		const opts = parseOptions(this.options);
+		if(opts.length === 0) return;
+		const idx = opts.indexOf(theme.get());
+		theme.set(opts[(idx + 1) % opts.length]);
+	};
+
+	handleSegmentClick = value => {
+		theme.set(value);
+	};
 
 	/*
 		Lifecycle Callbacks
@@ -32,11 +94,27 @@ export default class ThemeSwitcher extends ShadowComponent {
 		this.unsubscribe = theme.subscribe(t => {
 			this.currentTheme = t;
 		});
+		this.#aside = this.closest('k-aside');
+		if(this.#aside){
+			this.#aside.addEventListener('aside_state_change', this.handleAsideStateChange);
+		}
+		this.resolveMode();
+		this.resolveLabels();
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if(this.unsubscribe) this.unsubscribe();
+		if(this.#aside){
+			this.#aside.removeEventListener('aside_state_change', this.handleAsideStateChange);
+			this.#aside = null;
+		}
+	}
+
+	updated(changed) {
+		super.updated(changed);
+		if(changed.has('mode')) this.resolveMode();
+		if(changed.has('labels') || changed.has('options')) this.resolveLabels();
 	}
 
 	/*
@@ -44,39 +122,108 @@ export default class ThemeSwitcher extends ShadowComponent {
 	*/
 	static styles = css`
 		:host {
-			--padding: var(--spacer);
+			--padding: var(--spacer, 1rem);
+			--c_inactive: transparent;
+			--tc_inactive: inherit;
+			--c_inactive__hover: var(--c_bg__alt);
+			--tc_inactive__hover: inherit;
+			--c_active: var(--c_primary);
+			--tc_active: var(--tc_light);
+			--c_active__hover: var(--c_active);
+			--tc_active__hover: var(--tc_active);
+			--border: 1px solid var(--c_border);
+		}
+		button.no-btn {
+			padding: var(--padding);
+			border-radius: var(--radius);
 			display: flex;
+			align-items: center;
+			gap: calc(var(--spacer, 1rem) * 0.35);
+			color: var(--tc_inactive);
+		}
+		button.no-btn:hover {
+			color: var(--tc_inactive__hover);
 		}
-		button {
+		.segmented {
+			display: inline-flex;
+		}
+		.segmented button {
 			padding: var(--padding);
+			background: var(--c_inactive);
+			cursor: pointer;
+			color: var(--tc_inactive);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: calc(var(--spacer, 1rem) * 0.35);
+			border: var(--border);
+			border-right: none;
+		}
+		.segmented button:first-child {
+			border-radius: var(--radius) 0 0 var(--radius);
+		}
+		.segmented button:last-child {
+			border-radius: 0 var(--radius) var(--radius) 0;
+			border-right: var(--border);
+		}
+		.segmented button:not(:first-child):not(:last-child) {
+			border-radius: 0;
+		}
+		.segmented button.active {
+			background: var(--c_active);
+			color: var(--tc_active);
+			border-color: var(--c_active);
+		}
+		.segmented button.active + button {
+			border-left-color: var(--c_active);
+		}
+		.segmented button:not(.active):hover {
+			background: var(--c_inactive__hover);
+			color: var(--tc_inactive__hover);
+		}
+		.segmented button.active:hover {
+			background: var(--c_active__hover);
+			color: var(--tc_active__hover);
 		}
 	`;
 
 	/*
 		Rendering
 	*/
-	render() {
-		const iconName = this.currentTheme === 'auto' ? 'mode-auto' :
-						this.currentTheme === 'light' ? 'mode-light' : 'mode-dark';
-
+	renderToggle() {
 		return html`
 			<button
 				class="no-btn"
 				@click=${this.handleClick}
 			>
-				<k-icon name=${iconName}></k-icon>
+				<k-icon name=${ICON_MAP[this.currentTheme] || 'mode-auto'}></k-icon>
+				${this.resolvedLabels ? html`<span>${this.resolvedLabels[parseOptions(this.options).indexOf(this.currentTheme)] ?? capitalize(this.currentTheme)}</span>` : nothing}
 			</button>
 		`;
 	}
-	static styles = css`
-		:host {
-			--padding: var(--spacer, 1rem);
-		}
-		button.no-btn {
-			padding: var(--padding);
-			border-radius: var(--radius);
-		}
-	`;
+
+	renderSegmented() {
+		const opts = parseOptions(this.options);
+		return html`
+			<div class="segmented">
+				${opts.map((opt, i) => html`
+					<button
+						class="no-style ${opt === this.currentTheme ? 'active' : ''}"
+						@click=${() => this.handleSegmentClick(opt)}
+						title=${opt}
+					>
+						<k-icon name=${ICON_MAP[opt] || 'mode-auto'}></k-icon>
+					${this.resolvedLabels ? html`<span>${this.resolvedLabels[i]}</span>` : nothing}
+					</button>
+				`)}
+			</div>
+		`;
+	}
+
+	render() {
+		if(this.resolvedMode === 'toggle') return this.renderToggle();
+		return this.renderSegmented();
+	}
 
 	/*
 		Static Methods
@@ -94,4 +241,4 @@ export default class ThemeSwitcher extends ShadowComponent {
 	}
 }
 
-customElements.define('k-theme-switcher', ThemeSwitcher);
+customElements.define('k-theme-switcher', ThemeSwitcher);