divhunt 2.0.0

package/addons/render/elements/front/items/self/form/radio/styles/variants.css

@@ -0,0 +1,121 @@
+/* Variants */
+.r53095678 > .holder[variant="transparent"] .radio-mark
+{
+    background: transparent;
+    border-color: transparent;
+}
+
+.r53095678 > .holder[variant="transparent"] .radio-mark::after
+{
+    background: var(--dh-text-1);
+}
+
+.r53095678 > .holder[variant="border"] .radio-mark
+{
+    background: transparent;
+    border-color: var(--dh-bg-1-border);
+}
+
+.r53095678 > .holder[variant="border"]:hover .radio-mark
+{
+    border-color: var(--dh-bg-2-border);
+}
+
+.r53095678 > .holder[variant="border"] input[type="radio"]:checked ~ .radio-mark
+{
+    border-color: var(--dh-brand);
+    background: var(--dh-brand);
+}
+
+.r53095678 > .holder[variant="border"] .radio-mark::after
+{
+    background: white;
+}
+
+.r53095678 > .holder[variant="bg-1"] .radio-mark
+{
+    background: var(--dh-bg-1);
+    border-color: var(--dh-bg-1-border);
+}
+
+.r53095678 > .holder[variant="bg-1"]:hover .radio-mark
+{
+    background: var(--dh-bg-1-hover);
+}
+
+.r53095678 > .holder[variant="bg-1"] input[type="radio"]:checked ~ .radio-mark
+{
+    border-color: var(--dh-brand);
+    background: var(--dh-brand);
+}
+
+.r53095678 > .holder[variant="bg-1"] .radio-mark::after
+{
+    background: white;
+}
+
+.r53095678 > .holder[variant="bg-2"] .radio-mark
+{
+    background: var(--dh-bg-2);
+    border-color: var(--dh-bg-2-border);
+}
+
+.r53095678 > .holder[variant="bg-2"]:hover .radio-mark
+{
+    background: var(--dh-bg-2-hover);
+}
+
+.r53095678 > .holder[variant="bg-2"] input[type="radio"]:checked ~ .radio-mark
+{
+    border-color: var(--dh-brand);
+    background: var(--dh-brand);
+}
+
+.r53095678 > .holder[variant="bg-2"] .radio-mark::after
+{
+    background: white;
+}
+
+.r53095678 > .holder[variant="bg-3"] .radio-mark
+{
+    background: var(--dh-bg-3);
+    border-color: var(--dh-bg-3-border);
+}
+
+.r53095678 > .holder[variant="bg-3"]:hover .radio-mark
+{
+    background: var(--dh-bg-3-hover);
+}
+
+.r53095678 > .holder[variant="bg-3"] input[type="radio"]:checked ~ .radio-mark
+{
+    border-color: var(--dh-brand);
+    background: var(--dh-brand);
+}
+
+.r53095678 > .holder[variant="bg-3"] .radio-mark::after
+{
+    background: white;
+}
+
+.r53095678 > .holder[variant="bg-4"] .radio-mark
+{
+    background: var(--dh-bg-4);
+    border-color: var(--dh-bg-4-border);
+}
+
+.r53095678 > .holder[variant="bg-4"]:hover .radio-mark
+{
+    background: var(--dh-bg-4-hover);
+}
+
+.r53095678 > .holder[variant="bg-4"] input[type="radio"]:checked ~ .radio-mark
+{
+    border-color: var(--dh-brand);
+    background: var(--dh-brand);
+}
+
+.r53095678 > .holder[variant="bg-4"] .radio-mark::after
+{
+    background: white;
+}

package/addons/render/elements/front/items/self/form/rating/rating.css

