@onetype/framework 2.0.53 → 2.0.54

package/addons/render/elements/front/items/self/navigation/sidebar/sidebar.js

@@ -4,17 +4,26 @@ onetype.AddonReady('elements', (elements) =>
 		id: 'navigation-sidebar',
 		icon: 'side_navigation',
 		name: 'Sidebar',
-		description: 'Vertical navigation sidebar with grouped items and slots.',
+		description: 'Secondary navigation sidebar with grouped items, header, badges and mobile drawer.',
 		category: 'Navigation',
 		author: 'OneType',
 		config: {
+			title: {
+				type: 'string'
+			},
+			subtitle: {
+				type: 'string'
+			},
+			version: {
+				type: 'string'
+			},
 			groups: {
 				type: 'array',
 				value: [],
 				each: {
 					type: 'object',
 					config: {
-						title: { type: 'string', value: '' },
+						title: { type: 'string' },
 						placement: { type: 'string', value: 'top', options: ['top', 'bottom'] },
 						items: {
 							type: 'array',
@@ -22,12 +31,16 @@ onetype.AddonReady('elements', (elements) =>
 							each: {
 								type: 'object',
 								config: {
-									icon: { type: 'string', value: '' },
-									label: { type: 'string', value: '' },
-									href: { type: 'string', value: '' },
-									value: { type: 'string', value: '' },
-									match: { type: 'string', value: '' },
-									count: { type: 'number', value: null }
+									icon: { type: 'string' },
+									label: { type: 'string' },
+									href: { type: 'string' },
+									target: { type: 'string' },
+									match: { type: 'string' },
+									value: { type: 'string' },
+									badge: { type: 'string|number' },
+									count: { type: 'string|number' },
+									soon: { type: 'boolean' },
+									disabled: { type: 'boolean' }
 								}
 							}
 						}
@@ -35,13 +48,12 @@ onetype.AddonReady('elements', (elements) =>
 				}
 			},
 			active: {
-				type: 'string',
-				value: ''
+				type: 'string'
 			},
 			variant: {
 				type: 'array',
-				value: [],
-				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border']
+				value: ['bg-2', 'border-right'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'border-top', 'border-right', 'border-bottom', 'border-left']
 			},
 			_click: {
 				type: 'function'
@@ -51,29 +63,65 @@ onetype.AddonReady('elements', (elements) =>
 		{
 			const path = onetype.RouteCurrent();
 
-			this.top = this.groups.filter(g => !g.placement || g.placement === 'top');
-			this.bottom = this.groups.filter(g => g.placement === 'bottom');
-			this.open = false;
-
 			this.isActive = (item) =>
 			{
-				if(item.href)
+				if(item.soon || item.disabled)
+				{
+					return false;
+				}
+
+				if(item.value && this.active)
 				{
-					if(item.match === 'exact' || item.href === '/') return path === item.href;
-					return path.startsWith(item.href);
+					return item.value === this.active;
 				}
 
-				return item.value === this.active;
+				if(item.match)
+				{
+					return path === item.match;
+				}
+
+				if(!item.href)
+				{
+					return false;
+				}
+
+				if(item.href === '/')
+				{
+					return path === '/';
+				}
+
+				return path.startsWith(item.href);
+			};
+
+			this.compute = (groups) =>
+			{
+				return (groups || [])
+					.filter(group => group.items && group.items.length)
+					.map(group => ({
+						...group,
+						items: group.items.map(item => ({ ...item, active: this.isActive(item) }))
+					}));
 			};
 
-			this.handleClick = (item) =>
+			this.top = this.compute(this.groups.filter(group => (group.placement || 'top') === 'top'));
+			this.bottom = this.compute(this.groups.filter(group => group.placement === 'bottom'));
+
+			this.hasHead = !!this.title || !!this.subtitle || !!this.version || !!this.Slots.top;
+			this.hasFoot = !!this.Slots.bottom;
+			this.open = false;
+
+			this.handle = (item, event) =>
 			{
-				this.active = item.value;
+				if(item.soon || item.disabled)
+				{
+					return;
+				}
+
 				this.open = false;
 
 				if(this._click)
 				{
-					this._click({ value: item });
+					this._click({ event, value: item });
 				}
 			};
 
@@ -82,54 +130,59 @@ onetype.AddonReady('elements', (elements) =>
 				this.open = !this.open;
 			};
 
-			return `
-				<nav :class="'holder ' + variant.join(' ')">
-					<slot name="top"></slot>
-					<div ot-for="group in top" class="group">
-						<p ot-if="group.title" class="title">{{ group.title }}</p>
-						<a ot-for="item in group.items" :class="'item' + (isActive(item) ? ' active' : '')" :href="item.href || 'javascript:void(0)'" ot-click="handleClick(item)">
-							<i ot-if="item.icon">{{ item.icon }}</i>
-							<span>{{ item.label }}</span>
-							<span ot-if="item.count !== undefined && item.count !== null" class="count">{{ item.count }}</span>
-						</a>
+			return /* html */ `
+				<aside :class="'holder ' + variant.join(' ')">
+					<div ot-if="hasHead" class="head">
+						<slot name="top"></slot>
+						<div ot-if="title" class="title">{{ title }}</div>
+						<div ot-if="subtitle" class="subtitle">{{ subtitle }}</div>
+						<div ot-if="version" class="version">{{ version }}</div>
 					</div>
-					<div ot-if="bottom.length" class="bottom">
-						<div ot-for="group in bottom" class="group">
-							<p ot-if="group.title" class="title">{{ group.title }}</p>
-							<a ot-for="item in group.items" :class="'item' + (isActive(item) ? ' active' : '')" :href="item.href || 'javascript:void(0)'" ot-click="handleClick(item)">
+
+					<nav class="stack">
+						<div ot-for="group in top" class="group">
+							<div ot-if="group.title" class="group-title">{{ group.title }}</div>
+							<a
+								ot-for="item in group.items"
+								:class="'item' + (item.active ? ' active' : '') + (item.soon ? ' soon' : '') + (item.disabled ? ' disabled' : '')"
+								:href="item.href && !item.soon && !item.disabled ? item.href : 'javascript:void(0)'"
+								:target="item.target"
+								ot-click="(event) => handle(item, event)"
+							>
 								<i ot-if="item.icon">{{ item.icon }}</i>
-								<span>{{ item.label }}</span>
-								<span ot-if="item.count !== undefined && item.count !== null" class="count">{{ item.count }}</span>
+								<span class="label">{{ item.label }}</span>
+								<span ot-if="item.badge" class="badge">{{ item.badge }}</span>
+								<span ot-if="item.count != null && !item.badge" class="count">{{ item.count }}</span>
+								<span ot-if="item.soon" class="soon-badge">Soon</span>
+								<i ot-if="!item.badge && item.count == null && !item.soon && !item.disabled" class="chevron">chevron_right</i>
 							</a>
 						</div>
-					</div>
-					<slot name="bottom"></slot>
-				</nav>
-				<div :class="'bar ' + variant.join(' ')" ot-click="toggle">
-					<i class="toggle">filter_list</i>
-				</div>
-				<div ot-if="open" class="overlay" ot-click="toggle"></div>
-				<nav ot-if="open" :class="'drawer ' + variant.join(' ')">
-					<button class="toggle" ot-click="toggle"><i>close</i></button>
-					<div ot-for="group in top" class="group">
-						<p ot-if="group.title" class="title">{{ group.title }}</p>
-						<a ot-for="item in group.items" :class="'item' + (isActive(item) ? ' active' : '')" :href="item.href || 'javascript:void(0)'" ot-click="handleClick(item)">
-							<i ot-if="item.icon">{{ item.icon }}</i>
-							<span>{{ item.label }}</span>
-							<span ot-if="item.count !== undefined && item.count !== null" class="count">{{ item.count }}</span>
-						</a>
-					</div>
-					<div ot-if="bottom.length" class="group">
+					</nav>
+
+					<nav ot-if="bottom.length" class="stack bottom">
 						<div ot-for="group in bottom" class="group">
-							<p ot-if="group.title" class="title">{{ group.title }}</p>
-							<a ot-for="item in group.items" :class="'item' + (isActive(item) ? ' active' : '')" :href="item.href || 'javascript:void(0)'" ot-click="handleClick(item)">
+							<div ot-if="group.title" class="group-title">{{ group.title }}</div>
+							<a
+								ot-for="item in group.items"
+								:class="'item' + (item.active ? ' active' : '') + (item.soon ? ' soon' : '') + (item.disabled ? ' disabled' : '')"
+								:href="item.href && !item.soon && !item.disabled ? item.href : 'javascript:void(0)'"
+								:target="item.target"
+								ot-click="(event) => handle(item, event)"
+							>
 								<i ot-if="item.icon">{{ item.icon }}</i>
-								<span>{{ item.label }}</span>
-								<span ot-if="item.count !== undefined && item.count !== null" class="count">{{ item.count }}</span>
+								<span class="label">{{ item.label }}</span>
+								<span ot-if="item.badge" class="badge">{{ item.badge }}</span>
+								<span ot-if="item.count != null && !item.badge" class="count">{{ item.count }}</span>
+								<span ot-if="item.soon" class="soon-badge">Soon</span>
+								<i ot-if="!item.badge && item.count == null && !item.soon && !item.disabled" class="chevron">chevron_right</i>
 							</a>
 						</div>
+					</nav>
+
+					<div ot-if="hasFoot" class="foot">
+						<slot name="bottom"></slot>
 					</div>
-				</nav>
+				</aside>
 			`;
 		}
 	});

package/addons/render/elements/front/items/self/navigation/steps/steps.css

@@ -0,0 +1,345 @@
+/* Root */
+
+.e-36dc8444
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-36dc8444 > .holder
+{
+	display: flex;
+	width: 100%;
+	border-radius: var(--ot-radius-l);
+	overflow: hidden;
+}
+
+.e-36dc8444 > .holder.vertical
+{
+	flex-direction: column;
+}
+
+.e-36dc8444 > .holder.horizontal
+{
+	flex-direction: row;
+	align-items: stretch;
+}
+
+/* Step */
+
+.e-36dc8444 .step
+{
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-m);
+	padding: var(--ot-spacing-m);
+	background: transparent;
+	border: none;
+	text-align: left;
+	font-family: var(--ot-font-primary);
+	cursor: pointer;
+	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-36dc8444 > .holder.vertical > .step
+{
+	width: 100%;
+}
+
+.e-36dc8444 > .holder.horizontal > .step
+{
+	flex: 1;
+	flex-direction: column;
+	text-align: center;
+	align-items: center;
+}
+
+.e-36dc8444 .step:hover:not(.disabled)
+{
+	background: var(--ot-bg-2-opacity);
+}
+
+/* Marker */
+
+.e-36dc8444 .step > .marker
+{
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	border-radius: 50%;
+	background: var(--ot-bg-2);
+	border: 1px solid var(--ot-bg-2-border);
+	color: var(--ot-text-2);
+	font-weight: 600;
+	z-index: 1;
+	transition: background 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-36dc8444 .step > .marker > i
+{
+	font-variation-settings: 'wght' 500;
+}
+
+/* Text */
+
+.e-36dc8444 .step > .text
+{
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+	flex: 1;
+}
+
+.e-36dc8444 .step > .text > .label
+{
+	font-weight: 600;
+	color: var(--ot-text-2);
+	line-height: 1.3;
+	transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-36dc8444 .step > .text > .description
+{
+	color: var(--ot-text-3);
+	line-height: 1.4;
+	font-weight: 400;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	-webkit-box-orient: vertical;
+}
+
+/* Done state */
+
+.e-36dc8444 .step.done > .marker
+{
+	background: var(--ot-brand);
+	border-color: var(--ot-brand);
+	color: white;
+}
+
+.e-36dc8444 .step.done > .text > .label
+{
+	color: var(--ot-text-1);
+}
+
+/* Active state */
+
+.e-36dc8444 .step.active > .marker
+{
+	background: var(--ot-brand);
+	border-color: var(--ot-brand);
+	color: white;
+	transform: scale(1.05);
+	box-shadow: 0 0 0 4px var(--ot-brand-opacity);
+}
+
+.e-36dc8444 .step.active > .text > .label
+{
+	color: var(--ot-brand);
+}
+
+.e-36dc8444 .step.active > .text > .description
+{
+	color: var(--ot-text-2);
+}
+
+/* Upcoming state (default styles already handle this) */
+
+/* Disabled state */
+
+.e-36dc8444 .step.disabled
+{
+	cursor: not-allowed;
+	opacity: 0.45;
+}
+
+.e-36dc8444 .step.disabled:hover
+{
+	background: transparent;
+}
+
+/* ===== CONNECTED (progress line) ===== */
+
+.e-36dc8444 > .holder.vertical.connected > .step + .step::before
+{
+	content: '';
+	position: absolute;
+	width: 2px;
+	background: var(--ot-bg-2-border);
+	transition: background 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+	z-index: 0;
+}
+
+.e-36dc8444 > .holder.vertical.connected > .step.done + .step::before
+{
+	background: var(--ot-brand);
+}
+
+.e-36dc8444 > .holder.horizontal.connected > .step + .step::before
+{
+	content: '';
+	position: absolute;
+	height: 2px;
+	background: var(--ot-bg-2-border);
+	transition: background 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+	z-index: 0;
+}
+
+.e-36dc8444 > .holder.horizontal.connected > .step.done + .step::before
+{
+	background: var(--ot-brand);
+}
+
+/* ===== CLEAN (no bg, no border, no radius) ===== */
+
+.e-36dc8444 > .holder.clean
+{
+	background: transparent !important;
+	border: none !important;
+	border-radius: 0;
+}
+
+/* ===== BACKGROUNDS ===== */
+
+.e-36dc8444 > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-36dc8444 > .holder.bg-1 .step.upcoming > .marker { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
+.e-36dc8444 > .holder.bg-1 .step:hover:not(.disabled) { background: var(--ot-bg-1-hover); }
+
+.e-36dc8444 > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-36dc8444 > .holder.bg-2 .step.upcoming > .marker { background: var(--ot-bg-1); border-color: var(--ot-bg-2-border); }
+.e-36dc8444 > .holder.bg-2 .step:hover:not(.disabled) { background: var(--ot-bg-2-hover); }
+
+.e-36dc8444 > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-36dc8444 > .holder.bg-3 .step.upcoming > .marker { background: var(--ot-bg-2); border-color: var(--ot-bg-3-border); }
+.e-36dc8444 > .holder.bg-3 .step:hover:not(.disabled) { background: var(--ot-bg-3-hover); }
+
+.e-36dc8444 > .holder.bg-4 { background: var(--ot-bg-4); }
+.e-36dc8444 > .holder.bg-4 .step.upcoming > .marker { background: var(--ot-bg-3); border-color: var(--ot-bg-4-border); }
+.e-36dc8444 > .holder.bg-4 .step:hover:not(.disabled) { background: var(--ot-bg-4-hover); }
+
+/* ===== BORDERS ===== */
+
+.e-36dc8444 > .holder.border { border: 1px solid var(--ot-bg-2-border); }
+.e-36dc8444 > .holder.border-top { border-top: 1px solid var(--ot-bg-2-border); }
+.e-36dc8444 > .holder.border-right { border-right: 1px solid var(--ot-bg-2-border); }
+.e-36dc8444 > .holder.border-bottom { border-bottom: 1px solid var(--ot-bg-2-border); }
+.e-36dc8444 > .holder.border-left { border-left: 1px solid var(--ot-bg-2-border); }
+
+.e-36dc8444 > .holder.bg-1.border,
+.e-36dc8444 > .holder.bg-1.border-top,
+.e-36dc8444 > .holder.bg-1.border-right,
+.e-36dc8444 > .holder.bg-1.border-bottom,
+.e-36dc8444 > .holder.bg-1.border-left { border-color: var(--ot-bg-1-border); }
+
+.e-36dc8444 > .holder.bg-2.border,
+.e-36dc8444 > .holder.bg-2.border-top,
+.e-36dc8444 > .holder.bg-2.border-right,
+.e-36dc8444 > .holder.bg-2.border-bottom,
+.e-36dc8444 > .holder.bg-2.border-left { border-color: var(--ot-bg-2-border); }
+
+.e-36dc8444 > .holder.bg-3.border,
+.e-36dc8444 > .holder.bg-3.border-top,
+.e-36dc8444 > .holder.bg-3.border-right,
+.e-36dc8444 > .holder.bg-3.border-bottom,
+.e-36dc8444 > .holder.bg-3.border-left { border-color: var(--ot-bg-3-border); }
+
+.e-36dc8444 > .holder.bg-4.border,
+.e-36dc8444 > .holder.bg-4.border-top,
+.e-36dc8444 > .holder.bg-4.border-right,
+.e-36dc8444 > .holder.bg-4.border-bottom,
+.e-36dc8444 > .holder.bg-4.border-left { border-color: var(--ot-bg-4-border); }
+
+/* Connected line color by bg variant */
+
+.e-36dc8444 > .holder.bg-1.connected > .step + .step::before { background: var(--ot-bg-1-border); }
+.e-36dc8444 > .holder.bg-2.connected > .step + .step::before { background: var(--ot-bg-2-border); }
+.e-36dc8444 > .holder.bg-3.connected > .step + .step::before { background: var(--ot-bg-3-border); }
+.e-36dc8444 > .holder.bg-4.connected > .step + .step::before { background: var(--ot-bg-4-border); }
+
+.e-36dc8444 > .holder.bg-1.connected > .step.done + .step::before,
+.e-36dc8444 > .holder.bg-2.connected > .step.done + .step::before,
+.e-36dc8444 > .holder.bg-3.connected > .step.done + .step::before,
+.e-36dc8444 > .holder.bg-4.connected > .step.done + .step::before { background: var(--ot-brand); }
+
+/* ===== SIZES — vertical ===== */
+
+.e-36dc8444 > .holder.vertical.size-s > .step { padding: var(--ot-spacing-s) var(--ot-spacing-m); gap: var(--ot-spacing-s); }
+.e-36dc8444 > .holder.vertical.size-s .step > .marker { width: 24px; height: 24px; font-size: 11px; }
+.e-36dc8444 > .holder.vertical.size-s .step > .marker > i { font-size: 15px; }
+.e-36dc8444 > .holder.vertical.size-s .step > .text > .label { font-size: 12px; }
+.e-36dc8444 > .holder.vertical.size-s .step > .text > .description { font-size: 10.5px; }
+.e-36dc8444 > .holder.vertical.size-s.connected > .step + .step::before
+{
+	left: calc(var(--ot-spacing-m) + 12px - 1px);
+	top: calc(-1 * var(--ot-spacing-s));
+	height: calc(var(--ot-spacing-s) * 2);
+}
+
+.e-36dc8444 > .holder.vertical.size-m > .step { padding: var(--ot-spacing-m); gap: var(--ot-spacing-m); }
+.e-36dc8444 > .holder.vertical.size-m .step > .marker { width: 32px; height: 32px; font-size: 13px; }
+.e-36dc8444 > .holder.vertical.size-m .step > .marker > i { font-size: 18px; }
+.e-36dc8444 > .holder.vertical.size-m .step > .text > .label { font-size: 13px; }
+.e-36dc8444 > .holder.vertical.size-m .step > .text > .description { font-size: 11.5px; }
+.e-36dc8444 > .holder.vertical.size-m.connected > .step + .step::before
+{
+	left: calc(var(--ot-spacing-m) + 16px - 1px);
+	top: calc(-1 * var(--ot-spacing-m));
+	height: calc(var(--ot-spacing-m) * 2);
+}
+
+.e-36dc8444 > .holder.vertical.size-l > .step { padding: var(--ot-spacing-l) var(--ot-spacing-m); gap: var(--ot-spacing-m); }
+.e-36dc8444 > .holder.vertical.size-l .step > .marker { width: 40px; height: 40px; font-size: 15px; }
+.e-36dc8444 > .holder.vertical.size-l .step > .marker > i { font-size: 20px; }
+.e-36dc8444 > .holder.vertical.size-l .step > .text > .label { font-size: 15px; }
+.e-36dc8444 > .holder.vertical.size-l .step > .text > .description { font-size: 13px; }
+.e-36dc8444 > .holder.vertical.size-l.connected > .step + .step::before
+{
+	left: calc(var(--ot-spacing-m) + 20px - 1px);
+	top: calc(-1 * var(--ot-spacing-l));
+	height: calc(var(--ot-spacing-l) * 2);
+}
+
+/* ===== SIZES — horizontal ===== */
+
+.e-36dc8444 > .holder.horizontal.size-s > .step { padding: var(--ot-spacing-s); gap: var(--ot-spacing-x); }
+.e-36dc8444 > .holder.horizontal.size-s .step > .marker { width: 24px; height: 24px; font-size: 11px; }
+.e-36dc8444 > .holder.horizontal.size-s .step > .marker > i { font-size: 15px; }
+.e-36dc8444 > .holder.horizontal.size-s .step > .text > .label { font-size: 12px; }
+.e-36dc8444 > .holder.horizontal.size-s .step > .text > .description { font-size: 10.5px; }
+.e-36dc8444 > .holder.horizontal.size-s.connected > .step + .step::before
+{
+	top: calc(var(--ot-spacing-s) + 12px - 1px);
+	left: calc(-50% + 12px);
+	width: calc(100% - 24px);
+}
+
+.e-36dc8444 > .holder.horizontal.size-m > .step { padding: var(--ot-spacing-m); gap: var(--ot-spacing-s); }
+.e-36dc8444 > .holder.horizontal.size-m .step > .marker { width: 32px; height: 32px; font-size: 13px; }
+.e-36dc8444 > .holder.horizontal.size-m .step > .marker > i { font-size: 18px; }
+.e-36dc8444 > .holder.horizontal.size-m .step > .text > .label { font-size: 13px; }
+.e-36dc8444 > .holder.horizontal.size-m .step > .text > .description { font-size: 11.5px; }
+.e-36dc8444 > .holder.horizontal.size-m.connected > .step + .step::before
+{
+	top: calc(var(--ot-spacing-m) + 16px - 1px);
+	left: calc(-50% + 16px);
+	width: calc(100% - 32px);
+}
+
+.e-36dc8444 > .holder.horizontal.size-l > .step { padding: var(--ot-spacing-l) var(--ot-spacing-m); gap: var(--ot-spacing-s); }
+.e-36dc8444 > .holder.horizontal.size-l .step > .marker { width: 40px; height: 40px; font-size: 15px; }
+.e-36dc8444 > .holder.horizontal.size-l .step > .marker > i { font-size: 20px; }
+.e-36dc8444 > .holder.horizontal.size-l .step > .text > .label { font-size: 15px; }
+.e-36dc8444 > .holder.horizontal.size-l .step > .text > .description { font-size: 13px; }
+.e-36dc8444 > .holder.horizontal.size-l.connected > .step + .step::before
+{
+	top: calc(var(--ot-spacing-l) + 20px - 1px);
+	left: calc(-50% + 20px);
+	width: calc(100% - 40px);
+}