divhunt 2.0.0

package/addons/render/elements/front/items/self/data/table/table.css

@@ -0,0 +1,153 @@
+/* Base */
+.e-696e3b78 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	background: var(--dh-bg-1);
+	border-radius: var(--dh-radius-l);
+	overflow: hidden;
+}
+
+/* Header */
+.e-696e3b78 > .holder > .header
+{
+	display: flex;
+	background: var(--dh-bg-2);
+	border-bottom: 1px solid var(--dh-bg-2-border);
+}
+
+.e-696e3b78 > .holder > .header > .cell
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-x);
+	padding: var(--dh-spacing-m);
+	flex: 1;
+	min-width: 0;
+	font-weight: 600;
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	user-select: none;
+}
+
+.e-696e3b78 > .holder > .header > .cell > .sort-icon
+{
+	font-size: 18px;
+	opacity: 0.5;
+	cursor: pointer;
+	transition: opacity 0.2s ease;
+}
+
+.e-696e3b78 > .holder > .header > .cell:hover > .sort-icon
+{
+	opacity: 1;
+}
+
+/* Body */
+.e-696e3b78 > .holder > .body
+{
+	display: flex;
+	flex-direction: column;
+}
+
+.e-696e3b78 > .holder > .body > .row
+{
+	display: flex;
+	border-bottom: 1px solid var(--dh-bg-2-border);
+	transition: background 0.2s ease;
+}
+
+.e-696e3b78 > .holder > .body > .row:last-child
+{
+	border-bottom: none;
+}
+
+.e-696e3b78 > .holder > .body > .row > .cell
+{
+	display: flex;
+	align-items: center;
+	padding: var(--dh-spacing-m);
+	flex: 1;
+	min-width: 0;
+	font-size: var(--dh-size-m);
+	color: var(--dh-text-1);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* Variants - Size */
+.e-696e3b78 > .holder[variant*="size-s"] > .header > .cell,
+.e-696e3b78 > .holder[variant*="size-s"] > .body > .row > .cell
+{
+	padding: var(--dh-spacing-s) var(--dh-spacing-m);
+	font-size: var(--dh-size-s);
+}
+
+.e-696e3b78 > .holder[variant*="size-l"] > .header > .cell,
+.e-696e3b78 > .holder[variant*="size-l"] > .body > .row > .cell
+{
+	padding: var(--dh-spacing-l) var(--dh-spacing-m);
+}
+
+/* Variants - Border */
+.e-696e3b78 > .holder[variant*="border"]
+{
+	border: 1px solid var(--dh-bg-2-border);
+}
+
+/* Variants - Background */
+.e-696e3b78 > .holder[variant*="bg-1"] { background: var(--dh-bg-1); }
+.e-696e3b78 > .holder[variant*="bg-2"] { background: var(--dh-bg-2); }
+.e-696e3b78 > .holder[variant*="bg-3"] { background: var(--dh-bg-3); }
+
+.e-696e3b78 > .holder[variant*="bg-2"] > .header { background: var(--dh-bg-3); }
+.e-696e3b78 > .holder[variant*="bg-3"] > .header { background: var(--dh-bg-4); }
+
+/* Variants - Striped */
+.e-696e3b78 > .holder[variant*="striped"] > .body > .row:nth-child(even)
+{
+	background: var(--dh-bg-2);
+}
+
+/* Variants - Hover */
+.e-696e3b78 > .holder[variant*="hover"] > .body > .row
+{
+	cursor: pointer;
+}
+
+.e-696e3b78 > .holder[variant*="hover"] > .body > .row:hover
+{
+	background: var(--dh-bg-2);
+}
+
+.e-696e3b78 > .holder[variant*="striped"][variant*="hover"] > .body > .row:hover
+{
+	background: var(--dh-bg-3);
+}
+
+/* Variants - Compact */
+.e-696e3b78 > .holder[variant*="compact"] > .header > .cell,
+.e-696e3b78 > .holder[variant*="compact"] > .body > .row > .cell
+{
+	padding: var(--dh-spacing-s) var(--dh-spacing-m);
+}
+
+.e-696e3b78 > .holder[variant*="compact"] > .body > .row > .cell
+{
+	font-size: var(--dh-size-s);
+}
+
+/* Empty State */
+.e-696e3b78 > .holder > .body:empty::after
+{
+	content: 'No data available';
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--dh-spacing-l);
+	color: var(--dh-text-2);
+	font-size: var(--dh-size-m);
+}

package/addons/render/elements/front/items/self/data/table/table.js

