@onetype/framework 2.0.53 → 2.0.54

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

@@ -13,168 +13,123 @@
 	display: flex;
 	flex-direction: column;
 	width: 100%;
-	border-radius: var(--ot-radius-m);
-	border: 1px solid transparent;
+	gap: var(--ot-spacing-l);
 }
 
-/* Section */
-
-.e-7d599f7d > .holder > .section
+.e-7d599f7d > .holder.has-steps
 {
-	display: flex;
-	flex-direction: column;
+	flex-direction: row;
+	align-items: flex-start;
 	gap: var(--ot-spacing-m);
-	padding: var(--ot-spacing-m) 0;
-}
-
-.e-7d599f7d > .holder > .section + .section
-{
-	border-top: 1px solid var(--ot-bg-2-border);
-}
-
-.e-7d599f7d > .holder > .section:first-child
-{
-	padding-top: 0 !important;
-}
-
-.e-7d599f7d > .holder > .section:last-child
-{
-	padding-bottom: 0 !important;
-}
-
-/* Header */
-
-.e-7d599f7d > .holder > .section > .header
-{
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	cursor: pointer;
-	user-select: none;
-}
-
-.e-7d599f7d > .holder > .section > .header > .title
-{
-	font-size: var(--ot-size-s);
-	font-weight: 700;
-	color: var(--ot-text-2);
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
 }
 
-.e-7d599f7d > .holder > .section > .header > .chevron
-{
-	font-size: 18px;
-	color: var(--ot-text-2);
-	opacity: 0.5;
-	transition: transform 0.2s ease;
-}
+/* Steps sidebar */
 
-.e-7d599f7d > .holder > .section > .header > .chevron.collapsed
+.e-7d599f7d > .holder > .steps
 {
-	transform: rotate(-90deg);
+	flex-shrink: 0;
+	width: 260px;
+	position: sticky;
+	top: var(--ot-spacing-m);
 }
 
-/* Fields */
+/* Main column */
 
-.e-7d599f7d > .holder > .section > .fields
+.e-7d599f7d > .holder > .main
 {
 	display: flex;
 	flex-direction: column;
-	gap: var(--ot-spacing-m);
+	flex: 1;
+	min-width: 0;
+	gap: var(--ot-spacing-l);
 }
 
-/* Field — top */
+/* Sections stack */
 
-.e-7d599f7d > .holder > .section > .fields > .field.top
+.e-7d599f7d > .holder > .main > .sections
 {
 	display: flex;
 	flex-direction: column;
-	gap: 6px;
+	gap: var(--ot-spacing-l);
 }
 
-.e-7d599f7d > .holder > .section > .fields > .field.top > .info
+.e-7d599f7d > .holder > .main > .sections > .step-panel
 {
 	display: flex;
 	flex-direction: column;
-	gap: 2px;
+	gap: var(--ot-spacing-l);
 }
 
-/* Field — left */
+/* Grid of fields inside a section */
 
-.e-7d599f7d > .holder > .section > .fields > .field.left
+.e-7d599f7d .grid
 {
-	display: flex;
-	align-items: center;
+	display: grid;
 	gap: var(--ot-spacing-m);
-}
-
-.e-7d599f7d > .holder > .section > .fields > .field.left > .info
-{
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	gap: 2px;
-	min-width: 0;
-}
-
-.e-7d599f7d > .holder > .section > .fields > .field.left > .control
-{
-	flex: 2;
-	min-width: 0;
-}
-
-/* Label */
-
-.e-7d599f7d > .holder .field > .label,
-.e-7d599f7d > .holder .field > .info > .label
-{
-	font-size: var(--ot-size-s);
-	font-weight: 600;
-	color: var(--ot-text-1);
-}
-
-/* Description */
-
-.e-7d599f7d > .holder .field > .description,
-.e-7d599f7d > .holder .field > .info > .description
-{
-	font-size: var(--ot-size-s);
-	color: var(--ot-text-2);
-	line-height: 1.4;
+	width: 100%;
 }
 
 /* Footer */
 
