@onetype/framework 2.0.53 → 2.0.54

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

@@ -11,13 +11,25 @@
 .e-2109a6b9 > .holder
 {
 	display: flex;
-	align-items: flex-start;
-	gap: var(--ot-spacing-l);
-	padding: calc(var(--ot-spacing-m) * 1.3) var(--ot-spacing-m);
 	width: 100%;
+	padding: var(--ot-spacing-m);
+	gap: var(--ot-spacing-l);
+}
+
+.e-2109a6b9 > .holder.horizontal
+{
+	flex-direction: row;
+	align-items: flex-start;
+	justify-content: space-between;
+}
+
+.e-2109a6b9 > .holder.vertical
+{
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
 }
 
-/* Info */
+/* Info (label + description) */
 
 .e-2109a6b9 > .holder > .info
 {
@@ -28,59 +40,178 @@
 	flex: 1;
 }
 
+.e-2109a6b9 > .holder.horizontal > .info
+{
+	padding-top: 6px;
+	max-width: 320px;
+}
+
 .e-2109a6b9 > .holder > .info > .label
 {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--ot-spacing-x);
+	font-family: var(--ot-font-primary);
 	font-size: var(--ot-size-m);
 	font-weight: 500;
 	color: var(--ot-text-1);
 	line-height: 1.3;
+	cursor: default;
+}
+
+.e-2109a6b9 > .holder > .info > .label > .required
+{
+	color: var(--ot-red);
+	font-weight: 600;
+}
+
+.e-2109a6b9 > .holder > .info > .label > .hint
+{
+	font-size: 16px;
+	color: var(--ot-text-3);
+	cursor: help;
+	transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-2109a6b9 > .holder > .info > .label > .hint:hover
+{
+	color: var(--ot-text-1);
 }
 
 .e-2109a6b9 > .holder > .info > .description
 {
 	margin: 0;
+	font-family: var(--ot-font-primary);
 	font-size: var(--ot-size-s);
-	color: var(--ot-text-2);
-	line-height: 1.4;
-	max-width: 320px;
+	color: var(--ot-text-3);
+	line-height: 1.5;
 }
 
-/* Input */
+/* Control (input + error) */
 
-.e-2109a6b9 > .holder > .input
+.e-2109a6b9 > .holder > .control
 {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-x);
 	flex: 1;
-	min-width: 200px;
-	max-width: 420px;
+	min-width: 0;
+}
+
+.e-2109a6b9 > .holder.horizontal > .control
+{
+	flex: 1.5;
+}
+
+.e-2109a6b9 > .holder.vertical > .control
+{
+	width: 100%;
+}
+
+/* Input slot */
+
+.e-2109a6b9 > .holder > .control > .input
+{
 	display: flex;
-	justify-content: flex-end;
-	width: inherit;
+	width: 100%;
+}
+
+.e-2109a6b9 > .holder > .control > .input > *
+{
+	width: 100%;
 }
 
+/* Error message */
 
-/* Position bottom */
+.e-2109a6b9 > .holder > .control > .error-message
+{
+	display: inline-flex;
+	align-items: center;
+	gap: var(--ot-spacing-x);
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	color: var(--ot-red);
+	animation: e-2109a6b9-shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97);
+}
 
-.e-2109a6b9 > .holder.bottom
+.e-2109a6b9 > .holder > .control > .error-message > i
 {
-	flex-direction: column;
+	font-size: 14px;
+	font-variation-settings: 'FILL' 1;
+}
+
+@keyframes e-2109a6b9-shake
+{
+	0%, 100% { transform: translateX(0); }
+	25% { transform: translateX(-3px); }
+	75% { transform: translateX(3px); }
+}
+
+/* Error state — border tint on inner inputs */
+
+.e-2109a6b9 > .holder.error > .control > .input > *
+{
+	--ot-brand: var(--ot-red);
+	--ot-brand-opacity: var(--ot-red-opacity);
+}
+
+/* ===== VARIANTS ===== */
+
+.e-2109a6b9 > .holder.clean
+{
+	padding: 0;
+}
+
+.e-2109a6b9 > .holder.border-bottom
+{
+	border-bottom: 1px solid var(--ot-bg-2-border);
+}
+
+/* ===== SIZES ===== */
+
+.e-2109a6b9 > .holder.size-s
+{
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
 	gap: var(--ot-spacing-m);
 }
 
