divhunt 2.0.0

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

@@ -0,0 +1,139 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'footer',
+	icon: 'view_agenda',
+	name: 'Footer',
+	description: 'Rich footer with brand info, multiple link columns, newsletter signup, social links, legal text, and payment badges. Enterprise-grade responsive layout.',
+	category: 'Navigation',
+	author: 'Divhunt',
+	config: {
+		logo: {
+			type: 'string',
+			value: 'Divhunt'
+		},
+		tagline: {
+			type: 'string',
+			value: 'Build websites and applications faster with our powerful platform.'
+		},
+		email: {
+			type: 'string',
+			value: 'support@divhunt.com'
+		},
+		phone: {
+			type: 'string',
+			value: '+1 (555) 123-4567'
+		},
+		address: {
+			type: 'string',
+			value: '123 Tech Street, San Francisco, CA 94105'
+		},
+		copyright: {
+			type: 'string',
+			value: '© 2026 Divhunt. All rights reserved.'
+		},
+		variant: {
+			type: 'array',
+			value: ['bg-2', 'border', 'size-s'],
+			options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'brand', 'size-s', 'size-m', 'size-l']
+		},
+		container: {
+			type: 'string',
+			value: 'm',
+			options: ['none', 's', 'm', 'l', 'full']
+		}
+	},
+	render: function()
+	{
+		this.columns = footer.Fn('columns');
+		this.socials = footer.Fn('get', { type: 'social' });
+		this.badges = footer.Fn('get', { type: 'badge' });
+
+		const update = () =>
+		{
+			this.columns = footer.Fn('columns');
+			this.socials = footer.Fn('get', { type: 'social' });
+			this.badges = footer.Fn('get', { type: 'badge' });
+		};
+
+		footer.ItemOn('added', update, 'footer');
+		footer.ItemOn('removed', update, 'footer');
+		footer.ItemOn('modified', update, 'footer');
+
+		this.containerClass = () =>
+		{
+			if (this.container === 'none')
+			{
+				return '';
+			}
+
+			return `dh-container-${this.container}`;
+		};
+
+		return `
+			<footer class="holder" :variant="variant.join(' ')">
+				<slot name="top"></slot>
+
+				<div :class="containerClass()">
+					<div class="main">
+						<div class="brand">
+							<h3>{{ logo }}</h3>
+							<p class="tagline">{{ tagline }}</p>
+							<div class="contact">
+								<a dh-if="email" :href="'mailto:' + email" class="item">
+									<i>mail</i>
+									<span>{{ email }}</span>
+								</a>
+								<a dh-if="phone" :href="'tel:' + phone" class="item">
+									<i>phone</i>
+									<span>{{ phone }}</span>
+								</a>
+								<div dh-if="address" class="item">
+									<i>location_on</i>
+									<span>{{ address }}</span>
+								</div>
+							</div>
+						</div>
+
+						<div class="columns">
+							<div dh-for="column in columns" class="column">
+								<h6>{{ column.label }}</h6>
+								<a dh-for="link in column.links" :href="link.href">
+									{{ link.label }}
+								</a>
+							</div>
+						</div>
+
+						<slot name="newsletter"></slot>
+					</div>
+
+					<div class="divider"></div>
+
+					<div class="bottom">
+						<div class="left">
+							<span class="copyright">{{ copyright }}</span>
+							<div dh-if="badges.length > 0" class="badges">
+								<div dh-for="badge in badges" class="badge">
+									<i>{{ badge.icon }}</i>
+									<span>{{ badge.label }}</span>
+								</div>
+							</div>
+						</div>
+
+						<div dh-if="socials.length > 0" class="socials">
+							<a dh-for="social in socials"
+							   :href="social.href"
+							   :title="social.label"
+							   target="_blank"
+							   rel="noopener">
+								<i>{{ social.icon }}</i>
+							</a>
+						</div>
+					</div>
+				</div>
+
+				<slot name="bottom"></slot>
+			</footer>
+		`;
+	}
+});

package/addons/render/elements/front/items/self/navigation/navbar/addon/_class/addon.js

@@ -0,0 +1,13 @@
+const navbar = divhunt.Addon('navbar', (addon) =>
+{
+	addon.Field('id', ['string']);
+	addon.Field('position', ['string', 'right']);
+	addon.Field('order', ['number', 0]);
+	addon.Field('icon', ['string', '']);
+	addon.Field('label', ['string', 'Menu Item']);
+	addon.Field('href', ['string', '#']);
+	addon.Field('variant', ['array', []]);
+	addon.Field('size', ['string', '']);
+	addon.Field('active', ['boolean', false]);
+	addon.Field('condition', ['boolean', true]);
+});