@@ -0,0 +1,95 @@
+/* Base */
+.e-3f0858cd > .holder
+{
+	display: inline-flex;
+	align-items: center;
+	gap: var(--dh-spacing-x);
+}
+
+.e-3f0858cd > .holder > .star
+{
+	font-size: 24px;
+	color: var(--dh-bg-3);
+	cursor: pointer;
+	transition: color 0.2s ease, transform 0.2s ease;
+	user-select: none;
+}
+
+.e-3f0858cd > .holder > .star.filled
+{
+	color: var(--dh-brand);
+}
+
+.e-3f0858cd > .holder > .star:hover
+{
+	transform: scale(1.1);
+}
+
+/* Variants - Readonly */
+.e-3f0858cd > .holder[variant*="readonly"] > .star
+{
+	cursor: default;
+	pointer-events: none;
+}
+
+.e-3f0858cd > .holder[variant*="readonly"] > .star:hover
+{
+	transform: none;
+}
+
+/* Variants - Colors */
+.e-3f0858cd > .holder[variant*="brand"] > .star.filled
+{
+	color: var(--dh-brand);
+}
+
+.e-3f0858cd > .holder[variant*="blue"] > .star.filled
+{
+	color: var(--dh-blue);
+}
+
+.e-3f0858cd > .holder[variant*="red"] > .star.filled
+{
+	color: var(--dh-red);
+}
+
+.e-3f0858cd > .holder[variant*="orange"] > .star.filled
+{
+	color: var(--dh-orange);
+}
+
+.e-3f0858cd > .holder[variant*="green"] > .star.filled
+{
+	color: var(--dh-green);
+}
+
+/* Variants - Sizes */
+.e-3f0858cd > .holder[variant*="size-s"]
+{
+	gap: 2px;
+}
+
+.e-3f0858cd > .holder[variant*="size-s"] > .star
+{
+	font-size: 16px;
+}
+
+.e-3f0858cd > .holder[variant*="size-m"]
+{
+	gap: var(--dh-spacing-x);
+}
+
+.e-3f0858cd > .holder[variant*="size-m"] > .star
+{
+	font-size: 24px;
+}
+
+.e-3f0858cd > .holder[variant*="size-l"]
+{
+	gap: var(--dh-spacing-s);
+}
+
+.e-3f0858cd > .holder[variant*="size-l"] > .star
+{
+	font-size: 32px;
+}

package/addons/render/elements/front/items/self/form/rating/rating.js

@@ -0,0 +1,88 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'rating',
+	icon: 'star',
+	name: 'Rating',
+	description: 'Star rating input with interactive and readonly modes.',
+	category: 'Form',
+	author: 'Divhunt',
+	config: {
+		value: {
+			type: 'number',
+			value: 3
+		},
+		max: {
+			type: 'number',
+			value: 5
+		},
+		readonly: {
+			type: 'boolean',
+			value: false
+		},
+		variant: {
+			type: 'array',
+			value: ['brand', 'size-m'],
+			options: ['brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
+		},
+		onChange: {
+			type: 'function'
+		}
+	},
+	render: function()
+	{
+		this.hover = null;
+
+		this.getStars = () =>
+		{
+			const stars = [];
+			for (let i = 0; i < this.max; i++)
+			{
+				stars.push(i);
+			}
+			return stars;
+		};
+
+		this.isFilled = (index) =>
+		{
+			return this.hover !== null ? index <= this.hover : index < this.value;
+		};
+
+		this.handleClick = (index) =>
+		{
+			if (this.readonly) return;
+			this.value = index + 1;
+			if (this.onChange)
+			{
+				this.onChange(this.value);
+			}
+		};
+
+		this.handleMouseEnter = (index) =>
+		{
+			if (this.readonly) return;
+			this.hover = index;
+		};
+
+		this.handleMouseLeave = () =>
+		{
+			if (this.readonly) return;
+			this.hover = null;
+		};
+
+		return `
+			<div
+				class="holder"
+				:variant="variant.join(' ') + (readonly ? ' readonly' : '')"
+				dh-mouse-leave="handleMouseLeave"
+			>
+				<i
+					dh-for="index in getStars()"
+					:class="'star' + (isFilled(index) ? ' filled' : '')"
+					dh-click="() => handleClick(index)"
+					dh-mouse-enter="() => handleMouseEnter(index)"
+				>star</i>
+			</div>
+		`;
+	}
+});

package/addons/render/elements/front/items/self/form/section/section.css

