@onetype/framework 2.0.52 → 2.0.54

package/addons/core/database/back/items/commands/create.js

@@ -38,7 +38,7 @@ onetype.AddonReady('commands', (commands) =>
 
 			const item = addon.Item(properties.data);
 
-			const allowed = expose.create.call({http: this.http, properties, item});
+			const allowed = await expose.create.call({http: this.http, properties, item});
 
 			if(allowed !== true)
 			{

package/addons/core/database/back/items/commands/delete.js

@@ -35,19 +35,19 @@ onetype.AddonReady('commands', (commands) =>
 				return resolve(null, 'Delete is not allowed.', 403);
 			}
 
-			if(!properties.data?.id || (typeof properties.data.id !== 'string' && typeof properties.data.id !== 'number'))
+			if(!properties.id || (typeof properties.id !== 'string' && typeof properties.id !== 'number'))
 			{
 				return resolve(null, 'Invalid or missing id.', 400);
 			}
 
-			const item = await addon.Find().filter('id', properties.data.id).one(true);
+			const item = await addon.Find().filter('id', properties.id).one(true);
 
 			if(!item)
 			{
 				return resolve(null, 'Item not found.', 404);
 			}
 
-			const allowed = expose.delete.call({http: this.http, properties, item});
+			const allowed = await expose.delete.call({http: this.http, properties, item});
 
 			if(allowed !== true)
 			{

package/addons/core/database/back/items/commands/update.js

@@ -54,7 +54,7 @@ onetype.AddonReady('commands', (commands) =>
 				item.Set(key, value);
 			});
 
-			const allowed = expose.update.call({http: this.http, properties, item});
+			const allowed = await expose.update.call({http: this.http, properties, item});
 
 			if(allowed !== true)
 			{

package/addons/float/popup/css/popup.css

@@ -209,8 +209,8 @@
 	border-top: 1px solid var(--ot-bg-1-border);
 }
 
-.ot-confirm > .actions > *
+.ot-confirm > .actions > *,
+.ot-confirm > .actions > * > *
 {
-	flex: 1;
 	width: 100%;
 }

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

@@ -24,7 +24,9 @@ directives.Fn('process', function(trigger, item, compile, node, identifier)
 
     if(node.nodeType === 1)
     {
-        if(!node.attributes.length && !node.tagName.includes('-'))
+        const tagLower = node.tagName.toLowerCase();
+
+        if(!node.attributes.length && !tagLower.includes('-') && tagLower !== 'slot' && tagLower !== 'render')
         {
             return;
         }

package/addons/render/directives/front/items/self/160-slot.js

@@ -9,12 +9,20 @@ onetype.AddonReady('directives', function(directives)
         trigger: 'node',
         order: 160,
         tag: 'slot',
+        strict: true,
         attributes: {
             'name': ['string']
         },
         code: function(data, item, compile, node, id)
         {
-            const name = data['name']?.value || 'default';
+            const name = data['name']?.value;
+
+            if(!name)
+            {
+                node.remove();
+                return;
+            }
+
             const slot = item.Slots[name];
 
             if (slot && slot.Element)

package/addons/render/directives/front/items/self/660-form.js

@@ -59,8 +59,9 @@ onetype.AddonReady('directives', function(directives)
 				if(!compile.data[config.bind])
 				{
 					compile.data[config.bind] = {
-						response: null,
-						error: null,
+						data: null,
+						message: null,
+						code: null,
 						loading: false
 					};
 				}
@@ -127,7 +128,7 @@ onetype.AddonReady('directives', function(directives)
 
 				if(!config.endpoint)
 				{
-					state.response = submitData;
+					state.data = submitData;
 					config.onSuccess && await config.onSuccess(submitData);
 					config.reset && form.reset();
 					compile.data.Update();
@@ -135,7 +136,8 @@ onetype.AddonReady('directives', function(directives)
 				}
 
 				state.loading = true;
-				state.error = null;
+				state.message = null;
+				state.code = null;
 				compile.data.Update();
 
 				try
@@ -148,17 +150,20 @@ onetype.AddonReady('directives', function(directives)
 						body: JSON.stringify(submitData)
 					});
 
-					if(!response.ok)
-					{
-						throw onetype.Error(response.status, 'HTTP :status:.', { status: response.status });
-					}
-
 					const result = await response.json();
 
-					state.response = result.data !== undefined ? result.data : result;
-					state.error = null;
+					state.data = result.data || null;
+					state.message = result.message || null;
+					state.code = result.code || response.status;
 					state.loading = false;
 
+					if(!response.ok)
+					{
+						config.onError && config.onError(state);
+						compile.data.Update();
+						return;
+					}
+
 					config.reset && form.reset();
 
 					if(config.redirect)
@@ -171,8 +176,9 @@ onetype.AddonReady('directives', function(directives)
 				}
 				catch(error)
 				{
-					state.response = null;
-					state.error = error.message;
+					state.data = null;
+					state.message = error.message;
+					state.code = 0;
 					state.loading = false;
 
 					config.onError && config.onError(state);

package/addons/render/editor/addon.js

@@ -0,0 +1,13 @@
+const editor = onetype.Addon('editor', (addon) =>
+{
+	addon.Field('id', ['string']);
+	addon.Field('icon', ['string', 'edit_note']);
+	addon.Field('name', ['string', '']);
+	addon.Field('category', ['string', '']);
+	addon.Field('editable', ['boolean', false]);
+	addon.Field('children', ['boolean', false]);
+	addon.Field('config', ['object', {}]);
+	addon.Field('insert', ['function']);
+	addon.Field('update', ['function']);
+	addon.Field('remove', ['function']);
+});

package/addons/render/editor/functions/block/add.js

@@ -0,0 +1,57 @@
+onetype.AddonReady('editor', (editor) =>
+{
+	editor.Fn('block.add', function(instance, type, afterUid, data)
+	{
+		const block = {
+			uid: onetype.GenerateUID(),
+			type: type,
+			data: data || {},
+			children: []
+		};
+
+		const container = instance.Element.querySelector('.ot-editor-blocks');
+
+		if(!container)
+		{
+			return null;
+		}
+
+		const node = editor.Fn('render.block', instance, block);
+
+		if(!node)
+		{
+			return null;
+		}
+
+		if(afterUid)
+		{
+			const index = instance.blocks.findIndex(b => b.uid === afterUid);
+			const afterNode = container.querySelector('[data-uid="' + afterUid + '"]');
+
+			if(index !== -1 && afterNode)
+			{
+				instance.blocks.splice(index + 1, 0, block);
+				afterNode.after(node);
+			}
+			else
+			{
+				instance.blocks.push(block);
+				container.appendChild(node);
+			}
+		}
+		else
+		{
+			instance.blocks.push(block);
+			container.appendChild(node);
+		}
+
+		const placeholder = instance.Element.querySelector('.ot-editor-placeholder');
+
+		if(placeholder)
+		{
+			placeholder.style.display = 'none';
+		}
+
+		return block;
+	});
+});

package/addons/render/editor/functions/block/delete.js

@@ -0,0 +1,32 @@
+onetype.AddonReady('editor', (editor) =>
+{
+	editor.Fn('block.delete', function(instance, uid)
+	{
+		const found = editor.Fn('block.find', instance, uid);
+
+		if(!found)
+		{
+			return;
+		}
+
+		const type = editor.ItemGet(found.block.type);
+		const node = instance.Element.querySelector('[data-uid="' + uid + '"]');
+
+		if(type && type.Get('remove'))
+		{
+			type.Get('remove').call(null, node);
+		}
+
+		found.list.splice(found.index, 1);
+
+		if(node)
+		{
+			node.remove();
+		}
+
+		if(!instance.blocks.length)
+		{
+			editor.Fn('block.add', instance, 'paragraph', null, {});
+		}
+	});
+});

package/addons/render/editor/functions/block/find.js

@@ -0,0 +1,30 @@
+onetype.AddonReady('editor', (editor) =>
+{
+	editor.Fn('block.find', function(instance, uid, source)
+	{
+		source = source || instance.blocks;
+
+		for(let i = 0; i < source.length; i++)
+		{
+			if(source[i].uid === uid)
+			{
+				return { block: source[i], list: source, index: i };
+			}
+
+			if(source[i].children)
+			{
+				for(let z = 0; z < source[i].children.length; z++)
+				{
+					const found = editor.Fn('block.find', instance, uid, source[i].children[z]);
+
+					if(found)
+					{
+						return found;
+					}
+				}
+			}
+		}
+
+		return null;
+	});
+});

package/addons/render/editor/functions/render/block.js

@@ -0,0 +1,114 @@
+onetype.AddonReady('editor', (editor) =>
+{
+	editor.Fn('render.block', function(instance, block)
+	{
+		const type = editor.ItemGet(block.type);
+
+		if(!type)
+		{
+			return null;
+		}
+
+		const wrapper = document.createElement('div');
+		wrapper.className = 'ot-block';
+		wrapper.setAttribute('data-uid', block.uid);
+		wrapper.setAttribute('data-type', block.type);
+		wrapper.setAttribute('tabindex', '-1');
+
+		const gutter = document.createElement('div');
+		gutter.className = 'ot-block-gutter';
+		gutter.innerHTML = '<button class="ot-block-handle" draggable="true"><i>drag_indicator</i></button><button class="ot-block-add"><i>add</i></button>';
+
+		const content = document.createElement('div');
+		content.className = 'ot-block-content';
+		content.innerHTML = type.Get('insert').call(null, block.data);
+
+		const actions = document.createElement('div');
+		actions.className = 'ot-block-actions';
+		actions.innerHTML = '<button class="ot-block-settings"><i>more_vert</i></button>';
+
+		wrapper.appendChild(gutter);
+		wrapper.appendChild(content);
+		wrapper.appendChild(actions);
+
+		if(type.Get('editable'))
+		{
+			const target = content.firstElementChild;
+
+			if(target)
+			{
+				target.setAttribute('contenteditable', 'true');
+				target.setAttribute('data-placeholder', instance.placeholder || 'Type something...');
+
+				target.addEventListener('input', () =>
+				{
+					block.data.content = target.innerHTML;
+
+					if(instance._change)
+					{
+						instance._change({ value: instance.getValue() });
+					}
+				});
+
+				target.addEventListener('keydown', (e) =>
+				{
+					if(e.key === 'Enter' && !e.shiftKey)
+					{
+						e.preventDefault();
+						const newBlock = editor.Fn('block.add', instance, 'paragraph', block.uid, {});
+
+						if(newBlock)
+						{
+							const newNode = instance.Element.querySelector('[data-uid="' + newBlock.uid + '"]');
+
+							if(newNode)
+							{
+								const editable = newNode.querySelector('[contenteditable]');
+								if(editable) editable.focus();
+							}
+						}
+					}
+
+					if(e.key === 'Backspace' && target.innerHTML === '' && instance.blocks.length > 1)
+					{
+						e.preventDefault();
+
+						const index = instance.blocks.findIndex(b => b.uid === block.uid);
+						const prev = index > 0 ? instance.blocks[index - 1] : null;
+
+						editor.Fn('block.delete', instance, block.uid);
+
+						if(prev)
+						{
+							const prevNode = instance.Element.querySelector('[data-uid="' + prev.uid + '"]');
+
+							if(prevNode)
+							{
+								const editable = prevNode.querySelector('[contenteditable]');
+								if(editable) editable.focus();
+							}
+						}
+					}
+				});
+			}
+		}
+
+		gutter.querySelector('.ot-block-add').addEventListener('click', () =>
+		{
+			const newBlock = editor.Fn('block.add', instance, 'paragraph', block.uid, {});
+
+			if(newBlock)
+			{
+				const newNode = instance.Element.querySelector('[data-uid="' + newBlock.uid + '"]');
+
+				if(newNode)
+				{
+					const editable = newNode.querySelector('[contenteditable]');
+					if(editable) editable.focus();
+				}
+			}
+		});
+
+		return wrapper;
+	});
+});

package/addons/render/editor/functions/render/blocks.js

@@ -0,0 +1,31 @@
+onetype.AddonReady('editor', (editor) =>
+{
+	editor.Fn('render.blocks', function(instance)
+	{
+		const container = instance.Element.querySelector('.ot-editor-blocks');
+
+		if(!container)
+		{
+			return;
+		}
+
+		container.innerHTML = '';
+
+		instance.blocks.forEach(block =>
+		{
+			const node = editor.Fn('render.block', instance, block);
+
+			if(node)
+			{
+				container.appendChild(node);
+			}
+		});
+
+		const placeholder = instance.Element.querySelector('.ot-editor-placeholder');
+
+		if(placeholder)
+		{
+			placeholder.style.display = instance.blocks.length ? 'none' : '';
+		}
+	});
+});

package/addons/render/editor/items/elements/editor.js

@@ -0,0 +1,69 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'editor',
+		icon: 'edit_note',
+		name: 'Block Editor',
+		description: 'Block-based content editor.',
+		category: 'Form',
+		config: {
+			value: {
+				type: 'array',
+				value: []
+			},
+			placeholder: {
+				type: 'string',
+				value: 'Type something...'
+			},
+			readonly: {
+				type: 'boolean',
+				value: false
+			},
+			variant: {
+				type: 'array',
+				value: [],
+				options: ['compact', 'bordered']
+			},
+			_change: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			const addon = onetype.AddonGet('editor');
+
+			this.blocks = [];
+
+			this.getValue = () =>
+			{
+				return this.blocks.map(block => ({
+					type: block.type,
+					data: Object.assign({}, block.data),
+					children: block.children || []
+				}));
+			};
+
+			this.OnReady(() =>
+			{
+				if(this.value && this.value.length)
+				{
+					this.value.forEach(block =>
+					{
+						addon.Fn('block.add', this, block.type, null, Object.assign({}, block.data));
+					});
+				}
+				else
+				{
+					addon.Fn('block.add', this, 'paragraph', null, {});
+				}
+			});
+
+			return /* html */ `
+				<div :class="'ot-editor ' + variant.join(' ')">
+					<div class="ot-editor-blocks"></div>
+					<div class="ot-editor-placeholder">{{ placeholder }}</div>
+				</div>
+			`;
+		}
+	});
+});

package/addons/render/editor/items/self/paragraph.js

@@ -0,0 +1,21 @@
+onetype.AddonReady('editor', (editor) =>
+{
+	editor.ItemAdd({
+		id: 'paragraph',
+		icon: 'text_fields',
+		name: 'Text',
+		category: 'basic',
+		editable: true,
+		children: false,
+		config: {},
+		insert: function(data)
+		{
+			return '<p>' + (data.content || '') + '</p>';
+		},
+		update: function(data)
+		{
+			return '<p>' + (data.content || '') + '</p>';
+		},
+		remove: function(node) {}
+	});
+});