package/addons/render/elements/front/items/self/navigation/navbar/addon/functions/active.js

@@ -0,0 +1,7 @@
+navbar.Fn('active', function(id)
+{
+	Object.values(navbar.Items()).forEach(item =>
+	{
+		item.Set('active', item.Get('id') === id);
+	});
+});

package/addons/render/elements/front/items/self/navigation/navbar/addon/functions/get.js

@@ -0,0 +1,31 @@
+navbar.Fn('get', function(position = null)
+{
+	return Object.values(navbar.Items())
+		.filter(item =>
+		{
+			if (item.Get('condition') === false)
+			{
+				return false;
+			}
+
+			if (position && item.Get('position') !== position)
+			{
+				return false;
+			}
+
+			return true;
+		})
+		.sort((a, b) => a.Get('order') - b.Get('order'))
+		.map(item =>
+		({
+			id: item.Get('id'),
+			position: item.Get('position'),
+			order: item.Get('order'),
+			icon: item.Get('icon'),
+			label: item.Get('label'),
+			href: item.Get('href'),
+			variant: item.Get('variant'),
+			size: item.Get('size'),
+			active: item.Get('active')
+		}));
+});

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

@@ -0,0 +1,140 @@
+/* Base */
+.e-45daee5a > .holder
+{
+    display: flex;
+    align-items: center;
+    background: transparent;
+}
+
+.e-45daee5a > .holder > div
+{
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    width: 100%;
+}
+
+/* Left */
+.e-45daee5a > .holder > div > .left
+{
+    display: flex;
+    align-items: center;
+    gap: var(--dh-spacing-m);
+}
+
+.e-45daee5a > .holder > div > .left > .menu
+{
+    display: flex;
+    align-items: center;
+    gap: var(--dh-spacing-m);
+}
+
+.e-45daee5a > .holder > div > .left > .menu > div
+{
+    display: flex;
+}
+
+/* Middle */
+.e-45daee5a > .holder > div > .middle
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--dh-spacing-m);
+}
+
+.e-45daee5a > .holder > div > .middle > .menu
+{
+    display: flex;
+    align-items: center;
+    gap: var(--dh-spacing-m);
+}
+
+.e-45daee5a > .holder > div > .middle > .menu > div
+{
+    display: flex;
+}
+
+/* Right */
+.e-45daee5a > .holder > div > .right
+{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--dh-spacing-m);
+}
+
+.e-45daee5a > .holder > div > .right > .menu
+{
+    display: flex;
+    align-items: center;
+    gap: var(--dh-spacing-m);
+}
+
+.e-45daee5a > .holder > div > .right > .menu > div
+{
+    display: flex;
+}
+
+/* Variants - Background */
+.e-45daee5a > .holder[variant*="bg-1"]
+{
+    background: var(--dh-bg-1);
+}
+
+.e-45daee5a > .holder[variant*="bg-2"]
+{
+    background: var(--dh-bg-2);
+}
+
+.e-45daee5a > .holder[variant*="bg-3"]
+{
+    background: var(--dh-bg-3);
+}
+
+.e-45daee5a > .holder[variant*="bg-4"]
+{
+    background: var(--dh-bg-4);
+}
+
+/* Variants - Border */
+.e-45daee5a > .holder[variant*="border-bottom"]
+{
+    border-bottom: 1px solid var(--dh-bg-2-border);
+}
+
+.e-45daee5a > .holder[variant*="bg-1"][variant*="border-bottom"]
+{
+    border-bottom-color: var(--dh-bg-1-border);
+}
+
+.e-45daee5a > .holder[variant*="bg-2"][variant*="border-bottom"]
+{
+    border-bottom-color: var(--dh-bg-2-border);
+}
+
+.e-45daee5a > .holder[variant*="bg-3"][variant*="border-bottom"]
+{
+    border-bottom-color: var(--dh-bg-3-border);
+}
+
+.e-45daee5a > .holder[variant*="bg-4"][variant*="border-bottom"]
+{
+    border-bottom-color: var(--dh-bg-4-border);
+}
+
+/* Sizes */
+.e-45daee5a > .holder[size="s"]
+{
+    height: calc(var(--dh-height-s) * 1.5);
+}
+
+.e-45daee5a > .holder[size="m"]
+{
+    height: calc(var(--dh-height-m) * 1.5);
+}
+
+.e-45daee5a > .holder[size="l"]
+{
+    height: calc(var(--dh-height-l) * 1.5);
+}

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

