kempo-ui 0.4.19 → 0.4.21

package/src/components/tableControls/Edit.js

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

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

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

@@ -1,76 +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 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`
-			<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, {
-			title: 'Show / Hide / Order Fields',
-			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

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