divhunt 2.0.4 → 2.0.6

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

@@ -1,278 +0,0 @@
-/* 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

@@ -1,85 +0,0 @@
-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>
-        `;
-    }
-});

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

@@ -1,202 +0,0 @@
-/* Base */
-.e-4d809c05 > .holder
-{
-	display: flex;
-	gap: 0;
-}
-
-.e-4d809c05 > .holder > .step
-{
-	display: flex;
-	align-items: center;
-	flex: 1;
-	cursor: pointer;
-	position: relative;
-}
-
-.e-4d809c05 > .holder > .step > .circle
-{
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 40px;
-	height: 40px;
-	border-radius: 50%;
-	background: var(--dh-bg-2);
-	border: 2px solid var(--dh-bg-2-border);
-	color: var(--dh-text-2);
-	font-weight: 600;
-	transition: all 0.2s ease;
-	flex-shrink: 0;
-	z-index: 1;
-}
-
-.e-4d809c05 > .holder > .step > .circle > .icon
-{
-	font-size: 20px;
-}
-
-.e-4d809c05 > .holder > .step > .circle > .number
-{
-	font-size: 16px;
-}
-
-.e-4d809c05 > .holder > .step > .content
-{
-	display: flex;
-	flex-direction: column;
-	gap: var(--dh-spacing-x);
-	margin-left: var(--dh-spacing-s);
-	min-width: 0;
-}
-
-.e-4d809c05 > .holder > .step > .content > .label
-{
-	font-weight: 600;
-	color: var(--dh-text-1);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.e-4d809c05 > .holder > .step > .content > .description
-{
-	font-size: var(--dh-size-s);
-	color: var(--dh-text-2);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.e-4d809c05 > .holder > .step > .connector
-{
-	flex: 1;
-	height: 2px;
-	background: var(--dh-bg-2-border);
-	margin: 0 var(--dh-spacing-m);
-	transition: background 0.2s ease;
-}
-
-.e-4d809c05 > .holder > .step[status="current"] > .circle
-{
-	background: var(--dh-brand);
-	border-color: var(--dh-brand-border);
-	color: white;
-}
-
-.e-4d809c05 > .holder > .step[status="completed"] > .circle
-{
-	background: var(--dh-brand);
-	border-color: var(--dh-brand-border);
-	color: white;
-}
-
-.e-4d809c05 > .holder > .step[status="completed"] > .connector
-{
-	background: var(--dh-brand);
-}
-
-.e-4d809c05 > .holder > .step[status="pending"] > .circle
-{
-	background: var(--dh-bg-2);
-	border-color: var(--dh-bg-2-border);
-	color: var(--dh-text-2);
-}
-
-.e-4d809c05 > .holder > .step[status="pending"] > .content > .label
-{
-	color: var(--dh-text-2);
-}
-
-/* Variants - Vertical */
-.e-4d809c05 > .holder[variant*="vertical"]
-{
-	flex-direction: column;
-	gap: var(--dh-spacing-l);
-}
-
-.e-4d809c05 > .holder[variant*="vertical"] > .step
-{
-	flex-direction: row;
-	align-items: flex-start;
-}
-
-.e-4d809c05 > .holder[variant*="vertical"] > .step > .content
-{
-	margin-left: var(--dh-spacing-s);
-	margin-top: 0;
-}
-
-.e-4d809c05 > .holder[variant*="vertical"] > .step > .connector
-{
-	position: absolute;
-	left: 20px;
-	top: 40px;
-	width: 2px;
-	height: calc(100% + var(--dh-spacing-l));
-	margin: 0;
-}
-
-/* Variants - Sizes */
-.e-4d809c05 > .holder[variant*="size-s"] > .step > .circle
-{
-	width: 32px;
-	height: 32px;
-}
-
-.e-4d809c05 > .holder[variant*="size-s"] > .step > .circle > .icon
-{
-	font-size: 16px;
-}
-
-.e-4d809c05 > .holder[variant*="size-s"] > .step > .circle > .number
-{
-	font-size: 14px;
-}
-
-.e-4d809c05 > .holder[variant*="size-s"] > .step > .content > .label
-{
-	font-size: var(--dh-size-s);
-}
-
-.e-4d809c05 > .holder[variant*="size-m"] > .step > .circle
-{
-	width: 40px;
-	height: 40px;
-}
-
-.e-4d809c05 > .holder[variant*="size-m"] > .step > .circle > .icon
-{
-	font-size: 20px;
-}
-
-.e-4d809c05 > .holder[variant*="size-m"] > .step > .circle > .number
-{
-	font-size: 16px;
-}
-
-.e-4d809c05 > .holder[variant*="size-m"] > .step > .content > .label
-{
-	font-size: var(--dh-size-m);
-}
-
-.e-4d809c05 > .holder[variant*="size-l"] > .step > .circle
-{
-	width: 48px;
-	height: 48px;
-}
-
-.e-4d809c05 > .holder[variant*="size-l"] > .step > .circle > .icon
-{
-	font-size: 24px;
-}
-
-.e-4d809c05 > .holder[variant*="size-l"] > .step > .circle > .number
-{
-	font-size: 18px;
-}
-
-.e-4d809c05 > .holder[variant*="size-l"] > .step > .content > .label
-{
-	font-size: var(--dh-size-l);
-}

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

@@ -1,82 +0,0 @@
-import elements from '#elements/load.js';
-
-elements.ItemAdd({
-	id: 'stepper',
-	icon: 'linear_scale',
-	name: 'Stepper',
-	description: 'Step-by-step progress indicator with customizable steps, icons, and completion states.',
-	category: 'Navigation',
-	author: 'Divhunt',
-	config: {
-		steps: {
-			type: 'array',
-			value: [
-				{ label: 'Step 1', description: 'First step', icon: 'looks_one' },
-				{ label: 'Step 2', description: 'Second step', icon: 'looks_two' },
-				{ label: 'Step 3', description: 'Third step', icon: 'looks_3' }
-			],
-			each: {
-				type: 'object',
-				config: {
-					label: ['string'],
-					description: ['string'],
-					icon: ['string']
-				}
-			}
-		},
-		step: {
-			type: 'number',
-			value: 1
-		},
-		variant: {
-			type: 'array',
-			value: ['horizontal', 'size-m'],
-			options: ['horizontal', 'vertical', 'size-s', 'size-m', 'size-l']
-		},
-		onChange: {
-			type: 'function'
-		}
-	},
-	render: function()
-	{
-		this.goToStep = (index) =>
-		{
-			if (index >= 0 && index < this.steps.length)
-			{
-				this.step = index;
-				if (this.onChange)
-				{
-					this.onChange(index);
-				}
-			}
-		};
-
-		this.getStatus = (index) =>
-		{
-			if (index < this.step) return 'completed';
-			if (index === this.step) return 'current';
-			return 'pending';
-		};
-
-		this.isCompleted = (index) => index < this.step;
-
-		return `
-			<div class="holder" :variant="variant.join(' ')">
-				<div dh-for="step, index in steps" class="step" :status="getStatus(index)" dh-click="() => goToStep(index)">
-					<div class="circle">
-						<i dh-if="isCompleted(index)" class="icon check">check</i>
-						<i dh-if="!isCompleted(index) && step.icon" class="icon">{{ step.icon }}</i>
-						<span dh-if="!isCompleted(index) && !step.icon" class="number">{{ index + 1 }}</span>
-					</div>
-
-					<div class="content">
-						<div class="label">{{ step.label }}</div>
-						<div dh-if="step.description" class="description">{{ step.description }}</div>
-					</div>
-
-					<div dh-if="index < steps.length - 1" class="connector"></div>
-				</div>
-			</div>
-		`;
-	}
-});

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

@@ -1,32 +0,0 @@
-const tabs = divhunt.Addon('tabs', (addon) =>
-{
-	addon.Field('id', ['string|number']);
-	addon.Field('order', ['number', 0]);
-	addon.Field('label', ['string']);
-	addon.Field('icon', ['string']);
-	addon.Field('badge', ['string|number']);
-	addon.Field('active', ['boolean', false]);
-	addon.Field('disabled', ['boolean', false]);
-	addon.Field('condition', ['function']);
-});
-
-tabs.Fn('get', function()
-{
-	let result = Object.values(this.Items());
-
-	result = result.filter(item =>
-	{
-		return !item.Get('condition') || item.Get('condition')(item);
-	});
-
-	result = result.sort((a, b) => a.Get('order') - b.Get('order'));
-
-	return result.map(item => ({
-		id: item.Get('id'),
-		label: item.Get('label'),
-		icon: item.Get('icon'),
-		badge: item.Get('badge'),
-		active: item.Get('active'),
-		disabled: item.Get('disabled')
-	}));
-});