@@ -0,0 +1,118 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+    id: 'navbar',
+    icon: 'menu',
+    name: 'Navbar',
+    description: 'Navigation bar component with logo, menu items, and action button. Fully responsive with mobile menu support.',
+    category: 'Navigation',
+    author: 'Divhunt',
+    config: {
+        variant: {
+            type: 'array',
+            value: ['bg-2', 'border-bottom'],
+            options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border-bottom']
+        },
+        container: {
+            type: 'string',
+            value: 'full',
+            options: ['none', 's', 'm', 'l', 'full']
+        },
+        size: {
+            type: 'string',
+            value: 'm',
+            options: ['s', 'm', 'l']
+        },
+        onMenuClick: {
+            type: 'function'
+        }
+    },
+    render: function()
+    {
+        this.leftMenus = navbar.Fn('get', 'left');
+        this.middleMenus = navbar.Fn('get', 'middle');
+        this.rightMenus = navbar.Fn('get', 'right');
+
+        const update = () =>
+        {
+            this.leftMenus = navbar.Fn('get', 'left');
+            this.middleMenus = navbar.Fn('get', 'middle');
+            this.rightMenus = navbar.Fn('get', 'right');
+        };
+
+        navbar.ItemOn('added', update, 'navbar');
+        navbar.ItemOn('removed', update, 'navbar');
+        navbar.ItemOn('modified', update, 'navbar');
+
+        this.handleMenuClick = (item) =>
+        {
+            navbar.Fn('active', item.id);
+
+            if (this.onMenuClick)
+            {
+                this.onMenuClick({ item });
+            }
+        };
+
+        this.containerClass = () =>
+        {
+            if (this.container === 'none')
+            {
+                return '';
+            }
+
+            return `dh-container-${this.container}`;
+        };
+
+        return `
+            <nav class="holder" :variant="variant.join(' ')" :size="size">
+                <div :class="containerClass()">
+                    <div class="left">
+                        <slot name="left:start"></slot>
+                        <div class="menu" dh-if="leftMenus.length > 0">
+                            <e-menu dh-for="menu in leftMenus"
+                                :icon="menu.icon"
+                                :label="menu.label"
+                                :href="menu.href"
+                                :active="menu.active"
+                                :variant="menu.variant"
+                                :onClick="() => handleMenuClick(menu)">
+                            </e-menu>
+                        </div>
+                        <slot name="left:end"></slot>
+                    </div>
+
+                    <div class="middle">
+                        <slot name="middle:start"></slot>
+                        <div class="menu" dh-if="middleMenus.length > 0">
+                            <e-menu dh-for="menu in middleMenus"
+                                :icon="menu.icon"
+                                :label="menu.label"
+                                :href="menu.href"
+                                :active="menu.active"
+                                :variant="menu.variant"
+                                :onClick="() => handleMenuClick(menu)">
+                            </e-menu>
+                        </div>
+                        <slot name="middle:end"></slot>
+                    </div>
+
+                    <div class="right">
+                        <slot name="right:start"></slot>
+                        <div class="menu" dh-if="rightMenus.length > 0">
+                            <e-menu dh-for="menu in rightMenus"
+                                :icon="menu.icon"
+                                :label="menu.label"
+                                :href="menu.href"
+                                :active="menu.active"
+                                :variant="menu.variant"
+                                :onClick="() => handleMenuClick(menu)">
+                            </e-menu>
+                        </div>
+                        <slot name="right:end"></slot>
+                    </div>
+                </div>
+            </nav>
+        `;
+    }
+});

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

