@onetype/framework 2.0.53 → 2.0.54

package/addons/render/elements/front/functions/types/colors/status.js

@@ -0,0 +1,24 @@
+onetype.AddonReady('elements', () => 
+{
+    const colors = {
+        live: 'green',
+        published: 'green',
+        active: 'green',
+        success: 'green',
+        approved: 'green',
+        pending: 'orange',
+        review: 'orange',
+        draft: 'neutral',
+        archived: 'neutral',
+        disabled: 'neutral',
+        rejected: 'red',
+        error: 'red',
+        failed: 'red',
+        inactive: 'red'
+    };
+
+    elements.Fn('type.colors.status', function(overrides)
+    {
+        return { ...colors, ...(overrides || {}) };
+    });
+});

package/addons/render/elements/front/functions/types/escape.js

@@ -0,0 +1,8 @@
+elements.Fn('type.escape', function(value)
+{
+	return String(value === null || value === undefined ? '' : value)
+		.replace(/&/g, '&')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;');
+});

package/addons/render/elements/front/functions/types/format/currency.js

@@ -0,0 +1,16 @@
+elements.Fn('type.format.currency', function(value, currency)
+{
+	if(value === null || value === undefined || value === '')
+	{
+		return '—';
+	}
+
+	const symbol = currency || '€';
+
+	if(typeof value !== 'number')
+	{
+		return symbol + value;
+	}
+
+	return symbol + value.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
+});

package/addons/render/elements/front/functions/types/format/date.js

@@ -0,0 +1,16 @@
+elements.Fn('type.format.date', function(value)
+{
+	if(!value)
+	{
+		return '—';
+	}
+
+	const date = new Date(value);
+
+	if(isNaN(date))
+	{
+		return '—';
+	}
+
+	return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+});

package/addons/render/elements/front/functions/types/format/number.js

@@ -0,0 +1,24 @@
+elements.Fn('type.format.number', function(value)
+{
+	if(value === null || value === undefined || value === '')
+	{
+		return '—';
+	}
+
+	if(typeof value !== 'number')
+	{
+		return String(value);
+	}
+
+	if(Math.abs(value) >= 1000000)
+	{
+		return (value / 1000000).toFixed(1) + 'M';
+	}
+
+	if(Math.abs(value) >= 1000)
+	{
+		return (value / 1000).toFixed(1) + 'k';
+	}
+
+	return String(value);
+});

package/addons/render/elements/front/functions/types/format/timeago.js

@@ -0,0 +1,43 @@
+elements.Fn('type.format.timeago', function(value)
+{
+	if(!value)
+	{
+		return '—';
+	}
+
+	const then = new Date(value).getTime();
+
+	if(isNaN(then))
+	{
+		return '—';
+	}
+
+	const diff = Math.floor((Date.now() - then) / 1000);
+
+	if(diff < 60)
+	{
+		return 'just now';
+	}
+
+	if(diff < 3600)
+	{
+		return Math.floor(diff / 60) + 'm ago';
+	}
+
+	if(diff < 86400)
+	{
+		return Math.floor(diff / 3600) + 'h ago';
+	}
+
+	if(diff < 604800)
+	{
+		return Math.floor(diff / 86400) + 'd ago';
+	}
+
+	if(diff < 2592000)
+	{
+		return Math.floor(diff / 604800) + 'w ago';
+	}
+
+	return Math.floor(diff / 2592000) + 'mo ago';
+});

package/addons/render/elements/front/functions/types/render/avatar.js

@@ -0,0 +1,10 @@
+elements.Fn('type.avatar', function(column, item)
+{
+	const raw = column.id ? item[column.id] : undefined;
+	const src = typeof raw === 'string' ? raw : (raw && raw.src);
+	const name = (raw && raw.name) || '';
+
+	return src
+		? '<div class="ot-type-avatar"><img src="' + elements.Fn('type.escape', src) + '" alt="' + elements.Fn('type.escape', name) + '"/></div>'
+		: '<div class="ot-type-avatar ot-type-avatar-fallback"><i>person</i></div>';
+});

