@onetype/framework 2.0.41 → 2.0.43

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

@@ -1,25 +1,30 @@
+/* Root */
+
 .e-471f3f12
 {
-	width: 100%;
-	min-height: calc(100vh - 48px);
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	width: 100%;
+	min-height: 320px;
 	padding: var(--ot-spacing-l);
 }
 
-.e-471f3f12 .holder
+/* Holder */
+
+.e-471f3f12 > .holder
 {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: 20px;
+	gap: var(--ot-spacing-m);
 	text-align: center;
 	max-width: 400px;
 }
 
-/* Large code number */
-.e-471f3f12 .holder > .code
+/* Code number */
+
+.e-471f3f12 > .holder > .code
 {
 	font-size: 120px;
 	font-weight: 700;
@@ -30,19 +35,23 @@
 	user-select: none;
 }
 
-.e-471f3f12 .holder > .title
+/* Title */
+
+.e-471f3f12 > .holder > .title
 {
-	font-size: 20px;
+	font-size: var(--ot-size-l);
 	font-weight: 600;
 	color: var(--ot-text-1);
 	line-height: 1.3;
-	margin-top: -8px;
+	margin: 0;
 }
 
-.e-471f3f12 .holder > .description
+/* Description */
+
+.e-471f3f12 > .holder > .description
 {
-	font-size: 14px;
+	font-size: var(--ot-size-m);
 	line-height: 1.6;
 	color: var(--ot-text-2);
-	margin-top: -4px;
+	margin: 0;
 }

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

@@ -1,24 +1,30 @@
+/* Root */
+
 .e-631be738
 {
-	width: 100%;
-	min-height: 320px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	width: 100%;
+	min-height: 320px;
 	padding: var(--ot-spacing-l);
 }
 
-.e-631be738 .holder
+/* Holder */
+
+.e-631be738 > .holder
 {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	gap: var(--ot-spacing-m);
 	text-align: center;
 	max-width: 400px;
 }
 
-/* Dashed circle — visual emptiness */
-.e-631be738 .holder > .icon-wrap
+/* Dashed circle */
+
+.e-631be738 > .holder > .circle
 {
 	width: 72px;
 	height: 72px;
@@ -29,31 +35,30 @@
 	justify-content: center;
 }
 
-.e-631be738 .holder > .icon-wrap > i
+.e-631be738 > .holder > .circle > i
 {
 	font-size: 32px;
 	color: var(--ot-text-2);
 	opacity: 0.35;
 }
 
-.e-631be738 .holder > .title
+/* Title */
+
+.e-631be738 > .holder > .title
 {
-	font-size: 20px;
+	font-size: var(--ot-size-l);
 	font-weight: 600;
 	color: var(--ot-text-1);
 	line-height: 1.3;
-	margin-top: 24px;
+	margin: 0;
 }
 
-.e-631be738 .holder > .description
+/* Description */
+
+.e-631be738 > .holder > .description
 {
-	font-size: 14px;
+	font-size: var(--ot-size-m);
 	line-height: 1.6;
 	color: var(--ot-text-2);
-	margin-top: 8px;
-}
-
-.e-631be738 .holder > e-form-button
-{
-	margin-top: 24px;
-}
+	margin: 0;
+}

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

