@onetype/framework 2.0.42 → 2.0.43

package/{lib/items/elements → addons/render/elements/front/items/self}/form/slider/slider.js

@@ -1,74 +1,89 @@
-onetype.AddonReady('elements', (elements) =>
-{
-	elements.ItemAdd({
-		id: 'form-slider',
-		icon: 'linear_scale',
-		name: 'Slider',
-		description: 'Range slider for selecting numeric values.',
-		category: 'Form',
-		author: 'OneType',
-		config: {
-			value: {
-				type: 'number',
-				value: 50
-			},
-			min: {
-				type: 'number',
-				value: 0
-			},
-			max: {
-				type: 'number',
-				value: 100
-			},
-			step: {
-				type: 'number',
-				value: 10
-			},
-			disabled: {
-				type: 'boolean',
-				value: false
-			},
-			variant: {
-				type: 'array',
-				value: ['brand', 'size-m'],
-				options: ['brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
-			},
-			_change: {
-				type: 'function'
-			}
-		},
-		render: function()
-		{
-			this.handle = (event) =>
-			{
-				this.value = parseFloat(event.target.value);
-				if (this._change)
-				{
-					this._change(this.value);
-				}
-			};
-
-			this.percentage = () =>
-			{
-				return ((this.value - this.min) / (this.max - this.min)) * 100;
-			};
-
-			return `
-				<div :class="'holder ' + variant.join(' ')">
-					<div class="track">
-						<div class="fill" :style="'width: ' + percentage() + '%'"></div>
-					</div>
-					<input
-						type="range"
-						:value="value"
-						:min="min"
-						:max="max"
-						:step="step"
-						:disabled="disabled"
-						ot-input="handle"
-					/>
-				</div>
-			`;
-		}
-	});
-});
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'form-slider',
+		icon: 'linear_scale',
+		name: 'Slider',
+		description: 'Range slider for selecting numeric values.',
+		category: 'Form',
+		author: 'OneType',
+		config: {
+			value: {
+				type: 'number',
+				value: 50
+			},
+			min: {
+				type: 'number',
+				value: 0
+			},
+			max: {
+				type: 'number',
+				value: 100
+			},
+			step: {
+				type: 'number',
+				value: 10
+			},
+			disabled: {
+				type: 'boolean',
+				value: false
+			},
+			variant: {
+				type: 'array',
+				value: ['brand', 'size-m'],
+				options: ['brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
+			},
+			_input: {
+				type: 'function'
+			},
+			_change: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			this.handle = ({ event }) =>
+			{
+				this.value = parseFloat(event.target.value);
+
+				if (this._input)
+				{
+					this._input({ event, value: this.value });
+				}
+			};
+
+			this.commit = ({ event }) =>
+			{
+				this.value = parseFloat(event.target.value);
+
+				if (this._change)
+				{
+					this._change({ event, value: this.value });
+				}
+			};
+
+			this.percentage = () =>
+			{
+				return ((this.value - this.min) / (this.max - this.min)) * 100;
+			};
+
+			return `
+				<div :class="'holder ' + variant.join(' ')">
+					<div class="track">
+						<div class="fill" :style="'width: ' + percentage() + '%'"></div>
+					</div>
+					<input
+						type="range"
+						:value="value"
+						:min="min"
+						:max="max"
+						:step="step"
+						:disabled="disabled"
+						ot-input="handle"
+						ot-change="commit"
+					/>
+				</div>
+			`;
+		}
+	});
+});

package/{lib/items/elements → addons/render/elements/front/items/self}/form/tags/tags.js

@@ -77,7 +77,7 @@ onetype.AddonReady('elements', (elements) =>
 
 				if (this._change)
 				{
-					this._change(this.value);
+					this._change({ value: this.value });
 				}
 			};
 
@@ -93,18 +93,18 @@ onetype.AddonReady('elements', (elements) =>
 
 				if (this._change)
 				{
-					this._change(this.value);
+					this._change({ value: this.value });
 				}
 			};
 
-			this.input = (event, ctx) =>
+			this.input = ({ value }) =>
 			{
-				this.query = ctx.value;
+				this.query = value;
 				this.open = this.query.length > 0 && this.filtered().length > 0;
 				this.Update();
 			};
 
