divhunt 2.0.4 → 2.0.6

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

@@ -1,258 +0,0 @@
-/* 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;
-}

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

@@ -1,67 +0,0 @@
-import elements from '#elements/load.js';
-
-elements.ItemAdd({
-	id: 'alert',
-	icon: 'info',
-	name: 'Alert',
-	description: 'Notification box with variants (info, success, warning, error), optional close button, and customizable content.',
-	category: 'Feedback',
-	author: 'Divhunt',
-	config: {
-		title: {
-			type: 'string',
-			value: 'Alert Title'
-		},
-		text: {
-			type: 'string',
-			value: 'This is an alert message.'
-		},
-		variant: {
-			type: 'array',
-			value: ['orange', 'size-m', 'animate-bounce'],
-			options: ['brand', 'blue', 'red', 'orange', 'green', 'border', 'animate-bounce', 'size-s', 'size-m', 'size-l']
-		},
-		icon: {
-			type: 'string',
-			value: 'info'
-		},
-		close: {
-			type: 'boolean',
-			value: true
-		},
-		visible: {
-			type: 'boolean',
-			value: true
-		},
-		onClose: {
-			type: 'function'
-		}
-	},
-	render: function()
-	{
-		this.handleClose = () =>
-		{
-			this.visible = false;
-			if (this.onClose)
-			{
-				this.onClose();
-			}
-		};
-
-		return `
-			<div dh-if="visible" class="holder" :variant="variant.join(' ')">
-				<i dh-if="icon" class="icon">{{ icon }}</i>
-
-				<div class="content">
-					<div dh-if="title" class="title">{{ title }}</div>
-					<div dh-if="text" class="text">{{ text }}</div>
-					<slot></slot>
-				</div>
-
-				<button dh-if="close" class="close" dh-click="handleClose">
-					<i class="icon">close</i>
-				</button>
-			</div>
-		`;
-	}
-});

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

@@ -1,229 +0,0 @@
-/* Base */
-.e-5c0da3ea> .holder
-{
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-	max-width: 450px;
-	background: var(--dh-bg-2);
-	border: 1px solid var(--dh-bg-2-border);
-	border-radius: var(--dh-radius-l);
-	overflow: hidden;
-}
-
-.e-5c0da3ea> .holder > .header
-{
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: var(--dh-spacing-l);
-	border-bottom: 1px solid var(--dh-bg-2-border);
-}
-
-.e-5c0da3ea> .holder > .header > .title
-{
-	font-size: var(--dh-size-l);
-	font-weight: 600;
-	color: var(--dh-text-1);
-	flex: 1;
-}
-
-.e-5c0da3ea> .holder > .content
-{
-	padding: var(--dh-spacing-l);
-	color: var(--dh-text-2);
-	font-size: var(--dh-size-m);
-	line-height: 1.6;
-}
-
-.e-5c0da3ea> .holder > .content > .text
-{
-	color: var(--dh-text-2);
-	line-height: 1.6;
-}
-
-.e-5c0da3ea> .holder > .footer
-{
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	padding: var(--dh-spacing-l);
-	border-top: 1px solid var(--dh-bg-2-border);
-	gap: var(--dh-spacing-s);
-}
-
-/* Variants - Background */
-.e-5c0da3ea> .holder[variant*="bg-1"]
-{
-	background: var(--dh-bg-1);
-	border-color: var(--dh-bg-1-border);
-}
-
-.e-5c0da3ea> .holder[variant*="bg-1"] > .header
-{
-	border-bottom-color: var(--dh-bg-1-border);
-}
-
-.e-5c0da3ea> .holder[variant*="bg-1"] > .footer
-{
-	border-top-color: var(--dh-bg-1-border);
-}
-
-.e-5c0da3ea> .holder[variant*="bg-2"]
-{
-	background: var(--dh-bg-2);
-	border-color: var(--dh-bg-2-border);
-}
-
-.e-5c0da3ea> .holder[variant*="bg-2"] > .header
-{
-	border-bottom-color: var(--dh-bg-2-border);
-}
-
-.e-5c0da3ea> .holder[variant*="bg-2"] > .footer
-{
-	border-top-color: var(--dh-bg-2-border);
-}
-
-.e-5c0da3ea> .holder[variant*="bg-3"]
-{
-	background: var(--dh-bg-3);
-	border-color: var(--dh-bg-3-border);
-}
-
-.e-5c0da3ea> .holder[variant*="bg-3"] > .header
-{
-	border-bottom-color: var(--dh-bg-3-border);
-}
-
-.e-5c0da3ea> .holder[variant*="bg-3"] > .footer
-{
-	border-top-color: var(--dh-bg-3-border);
-}
-
-.e-5c0da3ea> .holder[variant*="bg-4"]
-{
-	background: var(--dh-bg-4);
-	border-color: var(--dh-bg-4-border);
-}
-
-.e-5c0da3ea> .holder[variant*="bg-4"] > .header
-{
-	border-bottom-color: var(--dh-bg-4-border);
-}
-
-.e-5c0da3ea> .holder[variant*="bg-4"] > .footer
-{
-	border-top-color: var(--dh-bg-4-border);
-}
-
-/* Variants - Border */
-.e-5c0da3ea> .holder[variant*="border"]
-{
-	border-width: 2px;
-}
-
-/* Variants - Animation */
-@keyframes bounce
-{
-	0%, 100%
-	{
-		transform: translateX(0);
-	}
-	25%
-	{
-		transform: translateX(-10px);
-	}
-	50%
-	{
-		transform: translateX(0);
-	}
-	75%
-	{
-		transform: translateX(-5px);
-	}
-}
-
-.e-5c0da3ea> .holder[variant*="animate-bounce"]
-{
-	animation: bounce 1s ease-in-out;
-}
-
-/* Variants - Sizes */
-.e-5c0da3ea> .holder[variant*="size-s"]
-{
-	max-width: 350px;
-}
-
-.e-5c0da3ea> .holder[variant*="size-s"] > .header
-{
-	padding: var(--dh-spacing-m);
-}
-
-.e-5c0da3ea> .holder[variant*="size-s"] > .header > .title
-{
-	font-size: var(--dh-size-m);
-}
-
-.e-5c0da3ea> .holder[variant*="size-s"] > .content
-{
-	padding: var(--dh-spacing-m);
-	font-size: var(--dh-size-s);
-}
-
-.e-5c0da3ea> .holder[variant*="size-s"] > .footer
-{
-	padding: var(--dh-spacing-m);
-}
-
-.e-5c0da3ea> .holder[variant*="size-m"]
-{
-	max-width: 450px;
-}
-
-.e-5c0da3ea> .holder[variant*="size-m"] > .header
-{
-	padding: var(--dh-spacing-l);
-}
-
-.e-5c0da3ea> .holder[variant*="size-m"] > .header > .title
-{
-	font-size: var(--dh-size-l);
-}
-
-.e-5c0da3ea> .holder[variant*="size-m"] > .content
-{
-	padding: var(--dh-spacing-l);
-	font-size: var(--dh-size-m);
-}
-
-.e-5c0da3ea> .holder[variant*="size-m"] > .footer
-{
-	padding: var(--dh-spacing-l);
-}
-
-.e-5c0da3ea> .holder[variant*="size-l"]
-{
-	max-width: 600px;
-}
-
-.e-5c0da3ea> .holder[variant*="size-l"] > .header
-{
-	padding: var(--dh-spacing-l);
-}
-
-.e-5c0da3ea> .holder[variant*="size-l"] > .header > .title
-{
-	font-size: 24px;
-}
-
-.e-5c0da3ea> .holder[variant*="size-l"] > .content
-{
-	padding: var(--dh-spacing-l);
-	font-size: var(--dh-size-l);
-}
-
-.e-5c0da3ea> .holder[variant*="size-l"] > .footer
-{
-	padding: var(--dh-spacing-l);
-}

