@onetype/framework 2.0.49 → 2.0.52

package/addons/float/popup/js/functions/confirm.js

@@ -0,0 +1,100 @@
+popup.Fn('confirm', function(title, description, options = {})
+{
+	if(typeof description === 'object')
+	{
+		options = description;
+		description = '';
+	}
+
+	return new Promise((resolve) =>
+	{
+		const id = 'confirm-' + onetype.GenerateUID();
+		let resolved = false;
+
+		const close = (value) =>
+		{
+			if(resolved) return;
+			resolved = true;
+			overlay.Remove();
+			resolve(value);
+		};
+
+		const overlay = overlays.Item({
+			id: options.id || id,
+			position: { x: 'center', y: 'center' },
+			backdrop: options.backdrop ?? 0.4,
+			closeable: true,
+			escape: true,
+			onOpen: (item) =>
+			{
+				const element = item.Get('element');
+
+				if(element)
+				{
+					element.classList.add('ot-modal');
+				}
+			},
+			onClose: () => close(options.input ? null : false),
+			render: function()
+			{
+				this.value = options.value || '';
+				this.hasInput = !!options.input;
+
+				this.input = ({ value }) =>
+				{
+					this.value = value;
+				};
+
+				this.cancel = () =>
+				{
+					close(this.hasInput ? null : false);
+				};
+
+				this.submit = () =>
+				{
+					close(this.hasInput ? this.value : true);
+				};
+
+				this.keydown = ({ event }) =>
+				{
+					if(event.key === 'Enter' && this.hasInput && this.value)
+					{
+						event.preventDefault();
+						this.submit();
+					}
+				};
+
+				this.title = title || '';
+				this.description = description || '';
+				this.hasIcon = !!options.icon;
+				this.icon = options.icon || '';
+				this.type = options.type || 'default';
+				this.confirmText = options.confirm || (this.hasInput ? 'Continue' : 'Confirm');
+				this.cancelText = options.cancel || 'Cancel';
+				this.confirmVariant = (this.type === 'danger') ? ['red', 'size-m'] : ['brand', 'size-m'];
+				this.placeholder = options.placeholder || '';
+
+				return /* html */ `
+					<div class="ot-confirm">
+						<div ot-if="hasIcon" :class="'icon ' + type"><i>{{ icon }}</i></div>
+						<h3 class="title">{{ title }}</h3>
+						<p ot-if="description" class="description">{{ description }}</p>
+						<div ot-if="hasInput" class="input">
+							<e-form-input
+								:value="value"
+								:placeholder="placeholder"
+								:_input="input"
+								:variant="['bg-2', 'border', 'size-m']"
+								ot-keydown="keydown"
+							></e-form-input>
+						</div>
+						<div class="actions">
+							<e-form-button :text="cancelText" :variant="['bg-2', 'border', 'size-m']" :_click="cancel"></e-form-button>
+							<e-form-button :text="confirmText" :variant="confirmVariant" :_click="submit"></e-form-button>
+						</div>
+					</div>
+				`;
+			}
+		});
+	});
+});

package/addons/float/popup/js/functions/toast.js

