kempo-ui 0.0.2 → 0.0.4

package/src/components/tableControls/HiddenCount.js

@@ -0,0 +1,45 @@
+import TableControl from './TableControl.js';
+import { html } from '../../lit-all.min.js';
+
+export default class HiddenCount extends TableControl {
+	/*
+		Properties
+	*/
+	static properties = {
+		hiddenCount: { type: Number }
+	};
+
+	/*
+		Lifecycle Callbacks
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		this.updateHiddenCount();
+		this.onTableEvent('recordHidden recordShown', this.handleHiddenChange);
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleHiddenChange = () => {
+		this.updateHiddenCount();
+	};
+
+	/*
+		Methods
+	*/
+	updateHiddenCount = () => {
+		this.hiddenCount = this.table?.getHiddenRecords().length || 0;
+	};
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<div class="pyq pxh"><span>${this.hiddenCount}</span>&nbsp;Hidden Records</div>
+		`;
+	}
+}
+
+customElements.define('k-tc-hidden-count', HiddenCount);

package/src/components/tableControls/Hide.js

@@ -0,0 +1,34 @@
+import TableControl from './TableControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class Hide extends TableControl {
+	/*
+		Constructor
+	*/
+	constructor() {
+		super({ maxWidth: 40 });
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleHide = () => {
+		if(this.record){
+			this.table.hideRecord(this.record);
+		}
+	};
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<button class="no-btn icon-btn" @click="${this.handleHide}">
+				<k-icon name="hide"></k-icon>
+			</button>
+		`;
+	}
+}
+
+customElements.define('k-tc-hide', Hide);

package/src/components/tableControls/LastPage.js

@@ -0,0 +1,65 @@
+import TableControl from './TableControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class LastPage extends TableControl {
+	constructor() {
+		super();
+		this.pageChangeHandler = () => this.requestUpdate();
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+
+	connectedCallback() {
+		super.connectedCallback();
+		if(this.table){
+			this.table.addEventListener('pageChange', this.pageChangeHandler);
+		}
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if(this.table){
+			this.table.removeEventListener('pageChange', this.pageChangeHandler);
+		}
+	}
+
+	/*
+		Event Handlers
+	*/
+
+	handleClick = () => {
+		if(this.table){
+			this.table.lastPage();
+		}
+	};
+
+	/*
+		Utility Functions
+	*/
+
+	get isDisabled() {
+		if(!this.table) return true;
+		return this.table.getCurrentPage() === this.table.getTotalPages();
+	}
+
+	/*
+		Rendering Logic
+	*/
+
+	render() {
+		return html`
+			<button 
+				class="no-btn icon-btn" 
+				?disabled="${this.isDisabled}"
+				@click="${this.handleClick}"
+			>
+				<k-icon name="last"></k-icon>
+			</button>
+		`;
+	}
+}
+
+customElements.define('k-tc-last-page', LastPage);

package/src/components/tableControls/NextPage.js

@@ -0,0 +1,65 @@
+import TableControl from './TableControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class NextPage extends TableControl {
+	constructor() {
+		super();
+		this.pageChangeHandler = () => this.requestUpdate();
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+
+	connectedCallback() {
+		super.connectedCallback();
+		if(this.table){
+			this.table.addEventListener('pageChange', this.pageChangeHandler);
+		}
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if(this.table){
+			this.table.removeEventListener('pageChange', this.pageChangeHandler);
+		}
+	}
+
+	/*
+		Event Handlers
+	*/
+
+	handleClick = () => {
+		if(this.table){
+			this.table.nextPage();
+		}
+	};
+
+	/*
+		Utility Functions
+	*/
+
+	get isDisabled() {
+		if(!this.table) return true;
+		return this.table.getCurrentPage() === this.table.getTotalPages();
+	}
+
+	/*
+		Rendering Logic
+	*/
+
+	render() {
+		return html`
+			<button 
+				class="no-btn icon-btn" 
+				?disabled="${this.isDisabled}"
+				@click="${this.handleClick}"
+			>
+				<k-icon name="chevron-right"></k-icon>
+			</button>
+		`;
+	}
+}
+
+customElements.define('k-tc-next-page', NextPage);

package/src/components/tableControls/PageSelect.js

