@onetype/framework 2.0.53 → 2.0.55

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

@@ -1,57 +1,234 @@
-/* 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; }
+/* Root */
+
+.e-13e502f0
+{
+	display: inline-flex;
+}
+
+/* Holder */
+
+.e-13e502f0 > .holder
+{
+	display: inline-flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
+	font-family: var(--ot-font-primary);
+}
+
+/* Info (label + description) */
+
+.e-13e502f0 > .holder > .info
+{
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.e-13e502f0 > .holder > .info > .label
+{
+	font-size: var(--ot-size-m);
+	font-weight: 500;
+	color: var(--ot-text-1);
+	line-height: 1.3;
+}
+
+.e-13e502f0 > .holder > .info > .description
+{
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-3);
+	line-height: 1.4;
+}
+
+/* Row (stars + meta) */
+
+.e-13e502f0 > .holder > .row
+{
+	display: inline-flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+}
+
+/* Stars container */
+
+.e-13e502f0 > .holder > .row > .stars
+{
+	display: inline-flex;
+	align-items: center;
+	gap: var(--ot-spacing-x);
+}
+
+/* Single star */
+
+.e-13e502f0 .star
+{
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0;
+	border: none;
+	background: transparent;
+	cursor: pointer;
+	outline: none;
+	color: var(--ot-bg-3-border);
+	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-13e502f0 .star:hover:not(:disabled)
+{
+	transform: scale(1.15);
+}
+
+.e-13e502f0 .star:active:not(:disabled)
+{
+	transform: scale(1);
+	transition-duration: 0.1s;
+}
+
+.e-13e502f0 .star:disabled
+{
+	cursor: default;
+}
+
+.e-13e502f0 .star:focus-visible
+{
+	outline: none;
+}
+
+.e-13e502f0 .star:focus-visible > .base
+{
+	filter: drop-shadow(0 0 6px var(--ot-brand-opacity));
+}
+
+/* Base icon (outline) */
+
+.e-13e502f0 .star > .base
+{
+	position: relative;
+	z-index: 1;
+	color: var(--ot-bg-3-border);
+	font-variation-settings: 'FILL' 0;
+}
+
+/* Fill icon (overlay) */
+
+.e-13e502f0 .star > .fill
+{
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	z-index: 2;
+	transform: translate(-50%, -50%);
+	width: 0;
+	overflow: hidden;
+	font-variation-settings: 'FILL' 1;
+	transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+	pointer-events: none;
+}
+
+.e-13e502f0 .star.fill-50 > .fill
+{
+	width: 50%;
+	left: 0;
+	transform: translate(0, -50%);
+}
+
+.e-13e502f0 .star.fill-100 > .fill
+{
+	width: 100%;
+	left: 0;
+	transform: translate(0, -50%);
+}
+
+/* Half-click area (left half of star for 0.5 precision) */
+
+.e-13e502f0 .star > .half
+{
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 3;
+	width: 50%;
+	height: 100%;
+	cursor: pointer;
+}
+
+/* Readonly / disabled */
+
+.e-13e502f0 > .holder.readonly .star,
+.e-13e502f0 > .holder.disabled .star
+{
+	cursor: default;
+	pointer-events: none;
+}
+
+.e-13e502f0 > .holder.readonly .star:hover,
+.e-13e502f0 > .holder.disabled .star:hover
+{
+	transform: none;
+}
+
+.e-13e502f0 > .holder.disabled
+{
+	opacity: 0.5;
+}
+
+/* Meta (value + count) */
+
+.e-13e502f0 > .holder > .row > .meta
+{
+	display: inline-flex;
+	align-items: baseline;
+	gap: var(--ot-spacing-x);
+	margin-left: var(--ot-spacing-x);
+}
+
+.e-13e502f0 > .holder > .row > .meta > .value
+{
+	font-size: var(--ot-size-m);
+	font-weight: 600;
+	color: var(--ot-text-1);
+	font-variant-numeric: tabular-nums;
+}
+
+.e-13e502f0 > .holder > .row > .meta > .count
+{
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-3);
+	font-variant-numeric: tabular-nums;
+}
+
+/* ===== COLOR VARIANTS ===== */
+
+.e-13e502f0 > .holder.brand .star > .fill { color: var(--ot-brand); }
+.e-13e502f0 > .holder.brand .star:focus-visible > .base { filter: drop-shadow(0 0 6px var(--ot-brand-opacity)); }
+
+.e-13e502f0 > .holder.blue .star > .fill { color: var(--ot-blue); }
+.e-13e502f0 > .holder.blue .star:focus-visible > .base { filter: drop-shadow(0 0 6px var(--ot-blue-opacity)); }
+
+.e-13e502f0 > .holder.red .star > .fill { color: var(--ot-red); }
+.e-13e502f0 > .holder.red .star:focus-visible > .base { filter: drop-shadow(0 0 6px var(--ot-red-opacity)); }
+
+.e-13e502f0 > .holder.orange .star > .fill { color: var(--ot-orange); }
+.e-13e502f0 > .holder.orange .star:focus-visible > .base { filter: drop-shadow(0 0 6px var(--ot-orange-opacity)); }
+
+.e-13e502f0 > .holder.green .star > .fill { color: var(--ot-green); }
+.e-13e502f0 > .holder.green .star:focus-visible > .base { filter: drop-shadow(0 0 6px var(--ot-green-opacity)); }
+
+/* ===== SIZE VARIANTS ===== */
+
+.e-13e502f0 > .holder.size-s > .row > .stars { gap: 2px; }
+.e-13e502f0 > .holder.size-s .star > .base,
+.e-13e502f0 > .holder.size-s .star > .fill { font-size: 16px; }
+.e-13e502f0 > .holder.size-s > .row > .meta > .value { font-size: var(--ot-size-s); }
+.e-13e502f0 > .holder.size-s > .row > .meta > .count { font-size: 10.5px; }
+
+.e-13e502f0 > .holder.size-m > .row > .stars { gap: var(--ot-spacing-x); }
+.e-13e502f0 > .holder.size-m .star > .base,
+.e-13e502f0 > .holder.size-m .star > .fill { font-size: 22px; }
+
+.e-13e502f0 > .holder.size-l > .row > .stars { gap: var(--ot-spacing-s); }
+.e-13e502f0 > .holder.size-l .star > .base,
+.e-13e502f0 > .holder.size-l .star > .fill { font-size: 30px; }
+.e-13e502f0 > .holder.size-l > .row > .meta > .value { font-size: 15px; }
+.e-13e502f0 > .holder.size-l > .row > .meta > .count { font-size: var(--ot-size-m); }

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

