kempo-ui 0.0.2 → 0.0.4

package/src/components/Toggle.js

@@ -0,0 +1,173 @@
+import { html, css } from '../lit-all.min.js';
+import ShadowComponent from './ShadowComponent.js';
+
+export default class Toggle extends ShadowComponent {
+  static properties = {
+    value: { type: Boolean, reflect: true }
+  };
+
+  static styles = css`
+    :host {
+      --switch_height: 2rem;
+      --switch_width: 3rem;
+      --switch_border: 1px solid var(--c_border);
+      --switch_background__off: var(--c_bg__alt);
+      --switch_background__on: var(--c_success);
+      --handle_size__off: 1rem;
+      --handle_size__on: 1.5rem;
+      --handle_border: 1px solid var(--c_border);
+      --handle_background__off: var(--c_border);
+      --handle_background__on: white;
+
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      margin-bottom: var(--spacer);
+      border-radius: 999rem;
+      outline: none;
+    }
+
+    :host(:focus) {
+      outline: 2px solid var(--c_primary, blue);
+      outline-offset: 2px;
+    }
+
+    #switch {
+      display: flex;
+      align-items: center;
+      width: var(--switch_width);
+      height: var(--switch_height);
+      border: var(--switch_border);
+      background: var(--switch_background__off);
+      border-radius: 999rem;
+      margin-right: var(--spacer);
+    }
+
+    #handle {
+      --margin: calc( (var(--switch_height) - var(--handle_size__off)) / 2);
+      width: var(--handle_size__off);
+      height: var(--handle_size__off);
+      border: var(--handle_border);
+      background: var(--handle_background__off);
+      border-radius: 999rem;
+      transform: translateX(var(--margin));
+      transition: width var(--animation_ms, 256ms), height var(--animation_ms, 256ms), transform var(--animation_ms, 256ms);
+    }
+
+    :host([value]) #switch {
+      background: var(--switch_background__on);
+    }
+
+    :host([value]) #handle {
+      --m: calc( (var(--switch_height) - var(--handle_size__on)) / 2);
+      --d: calc( var(--switch_width) - var(--handle_size__on) - var(--m));
+      width: var(--handle_size__on);
+      height: var(--handle_size__on);
+      background: var(--handle_background__on);
+      transform: translateX(var(--d));
+    }
+
+    #label {
+      display: block;
+      flex: 1 1 auto;
+      padding: 0;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.value = false;
+    this.tabIndex = 0;
+  }
+
+  /*
+    Lifecycle Methods
+  */
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    
+    if (changedProperties.has('value')) {
+      this.dispatchEvent(new CustomEvent('change', { 
+        detail: { value: this.value },
+        bubbles: true
+      }));
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this.handleClick);
+    this.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this.handleClick);
+    this.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  /*
+    Event Handlers
+  */
+  handleClick = () => {
+    this.toggle();
+  };
+
+  handleKeyDown = (event) => {
+    if (['Space', 'Enter'].includes(event.code)) {
+      event.preventDefault();
+      this.toggle();
+    }
+  };
+
+  /*
+    Public Methods
+  */
+  on() {
+    this.value = true;
+    this.dispatchEvent(new CustomEvent('on', { 
+      detail: { value: true },
+      bubbles: true
+    }));
+    return this;
+  }
+
+  off() {
+    this.value = false;
+    this.dispatchEvent(new CustomEvent('off', { 
+      detail: { value: false },
+      bubbles: true
+    }));
+    return this;
+  }
+
+  toggle() {
+    if (this.value) {
+      this.off();
+    } else {
+      this.on();
+    }
+    this.dispatchEvent(new CustomEvent('toggle', { 
+      detail: { value: this.value },
+      bubbles: true
+    }));
+    return this;
+  }
+
+  /*
+    Rendering Logic
+  */
+  render() {
+    return html`
+      <div id="switch">
+        <div id="handle"></div>
+      </div>
+      <label id="label">
+        <slot></slot>
+      </label>
+    `;
+  }
+}
+
+// Register custom element
+window.customElements.define('k-toggle', Toggle);

package/src/components/tableControls/DeleteRecord.js

@@ -0,0 +1,29 @@
+import TableControl from './TableControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class DeleteRecord extends TableControl {
+	/*
+		Public Methods
+	*/
+	delete = () => {
+		if(this.record) {
+			this.table.deleteRecord(this.record);
+		}
+	};
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<button class="no-btn icon-btn" @click="${this.delete}">
+				<slot>
+					<k-icon name="delete"></k-icon>
+				</slot>
+			</button>
+		`;
+	}
+}
+
+customElements.define('k-tc-delete-record', DeleteRecord);

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