@@ -0,0 +1,160 @@
+/* Base */
+.e-727a7230 > .holder
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-x);
+}
+
+.e-727a7230 > .holder > .button,
+.e-727a7230 > .holder > .pages > .page
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 36px;
+	height: 36px;
+	padding: 0 var(--dh-spacing-s);
+	border: 1px solid var(--dh-bg-2-border);
+	border-radius: var(--dh-radius-s);
+	background: transparent;
+	color: var(--dh-text-1);
+	font-weight: 500;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	user-select: none;
+}
+
+.e-727a7230 > .holder > .button:hover:not(:disabled),
+.e-727a7230 > .holder > .pages > .page:hover:not(:disabled):not([active="true"])
+{
+	background: var(--dh-bg-2);
+	border-color: var(--dh-bg-2-border);
+}
+
+.e-727a7230 > .holder > .button:disabled,
+.e-727a7230 > .holder > .pages > .page:disabled
+{
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+
+.e-727a7230 > .holder > .button > .icon
+{
+	font-size: 18px;
+}
+
+.e-727a7230 > .holder > .pages
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-x);
+}
+
+.e-727a7230 > .holder > .pages > .page[active="true"]
+{
+	background: var(--dh-brand);
+	border-color: var(--dh-brand-border);
+	color: white;
+	cursor: default;
+}
+
+/* Variants - Background */
+.e-727a7230 > .holder[variant*="bg-1"] > .button,
+.e-727a7230 > .holder[variant*="bg-1"] > .pages > .page
+{
+	background: var(--dh-bg-1);
+	border-color: var(--dh-bg-1-border);
+}
+
+.e-727a7230 > .holder[variant*="bg-1"] > .button:hover:not(:disabled),
+.e-727a7230 > .holder[variant*="bg-1"] > .pages > .page:hover:not(:disabled):not([active="true"])
+{
+	background: var(--dh-bg-1-hover);
+}
+
+.e-727a7230 > .holder[variant*="bg-2"] > .button,
+.e-727a7230 > .holder[variant*="bg-2"] > .pages > .page
+{
+	background: var(--dh-bg-2);
+	border-color: var(--dh-bg-2-border);
+}
+
+.e-727a7230 > .holder[variant*="bg-2"] > .button:hover:not(:disabled),
+.e-727a7230 > .holder[variant*="bg-2"] > .pages > .page:hover:not(:disabled):not([active="true"])
+{
+	background: var(--dh-bg-2-hover);
+}
+
+.e-727a7230 > .holder[variant*="bg-3"] > .button,
+.e-727a7230 > .holder[variant*="bg-3"] > .pages > .page
+{
+	background: var(--dh-bg-3);
+	border-color: var(--dh-bg-3-border);
+}
+
+.e-727a7230 > .holder[variant*="bg-3"] > .button:hover:not(:disabled),
+.e-727a7230 > .holder[variant*="bg-3"] > .pages > .page:hover:not(:disabled):not([active="true"])
+{
+	background: var(--dh-bg-3-hover);
+}
+
+.e-727a7230 > .holder[variant*="bg-4"] > .button,
+.e-727a7230 > .holder[variant*="bg-4"] > .pages > .page
+{
+	background: var(--dh-bg-4);
+	border-color: var(--dh-bg-4-border);
+}
+
+.e-727a7230 > .holder[variant*="bg-4"] > .button:hover:not(:disabled),
+.e-727a7230 > .holder[variant*="bg-4"] > .pages > .page:hover:not(:disabled):not([active="true"])
+{
+	background: var(--dh-bg-4-hover);
+}
+
+/* Variants - Border */
+.e-727a7230 > .holder[variant*="border"] > .button,
+.e-727a7230 > .holder[variant*="border"] > .pages > .page
+{
+	border: 1px solid var(--dh-bg-2-border);
+}
+
+/* Variants - Sizes */
+.e-727a7230 > .holder[variant*="size-s"] > .button,
+.e-727a7230 > .holder[variant*="size-s"] > .pages > .page
+{
+	min-width: 32px;
+	height: 32px;
+	font-size: var(--dh-size-s);
+}
+
+.e-727a7230 > .holder[variant*="size-s"] > .button > .icon
+{
+	font-size: 16px;
+}
+
+.e-727a7230 > .holder[variant*="size-m"] > .button,
+.e-727a7230 > .holder[variant*="size-m"] > .pages > .page
+{
+	min-width: 36px;
+	height: 36px;
+	font-size: var(--dh-size-m);
+}
+
+.e-727a7230 > .holder[variant*="size-m"] > .button > .icon
+{
+	font-size: 18px;
+}
+
+.e-727a7230 > .holder[variant*="size-l"] > .button,
+.e-727a7230 > .holder[variant*="size-l"] > .pages > .page
+{
+	min-width: 42px;
+	height: 42px;
+	font-size: var(--dh-size-l);
+}
+
+.e-727a7230 > .holder[variant*="size-l"] > .button > .icon
+{
+	font-size: 20px;
+}