package/addons/render/elements/front/functions/types/render/badge.js

@@ -0,0 +1,17 @@
+elements.Fn('type.badge', function(column, item)
+{
+	const config = column.config || {};
+	const raw = column.id ? item[column.id] : undefined;
+
+	const obj = (typeof raw === 'object' && raw) ? raw : { label: raw };
+	const icon = obj.icon || '';
+	const label = obj.label !== undefined ? obj.label : obj;
+	const colors = elements.Fn('type.colors.badge', config.colors);
+	const key = label ? String(label).toLowerCase() : '';
+	const color = obj.color || colors[key] || config.color || 'neutral';
+
+	return '<span class="ot-type-badge color-' + elements.Fn('type.escape', color) + '">'
+		+ (icon ? '<i>' + elements.Fn('type.escape', icon) + '</i>' : '')
+		+ '<span>' + elements.Fn('type.escape', label || '—') + '</span>'
+	+ '</span>';
+});

package/addons/render/elements/front/functions/types/render/boolean.js

@@ -0,0 +1,8 @@
+elements.Fn('type.boolean', function(column, item)
+{
+	const raw = column.id ? item[column.id] : undefined;
+
+	return raw
+		? '<i class="ot-type-boolean yes">check_circle</i>'
+		: '<i class="ot-type-boolean no">cancel</i>';
+});

package/addons/render/elements/front/functions/types/render/chip.js

@@ -0,0 +1,6 @@
+elements.Fn('type.chip', function(column, item)
+{
+	const raw = column.id ? item[column.id] : undefined;
+
+	return '<span class="ot-type-chip">' + elements.Fn('type.escape', raw === null || raw === undefined ? '—' : raw) + '</span>';
+});

package/addons/render/elements/front/functions/types/render/currency.js

@@ -0,0 +1,7 @@
+elements.Fn('type.currency', function(column, item)
+{
+	const config = column.config || {};
+	const raw = column.id ? item[column.id] : undefined;
+
+	return '<span class="ot-type-number">' + elements.Fn('type.escape', elements.Fn('type.format.currency', raw, config.currency)) + '</span>';
+});

package/addons/render/elements/front/functions/types/render/date.js

@@ -0,0 +1,6 @@
+elements.Fn('type.date', function(column, item)
+{
+	const raw = column.id ? item[column.id] : undefined;
+
+	return '<span class="ot-type-date">' + elements.Fn('type.escape', elements.Fn('type.format.date', raw)) + '</span>';
+});

package/addons/render/elements/front/functions/types/render/description.js

@@ -0,0 +1,12 @@
+elements.Fn('type.description', function(column, item)
+{
+	const config = column.config || {};
+	const raw = column.id ? item[column.id] : undefined;
+	const value = config.value !== undefined ? config.value : raw;
+	const max = config.max || 70;
+
+	const string = value === null || value === undefined || value === '' ? '—' : String(value);
+	const truncated = string.length > max ? string.slice(0, max) + '…' : string;
+
+	return '<span class="ot-type-description">' + elements.Fn('type.escape', truncated) + '</span>';
+});

package/addons/render/elements/front/functions/types/render/group.js

@@ -0,0 +1,11 @@
+elements.Fn('type.group', function(column, item)
+{
+	const config = column.config || {};
+	const layout = config.layout || 'row';
+	const gap = config.gap || 'small';
+	const fields = config.fields || [];
+
+	return '<div class="ot-type-group layout-' + layout + ' gap-' + gap + '">'
+		+ fields.map(field => elements.Fn('type.render', field, item)).join('')
+	+ '</div>';
+});

package/addons/render/elements/front/functions/types/render/icon.js

@@ -0,0 +1,8 @@
+elements.Fn('type.icon', function(column, item)
+{
+	const config = column.config || {};
+	const raw = column.id ? item[column.id] : undefined;
+	const value = config.value !== undefined ? config.value : raw;
+
+	return value ? '<i class="ot-type-icon">' + elements.Fn('type.escape', value) + '</i>' : '';
+});

