@onetype/framework 2.0.53 → 2.0.54

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

@@ -0,0 +1,134 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'navigation-dock',
+		icon: 'dock_to_right',
+		name: 'Dock',
+		description: 'Slim icon rail with grouped navigation, logo, badges and tooltips.',
+		category: 'Navigation',
+		author: 'OneType',
+		config: {
+			logo: {
+				type: 'string'
+			},
+			groups: {
+				type: 'array',
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						placement: { type: 'string', value: 'top', options: ['top', 'bottom'] },
+						items: {
+							type: 'array',
+							value: [],
+							each: {
+								type: 'object',
+								config: {
+									icon: { type: 'string' },
+									label: { type: 'string' },
+									href: { type: 'string' },
+									match: { type: 'string' },
+									badge: { type: 'string|number' }
+								}
+							}
+						}
+					}
+				}
+			},
+			variant: {
+				type: 'array',
+				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'
+			}
+		},
+		render: function()
+		{
+			const path = onetype.RouteCurrent();
+
+			this.isActive = (item) =>
+			{
+				const match = item.match || item.href;
+
+				if(!match)
+				{
+					return false;
+				}
+
+				if(match === '/')
+				{
+					return path === '/';
+				}
+
+				return path.startsWith(match);
+			};
+
+			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.top = this.compute(this.groups.filter(group => (group.placement || 'top') === 'top'));
+			this.bottom = this.compute(this.groups.filter(group => group.placement === 'bottom'));
+
+			this.handle = (item, event) =>
+			{
+				if(this._click)
+				{
+					this._click({ event, value: item });
+				}
+			};
+
+			return /* html */ `
+				<aside :class="'holder ' + variant.join(' ')">
+					<a ot-if="logo" class="logo" href="/">
+						<img :src="logo" alt="" />
+					</a>
+
+					<div class="stack">
+						<div ot-for="group, groupIndex in top">
+							<div ot-if="groupIndex > 0 || logo" class="separator"></div>
+							<div class="group">
+								<a
+									ot-for="item in group.items"
+									:class="'item' + (item.active ? ' active' : '')"
+									:href="item.href || 'javascript:void(0)'"
+									:ot-tooltip="item.label ? { text: item.label, position: { x: 'right', y: 'center' } } : null"
+									ot-click="(event) => handle(item, event)"
+								>
+									<i>{{ item.icon }}</i>
+									<span ot-if="item.badge" class="badge">{{ item.badge }}</span>
+								</a>
+							</div>
+						</div>
+					</div>
+
+					<div ot-if="bottom.length" class="stack bottom">
+						<div ot-for="group, groupIndex in bottom">
+							<div ot-if="groupIndex > 0" class="separator"></div>
+							<div class="group">
+								<a
+									ot-for="item in group.items"
+									:class="'item' + (item.active ? ' active' : '')"
+									:href="item.href || 'javascript:void(0)'"
+									:ot-tooltip="item.label ? { text: item.label, position: { x: 'right', y: 'center' } } : null"
+									ot-click="(event) => handle(item, event)"
+								>
+									<i>{{ item.icon }}</i>
+									<span ot-if="item.badge" class="badge">{{ item.badge }}</span>
+								</a>
+							</div>
+						</div>
+					</div>
+				</aside>
+			`;
+		}
+	});
+});

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