-.e-7d599f7d > .holder > .footer
+.e-7d599f7d > .holder > .main > .footer
 {
 	display: flex;
 	justify-content: flex-end;
-	padding-top: var(--ot-spacing-m);
-	border-top: 1px solid var(--ot-bg-2-border);
 }
 
 /* Background variants */
 
-.e-7d599f7d > .holder.bg-1 { background: var(--ot-bg-1); padding: var(--ot-spacing-m); }
-.e-7d599f7d > .holder.bg-2 { background: var(--ot-bg-2); padding: var(--ot-spacing-m); }
-.e-7d599f7d > .holder.bg-3 { background: var(--ot-bg-3); padding: var(--ot-spacing-m); }
-.e-7d599f7d > .holder.bg-4 { background: var(--ot-bg-4); padding: var(--ot-spacing-m); }
+.e-7d599f7d > .holder.bg-1 { background: var(--ot-bg-1); padding: var(--ot-spacing-l); border-radius: var(--ot-radius-m); }
+.e-7d599f7d > .holder.bg-2 { background: var(--ot-bg-2); padding: var(--ot-spacing-l); border-radius: var(--ot-radius-m); }
+.e-7d599f7d > .holder.bg-3 { background: var(--ot-bg-3); padding: var(--ot-spacing-l); border-radius: var(--ot-radius-m); }
+.e-7d599f7d > .holder.bg-4 { background: var(--ot-bg-4); padding: var(--ot-spacing-l); border-radius: var(--ot-radius-m); }
 
 /* Border variant */
 
-.e-7d599f7d > .holder.border { border: 1px solid var(--ot-bg-2-border); padding: var(--ot-spacing-m); }
+.e-7d599f7d > .holder.border
+{
+	border: 1px solid var(--ot-bg-2-border);
+	padding: var(--ot-spacing-l);
+	border-radius: var(--ot-radius-m);
+}
 
 /* Size variants */
 
-.e-7d599f7d > .holder.size-s > .section { gap: var(--ot-spacing-s); padding: var(--ot-spacing-s) 0; }
-.e-7d599f7d > .holder.size-s > .section > .fields { gap: var(--ot-spacing-s); }
-.e-7d599f7d > .holder.size-s > .footer { padding-top: var(--ot-spacing-s); }
+.e-7d599f7d > .holder.size-s { gap: var(--ot-spacing-m); }
+.e-7d599f7d > .holder.size-s > .main { gap: var(--ot-spacing-m); }
+.e-7d599f7d > .holder.size-s > .main > .sections { gap: var(--ot-spacing-m); }
+.e-7d599f7d > .holder.size-s > .main > .sections > .step-panel { gap: var(--ot-spacing-m); }
+.e-7d599f7d > .holder.size-s .grid { gap: var(--ot-spacing-s); }
+
+.e-7d599f7d > .holder.size-m { gap: var(--ot-spacing-l); }
+.e-7d599f7d > .holder.size-m > .main { gap: var(--ot-spacing-l); }
+.e-7d599f7d > .holder.size-m > .main > .sections { gap: var(--ot-spacing-l); }
+.e-7d599f7d > .holder.size-m > .main > .sections > .step-panel { gap: var(--ot-spacing-l); }
+.e-7d599f7d > .holder.size-m .grid { gap: var(--ot-spacing-m); }
 
-.e-7d599f7d > .holder.size-m > .section { gap: var(--ot-spacing-m); padding: var(--ot-spacing-m) 0; }
-.e-7d599f7d > .holder.size-m > .section > .fields { gap: var(--ot-spacing-m); }
-.e-7d599f7d > .holder.size-m > .footer { padding-top: var(--ot-spacing-m); }
+.e-7d599f7d > .holder.size-l { gap: var(--ot-spacing-l); }
+.e-7d599f7d > .holder.size-l > .main { gap: var(--ot-spacing-l); }
+.e-7d599f7d > .holder.size-l > .main > .sections { gap: var(--ot-spacing-l); }
+.e-7d599f7d > .holder.size-l > .main > .sections > .step-panel { gap: var(--ot-spacing-l); }
+.e-7d599f7d > .holder.size-l .grid { gap: var(--ot-spacing-l); }
 
