@onetype/framework 2.0.53 → 2.0.55

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

@@ -0,0 +1,113 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'navigation-steps',
+		icon: 'format_list_numbered',
+		name: 'Steps',
+		description: 'Stepper navigation with done, active and upcoming states. Vertical or horizontal.',
+		category: 'Navigation',
+		author: 'OneType',
+		config: {
+			items: {
+				type: 'array',
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						id: { type: 'string' },
+						label: { type: 'string' },
+						description: { type: 'string' },
+						icon: { type: 'string' },
+						disabled: { type: 'boolean' }
+					}
+				}
+			},
+			active: {
+				type: 'string'
+			},
+			orientation: {
+				type: 'string',
+				value: 'vertical',
+				options: ['vertical', 'horizontal']
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-1', 'border', 'connected', 'size-m'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'border-top', 'border-right', 'border-bottom', 'border-left', 'clean', 'connected', 'size-s', 'size-m', 'size-l']
+			},
+			_change: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			this.rebuild = () =>
+			{
+				this.activeIndex = this.items.findIndex(entry => entry.id === this.active);
+
+				this.computed = this.items.map((entry, index) =>
+				{
+					let status = 'upcoming';
+
+					if(this.activeIndex !== -1)
+					{
+						if(index < this.activeIndex)
+						{
+							status = 'done';
+						}
+						else if(index === this.activeIndex)
+						{
+							status = 'active';
+						}
+					}
+
+					return {
+						...entry,
+						index,
+						status,
+						number: index + 1
+					};
+				});
+			};
+
+			this.rebuild();
+
+			this.select = (item, event) =>
+			{
+				if(item.disabled)
+				{
+					return;
+				}
+
+				this.active = item.id;
+				this.rebuild();
+
+				if(this._change)
+				{
+					this._change({ event, value: item.id });
+				}
+			};
+
+			return /* html */ `
+				<nav :class="'holder ' + orientation + ' ' + variant.join(' ')">
+					<button
+						ot-for="item in computed"
+						type="button"
+						:class="'step ' + item.status + (item.disabled ? ' disabled' : '')"
+						ot-click="({ event }) => select(item, event)"
+					>
+						<span class="marker">
+							<i ot-if="item.status === 'done'">check</i>
+							<i ot-if="item.status !== 'done' && item.icon">{{ item.icon }}</i>
+							<span ot-if="item.status !== 'done' && !item.icon" class="number">{{ item.number }}</span>
+						</span>
+						<span class="text">
+							<span class="label">{{ item.label }}</span>
+							<span ot-if="item.description" class="description">{{ item.description }}</span>
+						</span>
+					</button>
+				</nav>
+			`;
+		}
+	});
+});

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

@@ -11,61 +11,390 @@
 .e-1a8b6ac1 > .holder
 {
 	display: flex;
-	align-items: center;
-	border: 1px solid transparent;
-	border-radius: var(--ot-radius-m);
-	padding: var(--ot-spacing-x);
+	flex-direction: column;
+	width: 100%;
 }
 
-/* Tab */
+/* Tabs nav */
 
