@onetype/framework 2.0.41 → 2.0.43

package/{lib/items/elements → addons/render/elements/front/items/self}/global/tags/tags.css

@@ -1,8 +1,13 @@
+/* Root */
+
 .e-4a1d382d
 {
 	display: flex;
+	width: 100%;
 }
 
+/* Holder */
+
 .e-4a1d382d > .holder
 {
 	display: flex;
@@ -11,11 +16,13 @@
 	flex-wrap: wrap;
 }
 
+/* Tag */
+
 .e-4a1d382d > .holder > .tag
 {
 	display: flex;
 	align-items: center;
-	padding: 6px 14px;
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
 	font-size: var(--ot-size-s);
 	font-weight: 500;
 	color: var(--ot-text-2);
@@ -25,7 +32,7 @@
 	cursor: pointer;
 	outline: none;
 	white-space: nowrap;
-	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
+	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
 }
 
 .e-4a1d382d > .holder > .tag:hover
@@ -45,10 +52,10 @@
 
 .e-4a1d382d > .holder > .tag > .dot
 {
-	width: 6px;
-	height: 6px;
+	width: var(--ot-spacing-s);
+	height: var(--ot-spacing-s);
 	border-radius: 50%;
-	margin-right: 6px;
+	margin-right: var(--ot-spacing-s);
 	flex-shrink: 0;
 }
 
@@ -62,3 +69,9 @@
 {
 	background: white;
 }
+
+/* Size variants */
+
+.e-4a1d382d > .holder.size-s > .tag { padding: var(--ot-spacing-x) var(--ot-spacing-s); font-size: var(--ot-size-s); }
+.e-4a1d382d > .holder.size-m > .tag { padding: var(--ot-spacing-s) var(--ot-spacing-m); font-size: var(--ot-size-s); }
+.e-4a1d382d > .holder.size-l > .tag { padding: var(--ot-spacing-m) var(--ot-spacing-l); font-size: var(--ot-size-m); }

package/{lib/items/elements → addons/render/elements/front/items/self}/global/tags/tags.js

