tablevu 0.2.22 → 0.3.0-beta.1

package/src/table.js

@@ -1,609 +0,0 @@
-/*
- *  tablevu
- *  A small, fast, easy-to-use table component.
- *  Copyright (c) 2020 Ender Boz <ender.boz@gmail.com>
- *  https://github.com/endb/tablevu/LICENCE
- */
-
-import { h, onMounted, reactive, ref, watch, isReactive, isRef } from 'vue';
-import adaptarr from './array.js';
-
-const tablevuStatuses = { Error: -1, Ready: 0, Loading: 1 };
-
-const tablevu = {
-	props: {
-		settings: { type: Object, default: null },
-		data: { type: [Array, Function] },
-		group: { type: [String, Object] }, 
-		search: { type: String },
-		filter: { type: [Array, Object] },
-		command: { type: Array, default: [] },
-		rowid: { type: String },
-		onRowClick: { type: Function },
-		onRowDblClick: { type: Function },
-		class: { type: String, default: 'table' },
-		style: { type: String, default: null }
-	},
-
-	emits: ['onRowClick', 'onRowDblClick'],
-
-	setup(props, { attrs, slots, emit, expose }) {
-		let rows = [];
-		let rowg = [];
-		let grps = [];
-
-		let adapter = null;
-		let timer = null;
-
-		const spec = reactive({
-			caption: null,
-			group: {
-				value: (props.settings && props.settings.group) ? props.settings.group.value : props.group ? props.group: null, // string ise alan adı, int ise index, fonksiyon ise calistirip alacak.
-				content: (props.settings && props.settings.group) ? props.settings.group.content : null, // grid de ne gosterilecek
-				expandAll: true,
-				class: 'table-light'
-			},
-			page: {
-				count: 0,
-				size: (props.settings && props.settings.page) ? props.settings.page.size : 0,
-				current: 0,
-				type: null // incrementral, dynamic
-			},
-			sort: (props.settings && props.settings.sort) ? props.settings.sort : [],
-			columns: (props.settings && props.settings.columns) ? props.settings.columns : [],
-			footer: {
-				button: {
-					class: 'btn'
-				}
-			}
-		});
-
-		if (props.data) {
-			if (Array.isArray(props.data)) {
-				adapter = adaptarr;
-			}
-			else {
-				adapter = props.data;
-			}
-		};
-
-		// Setup Search Input //
-		if (props.search)
-			spec.search = props.search;
-
-		//if (isRef(props.search) || isReactive(props.search))
-			watch(() => props.search, (n,o) => {
-				const x = parseInt(props.settings.searchMinChar) || 3;
-
-				if (timer) {
-					clearTimeout(timer);
-					timer = null;
-				};
-
-				if (n && n.length > x) {
-					spec.search = n;
-
-					timer = setTimeout(() => { refresh(); timer = null }, 444);
-				} else
-					if (o && o.length > x && (n == undefined || n == null || n.length <= x)) {
-						spec.search = null;
-
-						timer = setTimeout(() => { refresh(); timer = null }, 444);
-					}
-			});
-
-		// Setup dynamic filter //
-		if (props.filter)
-			spec.filter = props.filter;
-
-		//if (isRef(props.filter) || isReactive(props.filter))
-			watch(() => props.filter, () => {
-				if (props.filter)
-					spec.filter = props.filter;
-				else
-					spec.filter = null;
-
-				refresh();
-			}, { deep: true });
-
-		// Setup commands //
-		//if (isRef(props.command) || isReactive(props.command))
-			watch(() => props.command, (n,o) => {
-				if (n && n.length > 0) {
-					const c = props.command[n.length-1];
-
-					if (c && c.name) {
-						if (c.name.toLowerCase() == 'refresh') refresh()
-						else if (c.name.toLowerCase() == 'first') first()
-						else if (c.name.toLowerCase() == 'prior') prior()
-						else if (c.name.toLowerCase() == 'next') next()
-						else if (c.name.toLowerCase() == 'last') last()
-						else console.log('Unknown command');
-					}
-
-					props.command.length = 0;
-				}
-			}, { deep: true });
-		/*****************************************************************
-
-		*****************************************************************/
-		function prepareGroup(g, r) {
-			grps = [];
-			rowg = [];
-
-			for (let i = 0; i < r.length; i++) {
-				let v = null;
-				let c = null;
-
-				const o = r[i];
-
-				if (g.value) {
-					if (typeof g.value == 'function')
-						v = g.value(o);
-					else
-						v = o[g.value];
-				} else
-					if (typeof g == 'function')
-						v = g(o);
-					else {
-						if (typeof g ==  'bigint' || typeof g == 'number') {
-							const l = parseFloat(g);
-
-							if (l)
-								v = o[l];
-						} else
-							if (typeof g == 'string')
-								v = o[g];
-					}
-
-				if (g.content) {
-					if (typeof g.content == 'function')
-						c = g.content(o);
-					else
-						c = o[g.content];
-				};
-
-				let n = grps.findIndex(f => f.group == v);
-
-				if (n == -1) {
-					n = grps.push({ group: v, content: c, expand: spec.group.expandAll }) - 1;
-				};
-
-				rowg.push(n);
-			};
-		}
-		/*****************************************************************
-
-		*****************************************************************/
-		function first() { // Go First Page //
-			page(1);
-		}
-
-		function prior() { // Go Previus Page //
-			if (spec.page.current > 1) {
-				page(spec.page.current - 1);
-			} else {
-				page(spec.page.current);
-			}
-		}
-
-		function next() { // Go Next Page //
-			page(spec.page.current + 1);
-		}
-
-		function last() { // Go Last Page //
-			page(spec.page.count);
-		}
-
-		function go() { // Go Page //
-			let p;
-			let g = spec.page.current;
-
-			do {
-				p = prompt(undefined, spec.page.current);
-				g = parseInt(p);
-			} while (p && isNaN(g));
-
-			if (g && g > 0 && g != spec.page.current)
-				page(g);
-		}
-
-		function refresh() { // Refresh active page //
-			page(spec.page.current);
-		}
-
-		function orderby(ind, dir) { // Sort data //
-			if (spec.sort && spec.sort.length > 0) {
-				let l = spec.sort.findIndex(f => f.index == ind);
-
-				if (l < 0) {
-					let n = spec.columns[ind].name;
-
-					l = spec.sort.findIndex(f => f.name == n);
-				}
-
-				if (l == 0) {
-					spec.sort[l].dir = dir ? dir: (spec.sort[0].dir ? null : 'desc');
-				} else if (l > 0) {
-					spec.sort.splice(l, 1);
-				}
-
-				if (l != 0) {
-					spec.sort.unshift({ index: ind, dir: dir ? dir: null });
-				}
-
-				if (spec.sort.length > 2) {
-					spec.sort.pop();
-				}
-			} else  {
-				spec.sort.push({ index: ind, dir: dir ? dir: null });
-			}
-
-			page(spec.page.current);
-		}
-
-		function page(currentPage) { // Go Custom Page number //
-			let dat = null;
-
-			if (props.data) {
-				if (Array.isArray(props.data))
-					dat = props.data;
-			} else 
-				return;
-
-			spec.status = tablevuStatuses.Loading;
-
-			if (adapter) {
-				adapter({ pageSize: spec.page.size, currPage: currentPage, sort: spec.sort, cols: spec.columns, filter: spec.filter, search: spec.search }, dat).then(ada => {
-					if (spec.onData)
-						rows = spec.onData(ada.rows);
-					else
-						rows = ada.rows;
-					
-					if (spec.group && (typeof spec.group == 'string' || typeof spec.group == 'bigint' || (typeof spec.group == 'object' && spec.group.value )))
-						prepareGroup(spec.group, rows);
-
-					spec.page.count = (ada.count > 0 && spec.page.size > 0) ? Math.ceil(ada.count / spec.page.size) : 0
-					spec.page.current = currentPage;
-
-					spec.status = tablevuStatuses.Ready;
-					spec.time = Date.now();
-				});
-			}
-		}
-		/*****************************************************************
-		 Render Functions
-		*****************************************************************/
-		function renderValue(col, val) {
-			if (val) {
-				let v;
-
-				if (col.type == 'datetime' || col.type == 'date' || col.type == 'time') {
-					let t = new Date(val);
-
-					if (col.type == 'date')
-						v = t.toLocaleDateString();
-					else
-					if (col.type == 'time')
-						v = t.toLocaleTimeString();
-					else
-						v = t.toLocaleString();
-				} else {
-					if (col.type == 'numeric') {
-						v = parseFloat(val);
-					} else {
-						if (col.type == 'integer') {
-							v = parseInt(val);
-						} else
-							v = val;
-					}
-				};
-
-				return v;
-			} else
-				return '';
-		}
-
-		function renderCell(col, val) {
-			const o = { style: {} };
-
-			if (col.colspan && col.colspan > 1) {
-				o.colspan = col.colspan;
-			}
-
-			if (col.style) {
-				o.style = col.style;
-			}
-
-			if (col.align) {
-				o.style['text-align'] = col.align;
-			}
-
-			if (col.width) {
-				o.style['max-width'] = col.width;
-			}
-
-			const v = renderValue(col, val);
-
-			return h('td', o, v);
-		}
-
-		function renderCustomCell(col, row) {
-			const o = { style: {} };
-
-			if (col.colspan && col.colspan > 1) {
-				o.colspan = col.colspan;
-			}
-
-			if (col.style) {
-				o.style = col.style;
-			}
-
-			if (col.align) {
-				o.style['text-align'] = col.align;
-			}
-
-			if (col.width) {
-				o.style['max-width'] = col.width;
-			}
-
-			let f = col.render(row);
-
-			return h('td', o, f);
-		}
-
-		function renderGroup(grp) {
-			const b = h('button', { title: grp.expand, onClick: event => { grp.expand = (grp.expand ? false: true); event.currentTarget.value = grp.expand ? '▼': '►'; spec.time = Date.now(); event.preventDefault() }, style: { padding: 0, margin: '0 6px 0 0', width: '12px', height: '100%', border: 'none', outline: 0, backgroundColor: 'transparent' } }, grp.expand ? '▼': '►');
-			const v = grp.content || grp.group;
-
-
-			return h('tr', {}, h('td', { colspan: spec.columns.length, class: spec.group.class }, [b, v]));
-		}
-
-		function renderRow(index, row) {
-			const o = {};
-			const r = [];
-
-			o.key = index;
-			o.index = index;
-
-			if (props.rowid) {
-				o.rowid = row[props.rowid];
-			}
-
-			for (let i = 0; i < spec.columns.length; i += 1) {
-				let v;
-				const c = spec.columns[i];
-
-				if (c.render) {
-					v = renderCustomCell(c, row);
-					r.push(v);
-				} else {
-					if (c.depth) {
-						v = row;
-						for (let j = 0; j < c.depth.length; j += 1) {
-							if (v)
-								v = v[c.depth[j]];
-						}
-					} else {
-						v = row[c.name];
-					}
-
-					r.push(renderCell(c, v));
-				}
-			}
-
-			//if (spec.onRowDblClick)
-				o.ondblclick = (event) => {
-					const r = rows[event.currentTarget.attributes.index.value];
-					emit('onRowDblClick', event, r);
-					//props.onRowDblClick(event, r); 
-				};
-
-			if (props.onRowClick) {
-				o.onClick = (event) => {
-					const r = rows[event.currentTarget.attributes.index.value];
-					props.onRowClick(event, r);
-				};
-			}
-
-			return h('tr', o, r);
-		}
-
-		function renderHeader() {
-			let ar = [];
-			let sp = 1;
-
-			for (let i = 0; i < spec.columns.length; i += 1) {
-				if (sp > 1) {
-					sp--;
-					continue;
-				};
-
-				const cl = [];
-
-				if (spec.columns[i].label) {
-					cl.push(h('span', spec.columns[i].label));
-				} else {
-					cl.push(h('span', spec.columns[i].name));
-				}
-
-				if (spec.sort && spec.sort.length > 0 && spec.sort[0].index == i) {
-					if (spec.sort[0].dir == 'desc')
-						cl.push(h('span', { style: { float: 'right' } }, '▼'))
-					else
-						cl.push(h('span', { style: { float: 'right' } }, '▲'))
-				}
-
-				let ch = { position: 'relative' };
-
-				if (spec.columns[i].width) {
-					ch.width = spec.columns[i].width;
-					ch.minWidth = spec.columns[i].width;
-					ch.maxWidth = spec.columns[i].width;
-				}
-
-				let cy = { display: 'block', 'font-weight': 500, textDecoration: 'none', textAlign: 'center' };
-
-				if (spec.columns[i].header) {
-					if (spec.columns[i].header.colspan)
-						sp = parseInt(spec.columns[i].header.colspan) || 1;
-
-					if (spec.columns[i].header.style)
-						ch.style = spec.columns[i].header.style;
-
-					if (spec.columns[i].header.align)
-						ch.textAlign = spec.columns[i].header.align;
-				}
-
-				let a;
-				let f;
-
-				if (spec.columns[i].popup) {
-					const r = ref(null);
-					let c = [
-						h('a', { href: '#', onClick(event) { orderby(i); event.preventDefault(); }, style: { display: 'block', textDecoration: 'none', color: 'black', fontWeight: 'initial', padding: '.25rem' } }, 'Order by Ascending'),
-						h('a', { href: '#', onClick(event) { orderby(i, 'desc'); event.preventDefault(); }, style: { display: 'block', textDecoration: 'none', color: 'black', fontWeight: 'initial', padding: '.25rem' } }, 'Order by Descending'),
-					];
-
-					a = h('a', { href: '#', onClick(event) { if (r.value && r.value.style  && r.value.style.display  && r.value.style.display == 'block') r.value.style.display = 'none'; else r.value.style.display = 'block'; event.preventDefault(); }, style: cy }, cl);
-					f = h('div', { ref: r, style: { position: 'absolute', display: 'none', width: spec.columns[i].width || '12rem', height: 'fit-content', border: '1px solid lightgray', backgroundColor: 'whitesmoke', zIndex: 1, left: 0, top: '2rem', bottom: 0, right: 0, padding: '.25rem' }}, c);
-
-				} else
-					a = h('a', { href: '#', onClick(event) { orderby(i); event.preventDefault(); }, style: cy }, cl);
-
-				if (spec.columns[i].filter) {
-				}
-
-				ar.push(h('th', { colspan: sp > 1 ? sp: null, style: ch }, [a, f]));
-			}
-
-			const tr = h('tr', {}, ar);
-
-			return [tr];
-		}
-
-		function renderBody() {
-			const dr = [];
-
-			if (rows && rows.length > 0) {
-				if (grps && grps.length > 0) {
-					let r = [];
-
-					for (let g = 0; g < grps.length; g++)
-						r.push({ index: g, childs: [] });
-
-					for (let i = 0; i < rows.length; i++) {
-						const x = rowg[i];
-
-						r[x].childs.push(renderRow(i, rows[i]));
-					};
-
-					for (let g = 0; g < grps.length; g++) {
-						dr.push(renderGroup(grps[g]));
-
-						if (grps[g].expand)
-							dr.push(r[g].childs);
-					}
-				} else {
-					for (let i = 0; i < rows.length; i++) {
-						dr.push(renderRow(i, rows[i]));
-					}
-				}
-			};
-
-			return dr;
-		}
-
-		function renderFooter() {
-			const fr = h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: first, disabled: spec.page.current == 1 }, '◀◀');
-			const ls = h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: last, disabled: spec.page.count == 0 || spec.page.current == spec.page.count }, '▶▶');
-			const pg = h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: go }, spec.page.current + (spec.page.count > 0 ? (' / ' + spec.page.count) : '' ));
-			const pr = h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: prior, disabled: spec.page.current == 1 }, '◀');
-			const nx = h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: next, disabled: spec.page.count > 0 && spec.page.current == spec.page.count }, '▶');
-			const td = h('td', { colspan: spec.columns.length, align: 'center' }, [fr, pr, pg, nx, ls]);
-			const tr = h('tr', {}, [td]);
-
-			return [tr];
-		}
-
-		function renderCaption() {
-			return null; // NOT REMEMBER !!!
-			// caption-side
-			// text-align
-		}
-		/*****************************************************************
-		 Columns
-		*****************************************************************/
-		if (spec.columns.length == 0) {
-			alert('Columns not defined !')
-			//cls = slots.default().map(m => m.props);
-		}
-
-		for (let i = 0; i < spec.columns.length; i++)
-			if (spec.columns[i].name && spec.columns[i].name.indexOf('.') > -1) {
-				spec.columns[i].depth = spec.columns[i].name.split('.');
-			}
-
-		page(1);
-
-		onMounted(() => {
-		});
-
-		return {
-			spec, renderHeader, renderBody, renderFooter, renderCaption
-		};
-
-
-	},
-
-	render(props) {
-		let prps = { class: 'tablevu' };
-/*
-		if (props.id)
-			prps.id = props.id;
-*/
-		if (props.class)
-			prps.class = 'tablevu ' + props.class;
-
-		if (props.style)
-			prps.style = props.style;
-
-	/*	if (props.dir)
-			prps.dir = props.dir;
-
-		if (props.hidden)
-			prps.hidden = props.hidden;
-
-
-		if (props.title)
-			prps.title = props.title;
-*/
-		// Content //
-		let cntn = [];
-
-		cntn.push(
-			h('thead', {}, this.renderHeader())
-		);
-
-		if (this.spec.status == tablevuStatuses.Ready)
-			cntn.push(
-				h('tbody', { 'data-time': this.spec.time}, this.renderBody())
-			);
-
-		if (this.spec.caption)
-			cntn.push(
-				h('caption', {}, this.renderCaption())
-			);
-
-		if (this.spec.status == tablevuStatuses.Ready)
-			if (this.spec.page.size > 0)
-				cntn.push(
-					h('tfoot', {}, this.renderFooter())
-				);
-
-		return h('table', prps, cntn);
-	}
-};
-
-export default tablevu;

package/src/webapi.js

@@ -1,33 +0,0 @@
-import get from './get.js';
-
-export default class webapi {
-	constructor(req, data, events) {
-		this.adapter = (props) => {
-			const u = new URL(req.url);
-
-			// Paging //
-			if (props.pageSize) {
-				u.searchParams.append('skip', props.pageSize * (props.currPage - 1));
-				u.searchParams.append('top', props.pageSize);
-			}
-
-			// Search //
-			if (props.search)
-				u.searchParams.append('search', props.search);
-
-			// Sort //
-			if (props.sort && props.sort.length > 0) {
-				u.searchParams.append('orderby', props.sort.map(m => { let n = { index: -1, name: '' }; if (Object.prototype.hasOwnProperty.call(m, 'index')) { n.index = m.index } else { n.name = m.name }; return n; }).map(m => { return (m.index > -1 ? props.cols[m.index].name : m.name) }));
-				//u.searchParams.append('orderdir', );
-			};
-
-			let r = null;
-			if (events && events.onfetch && typeof events.onfetch == 'function')
-				r = events.onfetch(new Request(u, req))
-			else
-				r = new Request(u, req);
-
-			return get(r);
-		}
-	}
-}