@onetype/framework 2.0.53 → 2.0.55

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

@@ -4,7 +4,7 @@ onetype.AddonReady('elements', (elements) =>
 		id: 'core-repeater',
 		icon: 'repeat',
 		name: 'Repeater',
-		description: 'Repeatable rows of fields with add, remove, and reorder.',
+		description: 'Premium repeatable rows with drag reorder, duplicate, numbered rows, orientation modes and rich empty state.',
 		category: 'Core',
 		author: 'OneType',
 		config: {
@@ -21,29 +21,58 @@ onetype.AddonReady('elements', (elements) =>
 				each: {
 					type: 'object',
 					config: {
-						key: { type: 'string', value: '' },
-						label: { type: 'string', value: '' },
-						element: { type: 'string', value: '' },
-						properties: { type: 'object', value: {} },
-						default: { type: 'string', value: '' }
+						key: { type: 'string' },
+						label: { type: 'string' },
+						description: { type: 'string' },
+						element: { type: 'string' },
+						properties: { type: 'object' },
+						default: { type: 'string' }
 					}
 				}
 			},
+			orientation: {
+				type: 'string',
+				value: 'horizontal',
+				options: ['horizontal', 'vertical']
+			},
 			add: {
 				type: 'string',
 				value: 'Add'
 			},
+			addPosition: {
+				type: 'string',
+				value: 'bottom',
+				options: ['top', 'bottom', 'both']
+			},
 			save: {
+				type: 'string'
+			},
+			empty: {
+				type: 'string',
+				value: 'No items yet'
+			},
+			emptyIcon: {
 				type: 'string',
-				value: ''
+				value: 'inbox'
+			},
+			min: {
+				type: 'number'
 			},
 			max: {
-				type: 'number',
-				value: 0
+				type: 'number'
 			},
-			disabled: {
+			draggable: {
 				type: 'boolean',
-				value: false
+				value: true
+			},
+			numbered: {
+				type: 'boolean'
+			},
+			duplicable: {
+				type: 'boolean'
+			},
+			disabled: {
+				type: 'boolean'
 			},
 			variant: {
 				type: 'array',
@@ -59,8 +88,6 @@ onetype.AddonReady('elements', (elements) =>
 		},
 		render: function()
 		{
-			// Helpers
-
 			this.defaults = () =>
 			{
 				const row = {};
@@ -73,14 +100,29 @@ onetype.AddonReady('elements', (elements) =>
 				return row;
 			};
 
-			this.allowed = () =>
+			this.canAdd = () =>
+			{
+				if(this.disabled)
+				{
+					return false;
+				}
+
+				if(this.max > 0 && this.value.length >= this.max)
+				{
+					return false;
+				}
+
+				return true;
+			};
+
+			this.canRemove = () =>
 			{
-				if (this.disabled)
+				if(this.disabled)
 				{
 					return false;
 				}
 
-				if (this.max > 0 && this.value.length >= this.max)
+				if(this.min > 0 && this.value.length <= this.min)
 				{
 					return false;
 				}
@@ -90,17 +132,15 @@ onetype.AddonReady('elements', (elements) =>
 
 			this.emit = () =>
 			{
-				if (this._change)
+				if(this._change)
 				{
 					this._change({ value: this.value });
 				}
 			};
 
-			// Actions
-
 			this.append = () =>
 			{
-				if (!this.allowed())
+				if(!this.canAdd())
 				{
 					return;
 				}
@@ -110,9 +150,21 @@ onetype.AddonReady('elements', (elements) =>
 				this.emit();
 			};
 
+			this.prepend = () =>
+			{
+				if(!this.canAdd())
+				{
+					return;
+				}
+
+				this.value.unshift(this.defaults());
+				this.Update();
+				this.emit();
+			};
+
 			this.remove = (index) =>
 			{
-				if (this.disabled)
+				if(!this.canRemove())
 				{
 					return;
 				}
@@ -122,15 +174,27 @@ onetype.AddonReady('elements', (elements) =>
 				this.emit();
 			};
 
+			this.duplicate = (index) =>
+			{
+				if(!this.canAdd())
+				{
+					return;
+				}
+
+				const copy = JSON.parse(JSON.stringify(this.value[index]));
+				this.value.splice(index + 1, 0, copy);
+				this.Update();
+				this.emit();
+			};
+
 			this.up = (index) =>
 			{
-				if (index === 0)
+				if(index === 0 || this.disabled)
 				{
 					return;
 				}
 
 				const row = this.value.splice(index, 1)[0];
-
 				this.value.splice(index - 1, 0, row);
 				this.Update();
 				this.emit();
@@ -138,13 +202,12 @@ onetype.AddonReady('elements', (elements) =>
 
 			this.down = (index) =>
 			{
-				if (index >= this.value.length - 1)
+				if(index >= this.value.length - 1 || this.disabled)
 				{
 					return;
 				}
 
 				const row = this.value.splice(index, 1)[0];
-
 				this.value.splice(index + 1, 0, row);
 				this.Update();
 				this.emit();
@@ -152,23 +215,21 @@ onetype.AddonReady('elements', (elements) =>
 
 			this.submit = () =>
 			{
-				if (this._save)
+				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
+			// Build field columns — each field is an element with two-way binding
 
-			const columns = this.fields.map((field) =>
+			const fieldTemplate = this.fields.map((field) =>
 			{
 				const tag = 'e-' + field.element;
 				const props = field.properties || {};
@@ -179,7 +240,7 @@ onetype.AddonReady('elements', (elements) =>
 				{
 					const val = props[key];
 
-					if (typeof val === 'string')
+					if(typeof val === 'string')
 					{
 						attrs += ` ${key}="${val}"`;
 					}
@@ -189,33 +250,119 @@ onetype.AddonReady('elements', (elements) =>
 					}
 				});
 
-				const label = field.label
-					? `<span class="label">${field.label}</span>`
+				const labelBlock = field.label
+					? `
+						<div class="field-info">
+							<span class="field-label">${field.label}</span>
+							${field.description ? `<span class="field-description">${field.description}</span>` : ''}
+						</div>
+					`
 					: '';
 
-				return `<div class="column">${label}<${tag} #class="field" :value="row['${field.key}']" :_change="(data) => change(row_index, '${field.key}', data)"${attrs}></${tag}></div>`;
+				return `
+					<div class="field">
+						${labelBlock}
+						<${tag} :value="row['${field.key}']" :_change="(data) => change(row_index, '${field.key}', data)"${attrs}></${tag}>
+					</div>
+				`;
 			}).join('');
 
-			return `
-				<div :class="'holder ' + variant.join(' ')">
+			return /* html */ `
+				<div :class="'holder ' + orientation + ' ' + variant.join(' ') + (disabled ? ' disabled' : '')">
+					<div ot-if="addPosition === 'top' || addPosition === 'both'" class="footer top">
+						<span ot-if="max" class="counter">{{ value.length }} / {{ max }}</span>
+						<span ot-if="!max" class="counter">{{ value.length }} items</span>
+						<e-form-button
+							ot-if="canAdd()"
+							:text="add"
+							icon="add"
+							:_click="prepend"
+							:variant="['bg-1', 'border', 'size-s']"
+						></e-form-button>
+					</div>
+
 					<div ot-if="value.length" class="rows">
 						<div ot-for="row, row_index in value" class="row">
+							<div ot-if="draggable && !disabled" class="reorder">
+								<button
+									type="button"
+									class="action"
+									:disabled="row_index === 0"
+									ot-click="() => up(row_index)"
+									:ot-tooltip="{ text: 'Move up', position: { x: 'center', y: 'top' } }"
+								>
+									<i>keyboard_arrow_up</i>
+								</button>
+								<button
+									type="button"
+									class="action"
+									:disabled="row_index === value.length - 1"
+									ot-click="() => down(row_index)"
+									:ot-tooltip="{ text: 'Move down', position: { x: 'center', y: 'top' } }"
+								>
+									<i>keyboard_arrow_down</i>
+								</button>
+							</div>
+
+							<div ot-if="numbered" class="number">{{ row_index + 1 }}</div>
+
 							<div class="fields">
-								${columns}
+								${fieldTemplate}
 							</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>
+								<button
+									ot-if="duplicable && canAdd()"
+									type="button"
+									class="action"
+									ot-click="() => duplicate(row_index)"
+									:ot-tooltip="{ text: 'Duplicate', position: { x: 'center', y: 'top' } }"
+								>
+									<i>content_copy</i>
+								</button>
+								<button
+									ot-if="canRemove()"
+									type="button"
+									class="action danger"
+									ot-click="() => remove(row_index)"
+									:ot-tooltip="{ text: 'Remove', position: { x: 'center', y: 'top' } }"
+								>
+									<i>close</i>
+								</button>
 							</div>
 						</div>
 					</div>
+
 					<div ot-if="!value.length" class="empty">
-						<span>No items</span>
+						<div class="empty-icon"><i>{{ emptyIcon }}</i></div>
+						<span class="empty-text">{{ empty }}</span>
+						<e-form-button
+							ot-if="!disabled && canAdd()"
+							:text="add"
+							icon="add"
+							:_click="append"
+							:variant="['brand', 'size-m']"
+						></e-form-button>
 					</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 ot-if="value.length && (addPosition === 'bottom' || addPosition === 'both')" class="footer bottom">
+						<span ot-if="max" class="counter">{{ value.length }} / {{ max }}</span>
+						<span ot-if="!max" class="counter">{{ value.length }} items</span>
+						<div class="footer-actions">
+							<e-form-button
+								ot-if="canAdd()"
+								:text="add"
+								icon="add"
+								:_click="append"
+								:variant="['bg-1', '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>
 				</div>
 			`;