divhunt 2.0.5 → 2.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "divhunt",
-    "version": "2.0.5",
+    "version": "2.0.6",
     "description": "Full-stack isomorphic JavaScript framework built from scratch. One addon abstraction powers databases, servers, commands, pages, directives, queues, and more.",
     "type": "module",
     "main": "lib/load.js",

package/addons/render/elements/front/items/self/base/menu/menu.js

@@ -1,96 +0,0 @@
-import elements from '#elements/load.js';
-
-elements.ItemAdd({
-	id: 'menu',
-	icon: 'list',
-	name: 'Menu',
-	description: 'Menu item with icon, label, badge, expandable children, and nested level support.',
-	category: 'Navigation',
-	author: 'Divhunt',
-	config: {
-		icon: {
-			type: 'string',
-			value: 'folder'
-		},
-		label: {
-			type: 'string',
-			value: 'Dashboard'
-		},
-		badge: {
-			type: 'string',
-			value: ''
-		},
-		href: {
-			type: 'string',
-			value: '#'
-		},
-		level: {
-			type: 'number',
-			value: 0
-		},
-		active: {
-			type: 'boolean',
-			value: false
-		},
-		expanded: {
-			type: 'boolean',
-			value: false
-		},
-		expandable: {
-			type: 'boolean',
-			value: false
-		},
-		disabled: {
-			type: 'boolean',
-			value: false
-		},
-		variant: {
-			type: 'array',
-			value: ['size-m'],
-			options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
-		},
-		onClick: {
-			type: 'function'
-		},
-		onExpand: {
-			type: 'function'
-		}
-	},
-	render: function()
-	{
-		this.handleClick = () =>
-		{
-			if (this.disabled) return;
-
-			if (this.onClick)
-			{
-				this.onClick();
-			}
-		};
-
-		this.handleExpand = (e) =>
-		{
-			e.preventDefault();
-			e.stopPropagation();
-
-			if (this.disabled) return;
-
-			this.expanded = !this.expanded;
-
-			if (this.onExpand)
-			{
-				this.onExpand({ expanded: this.expanded });
-			}
-		};
-
-		return `
-			<a :href="href" class="holder" :variant="variant.join(' ')" :level="level" :active="active" :expanded="expanded" :disabled="disabled" dh-click="handleClick">
-				<i dh-if="expandable" class="chevron" dh-click="handleExpand">chevron_right</i>
-				<i dh-if="icon">{{ icon }}</i>
-				<span>{{ label }}</span>
-				<e-tag dh-if="badge" :text="badge" :variant="['bg-3', 'size-s']"></e-tag>
-				<slot name="end"></slot>
-			</a>
-		`;
-	}
-});

package/addons/render/elements/front/items/self/base/menu/styles/base.css

