kempo-ui 0.0.3 → 0.0.4

package/src/components/tableControls/PageSelect.js

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

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

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

package/src/components/tableControls/Search.js

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

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

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

package/src/utils/debounce.js

@@ -0,0 +1,9 @@
+function debounce(func, timeout = 300){
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => { func.apply(this, args); }, timeout);
+  };
+}
+
+export default debounce;

package/src/utils/drag.js

@@ -0,0 +1,80 @@
+/*
+	Drag Utility
+*/
+export default (options = {}) => {
+	let startX, startY, timeoutId;
+
+	const {
+		element,
+		callback = () => {},
+		startCallback = () => {},
+		moveCallback = () => {},
+		endCallback = () => {},
+		preventScroll = false
+	} = options;
+
+	const dragMove = (event) => {
+		if(preventScroll) {
+			event.preventDefault(); // prevent drag scrolling
+		}
+		clearTimeout(timeoutId);
+		const pageX = event.pageX || event.touches[0].pageX;
+		const pageY = event.pageY || event.touches[0].pageY;
+		const diff = {
+			x: pageX - startX,
+			y: pageY - startY,
+			...options
+		};
+		callback(diff);
+		moveCallback(diff);
+	};
+
+	const dragEnd = (event) => {
+		clearTimeout(timeoutId);
+		const pageX = event.pageX || (event.changedTouches && event.changedTouches[0].pageX) || 0;
+		const pageY = event.pageY || (event.changedTouches && event.changedTouches[0].pageY) || 0;
+		const diff = {
+			x: pageX - startX,
+			y: pageY - startY,
+			...options
+		};
+		callback(diff);
+		endCallback(diff);
+		removeListeners();
+	};
+
+	const dragStart = (event) => {
+		if(event.button && event.button !== 0) return; // Only left click for mouse
+		
+		clearTimeout(timeoutId);
+		startX = event.pageX || event.touches[0].pageX;
+		startY = event.pageY || event.touches[0].pageY;
+		const diff = {
+			x: 0,
+			y: 0,
+			...options
+		};
+		startCallback(diff);
+		window.addEventListener('mousemove', dragMove, { passive: !preventScroll });
+		window.addEventListener('mouseup', dragEnd, { passive: !preventScroll });
+		window.addEventListener('touchmove', dragMove, { passive: !preventScroll });
+		window.addEventListener('touchend', dragEnd, { passive: !preventScroll });
+	};
+
+	const removeListeners = () => {
+		window.removeEventListener('mousemove', dragMove);
+		window.removeEventListener('mouseup', dragEnd);
+		window.removeEventListener('touchmove', dragMove);
+		window.removeEventListener('touchend', dragEnd);
+	};
+
+	element.addEventListener('mousedown', dragStart, { passive: !preventScroll });
+	element.addEventListener('touchstart', dragStart, { passive: !preventScroll });
+
+	// Return cleanup function
+	return () => {
+		element.removeEventListener('mousedown', dragStart);
+		element.removeEventListener('touchstart', dragStart);
+		removeListeners();
+	};
+};

package/src/utils/formatTimestamp.js

@@ -0,0 +1,27 @@
+export default (timestamp, format, forceLocale) => {
+  const date = new Date(parseInt(timestamp));
+  if (format) {
+    const pad = (num, size) => ('000' + num).slice(size * -1);
+    const tokens = {
+      YYYY: date.getFullYear(),
+      YY: String(date.getFullYear()).slice(-2),
+      MM: pad(date.getMonth() + 1, 2),
+      M: date.getMonth() + 1,
+      DD: pad(date.getDate(), 2),
+      D: date.getDate(),
+      hh: pad(date.getHours(), 2),
+      h: date.getHours(),
+      mm: pad(date.getMinutes(), 2),
+      m: date.getMinutes(),
+      ss: pad(date.getSeconds(), 2),
+      s: date.getSeconds(),
+      iiii: pad(date.getMilliseconds(), 3),
+      iii: pad(date.getMilliseconds(), 3),
+      ii: pad(date.getMilliseconds(), 2),
+      i: date.getMilliseconds()
+    };
+    return format.replace(/YYYY|YY|MM|M|DD|D|hh|h|mm|m|ss|s|iiii|iii|ii|i/g, (matched) => tokens[matched]);
+  } else {
+    return date.toLocaleString(forceLocale || navigator.language);
+  }
+}

package/src/utils/toTitleCase.js

@@ -0,0 +1,9 @@
+const toTitleCase = str =>
+  str
+    .replace(/([A-Z])/g, ' $1')
+    .split(/[\s_-]+/)
+    .filter(word => word.length > 0)
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(' ');
+
+export default toTitleCase;

package/src/utils/watchWindowSize.js

@@ -0,0 +1,16 @@
+import debounce from './debounce.js';
+
+const handlers = new Set();
+window.addEventListener('resize', debounce(() => {
+	const width = window.innerWidth;
+	handlers.forEach((handler) => handler(width));
+}));
+
+export const watchWindowSize = (handler) => {
+	handlers.add(handler);
+	return window.innerWidth;
+};
+
+export const unwatchWindowSize = (handler) => {
+	handlers.delete(handler);
+};

package/dist/src/utils/cli.js

@@ -1 +0,0 @@
-import{spawn}from"child_process";export const getArgs=r=>{const e={},s=process.argv.slice(2);for(let o=0;o<s.length;o++){const t=s[o];if(t.startsWith("-")){const n=t.replace(/^-+/,""),c=r[n]||n,i=s[o+1];i&&!i.startsWith("-")?(e[c]=i,o++):e[c]=!0}}return e};export const runChildNodeProcess=r=>{const e=spawn("node",[r],{stdio:"inherit",shell:!0});return new Promise((r,s)=>{e.on("close",e=>{0===e?r():s(new Error(`Process exited with code ${e}`))}),e.on("error",s)})};

package/dist/src/utils/fs-utils.js

@@ -1 +0,0 @@
-import fs from"fs/promises";import path from"path";export const ensureDir=async r=>{try{await fs.mkdir(r,{recursive:!0})}catch(r){if("EEXIST"!==r.code)throw r}};export const copyDir=async(r,t)=>{await ensureDir(t);const i=await fs.readdir(r,{withFileTypes:!0});for(const a of i){const i=path.join(r,a.name),o=path.join(t,a.name);a.isDirectory()?await copyDir(i,o):await fs.copyFile(i,o)}};export const emptyDir=async r=>{try{const t=await fs.readdir(r);await Promise.all(t.map(t=>fs.rm(path.join(r,t),{recursive:!0,force:!0})))}catch(r){if("ENOENT"!==r.code)throw r}};