@@ -26,13 +26,17 @@ onetype.AddonReady('elements', (elements) =>
 			},
 			_click: {
 				type: 'function'
+			},
+			variant: {
+				type: 'array',
+				value: []
 			}
 		},
 		render: function()
 		{
 			return `
 				<div class="holder">
-					<div class="icon-wrap"><i>{{ icon }}</i></div>
+					<div class="circle"><i>{{ icon }}</i></div>
 					<h2 class="title">{{ title }}</h2>
 					<p ot-if="description" class="description">{{ description }}</p>
 					<e-form-button ot-if="action" :text="action" icon="add" :variant="['brand', 'size-m']" :_click="_click"></e-form-button>

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

@@ -1,55 +1,65 @@
+/* Root */
+
 .e-63199a7d
 {
-	width: 100%;
-	min-height: calc(100vh - 48px);
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	width: 100%;
+	min-height: 320px;
 	padding: var(--ot-spacing-l);
 }
 
-.e-63199a7d .holder
+/* Holder */
+
+.e-63199a7d > .holder
 {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: 20px;
+	gap: var(--ot-spacing-m);
 	text-align: center;
 	max-width: 400px;
 }
 
 /* Icon circle */
-.e-63199a7d .holder > .icon-wrap
+
+.e-63199a7d > .holder > .circle
 {
 	width: 80px;
 	height: 80px;
 	border-radius: 50%;
 	background: var(--ot-red-opacity);
-	border: 1px solid rgba(244, 63, 94, 0.15);
+	border: 1px solid var(--ot-red-border);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
-.e-63199a7d .holder > .icon-wrap > i
+.e-63199a7d > .holder > .circle > i
 {
 	font-size: 36px;
 	color: var(--ot-red);
 	opacity: 0.8;
 }
 
-.e-63199a7d .holder > .title
+/* Title */
+
+.e-63199a7d > .holder > .title
 {
-	font-size: 20px;
+	font-size: var(--ot-size-l);
 	font-weight: 600;
 	color: var(--ot-text-1);
 	line-height: 1.3;
+	margin: 0;
 }
 
-.e-63199a7d .holder > .description
+/* Description */
+
+.e-63199a7d > .holder > .description
 {
-	font-size: 14px;
+	font-size: var(--ot-size-m);
 	line-height: 1.6;
 	color: var(--ot-text-2);
-	margin-top: -4px;
+	margin: 0;
 }

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
 				{
@@ -44,7 +44,7 @@ onetype.AddonReady('elements', (elements) =>
 
 			return `
 				<div class="holder">
-					<div class="icon-wrap"><i>{{ icon }}</i></div>
+					<div class="circle"><i>{{ icon }}</i></div>
 					<h2 class="title">{{ title }}</h2>
 					<p ot-if="description" class="description">{{ description }}</p>
 					<e-form-button ot-if="action" :text="action" icon="refresh" :variant="['brand', 'size-m']" :_click="retry"></e-form-button>

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

@@ -1,23 +1,28 @@
+/* Root */
+
 .e-691b81f7
 {
-	width: 100%;
-	min-height: calc(100vh - 48px);
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	width: 100%;
+	min-height: 320px;
 	padding: var(--ot-spacing-l);
 }
 
-.e-691b81f7 .holder
+/* Holder */
+
+.e-691b81f7 > .holder
 {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: 20px;
+	gap: var(--ot-spacing-m);
 }
 
-/* Spinner with pulsing ring */
-.e-691b81f7 .holder > .spinner-wrap
+/* Spinner circle */
+
+.e-691b81f7 > .holder > .circle
 {
 	position: relative;
 	width: 80px;
@@ -30,31 +35,43 @@
 	animation: e-691b81f7-pulse 2s ease-in-out infinite;
 }
 
-.e-691b81f7 .holder > .spinner-wrap > .spinner
+.e-691b81f7 > .holder > .circle > .spinner
 {
 	font-size: 32px;
 	animation: e-691b81f7-spin 0.8s linear infinite;
 }
 
 /* Color variants */
-.e-691b81f7 .holder[variant="brand"] > .spinner-wrap > .spinner { color: var(--ot-brand); }
-.e-691b81f7 .holder[variant="blue"] > .spinner-wrap > .spinner { color: var(--ot-blue); }
-.e-691b81f7 .holder[variant="red"] > .spinner-wrap > .spinner { color: var(--ot-red); }
-.e-691b81f7 .holder[variant="orange"] > .spinner-wrap > .spinner { color: var(--ot-orange); }
-.e-691b81f7 .holder[variant="green"] > .spinner-wrap > .spinner { color: var(--ot-green); }
 
-.e-691b81f7 .holder > .text
+.e-691b81f7 > .holder.brand > .circle > .spinner { color: var(--ot-brand); }
+.e-691b81f7 > .holder.blue > .circle > .spinner { color: var(--ot-blue); }
+.e-691b81f7 > .holder.red > .circle > .spinner { color: var(--ot-red); }
+.e-691b81f7 > .holder.orange > .circle > .spinner { color: var(--ot-orange); }
+.e-691b81f7 > .holder.green > .circle > .spinner { color: var(--ot-green); }
+
+/* Text */
+
+.e-691b81f7 > .holder > .text
 {
-	font-size: 14px;
+	font-size: var(--ot-size-m);
 	color: var(--ot-text-2);
 }
 
+/* Animations */
+
 @keyframes e-691b81f7-spin
 {
 	from { transform: rotate(0deg); }
 	to { transform: rotate(360deg); }
 }
 
+/* Auto height */
+
+.e-691b81f7.auto
+{
+	min-height: auto;
+}
+
 @keyframes e-691b81f7-pulse
 {
 	0%, 100% { opacity: 1; }

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

@@ -13,16 +13,16 @@ onetype.AddonReady('elements', (elements) =>
 				value: ''
 			},
 			variant: {
-				type: 'string',
-				value: 'brand',
+				type: 'array',
+				value: ['brand'],
 				options: ['brand', 'blue', 'red', 'orange', 'green']
 			}
 		},
 		render: function()
 		{
 			return `
-				<div class="holder" :variant="variant">
-					<div class="spinner-wrap"><i class="spinner">progress_activity</i></div>
+				<div :class="'holder ' + variant.join(' ')">
+					<div class="circle"><i class="spinner">progress_activity</i></div>
 					<span ot-if="text" class="text">{{ text }}</span>
 				</div>
 			`;

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

package/addons/render/pages/front/functions/change.js

@@ -1,119 +1,30 @@
-pages.Fn('change', function(target, parameters = {}, options = {})
+pages.Fn('change', async function(id, path = null, parameters = {}, push = true, search = '')
 {
-    this.resolve = null;
-    this.page = null;
-    this.id = null;
-    this.parameters = parameters;
-    this.options = options;
+	this.methods.route = (page) =>
+	{
+		const route = page.Get('route');
 
-    this.methods.init = async (resolve) =>
-    {
-        this.resolve = resolve;
+		if(!Array.isArray(route))
+		{
+			return route;
+		}
 
-        if(this.options.path)
-        {
-            this.methods.match();
-        }
-        else
-        {
-            this.page = this.ItemGet(target);
-            this.id = target;
-        }
+		return route.findLast(pattern => (pattern.match(/:(\w+)/g) || []).every(param => Object.keys(parameters).includes(param.slice(1)))) || route[0];
+	};
 
-        if(!this.page)
-        {
-            // Try to find a 404 page
-            const notFoundPage = Object.values(this.Items()).find(p => p.Get('404'));
+	const resolved = this.Fn('resolve', id, path, parameters);
 
-            if(notFoundPage)
-            {
-                this.page = notFoundPage;
-                this.id = notFoundPage.Get('id');
-            }
-            else
-            {
-                return this.methods.done(null, `Page "${target}" not found.`, 404);
-            }
-        }
+	if(!resolved)
+	{
+		return null;
+	}
 
-        const route = this.page.Get('route');
-        const url = this.methods.url(this.methods.route(route, this.parameters), this.parameters);
+	if(push !== false)
+	{
+		history.pushState(null, '', onetype.RouteBuild(this.methods.route(resolved.page), resolved.parameters) + search);
+	}
 
-        if(this.options.push !== false)
-        {
-            history.pushState(null, '', url + (this.options.search || ''));
-        }
+	const result = await this.Fn('open', resolved.id, resolved.parameters);
 
-        const result = this.Fn('open', this.id, this.parameters);
-
-        if(result === false)
-        {
-            return this.methods.done(null, 'Navigation prevented.', 403);
-        }
-
-        return this.methods.done({ id: this.id, parameters: this.parameters, url }, 'Page changed.', 200);
-    };
-
-    this.methods.match = () =>
-    {
-        const result = this.Fn('match', target);
-
-        if(result)
-        {
-            this.page = result.page;
-            this.id = result.page.Get('id');
-            this.parameters = { ...result.parameters, ...this.parameters };
-        }
-    };
-
-    this.methods.route = (route, parameters) =>
-    {
-        if(!Array.isArray(route))
-        {
-            return route;
-        }
-
-        const keys = Object.keys(parameters);
-
-        for(let i = route.length - 1; i >= 0; i--)
-        {
-            const params = (route[i].match(/:(\w+)/g) || []).map(p => p.slice(1));
-
-            if(params.length && params.every(p => keys.includes(p)))
-            {
-                return route[i];
-            }
-        }
-
-        return route[0];
-    };
-
-    this.methods.url = (route, parameters) =>
-    {
-        let url = route;
-
-        for(const key in parameters)
-        {
-            url = url.replace(`:${key}`, parameters[key]);
-        }
-
-        return url;
-    };
-
-    this.methods.done = (data, message, code) =>
-    {
-        this.resolve({ data, message, code });
-    };
-
-    return new Promise((resolve) =>
-    {
-        try
-        {
-            this.methods.init(resolve);
-        }
-        catch(error)
-        {
-            resolve({ data: null, message: error.message, code: 500 });
-        }
-    });
+	return result === false ? null : resolved.page;
 });

package/addons/render/pages/front/functions/match.js

@@ -4,7 +4,6 @@ pages.Fn('match', function(path)
 
 	for(const item of items)
 	{
-		// Skip 404 pages during normal matching
 		if(item.Get('404'))
 		{
 			continue;
@@ -19,9 +18,9 @@ pages.Fn('match', function(path)
 
 		const routes = Array.isArray(route) ? route : [route];
 
-		for(const r of routes)
+		for(const part of routes)
 		{
-			const result = onetype.RouteMatch(r, path || onetype.RouteCurrent());
+			const result = onetype.RouteMatch(part, path || onetype.RouteCurrent());
 
 			if(result.match)
 			{

package/addons/render/pages/front/functions/open.js

@@ -4,49 +4,17 @@ pages.Fn('open', async function(id, parameters = {})
 
 	if(!page)
 	{
-		console.warn(`Page with id "${id}" not found`);
 		return false;
 	}
 
-	const active = pages.StoreGet('active');
-
-	if(page.Get('data'))
-	{
-		const data = {};
-		let loaded = false;
-
-		const promise = page.Get('data').call(page, parameters).then(result =>
-		{
-			Object.assign(data, result);
-			loaded = true;
-		});
-
-		await Promise.race([promise, new Promise(resolve => setTimeout(resolve, 500))]);
+	const data = page.Get('data') ? await page.Get('data').call(page, parameters) : null;
 
-		if(!loaded)
-		{
-			if(active && active.Fn('leave') === false)
-			{
-				return false;
-			}
-
-			await promise;
-		}
-		else
-		{
-			if(active && active.Fn('leave') === false)
-			{
-				return false;
-			}
-		}
-
-		return await page.Fn('enter', parameters, data);
-	}
+	const active = pages.StoreGet('active');
 
 	if(active && active.Fn('leave') === false)
 	{
 		return false;
 	}
 
-	return await page.Fn('enter', parameters);
+	return await page.Fn('enter', parameters, data);
 });

package/addons/render/pages/front/functions/resolve.js

@@ -0,0 +1,30 @@
+pages.Fn('resolve', function(id, path = null, parameters = {})
+{
+	if(path)
+	{
+		const match = this.Fn('match', path);
+
+		if(match)
+		{
+			return { page: match.page, id: match.page.Get('id'), parameters: { ...match.parameters, ...parameters } };
+		}
+	}
+	else if(id)
+	{
+		const page = this.ItemGet(id);
+
+		if(page)
+		{
+			return { page, id, parameters };
+		}
+	}
+
+	const page = Object.values(this.Items()).find(p => p.Get('404'));
+
+	if(page)
+	{
+		return { page, id: page.Get('id'), parameters };
+	}
+
+	return null;
+});