divhunt 2.0.0

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

@@ -0,0 +1,131 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'pagination',
+	icon: 'last_page',
+	name: 'Pagination',
+	description: 'Pagination component with page numbers, previous/next buttons, and customizable appearance.',
+	category: 'Navigation',
+	author: 'Divhunt',
+	config: {
+		page: {
+			type: 'number',
+			value: 1
+		},
+		pages: {
+			type: 'number',
+			value: 10
+		},
+		visible: {
+			type: 'number',
+			value: 5
+		},
+		first: {
+			type: 'boolean',
+			value: true
+		},
+		last: {
+			type: 'boolean',
+			value: true
+		},
+		prev: {
+			type: 'boolean',
+			value: true
+		},
+		next: {
+			type: 'boolean',
+			value: true
+		},
+		variant: {
+			type: 'array',
+			value: ['size-m'],
+			options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
+		},
+		onChange: {
+			type: 'function'
+		}
+	},
+	render: function()
+	{
+		this.getPages = () =>
+		{
+			const pageList = [];
+			const half = Math.floor(this.visible / 2);
+			let start = Math.max(1, this.page - half);
+			let end = Math.min(this.pages, start + this.visible - 1);
+
+			if (end - start + 1 < this.visible)
+			{
+				start = Math.max(1, end - this.visible + 1);
+			}
+
+			if (start > 1)
+			{
+				pageList.push(1);
+				if (start > 2)
+				{
+					pageList.push('...');
+				}
+			}
+
+			for (let i = start; i <= end; i++)
+			{
+				pageList.push(i);
+			}
+
+			if (end < this.pages)
+			{
+				if (end < this.pages - 1)
+				{
+					pageList.push('...');
+				}
+				pageList.push(this.pages);
+			}
+
+			return pageList;
+		};
+
+		this.goToPage = (pageNum) =>
+		{
+			if (pageNum !== '...' && pageNum !== this.page && pageNum >= 1 && pageNum <= this.pages)
+			{
+				this.page = pageNum;
+				if (this.onChange)
+				{
+					this.onChange(pageNum);
+				}
+			}
+		};
+
+		this.goToFirst = () => this.goToPage(1);
+		this.goToLast = () => this.goToPage(this.pages);
+		this.goToPrev = () => this.goToPage(this.page - 1);
+		this.goToNext = () => this.goToPage(this.page + 1);
+
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				<button dh-if="first" class="button first" :disabled="page === 1" dh-click="goToFirst">
+					<i class="icon">first_page</i>
+				</button>
+
+				<button dh-if="prev" class="button prev" :disabled="page === 1" dh-click="goToPrev">
+					<i class="icon">chevron_left</i>
+				</button>
+
+				<div class="pages">
+					<button dh-for="pageNum in getPages()" class="page" :active="pageNum === page ? 'true' : 'false'" :disabled="pageNum === '...'" dh-click="() => goToPage(pageNum)">
+						{{ pageNum }}
+					</button>
+				</div>
+
+				<button dh-if="next" class="button next" :disabled="page === pages" dh-click="goToNext">
+					<i class="icon">chevron_right</i>
+				</button>
+
+				<button dh-if="last" class="button last" :disabled="page === pages" dh-click="goToLast">
+					<i class="icon">last_page</i>
+				</button>
+			</div>
+		`;
+	}
+});

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

@@ -0,0 +1,12 @@
+const sidebar = divhunt.Addon('sidebar', (addon) =>
+{
+	addon.Field('id', ['string|number']);
+	addon.Field('type', ['string', 'item']);
+	addon.Field('group', ['string', '']);
+	addon.Field('order', ['number', 0]);
+	addon.Field('icon', ['string', 'folder']);
+	addon.Field('label', ['string', 'Menu Item']);
+	addon.Field('href', ['string', '#']);
+	addon.Field('active', ['boolean', false]);
+	addon.Field('condition', ['boolean', true]);
+});

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

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

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

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

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

@@ -0,0 +1,10 @@
+sidebar.Fn('groups', function()
+{
+	const groups = sidebar.Fn('get', { type: 'group' });
+
+	return groups.map(group => ({
+		id: group.id,
+		label: group.label,
+		items: this.Fn('get', { type: 'item', group: group.id })
+	}));
+});

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

@@ -0,0 +1,278 @@
+/* Base */
+.e-6059377a 
+{
+	height: 100%;
+}
+
+.e-6059377a > .holder
+{
+	display: flex;
+	flex-direction: column;
+	height: max-content;
+	width: 250px;
+	background: transparent;
+	transition: width 0.2s;
+	height: 100%;
+}
+
+/* Content */
+.e-6059377a > .holder > .content
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-s);
+	flex: 1;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+/* Group */
+.e-6059377a > .holder > .content > .group
+{
+	display: flex;
+	flex-direction: column;
+	padding-bottom: var(--dh-spacing-m);
+	border-bottom: 1px solid var(--dh-bg-3-border);
+}
+
+.e-6059377a > .holder > .content > .group:last-child
+{
+	border-bottom: none;
+	padding-bottom: 0;
+}
+
+.e-6059377a > .holder > .content > .group > label
+{
+	display: flex;
+	align-items: center;
+	height: 28px;
+	padding: 0 var(--dh-spacing-s);
+	font-size: 11px;
+	font-weight: 600;
+	color: var(--dh-text-2);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	margin-top: var(--dh-spacing-s);
+	margin-bottom: var(--dh-spacing-x);
+}
+
+.e-6059377a > .holder > .content > .group > .items
+{
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.e-6059377a > .holder > .content > .group > .items > .item
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-s);
+	padding: var(--dh-spacing-s) var(--dh-spacing-m);
+	color: var(--dh-text-1);
+	font-size: var(--dh-size-m);
+	font-weight: 500;
+	text-decoration: none;
+	cursor: pointer;
+	transition: all 0.2s;
+	border-radius: 0;
+}
+
+.e-6059377a > .holder > .content > .group > .items > .item:hover
+{
+	background: var(--dh-bg-3);
+}
+
+.e-6059377a > .holder > .content > .group > .items > .item:focus-visible
+{
+	outline: 2px solid var(--dh-brand);
+	outline-offset: 2px;
+}
+
+.e-6059377a > .holder > .content > .group > .items > .item[active]
+{
+	color: var(--dh-brand);
+}
+
+.e-6059377a > .holder > .content > .group > .items > .item > i
+{
+	flex-shrink: 0;
+	width: 20px;
+	height: 20px;
+	font-size: 20px;
+	color: var(--dh-text-2);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.2s;
+}
+
+.e-6059377a > .holder > .content > .group > .items > .item:hover > i
+{
+	color: var(--dh-text-1);
+}
+
+.e-6059377a > .holder > .content > .group > .items > .item[active] > i
+{
+	color: var(--dh-brand);
+}
+
+.e-6059377a > .holder > .content > .group > .items > .item > span
+{
+	flex: 1;
+	min-width: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* Variants - Background */
+.e-6059377a > .holder[variant*="bg-1"]
+{
+	background: var(--dh-bg-1);
+	padding: var(--dh-spacing-m);
+}
+
+.e-6059377a > .holder[variant*="bg-2"]
+{
+	background: var(--dh-bg-2);
+	padding: var(--dh-spacing-m);
+}
+
+.e-6059377a > .holder[variant*="bg-3"]
+{
+	background: var(--dh-bg-3);
+	padding: var(--dh-spacing-m);
+}
+
+.e-6059377a > .holder[variant*="bg-4"]
+{
+	background: var(--dh-bg-4);
+	padding: var(--dh-spacing-m);
+}
+
+/* Variants - Border Full */
+.e-6059377a > .holder[variant*="bg-1"][variant*="border-full"]
+{
+	border: 1px solid var(--dh-bg-1-border);
+}
+
+.e-6059377a > .holder[variant*="bg-2"][variant*="border-full"]
+{
+	border: 1px solid var(--dh-bg-2-border);
+}
+
+.e-6059377a > .holder[variant*="bg-3"][variant*="border-full"]
+{
+	border: 1px solid var(--dh-bg-3-border);
+}
+
+.e-6059377a > .holder[variant*="bg-4"][variant*="border-full"]
+{
+	border: 1px solid var(--dh-bg-4-border);
+}
+
+.e-6059377a > .holder[variant*="bg-1"][variant*="border-left"]
+{
+	border-left: 1px solid var(--dh-bg-1-border);
+}
+
+.e-6059377a > .holder[variant*="bg-2"][variant*="border-left"]
+{
+	border-left: 1px solid var(--dh-bg-2-border);
+}
+
+.e-6059377a > .holder[variant*="bg-3"][variant*="border-left"]
+{
+	border-left: 1px solid var(--dh-bg-3-border);
+}
+
+.e-6059377a > .holder[variant*="bg-4"][variant*="border-left"]
+{
+	border-left: 1px solid var(--dh-bg-4-border);
+}
+
+.e-6059377a > .holder[variant*="bg-1"][variant*="border-right"]
+{
+	border-right: 1px solid var(--dh-bg-1-border);
+}
+
+.e-6059377a > .holder[variant*="bg-2"][variant*="border-right"]
+{
+	border-right: 1px solid var(--dh-bg-2-border);
+}
+
+.e-6059377a > .holder[variant*="bg-3"][variant*="border-right"]
+{
+	border-right: 1px solid var(--dh-bg-3-border);
+}
+
+.e-6059377a > .holder[variant*="bg-4"][variant*="border-right"]
+{
+	border-right: 1px solid var(--dh-bg-4-border);
+}
+
+/* Variants - Radius */
+.e-6059377a > .holder[variant*="radius-s"]
+{
+	border-radius: var(--dh-radius-s);
+}
+
+.e-6059377a > .holder[variant*="radius-m"]
+{
+	border-radius: var(--dh-radius-m);
+}
+
+.e-6059377a > .holder[variant*="radius-l"]
+{
+	border-radius: var(--dh-radius-l);
+}
+
+/* Variants - Size */
+.e-6059377a > .holder[variant*="size-s"]
+{
+	width: 220px;
+}
+
+.e-6059377a > .holder[variant*="size-m"]
+{
+	width: 250px;
+}
+
+.e-6059377a > .holder[variant*="size-l"]
+{
+	width: 280px;
+}
+
+.e-6059377a > .holder[variant*="size-full"]
+{
+	width: 100%;
+}
+
+/* Footer */
+.e-6059377a > .holder > footer
+{
+	margin-top: auto;
+}
+
+/* Collapsed */
+.e-6059377a > .holder[collapsed="true"]
+{
+	width: 64px;
+}
+
+
+/* Responsive */
+@media (max-width: 768px)
+{
+	.e-6059377a > .holder
+	{
+		width: 100%;
+		max-width: 280px;
+	}
+
+	.e-6059377a > .holder[collapsed="true"]
+	{
+		width: 64px;
+	}
+}

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

@@ -0,0 +1,85 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+    id: 'sidebar',
+    icon: 'menu',
+    name: 'Sidebar',
+    description: 'Collapsible sidebar navigation with header, grouped menu items, nested menus, and footer. Supports expanded and collapsed states.',
+    category: 'Navigation',
+    author: 'Divhunt',
+    config: {
+        variant: {
+            type: 'array',
+            value: ['bg-2', 'size-full'],
+            options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border-full', 'border-left', 'border-right', 'radius-s', 'radius-m', 'radius-l', 'size-s', 'size-m', 'size-l', 'size-full']
+        },
+        groups: {
+            type: 'array',
+            value: []
+        },
+        collapsed: {
+            type: 'boolean',
+            value: false
+        },
+        onMenuClick: {
+            type: 'function'
+        }
+    },
+    render: function()
+    {
+        const filterGroups = (allGroups) =>
+        {
+            if (!this.groups || this.groups.length === 0)
+            {
+                return allGroups;
+            }
+
+            return allGroups.filter(group => this.groups.includes(group.id));
+        };
+
+        this.filteredGroups = filterGroups(sidebar.Fn('groups'));
+
+        const update = () =>
+        {
+            this.filteredGroups = filterGroups(sidebar.Fn('groups'));
+        };
+
+        sidebar.ItemOn('added', update, 'sidebar');
+        sidebar.ItemOn('removed', update, 'sidebar');
+        sidebar.ItemOn('modified', update, 'sidebar');
+
+        this.handleMenuClick = (item) =>
+        {
+            sidebar.Fn('active', item.id);
+
+            if (this.onMenuClick)
+            {
+                this.onMenuClick({ item });
+            }
+        };
+
+        return `
+            <div class="holder" :variant="variant.join(' ')" :collapsed="collapsed">
+                <slot name="top"></slot>
+
+                <nav class="content">
+                    <slot name="content"></slot>
+
+                    <div dh-for="group in filteredGroups" class="group">
+                        <label dh-if="group.label">{{ group.label }}</label>
+                        <div class="items">
+                            <a dh-for="item in group.items" :href="item.href" class="item" :active="item.active" dh-click="handleMenuClick(item)">
+                                <i>{{ item.icon }}</i>
+                                <span>{{ item.label }}</span>
+                            </a>
+                        </div>
+                    </div>
+                </nav>
+
+                <footer>
+                    <slot name="bottom"></slot>
+                </footer>
+            </div>
+        `;
+    }
+});