@onetype/framework 2.0.53 → 2.0.55

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

@@ -1,123 +1,331 @@
-/* Root */
-
-.e-162fca34
-{
-	display: flex;
-	width: 100%;
-}
-
-/* Holder */
-
-.e-162fca34 > .holder
-{
-	position: relative;
-	display: flex;
-	align-items: center;
-	width: 100%;
-}
-
-/* Track */
-
-.e-162fca34 > .holder > .track
-{
-	position: absolute;
-	left: 0;
-	right: 0;
-	height: 6px;
-	background: var(--ot-bg-3);
-	border-radius: var(--ot-radius-s);
-	pointer-events: none;
-}
-
-.e-162fca34 > .holder > .track > .fill
-{
-	height: 100%;
-	border-radius: var(--ot-radius-s);
-	transition: width 0.15s ease-out;
-}
-
-/* Input */
-
-.e-162fca34 > .holder > input
-{
-	position: relative;
-	width: 100%;
-	-webkit-appearance: none;
-	appearance: none;
-	background: transparent;
-	cursor: pointer;
-	z-index: 1;
-}
-
-.e-162fca34 > .holder > input::-webkit-slider-thumb
-{
-	-webkit-appearance: none;
-	appearance: none;
-	border: 2px solid var(--ot-bg-1);
-	border-radius: 50%;
-	cursor: pointer;
-	transition: transform 0.15s ease;
-}
-
-.e-162fca34 > .holder > input::-webkit-slider-thumb:hover
-{
-	transform: scale(1.1);
-}
-
-.e-162fca34 > .holder > input::-moz-range-thumb
-{
-	border: 2px solid var(--ot-bg-1);
-	border-radius: 50%;
-	cursor: pointer;
-	transition: transform 0.15s ease;
-}
-
-.e-162fca34 > .holder > input::-moz-range-thumb:hover
-{
-	transform: scale(1.1);
-}
-
-.e-162fca34 > .holder > input:disabled
-{
-	opacity: 0.5;
-	cursor: not-allowed;
-}
-
-/* Color variants */
-
-.e-162fca34 > .holder.brand > .track > .fill { background: var(--ot-brand); }
-.e-162fca34 > .holder.brand > input::-webkit-slider-thumb { background: var(--ot-brand); }
-.e-162fca34 > .holder.brand > input::-moz-range-thumb { background: var(--ot-brand); }
-
-.e-162fca34 > .holder.blue > .track > .fill { background: var(--ot-blue); }
-.e-162fca34 > .holder.blue > input::-webkit-slider-thumb { background: var(--ot-blue); }
-.e-162fca34 > .holder.blue > input::-moz-range-thumb { background: var(--ot-blue); }
-
-.e-162fca34 > .holder.red > .track > .fill { background: var(--ot-red); }
-.e-162fca34 > .holder.red > input::-webkit-slider-thumb { background: var(--ot-red); }
-.e-162fca34 > .holder.red > input::-moz-range-thumb { background: var(--ot-red); }
-
-.e-162fca34 > .holder.orange > .track > .fill { background: var(--ot-orange); }
-.e-162fca34 > .holder.orange > input::-webkit-slider-thumb { background: var(--ot-orange); }
-.e-162fca34 > .holder.orange > input::-moz-range-thumb { background: var(--ot-orange); }
-
-.e-162fca34 > .holder.green > .track > .fill { background: var(--ot-green); }
-.e-162fca34 > .holder.green > input::-webkit-slider-thumb { background: var(--ot-green); }
-.e-162fca34 > .holder.green > input::-moz-range-thumb { background: var(--ot-green); }
-
-/* Size variants */
-
-.e-162fca34 > .holder.size-s > .track { height: 4px; }
-.e-162fca34 > .holder.size-s > input { height: 16px; }
-.e-162fca34 > .holder.size-s > input::-webkit-slider-thumb { width: 14px; height: 14px; }
-.e-162fca34 > .holder.size-s > input::-moz-range-thumb { width: 14px; height: 14px; }
-
-.e-162fca34 > .holder.size-m > .track { height: 6px; }
-.e-162fca34 > .holder.size-m > input { height: 20px; }
-.e-162fca34 > .holder.size-m > input::-webkit-slider-thumb { width: 18px; height: 18px; }
-.e-162fca34 > .holder.size-m > input::-moz-range-thumb { width: 18px; height: 18px; }
-
-.e-162fca34 > .holder.size-l > .track { height: 8px; }
-.e-162fca34 > .holder.size-l > input { height: 24px; }
-.e-162fca34 > .holder.size-l > input::-webkit-slider-thumb { width: 22px; height: 22px; }
-.e-162fca34 > .holder.size-l > input::-moz-range-thumb { width: 22px; height: 22px; }
+/* Root */
+
+.e-162fca34
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-162fca34 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
+	width: 100%;
+	font-family: var(--ot-font-primary);
+}
+
+/* Head (label + description + value) */
+
+.e-162fca34 > .holder > .head
+{
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--ot-spacing-m);
+}
+
+.e-162fca34 > .holder > .head > .info
+{
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+	flex: 1;
+}
+
+.e-162fca34 > .holder > .head > .info > .label
+{
+	font-size: var(--ot-size-m);
+	font-weight: 500;
+	color: var(--ot-text-1);
+	line-height: 1.3;
+}
+
+.e-162fca34 > .holder > .head > .info > .description
+{
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-3);
+	line-height: 1.4;
+}
+
+.e-162fca34 > .holder > .head > .value
+{
+	font-size: var(--ot-size-m);
+	font-weight: 600;
+	color: var(--ot-text-1);
+	font-variant-numeric: tabular-nums;
+	padding: 2px var(--ot-spacing-s);
+	background: var(--ot-bg-2);
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: var(--ot-radius-s);
+	flex-shrink: 0;
+}
+
+/* Control (track + input) */
+
+.e-162fca34 > .holder > .control
+{
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 100%;
+}
+
+/* Track */
+
+.e-162fca34 > .holder > .control > .track
+{
+	position: absolute;
+	left: 0;
+	right: 0;
+	height: 6px;
+	background: var(--ot-bg-3);
+	border-radius: var(--ot-radius-s);
+	pointer-events: none;
+	overflow: hidden;
+}
+
+.e-162fca34 > .holder > .control > .track > .fill
+{
+	height: 100%;
+	background: var(--ot-brand);
+	border-radius: var(--ot-radius-s);
+	transition: width 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* Marks */
+
+.e-162fca34 > .holder > .control > .track > .marks
+{
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 100%;
+	pointer-events: none;
+}
+
+.e-162fca34 > .holder > .control > .track > .marks > .mark
+{
+	position: absolute;
+	top: 50%;
+	width: 2px;
+	height: 2px;
+	border-radius: 50%;
+	background: var(--ot-bg-1);
+	transform: translate(-50%, -50%);
+	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-162fca34 > .holder > .control > .track > .marks > .mark.active
+{
+	background: rgba(255, 255, 255, 0.5);
+}
+
+/* Native input (range) */
+
+.e-162fca34 > .holder > .control > input
+{
+	position: relative;
+	width: 100%;
+	margin: 0;
+	padding: 0;
+	background: transparent;
+	-webkit-appearance: none;
+	appearance: none;
+	cursor: pointer;
+	z-index: 1;
+}
+
+.e-162fca34 > .holder > .control > input:focus
+{
+	outline: none;
+}
+
+/* Thumb — WebKit */
+
+.e-162fca34 > .holder > .control > input::-webkit-slider-thumb
+{
+	-webkit-appearance: none;
+	appearance: none;
+	background: white;
+	border: none;
+	border-radius: 50%;
+	cursor: pointer;
+	box-shadow: 0 1px 3px rgba(20, 20, 30, 0.16), 0 1px 2px rgba(20, 20, 30, 0.08), 0 0 0 1px rgba(20, 20, 30, 0.08);
+	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-162fca34 > .holder > .control > input::-webkit-slider-thumb:hover
+{
+	transform: scale(1.1);
+}
+
+.e-162fca34 > .holder > .control > input:active::-webkit-slider-thumb
+{
+	transform: scale(1.05);
+	box-shadow: 0 2px 6px rgba(20, 20, 30, 0.2), 0 0 0 8px var(--ot-brand-opacity);
+}
+
+.e-162fca34 > .holder > .control > input:focus-visible::-webkit-slider-thumb
+{
+	box-shadow: 0 1px 3px rgba(20, 20, 30, 0.16), 0 0 0 4px var(--ot-brand-opacity);
+}
+
+/* Thumb — Firefox */
+
+.e-162fca34 > .holder > .control > input::-moz-range-thumb
+{
+	background: white;
+	border: none;
+	border-radius: 50%;
+	cursor: pointer;
+	box-shadow: 0 1px 3px rgba(20, 20, 30, 0.16), 0 1px 2px rgba(20, 20, 30, 0.08), 0 0 0 1px rgba(20, 20, 30, 0.08);
+	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-162fca34 > .holder > .control > input::-moz-range-thumb:hover
+{
+	transform: scale(1.1);
+}
+
+.e-162fca34 > .holder > .control > input:active::-moz-range-thumb
+{
+	transform: scale(1.05);
+	box-shadow: 0 2px 6px rgba(20, 20, 30, 0.2), 0 0 0 8px var(--ot-brand-opacity);
+}
+
+/* Range labels */
+
+.e-162fca34 > .holder > .range
+{
+	display: flex;
+	justify-content: space-between;
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-3);
+	font-variant-numeric: tabular-nums;
+}
+
+/* Disabled */
+
+.e-162fca34 > .holder.disabled
+{
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.e-162fca34 > .holder.disabled .label,
+.e-162fca34 > .holder.disabled .description,
+.e-162fca34 > .holder.disabled .value
+{
+	color: var(--ot-text-3);
+}
+
+/* ===== COLOR VARIANTS ===== */
+
+.e-162fca34 > .holder.brand > .control > .track > .fill { background: var(--ot-brand); }
+.e-162fca34 > .holder.brand > .control > input:active::-webkit-slider-thumb { box-shadow: 0 2px 6px rgba(20, 20, 30, 0.2), 0 0 0 8px var(--ot-brand-opacity); }
+.e-162fca34 > .holder.brand > .control > input:active::-moz-range-thumb { box-shadow: 0 2px 6px rgba(20, 20, 30, 0.2), 0 0 0 8px var(--ot-brand-opacity); }
+.e-162fca34 > .holder.brand > .control > input:focus-visible::-webkit-slider-thumb { box-shadow: 0 1px 3px rgba(20, 20, 30, 0.16), 0 0 0 4px var(--ot-brand-opacity); }
+
+.e-162fca34 > .holder.blue > .control > .track > .fill { background: var(--ot-blue); }
+.e-162fca34 > .holder.blue > .control > input:active::-webkit-slider-thumb { box-shadow: 0 2px 6px rgba(20, 20, 30, 0.2), 0 0 0 8px var(--ot-blue-opacity); }
+.e-162fca34 > .holder.blue > .control > input:active::-moz-range-thumb { box-shadow: 0 2px 6px rgba(20, 20, 30, 0.2), 0 0 0 8px var(--ot-blue-opacity); }
+.e-162fca34 > .holder.blue > .control > input:focus-visible::-webkit-slider-thumb { box-shadow: 0 1px 3px rgba(20, 20, 30, 0.16), 0 0 0 4px var(--ot-blue-opacity); }
+
+.e-162fca34 > .holder.red > .control > .track > .fill { background: var(--ot-red); }
+.e-162fca34 > .holder.red > .control > input:active::-webkit-slider-thumb { box-shadow: 0 2px 6px rgba(20, 20, 30, 0.2), 0 0 0 8px var(--ot-red-opacity); }
+.e-162fca34 > .holder.red > .control > input:active::-moz-range-thumb { box-shadow: 0 2px 6px rgba(20, 20, 30, 0.2), 0 0 0 8px var(--ot-red-opacity); }
+.e-162fca34 > .holder.red > .control > input:focus-visible::-webkit-slider-thumb { box-shadow: 0 1px 3px rgba(20, 20, 30, 0.16), 0 0 0 4px var(--ot-red-opacity); }
+
+.e-162fca34 > .holder.orange > .control > .track > .fill { background: var(--ot-orange); }
+.e-162fca34 > .holder.orange > .control > input:active::-webkit-slider-thumb { box-shadow: 0 2px 6px rgba(20, 20, 30, 0.2), 0 0 0 8px var(--ot-orange-opacity); }
+.e-162fca34 > .holder.orange > .control > input:active::-moz-range-thumb { box-shadow: 0 2px 6px rgba(20, 20, 30, 0.2), 0 0 0 8px var(--ot-orange-opacity); }
+.e-162fca34 > .holder.orange > .control > input:focus-visible::-webkit-slider-thumb { box-shadow: 0 1px 3px rgba(20, 20, 30, 0.16), 0 0 0 4px var(--ot-orange-opacity); }
+
+.e-162fca34 > .holder.green > .control > .track > .fill { background: var(--ot-green); }
+.e-162fca34 > .holder.green > .control > input:active::-webkit-slider-thumb { box-shadow: 0 2px 6px rgba(20, 20, 30, 0.2), 0 0 0 8px var(--ot-green-opacity); }
+.e-162fca34 > .holder.green > .control > input:active::-moz-range-thumb { box-shadow: 0 2px 6px rgba(20, 20, 30, 0.2), 0 0 0 8px var(--ot-green-opacity); }
+.e-162fca34 > .holder.green > .control > input:focus-visible::-webkit-slider-thumb { box-shadow: 0 1px 3px rgba(20, 20, 30, 0.16), 0 0 0 4px var(--ot-green-opacity); }
+
+/* ===== SIZE VARIANTS ===== */
+
+.e-162fca34 > .holder.size-s > .control > .track
+{
+	height: 4px;
+}
+.e-162fca34 > .holder.size-s > .control > input
+{
+	height: 14px;
+}
+.e-162fca34 > .holder.size-s > .control > input::-webkit-slider-thumb
+{
+	width: 14px;
+	height: 14px;
+}
+.e-162fca34 > .holder.size-s > .control > input::-moz-range-thumb
+{
+	width: 14px;
+	height: 14px;
+}
+.e-162fca34 > .holder.size-s > .head > .info > .label
+{
+	font-size: var(--ot-size-s);
+}
+.e-162fca34 > .holder.size-s > .head > .value
+{
+	font-size: var(--ot-size-s);
+}
+.e-162fca34 > .holder.size-s > .range
+{
+	font-size: 10.5px;
+}
+
+.e-162fca34 > .holder.size-m > .control > .track
+{
+	height: 6px;
+}
+.e-162fca34 > .holder.size-m > .control > input
+{
+	height: 18px;
+}
+.e-162fca34 > .holder.size-m > .control > input::-webkit-slider-thumb
+{
+	width: 18px;
+	height: 18px;
+}
+.e-162fca34 > .holder.size-m > .control > input::-moz-range-thumb
+{
+	width: 18px;
+	height: 18px;
+}
+
+.e-162fca34 > .holder.size-l > .control > .track
+{
+	height: 8px;
+}
+.e-162fca34 > .holder.size-l > .control > input
+{
+	height: 22px;
+}
+.e-162fca34 > .holder.size-l > .control > input::-webkit-slider-thumb
+{
+	width: 22px;
+	height: 22px;
+}
+.e-162fca34 > .holder.size-l > .control > input::-moz-range-thumb
+{
+	width: 22px;
+	height: 22px;
+}
+.e-162fca34 > .holder.size-l > .head > .info > .label
+{
+	font-size: var(--ot-size-m);
+}
+.e-162fca34 > .holder.size-l > .head > .value
+{
+	font-size: 15px;
+}

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

@@ -4,13 +4,22 @@ onetype.AddonReady('elements', (elements) =>
 		id: 'form-slider',
 		icon: 'linear_scale',
 		name: 'Slider',
-		description: 'Range slider for selecting numeric values.',
+		description: 'Premium range slider with label, value display, marks, tooltip and color variants.',
 		category: 'Form',
 		author: 'OneType',
 		config: {
+			label: {
+				type: 'string'
+			},
+			description: {
+				type: 'string'
+			},
+			name: {
+				type: 'string'
+			},
 			value: {
 				type: 'number',
-				value: 50
+				value: 0
 			},
 			min: {
 				type: 'number',
@@ -22,11 +31,25 @@ onetype.AddonReady('elements', (elements) =>
 			},
 			step: {
 				type: 'number',
-				value: 10
+				value: 1
+			},
+			showValue: {
+				type: 'boolean'
+			},
+			showRange: {
+				type: 'boolean'
+			},
+			marks: {
+				type: 'boolean'
+			},
+			prefix: {
+				type: 'string'
+			},
+			suffix: {
+				type: 'string'
 			},
 			disabled: {
-				type: 'boolean',
-				value: false
+				type: 'boolean'
 			},
 			variant: {
 				type: 'array',
@@ -42,11 +65,70 @@ onetype.AddonReady('elements', (elements) =>
 		},
 		render: function()
 		{
+			this.hasInfo = !!this.label || !!this.description;
+			this.hasMeta = this.showValue || this.showRange;
+
+			this.format = (value) =>
+			{
+				return (this.prefix || '') + value + (this.suffix || '');
+			};
+
+			this.percentage = () =>
+			{
+				if(this.max === this.min)
+				{
+					return 0;
+				}
+
+				return ((this.value - this.min) / (this.max - this.min)) * 100;
+			};
+
+			this.computeMarks = () =>
+			{
+				if(!this.marks || !this.step || this.step <= 0)
+				{
+					return [];
+				}
+
+				const range = this.max - this.min;
+				const count = Math.floor(range / this.step);
+
+				if(count > 20)
+				{
+					return [];
+				}
+
+				const result = [];
+
+				for(let i = 0; i <= count; i++)
+				{
+					const value = this.min + i * this.step;
+					const percent = (i / count) * 100;
+
+					result.push({ value, percent });
+				}
+
+				return result;
+			};
+
+			this.marksList = this.computeMarks();
+			this.hasMarks = this.marksList.length > 0;
+
+			this.OnReady(() =>
+			{
+				const input = this.Element?.querySelector('input[type="range"]');
+
+				if(input)
+				{
+					input.value = this.value;
+				}
+			});
+
 			this.handle = ({ event }) =>
 			{
 				this.value = parseFloat(event.target.value);
 
-				if (this._input)
+				if(this._input)
 				{
 					this._input({ event, value: this.value });
 				}
@@ -56,32 +138,48 @@ onetype.AddonReady('elements', (elements) =>
 			{
 				this.value = parseFloat(event.target.value);
 
-				if (this._change)
+				if(this._change)
 				{
 					this._change({ event, value: this.value });
 				}
 			};
 
-			this.percentage = () =>
-			{
-				return ((this.value - this.min) / (this.max - this.min)) * 100;
-			};
-
-			return `
-				<div :class="'holder ' + variant.join(' ')">
-					<div class="track">
-						<div class="fill" :style="'width: ' + percentage() + '%'"></div>
+			return /* html */ `
+				<div :class="'holder ' + variant.join(' ') + (disabled ? ' disabled' : '')">
+					<div ot-if="hasInfo || showValue" class="head">
+						<div ot-if="hasInfo" class="info">
+							<span ot-if="label" class="label">{{ label }}</span>
+							<span ot-if="description" class="description">{{ description }}</span>
+						</div>
+						<span ot-if="showValue" class="value">{{ format(value) }}</span>
+					</div>
+					<div class="control">
+						<div class="track">
+							<div class="fill" :style="'width: ' + percentage() + '%'"></div>
+							<div ot-if="hasMarks" class="marks">
+								<span
+									ot-for="mark in marksList"
+									:class="'mark' + (mark.value <= value ? ' active' : '')"
+									:style="'left: ' + mark.percent + '%'"
+								></span>
+							</div>
+						</div>
+						<input
+							type="range"
+							:value="value"
+							:name="name"
+							:min="min"
+							:max="max"
+							:step="step"
+							:disabled="disabled"
+							ot-input="handle"
+							ot-change="commit"
+						/>
+					</div>
+					<div ot-if="showRange" class="range">
+						<span class="range-min">{{ format(min) }}</span>
+						<span class="range-max">{{ format(max) }}</span>
 					</div>
-					<input
-						type="range"
-						:value="value"
-						:min="min"
-						:max="max"
-						:step="step"
-						:disabled="disabled"
-						ot-input="handle"
-						ot-change="commit"
-					/>
 				</div>
 			`;
 		}