@onetype/framework 2.0.26 → 2.0.27

package/addons/core/assets/back/functions/utils/transform.js

@@ -18,7 +18,7 @@ assets.Fn('utils.transform', function(contents, type = 'js')
             return code;
         });
 
-        return code.filter(content => content && content.trim()).join('\n\n');
+        return '(function(){\n' + code.filter(content => content && content.trim()).join('\n\n') + '\n})();';
     }
 
     if (type === 'css')

package/addons/render/directives/front/js/functions/process/data.js

@@ -60,7 +60,6 @@ directives.Fn('process.data', function(attributes, node, compile)
             }
         }
 
-
         attribute.value = onetype.DataDefineOne(attribute.value, definition);
         data[attribute.name] = attribute;
 

package/addons/render/transforms/addon.js

@@ -8,4 +8,6 @@ const transforms = onetype.Addon('transforms', (addon) =>
     addon.Field('css', ['array', []]);
     addon.Field('config', ['object', {}]);
     addon.Field('code', ['function']);
+    addon.Field('destroy', ['function', null]);
+    addon.Field('structure', ['function', null]);
 });

package/addons/render/transforms/functions/data.js

@@ -0,0 +1,21 @@
+transforms.Fn('data', function(config, node)
+{
+    const data = {};
+
+    Object.entries(config).forEach(([name, definition]) =>
+    {
+        name = name.toLowerCase();
+
+        const raw = node.getAttribute(name);
+        const value = raw !== null ? onetype.Function(raw, {}, false) : undefined;
+
+        data[name] = onetype.DataDefineOne(typeof value === 'undefined' ? raw : value, definition);
+
+        if(raw !== null)
+        {
+            node.removeAttribute(name);
+        }
+    });
+
+    return data;
+});

package/addons/render/transforms/functions/run.js

@@ -0,0 +1,11 @@
+transforms.Fn('run', function(id, node, data = null)
+{
+    const item = transforms.ItemGet(id);
+
+    if(!item)
+    {
+        return;
+    }
+
+    item.Fn('run', node, data);
+});

package/addons/render/transforms/item/functions/load.js

@@ -0,0 +1,55 @@
+transforms.Fn('item.load', function(item)
+{
+    const loaded = transforms.StoreGet('loaded') || {};
+
+    transforms.StoreSet('loaded', loaded);
+
+    this.methods.script = (url) =>
+    {
+        if(loaded[url])
+        {
+            return loaded[url];
+        }
+
+        loaded[url] = new Promise((resolve, reject) =>
+        {
+            const element = document.createElement('script');
+
+            element.src = url;
+            element.async = true;
+            element.onload = resolve;
+            element.onerror = () => reject(new Error(`Failed to load: ${url}`));
+
+            document.head.appendChild(element);
+        });
+
+        return loaded[url];
+    };
+
+    this.methods.style = (url) =>
+    {
+        if(loaded[url])
+        {
+            return loaded[url];
+        }
+
+        loaded[url] = new Promise((resolve, reject) =>
+        {
+            const element = document.createElement('link');
+
+            element.rel = 'stylesheet';
+            element.href = url;
+            element.onload = resolve;
+            element.onerror = () => reject(new Error(`Failed to load: ${url}`));
+
+            document.head.appendChild(element);
+        });
+
+        return loaded[url];
+    };
+
+    const js = (item.Get('js') || []).map(url => this.methods.script(url));
+    const css = (item.Get('css') || []).map(url => this.methods.style(url));
+
+    return Promise.all([...js, ...css]);
+});

package/addons/render/transforms/item/functions/run.js

@@ -0,0 +1,12 @@
+transforms.Fn('item.run', function(item, node, data = null)
+{
+    if(data === null)
+    {
+        data = transforms.Fn('data', item.Get('config'), node);
+    }
+
+    item.Fn('load').then(() =>
+    {
+        item.Get('code').call({}, data, node, item);
+    });
+});

package/addons/render/transforms/items/directives/transform.js