-.e-2109a6b9 > .holder.bottom > .input
+.e-2109a6b9 > .holder.size-s > .info > .label
 {
-	min-width: 0;
-	max-width: none;
-	width: 100%;
+	font-size: var(--ot-size-s);
 }
 
-/* Size variants */
+.e-2109a6b9 > .holder.size-s > .info > .description
+{
+	font-size: 10.5px;
+}
 
-.e-2109a6b9 > .holder.size-s { padding: var(--ot-spacing-s); }
-.e-2109a6b9 > .holder.size-s > .info > .label { font-size: var(--ot-size-s); }
-.e-2109a6b9 > .holder.size-s > .info > .description { font-size: var(--ot-size-s); }
-.e-2109a6b9 > .holder.size-s > .input { min-width: 160px; max-width: 220px; }
+.e-2109a6b9 > .holder.size-m
+{
+	padding: var(--ot-spacing-m);
+	gap: var(--ot-spacing-m);
+}
 
-.e-2109a6b9 > .holder.size-l { padding: var(--ot-spacing-l); }
-.e-2109a6b9 > .holder.size-l > .info > .label { font-size: var(--ot-size-l); }
-.e-2109a6b9 > .holder.size-l > .info > .description { font-size: var(--ot-size-m); }
-.e-2109a6b9 > .holder.size-l > .input { min-width: 240px; max-width: 320px; }
+.e-2109a6b9 > .holder.size-l
+{
+	padding: var(--ot-spacing-l) var(--ot-spacing-m);
+	gap: var(--ot-spacing-l);
+}
+
+.e-2109a6b9 > .holder.size-l > .info > .label
+{
+	font-size: 15px;
+}
+
+.e-2109a6b9 > .holder.size-l > .info > .description
+{
+	font-size: var(--ot-size-m);
+}
+
+/* Clean overrides size padding */
+
+.e-2109a6b9 > .holder.clean.size-s,
+.e-2109a6b9 > .holder.clean.size-m,
+.e-2109a6b9 > .holder.clean.size-l
+{
+	padding: 0;
+}

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