@@ -0,0 +1,107 @@
+/* Base */
+.e-5c75a80e > .holder
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-l);
+}
+
+.e-5c75a80e > .holder > .header
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-x);
+}
+
+.e-5c75a80e > .holder > .header > h3
+{
+	margin: 0;
+	font-size: 18px;
+	font-weight: 600;
+	color: var(--dh-text-1);
+	line-height: 1.3;
+}
+
+.e-5c75a80e > .holder > .header > p
+{
+	margin: 0;
+	font-size: var(--dh-size-m);
+	color: var(--dh-text-2);
+	line-height: 1.5;
+}
+
+.e-5c75a80e > .holder > .content
+{
+	display: flex;
+	flex-direction: column;
+	border-radius: var(--dh-radius-m);
+	overflow: hidden;
+}
+
+/* Variants - Background */
+.e-5c75a80e > .holder[variant*="bg-1"] > .content
+{
+	background: var(--dh-bg-1);
+}
+
+.e-5c75a80e > .holder[variant*="bg-2"] > .content
+{
+	background: var(--dh-bg-2);
+}
+
+.e-5c75a80e > .holder[variant*="bg-3"] > .content
+{
+	background: var(--dh-bg-3);
+}
+
+.e-5c75a80e > .holder[variant*="bg-4"] > .content
+{
+	background: var(--dh-bg-4);
+}
+
+/* Variants - Border */
+.e-5c75a80e > .holder[variant*="border"] > .content
+{
+	border: 1px solid var(--dh-bg-2-border);
+}
+
+.e-5c75a80e > .holder[variant*="bg-1"][variant*="border"] > .content
+{
+	border-color: var(--dh-bg-1-border);
+}
+
+.e-5c75a80e > .holder[variant*="bg-2"][variant*="border"] > .content
+{
+	border-color: var(--dh-bg-2-border);
+}
+
+.e-5c75a80e > .holder[variant*="bg-3"][variant*="border"] > .content
+{
+	border-color: var(--dh-bg-3-border);
+}
+
+.e-5c75a80e > .holder[variant*="bg-4"][variant*="border"] > .content
+{
+	border-color: var(--dh-bg-4-border);
+}
+
+/* Sizes */
+.e-5c75a80e > .holder[variant*="size-s"] > .header > h3
+{
+	font-size: 16px;
+}
+
+.e-5c75a80e > .holder[variant*="size-s"] > .header > p
+{
+	font-size: var(--dh-size-s);
+}
+
+.e-5c75a80e > .holder[variant*="size-l"] > .header > h3
+{
+	font-size: 22px;
+}
+
+.e-5c75a80e > .holder[variant*="size-l"] > .header > p
+{
+	font-size: var(--dh-size-l);
+}

package/addons/render/elements/front/items/self/form/section/section.js