@@ -4,11 +4,11 @@ onetype.AddonReady('directives', function()
         id: 'ot-transform',
         icon: 'auto_fix_high',
         name: 'Transform',
-        description: 'Apply transform functions to elements for advanced functionality. Enables custom element behaviors and third-party integrations.',
+        description: 'Apply transform functions to elements for advanced functionality.',
         trigger: 'node',
         order: 1100,
         type: '1',
-        code: async function(data, item, compile, node, identifier)
+        code: function(data, item, compile, node, identifier)
         {
             const transformer = transforms.ItemGet(node.tagName.toLowerCase());
 
@@ -17,27 +17,24 @@ onetype.AddonReady('directives', function()
                 return;
             }
 
-            // Don't stop children processing - let each transform handle itself
-            // compile.children = false;
+            const target = document.createElement('div');
 
-            const html = node.outerHTML.replace(new RegExp(`^<${node.tagName.toLowerCase()}\\b`), `<div`) .replace(new RegExp(`</${node.tagName.toLowerCase()}>$`), `</div>`);
-            const compiled = item.Compile(html, compile.data);
+            Array.from(node.attributes).forEach(attr =>
+            {
+                target.setAttribute(attr.name, attr.value);
+            });
 
-            data = directives.Fn('process.data', transformer.Get('config'), compiled.element.firstElementChild, compiled);
+            while(node.firstChild)
+            {
+                target.appendChild(node.firstChild);
+            }
 
-            node.style.display = 'none';
+            let raw = Object.entries(directives.Fn('process.data', transformer.Get('config'), target, compile));
+            raw = Object.fromEntries(raw.map(([key, attr]) => [key, attr.value]));
 
-            await transforms.Fn('load.assets', transformer);
+            transforms.Fn('run', node.tagName.toLowerCase(), target, raw);
 
-            // Use Promise to handle async properly
-            return new Promise((resolve) => {
-                setTimeout(() => {
-                    const targetNode = compiled.element.firstElementChild;
-                    transformer.Get('code').call({}, data, transformer, compile, targetNode, identifier);
-                    node.replaceWith(targetNode);
-                    resolve();
-                }, 0);
-            });
+            node.replaceWith(target);
         }
     });
 });

package/lib/items/elements/global/heading/heading.css

@@ -81,7 +81,7 @@
 
 .e-49fb116e > .holder.size-m > .title
 {
-	font-size: 28px;
+	font-size: 25px;
 	font-weight: 700;
 }
 

package/lib/items/elements/global/markdown/markdown.js