@@ -0,0 +1,106 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'table',
+	icon: 'table_chart',
+	name: 'Table',
+	description: 'Data table with columns, rows, sorting, and row actions. Supports dynamic column definitions and custom cell rendering.',
+	category: 'Data',
+	author: 'Divhunt',
+	config: {
+		columns: {
+			type: 'array',
+			value: [
+				{ id: 'name', label: 'Name' },
+				{ id: 'email', label: 'Email' },
+				{ id: 'role', label: 'Role' },
+				{ id: 'status', label: 'Status' }
+			]
+		},
+		rows: {
+			type: 'array',
+			value: [
+				{ name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active' },
+				{ name: 'Jane Smith', email: 'jane@example.com', role: 'Editor', status: 'Active' },
+				{ name: 'Bob Wilson', email: 'bob@example.com', role: 'Viewer', status: 'Inactive' }
+			]
+		},
+		variant: {
+			type: 'array',
+			value: ['border', 'hover', 'size-m'],
+			options: ['border', 'bg-1', 'bg-2', 'bg-3', 'striped', 'compact', 'hover', 'size-s', 'size-m', 'size-l']
+		},
+		sortable: {
+			type: 'boolean',
+			value: false
+		},
+		onRowClick: {
+			type: 'function'
+		},
+		onSort: {
+			type: 'function'
+		}
+	},
+	render: function()
+	{
+		this.sortColumn = null;
+		this.sortDirection = 'asc';
+
+		this.handleSort = (column) =>
+		{
+			if (!this.sortable) return;
+
+			if (this.sortColumn === column.id)
+			{
+				this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+			}
+			else
+			{
+				this.sortColumn = column.id;
+				this.sortDirection = 'asc';
+			}
+
+			if (this.onSort)
+			{
+				this.onSort({ column: column.id, direction: this.sortDirection });
+			}
+		};
+
+		this.handleRowClick = (row, index) =>
+		{
+			if (this.onRowClick)
+			{
+				this.onRowClick({ row, index });
+			}
+		};
+
+		this.getSortIcon = (columnId) =>
+		{
+			if (this.sortColumn !== columnId) return 'unfold_more';
+			return this.sortDirection === 'asc' ? 'expand_less' : 'expand_more';
+		};
+
+		this.getCellValue = (row, columnId) =>
+		{
+			return row[columnId] !== undefined ? row[columnId] : '';
+		};
+
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				<div class="header">
+					<div dh-for="column in columns" class="cell" :style="column.width ? 'width:' + column.width : ''" dh-click="handleSort(column)">
+						<span class="label">{{ column.label }}</span>
+						<i dh-if="sortable" class="icon sort-icon">{{ getSortIcon(column.id) }}</i>
+					</div>
+				</div>
+				<div class="body">
+					<div dh-for="row, index in rows" class="row" dh-click="handleRowClick(row, index)">
+						<div dh-for="column in columns" class="cell" :style="column.width ? 'width:' + column.width : ''">
+							{{ getCellValue(row, column.id) }}
+						</div>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+});

package/addons/render/elements/front/items/self/data/timeline/timeline.css

@@ -0,0 +1,127 @@
+/* Base */
+.e-338c43a9 > .holder
+{
+	display: flex;
+	flex-direction: column;
+}
+
+.e-338c43a9 > .holder > .item
+{
+	display: flex;
+	gap: var(--dh-spacing-l);
+	position: relative;
+	padding-bottom: calc(var(--dh-spacing-l) * 2);
+}
+
+.e-338c43a9 > .holder > .item:last-child
+{
+	padding-bottom: 0;
+}
+
+.e-338c43a9 > .holder > .item::before
+{
+	content: '';
+	position: absolute;
+	left: 20px;
+	top: 44px;
+	bottom: 0;
+	width: 2px;
+	background: var(--dh-bg-4);
+}
+
+.e-338c43a9 > .holder > .item:last-child::before
+{
+	display: none;
+}
+
+.e-338c43a9 > .holder > .item > .marker
+{
+	flex-shrink: 0;
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	background: var(--dh-brand);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	z-index: 1;
+}
+
+.e-338c43a9 > .holder > .item > .marker > .icon
+{
+	font-size: 20px;
+	color: white;
+}
+
+.e-338c43a9 > .holder > .item > .content
+{
+	flex: 1;
+	padding-top: var(--dh-spacing-x);
+}
+
+.e-338c43a9 > .holder > .item > .content > .title
+{
+	font-size: var(--dh-size-m);
+	font-weight: 700;
+	color: var(--dh-text-1);
+	margin: 0 0 var(--dh-spacing-x) 0;
+}
+
+.e-338c43a9 > .holder > .item > .content > .description
+{
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+	line-height: 1.6;
+	margin: 0 0 var(--dh-spacing-x) 0;
+}
+
+.e-338c43a9 > .holder > .item > .content > .date
+{
+	font-size: 11px;
+	color: var(--dh-text-2);
+	font-weight: 600;
+}
+
+/* Variants - Colors */
+.e-338c43a9 > .holder[variant*="brand"] > .item > .marker
+{
+	background: var(--dh-brand);
+}
+
+.e-338c43a9 > .holder[variant*="blue"] > .item > .marker
+{
+	background: var(--dh-blue);
+}
+
+.e-338c43a9 > .holder[variant*="red"] > .item > .marker
+{
+	background: var(--dh-red);
+}
+
+.e-338c43a9 > .holder[variant*="orange"] > .item > .marker
+{
+	background: var(--dh-orange);
+}
+
+.e-338c43a9 > .holder[variant*="green"] > .item > .marker
+{
+	background: var(--dh-green);
+}
+
+/* Variants - Alternate */
+.e-338c43a9 > .holder[variant*="alternate"] > .item:nth-child(even)
+{
+	flex-direction: row-reverse;
+}
+
+.e-338c43a9 > .holder[variant*="alternate"] > .item:nth-child(even) > .content
+{
+	text-align: right;
+}
+
+.e-338c43a9 > .holder[variant*="alternate"] > .item:nth-child(even)::before
+{
+	left: auto;
+	right: 20px;
+}