-.e-7d599f7d > .holder.size-l > .section { gap: var(--ot-spacing-l); padding: var(--ot-spacing-l) 0; }
-.e-7d599f7d > .holder.size-l > .section > .fields { gap: var(--ot-spacing-l); }
-.e-7d599f7d > .holder.size-l > .footer { padding-top: var(--ot-spacing-l); }
+/* Responsive — collapse steps sidebar and grid on small screens */
+
+@media (max-width: 900px)
+{
+	.e-7d599f7d > .holder.has-steps
+	{
+		flex-direction: column;
+	}
+
+	.e-7d599f7d > .holder > .steps
+	{
+		width: 100%;
+		position: static;
+	}
+
+	.e-7d599f7d .grid
+	{
+		grid-template-columns: 1fr !important;
+	}
+}

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

@@ -4,7 +4,7 @@ onetype.AddonReady('elements', (elements) =>
 		id: 'core-builder',
 		icon: 'dashboard_customize',
 		name: 'Builder',
-		description: 'Config-driven form builder with sections, conditions, and any element.',
+		description: 'Config-driven form builder with steps, sections, grid columns, conditions and reusable form-section / form-field elements.',
 		category: 'Core',
 		author: 'OneType',
 		config: {
@@ -12,46 +12,41 @@ onetype.AddonReady('elements', (elements) =>
 				type: 'object',
 				value: {}
 			},
-			sections: {
+			steps: {
 				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' }
-								}
-							}
-						}
+						id: { type: 'string' },
+						label: { type: 'string' },
+						description: { type: 'string' },
+						icon: { type: 'string' },
+						sections: { type: 'array', value: [] }
 					}
 				}
 			},