@@ -1,5 +1,211 @@
 onetype.AddonReady('elements', (elements) =>
 {
+	const parse = function(content)
+	{
+		if(!content)
+		{
+			return '';
+		}
+
+		let html = '';
+		let buffer = [];
+		let block = false;
+
+		const line = (h) =>
+		{
+			html += `<div class="line">${h}</div>`;
+		};
+
+		const spacer = () =>
+		{
+		};
+
+		const transform = (text) =>
+		{
+			text = code(text);
+			text = inline(text);
+			text = media(text);
+			text = heading(text);
+			text = rule(text);
+			text = quote(text);
+			text = format(text);
+			text = list(text);
+			text = table(text);
+			text = paragraph(text);
+
+			return text;
+		};
+
+		const code = (text) =>
+		{
+			text = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, c) =>
+			{
+				c = c.replace(/</g, '&lt;').replace(/>/g, '&gt;').trim();
+
+				return `<pre class="codeblock"><code${lang ? ` data-lang="${lang}"` : ''}>${c}</code></pre>`;
+			});
+
+			text = text.replace(/`([^`]+)`/g, '<code class="inline">$1</code>');
+
+			return text;
+		};
+
+		const inline = (text) =>
+		{
+			return text;
+		};
+
+		const media = (text) =>
+		{
+			text = text.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" />');
+			text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+
+			return text;
+		};
+
+		const heading = (text) =>
+		{
+			text = text.replace(/^#### (.+)$/gm, '<h4>$1</h4>');
+			text = text.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+			text = text.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+			text = text.replace(/^# (.+)$/gm, '<h1>$1</h1>');
+
+			return text;
+		};
+
+		const rule = (text) =>
+		{
+			return text.replace(/^---$/gm, '<hr />');
+		};
+
+		const quote = (text) =>
+		{
+			text = text.replace(/^> (.+)$/gm, '<blockquote>$1</blockquote>');
+			text = text.replace(/<\/blockquote>\n<blockquote>/g, '\n');
+
+			return text;
+		};
+
+		const format = (text) =>
+		{
+			text = text.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+			text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+			text = text.replace(/\*(.+?)\*/g, '<em>$1</em>');
+			text = text.replace(/~~(.+?)~~/g, '<del>$1</del>');
+
+			return text;
+		};
+
+		const list = (text) =>
+		{
+			text = text.replace(/^[\t ]*[-*] (.+)$/gm, '<uli>$1</uli>');
+			text = text.replace(/((?:<uli>.*<\/uli>\n?)+)/g, (match) =>
+			{
+				return `<ul>${match.replace(/<\/?uli>/g, (t) => t.replace('uli', 'li'))}</ul>`;
+			});
+
+			text = text.replace(/^[\t ]*\d+\. (.+)$/gm, '<oli>$1</oli>');
+			text = text.replace(/((?:<oli>.*<\/oli>\n?)+)/g, (match) =>
+			{
+				return `<ol>${match.replace(/<\/?oli>/g, (t) => t.replace('oli', 'li'))}</ol>`;
+			});
+
+			return text;
+		};
+
+		const table = (text) =>
+		{
+			return text.replace(/^(\|.+\|)\n(\|[-| :]+\|)\n((?:\|.+\|\n?)+)/gm, (_, header, _align, body) =>
+			{
+				const heads = header.split('|').filter(c => c.trim()).map(c => `<th>${c.trim()}</th>`).join('');
+				const rows = body.trim().split('\n').map(row =>
+				{
+					const cells = row.split('|').filter(c => c.trim()).map(c => `<td>${c.trim()}</td>`).join('');
+					return `<tr>${cells}</tr>`;
+				}).join('');
+
+				return `<table><thead><tr>${heads}</tr></thead><tbody>${rows}</tbody></table>`;
+			});
+		};
+
+		const paragraph = (text) =>
+		{
+			text = text.replace(/(<\/(table|ul|ol|blockquote|pre|h[1-4])>)(.)/g, '$1\n$3');
+			text = text.replace(/(.)(<(table|ul|ol|blockquote|pre|h[1-4]|hr|img)[\s>])/g, '$1\n$2');
+
+			const blk = /^<(h[1-4]|ul|ol|pre|blockquote|hr|table|img|li|\/)/;
+
+			return text.split('\n').map(l =>
+			{
+				const trimmed = l.trim();
+
+				if(!trimmed || blk.test(trimmed))
+				{
+					return trimmed;
+				}
+
+				return `<p>${trimmed}</p>`;
+			}).filter(l => l).join('\n');
+		};
+
+		const flush = () =>
+		{
+			if(!buffer.length)
+			{
+				return;
+			}
+
+			line(transform(buffer.join('\n')));
+			buffer = [];
+		};
+
+		const lines = content.split('\n');
+
+		for(let i = 0; i < lines.length; i++)
+		{
+			const trimmed = lines[i].trim();
+
+			if(trimmed.startsWith('```'))
+			{
+				buffer.push(lines[i]);
+				block = !block;
+
+				if(!block)
+				{
+					flush();
+				}
+
+				continue;
+			}
+
+			if(block)
+			{
+				buffer.push(lines[i]);
+				continue;
+			}
+
+			if(trimmed.startsWith('|') || /^[\t ]*[-*] .+/.test(trimmed) || /^[\t ]*\d+\. .+/.test(trimmed) || trimmed.startsWith('> '))
+			{
+				buffer.push(lines[i]);
+				continue;
+			}
+
+			flush();
+
+			if(!trimmed)
+			{
+				spacer();
+				continue;
+			}
+
+			line(transform(trimmed));
+		}
+
+		flush();
+
+		return html;
+	};
+
 	elements.ItemAdd({
 		id: 'global-markdown',
 		icon: 'article',
@@ -15,9 +221,7 @@ onetype.AddonReady('elements', (elements) =>
 		},
 		render: function()
 		{
-			this.html = elements.Fn('markdown', this.content);
-
-			return `<div class="holder">${this.html}</div>`;
+			return `<div class="holder">${parse(this.content)}</div>`;
 		}
 	});
 });

package/lib/items/elements/{sections → navigation}/navbar/navbar.css

@@ -1,9 +1,9 @@
-.e-7eb56bb9
+.e-64d8716d
 {
 	display: flex;
 }
 