@@ -1,116 +0,0 @@
-.e-4de878b > .holder
-{
-	display: flex;
-	align-items: center;
-	gap: var(--dh-spacing-s);
-	width: 100%;
-	padding: var(--dh-spacing-s) var(--dh-spacing-m);
-	color: var(--dh-text-1);
-	text-decoration: none;
-	font-size: var(--dh-size-m);
-	font-weight: 500;
-	line-height: 1.5;
-	border-radius: 0;
-	border-bottom: 1px solid var(--dh-bg-3-border);
-	cursor: pointer;
-	user-select: none;
-	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.e-4de878b > .holder:last-child
-{
-	border-bottom: none;
-}
-
-.e-4de878b > .holder:focus-visible
-{
-	outline: 2px inset var(--dh-brand);
-	outline-offset: 1px;
-}
-
-.e-4de878b > .holder:hover
-{
-	background: var(--dh-bg-3);
-}
-
-.e-4de878b > .holder[active]
-{
-	background: var(--dh-bg-3);
-	color: var(--dh-brand);
-	font-weight: 600;
-	border-left: 3px solid var(--dh-brand);
-	padding-left: calc(var(--dh-spacing-m) - 3px);
-	transform: scale(1.01);
-}
-
-.e-4de878b > .holder[active] > i
-{
-	color: var(--dh-brand);
-}
-
-.e-4de878b > .holder[disabled]
-{
-	opacity: 0.5;
-	cursor: not-allowed;
-	pointer-events: none;
-}
-
-.e-4de878b > .holder[level="1"]
-{
-	padding-left: var(--dh-spacing-l);
-}
-
-.e-4de878b > .holder[level="2"]
-{
-	padding-left: 50px;
-}
-
-.e-4de878b > .holder[level="3"]
-{
-	padding-left: 66px;
-}
-
-.e-4de878b > .holder[level="4"]
-{
-	padding-left: 82px;
-}
-
-.e-4de878b > .holder > .chevron
-{
-	flex-shrink: 0;
-	font-size: var(--dh-size-s);
-	color: var(--dh-text-2);
-	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.e-4de878b > .holder[expanded] > .chevron
-{
-	transform: rotate(90deg);
-}
-
-.e-4de878b > .holder > i
-{
-	flex-shrink: 0;
-	width: 20px;
-	height: 20px;
-	font-size: 20px;
-	color: var(--dh-text-2);
-	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.e-4de878b > .holder:hover > i
-{
-	color: var(--dh-text-1);
-}
-
-.e-4de878b > .holder > span
-{
-	flex: 1;
-	min-width: 0;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}

package/addons/render/elements/front/items/self/base/menu/styles/sizes.css

@@ -1,27 +0,0 @@
-.e-4de878b > .holder[variant*="size-s"]
-{
-	min-height: 24px;
-	padding: 2px var(--dh-spacing-x);
-	font-size: var(--dh-size-s);
-}
-
-.e-4de878b > .holder[variant*="size-s"] > i
-{
-	font-size: var(--dh-size-s);
-}
-
-.e-4de878b > .holder[variant*="size-m"]
-{
-	min-height: 36px;
-}
-
-.e-4de878b > .holder[variant*="size-l"]
-{
-	min-height: 38px;
-	font-size: var(--dh-size-l);
-}
-
-.e-4de878b > .holder[variant*="size-l"] > i
-{
-	font-size: var(--dh-size-l);
-}

package/addons/render/elements/front/items/self/base/menu/styles/variants.css

@@ -1,99 +0,0 @@
-.e-4de878b > .holder[variant*="bg-1"]
-{
-	background: var(--dh-bg-1);
-}
-
-.e-4de878b > .holder[variant*="bg-1"]:hover
-{
-	background: var(--dh-bg-1-hover);
-}
-
-.e-4de878b > .holder[variant*="bg-2"]
-{
-	background: var(--dh-bg-2);
-}
-
-.e-4de878b > .holder[variant*="bg-2"]:hover
-{
-	background: var(--dh-bg-2-hover);
-}
-
-.e-4de878b > .holder[variant*="bg-3"]
-{
-	background: var(--dh-bg-3);
-}
-
-.e-4de878b > .holder[variant*="bg-3"]:hover
-{
-	background: var(--dh-bg-3-hover);
-}
-
-.e-4de878b > .holder[variant*="bg-4"]
-{
-	background: var(--dh-bg-4);
-}
-
-.e-4de878b > .holder[variant*="bg-4"]:hover
-{
-	background: var(--dh-bg-4-hover);
-}
-
-.e-4de878b > .holder[variant*="border"]
-{
-	border: 1px solid var(--dh-bg-3-border);
-}
-
-.e-4de878b > .holder[variant*="brand"]
-{
-	background: var(--dh-brand-opacity);
-	color: var(--dh-brand);
-}
-
-.e-4de878b > .holder[variant*="brand"] > i
-{
-	color: var(--dh-brand);
-}
-
-.e-4de878b > .holder[variant*="blue"]
-{
-	background: var(--dh-blue-opacity);
-	color: var(--dh-blue);
-}
-
-.e-4de878b > .holder[variant*="blue"] > i
-{
-	color: var(--dh-blue);
-}
-
-.e-4de878b > .holder[variant*="red"]
-{
-	background: var(--dh-red-opacity);
-	color: var(--dh-red);
-}
-
-.e-4de878b > .holder[variant*="red"] > i
-{
-	color: var(--dh-red);
-}
-
-.e-4de878b > .holder[variant*="orange"]
-{
-	background: var(--dh-orange-opacity);
-	color: var(--dh-orange);
-}
-
-.e-4de878b > .holder[variant*="orange"] > i
-{
-	color: var(--dh-orange);
-}
-
-.e-4de878b > .holder[variant*="green"]
-{
-	background: var(--dh-green-opacity);
-	color: var(--dh-green);
-}
-
-.e-4de878b > .holder[variant*="green"] > i
-{
-	color: var(--dh-green);
-}

package/addons/render/elements/front/items/self/base/tag/tag.css

@@ -1,199 +0,0 @@
-.e-21305e3c > .holder
-{
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--dh-spacing-x);
-	padding: var(--dh-spacing-x) var(--dh-spacing-s);
-	border-radius: var(--dh-radius-s);
-	border: 1px solid;
-	font-weight: 500;
-	font-size: var(--dh-size-s);
-	transition: all 0.2s;
-	cursor: pointer;
-	background: transparent;
-	border-color: transparent;
-	color: var(--dh-text-1);
-}
-
-.e-21305e3c > .holder:hover
-{
-	background: var(--dh-bg-2);
-}
-
-.e-21305e3c > .holder i
-{
-	font-size: 14px;
-}
-
-.e-21305e3c > .holder > .text
-{
-	line-height: 1;
-}
-
-/* Variants - Background */
-.e-21305e3c > .holder[variant*="transparent"]
-{
-    background: transparent;
-    border-color: transparent;
-    color: var(--dh-text-1);
-}
-
-.e-21305e3c > .holder[variant*="transparent"]:hover
-{
-    background: var(--dh-bg-2);
-}
-
-.e-21305e3c > .holder[variant*="border"]
-{
-    background: transparent;
-    border-color: var(--dh-bg-1-border);
-    color: var(--dh-text-1);
-}
-
-.e-21305e3c > .holder[variant*="border"]:hover
-{
-    background: var(--dh-bg-2);
-    border-color: var(--dh-bg-2-border);
-}
-
-.e-21305e3c > .holder[variant*="bg-1"]
-{
-    background: var(--dh-bg-1);
-    border-color: var(--dh-bg-1-border);
-    color: var(--dh-text-1);
-}
-
-.e-21305e3c > .holder[variant*="bg-1"]:hover
-{
-    background: var(--dh-bg-1-hover);
-}
-
-.e-21305e3c > .holder[variant*="bg-2"]
-{
-    background: var(--dh-bg-2);
-    border-color: var(--dh-bg-2-border);
-    color: var(--dh-text-1);
-}
-
-.e-21305e3c > .holder[variant*="bg-2"]:hover
-{
-    background: var(--dh-bg-2-hover);
-}
-
-.e-21305e3c > .holder[variant*="bg-3"]
-{
-    background: var(--dh-bg-3);
-    border-color: var(--dh-bg-3-border);
-    color: var(--dh-text-1);
-}
-
-.e-21305e3c > .holder[variant*="bg-3"]:hover
-{
-    background: var(--dh-bg-3-hover);
-}
-
-.e-21305e3c > .holder[variant*="bg-4"]
-{
-    background: var(--dh-bg-4);
-    border-color: var(--dh-bg-4-border);
-    color: var(--dh-text-1);
-}
-
-.e-21305e3c > .holder[variant*="bg-4"]:hover
-{
-    background: var(--dh-bg-4-hover);
-}
-
-.e-21305e3c > .holder[variant*="brand"]
-{
-    background: var(--dh-brand);
-    border-color: var(--dh-brand-border);
-    color: white;
-}
-
-.e-21305e3c > .holder[variant*="brand"]:hover
-{
-    background: var(--dh-brand-hover);
-}
-
-.e-21305e3c > .holder[variant*="blue"]
-{
-    background: var(--dh-blue);
-    border-color: var(--dh-blue-border);
-    color: white;
-}
-
-.e-21305e3c > .holder[variant*="blue"]:hover
-{
-    background: var(--dh-blue-hover);
-}
-
-.e-21305e3c > .holder[variant*="red"]
-{
-    background: var(--dh-red);
-    border-color: var(--dh-red-border);
-    color: white;
-}
-
-.e-21305e3c > .holder[variant*="red"]:hover
-{
-    background: var(--dh-red-hover);
-}
-
-.e-21305e3c > .holder[variant*="orange"]
-{
-    background: var(--dh-orange);
-    border-color: var(--dh-orange-border);
-    color: white;
-}
-
-.e-21305e3c > .holder[variant*="orange"]:hover
-{
-    background: var(--dh-orange-hover);
-}
-
-.e-21305e3c > .holder[variant*="green"]
-{
-    background: var(--dh-green);
-    border-color: var(--dh-green-border);
-    color: white;
-}
-
-.e-21305e3c > .holder[variant*="green"]:hover
-{
-    background: var(--dh-green-hover);
-}
-
-.e-21305e3c > .holder[variant*="size-s"]
-{
-	padding: 2px var(--dh-spacing-x);
-	font-size: 11px;
-}
-
-.e-21305e3c > .holder[variant*="size-s"] i
-{
-	font-size: 12px;
-}
-
-.e-21305e3c > .holder[variant*="size-m"]
-{
-	padding: var(--dh-spacing-x) var(--dh-spacing-s);
-	font-size: var(--dh-size-s);
-}
-
-.e-21305e3c > .holder[variant*="size-m"] i
-{
-	font-size: 14px;
-}
-
-.e-21305e3c > .holder[variant*="size-l"]
-{
-	padding: var(--dh-spacing-s) var(--dh-spacing-m);
-	font-size: var(--dh-size-m);
-}
-
-.e-21305e3c > .holder[variant*="size-l"] i
-{
-	font-size: 16px;
-}

package/addons/render/elements/front/items/self/base/tag/tag.js

@@ -1,37 +0,0 @@
-import elements from '#elements/load.js';
-
-elements.ItemAdd({
-	id: 'tag',
-	icon: 'label',
-	name: 'Tag',
-	description: 'Label/badge component with icon, color variants, sizes, and click handler support.',
-	category: 'Base',
-	author: 'Divhunt',
-	config: {
-		icon: {
-			type: 'string',
-			value: ''
-		},
-		text: {
-			type: 'string',
-			value: 'Tag'
-		},
-		variant: {
-			type: 'array',
-			value: ['bg-3', 'size-m'],
-			options: ['transparent', 'border', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
-		},
-		onClick: {
-			type: 'function'
-		}
-	},
-	render: function()
-	{
-		return `
-			<div class="holder" :variant="variant.join(' ')" dh-click="onClick">
-				<i dh-if="icon">{{ icon }}</i>
-				<span class="text">{{ text }}</span>
-			</div>
-		`;
-	}
-});

package/addons/render/elements/front/items/self/cards/basic/basic.js

@@ -1,89 +0,0 @@
-import elements from '#elements/load.js';
-
-elements.ItemAdd({
-	id: 'card-basic',
-	icon: 'crop_square',
-	name: 'Card Basic',
-	description: 'Base card with icon, title, description, badge, and action buttons.',
-	category: 'Cards',
-	author: 'Divhunt',
-	config: {
-		icon: {
-			type: 'string',
-			value: 'folder'
-		},
-		title: {
-			type: 'string',
-			value: 'Project Alpha'
-		},
-		description: {
-			type: 'string',
-			value: 'A comprehensive project management solution for modern teams.'
-		},
-		badge: {
-			type: 'string',
-			value: 'Active'
-		},
-		actions: {
-			type: 'array',
-			value: [
-				{ text: 'Edit', icon: 'edit', variant: ['border', 'size-s'] },
-				{ text: 'Delete', icon: 'delete', variant: ['border', 'size-s'] }
-			],
-			each: {
-				type: 'object',
-				config: {
-					text: { type: 'string', value: '' },
-					icon: { type: 'string', value: '' },
-					variant: { type: 'array', value: ['border', 'size-s'] }
-				}
-			}
-		},
-		variant: {
-			type: 'array',
-			value: ['bg-2', 'border', 'size-m'],
-			options: ['border', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
-		},
-		onClick: {
-			type: 'function'
-		},
-		onAction: {
-			type: 'function'
-		}
-	},
-	render: function()
-	{
-		this.handleClick = () =>
-		{
-			if (this.onClick)
-			{
-				this.onClick();
-			}
-		};
-
-		this.handleAction = (action, index) =>
-		{
-			if (this.onAction)
-			{
-				this.onAction({ action, index });
-			}
-		};
-
-		return `
-			<div class="holder" :variant="variant.join(' ')" dh-click="handleClick">
-				<div class="header">
-					<i dh-if="icon">{{ icon }}</i>
-					<e-tag dh-if="badge" :text="badge" :variant="['bg-3', 'size-s']"></e-tag>
-				</div>
-				<div class="content">
-					<h3 dh-if="title">{{ title }}</h3>
-					<p dh-if="description">{{ description }}</p>
-				</div>
-				<div dh-if="actions.length" class="actions">
-					<e-button dh-for="action, index in actions" :text="action.text" :icon="action.icon" :variant="action.variant" :onClick="() => handleAction(action, index)"></e-button>
-				</div>
-				<slot name="footer"></slot>
-			</div>
-		`;
-	}
-});