@onetype/framework 2.0.42 → 2.0.43

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

package/{lib/items/elements → addons/render/elements/front/items/self}/form/button/button.js

@@ -61,13 +61,13 @@ onetype.AddonReady('elements', (elements) =>
 		},
 		render: function()
 		{
-			this.handle = (e) =>
+			this.handle = (event) =>
 			{
 				if (this.disabled || this.loading) return;
 
 				if (this._click)
 				{
-					this._click(e);
+					this._click({ event });
 				}
 			};
 

package/{lib/items/elements → addons/render/elements/front/items/self}/form/checkbox/checkbox.js

@@ -17,10 +17,6 @@ onetype.AddonReady('elements', (elements) =>
 				value: ''
 			},
 			value: {
-				type: 'string',
-				value: ''
-			},
-			checked: {
 				type: 'boolean',
 				value: false
 			},
@@ -42,16 +38,33 @@ onetype.AddonReady('elements', (elements) =>
 		},
 		render: function()
 		{
+			this.handle = ({ event }) =>
+			{
+				this.value = event.target.checked;
+
+				if (this._change)
+				{
+					this._change({ event, value: this.value });
+				}
+			};
+
+			this.click = ({ event }) =>
+			{
+				if (this._click)
+				{
+					this._click({ event, value: this.value });
+				}
+			};
+
 			return `
 				<label :class="'holder ' + variant.join(' ')">
 					<input
 						type="checkbox"
 						:name="name"
-						:value="value"
-						:checked="checked"
+						:checked="value"
 						:disabled="disabled"
-						ot-change="_change"
-						ot-click="_click"
+						ot-change="handle"
+						ot-click="click"
 					/>
 					<span class="mark"></span>
 					<span ot-if="label" class="label">{{ label }}</span>

package/{lib/items/elements → addons/render/elements/front/items/self}/form/color/color.css

@@ -4,6 +4,7 @@
 {
 	display: flex;
 	width: 100%;
+	min-width: 0;
 }
 
 /* Holder */
@@ -89,6 +90,33 @@
 	cursor: not-allowed;
 }
 
+/* Clear button */
+
+.e-21311850 > .holder > .clear
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	padding: 0;
+	border: none;
+	background: transparent;
+	color: var(--ot-text-3);
+	cursor: pointer;
+	transition: color 0.15s ease;
+	outline: none;
+}
+
+.e-21311850 > .holder > .clear:hover
+{
+	color: var(--ot-text-1);
+}
+
+.e-21311850 > .holder > .clear > i
+{
+	font-size: 14px;
+}
+
 /* Background variants */
 
 .e-21311850 > .holder.bg-1 { background: var(--ot-bg-1); }

package/{lib/items/elements → addons/render/elements/front/items/self}/form/color/color.js

@@ -18,7 +18,7 @@ onetype.AddonReady('elements', (elements) =>
 			},
 			placeholder: {
 				type: 'string',
-				value: '#000000'
+				value: 'transparent'
 			},
 			disabled: {
 				type: 'boolean',
@@ -29,28 +29,38 @@ onetype.AddonReady('elements', (elements) =>
 				value: ['bg-2', 'border', 'size-m'],
 				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'transparent', 'border', 'size-s', 'size-m', 'size-l']
 			},
+			_input: {
+				type: 'function'
+			},
 			_change: {
 				type: 'function'
 			}
 		},
 		render: function()
 		{
-			this.pick = (event, ctx) =>
+			this.pick = ({ event, value }) =>
 			{
-				const hex = ctx.value;
+				this.value = value;
 
-				this.value = hex;
-				this.Update();
+				if (this._input)
+				{
+					this._input({ event, value });
+				}
+			};
+
+			this.commit = ({ event, value }) =>
+			{
+				this.value = value;
 
 				if (this._change)
 				{
-					this._change(hex);
+					this._change({ event, value });
 				}
 			};
 
-			this.input = (event, ctx) =>
+			this.input = ({ event, value }) =>
 			{
-				let hex = ctx.value.trim();
+				let hex = value.trim();
 
 				if (hex && hex.charAt(0) !== '#')
 				{
@@ -58,15 +68,14 @@ onetype.AddonReady('elements', (elements) =>
 				}
 
 				this.value = hex;
-				this.Update();
 
 				if (this._change)
 				{
-					this._change(hex);
+					this._change({ event, value: hex });
 				}
 			};
 
-			this.open = (event) =>
+			this.open = ({ event }) =>
 			{
 				if (this.disabled)
 				{
@@ -76,11 +85,21 @@ onetype.AddonReady('elements', (elements) =>
 				event.target.closest('.holder').querySelector('.native').click();
 			};
 
+			this.clear = () =>
+			{
+				this.value = '';
+
+				if (this._change)
+				{
+					this._change({ event: null, value: '' });
+				}
+			};
+
 			return `
 				<div :class="'holder ' + variant.join(' ')">
 					<input type="hidden" :name="name" :value="value" />
-					<button class="swatch" :style="'background: ' + value" ot-click="open" :disabled="disabled">
-						<input class="native" type="color" :value="value" ot-input="pick" tabindex="-1" />
+					<button class="swatch" :style="'background: ' + (value || 'transparent')" ot-click="open" :disabled="disabled">
+						<input class="native" type="color" :value="value" ot-input="pick" ot-change="commit" tabindex="-1" />
 					</button>
 					<input
 						class="input"
@@ -93,6 +112,9 @@ onetype.AddonReady('elements', (elements) =>
 						spellcheck="false"
 						ot-change="input"
 					/>
+					<button ot-if="value && !disabled" class="clear" ot-click.stop="clear">
+						<i>close</i>
+					</button>
 				</div>
 			`;
 		}

package/{lib/items/elements → addons/render/elements/front/items/self}/form/date/date.js

@@ -39,14 +39,13 @@ onetype.AddonReady('elements', (elements) =>
 		},
 		render: function()
 		{
-			this.handle = (event, ctx) =>
+			this.handle = ({ event, value }) =>
 			{
-				this.value = ctx.value;
-				this.Update();
+				this.value = value;
 
 				if (this._change)
 				{
-					this._change(ctx.value);
+					this._change({ event, value });
 				}
 			};
 

package/{lib/items/elements → addons/render/elements/front/items/self}/form/input/input.js

@@ -63,6 +63,42 @@ onetype.AddonReady('elements', (elements) =>
 		},
 		render: function()
 		{
+			this.input = ({ event, value }) =>
+			{
+				this.value = value;
+
+				if (this._input)
+				{
+					this._input({ event, value });
+				}
+			};
+
+			this.change = ({ event, value }) =>
+			{
+				this.value = value;
+
+				if (this._change)
+				{
+					this._change({ event, value });
+				}
+			};
+
+			this.focus = ({ event, value }) =>
+			{
+				if (this._focus)
+				{
+					this._focus({ event, value });
+				}
+			};
+
+			this.blur = ({ event, value }) =>
+			{
+				if (this._blur)
+				{
+					this._blur({ event, value });
+				}
+			};
+
 			return `
 				<div :class="'holder ' + variant.join(' ')">
 					<i ot-if="icon" class="icon">{{ icon }}</i>
@@ -75,10 +111,10 @@ onetype.AddonReady('elements', (elements) =>
 						:disabled="disabled"
 						:readonly="readonly"
 						autocomplete="off"
-						ot-input="_input"
-						ot-change="_change"
-						ot-focus="_focus"
-						ot-blur="_blur"
+						ot-input="input"
+						ot-change="change"
+						ot-focus="focus"
+						ot-blur="blur"
 					/>
 					<i ot-if="iconRight" class="icon">{{ iconRight }}</i>
 				</div>

package/{lib/items/elements → addons/render/elements/front/items/self}/form/radio/radio.js

@@ -16,11 +16,11 @@ onetype.AddonReady('elements', (elements) =>
 				type: 'string',
 				value: ''
 			},
-			value: {
+			option: {
 				type: 'string',
 				value: ''
 			},
-			checked: {
+			value: {
 				type: 'boolean',
 				value: false
 			},
@@ -42,16 +42,34 @@ onetype.AddonReady('elements', (elements) =>
 		},
 		render: function()
 		{
+			this.handle = ({ event }) =>
+			{
+				this.value = event.target.checked;
+
+				if (this._change)
+				{
+					this._change({ event, value: this.value });
+				}
+			};
+
+			this.click = ({ event }) =>
+			{
+				if (this._click)
+				{
+					this._click({ event, value: this.value });
+				}
+			};
+
 			return `
 				<label :class="'holder ' + variant.join(' ')">
 					<input
 						type="radio"
 						:name="name"
-						:value="value"
-						:checked="checked"
+						:value="option"
+						:checked="value"
 						:disabled="disabled"
-						ot-change="_change"
-						ot-click="_click"
+						ot-change="handle"
+						ot-click="click"
 					/>
 					<span class="mark"></span>
 					<span ot-if="label" class="label">{{ label }}</span>

package/{lib/items/elements → addons/render/elements/front/items/self}/form/rating/rating.js

@@ -52,9 +52,10 @@ onetype.AddonReady('elements', (elements) =>
 			{
 				if (this.readonly) return;
 				this.value = index + 1;
+
 				if (this._change)
 				{
-					this._change(this.value);
+					this._change({ value: this.value });
 				}
 			};
 

package/{lib/items/elements → addons/render/elements/front/items/self}/form/select/select.js

@@ -88,7 +88,6 @@ onetype.AddonReady('elements', (elements) =>
 				this.query = '';
 				window.removeEventListener('scroll', this.handleScroll, true);
 				window.removeEventListener('resize', this.close);
-				this.Update();
 			};
 
 			this.toggle = (event) =>
@@ -112,8 +111,6 @@ onetype.AddonReady('elements', (elements) =>
 
 				window.addEventListener('scroll', this.handleScroll, true);
 				window.addEventListener('resize', this.close);
-
-				this.Update();
 			};
 
 			this.select = (option) =>
@@ -123,14 +120,13 @@ onetype.AddonReady('elements', (elements) =>
 
 				if (this._change)
 				{
-					this._change(this.value);
+					this._change({ value: this.value });
 				}
 			};
 
-			this.search = (e, ctx) =>
+			this.search = ({ value }) =>
 			{
-				this.query = ctx.value;
-				this.Update();
+				this.query = value;
 			};
 
 			this.dismiss = () =>