@onetype/framework 2.0.52 → 2.0.54

package/addons/render/editor/styles/editor.css

@@ -0,0 +1,252 @@
+/* Root */
+
+.e-5511e8fd
+{
+	display: block;
+	width: 100%;
+}
+
+/* Editor */
+
+.e-5511e8fd > .ot-editor
+{
+	position: relative;
+	max-width: 720px;
+	margin: 0 auto;
+	padding: var(--ot-spacing-l) 0;
+}
+
+/* Blocks Container */
+
+.e-5511e8fd > .ot-editor > .ot-editor-blocks
+{
+	display: flex;
+	flex-direction: column;
+}
+
+/* Placeholder */
+
+.e-5511e8fd > .ot-editor > .ot-editor-placeholder
+{
+	color: var(--ot-text-3);
+	font-size: var(--ot-size-m);
+	padding: 0 var(--ot-spacing-m);
+	padding-left: 44px;
+	pointer-events: none;
+}
+
+/* Block */
+
+.e-5511e8fd .ot-block
+{
+	position: relative;
+	display: flex;
+	align-items: flex-start;
+	padding: 2px 0;
+	border-radius: var(--ot-radius-m);
+	outline: none;
+	transition: background 0.1s ease;
+}
+
+.e-5511e8fd .ot-block:hover
+{
+	background: var(--ot-bg-1-hover);
+}
+
+/* Gutter */
+
+.e-5511e8fd .ot-block-gutter
+{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 44px;
+	flex-shrink: 0;
+	opacity: 0;
+	transition: opacity 0.15s ease;
+	padding-top: 2px;
+}
+
+.e-5511e8fd .ot-block:hover > .ot-block-gutter
+{
+	opacity: 1;
+}
+
+.e-5511e8fd .ot-block-handle,
+.e-5511e8fd .ot-block-add
+{
+	width: 24px;
+	height: 24px;
+	border-radius: var(--ot-radius-s);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--ot-text-3);
+	background: none;
+	border: none;
+	cursor: pointer;
+	padding: 0;
+	transition: background 0.15s ease, color 0.15s ease;
+}
+
+.e-5511e8fd .ot-block-handle:hover,
+.e-5511e8fd .ot-block-add:hover
+{
+	background: var(--ot-bg-3);
+	color: var(--ot-text-1);
+}
+
+.e-5511e8fd .ot-block-handle > i,
+.e-5511e8fd .ot-block-add > i
+{
+	font-size: 16px;
+}
+
+.e-5511e8fd .ot-block-handle
+{
+	cursor: grab;
+}
+
+.e-5511e8fd .ot-block-handle:active
+{
+	cursor: grabbing;
+}
+
+/* Content */
+
+.e-5511e8fd .ot-block-content
+{
+	flex: 1;
+	min-width: 0;
+	min-height: 24px;
+	outline: none;
+}
+
+.e-5511e8fd .ot-block-content > [contenteditable]
+{
+	outline: none;
+	min-height: 24px;
+	word-break: break-word;
+	overflow-wrap: break-word;
+}
+
+.e-5511e8fd .ot-block-content > [contenteditable]:empty::before
+{
+	content: attr(data-placeholder);
+	color: var(--ot-text-3);
+	pointer-events: none;
+}
+
+/* Paragraph */
+
+.e-5511e8fd .ot-block-content > p
+{
+	margin: 0;
+	font-size: var(--ot-size-m);
+	line-height: 1.7;
+	color: var(--ot-text-1);
+}
+
+/* Inline Formats */
+
+.e-5511e8fd .ot-block-content strong
+{
+	font-weight: 600;
+	color: var(--ot-text-1);
+}
+
+.e-5511e8fd .ot-block-content em
+{
+	font-style: italic;
+}
+
+.e-5511e8fd .ot-block-content code
+{
+	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+	font-size: 0.9em;
+	padding: 0.15em 0.4em;
+	border-radius: var(--ot-radius-s);
+	background: var(--ot-bg-2);
+	border: 1px solid var(--ot-bg-2-border);
+}
+
+.e-5511e8fd .ot-block-content a
+{
+	color: var(--ot-brand);
+	text-decoration: underline;
+	text-decoration-color: var(--ot-brand-opacity);
+	text-underline-offset: 3px;
+}
+
+/* Actions */
+
+.e-5511e8fd .ot-block-actions
+{
+	display: flex;
+	align-items: flex-start;
+	flex-shrink: 0;
+	opacity: 0;
+	transition: opacity 0.15s ease;
+	padding-top: 2px;
+}
+
+.e-5511e8fd .ot-block:hover > .ot-block-actions
+{
+	opacity: 1;
+}
+
+.e-5511e8fd .ot-block-settings
+{
+	width: 24px;
+	height: 24px;
+	border-radius: var(--ot-radius-s);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--ot-text-3);
+	background: none;
+	border: none;
+	cursor: pointer;
+	padding: 0;
+	transition: background 0.15s ease, color 0.15s ease;
+}
+
+.e-5511e8fd .ot-block-settings:hover
+{
+	background: var(--ot-bg-3);
+	color: var(--ot-text-1);
+}
+
+.e-5511e8fd .ot-block-settings > i
+{
+	font-size: 16px;
+}
+
+/* Selection */
+
+.e-5511e8fd .ot-block-selected
+{
+	background: var(--ot-brand-opacity);
+}
+
+.e-5511e8fd .ot-block-focused
+{
+	background: transparent;
+}
+
+/* Bordered variant */
+
+.e-5511e8fd > .ot-editor.bordered
+{
+	border: 1px solid var(--ot-bg-1-border);
+	border-radius: var(--ot-radius-l);
+	padding: var(--ot-spacing-l);
+}
+
+/* Compact variant */
+
+.e-5511e8fd > .ot-editor.compact
+{
+	max-width: 100%;
+	padding: var(--ot-spacing-m) 0;
+}

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

@@ -0,0 +1,19 @@
+onetype.AddonReady('elements', () => 
+{
+    const colors = {
+        new: 'brand',
+        featured: 'brand',
+        pro: 'brand',
+        premium: 'brand',
+        beta: 'blue',
+        info: 'blue',
+        warning: 'orange',
+        danger: 'red',
+        success: 'green'
+    };
+
+    elements.Fn('type.colors.badge', function(overrides)
+    {
+        return { ...colors, ...(overrides || {}) };
+    });
+});

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