@onetype/framework 2.0.27 → 2.0.29

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

@@ -10,6 +10,39 @@ pages.Fn('open', async function(id, parameters = {})
 
 	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))]);
+
+		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);
+	}
+
 	if(active && active.Fn('leave') === false)
 	{
 		return false;

package/addons/render/pages/front/item/functions/enter.js

@@ -1,11 +1,15 @@
-pages.Fn('item.enter', async function(item, parameters = {})
+pages.Fn('item.enter', async function(item, parameters = {}, preloaded = null)
 {
 	const onEnter = item.Get('onEnter');
 	const onBeforeEnter = item.Get('onBeforeEnter');
 
 	const data = {};
 
-	if(item.Get('data'))
+	if(preloaded)
+	{
+		Object.assign(data, preloaded);
+	}
+	else if(item.Get('data'))
 	{
 		Object.assign(data, await item.Get('data').call(item, parameters));
 	}

package/lib/items/elements/navigation/navbar/navbar.css

@@ -62,7 +62,8 @@
 	font-size: 16px;
 }
 
-.e-64d8716d > .holder .tab:hover
+.e-64d8716d > .holder .tab:hover,
+.e-64d8716d > .holder .tab.active
 {
 	color: var(--ot-text-1);
 	background: var(--ot-bg-2);

package/lib/items/elements/navigation/navbar/navbar.js

@@ -21,8 +21,28 @@ onetype.AddonReady('elements', (elements) =>
 		},
 		render: function()
 		{
-			this.left = this.items.filter(i => i.position === 'left');
-			this.right = this.items.filter(i => i.position === 'right');
+			const path = onetype.RouteCurrent();
+
+			const isActive = (item) =>
+			{
+				if(item.match)
+				{
+					const patterns = Array.isArray(item.match) ? item.match : [item.match];
+					return patterns.some(pattern => onetype.RouteMatch(pattern, path).match);
+				}
+
+				return item.href === '/' ? path === '/' : path.startsWith(item.href);
+			};
+
+			this.left = this.items.filter(item => item.position === 'left').map(item => ({
+				...item,
+				active: isActive(item)
+			}));
+
+			this.right = this.items.filter(item => item.position === 'right').map(item => ({
+				...item,
+				active: isActive(item)
+			}));
 
 			return `
 				<nav class="holder">
@@ -30,10 +50,10 @@ onetype.AddonReady('elements', (elements) =>
 						<img class="logo-icon" src="https://global.divhunt.com/bd8ffd2fc9cf3a7e81b3326ac63a7cfe_4406.svg" alt="OneType" />
 					</a>
 					<div class="tabs">
-						<a ot-for="item in left" class="tab" :href="item.href"><i>{{ item.icon }}</i> {{ item.label }}</a>
+						<a ot-for="item in left" :class="'tab' + (item.active ? ' active' : '')" :href="item.href"><i>{{ item.icon }}</i> {{ item.label }}</a>
 					</div>
 					<div class="right">
-						<a ot-for="item in right" class="tab" :href="item.href"><i>{{ item.icon }}</i> {{ item.label }}</a>
+						<a ot-for="item in right" :class="'tab' + (item.active ? ' active' : '')" :href="item.href"><i>{{ item.icon }}</i> {{ item.label }}</a>
 					</div>
 				</nav>
 			`;

package/lib/items/elements/navigation/sidebar/sidebar.js

@@ -27,6 +27,18 @@ onetype.AddonReady('elements', (elements) =>
 		},
 		render: function()
 		{
+			const path = onetype.RouteCurrent();
+
+			this.isActive = (item) =>
+			{
+				if(item.href)
+				{
+					return item.href === '/' ? path === '/' : path.startsWith(item.href);
+				}
+
+				return item.value === this.active;
+			};
+
 			this.handleClick = (item) =>
 			{
 				this.active = item.value;
@@ -42,7 +54,7 @@ onetype.AddonReady('elements', (elements) =>
 					<slot name="top"></slot>
 					<div ot-for="group in groups" class="group">
 						<p ot-if="group.title" class="title">{{ group.title }}</p>
-						<a ot-for="item in group.items" :class="'item' + (item.value === active ? ' active' : '')" :href="item.href || 'javascript:void(0)'" ot-click="handleClick(item)">
+						<a ot-for="item in group.items" :class="'item' + (isActive(item) ? ' active' : '')" :href="item.href || 'javascript:void(0)'" ot-click="handleClick(item)">
 							<i ot-if="item.icon">{{ item.icon }}</i>
 							<span>{{ item.label }}</span>
 							<span ot-if="item.count !== undefined" class="count">{{ item.count }}</span>

package/lib/src/classes/addon/classes/render/mixins/process.js

@@ -62,6 +62,22 @@ const RenderProcess =
         const html = this.GetCallback().call(this, this.GetData());
         this.State.rendering = false;
 
+        if(html && typeof html.then === 'function')
+        {
+            html.then(resolved =>
+            {
+                if(typeof resolved !== 'string')
+                {
+                    throw new Error('Render function must return a string');
+                }
+
+                this.Html = resolved;
+                this.Update();
+            });
+
+            return '';
+        }
+
         if(typeof html !== 'string')
         {
             throw new Error('Render function must return a string');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@onetype/framework",
-    "version": "2.0.27",
+    "version": "2.0.29",
     "description": "OneType Framework — Full-stack isomorphic JavaScript framework built from scratch. One addon abstraction powers databases, servers, commands, pages, directives, queues, and more.",
     "type": "module",
     "main": "lib/load.js",