@onetype/framework 2.0.41 → 2.0.43

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

@@ -0,0 +1,80 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'form-radio',
+		icon: 'radio_button_checked',
+		name: 'Radio',
+		description: 'Radio button with custom styling and group support.',
+		category: 'Form',
+		author: 'OneType',
+		config: {
+			label: {
+				type: 'string',
+				value: ''
+			},
+			name: {
+				type: 'string',
+				value: ''
+			},
+			option: {
+				type: 'string',
+				value: ''
+			},
+			value: {
+				type: 'boolean',
+				value: false
+			},
+			disabled: {
+				type: 'boolean',
+				value: false
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-1', 'size-m'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'transparent', 'border', 'size-s', 'size-m', 'size-l']
+			},
+			_change: {
+				type: 'function'
+			},
+			_click: {
+				type: 'function'
+			}
+		},
+		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="option"
+						:checked="value"
+						:disabled="disabled"
+						ot-change="handle"
+						ot-click="click"
+					/>
+					<span class="mark"></span>
+					<span ot-if="label" class="label">{{ label }}</span>
+				</label>
+			`;
+		}
+	});
+});

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

@@ -0,0 +1,57 @@
+/* Root */
+
+.e-13e502f0
+{
+	display: flex;
+}
+
+/* Holder */
+
+.e-13e502f0 > .holder
+{
+	display: inline-flex;
+	align-items: center;
+	gap: var(--ot-spacing-x);
+}
+
+/* Star */
+
+.e-13e502f0 > .holder > .star
+{
+	color: var(--ot-bg-3);
+	cursor: pointer;
+	transition: color 0.15s ease, transform 0.15s ease;
+	user-select: none;
+}
+
+.e-13e502f0 > .holder > .star:hover
+{
+	transform: scale(1.1);
+}
+
+/* Readonly */
+
+.e-13e502f0 > .holder.readonly > .star
+{
+	cursor: default;
+	pointer-events: none;
+}
+
+/* Color variants */
+
+.e-13e502f0 > .holder.brand > .star.filled { color: var(--ot-brand); }
+.e-13e502f0 > .holder.blue > .star.filled { color: var(--ot-blue); }
+.e-13e502f0 > .holder.red > .star.filled { color: var(--ot-red); }
+.e-13e502f0 > .holder.orange > .star.filled { color: var(--ot-orange); }
+.e-13e502f0 > .holder.green > .star.filled { color: var(--ot-green); }
+
+/* Size variants */
+
+.e-13e502f0 > .holder.size-s { gap: 2px; }
+.e-13e502f0 > .holder.size-s > .star { font-size: 16px; }
+
+.e-13e502f0 > .holder.size-m { gap: var(--ot-spacing-x); }
+.e-13e502f0 > .holder.size-m > .star { font-size: 24px; }
+
+.e-13e502f0 > .holder.size-l { gap: var(--ot-spacing-s); }
+.e-13e502f0 > .holder.size-l > .star { font-size: 32px; }

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

@@ -4,7 +4,7 @@ onetype.AddonReady('elements', (elements) =>
 		id: 'form-rating',
 		icon: 'star',
 		name: 'Rating',
-		description: 'Star rating input with interactive and readonly modes.',
+		description: 'Star rating with interactive and readonly modes.',
 		category: 'Form',
 		author: 'OneType',
 		config: {
@@ -25,7 +25,7 @@ onetype.AddonReady('elements', (elements) =>
 				value: ['brand', 'size-m'],
 				options: ['brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
 			},
-			onChange: {
+			_change: {
 				type: 'function'
 			}
 		},
@@ -33,54 +33,51 @@ onetype.AddonReady('elements', (elements) =>
 		{
 			this.hover = null;
 
-			this.getStars = () =>
+			this.stars = () =>
 			{
-				const stars = [];
+				const result = [];
 				for (let i = 0; i < this.max; i++)
 				{
-					stars.push(i);
+					result.push(i);
 				}
-				return stars;
+				return result;
 			};
 
-			this.isFilled = (index) =>
+			this.filled = (index) =>
 			{
 				return this.hover !== null ? index <= this.hover : index < this.value;
 			};
 
-			this.handleClick = (index) =>
+			this.select = (index) =>
 			{
 				if (this.readonly) return;
 				this.value = index + 1;
-				if (this.onChange)
+
+				if (this._change)
 				{
-					this.onChange(this.value);
+					this._change({ value: this.value });
 				}
 			};
 
-			this.handleMouseEnter = (index) =>
+			this.enter = (index) =>
 			{
 				if (this.readonly) return;
 				this.hover = index;
 			};
 
-			this.handleMouseLeave = () =>
+			this.leave = () =>
 			{
 				if (this.readonly) return;
 				this.hover = null;
 			};
 
 			return `