@@ -0,0 +1,356 @@
+/* Root */
+
+.e-71bcd7e2
+{
+	display: block;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-71bcd7e2 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	background: var(--ot-bg-1);
+	border-top: 1px solid transparent;
+	padding: var(--ot-spacing-l) var(--ot-spacing-l) var(--ot-spacing-m);
+}
+
+/* Background variants */
+
+.e-71bcd7e2 > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-71bcd7e2 > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-71bcd7e2 > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-71bcd7e2 > .holder.bg-4 { background: var(--ot-bg-4); }
+
+.e-71bcd7e2 > .holder.border-top
+{
+	border-top-color: var(--ot-bg-2-border);
+}
+
+.e-71bcd7e2 > .holder.bg-1.border-top { border-top-color: var(--ot-bg-1-border); }
+.e-71bcd7e2 > .holder.bg-2.border-top { border-top-color: var(--ot-bg-2-border); }
+.e-71bcd7e2 > .holder.bg-3.border-top { border-top-color: var(--ot-bg-3-border); }
+.e-71bcd7e2 > .holder.bg-4.border-top { border-top-color: var(--ot-bg-4-border); }
+
+.e-71bcd7e2 > .holder.clean
+{
+	background: transparent !important;
+	border-top-color: transparent !important;
+}
+
+/* ===== TOP SLOT ===== */
+
+.e-71bcd7e2 > .holder > .top-slot
+{
+	margin-bottom: var(--ot-spacing-l);
+	padding-bottom: var(--ot-spacing-l);
+	border-bottom: 1px solid var(--ot-bg-2-border);
+}
+
+/* ===== MAIN ===== */
+
+.e-71bcd7e2 > .holder > .main
+{
+	display: grid;
+	grid-template-columns: minmax(280px, 1.2fr) 3fr;
+	gap: var(--ot-spacing-l);
+	width: 100%;
+}
+
+/* ===== BRAND COLUMN ===== */
+
+.e-71bcd7e2 > .holder > .main > .brand-col
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-m);
+	min-width: 0;
+}
+
+.e-71bcd7e2 > .holder > .main > .brand-col > .brand
+{
+	display: inline-flex;
+	align-items: center;
+	text-decoration: none;
+	color: inherit;
+}
+
+.e-71bcd7e2 > .holder > .main > .brand-col > .brand > .brand-logo
+{
+	display: block;
+	height: 28px;
+	width: auto;
+}
+
+.e-71bcd7e2 > .holder > .main > .brand-col > .tagline
+{
+	margin: 0;
+	max-width: 340px;
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+	line-height: 1.6;
+}
+
+/* Newsletter */
+
+.e-71bcd7e2 > .holder > .main > .brand-col > .newsletter
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
+	padding: var(--ot-spacing-m);
+	background: var(--ot-bg-2);
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: var(--ot-radius-m);
+	max-width: 420px;
+}
+
+.e-71bcd7e2 > .holder > .main > .brand-col > .newsletter > .newsletter-text
+{
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.e-71bcd7e2 > .holder > .main > .brand-col > .newsletter > .newsletter-text > .newsletter-title
+{
+	margin: 0;
+	font-family: var(--ot-font-secondary);
+	font-size: 16px;
+	font-weight: 600;
+	color: var(--ot-text-1);
+	letter-spacing: -0.01em;
+}
+
+.e-71bcd7e2 > .holder > .main > .brand-col > .newsletter > .newsletter-text > .newsletter-description
+{
+	margin: 0;
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-3);
+	line-height: 1.5;
+}
+
+.e-71bcd7e2 > .holder > .main > .brand-col > .newsletter > .newsletter-form
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	flex-wrap: wrap;
+}
+
+.e-71bcd7e2 > .holder > .main > .brand-col > .newsletter > .newsletter-form > e-form-input
+{
+	flex: 1 1 200px;
+	min-width: 0;
+}
+
+/* ===== GROUPS ===== */
+
+.e-71bcd7e2 > .holder > .main > .groups
+{
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+	gap: var(--ot-spacing-l);
+	align-content: start;
+}
+
+.e-71bcd7e2 > .holder > .main > .groups > .group
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
+	min-width: 0;
+}
+
+.e-71bcd7e2 > .holder > .main > .groups > .group > .group-title
+{
+	margin: 0 0 4px;
+	font-family: var(--ot-font-primary);
+	font-size: 11px;
+	font-weight: 700;
+	color: var(--ot-text-3);
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+}
+
+.e-71bcd7e2 > .holder > .main > .groups > .group > .group-list
+{
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.e-71bcd7e2 > .holder > .main > .groups > .group > .group-list .group-link
+{
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 0;
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	font-weight: 500;
+	color: var(--ot-text-2);
+	text-decoration: none;
+	transition: color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-71bcd7e2 > .holder > .main > .groups > .group > .group-list .group-link:hover
+{
+	color: var(--ot-text-1);
+}
+
+.e-71bcd7e2 > .holder > .main > .groups > .group > .group-list .group-link > i
+{
+	font-size: 16px;
+	color: var(--ot-text-3);
+}
+
+.e-71bcd7e2 > .holder > .main > .groups > .group > .group-list .group-link > .group-badge
+{
+	display: inline-flex;
+	align-items: center;
+	padding: 1px 6px;
+	background: var(--ot-brand-opacity);
+	color: var(--ot-brand);
+	border-radius: 100px;
+	font-size: 9px;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+}
+
+/* ===== BOTTOM BAR ===== */
+
+.e-71bcd7e2 > .holder > .bottom
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-m);
+	flex-wrap: wrap;
+	margin-top: var(--ot-spacing-l);
+	padding-top: var(--ot-spacing-m);
+	border-top: 1px solid var(--ot-bg-2-border);
+}
+
+.e-71bcd7e2 > .holder > .bottom > .copyright
+{
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-3);
+}
+
+.e-71bcd7e2 > .holder > .bottom > .legal
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	flex-wrap: wrap;
+}
+
+.e-71bcd7e2 > .holder > .bottom > .legal > .legal-link
+{
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	font-weight: 500;
+	color: var(--ot-text-3);
+	text-decoration: none;
+	transition: color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-71bcd7e2 > .holder > .bottom > .legal > .legal-link:hover
+{
+	color: var(--ot-text-1);
+}
+
+.e-71bcd7e2 > .holder > .bottom > .legal > .legal-link:not(:last-child)::after
+{
+	content: '·';
+	margin-left: var(--ot-spacing-s);
+	color: var(--ot-text-3);
+	opacity: 0.5;
+}
+
+.e-71bcd7e2 > .holder > .bottom > .social
+{
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	margin-left: auto;
+}
+
+.e-71bcd7e2 > .holder > .bottom > .social > .social-link
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 34px;
+	height: 34px;
+	border-radius: var(--ot-radius-s);
+	background: transparent;
+	color: var(--ot-text-2);
+	text-decoration: none;
+	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-71bcd7e2 > .holder > .bottom > .social > .social-link:hover
+{
+	background: var(--ot-bg-2);
+	color: var(--ot-brand);
+	transform: translateY(-1px);
+}
+
+.e-71bcd7e2 > .holder > .bottom > .social > .social-link > i
+{
+	font-size: 18px;
+}
+
+/* ===== BOTTOM SLOT ===== */
+
+.e-71bcd7e2 > .holder > .bottom-slot
+{
+	margin-top: var(--ot-spacing-m);
+	padding-top: var(--ot-spacing-m);
+	border-top: 1px solid var(--ot-bg-2-border);
+}
+
+/* ===== RESPONSIVE ===== */
+
+@media (max-width: 900px)
+{
+	.e-71bcd7e2 > .holder > .main
+	{
+		grid-template-columns: 1fr;
+	}
+
+	.e-71bcd7e2 > .holder > .main > .groups
+	{
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	.e-71bcd7e2 > .holder > .bottom
+	{
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.e-71bcd7e2 > .holder > .bottom > .social
+	{
+		margin-left: 0;
+	}
+}
+
+@media (max-width: 560px)
+{
+	.e-71bcd7e2 > .holder > .main > .groups
+	{
+		grid-template-columns: 1fr;
+	}
+}

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

@@ -0,0 +1,219 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'navigation-footer',
+		icon: 'call_to_action',
+		name: 'Footer',
+		description: 'Premium site footer with brand column, link groups, social icons, newsletter, legal bar and slots.',
+		category: 'Navigation',
+		author: 'OneType',
+		config: {
+			logo: {
+				type: 'string'
+			},
+			logoAlt: {
+				type: 'string',
+				value: 'Logo'
+			},
+			brandHref: {
+				type: 'string',
+				value: '/'
+			},
+			tagline: {
+				type: 'string'
+			},
+			groups: {
+				type: 'array',
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						title: { type: 'string' },
+						items: {
+							type: 'array',
+							each: {
+								type: 'object',
+								config: {
+									icon: { type: 'string' },
+									label: { type: 'string' },
+									href: { type: 'string' },
+									target: { type: 'string' },
+									badge: { type: 'string' }
+								}
+							}
+						}
+					}
+				}
+			},
+			social: {
+				type: 'array',
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						icon: { type: 'string' },
+						label: { type: 'string' },
+						href: { type: 'string' }
+					}
+				}
+			},
+			legal: {
+				type: 'array',
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						label: { type: 'string' },
+						href: { type: 'string' }
+					}
+				}
+			},
+			copyright: {
+				type: 'string'
+			},
+			newsletter: {
+				type: 'boolean'
+			},
+			newsletterTitle: {
+				type: 'string',
+				value: 'Stay in the loop'
+			},
+			newsletterDescription: {
+				type: 'string',
+				value: 'Get product updates and tips straight to your inbox.'
+			},
+			newsletterPlaceholder: {
+				type: 'string',
+				value: 'you@example.com'
+			},
+			newsletterButton: {
+				type: 'string',
+				value: 'Subscribe'
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-1', 'border-top'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border-top', 'clean']
+			},
+			_subscribe: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			this.hasTopSlot = !!this.Slots.top;
+			this.hasBottomSlot = !!this.Slots.bottom;
+			this.hasLogo = !!this.logo;
+			this.hasTagline = !!this.tagline;
+			this.hasGroups = this.groups && this.groups.length > 0;
+			this.hasSocial = this.social && this.social.length > 0;
+			this.hasLegal = this.legal && this.legal.length > 0;
+			this.hasCopyright = !!this.copyright;
+			this.hasBottomBar = this.hasLegal || this.hasCopyright || this.hasSocial;
+			this.hasNewsletter = !!this.newsletter;
+
+			this.newsletterEmail = '';
+
+			this.onNewsletterInput = ({ value }) =>
+			{
+				this.newsletterEmail = value;
+			};
+
+			this.subscribe = () =>
+			{
+				if(!this.newsletterEmail)
+				{
+					return;
+				}
+
+				if(this._subscribe)
+				{
+					this._subscribe({ value: this.newsletterEmail });
+				}
+
+				this.newsletterEmail = '';
+			};
+
+			return /* html */ `
+				<footer :class="'holder ' + variant.join(' ')">
+					<div ot-if="hasTopSlot" class="top-slot">
+						<slot name="top"></slot>
+					</div>
+
+					<div class="main">
+						<div class="brand-col">
+							<a ot-if="hasLogo" class="brand" :href="brandHref">
+								<img class="brand-logo" :src="logo" :alt="logoAlt" />
+							</a>
+
+							<p ot-if="hasTagline" class="tagline">{{ tagline }}</p>
+
+							<div ot-if="hasNewsletter" class="newsletter">
+								<div class="newsletter-text">
+									<h4 class="newsletter-title">{{ newsletterTitle }}</h4>
+									<p ot-if="newsletterDescription" class="newsletter-description">{{ newsletterDescription }}</p>
+								</div>
+								<form class="newsletter-form" ot-submit.prevent="subscribe">
+									<e-form-input
+										type="email"
+										icon="mail"
+										:placeholder="newsletterPlaceholder"
+										:value="newsletterEmail"
+										:_input="onNewsletterInput"
+										:variant="['bg-2', 'border', 'size-m']"
+									></e-form-input>
+									<e-form-button
+										:text="newsletterButton"
+										icon-right="arrow_forward"
+										:_click="subscribe"
+										:variant="['brand', 'size-m']"
+									></e-form-button>
+								</form>
+							</div>
+						</div>
+
+						<div ot-if="hasGroups" class="groups">
+							<div ot-for="group in groups" class="group">
+								<h4 ot-if="group.title" class="group-title">{{ group.title }}</h4>
+								<ul class="group-list">
+									<li ot-for="item in group.items">
+										<a class="group-link" :href="item.href || 'javascript:void(0)'" :target="item.target || null">
+											<i ot-if="item.icon">{{ item.icon }}</i>
+											<span>{{ item.label }}</span>
+											<span ot-if="item.badge" class="group-badge">{{ item.badge }}</span>
+										</a>
+									</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+
+					<div ot-if="hasBottomBar" class="bottom">
+						<div ot-if="hasCopyright" class="copyright">{{ copyright }}</div>
+
+						<div ot-if="hasLegal" class="legal">
+							<a ot-for="entry in legal" class="legal-link" :href="entry.href || 'javascript:void(0)'">{{ entry.label }}</a>
+						</div>
+
+						<div ot-if="hasSocial" class="social">
+							<a
+								ot-for="entry in social"
+								class="social-link"
+								:href="entry.href || 'javascript:void(0)'"
+								target="_blank"
+								rel="noopener"
+								:ot-tooltip="{ text: entry.label || '', position: { x: 'center', y: 'top' } }"
+							>
+								<i>{{ entry.icon }}</i>
+							</a>
+						</div>
+					</div>
+
+					<div ot-if="hasBottomSlot" class="bottom-slot">
+						<slot name="bottom"></slot>
+					</div>
+				</footer>
+			`;
+		}
+	});
+});