package/addons/render/elements/front/functions/types/render/image.js

@@ -0,0 +1,9 @@
+elements.Fn('type.image', function(column, item)
+{
+	const raw = column.id ? item[column.id] : undefined;
+	const src = typeof raw === 'string' ? raw : (raw && raw.src);
+
+	return src
+		? '<div class="ot-type-image" style="background-image:url(\'' + elements.Fn('type.escape', src) + '\')"></div>'
+		: '<div class="ot-type-image empty"></div>';
+});

package/addons/render/elements/front/functions/types/render/link.js

@@ -0,0 +1,8 @@
+elements.Fn('type.link', function(column, item)
+{
+	const raw = column.id ? item[column.id] : undefined;
+
+	const obj = (typeof raw === 'object' && raw) ? raw : { label: raw, href: '#' };
+
+	return '<a class="ot-type-link" href="' + elements.Fn('type.escape', obj.href || '#') + '">' + elements.Fn('type.escape', obj.label || raw || '—') + '</a>';
+});

package/addons/render/elements/front/functions/types/render/media.js

@@ -0,0 +1,16 @@
+elements.Fn('type.media', function(column, item)
+{
+	const config = column.config || {};
+
+	const image = item[config.image || 'image'];
+	const title = item[config.title || 'name'] || '';
+	const subtitle = item[config.subtitle || 'subtitle'] || '';
+
+	return '<div class="ot-type-media">'
+		+ (image ? '<div class="ot-type-media-thumb" style="background-image:url(\'' + elements.Fn('type.escape', image) + '\')"></div>' : '<div class="ot-type-media-thumb empty"><i>image</i></div>')
+		+ '<div class="ot-type-media-info">'
+			+ '<div class="ot-type-media-title">' + elements.Fn('type.escape', title) + '</div>'
+			+ (subtitle ? '<div class="ot-type-media-subtitle">' + elements.Fn('type.escape', subtitle) + '</div>' : '')
+		+ '</div>'
+	+ '</div>';
+});

package/addons/render/elements/front/functions/types/render/metric.js

@@ -0,0 +1,13 @@
+elements.Fn('type.metric', function(column, item)
+{
+	const raw = column.id ? item[column.id] : undefined;
+
+	const value = typeof raw === 'object' && raw ? raw.value : raw;
+	const delta = typeof raw === 'object' && raw ? raw.delta : null;
+	const direction = delta && String(delta).startsWith('-') ? 'down' : 'up';
+
+	return '<span class="ot-type-metric">'
+		+ '<span class="ot-type-metric-value">' + elements.Fn('type.escape', value === null || value === undefined ? '—' : value) + '</span>'
+		+ (delta ? '<span class="ot-type-metric-delta ' + direction + '">' + elements.Fn('type.escape', delta) + '</span>' : '')
+	+ '</span>';
+});

package/addons/render/elements/front/functions/types/render/number.js

@@ -0,0 +1,6 @@
+elements.Fn('type.number', function(column, item)
+{
+	const raw = column.id ? item[column.id] : undefined;
+
+	return '<span class="ot-type-number">' + elements.Fn('type.escape', elements.Fn('type.format.number', raw)) + '</span>';
+});

package/addons/render/elements/front/functions/types/render/progress.js

@@ -0,0 +1,13 @@
+elements.Fn('type.progress', function(column, item)
+{
+	const config = column.config || {};
+	const raw = column.id ? item[column.id] : undefined;
+
+	const percent = Math.max(0, Math.min(100, Number(raw) || 0));
+	const color = config.color || 'brand';
+
+	return '<div class="ot-type-progress">'
+		+ '<div class="ot-type-progress-track"><div class="ot-type-progress-bar color-' + elements.Fn('type.escape', color) + '" style="width:' + percent + '%"></div></div>'
+		+ '<span class="ot-type-progress-label">' + percent + '%</span>'
+	+ '</div>';
+});