+			sections: {
+				type: 'array',
+				value: [],
+				each: {
+					type: 'object'
+				}
+			},
 			save: {
-				type: 'string',
-				value: ''
+				type: 'string'
+			},
+			saveVariant: {
+				type: 'array',
+				value: ['brand', 'size-m']
 			},
 			disabled: {
-				type: 'boolean',
-				value: false
+				type: 'boolean'
 			},
 			variant: {
 				type: 'array',
 				value: ['size-m'],
-				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'clean', 'size-s', 'size-m', 'size-l']
 			},
 			_input: {
 				type: 'function'
@@ -65,23 +60,73 @@ onetype.AddonReady('elements', (elements) =>
 		},
 		render: function()
 		{
-			// State
+			// Step state
+
+			this.hasSteps = this.steps.length > 0;
+			this.activeStep = this.hasSteps ? this.steps[0].id : '';
 
-			this.collapsed = {};
+			// Current sections depend on step or flat sections
 
-			this.sections.forEach((section, index) =>
+			this.currentSections = () =>
 			{
-				if (section.collapsed)
+				if(this.hasSteps)
+				{
+					const step = this.steps.find(s => s.id === this.activeStep) || this.steps[0];
+					return step.sections || [];
+				}
+
+				return this.sections;
+			};
+
+			// Detect conditions — if any exist we re-render on change
+
+			this.hasConditions = (() =>
+			{
+				const scan = (sections) =>
+				{
+					for(const section of sections)
+					{
+						if(section.condition)
+						{
+							return true;
+						}
+
+						if(section.fields)
+						{
+							for(const field of section.fields)
+							{
+								if(field.condition)
+								{
+									return true;
+								}
+							}
+						}
+					}
+
+					return false;
+				};
+
+				if(this.hasSteps)
 				{
-					this.collapsed[index] = true;
+					for(const step of this.steps)
+					{
+						if(scan(step.sections || []))
+						{
+							return true;
+						}
+					}
+
+					return false;
 				}
-			});
+
+				return scan(this.sections);
+			})();
 
 			// Helpers
 
 			this.visible = (condition) =>
 			{
-				if (!condition)
+				if(!condition)
 				{
 					return true;
 				}
@@ -91,7 +136,7 @@ onetype.AddonReady('elements', (elements) =>
 
 			this.val = (key) =>
 			{
-				if (!this.values)
+				if(!this.values)
 				{
 					return null;
 				}
@@ -101,18 +146,21 @@ onetype.AddonReady('elements', (elements) =>
 
 			// Actions
 
-			this.toggle = (index) =>
+			this.selectStep = ({ value }) =>
 			{
-				this.collapsed[index] = !this.collapsed[index];
-				this.Update();
+				this.activeStep = value;
 			};
 
 			this.input = (key, data) =>
 			{
 				this.values[key] = data.value;
-				this.Update();
 
-				if (this._input)
+				if(this.hasConditions)
+				{
+					this.Update();
+				}
+
+				if(this._input)
 				{
 					this._input({ key, value: data.value });
 				}
@@ -121,9 +169,13 @@ onetype.AddonReady('elements', (elements) =>
 			this.change = (key, data) =>
 			{
 				this.values[key] = data.value;
-				this.Update();
 
-				if (this._change)
+				if(this.hasConditions)
+				{
+					this.Update();
+				}
+
+				if(this._change)
 				{
 					this._change({ key, value: data.value });
 				}
@@ -131,124 +183,157 @@ onetype.AddonReady('elements', (elements) =>
 
 			this.submit = () =>
 			{
-				if (this._save)
+				if(this._save)
 				{
 					this._save({ value: this.values });
 				}
 			};
 
-			// Build sections
+			// Escape attr value safely
 
-			const html = this.sections.map((section, sectionIndex) =>
+			const escape = (value) =>
 			{
-				// Section condition
-
-				const sectionCondition = section.condition
-					? `ot-if="visible(sections[${sectionIndex}].condition)"`
-					: '';
+				return String(value).replace(/&/g, '&amp;').replace(/'/g, '&#39;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+			};
 
-				// Section header
+			// Build field element tag with properties
 
-				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>
-					`
-					: '';
+			const buildField = (field, sectionIndex, fieldIndex, scope) =>
+			{
+				const tag = 'e-' + field.element;
+				const props = field.properties || {};
+				const span = field.span || 1;
 
-				// Fields
+				let attrs = '';
 
-				const fields = section.fields.map((field, fieldIndex) =>
+				Object.keys(props).forEach((key) =>
 				{
-					const tag = 'e-' + field.element;
-					const props = field.properties || {};
-					const position = field.position || 'top';
-
-					// Build properties attributes
-
-					let attrs = '';
+					const value = props[key];
 
-					Object.keys(props).forEach((key) =>
+					if(typeof value === 'string')
+					{
+						attrs += ` ${key}="${escape(value)}"`;
+					}
+					else
 					{
-						const val = props[key];
+						attrs += ` :${key}='${escape(JSON.stringify(value))}'`;
+					}
+				});
+
+				const input = `
+					<${tag}
+						:value="val('${field.key}')"
+						:_input="(data) => input('${field.key}', data)"
+						:_change="(data) => change('${field.key}', data)"
+						${attrs}
+					></${tag}>
+				`;
 
-						if (typeof val === 'string')
-						{
-							attrs += ` ${key}="${val}"`;
-						}
-						else
-						{
-							attrs += ` :${key}='${JSON.stringify(val)}'`;
-						}
-					});
+				const fieldCondition = field.condition
+					? `ot-if="visible(${scope}[${sectionIndex}].fields[${fieldIndex}].condition)"`
+					: '';
 
-					// Element tag
+				const fieldVariant = field.variant ? JSON.stringify(field.variant) : JSON.stringify(['size-m']);
 
-					const element = `<${tag} :value="val('${field.key}')" :_input="(data) => input('${field.key}', data)" :_change="(data) => change('${field.key}', data)"${attrs}></${tag}>`;
+				return `
+					<e-form-field
+						${fieldCondition}
+						#class="field"
+						#style="grid-column: span ${span};"
+						label="${escape(field.label || '')}"
+						description="${escape(field.description || '')}"
+						hint="${escape(field.hint || '')}"
+						:required="${field.required ? 'true' : 'false'}"
+						orientation="${field.orientation || 'horizontal'}"
+						:variant='${escape(fieldVariant)}'
+					>
+						<div slot="input">
+							${input}
+						</div>
+					</e-form-field>
+				`;
+			};
 
-					// Label
+			// Build a single section
 
-					const label = field.label
-						? `<span class="label">{{ sections[${sectionIndex}].fields[${fieldIndex}].label }}</span>`
-						: '';
+			const buildSection = (section, sectionIndex, scope) =>
+			{
+				const columns = section.columns || 1;
+				const sectionFields = section.fields || [];
+				const fields = sectionFields.map((field, fieldIndex) => buildField(field, sectionIndex, fieldIndex, scope)).join('');
 
-					// Description
+				const sectionCondition = section.condition
+					? `ot-if="visible(${scope}[${sectionIndex}].condition)"`
+					: '';
 
-					const description = field.description
-						? `<span class="description">{{ sections[${sectionIndex}].fields[${fieldIndex}].description }}</span>`
-						: '';
+				const sectionVariant = section.variant ? JSON.stringify(section.variant) : JSON.stringify(['clean']);
 
-					// Field condition
+				return `
+					<e-form-section
+						${sectionCondition}
+						eyebrow="${escape(section.eyebrow || '')}"
+						icon="${escape(section.icon || '')}"
+						title="${escape(section.title || '')}"
+						description="${escape(section.description || '')}"
+						:collapsible="${section.collapsible ? 'true' : 'false'}"
+						:collapsed="${section.collapsed ? 'true' : 'false'}"
+						:variant='${escape(sectionVariant)}'
+					>
+						<div slot="content">
+							<div class="grid" style="grid-template-columns: repeat(${columns}, minmax(0, 1fr));">
+								${fields}
+							</div>
+						</div>
+					</e-form-section>
+				`;
+			};
 
-					const fieldCondition = field.condition
-						? `ot-if="visible(sections[${sectionIndex}].fields[${fieldIndex}].condition)"`
-						: '';
+			// Build all sections for current step (or flat)
 
-					// Position layout
+			let sectionsHtml = '';
 
-					if (position === 'left')
-					{
-						return `
-							<div class="field left" ${fieldCondition}>
-								<div class="info">
-									${label}
-									${description}
-								</div>
-								<div class="control">
-									${element}
-								</div>
-							</div>
-						`;
-					}
+			if(this.hasSteps)
+			{
+				sectionsHtml = this.steps.map((step, stepIndex) =>
+				{
+					const sections = (step.sections || []).map((section, sectionIndex) => buildSection(section, sectionIndex, `steps[${stepIndex}].sections`)).join('');
 
 					return `
-						<div class="field top" ${fieldCondition}>
-							<div class="info">
-								${label}
-								${description}
-							</div>
-							${element}
+						<div ot-if="activeStep === '${step.id}'" class="step-panel">
+							${sections}
 						</div>
 					`;
 				}).join('');
+			}
+			else
+			{
+				sectionsHtml = this.sections.map((section, sectionIndex) => buildSection(section, sectionIndex, 'sections')).join('');
+			}
 
-				return `
-					<div class="section" ${sectionCondition}>
-						${header}
-						<div ot-if="!collapsed[${sectionIndex}]" class="fields">
-							${fields}
+			return /* html */ `
+				<div :class="'holder ' + variant.join(' ') + (hasSteps ? ' has-steps' : '')">
+					<e-navigation-steps
+						ot-if="hasSteps"
+						#class="steps"
+						:items="steps"
+						:active="activeStep"
+						orientation="vertical"
+						:variant="['bg-1', 'border', 'connected', 'size-m']"
+						:_change="selectStep"
+					></e-navigation-steps>
+
+					<div class="main">
+						<div class="sections">
+							${sectionsHtml}
+						</div>
+						<div ot-if="save" class="footer">
+							<e-form-button
+								:text="save"
+								:_click="submit"
+								:disabled="disabled"
+								:variant="saveVariant"
+							></e-form-button>
 						</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>
 			`;