@@ -4,39 +4,59 @@ onetype.AddonReady('elements', (elements) =>
 		id: 'form-field',
 		icon: 'space_dashboard',
 		name: 'Form Field',
-		description: 'Form field row with label and description on left, input slot on right.',
+		description: 'Form field row with label, description, hint, required and error states.',
 		category: 'Form',
 		author: 'OneType',
 		config: {
 			label: {
-				type: 'string',
-				value: ''
+				type: 'string'
 			},
 			description: {
-				type: 'string',
-				value: ''
+				type: 'string'
+			},
+			hint: {
+				type: 'string'
+			},
+			error: {
+				type: 'string'
+			},
+			required: {
+				type: 'boolean'
 			},
-			position: {
+			orientation: {
 				type: 'string',
-				value: 'right',
-				options: ['right', 'bottom']
+				value: 'horizontal',
+				options: ['horizontal', 'vertical']
 			},
 			variant: {
 				type: 'array',
-				value: [],
-				options: ['border-bottom', 'size-s', 'size-m', 'size-l']
+				value: ['size-m'],
+				options: ['border-bottom', 'clean', 'size-s', 'size-m', 'size-l']
 			}
 		},
 		render: function()
 		{
-			return `
-				<div :class="'holder ' + position + ' ' + variant.join(' ')">
-					<div class="info">
-						<label ot-if="label" class="label">{{ label }}</label>
+			this.hasInfo = !!this.label || !!this.description;
+			this.hasError = !!this.error;
+
+			return /* html */ `
+				<div :class="'holder ' + orientation + ' ' + variant.join(' ') + (hasError ? ' error' : '')">
+					<div ot-if="hasInfo" class="info">
+						<label ot-if="label" class="label">
+							<span>{{ label }}</span>
+							<span ot-if="required" class="required">*</span>
+							<i ot-if="hint" class="hint" :ot-tooltip="{ text: hint, position: { x: 'center', y: 'top' } }">info</i>
+						</label>
 						<p ot-if="description" class="description">{{ description }}</p>
 					</div>
-					<div class="input">
-						<slot name="input"></slot>
+					<div class="control">
+						<div class="input">
+							<slot name="input"></slot>
+						</div>
+						<div ot-if="hasError" class="error-message">
+							<i>error</i>
+							<span>{{ error }}</span>
+						</div>
 					</div>
 				</div>
 			`;

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

@@ -9,6 +9,25 @@
 /* Holder */
 
 .e-20dcefe9 > .holder
+{
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	border: 1px solid transparent;
+	border-radius: var(--ot-radius-m);
+	background: transparent;
+	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-20dcefe9 > .holder:focus-within
+{
+	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
+}
+
+/* Field (input row) */
+
+.e-20dcefe9 > .holder > .field
 {
 	display: flex;
 	align-items: center;
@@ -16,71 +35,292 @@
 	width: 100%;
 	height: var(--ot-height-m);
 	padding: 0 var(--ot-spacing-m);
-	border-radius: var(--ot-radius-m);
-	border: 1px solid transparent;
-	background: transparent;
+}
+
+/* Icon */
+
+.e-20dcefe9 > .holder > .field > .icon
+{
+	flex-shrink: 0;
+	font-size: 18px;
+	color: var(--ot-text-3);
+	transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-20dcefe9 > .holder:focus-within > .field > .icon
+{
+	color: var(--ot-text-1);
+}
+
+/* Affix (prefix / suffix) */
+
+.e-20dcefe9 > .holder > .field > .affix
+{
+	flex-shrink: 0;
+	color: var(--ot-text-3);
+	font-family: var(--ot-font-primary);
 	font-size: var(--ot-size-m);
-	transition: background 0.15s ease, border-color 0.15s ease;
+	font-weight: 500;
+	user-select: none;
 }
 
 /* Input */
 
-.e-20dcefe9 > .holder > input
+.e-20dcefe9 > .holder > .field > .input
 {
 	flex: 1;
+	min-width: 0;
 	width: 100%;
 	height: 100%;
+	padding: 0;
 	background: transparent;
 	border: none;
 	outline: none;
 	color: var(--ot-text-1);
-	font-size: inherit;
-	font-family: inherit;
-	padding: 0;
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-m);
+	font-weight: 500;
 }
 
-.e-20dcefe9 > .holder > input::placeholder
+.e-20dcefe9 > .holder > .field > .input::placeholder
 {
-	color: var(--ot-text-2);
+	color: var(--ot-text-3);
+	font-weight: 400;
 }
 
-.e-20dcefe9 > .holder > input:disabled
+.e-20dcefe9 > .holder > .field > .input:disabled
 {
-	opacity: 0.5;
 	cursor: not-allowed;
 }
 
-/* Icon */
+/* Action (clear / toggle) */
 
-.e-20dcefe9 > .holder > .icon
+.e-20dcefe9 > .holder > .field > .action
 {
-	font-size: inherit;
-	color: var(--ot-text-2);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
 	flex-shrink: 0;
+	width: 22px;
+	height: 22px;
+	padding: 0;
+	border: none;
+	background: transparent;
+	border-radius: var(--ot-radius-s);
+	color: var(--ot-text-3);
+	cursor: pointer;
+	outline: none;
+	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-20dcefe9 > .holder > .field > .action:hover
+{
+	background: var(--ot-bg-2-hover);
+	color: var(--ot-text-1);
+}
+
+.e-20dcefe9 > .holder > .field > .action > i
+{
+	font-size: 14px;
+}
+
+/* Dropdown */
+
+.e-20dcefe9 > .holder > .dropdown
+{
+	position: absolute;
+	top: calc(100% + var(--ot-spacing-x));
+	left: 0;
+	right: 0;
+	display: flex;
+	flex-direction: column;
+	padding: var(--ot-spacing-x);
+	background: var(--ot-bg-1);
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: var(--ot-radius-m);
+	box-shadow: 0 10px 32px -12px rgba(20, 20, 30, 0.14);
+	z-index: 10;
+	max-height: 240px;
+	overflow-y: auto;
+	animation: e-20dcefe9-drop 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@keyframes e-20dcefe9-drop
+{
+	from { opacity: 0; transform: translateY(-4px); }
+	to { opacity: 1; transform: translateY(0); }
+}
+
+.e-20dcefe9 > .holder > .dropdown > .option
+{
+	display: flex;
+	align-items: center;
+	width: 100%;
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
+	background: transparent;
+	border: none;
+	border-radius: var(--ot-radius-s);
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-m);
+	font-weight: 500;
+	color: var(--ot-text-1);
+	text-align: left;
+	cursor: pointer;
+	outline: none;
+	transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-20dcefe9 > .holder > .dropdown > .option:hover,
+.e-20dcefe9 > .holder > .dropdown > .option.active
+{
+	background: var(--ot-brand-opacity);
+	color: var(--ot-brand);
 }
 
-/* Background variants */
+/* Disabled holder */
 
-.e-20dcefe9 > .holder.bg-1 { background: var(--ot-bg-1); }
-.e-20dcefe9 > .holder.bg-1:hover { background: var(--ot-bg-1-hover); }
+.e-20dcefe9 > .holder.disabled
+{
+	cursor: not-allowed;
+	opacity: 0.55;
+}
+
+/* ===== BACKGROUND VARIANTS ===== */
+
+.e-20dcefe9 > .holder.bg-1
+{
+	background: var(--ot-bg-1);
+}
+.e-20dcefe9 > .holder.bg-1:hover:not(:focus-within):not(.disabled)
+{
+	background: var(--ot-bg-1-hover);
+}
+.e-20dcefe9 > .holder.bg-1 > .dropdown
+{
+	background: var(--ot-bg-1);
+	border-color: var(--ot-bg-1-border);
+}
+.e-20dcefe9 > .holder.bg-1 > .field > .action:hover
+{
+	background: var(--ot-bg-1-hover);
+}
+
+.e-20dcefe9 > .holder.bg-2
+{
+	background: var(--ot-bg-2);
+}
+.e-20dcefe9 > .holder.bg-2:hover:not(:focus-within):not(.disabled)
+{
+	background: var(--ot-bg-2-hover);
+}
+.e-20dcefe9 > .holder.bg-2 > .dropdown
+{
+	background: var(--ot-bg-2);
+	border-color: var(--ot-bg-2-border);
+}
+.e-20dcefe9 > .holder.bg-2 > .field > .action:hover
+{
+	background: var(--ot-bg-2-hover);
+}
+
+.e-20dcefe9 > .holder.bg-3
+{
+	background: var(--ot-bg-3);
+}
+.e-20dcefe9 > .holder.bg-3:hover:not(:focus-within):not(.disabled)
+{
+	background: var(--ot-bg-3-hover);
+}
+.e-20dcefe9 > .holder.bg-3 > .dropdown
+{
+	background: var(--ot-bg-3);
+	border-color: var(--ot-bg-3-border);
+}
+.e-20dcefe9 > .holder.bg-3 > .field > .action:hover
+{
+	background: var(--ot-bg-3-hover);
+}
+
+.e-20dcefe9 > .holder.bg-4
+{
+	background: var(--ot-bg-4);
+}
+.e-20dcefe9 > .holder.bg-4:hover:not(:focus-within):not(.disabled)
+{
+	background: var(--ot-bg-4-hover);
+}
+.e-20dcefe9 > .holder.bg-4 > .dropdown
+{
+	background: var(--ot-bg-4);
+	border-color: var(--ot-bg-4-border);
+}
+.e-20dcefe9 > .holder.bg-4 > .field > .action:hover
+{
+	background: var(--ot-bg-4-hover);
+}
+
+/* Transparent */
+
+.e-20dcefe9 > .holder.transparent
+{
+	background: transparent;
+}
+
+/* Border variant — per bg */
+
+.e-20dcefe9 > .holder.border { border-color: var(--ot-bg-2-border); }
 .e-20dcefe9 > .holder.bg-1.border { border-color: var(--ot-bg-1-border); }
-.e-20dcefe9 > .holder.bg-2 { background: var(--ot-bg-2); }
-.e-20dcefe9 > .holder.bg-2:hover { background: var(--ot-bg-2-hover); }
 .e-20dcefe9 > .holder.bg-2.border { border-color: var(--ot-bg-2-border); }
-.e-20dcefe9 > .holder.bg-3 { background: var(--ot-bg-3); }
-.e-20dcefe9 > .holder.bg-3:hover { background: var(--ot-bg-3-hover); }
 .e-20dcefe9 > .holder.bg-3.border { border-color: var(--ot-bg-3-border); }
-.e-20dcefe9 > .holder.bg-4 { background: var(--ot-bg-4); }
-.e-20dcefe9 > .holder.bg-4:hover { background: var(--ot-bg-4-hover); }
 .e-20dcefe9 > .holder.bg-4.border { border-color: var(--ot-bg-4-border); }
 
-/* Border variant */
+/* ===== SIZE VARIANTS ===== */
 
-.e-20dcefe9 > .holder.border { border: 1px solid var(--ot-bg-2-border); }
-.e-20dcefe9 > .holder.border:focus-within { border-color: var(--ot-brand); }
+.e-20dcefe9 > .holder.size-s > .field
+{
+	height: var(--ot-height-s);
+	padding: 0 var(--ot-spacing-s);
+}
+.e-20dcefe9 > .holder.size-s > .field > .icon
+{
+	font-size: 15px;
+}
+.e-20dcefe9 > .holder.size-s > .field > .affix,
+.e-20dcefe9 > .holder.size-s > .field > .input
+{
+	font-size: var(--ot-size-s);
+}
+.e-20dcefe9 > .holder.size-s > .field > .action
+{
+	width: 18px;
+	height: 18px;
+}
+.e-20dcefe9 > .holder.size-s > .field > .action > i
+{
+	font-size: 13px;
+}
 
-/* Size variants */
+.e-20dcefe9 > .holder.size-m > .field
+{
+	height: var(--ot-height-m);
+	padding: 0 var(--ot-spacing-m);
+}
 
-.e-20dcefe9 > .holder.size-s { height: var(--ot-height-s); padding: 0 var(--ot-spacing-s); font-size: var(--ot-size-s); }
-.e-20dcefe9 > .holder.size-m { height: var(--ot-height-m); padding: 0 var(--ot-spacing-m); font-size: var(--ot-size-m); }
-.e-20dcefe9 > .holder.size-l { height: var(--ot-height-l); padding: 0 var(--ot-spacing-m); font-size: var(--ot-size-m); }
+.e-20dcefe9 > .holder.size-l > .field
+{
+	height: var(--ot-height-l);
+	padding: 0 var(--ot-spacing-l);
+}
+.e-20dcefe9 > .holder.size-l > .field > .icon
+{
+	font-size: 20px;
+}
+.e-20dcefe9 > .holder.size-l > .field > .action
+{
+	width: 26px;
+	height: 26px;
+}
+.e-20dcefe9 > .holder.size-l > .field > .action > i
+{
+	font-size: 16px;
+}