@@ -1,6 +1,6 @@
 popup.Fn('toast', function(message, options = {})
 {
-	const config = typeof message === 'object' ? message : {message};
+	const config = typeof message === 'object' ? message : { message, type: 'success' };
 	const id = 'toast-' + onetype.GenerateUID();
 	const duration = config.duration ?? options.duration ?? 5000;
 

package/addons/float/popup/js/items/directives/tooltip.js

@@ -9,7 +9,11 @@ onetype.AddonReady('directives', function(directives)
 			if ('otTooltipConfig' in node && !node.otTooltipShow)
 			{
 				node.otTooltipShow = true;
-				node.otTooltipOverlay = popup.Fn('tooltip', node, node.otTooltipConfig);
+				const cfg = node.otTooltipConfig;
+				const opts = {};
+				if(cfg.position) opts.position = cfg.position;
+				if(cfg.offset) opts.offset = cfg.offset;
+				node.otTooltipOverlay = popup.Fn('tooltip', node, cfg, opts);
 				break;
 			}
 

package/addons/render/directives/front/addon.js

@@ -17,6 +17,11 @@ const directives = onetype.Addon('directives', (addon) =>
     
     onetype.EmitOn('@addon.render.compile.before', (item, compile, node, identifier) =>
     {
+        if(compile.locale !== false)
+        {
+            directives.Fn('process.locale', node);
+        }
+
         directives.Fn('process', 'before', item, compile, node, identifier);
     })
 

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

@@ -60,7 +60,25 @@ directives.Fn('process.data', function(attributes, node, compile)
             }
         }
 
-        attribute.value = onetype.DataDefineOne(attribute.value, definition);
+        try
+        {
+            attribute.value = onetype.DataDefineOne(attribute.value, definition);
+        }
+        catch(error)
+        {
+            const path = error.path && error.path.length
+                ? attribute.name + '.' + error.path.join('.').replace(/\.\[/g, '[')
+                : attribute.name;
+
+            onetype.Error(400, 'Directive attribute :path: failed — :reason:', {
+                path,
+                reason: error.message,
+                value: attribute.value
+            });
+
+            attribute.value = null;
+        }
+
         data[attribute.name] = attribute;
 
         if(find && node.removeAttribute)

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

@@ -0,0 +1,46 @@
+const skip = ['id', 'class', 'style', 'href', 'src', 'action', 'method', 'type', 'name', 'value', 'for', 'role', 'tabindex', 'width', 'height', 'data', 'slot'];
+
+directives.Fn('process.locale', function(node)
+{
+	if(node.nodeType === 3)
+	{
+		const text = node.textContent.trim();
+
+		if(text && !text.includes('{{') && node.parentNode?.tagName !== 'I')
+		{
+			node.textContent = node.textContent.replace(text, onetype.LocaleGet(text));
+		}
+
+		return;
+	}
+
+	if(node.nodeType === 1)
+	{
+		for(let i = 0; i < node.attributes.length; i++)
+		{
+			const attr = node.attributes[i];
+
+			if(attr.name.startsWith(':') || attr.name.startsWith('ot-'))
+			{
+				continue;
+			}
+
+			if(skip.includes(attr.name))
+			{
+				continue;
+			}
+
+			if(!attr.value || !attr.value.trim())
+			{
+				continue;
+			}
+
+			attr.value = onetype.LocaleGet(attr.value);
+		}
+
+		for(let i = 0; i < node.childNodes.length; i++)
+		{
+			directives.Fn('process.locale', node.childNodes[i]);
+		}
+	}
+});

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

@@ -84,5 +84,8 @@ directives.Fn('process', function(trigger, item, compile, node, identifier)
         }
     }
 
-    directives.StoreGet('fn.attributes')(node, compile);
+    if(node.isConnected || node.parentNode)
+    {
+        directives.StoreGet('fn.attributes')(node, compile);
+    }
 });

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

@@ -4,24 +4,25 @@ onetype.AddonReady('directives', function(directives)
 		id: 'ot-form',
 		icon: 'send',
 		name: 'Form',
-		description: 'Submit form data to endpoint and bind response to component data',
+		description: 'Submit form data to endpoint or callback and bind response to component data.',
 		category: 'data',
 		trigger: 'node',
 		order: 660,
+		strict: false,
 		tag: 'ot-form',
 		attributes: {
 			'post': ['string'],
 			'get': ['string'],
 			'endpoint': ['string'],
-			'url': ['string'],
-			'bind': ['string'],
+			'bind': ['string', 'form'],
 			'method': ['string'],
 			'redirect': ['string'],
-			'on-success': ['string'],
-			'on-error': ['string'],
-			'reset': ['boolean'],
-			'stop': ['boolean'],
-			'data': ['string']
+			'_submit': ['function'],
+			'_success': ['function'],
+			'_error': ['function'],
+			'reset': ['boolean', false],
+			'stop': ['boolean', false],
+			'data': ['object', {}]
 		},
 		code: function(data, item, compile, node, identifier)
 		{
@@ -33,7 +34,6 @@ onetype.AddonReady('directives', function(directives)
 				methods.config();
 				methods.state();
 				methods.element();
-				methods.compile();
 				methods.handler();
 			};
 
@@ -42,45 +42,16 @@ onetype.AddonReady('directives', function(directives)
 				const post = data['post']?.value;
 				const get = data['get']?.value;
 
-				config.endpoint = post || get || data['endpoint']?.value || data['url']?.value || '';
+				config.endpoint = post || get || data['endpoint']?.value || '';
 				config.bind = data['bind']?.value || 'form';
 				config.method = get ? 'GET' : (data['method']?.value || 'POST').toUpperCase();
 				config.redirect = data['redirect']?.value;
-				config.onSuccess = data['on-success']?.value;
-				config.onError = data['on-error']?.value;
+				config.onSubmit = data['_submit']?.value;
+				config.onSuccess = data['_success']?.value;
+				config.onError = data['_error']?.value;
 				config.reset = data['reset']?.value || false;
 				config.stop = data['stop']?.value || false;
-				config.data = methods.parseData();
-				config.url = methods.normalizeUrl(config.endpoint);
-			};
-
-			methods.parseData = () =>
-			{
-				const dataAttr = data['data']?.value;
-
-				if(!dataAttr)
-				{
-					return {};
-				}
-
-				try
-				{
-					return JSON.parse(dataAttr);
-				}
-				catch(e)
-				{
-					return onetype.Function(dataAttr, compile.data, false) || {};
-				}
-			};
-
-			methods.normalizeUrl = (endpoint) =>
-			{
-				if(/^https?:\/\//.test(endpoint))
-				{
-					return endpoint;
-				}
-
-				return endpoint.startsWith('/') ? endpoint : '/' + endpoint;
+				config.data = data['data']?.value || {};
 			};
 
 			methods.state = () =>
@@ -97,32 +68,21 @@ onetype.AddonReady('directives', function(directives)
 
 			methods.element = () =>
 			{
-				config.html = node.innerHTML;
 				config.form = document.createElement('form');
 				config.form.setAttribute('autocomplete', 'off');
 
-				const reserved = ['endpoint', 'url', 'bind', 'method', 'on-success', 'on-error', 'reset', 'stop', 'data', 'redirect', 'post', 'get'];
-
-				Array.from(node.attributes).forEach(attr =>
+				while(node.firstChild)
 				{
-					if(!reserved.includes(attr.name))
-					{
-						config.form.setAttribute(attr.name, attr.value);
-					}
-				});
-			};
+					config.form.appendChild(node.firstChild);
+				}
 
-			methods.compile = () =>
-			{
-				const compiled = item.Compile(config.html, compile.data);
+				node.appendChild(config.form);
 
-				while(compiled.element.firstChild)
+				if(config.data && typeof config.data === 'object' && Object.keys(config.data).length)
 				{
-					config.form.appendChild(compiled.element.firstChild);
+					Object.assign(compile.data, config.data);
+					requestAnimationFrame(() => onetype.FormSet(config.form, config.data));
 				}
-
-				node.replaceWith(config.form);
-				compile.children = false;
 			};
 
 			methods.handler = () =>
@@ -136,146 +96,97 @@ onetype.AddonReady('directives', function(directives)
 						event.stopPropagation();
 					}
 
-					await methods.submit();
+					const form = event.target.closest('form') || event.target;
+
+					await methods.submit(form);
 				};
 			};
 
-			methods.submit = async () =>
+			methods.submit = async (form) =>
 			{
 				const state = compile.data[config.bind];
-				const formData = methods.extract();
-
-				state.loading = true;
-				state.error = null;
-
-				try
-				{
-					const submitData = Object.assign({}, formData, config.data);
-					const response = await methods.fetch(submitData);
-
-					state.response = response.data !== undefined ? response.data : response;
-					state.error = null;
-					state.loading = false;
 
-					methods.success();
-				}
-				catch(err)
+				if(state.loading)
 				{
-					state.response = null;
-					state.error = err.message;
-					state.loading = false;
-
-					methods.error(err);
-				}
-				finally
-				{
-					compile.data.Update();
+					return;
 				}
-			};
 
-			methods.extract = () =>
-			{
-				const formData = {};
-				const inputs = config.form.querySelectorAll('input[name], textarea[name], select[name]');
+				const formData = onetype.FormGet(form);
+				const submitData = Object.assign({}, config.data, formData);
 
-				inputs.forEach(input =>
+				if(config.onSubmit)
 				{
-					const name = input.getAttribute('name');
+					const result = await config.onSubmit(submitData);
 
-					if(!name)
+					if(result === false)
 					{
+						compile.data.Update();
 						return;
 					}
-
-					if(input.type === 'checkbox')
-					{
-						formData[name] = input.checked;
-					}
-					else if(input.type === 'radio')
-					{
-						if(input.checked)
-						{
-							formData[name] = input.value;
-						}
-					}
-					else
-					{
-						formData[name] = input.value;
-					}
-				});
-
-				return formData;
-			};
-
-			methods.fetch = async (data) =>
-			{
-				const response = await fetch(config.url, {
-					method: config.method,
-					headers: { 'Content-Type': 'application/json' },
-					body: JSON.stringify(data)
-				});
-
-				if(!response.ok)
-				{
-					throw onetype.Error(response.status, 'HTTP :status:.', {status: response.status});
 				}
 
-				return response.json();
-			};
-
-			methods.success = () =>
-			{
-				if(config.reset)
+				if(!config.endpoint)
 				{
-					config.form.reset();
-				}
-
-				if(config.redirect)
-				{
-					onetype.AddonGet('pages')?.Fn('change', null, config.redirect);
+					state.response = submitData;
+					config.onSuccess && await config.onSuccess(submitData);
+					config.reset && form.reset();
+					compile.data.Update();
 					return;
 				}
 
-				if(config.onSuccess)
+				state.loading = true;
+				state.error = null;
+				compile.data.Update();
+
+				try
 				{
-					const callback = onetype.Function(config.onSuccess, compile.data, false);
+					const url = config.endpoint.startsWith('/') ? config.endpoint : '/' + config.endpoint;
+
+					const response = await fetch(url, {
+						method: config.method,
+						headers: { 'Content-Type': 'application/json' },
+						body: JSON.stringify(submitData)
+					});
 
-					if(typeof callback === 'function')
+					if(!response.ok)
 					{
-						callback(compile.data[config.bind].response);
+						throw onetype.Error(response.status, 'HTTP :status:.', { status: response.status });
 					}
-				}
 
-				onetype.Emit('@form.success', {
-					bind: config.bind,
-					response: compile.data[config.bind].response
-				});
-			};
+					const result = await response.json();
 
-			methods.error = (err) =>
-			{
-				onetype.Error(500, 'Form submit error.', {bind: config.bind});
+					state.response = result.data !== undefined ? result.data : result;
+					state.error = null;
+					state.loading = false;
 
-				if(config.onError)
-				{
-					const callback = onetype.Function(config.onError, compile.data, false);
+					config.reset && form.reset();
 
-					if(typeof callback === 'function')
+					if(config.redirect)
 					{
-						callback(err.message);
+						onetype.AddonGet('pages')?.Fn('change', null, config.redirect);
+						return;
 					}
+
+					config.onSuccess && config.onSuccess(state);
 				}
+				catch(error)
+				{
+					state.response = null;
+					state.error = error.message;
+					state.loading = false;
 
-				onetype.Emit('@form.error', {
-					bind: config.bind,
-					error: err.message
-				});
+					config.onError && config.onError(state);
+				}
+				finally
+				{
+					compile.data.Update();
+				}
 			};
 
 			methods.init();
 		}
 	});