-.e-1a8b6ac1 > .holder > .tab
+.e-1a8b6ac1 > .holder > .tabs
 {
 	display: flex;
 	align-items: center;
+	overflow-x: auto;
+	scrollbar-width: none;
+	overflow: hidden;
+}
+
+.e-1a8b6ac1 > .holder > .tabs::-webkit-scrollbar
+{
+	display: none;
+}
+
+/* Tab base */
+
+.e-1a8b6ac1 .tab
+{
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
 	gap: var(--ot-spacing-s);
-	padding: var(--ot-spacing-s) var(--ot-spacing-m);
-	border-radius: var(--ot-radius-m);
-	font-size: var(--ot-size-m);
-	font-weight: 500;
-	color: var(--ot-text-2);
-	text-decoration: none;
 	white-space: nowrap;
 	cursor: pointer;
-	transition: color 0.15s ease, background 0.15s ease;
+	text-decoration: none;
+	font-family: var(--ot-font-primary);
+	font-weight: 500;
+	color: var(--ot-text-2);
+	user-select: none;
+	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-1a8b6ac1 .tab:hover:not(.disabled)
+{
+	color: var(--ot-text-1);
+}
+
+.e-1a8b6ac1 .tab.active
+{
+	color: var(--ot-text-1);
+	font-weight: 600;
+}
+
+.e-1a8b6ac1 .tab.disabled
+{
+	cursor: not-allowed;
+	opacity: 0.45;
+}
+
+/* Count badge */
+
+.e-1a8b6ac1 .tab > .count
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 18px;
+	padding: 0 6px;
+	background: var(--ot-bg-2);
+	border-radius: 100px;
+	font-size: 10.5px;
+	font-weight: 600;
+	color: var(--ot-text-3);
+	line-height: 18px;
+	font-family: var(--ot-font-primary);
+}
+
+.e-1a8b6ac1 .tab.active > .count
+{
+	background: var(--ot-brand-opacity);
+	color: var(--ot-brand);
+}
+
+/* Content panels */
+
+.e-1a8b6ac1 > .holder > .content
+{
+	padding-top: var(--ot-spacing-l);
+}
+
+.e-1a8b6ac1 > .holder > .content > .panel
+{
+	display: none;
+}
+
+.e-1a8b6ac1 > .holder > .content > .panel.active
+{
+	display: block;
+	animation: e-1a8b6ac1-fade 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@keyframes e-1a8b6ac1-fade
+{
+	from { opacity: 0; transform: translateY(4px); }
+	to { opacity: 1; transform: translateY(0); }
+}
+
+/* ===== UNDERLINE STYLE ===== */
+
+.e-1a8b6ac1 > .holder.underline > .tabs
+{
+	gap: var(--ot-spacing-l);
+}
+
+.e-1a8b6ac1 > .holder.underline > .tabs > .tab
+{
+	padding: 14px 0;
+}
+
+.e-1a8b6ac1 > .holder.underline > .tabs > .tab.active::after
+{
+	content: '';
+	position: absolute;
+	bottom: -1px;
+	left: 0;
+	right: 0;
+	height: 2px;
+	background: var(--ot-brand);
+	border-radius: 2px 2px 0 0;
+}
+
+/* ===== PILLS STYLE ===== */
+
+.e-1a8b6ac1 > .holder.pills > .tabs
+{
+	gap: var(--ot-spacing-s);
+}
+
+.e-1a8b6ac1 > .holder.pills > .tabs > .tab
+{
+	padding: 8px 16px;
+	border-radius: 100px;
+	background: transparent;
+	border: 1px solid transparent;
+}
+
+.e-1a8b6ac1 > .holder.pills > .tabs > .tab:hover:not(.disabled)
+{
+	background: var(--ot-bg-2);
+}
+
+.e-1a8b6ac1 > .holder.pills > .tabs > .tab.active
+{
+	background: var(--ot-brand-opacity);
+	color: var(--ot-brand);
+}
+
+.e-1a8b6ac1 > .holder.pills > .tabs > .tab.active > .count
+{
+	background: var(--ot-brand);
+	color: white;
+}
+
+/* ===== CONTAINED STYLE ===== */
+
+.e-1a8b6ac1 > .holder.contained > .tabs
+{
+	padding: var(--ot-spacing-x);
+	background: var(--ot-bg-2);
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: var(--ot-radius-m);
+	gap: 2px;
 }
 
-.e-1a8b6ac1 > .holder > .tab > i
+.e-1a8b6ac1 > .holder.contained > .tabs > .tab
 {
-	font-size: var(--ot-size-m);
+	padding: 8px 14px;
+	border-radius: calc(var(--ot-radius-m) - 2px);
 }
 
-.e-1a8b6ac1 > .holder > .tab:hover:not(.active)
+.e-1a8b6ac1 > .holder.contained > .tabs > .tab:hover:not(.disabled)
+{
+	background: var(--ot-bg-2-hover);
+}
+
+.e-1a8b6ac1 > .holder.contained > .tabs > .tab.active
+{
+	background: var(--ot-brand-opacity);
+	color: var(--ot-brand);
+}
+
+.e-1a8b6ac1 > .holder.contained > .tabs > .tab.active > .count
+{
+	background: var(--ot-brand);
+	color: white;
+}
+
+/* ===== SEGMENTED STYLE ===== */
+
+.e-1a8b6ac1 > .holder.segmented > .tabs
+{
+	padding: 3px;
+	background: var(--ot-bg-3);
+	border-radius: 100px;
+	gap: 0;
+	display: inline-flex;
+	align-self: flex-start;
+}
+
+.e-1a8b6ac1 > .holder.segmented > .tabs > .tab
+{
+	padding: 8px 18px;
+	border-radius: 100px;
+	flex: 1;
+}
+
+.e-1a8b6ac1 > .holder.segmented > .tabs > .tab:hover:not(.disabled)
 {
 	color: var(--ot-text-1);
 }
 
-/* Active — relative to bg variant */
+.e-1a8b6ac1 > .holder.segmented > .tabs > .tab.active
+{
+	background: var(--ot-brand-opacity);
+	color: var(--ot-brand);
+}
+
+.e-1a8b6ac1 > .holder.segmented > .tabs > .tab.active > .count
+{
+	background: var(--ot-brand);
+	color: white;
+}
+
+/* ===== BACKGROUNDS ===== */
+
+/* bg on holder — only for underline/pills (padding + background) */
+
+.e-1a8b6ac1 > .holder.bg-1.underline,
+.e-1a8b6ac1 > .holder.bg-1.pills { background: var(--ot-bg-1); }
+
+.e-1a8b6ac1 > .holder.bg-2.underline,
+.e-1a8b6ac1 > .holder.bg-2.pills { background: var(--ot-bg-2); }
+
+.e-1a8b6ac1 > .holder.bg-3.underline,
+.e-1a8b6ac1 > .holder.bg-3.pills { background: var(--ot-bg-3); }
+
+.e-1a8b6ac1 > .holder.bg-4.underline,
+.e-1a8b6ac1 > .holder.bg-4.pills { background: var(--ot-bg-4); }
+
+.e-1a8b6ac1 > .holder.bg-1.underline,
+.e-1a8b6ac1 > .holder.bg-1.pills,
+.e-1a8b6ac1 > .holder.bg-2.underline,
+.e-1a8b6ac1 > .holder.bg-2.pills,
+.e-1a8b6ac1 > .holder.bg-3.underline,
+.e-1a8b6ac1 > .holder.bg-3.pills,
+.e-1a8b6ac1 > .holder.bg-4.underline,
+.e-1a8b6ac1 > .holder.bg-4.pills
+{
+	padding: 0 var(--ot-spacing-m);
+}
+
+/* bg overrides for contained track */
+
+.e-1a8b6ac1 > .holder.bg-1.contained > .tabs { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
+.e-1a8b6ac1 > .holder.bg-2.contained > .tabs { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
+.e-1a8b6ac1 > .holder.bg-3.contained > .tabs { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
+.e-1a8b6ac1 > .holder.bg-4.contained > .tabs { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }
+
+/* bg overrides for segmented track */
+
+.e-1a8b6ac1 > .holder.bg-1.segmented > .tabs { background: var(--ot-bg-1); }
+.e-1a8b6ac1 > .holder.bg-2.segmented > .tabs { background: var(--ot-bg-2); }
+.e-1a8b6ac1 > .holder.bg-3.segmented > .tabs { background: var(--ot-bg-3); }
+.e-1a8b6ac1 > .holder.bg-4.segmented > .tabs { background: var(--ot-bg-4); }
+
+/* bg overrides for pills hover */
+
+.e-1a8b6ac1 > .holder.bg-1.pills > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-1-hover); }
+.e-1a8b6ac1 > .holder.bg-2.pills > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-2-hover); }
+.e-1a8b6ac1 > .holder.bg-3.pills > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-3-hover); }
+.e-1a8b6ac1 > .holder.bg-4.pills > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-4-hover); }
+
+/* bg overrides for contained hover */
+
+.e-1a8b6ac1 > .holder.bg-1.contained > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-1-hover); }
+.e-1a8b6ac1 > .holder.bg-2.contained > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-2-hover); }
+.e-1a8b6ac1 > .holder.bg-3.contained > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-3-hover); }
+.e-1a8b6ac1 > .holder.bg-4.contained > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-4-hover); }
+
+/* bg overrides for count badge */
+
+.e-1a8b6ac1 > .holder.bg-1 .tab > .count { background: var(--ot-bg-2); }
+.e-1a8b6ac1 > .holder.bg-2 .tab > .count { background: var(--ot-bg-3); }
+.e-1a8b6ac1 > .holder.bg-3 .tab > .count { background: var(--ot-bg-4); }
+.e-1a8b6ac1 > .holder.bg-4 .tab > .count { background: var(--ot-bg-3); }
+
+/* ===== BORDER ===== */
+
+/* border on holder for underline/pills */
+
+.e-1a8b6ac1 > .holder.border.underline { border-bottom: 1px solid var(--ot-bg-2-border); }
+.e-1a8b6ac1 > .holder.border.pills { border-bottom: 1px solid var(--ot-bg-2-border); }
+
+.e-1a8b6ac1 > .holder.bg-1.border.underline,
+.e-1a8b6ac1 > .holder.bg-1.border.pills { border-bottom-color: var(--ot-bg-1-border); }
+
+.e-1a8b6ac1 > .holder.bg-2.border.underline,
+.e-1a8b6ac1 > .holder.bg-2.border.pills { border-bottom-color: var(--ot-bg-2-border); }
+
+.e-1a8b6ac1 > .holder.bg-3.border.underline,
+.e-1a8b6ac1 > .holder.bg-3.border.pills { border-bottom-color: var(--ot-bg-3-border); }
+
+.e-1a8b6ac1 > .holder.bg-4.border.underline,
+.e-1a8b6ac1 > .holder.bg-4.border.pills { border-bottom-color: var(--ot-bg-4-border); }
+
+/* ===== STRETCH ===== */
+
+.e-1a8b6ac1 > .holder.stretch > .tabs
+{
+	width: 100%;
+}
+
+.e-1a8b6ac1 > .holder.stretch.segmented > .tabs
+{
+	align-self: stretch;
+}
 
