@onetype/framework 2.0.53 → 2.0.54

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

@@ -1,75 +1,109 @@
-onetype.AddonReady('elements', (elements) =>
-{
-	elements.ItemAdd({
-		id: 'form-checkbox',
-		icon: 'check_box',
-		name: 'Checkbox',
-		description: 'Checkbox input with custom styling.',
-		category: 'Form',
-		author: 'OneType',
-		config: {
-			label: {
-				type: 'string',
-				value: ''
-			},
-			name: {
-				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="checkbox"
-						:name="name"
-						:checked="value"
-						:disabled="disabled"
-						ot-change="handle"
-						ot-click="click"
-					/>
-					<span class="mark"></span>
-					<span ot-if="label" class="label">{{ label }}</span>
-				</label>
-			`;
-		}
-	});
-});
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'form-checkbox',
+		icon: 'check_box',
+		name: 'Checkbox',
+		description: 'Premium checkbox with label, description, indeterminate state and color variants.',
+		category: 'Form',
+		author: 'OneType',
+		config: {
+			label: {
+				type: 'string'
+			},
+			description: {
+				type: 'string'
+			},
+			icon: {
+				type: 'string'
+			},
+			count: {
+				type: 'string|number'
+			},
+			name: {
+				type: 'string'
+			},
+			value: {
+				type: 'boolean'
+			},
+			indeterminate: {
+				type: 'boolean'
+			},
+			disabled: {
+				type: 'boolean'
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-1', 'size-m'],
+				options: [
+					'bg-1', 'bg-2', 'bg-3', 'bg-4',
+					'transparent', 'border',
+					'color-brand', 'color-blue', 'color-red', 'color-orange', 'color-green',
+					'size-s', 'size-m', 'size-l',
+					'reverse'
+				]
+			},
+			_change: {
+				type: 'function'
+			},
+			_click: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			this.hasInfo = !!this.label || !!this.description;
+			this.hasIcon = !!this.icon;
+			this.hasCount = this.count !== undefined && this.count !== null && this.count !== '';
+
+			this.OnReady(() =>
+			{
+				const input = this.Element?.querySelector('input');
+
+				if(input)
+				{
+					input.indeterminate = !!this.indeterminate;
+				}
+			});
+
+			this.handle = ({ event }) =>
+			{
+				this.value = event.target.checked;
+				this.indeterminate = false;
+
+				if(this._change)
+				{
+					this._change({ event, value: this.value });
+				}
+			};
+
+			this.click = ({ event }) =>
+			{
+				if(this._click)
+				{
+					this._click({ event, value: this.value });
+				}
+			};
+
+			return /* html */ `
+				<label :class="'holder ' + variant.join(' ') + (indeterminate ? ' indeterminate' : '') + (disabled ? ' disabled' : '')">
+					<input
+						type="checkbox"
+						:name="name"
+						:checked="value"
+						:disabled="disabled"
+						ot-change="handle"
+						ot-click="click"
+					/>
+					<span class="mark"></span>
+					<i ot-if="hasIcon" class="icon">{{ icon }}</i>
+					<span ot-if="hasInfo" class="info">
+						<span ot-if="label" class="label">{{ label }}</span>
+						<span ot-if="description" class="description">{{ description }}</span>
+					</span>
+					<span ot-if="hasCount" class="count">{{ count }}</span>
+				</label>
+			`;
+		}
+	});
+});

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

@@ -4,55 +4,61 @@
 {
 	display: flex;
 	width: 100%;
-	min-width: 0;
 }
 
 /* Holder */
 
 .e-21311850 > .holder
 {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
+	width: 100%;
+}
+
+/* Field (input row) */
+
+.e-21311850 > .holder > .field
+{
+	position: relative;
 	display: flex;
 	align-items: center;
 	gap: var(--ot-spacing-s);
 	width: 100%;
-	padding: var(--ot-spacing-x);
-	border-radius: var(--ot-radius-m);
+	padding: 0 var(--ot-spacing-s);
 	border: 1px solid transparent;
+	border-radius: var(--ot-radius-m);
 	background: transparent;
-	transition: background 0.15s ease, border-color 0.15s ease;
+	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);
 }
 
 /* Swatch */
 
-.e-21311850 > .holder > .swatch
+.e-21311850 > .holder > .field > .swatch
 {
 	position: relative;
 	flex-shrink: 0;
 	border-radius: var(--ot-radius-s);
-	border: 1px solid rgba(255, 255, 255, 0.1);
+	border: 1px solid var(--ot-bg-2-border);
 	cursor: pointer;
 	overflow: hidden;
-	transition: border-color 0.15s ease, transform 0.15s ease;
 	padding: 0;
 	outline: none;
+	background-color: transparent;
+	background-image: linear-gradient(45deg, var(--ot-bg-3) 25%, transparent 25%), linear-gradient(-45deg, var(--ot-bg-3) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--ot-bg-3) 75%), linear-gradient(-45deg, transparent 75%, var(--ot-bg-3) 75%);
+	background-size: 8px 8px;
+	background-position: 0 0, 0 4px, 4px -4px, -4px 0;
+	transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.e-21311850 > .holder > .swatch:hover
-{
-	border-color: rgba(255, 255, 255, 0.25);
-	transform: scale(1.05);
-}
-
-.e-21311850 > .holder > .swatch:disabled
+.e-21311850 > .holder > .field > .swatch:hover
 {
-	opacity: 0.5;
-	cursor: not-allowed;
-	transform: none;
+	transform: scale(1.08);
 }
 
 /* Native color input — hidden inside swatch */
 
-.e-21311850 > .holder > .swatch > .native
+.e-21311850 > .holder > .field > .swatch > .native
 {
 	position: absolute;
 	inset: 0;
@@ -66,7 +72,7 @@
 
 /* Hex input */
 
-.e-21311850 > .holder > .input
+.e-21311850 > .holder > .field > .input
 {
 	flex: 1;
 	min-width: 0;
@@ -74,83 +80,271 @@
 	border: none;
 	outline: none;
 	color: var(--ot-text-1);
-	font-family: monospace;
+	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+	font-size: var(--ot-size-m);
+	font-weight: 500;
+	text-transform: uppercase;
 	letter-spacing: 0.5px;
 	padding: 0;
 }
 
-.e-21311850 > .holder > .input::placeholder
+.e-21311850 > .holder > .field > .input::placeholder
 {
-	color: var(--ot-text-2);
-}
-
-.e-21311850 > .holder > .input:disabled
-{
-	opacity: 0.5;
-	cursor: not-allowed;
+	color: var(--ot-text-3);
+	text-transform: none;
 }
 
-/* Clear button */
+/* Action buttons (copy / clear) */
 
-.e-21311850 > .holder > .clear
+.e-21311850 > .holder > .field > .action
 {
-	display: flex;
+	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;
-	transition: color 0.15s ease;
 	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-21311850 > .holder > .clear:hover
+.e-21311850 > .holder > .field > .action:hover
 {
+	background: var(--ot-bg-2-hover);
 	color: var(--ot-text-1);
 }
 
-.e-21311850 > .holder > .clear > i
+.e-21311850 > .holder > .field > .action > i
 {
 	font-size: 14px;
 }
 
-/* Background variants */
+.e-21311850 > .holder > .field > .action.copied
+{
+	color: var(--ot-green);
+	background: var(--ot-green-opacity);
+}
+
+/* Presets */
+
+.e-21311850 > .holder > .presets
+{
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--ot-spacing-x);
+}
+
+.e-21311850 > .holder > .presets > .preset
+{
+	width: 22px;
+	height: 22px;
+	padding: 0;
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: var(--ot-radius-s);
+	cursor: pointer;
+	outline: none;
+	transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-21311850 > .holder > .presets > .preset:hover
+{
+	transform: scale(1.1);
+}
 
-.e-21311850 > .holder.bg-1 { background: var(--ot-bg-1); }
-.e-21311850 > .holder.bg-1:hover { background: var(--ot-bg-1-hover); }
-.e-21311850 > .holder.bg-1.border { border-color: var(--ot-bg-1-border); }
-.e-21311850 > .holder.bg-2 { background: var(--ot-bg-2); }
-.e-21311850 > .holder.bg-2:hover { background: var(--ot-bg-2-hover); }
-.e-21311850 > .holder.bg-2.border { border-color: var(--ot-bg-2-border); }
-.e-21311850 > .holder.bg-3 { background: var(--ot-bg-3); }
-.e-21311850 > .holder.bg-3:hover { background: var(--ot-bg-3-hover); }
-.e-21311850 > .holder.bg-3.border { border-color: var(--ot-bg-3-border); }
-.e-21311850 > .holder.bg-4 { background: var(--ot-bg-4); }
-.e-21311850 > .holder.bg-4:hover { background: var(--ot-bg-4-hover); }
-.e-21311850 > .holder.bg-4.border { border-color: var(--ot-bg-4-border); }
+.e-21311850 > .holder > .presets > .preset.active
+{
+	box-shadow: 0 0 0 2px var(--ot-bg-1), 0 0 0 4px var(--ot-brand);
+}
+
+/* Focus ring */
+
+.e-21311850 > .holder > .field:focus-within
+{
+	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
+}
+
+/* Disabled */
+
+.e-21311850 > .holder.disabled > .field
+{
+	cursor: not-allowed;
+	opacity: 0.55;
+}
+
+.e-21311850 > .holder.disabled > .field > .swatch
+{
+	cursor: not-allowed;
+	transform: none;
+}
+
+.e-21311850 > .holder.disabled > .field > .input
+{
+	cursor: not-allowed;
+}
+
+/* ===== BACKGROUND VARIANTS ===== */
+
+.e-21311850 > .holder.bg-1 > .field
+{
+	background: var(--ot-bg-1);
+}
+.e-21311850 > .holder.bg-1 > .field:hover:not(:focus-within)
+{
+	background: var(--ot-bg-1-hover);
+}
+.e-21311850 > .holder.bg-1 > .field > .swatch
+{
+	border-color: var(--ot-bg-1-border);
+}
+.e-21311850 > .holder.bg-1 > .field > .action:hover
+{
+	background: var(--ot-bg-1-hover);
+}
+
+.e-21311850 > .holder.bg-2 > .field
+{
+	background: var(--ot-bg-2);
+}
+.e-21311850 > .holder.bg-2 > .field:hover:not(:focus-within)
+{
+	background: var(--ot-bg-2-hover);
+}
+.e-21311850 > .holder.bg-2 > .field > .swatch
+{
+	border-color: var(--ot-bg-2-border);
+}
+.e-21311850 > .holder.bg-2 > .field > .action:hover
+{
+	background: var(--ot-bg-2-hover);
+}
+
+.e-21311850 > .holder.bg-3 > .field
+{
+	background: var(--ot-bg-3);
+}
+.e-21311850 > .holder.bg-3 > .field:hover:not(:focus-within)
+{
+	background: var(--ot-bg-3-hover);
+}
+.e-21311850 > .holder.bg-3 > .field > .swatch
+{
+	border-color: var(--ot-bg-3-border);
+}
+.e-21311850 > .holder.bg-3 > .field > .action:hover
+{
+	background: var(--ot-bg-3-hover);
+}
+
+.e-21311850 > .holder.bg-4 > .field
+{
+	background: var(--ot-bg-4);
+}
+.e-21311850 > .holder.bg-4 > .field:hover:not(:focus-within)
+{
+	background: var(--ot-bg-4-hover);
+}
+.e-21311850 > .holder.bg-4 > .field > .swatch
+{
+	border-color: var(--ot-bg-4-border);
+}
+.e-21311850 > .holder.bg-4 > .field > .action:hover
+{
+	background: var(--ot-bg-4-hover);
+}
 
 /* Transparent variant */
 
-.e-21311850 > .holder.transparent { background: transparent; padding: 0; }
+.e-21311850 > .holder.transparent > .field
+{
+	background: transparent;
+	padding: 0;
+}
 
-/* Border variant */
+/* Border variant — per bg level */
 
-.e-21311850 > .holder.border { border: 1px solid var(--ot-bg-2-border); }
-.e-21311850 > .holder.border:focus-within { border-color: var(--ot-brand); }
+.e-21311850 > .holder.border > .field { border-color: var(--ot-bg-2-border); }
+.e-21311850 > .holder.bg-1.border > .field { border-color: var(--ot-bg-1-border); }
+.e-21311850 > .holder.bg-2.border > .field { border-color: var(--ot-bg-2-border); }
+.e-21311850 > .holder.bg-3.border > .field { border-color: var(--ot-bg-3-border); }
+.e-21311850 > .holder.bg-4.border > .field { border-color: var(--ot-bg-4-border); }
 
-/* Size variants */
+/* ===== SIZE VARIANTS ===== */
 
-.e-21311850 > .holder.size-s { height: var(--ot-height-s); padding: 0 var(--ot-spacing-s); }
-.e-21311850 > .holder.size-s > .swatch { width: 18px; height: 18px; }
-.e-21311850 > .holder.size-s > .input { font-size: var(--ot-size-s); }
+.e-21311850 > .holder.size-s > .field
+{
+	height: var(--ot-height-s);
+	padding: 0 var(--ot-spacing-x);
+}
+.e-21311850 > .holder.size-s > .field > .swatch
+{
+	width: 18px;
+	height: 18px;
+}
+.e-21311850 > .holder.size-s > .field > .input
+{
+	font-size: var(--ot-size-s);
+}
+.e-21311850 > .holder.size-s > .field > .action
+{
+	width: 18px;
+	height: 18px;
+}
+.e-21311850 > .holder.size-s > .field > .action > i
+{
+	font-size: 13px;
+}
+.e-21311850 > .holder.size-s > .presets > .preset
+{
+	width: 18px;
+	height: 18px;
+}
 
-.e-21311850 > .holder.size-m { height: var(--ot-height-m); padding: 0 var(--ot-spacing-s); }
-.e-21311850 > .holder.size-m > .swatch { width: 22px; height: 22px; border: 1px solid var(--ot-bg-2-border); }
-.e-21311850 > .holder.size-m > .input { font-size: var(--ot-size-m); }
+.e-21311850 > .holder.size-m > .field
+{
+	height: var(--ot-height-m);
+	padding: 0 var(--ot-spacing-s);
+}
+.e-21311850 > .holder.size-m > .field > .swatch
+{
+	width: 22px;
+	height: 22px;
+}
+.e-21311850 > .holder.size-m > .field > .input
+{
+	font-size: var(--ot-size-m);
+}
 
-.e-21311850 > .holder.size-l { height: var(--ot-height-l); padding: 0 var(--ot-spacing-m); }
-.e-21311850 > .holder.size-l > .swatch { width: 28px; height: 28px; }
-.e-21311850 > .holder.size-l > .input { font-size: var(--ot-size-m); }
+.e-21311850 > .holder.size-l > .field
+{
+	height: var(--ot-height-l);
+	padding: 0 var(--ot-spacing-m);
+}
+.e-21311850 > .holder.size-l > .field > .swatch
+{
+	width: 28px;
+	height: 28px;
+}
+.e-21311850 > .holder.size-l > .field > .input
+{
+	font-size: var(--ot-size-m);
+}
+.e-21311850 > .holder.size-l > .field > .action
+{
+	width: 26px;
+	height: 26px;
+}
+.e-21311850 > .holder.size-l > .field > .action > i
+{
+	font-size: 16px;
+}
+.e-21311850 > .holder.size-l > .presets > .preset
+{
+	width: 28px;
+	height: 28px;
+}