-			this.keydown = (event) =>
+			this.keydown = ({ event }) =>
 			{
 				if (event.key === 'Enter')
 				{

package/{lib/items/elements → addons/render/elements/front/items/self}/form/textarea/textarea.js

@@ -55,10 +55,45 @@ onetype.AddonReady('elements', (elements) =>
 		},
 		render: function()
 		{
+			this.input = ({ event, value }) =>
+			{
+				this.value = value;
+
+				if (this._input)
+				{
+					this._input({ event, value });
+				}
+			};
+
+			this.change = ({ event, value }) =>
+			{
+				this.value = value;
+
+				if (this._change)
+				{
+					this._change({ event, value });
+				}
+			};
+
+			this.focus = ({ event, value }) =>
+			{
+				if (this._focus)
+				{
+					this._focus({ event, value });
+				}
+			};
+
+			this.blur = ({ event, value }) =>
+			{
+				if (this._blur)
+				{
+					this._blur({ event, value });
+				}
+			};
+
 			return `
 				<div :class="'holder ' + variant.join(' ')">
 					<textarea
-						:value="value"
 						:placeholder="placeholder"
 						:name="name"
 						:rows="rows"
@@ -66,11 +101,11 @@ onetype.AddonReady('elements', (elements) =>
 						:disabled="disabled"
 						:readonly="readonly"
 						autocomplete="off"
-						ot-input="_input"
-						ot-change="_change"
-						ot-focus="_focus"
-						ot-blur="_blur"
-					></textarea>
+						ot-input="input"
+						ot-change="change"
+						ot-focus="focus"
+						ot-blur="blur"
+					>{{ value }}</textarea>
 				</div>
 			`;
 		}

package/{lib/items/elements → addons/render/elements/front/items/self}/form/toggle/toggle.css

@@ -79,6 +79,10 @@
 .e-180e0ca7 > .holder.bg-4 > .track { background: var(--ot-bg-4); }
 .e-180e0ca7 > .holder.bg-4.active > .track { background: var(--ot-brand-opacity); }
 
+/* Border */
+
+.e-180e0ca7 > .holder.border > .track { border: 1px solid var(--ot-bg-2-border); }
+
 /* Size small */
 
 .e-180e0ca7 > .holder.size-s > .track { width: 28px; height: 16px; }

package/{lib/items/elements → addons/render/elements/front/items/self}/form/toggle/toggle.js

@@ -16,7 +16,7 @@ onetype.AddonReady('elements', (elements) =>
 				type: 'string',
 				value: ''
 			},
-			checked: {
+			value: {
 				type: 'boolean',
 				value: false
 			},
@@ -27,7 +27,7 @@ onetype.AddonReady('elements', (elements) =>
 			variant: {
 				type: 'array',
 				value: ['bg-3', 'size-m'],
-				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'size-s', 'size-m', 'size-l']
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
 			},
 			_change: {
 				type: 'function'
@@ -35,7 +35,7 @@ onetype.AddonReady('elements', (elements) =>
 		},
 		render: function()
 		{
-			this.handle = (event) =>
+			this.handle = ({ event }) =>
 			{
 				event.preventDefault();
 
@@ -44,18 +44,17 @@ onetype.AddonReady('elements', (elements) =>
 					return;
 				}
 
-				this.checked = !this.checked;
-				this.Update();
+				this.value = !this.value;
 
 				if (this._change)
 				{
-					this._change(this.checked);
+					this._change({ event, value: this.value });
 				}
 			};
 
 			return `
-				<div :class="'holder ' + variant.join(' ') + (checked ? ' active' : '') + (disabled ? ' disabled' : '')" ot-click="handle">
-					<input type="hidden" :name="name" :value="checked ? 'on' : 'off'" />
+				<div :class="'holder ' + variant.join(' ') + (value ? ' active' : '') + (disabled ? ' disabled' : '')" ot-click="handle">
+					<input type="hidden" :name="name" :value="value ? 'on' : 'off'" />
 					<span class="track">
 						<span class="thumb"></span>
 					</span>

package/{lib/items/elements → addons/render/elements/front/items/self}/global/code/code.js

@@ -27,13 +27,12 @@ onetype.AddonReady('elements', (elements) =>
 			this.copied = false;
 			this.escaped = this.source ? this.source.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') : '';
 
-			this.copy = (event, ctx) =>
+			this.copy = ({ event }) =>
 			{
-				const text = ctx.node.closest('.holder').querySelector('.content').textContent;
+				const text = event.target.closest('.holder').querySelector('.content').textContent;
 				navigator.clipboard.writeText(text);
 				this.copied = true;
-				this.Update();
-				setTimeout(() => { this.copied = false; this.Update(); }, 2000);
+				setTimeout(() => { this.copied = false; }, 2000);
 			};
 
 			return `

package/{lib/items/elements → addons/render/elements/front/items/self}/global/faq/faq.js

@@ -42,8 +42,8 @@ onetype.AddonReady('elements', (elements) =>
 
 			return `
 				<div :class="'holder ' + variant.join(' ')">
-					<div ot-for="item, index in items" :class="'item' + (isOpen(index) ? ' active' : '')" ot-click="toggle(index)">
-						<div class="question">
+					<div ot-for="item, index in items" :class="'item' + (isOpen(index) ? ' active' : '')">
+						<div class="question" ot-click="toggle(index)">
 							<span class="text">{{ item.question }}</span>
 							<i class="icon">{{ isOpen(index) ? 'remove' : 'add' }}</i>
 						</div>

package/{lib/items/elements → addons/render/elements/front/items/self}/global/heading/heading.js

@@ -20,31 +20,20 @@ onetype.AddonReady('elements', (elements) =>
 				type: 'string',
 				value: ''
 			},
-			align: {
-				type: 'string',
-				value: 'left',
-				options: ['left', 'center', 'right']
-			},
-			size: {
-				type: 'string',
-				value: '',
-				options: ['', 's', 'm', 'l']
-			},
 			variant: {
-				type: 'string',
-				value: ''
+				type: 'array',
+				value: ['left', 'size-m'],
+				options: ['left', 'center', 'right', 'page', 'clean', 'size-s', 'size-m', 'size-l']
 			}
 		},
 		render: function()
 		{
-			this.classes = 'holder ' + this.align + (this.variant ? ' ' + this.variant : '') + (this.size ? ' size-' + this.size : '');
-
 			return `
-				<div :class="classes">
+				<div :class="'holder ' + variant.join(' ')">
 					<div class="text">
 						<i ot-if="icon" class="icon">{{ icon }}</i>
-						<h2 ot-if="variant !== 'page'" class="title">{{ title }}</h2>
-						<h1 ot-if="variant === 'page'" class="title">{{ title }}</h1>
+						<h2 ot-if="!variant.includes('page')" class="title">{{ title }}</h2>
+						<h1 ot-if="variant.includes('page')" class="title">{{ title }}</h1>
 						<p ot-if="description" class="description">{{ description }}</p>
 					</div>
 					<div class="right">

package/addons/render/elements/front/items/self/global/markdown/markdown.js

@@ -0,0 +1,26 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'global-markdown',
+		icon: 'article',
+		name: 'Markdown',
+		description: 'Renders markdown content as styled HTML.',
+		category: 'Global',
+		author: 'OneType',
+		config: {
+			content: {
+				type: 'string',
+				value: ''
+			},
+			variant: {
+				type: 'array',
+				value: [],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border']
+			}
+		},
+		render: function()
+		{
+			return `<div :class="'holder ' + variant.join(' ')">${onetype.Markdown(this.content)}</div>`;
+		}
+	});
+});

package/{lib/items/elements → addons/render/elements/front/items/self}/global/menu/menu.js

@@ -61,7 +61,7 @@ onetype.AddonReady('elements', (elements) =>
 
 				if (this._select)
 				{
-					this._select(item.value || item.label);
+					this._select({ value: item.value || item.label });
 				}
 			};
 

package/{lib/items/elements → addons/render/elements/front/items/self}/global/tags/tags.js

@@ -41,7 +41,7 @@ onetype.AddonReady('elements', (elements) =>
 
 				if(this._change)
 				{
-					this._change(tag);
+					this._change({ value: tag });
 				}
 			};
 

package/{lib/items/elements → addons/render/elements/front/items/self}/navigation/navbar/navbar.js

@@ -8,6 +8,10 @@ onetype.AddonReady('elements', (elements) =>
 		category: 'Navigation',
 		author: 'OneType',
 		config: {
+			logo: {
+				type: 'string',
+				value: 'https://cdn.onetype.ai/brand/logo/full-orange.svg'
+			},
 			items: {
 				type: 'array',
 				value: [],
@@ -65,7 +69,7 @@ onetype.AddonReady('elements', (elements) =>
 			return `
 				<nav :class="'holder ' + variant.join(' ')">
 					<a class="logo" href="/">
-						<img class="logo-icon" src="https://cdn.onetype.ai/brand/logo/full-orange.svg" alt="OneType" />
+						<img class="logo-icon" :src="logo" alt="OneType" />
 						<i class="logo-arrow">keyboard_arrow_down</i>
 					</a>
 					<div class="tabs">

package/{lib/items/elements → addons/render/elements/front/items/self}/navigation/sidebar/sidebar.js

@@ -73,7 +73,7 @@ onetype.AddonReady('elements', (elements) =>
 
 				if(this._click)
 				{
-					this._click(item);
+					this._click({ value: item });
 				}
 			};
 

package/{lib/items/elements → addons/render/elements/front/items/self}/navigation/tabs/tabs.js

@@ -42,7 +42,7 @@ onetype.AddonReady('elements', (elements) =>
 
 				if(this._change)
 				{
-					this._change(id);
+					this._change({ value: id });
 				}
 			};
 

package/{lib/items/elements → addons/render/elements/front/items/self}/status/code/code.css

@@ -6,7 +6,7 @@
 	align-items: center;
 	justify-content: center;
 	width: 100%;
-	min-height: calc(100vh - 48px);
+	min-height: 320px;
 	padding: var(--ot-spacing-l);
 }
 

package/{lib/items/elements → addons/render/elements/front/items/self}/status/empty/empty.css

@@ -61,4 +61,4 @@
 	line-height: 1.6;
 	color: var(--ot-text-2);
 	margin: 0;
-}
+}

package/{lib/items/elements → addons/render/elements/front/items/self}/status/empty/empty.js

@@ -26,6 +26,10 @@ onetype.AddonReady('elements', (elements) =>
 			},
 			_click: {
 				type: 'function'
+			},
+			variant: {
+				type: 'array',
+				value: []
 			}
 		},
 		render: function()

package/{lib/items/elements → addons/render/elements/front/items/self}/status/error/error.css

@@ -6,7 +6,7 @@
 	align-items: center;
 	justify-content: center;
 	width: 100%;
-	min-height: calc(100vh - 48px);
+	min-height: 320px;
 	padding: var(--ot-spacing-l);
 }
 

package/{lib/items/elements → addons/render/elements/front/items/self}/status/error/error.js

@@ -34,7 +34,7 @@ onetype.AddonReady('elements', (elements) =>
 			{
 				if (this._click)
 				{
-					this._click();
+					this._click({});
 				}
 				else
 				{

package/{lib/items/elements → addons/render/elements/front/items/self}/status/loading/loading.css

@@ -6,7 +6,7 @@
 	align-items: center;
 	justify-content: center;
 	width: 100%;
-	min-height: calc(100vh - 48px);
+	min-height: 320px;
 	padding: var(--ot-spacing-l);
 }
 
@@ -65,6 +65,13 @@
 	to { transform: rotate(360deg); }
 }
 
+/* Auto height */
+
+.e-691b81f7.auto
+{
+	min-height: auto;
+}
+
 @keyframes e-691b81f7-pulse
 {
 	0%, 100% { opacity: 1; }

package/addons/render/pages/core/load.js

@@ -3,7 +3,7 @@ import pages from './addon.js';
 
 onetype.$ot.page = function(route, parameters = {})
 {
-	return pages.Fn('change', route, parameters, { path: true });
+	return pages.Fn('change', null, route, parameters);
 };
 
 export default pages;

package/addons/render/pages/front/events/click.js

@@ -23,5 +23,5 @@ document.addEventListener('click', (e) =>
 
 	e.preventDefault();
 
-	pages.Fn('change', match.page.Get('id'), match.parameters, { search: url.search });
+	pages.Fn('change', match.page.Get('id'), null, match.parameters, true, url.search);
 });

package/addons/render/pages/front/events/load.js

@@ -1,25 +1,15 @@
 const match = () =>
 {
-	setTimeout(() =>
+	requestAnimationFrame(() =>
 	{
-		const result = pages.Fn('match');
+		const resolved = pages.Fn('resolve', null, onetype.RouteCurrent());
 
-		if(!result)
+		if(resolved)
 		{
-			// Try to find a 404 page
-			const notFoundPage = Object.values(pages.Items()).find(p => p.Get('404'));
-
-			if(notFoundPage)
-			{
-				pages.Fn('open', notFoundPage.Get('id'), {});
-			}
-
-			return;
+			pages.Fn('open', resolved.id, resolved.parameters);
 		}
-
-		pages.Fn('open', result.page.Get('id'), result.parameters);
 	});
 };
 
-onetype.EmitOn('document.load', match);
-onetype.EmitOn('history.popstate', match);
+onetype.EmitOn('@document.load', match);
+onetype.EmitOn('@history.popstate', match);