package/addons/render/elements/front/items/self/feedback/confirm/confirm.js

@@ -1,81 +0,0 @@
-import elements from '#elements/load.js';
-
-elements.ItemAdd({
-	id: 'confirm',
-	icon: 'help',
-	name: 'Confirm',
-	description: 'Confirmation dialog with title, message, and action buttons.',
-	category: 'Feedback',
-	author: 'Divhunt',
-	config: {
-		title: {
-			type: 'string',
-			value: 'Confirm Action'
-		},
-		text: {
-			type: 'string',
-			value: 'Are you sure you want to proceed?'
-		},
-		confirm: {
-			type: 'string',
-			value: 'Confirm'
-		},
-		cancel: {
-			type: 'string',
-			value: 'Cancel'
-		},
-		variant: {
-			type: 'array',
-			value: ['bg-2', 'size-m', 'animate-bounce'],
-			options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'animate-bounce', 'size-s', 'size-m', 'size-l']
-		},
-		visible: {
-			type: 'boolean',
-			value: true
-		},
-		onConfirm: {
-			type: 'function'
-		},
-		onCancel: {
-			type: 'function'
-		}
-	},
-	render: function()
-	{
-		this.handleConfirm = () =>
-		{
-			this.visible = false;
-			if (this.onConfirm)
-			{
-				this.onConfirm();
-			}
-		};
-
-		this.handleCancel = () =>
-		{
-			this.visible = false;
-			if (this.onCancel)
-			{
-				this.onCancel();
-			}
-		};
-
-		return `
-			<div dh-if="visible" class="holder" :variant="variant.join(' ')">
-				<div dh-if="title" class="header">
-					<div class="title">{{ title }}</div>
-				</div>
-
-				<div class="content">
-					<div dh-if="text" class="text">{{ text }}</div>
-					<slot></slot>
-				</div>
-
-				<div class="footer">
-					<e-button dh-if="cancel" :variant="['ghost', 'size-m']" :text="cancel" :onClick="handleCancel"></e-button>
-					<e-button dh-if="confirm" :variant="['brand', 'size-m']" :text="confirm" :onClick="handleConfirm"></e-button>
-				</div>
-			</div>
-		`;
-	}
-});