package/addons/render/elements/front/functions/types/render/status.js

@@ -0,0 +1,12 @@
+elements.Fn('type.status', function(column, item)
+{
+	const config = column.config || {};
+	const raw = column.id ? item[column.id] : undefined;
+
+	const colors = elements.Fn('type.colors.status', config.colors);
+	const key = raw ? String(raw).toLowerCase() : '';
+	const color = colors[key] || config.color || 'neutral';
+	const label = raw ? String(raw).charAt(0).toUpperCase() + String(raw).slice(1) : '—';
+
+	return '<span class="ot-type-status color-' + color + '"><span class="ot-type-status-dot"></span>' + elements.Fn('type.escape', label) + '</span>';
+});

package/addons/render/elements/front/functions/types/render/tag.js

@@ -0,0 +1,6 @@
+elements.Fn('type.tag', function(column, item)
+{
+	const raw = column.id ? item[column.id] : undefined;
+
+	return '<span class="ot-type-tag">' + elements.Fn('type.escape', raw === null || raw === undefined ? '—' : raw) + '</span>';
+});

package/addons/render/elements/front/functions/types/render/tags.js

@@ -0,0 +1,11 @@
+elements.Fn('type.tags', function(column, item)
+{
+	const raw = column.id ? item[column.id] : undefined;
+
+	if(!Array.isArray(raw) || !raw.length)
+	{
+		return '<span class="ot-type-text">—</span>';
+	}
+
+	return '<div class="ot-type-tags">' + raw.map(tag => '<span class="ot-type-tag">' + elements.Fn('type.escape', tag) + '</span>').join('') + '</div>';
+});

package/addons/render/elements/front/functions/types/render/text.js

@@ -0,0 +1,8 @@
+elements.Fn('type.text', function(column, item)
+{
+	const config = column.config || {};
+	const raw = column.id ? item[column.id] : undefined;
+	const value = config.value !== undefined ? config.value : raw;
+
+	return '<span class="ot-type-text">' + elements.Fn('type.escape', value === null || value === undefined || value === '' ? '—' : value) + '</span>';
+});

package/addons/render/elements/front/functions/types/render/timeago.js

@@ -0,0 +1,6 @@
+elements.Fn('type.timeago', function(column, item)
+{
+	const raw = column.id ? item[column.id] : undefined;
+
+	return '<span class="ot-type-date">' + elements.Fn('type.escape', elements.Fn('type.format.timeago', raw)) + '</span>';
+});

package/addons/render/elements/front/functions/types/render.js

@@ -0,0 +1,16 @@
+elements.Fn('type.render', function(column, item)
+{
+	if(column.render)
+	{
+		return column.render(item, column);
+	}
+
+	const type = column.type || 'text';
+
+	if(elements.FnGet('type.' + type))
+	{
+		return elements.Fn('type.' + type, column, item);
+	}
+
+	return elements.Fn('type.text', column, item);
+});

package/addons/render/elements/front/items/directives/element.js

@@ -24,21 +24,26 @@ onetype.AddonReady('directives', function(directives)
 				data: {}
 			};
 
+			const toCamel = (name) =>
+			{
+				return name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+			};
+
 			for (let i = 0; i < node.attributes.length; i++)
 			{
 				const attr = node.attributes[i];
 
 				if (attr.name.startsWith('#'))
 				{
-					attributes.wrapper[attr.name.substring(1)] = attr.value;
+					attributes.wrapper[toCamel(attr.name.substring(1))] = attr.value;
 				}
 				else if(attr.name.startsWith(':'))
 				{
-					attributes.data[attr.name.substring(1)] = onetype.Function(attr.value, compile.data, false);
+					attributes.data[toCamel(attr.name.substring(1))] = onetype.Function(attr.value, compile.data, false);
 				}
 				else
 				{
-					attributes.data[attr.name] = attr.value;
+					attributes.data[toCamel(attr.name)] = attr.value;
 				}
 			}