-				<div
-					class="holder"
-					:variant="variant.join(' ') + (readonly ? ' readonly' : '')"
-					ot-mouse-leave="handleMouseLeave"
-				>
+				<div :class="'holder ' + variant.join(' ') + (readonly ? ' readonly' : '')" ot-mouse-leave="leave">
 					<i
-						ot-for="index in getStars()"
-						:class="'star' + (isFilled(index) ? ' filled' : '')"
-						ot-click="() => handleClick(index)"
-						ot-mouse-enter="() => handleMouseEnter(index)"
+						ot-for="index in stars()"
+						:class="'star' + (filled(index) ? ' filled' : '')"
+						ot-click="() => select(index)"
+						ot-mouse-enter="() => enter(index)"
 					>star</i>
 				</div>
 			`;

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

@@ -0,0 +1,86 @@
+/* Root */
+
+.e-5c75a80e
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-5c75a80e > .holder
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-m);
+	width: 100%;
+}
+
+/* Header */
+
+.e-5c75a80e > .holder > .header
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-x);
+}
+
+.e-5c75a80e > .holder > .header > .title
+{
+	margin: 0;
+	font-size: var(--ot-size-l);
+	font-weight: 600;
+	color: var(--ot-text-1);
+	line-height: 1.3;
+}
+
+.e-5c75a80e > .holder > .header > .description
+{
+	margin: 0;
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-2);
+	line-height: 1.5;
+}
+
+/* Content */
+
+.e-5c75a80e > .holder > .content
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	border-radius: var(--ot-radius-m);
+	overflow: hidden;
+}
+
+.e-5c75a80e > .holder > .content > *
+{
+	width: 100%;
+}
+
+.e-5c75a80e > .holder > .content > * > *
+{
+	width: 100%;
+}
+
+/* Background variants */
+
+.e-5c75a80e > .holder.bg-1 > .content { background: var(--ot-bg-1); }
+.e-5c75a80e > .holder.bg-2 > .content { background: var(--ot-bg-2); }
+.e-5c75a80e > .holder.bg-3 > .content { background: var(--ot-bg-3); }
+.e-5c75a80e > .holder.bg-4 > .content { background: var(--ot-bg-4); }
+
+/* Border variant */
+
+.e-5c75a80e > .holder.border > .content { border: 1px solid var(--ot-bg-2-border); }
+.e-5c75a80e > .holder.bg-1.border > .content { border-color: var(--ot-bg-1-border); }
+.e-5c75a80e > .holder.bg-2.border > .content { border-color: var(--ot-bg-2-border); }
+.e-5c75a80e > .holder.bg-3.border > .content { border-color: var(--ot-bg-3-border); }
+.e-5c75a80e > .holder.bg-4.border > .content { border-color: var(--ot-bg-4-border); }
+
+/* Size variants */
+
+.e-5c75a80e > .holder.size-s > .header > .title { font-size: var(--ot-size-m); }
+.e-5c75a80e > .holder.size-s > .header > .description { font-size: var(--ot-size-s); }
+.e-5c75a80e > .holder.size-l > .header > .title { font-size: var(--ot-size-l); }
+.e-5c75a80e > .holder.size-l > .header > .description { font-size: var(--ot-size-m); }

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

@@ -10,7 +10,7 @@ onetype.AddonReady('elements', (elements) =>
 		config: {
 			title: {
 				type: 'string',
-				value: 'Section Title'
+				value: ''
 			},
 			description: {
 				type: 'string',
@@ -19,16 +19,16 @@ onetype.AddonReady('elements', (elements) =>
 			variant: {
 				type: 'array',
 				value: [],
-				options: ['border', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'size-s', 'size-m', 'size-l']
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
 			}
 		},
 		render: function()
 		{
 			return `
-				<div class="holder" :variant="variant.join(' ')">
+				<div :class="'holder ' + variant.join(' ')">
 					<div class="header">
-						<h3 ot-if="title">{{ title }}</h3>
-						<p ot-if="description">{{ description }}</p>
+						<h3 ot-if="title" class="title">{{ title }}</h3>
+						<p ot-if="description" class="description">{{ description }}</p>
 					</div>
 					<div class="content">
 						<slot name="content"></slot>

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