@@ -10,12 +10,20 @@ onetype.AddonReady('elements', (elements) =>
 		config: {
 			items: {
 				type: 'array',
-				value: ['All']
+				value: ['All'],
+				each: {
+					type: 'string'
+				}
 			},
 			active: {
 				type: 'string',
 				value: 'All'
 			},
+			variant: {
+				type: 'array',
+				value: [],
+				options: ['size-s', 'size-m', 'size-l']
+			},
 			_change: {
 				type: 'function'
 			}
@@ -33,12 +41,12 @@ onetype.AddonReady('elements', (elements) =>
 
 				if(this._change)
 				{
-					this._change(tag);
+					this._change({ value: tag });
 				}
 			};
 
 			return `
-				<div class="holder">
+				<div :class="'holder ' + variant.join(' ')">
 					<button
 						ot-for="tag in normalized()"
 						:class="'tag' + (tag.label === active ? ' active' : '')"

package/{lib/items/elements → addons/render/elements/front/items/self}/navigation/navbar/navbar.css

@@ -1,17 +1,21 @@
+/* Root */
+
 .e-64d8716d
 {
 	display: flex;
 	flex-direction: column;
+	width: 100%;
 }
 
+/* Holder */
+
 .e-64d8716d > .holder
 {
 	display: flex;
 	align-items: center;
 	width: 100%;
-	height: 48px;
+	height: var(--ot-height-l);
 	padding: 0 var(--ot-spacing-m);
-	background: var(--ot-bg-1);
 	border-bottom: 1px solid var(--ot-bg-2-border);
 }
 
@@ -27,17 +31,16 @@
 
 .e-64d8716d > .holder > .logo > .logo-icon
 {
-	height: 16px;
+	height: var(--ot-size-m);
 }
 
 .e-64d8716d > .holder > .logo > .logo-arrow
 {
 	display: none;
-	font-size: 16px;
+	font-size: var(--ot-size-m);
 	color: var(--ot-text-2);
 }
 
-
 /* Tabs */
 
 .e-64d8716d > .holder > .tabs
@@ -54,26 +57,25 @@
 	display: flex;
 	align-items: center;
 	height: 100%;
-	gap: 6px;
+	gap: var(--ot-spacing-s);
 	padding: 0 var(--ot-spacing-m);
 	border-right: 1px solid var(--ot-bg-2-border);
 	text-decoration: none;
 	white-space: nowrap;
-	transition: color 0.2s ease, background 0.2s ease;
+	transition: color 0.15s ease, background 0.15s ease;
 	font-weight: 500;
 	color: var(--ot-text-2);
 }
 
 .e-64d8716d > .holder .tab > i
 {
-	font-size: 16px;
+	font-size: var(--ot-size-m);
 }
 
 .e-64d8716d > .holder .tab:hover,
 .e-64d8716d > .holder .tab.active
 {
 	color: var(--ot-text-1);
-	background: var(--ot-bg-2);
 }
 
 /* Right */
@@ -94,8 +96,8 @@
 	display: none;
 	align-items: center;
 	justify-content: center;
-	width: 34px;
-	height: 34px;
+	width: var(--ot-height-m);
+	height: var(--ot-height-m);
 	margin-left: auto;
 	background: none;
 	border: none;
@@ -105,7 +107,7 @@
 
 .e-64d8716d > .holder > .burger > i
 {
-	font-size: 20px;
+	font-size: var(--ot-size-l);
 }
 
 /* Menu */
@@ -114,7 +116,6 @@
 {
 	display: none;
 	flex-direction: column;
-	background: var(--ot-bg-1);
 	border-bottom: 1px solid var(--ot-bg-2-border);
 }
 
@@ -122,8 +123,8 @@
 {
 	display: flex;
 	align-items: center;
-	gap: 8px;
-	padding: 10px var(--ot-spacing-m);
+	gap: var(--ot-spacing-s);
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
 	font-size: var(--ot-size-m);
 	font-weight: 500;
 	color: var(--ot-text-2);
@@ -133,16 +134,37 @@
 
 .e-64d8716d > .menu > .link > i
 {
-	font-size: 16px;
+	font-size: var(--ot-size-m);
 }
 
 .e-64d8716d > .menu > .link:hover,
 .e-64d8716d > .menu > .link.active
 {
 	color: var(--ot-text-1);
-	background: var(--ot-bg-2);
 }
 
+/* Background variants */
+
+.e-64d8716d > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-64d8716d > .holder.bg-1 ~ .menu { background: var(--ot-bg-1); }
+.e-64d8716d > .holder.bg-1 .tab:hover, .e-64d8716d > .holder.bg-1 .tab.active { background: var(--ot-bg-1-hover); }
+.e-64d8716d > .holder.bg-1 ~ .menu > .link:hover, .e-64d8716d > .holder.bg-1 ~ .menu > .link.active { background: var(--ot-bg-1-hover); }
+
+.e-64d8716d > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-64d8716d > .holder.bg-2 ~ .menu { background: var(--ot-bg-2); }
+.e-64d8716d > .holder.bg-2 .tab:hover, .e-64d8716d > .holder.bg-2 .tab.active { background: var(--ot-bg-2-hover); }
+.e-64d8716d > .holder.bg-2 ~ .menu > .link:hover, .e-64d8716d > .holder.bg-2 ~ .menu > .link.active { background: var(--ot-bg-2-hover); }
+
+.e-64d8716d > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-64d8716d > .holder.bg-3 ~ .menu { background: var(--ot-bg-3); }
+.e-64d8716d > .holder.bg-3 .tab:hover, .e-64d8716d > .holder.bg-3 .tab.active { background: var(--ot-bg-3-hover); }
+.e-64d8716d > .holder.bg-3 ~ .menu > .link:hover, .e-64d8716d > .holder.bg-3 ~ .menu > .link.active { background: var(--ot-bg-3-hover); }
+
+.e-64d8716d > .holder.bg-4 { background: var(--ot-bg-4); }
+.e-64d8716d > .holder.bg-4 ~ .menu { background: var(--ot-bg-4); }
+.e-64d8716d > .holder.bg-4 .tab:hover, .e-64d8716d > .holder.bg-4 .tab.active { background: var(--ot-bg-4-hover); }
+.e-64d8716d > .holder.bg-4 ~ .menu > .link:hover, .e-64d8716d > .holder.bg-4 ~ .menu > .link.active { background: var(--ot-bg-4-hover); }
+
 /* Mobile */
 
 @media screen and (max-width: 900px)

package/{lib/items/elements → addons/render/elements/front/items/self}/navigation/navbar/navbar.js

@@ -8,15 +8,29 @@ onetype.AddonReady('elements', (elements) =>
 		category: 'Navigation',
 		author: 'OneType',
 		config: {
+			logo: {
+				type: 'string',
+				value: 'https://cdn.onetype.ai/brand/logo/full-orange.svg'
+			},
 			items: {
 				type: 'array',
-				value: [
-					{ icon: 'widgets', label: 'Transforms', href: '/transforms', position: 'left' },
-					{ icon: 'payments', label: 'Pricing', href: '/pricing', position: 'left' },
-					{ icon: 'menu_book', label: 'Docs', href: 'https://docs.onetype.ai/transforms', position: 'left' },
-					{ icon: 'code', label: 'GitHub', href: 'https://github.com/nicely-gg/transforms', position: 'right' },
-					{ icon: 'arrow_forward', label: 'Get Started', href: '/get-started', position: 'right' }
-				]
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						icon: { type: 'string', value: '' },
+						label: { type: 'string', value: '' },
+						href: { type: 'string', value: '' },
+						target: { type: 'string', value: '' },
+						position: { type: 'string', value: 'left', options: ['left', 'right'] },
+						match: { type: 'string|array', value: '' }
+					}
+				}
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-1'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4']
 			}
 		},
 		render: function()
@@ -53,9 +67,9 @@ onetype.AddonReady('elements', (elements) =>
 			};
 
 			return `
-				<nav class="holder">
+				<nav :class="'holder ' + variant.join(' ')">
 					<a class="logo" href="/">
-						<img class="logo-icon" src="https://cdn.onetype.ai/brand/logo/full-orange.svg" alt="OneType" />
+						<img class="logo-icon" :src="logo" alt="OneType" />
 						<i class="logo-arrow">keyboard_arrow_down</i>
 					</a>
 					<div class="tabs">
@@ -64,7 +78,7 @@ onetype.AddonReady('elements', (elements) =>
 					<div class="right">
 						<a ot-for="item in right" :class="'tab' + (item.active ? ' active' : '')" :href="item.href" :target="item.target || null"><i>{{ item.icon }}</i> {{ item.label }}</a>
 					</div>
-					<button class="burger" ot-click="toggle"><i ot-if="!open">menu</i><i ot-if="open">close</i></button>
+					<button class="burger" ot-click="toggle"><i>{{ open ? 'close' : 'menu' }}</i></button>
 				</nav>
 				<div ot-if="open" class="menu">
 					<a ot-for="item in all" :class="'link' + (item.active ? ' active' : '')" :href="item.href" :target="item.target || null"><i>{{ item.icon }}</i> {{ item.label }}</a>

package/{lib/items/elements → addons/render/elements/front/items/self}/navigation/sidebar/sidebar.css

@@ -1,3 +1,5 @@
+/* Root */
+
 .e-210c16c7
 {
 	display: flex;
@@ -6,13 +8,14 @@
 	height: 100%;
 }
 
+/* Holder */
+
 .e-210c16c7 > .holder
 {
 	display: flex;
 	flex-direction: column;
 	width: 100%;
 	padding: var(--ot-spacing-m) var(--ot-spacing-s);
-	gap: 0;
 	overflow-y: auto;
 }
 
@@ -24,7 +27,7 @@
 {
 	display: flex;
 	flex-direction: column;
-	gap: 2px;
+	gap: var(--ot-spacing-x);
 	padding: var(--ot-spacing-s) 0;
 	border-top: 1px solid var(--ot-bg-3-border);
 }
@@ -43,7 +46,7 @@
 .e-210c16c7 > .holder > .bottom > .group > .title,
 .e-210c16c7 > .drawer > .group > .title
 {
-	font-size: 10px;
+	font-size: var(--ot-size-s);
 	font-weight: 600;
 	color: var(--ot-text-2);
 	text-transform: uppercase;
@@ -70,14 +73,14 @@
 	border: 1px solid transparent;
 	border-radius: var(--ot-radius-m);
 	cursor: pointer;
-	transition: all 0.15s ease;
+	transition: color 0.15s ease, background 0.15s ease;
 }
 
 .e-210c16c7 > .holder > .group > .item > i,
 .e-210c16c7 > .holder > .bottom > .group > .item > i,
 .e-210c16c7 > .drawer > .group > .item > i
 {
-	font-size: 20px;
+	font-size: var(--ot-size-l);
 	opacity: 0.4;
 	transition: opacity 0.15s ease;
 }
@@ -91,18 +94,20 @@
 	text-overflow: ellipsis;
 }
 
+/* Count badge */
+
 .e-210c16c7 > .holder > .group > .item > .count,
 .e-210c16c7 > .holder > .bottom > .group > .item > .count,
 .e-210c16c7 > .drawer > .group > .item > .count
 {
 	margin-left: auto;
 	font-size: var(--ot-size-s);
-	min-width: 20px;
-	height: 20px;
+	min-width: var(--ot-height-x);
+	height: var(--ot-height-x);
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border-radius: 10px;
+	border-radius: var(--ot-radius-m);
 	background: var(--ot-bg-4);
 	color: var(--ot-text-2);
 	font-weight: 500;
@@ -153,17 +158,16 @@
 	margin-top: auto;
 }
 
-/* Variants */
+/* Background variants */
 
-.e-210c16c7 > .holder.bg-2
-{
-	background: var(--ot-bg-2);
-}
+.e-210c16c7 > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-210c16c7 > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-210c16c7 > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-210c16c7 > .holder.bg-4 { background: var(--ot-bg-4); }
 
-.e-210c16c7 > .holder.border
-{
-	border-right: 1px solid var(--ot-bg-2-border);
-}
+/* Border variant */
+
+.e-210c16c7 > .holder.border { border-right: 1px solid var(--ot-bg-2-border); }
 
 /* Bar, Overlay, Drawer — hidden on desktop */
 
@@ -198,7 +202,7 @@
 		bottom: 0;
 		left: 0;
 		width: 100vw;
-		height: 40px;
+		height: var(--ot-height-l);
 		background: var(--ot-bg-1);
 		border-top: 1px solid var(--ot-bg-2-border);
 		border-bottom: 1px solid var(--ot-bg-2-border);
@@ -208,29 +212,11 @@
 
 	.e-210c16c7 > .bar > .toggle
 	{
-		font-size: 20px;
+		font-size: var(--ot-size-l);
 		color: var(--ot-brand);
 		pointer-events: none;
 	}
 
-	.e-210c16c7 > .drawer > .toggle
-	{
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 34px;
-		height: 34px;
-		background: none;
-		border: none;
-		color: var(--ot-text-2);
-		cursor: pointer;
-	}
-
-	.e-210c16c7 > .drawer > .toggle > i
-	{
-		font-size: 20px;
-	}
-
 	.e-210c16c7 > .overlay
 	{
 		display: block;
@@ -262,7 +248,7 @@
 		align-items: center;
 		justify-content: center;
 		width: 100%;
-		height: 40px;
+		height: var(--ot-height-l);
 		background: none;
 		border: none;
 		border-bottom: 1px solid var(--ot-bg-2-border);
@@ -273,7 +259,7 @@
 
 	.e-210c16c7 > .drawer > .toggle > i
 	{
-		font-size: 20px;
+		font-size: var(--ot-size-l);
 	}
 
 	.e-210c16c7 > .drawer > .group

package/{lib/items/elements → addons/render/elements/front/items/self}/navigation/sidebar/sidebar.js

@@ -10,7 +10,29 @@ onetype.AddonReady('elements', (elements) =>
 		config: {
 			groups: {
 				type: 'array',
-				value: []
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						title: { type: 'string', value: '' },
+						placement: { type: 'string', value: 'top', options: ['top', 'bottom'] },
+						items: {
+							type: 'array',
+							value: [],
+							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 }
+								}
+							}
+						}
+					}
+				}
 			},
 			active: {
 				type: 'string',
@@ -19,7 +41,7 @@ onetype.AddonReady('elements', (elements) =>
 			variant: {
 				type: 'array',
 				value: [],
-				options: ['bg-2', 'border']
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border']
 			},
 			_click: {
 				type: 'function'
@@ -51,7 +73,7 @@ onetype.AddonReady('elements', (elements) =>
 
 				if(this._click)
 				{
-					this._click(item);
+					this._click({ value: item });
 				}
 			};
 
@@ -68,7 +90,7 @@ onetype.AddonReady('elements', (elements) =>
 						<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" class="count">{{ item.count }}</span>
+							<span ot-if="item.count !== undefined && item.count !== null" class="count">{{ item.count }}</span>
 						</a>
 					</div>
 					<div ot-if="bottom.length" class="bottom">
@@ -77,7 +99,7 @@ onetype.AddonReady('elements', (elements) =>
 							<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" class="count">{{ item.count }}</span>
+								<span ot-if="item.count !== undefined && item.count !== null" class="count">{{ item.count }}</span>
 							</a>
 						</div>
 					</div>
@@ -94,7 +116,7 @@ onetype.AddonReady('elements', (elements) =>
 						<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" class="count">{{ item.count }}</span>
+							<span ot-if="item.count !== undefined && item.count !== null" class="count">{{ item.count }}</span>
 						</a>
 					</div>
 					<div ot-if="bottom.length" class="group">
@@ -103,7 +125,7 @@ onetype.AddonReady('elements', (elements) =>
 							<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" class="count">{{ item.count }}</span>
+								<span ot-if="item.count !== undefined && item.count !== null" class="count">{{ item.count }}</span>
 							</a>
 						</div>
 					</div>

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

@@ -0,0 +1,66 @@
+/* Root */
+
+.e-1a8b6ac1
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-1a8b6ac1 > .holder
+{
+	display: flex;
+	align-items: center;
+	border: 1px solid transparent;
+	border-radius: var(--ot-radius-m);
+	padding: var(--ot-spacing-x);
+}
+
+/* Tab */
+
+.e-1a8b6ac1 > .holder > .tab
+{
+	display: flex;
+	align-items: 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;
+}
+
+.e-1a8b6ac1 > .holder > .tab > i
+{
+	font-size: var(--ot-size-m);
+}
+
+.e-1a8b6ac1 > .holder > .tab:hover:not(.active)
+{
+	color: var(--ot-text-1);
+}
+
+/* Active — relative to bg variant */
+
+.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); }
+
+/* Background variants */
+
+.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); }
+
+/* Size variants */
+
+.e-1a8b6ac1 > .holder.size-s > .tab { padding: var(--ot-spacing-x) var(--ot-spacing-s); font-size: var(--ot-size-s); }
+.e-1a8b6ac1 > .holder.size-m > .tab { padding: var(--ot-spacing-s) var(--ot-spacing-m); font-size: var(--ot-size-m); }
+.e-1a8b6ac1 > .holder.size-l > .tab { padding: var(--ot-spacing-m) var(--ot-spacing-l); font-size: var(--ot-size-m); }

package/{lib/items/elements → addons/render/elements/front/items/self}/navigation/tabs/tabs.js

@@ -14,7 +14,21 @@ onetype.AddonReady('elements', (elements) =>
 			},
 			items: {
 				type: 'array',
-				value: []
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						id: { type: 'string', value: '' },
+						label: { type: 'string', value: '' },
+						icon: { type: 'string', value: '' },
+						href: { type: 'string', value: '' }
+					}
+				}
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-2'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'size-s', 'size-m', 'size-l']
 			},
 			_change: {
 				type: 'function'
@@ -28,12 +42,12 @@ onetype.AddonReady('elements', (elements) =>
 
 				if(this._change)
 				{
-					this._change(id);
+					this._change({ value: id });
 				}
 			};
 
 			return `
-				<div class="holder">
+				<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>