-.e-1a8b6ac1 > .holder.bg-1 > .tab.active { background: var(--ot-bg-2); color: var(--ot-text-1); }
-.e-1a8b6ac1 > .holder.bg-2 > .tab.active { background: var(--ot-bg-3); color: var(--ot-text-1); }
-.e-1a8b6ac1 > .holder.bg-3 > .tab.active { background: var(--ot-bg-4); color: var(--ot-text-1); }
-.e-1a8b6ac1 > .holder.bg-4 > .tab.active { background: var(--ot-bg-4-hover); color: var(--ot-text-1); }
+.e-1a8b6ac1 > .holder.stretch > .tabs > .tab
+{
+	flex: 1;
+}
 
-/* Background variants */
+/* ===== SIZES ===== */
 
-.e-1a8b6ac1 > .holder.bg-1 { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
-.e-1a8b6ac1 > .holder.bg-2 { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
-.e-1a8b6ac1 > .holder.bg-3 { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
-.e-1a8b6ac1 > .holder.bg-4 { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }
+.e-1a8b6ac1 > .holder.size-s .tab
+{
+	font-size: 12px;
+}
+
+.e-1a8b6ac1 > .holder.size-s .tab > i
+{
+	font-size: 14px;
+}
+
+.e-1a8b6ac1 > .holder.size-s .tab > .count
+{
+	min-width: 16px;
+	font-size: 10px;
+	line-height: 16px;
+	padding: 0 5px;
+}
+
+.e-1a8b6ac1 > .holder.size-s.underline > .tabs > .tab { padding: 10px 0; }
+.e-1a8b6ac1 > .holder.size-s.underline > .tabs { gap: var(--ot-spacing-m); }
+.e-1a8b6ac1 > .holder.size-s.pills > .tabs > .tab { padding: 6px 12px; }
+.e-1a8b6ac1 > .holder.size-s.contained > .tabs > .tab { padding: 6px 10px; }
+.e-1a8b6ac1 > .holder.size-s.segmented > .tabs > .tab { padding: 6px 14px; }
+
+.e-1a8b6ac1 > .holder.size-m .tab
+{
+	font-size: 13px;
+}
 
-/* Size variants */
+.e-1a8b6ac1 > .holder.size-m .tab > i
+{
+	font-size: 16px;
+}
+
+.e-1a8b6ac1 > .holder.size-l .tab
+{
+	font-size: 14px;
+}
 
-.e-1a8b6ac1 > .holder.size-s { height: var(--ot-height-s); }
-.e-1a8b6ac1 > .holder.size-s > .tab { height: 100%; padding: 0 var(--ot-spacing-s); font-size: var(--ot-size-s); }
+.e-1a8b6ac1 > .holder.size-l .tab > i
+{
+	font-size: 18px;
+}
 
-.e-1a8b6ac1 > .holder.size-m { height: var(--ot-height-m); }
-.e-1a8b6ac1 > .holder.size-m > .tab { height: 100%; padding: 0 var(--ot-spacing-m); font-size: var(--ot-size-m); }
+.e-1a8b6ac1 > .holder.size-l .tab > .count
+{
+	min-width: 22px;
+	font-size: 11.5px;
+	line-height: 22px;
+	padding: 0 8px;
+}
 
-.e-1a8b6ac1 > .holder.size-l { height: var(--ot-height-l); }
-.e-1a8b6ac1 > .holder.size-l > .tab { height: 100%; padding: 0 var(--ot-spacing-l); font-size: var(--ot-size-m); }
+.e-1a8b6ac1 > .holder.size-l.underline > .tabs > .tab { padding: 18px 0; }
+.e-1a8b6ac1 > .holder.size-l.pills > .tabs > .tab { padding: 12px 22px; }
+.e-1a8b6ac1 > .holder.size-l.contained > .tabs > .tab { padding: 12px 18px; }
+.e-1a8b6ac1 > .holder.size-l.segmented > .tabs > .tab { padding: 12px 24px; }

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

@@ -4,31 +4,34 @@ onetype.AddonReady('elements', (elements) =>
 		id: 'navigation-tabs',
 		icon: 'tab',
 		name: 'Tabs',
-		description: 'Pill-style tab switcher with optional icons.',
+		description: 'Tabbed navigation with multiple styles, icons, counts, and optional content panels.',
 		category: 'Navigation',
 		author: 'OneType',
 		config: {
-			active: {
-				type: 'string',
-				value: ''
-			},
 			items: {
 				type: 'array',
 				value: [],
 				each: {
 					type: 'object',
 					config: {
-						id: { type: 'string', value: '' },
-						label: { type: 'string', value: '' },
-						icon: { type: 'string', value: '' },
-						href: { type: 'string', value: '' }
+						id: { type: 'string' },
+						label: { type: 'string' },
+						icon: { type: 'string' },
+						count: { type: 'string|number' },
+						href: { type: 'string' },
+						target: { type: 'string' },
+						disabled: { type: 'boolean' },
+						content: { type: 'string' }
 					}
 				}
 			},
+			active: {
+				type: 'string'
+			},
 			variant: {
 				type: 'array',
-				value: ['bg-2'],
-				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'size-s', 'size-m', 'size-l']
+				value: ['underline', 'size-m'],
+				options: ['underline', 'pills', 'contained', 'segmented', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l', 'stretch']
 			},
 			_change: {
 				type: 'function'
@@ -36,22 +39,62 @@ onetype.AddonReady('elements', (elements) =>
 		},
 		render: function()
 		{
-			this.select = (id) =>
+			if(!this.active && this.items.length)
 			{
-				this.active = id;
+				this.active = this.items[0].id;
+			}
+
+			const styles = ['underline', 'pills', 'contained', 'segmented'];
+			const hasStyle = this.variant.some(v => styles.includes(v));
+
+			if(!hasStyle)
+			{
+				this.variant = ['underline', ...this.variant];
+			}
+
+			this.hasContent = this.items.some(item => item.content);
+
+			this.select = (item, event) =>
+			{
+				if(item.disabled)
+				{
+					return;
+				}
+
+				this.active = item.id;
 
 				if(this._change)
 				{
-					this._change({ value: id });
+					this._change({ event, value: item.id });
 				}
 			};
 
-			return `
+			this.panels = this.items
+				.filter(item => item.content)
+				.map(item =>
+				{
+					return '<div class="panel' + (this.active === item.id ? ' active' : '') + '" data-panel="' + item.id + '">' + item.content + '</div>';
+				})
+				.join('');
+
+			return /* html */ `
 				<div :class="'holder ' + variant.join(' ')">
-					<a ot-for="item in items" :class="'tab' + (active === item.id ? ' active' : '')" :href="item.href || 'javascript:void(0)'" ot-click="select(item.id)">
-						<i ot-if="item.icon">{{ item.icon }}</i>
-						<span>{{ item.label }}</span>
-					</a>
+					<nav class="tabs">
+						<a
+							ot-for="item in items"
+							:class="'tab' + (active === item.id ? ' active' : '') + (item.disabled ? ' disabled' : '')"
+							:href="item.href || 'javascript:void(0)'"
+							:target="item.target"
+							ot-click="(event) => select(item, event)"
+						>
+							<i ot-if="item.icon">{{ item.icon }}</i>
+							<span ot-if="item.label" class="label">{{ item.label }}</span>
+							<span ot-if="item.count != null" class="count">{{ item.count }}</span>
+						</a>
+					</nav>
+					<div ot-if="hasContent" class="content">
+						<span ot-html="panels"></span>
+					</div>
 				</div>
 			`;
 		}