@onetype/framework 2.0.53 → 2.0.54

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

@@ -1,113 +1,172 @@
-onetype.AddonReady('elements', (elements) =>
-{
-	elements.ItemAdd({
-		id: 'form-textarea',
-		icon: 'notes',
-		name: 'Textarea',
-		description: 'Multi-line text input with variant support.',
-		category: 'Form',
-		author: 'OneType',
-		config: {
-			value: {
-				type: 'string',
-				value: ''
-			},
-			name: {
-				type: 'string',
-				value: ''
-			},
-			placeholder: {
-				type: 'string',
-				value: ''
-			},
-			rows: {
-				type: 'number',
-				value: 4
-			},
-			maxlength: {
-				type: 'number'
-			},
-			disabled: {
-				type: 'boolean',
-				value: false
-			},
-			readonly: {
-				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']
-			},
-			_input: {
-				type: 'function'
-			},
-			_change: {
-				type: 'function'
-			},
-			_focus: {
-				type: 'function'
-			},
-			_blur: {
-				type: 'function'
-			}
-		},
-		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(' ')">
-					<textarea
-						:placeholder="placeholder"
-						:name="name"
-						:rows="rows"
-						:maxlength="maxlength"
-						:disabled="disabled"
-						:readonly="readonly"
-						autocomplete="off"
-						ot-input="input"
-						ot-change="change"
-						ot-focus="focus"
-						ot-blur="blur"
-					>{{ value }}</textarea>
-				</div>
-			`;
-		}
-	});
-});
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'form-textarea',
+		icon: 'notes',
+		name: 'Textarea',
+		description: 'Premium multi-line text input with auto-resize, character counter and focus ring.',
+		category: 'Form',
+		author: 'OneType',
+		config: {
+			value: {
+				type: 'string'
+			},
+			name: {
+				type: 'string'
+			},
+			placeholder: {
+				type: 'string'
+			},
+			rows: {
+				type: 'number',
+				value: 4
+			},
+			minRows: {
+				type: 'number'
+			},
+			maxRows: {
+				type: 'number'
+			},
+			maxlength: {
+				type: 'number'
+			},
+			autoResize: {
+				type: 'boolean'
+			},
+			counter: {
+				type: 'boolean'
+			},
+			resize: {
+				type: 'string',
+				value: 'vertical',
+				options: ['none', 'vertical', 'horizontal', 'both']
+			},
+			disabled: {
+				type: 'boolean'
+			},
+			readonly: {
+				type: 'boolean'
+			},
+			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']
+			},
+			_input: {
+				type: 'function'
+			},
+			_change: {
+				type: 'function'
+			},
+			_focus: {
+				type: 'function'
+			},
+			_blur: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			this.length = (this.value || '').length;
+			this.showCounter = this.counter && this.maxlength > 0;
+
+			this.resizeTextarea = () =>
+			{
+				if(!this.autoResize)
+				{
+					return;
+				}
+
+				const textarea = this.Element?.querySelector('textarea');
+
+				if(!textarea)
+				{
+					return;
+				}
+
+				textarea.style.height = 'auto';
+
+				const minRows = this.minRows || this.rows || 2;
+				const maxRows = this.maxRows || 0;
+				const lineHeight = parseFloat(getComputedStyle(textarea).lineHeight) || 22;
+
+				const minHeight = minRows * lineHeight;
+				const maxHeight = maxRows ? maxRows * lineHeight : Infinity;
+				const scrollHeight = textarea.scrollHeight;
+
+				const next = Math.max(minHeight, Math.min(scrollHeight, maxHeight));
+
+				textarea.style.height = next + 'px';
+				textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
+			};
+
+			this.OnReady(() =>
+			{
+				this.resizeTextarea();
+			});
+
+			this.input = ({ event, value }) =>
+			{
+				this.value = value;
+				this.length = value.length;
+				this.resizeTextarea();
+
+				if(this._input)
+				{
+					this._input({ event, value });
+				}
+			};
+
+			this.change = ({ event, value }) =>
+			{
+				this.value = value;
+				this.length = value.length;
+
+				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 /* html */ `
+				<div :class="'holder ' + variant.join(' ') + (disabled ? ' disabled' : '')">
+					<textarea
+						:placeholder="placeholder"
+						:name="name"
+						:rows="rows"
+						:maxlength="maxlength"
+						:disabled="disabled"
+						:readonly="readonly"
+						:style="'resize: ' + (autoResize ? 'none' : resize)"
+						autocomplete="off"
+						ot-input="input"
+						ot-change="change"
+						ot-focus="focus"
+						ot-blur="blur"
+					>{{ value }}</textarea>
+					<div ot-if="showCounter" class="counter">
+						<span :class="length >= maxlength ? 'full' : ''">{{ length }}</span>
+						<span class="slash">/</span>
+						<span>{{ maxlength }}</span>
+					</div>
+				</div>
+			`;
+		}
+	});
+});

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

@@ -2,27 +2,28 @@
 
 .e-180e0ca7
 {
-	display: flex;
+	display: inline-flex;
 }
 
 /* Holder */
 
 .e-180e0ca7 > .holder
 {
+	position: relative;
 	display: inline-flex;
-	align-items: center;
+	align-items: flex-start;
 	gap: var(--ot-spacing-s);
 	cursor: pointer;
 	user-select: none;
+	font-family: var(--ot-font-primary);
 }
 
-.e-180e0ca7 > .holder.disabled
+.e-180e0ca7 > .holder.reverse
 {
-	opacity: 0.5;
-	cursor: not-allowed;
+	flex-direction: row-reverse;
 }
 
-/* Input */
+/* Hidden input */
 
 .e-180e0ca7 > .holder > input
 {
@@ -30,6 +31,7 @@
 	opacity: 0;
 	width: 0;
 	height: 0;
+	margin: 0;
 }
 
 /* Track */
@@ -37,10 +39,12 @@
 .e-180e0ca7 > .holder > .track
 {
 	position: relative;
-	display: flex;
+	display: inline-flex;
 	align-items: center;
+	flex-shrink: 0;
 	border-radius: 100px;
-	transition: background 0.15s ease;
+	background: var(--ot-bg-3);
+	transition: background 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 /* Thumb */
@@ -48,58 +52,254 @@
 .e-180e0ca7 > .holder > .track > .thumb
 {
 	position: absolute;
+	top: 50%;
 	border-radius: 50%;
-	background: var(--ot-text-2);
-	transition: transform 0.15s ease, background 0.15s ease;
+	background: white;
+	box-shadow: 0 1px 3px rgba(20, 20, 30, 0.16), 0 1px 2px rgba(20, 20, 30, 0.08);
+	transform: translateY(-50%);
+	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-/* Active */
+/* Active — track becomes solid brand */
 
-.e-180e0ca7 > .holder.active > .track > .thumb
+.e-180e0ca7 > .holder.active > .track
 {
 	background: var(--ot-brand);
 }
 
-/* Label */
+/* Active press feedback — thumb squish */
 
-.e-180e0ca7 > .holder > .label
+.e-180e0ca7 > .holder:active:not(.disabled) > .track > .thumb
+{
+	transform: translateY(-50%) scaleX(1.1);
+}
+
+/* Focus ring */
+
+.e-180e0ca7 > .holder > input:focus-visible ~ .track
+{
+	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
+}
+
+/* Info block (label + description) */
+
+.e-180e0ca7 > .holder > .info
+{
+	display: inline-flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+	padding-top: 1px;
+}
+
+.e-180e0ca7 > .holder > .info > .label
 {
 	font-size: var(--ot-size-m);
+	font-weight: 500;
 	color: var(--ot-text-1);
+	line-height: 1.3;
+	transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-180e0ca7 > .holder > .info > .description
+{
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-3);
+	line-height: 1.4;
+	transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* Disabled */
+
+.e-180e0ca7 > .holder.disabled
+{
+	cursor: not-allowed;
 }
 
-/* Background variants */
+.e-180e0ca7 > .holder.disabled > .track
+{
+	opacity: 0.45;
+}
+
+.e-180e0ca7 > .holder.disabled > .info > .label,
+.e-180e0ca7 > .holder.disabled > .info > .description
+{
+	color: var(--ot-text-3);
+	opacity: 0.6;
+}
 
-.e-180e0ca7 > .holder.bg-1 > .track { background: var(--ot-bg-1); }
-.e-180e0ca7 > .holder.bg-1.active > .track { background: var(--ot-brand-opacity); }
-.e-180e0ca7 > .holder.bg-2 > .track { background: var(--ot-bg-2); }
-.e-180e0ca7 > .holder.bg-2.active > .track { background: var(--ot-brand-opacity); }
-.e-180e0ca7 > .holder.bg-3 > .track { background: var(--ot-bg-3); }
-.e-180e0ca7 > .holder.bg-3.active > .track { background: var(--ot-brand-opacity); }
-.e-180e0ca7 > .holder.bg-4 > .track { background: var(--ot-bg-4); }
-.e-180e0ca7 > .holder.bg-4.active > .track { background: var(--ot-brand-opacity); }
+/* ===== BACKGROUND VARIANTS (off state track bg) ===== */
+
+.e-180e0ca7 > .holder.bg-1 > .track { background: var(--ot-bg-1); border: 1px solid var(--ot-bg-1-border); }
+.e-180e0ca7 > .holder.bg-2 > .track { background: var(--ot-bg-2); border: 1px solid var(--ot-bg-2-border); }
+.e-180e0ca7 > .holder.bg-3 > .track { background: var(--ot-bg-3); border: 1px solid var(--ot-bg-3-border); }
+.e-180e0ca7 > .holder.bg-4 > .track { background: var(--ot-bg-4); border: 1px solid var(--ot-bg-4-border); }
+
+/* Active state overrides bg variants with brand */
+
+.e-180e0ca7 > .holder.bg-1.active > .track,
+.e-180e0ca7 > .holder.bg-2.active > .track,
+.e-180e0ca7 > .holder.bg-3.active > .track,
+.e-180e0ca7 > .holder.bg-4.active > .track
+{
+	background: var(--ot-brand);
+	border-color: var(--ot-brand);
+}
 
-/* Border */
+/* ===== BORDER MODIFIER ===== */
 
 .e-180e0ca7 > .holder.border > .track { border: 1px solid var(--ot-bg-2-border); }
+.e-180e0ca7 > .holder.bg-1.border > .track { border-color: var(--ot-bg-1-border); }
+.e-180e0ca7 > .holder.bg-2.border > .track { border-color: var(--ot-bg-2-border); }
+.e-180e0ca7 > .holder.bg-3.border > .track { border-color: var(--ot-bg-3-border); }
+.e-180e0ca7 > .holder.bg-4.border > .track { border-color: var(--ot-bg-4-border); }
 
-/* Size small */
+/* ===== COLOR VARIANTS (active state) ===== */
 
-.e-180e0ca7 > .holder.size-s > .track { width: 28px; height: 16px; }
-.e-180e0ca7 > .holder.size-s > .track > .thumb { width: 12px; height: 12px; left: 2px; }
-.e-180e0ca7 > .holder.size-s.active > .track > .thumb { transform: translateX(12px); }
-.e-180e0ca7 > .holder.size-s > .label { font-size: var(--ot-size-s); }
+.e-180e0ca7 > .holder.color-blue.active > .track,
+.e-180e0ca7 > .holder.bg-1.color-blue.active > .track,
+.e-180e0ca7 > .holder.bg-2.color-blue.active > .track,
+.e-180e0ca7 > .holder.bg-3.color-blue.active > .track,
+.e-180e0ca7 > .holder.bg-4.color-blue.active > .track
+{
+	background: var(--ot-blue);
+	border-color: var(--ot-blue);
+}
+
+.e-180e0ca7 > .holder.color-red.active > .track,
+.e-180e0ca7 > .holder.bg-1.color-red.active > .track,
+.e-180e0ca7 > .holder.bg-2.color-red.active > .track,
+.e-180e0ca7 > .holder.bg-3.color-red.active > .track,
+.e-180e0ca7 > .holder.bg-4.color-red.active > .track
+{
+	background: var(--ot-red);
+	border-color: var(--ot-red);
+}
+
+.e-180e0ca7 > .holder.color-orange.active > .track,
+.e-180e0ca7 > .holder.bg-1.color-orange.active > .track,
+.e-180e0ca7 > .holder.bg-2.color-orange.active > .track,
+.e-180e0ca7 > .holder.bg-3.color-orange.active > .track,
+.e-180e0ca7 > .holder.bg-4.color-orange.active > .track
+{
+	background: var(--ot-orange);
+	border-color: var(--ot-orange);
+}
 
-/* Size medium */
+.e-180e0ca7 > .holder.color-green.active > .track,
+.e-180e0ca7 > .holder.bg-1.color-green.active > .track,
+.e-180e0ca7 > .holder.bg-2.color-green.active > .track,
+.e-180e0ca7 > .holder.bg-3.color-green.active > .track,
+.e-180e0ca7 > .holder.bg-4.color-green.active > .track
+{
+	background: var(--ot-green);
+	border-color: var(--ot-green);
+}
 
-.e-180e0ca7 > .holder.size-m > .track { width: 36px; height: 20px; }
-.e-180e0ca7 > .holder.size-m > .track > .thumb { width: 16px; height: 16px; left: 2px; }
-.e-180e0ca7 > .holder.size-m.active > .track > .thumb { transform: translateX(16px); }
-.e-180e0ca7 > .holder.size-m > .label { font-size: var(--ot-size-m); }
+/* Focus rings per color */
 
-/* Size large */
+.e-180e0ca7 > .holder.color-blue > input:focus-visible ~ .track
+{
+	box-shadow: 0 0 0 3px var(--ot-blue-opacity);
+}
 
-.e-180e0ca7 > .holder.size-l > .track { width: 44px; height: 24px; }
-.e-180e0ca7 > .holder.size-l > .track > .thumb { width: 20px; height: 20px; left: 2px; }
-.e-180e0ca7 > .holder.size-l.active > .track > .thumb { transform: translateX(20px); }
-.e-180e0ca7 > .holder.size-l > .label { font-size: var(--ot-size-m); }
+.e-180e0ca7 > .holder.color-red > input:focus-visible ~ .track
+{
+	box-shadow: 0 0 0 3px var(--ot-red-opacity);
+}
+
+.e-180e0ca7 > .holder.color-orange > input:focus-visible ~ .track
+{
+	box-shadow: 0 0 0 3px var(--ot-orange-opacity);
+}
+
+.e-180e0ca7 > .holder.color-green > input:focus-visible ~ .track
+{
+	box-shadow: 0 0 0 3px var(--ot-green-opacity);
+}
+
+/* ===== SIZES ===== */
+
+.e-180e0ca7 > .holder.size-s > .track
+{
+	width: 28px;
+	height: 16px;
+}
+.e-180e0ca7 > .holder.size-s > .track > .thumb
+{
+	width: 12px;
+	height: 12px;
+	left: 2px;
+}
+.e-180e0ca7 > .holder.size-s.active > .track > .thumb
+{
+	transform: translate(12px, -50%);
+}
+.e-180e0ca7 > .holder.size-s:active:not(.disabled) > .track > .thumb
+{
+	transform: translateY(-50%) scaleX(1.1);
+}
+.e-180e0ca7 > .holder.size-s.active:active:not(.disabled) > .track > .thumb
+{
+	transform: translate(10px, -50%) scaleX(1.2);
+}
+.e-180e0ca7 > .holder.size-s > .info > .label
+{
+	font-size: var(--ot-size-s);
+}
+.e-180e0ca7 > .holder.size-s > .info > .description
+{
+	font-size: 10.5px;
+}
+
+.e-180e0ca7 > .holder.size-m > .track
+{
+	width: 36px;
+	height: 20px;
+}
+.e-180e0ca7 > .holder.size-m > .track > .thumb
+{
+	width: 16px;
+	height: 16px;
+	left: 2px;
+}
+.e-180e0ca7 > .holder.size-m.active > .track > .thumb
+{
+	transform: translate(16px, -50%);
+}
+.e-180e0ca7 > .holder.size-m:active:not(.disabled) > .track > .thumb
+{
+	transform: translateY(-50%) scaleX(1.15);
+}
+.e-180e0ca7 > .holder.size-m.active:active:not(.disabled) > .track > .thumb
+{
+	transform: translate(13px, -50%) scaleX(1.25);
+}
+
+.e-180e0ca7 > .holder.size-l > .track
+{
+	width: 44px;
+	height: 24px;
+}
+.e-180e0ca7 > .holder.size-l > .track > .thumb
+{
+	width: 20px;
+	height: 20px;
+	left: 2px;
+}
+.e-180e0ca7 > .holder.size-l.active > .track > .thumb
+{
+	transform: translate(20px, -50%);
+}
+.e-180e0ca7 > .holder.size-l:active:not(.disabled) > .track > .thumb
+{
+	transform: translateY(-50%) scaleX(1.15);
+}
+.e-180e0ca7 > .holder.size-l.active:active:not(.disabled) > .track > .thumb
+{
+	transform: translate(17px, -50%) scaleX(1.25);
+}
+.e-180e0ca7 > .holder.size-l > .info > .label
+{
+	font-size: var(--ot-size-m);
+}