kempo-ui 0.3.14 → 0.3.16

package/dist/components/Combobox.js

@@ -0,0 +1,97 @@
+import{html as e,css as t}from"../lit-all.min.js";import s from"./ShadowComponent.js";import i from"../utils/debounce.js";import"./Option.js";export default class o extends s{static formAssociated=!0;static properties={value:{type:String,reflect:!0},name:{type:String,reflect:!0},placeholder:{type:String},opened:{type:Boolean,reflect:!0},searching:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},requireMatch:{type:Boolean,reflect:!0,attribute:"require-match"},disabled:{type:Boolean,reflect:!0},debounceMs:{type:Number,attribute:"debounce-ms"},maxVisible:{type:Number,attribute:"max-visible"}};#e=-1;#t=[];constructor(){super(),this.internals=this.attachInternals(),this.value="",this.name="",this.placeholder="",this.opened=!1,this.searching=!1,this.required=!1,this.requireMatch=!1,this.disabled=!1,this.debounceMs=300,this.maxVisible=8,this.#s(300)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleDocumentClick),this.#i()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick)}childrenUpdated(){this.#i()}updated(e){super.updated(e),e.has("debounceMs")&&this.#s(this.debounceMs),(e.has("value")||e.has("required")||e.has("requireMatch"))&&this.#o()}formResetCallback(){this.value="",this.#o()}formStateRestoreCallback(e){this.value=e}handleInput=e=>{this.value=e.target.value,this.opened=!0,this.#e=-1,this.#a(this.value)};handleKeydown=e=>{const t=this.#n;if("ArrowDown"===e.key){if(e.preventDefault(),!this.opened)return void(this.opened=!0);this.#e=Math.min(this.#e+1,t.length-1),this.requestUpdate(),this.#r()}else"ArrowUp"===e.key?(e.preventDefault(),this.#e=Math.max(this.#e-1,0),this.requestUpdate(),this.#r()):"Enter"===e.key?(e.preventDefault(),this.#e>=0&&this.#e<t.length&&this.#l(t[this.#e])):"Escape"===e.key?(e.preventDefault(),this.opened=!1,this.#e=-1):"Tab"===e.key&&(this.opened=!1,this.#e=-1)};handleDocumentClick=e=>{e.composedPath().includes(this)||(this.opened=!1,this.#e=-1)};handleFocus=()=>{this.opened=!0};handleOptionClick=e=>{const t=Number(e.currentTarget.dataset.index);this.#l(this.#n[t])};setOptions(e){return[...this.querySelectorAll("k-option")].forEach(e=>e.remove()),e.forEach(e=>{const t=document.createElement("k-option");"object"==typeof e?(t.setAttribute("value",e.value??e.label),t.textContent=e.label):t.textContent=e,this.appendChild(t)}),this}clear(){return this.value="",this.opened=!1,this.#e=-1,this.#o(),this}#s(e){this.#a=i(e=>{this.dispatchEvent(new CustomEvent("search",{detail:{value:e},bubbles:!0,composed:!0}))},e)}#a=()=>{};#i(){this.#t=[...this.querySelectorAll("k-option")].map(e=>({label:e.label,value:e.value})),this.requestUpdate()}#l(e){this.value=e.label,this.opened=!1,this.#e=-1,this.#o(),this.dispatchEvent(new CustomEvent("select",{detail:{value:e.value,label:e.label},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}#o(){const e=this.#t.find(e=>e.label===this.value);this.internals.setFormValue(e?e.value:this.value),this.required&&!this.value?this.internals.setValidity({valueMissing:!0},"Please select a value.",this.shadowRoot?.querySelector("input")):this.requireMatch&&this.value&&!e?this.internals.setValidity({customError:!0},"Please select a valid option.",this.shadowRoot?.querySelector("input")):this.internals.setValidity({})}#r(){this.updateComplete.then(()=>{this.shadowRoot?.querySelector(".option.focused")?.scrollIntoView({block:"nearest"})})}get#d(){const e=(this.value||"").toLowerCase();return e?this.#t.filter(t=>t.label.toLowerCase().includes(e)):this.#t}get#n(){return this.#d.slice(0,this.maxVisible)}render(){const t=this.#n,s=this.#d.length>this.maxVisible;return e`
+			<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?e`
+				<div id="menu">
+					${t.map((t,s)=>e`
+						<div
+							class="option ${s===this.#e?"focused":""}"
+							data-index=${s}
+							@click=${this.handleOptionClick}
+						>${t.label}</div>
+					`)}
+					${s&&!this.searching?e`
+						<div class="more">${this.#d.length-this.maxVisible} more...</div>
+					`:""}
+					${0!==t.length||this.searching?"":e`
+						<div class="no-results">No matches</div>
+					`}
+					${this.searching?e`
+						<div class="searching">
+							<k-spinner size="xs"></k-spinner>
+							<span>Searching...</span>
+						</div>
+					`:""}
+				</div>
+			`:""}
+		`}static styles=t`
+		: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",o);

package/dist/components/Option.js

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

package/dist/components/ThemeSwitcher.js