@@ -1,86 +1,216 @@
-onetype.AddonReady('elements', (elements) =>
-{
-	elements.ItemAdd({
-		id: 'form-rating',
-		icon: 'star',
-		name: 'Rating',
-		description: 'Star rating with interactive and readonly modes.',
-		category: 'Form',
-		author: 'OneType',
-		config: {
-			value: {
-				type: 'number',
-				value: 3
-			},
-			max: {
-				type: 'number',
-				value: 5
-			},
-			readonly: {
-				type: 'boolean',
-				value: false
-			},
-			variant: {
-				type: 'array',
-				value: ['brand', 'size-m'],
-				options: ['brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
-			},
-			_change: {
-				type: 'function'
-			}
-		},
-		render: function()
-		{
-			this.hover = null;
-
-			this.stars = () =>
-			{
-				const result = [];
-				for (let i = 0; i < this.max; i++)
-				{
-					result.push(i);
-				}
-				return result;
-			};
-
-			this.filled = (index) =>
-			{
-				return this.hover !== null ? index <= this.hover : index < this.value;
-			};
-
-			this.select = (index) =>
-			{
-				if (this.readonly) return;
-				this.value = index + 1;
-
-				if (this._change)
-				{
-					this._change({ value: this.value });
-				}
-			};
-
-			this.enter = (index) =>
-			{
-				if (this.readonly) return;
-				this.hover = index;
-			};
-
-			this.leave = () =>
-			{
-				if (this.readonly) return;
-				this.hover = null;
-			};
-
-			return `
-				<div :class="'holder ' + variant.join(' ') + (readonly ? ' readonly' : '')" ot-mouse-leave="leave">
-					<i
-						ot-for="index in stars()"
-						:class="'star' + (filled(index) ? ' filled' : '')"
-						ot-click="() => select(index)"
-						ot-mouse-enter="() => enter(index)"
-					>star</i>
-				</div>
-			`;
-		}
-	});
-});
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'form-rating',
+		icon: 'star',
+		name: 'Rating',
+		description: 'Premium star rating with half-stars, custom icon, label and review count.',
+		category: 'Form',
+		author: 'OneType',
+		config: {
+			label: {
+				type: 'string'
+			},
+			description: {
+				type: 'string'
+			},
+			value: {
+				type: 'number',
+				value: 0
+			},
+			max: {
+				type: 'number',
+				value: 5
+			},
+			precision: {
+				type: 'number',
+				value: 1,
+				options: [1, 0.5]
+			},
+			icon: {
+				type: 'string',
+				value: 'star'
+			},
+			count: {
+				type: 'number'
+			},
+			showValue: {
+				type: 'boolean'
+			},
+			readonly: {
+				type: 'boolean'
+			},
+			disabled: {
+				type: 'boolean'
+			},
+			variant: {
+				type: 'array',
+				value: ['brand', 'size-m'],
+				options: ['brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
+			},
+			_change: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			this.hover = null;
+			this.hasInfo = !!this.label || !!this.description;
+			this.hasMeta = this.showValue || this.count != null;
+			this.locked = this.readonly || this.disabled;
+
+			this.stars = () =>
+			{
+				const result = [];
+
+				for(let i = 0; i < this.max; i++)
+				{
+					result.push(i);
+				}
+
+				return result;
+			};
+
+			this.fillFor = (index) =>
+			{
+				const current = this.hover !== null ? this.hover : this.value;
+				const diff = current - index;
+
+				if(diff >= 1)
+				{
+					return 100;
+				}
+
+				if(diff >= 0.5 && this.precision === 0.5)
+				{
+					return 50;
+				}
+
+				if(diff > 0 && this.precision === 1)
+				{
+					return 100;
+				}
+
+				return 0;
+			};
+
+			this.computed = () =>
+			{
+				return this.stars().map(index =>
+				{
+					const fill = this.fillFor(index);
+
+					return {
+						index,
+						fill,
+						active: fill > 0
+					};
+				});
+			};
+
+			this.select = (event, index, half) =>
+			{
+				if(this.locked)
+				{
+					return;
+				}
+
+				let next;
+
+				if(this.precision === 0.5 && half)
+				{
+					next = index + 0.5;
+				}
+				else
+				{
+					next = index + 1;
+				}
+
+				if(this.value === next)
+				{
+					this.value = 0;
+				}
+				else
+				{
+					this.value = next;
+				}
+
+				if(this._change)
+				{
+					this._change({ event, value: this.value });
+				}
+			};
+
+			this.enter = (index, half) =>
+			{
+				if(this.locked)
+				{
+					return;
+				}
+
+				if(this.precision === 0.5 && half)
+				{
+					this.hover = index + 0.5;
+				}
+				else
+				{
+					this.hover = index + 1;
+				}
+			};
+
+			this.leave = () =>
+			{
+				if(this.locked)
+				{
+					return;
+				}
+
+				this.hover = null;
+			};
+
+			this.formatValue = (value) =>
+			{
+				if(value == null)
+				{
+					return '';
+				}
+
+				return Number(value).toFixed(this.precision === 0.5 ? 1 : 0);
+			};
+
+			return /* html */ `
+				<div :class="'holder ' + variant.join(' ') + (readonly ? ' readonly' : '') + (disabled ? ' disabled' : '')">
+					<div ot-if="hasInfo" class="info">
+						<span ot-if="label" class="label">{{ label }}</span>
+						<span ot-if="description" class="description">{{ description }}</span>
+					</div>
+					<div class="row">
+						<div class="stars" ot-mouse-leave="leave">
+							<button
+								ot-for="star in computed()"
+								type="button"
+								:class="'star fill-' + star.fill + (star.active ? ' active' : '')"
+								:disabled="locked"
+								ot-click="(event) => select(event, star.index, false)"
+								ot-mouse-enter="() => enter(star.index, false)"
+							>
+								<i class="base">{{ icon }}</i>
+								<i class="fill">{{ icon }}</i>
+								<span
+									ot-if="precision === 0.5"
+									class="half"
+									ot-click.stop="(event) => select(event, star.index, true)"
+									ot-mouse-enter="() => enter(star.index, true)"
+								></span>
+							</button>
+						</div>
+						<div ot-if="hasMeta" class="meta">
+							<span ot-if="showValue" class="value">{{ formatValue(value) }}</span>
+							<span ot-if="count != null" class="count">({{ count }})</span>
+						</div>
+					</div>
+				</div>
+			`;
+		}
+	});
+});