@@ -0,0 +1,186 @@
+/* Root */
+
+.e-15ce864f
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-15ce864f > .holder
+{
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	width: 100%;
+	border-radius: var(--ot-radius-m);
+	border: 1px solid transparent;
+	background: transparent;
+	transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+/* Trigger */
+
+.e-15ce864f > .holder > .trigger
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	padding: 0 var(--ot-spacing-m);
+	cursor: pointer;
+	user-select: none;
+}
+
+.e-15ce864f > .holder > .trigger > .icon
+{
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-2);
+	flex-shrink: 0;
+}
+
+.e-15ce864f > .holder > .trigger > .selected
+{
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-1);
+	flex: 1;
+}
+
+.e-15ce864f > .holder > .trigger > .placeholder
+{
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-2);
+	flex: 1;
+}
+
+.e-15ce864f > .holder > .trigger > .arrow
+{
+	font-size: var(--ot-size-l);
+	color: var(--ot-text-2);
+	flex-shrink: 0;
+	margin-left: auto;
+}
+
+/* Dropdown */
+
+.e-15ce864f > .holder > .dropdown
+{
+	position: fixed;
+	background: var(--ot-bg-3);
+	border: 1px solid var(--ot-bg-3-border);
+	border-radius: var(--ot-radius-m);
+	z-index: 1000;
+	overflow: hidden;
+}
+
+/* Search */
+
+.e-15ce864f > .holder > .dropdown > .search
+{
+	padding: var(--ot-spacing-s);
+	border-bottom: 1px solid var(--ot-bg-3-border);
+}
+
+.e-15ce864f > .holder > .dropdown > .search > input
+{
+	width: 100%;
+	padding: var(--ot-spacing-x) var(--ot-spacing-s);
+	border: 1px solid var(--ot-bg-4-border);
+	border-radius: var(--ot-radius-s);
+	background: var(--ot-bg-4);
+	color: var(--ot-text-1);
+	font-size: var(--ot-size-m);
+	font-family: inherit;
+	outline: none;
+}
+
+.e-15ce864f > .holder > .dropdown > .search > input::placeholder
+{
+	color: var(--ot-text-2);
+}
+
+.e-15ce864f > .holder > .dropdown > .search > input:focus
+{
+	border-color: var(--ot-brand);
+}
+
+/* List */
+
+.e-15ce864f > .holder > .dropdown > .list
+{
+	max-height: 200px;
+	overflow-y: auto;
+	padding: var(--ot-spacing-x) 0;
+}
+
+/* Option */
+
+.e-15ce864f > .holder > .dropdown > .list > .option
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-1);
+	cursor: pointer;
+	transition: background 0.15s ease;
+}
+
+.e-15ce864f > .holder > .dropdown > .list > .option:hover
+{
+	background: var(--ot-bg-3-hover);
+}
+
+.e-15ce864f > .holder > .dropdown > .list > .option.active
+{
+	color: var(--ot-brand);
+}
+
+.e-15ce864f > .holder > .dropdown > .list > .option > .icon
+{
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-2);
+	flex-shrink: 0;
+}
+
+.e-15ce864f > .holder > .dropdown > .list > .option.active > .icon
+{
+	color: var(--ot-brand);
+}
+
+/* Background variants */
+
+.e-15ce864f > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-15ce864f > .holder.bg-1:hover { background: var(--ot-bg-1-hover); }
+.e-15ce864f > .holder.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-15ce864f > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-15ce864f > .holder.bg-2:hover { background: var(--ot-bg-2-hover); }
+.e-15ce864f > .holder.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-15ce864f > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-15ce864f > .holder.bg-3:hover { background: var(--ot-bg-3-hover); }
+.e-15ce864f > .holder.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-15ce864f > .holder.bg-4 { background: var(--ot-bg-4); }
+.e-15ce864f > .holder.bg-4:hover { background: var(--ot-bg-4-hover); }
+.e-15ce864f > .holder.bg-4.border { border-color: var(--ot-bg-4-border); }
+
+/* Transparent variant */
+
+.e-15ce864f > .holder.transparent { background: transparent; }
+
+/* Border variant */
+
+.e-15ce864f > .holder.border { border: 1px solid var(--ot-bg-2-border); }
+
+/* Size variants */
+
+.e-15ce864f > .holder.size-s > .trigger { height: var(--ot-height-s); padding: 0 var(--ot-spacing-s); }
+.e-15ce864f > .holder.size-s > .trigger > .selected,
+.e-15ce864f > .holder.size-s > .trigger > .placeholder { font-size: var(--ot-size-s); }
+.e-15ce864f > .holder.size-s > .trigger > .arrow { font-size: var(--ot-size-m); }
+
+.e-15ce864f > .holder.size-m > .trigger { height: var(--ot-height-m); }
+
+.e-15ce864f > .holder.size-l > .trigger { height: var(--ot-height-l); padding: 0 var(--ot-spacing-l); }
+.e-15ce864f > .holder.size-l > .trigger > .selected,
+.e-15ce864f > .holder.size-l > .trigger > .placeholder { font-size: var(--ot-size-m); }

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