@@ -1,24 +1,87 @@
-import t from"./ShadowComponent.js";import{html as e,css as r}from"../lit-all.min.js";import s from"../utils/theme.js";import"./Icon.js";export default class n extends t{static properties={currentTheme:{type:String,reflect:!0,attribute:"current-theme"}};constructor(){super(),this.currentTheme=s.get()}handleClick=()=>{const t=s.get();"auto"===t&&s.set("light"),"light"===t&&s.set("dark"),"dark"===t&&s.set("auto")};connectedCallback(){super.connectedCallback(),this.unsubscribe=s.subscribe(t=>{this.currentTheme=t})}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribe&&this.unsubscribe()}static styles=r`
+import e from"./ShadowComponent.js";import{html as t,css as s,nothing as r}from"../lit-all.min.js";import i from"../utils/theme.js";import"./Icon.js";const a={auto:"mode-auto",light:"mode-light",dark:"mode-dark"},o=e=>e.split(",").map(e=>e.trim()).filter(Boolean),n=e=>e.charAt(0).toUpperCase()+e.slice(1);export default class d extends e{static properties={currentTheme:{type:String,reflect:!0,attribute:"current-theme"},mode:{type:String,reflect:!0},options:{type:String,reflect:!0},labels:{type:String,reflect:!0},resolvedMode:{type:String,state:!0},resolvedLabels:{type:Array,state:!0}};constructor(){super(),this.currentTheme=i.get(),this.mode="auto",this.options="light, auto, dark",this.labels=null,this.resolvedMode="segmented",this.resolvedLabels=null}#e=null;handleAsideStateChange=e=>{"auto"===this.mode&&(this.resolvedMode="collapsed"===e.detail.state?"toggle":"segmented"),this.resolveLabels()};resolveMode=()=>{"toggle"!==this.mode&&"segmented"!==this.mode?this.#e?this.resolvedMode="collapsed"===this.#e.state?"toggle":"segmented":this.resolvedMode="segmented":this.resolvedMode=this.mode};resolveLabels=()=>{if(null===this.labels||void 0===this.labels||this.#e&&"collapsed"===this.#e.state)return void(this.resolvedLabels=null);const e=o(this.options);if(""===this.labels)this.resolvedLabels=e.map(n);else{const t=o(this.labels);this.resolvedLabels=e.map((e,s)=>t[s]??n(e))}};handleClick=()=>{const e=o(this.options);if(0===e.length)return;const t=e.indexOf(i.get());i.set(e[(t+1)%e.length])};handleSegmentClick=e=>{i.set(e)};connectedCallback(){super.connectedCallback(),this.unsubscribe=i.subscribe(e=>{this.currentTheme=e}),this.#e=this.closest("k-aside"),this.#e&&this.#e.addEventListener("aside_state_change",this.handleAsideStateChange),this.resolveMode(),this.resolveLabels()}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribe&&this.unsubscribe(),this.#e&&(this.#e.removeEventListener("aside_state_change",this.handleAsideStateChange),this.#e=null)}updated(e){super.updated(e),e.has("mode")&&this.resolveMode(),(e.has("labels")||e.has("options"))&&this.resolveLabels()}static styles=s`
 		: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;
 		}
-	`;render(){const t="auto"===this.currentTheme?"mode-auto":"light"===this.currentTheme?"mode-light":"mode-dark";return e`
+		.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);
+		}
+	`;renderToggle(){return t`
 			<button
 				class="no-btn"
 				@click=${this.handleClick}
 			>
-				<k-icon name=${t}></k-icon>
+				<k-icon name=${a[this.currentTheme]||"mode-auto"}></k-icon>
+				${this.resolvedLabels?t`<span>${this.resolvedLabels[o(this.options).indexOf(this.currentTheme)]??n(this.currentTheme)}</span>`:r}
 			</button>
-		`}static styles=r`
-		:host {
-			--padding: var(--spacer, 1rem);
-		}
-		button.no-btn {
-			padding: var(--padding);
-			border-radius: var(--radius);
-		}
-	`;static setTheme(t){s.set(t)}static getCurrentTheme(){return s.get()}static getCalculatedCurrentTheme(){return s.getCalculated()}}customElements.define("k-theme-switcher",n);
+		`}renderSegmented(){const e=o(this.options);return t`
+			<div class="segmented">
+				${e.map((e,s)=>t`
+					<button
+						class="no-style ${e===this.currentTheme?"active":""}"
+						@click=${()=>this.handleSegmentClick(e)}
+						title=${e}
+					>
+						<k-icon name=${a[e]||"mode-auto"}></k-icon>
+					${this.resolvedLabels?t`<span>${this.resolvedLabels[s]}</span>`:r}
+					</button>
+				`)}
+			</div>
+		`}render(){return"toggle"===this.resolvedMode?this.renderToggle():this.renderSegmented()}static setTheme(e){i.set(e)}static getCurrentTheme(){return i.get()}static getCalculatedCurrentTheme(){return i.getCalculated()}}customElements.define("k-theme-switcher",d);