@@ -0,0 +1,109 @@
+import TableControl from './TableControl.js';
+import { html, css } from '../../lit-all.min.js';
+
+export default class PageSelect extends TableControl {
+	static properties = {
+		...TableControl.properties,
+		currentPage: { type: Number, state: true },
+		totalPages: { type: Number, state: true }
+	};
+
+	constructor() {
+		super({
+			maxWidth: null
+		});
+		this.currentPage = 1;
+		this.totalPages = 1;
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.onTableEvent('pageChange', this.handlePageChange);
+		this.onTableEvent('pageSizeChange', this.handlePageSizeChange);
+		this.onTableEvent('pageCountChanged', this.handlePageCountChange);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if(this.table){
+			this.table.removeEventListener('pageChange', this.handlePageChange);
+			this.table.removeEventListener('pageSizeChange', this.handlePageSizeChange);
+			this.table.removeEventListener('pageCountChanged', this.handlePageCountChange);
+		}
+	}
+
+	/*
+		Event Handlers
+	*/
+
+	handlePageChange = () => {
+		if(this.table){
+			this.currentPage = this.table.getCurrentPage();
+		}
+	};
+
+	handlePageSizeChange = () => {
+		if(this.table){
+			this.currentPage = this.table.getCurrentPage();
+			this.totalPages = this.table.getTotalPages();
+		}
+	};
+
+	handlePageCountChange = () => {
+		if(this.table){
+			this.totalPages = this.table.getTotalPages();
+		}
+	};
+
+	handleSelectChange = e => {
+		if(this.table){
+			this.table.setPage(parseInt(e.target.value));
+		}
+	};
+
+	/*
+		Rendering Logic
+	*/
+
+	render() {
+		if(!this.table){
+			return html`<div>No table found</div>`;
+		}
+
+		const options = [];
+		for(let i = 1; i <= this.totalPages; i++){
+			options.push(html`<option value="${i}" ?selected="${i === this.currentPage}">Page ${i}</option>`);
+		}
+		
+		return html`
+			<div class="page-select">
+				<select class="no-btn ph b r" @change="${this.handleSelectChange}" ?disabled="${this.totalPages <= 1}">
+					${options}
+				</select>
+				<label> out of ${this.totalPages}</label>
+			</div>
+		`;
+	}
+
+	static styles = css`
+		${TableControl.styles}
+		
+		.page-select {
+			display: flex;
+			align-items: center;
+			gap: 0.25rem;
+			white-space: nowrap;
+		}
+		
+		label {
+			padding: 0;
+			margin: 0;
+		}
+	`;
+}
+
+customElements.define('k-tc-page-select', PageSelect);

package/src/components/tableControls/PageSize.js

@@ -0,0 +1,68 @@
+import TableControl from './TableControl.js';
+import { html } from '../../lit-all.min.js';
+
+export default class PageSize extends TableControl {
+	constructor() {
+		super({
+			maxWidth: null
+		});
+		this.pageChangeHandler = () => this.requestUpdate();
+		this.pageSizeChangeHandler = () => this.requestUpdate();
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.onTableEvent('pageChange', this.pageChangeHandler);
+		this.onTableEvent('pageSizeChange', this.pageSizeChangeHandler);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if(this.table){
+			this.table.removeEventListener('pageChange', this.pageChangeHandler);
+			this.table.removeEventListener('pageSizeChange', this.pageSizeChangeHandler);
+		}
+	}
+
+	/*
+		Event Handlers
+	*/
+
+	handleChange = e => {
+		if(this.table){
+			this.table.setPageSize(parseInt(e.target.value));
+		}
+	};
+
+	/*
+		Utility Functions
+	*/
+
+	get currentPageSize() {
+		return this.table ? this.table.getPageSize() : 10;
+	}
+
+	get pageSizeOptions() {
+		return this.table ? this.table.pageSizeOptions : [10, 25, 50, 100, 500];
+	}
+
+	/*
+		Rendering Logic
+	*/
+
+	render() {
+		return html`
+			<select class="no-btn ph b r" @change="${this.handleChange}">
+				${this.pageSizeOptions.map(size => 
+					html`<option value="${size}" ?selected="${size === this.currentPageSize}">${size} per page</option>`
+				)}
+			</select>
+		`;
+	}
+}
+
+customElements.define('k-tc-page-size', PageSize);

package/src/components/tableControls/PrevPage.js

@@ -0,0 +1,65 @@
+import TableControl from './TableControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class PrevPage extends TableControl {
+	constructor() {
+		super();
+		this.pageChangeHandler = () => this.requestUpdate();
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+
+	connectedCallback() {
+		super.connectedCallback();
+		if(this.table){
+			this.table.addEventListener('pageChange', this.pageChangeHandler);
+		}
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if(this.table){
+			this.table.removeEventListener('pageChange', this.pageChangeHandler);
+		}
+	}
+
+	/*
+		Event Handlers
+	*/
+
+	handleClick = () => {
+		if(this.table){
+			this.table.prevPage();
+		}
+	};
+
+	/*
+		Utility Functions
+	*/
+
+	get isDisabled() {
+		if(!this.table) return true;
+		return this.table.getCurrentPage() === 1;
+	}
+
+	/*
+		Rendering Logic
+	*/
+
+	render() {
+		return html`
+			<button 
+				class="no-btn icon-btn" 
+				?disabled="${this.isDisabled}"
+				@click="${this.handleClick}"
+			>
+				<k-icon name="chevron-left"></k-icon>
+			</button>
+		`;
+	}
+}
+
+customElements.define('k-tc-prev-page', PrevPage);

