@onetype/framework 2.0.53 → 2.0.54

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/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) {}
+	});
+});

package/addons/render/editor/styles/editor.css

@@ -0,0 +1,252 @@
+/* Root */
+
+.e-5511e8fd
+{
+	display: block;
+	width: 100%;
+}
+
+/* Editor */
+
+.e-5511e8fd > .ot-editor
+{
+	position: relative;
+	max-width: 720px;
+	margin: 0 auto;
+	padding: var(--ot-spacing-l) 0;
+}
+
+/* Blocks Container */
+
+.e-5511e8fd > .ot-editor > .ot-editor-blocks
+{
+	display: flex;
+	flex-direction: column;
+}
+
+/* Placeholder */
+
+.e-5511e8fd > .ot-editor > .ot-editor-placeholder
+{
+	color: var(--ot-text-3);
+	font-size: var(--ot-size-m);
+	padding: 0 var(--ot-spacing-m);
+	padding-left: 44px;
+	pointer-events: none;
+}
+
+/* Block */
+
+.e-5511e8fd .ot-block
+{
+	position: relative;
+	display: flex;
+	align-items: flex-start;
+	padding: 2px 0;
+	border-radius: var(--ot-radius-m);
+	outline: none;
+	transition: background 0.1s ease;
+}
+
+.e-5511e8fd .ot-block:hover
+{
+	background: var(--ot-bg-1-hover);
+}
+
+/* Gutter */
+
+.e-5511e8fd .ot-block-gutter
+{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 44px;
+	flex-shrink: 0;
+	opacity: 0;
+	transition: opacity 0.15s ease;
+	padding-top: 2px;
+}
+
+.e-5511e8fd .ot-block:hover > .ot-block-gutter
+{
+	opacity: 1;
+}
+
+.e-5511e8fd .ot-block-handle,
+.e-5511e8fd .ot-block-add
+{
+	width: 24px;
+	height: 24px;
+	border-radius: var(--ot-radius-s);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--ot-text-3);
+	background: none;
+	border: none;
+	cursor: pointer;
+	padding: 0;
+	transition: background 0.15s ease, color 0.15s ease;
+}
+
+.e-5511e8fd .ot-block-handle:hover,
+.e-5511e8fd .ot-block-add:hover
+{
+	background: var(--ot-bg-3);
+	color: var(--ot-text-1);
+}
+
+.e-5511e8fd .ot-block-handle > i,
+.e-5511e8fd .ot-block-add > i
+{
+	font-size: 16px;
+}
+
+.e-5511e8fd .ot-block-handle
+{
+	cursor: grab;
+}
+
+.e-5511e8fd .ot-block-handle:active
+{
+	cursor: grabbing;
+}
+
+/* Content */
+
+.e-5511e8fd .ot-block-content
+{
+	flex: 1;
+	min-width: 0;
+	min-height: 24px;
+	outline: none;
+}
+
+.e-5511e8fd .ot-block-content > [contenteditable]
+{
+	outline: none;
+	min-height: 24px;
+	word-break: break-word;
+	overflow-wrap: break-word;
+}
+
+.e-5511e8fd .ot-block-content > [contenteditable]:empty::before
+{
+	content: attr(data-placeholder);
+	color: var(--ot-text-3);
+	pointer-events: none;
+}
+
+/* Paragraph */
+
+.e-5511e8fd .ot-block-content > p
+{
+	margin: 0;
+	font-size: var(--ot-size-m);
+	line-height: 1.7;
+	color: var(--ot-text-1);
+}
+
+/* Inline Formats */
+
+.e-5511e8fd .ot-block-content strong
+{
+	font-weight: 600;
+	color: var(--ot-text-1);
+}
+
+.e-5511e8fd .ot-block-content em
+{
+	font-style: italic;
+}
+
+.e-5511e8fd .ot-block-content code
+{
+	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+	font-size: 0.9em;
+	padding: 0.15em 0.4em;
+	border-radius: var(--ot-radius-s);
+	background: var(--ot-bg-2);
+	border: 1px solid var(--ot-bg-2-border);
+}
+
+.e-5511e8fd .ot-block-content a
+{
+	color: var(--ot-brand);
+	text-decoration: underline;
+	text-decoration-color: var(--ot-brand-opacity);
+	text-underline-offset: 3px;
+}
+
+/* Actions */
+
+.e-5511e8fd .ot-block-actions
+{
+	display: flex;
+	align-items: flex-start;
+	flex-shrink: 0;
+	opacity: 0;
+	transition: opacity 0.15s ease;
+	padding-top: 2px;
+}
+
+.e-5511e8fd .ot-block:hover > .ot-block-actions
+{
+	opacity: 1;
+}
+
+.e-5511e8fd .ot-block-settings
+{
+	width: 24px;
+	height: 24px;
+	border-radius: var(--ot-radius-s);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--ot-text-3);
+	background: none;
+	border: none;
+	cursor: pointer;
+	padding: 0;
+	transition: background 0.15s ease, color 0.15s ease;
+}
+
+.e-5511e8fd .ot-block-settings:hover
+{
+	background: var(--ot-bg-3);
+	color: var(--ot-text-1);
+}
+
+.e-5511e8fd .ot-block-settings > i
+{
+	font-size: 16px;
+}
+
+/* Selection */
+
+.e-5511e8fd .ot-block-selected
+{
+	background: var(--ot-brand-opacity);
+}
+
+.e-5511e8fd .ot-block-focused
+{
+	background: transparent;
+}
+
+/* Bordered variant */
+
+.e-5511e8fd > .ot-editor.bordered
+{
+	border: 1px solid var(--ot-bg-1-border);
+	border-radius: var(--ot-radius-l);
+	padding: var(--ot-spacing-l);
+}
+
+/* Compact variant */
+
+.e-5511e8fd > .ot-editor.compact
+{
+	max-width: 100%;
+	padding: var(--ot-spacing-m) 0;
+}

package/addons/render/elements/front/functions/types/colors/badge.js

@@ -0,0 +1,19 @@
+onetype.AddonReady('elements', () => 
+{
+    const colors = {
+        new: 'brand',
+        featured: 'brand',
+        pro: 'brand',
+        premium: 'brand',
+        beta: 'blue',
+        info: 'blue',
+        warning: 'orange',
+        danger: 'red',
+        success: 'green'
+    };
+
+    elements.Fn('type.colors.badge', function(overrides)
+    {
+        return { ...colors, ...(overrides || {}) };
+    });
+});