-	
+
 	document.addEventListener('submit', function(event)
 	{
 		const node = event.target;

package/addons/render/directives/front/items/self/750-html.js

@@ -26,7 +26,7 @@ onetype.AddonReady('directives', function(directives)
                     const originalChildren = compile.children;
                     compile.children = false;
 
-                    const compiled = item.Compile(results, compile.data);
+                    const compiled = item.Compile(results, compile.data, {locale: false});
                     const fragment = document.createDocumentFragment();
 
                     while(compiled.element.firstChild)

package/addons/render/elements/front/items/self/form/button/button.css

@@ -10,6 +10,7 @@
 .e-64e877b > .holder
 {
 	position: relative;
+	width: inherit;
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -147,6 +148,14 @@
 
 /* ---- Solid color variants ---- */
 
+.e-64e877b > .holder.dark { background: #000; border-color: #000; color: #fff; }
+.e-64e877b > .holder.dark:hover { background: #1a1a1a; border-color: #1a1a1a; }
+.e-64e877b > .holder.dark:focus-visible { box-shadow: 0 0 0 2px var(--ot-bg-1), 0 0 0 4px #000; }
+
+body.dark .e-64e877b > .holder.dark { background: #fff; border-color: #fff; color: #000; }
+body.dark .e-64e877b > .holder.dark:hover { background: #e5e5e5; border-color: #e5e5e5; }
+body.dark .e-64e877b > .holder.dark:focus-visible { box-shadow: 0 0 0 2px var(--ot-bg-1), 0 0 0 4px #fff; }
+
 .e-64e877b > .holder.brand { background: var(--ot-brand); border-color: var(--ot-brand); color: white; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 8px var(--ot-brand-opacity); }
 .e-64e877b > .holder.brand:hover { background: var(--ot-brand-hover); border-color: var(--ot-brand-hover); box-shadow: 0 4px 12px var(--ot-brand-opacity), 0 2px 4px rgba(0, 0, 0, 0.1); }
 .e-64e877b > .holder.brand:focus-visible { box-shadow: 0 0 0 2px var(--ot-bg-1), 0 0 0 4px var(--ot-brand); }

package/addons/render/elements/front/items/self/form/button/button.js

@@ -46,7 +46,7 @@ onetype.AddonReady('elements', (elements) =>
 				type: 'array',
 				value: ['brand', 'size-m'],
 				options: [
-					'brand', 'blue', 'red', 'orange', 'green',
+					'brand', 'blue', 'red', 'orange', 'green', 'dark',
 					'soft-brand', 'soft-blue', 'soft-red', 'soft-orange', 'soft-green',
 					'outline-brand', 'outline-blue', 'outline-red', 'outline-orange', 'outline-green',
 					'bg-1', 'bg-2', 'bg-3', 'bg-4',

package/addons/render/elements/front/items/self/form/color/color.css

@@ -148,7 +148,7 @@
 .e-21311850 > .holder.size-s > .input { font-size: var(--ot-size-s); }
 
 .e-21311850 > .holder.size-m { height: var(--ot-height-m); padding: 0 var(--ot-spacing-s); }
-.e-21311850 > .holder.size-m > .swatch { width: 22px; height: 22px; }
+.e-21311850 > .holder.size-m > .swatch { width: 22px; height: 22px; border: 1px solid var(--ot-bg-2-border); }
 .e-21311850 > .holder.size-m > .input { font-size: var(--ot-size-m); }
 
 .e-21311850 > .holder.size-l { height: var(--ot-height-l); padding: 0 var(--ot-spacing-m); }