package/src/components/tableControls/Search.js

@@ -0,0 +1,58 @@
+import TableControl from './TableControl.js';
+import { html } from '../../lit-all.min.js';
+import debounce from '../../utils/debounce.js';
+
+export default class Search extends TableControl {
+	/*
+		Properties
+	*/
+	static properties = {
+		searchTerm: { type: String }
+	};
+
+	/*
+		Constructor
+	*/
+	constructor() {
+		super({ maxWidth: 200 });
+		this.debouncedSearch = debounce(this.performSearch, 200);
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleInput = (e) => {
+		this.searchTerm = e.target.value;
+		this.debouncedSearch();
+	};
+
+	/*
+		Methods
+	*/
+	performSearch = () => {
+		if(!this.table) return;
+
+		if(!this.searchTerm || this.searchTerm.length < 3){
+			this.table.showAllRecords();
+		} else {
+			this.table.search(this.searchTerm);
+		}
+	};
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<input
+				type="search"
+				placeholder="Search"
+				class="px pyh"
+				.value="${this.searchTerm || ''}"
+				@input="${this.handleInput}"
+			/>
+		`;
+	}
+}
+
+customElements.define('k-tc-search', Search);

package/src/components/tableControls/ShowAll.js

@@ -0,0 +1,34 @@
+import TableControl from './TableControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class ShowAll extends TableControl {
+	/*
+		Constructor
+	*/
+	constructor() {
+		super({ maxWidth: 40 });
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleShowAll = () => {
+		if(this.table){
+			this.table.showAllRecords();
+		}
+	};
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<button class="no-btn icon-btn" @click="${this.handleShowAll}">
+				<k-icon name="show"></k-icon>
+			</button>
+		`;
+	}
+}
+
+customElements.define('k-tc-show-all', ShowAll);

package/src/components/tableControls/TableControl.js

@@ -0,0 +1,105 @@
+import ShadowComponent from '../ShadowComponent.js';
+import { html, css } from '../../lit-all.min.js';
+
+export default class TableControl extends ShadowComponent {
+	/*
+		Properties
+	*/
+	static properties = {
+		maxWidth: { type: Number, reflect: true, attribute: 'max-width' }
+	};
+
+	/*
+		Constructor
+	*/
+	constructor({
+		maxWidth = 40
+	} = {}) {
+		super();
+		this.maxWidth = maxWidth;
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if(changedProperties.has('maxWidth')){
+			if(this.maxWidth){
+				this.style.setProperty('--max-width', `${this.maxWidth}px`);
+			} else {
+				this.style.removeProperty('--max-width');
+			}
+		}
+	}
+
+	firstUpdated() {
+		if(this.maxWidth){
+			this.style.setProperty('--max-width', `${this.maxWidth}px`);
+		} else {
+			this.style.removeProperty('--max-width');
+		}
+	}
+
+	/*
+		Getters for Table Integration
+	*/
+	get table() {
+		if (this.getRootNode() instanceof ShadowRoot) {
+			return this.getRootNode().host.closest('k-table');
+		} else {
+			return this.closest('k-table');
+		}
+	}
+
+	get record() {
+		if (this.getRootNode() instanceof ShadowRoot) {
+			const $record = this.closest('.record');
+			if ($record) {
+				const index = $record.dataset.index;
+				if (index !== undefined) {
+					return this.table.records[index];
+				}
+			}
+		}
+		return false;
+	}
+
+	/*
+		Table Event Handling
+	*/
+	async onTableEvent(eventNames, handler) {
+		// Wait for k-table to be defined before trying to find it
+		await customElements.whenDefined('k-table');
+		
+		if(this.table){
+			const events = eventNames.split(' ');
+			events.forEach(eventName => {
+				this.table.addEventListener(eventName, handler);
+			});
+			this.requestUpdate(); // Force update after table is found
+		}
+	}
+
+	/*
+		Styles
+	*/
+	static styles = css`
+		:host {
+			display: inline-flex;
+		}
+		
+		.icon-btn {
+			display: inline-flex !important;
+			align-items: center;
+			justify-content: center;
+			width: 40px;
+			height: 40px;
+		}
+		.icon-btn:disabled {
+			opacity: 0.6;
+		}
+	`;
+}
+
+customElements.define('k-table-control', TableControl);