@@ -0,0 +1,161 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'form-select',
+		icon: 'arrow_drop_down',
+		name: 'Select',
+		description: 'Custom dropdown select with search support.',
+		category: 'Form',
+		author: 'OneType',
+		config: {
+			value: {
+				type: 'string',
+				value: ''
+			},
+			name: {
+				type: 'string',
+				value: ''
+			},
+			placeholder: {
+				type: 'string',
+				value: 'Select...'
+			},
+			options: {
+				type: 'array',
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						label: { type: 'string', value: '' },
+						value: { type: 'string', value: '' },
+						icon: { type: 'string', value: '' }
+					}
+				}
+			},
+			searchable: {
+				type: 'boolean',
+				value: false
+			},
+			disabled: {
+				type: 'boolean',
+				value: false
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-2', 'border', 'size-m'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'transparent', 'border', 'size-s', 'size-m', 'size-l']
+			},
+			_change: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			this.open = false;
+			this.query = '';
+			this.style = '';
+
+			this.current = () =>
+			{
+				return this.options.find(o => o.value === this.value);
+			};
+
+			this.filtered = () =>
+			{
+				if (!this.query)
+				{
+					return this.options;
+				}
+
+				return this.options.filter(o =>
+					o.label.toLowerCase().includes(this.query.toLowerCase())
+				);
+			};
+
+			this.handleScroll = (event) =>
+			{
+				if (event.target.closest && event.target.closest('.dropdown'))
+				{
+					return;
+				}
+
+				this.close();
+			};
+
+			this.close = () =>
+			{
+				this.open = false;
+				this.query = '';
+				window.removeEventListener('scroll', this.handleScroll, true);
+				window.removeEventListener('resize', this.close);
+			};
+
+			this.toggle = (event) =>
+			{
+				if (this.disabled)
+				{
+					return;
+				}
+
+				if (this.open)
+				{
+					this.close();
+					return;
+				}
+
+				this.open = true;
+				this.query = '';
+
+				const rect = event.target.closest('.trigger').getBoundingClientRect();
+				this.style = 'top: ' + (rect.bottom + 4) + 'px; left: ' + rect.left + 'px; width: ' + rect.width + 'px;';
+
+				window.addEventListener('scroll', this.handleScroll, true);
+				window.addEventListener('resize', this.close);
+			};
+
+			this.select = (option) =>
+			{
+				this.value = option.value;
+				this.close();
+
+				if (this._change)
+				{
+					this._change({ value: this.value });
+				}
+			};
+
+			this.search = ({ value }) =>
+			{
+				this.query = value;
+			};
+
+			this.dismiss = () =>
+			{
+				this.close();
+			};
+
+			return `
+				<div :class="'holder ' + variant.join(' ') + (open ? ' open' : '')" ot-click-outside="dismiss">
+					<input type="hidden" :name="name" :value="value" />
+					<div class="trigger" ot-click="toggle">
+						<i ot-if="current() && current().icon" class="icon">{{ current().icon }}</i>
+						<span ot-if="value" class="selected">{{ current() ? current().label : '' }}</span>
+						<span ot-if="!value" class="placeholder">{{ placeholder }}</span>
+						<i class="arrow">{{ open ? 'expand_less' : 'expand_more' }}</i>
+					</div>
+					<div ot-if="open" class="dropdown" :style="style">
+						<div ot-if="searchable" class="search">
+							<input type="text" :value="query" placeholder="Search..." autocomplete="off" ot-input="search" />
+						</div>
+						<div class="list">
+							<div ot-for="option in filtered()" :class="'option' + (option.value === value ? ' active' : '')" ot-click="() => select(option)">
+								<i ot-if="option.icon" class="icon">{{ option.icon }}</i>
+								<span class="label">{{ option.label }}</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			`;
+		}
+	});
+});