@onetype/framework 2.0.41 → 2.0.43

package/addons/render/elements/front/items/self/core/builder/builder.js

@@ -0,0 +1,257 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'core-builder',
+		icon: 'dashboard_customize',
+		name: 'Builder',
+		description: 'Config-driven form builder with sections, conditions, and any element.',
+		category: 'Core',
+		author: 'OneType',
+		config: {
+			values: {
+				type: 'object',
+				value: {}
+			},
+			sections: {
+				type: 'array',
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						title: { type: 'string', value: '' },
+						collapsed: { type: 'boolean', value: false },
+						condition: { type: 'function' },
+						fields: {
+							type: 'array',
+							value: [],
+							each: {
+								type: 'object',
+								config: {
+									key: { type: 'string', value: '' },
+									label: { type: 'string', value: '' },
+									description: { type: 'string', value: '' },
+									position: { type: 'string', value: 'top' },
+									element: { type: 'string', value: '' },
+									properties: { type: 'object', value: {} },
+									condition: { type: 'function' }
+								}
+							}
+						}
+					}
+				}
+			},
+			save: {
+				type: 'string',
+				value: ''
+			},
+			disabled: {
+				type: 'boolean',
+				value: false
+			},
+			variant: {
+				type: 'array',
+				value: ['size-m'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
+			},
+			_input: {
+				type: 'function'
+			},
+			_change: {
+				type: 'function'
+			},
+			_save: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			// State
+
+			this.collapsed = {};
+
+			this.sections.forEach((section, index) =>
+			{
+				if (section.collapsed)
+				{
+					this.collapsed[index] = true;
+				}
+			});
+
+			// Helpers
+
+			this.visible = (condition) =>
+			{
+				if (!condition)
+				{
+					return true;
+				}
+
+				return condition(this.values);
+			};
+
+			this.val = (key) =>
+			{
+				if (!this.values)
+				{
+					return null;
+				}
+
+				return this.values[key];
+			};
+
+			// Actions
+
+			this.toggle = (index) =>
+			{
+				this.collapsed[index] = !this.collapsed[index];
+				this.Update();
+			};
+
+			this.input = (key, data) =>
+			{
+				this.values[key] = data.value;
+				this.Update();
+
+				if (this._input)
+				{
+					this._input({ key, value: data.value });
+				}
+			};
+
+			this.change = (key, data) =>
+			{
+				this.values[key] = data.value;
+				this.Update();
+
+				if (this._change)
+				{
+					this._change({ key, value: data.value });
+				}
+			};
+
+			this.submit = () =>
+			{
+				if (this._save)
+				{
+					this._save({ value: this.values });
+				}
+			};
+
+			// Build sections
+
+			const html = this.sections.map((section, sectionIndex) =>
+			{
+				// Section condition
+
+				const sectionCondition = section.condition
+					? `ot-if="visible(sections[${sectionIndex}].condition)"`
+					: '';
+
+				// Section header
+
+				const header = section.title
+					? `
+						<div class="header" ot-click="() => toggle(${sectionIndex})">
+							<span class="title">{{ sections[${sectionIndex}].title }}</span>
+							<i :class="'chevron' + (collapsed[${sectionIndex}] ? ' collapsed' : '')">expand_more</i>
+						</div>
+					`
+					: '';
+
+				// Fields
+
+				const fields = section.fields.map((field, fieldIndex) =>
+				{
+					const tag = 'e-' + field.element;
+					const props = field.properties || {};
+					const position = field.position || 'top';
+
+					// Build properties attributes
+
+					let attrs = '';
+
+					Object.keys(props).forEach((key) =>
+					{
+						const val = props[key];
+
+						if (typeof val === 'string')
+						{
+							attrs += ` ${key}="${val}"`;
+						}
+						else
+						{
+							attrs += ` :${key}='${JSON.stringify(val)}'`;
+						}
+					});
+
+					// Element tag
+
+					const element = `<${tag} :value="val('${field.key}')" :_input="(data) => input('${field.key}', data)" :_change="(data) => change('${field.key}', data)"${attrs}></${tag}>`;
+
+					// Label
+
+					const label = field.label
+						? `<span class="label">{{ sections[${sectionIndex}].fields[${fieldIndex}].label }}</span>`
+						: '';
+
+					// Description
+
+					const description = field.description
+						? `<span class="description">{{ sections[${sectionIndex}].fields[${fieldIndex}].description }}</span>`
+						: '';
+
+					// Field condition
+
+					const fieldCondition = field.condition
+						? `ot-if="visible(sections[${sectionIndex}].fields[${fieldIndex}].condition)"`
+						: '';
+
+					// Position layout
+
+					if (position === 'left')
+					{
+						return `
+							<div class="field left" ${fieldCondition}>
+								<div class="info">
+									${label}
+									${description}
+								</div>
+								<div class="control">
+									${element}
+								</div>
+							</div>
+						`;
+					}
+
+					return `
+						<div class="field top" ${fieldCondition}>
+							<div class="info">
+								${label}
+								${description}
+							</div>
+							${element}
+						</div>
+					`;
+				}).join('');
+
+				return `
+					<div class="section" ${sectionCondition}>
+						${header}
+						<div ot-if="!collapsed[${sectionIndex}]" class="fields">
+							${fields}
+						</div>
+					</div>
+				`;
+			}).join('');
+
+			return `
+				<div :class="'holder ' + variant.join(' ')">
+					${html}
+					<div ot-if="save" class="footer">
+						<e-form-button :text="save" :_click="submit" :disabled="disabled" :variant="['brand', 'size-s']"></e-form-button>
+					</div>
+				</div>
+			`;
+		}
+	});
+});