package/addons/render/elements/front/items/self/data/timeline/timeline.js

@@ -0,0 +1,57 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'timeline',
+	icon: 'timeline',
+	name: 'Timeline',
+	description: 'Vertical timeline for displaying events, history, or progress.',
+	category: 'Data',
+	author: 'Divhunt',
+	config: {
+		items: {
+			type: 'array',
+			value: [
+				{
+					icon: 'check_circle',
+					title: 'Project Started',
+					description: 'Initial project setup and planning completed',
+					date: 'Jan 15, 2024'
+				},
+				{
+					icon: 'code',
+					title: 'Development Phase',
+					description: 'Core features implemented and tested',
+					date: 'Feb 20, 2024'
+				},
+				{
+					icon: 'rocket_launch',
+					title: 'Launch',
+					description: 'Product successfully launched to production',
+					date: 'Mar 10, 2024'
+				}
+			]
+		},
+		variant: {
+			type: 'array',
+			value: ['brand'],
+			options: ['brand', 'blue', 'red', 'orange', 'green', 'alternate']
+		}
+	},
+	render: function()
+	{
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				<div dh-for="item in items" class="item">
+					<div class="marker">
+						<i class="icon">{{ item.icon }}</i>
+					</div>
+					<div class="content">
+						<h4 class="title">{{ item.title }}</h4>
+						<p dh-if="item.description" class="description">{{ item.description }}</p>
+						<span dh-if="item.date" class="date">{{ item.date }}</span>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+});

package/addons/render/elements/front/items/self/feedback/alert/alert.css