@@ -0,0 +1,39 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'form-section',
+	icon: 'view_agenda',
+	name: 'Form Section',
+	description: 'Form section with title and description, containing form fields.',
+	category: 'Form',
+	author: 'Divhunt',
+	config: {
+		title: {
+			type: 'string',
+			value: 'Section Title'
+		},
+		description: {
+			type: 'string',
+			value: ''
+		},
+		variant: {
+			type: 'array',
+			value: [],
+			options: ['border', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'size-s', 'size-m', 'size-l']
+		}
+	},
+	render: function()
+	{
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				<div class="header">
+					<h3 dh-if="title">{{ title }}</h3>
+					<p dh-if="description">{{ description }}</p>
+				</div>
+				<div class="content">
+					<slot name="content"></slot>
+				</div>
+			</div>
+		`;
+	}
+});

package/addons/render/elements/front/items/self/form/slider/slider.css

@@ -0,0 +1,244 @@
+/* Base */
+.e-3cbd9189 > .holder
+{
+	position: relative;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-m);
+}
+
+.e-3cbd9189 > .holder > .track
+{
+	position: absolute;
+	left: 0;
+	right: 0;
+	height: 6px;
+	background: var(--dh-bg-3);
+	border-radius: var(--dh-radius-s);
+	pointer-events: none;
+}
+
+.e-3cbd9189 > .holder > .track > .fill
+{
+	height: 100%;
+	background: var(--dh-brand);
+	border-radius: var(--dh-radius-s);
+	transition: width 0.2s ease-out;
+}
+
+.e-3cbd9189 > .holder > .input
+{
+	position: relative;
+	width: 100%;
+	height: 20px;
+	-webkit-appearance: none;
+	appearance: none;
+	background: transparent;
+	cursor: pointer;
+	z-index: 1;
+}
+
+.e-3cbd9189 > .holder > .input::-webkit-slider-thumb
+{
+	-webkit-appearance: none;
+	appearance: none;
+	width: 18px;
+	height: 18px;
+	background: var(--dh-brand);
+	border: 2px solid var(--dh-bg-1);
+	border-radius: 50%;
+	cursor: pointer;
+	transition: transform 0.2s ease;
+}
+
+.e-3cbd9189 > .holder > .input::-webkit-slider-thumb:hover
+{
+	transform: scale(1.1);
+}
+
+.e-3cbd9189 > .holder > .input::-moz-range-thumb
+{
+	width: 18px;
+	height: 18px;
+	background: var(--dh-brand);
+	border: 2px solid var(--dh-bg-1);
+	border-radius: 50%;
+	cursor: pointer;
+	transition: transform 0.2s ease;
+}
+
+.e-3cbd9189 > .holder > .input::-moz-range-thumb:hover
+{
+	transform: scale(1.1);
+}
+
+.e-3cbd9189 > .holder > .value
+{
+	min-width: 40px;
+	text-align: center;
+	font-size: var(--dh-size-s);
+	font-weight: 600;
+	color: var(--dh-text-1);
+}
+
+/* Variants - Colors */
+.e-3cbd9189 > .holder[variant*="brand"] > .track > .fill
+{
+	background: var(--dh-brand);
+}
+
+.e-3cbd9189 > .holder[variant*="brand"] > .input::-webkit-slider-thumb
+{
+	background: var(--dh-brand);
+}
+
+.e-3cbd9189 > .holder[variant*="brand"] > .input::-moz-range-thumb
+{
+	background: var(--dh-brand);
+}
+
+.e-3cbd9189 > .holder[variant*="blue"] > .track > .fill
+{
+	background: var(--dh-blue);
+}
+
+.e-3cbd9189 > .holder[variant*="blue"] > .input::-webkit-slider-thumb
+{
+	background: var(--dh-blue);
+}
+
+.e-3cbd9189 > .holder[variant*="blue"] > .input::-moz-range-thumb
+{
+	background: var(--dh-blue);
+}
+
+.e-3cbd9189 > .holder[variant*="red"] > .track > .fill
+{
+	background: var(--dh-red);
+}
+
+.e-3cbd9189 > .holder[variant*="red"] > .input::-webkit-slider-thumb
+{
+	background: var(--dh-red);
+}
+
+.e-3cbd9189 > .holder[variant*="red"] > .input::-moz-range-thumb
+{
+	background: var(--dh-red);
+}
+
+.e-3cbd9189 > .holder[variant*="orange"] > .track > .fill
+{
+	background: var(--dh-orange);
+}
+
+.e-3cbd9189 > .holder[variant*="orange"] > .input::-webkit-slider-thumb
+{
+	background: var(--dh-orange);
+}
+
+.e-3cbd9189 > .holder[variant*="orange"] > .input::-moz-range-thumb
+{
+	background: var(--dh-orange);
+}
+
+.e-3cbd9189 > .holder[variant*="green"] > .track > .fill
+{
+	background: var(--dh-green);
+}
+
+.e-3cbd9189 > .holder[variant*="green"] > .input::-webkit-slider-thumb
+{
+	background: var(--dh-green);
+}
+
+.e-3cbd9189 > .holder[variant*="green"] > .input::-moz-range-thumb
+{
+	background: var(--dh-green);
+}
+
+/* Variants - Sizes */
+.e-3cbd9189 > .holder[variant*="size-s"] > .track
+{
+	height: 4px;
+}
+
+.e-3cbd9189 > .holder[variant*="size-s"] > .input
+{
+	height: 16px;
+}
+
+.e-3cbd9189 > .holder[variant*="size-s"] > .input::-webkit-slider-thumb
+{
+	width: 14px;
+	height: 14px;
+}
+
+.e-3cbd9189 > .holder[variant*="size-s"] > .input::-moz-range-thumb
+{
+	width: 14px;
+	height: 14px;
+}
+
+.e-3cbd9189 > .holder[variant*="size-s"] > .value
+{
+	font-size: 11px;
+	min-width: 35px;
+}
+
+.e-3cbd9189 > .holder[variant*="size-m"] > .track
+{
+	height: 6px;
+}
+
+.e-3cbd9189 > .holder[variant*="size-m"] > .input
+{
+	height: 20px;
+}
+
+.e-3cbd9189 > .holder[variant*="size-m"] > .input::-webkit-slider-thumb
+{
+	width: 18px;
+	height: 18px;
+}
+
+.e-3cbd9189 > .holder[variant*="size-m"] > .input::-moz-range-thumb
+{
+	width: 18px;
+	height: 18px;
+}
+
+.e-3cbd9189 > .holder[variant*="size-m"] > .value
+{
+	font-size: var(--dh-size-s);
+	min-width: 40px;
+}
+
+.e-3cbd9189 > .holder[variant*="size-l"] > .track
+{
+	height: 8px;
+}
+
+.e-3cbd9189 > .holder[variant*="size-l"] > .input
+{
+	height: 24px;
+}
+
+.e-3cbd9189 > .holder[variant*="size-l"] > .input::-webkit-slider-thumb
+{
+	width: 22px;
+	height: 22px;
+}
+
+.e-3cbd9189 > .holder[variant*="size-l"] > .input::-moz-range-thumb
+{
+	width: 22px;
+	height: 22px;
+}
+
+.e-3cbd9189 > .holder[variant*="size-l"] > .value
+{
+	font-size: var(--dh-size-m);
+	min-width: 45px;
+}