-.e-7eb56bb9 > .holder
+.e-64d8716d > .holder
 {
 	display: flex;
 	align-items: center;
@@ -16,7 +16,7 @@
 
 /* Logo */
 
-.e-7eb56bb9 > .holder > .logo
+.e-64d8716d > .holder > .logo
 {
 	display: flex;
 	align-items: center;
@@ -26,7 +26,7 @@
 	flex-shrink: 0;
 }
 
-.e-7eb56bb9 > .holder > .logo > .logo-icon
+.e-64d8716d > .holder > .logo > .logo-icon
 {
 	height: 16px;
 }
@@ -34,7 +34,7 @@
 
 /* Tabs */
 
-.e-7eb56bb9 > .holder > .tabs
+.e-64d8716d > .holder > .tabs
 {
 	display: flex;
 	align-items: center;
@@ -43,7 +43,7 @@
 	height: 100%;
 }
 
-.e-7eb56bb9 > .holder .tab
+.e-64d8716d > .holder .tab
 {
 	display: flex;
 	align-items: center;
@@ -57,12 +57,12 @@
 	color: var(--ot-text-2);
 }
 
-.e-7eb56bb9 > .holder .tab > i
+.e-64d8716d > .holder .tab > i
 {
 	font-size: 16px;
 }
 
-.e-7eb56bb9 > .holder .tab:hover
+.e-64d8716d > .holder .tab:hover
 {
 	color: var(--ot-text-1);
 	background: var(--ot-bg-2);
@@ -70,7 +70,7 @@
 
 /* Right */
 
-.e-7eb56bb9 > .holder > .right
+.e-64d8716d > .holder > .right
 {
 	display: flex;
 	align-items: center;

package/lib/items/elements/{sections → navigation}/navbar/navbar.js

@@ -1,11 +1,11 @@
 onetype.AddonReady('elements', (elements) =>
 {
 	elements.ItemAdd({
-		id: 'sections-navbar',
+		id: 'navigation-navbar',
 		icon: 'menu',
 		name: 'Navbar',
 		description: 'Top navigation bar with logo and links.',
-		category: 'Section',
+		category: 'Navigation',
 		author: 'OneType',
 		config: {
 			items: {

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

@@ -0,0 +1,101 @@
+.e-210c16c7
+{
+	display: flex;
+	width: 220px;
+	flex-shrink: 0;
+	height: calc(100vh - 48px);
+}
+
+.e-210c16c7 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	padding: var(--ot-spacing-m) 0;
+	gap: var(--ot-spacing-m);
+}
+
+/* Group */
+
+.e-210c16c7 > .holder > .group
+{
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+/* Title */
+
+.e-210c16c7 > .holder > .group > .title
+{
+	font-size: 11px;
+	font-weight: 600;
+	color: var(--ot-text-2);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	padding: 0 var(--ot-spacing-m);
+	margin-bottom: var(--ot-spacing-x);
+	opacity: 0.6;
+}
+
+/* Item */
+
+.e-210c16c7 > .holder > .group > .item
+{
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 0 var(--ot-spacing-m);
+	height: var(--ot-height-s);
+	text-decoration: none;
+	color: var(--ot-text-2);
+	font-size: var(--ot-size-m);
+	font-weight: 500;
+	border-radius: var(--ot-radius-s);
+	margin: 0 var(--ot-spacing-s);
+	cursor: pointer;
+	transition: color 0.15s ease, background 0.15s ease;
+}
+
+.e-210c16c7 > .holder > .group > .item > i
+{
+	font-size: 18px;
+	opacity: 0.6;
+}
+
+.e-210c16c7 > .holder > .group > .item > .count
+{
+	margin-left: auto;
+	font-size: 11px;
+	color: var(--ot-text-2);
+	opacity: 0.5;
+}
+
+.e-210c16c7 > .holder > .group > .item:hover
+{
+	color: var(--ot-text-1);
+	background: var(--ot-bg-2);
+}
+
+.e-210c16c7 > .holder > .group > .item.active
+{
+	color: var(--ot-text-1);
+	background: var(--ot-bg-3);
+}
+
+.e-210c16c7 > .holder > .group > .item.active > i
+{
+	opacity: 1;
+}
+
+/* Variants */
+
+.e-210c16c7 > .holder.bg-2
+{
+	background: var(--ot-bg-2);
+}
+
+.e-210c16c7 > .holder.border
+{
+	border-right: 1px solid var(--ot-bg-2-border);
+}

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

@@ -0,0 +1,56 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'navigation-sidebar',
+		icon: 'side_navigation',
+		name: 'Sidebar',
+		description: 'Vertical navigation sidebar with grouped items and slots.',
+		category: 'Navigation',
+		author: 'OneType',
+		config: {
+			groups: {
+				type: 'array',
+				value: []
+			},
+			active: {
+				type: 'string',
+				value: ''
+			},
+			variant: {
+				type: 'array',
+				value: [],
+				options: ['bg-2', 'border']
+			},
+			_click: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			this.handleClick = (item) =>
+			{
+				this.active = item.value;
+
+				if(this._click)
+				{
+					this._click(item);
+				}
+			};
+
+			return `
+				<nav :class="'holder ' + variant.join(' ')">
+					<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)">
+							<i ot-if="item.icon">{{ item.icon }}</i>
+							<span>{{ item.label }}</span>
+							<span ot-if="item.count !== undefined" class="count">{{ item.count }}</span>
+						</a>
+					</div>
+					<slot name="bottom"></slot>
+				</nav>
+			`;
+		}
+	});
+});