kempo-ui 0.0.3 → 0.0.4

package/src/components/tableControls/Edit.js

@@ -0,0 +1,88 @@
+import TableControl from './TableControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class Edit extends TableControl {
+	/*
+		Properties
+	*/
+	static properties = {
+		isEditing: { type: Boolean }
+	};
+
+	/*
+		Styles
+	*/
+	static styles = [
+		TableControl.styles,
+		css`
+			:host {
+				display: inline-flex;
+				width: max-content;
+				align-items: baseline;
+			}
+		`
+	];
+
+	/*
+		Constructor
+	*/
+	constructor() {
+		super({ maxWidth: 80 });
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		this.onTableEvent('editingChange', this.handleEditingChange);
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleEditingChange = (e) => {
+		if(e.detail.record === this.record){
+			this.isEditing = e.detail.editing;
+		}
+	};
+
+	handleEdit = () => {
+		if(this.record){
+			this.table.editRecord(this.record);
+		}
+	};
+
+	handleSave = () => {
+		if(this.record){
+			this.table.saveEditedRecord(this.record);
+		}
+	};
+
+	handleCancel = () => {
+		if(this.record){
+			this.table.cancelEditedRecord(this.record);
+		}
+	};
+
+	/*
+		Rendering
+	*/
+	render() {
+		return this.isEditing ? html`
+			<button class="no-btn icon-btn bg-success" @click="${this.handleSave}">
+				<k-icon name="check"></k-icon>
+			</button>
+			<button class="no-btn icon-btn bg-danger" @click="${this.handleCancel}">
+				<k-icon name="close"></k-icon>
+			</button>
+		` : html`
+			<button class="no-btn icon-btn" @click="${this.handleEdit}">
+				<k-icon name="edit"></k-icon>
+			</button>
+		`;
+	}
+}
+
+customElements.define('k-tc-edit', Edit);

package/src/components/tableControls/ExportCSV.js

@@ -0,0 +1,71 @@
+import TableControl from './TableControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class ExportCSV extends TableControl {
+	/*
+		Constructor
+	*/
+	constructor() {
+		super();
+		this.maxWidth = 136;
+	}
+
+	/*
+		Public Methods
+	*/
+	getCSV() {
+		const table = this.table;
+		if(!table) return '';
+
+		let csv = '';
+		const fields = [];
+
+		table.fields.forEach(({ name, calculator }) => {
+			if(!calculator) {
+				fields.push(name);
+			}
+		});
+
+		csv += fields.join(',') + '\n';
+
+		if(this.record) {
+			const row = fields.map(field => this.record[field] || '');
+			csv += row.join(',') + '\n';
+		} else {
+			table.records.forEach(record => {
+				const row = fields.map(field => record[field] || '');
+				csv += row.join(',') + '\n';
+			});
+		}
+
+		return csv;
+	}
+
+	export = () => {
+		const data = this.getCSV();
+		const blob = new Blob([data], { type: 'text/csv' });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = 'data.csv';
+		a.click();
+		URL.revokeObjectURL(url);
+	};
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<button class="no-btn ph" @click="${this.export}">
+				<slot>
+					<k-icon name="export-file"></k-icon>
+					Export CSV
+				</slot>
+			</button>
+		`;
+	}
+}
+
+customElements.define('k-tc-export-csv', ExportCSV);

package/src/components/tableControls/ExportJson.js

@@ -0,0 +1,55 @@
+import TableControl from './TableControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class ExportJson extends TableControl {
+	/*
+		Constructor
+	*/
+	constructor() {
+		super();
+		this.maxWidth = 136;
+	}
+
+	/*
+		Public Methods
+	*/
+	export = () => {
+		const record = this.record;
+		if(record) {
+			const data = JSON.stringify(record);
+			const blob = new Blob([data], { type: 'application/json' });
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = 'data.json';
+			a.click();
+			URL.revokeObjectURL(url);
+		} else {
+			const data = JSON.stringify(this.table.records);
+			const blob = new Blob([data], { type: 'application/json' });
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = 'data.json';
+			a.click();
+			URL.revokeObjectURL(url);
+		}
+	};
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<button class="no-btn ph" @click="${this.export}">
+				<slot>
+					<k-icon name="export-file"></k-icon>
+					Export JSON
+				</slot>
+			</button>
+		`;
+	}
+}
+
+customElements.define('k-tc-export-json', ExportJson);

package/src/components/tableControls/FieldSortHide.js

@@ -0,0 +1,76 @@
+import TableControl from './TableControl.js';
+import { html, render } from '../../lit-all.min.js';
+import '../Icon.js';
+import Dialog from '../Dialog.js';
+
+export default class FieldSortHide extends TableControl {
+	/*
+		Constructor
+	*/
+	constructor() {
+		super({ maxWidth: 40 });
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleClick = () => {
+		this.openDialog();
+	};
+
+	/*
+		Methods
+	*/
+	openDialog = () => {
+		import('../Sortable.js');
+
+		const dialogContent = document.createElement('div');
+
+		render(html`
+			<h3 class="m0 ph" slot="title">Show / Hide Fields</h3>
+			<div class="m">
+				<k-sortable id="sorting" @sort="${(e) => {
+					const newOrder = Array.from(e.target.querySelectorAll('k-sortable-item'))
+						.map(item => item.getAttribute('data-field'));
+					this.table.reorderFields(newOrder);
+				}}">
+					${this.table.fields.map(field => html`
+						<k-sortable-item data-field="${field.name}">
+							<label class="field pb0">
+								<input
+									class="field-visibility"
+									data-field="${field.name}"
+									type="checkbox"
+									.checked="${!field.hidden}"
+									@change="${(e) => {
+										this.table.setFieldHiddenState(field.name, !e.target.checked);
+									}}"
+									style="height: 1.25rem; width: 1.25rem"
+								/>
+								${field.label}
+							</label>
+						</k-sortable-item>
+					`)}
+				</k-sortable>
+			</div>
+		`, dialogContent);
+
+		Dialog.create(dialogContent, {
+			width: '400px',
+			cancelText: 'Close'
+		});
+	};
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<button class="no-btn icon-btn" @click="${this.handleClick}">
+				<k-icon name="table-visibility"></k-icon>
+			</button>
+		`;
+	}
+}
+
+customElements.define('k-tc-field-sort-hide', FieldSortHide);

package/src/components/tableControls/Filters.js

@@ -0,0 +1,114 @@
+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`
+			<h3 slot="title" class="m0 pyh px">Filters</h3>
+			<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}"
+							>
+								${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' });
+	};
+
+	/*
+		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

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

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