package/addons/render/elements/front/items/self/core/repeater/repeater.css

@@ -0,0 +1,197 @@
+/* Root */
+
+.e-d62eba0
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-d62eba0 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
+	width: 100%;
+	border-radius: var(--ot-radius-m);
+	border: 1px solid transparent;
+}
+
+/* Rows */
+
+.e-d62eba0 > .holder > .rows
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
+}
+
+/* Row */
+
+.e-d62eba0 > .holder > .rows > .row
+{
+	position: relative;
+	display: flex;
+	align-items: flex-start;
+	padding: var(--ot-spacing-s);
+	background: var(--ot-bg-1);
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: var(--ot-radius-m);
+	transition: border-color 0.15s ease;
+}
+
+.e-d62eba0 > .holder > .rows > .row:hover
+{
+	border-color: var(--ot-bg-3-border);
+}
+
+/* Fields */
+
+.e-d62eba0 > .holder > .rows > .row > .fields
+{
+	display: flex;
+	flex: 1;
+	gap: var(--ot-spacing-s);
+	min-width: 0;
+}
+
+.e-d62eba0 > .holder > .rows > .row > .fields > .column
+{
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	flex: 1;
+	min-width: 0;
+}
+
+.e-d62eba0 > .holder > .rows > .row > .fields > .column > .label
+{
+	font-size: var(--ot-size-s);
+	font-weight: 500;
+	color: var(--ot-text-2);
+	line-height: 1;
+}
+
+.e-d62eba0 > .holder > .rows:not(:first-child) > .row > .fields > .column > .label
+{
+	display: none;
+}
+
+.e-d62eba0 > .holder > .rows > .row:not(:first-child) > .fields > .column > .label
+{
+	display: none;
+}
+
+.e-d62eba0 > .holder > .rows > .row > .fields > .column > .field
+{
+	flex: 1;
+	min-width: 0;
+}
+
+/* Actions */
+
+.e-d62eba0 > .holder > .rows > .row > .actions
+{
+	position: absolute;
+	top: -8px;
+	right: -8px;
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	padding: 2px;
+	background: var(--ot-bg-2);
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: var(--ot-radius-s);
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 0.15s ease;
+}
+
+.e-d62eba0 > .holder > .rows > .row:hover > .actions
+{
+	opacity: 1;
+	pointer-events: auto;
+}
+
+.e-d62eba0 > .holder > .rows > .row > .actions > .action
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+	font-size: 14px;
+	color: var(--ot-text-2);
+	opacity: 0.5;
+	border-radius: var(--ot-radius-s);
+	cursor: pointer;
+	transition: opacity 0.15s ease, background 0.15s ease;
+}
+
+.e-d62eba0 > .holder > .rows > .row > .actions > .action:hover
+{
+	opacity: 1;
+	background: var(--ot-bg-3);
+}
+
+.e-d62eba0 > .holder > .rows > .row > .actions > .action.remove:hover
+{
+	color: var(--ot-red);
+	background: var(--ot-red-opacity);
+}
+
+/* Empty */
+
+.e-d62eba0 > .holder > .empty
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--ot-spacing-m);
+	border: 1px dashed var(--ot-bg-2-border);
+	border-radius: var(--ot-radius-m);
+}
+
+.e-d62eba0 > .holder > .empty > span
+{
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+	opacity: 0.5;
+}
+
+/* Footer */
+
+.e-d62eba0 > .holder > .footer
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+}
+
+/* Background variants */
+
+.e-d62eba0 > .holder.bg-1 > .rows > .row { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
+.e-d62eba0 > .holder.bg-2 > .rows > .row { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
+.e-d62eba0 > .holder.bg-3 > .rows > .row { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
+.e-d62eba0 > .holder.bg-4 > .rows > .row { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }
+
+.e-d62eba0 > .holder.bg-1 > .rows > .row:hover { border-color: var(--ot-bg-2-border); }
+.e-d62eba0 > .holder.bg-2 > .rows > .row:hover { border-color: var(--ot-bg-3-border); }
+.e-d62eba0 > .holder.bg-3 > .rows > .row:hover { border-color: var(--ot-bg-4-border); }
+.e-d62eba0 > .holder.bg-4 > .rows > .row:hover { border-color: var(--ot-bg-4-border); }
+
+/* Border variant */
+
+.e-d62eba0 > .holder.border { border: 1px solid var(--ot-bg-2-border); padding: var(--ot-spacing-s); }
+
+/* Size variants */
+
+.e-d62eba0 > .holder.size-s > .rows > .row { padding: 4px; }
+.e-d62eba0 > .holder.size-s > .rows > .row > .fields { gap: 4px; }
+
+.e-d62eba0 > .holder.size-m > .rows > .row { padding: var(--ot-spacing-s); }
+.e-d62eba0 > .holder.size-m > .rows > .row > .fields { gap: var(--ot-spacing-s); }
+
+.e-d62eba0 > .holder.size-l > .rows > .row { padding: var(--ot-spacing-m); }
+.e-d62eba0 > .holder.size-l > .rows > .row > .fields { gap: var(--ot-spacing-m); }

package/addons/render/elements/front/items/self/core/repeater/repeater.js

@@ -0,0 +1,224 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'core-repeater',
+		icon: 'repeat',
+		name: 'Repeater',
+		description: 'Repeatable rows of fields with add, remove, and reorder.',
+		category: 'Core',
+		author: 'OneType',
+		config: {
+			value: {
+				type: 'array',
+				value: [],
+				each: {
+					type: 'object'
+				}
+			},
+			fields: {
+				type: 'array',
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						key: { type: 'string', value: '' },
+						label: { type: 'string', value: '' },
+						element: { type: 'string', value: '' },
+						properties: { type: 'object', value: {} },
+						default: { type: 'string', value: '' }
+					}
+				}
+			},
+			add: {
+				type: 'string',
+				value: 'Add'
+			},
+			save: {
+				type: 'string',
+				value: ''
+			},
+			max: {
+				type: 'number',
+				value: 0
+			},
+			disabled: {
+				type: 'boolean',
+				value: false
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-2', 'size-m'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
+			},
+			_change: {
+				type: 'function'
+			},
+			_save: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			// Helpers
+
+			this.defaults = () =>
+			{
+				const row = {};
+
+				this.fields.forEach((field) =>
+				{
+					row[field.key] = field.default !== undefined ? field.default : '';
+				});
+
+				return row;
+			};
+
+			this.allowed = () =>
+			{
+				if (this.disabled)
+				{
+					return false;
+				}
+
+				if (this.max > 0 && this.value.length >= this.max)
+				{
+					return false;
+				}
+
+				return true;
+			};
+
+			this.emit = () =>
+			{
+				if (this._change)
+				{
+					this._change({ value: this.value });
+				}
+			};
+
+			// Actions
+
+			this.append = () =>
+			{
+				if (!this.allowed())
+				{
+					return;
+				}
+
+				this.value.push(this.defaults());
+				this.Update();
+				this.emit();
+			};
+
+			this.remove = (index) =>
+			{
+				if (this.disabled)
+				{
+					return;
+				}
+
+				this.value.splice(index, 1);
+				this.Update();
+				this.emit();
+			};
+
+			this.up = (index) =>
+			{
+				if (index === 0)
+				{
+					return;
+				}
+
+				const row = this.value.splice(index, 1)[0];
+
+				this.value.splice(index - 1, 0, row);
+				this.Update();
+				this.emit();
+			};
+
+			this.down = (index) =>
+			{
+				if (index >= this.value.length - 1)
+				{
+					return;
+				}
+
+				const row = this.value.splice(index, 1)[0];
+
+				this.value.splice(index + 1, 0, row);
+				this.Update();
+				this.emit();
+			};
+
+			this.submit = () =>
+			{
+				if (this._save)
+				{
+					this._save({ value: this.value });
+				}
+			};
+
+			// Field change
+
+			this.change = (index, key, data) =>
+			{
+				this.value[index][key] = data.value;
+				this.emit();
+			};
+
+			// Build field elements
+
+			const columns = this.fields.map((field) =>
+			{
+				const tag = 'e-' + field.element;
+				const props = field.properties || {};
+
+				let attrs = '';
+
+				Object.keys(props).forEach((key) =>
+				{
+					const val = props[key];
+
+					if (typeof val === 'string')
+					{
+						attrs += ` ${key}="${val}"`;
+					}
+					else
+					{
+						attrs += ` :${key}='${JSON.stringify(val)}'`;
+					}
+				});
+
+				const label = field.label
+					? `<span class="label">${field.label}</span>`
+					: '';
+
+				return `<div class="column">${label}<${tag} #class="field" :value="row['${field.key}']" :_change="(data) => change(row_index, '${field.key}', data)"${attrs}></${tag}></div>`;
+			}).join('');
+
+			return `
+				<div :class="'holder ' + variant.join(' ')">
+					<div ot-if="value.length" class="rows">
+						<div ot-for="row, row_index in value" class="row">
+							<div class="fields">
+								${columns}
+							</div>
+							<div ot-if="!disabled" class="actions">
+								<i ot-if="row_index > 0" class="action" ot-click="() => up(row_index)">arrow_upward</i>
+								<i ot-if="row_index < value.length - 1" class="action" ot-click="() => down(row_index)">arrow_downward</i>
+								<i class="action remove" ot-click="() => remove(row_index)">close</i>
+							</div>
+						</div>
+					</div>
+					<div ot-if="!value.length" class="empty">
+						<span>No items</span>
+					</div>
+					<div class="footer">
+						<e-form-button ot-if="allowed()" :text="add" icon="add" :_click="append" :variant="['bg-2', 'border', 'size-s']"></e-form-button>
+						<e-form-button ot-if="save" :text="save" :_click="submit" :variant="['brand', 'size-s']"></e-form-button>
+					</div>
+				</div>
+			`;
+		}
+	});
+});