@@ -0,0 +1,258 @@
+/* Base */
+.e-68678906 > .holder
+{
+	display: flex;
+	align-items: flex-start;
+	gap: var(--dh-spacing-m);
+	padding: var(--dh-spacing-m);
+	border-radius: var(--dh-radius-m);
+	border: 1px solid;
+	background: var(--dh-brand-opacity);
+	border-color: var(--dh-brand-border);
+	color: var(--dh-text-1);
+	position: relative;
+}
+
+.e-68678906 > .holder > .icon
+{
+	font-size: 20px;
+	color: var(--dh-brand);
+	flex-shrink: 0;
+	margin-top: 2px;
+}
+
+.e-68678906 > .holder > .content
+{
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-x);
+	min-width: 0;
+}
+
+.e-68678906 > .holder > .content > .title
+{
+	font-weight: 600;
+	font-size: var(--dh-size-m);
+	color: var(--dh-text-1);
+}
+
+.e-68678906 > .holder > .content > .text
+{
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+	line-height: 1.5;
+}
+
+.e-68678906 > .holder > .close
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	border: none;
+	background: transparent;
+	color: var(--dh-text-2);
+	cursor: pointer;
+	border-radius: var(--dh-radius-s);
+	transition: all 0.2s ease;
+	flex-shrink: 0;
+	padding: 0;
+}
+
+.e-68678906 > .holder > .close:hover
+{
+	background: var(--dh-bg-2-opacity);
+	color: var(--dh-text-1);
+}
+
+.e-68678906 > .holder > .close > .icon
+{
+	font-size: 18px;
+}
+
+/* Variants - Colors */
+.e-68678906 > .holder[variant*="brand"]
+{
+	background: var(--dh-brand-opacity);
+	border-color: var(--dh-brand-border);
+}
+
+.e-68678906 > .holder[variant*="brand"] > .icon
+{
+	color: var(--dh-brand);
+}
+
+.e-68678906 > .holder[variant*="blue"]
+{
+	background: var(--dh-blue-opacity);
+	border-color: var(--dh-blue-border);
+}
+
+.e-68678906 > .holder[variant*="blue"] > .icon
+{
+	color: var(--dh-blue);
+}
+
+.e-68678906 > .holder[variant*="red"]
+{
+	background: var(--dh-red-opacity);
+	border-color: var(--dh-red-border);
+}
+
+.e-68678906 > .holder[variant*="red"] > .icon
+{
+	color: var(--dh-red);
+}
+
+.e-68678906 > .holder[variant*="orange"]
+{
+	background: var(--dh-orange-opacity);
+	border-color: var(--dh-orange-border);
+}
+
+.e-68678906 > .holder[variant*="orange"] > .icon
+{
+	color: var(--dh-orange);
+}
+
+.e-68678906 > .holder[variant*="green"]
+{
+	background: var(--dh-green-opacity);
+	border-color: var(--dh-green-border);
+}
+
+.e-68678906 > .holder[variant*="green"] > .icon
+{
+	color: var(--dh-green);
+}
+
+/* Variants - Border */
+.e-68678906 > .holder[variant*="border"]
+{
+	background: transparent;
+}
+
+/* Variants - Animation */
+@keyframes bounce
+{
+	0%, 100%
+	{
+		transform: translateX(0);
+	}
+	25%
+	{
+		transform: translateX(-10px);
+	}
+	50%
+	{
+		transform: translateX(0);
+	}
+	75%
+	{
+		transform: translateX(-5px);
+	}
+}
+
+.e-68678906 > .holder[variant*="animate-bounce"]
+{
+	animation: bounce 1s ease-in-out;
+}
+
+/* Variants - Sizes */
+.e-68678906 > .holder[variant*="size-s"]
+{
+	padding: var(--dh-spacing-s);
+	gap: var(--dh-spacing-s);
+}
+
+.e-68678906 > .holder[variant*="size-s"] > .icon
+{
+	font-size: 16px;
+}
+
+.e-68678906 > .holder[variant*="size-s"] > .content > .title
+{
+	font-size: var(--dh-size-s);
+}
+
+.e-68678906 > .holder[variant*="size-s"] > .content > .text
+{
+	font-size: 12px;
+}
+
+.e-68678906 > .holder[variant*="size-s"] > .close
+{
+	width: 20px;
+	height: 20px;
+}
+
+.e-68678906 > .holder[variant*="size-s"] > .close > .icon
+{
+	font-size: 16px;
+}
+
+.e-68678906 > .holder[variant*="size-m"]
+{
+	padding: var(--dh-spacing-m);
+	gap: var(--dh-spacing-m);
+}
+
+.e-68678906 > .holder[variant*="size-m"] > .icon
+{
+	font-size: 20px;
+}
+
+.e-68678906 > .holder[variant*="size-m"] > .content > .title
+{
+	font-size: var(--dh-size-m);
+}
+
+.e-68678906 > .holder[variant*="size-m"] > .content > .text
+{
+	font-size: var(--dh-size-s);
+}
+
+.e-68678906 > .holder[variant*="size-m"] > .close
+{
+	width: 24px;
+	height: 24px;
+}
+
+.e-68678906 > .holder[variant*="size-m"] > .close > .icon
+{
+	font-size: 18px;
+}
+
+.e-68678906 > .holder[variant*="size-l"]
+{
+	padding: var(--dh-spacing-l);
+	gap: var(--dh-spacing-l);
+}
+
+.e-68678906 > .holder[variant*="size-l"] > .icon
+{
+	font-size: 24px;
+}
+
+.e-68678906 > .holder[variant*="size-l"] > .content > .title
+{
+	font-size: var(--dh-size-l);
+}
+
+.e-68678906 > .holder[variant*="size-l"] > .content > .text
+{
+	font-size: var(--dh-size-m);
+}
+
+.e-68678906 > .holder[variant*="size-l"] > .close
+{
+	width: 28px;
+	height: 28px;
+}
+
+.e-68678906 > .holder[variant*="size-l"] > .close > .icon
+{
+	font-size: 20px;
+}