kempo-ui 0.4.20 → 0.4.22

package/src/components/tableControls/Filters.js

@@ -1,113 +0,0 @@
-import TableControl from './TableControl.js';
-import { html, render } from '../../lit-all.min.js';
-import '../Icon.js';
-import Dialog from '../Dialog.js';
-
-export default class Filters extends TableControl {
-	/*
-		Constructor
-	*/
-	constructor() {
-		super({ maxWidth: 40 });
-	}
-
-	/*
-		Event Handlers
-	*/
-	handleFilter = () => {
-		this.openDialog();
-	};
-
-	/*
-		Methods
-	*/
-	openDialog = () => {
-		const conditionOptions = {
-			'equals': 'equals',
-			'not-equals': 'does not equal',
-			'contains': 'contains',
-			'not-contains': 'does not contain',
-			'greater-than': 'is greater than',
-			'greater-than-or-equal': 'is greater than or equal to',
-			'less-than': 'is less than',
-			'less-than-or-equal': 'is less than or equal to'
-		};
-
-		const dialogContent = document.createElement('div');
-		
-		render(html`
-			<div class="p">
-				${this.table.filters.length === 0 ? html`
-					<p>No Current Filters.</p>
-				` : html`
-					<h5>Current Filters</h5>
-					<ul id="currentFilters">
-						${this.table.filters.map(({field, condition, value}) => html`
-							<li
-								data-field="${field}"
-								data-condition="${condition}"
-								data-value="${value}"
-							>
-								${this.table.getFieldLabel(field)} ${conditionOptions[condition]} "${value}"
-								<button class="remove-filter no-btn pq" @click="${(e) => {
-									this.table.removeFilter(field, condition, value);
-									dialog.close();
-									this.openDialog();
-								}}">
-									<k-icon name="close"></k-icon>
-								</button>
-							</li>
-						`)}
-					</ul>
-				`}
-				<hr />
-				<h5>Add A Filter</h5>
-				<form id="addFilter" @submit="${(e) => {
-					e.preventDefault();
-					const form = e.target;
-					this.table.addFilter(
-						form.filterField.value,
-						form.filterCondition.value,
-						form.filterValue.value
-					);
-					dialog.close();
-					this.openDialog();
-				}}">
-					<select id="filterField" class="mb">
-						${this.table.fields.map(({name, label}) => html`
-							<option value="${name}">${label}</option>
-						`)}
-					</select>
-					<select id="filterCondition" class="mb">
-						${Object.entries(conditionOptions).map(([key, value]) => html`
-							<option value="${key}" ?selected="${key === 'contains'}">${value}</option>
-						`)}
-					</select>
-					<input id="filterValue" type="text" class="mb" />
-					<button type="submit" class="btn primary mb mr">Add Filter</button>
-					${this.table.filters.length === 0 ? '' : html`
-						<button type="button" class="btn danger mb mr" @click="${() => {
-							this.table.removeAllFilters();
-							dialog.close();
-						}}">Clear All Filters</button>
-					`}
-				</form>
-			</div>
-		`, dialogContent);
-
-		const dialog = Dialog.create(dialogContent, { width: '600px', title: 'Filters' });
-	};
-
-	/*
-		Rendering
-	*/
-	render() {
-		return html`
-			<button class="no-btn icon-btn" @click="${this.handleFilter}">
-				<k-icon name="filter"></k-icon>
-			</button>
-		`;
-	}
-}
-
-customElements.define('k-tc-filters', Filters);

package/src/components/tableControls/FirstPage.js

@@ -1,65 +0,0 @@
-import TableControl from './TableControl.js';
-import { html } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class FirstPage 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.firstPage();
-		}
-	};
-
-	/*
-		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-line" direction="left"></k-icon>
-			</button>
-		`;
-	}
-}
-
-customElements.define('k-tc-first-page', FirstPage);

package/src/components/tableControls/HiddenCount.js

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

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

@@ -1,65 +0,0 @@
-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="chevron-line"></k-icon>
-			</button>
-		`;
-	}
-}
-
-customElements.define('k-tc-last-page', LastPage);

package/src/components/tableControls/NextPage.js

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

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);