kempo-ui 0.4.20 → 0.4.21

package/src/components/tableControls/PageSelect.js

@@ -1,101 +0,0 @@
-import TableControl from './TableControl.js';
-import { html, css } from '../../lit-all.min.js';
-
-export default class PageSelect extends TableControl {
-	static properties = {
-		...TableControl.properties
-	};
-
-	constructor() {
-		super({
-			maxWidth: null
-		});
-	}
-
-	/*
-		Lifecycle Callbacks
-	*/
-
-	connectedCallback() {
-		super.connectedCallback();
-		this.onTableEvent('pageChange pageSizeChange pageCountChanged recordsSet', this.handleTableUpdate);
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		if(this.table){
-			this.table.removeEventListener('pageChange', this.handleTableUpdate);
-			this.table.removeEventListener('pageSizeChange', this.handleTableUpdate);
-			this.table.removeEventListener('pageCountChanged', this.handleTableUpdate);
-			this.table.removeEventListener('recordsSet', this.handleTableUpdate);
-		}
-	}
-
-	/*
-		Event Handlers
-	*/
-
-	handleTableUpdate = () => {
-		this.requestUpdate();
-	};
-
-	handleSelectChange = e => {
-		if(this.table){
-			this.table.setPage(parseInt(e.target.value));
-		}
-	};
-
-	/*
-		Getters
-	*/
-
-	get currentPage() {
-		return this.table ? this.table.getCurrentPage() : 1;
-	}
-
-	get totalPages() {
-		return this.table ? this.table.getTotalPages() : 1;
-	}
-
-	/*
-		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

@@ -1,68 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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" direction="left"></k-icon>
-			</button>
-		`;
-	}
-}
-
-customElements.define('k-tc-prev-page', PrevPage);

package/src/components/tableControls/Search.js

@@ -1,56 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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);